Articles tagged: Component / UI
Follow Component / UI
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/component/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
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
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
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
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