feat: build step 1 — scaffold, layout, header, footer, SEO; zero JavaScript
Build order step 1 (docs/01): scaffold, tokens, base layout, header, footer, SEO component, plus a temporary /type-scale/ proof sheet that step 2 deletes. THE FONTS WERE NEVER ON DISK. global.css declared six @font-face rules pointing at /fonts/*.woff2 and public/fonts/ did not exist, so every face had been silently falling back to Georgia and the system sans. Six cuts committed, 123,804 bytes, SIL OFL 1.1, provenance in docs/reference/fonts-provenance.md. ?v=1 on every URL because the deploy script serves them immutable for a year. ZERO JAVASCRIPT. The reveal was an inline IntersectionObserver in <head>; docs/05 specifies script-src 'self' with no unsafe-inline, so the only script on the site was the one thing the site's own CSP would refuse to execute. Replaced with animation-timeline: view() behind @supports. 0 script tags and 0 .js files in dist. The infinity mark is lifted verbatim from the deployed site's own smlMark loading thumbnail, not redrawn (Q32 asks whether a canonical vector exists). The proof sheet computes its contrast table from tokens.css rather than restating docs/02 — all eleven ratios reproduce the measured table exactly. Register: Canadian Tax Foundation added (§4, R10 widened); Q30 closed — SML Company Ltd is federally incorporated under the CBCA, and the footer publishes neither that nor the place of business; Q31 closed — Plausible, on EU-only data residency (D15 amended). ROLE constants added for "Director of Firm Operations" and "active litigation exposure" so step 3 does not hand-type them. Lighthouse unavailability now stated in six places rather than left as a control that had silently stopped existing (§7, R11). Both review agents ran twice. The second pass found four defects in the first pass's fixes, including the minifier bug written back into its own fix and a colour-alone repair that used the banned gold-on- cream pairing at 2.10:1. Measured in headless Chrome at thirteen widths with a seventh nav item injected: 0 overflow, 0 tap targets under 44x44, 0 focus-order inversions, state indicators at 12.29:1, 755 words of body text with no JavaScript. Opened: Q32-Q37. Closed: Q30, Q31. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012XquaEq4BgWMCwUqLEyNkF
This commit is contained in:
Pouya Lajevardi
co-authored by
Claude Opus 5
Claude Opus 5
parent
8f1df2c27c
commit
8134709548
@@ -0,0 +1,129 @@
|
||||
---
|
||||
/**
|
||||
* The single metadata component. Spec: docs/04-seo-spec.md.
|
||||
*
|
||||
* "Every page passes through one SEO component. A page without it is not
|
||||
* finished." — so the length rules in that spec are ENFORCED here rather than
|
||||
* described. An out-of-range title or description throws at build time and
|
||||
* names the offending string and its length, the same way src/content.config.ts
|
||||
* does for article frontmatter. A build that fails on unfinished metadata is a
|
||||
* correct build.
|
||||
*/
|
||||
import { getImage } from 'astro:assets';
|
||||
import ogDefault from '../assets/og-portrait.jpg';
|
||||
import { SITE, PORTRAIT } from '../data/site';
|
||||
|
||||
export interface Props {
|
||||
/** The full rendered <title>. Pattern: "<Page> · Pouya Lajevardi". 50–60. */
|
||||
title: string;
|
||||
/** 140–160 characters, unique, written for a human. */
|
||||
description: string;
|
||||
/** Overrides the canonical path. Defaults to this page's own URL. */
|
||||
canonical?: string;
|
||||
ogType?: 'website' | 'article' | 'profile';
|
||||
/** 1200×630 source. Defaults to the portrait crop in src/assets.
|
||||
* `ImageMetadata` is an Astro ambient global — there is nothing to import. */
|
||||
image?: ImageMetadata;
|
||||
imageAlt?: string;
|
||||
/** /legal/* and any temporary page. Emits noindex,follow per docs/04. */
|
||||
noindex?: boolean;
|
||||
/**
|
||||
* Page-appropriate structured data — Person, ProfessionalService, Service,
|
||||
* Article, BreadcrumbList, FAQPage. Passed in, never invented here: a default
|
||||
* would be a claim this component is in no position to make.
|
||||
*/
|
||||
jsonLd?: unknown;
|
||||
}
|
||||
|
||||
const {
|
||||
title,
|
||||
description,
|
||||
canonical,
|
||||
ogType = 'website',
|
||||
image,
|
||||
imageAlt,
|
||||
noindex = false,
|
||||
jsonLd,
|
||||
} = Astro.props;
|
||||
|
||||
const TITLE_MIN = 50;
|
||||
const TITLE_MAX = 60;
|
||||
const DESC_MIN = 140;
|
||||
const DESC_MAX = 160;
|
||||
|
||||
const problems: string[] = [];
|
||||
if (title.length < TITLE_MIN || title.length > TITLE_MAX) {
|
||||
problems.push(
|
||||
`title is ${title.length} characters; docs/04-seo-spec.md requires ${TITLE_MIN}–${TITLE_MAX}.\n ${JSON.stringify(title)}`,
|
||||
);
|
||||
}
|
||||
if (description.length < DESC_MIN || description.length > DESC_MAX) {
|
||||
problems.push(
|
||||
`description is ${description.length} characters; docs/04-seo-spec.md requires ${DESC_MIN}–${DESC_MAX}.\n ${JSON.stringify(description)}`,
|
||||
);
|
||||
}
|
||||
if (problems.length > 0) {
|
||||
throw new Error(
|
||||
`SEO metadata out of range on ${Astro.url.pathname}\n - ${problems.join('\n - ')}\n` +
|
||||
` Fix the string. Do not widen the range — these are the lengths Google renders.`,
|
||||
);
|
||||
}
|
||||
|
||||
// `site` drives canonical URLs, OG tags, and the sitemap. Without it every
|
||||
// absolute URL below would silently become a relative one.
|
||||
if (!Astro.site) {
|
||||
throw new Error(
|
||||
'astro.config.mjs must set `site`; SEO.astro needs it for canonical and OG URLs.',
|
||||
);
|
||||
}
|
||||
const canonicalUrl = new URL(canonical ?? Astro.url.pathname, Astro.site);
|
||||
|
||||
// JPEG on purpose. Page images are AVIF/WebP with a fallback (CLAUDE.md), but
|
||||
// link-preview crawlers are not browsers — LinkedIn and Slack do not negotiate
|
||||
// content types, and several still do not decode WebP at all.
|
||||
const ogImage = await getImage({
|
||||
src: image ?? ogDefault,
|
||||
format: 'jpeg',
|
||||
width: 1200,
|
||||
height: 630,
|
||||
});
|
||||
const ogImageUrl = new URL(ogImage.src, Astro.site);
|
||||
|
||||
// JSON.stringify does not escape `<`, so a "</script>" inside any string value
|
||||
// would close this element early and hand the rest of the payload to the HTML
|
||||
// parser. Escaping the angle bracket is the whole fix; JSON readers decode it.
|
||||
const jsonLdText =
|
||||
jsonLd === undefined ? null : JSON.stringify(jsonLd).replace(/</g, '\\u003c');
|
||||
---
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description} />
|
||||
<link rel="canonical" href={canonicalUrl.href} />
|
||||
<meta name="robots" content={noindex ? 'noindex,follow' : 'index,follow'} />
|
||||
|
||||
<meta property="og:type" content={ogType} />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:url" content={canonicalUrl.href} />
|
||||
<meta property="og:site_name" content={SITE.name} />
|
||||
<meta property="og:locale" content={SITE.locale} />
|
||||
<meta property="og:image" content={ogImageUrl.href} />
|
||||
<meta property="og:image:width" content="1200" />
|
||||
<meta property="og:image:height" content="630" />
|
||||
<meta property="og:image:alt" content={imageAlt ?? PORTRAIT.alt} />
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content={title} />
|
||||
<meta name="twitter:description" content={description} />
|
||||
<meta name="twitter:image" content={ogImageUrl.href} />
|
||||
<meta name="twitter:image:alt" content={imageAlt ?? PORTRAIT.alt} />
|
||||
|
||||
{
|
||||
jsonLdText && (
|
||||
<script type="application/ld+json" is:inline set:html={jsonLdText} />
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user