From ae1ae96d556869a4fc0ccd68764463f239a45f50 Mon Sep 17 00:00:00 2001 From: Compleet Date: Tue, 14 Jul 2026 12:36:28 +0100 Subject: [PATCH] Apply the publication's thesis to its own design - Self-host Newsreader/Inter/IBM Plex Mono via fontsource (no external requests) - Open each story with its trust anatomy: pattern moved into the article header, expanded by default; review date flags itself when overdue - Homepage shows only what exists: podcast, book, and guide placeholders replaced by one honest roadmap note - Story-card diagram now drawn from the story's own trust pattern; the failure link encodes status (dashed developing, broken disputed, solid resolved) Co-Authored-By: Claude Fable 5 --- package-lock.json | 59 +++++++----- package.json | 3 + src/components/Footer.astro | 2 +- src/components/Header.astro | 2 +- src/components/MaintenanceMeta.astro | 35 ++++++-- src/components/StoryCard.astro | 95 +++++++++++++++++--- src/components/TrustPattern.astro | 6 +- src/layouts/ArticleLayout.astro | 4 +- src/layouts/BaseLayout.astro | 5 ++ src/pages/about.astro | 2 +- src/pages/book.astro | 4 +- src/pages/briefing/index.astro | 2 +- src/pages/guides/index.astro | 2 +- src/pages/index.astro | 130 +++++++++++++-------------- src/pages/podcast/index.astro | 2 +- src/styles/global.css | 8 +- 16 files changed, 230 insertions(+), 131 deletions(-) diff --git a/package-lock.json b/package-lock.json index c6a4f7e..a9d8a2b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,9 @@ "version": "0.1.0", "dependencies": { "@astrojs/rss": "4.0.19", + "@fontsource-variable/inter": "^5.2.8", + "@fontsource-variable/newsreader": "^5.2.10", + "@fontsource/ibm-plex-mono": "^5.2.7", "astro": "7.0.9" }, "devDependencies": { @@ -629,28 +632,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@emnapi/core": { - "version": "1.11.2", - "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.2.tgz", - "integrity": "sha512-TC8MkTuZUtcTSiFeuC0ksCh9QIJ5+F21MvZ4Wn4ORfYaFJ/0dsiudv5tVkejgwZlwQ39jL9WWDe2lz8x0WglOA==", - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "@emnapi/wasi-threads": "1.2.2", - "tslib": "^2.4.0" - } - }, - "node_modules/@emnapi/runtime": { - "version": "1.11.2", - "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.2.tgz", - "integrity": "sha512-kyOl3X0DuTiT1h2ft8r2fYO8JYtU9a9Xis/zBSiGArNaagCOWx90N1k2wxp18czFDH+OgcWGb5ZP/XMt3dcyPA==", - "license": "MIT", - "optional": true, - "dependencies": { - "tslib": "^2.4.0" - } - }, "node_modules/@emnapi/wasi-threads": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz", @@ -1077,6 +1058,33 @@ "node": ">=18" } }, + "node_modules/@fontsource-variable/inter": { + "version": "5.2.8", + "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.2.8.tgz", + "integrity": "sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, + "node_modules/@fontsource-variable/newsreader": { + "version": "5.2.10", + "resolved": "https://registry.npmjs.org/@fontsource-variable/newsreader/-/newsreader-5.2.10.tgz", + "integrity": "sha512-MdI2iRwrqWpMOU/2aV2BgfZ4dJNlj/XlYaY8Zb7t87mWqHskYW0XiUANkt1cyOCiEfW2VQ0bQ5vZgGPp6B2B4w==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, + "node_modules/@fontsource/ibm-plex-mono": { + "version": "5.2.7", + "resolved": "https://registry.npmjs.org/@fontsource/ibm-plex-mono/-/ibm-plex-mono-5.2.7.tgz", + "integrity": "sha512-MKAb8qV+CaiMQn2B0dIi1OV3565NYzp3WN5b4oT6LTkk+F0jR6j0ZN+5BKJiIhffDC3rtBULsYZE65+0018z9w==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@img/colour": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz", @@ -2078,6 +2086,7 @@ "integrity": "sha512-nxAkRSVkN1Y0JC1W8ky/fTfkGsMmcrRsbx+3XoZE+rMOX71kLYTV7fLXpqud1GpbpP5TuffXFqfX7fH2GgZREw==", "devOptional": true, "license": "MIT", + "peer": true, "dependencies": { "undici-types": "~8.3.0" } @@ -2205,6 +2214,7 @@ "integrity": "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -2857,6 +2867,7 @@ "integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==", "hasInstallScript": true, "license": "MIT", + "peer": true, "bin": { "esbuild": "bin/esbuild" }, @@ -4016,6 +4027,7 @@ "integrity": "sha512-/FVl766LpUfB5vXgCYOYa0MeV/441Ia99AeICQIQFTY/Nw0roZwULcXpku5i1/m5kt/baz+s4Zogspd839HSMg==", "dev": true, "license": "MIT", + "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -4494,6 +4506,7 @@ "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==", "dev": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -4806,6 +4819,7 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-8.1.4.tgz", "integrity": "sha512-bTT9PsdWO+MQMNG9ZXIP/qM9wGh37DFxTV/sPq9cFpHr3w4jkgef032PkAL9jAqhk3Nz8NQw3O8n6/xFkqO4QQ==", "license": "MIT", + "peer": true, "dependencies": { "lightningcss": "^1.32.0", "picomatch": "^4.0.5", @@ -5245,6 +5259,7 @@ "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==", "devOptional": true, "license": "ISC", + "peer": true, "bin": { "yaml": "bin.mjs" }, diff --git a/package.json b/package.json index 60883fe..fe596ea 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,9 @@ }, "dependencies": { "@astrojs/rss": "4.0.19", + "@fontsource-variable/inter": "^5.2.8", + "@fontsource-variable/newsreader": "^5.2.10", + "@fontsource/ibm-plex-mono": "^5.2.7", "astro": "7.0.9" }, "devDependencies": { diff --git a/src/components/Footer.astro b/src/components/Footer.astro index c907aca..ee6a242 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -48,7 +48,7 @@ import { site } from '../site.config'; .footer-title { color: var(--paper); - font-family: 'Newsreader', Georgia, serif; + font-family: 'Newsreader Variable', Georgia, serif; font-size: 2rem; line-height: 1; } diff --git a/src/components/Header.astro b/src/components/Header.astro index 0f7c430..485fb4f 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -86,7 +86,7 @@ import { navigation, site } from '../site.config'; } .masthead strong { - font-family: 'Newsreader', Georgia, serif; + font-family: 'Newsreader Variable', Georgia, serif; font-size: 1.55rem; letter-spacing: -0.03em; } diff --git a/src/components/MaintenanceMeta.astro b/src/components/MaintenanceMeta.astro index 5dbeff9..c5864fc 100644 --- a/src/components/MaintenanceMeta.astro +++ b/src/components/MaintenanceMeta.astro @@ -12,6 +12,10 @@ interface Props { } const { author, maintainers, published, reviewed, status, sourcePath } = Astro.props; + +const REVIEW_DUE_DAYS = 180; +const reviewAgeDays = Math.floor((Date.now() - reviewed.getTime()) / 86_400_000); +const reviewDue = reviewAgeDays > REVIEW_DUE_DAYS; ---
@@ -19,22 +23,25 @@ const { author, maintainers, published, reviewed, status, sourcePath } = Astro.p
By
{author}
-
-
Published
-
-
Last reviewed
-
-
-
-
Maintained by
-
{maintainers.join(', ')}
+
+ + {reviewDue && review due} +
Status
{status}
+
+
Published
+
+
+
+
Maintained by
+
{maintainers.join(', ')}
+
Record
Source file ↗
@@ -66,6 +73,16 @@ const { author, maintainers, published, reviewed, status, sourcePath } = Astro.p font-weight: 600; } + .review-due { + margin-left: 0.5rem; + color: var(--amend); + font-family: 'IBM Plex Mono', monospace; + font-size: 0.62rem; + font-weight: 500; + letter-spacing: 0.06em; + text-transform: uppercase; + } + .status { display: inline-flex; align-items: center; diff --git a/src/components/StoryCard.astro b/src/components/StoryCard.astro index 4163035..2c0ad43 100644 --- a/src/components/StoryCard.astro +++ b/src/components/StoryCard.astro @@ -8,15 +8,23 @@ interface Props { } const { entry, featured = false } = Astro.props; +const pattern = entry.data.trustPattern; +const status = entry.data.status; +const nodes = pattern + ? ['CLAIM', 'TRUSTED', 'FAILURE'] + : ['PERSON', 'SYSTEM', 'CONSEQUENCE']; ---
- @@ -63,74 +67,61 @@ const latestEpisode = episodes[0];
-
-
-

Listen

- Podcast archive → -
-
-
+ )} -
-
-

Field guides

- All guides → -
- {guides.length > 0 ? ( + {guides.length > 0 && ( +
+
+

Field guides

+ All guides → +
- {guides.slice(0, 3).map((guide, index) => ( + {guides.slice(0, 3).map((guide) => (
- 0{index + 1} + Reviewed {formatDate(guide.data.reviewed)}

{guide.data.title}

{guide.data.description}

- Reviewed {formatDate(guide.data.reviewed)}
))}
- ) : ( -
- {['Passkeys', 'Government wallets', 'Agent authority'].map((title, index) => ( -
- 0{index + 1} -

{title}

-

In preparation. Published only when the review date means something.

-
- ))} -
- )} -
+
+ )} -
- -
-

The book

-

A permanent home, not a checkout widget.

-

The book page is ready for its real title, cover, sample chapter, argument, and purchase route—without inventing details before they are supplied.

- Visit the book page -
-
+ {site.book.enabled && ( +
+ +
+

The book

+

{site.book.title}

+

{site.book.description}

+ Visit the book page +
+
+ )}
+

+ Planned but not yet real: the podcast{site.book.enabled ? '' : ', the book'}, and more guides. + Nothing ships here before it exists — see the roadmap ↗ +

@@ -153,7 +144,7 @@ const latestEpisode = episodes[0]; } .hero-note p:first-child { - font-family: 'Newsreader', Georgia, serif; + font-family: 'Newsreader Variable', Georgia, serif; font-size: 1.45rem; line-height: 1.2; } @@ -197,7 +188,7 @@ const latestEpisode = episodes[0]; .guide-grid h3, .book-strip h2 { margin: 0.35rem 0; - font-family: 'Newsreader', Georgia, serif; + font-family: 'Newsreader Variable', Georgia, serif; font-weight: 600; letter-spacing: -0.025em; line-height: 1; @@ -292,10 +283,13 @@ const latestEpisode = episodes[0]; border-right: 0; } - .guide-number { - color: var(--amend); + .guide-reviewed { + display: block; + color: var(--muted); font-family: 'IBM Plex Mono', monospace; - font-size: 0.72rem; + font-size: 0.65rem; + letter-spacing: 0.05em; + text-transform: uppercase; } .guide-grid h3 { @@ -303,18 +297,14 @@ const latestEpisode = episodes[0]; font-size: 2rem; } - .guide-grid p, - .guide-grid small { + .guide-grid p { color: var(--muted); } - .guide-grid small { - font-family: 'IBM Plex Mono', monospace; - font-size: 0.65rem; - } - - .planned article { - opacity: 0.75; + .planned-note { + margin: 2rem 0 0; + color: var(--muted); + font-size: 0.85rem; } .book-strip { @@ -335,7 +325,7 @@ const latestEpisode = episodes[0]; border: 1px solid #7690ad; box-shadow: 18px 18px 0 #0e2c51; background: #102f55; - font-family: 'Newsreader', Georgia, serif; + font-family: 'Newsreader Variable', Georgia, serif; font-size: 2.5rem; line-height: 0.9; text-align: center; diff --git a/src/pages/podcast/index.astro b/src/pages/podcast/index.astro index 7a98b1c..741b4a2 100644 --- a/src/pages/podcast/index.astro +++ b/src/pages/podcast/index.astro @@ -47,7 +47,7 @@ const entries = newestFirst(await getCollection('episodes', ({ data }) => !data. .episode-list { margin-top: 6rem; } .episode-list article { display: grid; grid-template-columns: 4rem 1fr 8rem; gap: 2rem; padding: 2rem 0; border-bottom: 1px solid var(--rule); } .episode-list article > span, time { color: var(--muted); font-family: 'IBM Plex Mono', monospace; font-size: .7rem; } - h3 { margin: 0; font-family: 'Newsreader', Georgia, serif; font-size: 2.3rem; line-height: 1; } + h3 { margin: 0; font-family: 'Newsreader Variable', Georgia, serif; font-size: 2.3rem; line-height: 1; } h3 a { text-decoration: none; } .episode-list p { color: var(--muted); } @media (max-width: 700px) { .podcast-grid { grid-template-columns: 1fr; } .episode-list article { grid-template-columns: 2rem 1fr; } time { grid-column: 2; } } diff --git a/src/styles/global.css b/src/styles/global.css index e4ce166..749717d 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -10,7 +10,7 @@ --max: 1180px; --reading: 720px; color-scheme: light; - font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + font-family: 'Inter Variable', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-synthesis: none; background: var(--paper); color: var(--ink); @@ -73,7 +73,7 @@ select { .display { margin: 0; - font-family: 'Newsreader', Georgia, serif; + font-family: 'Newsreader Variable', Georgia, serif; font-size: clamp(2.8rem, 7vw, 6.5rem); font-weight: 500; letter-spacing: -0.045em; @@ -82,7 +82,7 @@ select { .section-title { margin: 0; - font-family: 'Newsreader', Georgia, serif; + font-family: 'Newsreader Variable', Georgia, serif; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 600; letter-spacing: -0.025em; @@ -136,7 +136,7 @@ select { .prose { width: min(100%, var(--reading)); - font-family: 'Newsreader', Georgia, serif; + font-family: 'Newsreader Variable', Georgia, serif; font-size: clamp(1.15rem, 2.2vw, 1.35rem); line-height: 1.7; }