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
This commit is contained in:
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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;
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
export function sourceSlug(name: string): string {
|
||||
return name
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, '-')
|
||||
.replace(/^-+|-+$/g, '');
|
||||
}
|
||||
+15
-183
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
+20
-21
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user