initial contentlayer config (#4)

app/docs/[slug]/page.tsx

@@ -0,0 +1,68 @@
+import { format, parseISO } from 'date-fns'
+import { allDocs } from 'contentlayer/generated'
+import { getMDXComponent } from 'next-contentlayer/hooks'
+import { Breadcrumbs } from '@/components/breadcrumbs'
+import { Demo } from '@/components/demo'
+import { HoverGridCode } from '@/app/gluons/hover-grid/_demo/hover-grid-code'
+import { HoverGridPreview } from '@/app/gluons/hover-grid/_demo/hover-grid-preview'
+
+interface DocPageProps {
+    params: {
+        slug: string,
+    }
+}
+
+export async function generateStaticParams(): Promise<
+    DocPageProps["params"][]
+> { 
+    return allDocs.map((doc) => ({ 
+        slug: doc._raw.flattenedPath 
+    }))
+}
+
+export const generateMetadata = ({ 
+    params, 
+}: DocPageProps) => {
+  const doc = allDocs.find((doc) => doc._raw.flattenedPath === params.slug)
+  if (!doc) {
+    return {}
+  }
+  return { title: doc.title }
+}
+
+const DocPage = ({
+    params,
+}: { 
+    params: { slug: string }
+}) => {
+    const doc = allDocs.find((doc) => doc._raw.flattenedPath === params.slug)
+
+    if (!doc) throw new Error(`doc not found for slug: ${params.slug}`)
+
+    const Content = getMDXComponent(doc.body.code)
+
+    if (!doc) throw new Error(`doc not found for slug: ${params.slug}`)
+
+    const previewCodeTitle = doc.title.toLowerCase().replace(/\s/g, '-')
+
+    return (
+        <div>
+            <section className="w-full space-y-2">
+                <Breadcrumbs />
+                <h1 className="text-4xl font-semibold">{doc.title}</h1>
+                <p className="text-muted-foreground">{doc.description}</p>
+            </section>
+            <Demo
+                title={`${previewCodeTitle}.tsx`}
+                lang="tsx"
+                code={HoverGridCode}
+                lineNumbers={true}
+                className="!my-0"
+            >
+                <HoverGridPreview />
+            </Demo>
+        </div>
+    )
+}
+
+export default DocPage;

app/docs/layout.tsx

@@ -0,0 +1,25 @@
+import type { Metadata } from "next";
+import { Sidebar } from "@/components/sidebar";
+import { Container } from "@/components/container";
+
+export const metadata: Metadata = {
+  title: "Glui Docs",
+  description: "Componenet library built on top of Tailwind CSS and React.",
+};
+
+export default function DocsLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <main className="w-full max-w-screen-2xl">
+        <div className="relative pt-16 h-full flex flex-row gap-4">
+            <Sidebar />
+            <Container>
+                {children}
+            </Container>
+        </div>
+    </main>
+  );
+}

content/doc-01.mdx

@@ -0,0 +1,5 @@
+---
+title: Doc 01 Test
+description: Test doc description.
+component: true
+---

content/hover-grid.mdx

@@ -0,0 +1,7 @@
+---
+title: Hover Grid
+description: A grid comprised of hoverable cells.
+component: true
+---
+
+## Preview

contentlayer.config.ts

@@ -1,16 +1,23 @@
-// contentlayer.config.ts
 import { defineDocumentType, makeSource } from 'contentlayer/source-files'
 
-export const Post = defineDocumentType(() => ({
-  name: 'Post',
-  filePathPattern: `**/*.md`,
+export const Doc = defineDocumentType(() => ({
+  name: 'Doc',
+  filePathPattern: `**/*.mdx`,
+  contentType: 'mdx',
   fields: {
     title: { type: 'string', required: true },
-    date: { type: 'date', required: true },
+    description: { type: 'string', required: true },
+    component: { type: 'boolean', default: false, required: false },
   },
   computedFields: {
-    url: { type: 'string', resolve: (post) => `/posts/${post._raw.flattenedPath}` },
+    url: {
+      type: 'string',
+      resolve: (doc) => `/docs/${doc._raw.flattenedPath}`,
+    },
   },
 }))
 
-export default makeSource({ contentDirPath: 'posts', documentTypes: [Post] })
+export default makeSource({ 
+  contentDirPath: 'content', 
+  documentTypes: [Doc],
+})