move guides into new guides doc type

Author: davemooreuws

contentlayer.config.ts

@@ -1,4 +1,10 @@
-import { defineDocumentType, makeSource } from 'contentlayer2/source-files'
+import {
+  ComputedFields,
+  defineDocumentType,
+  defineNestedType,
+  FieldDefs,
+  makeSource,
+} from 'contentlayer2/source-files'
 import { extractTocHeadings } from './src/mdx/remark-toc-headings.mjs'
 import path from 'path'
 import fs from 'fs'
@@ -7,87 +13,126 @@ const contentDirPath = 'docs'
 
 const branch = process.env.NEXT_PUBLIC_GITHUB_BRANCH || 'main'
 
+const baseFields: FieldDefs = {
+  title_seo: {
+    type: 'string',
+    description:
+      'The meta title of the doc, this will override the title extracted from the markdown and the nav title',
+  },
+  description: {
+    type: 'string',
+    description: 'The description of the doc',
+  },
+  image: {
+    type: 'string',
+    description: 'The image of the doc',
+  },
+  image_alt: {
+    type: 'string',
+    description: 'The image alt of the doc',
+  },
+  disable_edit: {
+    type: 'boolean',
+    description: 'Disable the github edit button',
+  },
+}
+
+const computedFields: ComputedFields = {
+  slug: {
+    type: 'string',
+    resolve: (doc) => doc._raw.flattenedPath,
+  },
+  toc: { type: 'json', resolve: (doc) => extractTocHeadings(doc.body.raw) },
+  title: {
+    type: 'string',
+    resolve: async (doc) => {
+      const headings = await extractTocHeadings(doc.body.raw, [1])
+
+      return headings[0]?.value
+    },
+  },
+  editUrl: {
+    type: 'string',
+    resolve: (doc) =>
+      `https://github.com/nitrictech/docs/edit/${branch}/docs/${doc._raw.sourceFilePath}`,
+  },
+  lastModified: {
+    type: 'date',
+    resolve: (doc) => {
+      // Get the full path to the markdown file
+      const filePath = path.join(
+        process.cwd(),
+        contentDirPath,
+        doc._raw.sourceFilePath,
+      )
+      // Extract and return the last modified date
+      const stats = fs.statSync(filePath)
+      return stats.mtime // This is the last modified date
+    },
+  },
+}
+
 const Doc = defineDocumentType(() => ({
   name: 'Doc',
-  filePathPattern: '**/*.mdx',
+  filePathPattern: '!**/guides/**/*.mdx',
+  fields: baseFields,
+  computedFields,
+}))
+
+const Featured = defineNestedType(() => ({
+  name: 'Featured',
   fields: {
-    title_seo: {
-      type: 'string',
-      description:
-        'The meta title of the doc, this will override the title extracted from the markdown and the nav title',
-    },
-    description: {
-      type: 'string',
-      description: 'The description of the doc',
-    },
     image: {
       type: 'string',
-      description: 'The image of the doc',
+      description: 'The featured image of the post, not the same as og image',
+      required: true,
     },
     image_alt: {
       type: 'string',
-      description: 'The image alt of the doc',
+      description: 'The featured image alt of the post',
+      required: true,
+    },
+  },
+}))
+
+const Guide = defineDocumentType(() => ({
+  name: 'Guide',
+  filePathPattern: '**/guides/**/*.mdx',
+  fields: {
+    ...baseFields,
+    published_at: {
+      type: 'date',
+      description: 'The date the guide was published',
+      required: false,
     },
-    disable_edit: {
-      type: 'boolean',
-      description: 'Disable the github edit button',
+    featured: {
+      type: 'nested',
+      of: Featured,
     },
     tags: {
       type: 'list',
       of: {
         type: 'string',
       },
-      description: 'The tags of the post, used by guides',
+      description: 'The tags of the post',
+      required: true,
     },
     languages: {
       type: 'list',
       of: {
         type: 'string',
       },
-      description: 'The languages of the content, used by guides',
+      description: 'The languages of the content',
     },
     start_steps: {
       type: 'markdown',
-      description: 'The start steps of the doc, used by guides',
-    },
-  },
-  computedFields: {
-    slug: {
-      type: 'string',
-      resolve: (doc) => doc._raw.flattenedPath,
-    },
-    toc: { type: 'json', resolve: (doc) => extractTocHeadings(doc.body.raw) },
-    title: {
-      type: 'string',
-      resolve: async (doc) => {
-        const headings = await extractTocHeadings(doc.body.raw, [1])
-
-        return headings[0]?.value
-      },
-    },
-    editUrl: {
-      type: 'string',
-      resolve: (doc) =>
-        `https://github.com/nitrictech/docs/edit/${branch}/docs/${doc._raw.sourceFilePath}`,
-    },
-    lastModified: {
-      type: 'date',
-      resolve: (doc) => {
-        // Get the full path to the markdown file
-        const filePath = path.join(
-          process.cwd(),
-          contentDirPath,
-          doc._raw.sourceFilePath,
-        )
-        // Extract and return the last modified date
-        const stats = fs.statSync(filePath)
-        return stats.mtime // This is the last modified date
-      },
+      description: 'The start steps of the doc',
     },
   },
+  computedFields,
 }))
 
 export default makeSource({
   contentDirPath,
-  documentTypes: [Doc],
+  documentTypes: [Doc, Guide],
 })

src/app/(sitemaps)/sitemap-0.xml/route.ts

@@ -1,4 +1,4 @@
-import { allDocs } from '@/content'
+import { allDocuments } from '@/content'
 import staticPaths from '@/assets/sitemap.json'
 import { BASE_URL } from '@/lib/constants'
 
@@ -22,7 +22,7 @@ export async function GET() {
     priority: 0.7,
   }))
 
-  const docPages: SitemapItem[] = allDocs.map((page) => ({
+  const docPages: SitemapItem[] = allDocuments.map((page) => ({
     loc: page.slug === '' ? URL : `${URL}/${page.slug}`,
     lastmod: new Date(page.lastModified).toISOString(),
     changefreq: 'daily',

src/app/[[...slug]]/layout.tsx

@@ -1,7 +1,7 @@
 import { Prose } from '@/components/Prose'
 
 import React from 'react'
-import { allDocs } from '@/content'
+import { allDocuments, Guide, isType } from '@/content'
 import DocToc from '@/components/layout/DocToC'
 import { Button } from '@/components/ui/button'
 import { GitHubIcon } from '@/components/icons/GitHubIcon'
@@ -17,19 +17,19 @@ export default function DocLayout({
   params: { slug: string[] }
 }) {
   const slug = params.slug ? decodeURI(params.slug.join('/')) : ''
-  const doc = allDocs.find((p) => p.slug === slug)
+  const doc = allDocuments.find((p) => p.slug === slug)
 
   if (!doc) {
     return <>{children}</>
   }
 
-  const startSteps = doc.start_steps && (
+  const startSteps = isType('Guide') && (doc as Guide).start_steps && (
     <Code
       hideBashPanel
       codeblock={{
         lang: 'bash',
         meta: '',
-        value: doc.start_steps?.raw,
+        value: (doc as Guide).start_steps?.raw || '',
       }}
     />
   )

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

@@ -2,7 +2,7 @@ import { notFound } from 'next/navigation'
 import MDXContent from '@/components/MDXContent'
 import { Metadata } from 'next/types'
 import { BASE_URL } from '@/lib/constants'
-import { allDocs } from '@/content'
+import { allDocuments } from '@/content'
 import { getNavInfo } from '@/lib/getNavInfo'
 import { title } from 'radash'
 import { OpenGraph } from 'next/dist/lib/metadata/types/opengraph-types'
@@ -13,7 +13,7 @@ export async function generateMetadata({
   params: { slug: string[] }
 }): Promise<Metadata | undefined> {
   const slug = params.slug ? decodeURI(params.slug.join('/')) : ''
-  const doc = allDocs.find((p) => p.slug === slug)
+  const doc = allDocuments.find((p) => p.slug === slug)
 
   if (!doc) {
     return
@@ -76,15 +76,15 @@ export async function generateMetadata({
 }
 
 export const generateStaticParams = async () => {
-  return allDocs.map((p) => ({
+  return allDocuments.map((p) => ({
     slug: p.slug.split('/').map((name) => decodeURI(name)),
   }))
 }
 
 export default function Page({ params }: { params: { slug: string[] } }) {
   const slug = params.slug ? decodeURI(params.slug.join('/')) : ''
 
-  const doc = allDocs.find((p) => p.slug === slug)
+  const doc = allDocuments.find((p) => p.slug === slug)
 
   if (!doc) {
     return notFound()

src/app/guides/page.tsx

@@ -8,7 +8,7 @@ import {
   BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb'
 import { Heading } from '@/components/ui/heading'
-import { allDocs } from '@/content'
+import { allGuides } from '@/content'
 import { BASE_URL } from '@/lib/constants'
 import Link from 'next/link'
 import { Metadata } from 'next/types'
@@ -34,8 +34,6 @@ export const metadata: Metadata = {
 }
 
 export default function GuidesPage() {
-  const allGuides = allDocs.filter((doc) => doc.slug.startsWith('guides/'))
-
   const allTags = allGuides
     .reduce((acc: string[], guide) => {
       if (guide.tags) {
@@ -69,7 +67,7 @@ export default function GuidesPage() {
       </div>
       <div className="-mx-2 border-t px-4 sm:-mx-6 lg:-mx-8">
         <div className="mx-auto max-w-7xl px-4">
-          <GuidePage guides={allGuides} allTags={allTags} />
+          <GuidePage allTags={allTags} />
         </div>
       </div>
     </>

src/components/Breadcrumbs.tsx

@@ -7,12 +7,12 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from './ui/breadcrumb'
-import { Doc } from '@/content'
+import { Doc, Guide } from '@/content'
 import { getNavInfo, NavInfo } from '@/lib/getNavInfo'
 import Link from 'next/link'
 
 interface Props {
-  doc: Doc
+  doc: Doc | Guide
   className?: string
 }
 

src/components/guides/GuideItem.tsx

@@ -1,12 +1,12 @@
-import type { Doc } from '@/content'
+import type { Guide } from '@/content'
 import React from 'react'
 import { cn } from '@/lib/utils'
 import Link from 'next/link'
 import { LanguageIcon } from '../icons/LanguageIcon'
 import { Language } from '@/lib/constants'
 
 interface Props {
-  guide: Doc
+  guide: Guide
   featured?: boolean
 }
 

src/components/guides/GuideList.tsx

@@ -2,21 +2,20 @@
 
 import React from 'react'
 import { GuideItem } from './GuideItem'
-import { Doc } from '@/content'
 import { cn } from '@/lib/utils'
 import useParams from '@/hooks/useParams'
+import { allGuides } from '@/content'
 
 interface Props {
-  guides: Doc[]
   className?: string
 }
 
-const GuideList: React.FC<Props> = ({ className, guides }) => {
+const GuideList: React.FC<Props> = ({ className }) => {
   const { searchParams } = useParams()
   const selectedTags = searchParams?.get('tags')?.split(',') || []
   const selectedLangs = searchParams?.get('langs')?.split(',') || []
 
-  const filteredGuides = guides
+  const filteredGuides = allGuides
     .filter((guide) => {
       let include = true
 

src/components/guides/GuidePage.tsx

@@ -1,18 +1,14 @@
-import { Doc } from '@/content'
 import React, { Suspense } from 'react'
 
 import { GuideFilters } from './GuideFilters'
 import GuideList from './GuideList'
-import { Button } from '../ui/button'
-import { AdjustmentsHorizontalIcon } from '@heroicons/react/24/outline'
 import GuideMobileFilters from './GuideMobileFilters'
 
 interface Props {
-  guides: Doc[]
   allTags: string[]
 }
 
-const GuidePage: React.FC<Props> = ({ guides, allTags }) => {
+const GuidePage: React.FC<Props> = ({ allTags }) => {
   return (
     <div className="gap-x-4 lg:grid lg:grid-cols-[280px,1fr]">
       <div className="hidden border-r pb-10 lg:block">
@@ -27,10 +23,7 @@ const GuidePage: React.FC<Props> = ({ guides, allTags }) => {
         <GuideMobileFilters allTags={allTags} />
       </div>
       <Suspense>
-        <GuideList
-          guides={guides}
-          className="relative mx-2 my-4 w-full sm:px-8 lg:my-10"
-        />
+        <GuideList className="relative mx-2 my-4 w-full sm:px-8 lg:my-10" />
       </Suspense>
     </div>
   )