Menggunakan Series untuk Artikel Bersambung

Series (seri) adalah fitur powerful untuk menghubungkan artikel-artikel yang saling berkaitan. Cocok untuk tutorial multi-bagian, course, atau dokumentasi yang perlu dibaca berurutan.

Apa Itu Series?

Series mengelompokkan artikel dengan:

• Navigasi Previous/Next otomatis
• Progress indicator visual
• Hub page yang menampilkan semua artikel dalam seri
• Konsistensi pengalaman membaca

Use Cases

Membuat Series

---
title: "Belajar React: Bagian 1 - Fundamental"
description: "Pengenalan React dan konsep dasar."
heroImage: ./hero.png
category: "Tutorial"
topic: "Development"
tags:
  - "React"
  - "JavaScript"
  - "Tutorial"
publishedAt: 2026-01-28
readingTime: 10
series: "Belajar React dari Nol"  # Nama series
---

---
title: "Belajar React: Bagian 2 - Components"
description: "Memahami React Components dan Props."
heroImage: ./hero.png
# ... frontmatter lainnya
series: "Belajar React dari Nol"  # Nama sama persis
---

---
title: "Belajar React: Bagian 3 - State"
description: "Mengelola state di React."
heroImage: ./hero.png
# ... frontmatter lainnya
series: "Belajar React dari Nol"  # Nama sama persis
---

Komponen SeriesNavigation

Sitemas menyediakan komponen SeriesNavigation.astro yang otomatis muncul di artikel yang memiliki series.

Fitur Komponen

Tampilan

Komponen muncul di:

1. Atas artikel - Ringkasan series dan posisi saat ini
2. Bawah artikel - Navigasi ke artikel berikutnya

Menggunakan SeriesNavigation Manual

Jika ingin menempatkan navigasi secara custom dalam konten MDX:

---
title: "Belajar React: Bagian 2"
series: "Belajar React dari Nol"
---

import SeriesNavigation from '@/components/mdx/SeriesNavigation.astro';

Ini adalah bagian kedua dari seri React...

<SeriesNavigation 
  seriesName="Belajar React dari Nol"
  currentSlug="belajar-react-bagian-2"
/>

Contoh Implementasi Lengkap

Struktur Series “Dokumentasi Sitemas”

src/content/blog/dokumentasi/
├── pengenalan-sitemas-astro-blog/     # series: "Dokumentasi Sitemas"
├── persyaratan-sistem-sitemas/        # series: "Dokumentasi Sitemas"
├── panduan-instalasi-sitemas/         # series: "Dokumentasi Sitemas"
├── struktur-folder-sitemas/           # series: "Dokumentasi Sitemas"
└── ... (artikel lainnya dengan series yang sama)

Frontmatter Konsisten

# Artikel 1: Pengenalan
---
title: "Pengenalan Sitemas: Blog Astro Modern"
series: "Dokumentasi Sitemas"
publishedAt: 2026-01-01
---

# Artikel 2: Persyaratan
---
title: "Persyaratan Sistem untuk Sitemas"
series: "Dokumentasi Sitemas"
publishedAt: 2026-01-02
---

# Artikel 3: Instalasi
---
title: "Panduan Instalasi Sitemas"
series: "Dokumentasi Sitemas"
publishedAt: 2026-01-03
---

Halaman Index Series (Opsional)

Untuk series besar, Anda bisa membuat halaman khusus yang menampilkan semua artikel:

---
import { getCollection } from 'astro:content';
import BaseLayout from '@/layouts/BaseLayout.astro';

export async function getStaticPaths() {
    const articles = await getCollection('blog');
    
    // Get unique series names
    const seriesNames = [...new Set(
        articles
            .filter(a => a.data.series)
            .map(a => a.data.series)
    )];
    
    return seriesNames.map(series => ({
        params: { slug: slugify(series) },
        props: { 
            seriesName: series,
            articles: articles
                .filter(a => a.data.series === series)
                .sort((a, b) => 
                    a.data.publishedAt.getTime() - b.data.publishedAt.getTime()
                )
        }
    }));
}

const { seriesName, articles } = Astro.props;
---

<BaseLayout title={seriesName}>
    <h1>{seriesName}</h1>
    <p>{articles.length} artikel dalam series ini</p>
    
    <ol>
        {articles.map((article, index) => (
            <li>
                <a href={`/blog/${article.slug}`}>
                    {index + 1}. {article.data.title}
                </a>
            </li>
        ))}
    </ol>
</BaseLayout>

Best Practices

1. Naming Convention

Gunakan nama series yang jelas dan konsisten:

# ✅ Bagus
series: "Dokumentasi Sitemas"
series: "Belajar React dari Nol"
series: "Review Laptop 2026"

# ❌ Hindari
series: "docs"          # Terlalu pendek
series: "Belajar React" # Berbeda dengan artikel lain yang pakai "Belajar React dari Nol"

2. Jumlah Artikel

3. Urutan Logis

Pastikan artikel mengalir secara logis:

1. Mulai dari konsep dasar
2. Progres ke topik lebih kompleks
3. Akhiri dengan praktik atau project

4. Cross-Linking

Di dalam artikel, referensikan artikel lain dalam series:

Seperti yang sudah kita bahas di [Bagian 1](/blog/belajar-react-bagian-1),
React menggunakan komponen...

Di bagian selanjutnya, kita akan membahas tentang [State Management](/blog/belajar-react-bagian-3).

Tracking Progress

Untuk experience premium, Anda bisa implement progress tracking:

// Simpan progress
function markAsRead(seriesName, articleSlug) {
    const key = `series_${seriesName}`;
    const read = JSON.parse(localStorage.getItem(key) || '[]');
    if (!read.includes(articleSlug)) {
        read.push(articleSlug);
        localStorage.setItem(key, JSON.stringify(read));
    }
}

// Cek progress
function getProgress(seriesName, totalArticles) {
    const key = `series_${seriesName}`;
    const read = JSON.parse(localStorage.getItem(key) || '[]');
    return {
        completed: read.length,
        total: totalArticles,
        percentage: Math.round((read.length / totalArticles) * 100)
    };
}

Langkah Selanjutnya

Eksplorasi komponen MDX yang tersedia:

Kesimpulan

Series adalah fitur essential untuk konten yang saling terkait. Dengan implementasi yang benar:

1. Pembaca mendapat pengalaman reading yang terstruktur
2. Navigasi antar artikel menjadi seamless
3. Progress tracking memotivasi pembaca menyelesaikan series

Mulai dengan menambahkan series field ke artikel-artikel yang terkait, dan Sitemas akan handle sisanya secara otomatis.