Testing actions

.dockerignore

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

.gitea/workflows/container-build.yaml

@@ -0,0 +1,18 @@
+name: Build Production Container
+run-name: $Env:GITHUB_REF_TYPE Production Build
+on:
+  push:
+    tags:
+      - *.*.*
+
+jobs:
+  Explore-Gitea-Actions:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v3
+      - name: Deploy
+        run: |
+          echo "${{ secrets.CONTAINER_REGISTRY_ACCESS_TOKEN }}" | docker login git.grosinger.net --password-stdin
+          docker build -t git.grosinger.net/west-sound-hall:$Env:GITHUB_REF_TYPE .
+          docker push git.grosinger.net/west-sound-hall:$Env:GITHUB_REF_TYPE

.gitea/workflows/image-build.yaml

@@ -1,32 +0,0 @@
-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

@@ -1,7 +1,6 @@
 FROM docker.io/library/node:18-alpine AS build-env
 
-ENV NODE_ENV production
-ENV PORT 3000
+# Disable telemetry
 ENV NEXT_TELEMETRY_DISABLED 1
 
 WORKDIR /app
@@ -16,5 +15,23 @@ 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 ["/bin/ash", "/app/entrypoint.sh"]
+CMD ["./node_modules/next/dist/bin/next", "start"]

entrypoint.sh

@@ -1,7 +0,0 @@
-#!/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: 'West Sound Community Club',
+  title: 'History',
   description:
     'The West Sound Community Club on Orcas Island.',
 }
@@ -101,9 +101,6 @@ 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 from 'next/image'
+import Image, { type ImageProps } from 'next/image'
 import clsx from 'clsx'
 
-import Link from 'next/link'
+import { Button } from '@/components/Button'
 import { Card } from '@/components/Card'
 import { Container } from '@/components/Container'
 import { CalendarDaysIcon, EnvelopeIcon } from '@heroicons/react/24/solid'
@@ -13,25 +13,6 @@ 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">
@@ -49,12 +30,30 @@ 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>
+    <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>
-    </div>
+    </form>
   )
 }
 

src/app/rental/page.tsx

@@ -32,9 +32,9 @@ function SocialLink({
 }
 
 export const metadata: Metadata = {
-  title: 'West Sound Hall Rental',
+  title: 'History',
   description:
-    'Rental information for the West Sound Hall.',
+    'The history of the West Sound Community Hall on Orcas Island.',
 }
 
 export default function Rental() {

src/components/Header.tsx

@@ -102,7 +102,6 @@ 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>
@@ -149,7 +148,6 @@ 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>