feat: component docs init

.github/workflows/component-docs-deploy-alpha-pages.yml

@@ -0,0 +1,38 @@
+on:
+  push:
+    branches:
+      - '**'
+      - '!main'
+
+    paths:
+      - 'component-docs/**'
+
+name: Deploy Seed Component Docs Alpha Pages
+
+jobs:
+  deploy:
+    name: Deploy Seed Component Docs
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18.12.1
+          cache: yarn
+
+      - name: Install Dependencies
+        run: yarn install --immutable
+
+      - name: Build `Seed Component Docs`
+        working-directory: ./component-docs
+        run: |
+          yarn build
+      
+      - name: Alpha Deploy `Seed Docs` at Cloudflare pages
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CF_API_TOKEN }}
+          accountId: ${{ secrets.CF_ACCOUNT_ID }}
+          command: pages publish ./component-docs/out --project-name=seed-component-design --branch=${{ github.ref_name }}

.github/workflows/component-docs-deploy-production-pages.yml

@@ -0,0 +1,36 @@
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'component-docs/**'
+
+name: Deploy Seed Component Docs Production Pages
+
+jobs:
+  deploy:
+    name: Deploy Seed Component Docs
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18.12.1
+          cache: yarn
+
+      - name: Install Dependencies
+        run: yarn install --immutable
+
+      - name: Build `Seed Component Docs`
+        working-directory: ./component-docs
+        run: |
+          yarn build
+      
+      - name: Production Deploy `Seed Docs` at Cloudflare pages
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CF_API_TOKEN }}
+          accountId: ${{ secrets.CF_ACCOUNT_ID }}
+          command: pages publish ./component-docs/out --project-name=seed-component-design

component-docs/app/contents/[slug]/page.tsx

@@ -0,0 +1,41 @@
+import { allContents } from "contentlayer/generated";
+import { getMDXComponent } from "next-contentlayer2/hooks";
+
+interface ContentPageProps {
+  params: {
+    slug: string;
+  };
+}
+
+async function getContentFromParams({ params }: ContentPageProps) {
+  const slug = params.slug;
+  const doc = allContents.find((doc) => doc.slug === slug);
+
+  if (!doc) {
+    return null;
+  }
+
+  return doc;
+}
+
+export async function generateStaticParams(): Promise<ContentPageProps["params"][]> {
+  return allContents.map((content) => ({
+    slug: content.slug,
+  }));
+}
+
+export default async function ContentPage({ params }: ContentPageProps) {
+  const content = await getContentFromParams({ params });
+  const MDXComponent = getMDXComponent(content?.body.code || "");
+
+  if (!content) {
+    return <div>Not found</div>;
+  }
+
+  return (
+    <div className="max-w-xl py-8 mx-auto">
+      <h1>{content?.title}</h1>
+      <MDXComponent />
+    </div>
+  );
+}

component-docs/app/page.tsx

@@ -1,6 +1,6 @@
 import { allContents, type Content } from "contentlayer/generated";
 import { compareDesc, format, parseISO } from "date-fns";
-import { getMDXComponent } from "next-contentlayer/hooks";
+import { getMDXComponent } from "next-contentlayer2/hooks";
 import Link from "next/link";
 
 function ContentCard(content: Content) {
@@ -9,7 +9,11 @@ function ContentCard(content: Content) {
   return (
     <div className="mb-8">
       <h2 className="text-xl">
-        <Link href={content.url} className="text-blue-700 hover:text-blue-900" legacyBehavior>
+        <Link
+          href={`/contents/${content.slug}`}
+          className="text-blue-700 hover:text-blue-900"
+          legacyBehavior
+        >
           {content.title}
         </Link>
       </h2>
@@ -23,7 +27,7 @@ function ContentCard(content: Content) {
   );
 }
 
-export default function Home() {
+export default function Page() {
   const contents = allContents.sort((a, b) => compareDesc(new Date(a.date), new Date(b.date)));
 
   return (

component-docs/components/Button.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import type { FC } from "react";
 import React from "react";
 
-export const Button: FC<{ title: string }> = ({ title }) => (
+export const Button = ({ title }) => (
   <div
     style={{
       padding: 10,

component-docs/contentlayer.config.ts

@@ -1,4 +1,4 @@
-import { defineDocumentType, makeSource } from "contentlayer/source-files";
+import { defineDocumentType, makeSource } from "contentlayer2/source-files";
 
 const Content = defineDocumentType(() => ({
   name: "Content",
@@ -17,9 +17,13 @@ const Content = defineDocumentType(() => ({
     },
   },
   computedFields: {
-    url: {
+    slug: {
       type: "string",
-      resolve: (doc) => `/contents/${doc._raw.flattenedPath}`,
+      resolve: (doc) => doc._raw.sourceFileName.replace(/\.mdx$/, ""),
+    },
+    slugAsParams: {
+      type: "string",
+      resolve: (doc) => doc._raw.flattenedPath.split("/").slice(1).join("/"),
     },
   },
 }));

component-docs/next.config.mjs

@@ -1,10 +1,10 @@
-import { withContentlayer } from "next-contentlayer";
+import { withContentlayer } from "next-contentlayer2";
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  experimental: {
-    appDir: true,
-  },
+  reactStrictMode: true,
+  swcMinify: true,
+
   output: "export",
 };
 

component-docs/package.json

@@ -5,18 +5,20 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "build:content": "contentlayer2 build",
     "start": "next start"
   },
   "dependencies": {
-    "contentlayer": "^0.3.4",
+    "contentlayer2": "^0.4.6",
     "date-fns": "^3.6.0",
     "next": "^14.2.5",
-    "next-contentlayer": "^0.3.4",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "next-contentlayer2": "^0.4.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.39",
     "tailwindcss": "^3.4.6",

component-docs/tsconfig.json

@@ -28,5 +28,5 @@
     ".contentlayer/generated",
     ".next/types/**/*.ts"
   ],
-  "exclude": ["node_modules", "public/registry/**/*"]
+  "exclude": ["node_modules", "public", "out"]
 }