docs: add table of contents

.circleci/config.yml

@@ -124,7 +124,7 @@ jobs:
       - persist_to_workspace:
           root: ~/welcome-ui
           paths:
-            - docs/out
+            - website/out
 
   # current version deploy for previews
   docs_deploy_preview:
@@ -134,7 +134,7 @@ jobs:
           at: ~/welcome-ui
       - restore_cache:
           key: << pipeline.parameters.cache_version >>-welcome-ui-{{ .Environment.CIRCLE_SHA1 }}
-      - run: node_modules/.bin/netlify deploy --dir=docs/out --alias $CIRCLE_BRANCH
+      - run: node_modules/.bin/netlify deploy --dir=website/out --alias $CIRCLE_BRANCH
 
   # current version deploy for production
   docs_deploy_prod:
@@ -145,7 +145,7 @@ jobs:
       - restore_cache:
           key: << pipeline.parameters.cache_version >>-welcome-ui-{{ .Environment.CIRCLE_SHA1 }}
       - aws-s3/sync:
-          from: docs/out
+          from: website/out
           to: s3://welcome-ui/docs_production
           arguments: |
             --metadata GitCommit=$CIRCLE_SHA1
@@ -166,7 +166,7 @@ jobs:
           name: build w/ prefix
           command: VERSION=$CIRCLE_BRANCH yarn docs:build
       - aws-s3/sync:
-          from: docs/out
+          from: website/out
           to: s3://welcome-ui/docs_production/$CIRCLE_BRANCH
           arguments: |
             --metadata GitCommit=$CIRCLE_SHA1 --delete

package.json

@@ -11,12 +11,10 @@
     "build:types": "lerna run types",
     "build": "yarn webfont:build && yarn build:core && yarn build:packages && yarn build:types && yarn build:docs",
     "check:audit": "/bin/bash -c 'yarn audit --level critical; [[ $? -ge 16 ]] && exit 1 || exit 0'",
-    "check:ssh-error": "tput setaf 1; echo 'Warning ! Your ssh key is not correctly set ( or forwarded if you work on a remote machine )'; tput sgr0",
-    "check:ssh": "ssh-add -L >> /dev/null",
     "clean": "lerna clean",
-    "docs:build": "cd docs && yarn next build && yarn next export",
+    "docs:build": "cd website && yarn && yarn next build",
     "docs:deploy": "yarn && yarn icons:build && yarn build && yarn docs:build",
-    "docs:dev": "cd docs && yarn next -p 3020",
+    "docs:dev": "cd website && yarn dev -p 3020",
     "first:install": "yarn && yarn build && yarn icons:build",
     "homerun": "yarn clean --yes && rm -rf node_modules/ docs/.next/ && yarn cache clean && yarn && yarn build && yarn start",
     "icons:build": "lerna run build --scope @welcome-ui/icons",

website/app/design/[category]/[page]/page.tsx

@@ -1,6 +1,6 @@
 import { Mdx } from '@/build-app/components/Mdx'
-import { getPageContent } from '@/build-app/utils/content'
-import { notFound } from 'next/navigation.js'
+import { getPageContent } from '@/build-app/utils/page-content'
+import { notFound } from 'next/navigation'
 
 type PageProps = {
   params: {

website/app/design/page.tsx

@@ -1,6 +1,9 @@
+import { getDesignPages } from '@/build-app/utils/pages'
 import Link from 'next/link'
 
 export default function Page() {
+  const pages = getDesignPages()
+  console.log(pages)
   return (
     <div>
       Design Home

website/app/docs/[category]/[page]/page.tsx

@@ -1,3 +1,34 @@
-export default function Page() {
-  return 'Docs Category Page'
+import { Mdx } from '@/build-app/components/Mdx'
+import { TableOfContent } from '@/build-app/components/TableOfContent'
+import { getPageContent } from '@/build-app/utils/page-content'
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+
+type PageProps = {
+  params: {
+    page: string
+    category: string
+  }
+}
+
+export default function Page({ params }: PageProps) {
+  const { page, category } = params
+
+  const { content, tree } = getPageContent(`${category}/${page}.mdx`, true)
+
+  return content === 'Not Found' ? (
+    notFound()
+  ) : (
+    <div>
+      <div>
+        <Link href={`/docs/${category}`}>Go to main page</Link>
+      </div>
+      <div style={{ display: 'flex' }}>
+        <main>
+          <Mdx>{content}</Mdx>
+        </main>
+        <TableOfContent tree={tree} />
+      </div>
+    </div>
+  )
 }

website/build-app/components/TableOfContent/index.tsx

@@ -0,0 +1,27 @@
+import { Toc } from '@/build-app/utils/page-tree'
+import Link from 'next/link'
+
+type TableOfContentProps = {
+  tree?: Toc[]
+}
+
+export function TableOfContent({ tree }: TableOfContentProps) {
+  if (!tree) return null
+
+  return (
+    <ul>
+      {tree.map(item => (
+        <li>
+          <Link href={item.href}>{item.title}</Link>
+          {item.children && (
+            <ul>
+              {item.children.map(child => (
+                <Link href={child.href}>{child.title}</Link>
+              ))}
+            </ul>
+          )}
+        </li>
+      ))}
+    </ul>
+  )
+}

website/build-app/utils/content.ts → website/build-app/utils/page-content.ts

@@ -1,12 +1,15 @@
 import { existsSync, readFileSync } from 'fs'
 import { join } from 'path'
 import matter from 'gray-matter'
+import { getPageTree } from './page-tree'
 
 /**
  * Gets the content of md file
  */
-export function getPageContent(filename: string) {
-  const file = join(process.cwd(), 'build-app', filename)
+export function getPageContent(filename: string, isPackage?: boolean) {
+  const file = isPackage
+    ? join(process.cwd(), '../', 'docs', 'pages', filename)
+    : join(process.cwd(), 'build-app', filename)
 
   const fileExist = existsSync(file)
 
@@ -16,6 +19,8 @@ export function getPageContent(filename: string) {
     const content = readFileSync(file, 'utf8')
     const { content: contentWithoutMatter, data } = matter(content)
 
-    return { content, contentWithoutMatter, data }
+    const tree = getPageTree(contentWithoutMatter)
+
+    return { content, contentWithoutMatter, data, tree }
   }
 }

website/build-app/utils/page-tree.ts

@@ -0,0 +1,48 @@
+import { unified } from 'unified'
+import rehypeParse from 'rehype-parse'
+import { marked } from 'marked'
+import { visit } from 'unist-util-visit'
+import slugify from 'slugify'
+
+export type TocITem = {
+  id: string
+  title: string
+  href: string
+}
+
+export type Toc = TocITem & {
+  children?: TocITem[]
+}
+
+export function getPageTree(content?: string) {
+  if (!content) return
+
+  const tree = unified().use(rehypeParse, { fragment: true }).parse(marked(content))
+
+  const tableOfContents = [] as Toc[]
+
+  visit(tree, 'element', node => {
+    if (node.tagName === 'h2') {
+      // @ts-ignore
+      const title = node.children[0]?.value
+      const id = slugify(title.toLowerCase())
+
+      tableOfContents.push({ id, title, href: `#${id}` })
+    }
+
+    if (node.tagName === 'h3') {
+      const parentHeading = tableOfContents[tableOfContents.length - 1]
+
+      if (!parentHeading) return
+
+      // @ts-ignore
+      const title = node.children[0].value
+      const id = slugify(title.toLowerCase())
+
+      parentHeading.children = parentHeading.children || []
+      parentHeading.children.push({ id, title, href: `#${id}` })
+    }
+  })
+
+  return tableOfContents
+}

website/build-app/utils/pages.ts

@@ -0,0 +1,6 @@
+/**
+ * Gets the pages tree for design
+ */
+export function getDesignPages() {
+  return {}
+}

website/next.config.js

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  output: 'export',
+}
 
 module.exports = nextConfig

website/package.json

@@ -15,11 +15,16 @@
     "eslint": "8.46.0",
     "eslint-config-next": "13.4.12",
     "gray-matter": "^4.0.3",
+    "marked": "^7.0.1",
     "next": "13.4.12",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-markdown": "^8.0.7",
+    "rehype-parse": "^8.0.4",
     "remark-gfm": "^3.0.1",
-    "typescript": "5.1.6"
+    "slugify": "^1.6.6",
+    "typescript": "5.1.6",
+    "unified": "^10.1.2",
+    "unist-util-visit": "^5.0.0"
   }
 }