DOCSEARCHbyAlgolia
Submit Docs

Main Toolkit Documentation

website·Indexed 30 days ago

https://mmtk.maxttc.me

Documentation for Main Toolkit, featuring guides on getting started, creating documents, managing versions, and configuring i18n using Docusaurus.

Tokens
2.3K
Snippets
23
Records
26
Agent score
50%

What's inside Main Toolkit

  2. Use code blocks with syntax highlighting

    Docusaurus supports Markdown code blocks with syntax highlighting. You can optionally add a title to the code block to indicate the filename.
    ```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
  return <h1>Hello, Docusaurus!</h1>;
}

  3. Use React components in Markdown via MDX

    Docusaurus supports MDX, allowing you to export and use React components directly within your Markdown files to create interactive content.
    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> !

  4. Install and initialize a new Docusaurus site

    To create a new Docusaurus site using the classic template, run the npm init command. This process automatically adds the classic template to your project and installs all necessary dependencies.

    Prerequisites:

    • Node.js version 20.0 or above is required. It is recommended to install all dependency-related checkboxes during the Node.js installation process.
    npm init docusaurus@latest my-website classic

  5. Create a new documentation version in Docusaurus

    Docusaurus allows you to manage multiple versions of your documentation. Running the docs:version command copies the current docs folder into a new versioned directory (e.g., versioned_docs/version-1.0) and creates a versions.json file to track them.

    After creating a version (e.g., '1.0'), the site will have two active versions:

    1. The released version (e.g., 1.0) available at /docs/.
    2. The 'current' version (upcoming, unreleased docs) available at /docs/next/.
    npm run docusaurus docs:version 1.0

  6. Translate a documentation file

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

  7. Run the Docusaurus development server

    After generating a site, navigate into the project directory and start the development server. The server builds the website locally and serves it at http://localhost:3000/. The site supports hot-reloading, meaning changes made to files (such as docs/intro.md) will be displayed automatically without a manual refresh.
    cd my-website
npm run start

  8. Create a new documentation page in Docusaurus

    To create a new document, create a Markdown file within the docs/ directory. Docusaurus automatically serves this file at a URL corresponding to its filename. For example, a file created at docs/hello.md will be available at http://localhost:3000/docs/hello.
    # Hello

This is my **first Docusaurus document**!

  9. Update content for specific documentation versions

    Versioned documentation is managed in separate folders. To update a specific version, edit the files within that version's directory. To update the upcoming/unreleased version, edit files in the main docs folder.

    Example mapping:

    • versioned_docs/version-1.0/hello.md $\rightarrow$ updates http://localhost:3000/docs/hello
    • docs/hello.md $\rightarrow$ updates http://localhost:3000/docs/next/hello

  10. Create standalone pages using the src/pages directory

    Add Markdown (.md) or React (.js) files to the src/pages directory to create standalone pages. The file system structure determines the URL path:

    • src/pages/index.js maps to the root URL (/)
    • src/pages/foo.md maps to /foo
    • src/pages/foo/bar.js maps to /foo/bar

  11. Embed images in Docusaurus Markdown

    Images can be referenced using absolute paths (pointing to the static directory) or relative paths (colocated with the Markdown file).
    # Absolute path (static/img/logo.svg)
![Docusaurus logo](/img/logo.svg)

# Relative path
![Docusaurus logo](./img/logo.svg)

  12. Build a Docusaurus site for production

    Docusaurus is a static-site-generator that compiles the site into static HTML, JavaScript, and CSS files. To generate these production files, run the build command. The resulting static assets are output to the build folder.
    npm run build