search

100mslive / 100ms-docs

🔥 Blazing fast 100ms Documentation built with nextjs, preact , mdx , next-mdx-remote
https://docs.100ms.live
MIT License
70 stars 33 forks source link
documentation mdx nextjs

readme


Logo

Discord


If you're here to contribute do check out our Contributing Guidelines & our Code of Conduct

🚀 Getting Started

🔥 Blazing Fast 100ms Docs

To run locally

All docs are written in MDX. This allows usage of React components along with the flavor of Markdown Syntax.

All docs reside in the /docs folder.

📒 Adding Docs

1. To an existing Doc

Suppose you want to add a new section VUE SDK in /v2 docs:

To add docs in the section:

FrontMatter

Every .mdx file would need this

---
title: Getting started in Vue JS // this will be SEO Title
nav: 14 // Ranking of Item in the Sidebar
---

By default Nav is given the value of Infinity it's important to add nav value to order the Sidebar.

But suppose you want to update the order of a doc , then you don't need to change the nav values for all of them. Simply make the nav value in between the preceding and next doc. It can be a decimal value too.

2. To a new Docs (for v3 and soo on)

Suppose we now need a v3 docs

in the file add the following

import redirect from '@/lib/redirect';

export default redirect('/v3/100ms-v3/basics');

This is needed because we need it to route somewhere if someone hits /v3 this would redirect it to /v3/100ms-v3/basics i.e the MDX file /v3/100ms-v3/basics.mdx

Then follow the steps in 1 to add docs to it.

3. Aliasing Repeating Content

So you don't have to copy paste common content multiple times.

  1. Create a new file with a .md extension e.g common/test.md and add your Markdown content or a file with .mdx extension e.g common/test.mdx if you want to embed JSX inside it (make sure to escape these characters <>{} with backslash or use backtick if it's a code snippet if you don't want it to be parsed as JSX).
  2. Import it at the top of the mdx file as a component in PascalCase e.g import Test from '@/common/test.md'
  3. Use the component anywhere within the MDX document e.g <Test />

🥵 Components

Components is what makes this docs standout All Components mentioned are auto imported.

Here's some of them:

1. Note Component

> This will be Success Note Component

<Note type='error'>
  Hello this is Error Note Component
</Note>

// or you can use `warning` type

<Note type='warning'>
  Hello this is Warning Note Component
</Note>

Types available: success,warning,error, white

2. Code

by default all <code></code> will wrapped around <Code /> component this gives us Copy to Clipboard feature.

3. Tabs

<Tabs id="quality-level" items={['Java', 'Kotlin']} />

<Tab id='quality-level-0'>

// Code Block for Java

</Tab>

<Tab id='quality-level-1'>

// Code Block for Kotlin

</Tab>

using the same id as in <Tabs> in the <Tab> component with index is important or it won't work.

4. Codesandbox

Super easy just get the id

<Codesandbox id="ue1k4" />

✅ Do's

❌ Don't

🎨 Customization

Every style of docs is fully customizable and is fully built with CSS Variables.

All CSS Tokens , Baseline , Reset can be found in theme.css

All CSS Variables prefixed with token control the Syntax Highlighting.

📇 Linting

️⃣ Viewing updated release versions on local before pushing changes

🙏🏽 Acknowledgement