Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/remorses/dokz
Effortless documentation with Next.js and MDX
https://github.com/remorses/dokz
documentation generator mdx
Last synced: 2 months ago
JSON representation
Effortless documentation with Next.js and MDX
- Host: GitHub
- URL: https://github.com/remorses/dokz
- Owner: remorses
- Created: 2020-04-10T17:04:38.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-11-13T15:11:18.000Z (over 1 year ago)
- Last Synced: 2024-01-23T22:05:34.797Z (5 months ago)
- Topics: documentation, generator, mdx
- Language: TypeScript
- Homepage:
- Size: 10.1 MB
- Stars: 463
- Watchers: 6
- Forks: 40
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Lists
- awesome-list - dokz
- awesome-stars - remorses/dokz - Effortless documentation with Next.js and MDX (TypeScript)
- awesome-stars - remorses/dokz - Effortless documentation with Next.js and MDX (TypeScript)
- awesome-stars - remorses/dokz - Effortless documentation with Next.js and MDX (TypeScript)
- awesome-stars - remorses/dokz - Effortless documentation with Next.js and MDX (TypeScript)
- awesome-chakra-ui - Dokz
- awesome-stars - remorses/dokz - Effortless documentation with Next.js and MDX (documentation)
README
Effortless documentation with Next.js and MDX
**Warning**: this project is no longer maintained, consider using [Nextra](https://github.com/shuding/nextra) or [Notaku](https://notaku.website) (suppports docs site grneration from Notion docs).
## Sponsor:
[**Notaku**](https://notaku.so)
[](https://notaku.so)
🔥 Features
- File based routing
- SideBar automatically generated from mdx paths
- Table of contents generated from headings
- Dark Mode
- Preview React Components inside jsx code blocks
- Can be integrated with existing Nextjs app
## Quick Start
We recommend creating a new Dokz app using `create-dokz-app`, which sets up everything automatically for you. To create a project, run:
```bash
npm init dokz-app
# or
yarn create dokz-app
```
After the installation is complete run `npm run dev` to start the development server. Try editing `pages/index.mdx` and see the result on your browser.
## Manual Setup
> warning: you should use `npm init dokz-app` if you don't have an existing next application
You can also install `dokz` in an existing nextjs application:
```bash
npm install dokz @emotion/react @chakra-ui/react @emotion/styled framer-motion
```
Add the dokz provider to the main nextjs entrypoint
```jsx
// _app.jsx
import { DokzProvider } from 'dokz'
import { ChakraProvider } from '@chakra-ui/react'
import React from 'react'
export default function App(props) {
const { Component, pageProps } = props
return (
}>
)
}
```
Add `withDokz` in the `next.config.js` file
```js
const { withDokz } = require('dokz/dist/plugin')
module.exports = withDokz()
```
Create a new mdx document inside tha `pages` folder
```md
# Heading
Ullamco ipsum id irure do occaecat minim. Cupidatat exercitation magna sit sunt aliqua voluptate excepteur amet dolor ea do. Consectetur veniam deserunt ullamco irure ullamco. Voluptate magna tempor elit voluptate velit enim dolor nulla sit fugiat exercitation. Anim deserunt Lorem aliquip cillum duis deserunt consequat sit culpa commodo.
> Node this is important
## Subjeading
Quis anim minim ullamco aliquip excepteur do pariatur eiusmod duis eu non. Duis deserunt Lorem nulla non duis voluptate dolore et. Do veniam mollit in do ad id enim anim dolore sint labore quis consequat.
```
To start developing your application run `npm run dev`. This starts the development server on `http://localhost:3000`.
Visit `http://localhost:3000` to view your application.