Add homepage links for membership and rental

.dockerignore

@@ -2,6 +2,7 @@
 node_modules
 
 # Ignore common folders that we do not need
+.git
 .next
 .github
 .vscode

.gitea/workflows/image-build.yaml

@@ -24,12 +24,6 @@ jobs:
           username: tgrosinger
           password: ${{ secrets.CONTAINER_REGISTRY_ACCESS_TOKEN }}
 
-      - name: Create env file for Nextjs verification step
-        run: |
-          echo "POSTMARK_SERVER_TOKEN=dummy-token" > /workspace/tgrosinger/west-sound-hall/.env
-          echo "NEXT_PUBLIC_SITE_URL=http://localhost:3000" >> /workspace/tgrosinger/west-sound-hall/.env
-          cat /workspace/tgrosinger/west-sound-hall/.env
-
       - name: Build and push
         uses: docker/build-push-action@v4
         with:

Dockerfile

@@ -1,6 +1,7 @@
 FROM docker.io/library/node:18-alpine AS build-env
 
-# Disable telemetry
+ENV NODE_ENV production
+ENV PORT 3000
 ENV NEXT_TELEMETRY_DISABLED 1
 
 WORKDIR /app
@@ -15,23 +16,5 @@ RUN npm install
 # Copy files. Use dockerignore to avoid copying node_modules
 COPY . .
 
-# Build
-RUN npm run build
-
-# Running the app
-FROM gcr.io/distroless/nodejs:18 AS runner
-WORKDIR /app
-
-# Mark as prod, disable telemetry, set port
-ENV NODE_ENV production
-ENV PORT 3000
-ENV NEXT_TELEMETRY_DISABLED 1
-
-# Copy from build
-COPY --from=build-env /app/next.config.mjs ./
-COPY --from=build-env /app/public ./public
-COPY --from=build-env /app/.next ./.next
-COPY --from=build-env /app/node_modules ./node_modules
-
 # Run app command
-CMD ["./node_modules/next/dist/bin/next", "start"]
+CMD ["/bin/ash", "/app/entrypoint.sh"]

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

src/app/club/page.tsx

@@ -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.',
 }
@@ -101,6 +101,9 @@ export default function Club() {
           </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/page.tsx

@@ -1,7 +1,7 @@
-import Image, { type ImageProps } from 'next/image'
+import Image from 'next/image'
 import clsx from 'clsx'
 
-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'
@@ -13,6 +13,25 @@ import kitchenImage from '@/images/photos/kitchen.jpg'
 import { type BlogPostWithSlug, getAllBlogPosts } from '@/lib/articles'
 import { formatDate } from '@/lib/formatDate'
 
+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 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"
+
+
+    >
+      {children}
+    </Link>
+  )
+}
+
 function Article({ article }: { article: BlogPostWithSlug }) {
   return (
     <Card as="article">
@@ -30,30 +49,12 @@ 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 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>
-    </form>
+    </div>
   )
 }
 

src/app/rental/page.tsx

@@ -32,9 +32,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() {

src/components/Header.tsx

@@ -102,6 +102,7 @@ function MobileNavigation(
             </div>
             <nav className="mt-6">
               <ul className="-my-2 divide-y divide-zinc-100 text-base text-zinc-800 dark:divide-zinc-100/5 dark:text-zinc-300">
+                <MobileNavItem href="/">Home</MobileNavItem>
                 <MobileNavItem href="/hall-history">Hall History</MobileNavItem>
                 <MobileNavItem href="/blog">Blog</MobileNavItem>
                 <MobileNavItem href="/rental">Rental</MobileNavItem>
@@ -148,6 +149,7 @@ function DesktopNavigation(props: React.ComponentPropsWithoutRef<'nav'>) {
   return (
     <nav {...props}>
       <ul className="flex rounded-full bg-white/90 px-3 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10">
+        <NavItem href="/">Home</NavItem>
         <NavItem href="/hall-history">History</NavItem>
         <NavItem href="/blog">Blog</NavItem>
         <NavItem href="/rental">Rental</NavItem>