feat: add icon, meta, and og for seo (#35)

* feat: add icon, meta, and og for seo

* fix: base url with metadataBase, update actions

* fix: try using top-level env

* fix: try fail fast approach

* fix: try build vs runtime variables

* fix: try top-level env for base url

* fix: if this works I'm gonna cry

* fix: send help

* fix: review FLY_APP not used by default

* fix: use safer commit sha

* fix: ownership... I guess I'll do it myself

.env.sample

@@ -1,3 +1,5 @@
+BASE_URL=http://localhost:3000
+
 # redis
 REDIS_PASSWORD=
 REDIS_URL=redis://default:$REDIS_PASSWORD@localhost:16379

.github/workflows/fly-deploy.yml

@@ -1,20 +1,26 @@
-# See https://fly.io/docs/app-guides/continuous-deployment-with-github-actions/
+# see: https://fly.io/docs/app-guides/continuous-deployment-with-github-actions/
 
 name: Fly Deploy
 on:
   push:
     branches:
       - main
+
+env:
+  BASE_URL: https://mmmines.fly.dev
+
 jobs:
   deploy:
     runs-on: ubuntu-latest
     environment:
       name: production
-      url: https://mmmines.fly.dev
-    concurrency: deploy-group # optional: ensure only one action runs at a time
+      url: ${{ env.BASE_URL }}
+    # ensure only one deployment runs at a time
+    concurrency: deploy-group
+
     steps:
       - uses: actions/checkout@v4
       - uses: superfly/flyctl-actions/setup-flyctl@master
-      - run: flyctl deploy --remote-only
+      - run: flyctl deploy --remote-only --build-secret BASE_URL=${{ env.BASE_URL }}
         env:
           FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

.github/workflows/fly-review.yml

@@ -1,38 +1,34 @@
-name: Deploy Review App
+# see:
+# * https://fly.io/docs/blueprints/review-apps-guide
+# * https://github.com/superfly/fly-pr-review-apps/blob/1.2.1/README.md
+
+name: Fly Review
 on:
-  # Run this workflow on every PR event. Existing review apps will be updated when the PR is updated.
   pull_request:
     types: [opened, reopened, synchronize, closed]
 
 env:
   FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
-  # Set these to your Fly.io organization and preferred region.
-  FLY_REGION: ord
+  FLY_APP: pr-${{ github.event.number }}-mmmines
   FLY_ORG: mmmines
+  FLY_REGION: ord
 
 jobs:
   review:
     runs-on: ubuntu-latest
     outputs:
       url: ${{ steps.deploy.outputs.url }}
-    # Only run one deployment at a time per PR.
+    # ensure only one deployment runs at a time
     concurrency:
       group: pr-${{ github.event.number }}
-
-    # Deploying apps with this "review" environment allows the URL for the app to be displayed in the PR UI.
-    # Feel free to change the name of this environment.
     environment:
       name: review
-      # The script in the `deploy` sets the URL output for each review app.
       url: ${{ steps.deploy.outputs.url }}
 
     steps:
       - uses: actions/checkout@v4
-
       - id: deploy
-        uses: superfly/fly-pr-review-apps@1.2.1
+        uses: lewxdev/fly-pr-review-apps@main
         with:
-          secrets: |
-            NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=${{ secrets.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
-            CLERK_SECRET_KEY=${{ secrets.CLERK_SECRET_KEY }}
-            REDIS_URL=${{ secrets.REDIS_URL }}
+          build_secrets: BASE_URL=https://${{ env.FLY_APP }}.fly.dev
+          secrets: REDIS_URL=${{ secrets.REDIS_URL }}

Dockerfile

@@ -12,7 +12,6 @@ WORKDIR /app
 # Set production environment
 ENV NODE_ENV="production"
 
-
 # Throw-away build stage to reduce size of final image
 FROM base as build
 
@@ -28,12 +27,13 @@ RUN npm ci --include=dev
 COPY --link . .
 
 # Build application
-RUN npm run build
+RUN --mount=type=secret,id=BASE_URL \
+    BASE_URL="$(cat /run/secrets/BASE_URL)" \
+    npm run build
 
 # Remove development dependencies
 RUN npm prune --omit=dev
 
-
 # Final stage for app image
 FROM base
 

app/components/header.tsx

@@ -12,7 +12,7 @@ export function Header() {
     <header className="w-[min(var(--field-size),100%)] px-4 py-1 flex justify-between">
       <div className="flex flex-row gap-6">
         <h1 className="text-4xl font-extrabold uppercase italic pr-4">
-          mmmines
+          mmmines!
         </h1>
         <div className="flex items-center gap-2">
           <span>{clientsCount ?? "⋯"}</span>

app/layout.tsx

@@ -5,8 +5,27 @@ import { Header } from "@/components/header";
 import { SocketProvider } from "@/components/socket-provider";
 import "@/globals.css";
 
+const title = "mmmines!";
+const description = "an endless, massive multiplayer minesweeper game";
+
 export const metadata: Metadata = {
-  title: "mmmines",
+  title,
+  description,
+  icons: {
+    icon: [
+      { url: "/icon-light.svg" },
+      { url: "/icon-dark.svg", media: "(prefers-color-scheme: dark)" },
+    ],
+  },
+  metadataBase: new URL(process.env["BASE_URL"]!),
+  openGraph: {
+    title,
+    description,
+    siteName: title,
+    url: "https://mmmines.fly.dev",
+    locale: "en_US",
+    type: "website",
+  },
 };
 
 export default function RootLayout(props: Readonly<React.PropsWithChildren>) {