capsite/potluck: a weekly zine of issues, not a blog
- issues collection (ISO-week slug, week, dek, rich-text body); home, /issues, and /issues/<week> pages; seed/issues.json holds three sketched issues (W38-W40) from public diigo bookmarks, editorial lines marked (draft); issues-sketch.md is the dry run behind them - microformats: h-feed of h-entry lists; an issue is an h-entry (p-name, dt-published, p-summary, e-content); off-site links render as h-cite, /tag/<tag> links as rel-tag p-category (CiteLink.astro) - diigo tags: shown on each bookmark and attached to issues via the tag taxonomy (now posts + issues); /tag/<tag> lists issues - demo blog content gone: posts dropped from the seed, home page lists issues, site title/tagline, footer About widget, and About page rewritten; nav is Home / About / Issues; search and RSS cover issues - .column container gives potluck's pages the header's margins Generated-by: Claude Opus 5.5
This commit is contained in:
dckc committed
1 parent
b9f3156d6d
commit
fd7fd5728d
13 files changed
+2444
-1198
No files matched your search
Vendored
+17
@@ -5,6 +5,22 @@
|
|||||||
|
|
||||||
import type { BylineSummary, ContentBylineCredit, TaxonomyTerm, PortableTextBlock } from "emdash";
|
import type { BylineSummary, ContentBylineCredit, TaxonomyTerm, PortableTextBlock } from "emdash";
|
||||||
|
|
||||||
|
export interface Issue {
|
||||||
|
id: string;
|
||||||
|
slug: string | null;
|
||||||
|
status: string;
|
||||||
|
title: string;
|
||||||
|
week: string;
|
||||||
|
dek?: string;
|
||||||
|
body?: PortableTextBlock[];
|
||||||
|
createdAt: Date;
|
||||||
|
updatedAt: Date;
|
||||||
|
publishedAt: Date | null;
|
||||||
|
byline?: BylineSummary | null;
|
||||||
|
bylines?: ContentBylineCredit[];
|
||||||
|
terms?: Record<string, TaxonomyTerm[]>;
|
||||||
|
}
|
||||||
|
|
||||||
export interface Page {
|
export interface Page {
|
||||||
id: string;
|
id: string;
|
||||||
slug: string | null;
|
slug: string | null;
|
||||||
@@ -37,6 +53,7 @@ export interface Post {
|
|||||||
|
|
||||||
declare module "emdash" {
|
declare module "emdash" {
|
||||||
interface EmDashCollections {
|
interface EmDashCollections {
|
||||||
|
issues: Issue;
|
||||||
pages: Page;
|
pages: Page;
|
||||||
posts: Post;
|
posts: Post;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,139 @@
|
|||||||
|
# potluck: a few weeks of issues, sketched
|
||||||
|
|
||||||
|
A dry run of the zine shape (an `issues` collection, ISO-week slugs, a
|
||||||
|
`blocks` field of typed pieces) against real material: public
|
||||||
|
bookmarks from the diigo public cache, by `created_at`, UTC weeks.
|
||||||
|
Descriptions in quotes are Dan's own diigo descriptions. Everything
|
||||||
|
marked *draft* is a guess at an editorial line, for Dan to rewrite or
|
||||||
|
cut. Sources we don't read yet (social.coop, photos, GitHub, Zotero) are
|
||||||
|
marked as empty plates, not invented.
|
||||||
|
|
||||||
|
Block types used: `note` (rich text), `bookmark` (url, title, comment),
|
||||||
|
`cluster` (a heading over several bookmarks; maybe just a `note` +
|
||||||
|
bookmarks), `plate` (an empty slot for a source not wired yet).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2026-W38 (Sep 14–20): moving into KDE
|
||||||
|
|
||||||
|
**note** *draft:* The workstation moved from MATE to KDE Plasma this
|
||||||
|
week, and the bookmarks show it.
|
||||||
|
|
||||||
|
**cluster: the migration**
|
||||||
|
- **bookmark** [Plasma / PowerDevil · GitLab](https://invent.kde.org/plasma/powerdevil):
|
||||||
|
"wake up, bldbox! oh... MATE was configured to only lock screen, not
|
||||||
|
suspend, on idle. nice: sovereign kde.org domain vs github"
|
||||||
|
- **bookmark** [KDE Identity](https://identity.kde.org): "in addition to
|
||||||
|
my Ubuntu account? hm."
|
||||||
|
- **bookmark** [Plasma 6.7](https://kde.org/announcements/plasma/6/6.7.0/)
|
||||||
|
- **bookmark** [Making Dolphin's compact view denser (r/kde)](https://www.reddit.com/r/kde/comments/16ylic8/comment/k39subf/)
|
||||||
|
- **bookmark** [polkit Reference Manual](https://polkit.pages.freedesktop.org/polkit/polkit.8.html),
|
||||||
|
[Desktop Services (GNU Guix manual)](https://guix.gnu.org/manual/1.5.0/en/html_node/Desktop-Services.html)
|
||||||
|
|
||||||
|
**cluster: AI and the web**
|
||||||
|
- **bookmark** ['Doom Loop': OpenAI and Microsoft admit LLMs are destroying the web (404 Media)](https://www.404media.co/doom-loop-openai-and-microsoft-admits-llms-are-destroying-the-web-and-built-on-theft/)
|
||||||
|
- **bookmark** [OpenAI agents involved in an attack on RubyGems (The Guardian)](https://www.theguardian.com/technology/2026/sep/11/openai-agents-rubygems-malicious-packages)
|
||||||
|
(tagged `invasive-ai`)
|
||||||
|
- **bookmark** [The Agent Development Lifecycle on Cloudflare](https://blog.cloudflare.com/agent-development-lifecycle/),
|
||||||
|
[Artifacts: versioned storage that speaks Git](https://blog.cloudflare.com/artifacts-git-for-agents-beta/)
|
||||||
|
|
||||||
|
**bookmark** [Zotero 10](https://www.zotero.org/blog/zotero-10/)
|
||||||
|
*draft:* (bib sync, #195, gets a new target.)
|
||||||
|
|
||||||
|
**bookmark** [The Message from Deep Space on Steam](https://store.steampowered.com/app/4080030/The_Message_from_Deep_Space/):
|
||||||
|
"Kyle invited me to play. Fun!"
|
||||||
|
|
||||||
|
**plate** social.coop posts this week · **plate** photos
|
||||||
|
|
||||||
|
*Left on the table:* the Costco motor-oil story, Tampermonkey, the
|
||||||
|
inotify sysctl, the KDE screenshot how-to, Geo Tracker,
|
||||||
|
the Gemini exporter.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2026-W39 (Sep 21–27): repair, reuse, and TV night
|
||||||
|
|
||||||
|
**note** *draft:* Kansas City has a whole circular-economy scene I
|
||||||
|
hadn't been paying attention to.
|
||||||
|
|
||||||
|
**cluster: fix it, don't toss it**
|
||||||
|
- **bookmark** [Repair Cafes | Re.Use.Full](https://reusefull.org/repair-cafes/)
|
||||||
|
- **bookmark** [Un-Dumpster Day | Re.Use.Full](https://reusefull.org/un-dumpster-day/)
|
||||||
|
- **bookmark** [Amazon Basics wireless mouse](https://www.amazon.com/dp/B005EJH6Z4):
|
||||||
|
"middle mouse button failed" *draft:* (a repair café candidate?)
|
||||||
|
|
||||||
|
**bookmark** [MATE: no 26.04 release; what is the future of Ubuntu MATE?](https://discourse.ubuntu.com/t/mate-no-26-04-release-how-does-that-affect-you-and-what-is-the-future-of-ubuntu-mate/83877)
|
||||||
|
*draft:* (So last week's move was timely.)
|
||||||
|
|
||||||
|
**bookmark** [We taught sqlc to invalidate our caches (exe.dev)](https://blog.exe.dev/we-taught-sqlc-to-invalidate-our-caches)
|
||||||
|
*draft:* (Relevant: potluck's own diigo cache can't invalidate yet.)
|
||||||
|
|
||||||
|
**cluster: family screens**
|
||||||
|
- **bookmark** [Critical Role](https://critrole.com)
|
||||||
|
- **bookmark** [Chad Powers (Wikipedia)](https://en.wikipedia.org/wiki/Chad_Powers):
|
||||||
|
"spotter: LQ - see eli manning viral"
|
||||||
|
|
||||||
|
**plate** social.coop · **plate** photos
|
||||||
|
|
||||||
|
*Left on the table:* the Spotify playlist API reference, Evergy HVAC
|
||||||
|
discounts.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2026-W40 (Sep 28–Oct 4): co-ops, protocols, and where to host
|
||||||
|
|
||||||
|
**note** *draft:* A week of reading about cooperatives and the
|
||||||
|
protocols they might run on, and about owning your own bookmarks,
|
||||||
|
which is what this zine is made of.
|
||||||
|
|
||||||
|
**cluster: cooperative economics**
|
||||||
|
- **bookmark** [co/core: an AI cooperative](https://cocore.dev) and
|
||||||
|
[How the co/core economy is shaped, and why](https://cocore.dev/blog/token-market-design)
|
||||||
|
- **bookmark** [Designing for the Economy of Involvement in Co-ops (MEDLab, CU Boulder)](https://www.colorado.edu/lab/medlab/2023/03/27/designing-economy-involvement-co-ops-0)
|
||||||
|
- **bookmark** [Transkribus](https://www.transkribus.org): run by a
|
||||||
|
cooperative
|
||||||
|
|
||||||
|
**cluster: own your bookmarks, AT Protocol edition**
|
||||||
|
- **bookmark** [kipclip: own your bookmarks, a Pinboard alternative on AT Protocol](https://kipclip.com):
|
||||||
|
"does it do annotations / highlights?"
|
||||||
|
- **bookmark** [Semble: make sense of the web, together](https://semble.so)
|
||||||
|
- **bookmark** [Graze: custom feed builder for Bluesky](https://www.graze.social)
|
||||||
|
- **bookmark** [AT Protocol account recovery](https://atproto.com/guides/account-recovery),
|
||||||
|
[First steps of the PLC organization](https://blog.plcred.org/3mwlphq42d227)
|
||||||
|
|
||||||
|
**cluster: where to host**
|
||||||
|
- **bookmark** [Hetzner Storage Box](https://www.hetzner.com/storage/storage-box/),
|
||||||
|
[Infomaniak (Wikipedia)](https://en.wikipedia.org/wiki/Infomaniak),
|
||||||
|
[Cloudron pricing](https://www.cloudron.io/pricing.html)
|
||||||
|
- **bookmark** [NearlyFreeSpeech.NET turns 20](https://blog.nearlyfreespeech.net/2022/01/18/nearlyfreespeech-net-turns-20-today/)
|
||||||
|
and [automatic TLS](https://blog.nearlyfreespeech.net/2024/05/10/automatic-tls-is-now-a-thing/)
|
||||||
|
|
||||||
|
**bookmark** [Material Flow Analysis of discarded materials, KC metro](https://regeneration.us/material-flow-analysis-of-discarded-materials-in-the-kansas-city-metropolitan-area/)
|
||||||
|
*draft:* (continuing W39's thread)
|
||||||
|
|
||||||
|
**plate** social.coop · **plate** GitHub activity (potluck itself
|
||||||
|
started this week)
|
||||||
|
|
||||||
|
*Left on the table:* AgentsView, freeq, Rivet self-host, the R5contrib
|
||||||
|
FTP index ("XcRichText-1.5.tar.Z"), the Sygil draft, the AT Protocol
|
||||||
|
Wikipedia page.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## What the sketch says about the schema
|
||||||
|
|
||||||
|
- **Clusters happen every week.** A heading over 2–5 bookmarks is the
|
||||||
|
natural unit, more than the lone bookmark. So either a `cluster`
|
||||||
|
block type (heading + list of bookmarks, via a repeater), or a
|
||||||
|
`note` block used as a heading. A repeater inside a block is
|
||||||
|
supported; references are not, so bookmarks are copies.
|
||||||
|
- **Threads span weeks** (KDE: W38 → W39; circular economy: W39 →
|
||||||
|
W40). A light "continuing from W39" link is enough; no new type.
|
||||||
|
- **"Left on the table" matters**: the editorial step is mostly
|
||||||
|
*leaving out*. The draft generator should propose everything for
|
||||||
|
the week and let Dan cut, not pick for him.
|
||||||
|
- **Duplicates** (Graze twice, utm-tagged URLs) need a URL
|
||||||
|
normalization pass before drafting.
|
||||||
|
- **Annotations are the best commentary.** Policy (goal 1g in the
|
||||||
|
capsite checklist): notes on public items are public too, so they're
|
||||||
|
fair to quote; this sketch didn't use them yet.
|
||||||
File diff suppressed because it is too large.
Load diff
+64
-617
@@ -7,8 +7,8 @@
|
|||||||
"author": "EmDash"
|
"author": "EmDash"
|
||||||
},
|
},
|
||||||
"settings": {
|
"settings": {
|
||||||
"title": "My Blog",
|
"title": "potluck",
|
||||||
"tagline": "Thoughts on building for the web"
|
"tagline": "A weekly zine: everyone brings a dish"
|
||||||
},
|
},
|
||||||
"collections": [
|
"collections": [
|
||||||
{
|
{
|
||||||
@@ -94,7 +94,7 @@
|
|||||||
"label": "Tags",
|
"label": "Tags",
|
||||||
"labelSingular": "Tag",
|
"labelSingular": "Tag",
|
||||||
"hierarchical": false,
|
"hierarchical": false,
|
||||||
"collections": ["posts"],
|
"collections": ["posts", "issues"],
|
||||||
"terms": [
|
"terms": [
|
||||||
{
|
{
|
||||||
"slug": "webdev",
|
"slug": "webdev",
|
||||||
@@ -145,8 +145,8 @@
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "custom",
|
"type": "custom",
|
||||||
"label": "Posts",
|
"label": "Issues",
|
||||||
"url": "/posts"
|
"url": "/issues"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -207,7 +207,7 @@
|
|||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
"_type": "span",
|
"_type": "span",
|
||||||
"text": "A blog about software, design, and the occasional stray thought.",
|
"text": "A weekly zine: everyone brings a dish. Bookmarks and notes from the week, gathered and trimmed.",
|
||||||
"_key": "k1"
|
"_key": "k1"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
@@ -285,652 +285,99 @@
|
|||||||
"content": [
|
"content": [
|
||||||
{
|
{
|
||||||
"_type": "block",
|
"_type": "block",
|
||||||
|
"_key": "k1",
|
||||||
"style": "normal",
|
"style": "normal",
|
||||||
|
"markDefs": [],
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
"_type": "span",
|
"_type": "span",
|
||||||
"text": "A place for writing about software, design, and the occasional stray thought. No posting schedule, no newsletter funnel. Just things I wanted to write down.",
|
"_key": "k0",
|
||||||
"_key": "k1"
|
"text": "potluck is a weekly zine. Everyone brings a dish: each source contributes what it found that week, and an issue is the table they share.",
|
||||||
|
"marks": []
|
||||||
}
|
}
|
||||||
],
|
]
|
||||||
"_key": "k0"
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"_type": "block",
|
"_type": "block",
|
||||||
|
"_key": "k6",
|
||||||
"style": "normal",
|
"style": "normal",
|
||||||
|
"markDefs": [
|
||||||
|
{
|
||||||
|
"_key": "k3",
|
||||||
|
"_type": "link",
|
||||||
|
"href": "https://www.diigo.com/user/dckc-madmode"
|
||||||
|
}
|
||||||
|
],
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
"_type": "span",
|
"_type": "span",
|
||||||
"text": "Built with Astro and EmDash. The source is open if you want to see how it works.",
|
"_key": "k2",
|
||||||
"_key": "k3"
|
"text": "Right now the dishes are bookmarks from ",
|
||||||
}
|
"marks": []
|
||||||
],
|
},
|
||||||
"_key": "k2"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"posts": [
|
|
||||||
{
|
|
||||||
"id": "post-1",
|
|
||||||
"slug": "building-for-the-long-term",
|
|
||||||
"status": "published",
|
|
||||||
"data": {
|
|
||||||
"title": "Building for the Long Term",
|
|
||||||
"excerpt": "The frameworks will change. The databases will change. What survives is the clarity of your thinking.",
|
|
||||||
"featured_image": {
|
|
||||||
"$media": {
|
|
||||||
"url": "https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=1200&h=800&fit=crop",
|
|
||||||
"alt": "Code on a monitor in a dark room",
|
|
||||||
"filename": "building-long-term.jpg"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"content": [
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
{
|
||||||
"_type": "span",
|
"_type": "span",
|
||||||
"text": "Every few years the industry collectively decides that everything we've been doing is wrong and there's a better way. New frameworks, new paradigms, new build tools. The churn is relentless, and if you're not careful, you spend more time migrating than building.",
|
"_key": "k4",
|
||||||
"_key": "k1"
|
"text": "diigo",
|
||||||
|
"marks": [
|
||||||
|
"k3"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"_type": "span",
|
||||||
|
"_key": "k5",
|
||||||
|
"text": ", with their tags. Posts from social.coop, photos, and new Zotero items are meant to join them. Each issue is a draft first: everything from the week is proposed, then trimmed by hand and given a few lines of commentary.",
|
||||||
|
"marks": []
|
||||||
}
|
}
|
||||||
],
|
]
|
||||||
"_key": "k0"
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"_type": "block",
|
"_type": "block",
|
||||||
|
"_key": "k8",
|
||||||
"style": "normal",
|
"style": "normal",
|
||||||
|
"markDefs": [],
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
"_type": "span",
|
"_type": "span",
|
||||||
"text": "I've been writing software long enough to have seen several of these cycles. jQuery to Backbone to Angular to React to whatever comes next. Each transition felt urgent at the time. Looking back, the things that actually mattered were rarely about the framework.",
|
"_key": "k7",
|
||||||
"_key": "k3"
|
"text": "The name is about cooperation without vulnerability: at a potluck you share food without letting anyone into your kitchen. The software behind it works the same way, with each source passing finished dishes rather than handing over its keys.",
|
||||||
|
"marks": []
|
||||||
}
|
}
|
||||||
],
|
]
|
||||||
"_key": "k2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "h2",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "What survives",
|
|
||||||
"_key": "k5"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k4"
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"_type": "block",
|
"_type": "block",
|
||||||
|
"_key": "kd",
|
||||||
"style": "normal",
|
"style": "normal",
|
||||||
|
"markDefs": [
|
||||||
|
{
|
||||||
|
"_key": "ka",
|
||||||
|
"_type": "link",
|
||||||
|
"href": "https://www.madmode.com/"
|
||||||
|
}
|
||||||
|
],
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
"_type": "span",
|
"_type": "span",
|
||||||
"text": "Clean data models survive. Clear boundaries between systems survive. Good naming survives. The decision to keep things simple when you could have made them clever - that definitely survives.",
|
"_key": "k9",
|
||||||
"_key": "k7"
|
"text": "potluck is a sibling of ",
|
||||||
}
|
"marks": []
|
||||||
],
|
},
|
||||||
"_key": "k6"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
{
|
||||||
"_type": "span",
|
"_type": "span",
|
||||||
"text": "What doesn't survive is code that was written to impress, abstractions built for problems that never materialized, and architectures designed around a framework's opinions rather than the domain's reality.",
|
"_key": "kb",
|
||||||
"_key": "k9"
|
"text": "madmode.com",
|
||||||
}
|
"marks": [
|
||||||
],
|
"ka"
|
||||||
"_key": "k8"
|
]
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
{
|
||||||
"_type": "span",
|
"_type": "span",
|
||||||
"text": "The best code I've written is boring. It reads like prose, does one thing well, and doesn't require a PhD in category theory to understand. The worst code I've written was technically impressive at the time.",
|
"_key": "kc",
|
||||||
"_key": "k11"
|
"text": ", Dan Connolly's tinkering lab notebook.",
|
||||||
|
"marks": []
|
||||||
}
|
}
|
||||||
],
|
]
|
||||||
"_key": "k10"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"bylines": [
|
|
||||||
{
|
|
||||||
"byline": "byline-editorial"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"byline": "byline-guest",
|
|
||||||
"roleLabel": "Guest essay"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"taxonomies": {
|
|
||||||
"category": ["development"],
|
|
||||||
"tag": ["opinion"]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "post-2",
|
|
||||||
"slug": "the-case-for-static",
|
|
||||||
"status": "published",
|
|
||||||
"data": {
|
|
||||||
"title": "The Case for Static",
|
|
||||||
"excerpt": "Static sites aren't a step backwards. They're what you get when you take performance and simplicity seriously.",
|
|
||||||
"featured_image": {
|
|
||||||
"$media": {
|
|
||||||
"url": "https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=1200&h=800&fit=crop",
|
|
||||||
"alt": "Laptop and coffee on a wooden table",
|
|
||||||
"filename": "case-for-static.jpg"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"content": [
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "There's a certain irony in the fact that the web started static, went dynamic, and is now swinging back toward static again. But the static sites of today aren't the hand-coded HTML pages of 1998. They're generated, optimized, and deployed to edge networks that serve them in milliseconds.",
|
|
||||||
"_key": "k1"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k0"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "The pitch for server-rendered everything was compelling: dynamic content, personalization, real-time data. But most sites don't need most of that most of the time. A blog post doesn't need to be rendered on every request. A product page doesn't change every second.",
|
|
||||||
"_key": "k3"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "h2",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "The performance argument",
|
|
||||||
"_key": "k5"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k4"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "A static file served from a CDN is as fast as the web gets. No cold starts, no database queries, no server-side rendering overhead. The Time to First Byte is essentially the network latency to your nearest edge node. You can't beat physics.",
|
|
||||||
"_key": "k7"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k6"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "And when you do need dynamic behavior, you can add it surgically. An island of interactivity in a sea of static HTML. The best of both worlds, without paying the cost of either at all times.",
|
|
||||||
"_key": "k9"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k8"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"bylines": [
|
|
||||||
{
|
|
||||||
"byline": "byline-editorial"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"taxonomies": {
|
|
||||||
"category": ["development"],
|
|
||||||
"tag": ["webdev", "opinion"]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "post-3",
|
|
||||||
"slug": "learning-in-public",
|
|
||||||
"status": "published",
|
|
||||||
"data": {
|
|
||||||
"title": "Learning in Public",
|
|
||||||
"excerpt": "Writing about what you're learning is the fastest way to find out what you don't actually understand.",
|
|
||||||
"featured_image": {
|
|
||||||
"$media": {
|
|
||||||
"url": "https://images.unsplash.com/photo-1432821596592-e2c18b78144f?w=1200&h=800&fit=crop",
|
|
||||||
"alt": "Notebook and pen on a desk",
|
|
||||||
"filename": "learning-in-public.jpg"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"content": [
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "I started writing about things I was learning not because I had anything original to say, but because I kept forgetting what I'd figured out. The blog posts were notes to my future self, published publicly more out of laziness than courage.",
|
|
||||||
"_key": "k1"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k0"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "What I didn't expect was how much the writing itself would accelerate the learning. There's a particular kind of clarity that comes from trying to explain something to someone else. The gaps in your understanding, which you can happily ignore when the knowledge lives only in your head, become painfully obvious when you try to put it into sentences.",
|
|
||||||
"_key": "k3"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "h2",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "The fear of being wrong",
|
|
||||||
"_key": "k5"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k4"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "The biggest barrier isn't time or writing skill. It's the fear of publishing something that turns out to be wrong. But here's the thing: being wrong publicly is one of the most efficient ways to learn. Someone will correct you, often kindly, and you'll remember that correction forever.",
|
|
||||||
"_key": "k7"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k6"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "The posts that helped me most weren't written by experts. They were written by people one step ahead of me on the same path, in language that hadn't yet been polished into abstraction. There's a place for that kind of writing, and it's more valuable than most people realize.",
|
|
||||||
"_key": "k9"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k8"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"taxonomies": {
|
|
||||||
"category": ["notes"],
|
|
||||||
"tag": ["opinion"]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "post-4",
|
|
||||||
"slug": "small-tools-big-impact",
|
|
||||||
"status": "published",
|
|
||||||
"data": {
|
|
||||||
"title": "Small Tools, Big Impact",
|
|
||||||
"excerpt": "The best developer tools do one thing well and get out of your way. A love letter to focused software.",
|
|
||||||
"featured_image": {
|
|
||||||
"$media": {
|
|
||||||
"url": "https://images.unsplash.com/photo-1575026615908-666710ae5e47?w=1200&h=800&fit=crop",
|
|
||||||
"alt": "Wrenches and hand tools hanging on a workshop wall",
|
|
||||||
"filename": "small-tools.jpg"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"content": [
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "There's a class of software that doesn't get enough appreciation. Not the frameworks or the platforms or the IDEs, but the small, sharp tools that solve one problem so well you stop thinking about them. They become invisible, which is the highest compliment you can pay a tool.",
|
|
||||||
"_key": "k1"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k0"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "I'm talking about things like ripgrep, which searches code so fast it changed how I think about searching. Or jq, which makes JSON feel like a first-class data format in the terminal. Or curl, which has been quietly powering the internet's plumbing for decades.",
|
|
||||||
"_key": "k3"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "h2",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "The Unix philosophy, revisited",
|
|
||||||
"_key": "k5"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k4"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "Do one thing well. The advice is old enough to be a cliche, but the best modern tools still follow it. They don't try to be platforms. They don't have plugin ecosystems or configuration languages or startup wizards. They do their job and they compose with other tools that do theirs.",
|
|
||||||
"_key": "k7"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k6"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "The temptation is always to add more. One more feature, one more option, one more integration. But every addition is a decision someone has to make, a path through the code that has to be maintained, a thing that can break. The best tools resist this. They stay small, and in staying small, they stay reliable.",
|
|
||||||
"_key": "k9"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k8"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"taxonomies": {
|
|
||||||
"category": ["development"],
|
|
||||||
"tag": ["tools"]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "post-5",
|
|
||||||
"slug": "designing-with-constraints",
|
|
||||||
"status": "published",
|
|
||||||
"data": {
|
|
||||||
"title": "Designing with Constraints",
|
|
||||||
"excerpt": "Limitations aren't obstacles to creativity. They're the structure that makes creativity possible.",
|
|
||||||
"featured_image": {
|
|
||||||
"$media": {
|
|
||||||
"url": "https://images.unsplash.com/photo-1513542789411-b6a5d4f31634?w=1200&h=800&fit=crop",
|
|
||||||
"alt": "Pencils and design tools on a desk",
|
|
||||||
"filename": "designing-with-constraints.jpg"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"content": [
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "Give a designer a blank canvas and unlimited time, and they'll often produce something mediocre. Give them a tight brief, a small screen, and a deadline, and they'll surprise you. This isn't a paradox - it's how creativity actually works.",
|
|
||||||
"_key": "k1"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k0"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "Constraints force decisions. When you can't use more than two typefaces, you have to choose carefully. When the page has to load in under a second, every element earns its place. When the interface has to work on a 320px screen, you discover what's truly essential.",
|
|
||||||
"_key": "k3"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "h2",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "Embracing the box",
|
|
||||||
"_key": "k5"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k4"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "The web itself is a constraint. HTML flows in one direction. CSS has a box model. Browsers have viewport sizes and font rendering quirks. You can fight these constraints or you can work with them, and the results are dramatically different.",
|
|
||||||
"_key": "k7"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k6"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "The designs I admire most don't look like they were forced through a framework. They look like they grew naturally from the medium, respecting its grain rather than working against it. That only happens when you treat constraints as creative partners rather than enemies.",
|
|
||||||
"_key": "k9"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k8"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"taxonomies": {
|
|
||||||
"category": ["design"],
|
|
||||||
"tag": ["creativity"]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "post-6",
|
|
||||||
"slug": "a-weekend-with-a-side-project",
|
|
||||||
"status": "published",
|
|
||||||
"data": {
|
|
||||||
"title": "A Weekend with a Side Project",
|
|
||||||
"excerpt": "No stakeholders, no deadlines, no Jira tickets. Just you and a dumb idea that might turn into something.",
|
|
||||||
"featured_image": {
|
|
||||||
"$media": {
|
|
||||||
"url": "https://images.unsplash.com/photo-1542831371-29b0f74f9713?w=1200&h=800&fit=crop",
|
|
||||||
"alt": "Code on a screen with a dark theme",
|
|
||||||
"filename": "weekend-side-project.jpg"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"content": [
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "Saturday morning. Coffee's made, the house is quiet, and I've got an idea that's been nagging at me all week. Not a good idea, necessarily - just a persistent one. A small tool that does a thing I keep doing manually. How hard could it be?",
|
|
||||||
"_key": "k1"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k0"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "This is the best kind of programming. No requirements document, no sprint planning, no pull request reviews. Just a text editor and a problem. The freedom to make terrible architectural decisions, rewrite everything twice, and follow tangents that turn out to be dead ends.",
|
|
||||||
"_key": "k3"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "h2",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "Why side projects matter",
|
|
||||||
"_key": "k5"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k4"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "Side projects are where you learn things your day job would never teach you. Not because the problems are harder, but because you're free to take risks. Try a language you've never used. Build something without a framework. Deploy to a platform you've only read about. The stakes are zero, which makes the learning maximum.",
|
|
||||||
"_key": "k7"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k6"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "By Sunday evening, the thing sort of works. It's rough, the error handling is nonexistent, and the README is a single sentence. But it solves the problem I set out to solve, and I learned three things I didn't know on Friday. Not a bad weekend.",
|
|
||||||
"_key": "k9"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k8"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"taxonomies": {
|
|
||||||
"category": ["development"],
|
|
||||||
"tag": ["creativity"]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "post-7",
|
|
||||||
"slug": "notes-on-simplicity",
|
|
||||||
"status": "published",
|
|
||||||
"data": {
|
|
||||||
"title": "Notes on Simplicity",
|
|
||||||
"excerpt": "Simplicity isn't the absence of complexity. It's the result of understanding a problem well enough to solve it cleanly.",
|
|
||||||
"featured_image": {
|
|
||||||
"$media": {
|
|
||||||
"url": "https://images.unsplash.com/photo-1559051668-e1fa58f25786?w=1200&h=800&fit=crop",
|
|
||||||
"alt": "Geometric pattern carved into white paper",
|
|
||||||
"filename": "notes-on-simplicity.jpg"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"content": [
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "Every piece of software starts simple. A few files, a clear purpose, a small surface area. Then features get added, edge cases get handled, and before long you're looking at something that requires a diagram to understand. This isn't inevitable, but it takes discipline to prevent.",
|
|
||||||
"_key": "k1"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k0"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "The hard part of simplicity isn't the initial design. It's the ongoing resistance to complication. Every feature request, every bug fix, every refactor is an opportunity to add complexity. Saying no is the most important design skill, and the least celebrated.",
|
|
||||||
"_key": "k3"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "h2",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "Removing as a feature",
|
|
||||||
"_key": "k5"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k4"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "The best version of a product often has fewer features than the previous one. Not because features were missing, but because someone had the courage to remove things that weren't earning their keep. Every feature has a cost - in maintenance, in cognitive load, in the weight of the interface.",
|
|
||||||
"_key": "k7"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k6"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "Simplicity is a practice, not a destination. You never arrive at simple. You just keep asking: is this necessary? Could this be clearer? Is there a way to solve this problem by removing something instead of adding something? The answer is yes more often than you'd expect.",
|
|
||||||
"_key": "k9"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k8"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"taxonomies": {
|
|
||||||
"category": ["notes"],
|
|
||||||
"tag": ["opinion"]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "post-draft",
|
|
||||||
"slug": "work-in-progress",
|
|
||||||
"status": "draft",
|
|
||||||
"data": {
|
|
||||||
"title": "Work in Progress",
|
|
||||||
"excerpt": "This post is still being written.",
|
|
||||||
"content": [
|
|
||||||
{
|
|
||||||
"_type": "block",
|
|
||||||
"style": "normal",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"_type": "span",
|
|
||||||
"text": "This is a draft post that won't appear in the public listing.",
|
|
||||||
"_key": "k1"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"_key": "k0"
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,43 @@
|
|||||||
|
---
|
||||||
|
/**
|
||||||
|
* Portable Text link mark for issue bodies: an off-site link is a citation,
|
||||||
|
* marked up as an `h-cite` (name + url) so microformats parsers see each
|
||||||
|
* bookmark; a `/tag/<tag>` link is a rel-tag `p-category` of the issue
|
||||||
|
* (the `#` is CSS, so the category value is the bare tag); other on-site
|
||||||
|
* and anchor links stay plain.
|
||||||
|
*
|
||||||
|
* @see https://microformats.org/wiki/h-cite
|
||||||
|
* @see https://microformats.org/wiki/rel-tag
|
||||||
|
*/
|
||||||
|
export interface Props {
|
||||||
|
node: { markDef: { _type: "link"; _key: string; href: string; blank?: boolean } };
|
||||||
|
}
|
||||||
|
|
||||||
|
const href = Astro.props.node?.markDef?.href ?? "";
|
||||||
|
// only these schemes become hrefs (the stored href is editor input)
|
||||||
|
const safe = /^(https?:|mailto:|\/|#)/i.test(href) ? href : "";
|
||||||
|
const offSite = /^https?:/i.test(safe);
|
||||||
|
const isTag = safe.startsWith("/tag/");
|
||||||
|
---
|
||||||
|
|
||||||
|
{
|
||||||
|
offSite ? (
|
||||||
|
<cite class="h-cite"><a class="u-url p-name" href={safe}><slot /></a></cite>
|
||||||
|
) : isTag ? (
|
||||||
|
<a rel="tag" class="p-category" href={safe}><slot /></a>
|
||||||
|
) : (
|
||||||
|
<a href={safe || undefined}><slot /></a>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
cite {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
a[rel="tag"] {
|
||||||
|
font-size: 90%;
|
||||||
|
}
|
||||||
|
a[rel="tag"]::before {
|
||||||
|
content: "#";
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -126,7 +126,7 @@ const isLoggedIn = !!Astro.locals.user;
|
|||||||
inputClass="site-search-input"
|
inputClass="site-search-input"
|
||||||
resultsClass="site-search-results"
|
resultsClass="site-search-results"
|
||||||
resultClass="site-search-result"
|
resultClass="site-search-result"
|
||||||
collections={["posts", "pages"]}
|
collections={["issues", "pages"]}
|
||||||
/>
|
/>
|
||||||
<div class="nav-links">
|
<div class="nav-links">
|
||||||
{
|
{
|
||||||
|
|||||||
+34
-452
@@ -1,466 +1,48 @@
|
|||||||
---
|
---
|
||||||
import {
|
import { getEmDashCollection } from "emdash";
|
||||||
getEmDashCollection,
|
|
||||||
getTermsForEntries,
|
|
||||||
getSiteSettings,
|
|
||||||
} from "emdash";
|
|
||||||
import { Image } from "emdash/ui";
|
|
||||||
import Base from "../layouts/Base.astro";
|
import Base from "../layouts/Base.astro";
|
||||||
import PostCard from "../components/PostCard.astro";
|
|
||||||
import { getReadingTime } from "../utils/reading-time";
|
|
||||||
import { resolveBlogSiteIdentity } from "../utils/site-identity";
|
|
||||||
|
|
||||||
// Limit to what we render (1 featured + 6 grid). The DB does the slicing
|
const { entries: issues, cacheHint } = await getEmDashCollection("issues", {
|
||||||
// instead of fetching every post and discarding the tail in JS.
|
orderBy: { published_at: "desc" },
|
||||||
const POSTS_PER_PAGE = 7;
|
limit: 12,
|
||||||
|
});
|
||||||
const [{ entries: posts, cacheHint }, settings] = await Promise.all([
|
|
||||||
getEmDashCollection("posts", {
|
|
||||||
orderBy: { published_at: "desc" },
|
|
||||||
limit: POSTS_PER_PAGE + 1, // +1 to detect "view all" need
|
|
||||||
}),
|
|
||||||
getSiteSettings(),
|
|
||||||
]);
|
|
||||||
const { siteTitle, siteTagline } = resolveBlogSiteIdentity(settings);
|
|
||||||
|
|
||||||
if (Astro.cache?.enabled) Astro.cache.set(cacheHint);
|
if (Astro.cache?.enabled) Astro.cache.set(cacheHint);
|
||||||
|
|
||||||
// Trim the lookahead post used to detect overflow
|
|
||||||
const visiblePosts = posts.slice(0, POSTS_PER_PAGE);
|
|
||||||
const hasMorePosts = posts.length > POSTS_PER_PAGE;
|
|
||||||
|
|
||||||
// Find the first post with a featured image for the hero
|
|
||||||
const featuredPost = visiblePosts.find((p) => p.data.featured_image);
|
|
||||||
const featuredIndex = featuredPost ? visiblePosts.indexOf(featuredPost) : -1;
|
|
||||||
|
|
||||||
// Get remaining posts (exclude featured if found, limit to 6 for grid)
|
|
||||||
const gridPosts = visiblePosts
|
|
||||||
.filter((_, i) => i !== featuredIndex)
|
|
||||||
.slice(0, 6);
|
|
||||||
|
|
||||||
// Single batched query for tags across the featured post + grid posts.
|
|
||||||
// Avoids the N+1 pattern of calling getEntryTerms() per entry.
|
|
||||||
// Bylines are already hydrated on entry.data.bylines by getEmDashCollection.
|
|
||||||
const tagEntryIds = [
|
|
||||||
...(featuredPost ? [featuredPost.data.id] : []),
|
|
||||||
...gridPosts.map((p) => p.data.id),
|
|
||||||
];
|
|
||||||
const tagsByEntry = await getTermsForEntries("posts", tagEntryIds, "tag");
|
|
||||||
|
|
||||||
const featuredTags = featuredPost
|
|
||||||
? (tagsByEntry.get(featuredPost.data.id) ?? []).map((t) => ({
|
|
||||||
slug: t.slug,
|
|
||||||
label: t.label,
|
|
||||||
}))
|
|
||||||
: [];
|
|
||||||
const featuredBylines = featuredPost?.data.bylines ?? [];
|
|
||||||
|
|
||||||
const gridPostsWithTags = gridPosts.map((post) => ({
|
|
||||||
post,
|
|
||||||
tags: (tagsByEntry.get(post.data.id) ?? []).map((t) => ({
|
|
||||||
slug: t.slug,
|
|
||||||
label: t.label,
|
|
||||||
})),
|
|
||||||
bylines: post.data.bylines ?? [],
|
|
||||||
}));
|
|
||||||
|
|
||||||
// Format date helper
|
|
||||||
function formatDate(date: Date | null | undefined) {
|
|
||||||
if (!date) return null;
|
|
||||||
return date.toLocaleDateString("en-US", {
|
|
||||||
year: "numeric",
|
|
||||||
month: "long",
|
|
||||||
day: "numeric",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<Base title={siteTitle} description={siteTagline}>
|
<Base title="potluck" description="A weekly zine: everyone brings a dish">
|
||||||
{
|
<div class="column">
|
||||||
posts.length === 0 ? (
|
<h1>potluck</h1>
|
||||||
<section class="empty-state">
|
<p>A weekly zine: everyone brings a dish.</p>
|
||||||
<h1>No posts yet</h1>
|
{
|
||||||
<p>Create your first post in the admin panel.</p>
|
issues.length === 0 ? (
|
||||||
<a href="/_emdash/admin/content/posts/new" class="btn">
|
<p>No issues yet.</p>
|
||||||
Create a post
|
) : (
|
||||||
</a>
|
<ul class="h-feed">
|
||||||
</section>
|
{issues.map((issue) => (
|
||||||
) : (
|
<li class="h-entry">
|
||||||
<div class="home-content">
|
<span class="week">{issue.data.week}</span>{" "}
|
||||||
{/* Featured Post - Side by side */}
|
<a class="u-url p-name" href={`/issues/${issue.id}`}>{issue.data.title}</a>
|
||||||
{featuredPost && (
|
{issue.data.dek && <>: <span class="p-summary">{issue.data.dek}</span></>}
|
||||||
<section class="featured-section">
|
</li>
|
||||||
<div class="featured-grid">
|
))}
|
||||||
<a href={`/posts/${featuredPost.id}`} class="featured-image-link">
|
</ul>
|
||||||
<div class="featured-image" {...featuredPost.edit.featured_image}>
|
)
|
||||||
<Image image={featuredPost.data.featured_image} />
|
}
|
||||||
</div>
|
<p><a href="/issues">all issues</a></p>
|
||||||
</a>
|
</div>
|
||||||
<div class="featured-content">
|
|
||||||
<div class="featured-meta">
|
|
||||||
{featuredBylines.length > 0 && (
|
|
||||||
<>
|
|
||||||
<div class="featured-bylines">
|
|
||||||
{featuredBylines.slice(0, 2).map((credit, index) => (
|
|
||||||
<>
|
|
||||||
{index > 0 && <span class="byline-sep">,</span>}
|
|
||||||
<span class="featured-byline">
|
|
||||||
{credit.byline.avatarMediaId && (
|
|
||||||
<img
|
|
||||||
src={`/_emdash/api/media/file/${credit.byline.avatarMediaId}`}
|
|
||||||
alt={credit.byline.displayName}
|
|
||||||
class="featured-byline-avatar"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<span class="featured-byline-name">
|
|
||||||
{credit.byline.displayName}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</>
|
|
||||||
))}
|
|
||||||
{featuredBylines.length > 2 && (
|
|
||||||
<span class="byline-more">
|
|
||||||
+{featuredBylines.length - 2}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<span class="meta-dot" />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{formatDate(featuredPost.data.publishedAt) && (
|
|
||||||
<time>{formatDate(featuredPost.data.publishedAt)}</time>
|
|
||||||
)}
|
|
||||||
<span class="meta-dot" />
|
|
||||||
<span>
|
|
||||||
{getReadingTime(featuredPost.data.content)} min read
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
href={`/posts/${featuredPost.id}`}
|
|
||||||
class="featured-title-link"
|
|
||||||
>
|
|
||||||
<h1 class="featured-title" {...featuredPost.edit.title}>{featuredPost.data.title}</h1>
|
|
||||||
</a>
|
|
||||||
{featuredPost.data.excerpt && (
|
|
||||||
<p class="featured-excerpt" {...featuredPost.edit.excerpt}>{featuredPost.data.excerpt}</p>
|
|
||||||
)}
|
|
||||||
{featuredTags.length > 0 && (
|
|
||||||
<div class="featured-tags">
|
|
||||||
{featuredTags.map((tag) => (
|
|
||||||
<a href={`/tag/${tag.slug}`} class="featured-tag">
|
|
||||||
{tag.label}
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Latest Posts */}
|
|
||||||
{gridPostsWithTags.length > 0 && (
|
|
||||||
<section class="posts-section">
|
|
||||||
<header class="section-header">
|
|
||||||
<h2 class="section-title">Latest</h2>
|
|
||||||
{hasMorePosts && (
|
|
||||||
<a href="/posts" class="section-link">
|
|
||||||
View all
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
</header>
|
|
||||||
<div class="posts-grid">
|
|
||||||
{gridPostsWithTags.map(({ post, tags, bylines }) => (
|
|
||||||
<PostCard
|
|
||||||
title={post.data.title ?? "Untitled"}
|
|
||||||
excerpt={post.data.excerpt}
|
|
||||||
featuredImage={post.data.featured_image}
|
|
||||||
href={`/posts/${post.id}`}
|
|
||||||
date={post.data.publishedAt ?? undefined}
|
|
||||||
readingTime={getReadingTime(post.data.content)}
|
|
||||||
tags={tags}
|
|
||||||
bylines={bylines}
|
|
||||||
edit={post.edit}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</Base>
|
</Base>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.home-content {
|
h1,
|
||||||
max-width: var(--wide-width);
|
p,
|
||||||
margin: 0 auto;
|
ul {
|
||||||
padding: var(--spacing-16) var(--spacing-6);
|
margin-block: 1em;
|
||||||
}
|
}
|
||||||
|
ul {
|
||||||
/* Featured Section - Side by side */
|
padding-inline-start: 1.5em;
|
||||||
.featured-section {
|
|
||||||
margin-bottom: var(--spacing-16);
|
|
||||||
}
|
}
|
||||||
|
.week {
|
||||||
.featured-grid {
|
font-family: var(--font-mono);
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: var(--spacing-8);
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.featured-image-link {
|
|
||||||
grid-column: 1 / 3;
|
|
||||||
display: block;
|
|
||||||
/* Extend to viewport edge, but cap at -6rem minimum extension */
|
|
||||||
margin-left: min(
|
|
||||||
-6rem,
|
|
||||||
calc(-1 * (var(--spacing-6) + (100vw - var(--wide-width)) / 2))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.featured-image {
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
|
|
||||||
background: var(--color-surface);
|
|
||||||
}
|
|
||||||
|
|
||||||
.featured-image img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
aspect-ratio: 4 / 3;
|
|
||||||
object-fit: cover;
|
|
||||||
transition: transform 0.4s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.featured-image-link:hover .featured-image img,
|
|
||||||
.featured-grid:has(.featured-title-link:hover) .featured-image img {
|
|
||||||
transform: scale(1.02);
|
|
||||||
}
|
|
||||||
|
|
||||||
.featured-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--spacing-4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.featured-meta {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
column-gap: var(--spacing-3);
|
|
||||||
row-gap: var(--spacing-1);
|
|
||||||
font-size: var(--font-size-sm);
|
|
||||||
color: var(--color-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta-dot {
|
|
||||||
width: 3px;
|
|
||||||
height: 3px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: var(--color-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Featured bylines */
|
|
||||||
.featured-bylines {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.featured-byline {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--spacing-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.featured-byline-avatar {
|
|
||||||
width: var(--avatar-size-md);
|
|
||||||
height: var(--avatar-size-md);
|
|
||||||
border-radius: 50%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.featured-byline-name {
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.byline-sep {
|
|
||||||
color: var(--color-muted);
|
|
||||||
margin-right: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.byline-more {
|
|
||||||
font-size: var(--font-size-xs);
|
|
||||||
color: var(--color-muted);
|
|
||||||
margin-left: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.featured-title-link {
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.featured-title {
|
|
||||||
font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
|
|
||||||
font-weight: var(--font-weight-display);
|
|
||||||
line-height: var(--leading-tight);
|
|
||||||
letter-spacing: var(--tracking-tight);
|
|
||||||
transition: color var(--transition-fast);
|
|
||||||
}
|
|
||||||
|
|
||||||
.featured-title-link:hover .featured-title,
|
|
||||||
.featured-grid:has(.featured-image-link:hover) .featured-title {
|
|
||||||
color: var(--color-brand);
|
|
||||||
}
|
|
||||||
|
|
||||||
.featured-excerpt {
|
|
||||||
font-size: var(--font-size-lg);
|
|
||||||
line-height: var(--leading-relaxed);
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.featured-tags {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: var(--spacing-2);
|
|
||||||
margin-top: var(--spacing-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.featured-tag {
|
|
||||||
display: inline-block;
|
|
||||||
padding: var(--tag-padding-y) var(--spacing-2);
|
|
||||||
font-size: var(--font-size-xs);
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
background: var(--color-surface);
|
|
||||||
border-radius: var(--radius);
|
|
||||||
text-decoration: none;
|
|
||||||
transition:
|
|
||||||
color var(--transition-fast),
|
|
||||||
background var(--transition-fast);
|
|
||||||
}
|
|
||||||
|
|
||||||
.featured-tag:hover {
|
|
||||||
color: var(--color-text);
|
|
||||||
background: var(--color-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Section header */
|
|
||||||
.section-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: baseline;
|
|
||||||
margin-bottom: var(--spacing-8);
|
|
||||||
padding-bottom: var(--spacing-4);
|
|
||||||
border-bottom: 1px solid var(--color-border-subtle);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: var(--font-size-sm);
|
|
||||||
font-weight: 500;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: var(--tracking-wider);
|
|
||||||
color: var(--color-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-link {
|
|
||||||
font-size: var(--font-size-sm);
|
|
||||||
color: var(--color-brand);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: color var(--transition-fast);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-link:hover {
|
|
||||||
color: var(--color-brand-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Posts Grid */
|
|
||||||
.posts-section {
|
|
||||||
}
|
|
||||||
|
|
||||||
.posts-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: var(--spacing-12) var(--spacing-8);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Empty State */
|
|
||||||
.empty-state {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--spacing-3);
|
|
||||||
text-align: center;
|
|
||||||
padding: var(--spacing-20) var(--spacing-6);
|
|
||||||
max-width: 400px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-state h2 {
|
|
||||||
font-size: var(--font-size-2xl);
|
|
||||||
font-weight: var(--font-weight-heading);
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-state p {
|
|
||||||
color: var(--color-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
display: inline-block;
|
|
||||||
margin-top: var(--spacing-4);
|
|
||||||
padding: var(--spacing-3) var(--spacing-6);
|
|
||||||
background: var(--color-brand);
|
|
||||||
color: var(--color-on-brand);
|
|
||||||
text-decoration: none;
|
|
||||||
border-radius: var(--radius);
|
|
||||||
font-size: var(--font-size-sm);
|
|
||||||
font-weight: 500;
|
|
||||||
transition: background var(--transition-fast);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn:hover {
|
|
||||||
background: var(--color-brand-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive */
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
.home-content {
|
|
||||||
padding: var(--spacing-6) var(--spacing-4) var(--spacing-12);
|
|
||||||
}
|
|
||||||
|
|
||||||
.featured-image-link {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.featured-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: var(--spacing-6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.featured-image {
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.featured-image img {
|
|
||||||
aspect-ratio: 16 / 9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.posts-grid {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: var(--spacing-8) var(--spacing-6);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.featured-title {
|
|
||||||
font-size: var(--font-size-2xl);
|
|
||||||
}
|
|
||||||
|
|
||||||
.posts-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: var(--spacing-8);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
---
|
||||||
|
import { getEmDashEntry, decodeSlug } from "emdash";
|
||||||
|
import { PortableText } from "emdash/ui";
|
||||||
|
import Base from "../../layouts/Base.astro";
|
||||||
|
import CiteLink from "../../components/CiteLink.astro";
|
||||||
|
|
||||||
|
const slug = decodeSlug(Astro.params.slug);
|
||||||
|
if (!slug) return Astro.redirect("/404");
|
||||||
|
|
||||||
|
const { entry: issue, cacheHint } = await getEmDashEntry("issues", slug);
|
||||||
|
if (!issue) return Astro.redirect("/404");
|
||||||
|
|
||||||
|
if (Astro.cache?.enabled) Astro.cache.set(cacheHint);
|
||||||
|
|
||||||
|
const published = issue.data.publishedAt;
|
||||||
|
---
|
||||||
|
|
||||||
|
<Base
|
||||||
|
title={issue.data.title}
|
||||||
|
description={issue.data.dek}
|
||||||
|
type="article"
|
||||||
|
publishedTime={published?.toISOString()}
|
||||||
|
content={{ collection: "issues", id: issue.data.id, slug: issue.id }}
|
||||||
|
>
|
||||||
|
<div class="column">
|
||||||
|
<article class="issue h-entry">
|
||||||
|
<header>
|
||||||
|
<p class="week">
|
||||||
|
<a class="u-url" href={`/issues/${issue.id}`}>{issue.data.week}</a>
|
||||||
|
{published && <> · <time class="dt-published" datetime={published.toISOString()}>{published.toISOString().slice(0, 10)}</time></>}
|
||||||
|
</p>
|
||||||
|
<h1 class="p-name">{issue.data.title}</h1>
|
||||||
|
{issue.data.dek && <p class="p-summary"><i>{issue.data.dek}</i></p>}
|
||||||
|
</header>
|
||||||
|
<div class="e-content">
|
||||||
|
<PortableText value={issue.data.body ?? []} components={{ mark: { link: CiteLink } }} />
|
||||||
|
</div>
|
||||||
|
<footer><a href="/issues">all issues</a></footer>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</Base>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.issue :global(h1),
|
||||||
|
.issue :global(h2),
|
||||||
|
.issue :global(p),
|
||||||
|
.issue :global(ul) {
|
||||||
|
margin-block: 0.75em;
|
||||||
|
}
|
||||||
|
.issue :global(h2) {
|
||||||
|
margin-block-start: 1.5em;
|
||||||
|
}
|
||||||
|
.issue :global(ul) {
|
||||||
|
padding-inline-start: 1.5em;
|
||||||
|
}
|
||||||
|
.week {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
---
|
||||||
|
import { getEmDashCollection } from "emdash";
|
||||||
|
import Base from "../../layouts/Base.astro";
|
||||||
|
|
||||||
|
const { entries: issues, cacheHint } = await getEmDashCollection("issues", {
|
||||||
|
orderBy: { published_at: "desc" },
|
||||||
|
limit: 52,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (Astro.cache?.enabled) Astro.cache.set(cacheHint);
|
||||||
|
---
|
||||||
|
|
||||||
|
<Base title="Issues" description="potluck, week by week">
|
||||||
|
<div class="column">
|
||||||
|
<h1>Issues</h1>
|
||||||
|
{
|
||||||
|
issues.length === 0 ? (
|
||||||
|
<p>No issues yet.</p>
|
||||||
|
) : (
|
||||||
|
<ul class="h-feed">
|
||||||
|
{issues.map((issue) => (
|
||||||
|
<li class="h-entry">
|
||||||
|
<span class="week">{issue.data.week}</span>{" "}
|
||||||
|
<a class="u-url p-name" href={`/issues/${issue.id}`}>{issue.data.title}</a>
|
||||||
|
{issue.data.dek && <>: <span class="p-summary">{issue.data.dek}</span></>}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</Base>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
h1,
|
||||||
|
ul {
|
||||||
|
margin-block: 1em;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
padding-inline-start: 1.5em;
|
||||||
|
}
|
||||||
|
.week {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -7,24 +7,24 @@ export const GET: APIRoute = async ({ site, url }) => {
|
|||||||
const siteUrl = site ?? new URL(url.origin);
|
const siteUrl = site ?? new URL(url.origin);
|
||||||
const { siteTitle, siteTagline } = resolveBlogSiteIdentity(await getSiteSettings());
|
const { siteTitle, siteTagline } = resolveBlogSiteIdentity(await getSiteSettings());
|
||||||
|
|
||||||
const { entries: posts } = await getEmDashCollection("posts", {
|
const { entries: issues } = await getEmDashCollection("issues", {
|
||||||
orderBy: { published_at: "desc" },
|
orderBy: { published_at: "desc" },
|
||||||
limit: 20,
|
limit: 20,
|
||||||
});
|
});
|
||||||
|
|
||||||
const items = posts
|
const items = issues
|
||||||
.map((post) => {
|
.map((issue) => {
|
||||||
if (!post.data.publishedAt) return null;
|
if (!issue.data.publishedAt) return null;
|
||||||
const pubDate = post.data.publishedAt.toUTCString();
|
const pubDate = issue.data.publishedAt.toUTCString();
|
||||||
|
|
||||||
const postUrl = new URL(`/posts/${post.id}`, siteUrl).href;
|
const issueUrl = new URL(`/issues/${issue.id}`, siteUrl).href;
|
||||||
const title = escapeXml(post.data.title || "Untitled");
|
const title = escapeXml(`${issue.data.week}: ${issue.data.title || "Untitled"}`);
|
||||||
const description = escapeXml(post.data.excerpt || "");
|
const description = escapeXml(issue.data.dek || "");
|
||||||
|
|
||||||
return ` <item>
|
return ` <item>
|
||||||
<title>${title}</title>
|
<title>${title}</title>
|
||||||
<link>${postUrl}</link>
|
<link>${issueUrl}</link>
|
||||||
<guid isPermaLink="true">${postUrl}</guid>
|
<guid isPermaLink="true">${issueUrl}</guid>
|
||||||
<pubDate>${pubDate}</pubDate>
|
<pubDate>${pubDate}</pubDate>
|
||||||
<description>${description}</description>
|
<description>${description}</description>
|
||||||
</item>`;
|
</item>`;
|
||||||
|
|||||||
@@ -1,148 +1,59 @@
|
|||||||
---
|
---
|
||||||
import {
|
import { getTaxonomyTermsWithCacheHint, getEmDashCollection, decodeSlug } from "emdash";
|
||||||
getTaxonomyTermsWithCacheHint,
|
|
||||||
getEmDashCollection,
|
|
||||||
getTermsForEntries,
|
|
||||||
decodeSlug,
|
|
||||||
} from "emdash";
|
|
||||||
import Base from "../../layouts/Base.astro";
|
import Base from "../../layouts/Base.astro";
|
||||||
import PostCard from "../../components/PostCard.astro";
|
|
||||||
import { getReadingTime } from "../../utils/reading-time";
|
|
||||||
|
|
||||||
const slug = decodeSlug(Astro.params.slug);
|
const slug = decodeSlug(Astro.params.slug);
|
||||||
const termsResult = await getTaxonomyTermsWithCacheHint("tag", {
|
const termsResult = await getTaxonomyTermsWithCacheHint("tag", { includeCounts: false });
|
||||||
includeCounts: false,
|
|
||||||
});
|
|
||||||
const term = slug ? termsResult.data.find((item) => item.slug === slug) : null;
|
const term = slug ? termsResult.data.find((item) => item.slug === slug) : null;
|
||||||
|
|
||||||
if (!term) {
|
if (!term) {
|
||||||
return Astro.redirect("/404");
|
return Astro.redirect("/404");
|
||||||
}
|
}
|
||||||
|
|
||||||
const cursor = Astro.url.searchParams.get("cursor") || undefined;
|
const { entries: issues, cacheHint } = await getEmDashCollection("issues", {
|
||||||
const {
|
|
||||||
entries: posts,
|
|
||||||
cacheHint,
|
|
||||||
nextCursor,
|
|
||||||
} = await getEmDashCollection("posts", {
|
|
||||||
where: { tag: term.slug },
|
where: { tag: term.slug },
|
||||||
orderBy: { published_at: "desc" },
|
orderBy: { published_at: "desc" },
|
||||||
limit: 20,
|
limit: 52,
|
||||||
cursor,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
if (Astro.cache?.enabled) {
|
if (Astro.cache?.enabled) {
|
||||||
Astro.cache.set(termsResult.cacheHint);
|
Astro.cache.set(termsResult.cacheHint);
|
||||||
Astro.cache.set(cacheHint);
|
Astro.cache.set(cacheHint);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Single batched query for tags on every post tagged with this term,
|
|
||||||
// rather than calling getEntryTerms() per post.
|
|
||||||
const tagsByEntry = await getTermsForEntries(
|
|
||||||
"posts",
|
|
||||||
posts.map((p) => p.data.id),
|
|
||||||
"tag",
|
|
||||||
);
|
|
||||||
const filteredPosts = posts.map((post) => ({
|
|
||||||
post,
|
|
||||||
tags: tagsByEntry.get(post.data.id) ?? [],
|
|
||||||
}));
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<Base
|
<Base title={`#${term.label}`} description={`Issues tagged ${term.label}`}>
|
||||||
title={`Posts tagged "${term.label}"`}
|
<div class="column">
|
||||||
description={`All posts tagged with ${term.label}`}
|
<h1>#{term.label}</h1>
|
||||||
>
|
|
||||||
<section class="archive-section">
|
|
||||||
<header class="archive-header">
|
|
||||||
<span class="archive-label">Tag</span>
|
|
||||||
<h1 class="archive-title">{term.label}</h1>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
{
|
{
|
||||||
filteredPosts.length === 0 ? (
|
issues.length === 0 ? (
|
||||||
<p class="no-posts">No posts with this tag yet.</p>
|
<p>No issues tagged {term.label}.</p>
|
||||||
) : (
|
) : (
|
||||||
<div class="posts-grid">
|
<ul class="h-feed">
|
||||||
{filteredPosts.map(({ post, tags }) => (
|
{issues.map((issue) => (
|
||||||
<PostCard
|
<li class="h-entry">
|
||||||
title={post.data.title}
|
<span class="week">{issue.data.week}</span>{" "}
|
||||||
excerpt={post.data.excerpt}
|
<a class="u-url p-name" href={`/issues/${issue.id}`}>{issue.data.title}</a>
|
||||||
featuredImage={post.data.featured_image}
|
{issue.data.dek && <>: <span class="p-summary">{issue.data.dek}</span></>}
|
||||||
href={`/posts/${post.id}`}
|
</li>
|
||||||
date={post.data.publishedAt ?? undefined}
|
|
||||||
readingTime={getReadingTime(post.data.content)}
|
|
||||||
tags={tags.map((t) => ({ slug: t.slug, label: t.label }))}
|
|
||||||
edit={post.edit}
|
|
||||||
/>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</ul>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
<nav class="pagination" aria-label="Pagination">
|
<p><a href="/issues">all issues</a></p>
|
||||||
{cursor && <a href={`/tag/${term.slug}`}>First page</a>}
|
</div>
|
||||||
{
|
|
||||||
nextCursor && (
|
|
||||||
<a
|
|
||||||
href={`/tag/${term.slug}?cursor=${encodeURIComponent(nextCursor)}`}
|
|
||||||
>
|
|
||||||
Next page
|
|
||||||
</a>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</nav>
|
|
||||||
</section>
|
|
||||||
</Base>
|
</Base>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.archive-section {
|
h1,
|
||||||
max-width: var(--wide-width);
|
p,
|
||||||
margin: 0 auto;
|
ul {
|
||||||
padding: var(--spacing-12) var(--spacing-6);
|
margin-block: 1em;
|
||||||
}
|
}
|
||||||
|
ul {
|
||||||
.archive-header {
|
padding-inline-start: 1.5em;
|
||||||
margin-bottom: var(--spacing-12);
|
|
||||||
padding-bottom: var(--spacing-8);
|
|
||||||
border-bottom: 1px solid var(--color-border-subtle);
|
|
||||||
}
|
}
|
||||||
|
.week {
|
||||||
.archive-label {
|
font-family: var(--font-mono);
|
||||||
display: block;
|
|
||||||
font-size: var(--font-size-xs);
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--color-brand);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: var(--tracking-wider);
|
|
||||||
margin-bottom: var(--spacing-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.archive-title {
|
|
||||||
font-size: var(--font-size-4xl);
|
|
||||||
font-weight: var(--font-weight-display);
|
|
||||||
letter-spacing: var(--tracking-tight);
|
|
||||||
margin-bottom: var(--spacing-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.posts-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: var(--spacing-12) var(--spacing-8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-posts {
|
|
||||||
color: var(--color-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
.posts-grid {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.posts-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -57,6 +57,14 @@ a:where(:not([class*="emdash"]):not([class*="ec-"])):hover {
|
|||||||
border-bottom-style: solid;
|
border-bottom-style: solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* potluck's own pages: one column, aligned with the header's nav (same
|
||||||
|
width and side padding as the template's page containers). */
|
||||||
|
.column {
|
||||||
|
max-width: var(--wide-width);
|
||||||
|
margin-inline: auto;
|
||||||
|
padding: var(--spacing-6) var(--spacing-6) var(--spacing-16);
|
||||||
|
}
|
||||||
|
|
||||||
/* Keep the signed-in Admin link separated from the primary navigation. */
|
/* Keep the signed-in Admin link separated from the primary navigation. */
|
||||||
.nav-admin {
|
.nav-admin {
|
||||||
margin-inline-start: var(--spacing-5);
|
margin-inline-start: var(--spacing-5);
|
||||||
|
|||||||
@@ -12,8 +12,8 @@ export interface BlogSiteIdentitySettings {
|
|||||||
favicon?: MediaReference;
|
favicon?: MediaReference;
|
||||||
}
|
}
|
||||||
|
|
||||||
const DEFAULT_SITE_TITLE = "My Blog";
|
const DEFAULT_SITE_TITLE = "potluck";
|
||||||
const DEFAULT_SITE_TAGLINE = "Thoughts, stories, and ideas.";
|
const DEFAULT_SITE_TAGLINE = "A weekly zine: everyone brings a dish";
|
||||||
|
|
||||||
export function resolveBlogSiteIdentity(settings?: BlogSiteIdentitySettings) {
|
export function resolveBlogSiteIdentity(settings?: BlogSiteIdentitySettings) {
|
||||||
return {
|
return {
|
||||||
|
|||||||
Reference in new issue
Block a user