more updates

noxify · Jan 3, 2024 · 35b4485 · 35b4485
1 parent a39ad0a
commit 35b4485
Show file tree

Hide file tree

Showing 10 changed files with 163 additions and 189 deletions.
diff --git 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
@@ -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) {
     <div className="flex-1">
       <div className="container">
         <div className="mx-auto flex">
-          <aside className="sticky top-16 hidden h-[calc(100vh-121px)] w-[284px] lg:flex lg:shrink-0 lg:flex-col lg:justify-between">
-            <div className="absolute bottom-0 right-0 top-12 w-px bg-gray-200 dark:block dark:bg-slate-800" />
-            <div className="overflow-y-auto overflow-x-hidden bg-red-200 py-8 pr-6">
-              <SidebarNavigation items={[]} />
-            </div>
-          </aside>
+          {pageContent.sidebar && (
+            <aside className="sticky top-16 hidden h-[calc(100vh)] w-[284px] lg:flex lg:shrink-0 lg:flex-col lg:justify-between">
+              <div className="overflow-y-auto overflow-x-hidden bg-red-200 py-8 pr-6">
+                <SidebarNavigation items={[]} />
+              </div>
+            </aside>
+          )}
           <main className="mt-4 w-full min-w-0 max-w-6xl px-0 lg:pl-6 xl:pr-8">
-            {Markdoc.renderers.react(pageContent.content, React, {
-              components,
-            })}
+            <div className="space-y-2">
+              <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+                {pageContent.title}
+              </h1>
+              <p className="text-lg text-gray-500">{pageContent.description}</p>
+            </div>
+            <div className="mt-8">
+              {Markdoc.renderers.react(pageContent.content, React, {
+                components,
+              })}
+            </div>
           </main>
-          <div className="hidden xl:sticky xl:top-[1.5rem] xl:-mr-6 xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6">
-            <nav aria-labelledby="on-this-page-title" className="w-56">
-              <h2
-                id="on-this-page-title"
-                className="font-display text-sm font-medium text-foreground"
-              >
-                On this page
-              </h2>
-              <TableOfContents
-                toc={generateTableOfContents(pageContent.headings)}
-              />
-            </nav>
-          </div>
+          {pageContent.toc && (
+            <div className="hidden xl:sticky xl:top-[4.25rem] xl:-mr-6 xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:pb-16 xl:pr-6 xl:pt-4">
+              <nav aria-labelledby="on-this-page-title" className="w-56">
+                <h2
+                  id="on-this-page-title"
+                  className="font-display text-sm font-medium text-foreground"
+                >
+                  On this page
+                </h2>
+                <TableOfContents
+                  toc={generateTableOfContents(pageContent.headings)}
+                />
+              </nav>
+            </div>
+          )}
         </div>
       </div>
     </div>

diff --git 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 }) {
       <head />
       <body>
         {/* <NextDevtoolsProvider> */}
-        <Providers defaultTheme="dark" enableSystem disableTransitionOnChange>
+        <Providers
+          defaultTheme="light"
+          enableSystem
+          disableTransitionOnChange
+          attribute="class"
+        >
           <div className="relative flex flex-col">
-            <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-              <Logo name="T3 Docs" className="h-16" />
-            </header>
+            <SiteHeader />
             {children}
-            <footer className="border-t">
-              <div className="container">
-                <div className="grid grid-cols-4">
-                  <div>
-                    <Logo name="T3 Docs" />
-                  </div>
-                  <div>col 2</div>
-                  <div>col 3</div>
-                  <div>col 4</div>
-                </div>
-              </div>
-            </footer>
+            <SiteFooter />
           </div>
           <TailwindIndicator />
         </Providers>

diff --git a/apps/docs/src/components/site-footer.tsx b/apps/docs/src/components/site-footer.tsx
@@ -0,0 +1,9 @@
+export function SiteFooter() {
+  return (
+    <footer className="border-t">
+      <div className="container py-4">
+        built with love. The source code is available on GitHub.
+      </div>
+    </footer>
+  )
+}
diff --git a/apps/docs/src/components/site-header.tsx 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 (
+    <header className=" sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container">
+        <nav
+          className="mx-auto flex items-center justify-between "
+          aria-label="Global"
+        >
+          <Link href="/" className="-m-1.5 p-1.5">
+            <Logo name="T3 Docs" className="h-16" />
+          </Link>
+
+          <div className="hidden lg:flex lg:gap-x-12">
+            <ThemeToggle />
+          </div>
+        </nav>
+      </div>
+    </header>
+  )
+}
diff --git 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<typeof frontmatterProps>

diff --git 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 (
     <ListElement
-      className={cn("my-6 ml-6 [&>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}
     </ListElement>
   )
 }
+
+export function ListItem({ children }: { children: ReactNode }) {
+  return <li>{children}</li>
+}