perf(website): prerender and modernize site runtime

Makefile

@@ -45,12 +45,12 @@ build-and-publish: build publish ## Build distributions, then publish them
 
 docs-test: ## Build the website/docs bundle
 	@echo "==> Building website/"
-	BUB_ASTRO_IMAGE_MODE=build pnpm --dir website build
+	pnpm --dir website build
 
 docs: ## Start the website/docs development server
 	@echo "==> Starting website dev server"
-	BUB_ASTRO_IMAGE_MODE=dev pnpm --dir website dev --host
+	pnpm --dir website dev --host
 
 docs-preview: ## Preview the production website/docs build
 	@echo "==> Starting website preview server"
-	BUB_ASTRO_IMAGE_MODE=build pnpm --dir website preview --ip 0.0.0.0
+	pnpm --dir website preview --ip 0.0.0.0

website/astro.config.mjs

@@ -1,39 +1,12 @@
 // @ts-check
 import { fileURLToPath } from 'node:url';
-import { defineConfig, envField } from 'astro/config';
+import { defineConfig } from 'astro/config';
 import tailwindcss from '@tailwindcss/vite';
 import starlight from '@astrojs/starlight';
-import cloudflare from '@astrojs/cloudflare';
 import mermaid from 'astro-mermaid';
 
-const astro_image_mode =
-  process.env.BUB_ASTRO_IMAGE_MODE ?? (process.argv.includes('dev') ? 'dev' : 'build');
-
-/** @type {import('@astrojs/cloudflare').Options['imageService']} */
-const image_service =
-  astro_image_mode === 'dev' ? 'cloudflare' : { build: 'compile', runtime: 'passthrough' };
-
 export default defineConfig({
-  // SSG by default; landing pages opt-in to SSR via `export const prerender = false`.
-  adapter: cloudflare({
-    // Prefer an explicit mode from the calling command so local docs workflows
-    // stay deterministic. Fall back to the Astro command name for direct
-    // `pnpm dev` / `pnpm build` usage inside `website/`.
-    imageService: image_service,
-    prerenderEnvironment: 'node',
-  }),
   site: process.env.SITE_URL ?? 'https://bub.build',
-  env: {
-    schema: {
-      SITE_URL: envField.string({
-        context: 'client',
-        access: 'public',
-        default: 'https://bub.build',
-        optional: true,
-        url: true,
-      }),
-    },
-  },
   vite: {
     plugins: [tailwindcss()],
     resolve: {

website/package.json

@@ -8,15 +8,15 @@
   },
   "scripts": {
     "generate:github-snapshot": "node ./scripts/generate-github-snapshot.mjs",
-    "predev": "pnpm run generate:github-snapshot",
+    "predev": "node ./scripts/generate-github-snapshot.mjs",
     "dev": "astro dev",
-    "prebuild": "pnpm run generate:github-snapshot",
+    "prebuild": "node ./scripts/generate-github-snapshot.mjs",
     "build": "astro build",
+    "precheck": "node ./scripts/generate-github-snapshot.mjs",
     "check": "astro check",
     "preview": "wrangler dev"
   },
   "dependencies": {
-    "@astrojs/cloudflare": "^14.2.1",
     "@astrojs/starlight": "^0.41.7",
     "@astrojs/starlight-tailwind": "^5.0.0",
     "@fontsource-variable/jetbrains-mono": "^5.3.0",

website/src/components/Contributors.astro

@@ -1,25 +1,24 @@
 ---
+import Avatar from '@/components/ui/Avatar.astro';
 import Icon from '@/components/ui/Icon.astro';
 import { CONTRIBUTORS_URL } from '@/lib/github';
 import type { GitHubContributor } from '@/lib/github';
 
 interface Props {
   contributors?: GitHubContributor[];
-  label?: string;
+  label: string;
+  viewAllLabel: string;
 }
 
-const {
-  contributors = [],
-  label = 'Developed by contributors worldwide',
-} = Astro.props;
+const { contributors = [], label, viewAllLabel }: Props = Astro.props;
 
 const hasContributors = contributors.length > 0;
 ---
 
 {hasContributors && (
   <div class="flex flex-col gap-2.5">
     <div class="flex -space-x-3">
-      {contributors.map((c, i) => (
+      {contributors.map((c) => (
         <div
           class:list={[
             'group relative size-8 md:size-9',
@@ -32,18 +31,15 @@ const hasContributors = contributors.length > 0;
             class="absolute inset-0 flex items-center justify-center overflow-hidden rounded-full border-2 border-background transition-transform duration-200 ease-out group-hover:-translate-y-2 group-hover:scale-110 group-hover:z-10"
             title={c.login}
           >
-            <img
+            <Avatar
               src={c.avatar_url}
               alt={c.login}
-              width="40"
-              height="40"
-              loading="lazy"
-              class="avatar-img h-full w-full object-cover"
-              onerror="this.hidden=true;this.parentElement.querySelector('.avatar-fallback').hidden=false"
+              size={40}
+              class="absolute inset-0 flex items-center justify-center"
+              fallbackClass="absolute inset-0 flex items-center justify-center bg-secondary text-muted-foreground"
+              imageClass="relative h-full w-full object-cover"
+              fallbackIconSize={18}
             />
-            <div class="avatar-fallback flex h-full w-full items-center justify-center bg-secondary text-muted-foreground" hidden>
-              <Icon name="circleUserRound" size={18} aria-hidden="true" />
-            </div>
           </a>
         </div>
       ))}
@@ -52,8 +48,8 @@ const hasContributors = contributors.length > 0;
         target="_blank"
         rel="noreferrer"
         class="flex size-8 md:size-9 items-center justify-center rounded-full border-2 border-background bg-secondary text-muted-foreground transition-transform duration-200 ease-out hover:-translate-y-1 hover:scale-105 hover:text-foreground"
-        title="View all contributors on GitHub"
-        aria-label="View all contributors on GitHub"
+        title={viewAllLabel}
+        aria-label={viewAllLabel}
       >
         <Icon name="ellipsis" size={14} aria-hidden="true" />
       </a>

website/src/components/Features.astro

@@ -2,15 +2,18 @@
 import FeatureCard from '@/components/ui/FeatureCard.astro';
 import SectionHeading from '@/components/ui/SectionHeading.astro';
 import SiteLogo from '@/components/ui/SiteLogo.astro';
+import type { FeaturesData } from '@/data/landing-page';
 
-const { eyebrow, heading, subheading, features = [] } = Astro.props;
+interface Props extends FeaturesData {}
+
+const { eyebrow, heading, subheading, features }: Props = Astro.props;
 
 // Layout: [0]=2cols, [1], [2], CENTER LOGO, [3], [4], [5]=2cols → 3×3 grid
 ---
 
-<section class="relative py-20 md:py-28" data-reveal aria-label="Features">
+<section class="relative py-20 md:py-28" data-reveal aria-labelledby="features-heading">
   <div class="mx-auto max-w-6xl px-5 md:px-8">
-    <SectionHeading eyebrow={eyebrow} heading={heading} subheading={subheading} />
+    <SectionHeading eyebrow={eyebrow} heading={heading} subheading={subheading} headingId="features-heading" />
 
     <div class="grid gap-px border border-border bg-border shadow-[var(--site-shadow-elevated)] sm:grid-cols-2 lg:grid-cols-3">
       {/* Row 1: feature[0] col-span-2 + feature[1] */}

website/src/components/Footer.astro

@@ -3,21 +3,19 @@ import Icon from '@/components/ui/Icon.astro';
 import SiteLogo from '@/components/ui/SiteLogo.astro';
 
 interface Props {
-  copyright?: string;
-  githubLabel?: string;
+  copyright: string;
+  githubLabel: string;
+  homeHref: string;
 }
 
-const {
-  githubLabel = 'GitHub',
-  copyright = `© ${new Date().getUTCFullYear()} Bub Contributors`,
-}: Props = Astro.props;
+const { githubLabel, copyright, homeHref }: Props = Astro.props;
 ---
 
-<footer class="py-8" role="contentinfo">
+<footer class="py-8">
   <div class="mx-auto max-w-6xl px-5 md:px-8">
     <div class="flex flex-col items-center gap-6 text-center md:flex-row md:justify-between md:gap-0 md:text-left">
-      <a class="flex items-center gap-2 no-underline" href="/">
-        <SiteLogo alt="Bub" width={24} height={24} class="h-6 w-6" />
+      <a class="flex items-center gap-2 no-underline" href={homeHref}>
+        <SiteLogo alt="" width={24} height={24} class="h-6 w-6" loading="lazy" />
         <span class="text-sm font-semibold text-foreground">Bub</span>
       </a>
 

website/src/components/Hero.astro

@@ -2,20 +2,24 @@
 import Contributors from '@/components/Contributors.astro';
 import Icon from '@/components/ui/Icon.astro';
 import LinkButton from '@/components/ui/LinkButton.astro';
+import type { HeroData } from '@/data/landing-page';
 import type { GitHubContributor } from '@/lib/github';
 import { Code } from 'astro:components';
 
-interface Props {
-  badge?: string;
-  title?: string;
-  description?: string;
-  primaryHref: string;
-  primaryLabel?: string;
-  contributorsLabel?: string;
+interface Props extends HeroData {
   contributors?: GitHubContributor[];
 }
 
-const { badge, title, description, primaryHref, primaryLabel, contributorsLabel, contributors = [] }: Props = Astro.props;
+const {
+  badge,
+  title,
+  description,
+  primaryHref,
+  primaryLabel,
+  contributorsLabel,
+  contributorsViewAllLabel,
+  contributors = [],
+}: Props = Astro.props;
 
 const hasContributors = contributors.length > 0;
 
@@ -84,7 +88,23 @@ const heroCodeScopes = {
   ],
 };
 
-function createHeroCodeTheme(name, type, palette) {
+type HeroCodePalette = {
+  background: string;
+  foreground: string;
+  keyword: string;
+  decorator: string;
+  functionName: string;
+  callable: string;
+  parameter: string;
+  string: string;
+  punctuation: string;
+};
+
+function createHeroCodeTheme(
+  name: string,
+  type: 'light' | 'dark',
+  palette: HeroCodePalette,
+) {
   return {
     name,
     type,
@@ -171,7 +191,7 @@ const heroCodeThemes = {
 };
 ---
 
-<section class="pb-20 pt-14 md:pb-28 md:pt-20" aria-label="Hero">
+<section class="pb-20 pt-14 md:pb-28 md:pt-20" aria-labelledby="hero-heading">
   <div class="mx-auto max-w-6xl px-5 md:px-8">
     <div class="grid items-center gap-12 lg:grid-cols-2 lg:gap-14">
       <!-- Left: text -->
@@ -184,7 +204,7 @@ const heroCodeThemes = {
 
         <!-- Slogan -->
         <div class="mt-8 flex items-start gap-4">
-          <h1 class="text-[clamp(2.2rem,5.5vw,3.8rem)] font-bold leading-[1.1] tracking-tight text-foreground">
+          <h1 id="hero-heading" class="text-[clamp(2.2rem,5.5vw,3.8rem)] font-bold leading-[1.1] tracking-tight text-foreground">
             {title}
           </h1>
         </div>
@@ -196,7 +216,11 @@ const heroCodeThemes = {
         <!-- Contributors -->
         {hasContributors && (
           <div class="mt-6">
-            <Contributors label={contributorsLabel} contributors={contributors} />
+            <Contributors
+              label={contributorsLabel}
+              viewAllLabel={contributorsViewAllLabel}
+              contributors={contributors}
+            />
           </div>
         )}
 
@@ -210,7 +234,7 @@ const heroCodeThemes = {
       </div>
 
       <!-- Right: code editor -->
-      <div class="hero-terminal min-w-0 overflow-hidden border border-border shadow-[var(--site-shadow-elevated)]" role="img" aria-label="Example Python code showing Bub hook implementations">
+      <div class="hero-terminal min-w-0 overflow-hidden border border-border shadow-[var(--site-shadow-elevated)]">
         <div class="expressive-code">
           <figure class="frame has-title not-content">
             <figcaption class="header">

website/src/components/HookIntro.astro

@@ -1,14 +1,10 @@
 ---
 import SectionHeading from '@/components/ui/SectionHeading.astro';
+import type { HookIntroData } from '@/data/landing-page';
 
-interface Props {
-  eyebrow?: string;
-  heading?: string;
-  description?: string[];
-  hookStages?: { name: string; note: string }[];
-}
+interface Props extends HookIntroData {}
 
-const { eyebrow, heading, description = [], hookStages = [] }: Props = Astro.props;
+const { eyebrow, heading, description, hookStages }: Props = Astro.props;
 
 /* ── SVG coordinate system ── */
 const SPACING = 62;
@@ -45,7 +41,7 @@ const CX = VB_W / 2;
 const straightPathD = `M ${CX} ${-44} L ${CX} ${VB_H + 44}`;
 ---
 
-<section class="relative overflow-hidden py-20 md:py-28" data-reveal aria-label="Hook architecture">
+<section class="relative overflow-hidden py-20 md:py-28" data-reveal aria-labelledby="hook-intro-heading">
   <div class="relative mx-auto max-w-6xl px-5 md:px-8">
     <div class="flex flex-col gap-12 md:flex-row md:items-start md:gap-16 lg:gap-24">
 
@@ -54,6 +50,7 @@ const straightPathD = `M ${CX} ${-44} L ${CX} ${VB_H + 44}`;
         <SectionHeading
           eyebrow={eyebrow}
           heading={heading}
+          headingId="hook-intro-heading"
           descriptions={description}
           descriptionsClass="mt-5"
           class="mb-0 max-w-none"