Skip to content

Unify chips into a 3-class system; drop tags from blog rows #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
HumbleBee14 merged 1 commit into from
Jul 13, 2026
Merged

Unify chips into a 3-class system; drop tags from blog rows #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions src/components/BlogFilter.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,18 @@ const { activeTopic, allCount, topicCounts } = Astro.props;
---

<div class="blog-filters" style="margin-bottom: 40px;" data-blog-filter>
<a href="/blog" class={`filter-chip ${activeTopic === 'all' ? 'active' : ''}`} data-topic="all">
<a
href="/blog"
class:list={['chip', 'chip--interactive', { 'is-active': activeTopic === 'all' }]}
data-topic="all"
>
All ({allCount})
</a>
{
TOPICS.map((t) => (
<a
href={`/blog?topic=${t.id}`}
class={`filter-chip ${activeTopic === t.id ? 'active' : ''}`}
class:list={['chip', 'chip--interactive', { 'is-active': activeTopic === t.id }]}
data-topic={t.id}
>
{t.name} ({topicCounts[t.id] ?? 0})
Expand All @@ -46,7 +50,7 @@ const { activeTopic, allCount, topicCounts } = Astro.props;
document
.querySelectorAll<HTMLAnchorElement>('[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'));
Expand Down
9 changes: 7 additions & 2 deletions src/components/SearchInline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,7 @@ export default function SearchInline() {
<div className="search-section-label">Browse by topic</div>
<div className="search-topic-chips">
{TOPICS.map((t) => (
<a key={t.id} href={`/blog?topic=${t.id}`}>
<a key={t.id} href={`/blog?topic=${t.id}`} className="chip chip--interactive">
{t.name}
</a>
))}
Expand All @@ -242,7 +242,12 @@ export default function SearchInline() {
<div className="search-section-label">Try searching</div>
<div className="search-hint-terms">
{['attention', 'quantization', 'vLLM', 'FSDP', 'evals', 'agents'].map((t) => (
<button key={t} type="button" onClick={() => setQuery(t)}>
<button
key={t}
type="button"
onClick={() => setQuery(t)}
className="chip chip--interactive"
>
{t}
</button>
))}
Expand Down
14 changes: 12 additions & 2 deletions src/components/SearchModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,7 +257,12 @@ export default function SearchModal() {
<div className="search-section-label">Browse by topic</div>
<div className="search-topic-chips">
{TOPICS.map((t) => (
<a key={t.id} href={`/blog?topic=${t.id}`} onClick={close}>
<a
key={t.id}
href={`/blog?topic=${t.id}`}
onClick={close}
className="chip chip--interactive"
>
{t.name}
</a>
))}
Expand All @@ -267,7 +272,12 @@ export default function SearchModal() {
<div className="search-section-label">Try searching</div>
<div className="search-hint-terms">
{['attention', 'quantization', 'vLLM', 'FSDP', 'evals'].map((t) => (
<button key={t} type="button" onClick={() => setQuery(t)}>
<button
key={t}
type="button"
onClick={() => setQuery(t)}
className="chip chip--interactive"
>
{t}
</button>
))}
Expand Down
9 changes: 3 additions & 6 deletions src/pages/blog/[slug].astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,13 +107,10 @@ const breadcrumbJsonLd = {
<a href="/blog" class="article-back">← Back to archive</a>

<div class="article-byline" style="margin-bottom: 4px;">
<span
style="padding: 2px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-pill);"
>{topicName(post.data.topicId)}</span
>
<span class="chip chip--sm">{topicName(post.data.topicId)}</span>
{
post.data.tags?.map((t) => (
<a href={`/tags/${tagSlug(t)}`} style="color: var(--ink-3); text-decoration: none;">
<a href={`/tags/${tagSlug(t)}`} class="hashtag">
#{t}
</a>
))
Expand Down Expand Up @@ -173,7 +170,7 @@ const breadcrumbJsonLd = {
{related.map((r) => (
<a href={`/blog/${r.id}`} class="article-card" style="padding: 20px 0;">
<div class="article-meta">
<span style="color: var(--ink-3);">{topicName(r.data.topicId)}</span>
<span class="chip chip--sm">{topicName(r.data.topicId)}</span>
</div>
<h3 class="article-title" style="font-size: 22px;">
{r.data.title}
Expand Down
5 changes: 1 addition & 4 deletions src/pages/blog/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,7 @@ all.forEach((a) => {
<div class="blog-row-body">
<div class="blog-row-title-line">
<h3 class="blog-row-title">{a.data.title}</h3>
<span class="blog-row-chip">{topicName(a.data.topicId)}</span>
{a.data.tags?.slice(0, 2).map((t) => (
<span class="blog-row-tag">#{t}</span>
))}
<span class="chip chip--sm">{topicName(a.data.topicId)}</span>
</div>
<p class="blog-row-summary">{a.data.summary}</p>
</div>
Expand Down
53 changes: 14 additions & 39 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ const featuredTools = allTools
featuredFinal.map((p) => (
<a class="article-card" href={`/blog/${p.id}`}>
<div class="article-meta">
<span class="article-topic">{topicName(p.data.topicId)}</span>
<span class="chip chip--sm">{topicName(p.data.topicId)}</span>
</div>
<h3 class="article-title">{p.data.title}</h3>
<p class="article-summary">{p.data.summary}</p>
Expand Down Expand Up @@ -142,14 +142,18 @@ const featuredTools = allTools
{topicsWithPosts.map((t) => (
<button
type="button"
class:list={['topic-tab', { active: t.id === defaultTopicId }]}
class:list={[
'chip',
'chip--interactive',
{ 'is-active': t.id === defaultTopicId },
]}
role="tab"
aria-selected={t.id === defaultTopicId}
aria-controls={`topic-panel-${t.id}`}
data-topic={t.id}
>
{t.name}
<span class="topic-tab-count">{t.totalCount}</span>
<span class="chip__count">{t.totalCount}</span>
</button>
))}
</div>
Expand Down Expand Up @@ -213,9 +217,7 @@ const featuredTools = allTools
</div>
<h3 class="tool-name">{tool.data.name}</h3>
<p class="tool-desc">{tool.data.summary}</p>
<div class="tool-tag" style="color: var(--accent);">
· {tool.data.tag} ·
</div>
<span class="chip chip--sm chip--beta">{tool.data.tag}</span>
</a>
))
}
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -496,15 +471,15 @@ const featuredTools = allTools
});

document.querySelectorAll<HTMLElement>('[data-topic-explorer]').forEach((root) => {
const tabs = root.querySelectorAll<HTMLButtonElement>('.topic-tab');
const tabs = root.querySelectorAll<HTMLButtonElement>('[role="tab"]');
const panels = root.querySelectorAll<HTMLElement>('.topic-panel');
tabs.forEach((tab) => {
tab.addEventListener('click', () => {
const topic = tab.dataset.topic ?? '';
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) => {
Expand Down
24 changes: 2 additions & 22 deletions src/pages/playground/[tool].astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,10 @@ const breadcrumbJsonLd = {

<header class="tool-head">
<div class="tool-meta">
<span class={`tool-tag tool-tag-${tool.data.tag.toLowerCase().replace(/\s+/g, '-')}`}>
<span class={`chip chip--sm chip--${tool.data.tag.toLowerCase().replace(/\s+/g, '-')}`}>
{tool.data.tag}
</span>
{tool.data.tags?.map((t) => <span class="tool-hashtag">#{t}</span>)}
{tool.data.tags?.map((t) => <span class="hashtag">#{t}</span>)}
</div>

<h1 class="tool-h1">{tool.data.name}</h1>
Expand Down Expand Up @@ -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;
Expand Down
44 changes: 3 additions & 41 deletions src/pages/playground/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ const catalogTools = allTools.sort((a, b) => {
<span class="tool-card-icon" aria-hidden="true">
{t.data.icon ?? '◇'}
</span>
{t.data.tag !== 'Live' && <span class="tool-card-status">{t.data.tag}</span>}
{t.data.tag !== 'Live' && <span class="chip chip--sm">{t.data.tag}</span>}
</div>
</a>
</li>
Expand Down Expand Up @@ -167,7 +167,7 @@ const catalogTools = allTools.sort((a, b) => {
<span class="tool-card-icon" aria-hidden="true">
↗
</span>
<span class="tool-card-tag">{t.category}</span>
<span class="chip chip--sm">{t.category}</span>
</div>
<h3 class="tool-card-name">{t.name}</h3>
<p class="tool-card-summary">{t.desc}</p>
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/pages/tags/[tag].astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ const breadcrumbJsonLd = {
<div class="blog-row-body">
<div class="blog-row-title-line">
<h2 class="blog-row-title">{a.data.title}</h2>
<span class="blog-row-chip">{topicName(a.data.topicId)}</span>
<span class="chip chip--sm">{topicName(a.data.topicId)}</span>
</div>
<p class="blog-row-summary">{a.data.summary}</p>
</div>
Expand Down
27 changes: 2 additions & 25 deletions src/pages/tags/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ const canonical = `${SITE.url}/tags`;
<div class="tag-cloud">
{
tags.map((t) => (
<a href={`/tags/${t.slug}`} class="tag-cloud-item">
#{t.label} <span class="tag-cloud-count">{t.count}</span>
<a href={`/tags/${t.slug}`} class="chip chip--interactive">
#{t.label} <span class="chip__count">{t.count}</span>
</a>
))
}
Expand All @@ -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);
}
</style>
</BaseLayout>
Loading
Loading