footer: unify the receipt + identity into one terminal session panel; fix HEAD sha in container builds (GIT_SHA build-arg)

Dockerfile

@@ -13,7 +13,10 @@ WORKDIR /app
 COPY package.json package-lock.json ./
 RUN npm ci
 
-# Build the static site.
+# Build the static site. The git sha arrives as a build-arg (.dockerignore excludes .git,
+# so an in-container `git rev-parse` can never resolve — the footer receipt read "HEAD unknown").
+ARG GIT_SHA
+ENV GIT_SHA=${GIT_SHA}
 COPY . .
 RUN npm run build
 

scripts/build-image.sh

@@ -31,7 +31,7 @@ retry() {
 }
 
 echo ">> building ${REF}:${TAG}"
-retry buildah build --retry 3 --retry-delay 5s --layers -t "${REF}:${TAG}" -t "${REF}:latest" .
+retry buildah build --retry 3 --retry-delay 5s --layers --build-arg GIT_SHA="${TAG}" -t "${REF}:${TAG}" -t "${REF}:latest" .
 
 if [[ "${1:-}" == "push" ]]; then
   echo ">> pushing ${REF}:${TAG}"

src/components/Footer.astro

@@ -7,156 +7,260 @@ const linkedinHref = socials.find((s) => s.label === "LinkedIn")?.href;
 const emailHref = socials.find((s) => s.label === "Email")?.href;
 ---
 
+<!-- One terminal session = the whole footer. Every value baked at build time, zero runtime calls. -->
 <footer class="footer">
-  <!-- the GitOps receipt — every value baked at build time, zero runtime calls -->
   <div class="container">
-    <p class="footer__receipt mono" data-reveal>
+    <div class="term mono" data-reveal>
-      <span class="footer__receipt-label">RECEIPT</span>
+      <div class="term__bar">
-      <span class="footer__rdot">·</span> HEAD <span class="footer__rval">{buildInfo.sha}</span>
+        <span class="term__chrome" aria-hidden="true">
-      <span class="footer__rdot">·</span> built <span class="footer__rval">{buildInfo.builtAt}</span>
+          <span class="term__led"></span><span class="term__led"></span><span class="term__led term__led--lit"></span>
-      <span class="footer__rdot">·</span> reconciled by <span class="footer__rval">ArgoCD</span>
+        </span>
-      <span class="footer__rdot">·</span> <span class="footer__rok">✓ Synced · Healthy</span>
+        <span class="term__title">jonny@bztmon:~ · session receipt</span>
-    </p>
+        <span class="term__health"><span class="term__ok">✓</span> Synced · Healthy</span>
-  </div>
+      </div>
-  <div class="container footer__inner">
+
-    <div>
+      <div class="term__body">
-      <p class="mono footer__name">{site.name}</p>
+        <p class="term__line"><span class="term__prompt">$</span> whoami</p>
-      <p class="footer__meta">
+        <p class="term__out">
-        {site.role} · Served from a homelab Kubernetes cluster over an encrypted tunnel.
+          <span class="term__name">{site.name}</span>
-      </p>
+          <span class="term__sep">—</span> {site.role}
-      <p class="footer__contact">
+        </p>
-        For a low-ms reply, ping me on{" "}
+
-        <a href={linkedinHref} rel="noopener noreferrer" target="_blank">LinkedIn</a>{" "}
+        <p class="term__line"><span class="term__prompt">$</span> traceroute www.bztmon.com</p>
-        or <a href={emailHref}>email</a> — everything else is best-effort delivery.
+        <p class="term__out">
-      </p>
+          served from a homelab Kubernetes cluster, over an encrypted tunnel
+        </p>
+
+        <p class="term__line"><span class="term__prompt">$</span> git log -1 --format=receipt</p>
+        <p class="term__out">
+          HEAD <span class="term__val">{buildInfo.sha}</span>
+          <span class="term__sep">·</span> built <span class="term__val">{buildInfo.builtAt}</span>
+          <span class="term__sep">·</span> reconciled by <span class="term__val">ArgoCD</span>
+        </p>
+
+        <p class="term__line"><span class="term__prompt">$</span> contact --priority low-ms</p>
+        <p class="term__out">
+          ping me on{" "}
+          <a href={linkedinHref} rel="noopener noreferrer" target="_blank">LinkedIn</a>{" "}
+          or <a href={emailHref}>email</a> — everything else is best-effort delivery.
+        </p>
+
+        <p class="term__line" aria-hidden="true">
+          <span class="term__prompt">$</span> <span class="term__cursor"></span>
+        </p>
+      </div>
+
+      <div class="term__statusbar">
+        <span>© {year} {site.name}</span>
+        <span class="term__sdot" aria-hidden="true">·</span>
+        <a
+          href={site.license.url}
+          rel="license noopener noreferrer"
+          target="_blank"
+          title={site.license.label}
+        >
+          {site.license.name}
+        </a>
+        <span class="term__sdot" aria-hidden="true">·</span>
+        <span>built with Astro, shipped via GitOps</span>
+        <span class="term__spring" aria-hidden="true"></span>
+        <span class="term__socials">
+          {
+            socials.map((s) => (
+              <a
+                href={s.href}
+                rel={s.external ? "noopener noreferrer" : undefined}
+                aria-label={s.label}
+                title={s.label}
+              >
+                <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+                  <path d={s.icon} fill="currentColor" />
+                </svg>
+              </a>
+            ))
+          }
+        </span>
+      </div>
     </div>
-    <div class="footer__links">
-      {
-        socials.map((s) => (
-          <a
-            href={s.href}
-            rel={s.external ? "noopener noreferrer" : undefined}
-            aria-label={s.label}
-            title={s.label}
-          >
-            <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
-              <path d={s.icon} fill="currentColor" />
-            </svg>
-          </a>
-        ))
-      }
-    </div>
-  </div>
-  <div class="container footer__base">
-    <span class="mono">© {year} {site.name}</span>
-    <span class="mono footer__dot">·</span>
-    <span class="mono">
-      Content licensed under{" "}
-      <a
-        href={site.license.url}
-        rel="license noopener noreferrer"
-        target="_blank"
-        title={site.license.label}
-      >
-        {site.license.name}
-      </a>
-    </span>
-    <span class="mono footer__dot">·</span>
-    <span class="mono">built with Astro, shipped via GitOps</span>
   </div>
 </footer>
 
 <style>
   .footer {
-    border-top: 1px solid var(--border);
     padding-block: var(--space-7) var(--space-6);
     margin-top: var(--space-8);
-    color: var(--text-dim);
   }
-  .footer__receipt {
+
-    display: flex;
+  /* ── the terminal panel ─────────────────────────────────────────────── */
-    flex-wrap: wrap;
+  .term {
-    align-items: center;
+    position: relative;
-    gap: 0.5rem;
-    font-size: 11px;
-    letter-spacing: 0.04em;
-    color: var(--text-faint);
     border: 1px solid var(--border-accent);
-    border-radius: var(--radius-btn);
+    border-radius: var(--radius);
     background: var(--panel);
     backdrop-filter: var(--panel-blur);
     -webkit-backdrop-filter: var(--panel-blur);
-    padding: 10px 14px;
+    overflow: hidden;
-    margin-bottom: var(--space-6);
+    font-size: 12.5px;
-    width: fit-content;
+    letter-spacing: 0.03em;
-    max-width: 100%;
+    box-shadow: 0 0 24px -14px var(--accent-glow);
   }
-  .footer__receipt-label {
+  /* faint CRT scanlines across the whole session (static — not motion) */
-    color: var(--accent);
+  .term::after {
-    letter-spacing: 0.14em;
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: repeating-linear-gradient(
+      to bottom,
+      transparent 0 2px,
+      color-mix(in srgb, var(--text) 3%, transparent) 2px 3px
+    );
   }
-  .footer__rdot {
+
-    opacity: 0.5;
+  /* ── title bar ──────────────────────────────────────────────────────── */
+  .term__bar {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 8px 14px;
+    border-bottom: 1px solid var(--border);
+    color: var(--text-faint);
+    font-size: 11px;
   }
-  .footer__rval {
+  .term__chrome {
+    display: inline-flex;
+    gap: 5px;
+  }
+  .term__led {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: var(--border-strong);
+  }
+  .term__led--lit {
+    background: var(--accent);
+    box-shadow: 0 0 6px var(--accent-glow);
+  }
+  .term__title {
+    letter-spacing: 0.08em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .term__health {
+    margin-left: auto;
+    white-space: nowrap;
     color: var(--text-dim);
   }
-  .footer__rok {
+  .term__ok {
     color: var(--accent);
   }
-  .footer__inner {
+
-    display: flex;
+  /* ── session body ───────────────────────────────────────────────────── */
-    flex-wrap: wrap;
+  .term__body {
-    gap: var(--space-5);
+    padding: 14px 16px 10px;
-    justify-content: space-between;
+    display: grid;
-    align-items: center;
+    gap: 2px;
   }
-  .footer__name {
+  .term__line {
+    color: var(--text-dim);
+  }
+  .term__line + .term__out {
+    margin-bottom: 0.55rem;
+  }
+  .term__prompt {
+    color: var(--accent);
+    margin-right: 0.45rem;
+  }
+  .term__out {
+    color: var(--text-faint);
+    padding-left: 1.05rem;
+    max-width: 72ch;
+  }
+  .term__name {
     color: var(--text);
     font-weight: 600;
   }
-  .footer__meta {
+  .term__sep {
-    font-size: var(--step--1);
+    opacity: 0.5;
-    color: var(--text-faint);
+    margin-inline: 0.15rem;
-    margin-top: 0.25rem;
   }
-  .footer__contact {
+  .term__val {
-    font-size: var(--step--1);
+    color: var(--accent-2);
-    color: var(--text-faint);
-    margin-top: 0.4rem;
   }
-  .footer__contact a {
+  .term__out a {
     color: var(--text-dim);
     text-decoration: underline;
     text-underline-offset: 2px;
   }
-  .footer__contact a:hover {
+  .term__out a:hover {
     color: var(--accent);
   }
-  .footer__links {
+
-    display: flex;
+  /* blinking block cursor on the empty prompt */
-    gap: var(--space-4);
+  .term__cursor {
+    display: inline-block;
+    width: 0.62em;
+    height: 1.05em;
+    vertical-align: text-bottom;
+    background: var(--accent);
+    animation: term-blink 1.1s steps(2, start) infinite;
   }
-  .footer__links a {
+  @keyframes term-blink {
-    color: var(--text-dim);
+    to {
+      visibility: hidden;
+    }
   }
-  .footer__links a:hover {
+  @media (prefers-reduced-motion: reduce) {
-    color: var(--accent);
+    .term__cursor {
+      animation: none;
+    }
   }
-  .footer__base {
+
-    margin-top: var(--space-5);
+  /* ── status bar (tmux-style) ────────────────────────────────────────── */
-    font-size: 0.72rem;
+  .term__statusbar {
-    color: var(--text-faint);
     display: flex;
     flex-wrap: wrap;
+    align-items: center;
     gap: 0.5rem;
+    padding: 8px 14px;
+    border-top: 1px solid var(--border);
+    background: color-mix(in srgb, var(--panel) 60%, transparent);
+    color: var(--text-faint);
+    font-size: 0.72rem;
   }
-  .footer__base a {
+  .term__sdot {
+    opacity: 0.5;
+  }
+  .term__statusbar a {
     color: var(--text-dim);
     text-decoration: underline;
     text-underline-offset: 2px;
   }
-  .footer__base a:hover {
+  .term__statusbar a:hover {
     color: var(--accent);
   }
+  .term__spring {
+    flex: 1;
+  }
+  .term__socials {
+    display: inline-flex;
+    gap: var(--space-3);
+  }
+  .term__socials a {
+    color: var(--text-dim);
+    text-decoration: none;
+  }
+  .term__socials a:hover {
+    color: var(--accent);
+  }
+
+  @media (max-width: 560px) {
+    .term__health {
+      display: none;
+    }
+    .term__spring {
+      flex-basis: 100%;
+    }
+  }
 </style>

src/lib/build-info.ts

@@ -11,8 +11,10 @@ function git(cmd: string): string {
 }
 
 export const buildInfo = {
-  /** Short commit sha of the source HEAD this build was cut from. */
+  /** Short commit sha of the source HEAD this build was cut from.
-  sha: git("git rev-parse --short HEAD"),
+   *  Container builds get it via the GIT_SHA build-arg (.dockerignore excludes .git);
+   *  local builds fall back to asking git directly. */
+  sha: process.env.GIT_SHA?.trim() || git("git rev-parse --short HEAD"),
   /** ISO date (UTC, minute precision) the build ran. */
   builtAt: new Date().toISOString().slice(0, 16).replace("T", " ") + "Z",
 } as const;