feat: build steps 7a-10 — the site is complete and reviewable at 22 pages
Steps 7a through 10 as one authorised run. Nothing deployed (D11).
7a Lighthouse returns as `lighthouse@13.4.1` + `chrome-launcher`, NOT
`@lhci/cli`. AGENTS.md §7's advisory attribution was wrong: the carriers
were @lhci/cli's own `tmp` and @puppeteer/browsers' `extract-zip`, not
Lighthouse, which audits clean. A deliberate deviation from R11's literal
trigger, recorded with what it costs. Local gate; CI has no Chrome.
7b OG card generator (satori + sharp) discharges R15 — 20 typed cards plus
per-article cards; the portrait stays on / and /about/ by Q40. Insights
plumbing: ArticleCard, Prose, the index, the article route, articleGraph,
and /'s section 7. Card copy is constrained structurally because text in a
JPEG cannot be grepped by check:claims: every headline IS its page's <h1>,
enforced by `npm run og:proof`.
7c Five drafted launch articles, draft: true / reviewedByPouya: false. An
independent compliance audit returned 76 findings and 57 unsourced
assertions; all blocking and should-fix applied.
8 /contact/, the intake form, and backend/intake/ (undeployed). Plain HTML
POST to a same-origin /api/intake with a 303 redirect, so the form works
with zero JavaScript. docs/05 records three deliberate deviations.
9 /fees/ on Q59's ruling — overtime runs from the session cap, and the
reservation point ships adjacent to the rate. One-page PDF bio discharges
R16; /bio/ is its source, so the circulated artefact stays inside the
review apparatus.
10 /legal/privacy/ and /legal/terms/, written to the backend as built. Three
of the policy's statements are derived and cannot drift.
Also: /about/'s inverse credentials band (approved at step 6); Q59 closed;
R15 and R16 discharged; and a fix to shipped copy — /practice/energy/ asserted
the absence of a regulation the source extract says must not be asserted.
Review: adversarial-reviewer, two rounds (D20/D19). Round 1 returned 16
findings including two blocking — an invisible ghost button on /fees/ at
1.00:1 that Lighthouse scored 100, and a privacy policy that named one data
processor when there are two. All 16 acted on.
Lighthouse, 22 pages, mobile: performance 99-100, accessibility 100,
best practices 100, SEO 100 on every indexable page, CLS 0.000.
AGENTS.md entry (ah) has the detail, including four of my own verification
commands that were wrong and what each of them nearly caused.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Md3GndFqWPzK78xAoebsg5
This commit is contained in:
Pouya Lajevardi
co-authored by
Claude Opus 5
Claude Opus 5
parent
6cfe69033f
commit
210bc25a26
@@ -0,0 +1,148 @@
|
||||
---
|
||||
/**
|
||||
* docs/02: "Title, description, date, topic pills, reading time."
|
||||
*
|
||||
* ONE LINK, AND THE WHOLE CARD IS ITS HIT AREA — the `PracticeCard` pattern,
|
||||
* for the same measured reason: the link wraps only the headline, so its
|
||||
* accessible name is the headline rather than the card's four elements, and a
|
||||
* `::after` stretched over the positioned card carries the click. Three of these
|
||||
* on `/` would otherwise be three links each announcing a date, two pills, a
|
||||
* reading time and a 150-character description.
|
||||
*
|
||||
* THE PARENT MUST NOT TRY TO STYLE THIS ROOT. Astro does not pass a parent's
|
||||
* scope attribute to a child's root element, so a grid's `.card { block-size:
|
||||
* 100% }` compiles against the parent's cid and never matches — `CLAUDE.md`
|
||||
* records this costing twice, and names `ArticleCard` as one of the next places
|
||||
* it would happen. The card sizes itself below; a parent supplies only
|
||||
* `display: grid` and `gap` on its own element.
|
||||
*
|
||||
* `readingTime` IS RENDERED WITH ITS UNIT AND IS NOT A CLAIM ABOUT THE PRACTICE.
|
||||
* §4 Forbidden bars counts of matters, hours mediated and years in practice —
|
||||
* a number describing how long an article takes to read is not in that family,
|
||||
* and `check:claims`'s `counts-and-tenure` pattern is scoped to the practice.
|
||||
* Do not reach for a matter count, a settlement rate, or a case figure here.
|
||||
*/
|
||||
import Pill from './Pill.astro';
|
||||
import { TOPIC_LABELS, formatArticleDate, isoDate } from '../data/insights';
|
||||
import type { InsightTopic } from '../data/insights';
|
||||
|
||||
interface Props {
|
||||
href: string;
|
||||
title: string;
|
||||
description: string;
|
||||
date: Date;
|
||||
topics: readonly InsightTopic[];
|
||||
/** Minutes. */
|
||||
readingTime: number;
|
||||
/** Explicit: docs/02 forbids skipped heading levels. */
|
||||
level: 2 | 3;
|
||||
}
|
||||
const { href, title, description, date, topics, readingTime, level } =
|
||||
Astro.props;
|
||||
const H = `h${level}` as 'h2' | 'h3';
|
||||
---
|
||||
|
||||
<article class="acard">
|
||||
<div class="acard-meta">
|
||||
<time datetime={isoDate(date)}>{formatArticleDate(date)}</time>
|
||||
<span aria-hidden="true">·</span>
|
||||
<span>{readingTime} min read</span>
|
||||
</div>
|
||||
|
||||
<H class="acard-title">
|
||||
<a class="acard-link" href={href}>{title}</a>
|
||||
</H>
|
||||
|
||||
<p class="acard-desc">{description}</p>
|
||||
|
||||
{
|
||||
topics.length > 0 && (
|
||||
<ul class="acard-topics" role="list">
|
||||
{topics.map((topic) => (
|
||||
<li>
|
||||
<Pill>{TOPIC_LABELS[topic]}</Pill>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.acard {
|
||||
position: relative;
|
||||
/* Sizes itself to its cell — see the note on why the grid cannot. */
|
||||
block-size: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-6);
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-block-start: 2px solid var(--rule);
|
||||
border-radius: var(--radius-md);
|
||||
transition:
|
||||
border-color var(--dur-hover) var(--ease),
|
||||
box-shadow var(--dur-hover) var(--ease);
|
||||
}
|
||||
.acard:hover {
|
||||
border-color: var(--rule);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.acard-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
text-transform: uppercase;
|
||||
color: var(--text-meta);
|
||||
}
|
||||
|
||||
.acard-title {
|
||||
font-family: var(--font-serif);
|
||||
font-size: var(--text-2xl);
|
||||
line-height: var(--leading-tight);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
}
|
||||
.acard-link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
/* The card-wide hit area. `inset: 0` on the positioned card, so the click
|
||||
target is the card and the accessible name stays the headline. */
|
||||
.acard-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
}
|
||||
/* The ring has to be on the CARD, not on the inline text, or focus draws a
|
||||
box around two words in the middle of a clickable panel. */
|
||||
.acard-link:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
.acard-link:focus-visible::after {
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: var(--focus-offset);
|
||||
}
|
||||
|
||||
.acard-desc {
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-body);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.acard-topics {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
/* `margin-block-start: auto` pins the pills to the bottom of the card so a
|
||||
row of cards with different description lengths still aligns on them. */
|
||||
margin-block-start: auto;
|
||||
padding-block-start: var(--space-3);
|
||||
}
|
||||
</style>
|
||||
@@ -66,18 +66,47 @@ const classes = ['btn', `btn-${variant}`, className];
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
/* ⚠️ THE THREE HOOKS BELOW EXIST BECAUSE THIS BUTTON SHIPPED INVISIBLE.
|
||||
Found 2026-08-31 by `adversarial-reviewer` on `/fees/`, measured in headless
|
||||
Chrome against `dist/`: `{"t":"How an engagement runs →","color":"rgb(26, 22,
|
||||
20)","bg":"rgb(26, 22, 20)","ratio":1}`. `.btn-ghost` sets `color:
|
||||
var(--text)` — ink — and a border of `--border`, which is ink at 10% alpha.
|
||||
On a `.section-inverse` ground both are the background colour. **Ratio
|
||||
1.00:1: a navigation link the same colour as the panel it sits on**, worse
|
||||
than the gold-on-cream 2.10:1 this project treats as unshippable.
|
||||
|
||||
⚠️ AND LIGHTHOUSE SCORED THAT PAGE ACCESSIBILITY 100. axe's
|
||||
`color-contrast` rule SKIPS a foreground that exactly equals its background
|
||||
as "unable to determine" — so the a11y category cannot be the only contrast
|
||||
control here, and a computed-contrast sweep is not redundant with it.
|
||||
|
||||
THE HOOKS ARE CUSTOM PROPERTIES, NOT A GLOBAL DESCENDANT RULE, and that is
|
||||
the load-bearing part. A parent cannot style a child component's root
|
||||
(CLAUDE.md), and `global.css`'s `.section-inverse .btn-ghost` would compile
|
||||
at specificity (0,2,0) — identical to `.btn-ghost[data-astro-cid]` here — so
|
||||
which one won would depend on injection order. `AGENTS.md` records that
|
||||
exact trap being hit once already, on `.btn-gold`. Custom properties
|
||||
INHERIT, which is the one mechanism that legitimately crosses the boundary;
|
||||
it is what `Pill` and `DefinitionGrid` already use. The fallbacks keep the
|
||||
on-cream appearance byte-identical. */
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
border-color: var(--border);
|
||||
color: var(--text);
|
||||
border-color: var(--btn-ghost-border, var(--border));
|
||||
color: var(--btn-ghost-fg, var(--text));
|
||||
}
|
||||
.btn-ghost:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
border-color: var(--btn-ghost-border-hover, var(--accent));
|
||||
color: var(--btn-ghost-fg-hover, var(--accent));
|
||||
}
|
||||
|
||||
/* `background: var(--bg-inverse)` is ink, so on an inverse ground the pill has
|
||||
no boundary and reads as bare text — the milder half of the same finding.
|
||||
The label is gold-l at 11.09:1 on ink and stays legible, so this needs an
|
||||
EDGE rather than a new colour scheme: giving it a different ground would be
|
||||
redesigning a button shipped at step 5 rather than fixing a defect. */
|
||||
.btn-gold {
|
||||
background: var(--bg-inverse);
|
||||
border-color: var(--btn-gold-border, transparent);
|
||||
color: var(--text-inverse-2);
|
||||
}
|
||||
.btn-gold:hover {
|
||||
|
||||
@@ -0,0 +1,168 @@
|
||||
---
|
||||
/**
|
||||
* docs/02: "Long-form wrapper. Owns all typographic defaults for MDX."
|
||||
*
|
||||
* WHY IT HAS TO OWN THEM. `global.css`'s reset sets `* { margin: 0 }` and the
|
||||
* base type rules deliberately do not style `<h2>`, `<ul>`, `<blockquote>` or
|
||||
* `<code>` in body flow — every page so far has written its own section markup,
|
||||
* so nothing on the site has ever needed defaults for a document. An MDX article
|
||||
* is the first content this repo does not hand-mark up, and without a wrapper it
|
||||
* would render as one undifferentiated block. `global.css` already records that
|
||||
* exact failure for `.prose` itself: two `<p>` children with a 0.0 px gap,
|
||||
* shipped, because nothing supplied paragraph spacing.
|
||||
*
|
||||
* `:where()` ON EVERY SELECTOR, so specificity stays at zero and a page or a
|
||||
* component can override any of it without `!important` — the same device
|
||||
* `global.css` uses for `:where(.prose) > p + p`, and for the same reason.
|
||||
*
|
||||
* SCOPED STYLES NEED `:global()` HERE, and this is the one component where that
|
||||
* is correct rather than a smell: the elements being styled come from MDX at
|
||||
* build time and carry no `data-astro-cid` of this component's, so a scoped
|
||||
* descendant selector would match nothing. Astro's own `is:global` guidance.
|
||||
* The wrapper element itself is ours, so everything stays inside `.prose-body`.
|
||||
*
|
||||
* NO `max-inline-size` OF ITS OWN — it composes with `global.css`'s `.prose`,
|
||||
* which caps the reading measure at `--width-prose`. A second cap here would be
|
||||
* a second number to keep true.
|
||||
*/
|
||||
---
|
||||
|
||||
<div class="prose prose-body">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* --- Rhythm ---------------------------------------------------------- */
|
||||
|
||||
.prose-body :global(:where(p, ul, ol, blockquote, figure, hr, table)) {
|
||||
margin-block-start: var(--space-5);
|
||||
line-height: var(--leading-body);
|
||||
}
|
||||
.prose-body :global(:where(p, li)) {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* --- Headings -------------------------------------------------------- */
|
||||
|
||||
/* An article's own `<h1>` is the page's, rendered by the route. MDX bodies
|
||||
start at `##`, so these are h2/h3/h4. A skipped level is a docs/02 breach
|
||||
and is caught by review, not by CSS. */
|
||||
.prose-body :global(:where(h2)) {
|
||||
margin-block-start: var(--space-8);
|
||||
font-family: var(--font-serif);
|
||||
font-size: var(--text-3xl);
|
||||
line-height: var(--leading-tight);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
color: var(--text);
|
||||
}
|
||||
.prose-body :global(:where(h3)) {
|
||||
margin-block-start: var(--space-7);
|
||||
font-family: var(--font-serif);
|
||||
font-size: var(--text-xl);
|
||||
line-height: var(--leading-tight);
|
||||
color: var(--text);
|
||||
}
|
||||
.prose-body :global(:where(h4)) {
|
||||
margin-block-start: var(--space-6);
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--weight-semi);
|
||||
color: var(--text);
|
||||
}
|
||||
/* Nothing may collapse against the top of the article. */
|
||||
.prose-body :global(:where(:first-child)) {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
/* --- Lists ------------------------------------------------------------ */
|
||||
|
||||
/* `global.css` strips list styling from `ul[role='list']` only, so an MDX
|
||||
list keeps the UA marker and needs indenting rather than resetting. */
|
||||
.prose-body :global(:where(ul, ol)) {
|
||||
padding-inline-start: var(--space-6);
|
||||
}
|
||||
.prose-body :global(:where(li + li)) {
|
||||
margin-block-start: var(--space-3);
|
||||
}
|
||||
.prose-body :global(:where(li)) {
|
||||
padding-inline-start: var(--space-1);
|
||||
}
|
||||
.prose-body :global(:where(li::marker)) {
|
||||
color: var(--text-meta);
|
||||
}
|
||||
|
||||
/* --- Emphasis, links, quotes ----------------------------------------- */
|
||||
|
||||
.prose-body :global(:where(strong)) {
|
||||
font-weight: var(--weight-semi);
|
||||
color: var(--text);
|
||||
}
|
||||
.prose-body :global(:where(em)) {
|
||||
font-style: italic;
|
||||
}
|
||||
/* Links keep `global.css`'s colour and underline; only the offset is set, so
|
||||
a descender does not sit on the rule at body size. */
|
||||
.prose-body :global(:where(a)) {
|
||||
text-underline-offset: 0.15em;
|
||||
}
|
||||
|
||||
.prose-body :global(:where(blockquote)) {
|
||||
padding-inline-start: var(--space-5);
|
||||
border-inline-start: 2px solid var(--rule);
|
||||
font-family: var(--font-serif);
|
||||
font-size: var(--text-lg);
|
||||
color: var(--text);
|
||||
}
|
||||
.prose-body :global(:where(blockquote p)) {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.prose-body :global(:where(hr)) {
|
||||
margin-block: var(--space-8);
|
||||
border: none;
|
||||
border-block-start: 1px solid var(--rule);
|
||||
}
|
||||
|
||||
/* --- Code ------------------------------------------------------------- */
|
||||
|
||||
/* Inline code only. A statute reference or a header name, not a code block:
|
||||
nothing in docs/03's content territories calls for one, and `<pre>` would
|
||||
need horizontal overflow handling this component has no call site for. Add
|
||||
it with the first article that needs it, and give it `overflow-x: auto`. */
|
||||
.prose-body :global(:where(code)) {
|
||||
padding: 0.1em 0.35em;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9em;
|
||||
background: var(--bg-raised);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
/* --- Figures and tables ---------------------------------------------- */
|
||||
|
||||
.prose-body :global(:where(img)) {
|
||||
max-inline-size: 100%;
|
||||
block-size: auto;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.prose-body :global(:where(figcaption)) {
|
||||
margin-block-start: var(--space-3);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-meta);
|
||||
}
|
||||
/* ⚠️ NO TABLE RULES, AND THE THREE THAT WERE HERE ARE DELETED RATHER THAN
|
||||
FIXED. They set `display: block; overflow-x: auto` on the `<table>` itself,
|
||||
which has two defects: `display: block` **removes the table role** in
|
||||
Chromium and WebKit, so rows and cells lose their semantics for assistive
|
||||
technology; and an `overflow-x: auto` box with no `tabindex="0"` cannot be
|
||||
scrolled by keyboard (WCAG 2.1.1). The comment said *"the wrapper carries
|
||||
it"* — there was no wrapper; the properties were on the table.
|
||||
|
||||
Doing it properly means a real wrapper with `tabindex="0"`, `role="region"`
|
||||
and an accessible name, which in MDX means a rehype plugin or a `<Table>`
|
||||
component. **None of the five drafted articles contains a table**, and with
|
||||
all five `draft: true` no article page builds, so this CSS shipped nowhere:
|
||||
deleting it now and adding it with the first article that needs one is the
|
||||
same decision the `code` note above already takes for `<pre>`.
|
||||
Found by `adversarial-reviewer`, 2026-08-31, and correctly filed as latent. */
|
||||
</style>
|
||||
+70
-14
@@ -12,6 +12,7 @@
|
||||
import { getImage } from 'astro:assets';
|
||||
import ogDefault from '../assets/og-portrait.jpg';
|
||||
import { SITE, PORTRAIT } from '../data/site';
|
||||
import { OG_CARDS, PORTRAIT_PAGES, ogCardPath } from '../data/og-cards';
|
||||
|
||||
export interface Props {
|
||||
/** The full rendered <title>. Pattern: "<Page> · Pouya Lajevardi". 50–60. */
|
||||
@@ -21,8 +22,15 @@ export interface Props {
|
||||
/** 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. */
|
||||
/**
|
||||
* AN EXPLICIT PER-PAGE OVERRIDE, AND ALMOST NOTHING SHOULD PASS IT. Which
|
||||
* pages take the portrait is decided by `PORTRAIT_PAGES` and everything else
|
||||
* takes its generated card — both resolved below from the pathname, so the
|
||||
* decision lives in `src/data/og-cards.ts` rather than in nineteen call sites.
|
||||
* This exists for an article that sets its own `image` in frontmatter. Passing
|
||||
* it to get the portrait onto a third page would reinstate the interim R15
|
||||
* exists to end. `ImageMetadata` is an Astro ambient global — nothing to import.
|
||||
*/
|
||||
image?: ImageMetadata;
|
||||
imageAlt?: string;
|
||||
/** /legal/* and any temporary page. Emits noindex,follow per docs/04. */
|
||||
@@ -78,16 +86,64 @@ if (!Astro.site) {
|
||||
}
|
||||
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);
|
||||
/**
|
||||
* THE OG IMAGE, AND THIS IS WHERE R15 IS DISCHARGED — build step 7b.
|
||||
*
|
||||
* Two kinds of card, per Q40 and docs/04, both resolved from the pathname: the
|
||||
* pages in `PORTRAIT_PAGES` get the portrait crop, and every other page gets the
|
||||
* card generated for it by `src/pages/og/[...slug].jpg.ts`.
|
||||
*
|
||||
* ⚠️ A MISSING REGISTRY ENTRY THROWS RATHER THAN FALLING BACK TO THE PORTRAIT.
|
||||
* That is the whole mechanism. R15's failure mode is not that the wrong image
|
||||
* ships — it is that the wrong image ships *invisibly*, because no one on this
|
||||
* project ever sees a link preview. A silent fallback reproduces exactly that,
|
||||
* and reads as intentional. Both sides derive the path from `ogCardPath()`, so a
|
||||
* page with an entry cannot point at a card the endpoint did not generate.
|
||||
*
|
||||
* Articles are exempt from the registry check: their cards come from the same
|
||||
* `getCollection('insights', not draft)` the article route pages come from, so
|
||||
* a built article always has one and a draft has neither.
|
||||
*/
|
||||
const path = Astro.url.pathname;
|
||||
const isArticle = /^\/insights\/[^/]+\/$/.test(path);
|
||||
const usesPortrait = (PORTRAIT_PAGES as readonly string[]).includes(path);
|
||||
const hasCard = isArticle || path in OG_CARDS;
|
||||
|
||||
if (!image && !usesPortrait && !hasCard) {
|
||||
throw new Error(
|
||||
`No Open Graph card for ${path}.\n` +
|
||||
' Add an entry to OG_CARDS in src/data/og-cards.ts whose `headline` is ' +
|
||||
"this page's own <h1>, verbatim — `npm run og:proof` compares the two.\n" +
|
||||
' Only the pages in PORTRAIT_PAGES use the portrait (AGENTS.md Q40, R15).',
|
||||
);
|
||||
}
|
||||
|
||||
// JPEG on purpose, for both kinds. 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.
|
||||
// The generated card is already a 1200×630 JPEG, so it takes no `getImage` pass;
|
||||
// running one would re-encode a finished image for nothing.
|
||||
const portraitSource = image ?? ogDefault;
|
||||
const ogImageUrl =
|
||||
image || usesPortrait
|
||||
? new URL(
|
||||
(
|
||||
await getImage({
|
||||
src: portraitSource,
|
||||
format: 'jpeg',
|
||||
width: 1200,
|
||||
height: 630,
|
||||
})
|
||||
).src,
|
||||
Astro.site,
|
||||
)
|
||||
: new URL(ogCardPath(path), Astro.site);
|
||||
|
||||
// A typographic card's alt is its headline, which for every card in the
|
||||
// registry is the page's own <h1> — and `title` is the string already required
|
||||
// to be unique per page. The portrait keeps the person's name.
|
||||
const resolvedImageAlt =
|
||||
imageAlt ?? (image || usesPortrait ? PORTRAIT.alt : title);
|
||||
|
||||
// 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
|
||||
@@ -114,13 +170,13 @@ const jsonLdText =
|
||||
<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 property="og:image:alt" content={resolvedImageAlt} />
|
||||
|
||||
<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} />
|
||||
<meta name="twitter:image:alt" content={resolvedImageAlt} />
|
||||
|
||||
{
|
||||
jsonLdText && (
|
||||
|
||||
Reference in New Issue
Block a user