Move listmonk form into separate module and add captcha

src/app/club/mailinglist.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+export default function MailingListSignupForm(): React.JSX.Element {
+    return (<form method="post" action="https://lists.orcas.community/subscription/form" className="listmonk-form">
+        <div className="flex flex-col gap-y-2">
+            <h3 className="text-lg font-semibold text-gray-900">Join our mailing list</h3>
+            <input type="hidden" name="nonce" />
+            <div>
+                <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" />
+            <div className="h-captcha flex justify-center" data-sitekey="77aeddb4-cfda-4a3e-b262-0288a4e4664a"></div>
+            <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
+            <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>);
+}

src/app/club/page.tsx

@@ -52,6 +52,13 @@ export default function Club() {
     { ssr: false }
   );
 
+  const MailingListSignupForm = dynamic(
+    () => {
+      return import("./mailinglist");
+    },
+    { 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">
@@ -94,37 +101,7 @@ export default function Club() {
         </div>
         <div className="lg:pl-20">
           <ul role="list">
-            <form method="post" action="https://lists.orcas.community/subscription/form" className="listmonk-form">
+            <MailingListSignupForm />
-              <div className="flex flex-col gap-y-2">
-                <h3 className="text-lg font-semibold text-gray-900">Join our mailing list</h3>
-                <input type="hidden" name="nonce" />
-                <div>
-                  <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}

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!
+