Add blog post about 2024-10-20 potluck

The days of the week already reflected this, but the headers did not
match.

.env.example

@@ -1 +1,7 @@
-NEXT_PUBLIC_SITE_URL=https://example.com
+NEXT_PUBLIC_SITE_URL=https://westsoundhall.org
+STRIPE_SECRET_KEY=sk_XXXX
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_XXXX
+POSTMARK_SERVER_TOKEN=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+FROM_ADDRESS=support@westsoundhall.org
+ADMIN_ADDRESS=board@westsoundhall.org
+CALENDAR_ADDR=https://calendar.google.com/calendar/ical/westsoundcommunityclub%40gmail.com/private-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/basic.ics

README.md

@@ -6,10 +6,7 @@ https://westsoundhall.org
 
 ## Running
 
-Pre-build containers are created whenever a version is tagged in this
+Pre-build containers are created whenever a version is tagged in this repository. Pull the [latest version](https://git.grosinger.net/tgrosinger/-/packages/container/west-sound-hall/) and run on a server with Docker available.
-repository. Pull the [latest
-version](https://git.grosinger.net/tgrosinger/-/packages/container/west-sound-hall/)
-and run on a server with Docker available.
 
 ```sh
 docker run -p 3000:3000 git.grosinger.net/tgrosinger/west-sound-hall:0.0.14
@@ -17,11 +14,11 @@ docker run -p 3000:3000 git.grosinger.net/tgrosinger/west-sound-hall:0.0.14
 
 ## Updating
 
-### Events on the Homepage
+### Events on the Homepage and the Calendar
 
-The homepage has a list of upcoming events. This list is created from [`src/app/upcoming-events.json`](https://git.grosinger.net/tgrosinger/west-sound-hall/src/branch/main/src/app/upcoming-events.json). To update the events listed, modify that file, tag a new version, and then update the running container to the latest version.
+The events on the calendar are loaded from the westsoundcommunityclub@gmail.com Google Calendar.
 
-Events in the past will be automatically hidden from view.
+Please note that all events on the calendar will be displayed. If an event should not reveal the title to the public, add the word "Private" to the event description (not the title).
 
 ### News Posts
 
@@ -41,11 +38,7 @@ To get started, first install the npm dependencies:
 npm install
 ```
 
-Next, create a `.env.local` file in the root of your project and set the `NEXT_PUBLIC_SITE_URL` variable to your site's public URL:
+Next, copy the `.env.example` file from this directory and call it `.env.local`. Fill in the values that have been redacted with their actual secrets. Be sure to use the test environment key from Stripe unless you are setting up production.
-
-```
-NEXT_PUBLIC_SITE_URL=https://example.com
-```
 
 Next, run the development server:
 
@@ -59,4 +52,4 @@ Finally, open [http://localhost:3000](http://localhost:3000) in your browser to
 
 This site is based off of the Spotlight template from Tailwind, and licensed under the [Tailwind UI license](https://tailwindui.com/license).
 
-It was purchased by Tony Grosinger.
+It was purchased by [Tony Grosinger](mailto:tony@grosinger.net).

package.json

@@ -10,37 +10,39 @@
   },
   "browserslist": "defaults, not ie <= 11",
   "dependencies": {
-    "@headlessui/react": "1.7.17",
+    "@headlessui/react": "1.7.19",
     "@heroicons/react": "^2.0.18",
     "@mapbox/rehype-prism": "^0.8.0",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
-    "@next/mdx": "13.4.16",
+    "@next/mdx": "14.2.2",
     "@stripe/react-stripe-js": "2.4.0",
     "@stripe/stripe-js": "2.2.1",
     "@tailwindcss/forms": "0.5.7",
     "@tailwindcss/typography": "^0.5.4",
-    "@types/node": "20.4.7",
+    "@types/ical": "^0.8.3",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
     "@types/webpack-env": "^1.18.1",
     "autoprefixer": "^10.4.12",
     "cheerio": "^1.0.0-rc.12",
     "clsx": "^1.2.1",
+    "dayjs": "^1.11.10",
     "fast-glob": "^3.2.11",
     "feed": "^4.2.2",
-    "next": "13.4.16",
+    "ical": "^0.8.0",
-    "next-themes": "^0.2.1",
+    "next": "14.2.2",
     "postmark": "4.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "remark-gfm": "^3.0.1",
     "sharp": "0.32.6",
     "stripe": "14.9.0",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "3.4.3",
-    "typescript": "5.1.6"
+    "typescript": "5.4.5"
   },
   "devDependencies": {
+    "@types/node": "20.4.7",
     "eslint": "8.45.0",
     "eslint-config-next": "13.4.16",
     "prettier": "^3.0.1",

src/app/board-of-directors/page.tsx

@@ -0,0 +1,124 @@
+
+import { type Metadata } from 'next'
+import Link from 'next/link'
+import clsx from 'clsx'
+
+import { Container } from '@/components/Container'
+import { UserPlusIcon, GiftIcon, EnvelopeIcon } from '@heroicons/react/24/solid'
+import { TableCell, TableHeading, TableLeftHeading } from '@/components/Table'
+
+function SocialLink({
+  className,
+  href,
+  children,
+  icon: Icon,
+}: {
+  className?: string
+  href: string
+  icon: React.ComponentType<{ className?: string }>
+  children: React.ReactNode
+}) {
+  return (
+    <li className={clsx(className, 'flex')}>
+      <Link
+        href={href}
+        className="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500"
+      >
+        <Icon className="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-teal-500" />
+        <span className="ml-4">{children}</span>
+      </Link>
+    </li>
+  )
+}
+
+export const metadata: Metadata = {
+  title: 'West Sound Community Club - Board of Directory',
+  description:
+    'The West Sound Community Club on Orcas Island.',
+}
+
+
+export default function Club() {
+  return (
+    <Container className="mt-16 sm:mt-32">
+      <div className="grid grid-cols-1 gap-y-16 lg:grid-cols-2 lg:grid-rows-[auto_1fr] lg:gap-y-12">
+        <div className="lg:order-first lg:row-span-2">
+          <h1 className="text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl">
+            The Board of Directors
+          </h1>
+          <div className="mt-6 space-y-7 text-base text-zinc-600">
+            <p>
+              Elections for the Board of Directors are held annually at the October member meeting and potluck.
+            </p>
+
+            <p>
+              If you are interested in being one the ballot at the upcoming
+              election, please
+              <a href="mailto:board@westsoundhall.org"
+                className="pl-1 text-blue-600 visited:text-purple-600 hover:underline">
+                contact the board
+              </a>.
+            </p>
+          </div>
+
+          <div className="overflow-x-auto -mx-4 sm:-mx-0">
+            <div className="inline-block min-w-full py-2 align-middle">
+              <table className="min-w-full divide-y divide-gray-300">
+                <thead>
+                  <tr>
+                    <TableHeading>Name</TableHeading>
+                    <TableHeading>Position</TableHeading>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200 ">
+                  <tr>
+                    <TableLeftHeading>Lisa Pedersen</TableLeftHeading>
+                    <TableCell>President</TableCell>
+                  </tr>
+                  <tr>
+                    <TableLeftHeading>Betsy Wareham</TableLeftHeading>
+                    <TableCell>Vice President</TableCell>
+                  </tr>
+                  <tr>
+                    <TableLeftHeading>Beth Gasser</TableLeftHeading>
+                    <TableCell>Secretary</TableCell>
+                  </tr>
+                  <tr>
+                    <TableLeftHeading>Tony Grosinger</TableLeftHeading>
+                    <TableCell>Treasurer</TableCell>
+                  </tr>
+                  <tr>
+                    <TableLeftHeading>Leslie Brown</TableLeftHeading>
+                    <TableCell>Director</TableCell>
+                  </tr>
+                  <tr>
+                    <TableLeftHeading>Linn Hulley</TableLeftHeading>
+                    <TableCell>Director</TableCell>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+        <div className="lg:pl-20">
+          <ul role="list">
+            <SocialLink
+              href="mailto:contact@westsoundhall.org"
+              icon={EnvelopeIcon}
+              className="mt-4 border-zinc-100"
+            >
+              contact@westsoundhall.org
+            </SocialLink>
+            <SocialLink
+              href="mailto:contact@westsoundhall.org"
+              icon={EnvelopeIcon}
+              className="mt-4 border-zinc-100"
+            >
+              board@westsoundhall.org
+            </SocialLink>
+          </ul>
+        </div>
+      </div>
+    </Container>
+  )
+}

src/app/calendar/calendar.tsx

@@ -0,0 +1,239 @@
+'use client'
+
+import {
+    ChevronLeftIcon,
+    ChevronRightIcon,
+    ClockIcon,
+} from '@heroicons/react/20/solid'
+
+import dayjs from "dayjs";
+import React from 'react';
+import { Calendar, Event } from './page';
+import Link from 'next/link';
+
+interface day {
+    date: dayjs.Dayjs;
+    isCurrentMonth: boolean;
+    isToday: boolean;
+}
+
+
+function classNames(...classes: string[]): string {
+    return classes.filter(Boolean).join(' ');
+}
+
+const getEvents = (cal: Calendar, d: dayjs.Dayjs): Event[] => {
+    const year = cal[d.year()];
+    if (!year) {
+        return [];
+    }
+
+    const month = year[d.month()];
+    if (!month) {
+        return [];
+    }
+
+    return month[d.date()] || [];
+}
+
+export const CalendarComponent: React.FC<{ calendar: Calendar }> = ({ calendar }) => {
+    const [selectedDay, setSelectedDay] = React.useState(dayjs().startOf('day'));
+    const [selectedMonth, setSelectedMonth] = React.useState(dayjs().startOf('month'));
+
+    const days = React.useMemo(() => {
+        // Number of greyed days shown before the beginning of the current month.
+        const renderedDaysBeforeMonth = selectedMonth.day();
+        const firstDay = selectedMonth.subtract(renderedDaysBeforeMonth, 'day');
+        const month = selectedMonth.month();
+        const today = dayjs().startOf('day');
+
+        let current = firstDay;
+        const days: day[] = [];
+
+        // Fill out the first week with days from the previous month.
+        for (let i = 0; i < renderedDaysBeforeMonth; i++) {
+            days.push({
+                date: current,
+                isCurrentMonth: false,
+                isToday: current.isSame(today),
+            });
+            current = current.add(1, 'day');
+        }
+
+        // Add the days for the selected month.
+        while (current.month() === month) {
+            days.push({
+                date: current,
+                isCurrentMonth: true,
+                isToday: current.isSame(today),
+            });
+            current = current.add(1, 'day');
+        }
+
+        // Finish out the week with days from the following month.
+        while (current.day() > 0) {
+            days.push({
+                date: current,
+                isCurrentMonth: false,
+                isToday: current.isSame(today),
+            });
+            current = current.add(1, 'day');
+        }
+
+        return days;
+    }, [selectedMonth]);
+
+    const isSelectedDay = (d: day): boolean => {
+        return d.date.isSame(selectedDay);
+    }
+
+    const selectedDayEvents = React.useMemo(() => {
+        return getEvents(calendar, selectedDay);
+    }, [calendar, selectedDay]);
+
+    return (
+        <div className="lg:flex lg:h-full lg:flex-col">
+            <header className="flex items-center justify-between border-b border-zinc-100 py-4 lg:flex-none">
+                <h1 className="text-base font-semibold leading-6 text-zinc-800">
+                    <time dateTime={selectedMonth.format('YYYY-MM')}>{selectedMonth.format('MMMM YYYY')}</time>
+                </h1>
+                <div className="flex items-center">
+                    <div className="relative flex items-center rounded-md shadow-sm md:items-stretch">
+                        <button
+                            type="button"
+                            onClick={() => { setSelectedMonth(selectedMonth.subtract(1, 'month')) }}
+                            className="flex h-9 w-12 items-center justify-center rounded-l-md border-y border-l border-zinc-100 pr-1 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:pr-0 md:hover:bg-gray-50"
+                        >
+                            <span className="sr-only">Previous month</span>
+                            <ChevronLeftIcon className="h-5 w-5" aria-hidden="true" />
+                        </button>
+                        <button
+                            type="button"
+                            onClick={() => {
+                                setSelectedDay(dayjs().startOf('day'))
+                                setSelectedMonth(dayjs().startOf('month'));
+                            }}
+                            className="hidden border-y border-zinc-100 px-3.5 text-sm font-semibold text-zinc-800 hover:bg-gray-50 focus:relative md:block"
+                        >
+                            Today
+                        </button>
+                        <span className="relative -mx-px h-5 w-px bg-gray-300 md:hidden" />
+                        <button
+                            type="button"
+                            onClick={() => { setSelectedMonth(selectedMonth.add(1, 'month')) }}
+                            className="flex h-9 w-12 items-center justify-center rounded-r-md border-y border-r border-zinc-100 pl-1 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:pl-0 md:hover:bg-gray-50"
+                        >
+                            <span className="sr-only">Next month</span>
+                            <ChevronRightIcon className="h-5 w-5" aria-hidden="true" />
+                        </button>
+                    </div>
+                </div>
+            </header>
+            <div className="shadow ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
+                <div className="grid grid-cols-7 gap-px border-b border-zinc-100 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none">
+                    {[['S', 'un'], ['M', 'on'], ['T', 'ue'], ['W', 'ed'], ['T', 'hu'], ['F', 'ri'], ['S', 'at']].map((d) => (
+                        <div key={d[0] + d[1]} className="bg-white py-2">
+                            {d[0]}<span className="sr-only sm:not-sr-only">{d[1]}</span>
+                        </div>
+                    ))}
+                </div>
+                <div className="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
+                    <div className="isolate grid w-full grid-cols-7 gap-px">
+                        {days.map((day) => {
+                            const events = getEvents(calendar, day.date);
+                            const isSelected = isSelectedDay(day);
+
+                            return (
+                                <button
+                                    key={day.date.format('YYYY-MM-DD')}
+                                    type="button"
+                                    onClick={() => { setSelectedDay(day.date) }}
+                                    className={classNames(
+                                        day.isCurrentMonth ? 'bg-white' : 'bg-gray-50',
+                                        isSelected || day.isToday ? 'font-semibold' : '',
+                                        isSelected ? 'text-white' : '',
+                                        !isSelected && day.isToday ? 'text-indigo-600' : '',
+                                        !isSelected && day.isCurrentMonth && !day.isToday ? 'text-gray-900' : '',
+                                        !isSelected && !day.isCurrentMonth && !day.isToday ? 'text-gray-500' : '',
+                                        'flex h-12 sm:h-14 md:h-16 lg:h-24 flex-col px-3 py-2 hover:bg-gray-100 focus:z-10'
+                                    )}
+                                >
+                                    <time
+                                        dateTime={day.date.format('YYYY-MM-DD')}
+                                        className={classNames(
+                                            isSelected ? 'flex h-6 w-6 items-center justify-center rounded-full' : '',
+                                            isSelected && day.isToday ? 'bg-indigo-600' : '',
+                                            isSelected && !day.isToday ? 'bg-gray-900' : '',
+                                            'ml-auto'
+                                        )}
+                                    >
+                                        {day.date.date()}
+                                    </time>
+                                    <span className="sr-only">{events.length} events</span>
+                                    {events.length > 0 && (
+                                        <>
+                                            <span className="-mx-0.5 mt-auto flex flex-wrap-reverse lg:hidden">
+                                                {events.map((event) => (
+                                                    <span key={event.id} className="mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400" />
+                                                ))}
+                                            </span>
+                                            <ol className="mt-2 hidden lg:block">
+                                                {events.slice(0, 2).map((event) => (
+                                                    <li key={event.id}>
+                                                        <p className="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600">
+                                                            {event.name}
+                                                        </p>
+                                                    </li>
+                                                ))}
+                                                {events.length > 2 && <li className="text-gray-500">+ {events.length - 2} more</li>}
+                                            </ol>
+                                        </>
+                                    )}
+                                </button>
+                            );
+                        })}
+                    </div>
+                </div>
+            </div>
+            <div className="pt-10">
+                <h2 className="text-base font-semibold leading-6 text-zinc-800">
+                    Events on <time dateTime={selectedDay.format('YYYY-MM-DD')}>{selectedDay.format('MMMM D')}</time>
+                </h2>
+                {selectedDayEvents.length > 0 && (
+                    <div className="py-5">
+                        <ol className="divide-y divide-gray-100 overflow-hidden rounded-lg bg-white text-sm shadow ring-1 ring-black ring-opacity-5">
+                            {selectedDayEvents.map((event) => {
+                                const start = dayjs(event.start);
+                                return (
+                                    <li key={event.id} className="group flex p-4 pr-6 focus-within:bg-gray-50 hover:bg-gray-50">
+                                        <div className="flex-auto">
+                                            <p className="font-semibold text-gray-900">{event.name}</p>
+                                            <time dateTime={start.format('YYYY-MM-DD HH:mm')} className="mt-2 flex items-center text-gray-700">
+                                                <ClockIcon className="mr-2 h-5 w-5 text-gray-400" aria-hidden="true" />
+                                                {event.allDay
+                                                    ? "All day"
+                                                    : start.format("h:mm a")
+                                                }
+                                            </time>
+                                        </div>
+                                    </li>
+                                );
+                            })}
+                        </ol>
+                    </div>
+                )}
+                {selectedDayEvents.length === 0 && (
+                    <p className="py-6 text-sm font-semibold text-gray-600">No events on this day</p>
+                )}
+            </div>
+            <div>
+                <p>
+                    If you are interested in reserving the hall, please see the
+                    <Link href="/rental" className="pl-1 text-blue-600 hover:underline"
+                    >hall rental page
+                    </Link>.
+                </p>
+            </div>
+        </div>
+    )
+}

src/app/calendar/page.tsx

@@ -0,0 +1,132 @@
+import * as ical from "ical";
+import dayjs from "dayjs";
+import React from 'react';
+import { CalendarComponent } from "./calendar";
+import { Container } from "@/components/Container";
+import { Metadata } from "next";
+
+const icalAddr = process.env.CALENDAR_ADDR || '';
+
+export type Calendar = Record<number, MonthEvents>;
+type MonthEvents = Record<number, DayEvents>;
+type DayEvents = Record<number, Event[]>;
+
+let calendar: Calendar;
+let upcomingEvents: Event[] = [];
+let calendarLastRefresh: dayjs.Dayjs;
+
+export async function getCalendar(): Promise<Calendar> {
+    const now = dayjs();
+    if (!calendar || !calendarLastRefresh || now.diff(calendarLastRefresh, 'hours') >= 1) {
+        await loadCalendar();
+        calendarLastRefresh = now;
+    }
+
+    return calendar;
+}
+
+export async function getUpcomingEvents(): Promise<Event[]> {
+    await getCalendar();
+    return upcomingEvents;
+}
+
+/** Event must be a "plain object" so that it can be passed to the Calendar client component. */
+export interface Event {
+    id: string;
+    name: string;
+    allDay: boolean;
+    start: Date;
+    end: Date;
+}
+
+async function loadCalendar(): Promise<void> {
+    if (icalAddr === '') {
+        return;
+    }
+
+    console.log("Refreshing iCal from Google Calendar")
+
+    // For some reason Google Calendar is sending different content based on who is requesting it.
+    const headers = new Headers();
+    headers.set('User-Agent', 'curl/7.54.1');
+
+    const icalContents = await (await fetch(icalAddr, { headers })).text();
+    const events = ical.parseICS(icalContents);
+    const thisMonth = dayjs().startOf('month');
+    const yesterday = dayjs().startOf('day').subtract(1, 'day');
+    const upcoming: Event[] = []
+
+    const cal: Calendar = {};
+    for (const id in events) {
+        if (!events.hasOwnProperty(id)) {
+            continue;
+        }
+
+        const event = events[id];
+        const start = dayjs(event.start);
+        const end = dayjs(event.end);
+        const allDay = start.hour() === 0 && start.minute() === 0 && end.diff(start, 'hours') === 24;
+        const privateEvent = event.description?.toLowerCase().includes("private");
+
+        const converted = {
+            id: event.uid || "",
+            name: privateEvent ? "Private event" : (event.summary || ""),
+            allDay: allDay,
+            start: start.toDate(),
+            end: end.toDate(),
+        }
+
+        // Don't spend any more time on events that aren't going to be displayed.
+        if (start.isBefore(thisMonth)) {
+            continue;
+        }
+
+        if (upcoming.length < 4 && start.isAfter(yesterday) && !privateEvent) {
+            upcoming.push(converted);
+        }
+
+        const year = start.year();
+        const month = start.month();
+        const day = start.date();
+
+        if (!(year in cal)) {
+            cal[year] = {};
+        }
+        const yearMap = cal[year];
+
+        if (!(month in yearMap)) {
+            yearMap[month] = {};
+        }
+        const monthMap = yearMap[month];
+
+        if (day in monthMap) {
+            monthMap[day].push(converted);
+        } else {
+            monthMap[day] = [converted];
+        }
+    }
+
+    calendar = cal;
+    upcomingEvents = upcoming;
+}
+
+export const metadata: Metadata = {
+    title: 'Events Calendar',
+    description:
+        'Upcoming events and rentals ast the West Sound Hall.',
+}
+
+export default async function Calendar() {
+    const calendar = await getCalendar();
+
+    return (
+        <Container className="mt-16 sm:mt-32">
+            <header className="max-w-2xl">
+                <h1 className="text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl">
+                    West Sound Hall Calendar
+                </h1>
+            </header>
+            <CalendarComponent calendar={calendar} />
+        </Container>
+    );
+}

src/app/club/page.tsx

@@ -2,12 +2,12 @@
 import { type Metadata } from 'next'
 import Image from 'next/image'
 import Link from 'next/link'
+import dynamic from "next/dynamic";
 import clsx from 'clsx'
 
 import { Container } from '@/components/Container'
-import { UserPlusIcon, GiftIcon, EnvelopeIcon } from '@heroicons/react/24/solid'
+import { UserPlusIcon, AtSymbolIcon, EnvelopeIcon, UserGroupIcon } from '@heroicons/react/24/solid'
 import interiorEmptyImage from '@/images/photos/interior-empty.jpg'
-import { ClubPayment } from './payment';
 
 function SocialLink({
   className,
@@ -24,7 +24,7 @@ function SocialLink({
     <li className={clsx(className, 'flex')}>
       <Link
         href={href}
-        className="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500 dark:text-zinc-200 dark:hover:text-teal-500"
+        className="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500"
       >
         <Icon className="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-teal-500" />
         <span className="ml-4">{children}</span>
@@ -34,7 +34,7 @@ function SocialLink({
 }
 
 export const metadata: Metadata = {
-  title: 'West Sound Community Club',
+  title: 'Community Club',
   description:
     'The West Sound Community Club on Orcas Island.',
 }
@@ -43,6 +43,15 @@ export const metadata: Metadata = {
 // TODO: Replace interiorEmptyImage with a photo from a potluck
 
 export default function Club() {
+
+  // Dynamic import since ClubPayment uses `document`
+  const ClubPayment = dynamic(
+    () => {
+      return import("./payment");
+    },
+    { ssr: false }
+  );
+
   return (
     <Container className="mt-16 sm:mt-32">
       <div className="grid grid-cols-1 gap-y-16 lg:grid-cols-2 lg:grid-rows-[auto_1fr] lg:gap-y-12">
@@ -52,15 +61,15 @@ export default function Club() {
               src={interiorEmptyImage}
               alt=""
               sizes="(min-width: 1024px) 32rem, 20rem"
-              className="aspect-square rounded-2xl bg-zinc-100 object-cover dark:bg-zinc-800"
+              className="aspect-square rounded-2xl bg-zinc-100 object-cover"
             />
           </div>
         </div>
         <div className="lg:order-first lg:row-span-2">
-          <h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
+          <h1 className="text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl">
             West Sound Community Club
           </h1>
-          <div className="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400">
+          <div className="mt-6 space-y-7 text-base text-zinc-600">
             <p>
               The West Sound Community Club is a group of neighbors and friends
               living in the West Sound area. Together we steward the West Sound
@@ -85,19 +94,47 @@ export default function Club() {
         </div>
         <div className="lg:pl-20">
           <ul role="list">
-            <SocialLink href="/WSCC-Membership-Form.pdf" icon={UserPlusIcon}>
+            <form method="post" action="https://lists.orcas.community/subscription/form" className="listmonk-form">
-              Membership Form
+              <div className="flex flex-col gap-y-2">
-            </SocialLink>
+                <h3 className="text-lg font-semibold text-gray-900">Join our mailing list</h3>
-            <SocialLink href="#" icon={GiftIcon} className="mt-4">
+                <input type="hidden" name="nonce" />
-              Donations (Coming soon)
+                <div>
-            </SocialLink>
+                  <label htmlFor="email" className="sr-only">Email</label>
+                  <input
+                    type="email"
+                    name="email"
+                    id="email"
+                    className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                    placeholder="you@example.com" />
+                </div>
+                <div>
+                  <label htmlFor="name" className="sr-only">Name</label>
+                  <input
+                    type="text"
+                    name="name"
+                    id="name"
+                    className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                    placeholder="Jane Doe" />
+                </div>
+                <input className="hidden" type="checkbox" name="l" checked value="ea5f1e67-2ff0-4762-8893-0645e93a8306" />
+                <input
+                  className="w-full rounded-md flex justify-center border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                  id="submit"
+                  type="submit"
+                  value="Subscribe"
+                />
+              </div>
+            </form>
             <SocialLink
               href="mailto:contact@westsoundhall.org"
               icon={EnvelopeIcon}
-              className="mt-8 border-t border-zinc-100 pt-8 dark:border-zinc-700/40"
+              className="mt-8 border-t border-zinc-100 pt-8"
             >
               contact@westsoundhall.org
             </SocialLink>
+            <SocialLink href="/board-of-directors" icon={UserGroupIcon} className="mt-4">
+              Board of Directors
+            </SocialLink>
           </ul>
         </div>
         <div>

src/app/club/payment.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import React, { useEffect, useState, FormEvent } from 'react';
+import React, { useEffect, useState, FormEvent, useCallback } from 'react';
 import { AddressElement, Elements } from '@stripe/react-stripe-js';
 import { Appearance, StripeAddressElementOptions, StripeElementsOptions, loadStripe } from '@stripe/stripe-js';
 import {
@@ -177,8 +177,8 @@ function CheckoutForm({
                 value={membership}
                 className={({ active }) =>
                   classNames(
-                    active ? 'border-indigo-600 ring-2 ring-indigo-600' : 'border-gray-300',
+                    active ? 'border-indigo-600 ring-2 ring-indigo-600' : 'border-gray-200',
-                    'relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none'
+                    'relative flex cursor-pointer rounded-lg border bg-white hover:bg-gray-50 p-4 shadow-sm focus:outline-none'
                   )
                 }
               >
@@ -228,9 +228,9 @@ function CheckoutForm({
                     'cursor-pointer focus:outline-none',
                     option === -1 ? 'col-span-2' : '',
                     checked
-                      ? 'ring-2 ring-indigo-600 ring-offset-2'
+                      ? 'ring-2 ring-indigo-600'
-                      : 'ring-1 ring-inset ring-gray-300 bg-white text-gray-900 hover:bg-gray-50',
+                      : 'ring-1 ring-inset ring-gray-200 text-gray-900 hover:bg-gray-50',
-                    'flex items-center justify-center rounded-md py-3 px-3 text-sm font-semibold sm:flex-1'
+                    'flex items-center justify-center rounded-md py-3 px-3 text-sm font-semibold sm:flex-1 bg-white'
                   )
                 }
               >
@@ -250,7 +250,7 @@ function CheckoutForm({
                           min="0"
                           step="1"
                           onChange={(e) => setCustomAmount(e.target.value)}
-                          className="block w-full rounded-md border-0 py-1.5 pl-7 pr-12 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6"
+                          className="block w-full rounded-md border-0 py-1.5 pl-7 pr-12 text-gray-900 ring-1 ring-inset ring-gray-200 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6"
                           placeholder="Custom"
                           aria-describedby="price-currency"
                         />
@@ -278,8 +278,8 @@ function CheckoutForm({
             About you
           </h2>
 
-          <div className="rounded-md mb-3 px-3 pb-1.5 pt-2.5 shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-indigo-600">
+          <div className="rounded-md mb-3 px-3 pb-1.5 pt-2.5 shadow-sm ring-1 ring-inset ring-gray-200 focus-within:ring-2 focus-within:ring-indigo-600">
-            <label htmlFor="name" className="block text-xs font-medium text-gray-900">
+            <label htmlFor="email" className="block text-xs font-medium text-gray-900">
               Email
             </label>
             <input
@@ -329,9 +329,36 @@ function CheckoutForm({
   );
 }
 
-export function ClubPayment() {
+const DEFAULT_OPTIONS = {
+  config: { attributes: true, childList: true, subtree: true },
+};
+
+function useMutationObservable(targetEl: Node, cb: MutationCallback, options = DEFAULT_OPTIONS) {
+  const [observer, setObserver] = useState<MutationObserver | null>(null);
+
+  useEffect(() => {
+    const obs = new MutationObserver(cb);
+    setObserver(obs);
+  }, [cb, options, setObserver]);
+
+  useEffect(() => {
+    if (!observer) return;
+    const { config } = options;
+    observer.observe(targetEl, config);
+    return () => {
+      if (observer) {
+        observer.disconnect();
+      }
+    };
+  }, [observer, targetEl, options]);
+}
+
+export default function ClubPayment() {
   const [clientSecret, setClientSecret] = useState('');
   const [paymentIntent, setPaymentIntent] = useState('');
+
+  const htmlEl = document.getElementsByTagName('html')[0];
+
   useEffect(() => {
     // Create PaymentIntent as soon as the page loads using our local API
     fetch('api/stripe_intent', {
@@ -349,15 +376,22 @@ export function ClubPayment() {
       });
   }, []);
 
+  const styles = getComputedStyle(htmlEl);
+
   const appearance: Appearance = {
     theme: 'stripe',
+    variables: {
+      colorBackground: styles.getPropertyValue('--stripe-background'),
+      colorText: styles.getPropertyValue('--stripe-foreground'),
+    },
     labels: 'floating',
   };
 
   const options: StripeElementsOptions = {
     clientSecret,
-    appearance
+    appearance,
   }
+
   return <>
     {clientSecret && (
       <Elements options={options}

src/app/hall-history/page.tsx

@@ -23,7 +23,7 @@ function SocialLink({
     <li className={clsx(className, 'flex')}>
       <Link
         href={href}
-        className="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500 dark:text-zinc-200 dark:hover:text-teal-500"
+        className="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500"
       >
         <Icon className="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-teal-500" />
         <span className="ml-4">{children}</span>
@@ -79,7 +79,7 @@ function DateListItem({
 }
 
 export const metadata: Metadata = {
-  title: 'History',
+  title: 'Hall History',
   description:
     'The history of the West Sound Community Hall on Orcas Island.',
 }
@@ -94,18 +94,18 @@ export default function About() {
               src={originalDeedImage}
               alt=""
               sizes="(min-width: 1024px) 32rem, 20rem"
-              className="rotate-3 rounded-2xl bg-zinc-100 object-cover dark:bg-zinc-800"
+              className="rotate-3 rounded-2xl bg-zinc-100 object-cover"
             />
-            <p className="text-sm text-zinc-400 dark:text-zinc-500">
+            <p className="text-sm text-zinc-400">
               Original property deed from Alexander Chalmers.
             </p>
           </div>
         </div>
         <div className="lg:order-first lg:row-span-2">
-          <h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
+          <h1 className="text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl">
             Hall History
           </h1>
-          <div className="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400">
+          <div className="mt-6 space-y-7 text-base text-zinc-600">
             <p>
               The West Sound Community Hall represents the history and character
               of Orcas Island. Members of the nonprofit West Sound Community Club,
@@ -130,7 +130,7 @@ export default function About() {
             </p>
           </div>
           <div className="mt-8 space-y-8">
-            <h2 className="text-2xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
+            <h2 className="text-2xl font-bold tracking-tight text-zinc-800 sm:text-5xl">
               Detailed History
             </h2>
 
@@ -154,7 +154,7 @@ export default function About() {
               title='1903 - 1935'
               description='During this period the following organizations were regular users of the Hall:'
             >
-              <div className="relative z-10 ml-4 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+              <div className="relative z-10 ml-4 mt-2 text-sm text-zinc-600">
                 <DateListItem
                   year='1903'
                   value='Women&apos;s Christian Temperance Union Woodmen Lodge'

src/app/layout.tsx

@@ -27,7 +27,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" className="h-full antialiased" suppressHydrationWarning>
-      <body className="flex h-full bg-zinc-50 dark:bg-black">
+      <body className="flex h-full bg-zinc-50">
         <Providers>
           <div className="flex w-full">
             <Layout>{children}</Layout>

src/app/news/2024-02-17-potluck/page.mdx

@@ -0,0 +1,58 @@
+import { ArticleLayout } from '@/components/ArticleLayout'
+import {MdxImage as Image } from '@/components/MdxImage'
+import boddingtonStore from './Boddingtons_Store_West_Sound.jpg'
+import westSoundMainStreet from './West_Sound_Main_Street.jpg'
+import westSound from './West_Sound.jpg'
+
+export const article = {
+  author: 'Tony Grosinger',
+  date: '2024-02-17',
+  title: 'February 2024 Potluck',
+  description: "The second potluck of the year, with a slideshow of Orcas history from John Wachter.",
+}
+
+
+export const metadata = {
+  title: article.title,
+  description: article.description,
+}
+
+export default (props) => <ArticleLayout article={article} {...props} />
+
+This month after the potluck dinner, the community club was treated to a
+slideshow presentation from John Wachter. He showed us almost 100 photos from
+all over Orcas Island, many of which dated back to the early 1900's. 
+
+<div className="not-prose flex flex-col items-center">
+  <Image src={boddingtonStore} alt="Boddington's Store at the end of Crow Valley Road" />
+  <span className="mt-2 text-sm text-zinc-400">
+    Boddington's Store at the end of Crow Valley Road.
+  </span>
+</div>
+
+Many of these images were available to us thanks to the [Orcas Island Historical
+Society](https://www.orcasmuseums.org/), and several of the photos were also
+passed down by John's family.
+
+<div className="not-prose flex flex-col items-center">
+  <Image src={westSoundMainStreet} alt="West Sound Main Street" />
+  <span className="mt-2 text-sm text-zinc-400">
+    West Sound Main Street
+  </span>
+</div>
+
+A recurring observation was both how many more buildings there were in West
+Sound, and how few trees there were on the island!
+
+<div className="not-prose flex flex-col items-center">
+  <Image src={westSound} alt="West Sound and the south end of Turtleback" />
+  <span className="mt-2 text-sm text-zinc-400">
+    West Sound and the south end of Turtleback
+  </span>
+</div>
+
+If you have ideas for presentations or activities at upcoming potlucks, please <a
+target="_blank" href="mailto:board@westsoundhall.org">send us a message</a>.
+
+Thank you John, the Historical Society, and Peter Fisher for preserving and
+sharing this history.

src/app/news/2024-03-06-town-hall-meeting/page.mdx

@@ -0,0 +1,132 @@
+import { ArticleLayout } from '@/components/ArticleLayout'
+import {MdxImage as Image } from '@/components/MdxImage'
+import townHallMeeting from './town-hall-meeting.jpg'
+
+export const article = {
+  author: 'Tony Grosinger',
+  date: '2024-03-06',
+  title: 'March 2024 Town Hall',
+  description: "A community gathering to brainstorm ideas for the club's future.",
+}
+
+
+export const metadata = {
+  title: article.title,
+  description: article.description,
+}
+
+export default (props) => <ArticleLayout article={article} {...props} />
+
+On March 6th 2024 approximately 25 members of the club gathered in the hall to
+do some brainstorming. The goal was just to get ideas down on paper so that they
+can be prioritized and planned in the future.
+
+<div className="not-prose flex flex-col items-center">
+  <Image src={townHallMeeting} alt="Town Hall Meeting" />
+  <span className="mt-2 text-sm text-zinc-400">
+    Town Hall Meeting
+  </span>
+</div>
+
+The board of directors put together the list of categories and the community
+filled in the all the ideas.
+
+Thank you to Mark Gasser and Joe Mentor for facilitating.
+
+- Activities
+  - Movie night
+  - Ping pong
+  - Use activities to attract people and build membership
+  - Piggy-back on the OIYC pancake breakfast in May
+  - Linkage with waterfront
+  - Lack of parking – have to pay OIYC $50
+  - Calendaring improvements – double booking with YC
+  - BBQ (community outreach)
+    - Olga days
+  - Garage sale / rummage sale (Fidelis used to do this)
+    - Deer Harbor had once mid-winter that was a huge success
+  - Dance
+  - Karaoke
+  - End of season tool cleaning and sharpening
+    - Jim Hamilton volunteered to bring his sharpener
+  - Sip and paint
+  - Guest lectures
+  - Car & boat show
+  - Cooking
+  - Joint event with DHCC
+  - Approved for-profit events.
+    - We are in a smaller county so there are some exceptions.
+    - Art classes, music classes, dance classes
+    - A Saturday market might be allowed too.
+    - Petitioning the county can be a strategy for adding more allowed activities.
+    - Arthur mentioned that if you go through Parks and Recreation we might be able to do a dance.
+    - Nancy had more information from her time as VP.
+- Building Improvements
+  - A deck on the east side of the building extending to ground level on the north end.
+  - Replace the kitchen.
+    - A paint job in the kitchen would also go a long way.
+    - Three compartment sink. Commercial dishwasher.
+    - Joint project with the OIYC
+  - Infrared heading panels or heat pump
+  - Floor
+  - Engineering study (or just an inspection)
+  - Turn on the heat from your phone.
+  - Replace the single pane windows.
+    - Alternatively, adding shutters could protect the existing windows and improve their insulation.
+  - Grant mentions that staying with in the purview of maintenance is easier to get through county approval rather than remodel.
+  - New storage closet on the north end of the building.
+  - Replace the hot water heater.
+  - Restroom improvements.
+- Building Maintenance
+  - Replacing siding on the north end of the building.
+  - Address the leak between the kitchen and the north end of the building.
+  - Use the compressor the blow out the water lines on cold days.
+- Funding
+  - Could the historical society help us with fundraising since we’re a historic building?
+    - Similarly, could the historical society host their meetings at our hall?
+  - Grants
+    - Bill Bangs
+    - Need a needs analysis first
+    - The county has a historic building preservation fund that can fund 50% of projects.
+  - Convert Sail Orcas into a separate renter rather than being under the YC umbrella.
+  - Advertise for rental of the hall. Chamber of commerce?
+  - OICF bi-annual funding campaigns
+  - Raise member dues
+    - Sliding scale
+    - Introductory rate, or the opposite - grandfather existing members at lower
+  - Different funds that members can donate to
+  - Membership capital campaign – direct asking
+  - Increase membership
+  - Make household double individual rate
+  - Sell bricks
+- Governance
+  - Build out more committees
+    - Architectural
+      - Colin Baden
+      - Arthur
+    - Membership / Welcoming
+  - Encourage external groups to be committees, for example historical society or fidelis
+  - Invite DHCC to one of our meetings
+  - Review bylaws and articles of incorporation.
+- Membership
+  - Solicit the OIYC to become WSCC members (add-on to your OIYC membership?)
+  - We should make it more clear that membership is open to more than WS residents.
+  - Must attract younger people to become members.
+    - DHCC has had success with this. Talk to them about what they did.
+  - Work with realtors to have them introduce new people to the club
+  - Arthur asks to have a physical invitation he can hand out to people he meets.
+- OIYC Partnership
+  - Kitchen remodel
+  - Articulate shared goals and vision
+  - Ensure the OIYC liaison attends our meetings
+  - One set of common glassware, dishes, etc.
+- Use/Expectations
+  - Update kitchen instructions (e.g. don’t rinse food down the drain).
+  - Update cleaning rules in hall rent agreement.
+  - Discourage or ban single use plastics during events.
+- Vision/Goals/Mission/Objectives
+  - Keep the building standing
+  - Grow the organization
+  - Group activity - have members write down a list of what the hall means to them.
+  - Set by example what community can be.
+

src/app/news/2024-09-21-potluck/page.mdx

@@ -0,0 +1,54 @@
+import { ArticleLayout } from '@/components/ArticleLayout'
+import {MdxImage as Image } from '@/components/MdxImage'
+import landBankPresentation from './Land_Bank_Presentation.jpg'
+
+export const article = {
+  author: 'Tony Grosinger',
+  date: '2024-09-21',
+  title: 'September 2024 Potluck',
+  description: "Our first potluck after the summer break, with Board of Director nominations for the election next month.",
+}
+
+
+export const metadata = {
+  title: article.title,
+  description: article.description,
+}
+
+export default (props) => <ArticleLayout article={article} {...props} />
+
+Summer is wrapping up and the monthly potlucks at the West Sound Hall have
+returned! There are several exciting developments to share with you. Here's a
+quick update on what was discussed at our recent community potluck:
+
+In October, a contractor will be repairing the north end of the hall using the
+funds we raised earlier this year with Give Orcas.
+
+Also in October, we will be electing the new Board of Directors. Our nominating
+committee - Cathy and Grant - have announced the slate of candidates. This
+year's nominees are:
+
+  - Lisa Pedersen for President
+  - Betsy Wareham for Vice President
+  - Beth Gasser for Secretary
+  - Tony Grosinger for Treasurer
+  - Leslie Brown for Director 1
+  - Linn Hulley for Director 2
+
+No additional nominations were made from the floor during the meeting. We
+encourage all members to join us at the October 19th potluck to vote for the
+new board.
+
+<div className="not-prose flex flex-col items-center">
+  <Image src={landBankPresentation} alt="Lincoln Bormann from the SJC Land Bank presenting at the potluck." />
+  <span className="mt-2 text-sm text-zinc-400">
+    Lincoln Bormann from the SJC Land Bank presenting at the potluck.
+  </span>
+</div>
+
+After the potluck dinner, Lincoln Bormann and Brian Wiese from the San Juan
+County Land Bank gave a presentation outlining the work they do, how they make
+decisions about what land to acquire, and provided updates for newly opening
+parks. The Land Bank will be up for election this fall and you can learn more
+on their website - https://sjclandbank.org.
+

src/app/news/2024-10-20-elections/page.mdx

@@ -0,0 +1,44 @@
+import { ArticleLayout } from '@/components/ArticleLayout'
+import {MdxImage as Image } from '@/components/MdxImage'
+import wallUpper from './N_Wall_Upper.jpg'
+import wallLower from './N_Wall_Lower.jpg'
+
+export const article = {
+  author: 'Tony Grosinger',
+  date: '2024-10-20',
+  title: 'Election and Building Repairs',
+  description: "Board of director elections took place, as well as some updates on building maintenance.",
+}
+
+
+export const metadata = {
+  title: article.title,
+  description: article.description,
+}
+
+export default (props) => <ArticleLayout article={article} {...props} />
+
+At the October potluck we accepted votes for the 2024-2025 Board of Directors. Between those present and votes emailed prior to the potluck, we had enough participants to make a quorum and approve the slate.
+
+There are also several new updates related to hall maintenance. First, repairs to the north wall ar under way! This maintenance work was made possible by generous donations during the Spring Give Orcas campaign where we raised $10,000.
+
+<div className="not-prose flex flex-col items-center">
+  <Image src={wallUpper} alt="Repairs to the upper portion of the north wall." />
+  <span className="mt-2 text-sm text-zinc-400">
+    Repairs to the upper portion of the north wall.
+  </span>
+</div>
+
+<div className="not-prose flex flex-col items-center">
+  <Image src={wallLower} alt="Repairs to the lower portion of the north wall." />
+  <span className="mt-2 text-sm text-zinc-400">
+    Repairs to the lower portion of the north wall.
+  </span>
+</div>
+
+By the end of the month this wall should have brand new siding that will keep out the rain and breeze.
+
+We also learned this month that our well water is not potable. After working with multiple experts and performing several rounds of chlorination treatment of the well and storage tanks, it has been determined that the best route forward is likely to abandon this water system and to move towards joining West Sound Water Association.
+
+There is still lots of discussion and planning necessary before we can even break ground on making the hook up, but every party is working very hard to restore drinkable water to the hall as soon as possible!
+

src/app/news/page.tsx

@@ -47,7 +47,7 @@ export default async function ArticlesIndex() {
       title="West Sound Hall News"
       intro="History, Announcements, and more from the West Sound Hall and Community Club."
     >
-      <div className="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40">
+      <div className="md:border-l md:border-zinc-100 md:pl-6">
         <div className="flex max-w-3xl flex-col space-y-16">
           {articles.map((article) => (
             <Article key={article.slug} article={article} />

src/app/news/welcome-to-the-wscc-website/page.mdx

@@ -1,5 +1,5 @@
 import { ArticleLayout } from '@/components/ArticleLayout'
-import Image from 'next/image'
+import {MdxImage as Image } from '@/components/MdxImage'
 import originalWebsite from './westsoundhall-original-website.png'
 
 export const article = {
@@ -31,7 +31,7 @@ years.
 
 <div className="not-prose flex flex-col items-center">
   <Image src={originalWebsite} alt="Screenshot of the original West Sound Hall website" />
-  <span className="mt-2 text-sm text-zinc-400 dark:text-zinc-500">
+  <span className="mt-2 text-sm text-zinc-400">
     Screenshot of the original West Sound Hall website.
   </span>
 </div>
@@ -41,8 +41,8 @@ the hall available for rental by the community, and even added the hall to the
 WA Heritage Register. There&apos;s so much more to the hall than just potlucks,
 and this website hopes to share this with the West Sound Community.
 
-If you&apos;d like to follow along, please <a target="_blank"
-href="https://orcas.community/mailinglists/7">sign up for email
-announcements</a> when new blog posts are published.
-
 Thanks for being a part of the West Sound Community!
+
+For posterity, the source code for this website along with instructions for
+developing and updating it can be found
+[here](https://git.grosinger.net/tgrosinger/west-sound-hall).

src/app/not-found.tsx

@@ -5,13 +5,13 @@ export default function NotFound() {
   return (
     <Container className="flex h-full items-center pt-16 sm:pt-32">
       <div className="flex flex-col items-center">
-        <p className="text-base font-semibold text-zinc-400 dark:text-zinc-500">
+        <p className="text-base font-semibold text-zinc-400">
           404
         </p>
-        <h1 className="mt-4 text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
+        <h1 className="mt-4 text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl">
           Page not found
         </h1>
-        <p className="mt-4 text-base text-zinc-600 dark:text-zinc-400">
+        <p className="mt-4 text-base text-zinc-600">
           Sorry, we couldn’t find the page you’re looking for.
         </p>
         <Button href="/" variant="secondary" className="mt-4">

src/app/page.tsx

@@ -7,7 +7,8 @@ import { CalendarDaysIcon } from '@heroicons/react/24/solid'
 import exteriorFrontImage from '@/images/photos/exterior-front.png'
 import { type BlogPostWithSlug, getAllBlogPosts } from '@/lib/articles'
 import { formatDate } from '@/lib/formatDate'
-import { promises as fs } from 'fs';
+import { getUpcomingEvents, Event } from './calendar/page'
+import dayjs from 'dayjs'
 
 
 function LinkButton({
@@ -20,7 +21,7 @@ function LinkButton({
   return (
     <Link
       href={href}
-      className="rounded-md px-3 py-2 font-semibold text-center transition dark:hover:text-teal-400 bg-sky-300 hover:bg-sky-400 dark:bg-zinc-700/40 dark:hover:bg-zinc-600/40"
+      className="rounded-md px-3 py-2 font-semibold text-center transition bg-sky-300 hover:bg-sky-400"
     >
       {children}
     </Link>
@@ -42,42 +43,50 @@ function Article({ article }: { article: BlogPostWithSlug }) {
   )
 }
 
-interface Meeting {
+function EventListItem({ event }: { event: Event }) {
-  title: string
+  const start = dayjs(event.start);
-  date: string
+  const end = dayjs(event.end);
-  startTime: string
+
-  endTime?: string
+  const date = start.format('YYYY-MM-DD');
-  notes?: string
-}
 
-function MeetingListItem({ meeting }: { meeting: Meeting }) {
   return (
     <li className="flex gap-4">
       <dl className="flex flex-auto flex-wrap gap-x-2">
         <dt className="sr-only">Title</dt>
-        <dd className="w-full flex-none text-sm font-medium text-zinc-900 dark:text-zinc-100">
+        <dd className="w-full flex-none text-sm font-medium text-zinc-900">
-          {meeting.title}
+          {event.name}
         </dd>
         <dt className="sr-only">Date</dt>
-        <dd className="text-xs text-zinc-500 dark:text-zinc-400">
+        <dd className="text-xs text-zinc-500">
-          {meeting.date}
+          {date}
         </dd>
         <dt className="sr-only">Time</dt>
-        {meeting.endTime
+        {event.allDay
           ? <dd
-            className="ml-auto text-xs text-zinc-400 dark:text-zinc-500"
+            className="ml-auto text-xs text-zinc-400"
-            aria-label={`${meeting.startTime} until ${meeting.endTime}`}
+            aria-label="All day"
           >
-            <time dateTime={meeting.date + ' ' + meeting.startTime}>{meeting.startTime}</time>{' '}
+            All day
+          </dd>
+          : (event.end
+            ? (
+              <dd
+                className="ml-auto text-xs text-zinc-400"
+                aria-label={`${start.format('YYYY-MM-DD HH:mm')} until ${end.format('YYYY-MM-DD HH-mm')}`}
+              >
+                <time dateTime={start.format('YYYY-MM-DD HH:mm')}>{start.format('h:mm a')}</time>{' '}
                 <span aria-hidden="true">—</span>{' '}
-            <time dateTime={meeting.date + ' ' + meeting.endTime}>{meeting.endTime}</time>{' '}
+                <time dateTime={end.format('YYYY-MM-DD HH-mm')}>{end.format('h:mm a')}</time>{' '}
               </dd>
-          : <dd
+            ) : (
-            className="ml-auto text-xs text-zinc-400 dark:text-zinc-500"
+              <dd
-            aria-label={`${meeting.startTime}`}
+                className="ml-auto text-xs text-zinc-400"
+                aria-label={start.format('YYYY-MM-DD HH-mm')}
               >
-            <time dateTime={meeting.date + ' ' + meeting.startTime}>{meeting.startTime}</time>{' '}
+                <time dateTime={start.format('YYYY-MM-DD HH-mm')}>{start.format('h:mm a')}</time>{' '}
               </dd>
+            )
+          )
         }
       </dl>
     </li>
@@ -85,45 +94,17 @@ function MeetingListItem({ meeting }: { meeting: Meeting }) {
 }
 
 async function Events() {
-  const now = new Date();
+  const events = await getUpcomingEvents();
-  const nowYear = now.getFullYear();
-  const nowMonth = now.getMonth() + 1;
-  const nowDay = now.getDate();
-
-  const file = await fs.readFile(process.cwd() + '/src/app/upcoming-events.json', 'utf8');
-  const allEvents: Array<Meeting> = JSON.parse(file);
-
-  // Remove any events in the past.
-  const events = allEvents.filter((e) => {
-    const [year, month, day] = e.date.split('-');
-
-    const parsedYear = parseInt(year)
-    if (parsedYear > nowYear) {
-      return true
-    } else if (parsedYear < nowYear) {
-      return false
-    }
-
-    const parsedMonth = parseInt(month)
-    if (parsedMonth > nowMonth) {
-      return true
-    } else if (parsedMonth < nowMonth) {
-      return false
-    }
-
-    const parsedDay = parseInt(day)
-    return parsedDay >= nowDay
-  });
 
   return (
-    <div className="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40">
+    <div className="rounded-2xl border border-zinc-100 p-6">
-      <h2 className="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">
+      <h2 className="flex text-sm font-semibold text-zinc-900">
-        <CalendarDaysIcon className="h-6 w-6 flex-none fill-zinc-100 stroke-zinc-400 dark:fill-zinc-100/10 dark:stroke-zinc-500" />
+        <CalendarDaysIcon className="h-6 w-6 flex-none fill-zinc-100 stroke-zinc-400" />
         <span className="ml-3">Upcoming Events</span>
       </h2>
       <ol className="mt-6 space-y-4">
-        {events.map((meeting, idx) => (
+        {events.map((event, idx) => (
-          <MeetingListItem key={idx} meeting={meeting} />
+          <EventListItem key={idx} event={event} />
         ))}
       </ol>
       {/* 
@@ -143,17 +124,17 @@ export default async function Home() {
       <div className="mx-auto max-w-7xl px-6 mt-24 lg:px-8">
         <div className="relative px-4 sm:px-8 lg:px-12">
           <div className="mx-auto max-w-2xl lg:mx-0 grid lg:max-w-none grid-cols-1 lg:grid-cols-2 lg:gap-x-8 gap-y-10">
-            <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl lg:col-span-2">
+            <h1 className="text-4xl font-bold tracking-tight text-zinc-800 sm:text-6xl lg:col-span-2">
               West Sound Community Hall
             </h1>
             <div className="max-w-xl">
-              <p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
+              <p className="mt-6 text-base text-zinc-600">
                 The West Sound Community Hall is located in the hamlet of West Sound
                 on Orcas Island, about 10 minutes from the ferry landing and
                 Eastsound. It has served as a public assembly hall since it was
                 built by volunteers in 1902.
               </p>
-              <p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
+              <p className="mt-6 text-base text-zinc-600">
                 Facing West Sound, the Hall is at the heart of the West Sound community.
               </p>
             </div>
@@ -162,7 +143,7 @@ export default async function Home() {
               alt="Exterior front of the West Sound Hall"
               className="lg:row-span-2 w-full max-w-xl rounded-2xl object-cover lg:max-w-none"
             />
-            <div className="h-fit max-w-xl rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40">
+            <div className="h-fit max-w-xl rounded-2xl border border-zinc-100 p-6">
               <div className="flex flex-col gap-y-4">
                 <LinkButton href='/club'>Join or Renew your Membership</LinkButton>
                 <LinkButton href='/rental'>Rent the Hall</LinkButton>

src/app/projects/page.tsx

@@ -75,7 +75,7 @@ export default function Projects() {
       >
         {projects.map((project) => (
           <Card as="li" key={project.name}>
-            <div className="relative z-10 flex h-12 w-12 items-center justify-center rounded-full bg-white shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0">
+            <div className="relative z-10 flex h-12 w-12 items-center justify-center rounded-full bg-white shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5">
               <Image
                 src={project.logo}
                 alt=""
@@ -83,11 +83,11 @@ export default function Projects() {
                 unoptimized
               />
             </div>
-            <h2 className="mt-6 text-base font-semibold text-zinc-800 dark:text-zinc-100">
+            <h2 className="mt-6 text-base font-semibold text-zinc-800">
               <Card.Link href={project.link.href}>{project.name}</Card.Link>
             </h2>
             <Card.Description>{project.description}</Card.Description>
-            <p className="relative z-10 mt-6 flex text-sm font-medium text-zinc-400 transition group-hover:text-teal-500 dark:text-zinc-200">
+            <p className="relative z-10 mt-6 flex text-sm font-medium text-zinc-400 transition group-hover:text-teal-500">
               <LinkIcon className="h-6 w-6 flex-none" />
               <span className="ml-2">{project.link.label}</span>
             </p>

src/app/providers.tsx

@@ -2,7 +2,6 @@
 
 import { createContext, useEffect, useRef } from 'react'
 import { usePathname } from 'next/navigation'
-import { ThemeProvider, useTheme } from 'next-themes'
 
 function usePrevious<T>(value: T) {
   let ref = useRef<T>()
@@ -14,30 +13,6 @@ function usePrevious<T>(value: T) {
   return ref.current
 }
 
-function ThemeWatcher() {
-  let { resolvedTheme, setTheme } = useTheme()
-
-  useEffect(() => {
-    let media = window.matchMedia('(prefers-color-scheme: dark)')
-
-    function onMediaChange() {
-      let systemTheme = media.matches ? 'dark' : 'light'
-      if (resolvedTheme === systemTheme) {
-        setTheme('system')
-      }
-    }
-
-    onMediaChange()
-    media.addEventListener('change', onMediaChange)
-
-    return () => {
-      media.removeEventListener('change', onMediaChange)
-    }
-  }, [resolvedTheme, setTheme])
-
-  return null
-}
-
 export const AppContext = createContext<{ previousPathname?: string }>({})
 
 export function Providers({ children }: { children: React.ReactNode }) {
@@ -46,10 +21,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
 
   return (
     <AppContext.Provider value={{ previousPathname }}>
-      <ThemeProvider attribute="class" disableTransitionOnChange>
-        <ThemeWatcher />
       {children}
-      </ThemeProvider>
     </AppContext.Provider>
   )
 }

src/app/rental/page.tsx

@@ -6,6 +6,8 @@ import clsx from 'clsx'
 import { Container } from '@/components/Container'
 import exteriorFront from '@/images/photos/exterior-front.png'
 import { EnvelopeIcon, PencilSquareIcon, QuestionMarkCircleIcon } from '@heroicons/react/24/solid'
+import React from 'react'
+import { TableCell, TableHeading, TableLeftHeading } from '@/components/Table'
 
 function SocialLink({
   className,
@@ -22,7 +24,7 @@ function SocialLink({
     <li className={clsx(className, 'flex')}>
       <Link
         href={href}
-        className="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500 dark:text-zinc-200 dark:hover:text-teal-500"
+        className="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500"
       >
         <Icon className="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-teal-500" />
         <span className="ml-4">{children}</span>
@@ -32,7 +34,7 @@ function SocialLink({
 }
 
 export const metadata: Metadata = {
-  title: 'West Sound Hall Rental',
+  title: 'Hall Rental',
   description:
     'Rental information for the West Sound Hall.',
 }
@@ -47,15 +49,15 @@ export default function Rental() {
               src={exteriorFront}
               alt=""
               sizes="(min-width: 1024px) 32rem, 20rem"
-              className="aspect-square rounded-2xl bg-zinc-100 object-cover dark:bg-zinc-800"
+              className="aspect-square rounded-2xl bg-zinc-100 object-cover"
             />
           </div>
         </div>
         <div className="lg:order-first lg:row-span-2">
-          <h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
+          <h1 className="text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl">
-            Hall Rental
+            West Sound Hall Rental
           </h1>
-          <div className="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400">
+          <div className="mt-6 space-y-7 text-base text-zinc-600">
             <p>
               The West Sound Community Hall is a public assembly hall, which has
               been in continuous operation since it was built in 1902. In 1999,
@@ -78,6 +80,12 @@ export default function Rental() {
               damage to the Hall or cleaning is necessary, deductions will be
               made at the discretion of the Board.
             </p>
+            <p>
+              Please check the
+              <Link href="/calendar" className="pl-1 text-blue-600 hover:underline"
+              >calendar
+              </Link> for availability.
+            </p>
           </div>
         </div>
         <div className="order-last sm:order-none lg:pl-20">
@@ -91,14 +99,14 @@ export default function Rental() {
             <SocialLink
               href="mailto:contact@westsoundhall.org"
               icon={EnvelopeIcon}
-              className="mt-8 border-t border-zinc-100 pt-8 dark:border-zinc-700/40"
+              className="mt-8 border-t border-zinc-100 pt-8"
             >
               contact@westsoundhall.org
             </SocialLink>
           </ul>
         </div>
         <div className="lg:col-span-2">
-          <h2 className="text-2xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-2xl">
+          <h2 className="text-2xl font-bold tracking-tight text-zinc-800 sm:text-2xl">
             Rental Rates
           </h2>
 
@@ -107,50 +115,50 @@ export default function Rental() {
               <table className="min-w-full divide-y divide-gray-300">
                 <thead>
                   <tr>
-                    <th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0"></th>
+                    <th scope="col" className="py-3.5 pl-4 pr-3 sm:pl-0"></th>
-                    <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Half day (4 hr)</th>
+                    <TableHeading>Half day (4 hr)</TableHeading>
-                    <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">All day</th>
+                    <TableHeading>All day</TableHeading>
-                    <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Deposit</th>
+                    <TableHeading>Deposit</TableHeading>
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-gray-200 ">
                   <tr>
-                    <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">Orcas non-profit organizations</td>
+                    <TableLeftHeading>Orcas non-profit organizations</TableLeftHeading>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50 or 2 hours for $30*</td>
+                    <TableCell>$50 or 2 hours for $30*</TableCell>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$100</td>
+                    <TableCell>$100</TableCell>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">None†</td>
+                    <TableCell>None†</TableCell>
                   </tr>
                   <tr>
-                    <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">WSCC and OIYC Members</td>
+                    <TableLeftHeading>WSCC and OIYC Members</TableLeftHeading>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50 or 2 hours for $30*</td>
+                    <TableCell>$50 or 2 hours for $30*</TableCell>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$100</td>
+                    <TableCell>$100</TableCell>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">None†</td>
+                    <TableCell>None†</TableCell>
                   </tr>
                   <tr>
-                    <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">Off-island non-profit organizations</td>
+                    <TableLeftHeading>Off-island non-profit organizations</TableLeftHeading>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50</td>
+                    <TableCell>$50</TableCell>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$100</td>
+                    <TableCell>$100</TableCell>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$300</td>
+                    <TableCell>$300</TableCell>
                   </tr>
                   <tr>
-                    <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">Individuals and non-public use</td>
+                    <TableLeftHeading>Individuals and non-public use</TableLeftHeading>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$40 per hour</td>
+                    <TableCell>$40 per hour</TableCell>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$300</td>
+                    <TableCell>$300</TableCell>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$300</td>
+                    <TableCell>$300</TableCell>
                   </tr>
                   <tr>
-                    <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">Government sponsored activities</td>
+                    <TableLeftHeading>Government sponsored activities</TableLeftHeading>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50</td>
+                    <TableCell>$50</TableCell>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50</td>
+                    <TableCell>$50</TableCell>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">None†</td>
+                    <TableCell>None†</TableCell>
                   </tr>
                 </tbody>
               </table>
             </div>
           </div>
 
-          <div className="mt-6 space-y-5 text-base text-zinc-600 dark:text-zinc-400">
+          <div className="mt-6 space-y-5 text-base text-zinc-600">
-            <h2 className="text-2xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-2xl">
+            <h2 className="text-2xl font-bold tracking-tight text-zinc-800 sm:text-2xl">
               Use Restrictions
             </h2>
 
@@ -168,6 +176,7 @@ export default function Rental() {
               The West Sound Community Hall may not be used for either personal or
               organizational monetary gain or to promote business activities.
               The only exceptions to this restriction are:
+            </p>
 
             <ol className="list-decimal ml-8 mt-5">
               <li>
@@ -183,7 +192,6 @@ export default function Rental() {
                 sponsoring nonprofit organization.)
               </li>
             </ol>
-            </p>
 
             <p>
               Any individual or organizational nonpublic use of the hall which
@@ -214,8 +222,8 @@ export default function Rental() {
             </p>
           </div>
 
-          <div className="mt-6 space-y-5 text-base text-zinc-600 dark:text-zinc-400">
+          <div className="mt-6 space-y-5 text-base text-zinc-600">
-            <h2 className="text-2xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-2xl">
+            <h2 className="text-2xl font-bold tracking-tight text-zinc-800 sm:text-2xl">
               Capacity
             </h2>
 
@@ -225,8 +233,8 @@ export default function Rental() {
             </p>
           </div>
 
-          <div className="mt-6 space-y-5 text-base text-zinc-600 dark:text-zinc-400">
+          <div className="mt-6 space-y-5 text-base text-zinc-600">
-            <h2 className="text-2xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-2xl">
+            <h2 className="text-2xl font-bold tracking-tight text-zinc-800 sm:text-2xl">
               Parking
             </h2>
 
@@ -247,8 +255,8 @@ export default function Rental() {
             </p>
           </div>
 
-          <div className="mt-6 space-y-5 text-base text-zinc-600 dark:text-zinc-400">
+          <div className="mt-6 space-y-5 text-base text-zinc-600">
-            <h2 className="text-2xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-2xl">
+            <h2 className="text-2xl font-bold tracking-tight text-zinc-800 sm:text-2xl">
               Accessibility
             </h2>
 

src/app/thank-you/page.tsx

@@ -23,7 +23,7 @@ export default async function ThankYou({
       title="Thanks for becoming a member."
       intro="Thank you for joining the West Sound Community Club."
     >
-      <p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
+      <p className="mt-6 text-base text-zinc-600">
         Your financial support helps us perserve this historic building and to host events for the community. We&apos;ll add you to our member mailing list so you receive announcement emails about upcoming events.
       </p>
     </SimpleLayout>

src/app/upcoming-events.json

@@ -1,24 +0,0 @@
-[
-    {
-        "title": "January Potluck",
-        "date": "2024-01-20",
-        "startTime": "6:00pm"
-    },
-    {
-        "title": "February Potluck",
-        "date": "2024-02-17",
-        "startTime": "6:00pm",
-        "notes": "With historic West Sound slide show."
-    },
-    {
-        "title": "Town Hall Meeting",
-        "date": "2024-03-06",
-        "startTime": "6:00pm",
-        "endTime": "8:00pm"
-    },
-    {
-        "title": "March Potluck",
-        "date": "2024-03-16",
-        "startTime": "6:00pm"
-    }
-]

src/components/ArticleLayout.tsx

@@ -41,24 +41,24 @@ export function ArticleLayout({
               type="button"
               onClick={() => router.back()}
               aria-label="Go back to articles"
-              className="group mb-8 flex h-10 w-10 items-center justify-center rounded-full bg-white shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 transition dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0 dark:ring-white/10 dark:hover:border-zinc-700 dark:hover:ring-white/20 lg:absolute lg:-left-5 lg:-mt-2 lg:mb-0 xl:-top-1.5 xl:left-0 xl:mt-0"
+              className="group mb-8 flex h-10 w-10 items-center justify-center rounded-full bg-white shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 transition lg:absolute lg:-left-5 lg:-mt-2 lg:mb-0 xl:-top-1.5 xl:left-0 xl:mt-0"
             >
-              <ArrowLeftIcon className="h-4 w-4 stroke-zinc-500 transition group-hover:stroke-zinc-700 dark:stroke-zinc-500 dark:group-hover:stroke-zinc-400" />
+              <ArrowLeftIcon className="h-4 w-4 stroke-zinc-500 transition group-hover:stroke-zinc-700" />
             </button>
           )}
           <article>
             <header className="flex flex-col">
-              <h1 className="mt-6 text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
+              <h1 className="mt-6 text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl">
                 {article.title}
               </h1>
               <time
                 dateTime={article.date}
-                className="order-first flex items-center text-base text-zinc-400 dark:text-zinc-500"
+                className="order-first flex items-center text-base text-zinc-400"
               >
-                <span className="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
+                <span className="h-4 w-0.5 rounded-full bg-zinc-200" />
                 <span className="ml-3">{formatDate(article.date)}</span>
               </time>
-              <span id="byline" className='mt-4 text-base text-zinc-400 dark:text-zinc-500'>by {article.author}</span>
+              <span id="byline" className="mt-4 text-base text-zinc-400">by {article.author}</span>
             </header>
             <Prose className="mt-8" data-mdx-content>
               {children}

src/components/Button.tsx

@@ -3,9 +3,9 @@ import clsx from 'clsx'
 
 const variantStyles = {
   primary:
-    'bg-zinc-800 font-semibold text-zinc-100 hover:bg-zinc-700 active:bg-zinc-800 active:text-zinc-100/70 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:active:bg-zinc-700 dark:active:text-zinc-100/70',
+    'bg-zinc-800 font-semibold text-zinc-100 hover:bg-zinc-700 active:bg-zinc-800 active:text-zinc-100/70',
   secondary:
-    'bg-zinc-50 font-medium text-zinc-900 hover:bg-zinc-100 active:bg-zinc-100 active:text-zinc-900/60 dark:bg-zinc-800/50 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 dark:active:bg-zinc-800/50 dark:active:text-zinc-50/70',
+    'bg-zinc-50 font-medium text-zinc-900 hover:bg-zinc-100 active:bg-zinc-100 active:text-zinc-900/60',
 }
 
 type ButtonProps = {

src/components/Card.tsx

@@ -39,7 +39,7 @@ Card.Link = function CardLink({
 }: React.ComponentPropsWithoutRef<typeof Link>) {
   return (
     <>
-      <div className="absolute -inset-x-4 -inset-y-6 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
+      <div className="absolute -inset-x-4 -inset-y-6 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 sm:-inset-x-6 sm:rounded-2xl" />
       <Link {...props}>
         <span className="absolute -inset-x-4 -inset-y-6 z-20 sm:-inset-x-6 sm:rounded-2xl" />
         <span className="relative z-10">{children}</span>
@@ -59,7 +59,7 @@ Card.Title = function CardTitle<T extends React.ElementType = 'h2'>({
   let Component = as ?? 'h2'
 
   return (
-    <Component className="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
+    <Component className="text-base font-semibold tracking-tight text-zinc-800">
       {href ? <Card.Link href={href}>{children}</Card.Link> : children}
     </Component>
   )
@@ -71,7 +71,7 @@ Card.Description = function CardDescription({
   children: React.ReactNode
 }) {
   return (
-    <p className="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+    <p className="relative z-10 mt-2 text-sm text-zinc-600">
       {children}
     </p>
   )
@@ -105,7 +105,7 @@ Card.Eyebrow = function CardEyebrow<T extends React.ElementType = 'p'>({
     <Component
       className={clsx(
         className,
-        'relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500',
+        "relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400",
         decorate && 'pl-3.5',
       )}
       {...props}
@@ -115,7 +115,7 @@ Card.Eyebrow = function CardEyebrow<T extends React.ElementType = 'p'>({
           className="absolute inset-y-0 left-0 flex items-center"
           aria-hidden="true"
         >
-          <span className="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
+          <span className="h-4 w-0.5 rounded-full bg-zinc-200" />
         </span>
       )}
       {children}

src/components/Footer.tsx

@@ -12,7 +12,7 @@ function NavLink({
   return (
     <Link
       href={href}
-      className="transition hover:text-teal-500 dark:hover:text-teal-400"
+      className="transition hover:text-teal-500"
     >
       {children}
     </Link>
@@ -23,18 +23,24 @@ export function Footer() {
   return (
     <footer className="mt-32 flex-none">
       <ContainerOuter>
-        <div className="border-t border-zinc-100 pb-16 pt-10 dark:border-zinc-700/40">
+        <div className="border-t border-zinc-100 pb-16 pt-10">
           <ContainerInner>
             <div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
-              <div className="flex flex-wrap justify-center gap-x-6 gap-y-1 text-sm font-medium text-zinc-800 dark:text-zinc-200">
+              <div className="flex flex-wrap justify-center gap-x-6 gap-y-1 text-sm font-medium text-zinc-800">
                 <NavLink href="/hall-history">History</NavLink>
                 <NavLink href="/news">News</NavLink>
+                <NavLink href="/calendar">Calendar</NavLink>
                 <NavLink href="/rental">Rental</NavLink>
                 <NavLink href="/club">Club</NavLink>
               </div>
-              <p className="text-sm text-zinc-400 dark:text-zinc-500">
+              <div>
+                <p className="text-sm text-zinc-400">
                   &copy; {new Date().getFullYear()} West Sound Community Club. All rights reserved.
                 </p>
+                <p className="text-sm text-zinc-400">
+                  WSCC is a 501c3 nonprofit organization - 91-1283768
+                </p>
+              </div>
             </div>
           </ContainerInner>
         </div>

src/components/Header.tsx

@@ -1,47 +1,14 @@
 'use client'
 
-import { Fragment, useEffect, useRef, useState } from 'react'
+import { Fragment, useEffect, useRef } from 'react'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import { useTheme } from 'next-themes'
 import { Popover, Transition } from '@headlessui/react'
 import clsx from 'clsx'
 import { XMarkIcon, ChevronDownIcon } from '@heroicons/react/24/solid'
 
 import { Container } from '@/components/Container'
 
-function SunIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-      {...props}
-    >
-      <path d="M8 12.25A4.25 4.25 0 0 1 12.25 8v0a4.25 4.25 0 0 1 4.25 4.25v0a4.25 4.25 0 0 1-4.25 4.25v0A4.25 4.25 0 0 1 8 12.25v0Z" />
-      <path
-        d="M12.25 3v1.5M21.5 12.25H20M18.791 18.791l-1.06-1.06M18.791 5.709l-1.06 1.06M12.25 20v1.5M4.5 12.25H3M6.77 6.77 5.709 5.709M6.77 17.73l-1.061 1.061"
-        fill="none"
-      />
-    </svg>
-  )
-}
-
-function MoonIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
-      <path
-        d="M17.25 16.22a6.937 6.937 0 0 1-9.47-9.47 7.451 7.451 0 1 0 9.47 9.47ZM12.75 7C17 7 17 2.75 17 2.75S17 7 21.25 7C17 7 17 11.25 17 11.25S17 7 12.75 7Z"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
 function MobileNavItem({
   href,
   children,
@@ -63,9 +30,9 @@ function MobileNavigation(
 ) {
   return (
     <Popover {...props}>
-      <Popover.Button className="group flex items-center rounded-full bg-white/90 px-4 py-2 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10 dark:hover:ring-white/20">
+      <Popover.Button className="group flex items-center rounded-full bg-white/90 px-4 py-2 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur">
         Menu
-        <ChevronDownIcon className="ml-3 h-auto w-2 stroke-zinc-500 group-hover:stroke-zinc-700 dark:group-hover:stroke-zinc-400" />
+        <ChevronDownIcon className="ml-3 h-auto w-2 stroke-zinc-500 group-hover:stroke-zinc-700" />
       </Popover.Button>
       <Transition.Root>
         <Transition.Child
@@ -77,7 +44,7 @@ function MobileNavigation(
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <Popover.Overlay className="fixed inset-0 z-50 bg-zinc-800/40 backdrop-blur-sm dark:bg-black/80" />
+          <Popover.Overlay className="fixed inset-0 z-50 bg-zinc-800/40 backdrop-blur-sm" />
         </Transition.Child>
         <Transition.Child
           as={Fragment}
@@ -90,21 +57,22 @@ function MobileNavigation(
         >
           <Popover.Panel
             focus
-            className="fixed inset-x-4 top-8 z-50 origin-top rounded-3xl bg-white p-8 ring-1 ring-zinc-900/5 dark:bg-zinc-900 dark:ring-zinc-800"
+            className="fixed inset-x-4 top-8 z-50 origin-top rounded-3xl bg-white p-8 ring-1 ring-zinc-900/5"
           >
             <div className="flex flex-row-reverse items-center justify-between">
               <Popover.Button aria-label="Close menu" className="-m-1 p-1">
-                <XMarkIcon className="h-6 w-6 text-zinc-500 dark:text-zinc-400" />
+                <XMarkIcon className="h-6 w-6 text-zinc-500" />
               </Popover.Button>
-              <h2 className="text-sm font-medium text-zinc-600 dark:text-zinc-400">
+              <h2 className="text-sm font-medium text-zinc-600">
                 Navigation
               </h2>
             </div>
             <nav className="mt-6">
-              <ul className="-my-2 divide-y divide-zinc-100 text-base text-zinc-800 dark:divide-zinc-100/5 dark:text-zinc-300">
+              <ul className="-my-2 divide-y divide-zinc-100 text-base text-zinc-800">
                 <MobileNavItem href="/">Home</MobileNavItem>
                 <MobileNavItem href="/hall-history">Hall History</MobileNavItem>
                 <MobileNavItem href="/news">News</MobileNavItem>
+                <MobileNavItem href="/calendar">Calendar</MobileNavItem>
                 <MobileNavItem href="/rental">Rental</MobileNavItem>
                 <MobileNavItem href="/club">Club</MobileNavItem>
               </ul>
@@ -132,13 +100,13 @@ function NavItem({
         className={clsx(
           'relative block px-3 py-2 transition',
           isActive
-            ? 'text-teal-500 dark:text-teal-400'
+            ? "text-teal-500"
-            : 'hover:text-teal-500 dark:hover:text-teal-400',
+            : "hover:text-teal-500",
         )}
       >
         {children}
         {isActive && (
-          <span className="absolute inset-x-1 -bottom-px h-px bg-gradient-to-r from-teal-500/0 via-teal-500/40 to-teal-500/0 dark:from-teal-400/0 dark:via-teal-400/40 dark:to-teal-400/0" />
+          <span className="absolute inset-x-1 -bottom-px h-px bg-gradient-to-r from-teal-500/0 via-teal-500/40 to-teal-500/0" />
         )}
       </Link>
     </li>
@@ -148,10 +116,11 @@ function NavItem({
 function DesktopNavigation(props: React.ComponentPropsWithoutRef<'nav'>) {
   return (
     <nav {...props}>
-      <ul className="flex rounded-full bg-white/90 px-3 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10">
+      <ul className="flex rounded-full bg-white/90 px-3 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur">
         <NavItem href="/">Home</NavItem>
         <NavItem href="/hall-history">History</NavItem>
         <NavItem href="/news">News</NavItem>
+        <NavItem href="/calendar">Calendar</NavItem>
         <NavItem href="/rental">Rental</NavItem>
         <NavItem href="/club">Club</NavItem>
       </ul>
@@ -159,28 +128,6 @@ function DesktopNavigation(props: React.ComponentPropsWithoutRef<'nav'>) {
   )
 }
 
-function ThemeToggle() {
-  let { resolvedTheme, setTheme } = useTheme()
-  let otherTheme = resolvedTheme === 'dark' ? 'light' : 'dark'
-  let [mounted, setMounted] = useState(false)
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  return (
-    <button
-      type="button"
-      aria-label={mounted ? `Switch to ${otherTheme} theme` : 'Toggle theme'}
-      className="group rounded-full bg-white/90 px-3 py-2 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur transition dark:bg-zinc-800/90 dark:ring-white/10 dark:hover:ring-white/20"
-      onClick={() => setTheme(otherTheme)}
-    >
-      <SunIcon className="h-6 w-6 fill-zinc-100 stroke-zinc-500 transition group-hover:fill-zinc-200 group-hover:stroke-zinc-700 dark:hidden [@media(prefers-color-scheme:dark)]:fill-teal-50 [@media(prefers-color-scheme:dark)]:stroke-teal-500 [@media(prefers-color-scheme:dark)]:group-hover:fill-teal-50 [@media(prefers-color-scheme:dark)]:group-hover:stroke-teal-600" />
-      <MoonIcon className="hidden h-6 w-6 fill-zinc-700 stroke-zinc-500 transition dark:block [@media(prefers-color-scheme:dark)]:group-hover:stroke-zinc-400 [@media_not_(prefers-color-scheme:dark)]:fill-teal-400/10 [@media_not_(prefers-color-scheme:dark)]:stroke-teal-500" />
-    </button>
-  )
-}
-
 function clamp(number: number, a: number, b: number) {
   let min = Math.min(a, b)
   let max = Math.max(a, b)
@@ -283,18 +230,10 @@ export function Header() {
                 'var(--header-inner-position)' as React.CSSProperties['position'],
             }}
           >
-            <div className="relative flex gap-4">
-              <div className="flex flex-1"></div>
             <div className="flex flex-1 justify-end md:justify-center">
               <MobileNavigation className="pointer-events-auto md:hidden" />
               <DesktopNavigation className="pointer-events-auto hidden md:block" />
             </div>
-              <div className="flex justify-end md:flex-1">
-                <div className="pointer-events-auto">
-                  <ThemeToggle />
-                </div>
-              </div>
-            </div>
           </Container>
         </div>
       </header>

src/components/Layout.tsx

@@ -6,7 +6,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
     <>
       <div className="fixed inset-0 flex justify-center sm:px-8">
         <div className="flex w-full max-w-7xl lg:px-8">
-          <div className="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
+          <div className="w-full bg-white ring-1 ring-zinc-100" />
         </div>
       </div>
       <div className="relative flex w-full flex-col">

src/components/MdxImage.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import Image, { ImageProps } from 'next/image'
+
+// Workaround for https://github.com/hashicorp/next-mdx-remote/issues/405
+export function MdxImage(props: ImageProps) {
+    return <Image {...props} alt={props.alt} />;
+}

src/components/Prose.tsx

@@ -5,6 +5,6 @@ export function Prose({
   ...props
 }: React.ComponentPropsWithoutRef<'div'>) {
   return (
-    <div className={clsx(className, 'prose dark:prose-invert')} {...props} />
+    <div className={clsx(className, 'prose')} {...props} />
   )
 }

src/components/Section.tsx

@@ -12,12 +12,12 @@ export function Section({
   return (
     <section
       aria-labelledby={id}
-      className="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40"
+      className="md:border-l md:border-zinc-100 md:pl-6"
     >
       <div className="grid max-w-3xl grid-cols-1 items-baseline gap-y-8 md:grid-cols-4">
         <h2
           id={id}
-          className="text-sm font-semibold text-zinc-800 dark:text-zinc-100"
+          className="text-sm font-semibold text-zinc-800"
         >
           {title}
         </h2>

src/components/SimpleLayout.tsx

@@ -12,10 +12,10 @@ export function SimpleLayout({
   return (
     <Container className="mt-16 sm:mt-32">
       <header className="max-w-2xl">
-        <h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
+        <h1 className="text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl">
           {title}
         </h1>
-        <p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
+        <p className="mt-6 text-base text-zinc-600">
           {intro}
         </p>
       </header>

src/components/Table.tsx

@@ -0,0 +1,25 @@
+
+export function TableHeading({
+    children
+}: {
+    children: React.ReactNode
+}) {
+    return <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">{children}</th>
+
+}
+
+export function TableLeftHeading({
+    children
+}: {
+    children: React.ReactNode
+}) {
+    return <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">{children}</td>
+}
+
+export function TableCell({
+    children
+}: {
+    children: React.ReactNode
+}) {
+    return <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{children}</td>
+}

src/styles/tailwind.css

@@ -2,3 +2,10 @@
 @import 'tailwindcss/components';
 @import './prism.css';
 @import 'tailwindcss/utilities';
+
+:root {
+  /* Your default theme */
+
+  --stripe-background: #FFFFFF;
+  --stripe-foreground: #000000;
+}

typography.ts

@@ -170,8 +170,8 @@ export default function typographyStyles({ theme }: PluginUtils) {
           paddingLeft: theme('spacing.6'),
         },
         li: {
-          marginTop: theme('spacing.6'),
+          // marginTop: theme('spacing.2'),
-          marginBottom: theme('spacing.6'),
+          // marginBottom: theme('spacing.2'),
           paddingLeft: theme('spacing[3.5]'),
         },
         'li::marker': {
@@ -184,14 +184,14 @@ export default function typographyStyles({ theme }: PluginUtils) {
         'ul > li::marker': {
           color: 'var(--tw-prose-bullets)',
         },
-        'li :is(ol, ul)': {
+        // 'li :is(ol, ul)': {
-          marginTop: theme('spacing.4'),
+        //   marginTop: theme('spacing.2'),
-          marginBottom: theme('spacing.4'),
+        //   marginBottom: theme('spacing.2'),
-        },
+        // },
-        'li :is(li, p)': {
+        // 'li :is(li, p)': {
-          marginTop: theme('spacing.3'),
+        //   marginTop: theme('spacing.3'),
-          marginBottom: theme('spacing.3'),
+        //   marginBottom: theme('spacing.3'),
-        },
+        // },
 
         // Code blocks
         pre: {