A collection of plugins to enhance the Bear Blog reader and writer experience. I mainly use them for my own purposes on my personal website. But of course, you can use them too. To install a plugin, you need to add it to your header, footer or dashboard configuration. Just follow the instructions below.
- Markdown Toolbar – Powerful Markdown editor toolbar with some smart functions buttons
- Blog Search & Infinite Scroll – Client-side search with real-time highlighting and infinite scroll
- Theme Switcher – Dark/light mode toggle that remembers user preference
- Privacy Embeds – GDPR-friendly consent placeholders for external content (YouTube, Maps, etc.)
- Image Lazy Loading – Automatic lazy loading for all images
- Custom Date Formatting – Customizable date format with German month names
- Reply and Like – Adds customizable reply buttons (Mail/Mastodon) and optional styled like button
- Social Comments – Social engagement buttons with live Bluesky/Mastodon reaction counts
- Description: Adds a Markdown toolbar to the post editor with buttons for text formatting, media uploads, and custom HTML blocks. Includes an optional AI-powered alt-text generator using OpenAI's Vision API.
- Installation: This is a dashboard script. Go to Dashboard -> Settings and add the following URL to the
Custom dashboard Javascriptfield:<script src="https://flschr.github.io/bearblog-plugins/markdown-toolbar.js"></script>
Uses OpenAI's gpt-4o-mini model to generate image descriptions. Costs ~$0.001 per image. Your API key is stored in localStorage, use a dedicated key with spending limits for safety and do not use this feature on shared computers.
On iOS, the "Smart Clipboard" feature triggers a paste permission popup. You can disable this feature in the toolbar settings if this becomes annoying.
- Description: Implements a client-side search for your
/blogpage with a floating search button and real-time highlighting. It also adds an "infinite scroll" functionality for your post list. See it in action on my personal website. - Installation: Add the following code to your
Custom footer content:<script src="https://flschr.github.io/bearblog-plugins/search.js" defer></script>
- Description: A two-part script for a seamless dark/light mode theme switcher that saves the user's choice for future visits.
- Installation: This requires adding an element with
id="theme-toggle"to your theme and then adding the two scripts below. See it in action on my personal website.- Add this to
Custom <head> contentto prevent theme flashing:<script src="https://flschr.github.io/bearblog-plugins/theme-switch-head.js"></script>
- Add this to
Custom footer contentto handle the click event:<script src="https://flschr.github.io/bearblog-plugins/theme-switch-footer.js" defer></script>
- Add this to
- Description: Replaces external iframes (videos, maps, etc.) with privacy-friendly placeholders. Users must click to load content, preventing automatic data transfer to third-party providers. Supports YouTube (auto-switches to youtube-nocookie.com), Google Maps, Vimeo, Dailymotion, Spotify, SoundCloud, and Arte. Automatically detects browser language (German/English). See it in on this page.
- Installation: Add this to
Custom <head> content(not footer!) to block iframes before the browser's preload scanner can see them:<script src="https://flschr.github.io/bearblog-plugins/privacy-embeds.js"></script>
- Description: Improves page load performance by automatically adding
loading="lazy"to all images within your blog's main content area, so they only load when they are about to be viewed. - Installation: Add the following code to your
Custom footer content:<script src="https://flschr.github.io/bearblog-plugins/lazy-load.js" defer></script>
- Description: Overwrites Bear Blog's default date formatting. You can easily customize the date format (e.g., "18. Dez 2025") by editing the
format_stringvariable inside the script. This script adds German month names and date formating. - Installation: Add the following code to your
Custom footer content:<script src="https://flschr.github.io/bearblog-plugins/date.js" defer></script>
- Description: Adds reply buttons (Mail/Mastodon) and an optional styled like button that replaces Bear Blog's native upvote. Mastodon replies can be automatically threaded under the original toot where you shared the article. Supports German/English. See it in action on my personal website.
- Installation: Add to
Custom footer content:<script src="https://flschr.github.io/bearblog-plugins/reply-and-like.js" data-email="your@email.com" data-mastodon="@yourhandle@instance.social" data-like data-lang="de" defer></script>
| Attribute | Required | Description |
|---|---|---|
data-email |
Yes | Your email address for the reply button |
data-mastodon |
No | Your Mastodon handle (e.g., @user@instance.social) |
data-like |
No | Show styled like button instead of native upvote |
data-lang |
No | Language: de or en (default) |
To customize the like button text use: data-like="Like|Liked!" (= text before|after click).
To enable readers to reply directly to the Mastodon toot where you shared an article (instead of creating a new mention), the plugin automatically checks multiple sources for the toot URL (in this order):
Method 1: Automated via bearblog-automation (Recommended) If you use the bearblog-automation social bot, it can automatically maintain a mapping file. The plugin will fetch this file from GitHub and automatically find the correct toot URL for each article.
The social bot should create/update a mastodon-mappings.json file in the automation repository with this structure:
{
"https://fischr.org/article-slug/": "https://mastodon.social/@fischr/123456789",
"https://fischr.org/another-article/": "https://mastodon.social/@fischr/987654321"
}The mappings are cached in localStorage for 1 hour to minimize HTTP requests. To use a different mappings URL, add data-mastodon-mappings-url="https://your-url/mappings.json" to the script tag.
Method 2: HTML Comment Add this comment anywhere in your article content:
<!-- mastodon: https://mastodon.social/@yourhandle/123456789 -->Method 3: Link Element Add this in your article's HTML:
<link rel="mastodon-reply" href="https://mastodon.social/@yourhandle/123456789">Method 4: Script Attribute (Manual Override) Set it directly on the script tag (useful for testing):
<script src="..." data-mastodon-url="https://mastodon.social/@yourhandle/123456789" ...></script>When a Mastodon toot URL is found, the reply button uses Mastodon's /interact endpoint to create a proper threaded reply. Without it, the button falls back to creating a new toot with a mention.
.reply-interaction-wrapper
.reply-buttons-container
.reply-button
.reply-button-like
.reply-button-like.liked
.reply-button-mail.
.reply-button-mastodon- Description: Social engagement buttons that show live reaction counts from Bluesky and Mastodon. Includes an optional like button that enhances Bear Blog's native upvote. See it in action on my personal website.
- Installation: Add to
Custom footer content:Or without the mail button (only Bluesky/Mastodon):<script src="https://flschr.github.io/bearblog-plugins/social-comments.js" data-email="your@email.com" data-like defer></script>
<script src="https://flschr.github.io/bearblog-plugins/social-comments.js" data-services="bluesky,mastodon" data-like defer></script>
| Attribute | Required | Description |
|---|---|---|
data-email |
No | Your email for the mail button (only needed if mail service is enabled) |
data-like |
No | Show like button (uses Bear Blog's native upvote) |
data-mastodon |
No | Your Mastodon handle for reply threading |
data-services |
No | Comma-separated list: bluesky,mastodon,mail (default: all) |
data-mappings-url |
No | Custom URL for mappings.json |
Custom button texts: data-like="Like|liked|and you liked" and data-conv="Start|X comments|X reactions|Share|1 comment".
The plugin finds your social posts via meta tags or bearblog-automation's mappings.json:
<meta name="bsky-post" content="https://bsky.app/profile/you.bsky.social/post/abc123">
<meta name="mastodon-post" content="https://mastodon.social/@you/123456789">.social-reactions-wrapper, .social-reactions-buttons, .social-reactions-button, .sr-button-like, .sr-button-bluesky, .sr-button-mastodon, .sr-button-mail
If you want to report a bug, have ideas for great features, or just want to say thank you, I'd love to hear from you! Feel free to catch me on Mastodon.
This repository is licensed under the WTFPL License. Feel free to fork and customize for your own blog!