From a39ad0a45e0409e520c33fdb939a7f6baa6d8604 Mon Sep 17 00:00:00 2001 From: Marcus Reinhardt Date: Wed, 3 Jan 2024 12:08:36 +0100 Subject: [PATCH] add toc --- apps/content/test.md | 144 ++++++++++++++++++ apps/docs/src/app/[...slug]/page.tsx | 37 +++-- packages/markdoc-base/index.ts | 1 + .../src/components/table-of-contents.tsx | 8 +- packages/markdoc-base/src/helpers.ts | 6 +- .../src/components/Heading.tsx | 5 +- 6 files changed, 182 insertions(+), 19 deletions(-) diff --git a/apps/content/test.md b/apps/content/test.md index 9133cbb..fd7a6ca 100644 --- a/apps/content/test.md +++ b/apps/content/test.md @@ -75,3 +75,147 @@ code content {% /tab %} {% /tabs %} + + +## Spes terra illis cum silvas gaudere videtque + +Lorem markdownum tu peto? Fessa peteretur tyranni nota aquaticus iussere, io +vivere, conditur meum ut lassaque. Adsiduo perveni Atrides postquam alte illa et +spernenda, late ferarum, modo. Reticere munus sui vertit est nescius adhuc +insuperabile nidos! Tumidam _hospes_ ferrum a pulsat inferius: aut es marmoris! + +> Pectore ursaeque, fuit prolisque erit amnesque: nam datis viro caecaque +> resupino notavi. Quoque dolentius multi, has quicquam magni, ruunt omnia +> imagine? Delphice quae illo est cruor adhuc telisque et manu, amor, +> _causamque_ te vestes; rerum. + +## Carituraque debet penetrabile alta imagine + +Egerat solent, Iuppiter non rictus, Parnasosque illa; talia. Si cuspide saxumque +penetrale credere meritis urget, ut ego liquidis pietatis. Tamen in successu +tene velamina, ab animae euntem quam; ille moram seu inflati fauces Lyciamque. +Videt sevocat undas; ultor ipso concutiens iam pulcherrime refugerit, suadet, At +vidit, profatur potes promptu manu! + +Cadit **tangit quo** sine valuere nulla, Philemon quoque luctantiaque. [Ante +exsecrantia](http://orant.com/sed.php) alis iam! Fluctusque utinam pennis deum +pocula cum. Tetigit avis aequoreis posses alto Tyriis, voce reor habet solet +postquam _adsuetaque_ regnat medium locis. + +## Tanto ortas harenis collaque dant + +Mora dissimulat ac, visa vires sortes inferius **dei quod** frigus, lumina +Samon, mortis. **Parte fluctus** tum, in invitam satis, _nominat retentis +videre_ finis tu et mendacia nomen. Huic illic abdita Terram. + +Est verso praedam repetitaque mons esse, mora petenti haec scopulus ille +medioque, ne verumque, ales. Sideraque invidit. Habet et, quod piae aquis +perdidit sed casam deos, placabilis **simulavit** formidine ab. + +Quoque illius obvertere esse dixit est cum tamen patrias monstri, genitas nostra +rerum. Mihi movit Rhodopen dolores refers summo, commonuit vera clamat versa et +uvis **monte summoque rarior**, Venus, Imbreus. Lacer tamen cupit, trans sacras +territaque, custodemque saltem Procne punior. Sparsos debita spes arma asperitas +turis ostendens dixerat! + +## Tabs + +### use first + +{% tabs %} + +{% tab label="Preview" %} +preview content +{% /tab %} + +{% tab label="Code" %} +code content +{% /tab %} + +{% /tabs %} + +### custom default + +{% tabs %} + +{% tab label="Preview" %} +preview content +{% /tab %} + +{% tab label="Code" default=true %} +code content +{% /tab %} + +{% /tabs %} + + +## Spes terra illis cum silvas gaudere videtque + +Lorem markdownum tu peto? Fessa peteretur tyranni nota aquaticus iussere, io +vivere, conditur meum ut lassaque. Adsiduo perveni Atrides postquam alte illa et +spernenda, late ferarum, modo. Reticere munus sui vertit est nescius adhuc +insuperabile nidos! Tumidam _hospes_ ferrum a pulsat inferius: aut es marmoris! + +> Pectore ursaeque, fuit prolisque erit amnesque: nam datis viro caecaque +> resupino notavi. Quoque dolentius multi, has quicquam magni, ruunt omnia +> imagine? Delphice quae illo est cruor adhuc telisque et manu, amor, +> _causamque_ te vestes; rerum. + +## Carituraque debet penetrabile alta imagine + +Egerat solent, Iuppiter non rictus, Parnasosque illa; talia. Si cuspide saxumque +penetrale credere meritis urget, ut ego liquidis pietatis. Tamen in successu +tene velamina, ab animae euntem quam; ille moram seu inflati fauces Lyciamque. +Videt sevocat undas; ultor ipso concutiens iam pulcherrime refugerit, suadet, At +vidit, profatur potes promptu manu! + +Cadit **tangit quo** sine valuere nulla, Philemon quoque luctantiaque. [Ante +exsecrantia](http://orant.com/sed.php) alis iam! Fluctusque utinam pennis deum +pocula cum. Tetigit avis aequoreis posses alto Tyriis, voce reor habet solet +postquam _adsuetaque_ regnat medium locis. + +## Tanto ortas harenis collaque dant + +Mora dissimulat ac, visa vires sortes inferius **dei quod** frigus, lumina +Samon, mortis. **Parte fluctus** tum, in invitam satis, _nominat retentis +videre_ finis tu et mendacia nomen. Huic illic abdita Terram. + +Est verso praedam repetitaque mons esse, mora petenti haec scopulus ille +medioque, ne verumque, ales. Sideraque invidit. Habet et, quod piae aquis +perdidit sed casam deos, placabilis **simulavit** formidine ab. + +Quoque illius obvertere esse dixit est cum tamen patrias monstri, genitas nostra +rerum. Mihi movit Rhodopen dolores refers summo, commonuit vera clamat versa et +uvis **monte summoque rarior**, Venus, Imbreus. Lacer tamen cupit, trans sacras +territaque, custodemque saltem Procne punior. Sparsos debita spes arma asperitas +turis ostendens dixerat! + +## Tabs + +### use first + +{% tabs %} + +{% tab label="Preview" %} +preview content +{% /tab %} + +{% tab label="Code" %} +code content +{% /tab %} + +{% /tabs %} + +### custom default + +{% tabs %} + +{% tab label="Preview" %} +preview content +{% /tab %} + +{% tab label="Code" default=true %} +code content +{% /tab %} + +{% /tabs %} diff --git a/apps/docs/src/app/[...slug]/page.tsx b/apps/docs/src/app/[...slug]/page.tsx index 737e820..578d221 100644 --- a/apps/docs/src/app/[...slug]/page.tsx +++ b/apps/docs/src/app/[...slug]/page.tsx @@ -1,14 +1,16 @@ import path from "path" +import type { Metadata, ResolvingMetadata } from "next" import React from "react" -import { Metadata, ResolvingMetadata } from "next" import { notFound } from "next/navigation" import { components, + generateTableOfContents, getAllDocuments, getDocument, Markdoc, parseContent, + TableOfContents, } from "@acme/markdoc-base" import { SidebarNavigation } from "@acme/ui/components" @@ -25,6 +27,14 @@ function getContentPath() { return path.join(projectDirectory, "apps/content") } +async function getContent({ params }: DocPageProps) { + const contentPath = getContentPath() + + const parsedParams = `/${params.slug.join("/")}` + + return await getDocument(contentPath, parsedParams) +} + export async function generateStaticParams(): Promise< DocPageProps["params"][] > { @@ -38,15 +48,10 @@ export async function generateMetadata( { params }: DocPageProps, parent: ResolvingMetadata, ): Promise { - const contentPath = getContentPath() - const parsedParams = `/${params.slug.join("/")}` - - const document = await getDocument(contentPath, parsedParams) + const document = await getContent({ params }) const parentMeta = await parent - console.log({ parentMeta }) - return { applicationName: parentMeta.applicationName, title: document?.frontmatter.title ?? parentMeta.title, @@ -54,11 +59,8 @@ export async function generateMetadata( } } export default async function DocsPage({ params }: DocPageProps) { - const contentPath = getContentPath() - - const parsedParams = `/${params.slug.join("/")}` + const document = await getContent({ params }) - const document = await getDocument(contentPath, parsedParams) if (!document) notFound() const pageContent = await parseContent(document.docPath) @@ -79,6 +81,19 @@ export default async function DocsPage({ params }: DocPageProps) { components, })} +
+ +
diff --git a/packages/markdoc-base/index.ts b/packages/markdoc-base/index.ts index f3ee662..cb598b5 100644 --- a/packages/markdoc-base/index.ts +++ b/packages/markdoc-base/index.ts @@ -7,3 +7,4 @@ export { Markdoc, config, components } export * from "./src/helpers" export * from "./src/frontmatter" export * from "./src/documents" +export * from "./src/components/table-of-contents" diff --git a/packages/markdoc-base/src/components/table-of-contents.tsx b/packages/markdoc-base/src/components/table-of-contents.tsx index 966c7d6..77acf99 100644 --- a/packages/markdoc-base/src/components/table-of-contents.tsx +++ b/packages/markdoc-base/src/components/table-of-contents.tsx @@ -5,14 +5,14 @@ import { useEffect, useMemo, useState } from "react" import { cn } from "@acme/helpers" -import type { TableOfContents } from "../helpers" +import type { TableOfContentsProps } from "../helpers" interface TocProps { - toc: TableOfContents[] + toc: TableOfContentsProps[] } interface TreeProps { - tree: TableOfContents[] + tree: TableOfContentsProps[] level?: number activeItem?: string } @@ -84,7 +84,7 @@ function Tree({ tree, level = 1, activeItem }: TreeProps) { className={cn( "inline-block no-underline transition-colors hover:text-foreground", `#${item.id}` === `#${activeItem}` - ? "font-medium text-foreground" + ? "text-foreground" : "text-muted-foreground", )} > diff --git a/packages/markdoc-base/src/helpers.ts b/packages/markdoc-base/src/helpers.ts index 204532f..77e91c0 100644 --- a/packages/markdoc-base/src/helpers.ts +++ b/packages/markdoc-base/src/helpers.ts @@ -9,11 +9,11 @@ import type { HeadingNode } from "@acme/markdoc-typography/components" import { config } from "./config" import { getFrontmatter } from "./frontmatter" -export interface TableOfContents { +export interface TableOfContentsProps { id: string title: string level: number - children?: TableOfContents[] + children?: TableOfContentsProps[] } export async function getFileContent(filePath: PathLike | fs.FileHandle) { @@ -50,7 +50,7 @@ export async function parseContent(filePath: PathLike | fs.FileHandle) { } export function generateTableOfContents(headings: Tag[]) { - const sections: TableOfContents[] = [] + const sections: TableOfContentsProps[] = [] for (const heading of headings) { const attributes = (heading as unknown as HeadingNode).attributes diff --git a/packages/markdoc-typography/src/components/Heading.tsx b/packages/markdoc-typography/src/components/Heading.tsx index 5f0bdb6..3c8d06c 100644 --- a/packages/markdoc-typography/src/components/Heading.tsx +++ b/packages/markdoc-typography/src/components/Heading.tsx @@ -52,7 +52,10 @@ export function Heading({ children, level, id }: HeadingProps) { className={cn("group my-4 scroll-m-20 tracking-tight", headingClass)} > {children} - + #