Articles tagged: Docusaurus
Follow Docusaurus
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/blog/tags/docusaurus/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
Playing with Ollama - Create a blog post analyzer with a local LLM →
A Dockerized devcontainer with two Python scripts: the first sends each Markdown blog post to a local Ollama model to generate tags, the second compares those tags across posts to suggest which articles should link to each other. No cloud API, no manual tagging.
August 31, 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
Automate your GitHub README with your latest blog posts →
Keep your GitHub profile README up to date with your latest blog posts using GitHub Actions. Learn how to set up a scheduled workflow that fetches your RSS feed and updates your README automatically every week.
February 9, 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
Running Docusaurus using Docker →
Streamline Docusaurus blog development! Build a single Docker image for production and use VS Code Dev Containers for consistent, fast, and isolated editing.
November 11, 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
How I used Google Gemini Nano Banana on my blog →
See how Google Gemini Nano was used to generate all the custom images for this blog, including a meerkat mascot.
September 29, 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
Display Docusaurus Blog Posts as Cards - A Step-by-Step Guide →
Learn how to visually showcase your Docusaurus blog posts using customizable card layouts.
September 8, 2025
Displaying related posts below our Docusaurus article →
Enhance your Docusaurus blog by showing related posts beneath each article for better content discovery.
September 3, 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
Show Bluesky comments on Docusaurus and, too, number of likes/reposts →
Integrate Bluesky comments, likes, and repost counts directly into your Docusaurus blog posts.
August 18, 2025
Create our own Docusaurus React component and provide a "Share on Bluesky" button →
Build a custom Docusaurus React component that adds a “Share on Bluesky” button to your blog posts.
August 13, 2025
Encapsulate an entire Docusaurus site in a Docker image →
Deploy your Docusaurus documentation site in production with Docker. Follow this step-by-step guide on creating a highly efficient, multi-stage Docker image.
April 28, 2024
Running your own blog with Docusaurus and Docker →
Take full control of your self-hosted Docusaurus blog running in a Docker container. A step-by-step guide to site customization, volume mounting, and managing content.
February 7, 2024
Some tips and tricks when written articles for Docusaurus →
Boost your Docusaurus articles with essential tips and tricks. Learn how to add Admonitions, apply inline styling, and highlight code lines easily.
February 7, 2024
Running Docusaurus with Docker →
Run Docusaurus with Docker! Follow this easy tutorial to create your Docusaurus Docker image, use docker compose, and get your documentation or blog running fast.
February 4, 2024
How to self-host Matomo →
Self-host Matomo for free and gain GDPR-compliant website analytics. This simple guide covers installation, database setup, and Docusaurus integration.
January 28, 2024
GitHub - Use Actions to deploy this blog →
Stop manual FTP deployments! Learn how to automate your blog's deployment with GitHub Actions. This step-by-step guide shows you how to set up the workflow and use repository secrets for automatic updates on every push.
January 14, 2024
Getting the number of published posts →
Learn the quick and easy way to display the total number of published blog posts on your Docusaurus site using custom components and theme API.
January 8, 2024
Happy New Year 2024 →
Happy New Year 2024! Wish you success, curiosity, and new skills in Docker, Linux, Markdown, and PHP this year.
December 31, 2023
Site creation →
Follow the steps taken to create this Docusaurus blog. Learn about using essential plugins like search, sitemap, image zoom, and adding the Giscus comment system.
November 3, 2023
Welcome →
Built with Docusaurus, this is the welcome post for Christophe Avonture's blog. Find a collection of personal notes on Markdown, Docker, PHP development, and devOps.
November 2, 2023