Add newsletter and wiki archives

app/newsletter/page.tsx

@@ -0,0 +1,6 @@
+import ArchivePage from '@/components/ArchivePage';
+import { newsletterArchive } from '@/lib/archive';
+
+export default function NewsletterPage() {
+  return <ArchivePage archive={newsletterArchive} />;
+}

app/wiki/page.tsx

@@ -0,0 +1,6 @@
+import ArchivePage from '@/components/ArchivePage';
+import { wikiArchive } from '@/lib/archive';
+
+export default function WikiPage() {
+  return <ArchivePage archive={wikiArchive} />;
+}

components/ArchivePage.tsx

@@ -0,0 +1,79 @@
+import { ExternalLinkIcon } from 'lucide-react';
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { anchorForArchiveYear, type ArchiveDefinition } from '@/lib/archive';
+
+export default function ArchivePage({
+  archive,
+}: {
+  archive: ArchiveDefinition;
+}) {
+  return (
+    <>
+      <section className='relative h-80 w-full overflow-hidden md:h-104'>
+        <Image
+          src='/images/hero.jpg'
+          alt='Students performing at a NUS College event'
+          fill
+          sizes='100vw'
+          className='object-cover'
+          priority
+        />
+        <div className='absolute inset-0 bg-linear-to-b from-[rgba(29,107,173,0)] to-[#0C2C47]' />
+        <div className='relative z-10 flex h-full items-end px-8 pb-12 md:px-16 md:pb-16'>
+          <h1 className='text-4xl font-bold text-white md:text-6xl'>
+            {archive.name}
+          </h1>
+        </div>
+      </section>
+
+      <section className='bg-white px-8 py-14 md:px-16 md:py-20'>
+        <div className='mx-auto max-w-7xl'>
+          <p className='max-w-3xl text-lg leading-8 text-gray-600'>
+            {archive.description}
+          </p>
+
+          <div className='mt-12 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3'>
+            {archive.years.map((year) => (
+              <article
+                key={year.year}
+                id={anchorForArchiveYear(year.year)}
+                className='flex min-h-56 scroll-mt-24 flex-col items-center justify-center bg-[#FFF4E5] p-8 text-center'
+              >
+                <h2 className='text-2xl font-bold text-[#0C2C47] uppercase'>
+                  {year.year}
+                </h2>
+                {year.editions ? (
+                  <ul className='mt-6 space-y-3'>
+                    {year.editions.map((edition) => (
+                      <li key={edition.href}>
+                        <Link
+                          href={edition.href}
+                          target='_blank'
+                          rel='noopener noreferrer'
+                          className='inline-flex items-center gap-2 font-semibold text-[#FF7D4E] underline decoration-2 underline-offset-4 hover:text-[#0C2C47] focus-visible:text-[#0C2C47]'
+                        >
+                          {edition.label}
+                          <ExternalLinkIcon
+                            className='h-4 w-4 shrink-0'
+                            aria-hidden='true'
+                          />
+                          <span className='sr-only'>(opens in a new tab)</span>
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                ) : (
+                  <p className='mt-6 font-semibold text-gray-500'>
+                    FORTHCOMING
+                  </p>
+                )}
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

components/Header.tsx

@@ -29,6 +29,7 @@ import {
   SheetTitle,
   SheetTrigger,
 } from '@/components/ui/sheet';
+import { newsletterArchive, wikiArchive } from '@/lib/archive';
 import { useAuth } from '@/lib/hooks/useAuth';
 
 import CustomDropdown from './custom-dropdown';
@@ -60,11 +61,15 @@ export default function Header() {
         <div className='lg:hidden'>
           <Sheet open={isSidebarOpen} onOpenChange={setIsSidebarOpen}>
             <SheetTrigger asChild>
-              <Button variant='ghost' size='icon'>
-                <MenuIcon className='h-6 w-6' />
+              <Button
+                variant='ghost'
+                size='icon'
+                aria-label='Open navigation menu'
+              >
+                <MenuIcon className='h-6 w-6' aria-hidden='true' />
               </Button>
             </SheetTrigger>
-            <SheetContent side='left'>
+            <SheetContent side='left' className='overflow-y-auto'>
               <SheetHeader>
                 <SheetTitle />
                 <SheetDescription className='sr-only'>
@@ -140,14 +145,25 @@ export default function Header() {
                   <NavigationMenuItem>
                     <NavigationMenuLink asChild>
                       <Link
-                        href='https://sites.google.com/view/nusc-wiki-2425/home'
-                        target='_blank'
+                        href={newsletterArchive.href}
+                        onClick={() => setIsSidebarOpen(false)}
                       >
                         NEWSLETTER
                       </Link>
                     </NavigationMenuLink>
                   </NavigationMenuItem>
 
+                  <NavigationMenuItem>
+                    <NavigationMenuLink asChild>
+                      <Link
+                        href={wikiArchive.href}
+                        onClick={() => setIsSidebarOpen(false)}
+                      >
+                        WIKI
+                      </Link>
+                    </NavigationMenuLink>
+                  </NavigationMenuItem>
+
                   {/* Admin menu for logged in users */}
                   {isAuthenticated && (
                     <NavigationMenuItem className='w-full'>
@@ -236,12 +252,15 @@ export default function Header() {
                 className={navigationMenuTriggerStyle()}
                 asChild
               >
-                <Link
-                  href='https://sites.google.com/view/nusc-wiki-2425/home'
-                  target='_blank'
-                >
-                  NEWSLETTER
-                </Link>
+                <Link href={newsletterArchive.href}>NEWSLETTER</Link>
+              </NavigationMenuLink>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+              <NavigationMenuLink
+                className={navigationMenuTriggerStyle()}
+                asChild
+              >
+                <Link href={wikiArchive.href}>WIKI</Link>
               </NavigationMenuLink>
             </NavigationMenuItem>