This docs-template provides a starting point for creating project documentation using Docusaurus 2 and Tailwind CSS. This README covers how to use the template, contribute to its development, and follow best practices.
- TailwindCSS integration
- Dark-mode
- Mobile & desktop ready
- Optional integrations:
- Algolia search
- Google Tag Manager
- Google Analytics
- No homepage
- No footer
- Social links and other useful Usher links at the navigation bar
- Use the repository as a GitHub template β RECOMMENDED, or
- Download and extract the ZIP file, or
- Perform a shallow clone to create a new project without inheriting the template's Git history.
Conveniently, most parts of this template that needs to be changed are accompanied by an INITIAL TODO
comment. Read this README before, then find them all on your project to change accordingly.
Example:
{
// ...
title: "My Usher Site", // INITIAL TODO
// ...
}
For further instructions on how to customize this template, we've provided a guide inbuilt in this repository. You'll be able to see it by running it and navigating to http://localhost:3000 or the URL you chose to deploy it.
We encourage you to contribute by:
- Components that are useful for many documentation projects.
- Improvements to the configuration for better usability.
- Better comments to make our default tooling more accessible.
- Poor DX or any other issues that cause friction.
- Bug reports.
Below here is a basic structure to maintain at your docs README
This is the home of {project} docs! Here, we aim to help our users make the best of it, so they may {brief explanation of what the project helps them achieve}.
{donβt forget to link the original project repository, if it exists}
This website is built using Docusaurus 2, a static website generator.
$ pnpm install
$ pnpm start
This command starts a local development server and opens a browser window. Most changes are reflected live without having to restart the server.
- Store content in the
docs
directory, supporting.md
and.mdx
files. Learn more β - Configure each folder metadata accordingly, using
_category_.json
or_category_.yml
. Learn more β - Utilize frontmatter options for configuration and customization. See the API here β
- Set a specific page as the main page [link] (if you do not intend to create a dedicated homepage. Otherwise, to create a homepage learn more here)
- Configure header navigation items in the
docusaurus.config.js
file. Learn more β - Create multiple sidebars by updating
sidebars.js
according to your docs folder structure. Learn more β
Example of a tree structure in the docs
folder:
docs
βββ getting-started
β βββ introduction.md
β βββ installation.md
βββ guides
βββ configuration.md
βββ customization.md
Using the autogenerated sidebar:
module.exports = {
sidebars: {
gettingStarted: [
{
type: 'autogenerated',
dirName: 'getting-started',
},
],
guides: [
{
type: 'autogenerated',
dirName: 'guides',
},
],
},
};
This will generate separate sidebars for the getting-started
and guides
folders. Adjust the header navigation items in docusaurus.config.js
accordingly.
Ensure you update both the sidebars.js
file and the header navigation items in docusaurus.config.js
when changing the documentation structure, providing a seamless navigation experience for users.
- Change fonts following instructions at
tailwind.config.ts
- Modify typography settings at
tailwind.config.ts
- Update colors at
tailwind.config.ts
- Apply component-specific styles at specific
module.css
files - Use mdx and React. Learn more β
- Swizzle built-in components or update our modifications at
src/theme/*
files. Learn more about Swizzling β - Develop custom React pages at
src/pages
. Learn more β
- When swizzling components, add comments to indicate where changes occurred
- Follow Docusaurus-specific best practices for versioning and customization. Learn more β
$ pnpm build
This command generates static content into the build
directory and can be served using any static contents hosting service.
{Insert docs deployment guidelines here; i.e.: how to deploy with vercel}
e.g.:
To deploy your documentation with Vercel, follow these steps:
- Sign up for a Vercel account if you don't have one.
- Install the Vercel CLI by running
npm i -g vercel
. - Run
vercel login
in your terminal and log in using your Vercel account. - In your project directory, run
vercel
to initiate the deployment process. Follow the prompts to link your project to Vercel. - Once your project is linked, Vercel will deploy your documentation. After the deployment, you'll receive a URL to access your live documentation.
For subsequent deployments, run vercel --prod
in your project directory to deploy your documentation to the production environment.
For more information on Vercel deployments, consult the official Vercel documentation.
We welcome contributions to improve and expand the documentation for {project-name}. Here's how you can contribute:
- Report issues: If you find any errors, inconsistencies, or areas that need improvement, please open an issue on the GitHub repository. Provide a clear description of the issue and suggest a possible solution or improvement.
- Suggest enhancements: If you have ideas for new sections, topics, or content that would be helpful to others, please share your suggestions by opening an issue on the GitHub repository.
- Submit a pull request: If you'd like to contribute directly by fixing an issue or adding new content, please fork the repository, make changes, and submit a pull request. Ensure your changes follow the documentation guidelines and best practices outlined in the README.
Note: If you want to contribute to the {project-name} source code, please visit the repository and follow the contribution guidelines.