Add client-side date formatting and fix page build issues

app/[slug]/page.tsx

@@ -9,7 +9,7 @@ import { MenuItemActivator } from '@/app/menu'
 export async function generateStaticParams() {
     return allPages.map(page => ({
         slug: page.slug,
-    })).filter(slug => slug)
+    })).filter(({ slug }) => slug)
 }
 
 export default function Page({ params }: { params: { slug: string } }) {

app/assignments/assessment/[slug]/page.tsx

@@ -1,15 +1,16 @@
-import { allAssessments, allHomework } from 'contentlayer/generated'
+import { allAssessments } 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 { MenuItemActivator } from '@/app/menu'
 
 export async function generateStaticParams() {
+    if (!allAssessments.length) return [{ slug: "dummy" }]
+
     return allAssessments.map(page => ({
         slug: page.slug,
-    })).filter(slug => slug)
+    }))
 }
 
 export default function Assessment({ params }: { params: { slug: string } }) {

app/assignments/hw/[slug]/page.tsx

@@ -4,12 +4,13 @@ import { useMDXComponent } from 'next-contentlayer/hooks'
 import { mdxComponents } from '@/components/mdx'
 import { Card } from '@/components/Card'
 import { Prose } from '@/components/Prose'
-import { MenuItemActivator } from '@/app/menu'
 
 export async function generateStaticParams() {
+    if (!allHomework.length) return [{ slug: "dummy" }]
+
     return allHomework.map(page => ({
         slug: page.slug,
-    })).filter(slug => slug)
+    }))
 }
 
 export default function Homework({ params }: { params: { slug: string } }) {

app/assignments/page.tsx

@@ -1,8 +1,7 @@
 import { allHomework, allAssessments } from 'contentlayer/generated'
 import { Card } from '@/components/Card'
-import { MenuItemActivator } from '@/app/menu'
 import Link from 'next/link'
-import { format } from 'date-fns'
+import { FormattedDate } from '@/components/FormattedDate'
 
 type Assignment = {
     title: string
@@ -70,11 +69,11 @@ function AssignmentRow({ title, href, isReleased, releaseDate, dates }: Assignme
         <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>{format(releaseDate, "M/d")}</strong>)</>}</span>}
+                <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>{format(item.date, item.specifyTime ? "E, M/d @ h:mmaa" : "E, M/d")}</strong>
+                {item.name} <strong><FormattedDate date={item.date} format={item.specifyTime ? "E, M/d @ h:mmaa" : "E, M/d"} /></strong>
             </div>)}
         </td>
     </tr>

app/layout.tsx

@@ -1,6 +1,7 @@
 import "@/styles/global.css"
 import "prism-themes/themes/prism-atom-dark.css"
 import { Menu, MenuContextProvider } from "./menu"
+import { TimezoneNotice } from "@/components/TimezoneNotice"
 
 export const metadata = {
     title: 'Next.js',
@@ -24,7 +25,12 @@ export default function RootLayout({
                                 <div className="px-4 md:px-0 w-full"><Menu /></div>
                                 <div className="w-full rounded-t-2xl h-4 bg-white dark:bg-black mt-4 border-t border-neutral-200 dark:border-neutral-700 md:hidden" />
                             </div>
-                            <div className="container mx-auto md:w-full md:basis-full p-4 pt-1 md:p-0 md:pt-0">{children}</div>
+                            <div className="container mx-auto md:w-full md:basis-full p-4 pt-1 md:p-0 md:pt-0">
+                                {children}
+                                <div className="mt-4 md:mt-8 text-center opacity-40">
+                                    <TimezoneNotice />
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </MenuContextProvider>

app/menu.tsx

@@ -55,15 +55,10 @@ export function MenuContextProvider({ children }: { children: ReactNode }) {
     const pathname = usePathname()
     const [activeState, setActiveState] = useState<{ item: string | null, pathname: string }>({ item: null, pathname })
 
-    useEffect(() => {
-        if (activeState.pathname !== pathname) {
-            setActiveState({ item: null, pathname })
-        }
-    }, [pathname])
-
     return <MenuContext.Provider value={{
-        activeItem: activeState.item,
+        activeItem: activeState.pathname === pathname ? activeState.item : null,
         setActiveItem(item) {
+            console.log({ item, pathname })
             setActiveState({ item, pathname })
         }
     }}>

components/FormattedDate.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import locale from "date-fns/locale/en-US"
+import { formatInTimeZone } from "date-fns-tz"
+import { format } from "date-fns"
+
+export type FormattedDateProps = {
+    date: Date
+    format: string
+}
+
+const defaultTimezone = "America/New_York"
+
+export function FormattedDate({ date, format: formatStr }: FormattedDateProps) {
+    const [value, setValue] = useState(formatInTimeZone(date, defaultTimezone, formatStr, {
+        locale,
+    }))
+
+    useEffect(() => {
+        setValue(format(date, formatStr))
+    }, [date, formatStr])
+
+    return value
+}

components/TimezoneNotice.tsx

@@ -0,0 +1,13 @@
+"use client"
+
+import { useEffect, useState } from "react";
+
+export function TimezoneNotice() {
+    const [isUsingLocalTimezone, setUsingLocalTimezone] = useState(false)
+    useEffect(() => {
+        setUsingLocalTimezone(true)
+    }, [])
+
+    if (isUsingLocalTimezone) return "Dates and times are displayed in your local time zone."
+    return "Dates and times are displayed in EST."
+}

content/pages/index.mdx

@@ -11,6 +11,8 @@ customLayout: true
 </Card>
 
 <Card title={<h2>Upcoming Assignments</h2>} margin>
+    **NOTE:** This component is currently broken. It only shows upcoming assignments at page build time, not at view time.
+
     <UpcomingAssignments />
 </Card>
 

package.json

@@ -7,7 +7,8 @@
     "@next/mdx": "^14.0.4",
     "@types/mdx": "^2.0.10",
     "contentlayer": "^0.3.4",
-    "date-fns": "^3.0.6",
+    "date-fns": "^2.30.0",
+    "date-fns-tz": "^2.0.0",
     "next": "^14.0.4",
     "next-contentlayer": "^0.3.4",
     "prism-themes": "^1.9.0"