Skip to content

Commit 95b8bbd

Browse files
rachaelrenkoz-agent
rachaelrenk
and
oz-agent
committed
fix: remove card hover underline, make Featured a filter pill
- Add text-decoration: none override on .warp-guide-card:hover and child elements to prevent Starlight's global link underline from cascading into card text - Rework Featured from a subsection of 'All' to its own filter pill (default active). 'All' now shows everything flat with no special section. Single card grid with data-featured attributes for JS filtering. Co-Authored-By: Oz <oz-agent@warp.dev>
1 parent 9c385f6 commit 95b8bbd

2 files changed

Lines changed: 54 additions & 64 deletions

File tree

‎src/components/GuidesLanding.astro‎

Lines changed: 48 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,22 @@ const categories = Object.keys(CATEGORY_LABELS).filter((cat) =>
5555
---
5656

5757
<div class="warp-guide-grid-container not-content">
58-
{/* Filter pills */}
58+
{/* Filter pills — Featured is the default; All shows everything flat */}
5959
<div class="warp-guide-filters" role="tablist" aria-label="Filter guides by category">
60+
{featured.length > 0 && (
61+
<button
62+
role="tab"
63+
aria-selected="true"
64+
class="warp-guide-filter-pill active"
65+
data-filter="featured"
66+
>
67+
Featured ({featured.length})
68+
</button>
69+
)}
6070
<button
6171
role="tab"
62-
aria-selected="true"
63-
class="warp-guide-filter-pill active"
72+
aria-selected="false"
73+
class="warp-guide-filter-pill"
6474
data-filter="all"
6575
>
6676
All ({guides.length})
@@ -80,49 +90,28 @@ const categories = Object.keys(CATEGORY_LABELS).filter((cat) =>
8090
})}
8191
</div>
8292

83-
{/* Featured section */}
84-
{featured.length > 0 && (
85-
<section class="warp-guide-section" data-section="featured">
86-
<h2 class="warp-guide-section-heading">Featured</h2>
87-
<div class="warp-guide-card-grid">
88-
{featured.map((guide) => (
89-
<a href={guide.href} class="warp-guide-card" data-category={guide.category}>
90-
<span class="warp-guide-card-category">{guide.categoryLabel}</span>
91-
<h3 class="warp-guide-card-title">{guide.title}</h3>
92-
{guide.description && <p class="warp-guide-card-desc">{guide.description}</p>}
93-
{guide.tags.length > 0 && (
94-
<div class="warp-guide-card-tags">
95-
{guide.tags.map((tag) => (
96-
<span class="warp-guide-card-tag">{tag}</span>
97-
))}
98-
</div>
99-
)}
100-
</a>
101-
))}
102-
</div>
103-
</section>
104-
)}
105-
106-
{/* All guides */}
107-
<section class="warp-guide-section" data-section="all">
108-
{featured.length > 0 && <h2 class="warp-guide-section-heading">All guides</h2>}
109-
<div class="warp-guide-card-grid">
110-
{guides.map((guide) => (
111-
<a href={guide.href} class="warp-guide-card" data-category={guide.category}>
112-
<span class="warp-guide-card-category">{guide.categoryLabel}</span>
113-
<h3 class="warp-guide-card-title">{guide.title}</h3>
114-
{guide.description && <p class="warp-guide-card-desc">{guide.description}</p>}
115-
{guide.tags.length > 0 && (
116-
<div class="warp-guide-card-tags">
117-
{guide.tags.map((tag) => (
118-
<span class="warp-guide-card-tag">{tag}</span>
119-
))}
120-
</div>
121-
)}
122-
</a>
123-
))}
124-
</div>
125-
</section>
93+
{/* Single card grid — filtering is handled client-side */}
94+
<div class="warp-guide-card-grid">
95+
{guides.map((guide) => (
96+
<a
97+
href={guide.href}
98+
class="warp-guide-card"
99+
data-category={guide.category}
100+
data-featured={guide.featured ? 'true' : undefined}
101+
>
102+
<span class="warp-guide-card-category">{guide.categoryLabel}</span>
103+
<h3 class="warp-guide-card-title">{guide.title}</h3>
104+
{guide.description && <p class="warp-guide-card-desc">{guide.description}</p>}
105+
{guide.tags.length > 0 && (
106+
<div class="warp-guide-card-tags">
107+
{guide.tags.map((tag) => (
108+
<span class="warp-guide-card-tag">{tag}</span>
109+
))}
110+
</div>
111+
)}
112+
</a>
113+
))}
114+
</div>
126115
</div>
127116

128117
<script is:inline>
@@ -132,10 +121,7 @@ const categories = Object.keys(CATEGORY_LABELS).filter((cat) =>
132121
if (!container) return;
133122

134123
const pills = container.querySelectorAll('.warp-guide-filter-pill');
135-
const featuredSection = container.querySelector('[data-section="featured"]');
136-
const allSection = container.querySelector('[data-section="all"]');
137-
const allCards = allSection?.querySelectorAll('.warp-guide-card') ?? [];
138-
const allHeading = allSection?.querySelector('.warp-guide-section-heading');
124+
const cards = container.querySelectorAll('.warp-guide-card');
139125

140126
pills.forEach((pill) => {
141127
pill.addEventListener('click', () => {
@@ -149,25 +135,23 @@ const categories = Object.keys(CATEGORY_LABELS).filter((cat) =>
149135
pill.classList.add('active');
150136
pill.setAttribute('aria-selected', 'true');
151137

152-
// Show/hide featured section
153-
if (featuredSection) {
154-
featuredSection.style.display = filter === 'all' ? '' : 'none';
155-
}
156-
157-
// Show/hide "All guides" heading
158-
if (allHeading) {
159-
allHeading.style.display = filter === 'all' ? '' : 'none';
160-
}
161-
162138
// Filter cards
163-
allCards.forEach((card) => {
164-
if (filter === 'all' || card.getAttribute('data-category') === filter) {
165-
card.style.display = '';
139+
cards.forEach((card) => {
140+
let show = false;
141+
if (filter === 'all') {
142+
show = true;
143+
} else if (filter === 'featured') {
144+
show = card.hasAttribute('data-featured');
166145
} else {
167-
card.style.display = 'none';
146+
show = card.getAttribute('data-category') === filter;
168147
}
148+
card.style.display = show ? '' : 'none';
169149
});
170150
});
171151
});
152+
153+
// Apply initial filter (Featured is default)
154+
const defaultPill = container.querySelector('.warp-guide-filter-pill.active');
155+
if (defaultPill) defaultPill.click();
172156
})();
173157
</script>

‎src/styles/custom.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -434,6 +434,12 @@ body {
434434
.warp-guide-card:hover {
435435
border-color: var(--sl-color-gray-5);
436436
background: var(--sl-color-gray-6);
437+
text-decoration: none;
438+
}
439+
440+
/* Prevent Starlight's global link underline from cascading into card text */
441+
.warp-guide-card:hover * {
442+
text-decoration: none;
437443
}
438444

439445
.warp-guide-card-category {

0 commit comments

Comments
 (0)