DOCSEARCHbyAlgolia
Submit Docs

Docusaurus Documentation

website·Indexed 29 days ago

https://ts-docs-website.netlify.app

A static-site generator (Jamstack) used for building documentation websites. Features include support for Markdown and React pages, i18n configuration, versioning, and a built-in blog plugin. Documentation covers basic tutorials, creating documents and blog posts, and deploying sites.

Tokens
4.6K
Snippets
50
Records
56
Agent score
72%

What's inside Docusaurus

  1. Create a blog post in Docusaurus

    To create a blog post in Docusaurus, create a markdown file within the blog/ directory. The filename should follow the date-slug format (e.g., YYYY-MM-DD-slug.md). Docusaurus automatically generates a dedicated page for the post, updates the blog index page, and integrates it into the tag system and RSS feed. The post is accessible via the slug defined in the front matter (e.g., http://localhost:3000/blog/greetings).
    ---
slug: greetings
title: Greetings!
authors:
  - name: Joel Marcey
    title: Co-creator of Docusaurus 1
    url: https://github.com/JoelMarcey
    image_url: https://github.com/JoelMarcey.png
  - name: Sébastien Lorber
    title: Docusaurus maintainer
    url: https://sebastienlorber.com
    image_url: https://github.com/slorber.png
tags: [greetings]
---

Congratulations, you have made your first post!

Feel free to play around and edit this post as much as you like.

  2. Translate a documentation page

    To translate a document, copy the original markdown file from the docs directory into the corresponding locale folder within the i18n directory. The path follows the pattern: i18n/{locale}/docusaurus-plugin-content-docs/current/{filename}.
    mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/
cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md

  4. Use React components in Markdown via MDX

    Docusaurus supports MDX, allowing developers to export and use React components directly within Markdown files to create interactive documentation.
    export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '20px',
      color: '#fff',
      padding: '10px',
      cursor: 'pointer',
    }}
    onClick={() => {
      alert(`You clicked the color ${color} with label ${children}`)
    }}>
    {children}
  </span>
);

This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !

  5. Translate documentation files for a specific locale

    To translate a document, copy the original markdown file from the docs directory into the corresponding locale folder within the i18n directory. The folder structure must follow the pattern: i18n/{locale}/docusaurus-plugin-content-docs/current/.
    # Example: Translating docs/intro.md to French (fr)
mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/
cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md

  10. Add syntax-highlighted code blocks with titles

    Docusaurus supports Markdown code blocks with syntax highlighting. You can optionally add a title to the code block to indicate the filename or path.
    ```jsx title="src/components/HelloDocusaurus.js"

function HelloDocusaurus() {
  return <h1>Hello, Docusaurus!</h1>;
}

  11. Update content for specific documentation versions

    Docusaurus allows editing versioned documentation independently of the current development version. Files located in versioned_docs/version-X.X/ update the released version's pages, while files in the root docs/ folder update the 'next' (unreleased) version.
    # To update version 1.0:
Edit versioned_docs/version-1.0/hello.md -> affects http://localhost:3000/docs/hello

# To update the upcoming version:
Edit docs/hello.md -> affects http://localhost:3000/docs/next/hello

  12. Prerequisites for installing Docusaurus

    To run Docusaurus, you must have Node.js version 18.0 or above installed. It is recommended to install all dependencies associated with Node.js during the installation process.