Skip to content

Commit 1ac38e4

Browse files
danielnaabdanielnaab
committed
feat(work): use FeaturedCard for featured repos, switch to 2-col grid
- Featured repos now render as FeaturedCard with summaries, highlights, and "Learn more" CTAs in their own prominent section - Non-featured repos in a separate 2-column grid (was 3) for better readability and breathing room for summaries - Featured section always visible; filters apply only to "All projects" - Remove section-heading list items in favor of proper <section> elements
1 parent 4465592 commit 1ac38e4

2 files changed

Lines changed: 52 additions & 53 deletions

File tree

‎src/design/layout.css‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@
6868
}
6969
.home-featured__grid,
7070
.home-stats__grid,
71+
.work-index__featured-grid,
7172
.work-index__list {
7273
display: grid;
7374
gap: var(--space-5);
@@ -76,21 +77,15 @@
7677
@container (min-width: 48rem) {
7778
.home-featured__grid { grid-template-columns: repeat(2, 1fr); }
7879
.home-stats__grid { grid-template-columns: repeat(3, 1fr); }
80+
.work-index__featured-grid { grid-template-columns: repeat(2, 1fr); }
7981
.work-index__list { grid-template-columns: repeat(2, 1fr); }
8082
}
8183
@container (min-width: 72rem) {
8284
.home-featured__grid { grid-template-columns: repeat(4, 1fr); }
83-
.work-index__list { grid-template-columns: repeat(3, 1fr); }
8485
}
85-
.work-index__section-heading {
86-
grid-column: 1 / -1;
87-
list-style: none;
88-
}
89-
.work-index__section-heading h2 {
90-
font-size: var(--step-0);
91-
color: var(--color-ink-subtle);
92-
border-block-end: 1px solid var(--color-surface-alt);
93-
padding-block-end: var(--space-2);
86+
.work-index__featured h2,
87+
.work-index__featured-grid + h2 {
88+
margin-block-end: var(--space-4);
9489
}
9590
.work-detail__related {
9691
margin-block-start: var(--space-6);

‎src/pages/work/index.tsx‎

Lines changed: 47 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Layout } from '../../design/common/layout'
2+
import { FeaturedCard } from '../../design/components/featured-card'
23
import { RepoCard } from '../../design/components/repo-card'
34
import { Select } from '../../design/components/select'
45
import type { Catalog, CatalogEntry } from '../../catalog/types'
@@ -21,60 +22,63 @@ export function WorkIndex({
2122
config: SiteConfig
2223
}) {
2324
const visible = catalog.filter((e) => !e.hidden)
24-
const sorted = [...visible].sort(defaultSort)
25+
const featured = visible.filter((e) => e.featured)
26+
const rest = visible.filter((e) => !e.featured).sort(defaultSort)
2527

2628
return (
2729
<Layout title="Work" config={config}>
2830
<h1>Our work</h1>
2931
<p class="work-index__intro">
3032
Flexion's public portfolio — tools we've built, prototypes we've shipped, and
31-
open-source projects we actively contribute to. Use the filters to explore by
32-
tier or category. See our{' '}
33+
open-source projects we actively contribute to. See our{' '}
3334
<a href={url('/work/health/', config.basePath)}>stewardship scorecard</a> for
3435
how each repo measures up.
3536
</p>
36-
<catalog-filter>
37-
<form class="catalog-filter">
38-
<fieldset>
39-
<legend>Filter</legend>
40-
<Select name="tier" label="Tier">
41-
<option value="">All</option>
42-
<option value="active">Active</option>
43-
<option value="unreviewed">Unreviewed</option>
44-
<option value="as-is">As-is</option>
45-
<option value="archived">Archived</option>
46-
</Select>
47-
<Select name="category" label="Category">
48-
<option value="">All</option>
49-
<option value="product">Product</option>
50-
<option value="tool">Tool</option>
51-
<option value="workshop">Workshop</option>
52-
<option value="prototype">Prototype</option>
53-
<option value="fork">Fork</option>
54-
<option value="uncategorized">Uncategorized</option>
55-
</Select>
56-
</fieldset>
57-
</form>
58-
<ul class="work-index__list">
59-
{sorted.map((entry, i) => (
60-
<>
61-
{entry.featured && i === 0 ? (
62-
<li class="work-index__section-heading" data-featured="true" role="presentation" aria-hidden="true">
63-
<h2>Featured</h2>
64-
</li>
65-
) : null}
66-
{!entry.featured && (i === 0 || sorted[i - 1].featured) ? (
67-
<li class="work-index__section-heading" role="presentation" aria-hidden="true">
68-
<h2>All projects</h2>
69-
</li>
70-
) : null}
71-
<li data-tier={entry.tier} data-category={entry.category} data-featured={entry.featured ? 'true' : undefined}>
37+
38+
{featured.length > 0 ? (
39+
<section class="work-index__featured" aria-labelledby="featured-heading">
40+
<h2 id="featured-heading">Featured</h2>
41+
<div class="work-index__featured-grid">
42+
{featured.map((entry) => (
43+
<FeaturedCard entry={entry} basePath={config.basePath} />
44+
))}
45+
</div>
46+
</section>
47+
) : null}
48+
49+
<section aria-labelledby="all-heading">
50+
<h2 id="all-heading">All projects</h2>
51+
<catalog-filter>
52+
<form class="catalog-filter">
53+
<fieldset>
54+
<legend>Filter</legend>
55+
<Select name="tier" label="Tier">
56+
<option value="">All</option>
57+
<option value="active">Active</option>
58+
<option value="unreviewed">Unreviewed</option>
59+
<option value="as-is">As-is</option>
60+
<option value="archived">Archived</option>
61+
</Select>
62+
<Select name="category" label="Category">
63+
<option value="">All</option>
64+
<option value="product">Product</option>
65+
<option value="tool">Tool</option>
66+
<option value="workshop">Workshop</option>
67+
<option value="prototype">Prototype</option>
68+
<option value="fork">Fork</option>
69+
<option value="uncategorized">Uncategorized</option>
70+
</Select>
71+
</fieldset>
72+
</form>
73+
<ul class="work-index__list">
74+
{rest.map((entry) => (
75+
<li data-tier={entry.tier} data-category={entry.category}>
7276
<RepoCard entry={entry} basePath={config.basePath} />
7377
</li>
74-
</>
75-
))}
76-
</ul>
77-
</catalog-filter>
78+
))}
79+
</ul>
80+
</catalog-filter>
81+
</section>
7882
</Layout>
7983
)
8084
}

0 commit comments

Comments
 (0)