Add dynamic pages

cis1951 · Dec 29, 2023 · ac96bae · ac96bae
1 parent 7d6961c
commit ac96bae
Show file tree

Hide file tree

Showing 14 changed files with 4,064 additions and 1,435 deletions.
diff --git a/.gitignore b/.gitignore
@@ -130,3 +130,4 @@ dist
 .pnp.*
 
 out
+.contentlayer
diff --git a/.htaccess b/.htaccess
@@ -0,0 +1,14 @@
+# Enable rewrite engine
+RewriteEngine On
+
+# Check if the .html version of the requested resource exists
+RewriteCond %{REQUEST_FILENAME}.html -f
+# Rewrite to .html version if existing (for requests without an extension)
+RewriteRule ^([^\.]+)$ $1.html [NC,L]
+
+# Custom error document
+ErrorDocument 404 /404.html
+
+# Internally rewrite requests to 404.html, while maintaining the 404 status
+RewriteCond %{ENV:REDIRECT_STATUS} ^$
+RewriteRule ^404\.html$ - [R=404,L]
diff --git a/app/[slug]/page.tsx b/app/[slug]/page.tsx
@@ -0,0 +1,24 @@
+import { allPages } from 'contentlayer/generated'
+import { notFound } from 'next/navigation'
+import { useMDXComponent } from 'next-contentlayer/hooks'
+
+export async function generateStaticParams() {
+    return allPages.map(page => ({
+        slug: page.slug,
+    })).filter(slug => slug)
+}
+
+export default function Page({ params }: { params: { slug: string } }) {
+    console.log(allPages)
+    const page = allPages.find(page => page.slug === params.slug)
+    if (!page) notFound()
+
+    const MDXContent = useMDXComponent(page.body.code)
+
+    return <div className="card">
+        <h1 className="text-3xl font-bold mb-2">{page.title}</h1>
+        <div className="prose">
+            <MDXContent />
+        </div>
+    </div>
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -12,7 +12,14 @@ export default function RootLayout({
 }) {
     return (
         <html lang="en">
-            <body>{children}</body>
+            <body>
+                <div className="container mx-auto p-4 md:px-8 md:py-16">
+                    <h1 className="text-8xl w-fit font-bold text-transparent bg-clip-text bg-gradient-to-br from-cyan-700 to-purple-700 dark:from-cyan-400 dark:to-purple-400">CIS 1951</h1>
+                    <div className="mt-8">
+                        {children}
+                    </div>
+                </div>
+            </body>
         </html>
     )
 }

diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -0,0 +1,5 @@
+export default function NotFound() {
+    return <div>
+        <p><strong>404</strong>: The page you requested couldn't be found.</p>
+    </div>
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,3 +1,5 @@
+import Page from "./[slug]/page";
+
 export default function Home() {
-    return <div>Hello, world!</div>
-}
+    return <Page params={{ slug: "" }} />
+}
diff --git a/content/pages/index.mdx b/content/pages/index.mdx
@@ -0,0 +1,5 @@
+---
+title: Home
+---
+
+Hello, world!
diff --git a/content/pages/syllabus.mdx b/content/pages/syllabus.mdx
@@ -0,0 +1,5 @@
+---
+title: Syllabus
+---
+
+Blah blah this is a syllabus
diff --git a/contentlayer.config.ts b/contentlayer.config.ts
@@ -0,0 +1,61 @@
+import { defineDocumentType, makeSource } from 'contentlayer/source-files'
+
+export const Page = defineDocumentType(() => ({
+    name: 'Page',
+    filePathPattern: `pages/**/*.mdx`,
+    contentType: 'mdx',
+    fields: {
+        title: { type: 'string', required: true },
+    },
+    computedFields: {
+        slug: {
+            type: 'string',
+            resolve: page => {
+                const path = page._raw.flattenedPath
+                if (path === 'pages/index') return '/'
+                return path.slice("pages/".length)
+            },
+        },
+    },
+}))
+
+export const Homework = defineDocumentType(() => ({
+    name: 'Homework',
+    filePathPattern: `homework/**/*.mdx`,
+    contentType: 'mdx',
+    fields: {
+        title: { type: 'string', required: true },
+    },
+    computedFields: {
+        slug: { type: 'string', resolve: page => page._raw.flattenedPath.slice("homework/".length) },
+    },
+}))
+
+export const Lecture = defineDocumentType(() => ({
+    name: 'Lecture',
+    filePathPattern: `lectures/**/*.mdx`,
+    contentType: 'mdx',
+    fields: {
+        title: { type: 'string', required: true },
+    },
+    computedFields: {
+        slug: { type: 'string', resolve: page => page._raw.flattenedPath.slice("lectures/".length) },
+    },
+}))
+
+export const Exam = defineDocumentType(() => ({
+    name: 'Exam',
+    filePathPattern: `exams/**/*.mdx`,
+    contentType: 'mdx',
+    fields: {
+        title: { type: 'string', required: true },
+    },
+    computedFields: {
+        slug: { type: 'string', resolve: page => page._raw.flattenedPath.slice("exams/".length) },
+    },
+}))
+
+export default makeSource({
+    contentDirPath: 'content',
+    documentTypes: [Page, Homework, Lecture, Exam],
+})
diff --git a/next.config.js b/next.config.js
@@ -1,7 +1,10 @@
+const { withContentlayer } = require('next-contentlayer')
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     basePath: "/~cis1951",
     output: "export",
+    pageExtensions: ["js", "jsx", "ts", "tsx", "mdx"],
 }
 
-module.exports = nextConfig
+module.exports = withContentlayer(nextConfig)