Directory Structure
Relevant source files
The following files were used as context for generating this wiki page:
The SuperClaude Website is a documentation-centric React application built using Create React App. Its directory structure is designed to support a decoupled architecture where technical documentation resides in the public/ directory as static Markdown files, while the src/ directory contains the logic for rendering, routing, and UI components. This structure facilitates a "Documentation-as-Code" workflow, allowing the framework's documentation to be updated independently of the website's core UI logic.
The project utilizes automated scripts to bridge the gap between static content and the React frontend by generating metadata maps during the build process.
Sources: README.md:28-34, package.json:28-32
Core Project Root
The root directory contains configuration files for the build system, deployment, and dependency management.
| File / Directory | Purpose |
|---|---|
.github/workflows/ | GitHub Actions for automated deployment to GitHub Pages. |
netlify/ | Contains serverless functions, such as get-contributors.js. |
public/ | Static assets and the core documentation Markdown files. |
scripts/ | Utility scripts for fetching documentation and generating metadata. |
src/ | React application source code. |
package.json | Project dependencies and lifecycle scripts (prestart, prebuild). |
netlify.toml | Netlify deployment configuration and URL redirection rules. |
Sources: README.md:30-34, package.json:1-40, netlify.toml:1-12
Public Assets and Documentation (public/)
The public/ directory acts as the web root for static assets. Most importantly, it houses the docs/ subdirectory, which is the source of truth for the website's content.
Documentation Hierarchy
Documentation is organized into categorical subdirectories. A script reads these directories to generate a structured map used for navigation.
The diagram above illustrates how Markdown files are categorized within the public/docs directory to facilitate organized retrieval.
Sources: scripts/generate-docs-map.js:6-14, README.md:32
Source Logic (src/)
The src/ directory contains the React implementation. It is organized into functional modules including components, hooks, context, and pages.
Application Routing and Layout
The App.js file defines the primary navigation structure and layout logic.
This flow shows the hierarchical nesting of providers and the routing paths defined in the application.
Sources: src/App.js:19-49
Documentation Loading System
A specialized hook, useDocumentationLoader, handles the retrieval of Markdown content from the public/ folder based on URL parameters.
The sequence diagram demonstrates how the application resolves a URL into a static file request using the generated documentation map.
Sources: src/hooks/useDocumentationLoader.js:5-41, src/pages/DocViewerPage.js:23-28
Build and Scripting Utilities
The repository includes scripts to automate the generation of documentation metadata, ensuring the UI stays in sync with the file system.
generate-docs-map.js: Iterates throughpublic/docs/, extracts titles from H1 headers in Markdown files, and writes a JSON map tosrc/docs-map.json.- Lifecycle Integration: The
package.jsonfile configuresprestartandprebuildhooks to run these scripts automatically, ensuring thedocs-map.jsonis always current before the React app compiles.
Sources: scripts/generate-docs-map.js:16-52, package.json:28-29
Conclusion
The SuperClaude Website's directory structure prioritizes maintainability by separating static documentation content from React components. By using public/docs as a repository for Markdown and scripts/ to generate navigation metadata, the project achieves a dynamic documentation experience while maintaining the simplicity of static file management._