Neorepo uses Contentlayer and MDX to host docs.
mdx file inside
your-neorepo/content/docs folder will get picked up in the docs. The files and folder structure will be displayed on the left sidebar. For example, the current docs page you're on looks something like this:
neorepo/ content/ docs/ 100-getting-started/ 100-setup.mdx 200-environment.mdx 300-run-app.mdx 200-features/ 100-database.mdx 200-auth.mdx 300-emails.mdx 400-onboarding.mdx 500-organization.mdx 600-payments.mdx 700-analytics.mdx 800-documenation.mdx 400-contributing.mdx
You'll notice each file and folder is prefixed with a number and a dash (ex:
300-). This number is used to sort the files into the right display order.
Out of the box, the docs page supports all basic Markdown.
single line code blocks
Multi line code blocks
The following code generates the red text below it
<div className="text-red-500"> This is red text </div>
This is red text
Callout component to see how you can write more complex React with props with MDX. By passing a variant to this component, we can display different types of callouts in the documenation.
These callouts were generated with this exact code in the MDX file.
<div className="flex flex-col space-y-2"> <Callout variant="info">This is an informational callout</Callout> <Callout variant="success">This is a success callout</Callout> <Callout variant="warning">This is a warning callout</Callout> <Callout variant="danger">This is a danger callout</Callout> </div>