Lompat ke konten
dokumentasi.id
Commit 3ce63fd
v3
Star5,3 rb

Kamu membaca versi lama. Halaman ini hanya bisa dibaca.

6

Helper Markdown dan Daftar Isi

src/utils/markdown.ts menyimpan tiga helper yang mengubah data kategori menjadi markdown: translate, markdownBuilder, dan generateToc. Ketiganya bekerja berurutan di dalam loop penulisan README di src/build.ts:96-103. markdownBuilder mengisi blok API START/API END lebih dulu, lalu generateToc membaca result yang sudah berisi tabel beserta heading kategori. Urutan itulah sebabnya judul kategori hasil build ikut masuk ke daftar isi.

graph TD
  V["vocabularies.json"] --> T["translate(key, language)"]
  C["CategoryType dari data JSON"] --> M["markdownBuilder(categories, language)"]
  T --> M
  M --> TBL["tabel Markdown per kategori"]
  TBL --> RM["README berisi heading tingkat tiga"]
  RM --> G["generateToc(markdown)"]
  G --> TOC["daftar isi berindentasi"]
  style V fill:#336791,color:#fff
  style T fill:#8b5cf6,color:#fff
  style M fill:#f59e0b,color:#000
  style G fill:#8b5cf6,color:#fff
  style TBL fill:#2d7d46,color:#fff
  style TOC fill:#2d7d46,color:#fff
%% fig: Pemetaan helper markdown ke keluarannya
%% desc: translate memasok label kolom, markdownBuilder menghasilkan tabel per kategori, lalu generateToc membaca hasil build dan menurunkan daftar isi.
Fig. 1: Pemetaan helper markdown ke keluarannyatranslate memasok label kolom, markdownBuilder menghasilkan tabel per kategori, lalu generateToc membaca hasil build dan menurunkan daftar isi.

translate membaca label dari kamus

translate(key, language) mengembalikan vocabularies[language][key], dan hanya jatuh ke string 'Unknown' ketika key tidak ditemukan src/utils/markdown.ts:4-6. Kamusnya ada di src/data/vocabularies.json:1-18 dan hanya memuat dua bahasa, id dan en, masing-masing dengan enam key yang sama persis.

KeyNilai idNilai en
apiNameNama APIAPI Name
developerPengembangDeveloper
documentationDokumentasiDocumentation
statusStatusStatus
descriptionDeskripsiDescription
authenticationAutentikasiAuthentication

⚠️ Fallback 'Unknown' hanya menutup key yang hilang. Indeks [language] dievaluasi lebih dulu, sehingga kode bahasa di luar id dan en melempar TypeError sebelum fallback sempat terpakai src/utils/markdown.ts:4-6. Pemilihan nilai language dibahas di Dukungan Multi-Bahasa.

markdownBuilder menyusun satu tabel per kategori

Fungsi ini menerima CategoryType[] — bentuknya ada di src/types.ts:1-13 — beserta sebuah language, lalu mengembalikan satu string markdown src/utils/markdown.ts:8-33. Untuk setiap kategori ia menulis heading ### ${category.categoryName}, baris header enam kolom, dan baris pemisah | - | - | - | - | - | - | src/utils/markdown.ts:11-17. Enam label header diambil lewat translate, sehingga urutan kolom selalu apiName, developer, documentation, status, description, dan authentication src/utils/markdown.ts:11-17.

Baris data dibangun di src/utils/markdown.ts:19-27. Nama pengembang dibungkus tautan hanya bila api.developer.profileUrl terisi; kalau tidak, api.developer.name ditulis apa adanya. Kolom dokumentasi selalu menjadi tautan [Link](...), kolom status berisi ✅ atau ❎ dari api.status, dan kolom autentikasi memakai api.authentication dengan fallback false di dalam backtick ketika nilainya kosong.

KolomSumber nilaiPerilaku khusus
apiNameapi.apiNameditulis apa adanya
developerapi.developer.namedibungkus [nama](profileUrl) bila profileUrl terisi
documentationapi.documentationUrlselalu menjadi tautan [Link](...)
statusapi.status✅ bila true, ❎ bila false
descriptionapi.descriptionditulis apa adanya
authenticationapi.authenticationnilai kosong diganti false di dalam backtick

Setiap kategori ditutup dengan baris kosong, dan hasil akhirnya di-trim() sebelum disisipkan src/utils/markdown.ts:8-33. Pengurutan kategori dan API terjadi sebelum helper ini dipanggil, di dalam Pipeline Build Markdown.

generateToc menurunkan heading menjadi daftar isi

generateToc(markdown) didefinisikan di src/utils/markdown.ts:35-57. Ia memindai seluruh teks dengan regex /^(#{1,6})\s+(.+)$/gm dan mengumpulkan pasangan { level, text }, dengan level diambil dari panjang match[1] src/utils/markdown.ts:36-45. Tidak ada pemeriksaan pagar kode, jadi baris berawalan # di dalam blok kode juga ikut terkumpul.

Setiap heading kemudian menjadi satu baris - [teks](#anchor) dengan indentasi dua spasi per level src/utils/markdown.ts:47-56. Anchor diturunkan dengan toLowerCase() lalu replace(/\s+/g, '-') src/utils/markdown.ts:50-52.

graph LR
  H["teks heading dari grup kedua"] --> LOW["toLowerCase"]
  LOW --> DASH["spasi menjadi tanda hubung"]
  DASH --> ANC["anchor di dalam tanda kurung"]
  LV["level dari grup pertama"] --> IND["indentasi dua spasi per level"]
  IND --> LINE["satu baris daftar isi"]
  ANC --> LINE
  style H fill:#8b5cf6,color:#fff
  style ANC fill:#f59e0b,color:#000
  style LINE fill:#2d7d46,color:#fff
%% fig: Penurunan satu baris daftar isi
%% desc: Teks heading diubah menjadi anchor, level heading menentukan indentasi, lalu keduanya digabung menjadi satu baris daftar isi.
Fig. 2: Penurunan satu baris daftar isiTeks heading diubah menjadi anchor, level heading menentukan indentasi, lalu keduanya digabung menjadi satu baris daftar isi.
Heading di READMElevelBaris daftar isi
# Daftar API Lokal Indonesia1tanpa indentasi, anchor #daftar-api-lokal-indonesia
## Daftar API2indentasi 2 spasi, anchor #daftar-api
### Agama Islam3indentasi 4 spasi, anchor #agama-islam
### E-Commerce3indentasi 4 spasi, anchor #e-commerce

⚠️ Anchor hanya menurunkan huruf dan mengganti spasi dengan tanda hubung. Tanda baca dibiarkan, jadi heading seperti Daftar API (Publik) menghasilkan #daftar-api-(publik) src/utils/markdown.ts:50-52. Anchor semacam itu tidak sama dengan anchor yang dibuat GitHub untuk heading yang sama.

Keluaran nyatanya bisa dilihat di README.md:13-42. Di sana ## Daftar API muncul sebagai baris berindentasi dua spasi, ### E-Commerce berindentasi empat spasi, dan ## Daftar Isi ikut terdaftar sebagai bagian dari daftar isi itu sendiri.

Ketiga helper ini hanya bekerja pada string: tidak ada akses berkas maupun jaringan di dalam src/utils/markdown.ts:35-57 maupun fungsi markdownBuilder. Pembacaan data JSON dan penulisan README berada di Pipeline Build Markdown, sedangkan helper berkas dan filter blacklist dibahas di Helper Berkas dan Filter Blacklist.