Series articles: Creating Docusaurus components
Custom components, hooks, layouts, and reusable UI for your Docusaurus site.
📄 View this series as plain MarkdownFollow the "Creating Docusaurus components" series
They land in your feed reader on their own — no account, no email address, nothing to unsubscribe from. Paste this URL into your reader:
https://www.avonture.be/series/creating-docusaurus-components/rss.xmlNo feed reader yet? Start here — it takes two minutes.
Let Readers Flag Issues — A Multi-Type Feedback Widget for Docusaurus →
Build a secure, SSR-safe reader-feedback widget for your Docusaurus blog — text selection, 4 feedback types, PHP API with HMAC nonce, rate limiting, deduplication, admin dashboard, and email notifications.
October 29, 2026
Drawing a Map of My Own Blog →
Build an interactive map of your whole Docusaurus corpus — every article as a bubble wearing the site's mascot, sized by how many other posts link to it, positioned by a force-directed layout that runs at build time in Node so the browser never ships d3-force. Includes the plugin, the canvas component, and the plain-list fallback that keeps the page usable with JavaScript disabled.
October 8, 2026
The Third Door: A Floating Chat Bubble, and the Feature Nobody Could Find →
A feature your visitors cannot find does not exist. This article adds a floating "Ask my blog" bubble to a Docusaurus site — a third entry point into the same question index, and the first one that needs no prior knowledge. Includes the overlay mutual-exclusion trick that keeps two independent floating dialogs from ever opening at once.
October 5, 2026
Ask My Blog: Turning 259 Articles Into 2,160 Searchable Questions →
A local LLM reads every article on your blog and writes the questions a developer would actually type into a search bar, each one mapped to the exact heading that answers it. The result is a build-time question index searched with plain BM25 in the browser — no embeddings, no API key, no vector database. Full pipeline, plugin and component included.
September 28, 2026
Add a "Copy as Markdown" Button to Your Docusaurus Blog →
Build a "Copy as Markdown" button and a "View raw" link for your Docusaurus blog posts — a build-time plugin that writes a plain-Markdown mirror next to every article, plus the tiny React component that fetches it and copies it to the clipboard. Full source included.
September 10, 2026
Shake Your Phone, Startle the Meerkat →
A ninth easter egg for this blog, built for readers on a phone: shake it — in Chrome or in the installed PWA — and the meerkat mascot takes over the full screen, startled, for about two seconds. Covers the devicemotion 'jerk' math behind shake detection, the three-phase overlay animation, how to test it from a desktop DevTools console with no accelerometer at all, and a real bug caught along the way — an AI image generator that drew a transparent-background placeholder as literal opaque pixels instead of real alpha.
August 27, 2026
Your Blog Is Unreadable to an AI. Here Is the Fix. →
A growing share of your readers arrive through an AI assistant — and what they get is your HTML, wrapped in navigation, React widgets and collapsed accordions. This article generates a plain-Markdown mirror of every article, a /llms.txt index, and per-series full-text bundles, by degrading the MDX source rather than converting the rendered HTML. Includes the fallback rule that makes the export impossible to break.
August 24, 2026
Adding Reader Reactions to Your Docusaurus Blog →
Build a fully working "Was this article helpful?" widget for your Docusaurus blog. Step-by-step guide covering the PHP backend, React component, CSS module, Docusaurus swizzle, and an admin dashboard — everything you need to reproduce it from scratch.
July 27, 2026
AI-Powered Code Tooltips in Docusaurus — Explain Like I'm Five →
Add hover tooltips to tricky code lines in your Docusaurus blog — powered by Claude, generated at build time, zero browser latency. Covers the remark plugin, the React renderer, and the CLI script.
July 20, 2026
Meerkat Mischief: Sprinkling Easter Eggs Across my Blog →
A tour of eight small, discoverable easter eggs added to this Docusaurus blog — a hidden ASCII-art meerkat in the page source, a Konami-code sprite run, a console.log wink, a tab-away favicon swap, rotating 404 messages, a hidden sitemap comment and more — plus the real bugs (key-repeat, an AZERTY keyboard mismatch, a wrong emoji, a postBuild race condition, a blurry favicon) caught along the way.
July 13, 2026
Bring Your CLI Tutorials to Life with a Typewriter Terminal →
Add a typewriter animation to your Docusaurus Terminal component — command lines typed character-by-character, output lines appearing in sequence, with a blinking cursor and a click-to-skip escape hatch. Three new props, zero breaking changes.
June 22, 2026
How to indicate AI-assisted content in a Docusaurus blog →
A step-by-step guide to show when a blog post has been written with the help of an AI like Google Gemini, by adding an icon and an author.
March 9, 2026
Introducing the ProjectSetup Component - A Standardized Way to Share Project Structures →
Learn how to use the new ProjectSetup component to easily share project structures in your Docusaurus blog posts, complete with interactive file snippets and automated setup scripts.
February 23, 2026
Automating TL;DR Summaries with Gemini AI →
Improve your reader's experience by automatically generating concise TL;DR summaries for your blog posts using Google's Gemini AI and Python.
February 16, 2026
Tags management in Docusaurus →
Automate Docusaurus tag management with this Python script. Clean up duplicates, fix casing, and merge tags safely across hundreds of Markdown files via Docker.
February 2, 2026
Running some checks on your Docusaurus images →
A Python script to verify lazy loading and size of images in your Docusaurus site using Playwright and BeautifulSoup.
January 26, 2026
Best Practice - Customizing the Docusaurus RSS Feed for Full Content & Images →
Upgrade your Docusaurus blog's RSS file. Write a plugin to disable the basic feed and include full article content, images and enhanced metadata for better readers.
December 7, 2025
Inject ASCII Art in any HTML pages rendered by Docusaurus →
Inject an ASCII-art banner into every generated Docusaurus HTML page using a lightweight postBuild plugin. Appears in page source or can be rendered visibly.
November 23, 2025
A Docusaurus component that alerts readers the article is over a year old →
Displays a warning banner when the page content is over a year old
October 3, 2025
A component for showing code snippets in a Docusaurus blog →
Learn how to build a custom React component to embed dynamic code snippets in your Docusaurus blog for a more interactive reader experience.
September 24, 2025
Creating a search&replace plugin for Docusaurus →
Automatically replace “markdown” with “Markdown” across all your content to keep your posts consistent.
September 18, 2025
Providing a go to the top button in Docusaurus posts →
Learn how to easily add a "go to the top" button, often with a fun animated icon, to your Docusaurus blog posts using a custom React component and theme override.
September 12, 2025
Organize Your Docusaurus Content with a Custom Series Component →
Learn how to group related Docusaurus blog posts into a seamless reading experience using a custom Series component.
September 9, 2025
Overrides the generation of img tags with Docusaurus →
Learn how to customize the rendering of <img> tags in Docusaurus for enhanced control over image output.
August 27, 2025
Change how Docusaurus will create img tags →
Customize the way Docusaurus generates <img> tags to better control image rendering and behavior.
August 21, 2025