✅ Docs structure

Author: ariflogs

.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# contentlayer
+.contentlayer

app/(docs)/docs/[[...slug]]/page.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { allDocs } from "contentlayer/generated";
+import { notFound } from "next/navigation";
+import {format} from "date-fns"
+import MDX from "@/components/MDX";
+import { H1, H2, H3, H4 } from "@/packages/ui";
+
+async function getDocParams(slug: string) {
+  const doc = allDocs.find((doc) => doc.url === slug);
+
+  if (!doc) {
+    return null;
+  }
+
+  return doc;
+}
+
+export default async function page({ params }: { params: { slug: string[] } }) {
+  const slug = params.slug?.join("/") || "/docs";
+  const doc = await getDocParams(slug);
+
+  if (!doc) {
+    return notFound();
+  }
+
+  return (
+    <div className="space-y-12 pb-8">
+      <div>
+        <H2>{doc.title}</H2>
+        <p className="text-lg text-muted">{doc.description}</p>
+      </div>
+      <div>
+        <MDX code={doc.body.code} />
+      </div>
+      <p className="text-right">Last Updated: {format(doc.lastUpdated, "dd MMM, YYY")}</p>
+    </div>
+  );
+}

app/(docs)/docs/layout.tsx

@@ -1,10 +1,21 @@
-import SideNav from '@/components/SideNav'
-import React from 'react'
+import SideNav from "@/components/SideNav";
+import { Metadata } from "next";
 
-export default function layout() {
+export const metadata: Metadata = {
+  title: "Getting Started | RetroUI",
+};
+
+export default function ComponentLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
   return (
-    <div>
+    <div className="relative">
+      <div className="hidden lg:block">
         <SideNav />
-        layout</div>
-  )
-}
+      </div>
+      <div className="lg:ml-72 mt-20 px-4">{children}</div>
+    </div>
+  );
+}

app/(docs)/docs/page.tsx

@@ -2,8 +2,13 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --muted: #606067;
+}
+
 .text-outlined {
-    @apply relative text-primary-400 font-bold;
-    letter-spacing: 2px;
-    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; /* Black outline */
-  }
+  @apply relative text-primary-400 font-bold;
+  letter-spacing: 2px;
+  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
+    2px 2px 0 #000; /* Black outline */
+}

app/global.css

@@ -0,0 +1,18 @@
+import { H1, H2, H3, H4, H5, H6 } from "@/packages/ui";
+import { useMDXComponent } from "next-contentlayer/hooks";
+import React from "react";
+
+const components = {
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  h4: H4,
+  h5: H5,
+  h6: H6,
+};
+
+export default function MDX({ code }: { code: string }) {
+  const Content = useMDXComponent(code);
+
+  return <Content components={components} />;
+}

components/MDX.tsx

@@ -0,0 +1,65 @@
+---
+title: Getting Started
+description: This guide will help you get started with RetroUI, a retro styled UI library based on Tailwind CSS.
+lastUpdated: 29 Sep, 2024
+---
+
+### 1. Add the fonts
+We are useing `Archivo Black` for headings and `Share Tech` for everything else.
+
+Installation form Google Fonts:
+```
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Share+Tech&display=swap" rel="stylesheet">    
+```
+
+Save the fonts in `global.css`:
+```
+:root {
+  --font-head: "Archivo Black", sans-serif;
+  --font-sans: "Share Tech", sans-serif;
+}
+```
+
+<br />
+
+### 2. Add the theme to your tailwind.config.js file.
+```
+import type { Config } from "tailwindcss";
+
+const config = {
+  theme: {
+    extend: {
+      fontFamily: {
+        head: ["var(--font-head)"],
+        sans: ["var(--font-sans)"],
+      },
+      boxShadow: {
+        "xs": "1px 1px 0 0 #000",
+        "md": "3px 3px 0 0 #000",
+        "3xl": "10px 10px 0 0 #000",
+      },
+      colors: {
+        primary: {
+          50: "#FFFEF0",
+          100: "#FEF9C3",
+          200: "#FEF08A",
+          300: "#FDE047",
+          400: "#FACC15",
+          500: "#EAB308",
+          600: "#CA8A04",
+          700: "#A16207",
+          800: "#854D0E",
+          900: "#713F12",
+        },
+      },
+    },
+  },
+};
+export default config;
+```
+
+<br />
+    
+### 3. Now start copy-pasting the components!

content/docs/index.mdx

@@ -0,0 +1,21 @@
+// contentlayer.config.ts
+import { defineDocumentType, makeSource } from "contentlayer/source-files";
+
+export const Doc = defineDocumentType(() => ({
+  name: "Doc",
+  filePathPattern: `docs/**/*.mdx`,
+  contentType: "mdx",
+  fields: {
+    title: { type: "string", required: true },
+    description: { type: "string", required: true },
+    lastUpdated: { type: "date", required: true },
+  },
+  computedFields: {
+    url: {
+      type: "string",
+      resolve: (doc) => `/${doc._raw.flattenedPath}`,
+    },
+  },
+}));
+
+export default makeSource({ contentDirPath: "./content", documentTypes: [Doc] });

contentlayer.config.ts

@@ -1,4 +1,6 @@
+import { withContentlayer } from 'next-contentlayer'
+
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = { reactStrictMode: true, swcMinify: true }
 
-export default nextConfig;
+export default withContentlayer(nextConfig)

next.config.mjs

@@ -9,8 +9,11 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "contentlayer": "^0.3.4",
+    "date-fns": "^4.1.0",
     "lucide-react": "^0.445.0",
     "next": "14.2.7",
+    "next-contentlayer": "^0.3.4",
     "react": "^18",
     "react-dom": "^18"
   },