Part 2 - Membuat Web Blog Static Dengan Astro JS

Pembuatan Kontent

Setelah sebelumnya kita membuat file config.ts untuk konfigurasi content collection, sekarang kita akan mulai untuk pembuatan konten blog dan author-nya.

Pembuatan Konten Blog

Buatlah sebuah folder / directory di dalam src/content dengan nama blog. Nama directory ini disamakan dengan nama variable yang ada di dalam file config.ts

Buatlah beberapa file markdown di dalam directory src/content/blog yang telah dibuat. Beginilah struktur project kita saat ini.

├── astro.config.mjs
├── package.json
├── package-lock.json
├── public
│   └── favicon.svg
├── README.md
├── src
│   ├── content
│   │   ├── blog
│   │   │   ├── first-post.md
│   │   │   ├── second-post.md
│   │   │   └── third-post.md
│   │   └── config.ts
│   ├── env.d.ts
│   └── pages
│       └── index.astro
└── tsconfig.json

Pastikan isi dari file markdown tersebut memiliki struktur frontmatter yang sesuai dengan schema yang telah dibuat di dalam file src/content/config.ts. Berikut adalah contoh file markdown yang saya buat dengan nama first-post.md.

---
title: Ini adalah artikel pertama
category: Tutorial
tags: [Astrojs, Javascript]
image:
  src: ../../assets/images/opening-book.jpg
  alt: Opening book
author: andika
pubDate: 2024-03-09T20:00:00+07:00
---

Ini adalah konten artikel pertama saya

Yang perlu mandapat perhatian lebih adalah bagian image > src. Karena bagian ini memiliki validasi image(), berarti ini harus mengarah ke gambar / image asli. Buatlah directory baru dengan nama assets/images di dalam directory src. Dan letakkanlah image ini di dalam directory tersebut.

Kemudian yang perlu mendapat perhatian lebih juga adalah pada bagian author. Karena tipe author ini harus me-reference ke collection dengan nama authors, maka perlu dibuat juga collection authors ini.

Pembuatan Konten Authors

Buatlah sebuah folder / directory di dalam src/content dengan nama authors, disamakan dengan nama collection yang ada di config.ts. Kemudian buatlah file JSON dengan nama andika.json di dalam directory authors tersebut. Nama andika inilah yang digunakan untuk nilai author di dalam file markdown di atas. Jadi begini struktur project kita saat ini.

├── astro.config.mjs
├── package.json
├── package-lock.json
├── public
│   └── favicon.svg
├── README.md
├── src
│   ├── content
│   │   ├── authors
│   │   │   └── andika.json
│   │   ├── blog
│   │   │   ├── first-post.md
│   │   │   ├── second-post.md
│   │   │   └── third-post.md
│   │   └── config.ts
│   ├── env.d.ts
│   └── pages
│       └── index.astro
└── tsconfig.json

Data dari setiap file json tersebut harus sesuai dengan schema yang ada di file config.ts. Berikut adalah contoh datanya.

{
  "name": "Andika Saputra",
  "avatar": "https://ui-avatars.com/api/?name=Andika+Saputra"
}

Membuat List Artikel Dengan Pagination

Selanjutnya, akan kita tampilkan konten blog / artikel dari file markdown yang telah dibuat di dalam src/content/blog tadi.

Buat File Pagination

Langkah pertama, buatlah file dengan nama [...page].astro di dalam directory src/pages, sehingga struktur project kita menjadi seperti ini.

├── astro.config.mjs
├── package.json
├── package-lock.json
├── public
│   └── favicon.svg
├── README.md
├── src
│   ├── content
│   │   ├── authors
│   │   │   └── andika.json
│   │   ├── blog
│   │   │   ├── first-post.md
│   │   │   ├── second-post.md
│   │   │   └── third-post.md
│   │   └── config.ts
│   ├── env.d.ts
│   └── pages
│       ├── index.astro
│       └── [...page].astro
└── tsconfig.json

Kemudian di file [...page].astro tersebut tambahkan script berikut. Penjelasannya ada di comment.

---
import type { GetStaticPaths } from "astro";
import { getCollection } from "astro:content";

/**
 * Ambil content collections, kemudian pisah - pisah menjadi pagination.
 * kemudian masukkan sebagai props
 */
export const getStaticPaths = (async ({ paginate }) => {
  // ambil blog collection
  const blogEntries = await getCollection("blog");
  // ambil kategori tiap artikel blog, kemudian dijadikan array
  const categories = [
    ...new Set(blogEntries.map((item) => item.data.category)),
  ];

  return paginate(blogEntries, {
    pageSize: 2, // 2 blog / artikel per halaman
    props: { categories }, // tambahkan kategori sebagai props
  });
}) satisfies GetStaticPaths;

// ambil props dari `getStaticPaths` di atas.
// di dalam page terdapat data pagination, dan data blog
// per page nya.
const { page, categories } = Astro.props;
---

Tampilkan Artikel Dalam Pagination

Selanjutnya untuk menampilkan datanya, tambahkan script di bawah ini ke file [...page].astro tadi.

---
... script di atas
---

<ul>
  {
    page.data.map((entry) => (
      <li>
        <a href={entry.slug}>
          <h2>{entry.data.title}</h2>
        </a>
      </li>
    ))
  }
</ul>
{page.url.prev ? <a href={page.url.prev}>Prev Page</a> : null}
{page.url.next ? <a href={page.url.next}>Next Page</a> : null}

Selanjutnya bisa buka di web browser, hasilnya seperti di bawah ini.