release(1.1.0): Claude Fable 5, WebP hero pipeline, security hardening, redesign

- Anthropic provider defaults to claude-fable-5 (pricing snapshot updated)
- Hero image step sniffs real byte format (JPEG/WebP/PNG) instead of
  assuming PNG; scripts/optimize-hero-images.sh recompresses existing
  R2 heroes to WebP (~97% smaller) and repoints blog_posts
- Proper 404.html (was SPA-fallback soft-404s with HTTP 200)
- All public pages self-host fonts from /_fonts/ (Google Fonts removed)
- Blog index: eager fetchpriority=high first card, og:image, preloads
- Security: constant-time admin-token comparison; nosniff +
  Referrer-Policy on all pages; X-Frame-Options DENY + no-store on
  admin/sign-in
- Marketing site redesign: editorial serif display, highlighter-yellow
  marks, provider ticker, folio numerals, full-bleed nav, outro band

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: r8a5

.env.example

@@ -72,7 +72,7 @@
 # WORKERS_AI_IMAGE_MODEL=@cf/black-forest-labs/flux-1-schnell
 # OPENAI_TEXT_MODEL=gpt-5
 # OPENAI_IMAGE_MODEL=gpt-image-1
-# ANTHROPIC_TEXT_MODEL=claude-opus-4-7
+# ANTHROPIC_TEXT_MODEL=claude-fable-5
 # GEMINI_TEXT_MODEL=gemini-2.5-pro
 # GEMINI_IMAGE_MODEL=imagen-4.0-generate-001
 # GROQ_TEXT_MODEL=llama-3.3-70b-versatile

CHANGELOG.md

@@ -7,6 +7,44 @@ version.
 
 The format is loosely Keep-a-Changelog, dates in ISO order.
 
+## 1.1.0 — 2026-06-10
+
+### Added
+- **Claude Fable 5 support.** The Anthropic provider now defaults to
+  `claude-fable-5`, Anthropic's newest model ($10/M in, $50/M out —
+  bundled price snapshot updated to match). Override with
+  `ANTHROPIC_TEXT_MODEL` as before.
+- **`scripts/optimize-hero-images.sh`** — one-command maintenance
+  script that recompresses existing AI hero PNGs in R2 to WebP
+  (~97% smaller; a 10-post /blog page drops from ~14 MB of images
+  to under 600 KB) and repoints `blog_posts` at the new keys.
+- **Proper 404s.** A branded `public/404.html` replaces the previous
+  SPA fallback that returned the homepage with HTTP 200 for unknown
+  URLs (a classic soft-404 that wastes crawl budget).
+- **Marketing site redesign.** Editorial press-sheet look: serif
+  display headlines, highlighter-yellow accents, provider ticker,
+  ghost folio numerals, full-bleed nav, closing CTA band, dark mode.
+
+### Changed
+- **Hero images store their real format.** The image step now sniffs
+  the provider's bytes (JPEG/WebP/PNG) and writes the matching
+  extension + content-type instead of assuming PNG.
+- **All public pages self-host fonts.** Blog index, posts,
+  programmatic pages, and docs no longer call Google Fonts — fonts
+  load from `/_fonts/` with preload hints (faster first paint, one
+  fewer third-party origin).
+- **Blog index LCP.** The first card image loads eagerly with
+  `fetchpriority=high` (plus a preload hint and og:image); the rest
+  stay lazy. Page-1 now ships `twitter:card=summary_large_image`.
+
+### Security
+- **Constant-time admin-token comparison.** Bearer/X-Admin-Token
+  checks no longer short-circuit on the first differing byte.
+- **Baseline security headers.** `X-Content-Type-Options: nosniff` +
+  `Referrer-Policy` on static assets and rendered pages;
+  `X-Frame-Options: DENY` + `Cache-Control: no-store` on the admin
+  SPA and sign-in page (clickjacking defence).
+
 ## 1.0.6 — 2026-06-07
 
 ### Removed

README.md

@@ -152,7 +152,7 @@ Workers AI is bound automatically and is the default. Every other provider is op
 |---|---|---|---|
 | Cloudflare Workers AI | _(binding)_ | ✅ Llama 3.3 70B | ✅ Flux 1 schnell |
 | OpenAI | `OPENAI_API_KEY` | ✅ gpt-5 | ✅ gpt-image-1 |
-| Anthropic | `ANTHROPIC_API_KEY` | ✅ Claude | — |
+| Anthropic | `ANTHROPIC_API_KEY` | ✅ Claude Fable 5 | — |
 | Google Gemini | `GEMINI_API_KEY` | ✅ Gemini 2.5 Pro | ✅ Imagen 4 |
 | Groq | `GROQ_API_KEY` | ✅ Llama 3.3 70B | — |
 | DeepSeek | `DEEPSEEK_API_KEY` | ✅ deepseek-chat | — |

functions/_lib/ai.js

@@ -630,7 +630,7 @@ async function openAIImage(env, prompt) {
 // ── Anthropic (Claude) ─────────────────────────────────────────────────
 
 const ANTHROPIC_URL = 'https://api.anthropic.com/v1/messages';
-const ANTHROPIC_TEXT_MODEL = 'claude-opus-4-7';
+const ANTHROPIC_TEXT_MODEL = 'claude-fable-5';
 
 async function anthropicText(env, prompt) {
   if (!env?.ANTHROPIC_API_KEY) throw new Error('anthropic_not_configured');
@@ -645,8 +645,8 @@ async function anthropicText(env, prompt) {
     body: JSON.stringify({
       model,
       // 8192 fits a 2500-4000-word article + JSON wrapper without
-      // truncation. Anthropic's max for Opus is 32k+; 8k is the
-      // sweet spot for cost/latency on long-form articles.
+      // truncation. Fable 5 supports far more; 8k is the sweet spot
+      // for cost/latency on long-form articles.
       max_tokens: 8192,
       system: SYSTEM_JSON_ONLY,
       messages: [{ role: 'user', content: prompt }],

functions/_lib/auth.js

@@ -18,13 +18,25 @@ import { missingConfig, configError } from './config.js';
 import { SESSION_COOKIE, readCookie, verifySessionToken } from './passwords.js';
 import { getAdminToken } from './admin_token.js';
 
+// Constant-time string comparison. A plain === short-circuits on the
+// first differing byte, which leaks token prefixes through response
+// timing. The edge runtime adds jitter that makes exploitation hard,
+// but constant-time costs nothing.
+function timingSafeEqual(a, b) {
+  const ea = new TextEncoder().encode(String(a));
+  const eb = new TextEncoder().encode(String(b));
+  let diff = ea.length === eb.length ? 0 : 1;
+  for (let i = 0; i < ea.length; i++) diff |= ea[i] ^ (i < eb.length ? eb[i] : 0);
+  return diff === 0;
+}
+
 async function bearerToken(env, request) {
   const token = await getAdminToken(env);
   if (!token) return false;
   const bearer = (request.headers.get('Authorization') || '').match(/^Bearer\s+(.+)$/i);
-  if (bearer && bearer[1].trim() === token) return true;
+  if (bearer && timingSafeEqual(bearer[1].trim(), token)) return true;
   const hdr = (request.headers.get('X-Admin-Token') || '').trim();
-  return !!(hdr && hdr === token);
+  return !!(hdr && timingSafeEqual(hdr, token));
 }
 
 async function sessionAuth(env, request) {

functions/_lib/page_render.js

@@ -230,9 +230,8 @@ ${verifyMetas}
 <meta name="twitter:description" content="${esc(post.meta_description)}" />
 <meta name="twitter:image" content="https://${host}${heroSrc}" />
 ${preloadHero}
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap" />
+<link rel="preload" href="/_fonts/inter-400.woff2" as="font" type="font/woff2" crossorigin />
+<link rel="preload" href="/_fonts/instrument-serif-400.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="stylesheet" href="/style.css" />
 <script type="application/ld+json">${jsonLD({ site, post: { ...post, urlPath }, host, kind, settings })}</script>
 </head>

functions/_lib/prices.js

@@ -22,7 +22,7 @@ import { nowSec } from './util.js';
 export const BUNDLED_PRICES = {
   'workers-ai': { in: 0,    out: 0,     image: 0    },
   'openai':     { in: 1.25, out: 10.00, image: 0.04 }, // gpt-5
-  'anthropic':  { in: 15.00,out: 75.00, image: null },  // claude-opus-4-7
+  'anthropic':  { in: 10.00,out: 50.00, image: null },  // claude-fable-5
   'gemini':     { in: 1.25, out: 10.00, image: 0.04 }, // gemini-2.5-pro / imagen-4
   'groq':       { in: 0.59, out: 0.79,  image: null }, // llama-3.3-70b
   'deepseek':   { in: 0.27, out: 1.10,  image: null },
@@ -38,7 +38,7 @@ export const BUNDLED_PRICES = {
 // default models.
 const MODELS_DEV_MAP = {
   'openai':    { provider: 'openai',          model: 'gpt-5' },
-  'anthropic': { provider: 'anthropic',       model: 'claude-opus-4-7' },
+  'anthropic': { provider: 'anthropic',       model: 'claude-fable-5' },
   'gemini':    { provider: 'google',          model: 'gemini-2.5-pro' },
   'groq':      { provider: 'groq',            model: 'llama-3.3-70b-versatile' },
   'deepseek':  { provider: 'deepseek',        model: 'deepseek-chat' },

functions/_lib/raw_llm.js

@@ -80,7 +80,7 @@ async function runProvider(env, name, prompt, sys) {
       throw new Error('openai_empty');
     }
     case 'anthropic': {
-      const model = env.ANTHROPIC_TEXT_MODEL || 'claude-opus-4-7';
+      const model = env.ANTHROPIC_TEXT_MODEL || 'claude-fable-5';
       const r = await fetch('https://api.anthropic.com/v1/messages', {
         method: 'POST',
         headers: { 'x-api-key': env.ANTHROPIC_API_KEY, 'anthropic-version': '2023-06-01', 'Content-Type': 'application/json' },

functions/api/admin/blog/image.js

@@ -20,6 +20,12 @@ import { adminGate } from '../../../_lib/auth.js';
 import { generateImage } from '../../../_lib/ai.js';
 import { loadSettings } from '../../../_lib/settings.js';
 
+function sniffImageFormat(bytes) {
+  if (bytes?.length > 2 && bytes[0] === 0xff && bytes[1] === 0xd8) return { ext: 'jpg', type: 'image/jpeg' };
+  if (bytes?.length > 11 && bytes[8] === 0x57 && bytes[9] === 0x45 && bytes[10] === 0x42 && bytes[11] === 0x50) return { ext: 'webp', type: 'image/webp' };
+  return { ext: 'png', type: 'image/png' };
+}
+
 export const onRequestPost = async ({ request, env }) => {
   const gate = await adminGate(env, request); if (gate) return gate;
   let body;
@@ -103,10 +109,15 @@ export const onRequestPost = async ({ request, env }) => {
       const source = request.headers.get('X-Source-Cron') === '1' ? 'cron-blog' : 'admin-blog';
       const r = await generateImage(env, { prompt: job.hero_image_prompt, provider: body.provider, source });
       imageProvider = r.ai_provider;
-      imageKey = `${job.slug}-${Date.now()}.png`;
+      // Sniff the actual byte format rather than assuming PNG — some
+      // providers return JPEG or WebP, and serving them with the right
+      // extension + content-type keeps caches and <img> decoding honest
+      // (JPEG/WebP heroes are also ~10x smaller than RGBA PNGs).
+      const fmt = sniffImageFormat(r.bytes);
+      imageKey = `${job.slug}-${Date.now()}.${fmt.ext}`;
       if (!env.IMAGES) throw new Error('r2_binding_missing');
       await env.IMAGES.put(imageKey, r.bytes, {
-        httpMetadata: { contentType: 'image/png', cacheControl: 'public, max-age=31536000, immutable' },
+        httpMetadata: { contentType: fmt.type, cacheControl: 'public, max-age=31536000, immutable' },
       });
     } catch (e) {
       imageError = String(e.message || e).slice(0, 800);

functions/api/admin/brand-dna.js

@@ -160,7 +160,7 @@ async function runProvider(env, name, prompt) {
       throw new Error('openai_empty');
     }
     case 'anthropic': {
-      const model = env.ANTHROPIC_TEXT_MODEL || 'claude-opus-4-7';
+      const model = env.ANTHROPIC_TEXT_MODEL || 'claude-fable-5';
       const r = await fetch('https://api.anthropic.com/v1/messages', {
         method: 'POST',
         headers: { 'x-api-key': env.ANTHROPIC_API_KEY, 'anthropic-version': '2023-06-01', 'Content-Type': 'application/json' },