Add news post for February 2024 potluck

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

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.

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>
+                    <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>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,
@@ -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,6 +107,9 @@ 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>

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/2024-02-17-potluck/page.mdx

@@ -0,0 +1,58 @@
+import { ArticleLayout } from '@/components/ArticleLayout'
+import Image from 'next/image'
+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 slidshow 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 dark:text-zinc-500">
+    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 dark:text-zinc-500">
+    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 dark:text-zinc-500">
+    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/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/news/welcome-to-the-wscc-website/page.mdx

@@ -41,8 +41,4 @@ the hall available for rental by the community, and even added the hall to the
 WA Heritage Register. There'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!

src/app/page.tsx

@@ -1,17 +1,14 @@
 import Image from 'next/image'
-import clsx from 'clsx'
 
 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,
@@ -23,9 +20,7 @@ function LinkButton({
   return (
     <Link
       href={href}
-      className="rounded-md px-3 py-2 font-semibold text-center transition hover:text-teal-500 dark:hover:text-teal-400 bg-zinc-200 hover:bg-zinc-100 dark:bg-zinc-700/40 dark:hover:bg-zinc-600/40"
-
-
+      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>
@@ -35,7 +30,7 @@ function LinkButton({
 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>
@@ -47,17 +42,6 @@ function Article({ article }: { article: BlogPostWithSlug }) {
   )
 }
 
-function Newsletter() {
-  return (
-    <div className="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>
-  )
-}
-
 interface Meeting {
   title: string
   date: string
@@ -100,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">
@@ -136,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
@@ -183,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">
@@ -192,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,
@@ -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": "5:00pm",
+        "endTime": "7: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;
+}