site: ui/ux refresh, seo pass, find/lists indexes, 25 new finds

- newspaper-style masthead (stats | "Unique" | About/Blog) on every page with per-page italic subheader + last-updated date on listing pages; sitewide 42rem reading width - pinterest home (hero + masonry, "load more"); old list view at /index3/ - new pages: /about, /blog, /legal, /find/, /finds/, custom 404 - footer collection links now clickable; "founded" stat replaces "updated" in the masthead - centralised SEO component with per-page json-ld (Review, BlogPosting, Product, Article, CollectionPage, ItemList, BreadcrumbList, etc.); @astrojs/sitemap + @astrojs/rss; robots.txt; promoted finds canonical to their review - memoize getSiteStats() so the masthead/footer counts don't multiply per-page build cost - 25 new daily-finds captures
2026-05-03 16:58:23 -04:00
parent c184f3f50a
commit c8095d2766
54 changed files with 2337 additions and 95 deletions
@@ -0,0 +1,56 @@
+---
+import { getCollection } from 'astro:content';
+import BaseLayout from '../layouts/BaseLayout.astro';
+
+const reviews = (await getCollection('reviews')).sort(
+  (a, b) => b.data.date.valueOf() - a.data.date.valueOf()
+);
+const recent = reviews.slice(0, 6);
+---
+
+<BaseLayout
+  title="Not found"
+  description="That page doesn't exist on Unique."
+  subheader="That page doesn't exist."
+  noindex
+>
+  <article>
+    <p>The page you were looking for isn't here. Maybe one of these will do:</p>
+
+    <h2>Recent reviews</h2>
+    <ul class="recent">
+      {recent.map((r) => (
+        <li>
+          <a href={`/reviews/${r.id}/`}>{r.data.name}</a>
+          {r.data.subtitle && <span class="subtitle"> — {r.data.subtitle}</span>}
+        </li>
+      ))}
+    </ul>
+
+    <h2>Browse</h2>
+    <ul class="nav">
+      <li><a href="/">Home</a></li>
+      <li><a href="/grid/">Grid</a></li>
+      <li><a href="/sources/">Sources</a></li>
+      <li><a href="/blog/">Blog</a></li>
+      <li><a href="/about/">About</a></li>
+    </ul>
+  </article>
+
+  <style>
+    article h2 {
+      margin: 2rem 0 0.6rem;
+      font-size: 1.05rem;
+    }
+    .recent, .nav {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+    .recent li, .nav li {
+      padding: 0.35rem 0;
+      border-bottom: 1px solid var(--rule);
+    }
+    .recent .subtitle { color: var(--muted); }
+  </style>
+</BaseLayout>
@@ -0,0 +1,57 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import { buildOgImage, buildBreadcrumbs, absoluteUrl } from '../lib/seo';
+
+const description =
+  'About Unique — a small, one-person blog cataloguing delightful, unusual, well-made things.';
+
+const ogImage = buildOgImage(undefined, 'site', 'About Unique');
+
+const aboutPage: Record<string, unknown> = {
+  '@context': 'https://schema.org',
+  '@type': 'AboutPage',
+  '@id': absoluteUrl('/about/#about'),
+  name: 'About — Unique',
+  description,
+  url: absoluteUrl('/about/'),
+  inLanguage: 'en-US',
+  about: {
+    '@type': 'Person',
+    name: 'rzen',
+    url: absoluteUrl('/about/'),
+  },
+};
+
+const breadcrumbs = buildBreadcrumbs([
+  { name: 'Home', url: '/' },
+  { name: 'About', url: '/about/' },
+]);
+---
+
+<BaseLayout
+  title="About"
+  description={description}
+  subheader="A small log of delightful things, kept for our own amusement."
+  ogImage={ogImage}
+  jsonLd={[aboutPage, breadcrumbs]}
+>
+  <article>
+    <p>
+      <strong>Unique</strong> is a quiet little blog that collects the small,
+      well-made things that make ordinary days a bit better — the kind of
+      object, app, or tool you find yourself recommending to a friend without
+      thinking twice.
+    </p>
+    <p>
+      It's run by one person, updated when there's something worth sharing,
+      and indexed by topic so you can browse by interest. Nothing here is
+      sponsored; some outbound links are affiliate links, which costs you
+      nothing extra and helps keep the lights on.
+    </p>
+    <p>
+      Start with the <a href="/">home page</a>, scan the
+      <a href="/grid/">grid</a>, or peek at the
+      <a href="/sources/">sources</a> we draw from.
+    </p>
+  </article>
+</BaseLayout>
@@ -0,0 +1,61 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import EntryList from '../components/EntryList.astro';
+import { getAllEntries } from '../lib/entries';
+import {
+  buildOgImage,
+  buildBreadcrumbs,
+  buildItemList,
+  absoluteUrl,
+} from '../lib/seo';
+
+const posts = (await getAllEntries()).filter((e) => e.type === 'post');
+const lastUpdated = posts[0]?.date;
+
+const description = 'Longer-form notes from Unique — essays and meta about the project.';
+const ogImage = buildOgImage(undefined, 'posts', 'Unique blog');
+
+const itemList = buildItemList(
+  posts.map((p) => ({ url: p.href, name: p.primary })),
+  'Posts on Unique'
+);
+
+const blogSchema: Record<string, unknown> = {
+  '@context': 'https://schema.org',
+  '@type': 'Blog',
+  '@id': absoluteUrl('/blog/#blog'),
+  name: 'Unique — Blog',
+  description,
+  url: absoluteUrl('/blog/'),
+  inLanguage: 'en-US',
+};
+
+const breadcrumbs = buildBreadcrumbs([
+  { name: 'Home', url: '/' },
+  { name: 'Blog', url: '/blog/' },
+]);
+---
+
+<BaseLayout
+  title="Blog"
+  description={description}
+  subheader="Longer notes, when something deserves more than a card."
+  lastUpdated={lastUpdated}
+  ogImage={ogImage}
+  jsonLd={[blogSchema, itemList, breadcrumbs]}
+>
+  {posts.length > 0 ? (
+    <EntryList entries={posts} />
+  ) : (
+    <p class="empty">Nothing yet — check back soon.</p>
+  )}
+
+  <style>
+    .empty {
+      margin: 3rem 0;
+      text-align: center;
+      color: var(--muted);
+      font-style: italic;
+    }
+  </style>
+</BaseLayout>
@@ -2,6 +2,12 @@
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import EntryList from '../../components/EntryList.astro';
 import { getAllEntries } from '../../lib/entries';
+import {
+  buildOgImage,
+  buildBreadcrumbs,
+  buildItemList,
+  absoluteUrl,
+} from '../../lib/seo';

 export async function getStaticPaths() {
  const entries = await getAllEntries();
@@ -16,15 +22,49 @@ export async function getStaticPaths() {
 }

 const { category, entries } = Astro.props;
+const lastUpdated = entries[0]?.date;
+const count = entries.length;
+const topNames = entries.slice(0, 3).map((e) => e.primary).join(', ');
+const description =
+  topNames.length > 0
+    ? `All ${count} entries in ${category}: ${topNames}${count > 3 ? '…' : '.'}`
+    : `All entries in ${category}.`;
+
+const ogImage = buildOgImage(undefined, 'site', `${category} on Unique`);
+
+const itemList = buildItemList(
+  entries.map((e) => ({ url: e.href, name: e.primary })),
+  `${category} on Unique`
+);
+
+const collectionPage: Record<string, unknown> = {
+  '@context': 'https://schema.org',
+  '@type': 'CollectionPage',
+  '@id': absoluteUrl(`/categories/${category}/#collection`),
+  name: `${category} — Unique`,
+  description,
+  url: absoluteUrl(`/categories/${category}/`),
+  inLanguage: 'en-US',
+};
+
+const breadcrumbs = buildBreadcrumbs([
+  { name: 'Home', url: '/' },
+  { name: category, url: `/categories/${category}/` },
+]);
 ---

-<BaseLayout title={`Category: ${category}`}>
-  <h1>Category: {category}</h1>
+<BaseLayout
+  title={`${category} (${count})`}
+  description={description}
+  subheader={`Delightful ${category}.`}
+  lastUpdated={lastUpdated}
+  ogImage={ogImage}
+  jsonLd={[collectionPage, itemList, breadcrumbs]}
+>
  <EntryList entries={entries} />
  <p class="back"><a href="/">← back</a></p>

  <style>
-    h1 { margin-bottom: 1rem; }
    .back { margin-top: 2rem; font-size: 0.9rem; }
  </style>
 </BaseLayout>
@@ -4,6 +4,12 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 import SourceBadge from '../../components/SourceBadge.astro';
 import Backlinks from '../../components/Backlinks.astro';
 import { findsReferencing } from '../../lib/backlinks';
+import {
+  resolveExternalLink,
+  AFFILIATE_REL,
+  AFFILIATE_DISCLOSURE,
+} from '../../lib/affiliate';
+import { buildOgImage, buildBreadcrumbs, absoluteUrl } from '../../lib/seo';

 export async function getStaticPaths() {
  const items = await getCollection('find');
@@ -25,11 +31,53 @@ const fmt = new Intl.DateTimeFormat('en-US', {

 const linkLabel =
  item.data.linkText ?? new URL(item.data.link).hostname.replace(/^www\./, '');
+
+const external = resolveExternalLink(item.data.link);
+
+const description =
+  item.data.description ?? item.data.subtitle ?? `A find: ${item.data.name}.`;
+
+const canonicalOverride = item.data.promotedTo
+  ? absoluteUrl(`/reviews/${item.data.promotedTo}/`)
+  : undefined;
+
+const ogImage = buildOgImage(
+  item.data.promotedTo,
+  'finds',
+  `${item.data.name} preview image`
+);
+
+const productSchema: Record<string, unknown> = {
+  '@context': 'https://schema.org',
+  '@type': 'Product',
+  '@id': absoluteUrl(`/find/${item.id}/#product`),
+  name: item.data.name,
+  description,
+  url: absoluteUrl(`/find/${item.id}/`),
+  image: ogImage.url,
+  offers: {
+    '@type': 'Offer',
+    url: item.data.link,
+    availability: 'https://schema.org/InStock',
+  },
+};
+
+const breadcrumbs = buildBreadcrumbs([
+  { name: 'Home', url: '/' },
+  { name: 'Sources', url: '/sources/' },
+  { name: item.data.name, url: `/find/${item.id}/` },
+]);
 ---

 <BaseLayout
  title={item.data.name}
-  description={item.data.description ?? item.data.subtitle ?? item.data.name}
+  description={description}
+  ogType="article"
+  ogImage={ogImage}
+  canonicalOverride={canonicalOverride}
+  publishedTime={item.data.date}
+  articleTags={item.data.tags}
+  jsonLd={[productSchema, breadcrumbs]}
 >
  <article>
    <p class="source-line"><SourceBadge source={item.data.source} /></p>
@@ -49,11 +97,20 @@ const linkLabel =
    </div>

    <p class="external">
-      <a href={item.data.link} target="_blank" rel="noopener noreferrer">
+      <a
+        href={external.href}
+        target="_blank"
+        rel={external.isAffiliate ? AFFILIATE_REL : 'noopener noreferrer'}
+      >
        {linkLabel} ↗
      </a>
+      {external.isAffiliate && <span class="aff-badge">Affiliate</span>}
    </p>

+    {external.isAffiliate && (
+      <p class="aff-disclosure">{AFFILIATE_DISCLOSURE}</p>
+    )}
+
    {
      item.data.promotedTo && (
        <p class="promoted">
@@ -112,6 +169,26 @@ const linkLabel =
      font-size: 0.95rem;
    }
    .external a:hover { text-decoration: none; opacity: 0.9; }
+    .aff-badge {
+      display: inline-block;
+      margin-left: 0.6rem;
+      padding: 0.15rem 0.5rem;
+      font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
+      font-size: 0.7rem;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      color: var(--muted);
+      background: var(--rule);
+      border-radius: 999px;
+      vertical-align: middle;
+    }
+    .aff-disclosure {
+      margin: 0.6rem 0 0;
+      font-size: 0.78rem;
+      color: var(--muted);
+      font-style: italic;
+    }
    .promoted {
      margin: 1.5rem 0 0;
      padding: 0.85rem 1rem;
@@ -0,0 +1,53 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { getAllFinds } from '../../lib/find-items';
+
+const finds = await getAllFinds();
+const lastUpdated = finds[0]?.data.date;
+
+const fmt = new Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+});
+---
+
+<BaseLayout
+  title="Finds"
+  description={`All ${finds.length} captured finds on Unique.`}
+  subheader={`All ${finds.length} captured finds.`}
+  lastUpdated={lastUpdated}
+  noindex
+>
+  <ul class="find-index">
+    {finds.map((f) => (
+      <li>
+        <a href={`/find/${f.id}/`}>{f.data.name}</a>
+        <time datetime={f.data.date.toISOString()}>{fmt.format(f.data.date)}</time>
+      </li>
+    ))}
+  </ul>
+
+  <style>
+    .find-index {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+    .find-index li {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      gap: 1rem;
+      padding: 0.5rem 0;
+      border-bottom: 1px solid var(--rule);
+    }
+    .find-index li:last-child { border-bottom: 0; }
+    .find-index time {
+      color: var(--muted);
+      font-size: 0.85rem;
+      font-variant-numeric: tabular-nums;
+      white-space: nowrap;
+    }
+  </style>
+</BaseLayout>
@@ -3,6 +3,13 @@ import { getCollection, render } from 'astro:content';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import FindsGrid from '../../components/FindsGrid.astro';
 import { resolveFinds } from '../../lib/find-items';
+import {
+  buildOgImage,
+  buildBreadcrumbs,
+  buildItemList,
+  PERSON_AUTHOR,
+  absoluteUrl,
+} from '../../lib/seo';

 export async function getStaticPaths() {
  const finds = await getCollection('finds');
@@ -21,12 +28,48 @@ const fmt = new Intl.DateTimeFormat('en-US', {
  month: 'long',
  day: 'numeric',
 });
+
+const description =
+  post.data.description ?? post.data.blurb ?? `A collection: ${post.data.title}.`;
+
+const ogImage = buildOgImage(
+  items[0]?.data.promotedTo,
+  'finds',
+  `${post.data.title} cover image`
+);
+
+const articleSchema: Record<string, unknown> = {
+  '@context': 'https://schema.org',
+  '@type': 'Article',
+  '@id': absoluteUrl(`/finds/${post.id}/#article`),
+  headline: post.data.title,
+  description,
+  url: absoluteUrl(`/finds/${post.id}/`),
+  datePublished: post.data.date.toISOString(),
+  author: PERSON_AUTHOR,
+  image: ogImage.url,
+  inLanguage: 'en-US',
+};
+
+const itemList = buildItemList(
+  items.map((it) => ({ url: `/find/${it.id}/`, name: it.data.name })),
+  post.data.title
+);
+
+const breadcrumbs = buildBreadcrumbs([
+  { name: 'Home', url: '/' },
+  { name: post.data.title, url: `/finds/${post.id}/` },
+]);
 ---

 <BaseLayout
  title={post.data.title}
-  description={post.data.description ?? post.data.blurb}
-  wide
+  description={description}
+  ogType="article"
+  ogImage={ogImage}
+  publishedTime={post.data.date}
+  articleTags={post.data.tags}
+  jsonLd={[articleSchema, itemList, breadcrumbs]}
 >
  <article>
    <header class="finds-header">
@@ -0,0 +1,55 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { getCollection } from 'astro:content';
+
+const lists = (await getCollection('finds')).sort(
+  (a, b) => b.data.date.valueOf() - a.data.date.valueOf()
+);
+const lastUpdated = lists[0]?.data.date;
+
+const fmt = new Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+});
+---
+
+<BaseLayout
+  title="Lists"
+  description={`All ${lists.length} themed lists on Unique.`}
+  subheader={`All ${lists.length} themed lists.`}
+  lastUpdated={lastUpdated}
+  noindex
+>
+  <ul class="lists-index">
+    {lists.map((l) => (
+      <li>
+        <a href={`/finds/${l.id}/`}>{l.data.title}</a>
+        <time datetime={l.data.date.toISOString()}>{fmt.format(l.data.date)}</time>
+      </li>
+    ))}
+  </ul>
+
+  <style>
+    .lists-index {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+    .lists-index li {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      gap: 1rem;
+      padding: 0.5rem 0;
+      border-bottom: 1px solid var(--rule);
+    }
+    .lists-index li:last-child { border-bottom: 0; }
+    .lists-index time {
+      color: var(--muted);
+      font-size: 0.85rem;
+      font-variant-numeric: tabular-nums;
+      white-space: nowrap;
+    }
+  </style>
+</BaseLayout>
@@ -13,14 +13,17 @@ const tiles = reviews.map((review) => ({
  subtitle: review.data.subtitle,
  hero: heroes[review.id],
 }));
+
+const lastUpdated = reviews[0]?.data.date;
 ---

-<BaseLayout title="Grid" wide>
-  <div class="intro">
-    <h1>Grid view</h1>
-    <p><a href="/">← list view</a></p>
-  </div>
-
+<BaseLayout
+  title="Grid"
+  description="Every review on Unique, tiled in a single grid."
+  subheader="Every review as a tile."
+  lastUpdated={lastUpdated}
+  noindex
+>
  <ul class="grid">
    {
      tiles.map((tile) => (
@@ -34,7 +37,7 @@ const tiles = reviews.map((review) => ({
                height={tile.hero.src.height}
                loading="lazy"
                decoding="async"
-                alt=""
+                alt={tile.name}
              />
            )}
            {tile.hero?.kind === 'video' && (
@@ -46,6 +49,7 @@ const tiles = reviews.map((review) => ({
                muted
                playsinline
                preload="metadata"
+                aria-label={tile.name}
              />
            )}
            <div class="text">
@@ -59,16 +63,6 @@ const tiles = reviews.map((review) => ({
  </ul>

  <style>
-    .intro {
-      display: flex;
-      align-items: baseline;
-      justify-content: space-between;
-      gap: 1rem;
-      margin-bottom: 1.5rem;
-    }
-    .intro h1 { margin: 0; font-size: 1.5rem; }
-    .intro p { margin: 0; font-size: 0.9rem; color: var(--muted); }
-
    .grid {
      column-count: 3;
      column-gap: 1rem;
@@ -1,28 +1,398 @@
 ---
+import { getCollection } from 'astro:content';
 import BaseLayout from '../layouts/BaseLayout.astro';
-import EntryList from '../components/EntryList.astro';
-import { getAllEntries } from '../lib/entries';
+import { heroes } from '../lib/hero';
+import { buildOgImage, buildItemList, WEBSITE, ORGANIZATION } from '../lib/seo';

-const entries = (await getAllEntries()).slice(0, 12);
+const HERO_SLUG = 'alt-tab';
+const INITIAL_GRID = 7;
+const BATCH_SIZE = 7;
+
+const reviews = (await getCollection('reviews')).sort(
+  (a, b) => b.data.date.valueOf() - a.data.date.valueOf()
+);
+
+const tiles = reviews.map((review) => ({
+  href: `/reviews/${review.id}/`,
+  id: review.id,
+  name: review.data.name,
+  subtitle: review.data.subtitle,
+  hero: heroes[review.id],
+}));
+
+const heroIndex = tiles.findIndex((t) => t.href === `/reviews/${HERO_SLUG}/`);
+const hero = heroIndex >= 0 ? tiles[heroIndex] : tiles[0];
+const rest = tiles.filter((_, i) => i !== (heroIndex >= 0 ? heroIndex : 0));
+
+const lastUpdated = reviews[0]?.data.date;
+
+const ogImage = buildOgImage(hero?.id, 'reviews', `${hero?.name ?? 'Unique'} hero image`);
+const itemList = buildItemList(
+  tiles.slice(0, INITIAL_GRID).map((t) => ({ url: t.href, name: t.name })),
+  'Latest reviews'
+);
 ---

-<BaseLayout title="Unique">
-  <EntryList entries={entries} />
-  <p class="view-toggle">
-    <a href="/sources/">sources</a>
-    <span aria-hidden="true">·</span>
-    <a href="/grid/">grid view →</a>
-  </p>
+<BaseLayout
+  title="Unique"
+  description="A small log of delightful, unique things — products, apps, phenomena, oddities."
+  subheader="A small log of delightful things."
+  lastUpdated={lastUpdated}
+  ogImage={ogImage}
+  jsonLd={[WEBSITE, ORGANIZATION, itemList]}
+>
+  {hero && (
+    <a href={hero.href} class="hero">
+      {hero.hero?.kind === 'image' && (
+        <img
+          class="hero-media"
+          src={hero.hero.src.src}
+          width={hero.hero.src.width}
+          height={hero.hero.src.height}
+          fetchpriority="high"
+          loading="eager"
+          decoding="sync"
+          alt={hero.name}
+        />
+      )}
+      {hero.hero?.kind === 'video' && (
+        <video
+          class="hero-media"
+          src={hero.hero.src}
+          autoplay
+          loop
+          muted
+          playsinline
+          preload="metadata"
+          aria-label={hero.name}
+        />
+      )}
+      <div class="hero-text">
+        <span class="hero-eyebrow">Today's pick</span>
+        <h1 class="hero-name">{hero.name}</h1>
+        {hero.subtitle && <p class="hero-subtitle">{hero.subtitle}</p>}
+      </div>
+    </a>
+  )}
+
+  <ul class="grid" data-initial={INITIAL_GRID} data-batch={BATCH_SIZE}>
+    {
+      rest.map((tile, i) => (
+        <li class:list={[{ hidden: i >= INITIAL_GRID }]} data-index={i}>
+          <a href={tile.href} class:list={['tile', { 'text-only': !tile.hero }]}>
+            {tile.hero?.kind === 'image' && (
+              <img
+                class="media"
+                src={tile.hero.src.src}
+                width={tile.hero.src.width}
+                height={tile.hero.src.height}
+                loading="lazy"
+                decoding="async"
+                alt={tile.name}
+              />
+            )}
+            {tile.hero?.kind === 'video' && (
+              <video
+                class="media"
+                src={tile.hero.src}
+                autoplay
+                loop
+                muted
+                playsinline
+                preload="metadata"
+                aria-label={tile.name}
+              />
+            )}
+            <div class="text">
+              <span class="name">{tile.name}</span>
+              <span class="subtitle">{tile.subtitle}</span>
+            </div>
+          </a>
+        </li>
+      ))
+    }
+  </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>

  <style>
-    .view-toggle {
-      margin-top: 1.75rem;
-      text-align: right;
-      font-size: 0.85rem;
-      color: var(--muted);
+    .hero {
+      display: block;
+      position: relative;
+      border-radius: 14px;
+      overflow: hidden;
+      border: 1px 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;
    }
-    .view-toggle a { color: var(--muted); }
-    .view-toggle a:hover { color: var(--accent); }
-    .view-toggle span { margin: 0 0.4rem; color: var(--muted); }
+    .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);
+    }
+    .hero:hover .hero-name { color: var(--accent); }
+
+    .hero-media {
+      display: block;
+      width: 100%;
+      height: auto;
+      max-height: 62vh;
+      object-fit: cover;
+      background: var(--rule);
+    }
+    .hero-text {
+      padding: 1.6rem 1.75rem 1.75rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.4rem;
+    }
+    .hero-eyebrow {
+      font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
+      font-size: 0.78rem;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--accent);
+      font-weight: 600;
+    }
+    .hero-name {
+      margin: 0;
+      font-size: clamp(1.6rem, 3vw, 2.4rem);
+      letter-spacing: -0.02em;
+      transition: color 0.18s ease;
+    }
+    .hero-subtitle {
+      margin: 0;
+      color: var(--muted);
+      font-size: clamp(1rem, 1.4vw, 1.15rem);
+      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);
+      background: var(--bg);
+      color: inherit;
+      transition: transform 0.18s ease, 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);
+    }
+    .tile:hover .name { color: var(--accent); }
+
+    .media {
+      display: block;
+      width: 100%;
+      height: auto;
+      background: var(--rule);
+    }
+
+    .text {
+      padding: 0.85rem 1rem 1rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.2rem;
+    }
+    .name {
+      font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
+      font-weight: 700;
+      font-size: 1rem;
+      letter-spacing: -0.01em;
+      color: var(--fg);
+      transition: color 0.18s ease;
+    }
+    .subtitle {
+      color: var(--muted);
+      font-size: 0.92rem;
+      line-height: 1.4;
+    }
+
+    .tile.text-only {
+      background: linear-gradient(155deg, var(--rule), transparent);
+    }
+    .tile.text-only .text {
+      padding: 1.5rem 1.25rem;
+    }
+    .tile.text-only .name {
+      font-size: 1.25rem;
+      margin-bottom: 0.3rem;
+    }
+    .tile.text-only .subtitle {
+      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>
@@ -0,0 +1,19 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import EntryList from '../components/EntryList.astro';
+import { getAllEntries } from '../lib/entries';
+
+const allEntries = await getAllEntries();
+const entries = allEntries.slice(0, 12);
+const lastUpdated = allEntries[0]?.date;
+---
+
+<BaseLayout
+  title="List view"
+  description="The latest entries on Unique, in a plain chronological list."
+  subheader="The latest, in plain text."
+  lastUpdated={lastUpdated}
+  noindex
+>
+  <EntryList entries={entries} />
+</BaseLayout>
@@ -0,0 +1,77 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import { buildOgImage, buildBreadcrumbs } from '../lib/seo';
+
+const ogImage = buildOgImage(undefined, 'site', 'Unique legal page');
+const breadcrumbs = buildBreadcrumbs([
+  { name: 'Home', url: '/' },
+  { name: 'Legal', url: '/legal/' },
+]);
+---
+
+<BaseLayout
+  title="Legal"
+  description="Privacy, terms, affiliate disclosure, and trademark notes for Unique."
+  subheader="The legal mumbo jumbo, kept short and honest."
+  ogImage={ogImage}
+  jsonLd={breadcrumbs}
+>
+  <article>
+    <h2>Privacy</h2>
+    <p>
+      Unique doesn't run analytics, ad pixels, or third-party trackers. The
+      site sets no cookies of its own. Your visit produces a normal web-server
+      access log entry (IP, user-agent, referrer, requested path) at our
+      hosting provider, kept only for the rolling window needed to investigate
+      abuse and outages, and never sold or shared.
+    </p>
+    <p>
+      Outbound links go to third-party sites that have their own privacy
+      practices; we have no control over those.
+    </p>
+
+    <h2>Affiliate disclosure</h2>
+    <p>
+      Some outbound links — most often to Amazon — are affiliate links. If you
+      buy something after clicking one, we may earn a small commission at no
+      additional cost to you. Affiliate links are marked with an
+      <strong>Affiliate</strong> badge and a one-line disclosure on each page
+      where they appear. Affiliate revenue does not influence what we cover or
+      how we cover it; nothing on this site is sponsored or paid placement.
+    </p>
+
+    <h2>Trademarks &amp; copyright</h2>
+    <p>
+      All product names, logos, screenshots, and brand marks belong to their
+      respective owners and appear here under fair use for editorial review
+      and commentary. If you're a rights-holder and would like an image
+      removed or attribution corrected, please get in touch.
+    </p>
+    <p>
+      Original writing on Unique is © {new Date().getFullYear()} Unique, all
+      rights reserved.
+    </p>
+
+    <h2>Use of the site</h2>
+    <p>
+      Content is provided as-is for informational purposes; we make no
+      warranty that any product covered here will suit your particular
+      situation. Use your own judgement before buying or installing anything.
+    </p>
+
+    <h2>Contact</h2>
+    <p>
+      Questions, corrections, or takedown requests: reach out via the address
+      on the <a href="/about/">About</a> page.
+    </p>
+  </article>
+
+  <style>
+    article h2 {
+      margin-top: 2rem;
+      font-size: 1.15rem;
+    }
+    article h2:first-of-type { margin-top: 0; }
+    article p { margin: 0.7rem 0; }
+  </style>
+</BaseLayout>
@@ -1,6 +1,12 @@
 ---
 import { getCollection, render } from 'astro:content';
 import BaseLayout from '../../layouts/BaseLayout.astro';
+import {
+  buildOgImage,
+  buildBreadcrumbs,
+  PERSON_AUTHOR,
+  absoluteUrl,
+} from '../../lib/seo';

 export async function getStaticPaths() {
  const posts = await getCollection('posts');
@@ -18,9 +24,40 @@ const fmt = new Intl.DateTimeFormat('en-US', {
  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`);
+
+const blogPosting: Record<string, unknown> = {
+  '@context': 'https://schema.org',
+  '@type': 'BlogPosting',
+  '@id': absoluteUrl(`/posts/${post.id}/#post`),
+  headline: post.data.title,
+  description,
+  url: absoluteUrl(`/posts/${post.id}/`),
+  datePublished: post.data.date.toISOString(),
+  author: PERSON_AUTHOR,
+  image: ogImage.url,
+  inLanguage: 'en-US',
+  mainEntityOfPage: absoluteUrl(`/posts/${post.id}/`),
+};
+
+const breadcrumbs = buildBreadcrumbs([
+  { name: 'Home', url: '/' },
+  { name: 'Blog', url: '/blog/' },
+  { name: post.data.title, url: `/posts/${post.id}/` },
+]);
 ---

-<BaseLayout title={post.data.title} description={post.data.description}>
+<BaseLayout
+  title={post.data.title}
+  description={description}
+  ogType="article"
+  ogImage={ogImage}
+  publishedTime={post.data.date}
+  articleTags={post.data.tags}
+  jsonLd={[blogPosting, breadcrumbs]}
+>
  <article>
    <header class="post-header">
      <h1>{post.data.title}</h1>
@@ -2,6 +2,18 @@
 import { getCollection, render } from 'astro:content';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import SourceBadge from '../../components/SourceBadge.astro';
+import {
+  resolveExternalLink,
+  AFFILIATE_REL,
+  AFFILIATE_DISCLOSURE,
+} from '../../lib/affiliate';
+import {
+  buildOgImage,
+  buildBreadcrumbs,
+  reviewedItemType,
+  PERSON_AUTHOR,
+  absoluteUrl,
+} from '../../lib/seo';

 export async function getStaticPaths() {
  const reviews = await getCollection('reviews');
@@ -24,14 +36,53 @@ const linkLabel =
  review.data.link &&
  (review.data.linkText ?? new URL(review.data.link).hostname.replace(/^www\./, ''));

+const external = review.data.link ? resolveExternalLink(review.data.link) : undefined;
+
 const fromFindItem = review.data.fromFind
  ? (await getCollection('find')).find((f) => f.id === review.data.fromFind)
  : undefined;
+
+const description =
+  review.data.description ?? review.data.subtitle ?? `A review of ${review.data.name}.`;
+
+const ogImage = buildOgImage(review.id, 'reviews', `${review.data.name} hero image`);
+
+const itemReviewed: Record<string, unknown> = {
+  '@type': reviewedItemType(review.data.category),
+  name: review.data.name,
+};
+if (review.data.link) itemReviewed.url = review.data.link;
+if (ogImage) itemReviewed.image = ogImage.url;
+
+const reviewSchema: Record<string, unknown> = {
+  '@context': 'https://schema.org',
+  '@type': 'Review',
+  '@id': absoluteUrl(`/reviews/${review.id}/#review`),
+  url: absoluteUrl(`/reviews/${review.id}/`),
+  name: review.data.name,
+  headline: review.data.subtitle || review.data.name,
+  description,
+  datePublished: review.data.date.toISOString(),
+  author: PERSON_AUTHOR,
+  inLanguage: 'en-US',
+  itemReviewed,
+};
+
+const breadcrumbs = buildBreadcrumbs([
+  { name: 'Home', url: '/' },
+  { name: review.data.category, url: `/categories/${review.data.category}/` },
+  { name: review.data.name, url: `/reviews/${review.id}/` },
+]);
 ---

 <BaseLayout
  title={review.data.name}
-  description={review.data.description ?? review.data.subtitle}
+  description={description}
+  ogType="article"
+  ogImage={ogImage}
+  publishedTime={review.data.date}
+  articleTags={review.data.tags}
+  jsonLd={[reviewSchema, breadcrumbs]}
 >
  <article>
    {review.data.source && (
@@ -50,16 +101,24 @@ const fromFindItem = review.data.fromFind
          {review.data.category}
        </a>
        {
-          review.data.link && (
+          external && (
            <>
              <span class="dot">·</span>
-              <a href={review.data.link} target="_blank" rel="noopener noreferrer">
+              <a
+                href={external.href}
+                target="_blank"
+                rel={external.isAffiliate ? AFFILIATE_REL : 'noopener noreferrer'}
+              >
                {linkLabel} ↗
              </a>
+              {external.isAffiliate && <span class="aff-badge">Affiliate</span>}
            </>
          )
        }
      </p>
+      {external?.isAffiliate && (
+        <p class="aff-disclosure">{AFFILIATE_DISCLOSURE}</p>
+      )}
    </header>

    {fromFindItem && (
@@ -120,6 +179,26 @@ const fromFindItem = review.data.fromFind
    .meta .dot { margin: 0 0.4rem; }
    .meta .category { color: var(--muted); }
    .meta .category:hover { color: var(--accent); }
+    .aff-badge {
+      display: inline-block;
+      margin-left: 0.45rem;
+      padding: 0.12rem 0.45rem;
+      font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
+      font-size: 0.65rem;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      color: var(--muted);
+      background: var(--rule);
+      border-radius: 999px;
+      vertical-align: middle;
+    }
+    .aff-disclosure {
+      margin: 0.6rem 0 0;
+      font-size: 0.78rem;
+      color: var(--muted);
+      font-style: italic;
+    }
    .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; }
@@ -0,0 +1,43 @@
+import rss from '@astrojs/rss';
+import { getCollection } from 'astro:content';
+
+export async function GET(context) {
+  const [reviews, posts, finds] = await Promise.all([
+    getCollection('reviews'),
+    getCollection('posts'),
+    getCollection('finds'),
+  ]);
+
+  const items = [
+    ...reviews.map((r) => ({
+      title: r.data.name,
+      description: r.data.description ?? r.data.subtitle ?? '',
+      pubDate: r.data.date,
+      link: `/reviews/${r.id}/`,
+      categories: [r.data.category, ...r.data.tags],
+    })),
+    ...posts.map((p) => ({
+      title: p.data.title,
+      description: p.data.description ?? '',
+      pubDate: p.data.date,
+      link: `/posts/${p.id}/`,
+      categories: [p.data.category, ...p.data.tags],
+    })),
+    ...finds.map((f) => ({
+      title: f.data.title,
+      description: f.data.description ?? f.data.blurb ?? '',
+      pubDate: f.data.date,
+      link: `/finds/${f.id}/`,
+      categories: [f.data.category, ...f.data.tags],
+    })),
+  ].sort((a, b) => b.pubDate.valueOf() - a.pubDate.valueOf());
+
+  return rss({
+    title: 'Unique',
+    description:
+      'A small log of delightful, unique things — products, apps, phenomena, oddities.',
+    site: context.site,
+    items,
+    customData: '<language>en-us</language>',
+  });
+}
@@ -2,6 +2,12 @@
 import BaseLayout from '../layouts/BaseLayout.astro';
 import sourcesData from '../../sources.json';
 import { getAllFinds } from '../lib/find-items';
+import {
+  buildOgImage,
+  buildBreadcrumbs,
+  buildItemList,
+  absoluteUrl,
+} from '../lib/seo';

 type Source = {
  name: string;
@@ -40,14 +46,43 @@ for (const f of allFinds) {
  arr.push(f);
  findsBySource.set(f.data.source, arr);
 }
+
+const lastUpdated = allFinds.sort(
+  (a, b) => b.data.date.valueOf() - a.data.date.valueOf()
+)[0]?.data.date;
+
+const description = `The ${sources.length} feeds, shops, and forums Unique draws daily picks from.`;
+const ogImage = buildOgImage(undefined, 'site', 'Unique sources catalog');
+
+const itemList = buildItemList(
+  sources.map((s) => ({ url: s.url, name: s.name })),
+  'Sources used by Unique'
+);
+
+const collectionPage: Record<string, unknown> = {
+  '@context': 'https://schema.org',
+  '@type': 'CollectionPage',
+  '@id': absoluteUrl('/sources/#collection'),
+  name: 'Sources — Unique',
+  description,
+  url: absoluteUrl('/sources/'),
+  inLanguage: 'en-US',
+};
+
+const breadcrumbs = buildBreadcrumbs([
+  { name: 'Home', url: '/' },
+  { name: 'Sources', url: '/sources/' },
+]);
 ---

-<BaseLayout title="Sources" wide>
-  <div class="intro">
-    <h1>Sources</h1>
-    <p>Where the daily picks come from. {sources.length} feeds, shops, and forums.</p>
-  </div>
-
+<BaseLayout
+  title="Sources"
+  description={description}
+  subheader={`Where the daily picks come from. ${sources.length} feeds, shops, and forums.`}
+  lastUpdated={lastUpdated}
+  ogImage={ogImage}
+  jsonLd={[collectionPage, itemList, breadcrumbs]}
+>
  <ul class="grid">
    {
      sources.map((source) => {
@@ -93,12 +128,6 @@ for (const f of allFinds) {
  <p class="back"><a href="/">← back</a></p>

  <style>
-    .intro {
-      margin-bottom: 1.5rem;
-    }
-    .intro h1 { margin: 0 0 0.25rem; font-size: 1.85rem; }
-    .intro p { margin: 0; color: var(--muted); }
-
    .grid {
      column-count: 3;
      column-gap: 1rem;
@@ -2,6 +2,12 @@
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import EntryList from '../../components/EntryList.astro';
 import { getAllEntries } from '../../lib/entries';
+import {
+  buildOgImage,
+  buildBreadcrumbs,
+  buildItemList,
+  absoluteUrl,
+} from '../../lib/seo';

 export async function getStaticPaths() {
  const entries = await getAllEntries();
@@ -16,15 +22,49 @@ export async function getStaticPaths() {
 }

 const { tag, entries } = Astro.props;
+const lastUpdated = entries[0]?.date;
+const count = entries.length;
+const topNames = entries.slice(0, 3).map((e) => e.primary).join(', ');
+const description =
+  topNames.length > 0
+    ? `All ${count} entries tagged #${tag}: ${topNames}${count > 3 ? '…' : '.'}`
+    : `All entries tagged #${tag}.`;
+
+const ogImage = buildOgImage(undefined, 'site', `#${tag} on Unique`);
+
+const itemList = buildItemList(
+  entries.map((e) => ({ url: e.href, name: e.primary })),
+  `#${tag} on Unique`
+);
+
+const collectionPage: Record<string, unknown> = {
+  '@context': 'https://schema.org',
+  '@type': 'CollectionPage',
+  '@id': absoluteUrl(`/tags/${tag}/#collection`),
+  name: `#${tag} — Unique`,
+  description,
+  url: absoluteUrl(`/tags/${tag}/`),
+  inLanguage: 'en-US',
+};
+
+const breadcrumbs = buildBreadcrumbs([
+  { name: 'Home', url: '/' },
+  { name: `#${tag}`, url: `/tags/${tag}/` },
+]);
 ---

-<BaseLayout title={`Tag: ${tag}`}>
-  <h1>#{tag}</h1>
+<BaseLayout
+  title={`#${tag} (${count})`}
+  description={description}
+  subheader={`Tagged: ${tag}.`}
+  lastUpdated={lastUpdated}
+  ogImage={ogImage}
+  jsonLd={[collectionPage, itemList, breadcrumbs]}
+>
  <EntryList entries={entries} />
  <p class="back"><a href="/">← back</a></p>

  <style>
-    h1 { margin-bottom: 1rem; }
    .back { margin-top: 2rem; font-size: 0.9rem; }
  </style>
 </BaseLayout>