Building a tag system in Astro

SeriesPart of How this blog was built — documenting every decision that shaped this site.

Tags do more than connect related posts. They create a second navigation system. On this site the same tag data powers the blog archive cloud, the dedicated /tags overview, paginated tag archive pages, and a sidebar browser on individual post pages.

The key constraint is consistency. If each surface counts tags differently, builds URLs differently, or decides for itself which posts are visible, the whole system drifts. The implementation here stays simple by sharing two rules everywhere: one slug helper and one publication filter.

A later update added per-tag descriptions, a featured post highlight, related topics, and a stats bar, all covered in the second half of this post.

Tag system wireframe showing three views: the blog archive weighted cloud with tier-1/2/3 pill sizes, the /tags page with concentric ring layout, and the post sidebar tag list

Slug normalisation

Every tag is displayed as-is, but routed via a URL-safe slug. A small utility in src/utils/tags.ts handles that conversion:

1
export function tagSlug(tag: string): string {
2
  return tag
3
    .toLowerCase()
4
    .replace(/\s+/g, "-")
5
    .replace(/[^a-z0-9-]/g, "");
6
}

That turns "web development" into "web-development", "Node.js" into "nodejs", and "C#" into "c". It is intentionally small. A more generic utility might transliterate Unicode or preserve special cases, but the tag vocabulary on this site is controlled enough that a simple transform is easier to reason about.

The important detail is reuse. The cloud component, sidebar, tags index, and tag archive routes all import the same helper, so every link resolves to the same path format.

Publication-aware tag counts

Counting tags is trivial. Counting the right tags is the subtle part.

This site does not let each tag surface invent its own visibility rules. It filters posts through the shared publication helper and only then derives tag counts:

1
import { isPublished } from "../utils/drafts";
2

3
const allPosts = (await getCollection("posts")).filter(isPublished);
4

5
const tagCounts = new Map<string, number>();
6
for (const post of allPosts) {
7
  for (const tag of post.data.tags) {
8
    tagCounts.set(tag, (tagCounts.get(tag) ?? 0) + 1);
9
  }
10
}

That matters because isPublished() hides both drafts and future-dated posts unless SHOW_DRAFTS=true. The weighted cloud, ring layout, tag archives, and sidebar all stay in sync with the rest of the site because they start from the same filtered set.

Right now the counting logic is repeated across several files. That is still a good trade-off: the logic is tiny and the behaviour stays obvious. If the rules become more complex later, extracting a shared getTagCounts() helper would be the next clean-up step.

The weighted cloud on the blog archive

The weighted cloud lives on the blog archive: /blog and the paginated /blog/page/[page] pages both render the same component.

1
---
2
import BlogTagCloud from "../../components/BlogTagCloud.astro";
3
// ...
4
---
5

6
<BlogTagCloud />

Inside BlogTagCloud.astro, counts are converted into three visual tiers:

1
function tier(count: number): number {
2
  if (maxCount === minCount) return 2;
3
  const ratio = (count - minCount) / (maxCount - minCount);
4
  if (ratio >= 0.66) return 3;
5
  if (ratio >= 0.33) return 2;
6
  return 1;
7
}

Those tiers map to modifier classes such as tag-cloud__pill--tier-1, tag-cloud__pill--tier-2, and tag-cloud__pill--tier-3. A stepped system is deliberate here. Continuous scaling works well on the more expressive /tags page, but in a compact cloud of pill links it creates visual noise faster than it adds meaning.

Each pill also includes a small count badge, so someone hovering or scanning the cloud sees both the qualitative weight and the exact number. An “All topics” link pushes people from the compact archive cloud into the more detailed /tags overview.

The concentric ring layout on `/tags`

The /tags page is the more exploratory view. It combines two separate signals:

Font size scales continuously with tag frequency.
Tags are placed on concentric rings, with the most common topic in the centre and less common topics pushed outward.

The scaling and ring layout are both calculated at build time in the page frontmatter:

1
const MIN_REM = 1.1;
2
const MAX_REM = 4;
3

4
function scale(count: number): number {
5
  if (maxCount === minCount) return (MIN_REM + MAX_REM) / 2;
6
  return (
7
    MIN_REM + ((count - minCount) / (maxCount - minCount)) * (MAX_REM - MIN_REM)
8
  );
9
}
10

11
const ringConfig = [
12
  { radiusPct: 0, max: 1, startDeg: 0 },
13
  { radiusPct: 18, max: 4, startDeg: -90 },
14
  { radiusPct: 35, max: 7, startDeg: -50 },
15
  { radiusPct: 48, max: 12, startDeg: 10 },
16
];

After sorting tags by count descending, the page fills the rings from the inside out and converts each ring slot into percentage coordinates:

1
const angleDeg = radiusPct === 0 ? 0 : startDeg + (360 * i) / items.length;
2
const rad = (angleDeg * Math.PI) / 180;
3
const x = radiusPct === 0 ? 50 : 50 + radiusPct * Math.cos(rad);
4
const y = radiusPct === 0 ? 50 : 50 + radiusPct * Math.sin(rad);

That produces an SVG-like layout without SVG. Each tag is still a normal anchor, just absolutely positioned inside a relative container.

The accessibility model matters here too. The circular cloud is decorative and marked aria-hidden, while a plain list remains in the accessibility tree and is also the visual fallback on small screens. The fallback list is shuffled with a seeded function so it does not read as a rigid alphabetical index, but it stays deterministic across builds.

Tag archive pages

Each topic gets a clean first-page URL at /tags/[tag] and subsequent archive pages at /tags/[tag]/2, /tags/[tag]/3, and so on.

Rather than using Astro’s paginate() helper, the current implementation keeps two route files:

src/pages/tags/[tag]/index.astro handles page 1.
src/pages/tags/[tag]/[page].astro emits pages 2 and above.

The second file builds its paths manually:

1
export async function getStaticPaths() {
2
  const PAGE_SIZE = 9;
3
  const allPosts = (await getCollection("posts")).filter(isPublished);
4
  const tagMap = new Map<string, typeof allPosts>();
5

6
  for (const post of allPosts) {
7
    for (const tag of post.data.tags) {
8
      const slug = tagSlug(tag);
9
      if (!tagMap.has(slug)) tagMap.set(slug, []);
10
      tagMap.get(slug)!.push(post);
11
    }
12
  }
13

14
  const paths: object[] = [];
15
  for (const [slug, posts] of tagMap.entries()) {
16
    const totalPages = Math.ceil(posts.length / PAGE_SIZE);
17
    const label = posts[0].data.tags.find((t) => tagSlug(t) === slug) ?? slug;
18

19
    for (let pageNum = 2; pageNum <= totalPages; pageNum++) {
20
      paths.push({
21
        params: { tag: slug, page: String(pageNum) },
22
        props: { label },
23
      });
24
    }
25
  }
26

27
  return paths;
28
}

Routes use slugs, but page heroes should still display the human-readable tag text. Looking up the original label from the first matching post preserves spaces and casing without a separate lookup table.

Both route files sort posts newest first and share the same PAGE_SIZE = 9, so pagination behaves consistently across every topic.

TagsSidebar.astro is the compact version of the same system. It keeps the same counting and sorting pattern, but renders a simple vertical list with count badges rather than a cloud:

1
const tags = [...tagCounts.entries()]
2
  .sort(([, a], [, b]) => b - a)
3
  .map(([tag, count]) => ({ tag, count, slug: tagSlug(tag) }));

The sidebar only matters because the post layout mounts it alongside the table of contents and share controls:

1
import TagsSidebar from "../components/TagsSidebar.astro";
2

3
<aside class="post__sidebar" aria-label="Post sidebar">
4
  {/* other sidebar blocks */}
5
  <TagsSidebar />
6
</aside>

That keeps topic browsing available even when someone lands deep on an individual article. The UI copy uses “topics” in the reader-facing labels, but the routes stay under /tags, which keeps the underlying implementation short and stable.

Pulling the system together

The interesting part of this tag system is not any single surface. It is the fact that every surface starts from the same visible post set and uses the same slug transform. Once those two rules are stable, the same dataset can show up as weighted pills, a ring cloud, paginated archives, or a sidebar list without the site disagreeing with itself.

Added 23 April 2026

Improving the tag pages

A comment from Fyodor after this post was first published put it directly:

Now try to add description to each tag so that a tag page wouldn’t look that generically bland, huh?

Fair point. I went ahead and added four improvements to address exactly that.

Tag descriptions

A tagDescriptions map in src/utils/tags.ts keys a short description to each tag slug:

1
export const tagDescriptions: Record<string, string> = {
2
  astro: "Everything about building with Astro: content collections, islands architecture, SSG, and the surrounding ecosystem.",
3
  engineering: "Software engineering practice — architecture, trade-offs, and the thinking behind building things well.",
4
  // ...
5
};

The full map covering all current tags is in the code listings at the end of this post.

The tag archive page reads the current slug and falls back gracefully if no description exists:

1
const description = tagDescriptions[tag];

That value then drives the <meta> description, the hero subtitle, and the panel copy. One source, three uses. New tags that lack an entry get the old generic fallback, so nothing breaks.

Featured post highlight

The most recent post was buried in the grid with no visual prominence. The fix pulls it out entirely and renders it as a full-width two-column card above the grid:

1
const featuredPost = allTagPosts[0];
2
const remainingPosts = allTagPosts.slice(1);
3
const totalPages = Math.ceil(remainingPosts.length / PAGE_SIZE);
4
const posts = remainingPosts.slice(0, PAGE_SIZE);

The featured card shows the cover image on the left at desktop size with the title, description, and a read CTA on the right. totalPages is derived from remainingPosts, not allTagPosts, so pagination stays honest.

Between the featured card and the grid, a compact pill row links to up to five related tags, specifically ones that most frequently co-occur with the current one:

1
const relatedTagCounts = new Map<string, number>();
2
for (const post of allTagPosts) {
3
  for (const t of post.data.tags) {
4
    const s = tagSlug(t);
5
    if (s !== tag) relatedTagCounts.set(s, (relatedTagCounts.get(s) ?? 0) + 1);
6
  }
7
}
8
const relatedTags = [...relatedTagCounts.entries()]
9
  .sort((a, b) => b[1] - a[1])
10
  .slice(0, 5)
11
  .map(([slug]) => ({
12
    slug,
13
    label: allTagPosts.flatMap((p) => p.data.tags).find((t) => tagSlug(t) === slug) ?? slug,
14
  }));

This runs entirely at build time, with no JavaScript in the browser.

Stats bar

Inside the topic overview panel, a <dl> shows three facts: post count, average reading time per post, and total reading time across the whole archive.

1
const totalWords = allTagPosts.reduce(
2
  (acc, p) => acc + (p.body ? readingTime(p.body).words : 0),
3
  0,
4
);
5
const totalReadMinutes = Math.ceil(totalWords / 200);
6
const avgReadMinutes = allTagPosts.length > 0
7
  ? Math.round(totalReadMinutes / allTagPosts.length)
8
  : 0;

The 200 wpm divisor is deliberately conservative: it errs on the side of not under-promising. The stat gives a quick sense of how deep the archive goes before committing to reading any of it.

Beyond the foundations

All four improvements build on the same two rules without touching them. The slug helper and publication filter stay unchanged. What changes is only what each tag page does with the data once it has it.

That is a useful sign. When enhancements layer on top without revisiting the core logic, the foundation was right.

Full code listings

If you want to inspect the finished implementation end to end, expand the listings below. These are the complete files that make up the tag system itself. The shared publication helper lives in src/utils/drafts.ts and is reused across the rest of the site too.

1
export function tagSlug(tag: string): string {
2
  return tag
3
    .toLowerCase()
4
    .replace(/\s+/g, "-")
5
    .replace(/[^a-z0-9-]/g, "");
6
}
7

8
export const tagDescriptions: Record<string, string> = {
9
  analytics: "Tracking, measuring, and making sense of how people use the web — from basic page views to real user metrics.",
10
  astro: "Everything about building with Astro: content collections, islands architecture, SSG, and the surrounding ecosystem.",
11
  automation: "Scripts, workflows, and tooling that take the repetitive work off your plate.",
12
  blogging: "The craft and mechanics of running a blog — structure, workflow, tooling, and keeping the writing habit going.",
13
  devto: "Cross-posting to DEV.to, syndication strategies, and making the most of the platform.",
14
  dotfiles: "Shell configs, editor settings, and the art of making a new machine feel like home.",
15
  engineering: "Software engineering practice — architecture, trade-offs, and the thinking behind building things well.",
16
  frontend: "HTML, CSS, JavaScript, and everything that shapes what users actually see and interact with.",
17
  "learning-in-public": "Writing and sharing while you're still figuring things out — the messy, honest, valuable kind.",
18
  meta: "Posts about the blog itself: how it was built, why decisions were made, and what's changed.",
19
  netlify: "Deploying, hosting, and extending sites with Netlify — functions, forms, edge, and scheduled builds.",
20
  tooling: "Developer tools that sharpen the workflow: linters, formatters, bundlers, and the rest.",
21
  tutorial: "Step-by-step guides with working code, aimed at getting you from zero to done.",
22
  "web-development": "The broader practice of building for the web — spanning frontend, backend, and everything in between.",
23
  writing: "Reflections on writing itself: finding a voice, staying consistent, and communicating clearly.",
24
};

1
---
2
import { getCollection } from "astro:content";
3
import { isPublished } from "../utils/drafts";
4
import { tagSlug } from "../utils/tags";
5

6
const allPosts = (await getCollection("posts")).filter(isPublished);
7

8
const tagCounts = new Map<string, number>();
9
for (const post of allPosts) {
10
  for (const tag of post.data.tags) {
11
    tagCounts.set(tag, (tagCounts.get(tag) ?? 0) + 1);
12
  }
13
}
14

15
const counts = [...tagCounts.values()];
16
const minCount = Math.min(...counts);
17
const maxCount = Math.max(...counts);
18

19
function tier(count: number): number {
20
  if (maxCount === minCount) return 2;
21
  const ratio = (count - minCount) / (maxCount - minCount);
22
  if (ratio >= 0.66) return 3;
23
  if (ratio >= 0.33) return 2;
24
  return 1;
25
}
26

27
const tags = [...tagCounts.entries()]
28
  .sort(([, a], [, b]) => b - a)
29
  .map(([tag, count]) => ({
30
    tag,
31
    count,
32
    slug: tagSlug(tag),
33
    tier: tier(count),
34
  }));
35
---
36

37
<section class="tag-cloud stack-space" aria-labelledby="tag-cloud-heading">
38
  <div class="container is-max-desktop">
39
    <div class="tag-cloud__panel page-panel">
40
      <div class="tag-cloud__header">
41
        <div class="tag-cloud__intro">
42
          <p class="section-label">Topics</p>
43
          <h2 class="tag-cloud__title" id="tag-cloud-heading">
44
            Browse by topic
45
          </h2>
46
          <p class="tag-cloud__description">
47
            Jump straight into the subjects you care about without paging
48
            through the full archive first.
49
          </p>
50
        </div>
51
        <a
52
          href="/tags"
53
          class="tag-cloud__all-link"
54
          aria-label="View all topics"
55
        >
56
          All topics &rarr;
57
        </a>
58
      </div>
59
      <ul class="tag-cloud__list" role="list">
60
        {
61
          tags.map(({ tag, count, slug, tier }) => (
62
            <li>
63
              <a
64
                href={`/tags/${slug}`}
65
                class={`tag-cloud__pill tag-cloud__pill--tier-${tier}`}
66
                aria-label={`${tag} — ${count} post${count === 1 ? "" : "s"}`}
67
              >
68
                {tag}
69
                <span class="tag-cloud__count" aria-hidden="true">
70
                  {count}
71
                </span>
72
              </a>
73
            </li>
74
          ))
75
        }
76
      </ul>
77
    </div>
78
  </div>
79
</section>
80

81
<style lang="scss">
82
  .tag-cloud {
83
    padding: 0 1.5rem;
84
  }
85

86
  .tag-cloud__panel {
87
    position: relative;
88
    overflow: hidden;
89
    padding: clamp(1.75rem, 3.5vw, 2.35rem);
90
    background:
91
      radial-gradient(
92
        circle at top right,
93
        color-mix(in srgb, var(--accent-secondary) 14%, transparent) 0%,
94
        transparent 34%
95
      ),
96
      radial-gradient(
97
        circle at left bottom,
98
        var(--accent-primary-alpha-08) 0%,
99
        transparent 30%
100
      ),
101
      linear-gradient(
102
        145deg,
103
        color-mix(
104
          in srgb,
105
          var(--surface-page) 88%,
106
          var(--accent-secondary) 12%
107
        ),
108
        var(--surface-elevated)
109
      );
110
  }
111

112
  .tag-cloud__header {
113
    display: flex;
114
    align-items: flex-start;
115
    justify-content: space-between;
116
    margin-bottom: 1.75rem;
117
    gap: 1rem;
118

119
    @media (max-width: 639px) {
120
      flex-direction: column;
121
      align-items: flex-start;
122
    }
123
  }
124

125
  .tag-cloud__intro {
126
    min-width: 0;
127
  }
128

129
  .tag-cloud__title {
130
    margin: 0;
131
    font-family: "Barlow Condensed", sans-serif;
132
    font-size: clamp(1.8rem, 4vw, 2.5rem);
133
    line-height: 1.05;
134
    text-transform: uppercase;
135
    color: var(--text-primary);
136
  }
137

138
  .tag-cloud__description {
139
    margin: 0.5rem 0 0;
140
    max-width: 48ch;
141
    line-height: 1.65;
142
    color: var(--text-muted);
143
  }
144

145
  .tag-cloud__all-link {
146
    display: inline-flex;
147
    align-items: center;
148
    justify-content: center;
149
    min-height: 2.85rem;
150
    padding: 0.75rem 1.05rem;
151
    border: 1px solid
152
      color-mix(in srgb, var(--accent-secondary) 20%, transparent);
153
    border-radius: var(--radius-pill);
154
    background: color-mix(
155
      in srgb,
156
      var(--accent-secondary) 9%,
157
      var(--surface-elevated)
158
    );
159
    font-family: "Barlow Condensed", sans-serif;
160
    font-size: 0.75rem;
161
    font-weight: 700;
162
    text-transform: uppercase;
163
    letter-spacing: 0.08em;
164
    color: var(--text-muted);
165
    text-decoration: none;
166
    transition:
167
      color 0.15s ease,
168
      border-color 0.15s ease,
169
      transform 0.15s ease;
170

171
    &:hover {
172
      color: var(--accent-secondary);
173
      border-color: var(--accent-secondary-alpha-28);
174
      transform: translateY(-1px);
175
    }
176

177
    @media (min-width: 640px) {
178
      align-self: center;
179
    }
180
  }
181

182
  .tag-cloud__list {
183
    list-style: none;
184
    margin: 0;
185
    padding: 0;
186
    display: flex;
187
    flex-wrap: wrap;
188
    gap: 0.75rem;
189
    align-items: center;
190
  }
191

192
  .tag-cloud__pill {
193
    display: inline-flex;
194
    align-items: center;
195
    gap: 0.4rem;
196
    text-decoration: none;
197
    font-family: "Barlow Condensed", sans-serif;
198
    font-weight: 700;
199
    text-transform: uppercase;
200
    letter-spacing: 0.06em;
201
    border: 1.5px solid var(--border-subtle);
202
    border-radius: var(--radius-pill);
203
    color: var(--text-muted);
204
    background-color: color-mix(
205
      in srgb,
206
      var(--surface-elevated) 78%,
207
      transparent
208
    );
209
    box-shadow: inset 0 1px 0 var(--text-on-strong-alpha-45);
210
    transition:
211
      color 0.15s ease,
212
      border-color 0.15s ease,
213
      background-color 0.15s ease,
214
      transform 0.15s ease;
215

216
    &:hover {
217
      color: var(--accent-secondary);
218
      border-color: var(--accent-secondary-alpha-26);
219
      background-color: color-mix(
220
        in srgb,
221
        var(--accent-secondary) 9%,
222
        var(--surface-elevated)
223
      );
224
      transform: translateY(-1px);
225
    }
226

227
    &--tier-1 {
228
      font-size: 0.74rem;
229
      padding: 0.3rem 0.6rem;
230
    }
231

232
    &--tier-2 {
233
      font-size: 0.9rem;
234
      padding: 0.35rem 0.72rem;
235
    }
236

237
    &--tier-3 {
238
      font-size: 1.04rem;
239
      padding: 0.42rem 0.82rem;
240
      border-width: 2px;
241
      color: var(--text-primary);
242
      border-color: var(--accent-secondary-alpha-18);
243
    }
244
  }
245

246
  .tag-cloud__count {
247
    font-size: 0.65em;
248
    font-weight: 700;
249
    color: var(--accent-secondary);
250
    background-color: color-mix(
251
      in srgb,
252
      var(--accent-secondary) 12%,
253
      transparent
254
    );
255
    padding: 0.05rem 0.35rem;
256
    border-radius: var(--radius-pill);
257
    transition:
258
      background-color 0.15s ease,
259
      color 0.15s ease;
260

261
    .tag-cloud__pill:hover & {
262
      background-color: var(--accent-secondary-alpha-16);
263
      color: var(--accent-secondary);
264
    }
265
  }
266
</style>

1
---
2
import { getCollection } from "astro:content";
3
import { isPublished } from "../utils/drafts";
4
import { tagSlug } from "../utils/tags";
5

6
const allPosts = (await getCollection("posts")).filter(isPublished);
7

8
const tagCounts = new Map<string, number>();
9
for (const post of allPosts) {
10
  for (const tag of post.data.tags) {
11
    tagCounts.set(tag, (tagCounts.get(tag) ?? 0) + 1);
12
  }
13
}
14

15
const tags = [...tagCounts.entries()]
16
  .sort(([, a], [, b]) => b - a)
17
  .map(([tag, count]) => ({ tag, count, slug: tagSlug(tag) }));
18
---
19

20
<nav class="tags-sidebar" aria-labelledby="tags-sidebar-heading">
21
  <p class="tags-sidebar__heading" id="tags-sidebar-heading">Browse topics</p>
22
  <ul class="tags-sidebar__list" role="list">
23
    {
24
      tags.map(({ tag, count, slug }) => (
25
        <li>
26
          <a href={`/tags/${slug}`} class="tags-sidebar__tag">
27
            <span class="tags-sidebar__name">{tag}</span>
28
            <span
29
              class="tags-sidebar__count"
30
              aria-label={`${count} post${count === 1 ? "" : "s"}`}
31
            >
32
              {count}
33
            </span>
34
          </a>
35
        </li>
36
      ))
37
    }
38
  </ul>
39
  <a href="/tags" class="tags-sidebar__all">All tags →</a>
40
</nav>
41

42
<style lang="scss">
43
  .tags-sidebar {
44
    margin-top: 2rem;
45
    margin-bottom: 2rem;
46
  }
47

48
  .tags-sidebar__heading {
49
    font-family: "Barlow Condensed", sans-serif;
50
    font-size: 0.75rem;
51
    font-weight: 700;
52
    text-transform: uppercase;
53
    letter-spacing: 0.1em;
54
    color: var(--accent-primary);
55
    padding-top: 0.75rem;
56
    border-top: 2px solid var(--accent-primary);
57
    margin-bottom: 0.75rem;
58
  }
59

60
  .tags-sidebar__list {
61
    list-style: none;
62
    margin: 0;
63
    padding: 0;
64
    display: flex;
65
    flex-direction: column;
66
    gap: 0;
67
  }
68

69
  .tags-sidebar__tag {
70
    display: flex;
71
    align-items: center;
72
    justify-content: space-between;
73
    gap: 0.5rem;
74
    padding: 0.45rem 0;
75
    border-bottom: 1px solid var(--border-subtle);
76
    text-decoration: none;
77
    color: var(--text-muted);
78
    transition:
79
      color 0.15s ease,
80
      padding-left 0.15s ease;
81

82
    &:hover {
83
      color: var(--accent-primary);
84
      padding-left: 0.35rem;
85
    }
86
  }
87

88
  .tags-sidebar__name {
89
    font-family: "Barlow Condensed", sans-serif;
90
    font-size: 0.875rem;
91
    font-weight: 700;
92
    text-transform: uppercase;
93
    letter-spacing: 0.06em;
94
  }
95

96
  .tags-sidebar__count {
97
    font-family: "Barlow Condensed", sans-serif;
98
    font-size: 0.7rem;
99
    font-weight: 700;
100
    color: var(--text-muted);
101
    background-color: var(--border-subtle);
102
    border-radius: var(--radius-tight);
103
    padding: 0.1rem 0.4rem;
104
    min-width: 1.4rem;
105
    text-align: center;
106
    transition:
107
      background-color 0.15s ease,
108
      color 0.15s ease;
109

110
    .tags-sidebar__tag:hover & {
111
      background-color: rgba(var(--accent-primary-rgb), 0.12);
112
      color: var(--accent-primary);
113
    }
114
  }
115

116
  .tags-sidebar__all {
117
    display: block;
118
    margin-top: 1rem;
119
    font-family: "Barlow Condensed", sans-serif;
120
    font-size: 0.75rem;
121
    font-weight: 700;
122
    text-transform: uppercase;
123
    letter-spacing: 0.1em;
124
    color: var(--text-muted);
125
    text-decoration: none;
126
    transition: color 0.15s ease;
127

128
    &:hover {
129
      color: var(--accent-primary);
130
    }
131
  }
132
</style>

1
---
2
import { getCollection } from "astro:content";
3
import { isPublished } from "../../utils/drafts";
4
import BaseLayout from "../../layouts/BaseLayout.astro";
5
import PageHero from "../../components/PageHero.astro";
6
import MailingListCTA from "../../components/MailingListCTA.astro";
7
import { tagSlug } from "../../utils/tags";
8

9
const allPosts = (await getCollection("posts")).filter(isPublished);
10

11
const tagCounts = new Map<string, number>();
12
for (const post of allPosts) {
13
  for (const tag of post.data.tags) {
14
    tagCounts.set(tag, (tagCounts.get(tag) ?? 0) + 1);
15
  }
16
}
17

18
const counts = [...tagCounts.values()];
19
const minCount = Math.min(...counts);
20
const maxCount = Math.max(...counts);
21

22
const MIN_REM = 1.1;
23
const MAX_REM = 4;
24

25
function scale(count: number): number {
26
  if (maxCount === minCount) return (MIN_REM + MAX_REM) / 2;
27
  return (
28
    MIN_REM + ((count - minCount) / (maxCount - minCount)) * (MAX_REM - MIN_REM)
29
  );
30
}
31

32
const sorted = [...tagCounts.entries()]
33
  .sort(([, a], [, b]) => b - a)
34
  .map(([tag, count]) => ({
35
    tag,
36
    count,
37
    slug: tagSlug(tag),
38
    fontSize: scale(count),
39
  }));
40

41
const ringConfig = [
42
  { radiusPct: 0, max: 1, startDeg: 0 },
43
  { radiusPct: 18, max: 4, startDeg: -90 },
44
  { radiusPct: 35, max: 7, startDeg: -50 },
45
  { radiusPct: 48, max: 12, startDeg: 10 },
46
];
47

48
type TagPos = {
49
  tag: string;
50
  count: number;
51
  slug: string;
52
  fontSize: number;
53
  x: number;
54
  y: number;
55
  ringIdx: number;
56
};
57

58
const positioned: TagPos[] = [];
59
let si = 0;
60

61
for (let ringIdx = 0; ringIdx < ringConfig.length; ringIdx++) {
62
  if (si >= sorted.length) break;
63
  const { radiusPct, max, startDeg } = ringConfig[ringIdx];
64
  const items = sorted.slice(si, si + max);
65
  si += items.length;
66
  items.forEach((item, i) => {
67
    const angleDeg = radiusPct === 0 ? 0 : startDeg + (360 * i) / items.length;
68
    const rad = (angleDeg * Math.PI) / 180;
69
    const x = radiusPct === 0 ? 50 : 50 + radiusPct * Math.cos(rad);
70
    const y = radiusPct === 0 ? 50 : 50 + radiusPct * Math.sin(rad);
71
    positioned.push({ ...item, x, y, ringIdx });
72
  });
73
}
74

75
function seededShuffle<T>(arr: T[]): T[] {
76
  const out = [...arr];
77
  let seed = 42;
78
  const rand = () => {
79
    seed = (seed * 1664525 + 1013904223) & 0xffffffff;
80
    return (seed >>> 0) / 0xffffffff;
81
  };
82
  for (let i = out.length - 1; i > 0; i--) {
83
    const j = Math.floor(rand() * (i + 1));
84
    [out[i], out[j]] = [out[j], out[i]];
85
  }
86
  return out;
87
}
88

89
const shuffled = seededShuffle(sorted);
90
const totalTags = sorted.length;
91
const totalPosts = allPosts.length;
92

93
const ringStyle = (ringIdx: number) => {
94
  if (ringIdx === 0) return "color: var(--accent-primary); opacity: 1";
95
  if (ringIdx === 1) return "opacity: 1";
96
  if (ringIdx === 2) return "opacity: 0.85";
97
  return "opacity: 0.7";
98
};
99
---
100

101
<BaseLayout
102
  pageTitle="Tags — Sourcier"
103
  description="Browse all topics and tags from the Sourcier blog."
104
>
105
  <PageHero
106
    kicker="Browse"
107
    title="Tags"
108
    subtitle="Browse every topic covered on the blog."
109
  />
110

111
  <section
112
    class="tag-summary flow-section flow-section--loose"
113
    aria-labelledby="tag-summary-heading"
114
  >
115
    <div class="container is-max-desktop">
116
      <div class="page-panel tag-summary__panel">
117
        <div class="tag-summary__copy">
118
          <p class="tag-summary__eyebrow">Topic map</p>
119
          <h2 class="tag-summary__title" id="tag-summary-heading">
120
            Explore the writing by theme
121
          </h2>
122
          <p class="tag-summary__text">
123
            Jump straight into the ideas that show up most often across the
124
            blog, or skim the full map below if you want to browse more broadly.
125
          </p>
126
        </div>
127
        <ul class="tag-summary__stats" role="list">
128
          <li class="tag-summary__stat">
129
            <span class="tag-summary__label">Published</span>
130
            <span class="tag-summary__value">{totalPosts}</span>
131
          </li>
132
          <li class="tag-summary__stat">
133
            <span class="tag-summary__label">Topics</span>
134
            <span class="tag-summary__value">{totalTags}</span>
135
          </li>
136
        </ul>
137
      </div>
138
    </div>
139
  </section>
140

141
  <section class="section cloud-section flow-section">
142
    <div class="container is-max-desktop">
143
      <div class="cloud-surface page-panel">
144
        <div class="cloud-intro">
145
          <p class="cloud-intro__text">
146
            Each topic links to a collection of related posts. Larger tags mean
147
            I write about that area more often, so the subjects I return to most
148
            sit closer to the centre.
149
          </p>
150
          <div class="cloud-legend" aria-label="Size guide">
151
            <span class="cloud-legend__example cloud-legend__example--sm"
152
              >fewer posts</span
153
            >
154
            <span class="cloud-legend__arrow" aria-hidden="true">→</span>
155
            <span class="cloud-legend__example cloud-legend__example--lg"
156
              >more posts</span
157
            >
158
          </div>
159
        </div>
160

161
        <div class="cloud-circle-wrap" aria-hidden="true">
162
          <div class="cloud-circle">
163
            {
164
              positioned.map(({ tag, slug, fontSize, x, y, ringIdx }) => (
165
                <a
166
                  href={`/tags/${slug}`}
167
                  class="cloud-circle__tag"
168
                  style={`left:${x.toFixed(2)}%;top:${y.toFixed(2)}%;font-size:${fontSize.toFixed(3)}rem;${ringStyle(ringIdx)}`}
169
                  tabindex="-1"
170
                >
171
                  {tag}
172
                </a>
173
              ))
174
            }
175
          </div>
176
        </div>
177

178
        <ul class="cloud-list" role="list" aria-label="Tag cloud">
179
          {
180
            shuffled.map(({ tag, count, slug, fontSize }) => (
181
              <li>
182
                <a
183
                  href={`/tags/${slug}`}
184
                  class="cloud-list__tag"
185
                  style={`font-size:${fontSize.toFixed(3)}rem`}
186
                  aria-label={`${tag} — ${count} post${count === 1 ? "" : "s"}`}
187
                >
188
                  {tag}
189
                </a>
190
              </li>
191
            ))
192
          }
193
        </ul>
194
      </div>
195
    </div>
196
  </section>
197

198
  <MailingListCTA />
199
</BaseLayout>
200

201
<style lang="scss">
202
  .tag-summary {
203
    padding: 0 1.5rem;
204
  }
205

206
  .tag-summary__panel {
207
    display: grid;
208
    gap: 1.25rem;
209
    border-top-color: var(--accent-secondary);
210
    background:
211
      radial-gradient(
212
        circle at top right,
213
        color-mix(in srgb, var(--accent-secondary) 14%, transparent) 0%,
214
        transparent 34%
215
      ),
216
      linear-gradient(
217
        150deg,
218
        color-mix(in srgb, var(--accent-secondary) 8%, var(--surface-elevated))
219
          0%,
220
        var(--surface-elevated) 62%
221
      ),
222
      var(--surface-elevated);
223

224
    @media (min-width: 768px) {
225
      grid-template-columns: minmax(0, 1.5fr) auto;
226
      gap: 2rem;
227
      align-items: center;
228
    }
229
  }
230

231
  .tag-summary__eyebrow {
232
    margin: 0 0 0.65rem;
233
    font-family: "Barlow Condensed", sans-serif;
234
    font-size: 0.8rem;
235
    font-weight: 700;
236
    letter-spacing: 0.1em;
237
    text-transform: uppercase;
238
    color: var(--accent-secondary);
239
  }
240

241
  .tag-summary__title {
242
    margin: 0;
243
    font-family: "Barlow Condensed", sans-serif;
244
    font-size: clamp(2rem, 4vw, 2.8rem);
245
    line-height: 0.98;
246
    text-transform: uppercase;
247
    color: var(--text-primary);
248
  }
249

250
  .tag-summary__text {
251
    margin: 0.85rem 0 0;
252
    max-width: 58ch;
253
    line-height: 1.7;
254
    color: var(--text-muted);
255
  }
256

257
  .tag-summary__stats {
258
    list-style: none;
259
    margin: 0;
260
    padding: 0;
261
    display: grid;
262
    gap: 0.75rem;
263
  }
264

265
  .tag-summary__stat {
266
    display: grid;
267
    gap: 0.35rem;
268
    min-width: 9rem;
269
    padding: 1rem 1.1rem;
270
    border: 1px solid var(--accent-secondary-alpha-16);
271
    border-radius: var(--radius-soft);
272
    background: color-mix(
273
      in srgb,
274
      var(--accent-secondary) 8%,
275
      var(--surface-elevated)
276
    );
277
  }
278

279
  .tag-summary__label {
280
    font-size: 0.72rem;
281
    font-weight: 700;
282
    letter-spacing: 0.12em;
283
    text-transform: uppercase;
284
    color: var(--text-muted);
285
  }
286

287
  .tag-summary__value {
288
    font-family: "Barlow Condensed", sans-serif;
289
    font-size: clamp(1.55rem, 4vw, 2.1rem);
290
    font-weight: 800;
291
    line-height: 1;
292
    text-transform: uppercase;
293
    color: var(--text-primary);
294
  }
295

296
  .cloud-section {
297
    padding-top: 0;
298
    padding-bottom: 0;
299
  }
300

301
  .cloud-surface {
302
    overflow: hidden;
303
    padding: clamp(1.5rem, 3vw, 2rem);
304
    background:
305
      radial-gradient(
306
        circle at top right,
307
        color-mix(in srgb, var(--accent-secondary) 10%, transparent) 0%,
308
        transparent 34%
309
      ),
310
      linear-gradient(
311
        150deg,
312
        color-mix(in srgb, var(--accent-primary) 3%, var(--surface-elevated)) 0%,
313
        var(--surface-elevated) 66%
314
      ),
315
      var(--surface-elevated);
316
  }
317

318
  .cloud-intro {
319
    display: flex;
320
    flex-direction: column;
321
    gap: 1.5rem;
322
    margin-bottom: 2.5rem;
323
    padding-bottom: 2rem;
324
    border-bottom: 1px solid var(--border-subtle);
325

326
    @media (min-width: 768px) {
327
      flex-direction: row;
328
      align-items: flex-start;
329
      justify-content: space-between;
330
      gap: 4rem;
331
    }
332
  }
333

334
  .cloud-intro__text {
335
    margin: 0;
336
    font-size: 1rem;
337
    line-height: 1.75;
338
    color: var(--text-muted);
339
    max-width: 52ch;
340
  }
341

342
  .cloud-legend {
343
    flex-shrink: 0;
344
    display: flex;
345
    align-items: center;
346
    gap: 1rem;
347
  }
348

349
  .cloud-legend__arrow {
350
    color: var(--accent-secondary);
351
    font-size: 1.25rem;
352
  }
353

354
  .cloud-legend__example {
355
    font-family: "Barlow Condensed", sans-serif;
356
    font-weight: 700;
357
    text-transform: uppercase;
358
    letter-spacing: 0.05em;
359
    color: var(--text-primary);
360
  }
361

362
  .cloud-legend__example--sm {
363
    font-size: 0.875rem;
364
    opacity: 0.45;
365
  }
366

367
  .cloud-legend__example--lg {
368
    font-size: 2rem;
369
    color: var(--accent-secondary);
370
  }
371

372
  .cloud-circle-wrap {
373
    display: none;
374
    justify-content: center;
375
    margin: 0.5rem 0 2rem;
376

377
    @media (min-width: 640px) {
378
      display: flex;
379
    }
380
  }
381

382
  .cloud-circle {
383
    position: relative;
384
    width: min(88vw, 580px);
385
    aspect-ratio: 1;
386

387
    &::before {
388
      content: "";
389
      position: absolute;
390
      inset: 0;
391
      border-radius: 50%;
392
      border: 1px solid var(--border-subtle);
393
      pointer-events: none;
394
    }
395

396
    &::after {
397
      content: "";
398
      position: absolute;
399
      inset: 22%;
400
      border-radius: 50%;
401
      border: 1px dashed var(--accent-secondary-alpha-18);
402
      pointer-events: none;
403
    }
404
  }
405

406
  .cloud-circle__tag {
407
    position: absolute;
408
    transform: translate(-50%, -50%) scale(1);
409
    font-family: "Barlow Condensed", sans-serif;
410
    font-weight: 700;
411
    text-transform: uppercase;
412
    letter-spacing: 0.04em;
413
    text-decoration: none;
414
    color: var(--text-primary);
415
    white-space: nowrap;
416
    transition:
417
      color 0.2s ease,
418
      opacity 0.2s ease,
419
      transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
420

421
    &:hover {
422
      color: var(--accent-secondary) !important;
423
      opacity: 1 !important;
424
      transform: translate(-50%, -50%) scale(1.18);
425
      z-index: 1;
426
    }
427
  }
428

429
  .cloud-circle:has(.cloud-circle__tag:hover) .cloud-circle__tag:not(:hover) {
430
    opacity: 0.15 !important;
431
    transform: translate(-50%, -50%) scale(0.95);
432
  }
433

434
  .cloud-list {
435
    display: flex;
436
    flex-wrap: wrap;
437
    justify-content: center;
438
    align-items: center;
439
    gap: 0.75rem 1.5rem;
440
    list-style: none;
441
    margin: 1rem 0;
442
    padding: 0;
443

444
    @media (min-width: 640px) {
445
      position: absolute;
446
      width: 1px;
447
      height: 1px;
448
      overflow: hidden;
449
      clip: rect(0 0 0 0);
450
      white-space: nowrap;
451
    }
452
  }
453

454
  .cloud-list__tag {
455
    font-family: "Barlow Condensed", sans-serif;
456
    font-weight: 700;
457
    text-transform: uppercase;
458
    letter-spacing: 0.04em;
459
    color: var(--text-primary);
460
    text-decoration: none;
461
    opacity: 0.75;
462
    white-space: nowrap;
463
    transition:
464
      color 0.15s ease,
465
      opacity 0.15s ease;
466

467
    &:hover {
468
      color: var(--accent-secondary);
469
      opacity: 1;
470
    }
471
  }
472
</style>

1
---
2
import { getCollection } from "astro:content";
3
import { isPublished } from "../../../utils/drafts";
4
import BaseLayout from "../../../layouts/BaseLayout.astro";
5
import PageHero from "../../../components/PageHero.astro";
6
import BlogGrid from "../../../components/BlogGrid.astro";
7
import MailingListCTA from "../../../components/MailingListCTA.astro";
8
import { tagSlug } from "../../../utils/tags";
9

10
export async function getStaticPaths() {
11
  const allPosts = (await getCollection("posts")).filter(isPublished);
12
  const tagMap = new Map<string, typeof allPosts>();
13
  for (const post of allPosts) {
14
    for (const tag of post.data.tags) {
15
      const slug = tagSlug(tag);
16
      if (!tagMap.has(slug)) tagMap.set(slug, []);
17
      tagMap.get(slug)!.push(post);
18
    }
19
  }
20
  return [...tagMap.entries()].map(([slug, posts]) => {
21
    const label = posts[0].data.tags.find((t) => tagSlug(t) === slug) ?? slug;
22
    return { params: { tag: slug }, props: { label } };
23
  });
24
}
25

26
const PAGE_SIZE = 9;
27
const { tag } = Astro.params;
28
const { label } = Astro.props;
29

30
const allTagPosts = (await getCollection("posts"))
31
  .filter(
32
    (post) =>
33
      isPublished(post) && post.data.tags.some((t) => tagSlug(t) === tag),
34
  )
35
  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
36

37
const totalPages = Math.ceil(allTagPosts.length / PAGE_SIZE);
38
const posts = allTagPosts.slice(0, PAGE_SIZE);
39
const nextUrl = totalPages > 1 ? `/tags/${tag}/2` : null;
40
const postCountLabel =
41
  allTagPosts.length === 1 ? "1 post" : `${allTagPosts.length} posts`;
42
---
43

44
<BaseLayout
45
  pageTitle={`${label} — Tags — Sourcier`}
46
  description={`Blog posts tagged with "${label}" on Sourcier.`}
47
>
48
  <PageHero
49
    kicker="Topic"
50
    title={label}
51
    subtitle={`Every published post tagged ${label}.`}
52
    crumbs={[
53
      { label: "Blog", href: "/blog" },
54
      { label: "Tags", href: "/tags" },
55
      { label },
56
    ]}
57
  />
58

59
  <section
60
    class="topic-overview flow-section flow-section--loose"
61
    aria-labelledby="topic-overview-heading"
62
  >
63
    <div class="container is-max-desktop">
64
      <div class="page-panel topic-overview__panel">
65
        <div class="topic-overview__copy">
66
          <p class="topic-overview__eyebrow">Topic archive</p>
67
          <h2 class="topic-overview__title" id="topic-overview-heading">
68
            {postCountLabel} about {label}
69
          </h2>
70
          <p class="topic-overview__text">
71
            This archive keeps every article filed under this topic in one
72
            place, newest first, so you can stay with one theme without jumping
73
            around the rest of the site.
74
          </p>
75
        </div>
76
        <div class="topic-overview__actions">
77
          <a href="/tags" class="topic-overview__link">All topics</a>
78
          <a
79
            href="/blog"
80
            class="topic-overview__link topic-overview__link--secondary"
81
          >
82
            Latest writing
83
          </a>
84
        </div>
85
      </div>
86
    </div>
87
  </section>
88

89
  <BlogGrid
90
    posts={posts}
91
    currentPage={1}
92
    totalPages={totalPages}
93
    prevUrl={null}
94
    nextUrl={nextUrl}
95
    paginationBase={`/tags/${tag}`}
96
    sectionLabel="Latest in this topic"
97
    sectionTitle={`Posts about ${label}`}
98
    sectionDescription={`Newest first${totalPages > 1 ? `, across ${totalPages} pages.` : "."}`}
99
  />
100

101
  <MailingListCTA />
102
</BaseLayout>
103

104
<style lang="scss">
105
  .topic-overview {
106
    padding: 0 1.5rem;
107
  }
108

109
  .topic-overview__panel {
110
    display: grid;
111
    gap: 1.25rem;
112
    border-top-color: var(--accent-secondary);
113
    background:
114
      radial-gradient(
115
        circle at top right,
116
        color-mix(in srgb, var(--accent-secondary) 14%, transparent) 0%,
117
        transparent 34%
118
      ),
119
      linear-gradient(
120
        150deg,
121
        color-mix(in srgb, var(--accent-secondary) 8%, var(--surface-elevated))
122
          0%,
123
        var(--surface-elevated) 62%
124
      ),
125
      var(--surface-elevated);
126

127
    @media (min-width: 768px) {
128
      grid-template-columns: minmax(0, 1.45fr) auto;
129
      gap: 2rem;
130
      align-items: center;
131
    }
132
  }
133

134
  .topic-overview__eyebrow {
135
    margin: 0 0 0.65rem;
136
    font-family: "Barlow Condensed", sans-serif;
137
    font-size: 0.8rem;
138
    font-weight: 700;
139
    letter-spacing: 0.1em;
140
    text-transform: uppercase;
141
    color: var(--accent-secondary);
142
  }
143

144
  .topic-overview__title {
145
    margin: 0;
146
    font-family: "Barlow Condensed", sans-serif;
147
    font-size: clamp(1.9rem, 4vw, 2.7rem);
148
    line-height: 0.98;
149
    text-transform: uppercase;
150
    color: var(--text-primary);
151
  }
152

153
  .topic-overview__text {
154
    margin: 0.85rem 0 0;
155
    max-width: 58ch;
156
    line-height: 1.7;
157
    color: var(--text-muted);
158
  }
159

160
  .topic-overview__actions {
161
    display: flex;
162
    flex-wrap: wrap;
163
    gap: 0.75rem;
164
  }
165

166
  .topic-overview__link {
167
    display: inline-flex;
168
    align-items: center;
169
    justify-content: center;
170
    min-height: 2.85rem;
171
    padding: 0.7rem 1rem;
172
    border: 1px solid var(--accent-secondary-alpha-18);
173
    border-radius: var(--radius-pill);
174
    background: color-mix(
175
      in srgb,
176
      var(--accent-secondary) 8%,
177
      var(--surface-elevated)
178
    );
179
    font-family: "Barlow Condensed", sans-serif;
180
    font-size: 0.85rem;
181
    font-weight: 700;
182
    letter-spacing: 0.08em;
183
    text-transform: uppercase;
184
    color: var(--accent-secondary);
185
    text-decoration: none;
186
    transition:
187
      border-color 0.15s ease,
188
      transform 0.15s ease;
189

190
    &:hover {
191
      border-color: var(--accent-secondary-alpha-32);
192
      transform: translateY(-1px);
193
    }
194
  }
195

196
  .topic-overview__link--secondary {
197
    border-color: var(--accent-primary-alpha-22);
198
    background: color-mix(
199
      in srgb,
200
      var(--accent-primary) 8%,
201
      var(--surface-elevated)
202
    );
203
    color: var(--accent-primary);
204
  }
205
</style>

1
---
2
import { getCollection } from "astro:content";
3
import { isPublished } from "../../../utils/drafts";
4
import BaseLayout from "../../../layouts/BaseLayout.astro";
5
import PageHero from "../../../components/PageHero.astro";
6
import BlogGrid from "../../../components/BlogGrid.astro";
7
import MailingListCTA from "../../../components/MailingListCTA.astro";
8
import { tagSlug } from "../../../utils/tags";
9

10
export async function getStaticPaths() {
11
  const PAGE_SIZE = 9;
12
  const allPosts = (await getCollection("posts")).filter(isPublished);
13
  const tagMap = new Map<string, typeof allPosts>();
14
  for (const post of allPosts) {
15
    for (const tag of post.data.tags) {
16
      const slug = tagSlug(tag);
17
      if (!tagMap.has(slug)) tagMap.set(slug, []);
18
      tagMap.get(slug)!.push(post);
19
    }
20
  }
21
  const paths: object[] = [];
22
  for (const [slug, posts] of tagMap.entries()) {
23
    const totalPages = Math.ceil(posts.length / PAGE_SIZE);
24
    const label = posts[0].data.tags.find((t) => tagSlug(t) === slug) ?? slug;
25
    for (let pageNum = 2; pageNum <= totalPages; pageNum++) {
26
      paths.push({
27
        params: { tag: slug, page: String(pageNum) },
28
        props: { label },
29
      });
30
    }
31
  }
32
  return paths;
33
}
34

35
const PAGE_SIZE = 9;
36
const { tag, page } = Astro.params;
37
const { label } = Astro.props;
38
const currentPage = Number(page);
39

40
const allTagPosts = (await getCollection("posts"))
41
  .filter(
42
    (post) =>
43
      isPublished(post) && post.data.tags.some((t) => tagSlug(t) === tag),
44
  )
45
  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
46

47
const totalPages = Math.ceil(allTagPosts.length / PAGE_SIZE);
48
const posts = allTagPosts.slice(
49
  (currentPage - 1) * PAGE_SIZE,
50
  currentPage * PAGE_SIZE,
51
);
52
const prevUrl =
53
  currentPage === 2 ? `/tags/${tag}` : `/tags/${tag}/${currentPage - 1}`;
54
const nextUrl =
55
  currentPage < totalPages ? `/tags/${tag}/${currentPage + 1}` : null;
56
const postCountLabel =
57
  allTagPosts.length === 1 ? "1 post" : `${allTagPosts.length} posts`;
58
---
59

60
<BaseLayout
61
  pageTitle={`${label} — Page ${currentPage} — Tags — Sourcier`}
62
  description={`Blog posts tagged with "${label}" on Sourcier — page ${currentPage}.`}
63
>
64
  <PageHero
65
    kicker="Topic"
66
    title={label}
67
    subtitle={`Every published post tagged ${label}.`}
68
    crumbs={[
69
      { label: "Blog", href: "/blog" },
70
      { label: "Tags", href: "/tags" },
71
      { label },
72
    ]}
73
  />
74

75
  <section
76
    class="topic-overview flow-section flow-section--loose"
77
    aria-labelledby="topic-overview-heading"
78
  >
79
    <div class="container is-max-desktop">
80
      <div class="page-panel topic-overview__panel">
81
        <div class="topic-overview__copy">
82
          <p class="topic-overview__eyebrow">Topic archive</p>
83
          <h2 class="topic-overview__title" id="topic-overview-heading">
84
            Page {currentPage} of {totalPages}
85
          </h2>
86
          <p class="topic-overview__text">
87
            {postCountLabel} filed under {label}. This page keeps you inside the
88
            same topic while you move through older entries in the archive.
89
          </p>
90
        </div>
91
        <div class="topic-overview__actions">
92
          <a href={`/tags/${tag}`} class="topic-overview__link">
93
            Topic overview
94
          </a>
95
          <a
96
            href="/blog"
97
            class="topic-overview__link topic-overview__link--secondary"
98
          >
99
            Latest writing
100
          </a>
101
        </div>
102
      </div>
103
    </div>
104
  </section>
105

106
  <BlogGrid
107
    posts={posts}
108
    currentPage={currentPage}
109
    totalPages={totalPages}
110
    prevUrl={prevUrl}
111
    nextUrl={nextUrl}
112
    paginationBase={`/tags/${tag}`}
113
    sectionLabel="Archive page"
114
    sectionTitle={`Posts on page ${currentPage}`}
115
    sectionDescription={`${postCountLabel} total in this topic archive.`}
116
  />
117

118
  <MailingListCTA />
119
</BaseLayout>
120

121
<style lang="scss">
122
  .topic-overview {
123
    padding: 0 1.5rem;
124
  }
125

126
  .topic-overview__panel {
127
    display: grid;
128
    gap: 1.25rem;
129
    border-top-color: var(--accent-secondary);
130
    background:
131
      radial-gradient(
132
        circle at top right,
133
        color-mix(in srgb, var(--accent-secondary) 14%, transparent) 0%,
134
        transparent 34%
135
      ),
136
      linear-gradient(
137
        150deg,
138
        color-mix(in srgb, var(--accent-secondary) 8%, var(--surface-elevated))
139
          0%,
140
        var(--surface-elevated) 62%
141
      ),
142
      var(--surface-elevated);
143

144
    @media (min-width: 768px) {
145
      grid-template-columns: minmax(0, 1.45fr) auto;
146
      gap: 2rem;
147
      align-items: center;
148
    }
149
  }
150

151
  .topic-overview__eyebrow {
152
    margin: 0 0 0.65rem;
153
    font-family: "Barlow Condensed", sans-serif;
154
    font-size: 0.8rem;
155
    font-weight: 700;
156
    letter-spacing: 0.1em;
157
    text-transform: uppercase;
158
    color: var(--accent-secondary);
159
  }
160

161
  .topic-overview__title {
162
    margin: 0;
163
    font-family: "Barlow Condensed", sans-serif;
164
    font-size: clamp(1.9rem, 4vw, 2.7rem);
165
    line-height: 0.98;
166
    text-transform: uppercase;
167
    color: var(--text-primary);
168
  }
169

170
  .topic-overview__text {
171
    margin: 0.85rem 0 0;
172
    max-width: 58ch;
173
    line-height: 1.7;
174
    color: var(--text-muted);
175
  }
176

177
  .topic-overview__actions {
178
    display: flex;
179
    flex-wrap: wrap;
180
    gap: 0.75rem;
181
  }
182

183
  .topic-overview__link {
184
    display: inline-flex;
185
    align-items: center;
186
    justify-content: center;
187
    min-height: 2.85rem;
188
    padding: 0.7rem 1rem;
189
    border: 1px solid var(--accent-secondary-alpha-18);
190
    border-radius: var(--radius-pill);
191
    background: color-mix(
192
      in srgb,
193
      var(--accent-secondary) 8%,
194
      var(--surface-elevated)
195
    );
196
    font-family: "Barlow Condensed", sans-serif;
197
    font-size: 0.85rem;
198
    font-weight: 700;
199
    letter-spacing: 0.08em;
200
    text-transform: uppercase;
201
    color: var(--accent-secondary);
202
    text-decoration: none;
203
    transition:
204
      border-color 0.15s ease,
205
      transform 0.15s ease;
206

207
    &:hover {
208
      border-color: var(--accent-secondary-alpha-32);
209
      transform: translateY(-1px);
210
    }
211
  }
212

213
  .topic-overview__link--secondary {
214
    border-color: var(--accent-primary-alpha-22);
215
    background: color-mix(
216
      in srgb,
217
      var(--accent-primary) 8%,
218
      var(--surface-elevated)
219
    );
220
    color: var(--accent-primary);
221
  }
222
</style>

You can browse the rest of the site code in the sourcier.uk repository.

Building a tag system in Astro

Slug normalisation

Publication-aware tag counts

The weighted cloud on the blog archive

The concentric ring layout on `/tags`

Tag archive pages

The sidebar browser

Pulling the system together

Improving the tag pages

Tag descriptions

Featured post highlight

Stats bar

Beyond the foundations

Full code listings

Need help raising the bar?

Comments

Leave a comment

Get practical engineering notes

Slug normalisation

Publication-aware tag counts

The weighted cloud on the blog archive

The concentric ring layout on /tags

Tag archive pages

The sidebar browser

Pulling the system together

Improving the tag pages

Tag descriptions

Featured post highlight

Related topics row

Stats bar

Beyond the foundations

Full code listings

Need help raising the bar?

Comments

Leave a comment

Get practical engineering notes

The concentric ring layout on `/tags`