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:
+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>
|
||||
|
||||
Reference in New Issue
Block a user