Neko

Siapa itu Ahmad Abqory?

ahmad_abqory — Sun, 15 Mar 2026 00:00:00 GMT

Assalaamu'alaikum Warahmatullahi Wabarakatuh. Hallo semua perkenalkan nama gua Ahmad Abqory Mudabighi asal dari Kota Bogor, Provinsi Jawa Barat, Kecamatan Sukajaya. Kalian bisa memanggil gua abqory, Dan yap udah segitu aja perkenalan dari gua hahah. Sekian dan terima gaji eh <u>Terima Kasih</u> 😂

:spoiler[Oh iya kalau kalian ada pertanyaan atau pengen ikut kontribusi di blog ini silahkan call me sir https://wa.me/84776105029?text=Assalaamu'alaikum%20sir]

Neko - Template Tema Blog Astro yang Segar dan Indah

Ahmad Abqory — Fri, 02 Jan 1970 00:00:00 GMT

🌟 Ringkasan Proyek

Neko adalah template tema blog pribadi yang segar, indah, dan modern yang dikembangkan berdasarkan framework Astro dan template Fuwari. Dirancang khusus untuk para penggemar teknologi dan pembuat konten, tema ini menggabungkan teknologi Web modern dengan modul fitur yang kaya dan antarmuka yang sangat mudah dikustomisasi, sehingga Anda dapat membuat situs blog pribadi yang profesional dan menawan dengan mudah.

⭐ Kode Sumber: https://github.com/CuteLeaf/Firefly ⭐ Kode Sumber Fuwari: https://github.com/saicaca/fuwari

::github{repo="CuteLeaf/Firefly"}

::github{repo="saicaca/fuwari"}

🚀 Arsitektur Teknologi

Static Site Generation (SSG): Berbasis Astro, memberikan kecepatan pemuatan yang sangat tinggi dan optimasi SEO yang luar biasa.
Dukungan TypeScript: Keamanan tipe data yang lengkap untuk meningkatkan pengalaman pengembangan dan kualitas kode.
Desain Responsif: Dibangun menggunakan Tailwind CSS, beradaptasi sempurna pada perangkat desktop maupun seluler.
Pengembangan Berbasis Komponen: Mendukung komponen Astro dan Svelte yang fleksibel serta dapat diperluas.

Panduan Penggunaan Sederhana Neko

Ahmad Abqory — Fri, 02 Jan 1970 00:00:00 GMT

Template blog ini dibangun berdasarkan Astro. Untuk hal-hal yang tidak disebutkan dalam panduan ini, Anda dapat menemukan jawabannya di Dokumentasi Astro.

Front-matter Artikel

---
title: Artikel Blog Pertama Saya
published: 2023-09-09
description: Ini adalah artikel pertama di blog Astro baru saya.
image: ./cover.jpg
tags: [Frontend, Pengembangan]
category: Pengembangan Frontend
draft: false
---

Properti	Deskripsi
`title`	Judul artikel.
`published`	Tanggal publikasi artikel.
`updated`	Tanggal pembaruan artikel. Jika tidak diatur, akan menggunakan tanggal publikasi secara default.
`pinned`	Apakah artikel ini akan disematkan (pin) di bagian atas daftar artikel.
`description`	Deskripsi singkat artikel. Ditampilkan di halaman beranda.
`image`	Jalur gambar sampul artikel.<br>

<br>1. Diawali http:// atau https://: Menggunakan gambar daring<br>

<br>2. Diawali /: Gambar di dalam direktori public<br>

Lokasi Penempatan File Artikel

File artikel Anda harus diletakkan di dalam direktori src/content/posts/. Anda juga dapat membuat subdirektori untuk mengelola artikel dan aset Anda dengan lebih baik.

src/content/posts/
├── post-1.md
└── post-2/
    ├── cover.png
    └── index.md

URL Artikel Kustom (Slug)

Apa itu Slug?

Slug adalah bagian kustom dari jalur URL artikel. Jika slug tidak diatur, sistem akan menggunakan nama file sebagai URL.

Contoh Penggunaan Slug

Contoh 1: Menggunakan nama file sebagai URL

---
title: Artikel Blog Pertama Saya
published: 2023-09-09
---

File: src/content/posts/artikel-blog-pertama-saya.md

URL: /posts/artikel-blog-pertama-saya

Contoh 2: Kustom Slug

---
title: Artikel Blog Pertama Saya
published: 2023-09-09
slug: halo-dunia
---

File: src/content/posts/artikel-blog-pertama-saya.md

URL: /posts/halo-dunia

Contoh 3: Menggunakan Slug untuk nama file bahasa lain

---
title: Cara Menggunakan Tema Blog Neko
published: 2023-09-09
slug: cara-menggunakan-tema-blog-neko
---

File: src/content/posts/如何使用Neko博客主题.md

URL: /posts/cara-menggunakan-tema-blog-neko

Saran Penggunaan Slug

Gunakan bahasa Inggris dan tanda hubung: my-awesome-post alih-alih my awesome post
Tetap ringkas: Hindari slug yang terlalu panjang
Deskriptif: Biarkan URL mencerminkan isi artikel
Hindari karakter khusus: Hanya gunakan huruf, angka, dan tanda hubung
Konsistensi: Gunakan pola penamaan yang serupa di seluruh blog

Catatan

Setelah slug diatur dan dipublikasikan, disarankan untuk tidak mengubahnya sembarangan agar tidak memengaruhi SEO dan tautan yang sudah ada.
Jika beberapa artikel menggunakan slug yang sama, artikel yang lebih baru akan menimpa yang sebelumnya.
Slug akan secara otomatis dikonversi menjadi huruf kecil.

Penjelasan Detail Sistem Tata Letak Neko

Ahmad Abqory — Sat, 03 Jan 1970 00:00:00 GMT

📖 Ringkasan

Neko menyediakan sistem tata letak yang fleksibel, memungkinkan Anda menyesuaikan presentasi visual blog berdasarkan kebutuhan konten dan preferensi pribadi. Sistem tata letak ini terutama terdiri dari dua dimensi: Tata Letak Sidebar dan Tata Letak Daftar Artikel, yang bekerja sama untuk menentukan struktur keseluruhan halaman.

Artikel ini akan menjelaskan berbagai mode tata letak Neko, karakteristiknya, skenario penggunaan, serta efek dari berbagai kombinasi tata letak.

I. Sistem Tata Letak Sidebar

Sidebar adalah komponen penting dari halaman blog, digunakan untuk menampilkan navigasi, kategori, tag, statistik, dan konten tambahan lainnya. Neko mendukung dua mode tata letak sidebar.

1.1 Mode Sidebar Kiri (position: "left")

Karakteristik

Sidebar terpaku di sisi kiri halaman.
Area konten utama berada di sisi kanan.
Sesuai dengan kebiasaan membaca dari kiri ke kanan.
Cocok untuk menampilkan informasi penting seperti navigasi dan kategori.

Struktur Tata Letak

Skenario Penggunaan

Gaya blog tradisional.
Blog yang menekankan pada navigasi dan kategori.
Blog pribadi yang perlu menonjolkan profil pengguna.
Skenario di mana konten adalah fokus utama dan informasi tambahan adalah pelengkap.

:::tip Setelah mengaktifkan sidebar tunggal di sisi kiri, navigasi daftar isi artikel (TOC) yang biasanya ada di sidebar kanan pada halaman detail artikel akan menjadi tidak aktif.

Sebagai gantinya, navigasi daftar isi akan menggunakan mode melayang (floating) yang perlu diklik secara manual untuk muncul.

Namun, Anda dapat mengatur apakah sidebar kanan tetap muncul di halaman detail artikel melalui konfigurasi showRightSidebarOnPostPage.

Jika position diatur ke left dan opsi ini diaktifkan, halaman detail artikel akan menampilkan sidebar ganda (kiri & kanan), sementara halaman beranda dan lainnya tetap menggunakan sidebar tunggal kiri.

Skenario ini cocok bagi Anda yang hanya ingin menggunakan sidebar kiri secara umum, tetapi ingin tetap menggunakan komponen seperti daftar isi di sidebar kanan pada halaman artikel. :::

Contoh Konfigurasi

// src/config/sidebarConfig.ts
export const sidebarLayoutConfig: SidebarLayoutConfig = {
  enable: true,
  position: "left", // Sidebar kiri
  showRightSidebarOnPostPage: true, // Apakah menampilkan sidebar kanan di halaman artikel
};

1.2 Mode Sidebar Ganda (position: "both")

Karakteristik

Sidebar ada di sisi kiri dan kanan secara bersamaan.
Area konten utama berada di tengah.
Memaksimalkan penggunaan ruang layar.
Dapat menampilkan lebih banyak informasi tambahan.
Cocok untuk monitor layar lebar (widescreen).

Struktur Tata Letak

Skenario Penggunaan

Penjelajahan di perangkat desktop layar lebar.
Blog dengan kepadatan informasi yang tinggi.
Perlu menampilkan banyak konten pendukung.
Blog teknis yang bersifat profesional.

Contoh Konfigurasi

// src/config/sidebarConfig.ts
export const sidebarLayoutConfig: SidebarLayoutConfig = {
  enable: true,
  position: "both", // Sidebar ganda

II. Sistem Tata Letak Daftar Artikel

Daftar artikel adalah inti dari halaman beranda dan arsip blog. Neko menyediakan dua cara penyajian dan mendukung berbagai konfigurasi grid.

2.1 Mode Daftar / List (defaultMode: "list")

Karakteristik

Tersusun vertikal dalam satu kolom.
Menampilkan gambar sampul artikel.
Menampilkan lebih banyak ringkasan artikel.
Cocok untuk pengalaman membaca yang mendalam.

Struktur Tata Letak List

Kelebihan

✅ Dampak visual yang kuat, gambar sampul menarik perhatian.
✅ Dapat menampilkan lebih banyak informasi artikel (ringkasan, tag, dll).
✅ Cocok untuk blog dengan konten gambar yang kaya.
✅ Ramah perangkat seluler, satu kolom lebih mudah dibaca.
✅ Kompatibel dengan semua konfigurasi sidebar (tunggal maupun ganda).

Contoh Konfigurasi

// src/config/siteConfig.ts
export const siteConfig: SiteConfig = {
  postListLayout: {
    defaultMode: "list", // Mode daftar
    allowSwitch: true,   // Mengizinkan pengguna berpindah mode
  },
};

2.2 Mode Grid (defaultMode: "grid")

Karakteristik

Tersusun horizontal dalam beberapa kolom (mendukung 2 atau 3 kolom).
Tata letak ringkas, kepadatan informasi tinggi.
Cocok untuk penjelajahan cepat.

2.2.1 Grid Dua Kolom (Columns: 2)

Ini adalah konfigurasi default untuk mode grid, cocok untuk sebagian besar skenario.

2.2.2 Grid Tiga Kolom (Columns: 3) ✨ Baru

Pada perangkat layar lebar, Anda dapat mengaktifkan mode grid tiga kolom untuk meningkatkan kepadatan informasi lebih lanjut.

⚠️ Perhatian: Mode grid tiga kolom hanya berfungsi pada Mode Sidebar Kiri (atau tanpa sidebar). Jika Anda mengaktifkan sidebar ganda, sistem akan otomatis kembali ke grid dua kolom untuk memastikan kartu artikel memiliki lebar tampilan yang cukup.

Contoh Konfigurasi

// src/config/siteConfig.ts
export const siteConfig: SiteConfig = {
  postListLayout: {
    defaultMode: "grid",
    allowSwitch: true,
    grid: {
      masonry: true,  // Mengaktifkan efek masonry (air terjun)
      columns: 3,      // Diatur ke mode 3 kolom (hanya berlaku pada sidebar tunggal)
    },
  },
};

2.3 Tata Letak Masonry (Air Terjun)

Mode grid Neko dilengkapi dengan dukungan tata letak masonry cerdas, yang memecahkan masalah ruang kosong akibat perbedaan tinggi kartu pada artikel yang mencampur teks dan gambar.

[Image showing a masonry or waterfall layout where items of different heights are packed tightly together]

Tipografi Cerdas: Menggunakan distribusi pola-Z (bergantian kiri-kanan), menjaga urutan kronologis artikel dengan ketat.
Menghilangkan Ruang Kosong: Menghitung posisi setiap kartu secara presisi melalui pemosisian absolut, sehingga kartu menempel rapat pada kartu di baris atasnya.
Konfigurasi Fleksibel: Anda dapat mengaktifkan atau menonaktifkan fitur ini melalui opsi postListLayout.grid.masonry di siteConfig.ts.

III. Panduan Kombinasi Tata Letak

Neko memungkinkan Anda mengombinasikan sidebar dan tata letak daftar artikel secara bebas. Berikut adalah penjelasan efek dari berbagai kombinasi tersebut.

3.1 Sidebar Kiri + Mode Grid

Ini adalah kombinasi yang paling fleksibel. Anda dapat memilih grid 2 kolom atau 3 kolom.

Mode 2 Kolom: Tata letak grid klasik, lebar kartu pas, nyaman dibaca.
Mode 3 Kolom: Cocok untuk layar lebar (≥1024px), menampilkan lebih banyak konten dalam satu layar, memberikan efek visual yang luar biasa.

3.2 Sidebar Ganda + Mode Grid

Pada versi lama, kombinasi ini dinonaktifkan. Namun pada versi terbaru Neko, kami telah melepaskan batasan ini, memungkinkan sidebar ganda hidup berdampingan dengan mode grid.

Karakteristik & Batasan:

Paksa Dua Kolom: Meskipun Anda mengonfigurasi columns: 3, dalam mode ini akan dipaksa menjadi 2 kolom.
Ruang Ringkas: Karena ada sidebar di kiri dan kanan, area konten utama di tengah menjadi relatif lebih sempit.
Kepadatan Informasi Sangat Tinggi: Ini adalah tata letak dengan kepadatan informasi tertinggi, cocok untuk situs yang perlu menampilkan banyak informasi navigasi sekaligus daftar artikel.

3.3 Saran Pemilihan Tata Letak

Mode Sidebar	Mode Daftar Artikel	Rekomendasi	Skenario Penggunaan
Sidebar Kiri	Mode List	⭐⭐⭐⭐⭐	Blog fotografi, desain, gaya hidup; menekankan gambar dan imersi
Sidebar Kiri	Grid 2 Kolom	⭐⭐⭐⭐⭐	Blog teknis, catatan; keseimbangan antara membaca dan efisiensi pencarian
Sidebar Kiri	Grid 3 Kolom	⭐⭐⭐⭐⭐	Situs dengan volume konten besar, pengalaman layar lebar yang luar biasa
Sidebar Ganda	Mode List	⭐⭐⭐⭐⭐	Situs yang perlu menampilkan banyak informasi di sidebar
Sidebar Ganda	Grid 2 Kolom	⭐⭐⭐⭐⭐	Gaya geek, mengejar kepadatan informasi tertinggi

IV. Perilaku Tata Letak Responsif

Sistem tata letak Neko memiliki desain responsif cerdas yang akan menyesuaikan secara otomatis berdasarkan ukuran layar.

4.1 Aturan Penurunan (Downgrade) Cerdas

Untuk memastikan pengalaman membaca terbaik, sistem akan menyesuaikan tata letak secara otomatis saat layar menyempit:

Grid 3 Kolom -> Grid 2 Kolom: Ketika lebar layar tidak cukup untuk 3 kolom (atau saat mengaktifkan sidebar ganda), otomatis turun menjadi mode daftar tunggal.
Mode Grid -> Mode List: Ketika lebar layar kurang dari 1200px (tablet dan ponsel), mode grid akan otomatis beralih ke mode daftar satu kolom untuk menjaga keterbacaan konten kartu.
Sidebar Ganda -> Sidebar Kiri: Ketika lebar layar kurang dari 1200px, sidebar kanan akan otomatis disembunyikan, dan navigasi daftar isi artikel akan beralih menjadi navigasi melayang.

V. Pertanyaan Umum (FAQ)

Q1: Mengapa saya sudah mengatur grid 3 kolom, tetapi hanya muncul 2 kolom?

A: Harap periksa hal berikut:

Apakah Anda mengaktifkan sidebar ganda (position: "both")? Dalam mode sidebar ganda, grid dipaksa menjadi 2 kolom.
Apakah lebar layar cukup? Mode 3 kolom biasanya memerlukan lebar layar ≥1024px.

Q2: Mengapa efek grid tidak terlihat di ponsel?

A: Untuk menjaga pengalaman membaca, Neko akan memaksa peralihan ke mode list saat lebar layar di bawah 1200px. Layar ponsel terlalu sempit untuk menampilkan grid multikolom.

Q3: Di mana tombol pengalih tata letak berada?

A: Tombol pengalih tata letak berada di sisi kanan bilah navigasi (navbar). Tombol ini hanya muncul pada lebar layar ≥ 1200px, karena pada layar kecil sistem memaksa penggunaan mode list sehingga tidak perlu pengalihan.

VI. Kesimpulan

Sistem tata letak versi baru Neko memberikan Anda kebebasan yang lebih besar. Baik itu mengejar dampak visual Grid Tiga Kolom, maupun mengejar kepadatan informasi Grid Sidebar Ganda, semuanya dapat Anda wujudkan melalui konfigurasi sederhana.

Kami menyarankan Anda mencoba berbagai kombinasi untuk menemukan bentuk blog yang paling sesuai dengan jenis konten dan preferensi perangkat pembaca target Anda.

Contoh Blok Kode Neko

Ahmad Abqory — Sat, 03 Jan 1970 00:00:00 GMT

Di sini, kita akan mengeksplorasi cara menggunakan Expressive Code untuk menampilkan blok kode. Contoh yang disediakan didasarkan pada dokumentasi resmi, Anda dapat merujuk ke sana untuk detail lebih lanjut.

Expressive Code

Syntax Highlighting

Syntax Highlighting Reguler

console.log('Kode ini memiliki syntax highlighting!')

Render ANSI Escape Sequences

ANSI colors:
- Regular: [31mRed[0m [32mGreen[0m [33mYellow[0m [34mBlue[0m [35mMagenta[0m [36mCyan[0m
- Bold:    [1;31mRed[0m [1;32mGreen[0m [1;33mYellow[0m [1;34mBlue[0m [1;35mMagenta[0m [1;36mCyan[0m
- Dimmed:  [2;31mRed[0m [2;32mGreen[0m [2;33mYellow[0m [2;34mBlue[0m [2;35mMagenta[0m [2;36mCyan[0m

256 colors (showing colors 160-177):
[38;5;160m160 [38;5;161m161 [38;5;162m162 [38;5;163m163 [38;5;164m164 [38;5;165m165[0m
[38;5;166m166 [38;5;167m167 [38;5;168m168 [38;5;169m169 [38;5;170m170 [38;5;171m171[0m
[38;5;172m172 [38;5;173m173 [38;5;174m174 [38;5;175m175 [38;5;176m176 [38;5;177m177[0m

Full RGB colors:
[38;2;34;139;34mForestGreen - RGB(34, 139, 34)[0m

Text formatting: [1mBold[0m [2mDimmed[0m [3mItalic[0m [4mUnderline[0m

Editor dan Terminal Frames

Frame Editor Kode

console.log('Contoh atribut judul')

<div>Contoh komentar nama file</div>

Frame Terminal

echo "Frame terminal ini tidak memiliki judul"

Write-Output "Yang ini punya judul!"

Mengganti Tipe Frame (Override)

echo "Lihat, tanpa frame!"

# Jika tidak di-override, ini akan menjadi frame terminal
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail

Penanda Teks dan Baris

Menandai Seluruh Baris dan Rentang Baris

// Baris 1 - Ditandai lewat nomor baris
// Baris 2
// Baris 3
// Baris 4 - Ditandai lewat nomor baris
// Baris 5
// Baris 6
// Baris 7 - Ditandai lewat rentang "7-8"
// Baris 8 - Ditandai lewat rentang "7-8"

Memilih Tipe Penanda Baris (mark, ins, del)

function demo() {
  console.log('Baris ini ditandai sebagai dihapus')
  // Baris ini dan baris berikutnya ditandai sebagai disisipkan
  console.log('Ini adalah baris sisipan kedua')

  return 'Baris ini menggunakan tipe penanda default netral'
}

Menambahkan Label pada Penanda Baris

// labeled-line-markers.jsx
<button
  role="button"
  {...props}
  value={value}
  className={buttonClassName}
  disabled={disabled}
  active={active}
>
  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

Menambahkan Label Panjang pada Baris Terpisah

// labeled-line-markers.jsx
<button
  role="button"
  {...props}

  value={value}
  className={buttonClassName}

  disabled={disabled}
  active={active}
>

  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

Menggunakan Sintaks Mirip Diff

+Baris ini akan ditandai sebagai disisipkan
-Baris ini akan ditandai sebagai dihapus
Ini adalah baris reguler

--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+ini adalah file diff yang sebenarnya
-semua konten akan tetap tidak dimodifikasi
 tidak ada spasi putih yang akan dihapus juga

Menggabungkan Syntax Highlighting dan Sintaks Mirip Diff

  function iniAdalahJavaScript() {
    // Seluruh blok akan di-highlight sebagai JavaScript,
    // dan kita masih bisa menambahkan penanda diff di dalamnya!
-   console.log('Kode lama yang akan dihapus')
+   console.log('Kode baru yang berkilau!')
  }

Menandai Teks Tertentu dalam Baris

function demo() {
  // Menandai teks tertentu di dalam baris
  return 'Mendukung beberapa kecocokan untuk teks tertentu';
}

Regular Expressions (Regex)

console.log('Kata yes dan yep akan ditandai.')

Meng-escape Garis Miring (Slash)

echo "Test" > /home/test.txt

Memilih Tipe Penanda Inline (mark, ins, del)

function demo() {
  console.log('Ini adalah tipe penanda disisipkan (inserted) dan dihapus (deleted)');
  // statement return menggunakan tipe penanda default
  return true;
}

Auto Wrap (Pembungkusan Kata)

Auto Wrap

Mengonfigurasi Auto Wrap per Blok

// Contoh mengaktifkan pembungkusan kata (wrap)
function getLongString() {
  return 'Ini adalah string yang sangat panjang yang kemungkinan besar tidak akan muat di ruang yang tersedia kecuali kontainernya sangat lebar'
}

// Contoh wrap=false
function getLongString() {
  return 'Ini adalah string yang sangat panjang yang kemungkinan besar tidak akan muat di ruang yang tersedia kecuali kontainernya sangat lebar'
}

Mengonfigurasi Indentasi pada Wrap

// Contoh preserveIndent (diaktifkan secara default)
function getLongString() {
  return 'Ini adalah string yang sangat panjang yang kemungkinan besar tidak akan muat di ruang yang tersedia kecuali kontainernya sangat lebar'
}

// Contoh preserveIndent=false
function getLongString() {
  return 'Ini adalah string yang sangat panjang yang kemungkinan besar tidak akan muat di ruang yang tersedia kecuali kontainernya sangat lebar'
}

Bagian yang Dapat Dilipat (Collapsible Sections)

Collapsible Sections

// Semua kode pengaturan boilerplate ini akan dilipat
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'

const engine = someBoilerplateEngine(evenMoreBoilerplate())

// Bagian kode ini terlihat secara default
engine.doSomething(1, 2, 3, calcFn)

function calcFn() {
  // Anda dapat memiliki beberapa bagian yang dilipat
  const a = 1
  const b = 2
  const c = a + b

  // Ini akan tetap terlihat
  console.log(`Hasil perhitungan: ${a} + ${b} = ${c}`)
  return c
}

// Semua kode hingga akhir blok akan dilipat kembali
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: 'Akhir dari contoh kode boilerplate' })

Nomor Baris

Menampilkan Nomor Baris per Blok

// Blok kode ini akan menampilkan nomor baris
console.log('Salam dari baris ke-2!')
console.log('Saya ada di baris ke-3')

// Blok ini menonaktifkan nomor baris
console.log('Halo?')
console.log('Maaf, apakah Anda tahu saya di baris mana?')

Mengubah Nomor Baris Awal

console.log('Salam dari baris ke-5!')
console.log('Saya ada di baris ke-6')

Contoh Rumus Matematika KaTeX

Ahmad Abqory — Fri, 02 Jan 1970 00:00:00 GMT

Artikel ini menampilkan dukungan rendering rumus matematika KaTeX pada tema Neko.

Rumus Inline (Dalam Baris)

Rumus inline menggunakan sepasang simbol $ untuk membungkus teks.

Contoh: Rumus Euler $e^{i\pi} + 1 = 0$ adalah salah satu rumus terindah dalam matematika.

Persamaan massa-energi $E = mc^2$ juga sudah sangat dikenal luas.

Rumus Blok (Block)

Rumus blok menggunakan dua simbol $$ untuk membungkus teks, dan akan ditampilkan di tengah baris (centered).

$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$

$$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$

Contoh Kompleks

Matriks (Matrices)

$$ \begin{pmatrix} a & b \ c & d \end{pmatrix} \begin{pmatrix} \alpha & \beta \ \gamma & \delta \end{pmatrix} = \begin{pmatrix} a\alpha + b\gamma & a\beta + b\delta \ c\alpha + d\gamma & c\beta + d\delta \end{pmatrix} $$

Limit dan Penjumlahan (Limits and Sums)

$$ \sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $$

$$ \lim_{x \to 0} \frac{\sin x}{x} = 1 $$

Persamaan Maxwell (Maxwell's Equations)

$$ \begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \ \nabla \cdot \mathbf{B} &= 0 \ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \ \nabla \times \mathbf{B} &= \mu_0\mathbf{J} + \mu_0\varepsilon_0\frac{\partial \mathbf{E}}{\partial t} \end{aligned} $$

Persamaan Kimia (Chemical Equations)

$$ \ce{CH4 + 2O2 -> CO2 + 2H2O} $$

Simbol Lainnya

Simbol	Kode	Hasil Render
Alpha	`\alpha`	$\alpha$
Beta	`\beta`	$\beta$
Gamma	`\Gamma`	$\Gamma$
Pi	`\pi`	$\pi$
Infinity	`\infty`	$\infty$
Panah Kanan	`\rightarrow`	$\rightarrow$
Parsial	`\partial`	$\partial$

Untuk sintaks KaTeX lebih lanjut, silakan merujuk pada KaTeX Supported Functions.

Contoh Artikel Format MDX

Ahmad Abqory — Fri, 02 Jan 1970 00:00:00 GMT

import { Icon } from 'astro-icon/components'

:::tip Neko mendukung dua jenis artikel: MDX dan Markdown. Anda dapat mencampur kedua format ini dalam artikel Anda. Jika tidak ada kebutuhan konten yang sangat kompleks, format Markdown saja sudah cukup direkomendasikan. :::

Perbedaan antara Markdown dan MDX

Markdown (MD) adalah bahasa marka ringan yang memungkinkan pengguna menulis dokumen dalam format teks polos, yang kemudian dikonversi menjadi HTML terformat. MD populer karena sintaksnya yang sederhana dan mudah digunakan, sangat cocok untuk menulis dokumentasi dan artikel blog.
MDX adalah format yang memperluas sintaks Markdown, memungkinkan penyisipan kode JSX secara mulus di dalam dokumen Markdown. Melalui MDX, pengguna dapat menanamkan komponen React/Astro ke dalam dokumen, sehingga menghasilkan interaktivitas dan kedinamisan yang lebih kaya.

Fitur	Markdown	MDX
Sintaks Dasar	Mendukung (CommonMark)	Mendukung (CommonMark)
Tag HTML	Mendukung	Mendukung (sebagai JSX)
Impor Komponen	Tidak Mendukung	Mendukung (import)
Data Dinamis	Tidak Mendukung	Mendukung (Ekspresi JS)
Kustomisasi Gaya	Terbatas (class/style)	Fleksibel (className/CSS-in-JS)

Menggunakan Komponen

Ini adalah contoh penggunaan komponen ikon:


import { Icon } from 'astro-icon/components'

<div class="flex items-center gap-2 my-4">
<Icon name="fa6-solid:rocket" class="text-4xl text-red-500" />
<span>Roket Meluncur!</span>
</div>

<div class="flex items-center gap-2 my-4"> <Icon name="fa6-solid:rocket" class="text-4xl text-red-500" /> <span>Roket Meluncur!</span> </div>

Menggunakan JSX

Anda juga dapat menulis HTML/JSX secara langsung:


<div className="p-4 bg-blue-100 dark:bg-blue-900 rounded-lg my-4">
Ini adalah blok div dengan gaya kustom, menggunakan kelas Tailwind CSS.
</div>

## Ekspor Variabel Sederhana

export const year = new Date().getFullYear()

Tahun ini adalah tahun {year}.


export const year = new Date().getFullYear()

Tahun ini adalah tahun {year}.

Untuk informasi lebih lanjut, silakan lihat [Dokumentasi MDX](https://mdxjs.com/).

Diagram Mermaid di Markdown

Ahmad Abqory — Thu, 01 Jan 1970 00:00:00 GMT

Panduan Lengkap Diagram Mermaid di Markdown

Artikel ini mendemonstrasikan cara membuat berbagai diagram kompleks menggunakan Mermaid di dalam dokumen Markdown, termasuk diagram alir (flowchart), diagram urutan (sequence diagram), bagan Gantt, diagram kelas, dan diagram status.

Contoh Diagram Alir (Flowchart)

Diagram alir sangat cocok untuk merepresentasikan alur proses atau langkah-langkah algoritma.

graph TD
    A[Mulai] --> B{Pemeriksaan Kondisi}
    B -->|Ya| C[Langkah Proses 1]
    B -->|Tidak| D[Langkah Proses 2]
    C --> E[Sub-proses]
    D --> E
    subgraph E [Detail Sub-proses]
        E1[Sub-langkah 1] --> E2[Sub-langkah 2]
        E2 --> E3[Sub-langkah 3]
    end
    E --> F{Keputusan Lain}
    F -->|Opsi 1| G[Hasil 1]
    F -->|Opsi 2| H[Hasil 2]
    F -->|Opsi 3| I[Hasil 3]
    G --> J[Selesai]
    H --> J
    I --> J

Contoh Diagram Urutan (Sequence Diagram)

Diagram urutan menunjukkan interaksi antar objek seiring berjalannya waktu.

sequenceDiagram
    participant User as Pengguna
    participant WebApp as Aplikasi Web
    participant Server as Server
    participant Database as Database

    User->>WebApp: Mengirim permintaan login
    WebApp->>Server: Mengirim permintaan autentikasi
    Server->>Database: Memeriksa kredensial pengguna
    Database-->>Server: Mengembalikan data pengguna
    Server-->>WebApp: Mengembalikan hasil autentikasi
    
    alt Autentikasi Berhasil
        WebApp->>User: Menampilkan halaman selamat datang
        WebApp->>Server: Meminta data pengguna
        Server->>Database: Mengambil preferensi pengguna
        Database-->>Server: Mengembalikan pengaturan preferensi
        Server-->>WebApp: Mengembalikan data pengguna
        WebApp->>User: Memuat antarmuka personalisasi
    else Autentikasi Gagal
        WebApp->>User: Menampilkan pesan kesalahan
        WebApp->>User: Meminta input ulang
    end

Contoh Bagan Gantt (Gantt Chart)

Bagan Gantt sangat ideal untuk menampilkan kemajuan proyek dan lini masa (timeline).

gantt
    title Lini Masa Proyek Pengembangan Situs Web
    dateFormat  YYYY-MM-DD
    axisFormat  %m/%d
    
    section Tahap Desain
    Analisis Kebutuhan      :a1, 2023-10-01, 7d
    Desain UI               :a2, after a1, 10d
    Pembuatan Prototipe     :a3, after a2, 5d
    
    section Tahap Pengembangan
    Pengembangan Frontend   :b1, 2023-10-20, 15d
    Pengembangan Backend    :b2, after a2, 18d
    Desain Database         :b3, after a1, 12d
    
    section Tahap Pengujian
    Pengujian Unit          :c1, after b1, 8d
    Pengujian Integrasi     :c2, after b2, 10d
    Uji Penerimaan Pengguna :c3, after c2, 7d
    
    section Penerapan
    Penerapan Lingkungan Produksi :d1, after c3, 3d
    Rilis                         :milestone, after d1, 0d

Contoh Diagram Kelas (Class Diagram)

Diagram kelas menunjukkan struktur statis sistem, termasuk kelas, atribut, metode, dan hubungannya.

classDiagram
    class User {
        +String username
        +String password
        +String email
        +Boolean active
        +login()
        +logout()
        +updateProfile()
    }
    
    class Article {
        +String title
        +String content
        +Date publishDate
        +Boolean published
        +publish()
        +edit()
        +delete()
    }
    
    class Comment {
        +String content
        +Date commentDate
        +addComment()
        +deleteComment()
    }
    
    class Category {
        +String name
        +String description
        +addArticle()
        +removeArticle()
    }
    
    User "1" -- "*" Article : Menulis
    User "1" -- "*" Comment : Memposting
    Article "1" -- "*" Comment : Memiliki
    Article "1" -- "*" Category : Termasuk dalam

Contoh Diagram Status (State Diagram)

Diagram status menunjukkan urutan status yang dilalui objek selama siklus hidupnya.

stateDiagram-v2
    [*] --> Draf
    
    Draf --> DalamTinjauan : Ajukan
    DalamTinjauan --> Draf : Tolak
    DalamTinjauan --> Disetujui : Setujui
    Disetujui --> Dipublikasikan : Publikasikan
    Dipublikasikan --> Diarsipkan : Arsipkan
    Dipublikasikan --> Draf : Tarik Kembali
    
    state Dipublikasikan {
        [*] --> Aktif
        Aktif --> Tersembunyi : Sembunyikan Sementara
        Tersembunyi --> Aktif : Pulihkan
        Aktif --> [*]
        Tersembunyi --> [*]
    }
    
    Diarsipkan --> [*]

Contoh Diagram Lingkaran (Pie Chart)

Diagram lingkaran sangat cocok untuk menampilkan data proporsi dan persentase.

pie title Analisis Sumber Lalu Lintas Situs Web
    "Mesin Pencari" : 45.6
    "Akses Langsung" : 30.1
    "Media Sosial" : 15.3
    "Tautan Referensi" : 6.4
    "Sumber Lainnya" : 2.6

Kesimpulan

Mermaid adalah alat yang ampuh untuk membuat berbagai jenis diagram di dalam dokumen Markdown. Artikel ini telah mendemonstrasikan penggunaan diagram alir, diagram urutan, bagan Gantt, diagram kelas, diagram status, dan diagram lingkaran. Diagram-diagram ini dapat membantu Anda mengekspresikan konsep, proses, dan struktur data yang kompleks dengan lebih jelas.

Untuk menggunakan Mermaid, cukup tentukan bahasa mermaid di dalam blok kode dan deskripsikan diagram menggunakan sintaks teks yang ringkas. Mermaid akan secara otomatis mengubah deskripsi tersebut menjadi diagram visual yang indah.

Cobalah gunakan diagram Mermaid di artikel blog teknis atau dokumentasi proyek Anda berikutnya - mereka akan membuat konten Anda lebih profesional dan lebih mudah dipahami!

Panduan Markdown

emn178 — Thu, 01 Jan 1970 00:00:00 GMT

Ini adalah contoh yang menunjukkan cara menulis file Markdown. Dokumen ini merangkum sintaks inti dan ekstensi umum (GFM).

Elemen Blok
Elemen Inline
Lain-lain
- Tautan Otomatis
- Garis Miring Terbalik (Backslash Escapes)
HTML Inline

Elemen Blok

Paragraf dan Baris Baru

Paragraf

Tag HTML: <p>

Gunakan satu atau lebih baris kosong untuk memisahkan paragraf. (Baris yang hanya berisi spasi atau tab juga dianggap sebagai baris kosong.)

Kode: Ini akan menjadi satu baris.

Ini adalah paragraf kedua.

Pratinjau:

Ini akan menjadi satu baris.

Ini adalah paragraf kedua.

Baris Baru

Tag HTML: <br />

Tambahkan dua atau lebih spasi di akhir baris untuk menghasilkan baris baru (line break).

Kode: Ini tidak akan menjadi satu baris.

Pratinjau:

Ini tidak akan menjadi
satu baris.

Judul (Header)

Markdown mendukung dua gaya judul: Setext dan atx.

Setext

Tag HTML: <h1>, <h2>

Gunakan tanda sama dengan (=) untuk <h1> dan tanda hubung (-) untuk <h2>. Jumlah tanda tidak ditentukan, berfungsi sebagai "garis bawah".

Kode: Ini adalah H1 ============= Ini adalah H2 -------------

Pratinjau:

Ini adalah H1

Ini adalah H2

atx

Tag HTML: <h1> hingga <h6>

Gunakan 1-6 tanda pagar (#) di awal baris, sesuai dengan tingkatan <h1> hingga <h6>.

Kode: # Ini adalah H1 ## Ini adalah H2 ###### Ini adalah H6

Pratinjau:

Ini adalah H1

Ini adalah H2

Ini adalah H6

Kutipan (Blockquotes)

Tag HTML: <blockquote>

Markdown menggunakan simbol > gaya email untuk kutipan.

Kode: > Ini adalah kutipan dengan dua paragraf. Lorem ipsum dolor sit amet, > consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. > > Donec sit amet nisl. Aliquam semper ipsum sit amet velit.

Pratinjau:

Ini adalah kutipan dengan dua paragraf. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit.

Daftar (Lists)

Daftar Tidak Teratur (Unordered)

Tag HTML: <ul>

Gunakan asterisk (*), tanda tambah (+), atau tanda hubung (-).

Kode: * Merah * Hijau * Biru

Pratinjau:

Merah
Hijau
Biru

Daftar Teratur (Ordered)

Tag HTML: <ol>

Gunakan angka diikuti titik:

Kode: 1. Burung 2. Kucing 3. Ikan

Pratinjau:

Burung
Kucing
Ikan

Blok Kode

Tag HTML: <pre>

Indentasi setiap baris dengan setidaknya 4 spasi atau 1 tab.

Kode: Ini adalah blok kode.

Pratinjau:

Ini adalah blok kode.

Fenced Code Blocks (Blok Kode Berpagar)

Gunakan tiga backtick (```).

Kode: javascript function hello() { console.log("Halo Neko!"); }

Pratinjau:

function hello() {
  console.log("Halo Neko!");
}

Tabel

Tag HTML: <table>

Gunakan garis vertikal (|) untuk memisahkan kolom dan tanda hubung (-) untuk header. Gunakan titik dua (:) untuk perataan.

Kode:

Kiri	Tengah	Kanan
Lembar 1	Data A	100
Lembar 2	Data B	200

Pratinjau:

| Kiri | Tengah | Kanan | | :--- | :----: | ----: | | Lembar 1 | Data A | 100 | | Lembar 2 | Data B | 200 |

Elemen Inline

Tautan (Links)

Format: [Teks](URL "Judul Opsional")

Kode: Ini adalah contoh tautan.

Pratinjau:

Ini adalah contoh tautan.

Penekanan (Emphasis)

Gunakan satu simbol untuk miring (italic) dan dua simbol untuk tebal (bold).

Kode: miring dan tebal

Pratinjau:

miring dan tebal

Gambar

Format: ![Teks Alamat](URL "Judul")

Kode:

Pratinjau:

Coretan (Strikethrough)

Gunakan dua tilde (~~).

Kode: ~~Teks yang salah.~~

Pratinjau:

Teks yang salah.

Lain-lain

Garis Miring Terbalik (Backslash Escapes)

Gunakan \ untuk menampilkan karakter yang biasanya digunakan sebagai sintaks Markdown.

Kode: bukan miring

Pratinjau:

bukan miring

HTML Inline

Anda dapat menggunakan tag HTML langsung jika diperlukan.

Kode: <u>Teks bergaris bawah</u>

Pratinjau:

<u>Teks bergaris bawah</u>

Fitur Ekstensi Markdown

Ahmad Abqory — Thu, 01 Jan 1970 00:00:00 GMT

Kartu Repositori GitHub

Anda dapat menambahkan kartu dinamis yang terhubung ke repositori GitHub. Saat halaman dimuat, informasi repositori akan diambil langsung dari GitHub API.

::github{repo="CuteLeaf/Firefly"}

Gunakan kode ::github{repo="CuteLeaf/Firefly"} untuk membuat kartu repositori GitHub.

::github{repo="CuteLeaf/Firefly"}

Konfigurasi Kotak Peringatan (Admonitions)

Neko menggunakan plugin rehype-callouts, yang mendukung tiga gaya tema kotak peringatan: GitHub, Obsidian, dan VitePress. Anda dapat mengonfigurasinya di dalam src/config/siteConfig.ts:

// src/config/siteConfig.ts
export const siteConfig: SiteConfig = {
  // ...
  rehypeCallouts: {
    // Opsi: "github" | "obsidian" | "vitepress"
    theme: "github",
  },
  // ...
};

Catatan: Perubahan konfigurasi memerlukan restart server pengembangan (dev server) agar dapat diterapkan.

Berikut adalah daftar tipe yang didukung oleh masing-masing tema. Setiap gaya tema memiliki desain dan sintaks yang berbeda, Anda dapat memilih sesuai preferensi.

1. Gaya Tema GitHub

Ini adalah 5 tipe dasar yang didukung secara resmi oleh GitHub.

Sintaks Dasar

> [!NOTE] NOTE
> Menonjolkan informasi yang harus dipertimbangkan pengguna.

> [!TIP] TIP
> Informasi opsional untuk membantu pengguna lebih berhasil.

> [!IMPORTANT] IMPORTANT
> Informasi krusial yang diperlukan agar pengguna berhasil.

> [!WARNING] WARNING
> Konten kritis yang memerlukan perhatian segera.

> [!CAUTION] CAUTION
> Konsekuensi negatif potensial dari suatu tindakan.

> [!NOTE] Judul Kustom
> Ini adalah contoh dengan judul kustom.

2. Gaya Tema Obsidian

Gaya Obsidian mendukung sangat banyak tipe dan alias.

<details> <summary>Klik untuk membuka daftar sintaks Obsidian</summary>

> [!NOTE] NOTE
> Blok catatan umum.

> [!ABSTRACT] ABSTRACT
> Abstrak dari artikel.

> [!SUMMARY] SUMMARY
> Ringkasan artikel (sama dengan Abstract).

> [!TLDR] TLDR
> Terlalu panjang, jangan dibaca (sama dengan Abstract).

> [!INFO] INFO
> Memberikan informasi tambahan.

> [!TODO] TODO
> Hal-hal yang perlu diselesaikan.

> [!TIP] TIP
> Kiat atau petunjuk praktis.

> [!HINT] HINT
> Petunjuk (sama dengan Tip).

> [!IMPORTANT] IMPORTANT
> Informasi penting (Gaya Obsidian biasanya menggunakan ikon serupa).

> [!SUCCESS] SUCCESS
> Operasi berhasil.

> [!CHECK] CHECK
> Pemeriksaan lulus (sama dengan Success).

> [!DONE] DONE
> Selesai (sama dengan Success).

> [!QUESTION] QUESTION
> Mengajukan pertanyaan.

> [!HELP] HELP
> Mencari bantuan (sama dengan Question).

> [!FAQ] FAQ
> Pertanyaan yang sering diajukan (sama dengan Question).

> [!WARNING] WARNING
> Informasi peringatan.

> [!CAUTION] CAUTION
> Hal yang perlu diperhatikan (sama dengan Warning).

> [!ATTENTION] ATTENTION
> Menarik perhatian (sama dengan Warning).

> [!FAILURE] FAILURE
> Operasi gagal.

> [!FAIL] FAIL
> Gagal (sama dengan Failure).

> [!MISSING] MISSING
> Konten hilang (sama dengan Failure).

> [!DANGER] DANGER
> Peringatan operasi berbahaya.

> [!ERROR] ERROR
> Informasi kesalahan (sama dengan Danger).

> [!BUG] BUG
> Melaporkan kutu (bug) perangkat lunak.

> [!EXAMPLE] EXAMPLE
> Menampilkan sebuah contoh.

> [!QUOTE] QUOTE
> Mengutip sebuah kalimat.

> [!CITE] CITE
> Sitasi (sama dengan Quote).

> [!NOTE] Judul Kustom
> Ini adalah contoh dengan judul kustom.

</details>

3. Gaya Tema VitePress

Gaya VitePress menawarkan tampilan default yang modern dan datar (flat). Saat ini hanya mencakup 5 tipe dasar yang konsisten dengan GitHub.

<details> <summary>Klik untuk membuka daftar sintaks VitePress</summary>

> [!NOTE] NOTE
> Setara dengan Note di GitHub.

> [!TIP] TIP
> Setara dengan Tip di GitHub.

> [!IMPORTANT] IMPORTANT
> Setara dengan Important di GitHub.

> [!WARNING] WARNING
> Setara dengan Warning di GitHub.

> [!CAUTION] CAUTION
> Setara dengan Caution di GitHub.

> [!TIP] Judul Kustom
> Gaya VitePress juga mendukung judul kustom.

</details>

4. Sintaks Gaya Docusaurus

Hanya mendukung sintaksnya saja, gaya tampilan tetap mengikuti salah satu dari tiga tema di atas.

<details> <summary>Klik untuk membuka daftar sintaks Docusaurus</summary>

Mendukung tipe kotak peringatan berikut: note tip important warning caution

:::note
Menonjolkan informasi yang harus dipertimbangkan pengguna, bahkan saat memindai cepat.
:::

:::tip
Informasi opsional untuk membantu pengguna lebih berhasil.
:::

:::important
Informasi krusial yang diperlukan agar pengguna berhasil.
:::

:::warning
Konten kritis yang memerlukan perhatian segera karena risiko potensial.
:::

:::caution
Konsekuensi negatif potensial dari suatu tindakan.
:::

:::tip[Judul Kustom]
Informasi opsional untuk membantu pengguna lebih berhasil.
:::

</details>

Spoiler

Anda dapat menambahkan fitur spoiler pada teks. Teks di dalamnya juga mendukung sintaks Markdown.

Konten :spoiler[telah disembunyikan haha]!

Konten :spoiler[telah disembunyikan **haha**]!

Menyematkan Video dalam Artikel

Ahmad Abqory — Thu, 01 Jan 1970 00:00:00 GMT

Cukup salin kode sematan (embed code) dari YouTube atau platform lainnya, lalu tempelkan ke dalam file Markdown Anda.

---
title: Menyematkan Video dalam Artikel
published: 2023-10-19
// ...
---

<iframe width="100%" height="468" src="[https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU](https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU)_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>

YouTube

Bilibili