Add homepage links for membership and rental

.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"]

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/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>