Uji Lengkap Rich Media PakRPP

Pengujian menyeluruh kemampuan Markdown, media, komponen Starlight, dan pengalaman membaca pada arsitektur konten PakRPP.

Oleh PakRPP Terbit 21 Juli 2026 Diperbarui 22 Juli 2026 9 min read

Ringkasan pengujian

Halaman ini menguji:

hierarki heading;
paragraf panjang dan pendek;
bold, italic, bold italic, ~~strikethrough~~, dan inline code;
tautan internal, eksternal, dan anchor;
blockquote dan callout Obsidian;
asides bawaan Starlight;
ordered list, unordered list, nested list, dan task list;
tabel lebar;
gambar, caption, audio, video, dan iframe;
code block, filename, line highlight, diff, dan terminal output;
<details>, <kbd>, <mark>, <abbr>, <sub>, <sup>, dan <hr>;
footnote, definisi istilah, serta teks campuran Indonesia–English.

1. Tipografi dan paragraf

Ini paragraf biasa untuk menguji ukuran font, line-height, lebar kolom baca, kontras, dan jarak antarparagraf. PakRPP menggunakan pengalaman membaca yang tenang, tetapi antarmukanya tetap terasa responsif seperti sebuah console blueprint yang hidup.

Paragraf kedua memuat teks tebal, teks miring, teks tebal dan miring, ~~teks dicoret~~, const inlineCode = true, simbol © ® ™, pecahan ½, tanda em dash —, ellipsis…, dan emoji terbatas: 🧭 🧩 ✅.

Tautan pengujian:

Istilah singkat: SSOT, H₂O, E = mc², tekan ⌘ + K, lalu tandai teks penting.

2. Hierarki heading

Heading level 3

Teks di bawah heading level 3.

Heading level 4

Teks di bawah heading level 4.

Heading level 5

Teks di bawah heading level 5.

Heading level 6

Teks di bawah heading level 6.

3. Blockquote dan kutipan

Arsitektur yang baik tidak hanya terlihat rapi ketika selesai, tetapi juga tetap dapat dipahami ketika sistem berubah.

Blockquote dapat memiliki beberapa paragraf.

Paragraf kedua menguji jarak vertikal, border, warna latar, dan wrap pada layar kecil.

— PakRPP Dummy Content

Nested blockquote

Lapisan pertama

Lapisan kedua

Lapisan ketiga

Callout Obsidian

4. Asides bawaan Starlight

4.1 Asides bawaan Obsidian

5. Daftar

Unordered list

Item utama pertama
Item utama kedua
- Anak item A
- Anak item B
  - Cucu item B.1
  - Cucu item B.2
Item utama ketiga

Ordered list

Tulis artikel di Obsidian.
Commit Markdown ke Git.
Jalankan build Astro.
Periksa output Starlight.
Jalankan acceptance test.

Task list

Definition-style list

Canonical source
Obsidian Vault atau Markdown di Git.

Renderer
Astro + Starlight.

Editor masa depan
PakRPP Studio sebagai editor Markdown berbasis Git, bukan CMS/database kedua.

6. Tabel responsif

Status	Komponen	Tujuan Uji	Desktop	Mobile	Catatan Panjang
✅	Heading	Hierarki tipografi	Pass	Pass	Pastikan anchor tidak tertutup sticky header.
✅	Aside	Kontras dan spacing	Pass	Pass	Judul panjang harus membungkus tanpa menabrak ikon.
⚠️	Table	Overflow horizontal	Check	Check	Tabel ini sengaja lebar untuk memeriksa scroll container pada viewport kecil.
⚠️	Image	Aspect ratio	Check	Check	Gambar tidak boleh menyebabkan layout shift berlebihan.
⚠️	Code	Horizontal scroll	Check	Check	Baris panjang harus dapat digeser tanpa memotong isi halaman.
⚠️	Media	Native controls	Check	Check	Audio/video harus tetap dapat dioperasikan dengan keyboard.

7. Gambar dan figur

Gambar Markdown lokal

Ilustrasi blueprint PakRPP untuk pengujian rich media

Teks miring ini berfungsi sebagai caption sederhana di bawah gambar Markdown.

Figure dengan caption semantik

Figure 1 — Placeholder lokal untuk menguji ukuran intrinsik, lazy loading, alt text, dan caption.

Gambar eksternal opsional

Placeholder eksternal 1200 × 675

Apabila kebijakan CSP atau privacy PakRPP memblokir domain eksternal, gambar di atas boleh gagal. Kegagalan tersebut justru berguna untuk menguji fallback dan console warning.

8. Expressive Code dan code block

JavaScript dengan filename dan highlight

const state = {
  theme: "blueprint",
  sfx: true,
  readerMode: "focused",
};

export function bootRichMediaTest() {
  document.documentElement.dataset.richMediaTest = "ready";
  console.info("[PakRPP] Rich media fixture ready", state);
}

TypeScript dengan diff markers

type ContentSource = "obsidian-git" | "cms";

- const source: ContentSource = "cms";
+ const source: ContentSource = "obsidian-git";

export const contentContract = {
  source,
  editor: "PakRPP Studio",
  database: false,
};

Astro component example

---
interface Props {
  title: string;
  status?: "pass" | "check" | "fail";
}

const { title, status = "check" } = Astro.props;
---

<section class="test-panel" data-status={status}>
  <h2>{title}</h2>
  <slot />
</section>

CSS dengan baris panjang

.rich-media-test {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
}

.rich-media-test :where(img, video, iframe, table, pre) {
  max-inline-size: 100%;
}

@container (width < 42rem) {
  .rich-media-test {
    --pakrpp-test-density: compact;
  }
}

JSON

{
  "route": "/test/rich-media/",
  "renderer": "starlight",
  "source": "obsidian-markdown",
  "checks": {
    "typography": true,
    "asides": true,
    "tables": true,
    "code": true,
    "media": true
  }
}

Terminal

npm run dev
npm run build
npm run verify

✓ Content collection loaded
✓ Rich media test route generated
✓ Starlight asides rendered
✓ Expressive Code rendered

Baris sangat panjang

Ini adalah satu baris yang sengaja dibuat sangat panjang untuk menguji horizontal overflow pada code block tanpa memaksa seluruh layout halaman melebar melebihi viewport perangkat.

9. Details, disclosure, dan HTML ringan

Buka panel detail

Isi panel ini menguji elemen disclosure native. Fokus keyboard, indikator terbuka, animasi, dan spacing harus tetap jelas.

Detail item pertama
Detail item kedua
Detail item ketiga

Panel yang terbuka secara default

Panel ini sengaja menggunakan atribut open.

Status: Ready for QA

10. Audio

11. Video

12. Iframe responsif

13. Link card versi Markdown

Buka dokumentasi PakRPP →

Ringkasan pendek yang meniru pola kartu tautan tanpa membutuhkan komponen MDX. Gunakan bagian ini untuk menguji hover, focus-visible, dan visited state.

Kirim pesan WhatsApp →

Kontak publik PakRPP untuk menguji tautan eksternal dan perilaku pada perangkat mobile.

14. Footnote

PakRPP menggunakan Obsidian/Markdown di Git sebagai sumber konten kanonis.¹ Pendekatan ini menjaga artikel tetap portabel dan mudah diaudit.²

15. Karakter, bahasa, dan wrapping

Bahasa Indonesia: “Pengalaman membaca harus tenang, jelas, dan dapat diaudit.”

English: “The interface should feel responsive, layered, mechanical, and alive.”

Jawa: “Alon-alon waton kelakon,” digunakan di sini hanya sebagai sampel teks.

Teks tanpa spasi untuk menguji overflow:

pakrpp-rich-media-test-abcdefghijklmnopqrstuvwxyz-0123456789-abcdefghijklmnopqrstuvwxyz-0123456789

URL panjang:

https://www.pakrpp.com/test/rich-media/sangat-panjang/untuk-menguji/wrapping-dan-overflow-pada-layout-starlight-di-perangkat-mobile

16. Mermaid sebagai fallback code fence

Blok berikut akan tampil sebagai code block biasa apabila integrasi Mermaid belum dipasang.

flowchart LR
  A[Obsidian Vault] --> B[Git Repository]
  B --> C[Astro Content Collection]
  C --> D[Starlight Renderer]
  D --> E[PakRPP Website]

17. Rumus sebagai teks

Tanpa plugin matematika, ekspresi berikut tetap terbaca sebagai teks biasa:

Inline: E = mc²
Display: F(x) = ∫₀ˣ f(t) dt
Statistik: z = (x - μ) / σ

Tambahkan integrasi remark/rehype matematika hanya apabila memang menjadi kebutuhan konten PakRPP. Jangan menjadikan fixture ini alasan untuk menambah dependency produksi.

18. Empty state dan separator

Belum ada catatan tersimpan.

Simpan halaman ini untuk menguji state reader preferences dan saved reading.

19. Checklist QA manual

20. Penutup

Sumber kanonis berarti perubahan utama dilakukan pada Markdown, bukan disalin ke database CMS kedua. ↩
Portabel berarti konten masih dapat dibaca, dicari, di-version-control, dan dipindahkan tanpa bergantung pada editor tertentu. ↩