Velora

#Project Overview

Velora adalah sebuah template blog MDX open-source yang dibangun untuk developer yang menginginkan pengalaman blogging yang modern, fleksibel, dan type-safe. Velora dibangun menggunakan Next.js, Tailwind CSS, MDX, dan Velite, dengan fokus utama pada rendering code block yang sangat kaya menggunakan Shiki dan Rehype Pretty Code.

Velora dirancang untuk menghilangkan kebutuhan membangun content pipeline dari nol dengan menyediakan komponen, utilitas, dan konfigurasi siap pakai, sehingga developer dapat lebih fokus pada penulisan konten dibandingkan pengaturan tooling.

Project ini juga berperan sebagai codebase utama untuk Website Portfolio V3 saya, di mana berbagai fitur tambahan dan kustomisasi diterapkan di atas Velora.

#Latar Belakang & Motivasi

Velora mulai dikembangkan pada Desember 2025, bersamaan dengan proses redesign besar pada website portofolio dan blog pribadi saya.

Sebelumnya, portofolio dan blog saya dibangun menggunakan Next.js, Tailwind CSS, dan Markdown biasa. Meskipun fungsional, setup tersebut memiliki beberapa keterbatasan:

• Konfigurasi frontmatter membutuhkan banyak pekerjaan manual
• Syntax highlighting mengandalkan highlight.js yang hanya mendukung highlighting dasar
• Code block tidak memiliki fitur lanjutan seperti line numbers, line highlighting, dan diff notation

Saat saya mulai meneliti cara membuat pengalaman code block yang lebih kaya—termasuk line highlighting, word highlighting, dan visualisasi diff—saya menemukan Shiki dan Rehype Pretty Code, yang juga digunakan oleh tools modern seperti Nextra dan Expressive Code.

Dari situlah muncul ketertarikan untuk membangun setup blog baru berbasis Next.js, MDX, dan content pipeline modern, yang pada akhirnya melahirkan Velora.

#Mengapa Velite, Shiki, dan Rehype Pretty Code

#Velite sebagai Content Pipeline

Velora menggunakan Velite sebagai content pipeline, yang memungkinkan konten blog menjadi:

• Type-safe, didefinisikan menggunakan TypeScript
• Schema-validated menggunakan Zod
• Mudah dirawat dan dikembangkan dengan field serta metadata kustom

Dengan Velite, konten MDX berubah menjadi data terstruktur, bukan sekadar file Markdown tanpa tipe, sehingga lebih mudah diskalakan dan dipelihara dalam jangka panjang.

#Shiki untuk Syntax Highlighting

Setelah membandingkan beberapa solusi syntax highlighting—seperti highlight.js, Prism.js, dan Code Hike—saya memilih Shiki dengan beberapa pertimbangan:

• Menggunakan TextMate grammar engine yang sama dengan VS Code
• Menghasilkan syntax highlighting yang sangat akurat dan menarik secara visual
• Bersifat static dan build-time, sehingga performanya lebih baik
• Tidak membutuhkan JavaScript tambahan di runtime untuk highlighting

#Rehype Pretty Code untuk Code Block Lanjutan

Rehype Pretty Code mentransformasi MDX menjadi HTML dengan class dan atribut khusus, sehingga memungkinkan berbagai fitur code block lanjutan seperti:

• Line numbers
• Line dan word highlighting
• Inline diff dan diff notation
• Focused dan unfocused lines
• Highlighting error dan warning
• Dukungan ANSI color
• Inline code dengan penanda bahasa

Kombinasi tools ini menjadi fondasi dari pengalaman code block yang sangat kaya di Velora.

#Key Features

Velora menyediakan setup blog yang lengkap dengan fitur-fitur berikut:

• Konten berbasis MDX dengan custom React components

• Desain modern dan responsif menggunakan Tailwind CSS dan Shadcn UI

• Pagination dan navigasi konten yang terstruktur

• Dynamic Open Graph image generation untuk kebutuhan SEO

• Dukungan code block yang sangat kaya, meliputi:

  • Syntax highlighting dengan Shiki dan Rehype Pretty Code
  • Line numbers dan line highlighting
  • Word dan group highlighting
  • Inline diff dan diff notation
  • Code group dan nested code block
  • Copy button, title bar, dan custom language labels

• Dukungan Docker untuk konsistensi environment pengembangan

• Integrasi Velite untuk content pipeline yang type-safe

• Integrasi Giscus untuk fitur diskusi dan komentar

• Dukungan analytics bawaan (Umami, Google Analytics, PostHog)

• CI/CD pipeline menggunakan GitHub Actions

• Semantic Release untuk versioning otomatis

#Hubungan dengan Website Portfolio V3

Meskipun Velora sepenuhnya open-source, repository Website Portfolio V3 saya bersifat closed-source.

Velora berperan sebagai fondasi utama untuk Portfolio V3, namun versi portofolio tersebut memiliki tambahan:

• Kustomisasi layout
• Fitur khusus untuk kebutuhan portofolio
• Struktur navigasi dan konten yang disesuaikan untuk use case portofolio

Sementara itu, Velora secara sengaja difokuskan sebagai template blog general-purpose, agar lebih mudah digunakan dan dikembangkan oleh developer lain.

#What I Learned

Melalui pengembangan Velora, saya mendapatkan pemahaman yang lebih mendalam terkait:

• Membangun content pipeline MDX modern
• Merancang sistem konten yang type-safe menggunakan Velite dan Zod
• Teknik lanjutan untuk syntax highlighting dan rendering code
• Pertimbangan performa antara static highlighting dan runtime highlighting
• Menyusun project open-source agar mudah diperluas
• Menjaga pemisahan yang jelas antara template reusable dan website production yang ter-kustomisasi

#Mengapa Project Ini Penting

Velora bukan sekadar template, melainkan representasi eksplorasi saya terhadap platform technical writing modern dan developer-focused user experience.

Project ini penting karena:

• Menyelesaikan masalah nyata dalam technical blogging
• Mendorong reuse dan kustomisasi melalui open source
• Menunjukkan pengambilan keputusan tooling dan arsitektur yang matang
• Menjadi fondasi bagi project personal maupun kontribusi komunitas

#Kesimpulan

Velora adalah template blog open-source yang menggabungkan content pipeline modern, code block yang sangat kaya, dan arsitektur yang ramah developer.

Project ini merefleksikan pendekatan saya dalam membangun tooling yang praktis, mudah dirawat, dan dirancang dengan perspektif developer, sekaligus menjadi tulang punggung bagi website portofolio pribadi dan project berbasis konten lainnya di masa depan.