codey.lol/src/components/Footer.astro

---
import { metaData, ENVIRONMENT, WHITELABELS, MAJOR_VERSION, RELEASE_FLAG } from "../config";
import RandomMsg from "../components/RandomMsg";
import { buildTime, buildNumber } from '../utils/buildTime.js';

const YEAR = new Date().getFullYear();

const hostHeader = Astro.request?.headers?.get('host') || '';
const host = hostHeader.split(':')[0];
import { getSubsiteByHost } from '../utils/subsites.js';
import { getSubsiteByPath } from '../utils/subsites.js';
const detected = getSubsiteByHost(host) ?? getSubsiteByPath(Astro.url.pathname) ?? null;
const isReq = detected?.short === 'req';
const whitelabel = WHITELABELS[host] ?? (isReq ? WHITELABELS[detected.host] : null);

const versionDisplay = `v${MAJOR_VERSION}${RELEASE_FLAG ? `-${RELEASE_FLAG}` : ''}`;
const envBadge = ENVIRONMENT === 'Dev' ? 'DEV' : null;
---

<div class:list={['footer', whitelabel && 'footer--subsite']}>
  {!whitelabel && <RandomMsg client:only="react" />}
  <div class="footer-version" data-build-time={buildTime} title={`Built: ${buildTime}`}>
    <span class="version-pill">
      {envBadge && <span class="env-dot" title="Development build"></span>}
      {!envBadge && <span class="version-dot"></span>}
      {versionDisplay}:{buildNumber}
    </span>
  </div>
</div>

<script>
  function updateBuildTooltip() {
    const el = document.querySelector('.footer-version[data-build-time]');
    if (el) {
      const iso = el.getAttribute('data-build-time');
      if (iso) {
        const local = new Date(iso).toLocaleString(undefined, {
          dateStyle: 'medium',
          timeStyle: 'short',
        });
        el.setAttribute('title', `Built: ${local}`);
      }
    }
  }
  updateBuildTooltip();
  document.addEventListener('astro:page-load', updateBuildTooltip);
</script>

<style is:global>
  .footer-version {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
  }

  .footer--subsite .footer-version {
    margin-top: 0;
  }

  .version-pill {
    font-family: 'SF Mono', 'Fira Code', 'Geist Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 500;
    color: #3f3f46;
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(244,244,245,0.8));
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    cursor: help;
    letter-spacing: 0.04em;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.8);
  }

  .version-pill:hover {
    background: linear-gradient(135deg, rgba(255,255,255,1), rgba(250,250,250,0.95));
    color: #18181b;
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9);
  }

  [data-theme="dark"] .version-pill {
    color: #71717a;
    background: #1a1a1c;
    border-color: #2a2a2e;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  }

  [data-theme="dark"] .version-pill:hover {
    background: #252528;
    color: #a1a1aa;
    border-color: #3a3a3e;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  }

  .version-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.4);
  }

  .env-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.5);
  }

  @media screen and (max-width: 480px) {
    article {
      padding-top: 2rem;
      padding-bottom: 4rem;
    }
  }
</style>