Docux is off on holiday! Heading to the Highlands, 9 years after his last visit, to catch up with an old friend: Nessie 🦕 The blog is slowing down for a bit, but we’ll be back with new articles soon! #Holiday #Scotland #Highlands #LochNess #Nessie #Docux #docuxlab #Blog #Docusaurus #Travel #Vacation

Have you ever dreamed of showing content exactly when YOU decide? TimeTimer, my Docusaurus component: future date, fixed date, time range… docuxlab.com/blog/docusau... #Docusaurus #React #JavaScript #MDX #JS #WebDev #DevFr #OpenSource #Frontend #Dev #DocsAsCode #Markdown #SSG #JSX #Coding #Tech

Component TimeTimer | DOCUX

Time-based conditional rendering in Docusaurus: display content on fixed dates or time ranges, with UTC support and custom fallbacks.

docuxlab.com

Part 4 of my #FrontMatterCMS series Stop starting from a blank page. Create content faster with templates, snippets that generate MDX components from dropdown menus, custom buttons that run your scripts, and a better-organized configuration docuxlab.com/blog/front-m... #vscode #docusaurus #cms #mdx

Front Matter CMS: templates, snippets and custom actions | DOCUX

Push Front Matter beyond its configuration: templates, snippets, your own buttons in the panel, and a config split across several files.

docuxlab.com

Part 3 of my Front Matter CMS* series:the daily routine Filter and group your posts by series, merge duplicate tags across the whole blog in one click, preview side by side with the editor... docuxlab.com/blog/front-m... #vscode #docusaurus #webtools #reactjs #cms *tools create by @eliostruyf.com

Front Matter CMS day to day: dashboard, filters and media | DOCUX

Front Matter's dashboard in real use: find any article, filter by series, merge duplicate tags across the blog and manage media without leaving VS Code.

docuxlab.com

Part 2 of my Front Matter CMS series: configuration. The real work isn't the install — it's matching the CMS to your own front matter. Typed fields, self-filling lists, and three file-creation traps nobody documents. docuxlab.com/blog/install... #frontmatter #docusaurus #cms #seo

Install and configure Front Matter CMS on Docusaurus | DOCUX

Wire Front Matter CMS into an existing Docusaurus project: configuration, and above all a content type modelled on your own front matter.

docuxlab.com

Managing a Docusaurus blog by hand-editing front matter? Front Matter CMS turns it into a real form inside VS Code: dashboard, media library, preview... Thanks @eliostruyf.com for your work. New post 👇first in a long dedicated series docuxlab.com/blog/why-fro... #Docusaurus #VSCode #Frontmatter

Why Front Matter CMS with Docusaurus | DOCUX

Front Matter CMS, the VS Code extension that transforms content management in a Docusaurus project: dashboard, content types, preview and media.

docuxlab.com

Le 31 juillet 2025, l’Éthiopie a planté 714,7 millions d’arbres en 12 heures. > Près de 30 millions de personnes ont participé à cette journée record dans le cadre de l’initiative "Green Legacy" pour lutter contre le changement climatique. 🇪🇹🌱

New Docusaurus plugin: build-time image optimization with sharp. Non-destructive, incremental (content-hash cache), cut my deployed images by -49%. docuxlab.com/blog/image-o... #docusaurus #webperf #seo #cleancode #sharp #npm

A Docusaurus Plugin to Optimize Images at Build Time | DOCUX

Build a local Docusaurus plugin that compresses and resizes your images at build time with sharp — non-destructive, incrementally cached, and it cut my deployed images in half (-49%).

docuxlab.com

🦖I finally added ESLint + Prettier to my Docusaurus blog — and the linter instantly caught real bugs: a React hook called conditionally, a missing key, even a comment rendering as visible text on the page 😅 Full write-up 👇 docuxlab.com/blog/eslint-... #Docusaurus #React #ESLint #Prettier #DevTools

#Docker: #ZSH + #fzf = efficiency. Beyond Bash, ZSH offers deep customization. Use fzf to filter lists and trigger actions instantly. My new article explains how to use it with Docker: select containers to open shells, view logs, or delete images via shortcuts like dex or dnuke.

ZSH Functions - Customizing Your Shell for Docker Management | Christophe Avonture

A collection of ZSH functions to enhance your terminal experience, including interactive Docker container management with fzf. Start new sessions, stop containers, and more with ease.

avonture.be

Let's see how to automatically publish the list of your 10 last blog posts to your GitHub profile. The scenario will be: once a week, a GitHub Action will grab your rss.xml, get the last #Docusaurus articles and inject them in your profile. For sure, it's working for every rss; can be Joomla too.

Automate your GitHub README with your latest blog posts | Christophe Avonture

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 e...

avonture.be

⏰ Inspired by my daughter’s Time Timer, I built a React component that shows content only when it matters — using real DOM rendering,0% CSS. Bonus : create amazing Advent calendar ! Perfect for promos, events, and Advent calendars docuxlab.com/blog/docusau... #react #webdesign #Docusaurus #DOM

Component TimeTimer | DOCUX

React component for time-based conditional rendering in Docusaurus. Display content based on fixed dates or time ranges with UTC support, custom fallback dates, and flexible period management.

docuxlab.com

🚧 Turn your 404 page into a UX win! I explain how to customize a 404 page in Docusaurus (swizzle, WebP, dvh/svh, etc.) for a clean and responsive result 👇 docuxlab.com/blog/404-cus... #webdev #Docusaurus #frontend #404page #designweb #seo #googleanalytics #javascript #w3c #nodejs #reactjs #mkdocs

Creating Custom 404 Page | DOCUX

Learn how to build a stylish, responsive custom 404 error page in Docusaurus using swizzle, modern CSS, and optimized WebP images.

docuxlab.com

🎉 New launch! I’ve just opened a community forum about Docusaurus : forum.docuxlab.com It’s a space to discuss technical documentation, share tips, ask questions, and grow our projects together. 👉 Join the discussion #Docusaurus #OpenSource #reactJs #Mkdocs

🧩 New on my blog I built a small component to display GoatCounter views on pages using the JSON API. No external scripts, no flashing — just clean and lightweight 👉 docuxlab.com/blog/goatcou... Thanks @arp242.bsky.social for creating such a great tool! #GoatCounter #analytics #GDPR #docusaurus

GoatCountViews Component | DOCUX

Add a clean view counter in Docusaurus with GoatCounter, the JSON API, and an explicit per-post path (path={metadata.permalink}).

docuxlab.com

🐐 New on my blog! I dive into GoatCounter, a privacy-friendly, open-source alternative to Google Analytics. Simple, ethical, and self-hostable — perfect for anyone who wants to track visitors without invasive trackers. 👉 look > docuxlab.com/blog/goatcou... #OpenSource #Analytics #goatcounter

GoatCounter analytics | DOCUX

Discover GoatCounter (open‑source, cookieless) and 3 ways to integrate it with Docusaurus, including SPA route change tracking.

docuxlab.com

🌳 New on DocuxLab! Check out Trees, a Docusaurus component that displays interactive file trees in your docs — with custom icons, keyboard navigation & more. Perfect for visualizing your project structure! 👉 docuxlab.com/blog/trees-c... #Docusaurus #React #OpenSource #DevTools #treeStructure

Component Trees | DOCUX

Create interactive file and folder trees in your Docusaurus pages with the Trees component. Works with or without custom icons.

docuxlab.com

🦖 Want to automate the formatting of words or phrases in your #markdown content? Automatically replace words with other words or React components. 👉 Learn how it works full code and examples included: 🔗 docuxlab.com/blog/remark-replace-words-plugin #Remark #React #Docusaurus #OpenSource #DevTools

Plugin Remark Replace Words | DOCUX

Automatically replace words with text, icons, or MDX components (Tooltip, buttons…) in your pages/blog/docs with a configurable Remark plugin.

docuxlab.com

🚀 Boost your Docusaurus site UX with a “Scroll to Top” button! Easy to add, lightweight, and fully customizable 💡 👉 Full guide: docuxlab.com/blog/docusaurus-scroll-to-top-button/ #Docusaurus #WebDev #UX #JavaScript #DocuxLab #Frontend #webdesign #css #reactjs

ScrollToTopButton Component | DOCUX

Simple React component adding a floating 'back to top' button with delayed appearance (after scrolling 300px), click animation and smooth scroll behavior in Docusaurus.

docuxlab.com

💡 Did you know your Docusaurus docs can include live-editable React code? With React Live, readers can test & tweak examples right on the page — no external sandbox needed ⚡👩‍💻 👉 Full guide: docuxlab.com/blog/docusau... #Docusaurus #React #Docs #livecoding #reactJS #opensource #webtools #markdown

Tutorial Docusaurus React Live | DOCUX

Practical guide to add interactive react-live code playgrounds in Docusaurus: theme installation, configuration, ReactLiveScope swizzle, and maintainable example patterns.

docuxlab.com

Don't miss out on this! 🚀 Boost your Docusaurus site! DocuxLab components & plugin: 🧑‍💻 Avatar: docuxlab.com/blog/avatarc... 🧱 Columns: docuxlab.com/blog/columns... 🖼️ ImageOnClick: docuxlab.com/blog/imageon... #Docusaurus #WebDev #webdesign #jamstack #reactJS #createyourblog #plugin #docs #masonry

Reusable Avatar Component | DOCUX

A complete tutorial to design and customize an Avatar component in Docusaurus, based on Infima. Includes JS/TS examples, props, advanced integration and best practices.

docuxlab.com

🚀 New on DocuxLab: a Tooltip component for Docusaurus! ✨ Auto flip + arrow alignment ♿ Accessible (ARIA, keyboard) 🎨 Themes: info, success, warning, error 👉 Full article: docuxlab.com/blog/Tooltip... #React #Docusaurus #WebDev #Accessibility #tooltip #webaccessibility #webtools

Tooltip tools | DOCUX

A comprehensive guide to creating a dynamic and accessible Tooltip component in React and Docusaurus, featuring smart positioning and custom styling.

docuxlab.com

🔥 New on my blog: a Skill component with animated progress bars or circles for #Docusaurus! Show off your skills with sleek animated bars or circle ✨ 👉 docuxlab.com/blog/skill-c... #DevUI #OpenSource #webdesign #jamstack #css #blog #StaticSiteGenerator #FrontEndDev #ReactJS #MDX #DevCommunity

Add Skill Bars & Circles | DOCUX

A comprehensive React component for displaying skills as animated progress bars or circles with scroll animations, gradients, and theme support in Docusaurus.

docuxlab.com

New on my blog A Simple Analytics plugin for #Docusaurus! Add privacy-friendly stats to your docs site in seconds 🚀 with @simpleanalytics.bsky.social This case allowed me to test plugin creation, but we could have done it differently. 👉 docuxlab.com/blog/simple-... #DevUI #analytics #docs #seo

Simple Analytics Plugin | DOCUX

A complete tutorial to integrate Simple Analytics into your Docusaurus site with a custom local plugin.

docuxlab.com

💡 New on my blog: a new LogoIcon component for #Docusaurus with iconify !! Add logos in 1 line inside your #React / #MDX pages 🚀 👉 docuxlab.com/blog/logoico... #DevUI #OpenSource @iconify.bsky.social #iconify #webdesign #docuxlab #docusaurus #reactjs

LogoIcon Component | DOCUX

A React component tutorial to easily display Iconify logos in Docusaurus MDX pages without individual imports.

docuxlab.com

Thank you @avonture.be for using my #docusaurus component and for publishing an article about it. And what an article! The 200th on your site! Thank you for this honor ! #meta #reactJS #webdesign #docuxlab

cavo789 🐳@avonture.be · 11mo ago

Adding a #ScrollToTopButton feature on my #Docusaurus website. Now, a nice meerkat will be displayed during the vertical scroll on long articles. Just click on it and you'll jump back to the top with a smooth animation. React component created by @docuxlab.com

My new #Docusaurus component (and plugin) to be able to create a list of articles as part of a series. Also, create a /series and /series/:slug pages to promote them. Creating series will allow authors to cut off very big articles in smaller ones, increase SEO and it's more professional, no? ;)

Organize Your Docusaurus Content with a Custom Series Component | Christophe Avonture

Organize Your Docusaurus Content with a Custom Series Component

avonture.be

🦖 New blog post on #DocuxLab! I’ll show you how to build a reusable Card component in #Docusaurus with #Infima. • a customizable component • modular structure (Header, Body, Footer, Image) • MDX integration 🔗 docuxlab.com/blog/card-co... #WebDev #Tutorial #UI #Design #OpenSource #webdesign

Reusable Card Component | DOCUX

A complete tutorial to create customizable card components in Docusaurus using the Infima CSS framework. Includes React implementation, multiple card variants, and responsive design.

docuxlab.com

Discover my ImageOnClick component ✨ It lets you display an image in full size with a beautiful lightbox effect when clicked: smooth animations, blurred background, and a sleek close button. 👉 docuxlab.com/blog/imageon... #Docusaurus #React #Lightbox #MDX #Component #DevTools #Documentation #UI

Reusable ImageOnClick Component | DOCUX

A complete tutorial to create an interactive image lightbox component in Docusaurus. Includes React implementation, modern CSS animations, and responsive design.

docuxlab.com

✨ New on DocuxLab (Sep 3, 2025) Learn how to build reusable columns components with Docusaurus + Infima. 👉 JS/TS examples, MDX integration, and visual demos included. 🔗 docuxlab.com/blog/columns... #Docusaurus #Infima #React #Frontend #WebDev #DocuxLab

Create a Reusable Columns Components | DOCUX

A complete tutorial to design and customize Columns components in Docusaurus, based on Infima grid system. Includes JS/TS examples, props, advanced layouts and best practices.

docuxlab.com