Give up and use @tailwindcss/typography

cis1951 · Dec 29, 2023 · 9936a09 · 9936a09
1 parent ac96bae
commit 9936a09
Show file tree

Hide file tree

Showing 10 changed files with 366 additions and 20 deletions.
diff --git a/app/[slug]/page.tsx b/app/[slug]/page.tsx
@@ -1,6 +1,7 @@
 import { allPages } from 'contentlayer/generated'
 import { notFound } from 'next/navigation'
 import { useMDXComponent } from 'next-contentlayer/hooks'
+import { mdxComponents } from '@/components/mdx'
 
 export async function generateStaticParams() {
     return allPages.map(page => ({
@@ -9,16 +10,18 @@ export async function generateStaticParams() {
 }
 
 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 className="mb-4 w-fit">
+            <h1 className="text-3xl font-bold mb-0.5">{page.title}</h1>
+            <div className="bg-gradient-to-r from-cyan-500 to-purple-500 h-1" />
+        </div>
+        <div className="prose prose-neutral dark:prose-invert max-w-none prose-h1:mb-4 prose-h2:mt-6 prose-h2:mb-2 prose-a:text-cyan-500 prose-a:dark:text-cyan-400 prose-p:my-2 prose-pre:my-2 prose-pre:border prose-pre:border-transparent prose-pre:dark:border-white/10 prose-blockquote:my-2">
+            <MDXContent components={mdxComponents} />
         </div>
     </div>
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,4 +1,5 @@
 import "@/styles/global.css"
+import "prism-themes/themes/prism-atom-dark.css"
 
 export const metadata = {
     title: 'Next.js',
@@ -13,8 +14,8 @@ export default function RootLayout({
     return (
         <html lang="en">
             <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="container mx-auto px-4 py-8 md:px-8 md:py-16">
+                    <h1 className="text-6xl md: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>

diff --git a/components/mdx.tsx b/components/mdx.tsx
@@ -0,0 +1,15 @@
+import { MDXComponents } from "mdx/types";
+import Link from "next/link";
+
+export const mdxComponents: MDXComponents = {
+    a: ({ href, ...props }) => {
+        const prefix = "/~cis1951/"
+        if (typeof href === "string") {
+            return <Link href={href.startsWith(prefix) ? href.slice(prefix.length - 1) : href} legacyBehavior>
+                <a {...props} />
+            </Link>
+        } else {
+            return <a {...props} />
+        }
+    },
+}
diff --git a/content/pages/index.mdx b/content/pages/index.mdx
@@ -2,4 +2,6 @@
 title: Home
 ---
 
-Hello, world!
+Hello, world!
+
+[Syllabus](/~cis1951/syllabus)
diff --git a/content/pages/syllabus.mdx b/content/pages/syllabus.mdx
@@ -2,4 +2,20 @@
 title: Syllabus
 ---
 
-Blah blah this is a syllabus
+## Grading
+
+Lorem ipsum dolor sit amet
+
+Blah:
+
+```swift
+print("Hello, world!")
+```
+
+* sdf
+* werqwer
+* 123
+
+1. sdfqwer
+2. werqwer
+3. qwerqwer
diff --git a/contentlayer.config.ts b/contentlayer.config.ts
@@ -1,4 +1,5 @@
 import { defineDocumentType, makeSource } from 'contentlayer/source-files'
+import rehypePrism from '@mapbox/rehype-prism'
 
 export const Page = defineDocumentType(() => ({
     name: 'Page',
@@ -58,4 +59,7 @@ export const Exam = defineDocumentType(() => ({
 export default makeSource({
     contentDirPath: 'content',
     documentTypes: [Page, Homework, Lecture, Exam],
+    mdx: {
+        rehypePlugins: [rehypePrism],
+    },
 })