Analyzing website traffic while respecting user privacy is an increasing challenge. Goatcounter is an open‑source, cookieless analytics solution that addresses this need. Here's how I integrated Goatcounter with my Docusaurus site, exploring three different approaches including proper tracking for single‑page application (SPA) navigation.
I created the Trees component to display interactive file and folder trees directly in Docusaurus pages. It's perfect for documenting project structure, explaining architecture, or presenting code examples.
I developed this remark/MDX plugin to automatically replace certain words in .mdx/.md content with other text, icons, or even React components (e.g., Tooltip). It's ideal for keeping terminology consistent, adding contextual help, or "styling" recurring keywords.
The plugin walks Markdown/MDX text nodes, skips certain parents (links, headings, code…), merges all + the current section (blog/pages/docs), sorts keys by decreasing length, then replaces with plain text or MDX components. Matching is Unicode‑safe to avoid false positives inside words.
Combined with a Tooltip component, this plugin lets you build a real interactive glossary: authors write plain Markdown, and the plugin replaces terms with rich components (tooltips, icons, buttons) without extra effort.
I created this component to add a fixed floating Back to Top button. It becomes visible after the user scrolls 300px vertically; on click it triggers a smooth scroll to the top while playing a short visual animation on the icon. I kept it simple without public props: customization (threshold, image) is done by editing the source (index.js). My goal was to keep it lightweight and easy to reuse.
I wanted readers to learn faster by allowing them to modify examples inline. The @docusaurus/theme-live-codeblock theme integrates react-live to evaluate JSX in real time.
Benefits I gained:
are everywhere on the web. They are essential for providing contextual information without cluttering the interface. But creating one that is robust, aesthetically pleasing, and above all, accessible, is a real challenge.
I developed this Tooltip component for Docusaurus. It doesn't just display a simple information box; it integrates intelligent positioning logic, an arrow that always stays aligned, and great customization flexibility.
I created the Skill component to display skills as progress bars or animated circles with scroll animations and complete customization.
I've added JSDoc comments in the code to explain each prop and its function. I've never done this before but I think I'll keep this habit.
I created this component to easily display Iconify icons in MDX pages of Docusaurus.
It's particularly useful for displaying logos (GitHub, Airbnb, Google, etc.) without having to import each icon individually.
Want to integrate Simple Analytics into your Docusaurus site and effectively track user navigation in a Single Page Application (SPA) context?
I created this local plugin for Docusaurus to handle the injection of the tracking script and properly track page changes in SPA mode.
It manages the injection of the main script as well as tracking page changes in the context of a Single Page Application (SPA), which is essential for Docusaurus.
This plugin is a local plugin. There's no need to install it via npm or yarn. Simply ensure that the simpleAnalytics folder is located in the plugins directory at the root of your project.
This article is over a year old. The information may be outdated.
With Infima CSS framework, I've created a reusable card component that you can use on your Docusaurus site. With it, you'll be able to customize each card with different colors and sizes. This component allows you to generate all the cards available in Infima as well as "Custom" cards, and you'll be able to create and personalize each card independently.
I designed the component as a set of small components that work together to form the complete cards.
