TESTTEST

TEST

# Heading level 1 ## Heading level 2 ### Heading level 3 #### Heading level 4 ##### Heading level 5 ###### Heading level 6 ## Paragraf biasa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer facilisis, nisl sed tincidunt varius, ligula erat fermentum nisi, non pretium velit magna nec lectus. Curabitur ut sem vel augue pulvinar volutpat sit amet sed risus. Ini paragraf kedua dengan **teks tebal**, _teks miring_, dan **_teks tebal miring_**. Juga ada ~~coret~~ dan `inline code`. Selain itu terdapat kombinasi elemen inline lain untuk membantu testing typography, spacing antar paragraf, line-height, wrapping text, serta rendering markdown pada berbagai ukuran layar dan mode tema.. :::quote Suspendisse potenti. Curabitur convallis, sapien sit amet faucibus tempus, ligula tortor dignissim erat, vel vulputate elit sem sed neque. Bagian ini berguna untuk memastikan inline link, hover state, dan external source rendering tetap konsisten pada berbagai ukuran layar. :cite[c0desk1 | https://c0desk1.my.id/] ::: :::quote Praesent feugiat, purus vel luctus elementum, lorem arcu tincidunt nisl, vitae pulvinar libero turpis nec justo. Konten diperpanjang untuk membantu debugging alignment author, overflow content, serta vertical rhythm pada layout quote custom. :cite[Seseorang] ::: :::quote Donec faucibus, risus vel luctus tincidunt, justo sapien placerat nibh, sed gravida lorem lectus non sapien. Variasi tanpa metadata seperti ini penting untuk memastikan renderer tetap stabil meskipun tidak memiliki source maupun author tambahan. ::: > Donec faucibus, risus vel luctus tincidunt, justo sapien placerat nibh, sed gravida lorem lectus non sapien. Variasi tanpa metadata seperti ini penting untuk memastikan renderer tetap stabil meskipun tidak memiliki source maupun author tambahan. > > <cite>Ini cite</cite> ## Daftar (List) ### Daftar tak berurutan (unordered) - Item pertama dengan deskripsi yang sedikit lebih panjang untuk membantu testing spacing, wrapping text, dan alignment marker pada daftar unordered. - Item kedua yang juga memiliki isi lebih panjang agar rendering multiline dapat terlihat dengan lebih jelas pada berbagai ukuran layar. - Sub item A dengan tambahan teks untuk memastikan nested list tetap memiliki indentation dan vertical rhythm yang konsisten. - Sub item B yang digunakan untuk menguji tampilan marker, spacing antar item, dan line-height pada nested unordered list. - Item ketiga dengan kombinasi teks yang lebih panjang untuk membantu debugging typography dan layout pada prose content custom. ### Daftar berurutan (ordered) 1. Langkah satu dengan penjelasan tambahan yang dibuat lebih panjang untuk membantu testing alignment angka, spacing antar item, dan wrapping text pada ordered list custom. 2. Langkah dua dengan isi yang sedikit lebih kompleks agar rendering multiline dan vertical rhythm pada daftar berurutan dapat terlihat lebih jelas. 3. Sub langkah 2.1 dengan tambahan konten untuk memastikan nested ordered list tetap memiliki indentation dan numbering yang konsisten. 4. Sub langkah 2.2 yang digunakan untuk menguji tampilan marker angka, line-height, serta spacing antar nested item. 5. Langkah tiga dengan paragraf yang lebih panjang untuk membantu debugging typography, numbering style, dan keseluruhan layout prose pada berbagai ukuran layar. ### Task list - [x] Selesai dan sudah diuji untuk memastikan styling checkbox aktif, alignment icon, serta typography pada task list berjalan dengan baik di dalam prose custom. - [ ] Belum selesai karena masih digunakan untuk testing spacing, wrapping text, dan interaksi visual antara checkbox dengan konten multiline yang lebih panjang. - [ ] Sedang dikerjakan sambil melakukan debugging terhadap vertical rhythm, nested spacing, serta konsistensi rendering task list pada berbagai ukuran layar dan mode tema. ## Tabel | Header 1 | Header 2 | Header 3 | | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | | Baris 1 kolom 1 dengan isi yang lebih panjang untuk membantu testing wrapping text dan alignment pada tabel custom | Baris 1 kolom 2 digunakan untuk menguji spacing horizontal serta vertical rhythm antar cell | Baris 1 kolom 3 berfungsi untuk memastikan typography dan overflow content tetap stabil | | Baris 2 kolom 1 memiliki konten tambahan agar rendering multiline di dalam tabel dapat terlihat lebih jelas | Baris 2 kolom 2 digunakan untuk debugging border, padding, dan line-height pada berbagai ukuran layar | Baris 2 kolom 3 membantu memastikan seluruh layout tabel tetap konsisten saat konten lebih panjang | | Baris 3 kolom 1 digunakan untuk testing kombinasi teks panjang dengan responsive table wrapper | Baris 3 kolom 2 membantu memeriksa alignment vertikal antar cell dan konsistensi ukuran typography | Baris 3 kolom 3 dipakai untuk validasi overflow, scroll horizontal, dan rendering akhir pada prose custom | ## Code block :::code :title[src/components/mdx/CodeBlock.astro] ```astro --- // src/components/mdx/CodeBlock.astro import Icon from "@/components/ui/icons/Icon.astro"; // [!code ++] interface Props { title?: string; // [!code --] } const { title = "" } = Astro.props; const $ = { wrapper: "code-block-wrapper not-prose relative my-6 rounded-xl overflow-hidden border border-(--prose-code-border) bg-(--prose-code-header-bg)", header: "code-block-header flex items-center justify-between px-4 py-2 min-h-10 border-b border-(--prose-code-border)/60", leftSlot: "header-left flex items-center gap-2 min-w-0 flex-1 pr-4", rightSlot: "header-right flex items-center gap-3 shrink-0", titleText: "code-block-title text-label-13 truncate text-(--prose-fg-muted) font-medium tracking-wide", langBadge: "lang-badge text-label-11 font-mono font-bold text-(--prose-fg-subtle) bg-(--prose-bg-subtle) uppercase px-2 py-0.5 rounded border border-(--prose-code-border)/40", content: "code-content relative bg-(--prose-code-bg) overflow-x-auto group/content", copyBtn: "copy-button absolute top-3 right-3 z-20 flex items-center justify-center p-2 rounded-md text-(--prose-fg-subtle) border border-(--prose-code-border) bg-(--prose-code-bg)/80 backdrop-blur-md opacity-0 group-hover/content:opacity-100 focus-visible:opacity-100 transition-all duration-200 hover:text-(--prose-fg-strong) hover:bg-(--prose-code-header-bg)", } as const; --- <div class={$.wrapper}> <div class={$.header}> <div class={$.leftSlot}> {title && <span class={$.titleText}>{title}</span>} </div> <div class={$.rightSlot}> <span class={$.langBadge} style="display: none;"></span> </div> </div> <div class={$.content}> <button type="button" aria-label="Salin kode" title="Salin" class={$.copyBtn} > <Icon name="copy" className="copy-icon h-3.5 w-3.5" /> <Icon name="check" className="check-icon hidden h-3.5 w-3.5" /> </button> <slot /> </div> </div> <style is:global> @reference "@/styles/utils.css"; .code-content { scrollbar-width: none; } .code-content::-webkit-scrollbar { display: none; } .code-block-wrapper.is-collapsed .code-content .astro-code { mask-image: linear-gradient(to bottom, black 65%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 100%); max-height: 12rem; overflow: hidden; } .code-content .astro-code { transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .btn-expand { @apply text-label-14; display: flex; justify-content: center; align-items: center; transition: color 150ms ease, background-color 150ms ease; cursor: pointer; border-top: 1px solid var(--prose-code-border) / 40; background-color: var(--prose-code-header-bg); padding: 0.5rem 0; width: 100%; color: var(--prose-fg-muted); font-weight: 500; } .btn-expand:hover { background-color: var(--prose-surface-hover); color: var(--prose-fg-strong); } .btn-expand svg { transition: transform 200ms ease; } .code-block-wrapper:not(.is-collapsed) .btn-expand svg { transform: rotate(180deg); } .copy-button.copied { border-color: var(--success) !important; background-color: var(--success-soft) !important; color: var(--success) !important; } </style> <script> (() => { const LANG_MAP: Record<string, string> = { js: "JS", ts: "TS", jsx: "JSX", tsx: "TSX", py: "PY", html: "HTML", css: "CSS", json: "JSON", yaml: "YAML", toml: "TOML", bash: "BASH", sh: "SH", md: "MD", mdx: "MDX", astro: "ASTRO", vue: "VUE", svelte: "SVELTE", rust: "RS", }; const ALIASES: Record<string, string> = { javascript: "js", typescript: "ts", python: "py", shell: "sh", }; const THRESHOLD = 25; const getCleanLang = (pre: HTMLElement | null): string => { if (!pre) return ""; const dl = pre.getAttribute("data-language"); if (dl) return ALIASES[dl.toLowerCase().trim()] ?? dl.toLowerCase().trim(); const m = pre.className.match(/language-([a-zA-Z0-9+#-]+)/); return ALIASES[m?.[1] ?? ""] ?? m?.[1] ?? ""; }; const setupCodeBlock = (wrapper: HTMLElement) => { wrapper.classList.add("is-processed"); const pre = wrapper.querySelector<HTMLElement>( ".code-content pre.astro-code", ); if (!pre) return; const lang = getCleanLang(pre); const badge = wrapper.querySelector<HTMLElement>(".lang-badge"); if (badge && lang) { badge.textContent = LANG_MAP[lang] ?? lang.toUpperCase(); badge.style.display = "inline-flex"; } const btn = wrapper.querySelector<HTMLButtonElement>(".copy-button"); const code = pre.querySelector("code"); if (btn && code) { btn.addEventListener("click", async () => { const rawText = code.textContent?.trimEnd() ?? ""; try { await navigator.clipboard.writeText(rawText); const copyIcon = btn.querySelector(".copy-icon"); const checkIcon = btn.querySelector(".check-icon"); copyIcon?.classList.add("hidden"); checkIcon?.classList.remove("hidden"); btn.classList.add("copied"); setTimeout(() => { copyIcon?.classList.remove("hidden"); checkIcon?.classList.add("hidden"); btn.classList.remove("copied"); }, 2000); } catch (e) { console.error("Gagal menyalin:", e); } }); } const lines = pre.querySelectorAll("code > .line"); if (lines.length >= THRESHOLD) { wrapper.classList.add("is-collapsed"); const btnExpand = document.createElement("button"); btnExpand.type = "button"; btnExpand.className = "btn-expand"; btnExpand.innerHTML = ` <div class="flex items-center gap-1.5"> <span class="expand-label">Lihat semua (${lines.length} baris)</span> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg> </div> `; wrapper.appendChild(btnExpand); btnExpand.addEventListener("click", () => { const collapsed = wrapper.classList.toggle("is-collapsed"); const label = btnExpand.querySelector(".expand-label"); if (collapsed) { if (label) label.textContent = `Lihat semua (${lines.length} baris)`; pre.style.maxHeight = ""; const rect = wrapper.getBoundingClientRect(); if (rect.top < 0) { wrapper.scrollIntoView({ behavior: "smooth", block: "start" }); } } else { if (label) label.textContent = "Sembunyikan"; pre.style.maxHeight = `${pre.scrollHeight + 16}px`; } }); } }; const initAllBlocks = () => { document .querySelectorAll<HTMLElement>(".code-block-wrapper:not(.is-processed)") .forEach(setupCodeBlock); }; document.addEventListener("astro:page-load", initAllBlocks); if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", initAllBlocks); } else { initAllBlocks(); } })(); </script> ``` ::: ## Callouts :::note INI NOTE ::: :::info INI INFO ::: :::tip INI TIP ::: :::warning INI WARNING ::: :::danger INI DANGER ::: ## Details :::details :summary[INI JUDUL DETAIL KLIK DISINI] ini isi Details yang dibuat lebih panjang untuk membantu testing rendering accordion, spacing internal, animation open/close, serta konsistensi typography pada prose custom di berbagai ukuran layar dan mode tema. ::: ## Changelog :::changelog ### 0.0.1 - New Build ### 0.0.2 - New Feature - Upgrade UI & UX ### 0.0.3 - Remove some feature - Improve Performance ### 0.0.4 - New Build - Full Upgrade ::: ## STEPS :::steps ### Judul Steps 1 ini isi steps 1 yang dibuat lebih panjang untuk membantu testing layout steps, parsing heading, spacing antar section, serta rendering multiline pada komponen steps custom di dalam prose markdown. Bagian ini juga digunakan untuk memastikan setiap step memiliki visual hierarchy yang jelas, konsisten, dan tidak pecah ketika konten menjadi lebih kompleks. Tambahan teks ini juga membantu melihat bagaimana wrapping text bekerja pada container steps di berbagai ukuran layar. ### Judul Steps 2 ini isi steps 2 yang diperpanjang agar bisa menguji perbedaan antar step, konsistensi heading parsing, alignment content, serta perilaku spacing internal dalam satu blok steps. Selain itu, ini membantu memastikan bahwa transisi antar section tetap stabil, baik ketika konten pendek maupun panjang, dan tidak terjadi overlap atau layout shift yang tidak diinginkan. ### Judul Steps 3 ini isi steps 3 yang ditambahkan lebih banyak konten untuk menguji skenario steps menengah dengan kombinasi paragraf panjang, line wrapping, dan kemungkinan adanya elemen inline seperti **bold**, _italic_, atau `inline code`. Tujuannya adalah memastikan renderer tetap konsisten meskipun setiap step memiliki kompleksitas konten yang berbeda-beda. ### Judul Steps 4 ini isi steps 4 yang dibuat cukup panjang untuk mengevaluasi batas maksimum kenyamanan pembacaan dalam satu step. Di sini diuji bagaimana layout menangani teks panjang, apakah spacing tetap rapi, dan apakah ada masalah overflow atau ketidakseimbangan vertical rhythm. Hal ini juga penting untuk memastikan UX tetap baik pada perangkat mobile. ### Judul Steps 5 ini isi steps 5 sebagai langkah terakhir untuk memastikan seluruh komponen steps bekerja dengan baik dari awal hingga akhir. Bagian ini membantu mengecek apakah numbering tetap konsisten, apakah styling heading tidak tumpang tindih, serta apakah jarak antar step terakhir tetap sama seperti step sebelumnya tanpa anomali layout. ::: ## File Tree :::filetree - src/ - styles/ - global.css - utils.css - consts.ts - content.config.ts ::: ## Gambar ![c0desk1](/org/c0desk1-og.webp) ## Gambar dengan caption :::figure ![c0desk1](/org/c0desk1-og.webp) Caption dan gambar di atas dipakai untuk memastikan alignment caption, typography, spacing vertikal, serta perilaku layout media tetap konsisten ketika digunakan bersama elemen markdown lainnya seperti paragraf, heading, maupun list. :::

10 menit baca

|25 Juni 2026

TEST DESKRIPSI

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

Paragraf biasa.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer facilisis, nisl sed tincidunt varius, ligula erat fermentum nisi, non pretium velit magna nec lectus. Curabitur ut sem vel augue pulvinar volutpat sit amet sed risus.

Ini paragraf kedua dengan teks tebal, teks miring, dan teks tebal miring. Juga ada ~~coret~~ dan inline code. Selain itu terdapat kombinasi elemen inline lain untuk membantu testing typography, spacing antar paragraf, line-height, wrapping text, serta rendering markdown pada berbagai ukuran layar dan mode tema..

Suspendisse potenti. Curabitur convallis, sapien sit amet faucibus tempus, ligula tortor dignissim erat, vel vulputate elit sem sed neque. Bagian ini berguna untuk memastikan inline link, hover state, dan external source rendering tetap konsisten pada berbagai ukuran layar.
c0desk1

Praesent feugiat, purus vel luctus elementum, lorem arcu tincidunt nisl, vitae pulvinar libero turpis nec justo. Konten diperpanjang untuk membantu debugging alignment author, overflow content, serta vertical rhythm pada layout quote custom.
Seseorang

Donec faucibus, risus vel luctus tincidunt, justo sapien placerat nibh, sed gravida lorem lectus non sapien. Variasi tanpa metadata seperti ini penting untuk memastikan renderer tetap stabil meskipun tidak memiliki source maupun author tambahan.

Donec faucibus, risus vel luctus tincidunt, justo sapien placerat nibh, sed gravida lorem lectus non sapien. Variasi tanpa metadata seperti ini penting untuk memastikan renderer tetap stabil meskipun tidak memiliki source maupun author tambahan.
Ini cite

Daftar (List)

Daftar tak berurutan (unordered)

Item pertama dengan deskripsi yang sedikit lebih panjang untuk membantu testing spacing, wrapping text, dan alignment marker pada daftar unordered.
Item kedua yang juga memiliki isi lebih panjang agar rendering multiline dapat terlihat dengan lebih jelas pada berbagai ukuran layar.
- Sub item A dengan tambahan teks untuk memastikan nested list tetap memiliki indentation dan vertical rhythm yang konsisten.
- Sub item B yang digunakan untuk menguji tampilan marker, spacing antar item, dan line-height pada nested unordered list.
Item ketiga dengan kombinasi teks yang lebih panjang untuk membantu debugging typography dan layout pada prose content custom.

Daftar berurutan (ordered)

Langkah satu dengan penjelasan tambahan yang dibuat lebih panjang untuk membantu testing alignment angka, spacing antar item, dan wrapping text pada ordered list custom.
Langkah dua dengan isi yang sedikit lebih kompleks agar rendering multiline dan vertical rhythm pada daftar berurutan dapat terlihat lebih jelas.
Sub langkah 2.1 dengan tambahan konten untuk memastikan nested ordered list tetap memiliki indentation dan numbering yang konsisten.
Sub langkah 2.2 yang digunakan untuk menguji tampilan marker angka, line-height, serta spacing antar nested item.
Langkah tiga dengan paragraf yang lebih panjang untuk membantu debugging typography, numbering style, dan keseluruhan layout prose pada berbagai ukuran layar.

Task list

Selesai dan sudah diuji untuk memastikan styling checkbox aktif, alignment icon, serta typography pada task list berjalan dengan baik di dalam prose custom.
Belum selesai karena masih digunakan untuk testing spacing, wrapping text, dan interaksi visual antara checkbox dengan konten multiline yang lebih panjang.
Sedang dikerjakan sambil melakukan debugging terhadap vertical rhythm, nested spacing, serta konsistensi rendering task list pada berbagai ukuran layar dan mode tema.

Tabel

Header 1	Header 2	Header 3
Baris 1 kolom 1 dengan isi yang lebih panjang untuk membantu testing wrapping text dan alignment pada tabel custom	Baris 1 kolom 2 digunakan untuk menguji spacing horizontal serta vertical rhythm antar cell	Baris 1 kolom 3 berfungsi untuk memastikan typography dan overflow content tetap stabil
Baris 2 kolom 1 memiliki konten tambahan agar rendering multiline di dalam tabel dapat terlihat lebih jelas	Baris 2 kolom 2 digunakan untuk debugging border, padding, dan line-height pada berbagai ukuran layar	Baris 2 kolom 3 membantu memastikan seluruh layout tabel tetap konsisten saat konten lebih panjang
Baris 3 kolom 1 digunakan untuk testing kombinasi teks panjang dengan responsive table wrapper	Baris 3 kolom 2 membantu memeriksa alignment vertikal antar cell dan konsistensi ukuran typography	Baris 3 kolom 3 dipakai untuk validasi overflow, scroll horizontal, dan rendering akhir pada prose custom

Code block

src/components/mdx/CodeBlock.astro

---// src/components/mdx/CodeBlock.astroimport Icon from "@/components/ui/icons/Icon.astro"; interface Props {  title?: string; }const { title = "" } = Astro.props;const $ = {  wrapper:    "code-block-wrapper not-prose relative my-6 rounded-xl overflow-hidden border border-(--prose-code-border) bg-(--prose-code-header-bg)",  header:    "code-block-header flex items-center justify-between px-4 py-2 min-h-10 border-b border-(--prose-code-border)/60",  leftSlot: "header-left flex items-center gap-2 min-w-0 flex-1 pr-4",  rightSlot: "header-right flex items-center gap-3 shrink-0",  titleText:    "code-block-title text-label-13 truncate text-(--prose-fg-muted) font-medium tracking-wide",  langBadge:    "lang-badge text-label-11 font-mono font-bold text-(--prose-fg-subtle) bg-(--prose-bg-subtle) uppercase px-2 py-0.5 rounded border border-(--prose-code-border)/40",  content:    "code-content relative bg-(--prose-code-bg) overflow-x-auto group/content",  copyBtn:    "copy-button absolute top-3 right-3 z-20 flex items-center justify-center p-2 rounded-md text-(--prose-fg-subtle) border border-(--prose-code-border) bg-(--prose-code-bg)/80 backdrop-blur-md opacity-0 group-hover/content:opacity-100 focus-visible:opacity-100 transition-all duration-200 hover:text-(--prose-fg-strong) hover:bg-(--prose-code-header-bg)",} as const;---<div class={$.wrapper}>  <div class={$.header}>    <div class={$.leftSlot}>      {title && <span class={$.titleText}>{title}</span>}    </div>    <div class={$.rightSlot}>      <span class={$.langBadge} style="display: none;"></span>    </div>  </div>  <div class={$.content}>    <button      type="button"      aria-label="Salin kode"      title="Salin"      class={$.copyBtn}    >      <Icon name="copy" className="copy-icon h-3.5 w-3.5" />      <Icon name="check" className="check-icon hidden h-3.5 w-3.5" />    </button>    <slot />  </div></div><style is:global>  @reference "@/styles/utils.css";  .code-content {    scrollbar-width: none;  }  .code-content::-webkit-scrollbar {    display: none;  }  .code-block-wrapper.is-collapsed .code-content .astro-code {    mask-image: linear-gradient(to bottom, black 65%, transparent 100%);    -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 100%);    max-height: 12rem;    overflow: hidden;  }  .code-content .astro-code {    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);  }  .btn-expand {    @apply text-label-14;    display: flex;    justify-content: center;    align-items: center;    transition:      color 150ms ease,      background-color 150ms ease;    cursor: pointer;    border-top: 1px solid var(--prose-code-border) / 40;    background-color: var(--prose-code-header-bg);    padding: 0.5rem 0;    width: 100%;    color: var(--prose-fg-muted);    font-weight: 500;  }  .btn-expand:hover {    background-color: var(--prose-surface-hover);    color: var(--prose-fg-strong);  }  .btn-expand svg {    transition: transform 200ms ease;  }  .code-block-wrapper:not(.is-collapsed) .btn-expand svg {    transform: rotate(180deg);  }  .copy-button.copied {    border-color: var(--success) !important;    background-color: var(--success-soft) !important;    color: var(--success) !important;  }</style><script>  (() => {    const LANG_MAP: Record<string, string> = {      js: "JS",      ts: "TS",      jsx: "JSX",      tsx: "TSX",      py: "PY",      html: "HTML",      css: "CSS",      json: "JSON",      yaml: "YAML",      toml: "TOML",      bash: "BASH",      sh: "SH",      md: "MD",      mdx: "MDX",      astro: "ASTRO",      vue: "VUE",      svelte: "SVELTE",      rust: "RS",    };    const ALIASES: Record<string, string> = {      javascript: "js",      typescript: "ts",      python: "py",      shell: "sh",    };    const THRESHOLD = 25;    const getCleanLang = (pre: HTMLElement | null): string => {      if (!pre) return "";      const dl = pre.getAttribute("data-language");      if (dl)        return ALIASES[dl.toLowerCase().trim()] ?? dl.toLowerCase().trim();      const m = pre.className.match(/language-([a-zA-Z0-9+#-]+)/);      return ALIASES[m?.[1] ?? ""] ?? m?.[1] ?? "";    };    const setupCodeBlock = (wrapper: HTMLElement) => {      wrapper.classList.add("is-processed");      const pre = wrapper.querySelector<HTMLElement>(        ".code-content pre.astro-code",      );      if (!pre) return;      const lang = getCleanLang(pre);      const badge = wrapper.querySelector<HTMLElement>(".lang-badge");      if (badge && lang) {        badge.textContent = LANG_MAP[lang] ?? lang.toUpperCase();        badge.style.display = "inline-flex";      }      const btn = wrapper.querySelector<HTMLButtonElement>(".copy-button");      const code = pre.querySelector("code");      if (btn && code) {        btn.addEventListener("click", async () => {          const rawText = code.textContent?.trimEnd() ?? "";          try {            await navigator.clipboard.writeText(rawText);            const copyIcon = btn.querySelector(".copy-icon");            const checkIcon = btn.querySelector(".check-icon");            copyIcon?.classList.add("hidden");            checkIcon?.classList.remove("hidden");            btn.classList.add("copied");            setTimeout(() => {              copyIcon?.classList.remove("hidden");              checkIcon?.classList.add("hidden");              btn.classList.remove("copied");            }, 2000);          } catch (e) {            console.error("Gagal menyalin:", e);          }        });      }      const lines = pre.querySelectorAll("code > .line");      if (lines.length >= THRESHOLD) {        wrapper.classList.add("is-collapsed");        const btnExpand = document.createElement("button");        btnExpand.type = "button";        btnExpand.className = "btn-expand";        btnExpand.innerHTML = `          <div class="flex items-center gap-1.5">            <span class="expand-label">Lihat semua (${lines.length} baris)</span>            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>          </div>        `;        wrapper.appendChild(btnExpand);        btnExpand.addEventListener("click", () => {          const collapsed = wrapper.classList.toggle("is-collapsed");          const label = btnExpand.querySelector(".expand-label");          if (collapsed) {            if (label)              label.textContent = `Lihat semua (${lines.length} baris)`;            pre.style.maxHeight = "";            const rect = wrapper.getBoundingClientRect();            if (rect.top < 0) {              wrapper.scrollIntoView({ behavior: "smooth", block: "start" });            }          } else {            if (label) label.textContent = "Sembunyikan";            pre.style.maxHeight = `${pre.scrollHeight + 16}px`;          }        });      }    };    const initAllBlocks = () => {      document        .querySelectorAll<HTMLElement>(".code-block-wrapper:not(.is-processed)")        .forEach(setupCodeBlock);    };    document.addEventListener("astro:page-load", initAllBlocks);    if (document.readyState === "loading") {      document.addEventListener("DOMContentLoaded", initAllBlocks);    } else {      initAllBlocks();    }  })();</script>

Callouts

Details

INI JUDUL DETAIL KLIK DISINI

ini isi Details yang dibuat lebih panjang untuk membantu testing rendering accordion, spacing internal, animation open/close, serta konsistensi typography pada prose custom di berbagai ukuran layar dan mode tema.

Changelog

0.0.1

New Build

0.0.2

New Feature
Upgrade UI & UX

0.0.3

Remove some feature
Improve Performance

0.0.4

New Build
Full Upgrade

STEPS

Judul Steps 1

ini isi steps 1 yang dibuat lebih panjang untuk membantu testing layout steps, parsing heading, spacing antar section, serta rendering multiline pada komponen steps custom di dalam prose markdown. Bagian ini juga digunakan untuk memastikan setiap step memiliki visual hierarchy yang jelas, konsisten, dan tidak pecah ketika konten menjadi lebih kompleks. Tambahan teks ini juga membantu melihat bagaimana wrapping text bekerja pada container steps di berbagai ukuran layar.

Judul Steps 2

ini isi steps 2 yang diperpanjang agar bisa menguji perbedaan antar step, konsistensi heading parsing, alignment content, serta perilaku spacing internal dalam satu blok steps. Selain itu, ini membantu memastikan bahwa transisi antar section tetap stabil, baik ketika konten pendek maupun panjang, dan tidak terjadi overlap atau layout shift yang tidak diinginkan.

Judul Steps 3

ini isi steps 3 yang ditambahkan lebih banyak konten untuk menguji skenario steps menengah dengan kombinasi paragraf panjang, line wrapping, dan kemungkinan adanya elemen inline seperti bold, italic, atau inline code. Tujuannya adalah memastikan renderer tetap konsisten meskipun setiap step memiliki kompleksitas konten yang berbeda-beda.

Judul Steps 4

ini isi steps 4 yang dibuat cukup panjang untuk mengevaluasi batas maksimum kenyamanan pembacaan dalam satu step. Di sini diuji bagaimana layout menangani teks panjang, apakah spacing tetap rapi, dan apakah ada masalah overflow atau ketidakseimbangan vertical rhythm. Hal ini juga penting untuk memastikan UX tetap baik pada perangkat mobile.

Judul Steps 5

ini isi steps 5 sebagai langkah terakhir untuk memastikan seluruh komponen steps bekerja dengan baik dari awal hingga akhir. Bagian ini membantu mengecek apakah numbering tetap konsisten, apakah styling heading tidak tumpang tindih, serta apakah jarak antar step terakhir tetap sama seperti step sebelumnya tanpa anomali layout.

File Tree

src/
- styles/
  - global.css
  - utils.css
- consts.ts
- content.config.ts

Gambar

c0desk1

Gambar dengan caption

Updated: 25 Juni 2026