From d47bb47bf3531f8b6645fd32efe55857a3336110 Mon Sep 17 00:00:00 2001 From: Dinesh <13635627+HumbleBee14@users.noreply.github.com> Date: Sun, 12 Jul 2026 17:58:24 -0700 Subject: [PATCH] Unify all chips into a 3-class system; drop tags from blog rows Replace 11 ad-hoc chip/pill/tag treatments with one primitive: - .chip (normal pill) and .chip--sm (thin mono-uppercase) - modifiers: .chip--interactive (accent hover + .is-active), state colors .chip--live / .chip--beta / .chip--soon, .chip__count badge - .hashtag for borderless inline #tags Migrated: homepage recent cards, topic tabs, and tool cards; blog filter; blog/topic/tag rows; tag cloud; blog byline; playground grid status + tool detail; search dialog chips. Removed the two colliding .tool-tag definitions and dead per-status rules. Interactive chips now share one accent hover/active behaviour everywhere. Blog list rows show only the topic pill; #tags removed (kept on the article page and /tags where they aid navigation, not list scanning). Calculator segmented controls keep .filter-chip (a tool control, not a content tag) and stay out of the chip vocabulary. --- src/components/BlogFilter.astro | 10 ++- src/components/SearchInline.tsx | 9 +- src/components/SearchModal.tsx | 14 +++- src/pages/blog/[slug].astro | 9 +- src/pages/blog/index.astro | 5 +- src/pages/index.astro | 53 ++++-------- src/pages/playground/[tool].astro | 24 +----- src/pages/playground/index.astro | 44 +--------- src/pages/tags/[tag].astro | 2 +- src/pages/tags/index.astro | 27 +----- src/pages/topics/[id].astro | 3 - src/styles/global.css | 131 +++++++++++++++--------------- 12 files changed, 119 insertions(+), 212 deletions(-) diff --git a/src/components/BlogFilter.astro b/src/components/BlogFilter.astro index c68b1a8..5d4a3e7 100644 --- a/src/components/BlogFilter.astro +++ b/src/components/BlogFilter.astro @@ -14,14 +14,18 @@ const { activeTopic, allCount, topicCounts } = Astro.props; ---
- + All ({allCount}) { TOPICS.map((t) => ( {t.name} ({topicCounts[t.id] ?? 0}) @@ -46,7 +50,7 @@ const { activeTopic, allCount, topicCounts } = Astro.props; document .querySelectorAll('[data-blog-filter] a[data-topic]') .forEach((a) => { - a.classList.toggle('active', a.dataset.topic === topic); + a.classList.toggle('is-active', a.dataset.topic === topic); }); // Trigger the filter script in blog/index.astro window.dispatchEvent(new PopStateEvent('popstate')); diff --git a/src/components/SearchInline.tsx b/src/components/SearchInline.tsx index edfc431..7bf4e40 100644 --- a/src/components/SearchInline.tsx +++ b/src/components/SearchInline.tsx @@ -232,7 +232,7 @@ export default function SearchInline() {
Browse by topic
{TOPICS.map((t) => ( - + {t.name} ))} @@ -242,7 +242,12 @@ export default function SearchInline() {
Try searching
{['attention', 'quantization', 'vLLM', 'FSDP', 'evals', 'agents'].map((t) => ( - ))} diff --git a/src/components/SearchModal.tsx b/src/components/SearchModal.tsx index 0f709e9..9f4b737 100644 --- a/src/components/SearchModal.tsx +++ b/src/components/SearchModal.tsx @@ -257,7 +257,12 @@ export default function SearchModal() {
Browse by topic
{TOPICS.map((t) => ( - + {t.name} ))} @@ -267,7 +272,12 @@ export default function SearchModal() {
Try searching
{['attention', 'quantization', 'vLLM', 'FSDP', 'evals'].map((t) => ( - ))} diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro index 399d1d3..632b403 100644 --- a/src/pages/blog/[slug].astro +++ b/src/pages/blog/[slug].astro @@ -107,13 +107,10 @@ const breadcrumbJsonLd = { ← Back to archive
- {topicName(post.data.topicId)} + {topicName(post.data.topicId)} { post.data.tags?.map((t) => ( - + #{t} )) @@ -173,7 +170,7 @@ const breadcrumbJsonLd = { {related.map((r) => (
- {topicName(r.data.topicId)} + {topicName(r.data.topicId)}

{r.data.title} diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro index 46c188d..f01dec3 100644 --- a/src/pages/blog/index.astro +++ b/src/pages/blog/index.astro @@ -56,10 +56,7 @@ all.forEach((a) => {

{a.data.title}

- {topicName(a.data.topicId)} - {a.data.tags?.slice(0, 2).map((t) => ( - #{t} - ))} + {topicName(a.data.topicId)}

{a.data.summary}

diff --git a/src/pages/index.astro b/src/pages/index.astro index 54d8b27..435eb50 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -106,7 +106,7 @@ const featuredTools = allTools featuredFinal.map((p) => (
- {topicName(p.data.topicId)} + {topicName(p.data.topicId)}

{p.data.title}

{p.data.summary}

@@ -142,14 +142,18 @@ const featuredTools = allTools {topicsWithPosts.map((t) => ( ))}

@@ -213,9 +217,7 @@ const featuredTools = allTools

{tool.data.name}

{tool.data.summary}

-
- · {tool.data.tag} · -
+ {tool.data.tag} )) } @@ -348,40 +350,13 @@ const featuredTools = allTools .topic-tabs:hover::-webkit-scrollbar-thumb { background: var(--ink-4); } - .topic-tab { + .topic-tabs .chip { flex-shrink: 0; - display: inline-flex; - align-items: center; - gap: 8px; - padding: 8px 14px; - background: transparent; - border: 1px solid var(--line); - border-radius: var(--radius-pill); - color: var(--ink-2); - font: inherit; - font-size: 13px; - cursor: pointer; - white-space: nowrap; scroll-snap-align: start; - transition: - color 0.15s ease, - border-color 0.15s ease, - background 0.15s ease; - } - .topic-tab:hover { - color: var(--accent); - border-color: var(--accent); - } - .topic-tab.active { - background: var(--accent); - color: var(--paper); - border-color: var(--accent); } - .topic-tab-count { - font-family: var(--font-mono); - font-size: 10px; - opacity: 0.75; - padding-left: 2px; + .tool-card .chip { + margin-top: auto; + align-self: flex-start; } .topic-post-list { @@ -496,7 +471,7 @@ const featuredTools = allTools }); document.querySelectorAll('[data-topic-explorer]').forEach((root) => { - const tabs = root.querySelectorAll('.topic-tab'); + const tabs = root.querySelectorAll('[role="tab"]'); const panels = root.querySelectorAll('.topic-panel'); tabs.forEach((tab) => { tab.addEventListener('click', () => { @@ -504,7 +479,7 @@ const featuredTools = allTools root.dataset.activeTopic = topic; tabs.forEach((t) => { const isActive = t.dataset.topic === topic; - t.classList.toggle('active', isActive); + t.classList.toggle('is-active', isActive); t.setAttribute('aria-selected', String(isActive)); }); panels.forEach((p) => { diff --git a/src/pages/playground/[tool].astro b/src/pages/playground/[tool].astro index 4f5d821..d5210bb 100644 --- a/src/pages/playground/[tool].astro +++ b/src/pages/playground/[tool].astro @@ -51,10 +51,10 @@ const breadcrumbJsonLd = {
- + {tool.data.tag} - {tool.data.tags?.map((t) => #{t})} + {tool.data.tags?.map((t) => #{t})}

{tool.data.name}

@@ -111,26 +111,6 @@ const breadcrumbJsonLd = { font-family: var(--font-mono); font-size: 11px; } - .tool-tag { - padding: 3px 10px; - border-radius: var(--radius-pill); - text-transform: uppercase; - letter-spacing: 0.08em; - color: var(--ink); - border: 1px solid var(--line-2); - } - .tool-tag-live { - color: var(--paper); - background: var(--accent); - border-color: var(--accent); - } - .tool-tag-beta { - color: var(--accent); - border-color: var(--accent); - } - .tool-hashtag { - color: var(--ink-3); - } .tool-h1 { font-family: var(--font-display); font-size: 64px; diff --git a/src/pages/playground/index.astro b/src/pages/playground/index.astro index 56eea16..b964e6f 100644 --- a/src/pages/playground/index.astro +++ b/src/pages/playground/index.astro @@ -108,7 +108,7 @@ const catalogTools = allTools.sort((a, b) => { - {t.data.tag !== 'Live' && {t.data.tag}} + {t.data.tag !== 'Live' && {t.data.tag}}
@@ -167,7 +167,7 @@ const catalogTools = allTools.sort((a, b) => { - {t.category} + {t.category}

{t.name}

{t.desc}

@@ -281,28 +281,6 @@ const catalogTools = allTools.sort((a, b) => { color: var(--accent); line-height: 1; } - .tool-card-tag { - font-family: var(--font-mono); - font-size: 10px; - text-transform: uppercase; - letter-spacing: 0.1em; - color: var(--ink-3); - padding: 3px 8px; - border: 1px solid var(--line-2); - border-radius: var(--radius-pill); - } - .tool-card-live .tool-card-tag { - color: var(--paper); - background: var(--accent); - border-color: var(--accent); - } - .tool-card-beta .tool-card-tag { - color: var(--accent); - border-color: var(--accent); - } - .tool-card-coming-soon .tool-card-tag { - color: var(--ink-4); - } .tool-card-name { font-family: var(--font-display); font-size: 26px; @@ -369,16 +347,12 @@ const catalogTools = allTools.sort((a, b) => { .tool-card-link { font-size: 10px; } - .tool-card-tag { + .tool-card .chip { font-size: 9px; padding: 2px 6px; } } - .tool-card-external .tool-card-tag { - color: var(--ink-3); - border-color: var(--line-2); - } .tool-card-external:hover .tool-card-icon { transform: translate(2px, -2px); transition: transform 0.18s; @@ -488,18 +462,6 @@ const catalogTools = allTools.sort((a, b) => { position: relative; z-index: 1; } - .tool-card-status { - font-family: var(--font-mono); - font-size: 10px; - text-transform: uppercase; - letter-spacing: 0.1em; - padding: 3px 9px; - border: 1px solid var(--line-2); - border-radius: var(--radius-pill); - color: var(--ink-3); - background: color-mix(in srgb, var(--paper-2) 90%, transparent); - } - @media (max-width: 720px) { .tools-catalog-scroll { max-height: none; diff --git a/src/pages/tags/[tag].astro b/src/pages/tags/[tag].astro index 5e023c6..2e5ce55 100644 --- a/src/pages/tags/[tag].astro +++ b/src/pages/tags/[tag].astro @@ -89,7 +89,7 @@ const breadcrumbJsonLd = {

{a.data.title}

- {topicName(a.data.topicId)} + {topicName(a.data.topicId)}

{a.data.summary}

diff --git a/src/pages/tags/index.astro b/src/pages/tags/index.astro index 45e74ef..9fc0487 100644 --- a/src/pages/tags/index.astro +++ b/src/pages/tags/index.astro @@ -38,8 +38,8 @@ const canonical = `${SITE.url}/tags`;
{ tags.map((t) => ( - - #{t.label} {t.count} + + #{t.label} {t.count} )) } @@ -53,28 +53,5 @@ const canonical = `${SITE.url}/tags`; gap: 10px; margin: 24px 0 80px; } - .tag-cloud-item { - display: inline-flex; - align-items: center; - gap: 6px; - padding: 6px 12px; - border: 1px solid var(--line-2); - border-radius: var(--radius-pill, 99px); - color: var(--ink-2); - text-decoration: none; - font-size: 14px; - transition: - border-color 0.15s ease, - color 0.15s ease; - } - .tag-cloud-item:hover { - border-color: var(--accent); - color: var(--accent); - } - .tag-cloud-count { - font-family: var(--font-mono); - font-size: 11px; - color: var(--ink-3); - } diff --git a/src/pages/topics/[id].astro b/src/pages/topics/[id].astro index ab9ae73..32d7236 100644 --- a/src/pages/topics/[id].astro +++ b/src/pages/topics/[id].astro @@ -99,9 +99,6 @@ const breadcrumbJsonLd = {

{a.data.title}

- {a.data.tags?.slice(0, 2).map((t) => ( - #{t} - ))}

{a.data.summary}

diff --git a/src/styles/global.css b/src/styles/global.css index 757326a..7cd9a34 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -779,11 +779,75 @@ main { color: var(--ink-3); align-items: center; } -.article-topic { - padding: 2px 8px; +/* Chip — the one pill primitive. + Shapes: .chip (normal) · .chip--sm (thin mono-uppercase). + Modifiers compose onto either: .chip--interactive (accent hover + .is-active fill), + state colors .chip--live / .chip--beta / .chip--soon. .chip__count is the trailing badge. + .hashtag is the borderless inline #tag. */ +.chip { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 6px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-pill); + background: transparent; color: var(--ink-2); + font-family: var(--font-sans); + font-size: 13px; + line-height: 1.2; + white-space: nowrap; + text-decoration: none; +} +.chip--sm { + padding: 2px 8px; + font-family: var(--font-mono); + font-size: 10px; + letter-spacing: 0.08em; + text-transform: uppercase; +} +.chip__count { + font-family: var(--font-mono); + font-size: 10px; + opacity: 0.75; +} +.chip--interactive { + cursor: pointer; + transition: + color 0.15s ease, + border-color 0.15s ease, + background 0.15s ease; +} +.chip--interactive:hover { + color: var(--accent); + border-color: var(--accent); +} +.chip--interactive.is-active { + background: var(--accent); + color: var(--paper); + border-color: var(--accent); +} +.chip--live { + color: var(--paper); + background: var(--accent); + border-color: var(--accent); +} +.chip--beta { + color: var(--accent); + border-color: var(--accent); +} +.chip--soon { + color: var(--ink-4); +} +.hashtag { + font-family: var(--font-mono); + font-size: 10px; + color: var(--ink-3); + text-decoration: none; + white-space: nowrap; +} +a.hashtag:hover { + color: var(--accent); } .article-title { font-family: var(--font-display); @@ -1036,15 +1100,6 @@ main { line-height: 1.5; margin: 0; } -.tool-tag { - font-family: var(--font-mono); - font-size: 10px; - color: var(--ink-3); - letter-spacing: 0.06em; - text-transform: uppercase; - margin-top: auto; -} - /* CTA contribute */ .cta-banner { border: 1px solid var(--line-2); @@ -1798,23 +1853,6 @@ main { font-size: 22px; letter-spacing: -0.02em; } -.blog-row-chip { - font-family: var(--font-mono); - font-size: 10px; - text-transform: uppercase; - letter-spacing: 0.08em; - color: var(--ink-2); - padding: 2px 8px; - border: 1px solid var(--ink-3); - border-radius: var(--radius-pill); - white-space: nowrap; -} -.blog-row-tag { - font-family: var(--font-mono); - font-size: 10px; - color: var(--ink-3); - white-space: nowrap; -} .blog-row-summary { font-size: 13px; color: var(--ink-2); @@ -2218,7 +2256,7 @@ main { font-size: 14px; line-height: 1.55; } -.search-empty a { +.search-empty a:not(.chip) { color: var(--accent); } .search-hint { @@ -2239,23 +2277,6 @@ main { flex-wrap: wrap; gap: 6px; } -.search-topic-chips a { - font-size: 12px; - font-family: var(--font-mono); - color: var(--ink-2); - background: var(--paper-2); - border: 1px solid var(--line); - border-radius: var(--radius-pill); - padding: 4px 10px; - text-decoration: none; - transition: - color 0.15s ease, - border-color 0.15s ease; -} -.search-topic-chips a:hover { - color: var(--accent); - border-color: var(--accent); -} .search-hint-terms { display: inline-flex; flex-wrap: wrap; @@ -2269,24 +2290,6 @@ main { color: var(--ink-3); padding: 10px 14px 4px; } -.search-hint-terms button { - font: inherit; - font-size: 12px; - font-family: var(--font-mono); - color: var(--ink-2); - background: var(--paper-2); - border: 1px solid var(--line); - border-radius: var(--radius-pill); - padding: 3px 10px; - cursor: pointer; - transition: - color 0.15s ease, - border-color 0.15s ease; -} -.search-hint-terms button:hover { - color: var(--accent); - border-color: var(--accent); -} .search-results { list-style: none; margin: 0;