Indeks Tag dan Halaman Tag

Penelusuran tag ditangani dua berkas yang bekerja terpisah. src/components/AllTags.astro menyusun daftar tag populer yang selalu tampil di sidebar, sedangkan src/pages/tags/[slug].astro menghasilkan satu halaman statis untuk setiap tag lewat getStaticPaths. Keduanya membaca collection tools dan menghitung tag sendiri-sendiri, tanpa modul bersama. Field tags sendiri hanya dideklarasikan sebagai z.array(z.string()) tanpa normalisasi, sehingga penulisan huruf besar-kecil dan spasi bergantung pada kontributor (src/content/config.ts:8¹). Aturan penulisan field itu dibahas di Format Berkas dan Aturan Kontribusi.

Pipeline agregasi di AllTags.astro

Komponen ini memuat seluruh entri lewat getCollection('tools'), meratakan obj.data.tags dengan flatMap, lalu menormalkan setiap elemen dengan trim().toLowerCase() (src/components/AllTags.astro:4-7²). Setelah itu ia menghitung kemunculan tiap tag, mengurutkan menurun, dan memotong hasilnya pada maxTags = 20 (src/components/AllTags.astro:16-27³).

graph TD
  A["getCollection('tools')"] --> B["allTags = flatMap(obj.data.tags)"]
  B --> C["trim + toLowerCase per index"]
  C --> D["tagCounts = reduce hitung kemunculan"]
  C --> E["uniqueTags = new Set(allTags)"]
  D --> F["sort descending by count"]
  F --> G["slice 0 sampai maxTags 20"]
  G --> H["tags: 20 nama tag"]
  H --> I["anchor href /tags/nama-tag"]
  E --> J["modal All Tags"]
  style A fill:#336791,color:#fff
  style D fill:#8b5cf6,color:#fff
  style E fill:#8b5cf6,color:#fff
  style G fill:#f59e0b,color:#000
  style I fill:#2d7d46,color:#fff
  style H fill:#2d7d46,color:#fff
%% fig: Alur agregasi tag di AllTags.astro
%% desc: Collection tools diratakan, dinormalkan, dihitung, lalu dipotong menjadi 20 tag teratas; cabang Set menyuplai modal semua tag.

Angka 20 muncul dua kali di tampilan: sebagai batas slice dan sebagai teks judul blok, karena heading ditulis Top {maxTags} Tags (src/components/AllTags.astro:62-73⁴). Anchor pada blok itu memakai href={/tags/${tag.trim().toLowerCase()}}, jadi nilai yang ditautkan sudah sama dengan slug hasil normalisasi.

Daftar lengkap di modal dan kontrol tampilan

uniqueTags dibuat dari new Set(allTags) sesudah normalisasi berjalan, sehingga isinya seluruh tag unik dalam bentuk lowercase (src/components/AllTags.astro:9-13⁵). Set itu dipakai modal id="modal" untuk merender semua tag, bukan hanya 20 teratas (src/components/AllTags.astro:86-100⁶). Tombol pembuka modal memanggil showAllTags() (src/components/AllTags.astro:76-82⁷).

Ketiga handler toggleBtnTags, showAllTags, dan closeModal didefinisikan di blok script is:inline, lalu showAllTags dan closeModal dipasang ke window supaya bisa dipanggil dari atribut onclick di markup (src/components/AllTags.astro:33-50⁸). Di layar kecil, blok daftar tag hidden lg:block dibuka lewat baris Show Categories yang memanggil toggleBtnTags() (src/components/AllTags.astro:52-57⁹). Komponen ini dipasang di dalam sidebar, bukan di halaman tersendiri (src/layouts/Sidebar.astro:2¹⁰), dan muncul di semua halaman yang memakai sidebar itu bersama dua tautan Submit+ dan Saved (src/layouts/Sidebar.astro:26-31¹¹). Susunan sidebar dan tema dibahas di Layout, Sidebar, dan Tema.

Rute statis lewat getStaticPaths

Rute tag seluruhnya dibangun saat build. getStaticPaths mengumpulkan post.data.tags, membentuk uniqueTags dengan new Set(tags), lalu mengembalikan satu entri per tag berisi params.slug dan props.tag (src/pages/tags/[slug].astro:7-21).

sequenceDiagram
  participant B as Build Astro
  participant G as getStaticPaths
  participant C as getCollection tools
  participant P as Tag page
  participant U as Layout Header Card
  B->>G: minta daftar path
  G->>C: baca semua entri tools
  C-->>G: data.tags per tool
  G->>G: uniqueTags = new Set(tags)
  G-->>B: params.slug dan props.tag
  B->>P: render dengan Astro.props.tag
  P->>C: getCollection dengan filter data.tags.includes
  C-->>P: tool yang cocok
  P->>U: title, description, Card per tool
%% fig: Siklus satu rute tag
%% desc: getStaticPaths menyiapkan path dan props saat build, lalu halaman memfilter ulang tools memakai props.tag dan merender Card.

⚠️ Normalisasi tidak seragam antar kedua berkas

AllTags.astro menormalkan tag sebelum menghitung, tetapi [slug].astro tidak. Di sana uniqueTags dibentuk dari tag mentah, dan toLowerCase() hanya dipakai saat mengisi params.slug (src/pages/tags/[slug].astro:13-16). Akibatnya dua penulisan berbeda bisa menghasilkan path yang sama. Contoh nyata ada di repository: satu tool menulis tags: ["IDE"] (src/content/tools/goorm.md:6¹²), tool lain menulis tags: ["ide"] (src/content/tools/vscode_web.md:6¹³). Keduanya menjadi slug: "ide", sehingga daftar path memuat dua entri dengan path identik.

Efek keduanya terasa pada filter isi halaman, karena includes membandingkan string persis. Halaman dengan props.tag = "ide" mencari "ide", sehingga tool bertag "IDE" tidak ikut tampil (src/pages/tags/[slug].astro:23-28). Spasi di depan tag menimbulkan masalah serupa: tag " CSS" pada satu entri (src/content/tools/100devs.md:8¹⁴) menghasilkan slug dengan spasi, sementara tag "css" pada entri lain (src/content/tools/scrollbar.md:6¹⁵) menghasilkan slug tanpa spasi. Karena itu penulisan tag sebaiknya selalu lowercase dan tanpa spasi tepi. Ringkasan schema yang menjadi sumber semua nilai ini ada di Skema Content Collection tools, sedangkan cara data tool ditampilkan per kartu ada di Halaman Recent dan Pengurutan.