updates

apps/docs/next.config.mjs

@@ -9,10 +9,13 @@ const config = {
 
   reactStrictMode: true,
   /** Enables hot reloading for local packages without a build step */
-  transpilePackages: ["@acme/markdoc-base", "@acme/ui"],
+  transpilePackages: ["@acme/markdoc-base", "@acme/ui", "@acme/markdoc-typography",],
   /** We already do linting and typechecking as separate tasks in CI */
   eslint: { ignoreDuringBuilds: true },
   typescript: { ignoreBuildErrors: true },
+
+
+
 }
 
 //export default withNextDevtools(config)

apps/docs/src/app/[...slug]/page.tsx

@@ -1,53 +1,86 @@
 import path from "path"
 import React from "react"
+import { Metadata, ResolvingMetadata } from "next"
 import { notFound } from "next/navigation"
 
-import { getProjectRoot } from "@acme/helpers"
 import {
   components,
   getAllDocuments,
   getDocument,
   Markdoc,
   parseContent,
 } from "@acme/markdoc-base"
+import { SidebarNavigation } from "@acme/ui/components"
 
 interface DocPageProps {
   params: {
     slug: string[]
   }
 }
 
-async function getContentPath() {
-  const projectDirectory = await getProjectRoot()
-  if (!projectDirectory) throw "Unable to determine the project root directory."
-
+function getContentPath() {
+  // get project root
+  const projectDirectory = path.resolve("../../")
+  // get path to the content
   return path.join(projectDirectory, "apps/content")
 }
+
 export async function generateStaticParams(): Promise<
   DocPageProps["params"][]
 > {
-  const contentPath = await getContentPath()
+  const contentPath = getContentPath()
   const documents = await getAllDocuments(path.resolve(contentPath))
 
   return documents.map((ele) => ({ slug: ele.slug }))
 }
 
+export async function generateMetadata(
+  { params }: DocPageProps,
+  parent: ResolvingMetadata,
+): Promise<Metadata> {
+  const contentPath = getContentPath()
+  const parsedParams = `/${params.slug.join("/")}`
+
+  const document = await getDocument(contentPath, parsedParams)
+
+  const parentMeta = await parent
+
+  console.log({ parentMeta })
+
+  return {
+    applicationName: parentMeta.applicationName,
+    title: document?.frontmatter.title ?? parentMeta.title,
+    description: document?.frontmatter.description ?? parentMeta.description,
+  }
+}
 export default async function DocsPage({ params }: DocPageProps) {
-  const contentPath = await getContentPath()
+  const contentPath = getContentPath()
 
   const parsedParams = `/${params.slug.join("/")}`
 
   const document = await getDocument(contentPath, parsedParams)
-
   if (!document) notFound()
 
   const pageContent = await parseContent(document.docPath)
-
   if (!pageContent) notFound()
 
   return (
-    <main className="">
-      {Markdoc.renderers.react(pageContent.content, React, { components })}
-    </main>
+    <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>
+          <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,
+            })}
+          </main>
+        </div>
+      </div>
+    </div>
   )
 }

apps/docs/src/app/layout.tsx

@@ -2,16 +2,17 @@ import type { Metadata } from "next"
 
 //import { NextDevtoolsProvider } from "@next-devtools/core"
 
-import { Logo, SidebarNavigation, TailwindIndicator } from "@acme/ui/components"
+import { Logo, TailwindIndicator } from "@acme/ui/components"
 
 import "@acme/ui/style.css"
 import "@/styles/globals.css"
 
 import { Providers } from "@/components/providers"
 
 export const metadata: Metadata = {
-  title: "Create T3 Turbo",
-  description: "Simple monorepo with shared backend for web & mobile apps",
+  title: "T3 Docs",
+  description: "Over-engineered monorepo to generate a static page",
+  applicationName: "T3 Docs",
 }
 
 export default function Layout({ children }: { children: React.ReactNode }) {
@@ -25,21 +26,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
             <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>
-            <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>
-                  <main className="mt-4 w-full min-w-0 max-w-6xl px-0 lg:pl-6 xl:pr-8">
-                    {children}
-                  </main>
-                </div>
-              </div>
-            </div>
+            {children}
             <footer className="border-t">
               <div className="container">
                 <div className="grid grid-cols-4">

packages/helpers/index.ts

@@ -1,2 +1 @@
 export * from "./src/cn"
-export * from "./src/root-dir"

packages/helpers/package.json

@@ -22,8 +22,7 @@
   "dependencies": {
     "clsx": "2.1.0",
     "tailwind-merge": "2.2.0",
-    "tailwindcss": "3.4.0",
-    "pkg-dir": "8.0.0"
+    "tailwindcss": "3.4.0"
   },
   "devDependencies": {
     "@types/node": "20.10.6",

packages/markdoc-typography/src/components/Heading.tsx

@@ -31,7 +31,7 @@ export function Heading({ children, level, id }: HeadingProps) {
       break
     case 2:
       headingClass =
-        "border-b pb-2 text-3xl font-semibold transition-colors first:mt-0"
+        "border-b pb-2 text-3xl font-semibold transition-colors first:mt-0 mt-6"
       break
     case 3:
       headingClass = "text-2xl font-semibold"
@@ -49,9 +49,12 @@ export function Heading({ children, level, id }: HeadingProps) {
   return (
     <HeadingTag
       id={id}
-      className={cn(headingClass, "my-4 scroll-m-20 tracking-tight")}
+      className={cn("group my-4 scroll-m-20 tracking-tight", headingClass)}
     >
       {children}
+      <a href={`#${id}`} className="ml-2 hidden group-hover:inline">
+        #
+      </a>
     </HeadingTag>
   )
 }

packages/markdoc-typography/src/components/Paragraph.tsx

@@ -2,5 +2,5 @@
 import type { ReactNode } from "react"
 
 export function Paragraph({ children }: { children: ReactNode }) {
-  return <p className="leading-7 [&:not(:first-child)]:mt-6">{children}</p>
+  return <p className="leading-7 [&:not(:first-child)]:mt-4">{children}</p>
 }

packages/markdoc-typography/src/config.ts

@@ -30,6 +30,10 @@ export const nodes: Config["nodes"] = {
   paragraph: {
     render: "Paragraph",
   },
+
+  blockquote: {
+    render: "Blockquote",
+  },
 }
 
 export const tags: Config["tags"] = {}