DocuxLab

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.

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

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

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.

Le dôme est français je crois

It is important to take into account, when making your choice, that if you have a rich text / markdown option, you should check that switching between the two does not add any unnecessary slashes ( / ), as some systems include this bug.

The only thing it’s missing is a standalone export for GitHub Pages

Thank for your work

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.

⏰ 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

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.

🚧 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

🎉 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

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

🧩 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

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

🐐 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

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

🌳 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

Thanks for the tip @avonture.be — I gained over 92% of space, going from 25 MB down to 1.8 MB!

Thank for your work !

Hi @eliostruyf.com thanks for your work

I’m currently learning demos.js for a conference where I’ll be presenting Docusaurus and Frontmatter CMS. I haven’t finished reading the documentation yet, but I was wondering if it’s possible to make an export to read directly from a repository?

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.

🦖 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

Thank you, Christophe, for using my component — it really makes me happy.

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.

🚀 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

Thank you so munch @avonture.be it’s very great idea !!!

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.

💡 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

Amazing !!! I love that @avonture.be

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.

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

And Custom thème !!!

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

🚀 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

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.

🔥 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

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

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

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

💡 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

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

I understand — to be honest, it was a clumsy way to reach out and highlight the excellent work done by my friend Christophe avonture www.avonture.be, and just a tiny bit of mine 😅🥹 docuxlab.com
Have a Nice day
Belle fin de journée ;)

You can talk about the latest great contributions from the Docusaurus community this week 😜😜

Appreciate it Christophe, this pushes our #Docusaurus to the next level! Thank you so munch is amazing.