souporserious / documenting-systems-in-nextjs

Case study of how to build a documentation system in Next.js using TS Morph.

Home Page:https://documenting-systems.vercel.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Documenting Systems In Next.js

This repo is an example of how to document a system of components, hooks, utilities, and themes in Next.js using TS Morph.

Features

♻️ Fast Refresh for everything

πŸ“ MDX for mixing Markdown and JSX

πŸ€– Component, hook, and utility doc generation

🎨 Theme and design token doc generation (Not implemented)

πŸ–Ό Server rendered live code examples

πŸ•Ή Playground powered by Monaco Editor with Go to Definition

πŸ‡ Quick links to source code in development and production

🌈 CLI for easily adding new features

πŸ”€ Theme, component, hook, and utility relationships (Not implemented)

πŸ“Έ Screenshot diffing (Not implemented)

Development

pnpm install
pnpm dev

This will start the development servers. One server handles gathering and caching the data while the other is a NextJS server that serves the site.

When debugging data gathering, you can use the pnpm dev:data --debug command to start the data server in debug mode.

About

Case study of how to build a documentation system in Next.js using TS Morph.

https://documenting-systems.vercel.app/


Languages

Language:TypeScript 94.8%Language:JavaScript 3.0%Language:CSS 2.1%