Skip to content

Commit 810075c

Browse files
Seungpyo1007Seungpyo1007
committed
feat(site): add dataset history section
1 parent 4f42df9 commit 810075c

3 files changed

Lines changed: 171 additions & 3 deletions

File tree

‎site/src/pages/index.astro‎

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,8 @@ const endpoints = [
4848
<span class="mark">T</span>TechAPI<span class="cursor" aria-hidden="true"></span>
4949
</a>
5050
<div class="nav-links">
51-
<a href="#playground">try_it</a>
51+
<a href="#playground">Playground</a>
52+
<a href="#history">History</a>
5253
<a href="#featured">devices</a>
5354
<a href="#endpoints">endpoints</a>
5455
<a href={`${base}docs`}>docs</a>
@@ -75,7 +76,7 @@ const endpoints = [
7576
</h1>
7677
<p class="tagline">Structured specs &amp; computed scores for smartphones, SoCs, GPUs and CPUs — served as plain static JSON. Free and open.</p>
7778
<div class="hero-cta">
78-
<a class="btn primary" href="#playground">Try the API <span class="arr">→</span></a>
79+
<a class="btn primary" href="#playground">Open Playground <span class="arr">→</span></a>
7980
<a class="btn" href={`${base}docs`}>Read the docs</a>
8081
</div>
8182
</div>
@@ -104,6 +105,34 @@ const endpoints = [
104105
</header>
105106

106107
<main>
108+
<!-- HISTORY -->
109+
<section class="block" id="history">
110+
<div class="wrap">
111+
<div class="sec-head">
112+
<div>
113+
<span class="kicker">00 - History</span>
114+
<h2 style="margin-top:14px">Dataset growth, synced live</h2>
115+
<p class="sec-sub">Counts come from the published static dump, while recent syncs come from repository activity when GitHub is reachable.</p>
116+
</div>
117+
<span class="num">v1/index.json</span>
118+
</div>
119+
120+
<div class="history" data-reveal>
121+
<div class="history-panel">
122+
<div class="history-label">Current snapshot</div>
123+
<div class="history-total" id="history-total">loading</div>
124+
<div class="history-grid" id="history-counts"></div>
125+
</div>
126+
<div class="history-panel">
127+
<div class="history-label">Recent syncs</div>
128+
<ol class="history-list" id="history-list">
129+
<li><span class="history-dot"></span><span>Loading repository history...</span></li>
130+
</ol>
131+
</div>
132+
</div>
133+
</div>
134+
</section>
135+
107136
<!-- ─────────────── PLAYGROUND ─────────────── -->
108137
<section class="block" id="playground">
109138
<div class="wrap">

‎site/src/scripts/techapi.js‎

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,12 @@
33
const raw = import.meta.env.BASE_URL;
44
const base = raw.endsWith("/") ? raw : raw + "/";
55
const absUrl = (path) => new URL(path.replace(/^\//, ""), location.origin + base).href;
6-
const esc = (s) => String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
6+
const esc = (s) => String(s)
7+
.replace(/&/g, "&amp;")
8+
.replace(/</g, "&lt;")
9+
.replace(/>/g, "&gt;")
10+
.replace(/"/g, "&quot;")
11+
.replace(/'/g, "&#39;");
712

813
/* ---- theme: follow OS preference until the user picks one (persisted) ---- */
914
const root = document.documentElement;
@@ -180,6 +185,54 @@ function countUp(node, target) {
180185
})(performance.now());
181186
}
182187

188+
/* ============================================================
189+
HISTORY
190+
============================================================ */
191+
(function history() {
192+
const totalEl = document.getElementById("history-total");
193+
const countsEl = document.getElementById("history-counts");
194+
const listEl = document.getElementById("history-list");
195+
if (!totalEl || !countsEl || !listEl) return;
196+
197+
const order = ["smartphones", "socs", "gpus", "cpus", "brands"];
198+
const label = { smartphones: "Phones", socs: "SoCs", gpus: "GPUs", cpus: "CPUs", brands: "Brands" };
199+
200+
getJSON("v1/index.json").then((manifest) => {
201+
const rows = order
202+
.map((key) => ({ key, count: manifest.collections?.[key]?.count }))
203+
.filter((row) => row.count != null);
204+
const total = rows.reduce((sum, row) => sum + row.count, 0);
205+
totalEl.textContent = total.toLocaleString() + " records";
206+
countsEl.innerHTML = rows.map((row) =>
207+
`<div class="history-count"><span>${label[row.key]}</span><b>${row.count.toLocaleString()}</b></div>`
208+
).join("");
209+
}).catch(() => {
210+
totalEl.textContent = "sync unavailable";
211+
countsEl.innerHTML = '<div class="history-count"><span>Static dump</span><b>offline</b></div>';
212+
});
213+
214+
fetch("https://api.github.com/repos/GetTechAPI/TechAPI/commits?path=site/public/v1&per_page=5")
215+
.then((response) => {
216+
if (!response.ok) throw new Error(response.statusText);
217+
return response.json();
218+
})
219+
.then((commits) => {
220+
const items = Array.isArray(commits) ? commits.slice(0, 4) : [];
221+
if (!items.length) throw new Error("empty history");
222+
listEl.innerHTML = items.map((item) => {
223+
const message = (item.commit?.message || "Dataset sync").split("\n")[0];
224+
const date = item.commit?.committer?.date ? new Date(item.commit.committer.date) : null;
225+
const when = date ? date.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" }) : "recent";
226+
const sha = String(item.sha || "").slice(0, 7);
227+
const url = item.html_url || "https://github.com/GetTechAPI/TechAPI";
228+
return `<li><span class="history-dot"></span><span><a href="${esc(url)}" target="_blank" rel="noopener">${esc(message)}</a><small>${esc(when)} · ${esc(sha)}</small></span></li>`;
229+
}).join("");
230+
})
231+
.catch(() => {
232+
listEl.innerHTML = '<li><span class="history-dot"></span><span>Current static dump is available; repository history could not be loaded.<small>GitHub API unavailable</small></span></li>';
233+
});
234+
})();
235+
183236
/* ============================================================
184237
PLAYGROUND
185238
============================================================ */

‎site/src/styles/techapi.css‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,92 @@ code, .mono { font-family: var(--mono); }
247247
.hero { padding: 56px 0 40px; }
248248
}
249249

250+
/* ============================================================
251+
HISTORY
252+
============================================================ */
253+
.history {
254+
display: grid;
255+
grid-template-columns: .9fr 1.1fr;
256+
gap: 16px;
257+
}
258+
.history-panel {
259+
border: 1px solid var(--border);
260+
border-radius: 8px;
261+
background: var(--surface);
262+
padding: 22px;
263+
}
264+
.history-label {
265+
font-family: var(--mono);
266+
font-size: 11px;
267+
color: var(--muted);
268+
text-transform: uppercase;
269+
letter-spacing: .12em;
270+
}
271+
.history-total {
272+
margin-top: 12px;
273+
font-family: var(--mono);
274+
font-size: clamp(30px, 4vw, 48px);
275+
font-weight: 700;
276+
letter-spacing: -.04em;
277+
line-height: 1;
278+
}
279+
.history-grid {
280+
display: grid;
281+
grid-template-columns: repeat(2, minmax(0, 1fr));
282+
gap: 8px;
283+
margin-top: 22px;
284+
}
285+
.history-count {
286+
display: flex;
287+
align-items: center;
288+
justify-content: space-between;
289+
gap: 12px;
290+
padding: 10px 12px;
291+
border: 1px solid var(--border);
292+
border-radius: var(--radius);
293+
background: var(--surface-2);
294+
font-family: var(--mono);
295+
}
296+
.history-count span { color: var(--muted); font-size: 12px; }
297+
.history-count b { color: var(--fg); font-size: 13px; }
298+
.history-list {
299+
list-style: none;
300+
margin: 18px 0 0;
301+
padding: 0;
302+
display: grid;
303+
gap: 14px;
304+
}
305+
.history-list li {
306+
display: grid;
307+
grid-template-columns: 12px 1fr;
308+
gap: 12px;
309+
align-items: start;
310+
}
311+
.history-dot {
312+
width: 8px;
313+
height: 8px;
314+
margin-top: 7px;
315+
border-radius: 50%;
316+
background: var(--accent);
317+
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
318+
}
319+
.history-list a {
320+
color: var(--fg);
321+
font-weight: 600;
322+
}
323+
.history-list a:hover { color: var(--accent-text); }
324+
.history-list small {
325+
display: block;
326+
margin-top: 2px;
327+
font-family: var(--mono);
328+
font-size: 11.5px;
329+
color: var(--muted);
330+
}
331+
@media (max-width: 760px) {
332+
.history { grid-template-columns: 1fr; }
333+
.history-grid { grid-template-columns: 1fr; }
334+
}
335+
250336
/* ============================================================
251337
SECTION SHELL
252338
============================================================ */

0 commit comments

Comments
 (0)