// data.jsx — Episode catalog & topic taxonomy + per-episode thumbnail SVGs
// Pencil + watercolor register: graphite ink + at most one wash per thumbnail.
// Data is loaded from data/episodes.json + data/taxonomy.json.
// Each thumbnail is a 96-square SVG. Two-tone ceiling: graphite ink + one wash.
const WASH = {
pine: "rgba(93,122,90,0.42)",
sandstone: "rgba(168,127,58,0.34)",
willow: "rgba(201,182,110,0.46)",
river: "rgba(74,95,116,0.38)",
};
const INK = "#1f2a35";
const SHADOW = "#6b5d44";
// Deterministic per-episode marks. `seed` is a small int from the slug;
// callers without a seed get the un-rotated, un-decorated base drawing so
// the design language stays cohesive within a series.
const MARK_SLOTS = [
{ x: 10, y: 12 }, { x: 86, y: 12 }, { x: 10, y: 86 }, { x: 86, y: 86 },
{ x: 48, y: 9 }, { x: 9, y: 48 }, { x: 87, y: 48 }, { x: 48, y: 88 },
];
const MARK_SHAPES = [
(k, x, y) => ,
(k, x, y) => ,
(k, x, y) =>
,
(k, x, y) =>
,
(k, x, y) => ,
];
function Thumb({ glyph, wash, seed = 0 }) {
const w = WASH[wash] || WASH.pine;
// Deterministic micro-variation from the seed.
const rot = ((seed % 11) - 5) * 0.7; // ±3.5° glyph tilt
const hatchRot = 30 + ((seed >> 3) % 13); // 30–42° hatch angle
const markCount = 1 + ((seed >> 5) % 3); // 1–3 accent marks
const slotStart = (seed >> 7) % MARK_SLOTS.length;
const shapeIdx = (seed >> 4) % MARK_SHAPES.length;
const marks = Array.from({ length: markCount }, (_, i) => {
const slot = MARK_SLOTS[(slotStart + i * 3) % MARK_SLOTS.length];
return MARK_SHAPES[(shapeIdx + i) % MARK_SHAPES.length](i, slot.x, slot.y);
});
// common page background — paper tone & a small frame line
const Frame = () => (
);
// pencil cross-hatch shading helper
const HATCH = (
);
const G = {
// Roman arch
arch: (
),
// Pneumatic tube — a brass pipe & valve
tube: (
poste
),
// Bridle path on a hill
path: (
),
// Voyager record
disc: (
),
// Venetian ship
ship: (
),
// Cathedral spire
spire: (
),
// Octopus
octopus: (
),
// Chimney with smoke
chimney: (
),
// Pendulum clock
clock: (
),
// Lichen patches
lichen: (
),
// Cuneiform tablet
tablet: (
{[...Array(5)].map((_, i) => (
))}
),
// Fern frond
fern: (
{[...Array(7)].map((_, i) => {
const t = i / 6;
const x = 48 - 32*t;
const y = 84 - 70*t;
return (
);
})}
),
// Tide wave
wave: (
),
// Sun (eclipse)
sun: (
{[...Array(12)].map((_, i) => {
const a = i * 30 * Math.PI / 180;
const r1 = 26, r2 = 32;
return ;
})}
),
// Loaf of bread
loaf: (
),
// Ice / frost
ice: (
),
// Bell
bell: (
),
// Open book with margin marks
book: (
{[...Array(5)].map((_, i) => (
))}
{[...Array(5)].map((_, i) => (
))}
),
};
return (
);
}
// Loader: fetches real episodes.json + taxonomy.json. Returns a Promise.
async function loadCatalog() {
const [eps, tax] = await Promise.all([
fetch("data/episodes.json").then(r => r.json()),
fetch("data/taxonomy.json").then(r => r.json()),
]);
const topicMap = Object.fromEntries(tax.topics.map(t => [t.id, t]));
const seriesMap = {};
for (const t of tax.topics) for (const s of t.series) {
seriesMap[t.id + "/" + s.id] = { ...s, topic: t.id, topic_label: t.label };
}
eps.forEach(e => {
e.topic_label = e.topic_label || topicMap[e.topic]?.label || e.topic;
e.series_label = e.series_label || seriesMap[e.topic + "/" + e.series]?.label || e.series;
});
eps.sort((a, b) => b.date.localeCompare(a.date) || a.slug.localeCompare(b.slug));
eps.forEach((e, i) => { e.number = eps.length - i; });
return { EPISODES: eps, TAXONOMY: tax, topicMap, seriesMap };
}
window.IPData = {
FEED: "https://amongst-other-things.com/feed.xml",
Thumb,
loadCatalog,
};