Community

This document describes the community-driven features in the Docusaurus codebase, including the showcase system for highlighting websites built with Docusaurus and the architecture of the docusaurus.io website itself.

For information about contributing code to Docusaurus, see Contributing. For deployment strategies, see Deployment Options.

Overview

The Docusaurus community features consist of two primary components:

1. Showcase System - A curated collection of websites built with Docusaurus, demonstrating real-world implementations and design patterns.
2. Docusaurus Website - The official docusaurus.io site, which serves as both documentation and a demonstration of Docusaurus capabilities.

The showcase system allows the community to submit their Docusaurus-powered sites for inclusion in the official showcase, subject to validation and quality requirements. The Docusaurus website itself is built using Docusaurus and serves as a "dogfooding" example of the framework's features, including the _dogfooding test directory.

Community Data and Logic Mapping

The following diagram maps community-facing features to their respective code entities within the website/ directory.

Community Feature Mapping

Sources: website/src/data/users.tsx61-69 website/src/data/__tests__/user.test.ts16-17 website/src/pages/showcase/index.tsx39-40 website/src/components/TeamProfileCards/index.tsx81-82 website/src/pages/index.tsx28-29

Showcase System

The Docusaurus Showcase System is a curated collection of websites built with Docusaurus. It is powered by a structured data file, website/src/data/users.tsx, which contains an array of User objects website/src/data/users.tsx61-62 Each entry includes a title, description, preview image (imported via require()), website URL, and tags such as opensource, product, or i18n website/src/data/users.tsx39-57

To maintain quality, the system employs strict validation via Vitest and Joi:

• Schema Validation: The users data test ensures all entries have a description under 120 characters and valid URLs website/src/data/__tests__/user.test.ts18-50
• Image Requirements: Preview images must be local, have a minimum width of 640px, and an aspect ratio no wider than 2:1 website/src/data/__tests__/user.test.ts123-142
• Submission Process: Users are instructed to submit sites via GitHub Discussions rather than direct PRs to facilitate maintenance website/src/data/users.tsx14-15

For a detailed breakdown of the showcase data structure, image validation, and UI implementation, see Showcase System.

Sources: website/src/data/users.tsx1-57 website/src/data/__tests__/user.test.ts16-61 website/src/data/__tests__/user.test.ts123-142

Docusaurus Website

The official docusaurus.io website serves as both the primary documentation source and a living example of Docusaurus's capabilities. It utilizes standard Docusaurus components like Layout and Heading website/src/pages/index.tsx17-23 while implementing custom sections for HeroBanner, TweetsSection, and FeaturesContainer website/src/pages/index.tsx28-203

Website Architecture and Styling

The site demonstrates advanced styling patterns using CSS Variables and CSS Modules. The website/src/css/custom.css file defines the global color palette using HSL composition for both light and dark modes website/src/css/custom.css10-65 Component-specific styles are handled via .module.css files, such as website/src/pages/styles.module.css, which manages the homepage layout and hero animations website/src/pages/styles.module.css8-186

Website Data Flow

Sources: website/src/pages/index.tsx19-25 website/src/data/tweets.tsx18-20 website/src/data/features.tsx1-5 website/src/data/quotes.tsx1-5

For an in-depth explanation of the docusaurus.io website's architecture, styling patterns, and dogfooding configuration, see Docusaurus Website.

Sources: website/src/pages/index.tsx28-73 website/src/css/custom.css10-27 website/src/pages/styles.module.css128-143