Referensi Frontmatter Schema di Sitemas

Frontmatter adalah metadata yang ditulis di awal setiap artikel MDX. Sitemas menggunakan content collection schema untuk validasi frontmatter. Artikel ini adalah referensi lengkap semua field yang tersedia.

Schema Definition

Schema didefinisikan di src/content/config.ts:

import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
    type: 'content',
    schema: ({ image }) => z.object({
        title: z.string(),
        description: z.string(),
        heroImage: image().optional(),
        category: z.enum(['Dokumentasi', 'Tutorial', 'Insight', 'Tips']),
        topic: z.enum([
            'Development', 'Linux', 'AI & Tools', 
            'Gadget', 'Passive Income', 'Sitemas', 'Social Media'
        ]),
        tags: z.array(z.string()).max(5),
        publishedAt: z.date(),
        updatedAt: z.date().optional(),
        featured: z.boolean().default(false),
        readingTime: z.number(),
        wordCount: z.number().optional(),
        difficulty: z.enum(['Pemula', 'Menengah', 'Lanjutan']).optional(),
        series: z.string().optional(),
        views: z.number().optional(),
    }),
});

export const collections = { blog };

Field Reference

title (Required)

Type: string

Judul artikel yang akan ditampilkan sebagai H1 dan di meta title.

title: "Cara Install Node.js di Windows, macOS, dan Linux"

Best practices:

• 50-60 karakter optimal untuk SEO
• Deskriptif dan catchy
• Masukkan keyword utama

description (Required)

Type: string

Deskripsi artikel untuk meta description dan preview cards.

description: "Panduan lengkap install Node.js di berbagai sistem operasi. Termasuk troubleshooting dan tips setup environment."

Best practices:

• 150-160 karakter optimal
• Jelaskan benefit/value artikel
• Unique untuk setiap artikel

heroImage (Optional)

Type: ImageMetadata (processed by Astro)

Gambar utama artikel untuk Open Graph dan header.

heroImage: ./hero.png

Notes:

• Path relatif ke folder artikel
• Akan diproses oleh Astro Image
• Recommended: 1200x630px untuk OG optimal
• Jika tidak ada, akan generate OG image otomatis

category (Required)

Type: enum

Kategori artikel. Harus salah satu dari nilai yang didefinisikan.

category: "Tutorial"

Nilai yang tersedia:

topic (Required)

Type: enum

Topic/sub-kategori yang lebih spesifik.

topic: "Development"

Nilai yang tersedia:

tags (Required)

Type: array of string (max 5)

Tag untuk kategorisasi dan SEO.

tags:
  - "Node.js"
  - "JavaScript"
  - "Tutorial"
  - "Windows"
  - "macOS"

Validation:

• Minimal 1 tag
• Maksimal 5 tags
• Case-sensitive

publishedAt (Required)

Type: date

Tanggal publikasi artikel.

publishedAt: 2026-01-28

Format: YYYY-MM-DD

Notes:

• Digunakan untuk sorting artikel
• Ditampilkan di artikel dan listing
• Format ISO date

updatedAt (Optional)

Type: date

Tanggal terakhir artikel diupdate.

Notes:

• Jika ada, ditampilkan sebagai “Diperbarui”
• Digunakan di Schema.org dateModified

featured (Optional)

Type: boolean

Default: false

Menandai artikel sebagai unggulan.

featured: true

Notes:

• Artikel featured muncul di section khusus
• Badge “Unggulan” ditampilkan
• Biasanya hanya 1-3 artikel yang featured

readingTime (Required)

Type: number

Estimasi waktu baca dalam menit.

readingTime: 8

Tips:

• Rata-rata: 200 kata/menit
• Artikel 1600 kata = 8 menit

wordCount (Optional)

Type: number

Jumlah kata dalam artikel.

wordCount: 1850

Notes:

• Jika tidak disediakan, akan di-estimate dari readingTime
• Formula: readingTime × 220

difficulty (Optional)

Type: enum

Tingkat kesulitan artikel.

difficulty: "Menengah"

Nilai:

Notes:

• Jika tidak disediakan, di-estimate dari readingTime:
  • ≤5 menit: Pemula
  • 6-10 menit: Menengah

  • 10 menit: Lanjutan

series (Optional)

Type: string

Nama series untuk artikel bersambung.

series: "Belajar React dari Nol"

Notes:

• Artikel dengan series yang sama akan terhubung
• Navigasi prev/next otomatis
• Lihat dokumentasi Series untuk detail

views (Optional)

Type: number

Jumlah views untuk simulasi statis.

views: 1250

Notes:

• Untuk static site, ini nilai statis
• Bisa diupdate manual atau via build script
• Ditampilkan di artikel card

Contoh Lengkap

---
title: "Panduan Lengkap Material Design 3 untuk Web"
description: "Pelajari cara mengimplementasi Material Design 3 di website. Dari color tokens hingga komponen interaktif."
heroImage: ./hero.webp
category: "Tutorial"
topic: "Development"
tags:
  - "Material Design"
  - "CSS"
  - "UI/UX"
  - "Web Design"
  - "Google"
publishedAt: 2026-01-28
featured: true
readingTime: 15
wordCount: 3300
difficulty: "Menengah"
series: "Modern Web Design"
views: 2450
---

Contoh Minimal

---
title: "Tips Cepat: Shortcut VS Code"
description: "Kumpulan keyboard shortcut VS Code yang wajib diketahui."
category: "Tips"
topic: "Development"
tags:
  - "VS Code"
  - "Productivity"
publishedAt: 2026-01-28
readingTime: 3
---

Validasi Error

Jika frontmatter tidak valid, Astro akan menampilkan error:

[ERROR] Content collection schema validation failed:
  - title: Required
  - category: Invalid enum value. Expected 'Dokumentasi' | 'Tutorial' | ...
  - tags: Array must contain at most 5 element(s)

Solusi: Perbaiki field yang disebutkan sesuai schema.

Menambahkan Field Baru

Untuk menambahkan field kustom:

1. Edit src/content/config.ts
2. Tambahkan field di schema
3. Update komponen yang menggunakan field tersebut

// Contoh: menambahkan field author
schema: ({ image }) => z.object({
    // ... existing fields
    author: z.string().optional(),  // Field baru
}),

Kesimpulan

Frontmatter adalah sumber truth untuk metadata artikel. Dengan schema validation:

1. Konsistensi data terjaga
2. Error terdeteksi saat build
3. Type-safety di komponen
4. IDE autocomplete support

Pastikan setiap artikel memiliki frontmatter yang lengkap dan valid untuk hasil terbaik.