/* HomeManifesto, opinionated editorial homepage. 8 sections: hero, premise, methodology, proof, top-10 glimpse, contract, newsletter, sign-off. Voice: confident, slightly combative music criticism. Real album examples throughout. */ const { useState: useHMfState, useEffect: useHMfEffect, useMemo: useHMfMemo } = React; /* ---------------------------------------------------------------------------- leaderboard_totals(), fetched once per page load. Three components in this file want the board: CollectorShowcase and CommunityBand (visitor homepage) and LeaderboardStandings (member homepage). The first two render together, so a signed-out visitor was making the identical RPC twice — same arguments, same 34 rows, both discarded on navigation. Two things beyond the saved request: ONE SORT, so no two surfaces can disagree. leaderboard_totals() orders by total_value desc with no secondary key, which leaves ties in an order Postgres does not promise. Callers each sorted (or didn't) on their own: CollectorShowcase trusted the RPC order and sliced the top 5, the other two re-sorted. Sorting here, with an explicit user_id tiebreak, is the same fix applied to leaderboard_movement() and means the mini-board and the big board cannot print different top threes. A FAILURE IS NOT CACHED. Memoising the rejection would mean one transient network blip blanks every leaderboard surface for the life of the page — strictly worse than the per-component fetches it replaces, where only one surface failed. On rejection the cache is cleared so the next mount retries, and the rejection is re-thrown so each caller still runs its own catch and shows its own empty state. ---------------------------------------------------------------------------- */ let _bbrLbTotals = null; function bbrLeaderboardTotals() { if (!_bbrLbTotals) { _bbrLbTotals = (window.BBR_supabase ? window.BBR_supabase.rpc("leaderboard_totals", { genre_filter: null }) .then(({ data, error }) => { if (error) throw error; return data || []; }) : Promise.resolve([])) .then((rows) => rows.slice().sort((a, b) => { const d = Number(b.total_value) - Number(a.total_value); return d !== 0 ? d : String(a.user_id).localeCompare(String(b.user_id)); })) .catch((e) => { _bbrLbTotals = null; throw e; }); } return _bbrLbTotals; } /* The opening salvo. */ const HERO = { line: "A hundred albums. Eight thousand words each. Every placement defended in writing, including the ones that will lose us friends.", sub: "The Lead-In publishes one definitive deep dive a week, pressing guides, runout etchings, scoring data, the works, until the canon is properly written down." }; /* Six-dimension scoring system, with a one-line explainer per dimension. */ const SCORING_DIMENSIONS = [ { key: "songwriting", label: "Songwriting", note: "The actual songs. Melody, lyric, chord motion, structure. Whether you can hum it after one listen and still want to hear it after a hundred." }, { key: "production", label: "Production", note: "What the producer and engineer actually did to the air in the room. Microphone choices, tape vs. digital, where the reverb is, why the bass is louder than it should be." }, { key: "performance", label: "Performance", note: "Who is in the room and what they did when the tape rolled. The first take vs. the eighteenth. The drum fill nobody asked for." }, { key: "innovation", label: "Innovation", note: "Whether the record did something nobody had done before, and whether anyone could have known to ask for it." }, { key: "influence", label: "Influence", note: "What it caused. The bands it spawned, the techniques it normalized, the records that couldn't have existed without it." }, { key: "cohesion", label: "Cohesion", note: "Whether it works as one continuous artifact, side A through side B, or whether it's a singles compilation in a sleeve. Side breaks count." }]; /* Three featured proof essays. WGO is real (live deep dive). The other two are plausible openers in the same critic voice, they read as if the essays exist. */ const PROOF_ALBUMS = [ { slug: "nevermind", rank: 30, title: "Nevermind", artist: "Nirvana", year: 1991, readTime: 12, score: 8.9, sleeve: { bg: "#0b3c6b", fg: "#f5d76e", style: "bold", accent: "#f5d76e" }, eyebrow: "The placement that starts the argument", pull: "Thirty is not a slight; it's an argument that Nevermind matters most for what it did to the industry, and second-most for what it did to your bedroom.", affiliate: "https://www.amazon.co.uk/s?k=Nevermind+vinyl&tag=theleadin1-21&i=popular", body: "Butch Vig spent three weeks at Sound City making a punk record sound like an FM single, compressed snare, doubled vocals, chorus pedal on every overdub, and Kurt Cobain spent the rest of his life telling people he hated the mix. He was wrong. The compromise is the record. Without it the songs are a B-side; with it they are the moment American rock radio quietly became something else for a decade. We rank it for what it sounds like, not for what it changed. What it changed is in the essay.", href: true }, { slug: "ready-to-die", rank: 49, title: "Ready to Die", artist: "The Notorious B.I.G.", year: 1994, readTime: 14, score: 8.7, sleeve: { bg: "#f1ece1", fg: "#1a1a1a", style: "portrait", accent: "#b91c1c" }, eyebrow: "The deeper-cut argument", pull: "Forty-nine for Ready to Die is the kind of placement that will get an email from someone's older brother. We've read the email. We stand by forty-nine.", affiliate: "https://www.amazon.co.uk/s?k=Notorious+BIG+Ready+to+Die+vinyl&tag=theleadin1-21", body: "The skits don't age. The Premier and Easy Mo Bee beats absolutely do, 'Juicy,' 'Big Poppa,' 'Unbelievable,' 'Warning,' all canon, all still playing in the cars we want to be in. But there are seven minutes of this record we never need to hear again, and a hip-hop debut from 1994 that was held together by Sean Combs's pop instincts is a slightly different artifact in 2026 than it was in 1995. We move it down a tier for the seven minutes. We hold it where we hold it for the canon, which is permanent.", href: true }, { slug: "off-the-wall", rank: 33, title: "Off the Wall", artist: "Michael Jackson", year: 1979, readTime: 13, score: 9.0, sleeve: { bg: "#0e0e0e", fg: "#f5e6c8", style: "portrait", accent: "#d4a574" }, eyebrow: "The placement we'll defend in the comments", pull: "Thirty-three, ahead of Thriller, ahead of every disco record we love more, ahead of half of what our colleagues at this magazine wrote up before us. We'll defend it.", affiliate: "https://www.amazon.co.uk/s?k=Off%20The%20Wall+vinyl&tag=theleadin1-21&i=popular", body: "Quincy Jones told Bruce Swedien to mic the room the way Marvin Gaye had asked his engineers to mic him for What's Going On, every drum, every horn, every overdub captured with one foot in the studio and one foot on the dance floor. The result is a Black pop record so well-engineered it survived disco's collapse, every fashion cycle since, and a thousand fan edits that all sound worse than the album mixes. Thriller is more important. Off the Wall is better, song for song, and we will fight about that in the comments for a month.", href: true }]; /* The contract, five commitments, written as commitments, not features. */ const CONTRACT_ITEMS = [ { label: "One deep dive a week", body: "Six-to-eighteen-thousand words. Pressing guide, runout etchings, session reconstruction, scoring data, comments on every placement. Published Wednesday morning, Pacific time, every week of the year. We've missed two weeks in three years and we owe you essays for both." }, { label: "An AI podcast for every entry", body: "Maya and Dev, two AI co-hosts we've trained on the entire archive, record a thirty-to-forty-minute episode for every album we publish. They argue. They disagree with us in writing. They are not a marketing channel; they are the second opinion." }, { label: "Pressing guides with real money in them", body: "Every dossier ends with a collector's corner: every notable pressing rated, every notable pressing's NM/VG+ value tracked quarterly against market medians, runout etchings transcribed, the one to buy and the three to skip." }, { label: "A scoring system that moves", body: "The composite isn't frozen. Cultural momentum is a real input. When something happens, a reissue, a death, a sample, a generation, the score updates and the change is logged in a public history at the bottom of the page. Nothing is hidden." }, { label: "Comments where we actually show up", body: "Every essay has an open comment thread and the editor of the piece replies, not the social-media intern, the editor, for at least the first thirty days. If we're wrong about a runout etching or a session date, we fix it in the essay and credit you in the changelog." }]; /* ======================================================== Top-level ======================================================== */ function HomeManifesto({ albums, onAlbum, onList, user, authReady, onCollection, onLeaderboards, onAuthOpen }) { const top10 = useHMfMemo(() => albums.slice(0, 10), [albums]); // If the visitor arrived via an album page's "How we score" link, scroll to // the methodology section once the homepage has rendered. useHMfEffect(() => { if (window.__scrollToScore) { window.__scrollToScore = false; requestAnimationFrame(() => { const el = document.getElementById("how-we-score"); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 90, behavior: "smooth" }); }); } }, []); // Scroll-reveal: sections fade + rise as they enter the viewport. Added pre- // paint so there's no flash; falls back to fully-visible if IO is missing. React.useLayoutEffect(() => { const els = Array.prototype.slice.call(document.querySelectorAll(".manifesto-home > section")); if (!els.length) return; if (!("IntersectionObserver" in window)) { els.forEach((e) => e.classList.add("in")); return; } els.forEach((e) => e.classList.add("hd-reveal")); const io = new IntersectionObserver((entries) => { entries.forEach((en) => { if (en.isIntersecting) { en.target.classList.add("in"); io.unobserve(en.target); } }); }, { rootMargin: "0px 0px -8% 0px", threshold: 0.08 }); els.forEach((e) => io.observe(e)); return () => io.disconnect(); }, [user, authReady]); const featuredAlbums = useHMfMemo( () => PROOF_ALBUMS.map((p) => ({ ...p, album: albums.find((a) => a.slug === p.slug) })), [albums] ); // This week's deep dive — the newest published row from the deep_dives // registry, the same source of truth the /deep-dives archive and the // Wednesday email use (api/deep-dives.js pickDive). No hardcoded album: if // nothing is published yet the module renders nothing, never a placeholder. const [featured, setFeatured] = useHMfState(null); useHMfEffect(() => { let active = true; if (!window.BBR_supabase) return; window.BBR_supabase .from("deep_dives") .select("*") .eq("status", "published") .lte("published_at", new Date().toISOString()) .order("published_at", { ascending: false }) .limit(1) .then(({ data }) => { if (active) setFeatured((data && data[0]) || null); }) .catch(() => { if (active) setFeatured(null); }); return () => { active = false; }; }, []); // Don't flash the logged-out hero to a member while the session resolves. if (!authReady) { return (
); } // ---- Logged-in: collection-first retention ordering ------------------- // A personal command center (value, canon progress, genre blend) leads, then // the live standings (where you rank + the climb), then the buy-loop gaps, // then editorial. Built on the member's real collection + leaderboard data. if (user) { return (
a.slug === "rumours")} onAlbum={onAlbum} />
); } // ---- Logged-out: 50/50 dual hero acquisition ordering ----------------- return (
a.slug === "rumours")} onAlbum={onAlbum} />
); } /* ---- 1. Opening salvo, dynamic editorial front page -------------------- */ /* A magazine-cover spread: the argument headline as the lead, and this week's deep dive as a live visual feature, album sleeve with a vinyl record rotating out from behind it. Combines the old hero + "this week" chip. */ function ManifestoHero({ onList, album, onAlbum }) { const full = album && window.ESSAYS_FULL && window.ESSAYS_FULL[album.slug]; const dek = (full && full.essay && full.essay.dek) || (full && full.tagline) || "The week's definitive deep dive, pressing guide, session reconstruction, scoring data, and an argument we'll defend in the comments."; // Today's date, formatted for the masthead, e.g. "Saturday, 7 June 2026". const today = new Date().toLocaleDateString("en-GB", { weekday: "long", day: "numeric", month: "long", year: "numeric", }); return (
The Lead-In The Hundred Established 2026
{today}
The one hundred greatest albums, defended in writing

A hundred albums. Eight thousand words each. Every placement defended in writing — including the ones that will lose us friends.

{HERO.sub}

{album && }
); } /* ---- 1b. Kinetic ticker, relocated as an ambient divider ---------------- */ /* Was the first moving element above the hero; now bridges the visual cover wall and the editorial argument below it. Functionally ambient. */ function ManifestoTickerDivider({ albums }) { const marqueeSource = useHMfMemo(() => { if (!albums || !albums.length) return []; const picks = [ ...albums.slice(0, 3), albums[6], albums[11], albums[18], albums[24], albums[31], albums[42], albums[55], albums[68], albums[79], albums[91]]. filter(Boolean); return picks; }, [albums]); if (!marqueeSource.length) return null; const marqueeItems = [...marqueeSource, ...marqueeSource]; return ( ); } /* ---- 1.5 The cover wall ------------------------------------------------ Dense mosaic of real album sleeves drawn from a diverse spread of the ranking. This is intentionally not text-heavy, the imagery is the argument. The whole grid is a clickable index into the list. */ function ManifestoCoverWall({ albums, onAlbum }) { // A curated, balanced spread of ranks, top of the list, mid-tier, and // deeper cuts. 24 tiles fits a 12×2 marquee or 8×3 grid cleanly. const RANKS = [ 1, 6, 9, 12, 16, 22, 27, 36, 44, 51, 58, 64, 3, 8, 14, 19, 25, 31, 39, 46, 54, 60, 71, 83]; const picks = useHMfMemo(() => { if (!albums || !albums.length) return []; return RANKS.map((r) => albums.find((a) => a.rank === r)).filter(Boolean); }, [albums]); const liveCount = useHMfMemo( () => picks.filter((a) => window.ESSAYS_FULL && window.ESSAYS_FULL[a.slug]).length, [picks] ); return (
No filler, no roundups

One hundred sleeves. One hundred essays. One ranked argument.

100
Albums ranked
1.4M
Words published
Q1 ’26
Last revision
{picks.map((a, i) => { const isLive = !!(window.ESSAYS_FULL && window.ESSAYS_FULL[a.slug]); return ( ); })}
Twenty-four covers, drawn from across the ranking. Essay live Every one of the hundred has a full deep dive and a public revision history. {liveCount}/24 live
); } /* ---- 2. The premise ----------------------------------------------------- */ function ManifestoPremise() { return (
§ 01 Why this exists

Music writing got safe. The records didn't.

What follows is one hundred essays, one ranking, and an argument we are happy to have with you in writing.

Every other "greatest albums" list on the internet is one of three things: a clickbait slideshow built for ad impressions, a Rolling Stone reprint with the rankings nudged for the year, or an algorithmically generated playlist with the headline rewritten by a marketing intern. None of them treat albums like the artifacts they are. None of them care about side breaks, runout etchings, or the producer's marriage. None of them are willing to put Tago Mago at thirty-seven and stand behind it.

We do this because the alternative is letting the canon be written by people whose only relationship to a record is the streaming royalties on it. Vinyl is the format the canon was made on; it imposes length, sequence, fidelity, and stakes. A digital playlist has none of those things. A list of one hundred albums, properly written and properly defended, is a small act of resistance against a culture that wants you to forget the format ever mattered.

); } /* ---- 3. The methodology -------------------------------------------------- */ /* Six scoring dimensions for the worked example. There is no per-dimension data in the dataset, so this breakdown is authored to demonstrate the grid on a mid-table classic, Rumours (№ 36), rather than repeat the #1 album, which already leads the homepage as the flagship deep dive. The numbers reflect critical consensus: reference-grade songwriting, production and cohesion; comparatively modest on innovation for a record that perfected rather than invented its form. */ const EXAMPLE_SCORE = { composite: 8.9, dims: [ { key: "songwriting", label: "Songwriting", value: 9.4 }, { key: "production", label: "Production", value: 9.5 }, { key: "performance", label: "Performance", value: 9.0 }, { key: "innovation", label: "Innovation", value: 7.6 }, { key: "influence", label: "Influence", value: 8.8 }, { key: "cohesion", label: "Cohesion", value: 9.3 }] }; function ManifestoMethodology({ album, onAlbum }) { // Use the canonical scoring function (same one the deep-dive ScoreBreakdown // uses) so the composite + dimensions shown here exactly match the album's // own page. Fall back to the static example only if it hasn't loaded yet. const score = (album && window.bbrScoreFor && window.bbrScoreFor(album)) || EXAMPLE_SCORE; return (
§ 02 How the ranking is made

Six dimensions. One composite. Every placement defended in writing.

{SCORING_DIMENSIONS.map((d, i) =>
{String(i + 1).padStart(2, "0")} {d.label}

{d.note}

)}
{/* Worked example, abstract criteria, made concrete on the #1 album */}
Here’s what the scoring looks like in practice
{score.dims.map((d) =>
{d.label}
)}
Songwriting and production weighted ×1.25; cohesion the lightest input.
The composite

Each dimension is scored zero to ten by the editorial board after listening to a verified pressing on a calibrated system, blind-rated, then deliberated. The composite is not the average. Songwriting and production are weighted at one-and-a-quarter, because if those are weak, nothing else saves the record. Innovation and influence are tied. Cohesion is the smallest weight, but it can swing a placement by five spots in either direction.

Editorial vs. data

The score is built by humans. The data is there to keep us honest, pressing values from quarterly market medians, sample counts from WhoSampled, cultural references tracked through a small custom corpus we've built since 2021. When the score and the data disagree, the score wins, and we explain why in the essay. We are critics, not statisticians. Statisticians would have ranked Thriller higher.

What goes in the calculation

Pressing values matter because the market is also a critic, when a record's NM original sustains $300 in 2026 dollars, that is a thousand collectors voting against the streaming era. Cultural momentum matters because some records gain meaning over time and others lose it. The Velvet Underground & Nico is a different record in 2026 than it was in 1996, and the score reflects it. Nothing is frozen.

The defense

Every entry on the list has a full essay attached to it, with a public revision history. Every essay closes with an open comment section where the editor responds in writing for thirty days. We have changed three placements in the last eighteen months on the strength of reader arguments. We have refused to change forty-one others. The point is not that we're right. The point is that we're accountable.

); } /* ---- 4. The proof ------------------------------------------------------- */ function ManifestoProof({ items, onAlbum, onList }) { const open = (it) => { // All essays are live, navigate straight to the deep dive. if (onAlbum) onAlbum(it); else if (onList) onList(); }; return (
§ 03 Evidence the writing delivers

Three openers, picked so the range isn't an accident.

{items.map((it) =>
{it.title
№ {String(it.rank).padStart(3, "0")}
{it.eyebrow}

{it.title} — {it.artist}

{it.year} · composite {it.score.toFixed(1)} · {it.readTime}-min read

{it.pull}

{it.body}

{/* "Own it on vinyl" pointed at a hardcoded Amazon affiliate URL held on the feature item itself (the `affiliate:` fields above), which is why the central bbrBuyUrl switch alone does not reach it. Hidden while commerce is off; the data stays put. */} {window.BBR_COMMERCE_ENABLED && it.affiliate && e.stopPropagation()}> Own it on vinyl → }
)}
); } /* Recreate the Sleeve component's spirit at proof scale, without the dependency. */ function ProofSleeve({ sleeve, title, artist, year }) { const { bg, fg, accent, style } = sleeve; return (
{style === "portrait" && <>
{artist.split(" ").slice(-1)[0].toUpperCase()}
{title}
} {style === "minimal" &&
{title}
{artist}
{year}
} {style === "bold" &&
{title}
{artist}
}
); } /* ---- 5. The ranking, glimpsed ------------------------------------------- */ function ManifestoTop10({ top10, onAlbum, onList }) { return (
§ 04 The top ten, as a teaser

One through ten.
The other ninety are on the list.

A ranked one hundred without a top ten is a magazine without a cover. Here it is. Read it the way you'd read the front page of a serious paper, assume every position is an argument, and assume we'll defend it.

    {top10.map((a) => { const onVinyl = !!(window.ESSAYS_FULL && window.ESSAYS_FULL[a.slug]); return (
  1. onAlbum(a)}>
    {String(a.rank).padStart(2, "0")}
    {a.title} {a.artist}
    {a.year}
    {a.genre}
    {(9.9 - (a.rank - 1) * 0.07).toFixed(2)}
    {onVinyl && On vinyl }
    2. ); })}
Composite scores recalculated quarterly. Last revision: Q1 2026, Tago Mago up two, Sgt. Pepper down four, To Pimp a Butterfly up one.
); } /* ---- 6. The contract ---------------------------------------------------- */ function ManifestoContract() { return (
§ 05 What we owe you

If you stick around, here’s what you get from us. Every week. Without fail.

{CONTRACT_ITEMS.map((c, i) =>
{String(i + 1).padStart(2, "0")}

{c.label}

{c.body}

)}

Five commitments. If we break one, you get to write a guest editorial about it and we publish it.

); } /* ---- 7. Newsletter ------------------------------------------------------ */ function ManifestoNewsletter() { const [email, setEmail] = useHMfState(""); const [submitted, setSubmitted] = useHMfState(false); const onSubmit = (e) => { e.preventDefault(); if (!email) return; setSubmitted(true); }; return (
§ 05 The list, in your inbox

The next essay, before anyone else — one legendary album, examined in full, every Wednesday.

The editorial promise One legendary album, written up in full, every Wednesday. No filler, no roundups, no sponsored picks.
{!submitted ?
setEmail(e.target.value)} aria-label="Email address" />
:
✓ You’ll get the next deep dive Wednesday morning. Reply to it; the editor reads everything.
}
One email a week, no exceptions · 18,000 readers · One unsubscribe link, no dark patterns.
); } /* ---- 8. Sign-off -------------------------------------------------------- */ function ManifestoSignoff({ onList }) { return (

Albums are the longest-form thing popular music has ever asked anyone to sit down with. We think that's worth something. We think it's worth writing about properly. We think one of these will be your favorite essay you read this year.

Edited by
The Lead-In editors
Written by
A small group of people who care too much
Edition
Volume IV · 2026
); } window.HomeManifesto = HomeManifesto; /* ======================================================== Dual-identity homepage sections (editorial + collector) Appended; orchestrated by HomeManifesto above. ======================================================== */ function HdArrow() { return ( ); } function ValueSparkDemo() { // Static upward demo line for the logged-out showcase. const pts = [4, 10, 9, 16, 22, 20, 28, 34, 40, 46, 52, 60]; const W = 220, H = 56, max = 64; const d = pts.map((v, i) => (i ? "L" : "M") + (i / (pts.length - 1) * W).toFixed(1) + "," + (H - v / max * H).toFixed(1)).join(" "); return ( ); } /* The 50/50 acquisition hero. Source order is Collection, connective, Canon so mobile stacks Collection-on-top with the connective between; desktop uses a grid (Canon left, Collection right, connective spanning below). */ /* The canon tape directly below the nav: a slow marquee of the full hundred — rank, record, year — in the trading-terminal spirit. Aria-hidden (the same hundred are on /list in a form a screen reader can actually use). WHY THERE IS NO PERCENTAGE HERE ANY MORE This used to print a week-movement figure per album (OK COMPUTER ▲2.4%). It was a hash of the slug: not a market reading, not even a moving one — the same record showed the same delta today, tomorrow and next year, with the marquee supplying the only motion. On a site whose pitch is honest valuation, a decorative fake price was the most expensive ornament on the page. There is no honest replacement available client-side. Per-album market values exist only one slug at a time behind /api/discogs-price (see DossierValues), and the only per-record HISTORY we hold is valuation_snapshots — keyed to a COLLECTION ITEM and owner-only under RLS, so it cannot describe a canon album to a logged-out visitor. window.BBR_PRESSINGS covers 17 of the hundred and is reference sample data, not a feed. So the tape now carries what we can stand behind for all 100 without a request: the ranking, the record, the year. If a real per-album price series ever lands, add it here as a second span — do not resurrect a synthetic one. */ function HdTicker() { const albums = window.BBR_ALBUMS || []; const items = albums.map((a) => ({ sym: "№" + a.rank + " " + a.title.toUpperCase(), meta: a.year ? String(a.year) : (a.genre || ""), })); const row = items.concat(items); // duplicate for a seamless loop // Keep the scroll speed constant regardless of item count (~4.4s per record). const dur = Math.max(44, Math.round(albums.length * 4.4)); return ( ); } // Exposed so other surfaces (e.g. the My Collection marketing page) can reuse // the same price ticker under the nav. window.HdTicker = HdTicker; function DualHero({ albums, featured, onList, onCollection }) { const wall = useHMfMemo( () => [1, 2, 5, 9, 15, 23].map((r) => albums.find((a) => a.rank === r)).filter(Boolean), [albums] ); return (
The collector's terminal

Discogs gives your records a price tag. We give them a pulse.

Value your whole shelf, watch it move week to week, and see where it sits against the hundred greatest records ever pressed.

Free to start · import from Discogs in one tap
); } /* This week's deep dive — the newest published row from the deep_dives registry. Non-canon (no rank badge); clicking opens the deep-dive article. */ /* Canon introduction. The hero no longer carries the canon pitch (its second half was removed when the terminal became the whole hero), so the top 100 gets a proper, verbose header of its own here, directly below this week's deep dive. */ function CanonIntro({ onList }) { return (
The Lead-In 100

The hundred greatest albums ever made, ranked once and argued in full.

One definitive list, counted down from one hundred to one. Every placement is a position we take on purpose, and every position is defended in writing: a full essay on why the record earns its rank, a pressing guide to the copy worth owning, the session history, and the scoring data behind the call.

It is the ruler your own shelf gets measured against. Read it like the front page of a serious paper, then tell us where we got it wrong.

); } function WeeklyDeepDive({ dive }) { if (!dive) return null; const cover = dive.cover_url || ("/covers/" + dive.slug + ".jpg"); const dek = dive.excerpt || "This week's definitive deep dive — pressing guide, session reconstruction, scoring data, and an argument we'll defend in the comments."; const meta = [dive.artist, dive.year].filter(Boolean).join(" · "); const go = () => window.__nav && window.__nav.goDeepDive && window.__nav.goDeepDive(dive.slug); return (
); } /* Collector-tool showcase: the 100-grid, value-over-time, genre blend, and a prominent LIVE leaderboard — the competitive hook, styled like the real board. */ function CollectorShowcase({ albums, onCollection, onLeaderboards }) { const [top, setTop] = useHMfState(null); useHMfEffect(() => { let c = false; bbrLeaderboardTotals() .then((rows) => { if (!c) setTop(rows.slice(0, 5)); }) .catch(() => { if (!c) setTop([]); }); return () => { c = true; }; }, []); return (
The collector tools

Your shelf, measured — and ranked.

Scan a record, get its market value, watch your total climb — then see exactly where you stand against every other collector on the leaderboard.

The 100, tracked
Collection value
£
Genre blend
); } /* Live leaderboard feature — dark panel echoing the real Leaderboards page (medals, gradient value bars, count-up), so the competitive hook is obvious. */ function LeaderboardFeature({ top, onLeaderboards }) { const rows = (top || []).slice(0, 5); const max = rows.length ? (Number(rows[0].total_value) || 1) : 1; return (
Live leaderboard

The collectors out in front

{top === null ? (
Loading the board…
) : rows.length === 0 ? (
Be the first on the board.
) : (
{rows.map((r, i) => ( ))}
)}
); } /* Living community band. */ function CommunityBand({ onList, onCollection }) { // The leaderboard card below was hardcoded — "Ric D. £3,480 / Sarah K. £2,910 / // Tomás R. £2,140", three people who are not the top three and three figures that // are not their totals. The real number one holds £30,192. Rather than swap in // today's numbers, which are wrong again next week, it reads the same RPC the two // other live leaderboard surfaces on this page already read. // // Shares one fetch with the other leaderboard surfaces — see // bbrLeaderboardTotals() at the top of this file. (An earlier note here called this // "a third identical call"; measured, it was the second, and only on the visitor // homepage: LeaderboardStandings is in the member branch and never renders // alongside these two.) const [lbTop, setLbTop] = useHMfState(null); // null = loading, [] = unavailable useHMfEffect(() => { let c = false; bbrLeaderboardTotals() .then((rows) => { if (!c) setLbTop(rows.slice(0, 3)); }) .catch(() => { if (!c) setLbTop([]); }); return () => { c = true; }; }, []); return (
A living argument

The canon is up for debate.

{/* "nominate what we missed" dropped 3 Aug: the ballot is hidden, and this is the band the removed Nominations card sat in. */}

Comment on every placement and climb the board — the list argues back.

{/* This card used to print a reader comment that no reader ever wrote — a name, an avatar, a quote and a heart count, all invented, on the most-visited page of a site that sells itself on not making things up. It is now the actual invitation, and the actual state of play: three comments exist in the whole archive, so the hundred really are still waiting. Do not put a quote back in here unless somebody said it. */}
Comments

Every placement in the hundred carries an open thread. Disagree with a ranking and you can say so under the entry itself — signed, in public, next to the argument it answers.

Most of the hundred are still waiting for their first word.
{/* The Nominations proof card was REMOVED 3 Aug, and not only because the ballot is hidden. It was hardcoded with albums and vote counts that do not exist: Spiderland +312, Madvillainy +241, Dummy +188, against a real ballot whose top entry has NINE votes and does not contain any of those three records. The Comments card beside it was rewritten for exactly this reason — see the note above it — and this one was left. Do not reinstate it with invented figures; read the real standings or show nothing. */} {/* Live top three. Names follow the same rule as the board itself: a collector who has not made their collection public is "Anonymous collector", never an initial — all three of the current top three are private, and inferring a name from a private profile is exactly what this card was doing wrong. Renders nothing rather than a placeholder while loading or if the RPC fails, so the page can never show a fake row again. */} {lbTop && lbTop.length > 0 && (
Leaderboard
{lbTop.map((r, i) => (
{i + 1} {r.is_public ? (r.display_name || "Collector") : "Anonymous collector"} £{Math.round(Number(r.total_value) || 0).toLocaleString("en-GB")}
))}
)}
); } /* ====================================================================== Logged-in collector dashboard — a personal command center. Everything here is the member's REAL data: live collection value, the cumulative value curve drawn from when records were actually added, canon progress, and the genre blend of what's on their shelf. ====================================================================== */ const CM_GENRE_COLORS = ["var(--accent)", "#caa53d", "#5b7a99", "#6b8f71", "#9a6b9a", "#b0763f"]; /* Real cumulative collection value, in the order records were added. Each point is the running total after that record joined the shelf — so the curve is a true history of how the collection's value was built, not a demo trend. */ function cmCumulativeSeries(items) { const rows = items .map((r) => ({ t: r.date_added ? Date.parse(r.date_added) : 0, v: Number(r.est_value) || 0 })) .sort((a, b) => a.t - b.t); let acc = 0; return rows.map((r) => (acc += r.v)); } /* Value added in the trailing 30 days (real, from date_added). 0 ⇒ hidden. */ function cmRecentGain(items) { const cutoff = Date.now() - 30 * 864e5; return items.reduce((s, r) => { const t = r.date_added ? Date.parse(r.date_added) : 0; return t >= cutoff ? s + (Number(r.est_value) || 0) : s; }, 0); } /* Top genres on the shelf by record count, tail collapsed into "Other". */ function cmGenreBlend(items) { const map = new Map(); items.forEach((r) => { const g = r.genre || "Other"; map.set(g, (map.get(g) || 0) + 1); }); const arr = [...map.entries()].map(([g, v]) => ({ g, v })).sort((a, b) => b.v - a.v); const top = arr.slice(0, 4); const rest = arr.slice(4).reduce((s, x) => s + x.v, 0); if (rest) top.push({ g: "Other", v: rest }); return top.map((s, i) => ({ ...s, c: CM_GENRE_COLORS[i % CM_GENRE_COLORS.length] })); } /* Value curve, tuned for the dark dashboard card. Wipes in on reveal. */ function CmSpark({ pts }) { if (!pts || pts.length < 2) return