updates

noxify · Jan 2, 2024 · aad035d · aad035d
1 parent 6e7ce8b
commit aad035d
Show file tree

Hide file tree

Showing 20 changed files with 1,192 additions and 175 deletions.
diff --git a/apps/docs/src/content/nested/test.md → apps/content/nested/test.md b/apps/docs/src/content/nested/test.md → apps/content/nested/test.md
diff --git a/apps/content/package.json b/apps/content/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "@acme/content",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "@acme/eslint-config": "workspace:*",
+    "@acme/prettier-config": "workspace:*",
+    "eslint": "8.56.0",
+    "prettier": "3.1.1"
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@acme/eslint-config/base"
+    ]
+  },
+  "prettier": "@acme/prettier-config"
+}
diff --git a/apps/docs/src/content/test.md → apps/content/test.md b/apps/docs/src/content/test.md → apps/content/test.md
@@ -3,7 +3,7 @@ title: Hello World
 description: A short summary about this awesome page
 ---
 
-Corporis cognosces Peleus tibi
+Corporis cognosces Peleus tibi test
 
 ## Spes terra illis cum silvas gaudere videtque
 

diff --git a/apps/docs/next.config.mjs b/apps/docs/next.config.mjs
@@ -1,5 +1,6 @@
 // Importing env files here to validate on build
 import "./src/env.mjs"
+//import { withNextDevtools } from '@next-devtools/core/plugin'
 
 /** @type {import("next").NextConfig} */
 const config = {
@@ -13,4 +14,5 @@ const config = {
   typescript: { ignoreBuildErrors: true },
 }
 
+//export default withNextDevtools(config)
 export default config
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@acme/markdoc-base": "workspace:*",
+    "@acme/helpers": "workspace:*",
     "@acme/ui": "workspace:*",
     "@t3-oss/env-nextjs": "0.7.1",
     "@tanstack/query-core": "5.17.0",
@@ -25,7 +26,8 @@
     "p-map": "7.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "zod": "3.22.4"
+    "zod": "3.22.4",
+    "@next-devtools/core": "0.1.2"
   },
   "devDependencies": {
     "@acme/eslint-config": "workspace:*",

diff --git a/apps/docs/src/app/[...slug]/page.tsx b/apps/docs/src/app/[...slug]/page.tsx
@@ -0,0 +1,53 @@
+import path from "path"
+import React from "react"
+import { notFound } from "next/navigation"
+
+import { getProjectRoot } from "@acme/helpers"
+import {
+  components,
+  getAllDocuments,
+  getDocument,
+  Markdoc,
+  parseContent,
+} from "@acme/markdoc-base"
+
+interface DocPageProps {
+  params: {
+    slug: string[]
+  }
+}
+
+async function getContentPath() {
+  const projectDirectory = await getProjectRoot()
+  if (!projectDirectory) throw "Unable to determine the project root directory."
+
+  return path.join(projectDirectory, "apps/content")
+}
+export async function generateStaticParams(): Promise<
+  DocPageProps["params"][]
+> {
+  const contentPath = await getContentPath()
+  const documents = await getAllDocuments(path.resolve(contentPath))
+
+  return documents.map((ele) => ({ slug: ele.slug }))
+}
+
+export default async function DocsPage({ params }: DocPageProps) {
+  const contentPath = await 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>
+  )
+}
diff --git a/apps/docs/src/app/docs/[...slug]/page.tsx b/apps/docs/src/app/docs/[...slug]/page.tsx
diff --git a/apps/docs/src/app/layout.tsx b/apps/docs/src/app/layout.tsx
@@ -1,5 +1,7 @@
 import type { Metadata } from "next"
 
+//import { NextDevtoolsProvider } from "@next-devtools/core"
+
 import { Logo, SidebarNavigation, TailwindIndicator } from "@acme/ui/components"
 
 import "@acme/ui/style.css"
@@ -17,6 +19,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     <html lang="en" suppressHydrationWarning={true}>
       <head />
       <body>
+        {/* <NextDevtoolsProvider> */}
         <Providers defaultTheme="dark" enableSystem disableTransitionOnChange>
           <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">
@@ -52,6 +55,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
           </div>
           <TailwindIndicator />
         </Providers>
+        {/* </NextDevtoolsProvider> */}
       </body>
     </html>
   )

diff --git a/apps/docs/src/app/page.tsx b/apps/docs/src/app/page.tsx
@@ -1,19 +1,5 @@
-import path from "path"
 import React from "react"
-import { notFound } from "next/navigation"
 
-import { components, Markdoc, parseContent } from "@acme/markdoc-base"
-
-export default async function HomePage() {
-  const filePath = path.join(path.resolve(), "./src/content/test.md")
-
-  const pageContent = await parseContent(filePath)
-
-  if (!pageContent) notFound()
-
-  return (
-    <main className="">
-      {Markdoc.renderers.react(pageContent.content, React, { components })}
-    </main>
-  )
+export default function HomePage() {
+  return <main className="">Homepage</main>
 }
diff --git a/apps/docs/src/utils/content.ts b/apps/docs/src/utils/content.ts
diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json
@@ -12,6 +12,6 @@
     ],
     "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
   },
-  "include": [".", ".next/types/**/*.ts"],
+  "include": ["**/*.ts", "**/*.mjs", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }
diff --git a/packages/helpers/index.ts b/packages/helpers/index.ts
@@ -1 +1,2 @@
-export { cn } from "./src/cn"
+export * from "./src/cn"
+export * from "./src/root-dir"
diff --git a/packages/helpers/package.json b/packages/helpers/package.json
@@ -22,9 +22,11 @@
   "dependencies": {
     "clsx": "2.1.0",
     "tailwind-merge": "2.2.0",
-    "tailwindcss": "3.4.0"
+    "tailwindcss": "3.4.0",
+    "pkg-dir": "8.0.0"
   },
   "devDependencies": {
+    "@types/node": "20.10.6",
     "@acme/eslint-config": "workspace:*",
     "@acme/prettier-config": "workspace:*",
     "@acme/tsconfig": "workspace:*",

diff --git a/packages/helpers/src/root-dir.ts b/packages/helpers/src/root-dir.ts
@@ -0,0 +1,5 @@
+import { packageDirectory } from "pkg-dir"
+
+export const getProjectRoot = async () => {
+  return await packageDirectory()
+}
diff --git a/packages/markdoc-base/index.ts b/packages/markdoc-base/index.ts
@@ -5,3 +5,5 @@ import { components, config } from "./src/config"
 export { Markdoc, config, components }
 
 export * from "./src/helpers"
+export * from "./src/frontmatter"
+export * from "./src/documents"
diff --git a/packages/markdoc-base/package.json b/packages/markdoc-base/package.json
@@ -26,7 +26,10 @@
     "@markdoc/markdoc": "0.4.0",
     "string-strip-html": "13.4.4",
     "zod": "3.22.4",
-    "zod-matter": "0.1.1"
+    "zod-matter": "0.1.1",
+    "p-map": "7.0.1",
+    "globby": "14.0.0",
+    "react": "18.2.0"
   },
   "devDependencies": {
     "@acme/eslint-config": "workspace:*",

diff --git a/packages/markdoc-base/src/components/table-of-contents.tsx b/packages/markdoc-base/src/components/table-of-contents.tsx
@@ -1,7 +1,7 @@
 // Source: https://github.com/shadcn/ui/blob/main/apps/www/components/toc.tsx
 "use client"
 
-import * as React from "react"
+import { useEffect, useMemo, useState } from "react"
 
 import { cn } from "@acme/helpers"
 
@@ -18,7 +18,7 @@ interface TreeProps {
 }
 
 export function TableOfContents({ toc }: TocProps) {
-  const itemIds = React.useMemo(
+  const itemIds = useMemo(
     () =>
       toc
         ? toc
@@ -39,9 +39,9 @@ export function TableOfContents({ toc }: TocProps) {
 }
 
 function useActiveItem(itemIds: string[]) {
-  const [activeId, setActiveId] = React.useState<string>("")
+  const [activeId, setActiveId] = useState<string>("")
 
-  React.useEffect(() => {
+  useEffect(() => {
     const observer = new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {