From 35b4485d1e0b3261e134ff3b6d4179c4724d69fe Mon Sep 17 00:00:00 2001 From: Marcus Reinhardt Date: Wed, 3 Jan 2024 16:06:04 +0100 Subject: [PATCH] more updates --- apps/content/test.md | 154 ++---------------- apps/docs/src/app/[...slug]/page.tsx | 59 ++++--- apps/docs/src/app/layout.tsx | 28 ++-- apps/docs/src/components/site-footer.tsx | 9 + apps/docs/src/components/site-header.tsx | 24 +++ packages/markdoc-base/src/frontmatter.ts | 2 + .../src/components/List.tsx | 19 ++- packages/markdoc-typography/src/config.ts | 36 +++- packages/ui/style.css | 19 +++ tooling/tailwind/index.ts | 2 +- 10 files changed, 163 insertions(+), 189 deletions(-) create mode 100644 apps/docs/src/components/site-footer.tsx create mode 100644 apps/docs/src/components/site-header.tsx diff --git a/apps/content/test.md b/apps/content/test.md index fd7a6ca..86cffbd 100644 --- a/apps/content/test.md +++ b/apps/content/test.md @@ -76,146 +76,22 @@ code content {% /tabs %} +## Lists -## 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 +### ul -{% tabs %} +* element 1 Laboris mollit dolor ea voluptate deserunt magna eu ut. Labore amet incididunt pariatur enim consequat sint id. Adipisicing elit ullamco fugiat quis mollit esse consequat ullamco fugiat. Anim elit ea irure irure amet ad laboris sint ex irure pariatur ea nulla ea. +* element 2 + * sub 1 + * sub 2 + * sub 3 +* element 3 -{% tab label="Preview" %} -preview content -{% /tab %} +### ol -{% 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 %} +1. element 1 +2. element 2 + 1. sub 1 + 2. sub 2 + 1. sub 3 +3. element 3 diff --git a/apps/docs/src/app/[...slug]/page.tsx b/apps/docs/src/app/[...slug]/page.tsx index 578d221..5680147 100644 --- a/apps/docs/src/app/[...slug]/page.tsx +++ b/apps/docs/src/app/[...slug]/page.tsx @@ -54,7 +54,9 @@ export async function generateMetadata( return { applicationName: parentMeta.applicationName, - title: document?.frontmatter.title ?? parentMeta.title, + title: `${document?.frontmatter.title ?? parentMeta.title?.absolute} - ${ + parentMeta.applicationName + }`, description: document?.frontmatter.description ?? parentMeta.description, } } @@ -70,30 +72,41 @@ export default async function DocsPage({ params }: DocPageProps) {
- + {pageContent.sidebar && ( + + )}
- {Markdoc.renderers.react(pageContent.content, React, { - components, - })} +
+

+ {pageContent.title} +

+

{pageContent.description}

+
+
+ {Markdoc.renderers.react(pageContent.content, React, { + components, + })} +
-
- -
+ {pageContent.toc && ( +
+ +
+ )}
diff --git a/apps/docs/src/app/layout.tsx b/apps/docs/src/app/layout.tsx index d490dd3..bb6388c 100644 --- a/apps/docs/src/app/layout.tsx +++ b/apps/docs/src/app/layout.tsx @@ -2,12 +2,14 @@ import type { Metadata } from "next" //import { NextDevtoolsProvider } from "@next-devtools/core" -import { Logo, TailwindIndicator } from "@acme/ui/components" +import { TailwindIndicator } from "@acme/ui/components" import "@acme/ui/style.css" import "@/styles/globals.css" import { Providers } from "@/components/providers" +import { SiteFooter } from "@/components/site-footer" +import { SiteHeader } from "@/components/site-header" export const metadata: Metadata = { title: "T3 Docs", @@ -21,24 +23,16 @@ export default function Layout({ children }: { children: React.ReactNode }) { {/* */} - +
-
- -
+ {children} -
-
-
-
- -
-
col 2
-
col 3
-
col 4
-
-
-
+
diff --git a/apps/docs/src/components/site-footer.tsx b/apps/docs/src/components/site-footer.tsx new file mode 100644 index 0000000..f91a753 --- /dev/null +++ b/apps/docs/src/components/site-footer.tsx @@ -0,0 +1,9 @@ +export function SiteFooter() { + return ( +
+
+ built with love. The source code is available on GitHub. +
+
+ ) +} diff --git a/apps/docs/src/components/site-header.tsx b/apps/docs/src/components/site-header.tsx new file mode 100644 index 0000000..f0ce1ae --- /dev/null +++ b/apps/docs/src/components/site-header.tsx @@ -0,0 +1,24 @@ +import Link from "next/link" + +import { Logo, ThemeToggle } from "@acme/ui/components" + +export function SiteHeader() { + return ( +
+
+ +
+
+ ) +} diff --git a/packages/markdoc-base/src/frontmatter.ts b/packages/markdoc-base/src/frontmatter.ts index cc1b7c9..07c2c30 100644 --- a/packages/markdoc-base/src/frontmatter.ts +++ b/packages/markdoc-base/src/frontmatter.ts @@ -4,6 +4,8 @@ import { parse as parseFrontmatter } from "zod-matter" const frontmatterProps = z.object({ title: z.string(), description: z.string().optional(), + sidebar: z.boolean().optional().default(true), + toc: z.boolean().optional().default(true), }) export type FrontmatterDefinition = z.infer diff --git a/packages/markdoc-typography/src/components/List.tsx b/packages/markdoc-typography/src/components/List.tsx index c3bbb49..bf42187 100644 --- a/packages/markdoc-typography/src/components/List.tsx +++ b/packages/markdoc-typography/src/components/List.tsx @@ -5,25 +5,30 @@ import { cn } from "@acme/helpers" export function List({ children, ordered, - start, - type, + start = 1, }: { children: ReactNode ordered: boolean start?: number - type?: string }) { const ListElement = ordered ? "ol" : "ul" return ( li]:mt-2")} - style={{ - listStyleType: `${ordered ? type ?? "decimal" : type ?? "disc"}`, - }} + className={cn( + "[&:not(li>ul):not(li>ol)]:ml-1", + "[&:not(li>ul):not(li>ol)]:my-6", + "list-outside pl-4 [&>li]:mt-2", + !ordered ? "[&>li]:marker:text-gray-400" : "", + ordered ? "list-decimal" : "list-disc", + )} start={start} > {children} ) } + +export function ListItem({ children }: { children: ReactNode }) { + return
  • {children}
    • +} diff --git a/packages/markdoc-typography/src/config.ts b/packages/markdoc-typography/src/config.ts index e26aad5..d66fb84 100644 --- a/packages/markdoc-typography/src/config.ts +++ b/packages/markdoc-typography/src/config.ts @@ -4,7 +4,7 @@ import { slugifyWithCounter } from "@sindresorhus/slugify" import { Blockquote } from "./components/Blockquote" import { Heading } from "./components/Heading" -import { List } from "./components/List" +import { List, ListItem } from "./components/List" import { Paragraph } from "./components/Paragraph" const slugify = slugifyWithCounter() @@ -34,13 +34,45 @@ export const nodes: Config["nodes"] = { blockquote: { render: "Blockquote", }, + + list: { + render: "List", + attributes: { + ordered: { type: Boolean, required: false }, + }, + }, + + item: { + render: "ListItem", + }, } -export const tags: Config["tags"] = {} +export const tags: Config["tags"] = { + orderedlist: { + render: "List", + attributes: { + ordered: { type: Boolean, required: false, default: true }, + type: { type: String, required: false }, + start: { type: Number, required: false }, + }, + transform(node, config) { + const attributes = node.transformAttributes(config) + const children = node.transformChildren(config) + + const elements = children[0] as Tag + if (children.length && elements?.name === "List") { + elements.attributes = attributes + } + + return elements + }, + }, +} export const components = { Paragraph: Paragraph, Heading: Heading, Blockquote: Blockquote, List: List, + ListItem: ListItem, } diff --git a/packages/ui/style.css b/packages/ui/style.css index 8abdb15..0b47315 100644 --- a/packages/ui/style.css +++ b/packages/ui/style.css @@ -73,4 +73,23 @@ body { @apply bg-background text-foreground; } + + .list-unordered > li:before { + content: " "; + @apply absolute left-1 top-2 h-2 w-2 rounded-[50%] bg-muted-foreground; + } + + .list-unordered > li { + @apply relative pl-9; + } + + .list-ordered { + counter-reset: listitem; + } + + .list-ordered > li:before { + counter-increment: listitem; + content: counter(listitem); + @apply left-0 top-1 mr-4 h-3 w-5 rounded-full bg-muted px-2 py-1 text-xs; + } } diff --git a/tooling/tailwind/index.ts b/tooling/tailwind/index.ts index 91b9a6a..8a32084 100644 --- a/tooling/tailwind/index.ts +++ b/tooling/tailwind/index.ts @@ -16,7 +16,7 @@ export default { "../../packages/markdoc-typography/src/**/*.{js,ts,jsx,tsx}", "../../packages/markdoc-tabs/src/**/*.{js,ts,jsx,tsx}", ], - darkMode: ["class", '[data-theme="dark"]'], + darkMode: ["class"], theme: { container: { center: true,