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>
|
||||
Reference in New Issue
Block a user