From e873460465231977978c6bfeb3aae0828163630e Mon Sep 17 00:00:00 2001 From: rzen Date: Sun, 3 May 2026 17:52:14 -0400 Subject: [PATCH] site: founding post, headline post layout, masonry grid, source links - New "Why this exists" post; masthead "founded" links to it - Post template: serif headline + date in masthead, "Filed under {category}" in footer - Drop counts from footer Collections list - Masonry component for home + sources grid; source badges link to /sources/#slug - Theme toggle (settings page + cog) with dark-mode-aware tokens - Six new themed find lists; cluster-finds skill --- .claude/skills/cluster-finds/SKILL.md | 114 ++++++++++ daily-finds.log.md | 14 ++ src/components/Masonry.astro | 181 ++++++++++++++++ src/components/SourceBadge.astro | 10 +- .../2026-05-03-backyard-small-upgrades.mdx | 13 ++ .../2026-05-03-mac-apps-quietly-worth-it.mdx | 16 ++ .../finds/2026-05-03-manufactured-delight.mdx | 14 ++ .../2026-05-03-morning-kitchen-ritual.mdx | 13 ++ src/content/finds/2026-05-03-pocket-carry.mdx | 15 ++ .../finds/2026-05-03-travel-as-attention.mdx | 15 ++ .../posts/2026-05-03-why-this-exists.mdx | 19 ++ src/layouts/BaseLayout.astro | 84 +++++++- src/lib/sources.ts | 6 + src/pages/index.astro | 198 ++---------------- src/pages/posts/[...slug].astro | 64 +++--- src/pages/settings.astro | 117 +++++++++++ src/pages/sources.astro | 41 ++-- 17 files changed, 683 insertions(+), 251 deletions(-) create mode 100644 .claude/skills/cluster-finds/SKILL.md create mode 100644 src/components/Masonry.astro create mode 100644 src/content/finds/2026-05-03-backyard-small-upgrades.mdx create mode 100644 src/content/finds/2026-05-03-mac-apps-quietly-worth-it.mdx create mode 100644 src/content/finds/2026-05-03-manufactured-delight.mdx create mode 100644 src/content/finds/2026-05-03-morning-kitchen-ritual.mdx create mode 100644 src/content/finds/2026-05-03-pocket-carry.mdx create mode 100644 src/content/finds/2026-05-03-travel-as-attention.mdx create mode 100644 src/content/posts/2026-05-03-why-this-exists.mdx create mode 100644 src/lib/sources.ts create mode 100644 src/pages/settings.astro diff --git a/.claude/skills/cluster-finds/SKILL.md b/.claude/skills/cluster-finds/SKILL.md new file mode 100644 index 0000000..425be46 --- /dev/null +++ b/.claude/skills/cluster-finds/SKILL.md @@ -0,0 +1,114 @@ +--- +name: cluster-finds +description: Batch-cluster every existing find item in src/content/find/ into 4-7 thematic 'finds' superposts. Use when the user wants to bring the find pool up to date all at once — ("re-cluster the finds", "build superposts for everything", "spread the new finds across themed posts"). For drafting one superpost from a single theme, use build-finds instead. +disable-model-invocation: true +--- + +# cluster-finds + +Bulk version of `build-finds`. Reads the entire `src/content/find/` pool, partitions it into themed clusters, and writes one `src/content/finds/-.mdx` superpost per cluster. The audience-facing site treats `finds` as the primary discovery vehicle for individual `find` items, so the goal is *coverage*: by the end of the run, almost every find that deserves a home should have one. + +Invoke from inside the `unique.rzen.dev` repo. + +## Inputs + +- `src/content/find/*.mdx` — the full pool to cluster. +- `src/content/finds/*.mdx` — already-written superposts. Their `items[]` lists are the prior clustering — read these to know which finds already have a home and what themes have been used. +- Optional argument: a number of clusters to target (default: model's call, usually 4-7). +- Optional argument: a list of theme phrases to seed clustering around. + +## Procedure + +### 1. Read the pool + +Read the frontmatter and body of every find. Note the `name`, `subtitle`, `topics`, `tags`, and the body's stated *virtue* (the specific thing that makes the item delightful). Tags and topics are hints, not the answer — the body usually tells you what cluster a find actually belongs to. + +Also read every existing finds file's `items[]` array — these are pre-clustered and should not be re-clustered into a new redundant theme. They can still be *re-used* in a new cluster if the new theme genuinely calls for them (see overlap rules). + +### 2. Partition into clusters + +Aim for 4-7 clusters. Each cluster should: + +- Hang off **one specific editorial angle**, phrasable in 4-8 words ("Pocket carry", "The morning kitchen ritual", "Travel as a kind of attention"). Avoid generic buckets ("Tools", "Apps") — those are tag pages. +- Hold **3-8 items**. Below 3 the grid feels thin; above 8 it stops being scannable. +- Be **distinct from existing finds posts** in angle, even if a couple of items repeat. + +Coverage check: after partitioning, every find should appear in at least one cluster (existing or new). If a find genuinely fits no theme, leave it uncovered and report it — don't pad a cluster with a misfit. + +### 3. Overlap rules + +Re-use is allowed but rationed. Set a soft budget: at most ~20% of items across all new posts may be repeats from existing posts or from other new posts in this same run. Concretely, for a 25-item pool, that's ~5 reuses total. Track repeats as you draft. + +When choosing which items to repeat: only repeat a find when the second theme genuinely illuminates a different facet of it. "It also kind of fits over here" is not enough. + +### 4. Confirm with the user + +Before writing any files, show a compact plan: + +``` +Cluster A — "" (N items) + - : + - ... +Cluster B — "" (N items) + ... + +Overlap with existing posts: appears in + ; ... +Uncovered finds: +``` + +Wait for the user to confirm, refine, swap, or merge clusters. Do not write files until they sign off. + +### 5. Write each superpost + +Same file format as `build-finds`. For each cluster, write `src/content/finds/-.mdx`: + +```yaml +--- +title: "" +date: YYYY-MM-DD +tags: [daily-finds, , ] +description: "" +blurb: "" +items: + - + - + - ... +--- + +> +``` + +Body rules (same as `build-finds`): + +- 1-2 sentence intro paragraph in a blockquote. No headings, no list items, no numbered candidates — the grid handles the items. +- Audience-facing language. Never write "today's pick", "candidates", "winners". +- Vary the opening across the batch. With 4-7 posts going out the same day, repeating "Today's catch" five times feels mechanical. + +### 6. Verify + +- Every slug in every `items[]` must exist at `src/content/find/.mdx`. Confirm before declaring done. +- Run `npm run build`. If any superpost fails to compile, fix and re-run. + +### 7. Update the log + +Append to `daily-finds.log.md`: + +``` +## YYYY-MM-DD — cluster run + +Wrote superposts from a pool of finds. +Reuses across posts: (budget: ~20%). +Uncovered finds: . + +Posts created: +- -: (N items) +- <date>-<slug-B>: <title> (N items) +- ... +``` + +## Notes + +- This skill complements, doesn't replace, `build-finds`. After a cluster run, `build-finds` is still the right tool for ad-hoc, single-theme posts on top of new captures. +- If two themes you're considering have heavy overlap (≥50% same items), they're really one theme — merge them and pick the stronger framing. +- Date all posts with the run date, not staggered — these are siblings written together, and the home feed will sort them naturally by `title`. +- Don't edit existing finds posts when running this. If an existing post overlaps with a new cluster you're proposing, either keep the new cluster (overlap-tolerated) or drop it from the plan; do not retroactively rewrite history. diff --git a/daily-finds.log.md b/daily-finds.log.md index 7d982af..3beb4f9 100644 --- a/daily-finds.log.md +++ b/daily-finds.log.md @@ -72,3 +72,17 @@ New source nominees: 1 (see candidate-sources.md). - **Standard & Strange Journal**: `/blogs/journal` returned 404 — find current journal URL. - **Indie App Sunday**: Mastodon hashtag URL needs the right format (`https://mastodon.social/tags/IndieAppSunday` 404'd; try `.../tags/indieappsunday`). - **17 sources block WebFetch with 403** — likely Cloudflare. Many of these would work via `curl` with a browser User-Agent. Consider adding `fetch: curl` mode for a `--with-headers=browser` strategy, or accept that ~⅓ of sources need a different fetch path. + +## 2026-05-03 — cluster run + +Wrote 6 superposts from the existing pool of 29 finds (single-virtue post already existed; not rewritten). +Reuses across posts: 2 (cobak-composition-notebook-case → single-virtue + pocket-carry; bridge-city-chopstick-master → single-virtue + morning-kitchen-ritual). Within ~20% budget. +Uncovered finds: none. + +Posts created: +- 2026-05-03-pocket-carry: Pocket carry (5 items) +- 2026-05-03-mac-apps-quietly-worth-it: Mac apps quietly worth the dock slot (6 items) +- 2026-05-03-morning-kitchen-ritual: The morning kitchen ritual (3 items) +- 2026-05-03-backyard-small-upgrades: Small upgrades for the backyard (3 items) +- 2026-05-03-travel-as-attention: Travel as a kind of attention (5 items) +- 2026-05-03-manufactured-delight: Manufactured delight (4 items) diff --git a/src/components/Masonry.astro b/src/components/Masonry.astro new file mode 100644 index 0000000..e9e6490 --- /dev/null +++ b/src/components/Masonry.astro @@ -0,0 +1,181 @@ +--- +interface Props { + initial?: number; + batch?: number; +} +const { initial, batch } = Astro.props; +const dataInitial = initial != null ? String(initial) : undefined; +const dataBatch = batch != null ? String(batch) : undefined; +--- + +<div + class="masonry-source" + data-initial={dataInitial} + data-batch={dataBatch} +> + <slot /> +</div> + +<script> + const sources = document.querySelectorAll<HTMLDivElement>('.masonry-source'); + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + function colCount(): number { + const w = window.innerWidth; + if (w <= 520) return 1; + if (w <= 880) return 2; + return 3; + } + + for (const source of sources) { + const tiles = Array.from(source.children) as HTMLElement[]; + for (const t of tiles) t.classList.add('masonry-tile'); + + const initialAttr = source.dataset.initial; + const batchAttr = source.dataset.batch; + const progressive = initialAttr !== undefined && batchAttr !== undefined; + const initial = progressive ? Number(initialAttr) : tiles.length; + const batch = progressive ? Number(batchAttr) : tiles.length; + + const masonry = document.createElement('div'); + masonry.className = 'masonry'; + source.parentElement?.insertBefore(masonry, source); + source.remove(); + + const sentinel = document.createElement('div'); + sentinel.className = 'masonry-sentinel'; + sentinel.setAttribute('aria-hidden', 'true'); + masonry.parentElement?.insertBefore(sentinel, masonry.nextSibling); + + let cols: HTMLDivElement[] = []; + let stash: HTMLElement[] = tiles.slice(); + let placed: HTMLElement[] = []; + let currentCols = colCount(); + + function buildColumns() { + masonry.replaceChildren(); + cols = []; + for (let i = 0; i < currentCols; i++) { + const c = document.createElement('div'); + c.className = 'masonry-col'; + masonry.appendChild(c); + cols.push(c); + } + } + + function shortestColumn(): HTMLDivElement { + let min = Infinity; + let idx = 0; + for (let i = 0; i < cols.length; i++) { + const h = cols[i].offsetHeight; + if (h < min) { min = h; idx = i; } + } + return cols[idx]; + } + + function placeOne(tile: HTMLElement, animate: boolean) { + if (animate && !prefersReducedMotion) { + tile.classList.add('revealing'); + tile.addEventListener( + 'animationend', + () => tile.classList.remove('revealing'), + { once: true } + ); + } + shortestColumn().appendChild(tile); + } + + function placeBatch(n: number, animate: boolean) { + const slice = stash.splice(0, n); + for (const t of slice) { + placed.push(t); + placeOne(t, animate); + } + } + + function rebuild() { + stash = placed.concat(stash); + placed = []; + buildColumns(); + placeBatch(stash.length, false); + } + + buildColumns(); + placeBatch(Math.min(initial, stash.length), false); + + if (progressive && stash.length > 0) { + let busy = false; + const io = new IntersectionObserver((entries) => { + if (busy || stash.length === 0) return; + if (!entries[0].isIntersecting) return; + busy = true; + placeBatch(Math.min(batch, stash.length), true); + setTimeout(() => { busy = false; }, 120); + if (stash.length === 0) { + io.disconnect(); + sentinel.remove(); + } + }, { rootMargin: '600px 0px' }); + io.observe(sentinel); + } else { + sentinel.remove(); + } + + let resizeTimer: number | undefined; + window.addEventListener('resize', () => { + if (resizeTimer) window.clearTimeout(resizeTimer); + resizeTimer = window.setTimeout(() => { + const next = colCount(); + if (next !== currentCols) { + currentCols = next; + rebuild(); + } + }, 150); + }); + } +</script> + +<style is:global> + /* No-JS fallback: column-count masonry. JS replaces this with .masonry. */ + .masonry-source { + column-count: 3; + column-gap: 1rem; + } + @media (max-width: 880px) { .masonry-source { column-count: 2; } } + @media (max-width: 520px) { .masonry-source { column-count: 1; } } + .masonry-source > * { + break-inside: avoid; + display: block; + margin: 0 0 1rem; + } + + /* JS-built masonry: real columns, never reflow placed tiles. */ + .masonry { + display: flex; + gap: 1rem; + align-items: flex-start; + } + .masonry-col { + flex: 1 1 0; + min-width: 0; + display: flex; + flex-direction: column; + gap: 1rem; + } + .masonry-tile.revealing { + animation: masonry-tile-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both; + will-change: transform, opacity; + } + @keyframes masonry-tile-in { + from { opacity: 0; transform: translateY(22px); } + to { opacity: 1; transform: translateY(0); } + } + @media (prefers-reduced-motion: reduce) { + .masonry-tile.revealing { animation: none; } + } + .masonry-sentinel { + height: 1px; + margin-top: -1px; + pointer-events: none; + } +</style> diff --git a/src/components/SourceBadge.astro b/src/components/SourceBadge.astro index 0304a21..4a5ac25 100644 --- a/src/components/SourceBadge.astro +++ b/src/components/SourceBadge.astro @@ -1,12 +1,17 @@ --- +import { sourceSlug } from '../lib/sources'; + interface Props { source: string; prefix?: string; } const { source, prefix = 'via' } = Astro.props; +const href = `/sources/#${sourceSlug(source)}`; --- -<span class="source-badge">{prefix} <span class="name">{source}</span></span> +<span class="source-badge"> + {prefix} <a href={href} class="name">{source}</a> +</span> <style> .source-badge { @@ -25,4 +30,7 @@ const { source, prefix = 'via' } = Astro.props; letter-spacing: 0; font-weight: 600; } + .source-badge .name:hover { + text-decoration: underline; + } </style> diff --git a/src/content/finds/2026-05-03-backyard-small-upgrades.mdx b/src/content/finds/2026-05-03-backyard-small-upgrades.mdx new file mode 100644 index 0000000..995cfc0 --- /dev/null +++ b/src/content/finds/2026-05-03-backyard-small-upgrades.mdx @@ -0,0 +1,13 @@ +--- +title: "Small upgrades for the backyard" +date: 2026-05-03 +tags: [daily-finds, outdoor, gifts] +description: "Three quiet upgrades for the yard — a camera bird feeder that names every species, motion-aware solar fence lights, and a German screwdriver set that's nicer to hold than it has any right to be." +blurb: "Three quiet upgrades for the yard, the fence, and the toolbox." +items: + - birdfy-smart-bird-feeder + - aootek-solar-fence-lights + - felo-ergonic-screwdriver-set +--- + +> Small backyard improvements stack quickly. A bird feeder with a camera in the eaves that names every species visiting your yard. A six-pack of solar lights that stay dim until something moves and then actually let you see. And the Felo screwdrivers — German, soft-handled, the household tool that's quietly nicer to hold than the version you've been using for a decade. diff --git a/src/content/finds/2026-05-03-mac-apps-quietly-worth-it.mdx b/src/content/finds/2026-05-03-mac-apps-quietly-worth-it.mdx new file mode 100644 index 0000000..0bc5d50 --- /dev/null +++ b/src/content/finds/2026-05-03-mac-apps-quietly-worth-it.mdx @@ -0,0 +1,16 @@ +--- +title: "Mac apps quietly worth the dock slot" +date: 2026-05-03 +tags: [daily-finds, macos-apps, tools] +description: "Six small Mac apps that earn their place — a timezone converter, dock folders, a local-AI writer, a Notepad++ port, a throwaway-VM runner, and pixel-perfect iTunes recreations." +blurb: "Six small Mac apps that earn their place by doing one thing right." +items: + - fluttertime + - dockpops + - refine-grammarly-alternative + - notepad-plus-plus-mac + - cilicon-ephemeral-vms + - companion-apps-for-apple-music +--- + +> A Mac stays clean only when every app on it is paying rent. These six are. A timezone converter you actually glance at, the Dock folders Apple never shipped, a writing assistant that runs entirely on-device, a Notepad++ port that's a real Universal Binary, throwaway macOS VMs for the next sketchy DMG, and pixel-perfect recreations of iTunes 1 and 4 sitting on top of modern Music. diff --git a/src/content/finds/2026-05-03-manufactured-delight.mdx b/src/content/finds/2026-05-03-manufactured-delight.mdx new file mode 100644 index 0000000..e75332d --- /dev/null +++ b/src/content/finds/2026-05-03-manufactured-delight.mdx @@ -0,0 +1,14 @@ +--- +title: "Manufactured delight" +date: 2026-05-03 +tags: [daily-finds, general-delight, play] +description: "Four things that exist for no reason except that someone wanted them to — a microscope archive of beach sand, 169 games for unconventional places, the bluffing card game everyone is lying about, and a search engine that renders in 1995 browsers." +blurb: "Four labors of love whose only excuse is that someone wanted them to exist." +items: + - magnifiedsand + - unruly-play-archive + - skull-bluffing-card-game + - frogfind +--- + +> Some things exist for no good reason — only that someone wanted them to, and the wanting was contagious. A one-person archive of beach sand photographed under a microscope. An archive of 169 unconventional games designed for escalators, parking lots, and library stacks. The smallest possible bluffing card game (three roses, one skull, twenty minutes). And a search engine that renders in browsers from 1995, which turns out to be a lovely way to read the modern web too. diff --git a/src/content/finds/2026-05-03-morning-kitchen-ritual.mdx b/src/content/finds/2026-05-03-morning-kitchen-ritual.mdx new file mode 100644 index 0000000..9e5950a --- /dev/null +++ b/src/content/finds/2026-05-03-morning-kitchen-ritual.mdx @@ -0,0 +1,13 @@ +--- +title: "The morning kitchen ritual" +date: 2026-05-03 +tags: [daily-finds, kitchen, coffee] +description: "Three tools for the slow start of the day — a sub-$200 espresso machine, a French press whose filter actually keeps grit out, and a jig for whittling your own chopsticks." +blurb: "Three tools for the slow start of the day." +items: + - casabrews-cm5418-espresso-machine + - espro-p7-french-press + - bridge-city-chopstick-master +--- + +> The first hour of the day rewards specific tools. A cheap espresso machine that makes the Nespresso pod feel embarrassing within a week. A French press whose double mesh actually keeps the grit out of the cup. And — for the patient version of the same impulse — a woodworking jig that makes a clean pair of chopsticks from any scrap of hardwood. diff --git a/src/content/finds/2026-05-03-pocket-carry.mdx b/src/content/finds/2026-05-03-pocket-carry.mdx new file mode 100644 index 0000000..c62eab0 --- /dev/null +++ b/src/content/finds/2026-05-03-pocket-carry.mdx @@ -0,0 +1,15 @@ +--- +title: "Pocket carry" +date: 2026-05-03 +tags: [daily-finds, edc, travel] +description: "Five things small enough to live in a jacket pocket and useful enough to earn the slot." +blurb: "Five things small enough to live in a jacket pocket and useful enough to earn the slot." +items: + - anker-nano-travel-adapter + - ugreen-uno-magsafe-power-bank + - umoven-pop-up-bifold-wallet + - toms-keys-spare-fob + - cobak-composition-notebook-case +--- + +> The pocket-carry test is harsh — anything that lives in your jacket has to justify the lump it makes. These five do it five different ways: a charger that smiles back, a wallet that opens itself, a travel adapter the size of a deck of cards, a spare key fob you didn't pay the dealer for, and an e-paper tablet hidden inside a comp book. diff --git a/src/content/finds/2026-05-03-travel-as-attention.mdx b/src/content/finds/2026-05-03-travel-as-attention.mdx new file mode 100644 index 0000000..e8f68e6 --- /dev/null +++ b/src/content/finds/2026-05-03-travel-as-attention.mdx @@ -0,0 +1,15 @@ +--- +title: "Travel as a kind of attention" +date: 2026-05-03 +tags: [daily-finds, travel, photography] +description: "Five things at the seam between travel and noticing — a webcam grid of NYC food lines, an Amsterdam library of occult manuscripts, a camera that erases the crowd, a postcard with a hidden video, and a camera that hides your photos for a year." +blurb: "Five things at the seam between travel and noticing." +items: + - damnlines + - embassy-of-the-free-mind + - stillgram + - magic-postcards + - roll-disposable-camera +--- + +> Travel is mostly a structured excuse to pay attention. These five lean into that. A live grid of webcams pointed at New York's worst lines. An Amsterdam canal house holding five-hundred-year-old occult manuscripts. An iPhone camera that quietly removes other tourists from the Trevi Fountain shot. A paper postcard with a hidden video of where you sent it from. And a disposable-camera app that makes you wait three days, three weeks, or a year to see the photo you just took. diff --git a/src/content/posts/2026-05-03-why-this-exists.mdx b/src/content/posts/2026-05-03-why-this-exists.mdx new file mode 100644 index 0000000..847cf0f --- /dev/null +++ b/src/content/posts/2026-05-03-why-this-exists.mdx @@ -0,0 +1,19 @@ +--- +title: "Why this exists" +date: 2026-05-03 +category: meta +tags: [meta, founding] +description: "A note on why I started Unique — a small log of delightful, unique things to make life a little more pleasant." +--- + +I kept losing them. + +The clever little tool a friend mentioned in passing. The strange website I bookmarked at midnight and never found again. The kitchen gadget that turned out to be quietly perfect. The app that fixed something I didn't realize was broken. + +I'd find something delightful, smile at it for a moment, and then watch it slip back into the internet, indistinguishable from everything else. A few weeks later I'd be half-remembering a name, half-describing a thing, opening twelve tabs to chase a feeling. + +So this site is the fix. A small, slow log of things that made life a little more pleasant — products, apps, phenomena, oddities. Nothing comprehensive, nothing exhaustive. Just the ones worth keeping. + +I'm building it for myself first. If it's useful to you too, that's a bonus. + +Welcome. diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 0b3fb92..89dd218 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -7,6 +7,7 @@ interface Props { title: string; description?: string; subheader?: string; + subheaderVariant?: 'tagline' | 'headline'; lastUpdated?: Date; canonicalPath?: string; canonicalOverride?: string; @@ -23,6 +24,7 @@ const { title, description = 'A small log of delightful, unique things — products, apps, phenomena, oddities.', subheader, + subheaderVariant = 'tagline', lastUpdated, canonicalPath, canonicalOverride, @@ -42,6 +44,7 @@ const fmtLong = new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric', + timeZone: 'UTC', }); const fmtShort = new Intl.DateTimeFormat('en-US', { year: 'numeric', @@ -69,13 +72,23 @@ const year = new Date().getFullYear(); articleTags={articleTags} jsonLd={jsonLd} /> + <script is:inline> + (function () { + try { + var t = localStorage.getItem('theme'); + if (t === 'light' || t === 'dark') { + document.documentElement.setAttribute('data-theme', t); + } + } catch (e) {} + })(); + </script> </head> <body> <header class="masthead"> <div class="masthead-row"> <div class="masthead-stats"> <span>{stats.total} entries</span> - <span>founded {fmtShort.format(SITE_FOUNDED)}</span> + <span><a href="/posts/2026-05-03-why-this-exists/">founded {fmtShort.format(SITE_FOUNDED)}</a></span> </div> <a href="/" class="masthead-brand">{siteName}</a> <nav class="masthead-nav" aria-label="Primary"> @@ -85,8 +98,13 @@ const year = new Date().getFullYear(); </div> {subheader && ( <div class="subheader"> - <p class="subheader-line">{subheader}</p> - {updatedDate && ( + <p class={`subheader-line${subheaderVariant === 'headline' ? ' subheader-headline' : ''}`}>{subheader}</p> + {updatedDate && subheaderVariant === 'headline' && ( + <p class="subheader-date"> + <time datetime={updatedDate.toISOString()}>{fmtLong.format(updatedDate)}</time> + </p> + )} + {updatedDate && subheaderVariant !== 'headline' && ( <p class="subheader-date"> Updated <time datetime={updatedDate.toISOString()}>{fmtLong.format(updatedDate)}</time> </p> @@ -110,10 +128,10 @@ const year = new Date().getFullYear(); <section> <h4>Collections</h4> <ul> - <li><a href="/grid/">Reviews ({stats.reviews})</a></li> - <li><a href="/find/">Finds ({stats.finds})</a></li> - <li><a href="/finds/">Lists ({stats.lists})</a></li> - <li><a href="/blog/">Posts ({stats.posts})</a></li> + <li><a href="/grid/">Reviews</a></li> + <li><a href="/find/">Finds</a></li> + <li><a href="/finds/">Lists</a></li> + <li><a href="/blog/">Posts</a></li> </ul> </section> <section> @@ -129,27 +147,45 @@ const year = new Date().getFullYear(); © {year} Unique <span aria-hidden="true">·</span> <a href="/legal/">Legal</a> + <span aria-hidden="true">·</span> + <a href="/settings/" class="settings-cog" aria-label="Settings"> + <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> + <circle cx="12" cy="12" r="3"></circle> + <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path> + </svg> + </a> </p> </div> </footer> + <style is:global> :root { --fg: #1a1a1a; - --bg: #fafaf7; + --bg: #f4f0ec; + --card-fill: #ebe6df; --muted: #6b6b6b; --accent: #b34700; - --rule: #e6e3dc; + --rule: #e0dbd2; --max: 42rem; } @media (prefers-color-scheme: dark) { - :root { + :root:not([data-theme="light"]) { --fg: #ececea; --bg: #161613; + --card-fill: #1f1f1c; --muted: #8d8d88; --accent: #ff9c5b; --rule: #2a2a26; } } + :root[data-theme="dark"] { + --fg: #ececea; + --bg: #161613; + --card-fill: #1f1f1c; + --muted: #8d8d88; + --accent: #ff9c5b; + --rule: #2a2a26; + } * { box-sizing: border-box; } html, body { margin: 0; @@ -192,6 +228,8 @@ const year = new Date().getFullYear(); letter-spacing: 0.08em; color: var(--muted); } + .masthead-stats a { color: var(--muted); } + .masthead-stats a:hover { color: var(--accent); } .masthead-brand { font-family: ui-serif, Georgia, 'Iowan Old Style', 'Apple Garamond', 'Palatino Linotype', serif; font-weight: 700; @@ -217,6 +255,22 @@ const year = new Date().getFullYear(); .masthead-nav a { color: var(--muted); } .masthead-nav a:hover { color: var(--accent); } + .settings-cog { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + color: var(--muted); + line-height: 0; + transition: color 0.18s ease, transform 0.6s ease; + } + .settings-cog:hover { + color: var(--accent); + text-decoration: none; + transform: rotate(60deg); + } + .settings-cog svg { display: block; } + .subheader { text-align: center; padding: 0.85rem 0 1rem; @@ -228,6 +282,15 @@ const year = new Date().getFullYear(); font-size: 1rem; color: var(--fg); } + .subheader-line.subheader-headline { + font-family: ui-serif, Georgia, 'Iowan Old Style', 'Apple Garamond', 'Palatino Linotype', serif; + font-style: normal; + font-weight: 700; + font-size: clamp(1.6rem, 4.2vw, 2.4rem); + line-height: 1.15; + letter-spacing: -0.01em; + color: var(--fg); + } .subheader-date { margin: 0.25rem 0 0; font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif; @@ -246,6 +309,7 @@ const year = new Date().getFullYear(); } .masthead-stats { flex-direction: row; + flex-wrap: wrap; justify-content: center; gap: 0.5rem; order: 2; diff --git a/src/lib/sources.ts b/src/lib/sources.ts new file mode 100644 index 0000000..c74df06 --- /dev/null +++ b/src/lib/sources.ts @@ -0,0 +1,6 @@ +export function sourceSlug(name: string): string { + return name + .toLowerCase() + .replace(/[^a-z0-9]+/g, '-') + .replace(/^-+|-+$/g, ''); +} diff --git a/src/pages/index.astro b/src/pages/index.astro index 4374478..38e0c40 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,6 +1,7 @@ --- import { getCollection } from 'astro:content'; import BaseLayout from '../layouts/BaseLayout.astro'; +import Masonry from '../components/Masonry.astro'; import { heroes } from '../lib/hero'; import { buildOgImage, buildItemList, WEBSITE, ORGANIZATION } from '../lib/seo'; @@ -75,10 +76,10 @@ const itemList = buildItemList( </a> )} - <ul class="grid" data-initial={INITIAL_GRID} data-batch={BATCH_SIZE}> + <Masonry initial={INITIAL_GRID} batch={BATCH_SIZE}> { - rest.map((tile, i) => ( - <li class:list={[{ hidden: i >= INITIAL_GRID }]} data-index={i}> + rest.map((tile) => ( + <article> <a href={tile.href} class:list={['tile', { 'text-only': !tile.hero }]}> {tile.hero?.kind === 'image' && ( <img @@ -108,107 +109,10 @@ const itemList = buildItemList( <span class="subtitle">{tile.subtitle}</span> </div> </a> - </li> + </article> )) } - </ul> - - {rest.length > INITIAL_GRID && ( - <div class="more-wrap"> - <button id="load-more" class="load-more" type="button"> - Load more - </button> - </div> - )} - - <script> - const grid = document.querySelector<HTMLUListElement>('.grid'); - const button = document.querySelector<HTMLButtonElement>('#load-more'); - const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; - - function easeInOutCubic(t: number): number { - return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; - } - - // A long, gentle programmatic scroll. Native smooth-scroll is too quick and - // jumps to a fixed target; we want to drift continuously as cards appear. - function softScrollBy(distance: number, duration: number): Promise<void> { - if (prefersReducedMotion || distance <= 0) { - window.scrollBy(0, distance); - return Promise.resolve(); - } - return new Promise((resolve) => { - const startY = window.scrollY; - const start = performance.now(); - function step(now: number) { - const t = Math.min(1, (now - start) / duration); - window.scrollTo(0, startY + distance * easeInOutCubic(t)); - if (t < 1) requestAnimationFrame(step); - else resolve(); - } - requestAnimationFrame(step); - }); - } - - function wait(ms: number): Promise<void> { - return new Promise((resolve) => setTimeout(resolve, ms)); - } - - if (grid && button) { - const batch = Number(grid.dataset.batch ?? '7'); - let busy = false; - - button.addEventListener('click', async () => { - if (busy) return; - busy = true; - button.disabled = true; - - const hidden = grid.querySelectorAll<HTMLLIElement>('li.hidden'); - const toReveal = Array.from(hidden).slice(0, batch); - - // Reveal one at a time, with the page drifting smoothly to keep new - // cards in view as they slide in. - const REVEAL_DURATION = 520; - const GAP = 220; - const SCROLL_AMOUNT = 110; - const SCROLL_DURATION = REVEAL_DURATION + GAP; - - for (let i = 0; i < toReveal.length; i++) { - const li = toReveal[i]; - li.classList.remove('hidden'); - li.classList.add('revealing'); - li.addEventListener( - 'animationend', - () => li.classList.remove('revealing'), - { once: true } - ); - - // Start a soft scroll alongside each card (except the first, so the - // user sees the initial reveal in place). - if (i > 0 && !prefersReducedMotion) { - softScrollBy(SCROLL_AMOUNT, SCROLL_DURATION); - } - await wait(GAP); - } - - // Final settle: ensure the button (or the last card) is comfortably - // in view. - if (!prefersReducedMotion) { - const target = button.getBoundingClientRect(); - const overflow = target.bottom - window.innerHeight + 32; - if (overflow > 0) await softScrollBy(overflow, 600); - } - - if (grid.querySelectorAll('li.hidden').length === 0) { - button.classList.add('fading'); - button.addEventListener('transitionend', () => button.remove(), { once: true }); - } else { - button.disabled = false; - } - busy = false; - }); - } - </script> + </Masonry> <style> .hero { @@ -216,17 +120,16 @@ const itemList = buildItemList( position: relative; border-radius: 14px; overflow: hidden; - border: 1px solid var(--rule); + border: 2px solid var(--rule); background: var(--bg); color: inherit; margin-bottom: 2.5rem; - transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; + transition: box-shadow 0.18s ease, border-color 0.18s ease; } .hero:hover { text-decoration: none; - transform: translateY(-2px); - border-color: color-mix(in srgb, var(--accent) 40%, var(--rule)); - box-shadow: 0 18px 48px -18px rgba(0, 0, 0, 0.28); + border-color: color-mix(in srgb, var(--accent) 50%, var(--rule)); + box-shadow: 0 0 32px -4px color-mix(in srgb, var(--accent) 35%, transparent); } .hero:hover .hero-name { color: var(--accent); } @@ -265,58 +168,19 @@ const itemList = buildItemList( line-height: 1.45; } - .grid { - column-count: 3; - column-gap: 1rem; - list-style: none; - margin: 0; - padding: 0; - } - @media (max-width: 880px) { - .grid { column-count: 2; } - } - @media (max-width: 520px) { - .grid { column-count: 1; } - } - - .grid > li { - break-inside: avoid; - display: block; - margin: 0 0 1rem; - } - .grid > li.hidden { display: none; } - .grid > li.revealing { - animation: tile-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both; - will-change: transform, opacity; - } - @keyframes tile-in { - from { - opacity: 0; - transform: translateY(22px); - } - to { - opacity: 1; - transform: translateY(0); - } - } - @media (prefers-reduced-motion: reduce) { - .grid > li.revealing { animation: none; } - } - .tile { display: block; border-radius: 8px; overflow: hidden; - border: 1px solid var(--rule); + border: 2px solid var(--rule); background: var(--bg); color: inherit; - transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; + transition: box-shadow 0.18s ease, border-color 0.18s ease; } .tile:hover { text-decoration: none; - transform: translateY(-2px); - border-color: color-mix(in srgb, var(--accent) 40%, var(--rule)); - box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.18); + border-color: color-mix(in srgb, var(--accent) 50%, var(--rule)); + box-shadow: 0 0 20px -4px color-mix(in srgb, var(--accent) 30%, transparent); } .tile:hover .name { color: var(--accent); } @@ -332,6 +196,7 @@ const itemList = buildItemList( display: flex; flex-direction: column; gap: 0.2rem; + background: var(--card-fill); } .name { font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif; @@ -361,38 +226,5 @@ const itemList = buildItemList( font-size: 1rem; } - .more-wrap { - display: flex; - justify-content: center; - margin: 2rem 0 0.5rem; - } - .load-more { - font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; - font-size: 0.95rem; - font-weight: 600; - letter-spacing: 0.01em; - color: var(--fg); - background: var(--bg); - border: 1px solid var(--rule); - border-radius: 999px; - padding: 0.7rem 1.6rem; - cursor: pointer; - transition: - border-color 0.18s ease, - color 0.18s ease, - transform 0.18s ease, - opacity 0.4s ease; - } - .load-more:hover { - color: var(--accent); - border-color: color-mix(in srgb, var(--accent) 50%, var(--rule)); - transform: translateY(-1px); - } - .load-more.fading { - opacity: 0; - transform: translateY(4px); - pointer-events: none; - } - </style> </BaseLayout> diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro index 4f7bc35..164643d 100644 --- a/src/pages/posts/[...slug].astro +++ b/src/pages/posts/[...slug].astro @@ -19,12 +19,6 @@ export async function getStaticPaths() { const { post } = Astro.props; const { Content } = await render(post); -const fmt = new Intl.DateTimeFormat('en-US', { - year: 'numeric', - month: 'long', - day: 'numeric', -}); - const description = post.data.description ?? `Notes from Unique: ${post.data.title}.`; const ogImage = buildOgImage(undefined, 'posts', `${post.data.title} cover image`); @@ -52,6 +46,9 @@ const breadcrumbs = buildBreadcrumbs([ <BaseLayout title={post.data.title} description={description} + subheader={post.data.title} + subheaderVariant="headline" + lastUpdated={post.data.date} ogType="article" ogImage={ogImage} publishedTime={post.data.date} @@ -59,47 +56,30 @@ const breadcrumbs = buildBreadcrumbs([ jsonLd={[blogPosting, breadcrumbs]} > <article> - <header class="post-header"> - <h1>{post.data.title}</h1> - <p class="meta"> - <time datetime={post.data.date.toISOString()}> - {fmt.format(post.data.date)} - </time> - <span class="dot">·</span> - <a href={`/categories/${post.data.category}/`} class="category"> - {post.data.category} - </a> - </p> - </header> - <div class="body"> <Content /> </div> - { - post.data.tags.length > 0 && ( - <footer class="tags"> + <footer class="post-footer"> + {post.data.tags.length > 0 && ( + <div class="tags"> {post.data.tags.map((tag) => ( <a href={`/tags/${tag}/`} class="tag">#{tag}</a> ))} - </footer> - ) - } + </div> + )} + <p class="filed-under"> + Filed under{' '} + <a href={`/categories/${post.data.category}/`} class="category"> + {post.data.category} + </a> + </p> + </footer> <p class="back"><a href="/">← back</a></p> </article> <style> - .post-header { - margin-bottom: 2rem; - padding-bottom: 1rem; - border-bottom: 1px solid var(--rule); - } - h1 { margin: 0 0 0.5rem; } - .meta { margin: 0; color: var(--muted); font-size: 0.9rem; } - .meta .dot { margin: 0 0.4rem; } - .meta .category { color: var(--muted); } - .meta .category:hover { color: var(--accent); } .body :global(p) { margin: 0 0 1rem; } .body :global(h2) { font-size: 1.3rem; margin: 2rem 0 0.75rem; } .body :global(h3) { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; } @@ -115,16 +95,28 @@ const breadcrumbs = buildBreadcrumbs([ margin: 0 0 1.75rem; } .body :global(blockquote p) { margin: 0; } - .tags { + .post-footer { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); + } + .tags { display: flex; gap: 0.75rem; flex-wrap: wrap; } .tag { font-size: 0.85rem; color: var(--muted); } .tag:hover { color: var(--accent); } + .filed-under { + margin: 1rem 0 0; + font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif; + font-size: 0.72rem; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--muted); + } + .filed-under .category { color: var(--muted); } + .filed-under .category:hover { color: var(--accent); } .back { margin-top: 2rem; font-size: 0.9rem; } </style> </BaseLayout> diff --git a/src/pages/settings.astro b/src/pages/settings.astro new file mode 100644 index 0000000..0c22abf --- /dev/null +++ b/src/pages/settings.astro @@ -0,0 +1,117 @@ +--- +import BaseLayout from '../layouts/BaseLayout.astro'; +--- + +<BaseLayout + title="Settings" + description="Presentation options for Unique — color theme and other display preferences." + subheader="Presentation options." + noindex +> + <article> + <section class="setting"> + <h2>Color theme</h2> + <p class="hint"> + Auto follows your system preference. Light or dark overrides it on this + device. + </p> + <div class="theme-toggle" role="group" aria-label="Color theme"> + <button type="button" data-theme-set="auto">Auto</button> + <button type="button" data-theme-set="light">Light</button> + <button type="button" data-theme-set="dark">Dark</button> + </div> + </section> + + <p class="more">More presentation options will land here over time.</p> + </article> + + <script> + type Theme = 'auto' | 'light' | 'dark'; + const buttons = document.querySelectorAll<HTMLButtonElement>('[data-theme-set]'); + + function currentTheme(): Theme { + const t = document.documentElement.getAttribute('data-theme'); + return t === 'light' || t === 'dark' ? t : 'auto'; + } + + function setActive(value: Theme) { + for (const b of buttons) { + if (b.dataset.themeSet === value) b.setAttribute('aria-current', 'true'); + else b.removeAttribute('aria-current'); + } + } + + function applyTheme(value: Theme) { + if (value === 'auto') { + document.documentElement.removeAttribute('data-theme'); + try { localStorage.removeItem('theme'); } catch (e) {} + } else { + document.documentElement.setAttribute('data-theme', value); + try { localStorage.setItem('theme', value); } catch (e) {} + } + setActive(value); + } + + for (const b of buttons) { + b.addEventListener('click', () => { + const v = b.dataset.themeSet; + if (v === 'auto' || v === 'light' || v === 'dark') applyTheme(v); + }); + } + + setActive(currentTheme()); + </script> + + <style> + .setting { + padding: 1.5rem 0; + border-bottom: 1px solid var(--rule); + } + .setting:first-child { padding-top: 0; } + .setting h2 { + margin: 0 0 0.35rem; + font-size: 1.05rem; + } + .hint { + margin: 0 0 0.85rem; + color: var(--muted); + font-size: 0.92rem; + } + + .theme-toggle { + display: inline-flex; + gap: 0; + border: 1px solid var(--rule); + border-radius: 999px; + overflow: hidden; + } + .theme-toggle button { + font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif; + font-size: 0.85rem; + font-weight: 600; + letter-spacing: 0.02em; + background: none; + border: 0; + padding: 0.45rem 1rem; + margin: 0; + color: var(--muted); + cursor: pointer; + transition: background 0.18s ease, color 0.18s ease; + } + .theme-toggle button + button { + border-left: 1px solid var(--rule); + } + .theme-toggle button:hover { color: var(--accent); } + .theme-toggle button[aria-current="true"] { + background: var(--fg); + color: var(--bg); + } + + .more { + margin-top: 2rem; + color: var(--muted); + font-style: italic; + font-size: 0.9rem; + } + </style> +</BaseLayout> diff --git a/src/pages/sources.astro b/src/pages/sources.astro index 2c17670..c31e109 100644 --- a/src/pages/sources.astro +++ b/src/pages/sources.astro @@ -1,7 +1,9 @@ --- import BaseLayout from '../layouts/BaseLayout.astro'; +import Masonry from '../components/Masonry.astro'; import sourcesData from '../../sources.json'; import { getAllFinds } from '../lib/find-items'; +import { sourceSlug } from '../lib/sources'; import { buildOgImage, buildBreadcrumbs, @@ -83,12 +85,12 @@ const breadcrumbs = buildBreadcrumbs([ ogImage={ogImage} jsonLd={[collectionPage, itemList, breadcrumbs]} > - <ul class="grid"> + <Masonry> { sources.map((source) => { const recent = (findsBySource.get(source.name) ?? []).slice(0, 5); return ( - <li> + <article id={sourceSlug(source.name)} class="source-item"> <div class="card"> <a href={source.url} class="head-link" target="_blank" rel="noopener"> <div class="head"> @@ -119,29 +121,21 @@ const breadcrumbs = buildBreadcrumbs([ </div> )} </div> - </li> + </article> ); }) } - </ul> + </Masonry> <p class="back"><a href="/">← back</a></p> <style> - .grid { - column-count: 3; - column-gap: 1rem; - list-style: none; - margin: 0; - padding: 0; + .source-item { + scroll-margin-top: 1rem; } - @media (max-width: 880px) { .grid { column-count: 2; } } - @media (max-width: 520px) { .grid { column-count: 1; } } - - .grid > li { - break-inside: avoid; - display: block; - margin: 0 0 1rem; + .source-item:target .card { + border-color: var(--accent); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } .card { @@ -164,10 +158,11 @@ const breadcrumbs = buildBreadcrumbs([ .head { display: flex; - align-items: baseline; - justify-content: space-between; - gap: 0.6rem; + flex-direction: column; + gap: 0.15rem; margin-bottom: 0.45rem; + min-width: 0; + overflow: hidden; } .name { font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif; @@ -178,10 +173,14 @@ const breadcrumbs = buildBreadcrumbs([ transition: color 0.18s ease; } .host { + display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; color: var(--muted); - flex-shrink: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 100%; } .notes {