DOCSEARCHbyAlgolia
Submit Docs

Components to Markdown (C2M)

website·Indexed 30 days ago

https://components-to-markdown.vercel.app/

A tool for generating component documentation in Markdown. C2M features a CLI, a library for programmatic usage, and a customizable templating system powered by Handlebars, including default templates like Brachiosaurus and Stegosaurus.

Tokens
6.5K
Snippets
36
Records
61
Agent score
72%

What's inside Components to Markdown

  4. Generate Markdown documentation from React components

    The components-to-markdown tool allows developers to automatically generate documentation for their components. It supports both a CLI for quick generation and a library import for integration into JavaScript/TypeScript code. The generated Markdown is compatible with frameworks like Docusaurus and Storybook, or can be used directly in a git repository.

  5. Use the Brachiosaurus default template for Docusaurus documentation

    Brachiosaurus is the default template used by components-to-markdown (C2M) when no specific template is defined. It is specifically designed to leverage native Docusaurus features and works with the classic theme. While optimized for Docusaurus, it can be used for other projects, though some specific functionality may be missing.

  6. Create and use a custom Handlebars template in C2M

    C2M uses the Handlebars template engine for customization. To use a custom template, create a .hbs file following Handlebars formatting. You can start from scratch or modify existing templates from the C2M GitHub repository. Once the template is created, specify the path to the file using the --template flag in the CLI.
    npx components-to-markdown@latest -w \
  -o ./output-path \
  --template ./my-template.hbs \
  ./components-path

  7. Update multiple components in one file using Component Markers

    Use Component Markers when a single output file contains documentation for multiple components. By specifying the component name in the marker, C2M can target the correct section for each component.

    To use this, you must also configure the outputFileName hook to ensure multiple components target the same output file.

    # Components

## Button
Below is the documentation for the `<Button />` component:

<!-- c2m:begin:Button -->
<!-- c2m:end:Button -->

## Card
Below is the documentation for the `<Card />` component:

<!-- c2m:begin:Card -->
<!-- c2m:end:Card -->

  8. Use C2M markers within HTML or JSX tags

    When markers are needed inside HTML or JSX structures (e.g., within a div or a Docusaurus TabItem), use the span element with data-c2m attributes instead of HTML comments.
    <div className="container">
  <div className="component-doc-block">
    <span data-c2m="template:begin" />
    <span data-c2m="template:end" />
  </div>
</div>

{/* For specific components: */}
<span data-c2m="template:begin:ComponentName" />
<span data-c2m="template:end:ComponentName" />

  9. Integrate Components to Markdown as a library

    Install components-to-markdown as a development dependency to use the componentsToMarkdown function within a custom Node.js script. This allows for programmatic control over the source paths and output destination.
    npm install components-to-markdown --save-dev
    // comp2mark.js
import { componentsToMarkdown } from 'components-to-markdown';

componentsToMarkdown({
  sources: ['./components-path'],
  output: './output-path',
});
    node comp2mark.js

  10. Set up the components-to-markdown development environment

    To contribute to the project, ensure you have Node v16.x.x and Yarn v1.x.x installed. The project uses a fork-and-pull model where the local main branch should track the original upstream repository.
    # 1. Fork and clone the repo
# 2. Install dependencies
yarn install

# 3. Configure upstream remote to keep main branch updated
git remote add upstream https://github.com/megatroom/components-to-markdown.git
git fetch upstream
git branch --set-upstream-to=upstream/main main

# 4. Create a feature branch for your PR
git checkout -b your-branch-name

  12. Ways to contribute to components-to-markdown (C2M)

    C2M is an open-source project that accepts contributions in several forms: sharing the project with other developers, starring the repository on GitHub to increase visibility, contributing code (features, bug fixes, and dependency updates), or improving documentation (fixing typos, writing tutorials, providing clarifications, and translations).