Fix build error, add section times to schedule page, and redact

unreleased assignments
cis1951 · Jan 8, 2024 · 0b21bbd · 0b21bbd
1 parent 20aa1ca
commit 0b21bbd
Show file tree

Hide file tree

Showing 9 changed files with 156 additions and 113 deletions.
diff --git a/app/assignments/assessment/[slug]/page.tsx b/app/assignments/assessment/[slug]/page.tsx
@@ -1,4 +1,4 @@
-import { allAssessments } from 'contentlayer/generated'
+import { Assessment, allAssessments } from 'contentlayer/generated'
 import { notFound } from 'next/navigation'
 import { useMDXComponent } from 'next-contentlayer/hooks'
 import { mdxComponents } from '@/components/mdx'
@@ -13,12 +13,18 @@ export async function generateStaticParams() {
     }))
 }
 
+function AssessmentContent({ page }: { page: Assessment }) {
+    const MDXContent = useMDXComponent(page.body.code)
+    return <MDXContent components={mdxComponents} />
+}
+
 export default function Assessment({ params }: { params: { slug: string } }) {
     const page = allAssessments.find(page => page.slug === params.slug)
     if (!page) notFound()
 
-    const MDXContent = useMDXComponent(page.body.code)
-    const content = <MDXContent components={mdxComponents} />
+    const content = page.body ?
+        <AssessmentContent page={page} /> :
+        "This assignment hasn't been released yet."
 
     return <Card title={<h1>{page.title}</h1>}>
         <Prose>

diff --git a/app/assignments/hw/[slug]/page.tsx b/app/assignments/hw/[slug]/page.tsx
@@ -1,9 +1,9 @@
-import { allHomework } from 'contentlayer/generated'
 import { notFound } from 'next/navigation'
 import { useMDXComponent } from 'next-contentlayer/hooks'
 import { mdxComponents } from '@/components/mdx'
 import { Card } from '@/components/Card'
 import { Prose } from '@/components/Prose'
+import { Homework, allHomework } from 'contentlayer/generated'
 
 export async function generateStaticParams() {
     if (!allHomework.length) return [{ slug: "dummy" }]
@@ -13,12 +13,18 @@ export async function generateStaticParams() {
     }))
 }
 
+function HomeworkContent({ page }: { page: Homework }) {
+    const MDXContent = useMDXComponent(page.body.code)
+    return <MDXContent components={mdxComponents} />
+}
+
 export default function Homework({ params }: { params: { slug: string } }) {
     const page = allHomework.find(page => page.slug === params.slug)
     if (!page) notFound()
 
-    const MDXContent = useMDXComponent(page.body.code)
-    const content = <MDXContent components={mdxComponents} />
+    const content = page.body ?
+        <HomeworkContent page={page} /> :
+        "This assignment hasn't been released yet."
 
     return <Card title={<h1>{page.title}</h1>}>
         <Prose>

diff --git a/app/assignments/page.tsx b/app/assignments/page.tsx
@@ -1,113 +1,19 @@
-import { allHomework, allAssessments } from 'contentlayer/generated'
 import { Card } from '@/components/Card'
-import Link from 'next/link'
-import { FormattedDate } from '@/components/FormattedDate'
-
-type Assignment = {
-    title: string
-    href: string
-    isReleased: boolean
-    releaseDate?: Date
-    dates: {
-        name: string
-        date: Date
-        specifyTime: boolean
-    }[]
-    sortDate: Date
-}
-
-export const formattedHomework: Assignment[] = allHomework.map(hw => {
-    const due = new Date(hw.dueDate)
-
-    return {
-        title: hw.title,
-        href: `/assignments/hw/${hw.slug}`,
-        isReleased: hw.isReleased,
-        releaseDate: hw.releaseDate && new Date(hw.releaseDate),
-        dates: [
-            ...(hw.auxiliaryDates ?? []).map(aux => ({
-                name: aux.name,
-                date: new Date(aux.date),
-                specifyTime: true,
-            })),
-            {
-                name: "Due",
-                date: due,
-                specifyTime: true,
-            }
-        ],
-        sortDate: new Date(hw.dueDate),
-    }
-})
-
-export const formattedAssessments = allAssessments.map(a => {
-    const date = new Date(a.assessmentDate)
-
-    return {
-        title: a.title,
-        href: `/assignments/assessment/${a.slug}`,
-        isReleased: a.isReleased,
-        releaseDate: a.releaseDate && new Date(a.releaseDate),
-        dates: [
-            {
-                name: "Scheduled",
-                date,
-                specifyTime: false,
-            }
-        ],
-        sortDate: date,
-    }
-})
-
-function AssignmentRow({ title, href, isReleased, releaseDate, dates }: Assignment) {
-    let className = "border-b border-neutral-300 dark:border-neutral-600 py-2 last:pb-0 last:border-0 block lg:table-row w-full"
-    if (!isReleased) {
-        className += " opacity-50"
-    }
-
-    return <tr className={className}>
-        <td className="lg:py-2 w-full block lg:table-cell">
-            {isReleased ?
-                <Link href={href} className="link font-bold">{title}</Link> :
-                <span className="italic">{title}{releaseDate && <> (available <strong><FormattedDate date={releaseDate} format="M/d" /></strong>)</>}</span>}
-        </td>
-        <td className="lg:py-2 block lg:table-cell">
-            {dates.map((item, index) => <div key={index}>
-                {item.name} <strong><FormattedDate date={item.date} format={item.specifyTime ? "E, M/d @ h:mmaa" : "E, M/d"} /></strong>
-            </div>)}
-        </td>
-    </tr>
-}
-
-export function AssignmentTable({ assignments: raw }: { assignments: Assignment[] }) {
-    const data = raw.toSorted((a, b) => a.sortDate.getTime() - b.sortDate.getTime())
-
-    return <table className="block lg:table w-full">
-        <thead>
-            <tr className="border-b-4 border-neutral-300 dark:border-neutral-600 sr-only lg:not-sr-only">
-                <th className="text-left pb-2 w-full">Name</th>
-                <th className="text-left pb-2 lg:min-w-64">Date</th>
-            </tr>
-        </thead>
-        <tbody className="block lg:table-row-group">
-            {data.map(assignment => <AssignmentRow {...assignment} key={assignment.href} />)}
-        </tbody>
-    </table>
-}
+import { AssignmentTable, formattedAssessments, formattedHomework } from '@/components/AssignmentTable'
 
 export default function Assignments() {
-    if (!allHomework.length && !allAssessments.length) {
+    if (!formattedHomework.length && !formattedAssessments.length) {
         return <Card>
             There are currently no assignments for this class.
         </Card>
     }
 
     return <div>
         <div className="mb-4">Here you'll find all assignments for this class.</div>
-        {allHomework.length > 0 && <Card title={<h2>Homework</h2>} margin={allAssessments.length > 0}>
+        {formattedHomework.length > 0 && <Card title={<h2>Homework</h2>} margin={formattedAssessments.length > 0}>
             <AssignmentTable assignments={formattedHomework} />
         </Card>}
-        {allAssessments.length > 0 && <Card title={<h2>Assessments</h2>}>
+        {formattedAssessments.length > 0 && <Card title={<h2>Assessments</h2>}>
             <AssignmentTable assignments={formattedAssessments} />
         </Card>}
     </div>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,10 +2,14 @@ import "@/styles/global.css"
 import "prism-themes/themes/prism-atom-dark.css"
 import { Menu, MenuContextProvider } from "./menu"
 import { TimezoneNotice } from "@/components/TimezoneNotice"
+import { Metadata } from "next"
 
-export const metadata = {
-    title: 'Next.js',
-    description: 'Generated by Next.js',
+export const metadata: Metadata = {
+    title: {
+        default: "CIS 1951",
+        template: "%s | CIS 1951",
+    },
+    description: "An intro to iOS development course at the University of Pennsylvania.",
 }
 
 export default function RootLayout({

diff --git a/app/schedule/content.tsx b/app/schedule/content.tsx
@@ -25,17 +25,18 @@ export function SchedulePageContent() {
         return <div className="flex flex-col items-center justify-center h-full gap-4">
             <div className="text-2xl font-bold">Please choose a section:</div>
             <div className="flex gap-4 text-xl">
-                {sections.map(section => <button key={section} className="link" onClick={() => setSectionAndStore(section)}>{section}</button>)}
+                {sections.map(section => <button key={section.id} className="link" onClick={() => setSectionAndStore(section.id)}>{section.id} ({section.time})</button>)}
             </div>
             <div className="opacity-70">You can change this later.</div>
         </div>
     }
 
-    const schedule = getSchedule(section)
+    const schedule = getSchedule(null)
+    const time = sections.find(s => s.id === section)?.time ?? "Unknown Section"
 
     return <div>
         <Card margin>
-            You're currently viewing the schedule for section <strong>{section}</strong>. <button className="link" onClick={() => {
+            You're currently viewing the schedule for section <strong>{section} ({time})</strong>. <button className="link" onClick={() => {
                 setSection(null)
             }}>Switch section...</button>
         </Card>

diff --git a/components/AssignmentTable.tsx b/components/AssignmentTable.tsx
@@ -0,0 +1,95 @@
+import Link from "next/link"
+import { FormattedDate } from "./FormattedDate"
+import { allAssessments, allHomework } from "contentlayer/generated"
+
+export type Assignment = {
+    title: string
+    href: string
+    isReleased: boolean
+    releaseDate?: Date
+    dates: {
+        name: string
+        date: Date
+        specifyTime: boolean
+    }[]
+    sortDate: Date
+}
+
+export const formattedHomework: Assignment[] = allHomework.map(hw => {
+    const due = new Date(hw.dueDate)
+
+    return {
+        title: hw.title,
+        href: `/assignments/hw/${hw.slug}`,
+        isReleased: hw.isReleased,
+        releaseDate: hw.releaseDate && new Date(hw.releaseDate),
+        dates: [
+            ...(hw.auxiliaryDates ?? []).map(aux => ({
+                name: aux.name,
+                date: new Date(aux.date),
+                specifyTime: true,
+            })),
+            {
+                name: "Due",
+                date: due,
+                specifyTime: true,
+            }
+        ],
+        sortDate: new Date(hw.dueDate),
+    }
+})
+
+export const formattedAssessments = allAssessments.map(a => {
+    const date = new Date(a.assessmentDate)
+
+    return {
+        title: a.title,
+        href: `/assignments/assessment/${a.slug}`,
+        isReleased: a.isReleased,
+        releaseDate: a.releaseDate && new Date(a.releaseDate),
+        dates: [
+            {
+                name: "Scheduled",
+                date,
+                specifyTime: false,
+            }
+        ],
+        sortDate: date,
+    }
+})
+
+export function AssignmentRow({ title, href, isReleased, releaseDate, dates }: Assignment) {
+    let className = "border-b border-neutral-300 dark:border-neutral-600 py-2 last:pb-0 last:border-0 block lg:table-row w-full"
+    if (!isReleased) {
+        className += " opacity-50"
+    }
+
+    return <tr className={className}>
+        <td className="lg:py-2 w-full block lg:table-cell">
+            {isReleased ?
+                <Link href={href} className="link font-bold">{title}</Link> :
+                <span className="italic">{title}{releaseDate && <> (available <strong><FormattedDate date={releaseDate} format="M/d" /></strong>)</>}</span>}
+        </td>
+        <td className="lg:py-2 block lg:table-cell">
+            {dates.map((item, index) => <div key={index}>
+                {item.name} <strong><FormattedDate date={item.date} format={item.specifyTime ? "E, M/d @ h:mmaa" : "E, M/d"} /></strong>
+            </div>)}
+        </td>
+    </tr>
+}
+
+export function AssignmentTable({ assignments: raw }: { assignments: Assignment[] }) {
+    const data = raw.toSorted((a, b) => a.sortDate.getTime() - b.sortDate.getTime())
+
+    return <table className="block lg:table w-full">
+        <thead>
+            <tr className="border-b-4 border-neutral-300 dark:border-neutral-600 sr-only lg:not-sr-only">
+                <th className="text-left pb-2 w-full">Name</th>
+                <th className="text-left pb-2 lg:min-w-64">Date</th>
+            </tr>
+        </thead>
+        <tbody className="block lg:table-row-group">
+            {data.map(assignment => <AssignmentRow {...assignment} key={assignment.href} />)}
+        </tbody>
+    </table>
+}
diff --git a/content/homework/hw1.mdx b/content/homework/hw1.mdx
@@ -3,4 +3,6 @@ title: HW1 - Basic Swift
 isReleased: false
 dueDate: 2024-01-23T23:59:00-05:00
 releaseDate: 2024-01-24T23:59:00-05:00
----
+---
+
+This content should not appear in the final export.
diff --git a/contentlayer.config.ts b/contentlayer.config.ts
@@ -48,6 +48,13 @@ export const Homework = defineDocumentType(() => ({
     },
     computedFields: {
         slug: { type: 'string', resolve: page => page._raw.flattenedPath.slice("homework/".length) },
+        body: {
+            type: 'mdx',
+            resolve(page) {
+                if (page.isReleased) return page.body
+                return undefined
+            },
+        },
     },
 }))
 
@@ -63,13 +70,20 @@ export const Assessment = defineDocumentType(() => ({
     },
     computedFields: {
         slug: { type: 'string', resolve: page => page._raw.flattenedPath.slice("assessments/".length) },
+        body: {
+            type: 'mdx',
+            resolve(page) {
+                if (page.isReleased) return page.body
+                return undefined
+            },
+        },
     },
 }))
 
 const LectureDates = defineNestedType(() => {
     const fields = {}
     sections.forEach(section => {
-        fields[section] = { type: 'date', required: false }
+        fields[section.id] = { type: 'date', required: false }
     })
 
     return {

diff --git a/sections.json b/sections.json
@@ -1 +1,10 @@
-["201", "202"]
+[
+    {
+        "id": "201",
+        "time": "Thursdays 7pm"
+    },
+    {
+        "id": "202",
+        "time": "Mondays 5:15pm"
+    }
+]