Fix club membership form in dark mode

Switch from 5 small photos to one larger photo on the right

.dockerignore

@@ -0,0 +1,8 @@
+# Don't copy node_modules
+node_modules
+
+# Ignore common folders that we do not need
+.git
+.next
+.github
+.vscode

.gitea/workflows/image-build.yaml

@@ -0,0 +1,32 @@
+name: Build Production Image
+run-name: $GITHUB_REF_TYPE Production Build
+on:
+  push:
+    tags:
+      - '*.*.*'
+
+jobs:
+  Build Production Image:
+    runs-on: ubuntu-latest
+    container:
+      image: git.grosinger.net/tgrosinger/runner-image:0.0.3
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Login to Gitea Docker registry
+        uses: docker/login-action@v2
+        with:
+          registry: git.grosinger.net
+          username: tgrosinger
+          password: ${{ secrets.CONTAINER_REGISTRY_ACCESS_TOKEN }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          push: true
+          tags: git.grosinger.net/tgrosinger/west-sound-hall:${{ gitea.ref_name  }}

Dockerfile

@@ -0,0 +1,20 @@
+FROM docker.io/library/node:18-alpine AS build-env
+
+ENV NODE_ENV production
+ENV PORT 3000
+ENV NEXT_TELEMETRY_DISABLED 1
+
+WORKDIR /app
+
+# Building app
+COPY package*.json ./
+
+# Install node modules
+# Note: We also install dev deps as TypeScript may be needed
+RUN npm install
+
+# Copy files. Use dockerignore to avoid copying node_modules
+COPY . .
+
+# Run app command
+CMD ["/bin/ash", "/app/entrypoint.sh"]

README.md

@@ -1,10 +1,41 @@
-# Spotlight
+# West Sound Hall Website
 
-Spotlight is a [Tailwind UI](https://tailwindui.com) site template built using [Tailwind CSS](https://tailwindcss.com) and [Next.js](https://nextjs.org).
+This is the website for the West Sound Hall and Community Club on Orcas Island, WA.
 
-## Getting started
+https://westsoundhall.org
 
-To get started with this template, first install the npm dependencies:
+## Running
+
+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.
+
+```sh
+docker run -p 3000:3000 git.grosinger.net/tgrosinger/west-sound-hall:0.0.14
+```
+
+## Updating
+
+### Events on the Homepage
+
+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.
+
+Events in the past will be automatically hidden from view.
+
+### News Posts
+
+News posts are written in [`src/app/news`](https://git.grosinger.net/tgrosinger/west-sound-hall/src/branch/main/src/app/news). Each post requires a directory within this folder, and the directory title will become the last segment of the news post URL.
+
+To create a new post, create a new directory in that folder, then within that folder create a `page.mdx`. Use an existing news post as a template by copying its `page.mdx` then modify the author, date, title, description, and the body of the post as needed.
+
+Posts are written in [mdx](https://mdxjs.com/) however for most news posts you can just consider the body of the post to be [standard markdown](https://www.markdownguide.org/basic-syntax/).
+
+Photos can be added in the same directory as the `page.mdx` file. Refer to another news post for an example of how to embed them.
+
+## Developing
+
+To get started, first install the npm dependencies:
 
 ```bash
 npm install
@@ -24,19 +55,8 @@ npm run dev
 
 Finally, open [http://localhost:3000](http://localhost:3000) in your browser to view the website.
 
-## Customizing
-
-You can start editing this template by modifying the files in the `/src` folder. The site will auto-update as you edit these files.
-
 ## License
 
-This site template is a commercial product and is licensed under the [Tailwind UI license](https://tailwindui.com/license).
+This site is based off of the Spotlight template from Tailwind, and licensed under the [Tailwind UI license](https://tailwindui.com/license).
 
-## Learn more
-
-To learn more about the technologies used in this site template, see the following resources:
-
-- [Tailwind CSS](https://tailwindcss.com/docs) - the official Tailwind CSS documentation
-- [Next.js](https://nextjs.org/docs) - the official Next.js documentation
-- [Headless UI](https://headlessui.dev) - the official Headless UI documentation
-- [MDX](https://mdxjs.com) - the MDX documentation
+It was purchased by Tony Grosinger.

entrypoint.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+
+# The build step hard-codes variables from the environment into HTML, so it must
+# be done with the correct .env.local for runtime.
+
+./node_modules/next/dist/bin/next build
+./node_modules/next/dist/bin/next start

package-lock.json

@@ -42,7 +42,7 @@
         "eslint-config-next": "13.4.16",
         "prettier": "^3.0.1",
         "prettier-plugin-tailwindcss": "^0.5.2",
-        "sharp": "^0.32.0"
+        "sharp": "0.32.6"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -8714,9 +8714,9 @@
       "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
     },
     "node_modules/sharp": {
-      "version": "0.32.4",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.4.tgz",
-      "integrity": "sha512-exUnZewqVZC6UXqXuQ8fyJJv0M968feBi04jb9GcUHrWtkRoAKnbJt8IfwT4NJs7FskArbJ14JAFGVuooszoGg==",
+      "version": "0.32.6",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz",
+      "integrity": "sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
@@ -16578,9 +16578,9 @@
       "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
     },
     "sharp": {
-      "version": "0.32.4",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.4.tgz",
-      "integrity": "sha512-exUnZewqVZC6UXqXuQ8fyJJv0M968feBi04jb9GcUHrWtkRoAKnbJt8IfwT4NJs7FskArbJ14JAFGVuooszoGg==",
+      "version": "0.32.6",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz",
+      "integrity": "sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==",
       "dev": true,
       "requires": {
         "color": "^4.2.3",

package.json

@@ -35,6 +35,7 @@
     "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",
     "typescript": "5.1.6"
@@ -43,7 +44,6 @@
     "eslint": "8.45.0",
     "eslint-config-next": "13.4.16",
     "prettier": "^3.0.1",
-    "prettier-plugin-tailwindcss": "^0.5.2",
-    "sharp": "^0.32.0"
+    "prettier-plugin-tailwindcss": "^0.5.2"
   }
 }

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 dark:text-zinc-200 dark: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 dark:text-zinc-100 sm:text-5xl">
+            The Board of Directors
+          </h1>
+          <div className="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400">
+            <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>
+                    <th scope="col" className="py-3.5 pl-4 pr-3 sm:pl-0">Name</th>
+                    <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>Tony Grosinger</TableLeftHeading>
+                    <TableCell>Secretary</TableCell>
+                  </tr>
+                  <tr>
+                    <TableLeftHeading>Temporarily performed by Secretary</TableLeftHeading>
+                    <TableCell>Treasurer</TableCell>
+                  </tr>
+                  <tr>
+                    <TableLeftHeading>Mark Gasser</TableLeftHeading>
+                    <TableCell>Director</TableCell>
+                  </tr>
+                  <tr>
+                    <TableLeftHeading>Leslie Brown</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 dark:border-zinc-700/40"
+            >
+              contact@westsoundhall.org
+            </SocialLink>
+            <SocialLink
+              href="mailto:contact@westsoundhall.org"
+              icon={EnvelopeIcon}
+              className="mt-4 border-zinc-100 dark:border-zinc-700/40"
+            >
+              board@westsoundhall.org
+            </SocialLink>
+          </ul>
+        </div>
+      </div>
+    </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, GiftIcon, EnvelopeIcon, UserGroupIcon } from '@heroicons/react/24/solid'
 import interiorEmptyImage from '@/images/photos/interior-empty.jpg'
-import { ClubPayment } from './payment';
 
 function SocialLink({
   className,
@@ -34,7 +34,7 @@ function SocialLink({
 }
 
 export const metadata: Metadata = {
-  title: 'History',
+  title: 'West Sound 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">
@@ -98,9 +107,15 @@ export default function Club() {
             >
               contact@westsoundhall.org
             </SocialLink>
+            <SocialLink href="/board-of-directors" icon={UserGroupIcon} className="mt-4">
+              Board of Directors
+            </SocialLink>
           </ul>
         </div>
         <div>
+          <h2 className="text-2xl mb-4 font-semibold leading-6 text-gray-900">
+            Join or Renew your Membership
+          </h2>
           <ClubPayment />
         </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 {
@@ -59,7 +59,6 @@ function CheckoutForm({
   const [selectedAdditionalDonation, setSelectedAdditionalDonation] = useState<number | null>(null);
   const [customAmount, setCustomAmount] = useState('');
   const [email, setEmail] = useState('');
-  const [offsetFees, setOffsetFees] = useState(true);
   const [totalAmount, setTotalAmount] = useState(300);
   const [message, setMessage] = useState<string>('');
   const [isLoading, setIsLoading] = useState(false);
@@ -111,9 +110,7 @@ function CheckoutForm({
       }
     }
 
-    if (offsetFees) {
     subtotal = Math.ceil(subtotal * 1.03)
-    }
 
     setTotalAmount(subtotal);
 
@@ -128,7 +125,7 @@ function CheckoutForm({
         },
       }),
     });
-  }, [paymentIntentID, selectedMembershipLevel, selectedAdditionalDonation, customAmount, offsetFees, email])
+  }, [paymentIntentID, selectedMembershipLevel, selectedAdditionalDonation, customAmount, email])
 
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
@@ -169,7 +166,7 @@ function CheckoutForm({
 
         {/* Membership Type */}
         <RadioGroup value={selectedMembershipLevel} onChange={setSelectedMembershipLevel} className="space-y-3">
-          <RadioGroup.Label className="text-base font-semibold leading-6 text-gray-900">
+          <RadioGroup.Label className="text-base font-semibold leading-6 text-gray-900 dark:text-white">
             Select a membership type
           </RadioGroup.Label>
 
@@ -180,8 +177,8 @@ function CheckoutForm({
                 value={membership}
                 className={({ active }) =>
                   classNames(
-                    active ? 'border-indigo-600 ring-2 ring-indigo-600' : 'border-gray-300',
-                    'relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none'
+                    active ? 'border-indigo-600 ring-2 ring-indigo-600' : 'border-gray-200 dark:border-gray-500',
+                    'relative flex cursor-pointer rounded-lg border bg-white hover:bg-gray-50 hover:dark:bg-zinc-600 dark:bg-zinc-700 p-4 shadow-sm focus:outline-none'
                   )
                 }
               >
@@ -189,7 +186,7 @@ function CheckoutForm({
                   <>
                     <span className="flex flex-1 items-center justify-between ">
                       <span className="flex flex-col">
-                        <RadioGroup.Label as="span" className="block text-sm font-medium text-gray-900">
+                        <RadioGroup.Label as="span" className="block text-sm font-medium text-gray-900 dark:text-white">
                           {membership.title}
                         </RadioGroup.Label>
                         <RadioGroup.Description as="span" className="mt-1 flex items-center text-sm text-gray-500">
@@ -197,7 +194,7 @@ function CheckoutForm({
                         </RadioGroup.Description>
                       </span>
                       <RadioGroup.Description as="span" className="ml-8 text-sm font-medium">
-                        <span className="text-gray-900">${membership.price}</span>
+                        <span className="text-gray-900 dark:text-white">${membership.price}</span>
                         <span className="text-gray-500">/yr</span>
                       </RadioGroup.Description>
                     </span>
@@ -218,7 +215,7 @@ function CheckoutForm({
 
         {/* Additional donation */}
         <RadioGroup value={selectedAdditionalDonation} onChange={setSelectedAdditionalDonation} className="space-y-3">
-          <RadioGroup.Label className="text-base font-semibold leading-6 text-gray-900">
+          <RadioGroup.Label className="text-base font-semibold leading-6 text-gray-900 dark:text-white">
             Additional donation
           </RadioGroup.Label>
           <div className="grid grid-cols-3 gap-3 sm:grid-cols-5">
@@ -231,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-1 ring-inset ring-gray-300 bg-white 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'
+                      ? 'ring-2 ring-indigo-600'
+                      : 'ring-1 ring-inset ring-gray-200 dark:ring-gray-500 text-gray-900 dark:text-white hover:bg-gray-50 hover:dark:bg-zinc-600',
+                    'flex items-center justify-center rounded-md py-3 px-3 text-sm font-semibold sm:flex-1 bg-white dark:bg-zinc-700'
                   )
                 }
               >
@@ -253,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 dark:text-white dark:bg-zinc-700 ring-1 ring-inset ring-gray-200 dark:ring-gray-500 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"
                         />
@@ -277,12 +274,12 @@ function CheckoutForm({
         </RadioGroup>
 
         <div className="space-y-3">
-          <h2 className="text-base font-semibold leading-6 text-gray-900">
+          <h2 className="text-base font-semibold leading-6 text-gray-900 dark:text-white">
             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">
-            <label htmlFor="name" className="block text-xs font-medium text-gray-900">
+          <div className="rounded-md mb-3 px-3 pb-1.5 pt-2.5 shadow-sm ring-1 ring-inset ring-gray-200 dark:ring-gray-500 focus-within:ring-2 focus-within:ring-indigo-600 dark:bg-zinc-700 dark:text-white">
+            <label htmlFor="name" className="block text-xs font-medium text-gray-900 dark:text-zinc-400">
               Email
             </label>
             <input
@@ -291,7 +288,7 @@ function CheckoutForm({
               id="email"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
-              className="block w-full border-0 p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
+              className="block w-full border-0 p-0 dark:bg-zinc-700 text-gray-900 dark:text-white placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
               placeholder="you@example.com"
             />
           </div>
@@ -299,37 +296,20 @@ function CheckoutForm({
         </div>
 
         <div className="space-y-3">
-          <h2 className="text-base font-semibold leading-6 text-gray-900">
+          <h2 className="text-base font-semibold leading-6 text-gray-900 dark:text-white">
             Payment
           </h2>
           <div className="mt-1 text-sm text-gray-500">
-            If you would like to pay by cash or check, please instead
-            <a className="underline mx-1" href="/WSCC-Membership-Form.pdf">fill out a paper form</a>
-            and mail to the address on the form.
+            Credit card fees included. If you would like to avoid these fees or
+            to pay by cash or check, please instead <a className="underline
+            mx-1" href="/WSCC-Membership-Form.pdf">fill out a paper form</a> and
+            mail to the address on the form.
           </div>
           <PaymentElement id="payment-element" />
         </div>
 
         {/* TODO: Automatically renew toggle? */}
 
-        <div className="relative flex gap-x-3">
-          <div className="flex h-6 items-center">
-            <input
-              id="offsetFees"
-              name="offsetFees"
-              type="checkbox"
-              checked={offsetFees}
-              onChange={(e) => setOffsetFees(e.target.checked)}
-              className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
-            />
-          </div>
-          <div className="text-sm leading-6">
-            <label htmlFor="offsetFees" className="font-medium text-gray-900">
-              Help offset credit card fees
-            </label>
-          </div>
-        </div>
-
         <button
           className="mt-6 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"
           disabled={isLoading || !stripe || !elements}
@@ -349,9 +329,37 @@ 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];
+  const darkTheme = htmlEl.classList.contains("dark");
+
   useEffect(() => {
     // Create PaymentIntent as soon as the page loads using our local API
     fetch('api/stripe_intent', {
@@ -369,15 +377,36 @@ 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 cb = useCallback(
+    () => {
+      const updatedHtmlEl = document.getElementsByTagName('html')[0];
+      const updatedDarkTheme = updatedHtmlEl.classList.contains("dark");
+
+      if (updatedDarkTheme !== darkTheme) {
+        location.reload();
+      }
+    },
+    [darkTheme]
+  )
+
+  useMutationObservable(htmlEl, cb);
+
   const options: StripeElementsOptions = {
     clientSecret,
-    appearance
+    appearance,
   }
+
   return <>
     {clientSecret && (
       <Elements options={options}

src/app/feed.xml/route.ts

@@ -36,17 +36,17 @@ export async function GET(req: Request) {
   });
 
   let articleIds = require
-    .context('../blog', true, /\/page\.mdx$/)
+    .context('../news', true, /\/page\.mdx$/)
     .keys()
     .filter((key) => key.startsWith('./'))
     .map((key) => key.slice(2).replace(/\/page\.mdx$/, ''));
 
   for (let id of articleIds) {
-    let url = String(new URL(`/blog/${id}`, req.url));
+    let url = String(new URL(`/news/${id}`, req.url));
     let html = await (await fetch(url)).text();
     let $ = cheerio.load(html);
 
-    let publicUrl = `${siteUrl}/blog/${id}`;
+    let publicUrl = `${siteUrl}/news/${id}`;
     let article = $('article').first();
     let title = article.find('h1').first().text();
     let date = article.find('time').first().attr('datetime');

src/app/news/page.tsx

@@ -9,7 +9,7 @@ function Article({ article }: { article: BlogPostWithSlug }) {
   return (
     <article className="md:grid md:grid-cols-4 md:items-baseline">
       <Card className="md:col-span-3">
-        <Card.Title href={`/blog/${article.slug}`}>
+        <Card.Title href={`/news/${article.slug}`}>
           {article.title}
         </Card.Title>
         <Card.Eyebrow
@@ -35,7 +35,7 @@ function Article({ article }: { article: BlogPostWithSlug }) {
 }
 
 export const metadata: Metadata = {
-  title: 'Blog',
+  title: 'Club News',
   description: 'History, Announcements, and more from the West Sound Hall and Community Club.',
 }
 
@@ -44,7 +44,7 @@ export default async function ArticlesIndex() {
 
   return (
     <SimpleLayout
-      title="West Sound Hall Blog"
+      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">

src/app/page.tsx

@@ -1,22 +1,36 @@
-import Image, { type ImageProps } from 'next/image'
-import clsx from 'clsx'
+import Image from 'next/image'
 
-import { Button } from '@/components/Button'
+import Link from 'next/link'
 import { Card } from '@/components/Card'
 import { Container } from '@/components/Container'
-import { CalendarDaysIcon, EnvelopeIcon } from '@heroicons/react/24/solid'
+import { CalendarDaysIcon } from '@heroicons/react/24/solid'
 import exteriorFrontImage from '@/images/photos/exterior-front.png'
-import stageImage from '@/images/photos/stage.jpg'
-import exteriorSoutheastImage from '@/images/photos/exterior-southeast.jpg'
-import interorEmptyImage from '@/images/photos/interior-empty.jpg'
-import kitchenImage from '@/images/photos/kitchen.jpg'
 import { type BlogPostWithSlug, getAllBlogPosts } from '@/lib/articles'
 import { formatDate } from '@/lib/formatDate'
+import { promises as fs } from 'fs';
+
+
+function LinkButton({
+  href,
+  children,
+}: {
+  href: string
+  children: React.ReactNode
+}) {
+  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"
+    >
+      {children}
+    </Link>
+  )
+}
 
 function Article({ article }: { article: BlogPostWithSlug }) {
   return (
     <Card as="article">
-      <Card.Title href={`/blog/${article.slug}`}>
+      <Card.Title href={`/news/${article.slug}`}>
         {article.title}
       </Card.Title>
       <Card.Eyebrow as="time" dateTime={article.date} decorate>
@@ -28,35 +42,6 @@ function Article({ article }: { article: BlogPostWithSlug }) {
   )
 }
 
-function Newsletter() {
-  return (
-    <form
-      action="/thank-you"
-      className="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40"
-    >
-      <h2 className="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">
-        <EnvelopeIcon className="h-6 w-6 flex-none fill-zinc-100 stroke-zinc-400 dark:fill-zinc-100/10 dark:stroke-zinc-500" />
-        <span className="ml-3">Stay up to date</span>
-      </h2>
-      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
-        Get notified about upcoming events and stay in touch with the community.
-      </p>
-      <div className="mt-6 flex">
-        <input
-          type="email"
-          placeholder="Email address"
-          aria-label="Email address"
-          required
-          className="min-w-0 flex-auto appearance-none rounded-md border border-zinc-900/10 bg-white px-3 py-[calc(theme(spacing.2)-1px)] shadow-md shadow-zinc-800/5 placeholder:text-zinc-400 focus:border-teal-500 focus:outline-none focus:ring-4 focus:ring-teal-500/10 dark:border-zinc-700 dark:bg-zinc-700/[0.15] dark:text-zinc-200 dark:placeholder:text-zinc-500 dark:focus:border-teal-400 dark:focus:ring-teal-400/10 sm:text-sm"
-        />
-        <Button type="submit" className="ml-4 flex-none">
-          Join
-        </Button>
-      </div>
-    </form>
-  )
-}
-
 interface Meeting {
   title: string
   date: string
@@ -99,21 +84,36 @@ function MeetingListItem({ meeting }: { meeting: Meeting }) {
   )
 }
 
-function Events() {
-  let events: Array<Meeting> = [
-    {
-      title: 'January Potluck',
-      date: '2024-01-20',
-      startTime: '6:00pm',
-    },
-    {
-      title: 'February Potluck',
-      date: '2024-02-17',
-      startTime: '6:00pm',
-      // endTime: '8:00pm',
-      // notes: 'Bring your own chair.'
-    },
-  ]
+async function Events() {
+  const now = new Date();
+  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">
@@ -135,43 +135,18 @@ function Events() {
   )
 }
 
-function Photos() {
-  let rotations = ['rotate-2', '-rotate-2', 'rotate-2', 'rotate-2', '-rotate-2']
-
-  return (
-    <div className="mt-16 sm:mt-20">
-      <div className="-my-4 flex justify-center gap-5 overflow-hidden py-4 sm:gap-8">
-        {[exteriorSoutheastImage, stageImage, exteriorFrontImage, interorEmptyImage, kitchenImage].map((image, imageIndex) => (
-          <div
-            key={image.src}
-            className={clsx(
-              'relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800 sm:w-72 sm:rounded-2xl',
-              rotations[imageIndex % rotations.length],
-            )}
-          >
-            <Image
-              src={image}
-              alt=""
-              sizes="(min-width: 640px) 18rem, 11rem"
-              className="absolute inset-0 h-full w-full object-cover"
-            />
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
 export default async function Home() {
   let articles = (await getAllBlogPosts()).slice(0, 4)
 
   return (
     <>
-      <Container className="mt-9">
-        <div className="max-w-2xl">
-          <h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
+      <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-zinc-800 dark:text-zinc-100 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">
                 The West Sound Community Hall is located in the hamlet of West Sound
                 on Orcas Island, about 10 minutes from the ferry landing and
@@ -182,8 +157,20 @@ export default async function Home() {
                 Facing West Sound, the Hall is at the heart of the West Sound community.
               </p>
             </div>
-      </Container>
-      <Photos />
+            <Image
+              src={exteriorFrontImage}
+              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="flex flex-col gap-y-4">
+                <LinkButton href='/club'>Join or Renew your Membership</LinkButton>
+                <LinkButton href='/rental'>Rent the Hall</LinkButton>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
       <Container className="mt-24 md:mt-28">
         <div className="mx-auto grid max-w-xl grid-cols-1 gap-y-20 lg:max-w-none lg:grid-cols-2">
           <div className="flex flex-col gap-16">
@@ -191,8 +178,7 @@ export default async function Home() {
               <Article key={article.slug} article={article} />
             ))}
           </div>
-          <div className="space-y-10 lg:pl-16 xl:pl-24">
-            <Newsletter />
+          <div className="lg:pl-16 xl:pl-24">
             <Events />
           </div>
         </div>

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,
@@ -32,9 +34,9 @@ function SocialLink({
 }
 
 export const metadata: Metadata = {
-  title: 'History',
+  title: 'West Sound Hall Rental',
   description:
-    'The history of the West Sound Community Hall on Orcas Island.',
+    'Rental information for the West Sound Hall.',
 }
 
 export default function Rental() {
@@ -107,42 +109,42 @@ 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="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Half day (4 hr)</th>
-                    <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">All day</th>
-                    <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Deposit</th>
+                    <th scope="col" className="py-3.5 pl-4 pr-3 sm:pl-0"></th>
+                    <TableHeading>Half day (4 hr)</TableHeading>
+                    <TableHeading>All day</TableHeading>
+                    <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>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50 or 2 hours for $30*</td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$100</td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">None†</td>
+                    <TableLeftHeading>Orcas non-profit organizations</TableLeftHeading>
+                    <TableCell>$50 or 2 hours for $30*</TableCell>
+                    <TableCell>$100</TableCell>
+                    <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>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50 or 2 hours for $30*</td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$100</td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">None†</td>
+                    <TableLeftHeading>WSCC and OIYC Members</TableLeftHeading>
+                    <TableCell>$50 or 2 hours for $30*</TableCell>
+                    <TableCell>$100</TableCell>
+                    <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>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50</td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$100</td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$300</td>
+                    <TableLeftHeading>Off-island non-profit organizations</TableLeftHeading>
+                    <TableCell>$50</TableCell>
+                    <TableCell>$100</TableCell>
+                    <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>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$40 per hour</td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$300</td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$300</td>
+                    <TableLeftHeading>Individuals and non-public use</TableLeftHeading>
+                    <TableCell>$40 per hour</TableCell>
+                    <TableCell>$300</TableCell>
+                    <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>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50</td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50</td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">None†</td>
+                    <TableLeftHeading>Government sponsored activities</TableLeftHeading>
+                    <TableCell>$50</TableCell>
+                    <TableCell>$50</TableCell>
+                    <TableCell>None†</TableCell>
                   </tr>
                 </tbody>
               </table>
@@ -168,6 +170,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 +186,6 @@ export default function Rental() {
                 sponsoring nonprofit organization.)
               </li>
             </ol>
-            </p>
 
             <p>
               Any individual or organizational nonpublic use of the hall which

src/app/upcoming-events.json

@@ -0,0 +1,24 @@
+[
+    {
+        "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/Footer.tsx

@@ -28,12 +28,18 @@ export function Footer() {
             <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">
                 <NavLink href="/hall-history">History</NavLink>
+                <NavLink href="/news">News</NavLink>
                 <NavLink href="/rental">Rental</NavLink>
                 <NavLink href="/club">Club</NavLink>
               </div>
+              <div>
                 <p className="text-sm text-zinc-400 dark:text-zinc-500">
                   &copy; {new Date().getFullYear()} West Sound Community Club. All rights reserved.
                 </p>
+                <p className="text-sm text-zinc-400 dark:text-zinc-500">
+                  WSCC is a 501c3 nonprofit organization - 91-1283768
+                </p>
+              </div>
             </div>
           </ContainerInner>
         </div>

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 dark:text-zinc-100">{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 dark:text-zinc-100 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 dark:text-zinc-400">{children}</td>
+}

src/lib/articles.ts

@@ -12,7 +12,7 @@ export interface BlogPostWithSlug extends BlogPost {
 }
 
 async function importBlogPost(filename: string): Promise<BlogPostWithSlug> {
-  let { article } = (await import(`../app/blog/${filename}`)) as {
+  let { article } = (await import(`../app/news/${filename}`)) as {
     default: React.ComponentType;
     article: BlogPost;
   };
@@ -25,7 +25,7 @@ async function importBlogPost(filename: string): Promise<BlogPostWithSlug> {
 
 export async function getAllBlogPosts() {
   let articleFilenames = await glob('*/page.mdx', {
-    cwd: './src/app/blog',
+    cwd: './src/app/news',
   });
 
   const posts = await Promise.all(articleFilenames.map(importBlogPost));

src/styles/tailwind.css

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