From 8d10168f19e92e43315c6b399d6c8547dccde2fe Mon Sep 17 00:00:00 2001 From: azank Date: Mon, 19 Oct 2026 19:41:44 +0500 Subject: [PATCH] explore: the cities you built come first, marked "yours" A city built from a browser was listed in the gallery but sat below the featured cities: under two rows on the home page and the ten-city Featured shelf on /explore, so whoever built it couldn't find it. city.js now keeps the last 24 cities this browser built in localStorage. site.js puts them, and your own city when signed in, first in the gallery list with a "yours" badge. /explore gets a Yours shelf above Featured. A city that has fallen out of the gallery's 60 latest builds still shows, from the browser's copy. Visitors who haven't built anything see the same page as before. The privacy section says the list stays in the browser. Also moves #15's section swap into web/site/index.html, the source that web/scripts/site.mjs stamps the page from. #15 edited only the generated page, so CI's "committed builds are up to date" check has failed since. --- web/public/404.html | 4 ++-- web/public/about.html | 6 +++--- web/public/events.html | 4 ++-- web/public/explore.html | 31 +++++++++++++++++++++++-------- web/public/index.html | 6 +++--- web/public/readme.html | 4 ++-- web/public/s/city.js | 13 +++++++++++++ web/public/s/site.css | 1 + web/public/s/site.js | 18 ++++++++++++++---- web/site/about.html | 2 +- web/site/explore.html | 27 +++++++++++++++++++++------ web/site/index.html | 40 ++++++++++++++++++++-------------------- 12 files changed, 105 insertions(+), 51 deletions(-) diff --git a/web/public/404.html b/web/public/404.html index 4427f80..f981a16 100644 --- a/web/public/404.html +++ b/web/public/404.html @@ -25,7 +25,7 @@ - + - +
diff --git a/web/public/about.html b/web/public/about.html index ceaa4da..dd0c987 100644 --- a/web/public/about.html +++ b/web/public/about.html @@ -25,7 +25,7 @@ - + - +
@@ -179,7 +179,7 @@

Privacy

  • Public data only. The builder reads public repositories with a token that can't see anything private. Private repos never appear on commit.city.
  • No source code is kept. A city stores file paths, line counts and timestamps, all things anyone can already see on GitHub. Repo records are cached so the next visitor doesn't rebuild them.
    • -
  • No ads, no trackers, no analytics cookies. A cookie is set only if you sign in, to remember who you are.
    • +
  • No ads, no trackers, no analytics cookies. A cookie is set only if you sign in, to remember who you are. The cities you build are listed in your own browser's storage, so the home page and Explore can show them first; that list never leaves your browser.
  • Sign-in asks for no permissions. It proves you own an account, so you can manage its city. Builds you start then use your own GitHub API quota.
diff --git a/web/public/events.html b/web/public/events.html index c36615a..95a95b3 100644 --- a/web/public/events.html +++ b/web/public/events.html @@ -25,7 +25,7 @@ - + - +
diff --git a/web/public/explore.html b/web/public/explore.html index 5190ba0..c9ca620 100644 --- a/web/public/explore.html +++ b/web/public/explore.html @@ -25,7 +25,7 @@ - + - +
@@ -94,7 +94,11 @@

Every city, so far.

-

Featured

hand-picked to show what a city can look like
+ +

Featured

hand-picked to show what a city can look like

Fresh off the press

the latest builds, newest first
@@ -136,18 +140,29 @@

Every city, so far.

function render() { if (!G) return; const plain = !state.q && !state.kind && state.sort === 'recent'; - $('#featuredBox').hidden = !plain || !G.featured.length; - if (plain) $('#featured').innerHTML = G.featured.map(e => tile(e)).join(''); - const seen = new Set(plain ? G.featured.map(e => e.key) : []); + // the plain view is three shelves: yours, featured, then the latest builds, each city on one of them only + const mine = new Set(G.mine.map(e => e.key)); + const featured = G.featured.filter(e => !mine.has(e.key)); + $('#featuredBox').hidden = !plain || !(G.mine.length || G.featured.length); + $('#mineBox').hidden = !G.mine.length; + $('#featH').hidden = $('#featured').hidden = !featured.length; + $('#featH').style.marginTop = G.mine.length ? '40px' : ''; + if (plain) { + $('#mine').innerHTML = G.mine.map(e => tile(e)).join(''); + $('#mineNote').textContent = window.CCSite.me && G.mine.some(e => e.key === window.CCSite.me.toLowerCase()) + ? 'your own city, and the ones built from this browser' : 'built from this browser'; + $('#featured').innerHTML = featured.map(e => tile(e)).join(''); + } + const seen = new Set(plain ? [...mine, ...featured.map(e => e.key)] : []); const q = state.q.trim().toLowerCase(); let list = (plain ? G.recent : G.all).filter(e => !seen.has(e.key) && (!state.kind || e.kind === state.kind) && (!q || e.target.toLowerCase().includes(q))); list = list.slice().sort(SORTS[state.sort] || SORTS.recent); $('#grid').innerHTML = list.length ? list.map(e => tile(e)).join('') : `
${q ? `Nothing built matches ${esc(q)} yet. Build it →` : 'Nothing here yet.'}
`; // with nothing beyond the featured cities yet, skip the empty 'fresh' shelf rather than show it - const bare = plain && !list.length && G.featured.length; + const bare = plain && !list.length && (G.mine.length || featured.length); $('#freshH').hidden = $('#grid').hidden = !!bare; - const n = (plain ? G.featured.length : 0) + list.length; + const n = (plain ? G.mine.length + featured.length : 0) + list.length; $('#count').textContent = `${n} ${n === 1 ? 'city' : 'cities'}`; const qs = new URLSearchParams(); if (state.q) qs.set('q', state.q); diff --git a/web/public/index.html b/web/public/index.html index 672db21..94a3a5e 100644 --- a/web/public/index.html +++ b/web/public/index.html @@ -25,7 +25,7 @@ - + - +
@@ -611,7 +611,7 @@

What does your year look like?

const cols = () => getComputedStyle($('#tiles')).gridTemplateColumns.split(' ').length; const twoRows = () => Math.max(4, 2 * cols()); const SORTS = { - featured: () => 0, // the gallery's own order: featured, then latest built + featured: () => 0, // the gallery's own order: yours, featured, then latest built recent: (a, b) => (b.v || 0) - (a.v || 0), commits: (a, b) => b.commits - a.commits, agent: (a, b) => (b.agent || 0) - (a.agent || 0) || b.commits - a.commits, diff --git a/web/public/readme.html b/web/public/readme.html index 462506d..3c5ebad 100644 --- a/web/public/readme.html +++ b/web/public/readme.html @@ -25,7 +25,7 @@ - + - +
diff --git a/web/public/s/city.js b/web/public/s/city.js index c55d040..1b5839b 100644 --- a/web/public/s/city.js +++ b/web/public/s/city.js @@ -219,10 +219,23 @@ return fail(e); } clearInterval(clock); + remember(meta); if (history.replaceState) history.replaceState(null, '', pagePath() + location.hash); await open(meta); } + // The cities this browser built, newest first, as gallery entries: the home page and /explore lead with them + // (site.js reads the list). It stays in this browser. + function remember(m) { + const share = n => (m.commits ? Math.round((1000 * n) / m.commits) / 1000 : 0); + const e = { key: m.key, target: m.target, kind: m.kind, avatar: m.avatar, commits: m.commits, repos: m.repos, lines: m.lines, v: m.v, + agent: share((m.who || {}).agent || 0), bot: share((m.who || {}).bot || 0) }; + try { + const kept = JSON.parse(localStorage.getItem('cc.mine') || '[]').filter(x => x && x.key !== e.key); + localStorage.setItem('cc.mine', JSON.stringify([e, ...kept].slice(0, 24))); + } catch { /* storage off: the gallery still lists it */ } + } + function fail(e) { const info = (e && e.info) || {}; const s = info.status; diff --git a/web/public/s/site.css b/web/public/s/site.css index 268cdbf..ae7e706 100644 --- a/web/public/s/site.css +++ b/web/public/s/site.css @@ -217,6 +217,7 @@ select.select { height: 38px; padding: 0 30px 0 12px; border-radius: 10px; borde .tile .badge { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 600; color: var(--ink-2); background: rgba(4, 6, 12, 0.72); border: 1px solid var(--line); backdrop-filter: blur(6px); } .tile .badge.ag { left: auto; right: 10px; color: var(--agent); border-color: rgba(197, 139, 255, 0.35); } +.tile .badge.me { color: var(--accent); border-color: rgba(95, 211, 243, 0.4); } .tile .meta { display: flex; align-items: center; gap: 11px; padding: 13px 14px 12px; } .tile .meta img { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-3); flex: none; } .tile .meta img.sq { border-radius: 8px; } diff --git a/web/public/s/site.js b/web/public/s/site.js index f75d7b1..a4a71a1 100644 --- a/web/public/s/site.js +++ b/web/public/s/site.js @@ -27,14 +27,24 @@ const avatarOf = (owner, size = 64) => `https://github.com/${encodeURIComponent(owner)}.png?size=${size}`; // ─────────────────────────────────────────────── gallery feed (one fetch per page) + // `mine`: your own city when signed in, then the cities this browser built (city.js keeps that list), marked + // `mine` and first in `all`. The gallery's copy of one wins: it may be a newer build. One that has dropped out + // of the gallery's latest builds still shows, from the browser's copy. let galleryP = null; function gallery() { if (!galleryP) { galleryP = fetch('/api/gallery').then(r => (r.ok ? r.json() : { featured: [], recent: [] })).catch(() => ({ featured: [], recent: [] })) .then(g => { - const seen = new Set(), all = []; - for (const e of [...(g.featured || []), ...(g.recent || [])]) if (!seen.has(e.key)) { seen.add(e.key); all.push(e); } - return { featured: g.featured || [], recent: g.recent || [], all }; + const listed = new Map(); + for (const e of [...(g.featured || []), ...(g.recent || [])]) if (!listed.has(e.key)) listed.set(e.key, e); + let kept = []; + try { kept = JSON.parse(localStorage.getItem('cc.mine') || '[]'); } catch { /* storage off */ } + const mine = [], seen = new Set(); + const add = e => { if (e && e.key && !seen.has(e.key)) { seen.add(e.key); mine.push({ ...e, mine: true }); } }; + if (me && LOGIN.test(me)) add(listed.get(me.toLowerCase())); + for (const e of Array.isArray(kept) ? kept : []) add(listed.get(e && e.key) || e); + const all = [...mine, ...[...listed.values()].filter(e => !seen.has(e.key))]; + return { featured: g.featured || [], recent: g.recent || [], mine, all }; }); } return galleryP; @@ -200,7 +210,7 @@ const split = (agent || bot) ? `
` : ''; return `
- ${kindLabel(e.kind)}${agent >= 0.01 ? `${Math.round(agent * 100)}% agent` : ''}
+ ${e.mine ? 'yours · ' : ''}${kindLabel(e.kind)}${agent >= 0.01 ? `${Math.round(agent * 100)}% agent` : ''}
${esc(e.target)}${compact(e.commits)} commits · ${e.repos} repo${e.repos === 1 ? '' : 's'} · ${compact(e.lines)} lines
${opts.split === false ? '' : split}`; } diff --git a/web/site/about.html b/web/site/about.html index 0201f2f..c176a92 100644 --- a/web/site/about.html +++ b/web/site/about.html @@ -139,7 +139,7 @@

Privacy

  • Public data only. The builder reads public repositories with a token that can't see anything private. Private repos never appear on commit.city.
  • No source code is kept. A city stores file paths, line counts and timestamps, all things anyone can already see on GitHub. Repo records are cached so the next visitor doesn't rebuild them.
    • -
  • No ads, no trackers, no analytics cookies. A cookie is set only if you sign in, to remember who you are.
    • +
  • No ads, no trackers, no analytics cookies. A cookie is set only if you sign in, to remember who you are. The cities you build are listed in your own browser's storage, so the home page and Explore can show them first; that list never leaves your browser.
  • Sign-in asks for no permissions. It proves you own an account, so you can manage its city. Builds you start then use your own GitHub API quota.
diff --git a/web/site/explore.html b/web/site/explore.html index a92926a..448261f 100644 --- a/web/site/explore.html +++ b/web/site/explore.html @@ -54,7 +54,11 @@

Every city, so far.

-

Featured

hand-picked to show what a city can look like
+ +

Featured

hand-picked to show what a city can look like

Fresh off the press

the latest builds, newest first
@@ -96,18 +100,29 @@

Every city, so far.

function render() { if (!G) return; const plain = !state.q && !state.kind && state.sort === 'recent'; - $('#featuredBox').hidden = !plain || !G.featured.length; - if (plain) $('#featured').innerHTML = G.featured.map(e => tile(e)).join(''); - const seen = new Set(plain ? G.featured.map(e => e.key) : []); + // the plain view is three shelves: yours, featured, then the latest builds, each city on one of them only + const mine = new Set(G.mine.map(e => e.key)); + const featured = G.featured.filter(e => !mine.has(e.key)); + $('#featuredBox').hidden = !plain || !(G.mine.length || G.featured.length); + $('#mineBox').hidden = !G.mine.length; + $('#featH').hidden = $('#featured').hidden = !featured.length; + $('#featH').style.marginTop = G.mine.length ? '40px' : ''; + if (plain) { + $('#mine').innerHTML = G.mine.map(e => tile(e)).join(''); + $('#mineNote').textContent = window.CCSite.me && G.mine.some(e => e.key === window.CCSite.me.toLowerCase()) + ? 'your own city, and the ones built from this browser' : 'built from this browser'; + $('#featured').innerHTML = featured.map(e => tile(e)).join(''); + } + const seen = new Set(plain ? [...mine, ...featured.map(e => e.key)] : []); const q = state.q.trim().toLowerCase(); let list = (plain ? G.recent : G.all).filter(e => !seen.has(e.key) && (!state.kind || e.kind === state.kind) && (!q || e.target.toLowerCase().includes(q))); list = list.slice().sort(SORTS[state.sort] || SORTS.recent); $('#grid').innerHTML = list.length ? list.map(e => tile(e)).join('') : `
${q ? `Nothing built matches ${esc(q)} yet. Build it →` : 'Nothing here yet.'}
`; // with nothing beyond the featured cities yet, skip the empty 'fresh' shelf rather than show it - const bare = plain && !list.length && G.featured.length; + const bare = plain && !list.length && (G.mine.length || featured.length); $('#freshH').hidden = $('#grid').hidden = !!bare; - const n = (plain ? G.featured.length : 0) + list.length; + const n = (plain ? G.mine.length + featured.length : 0) + list.length; $('#count').textContent = `${n} ${n === 1 ? 'city' : 'cities'}`; const qs = new URLSearchParams(); if (state.q) qs.set('q', state.q); diff --git a/web/site/index.html b/web/site/index.html index f22a791..771e2f8 100644 --- a/web/site/index.html +++ b/web/site/index.html @@ -232,25 +232,6 @@

Who's writing the code, live.

-
-
-
- -
-
-
- Reading a city -

Real history, drawn to scale.

-

commit.city doesn't estimate from contribution counts. It replays git itself, so a tower is exactly as tall as that file was on that day.

-
-
    -
    -
    -
    -
    - -
    -