SOEOPSFY24-205 | explore contentlayer mdx

.gitignore

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

app/page.tsx

@@ -1,13 +1,39 @@
+import Link from 'next/link';
+import { compareDesc, format, parseISO } from 'date-fns';
+import { allPages, Page } from 'contentlayer/generated';
 import { Heading } from '@/components/Typography';
 import { ShapeAnimation } from '@/components/ShapeAnimation';
 import { TimelineBanner } from '@/components/TimelineBanner';
 
+function PostCard(page: Page) {
+  return (
+    <div className="mb-8">
+      <h2 className="mb-1 text-xl">
+        <Link href={page.url} className="text-blue-700 hover:text-blue-900 dark:text-blue-400">
+          {page.title}
+        </Link>
+      </h2>
+      <time dateTime={page.lastUpdatedDate} className="mb-2 block text-xs text-gray-600">
+        {format(parseISO(page.lastUpdatedDate), 'LLLL d, yyyy')}
+      </time>
+   </div>
+  );
+}
+
 export default function Home() {
+  const posts = allPages.sort(
+    (a: Page, b: Page) => compareDesc(new Date(a.lastUpdatedDate), new Date(b.lastUpdatedDate)),
+  );
+
   return (
     <div>
       <Heading>SOE Centennial</Heading>
       <ShapeAnimation />
       <TimelineBanner heading='Headline lorem ipsum dolar sit' superhead='1983' body="Cras felis tortor, bibendum quis porttitor at, ullamcorper eu diam. Aenean iaculis efficitur quam, quis dignissim lacus. Cras nec dui id mi blandit lobortis eget in enim." />
+      <h1 className="mb-8 text-center text-2xl font-black">Next.js + Contentlayer Example</h1>
+      {posts.map((page, idx) => (
+        <PostCard key={idx} {...page} />
+      ))}
     </div>
   );
-}
+}

content/index.mdx

@@ -0,0 +1,13 @@
+---
+title: Homepage
+lastUpdatedDate: 2024-10-15T12:00:00.000Z
+---
+Hello World
+
+Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nam pretium turpis et arcu. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Nunc sed turpis.
+
+In ac felis quis tortor malesuada pretium. Curabitur blandit mollis lacus. Pellentesque commodo eros a enim. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor.
+
+Fusce fermentum odio nec arcu. Cras sagittis. Suspendisse potenti. Phasellus viverra nulla ut metus varius laoreet.
+
+Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. In hac habitasse platea dictumst. Aliquam lobortis. Etiam sit amet orci eget eros faucibus tincidunt.

contentlayer.config.ts

@@ -0,0 +1,22 @@
+import { defineDocumentType, makeSource } from 'contentlayer2/source-files';
+
+export const Page = defineDocumentType(() => ({
+  name: 'Page',
+  filePathPattern: '**/*.md*',
+  contentType: 'mdx',
+  fields: {
+    title: { type: 'string', required: true },
+    lastUpdatedDate: { type: 'date', required: true },
+  },
+  computedFields: {
+    url: {
+      type: 'string',
+      resolve: (post) => (post._raw.sourceFileName === 'index.mdx' ? '/' : `/${post._raw.flattenedPath}`),
+    },
+  },
+}));
+
+export default makeSource({
+  contentDirPath: 'content',
+  documentTypes: [Page],
+});

next.config.mjs

@@ -1,8 +1,11 @@
 /** @type {import('next').NextConfig} */
+import { withContentlayer } from 'next-contentlayer2';
+
 const nextConfig = {
   basePath: '/soe-centennial-nextjs',
   output: 'export', 
   reactStrictMode: true,
+  swcMinify: true,
 };
 
-export default nextConfig;
+export default withContentlayer(nextConfig);