AstroPaper 2.0

Posted on:January 30, 2023 at 03:57 PM

Astro 2.0 telah dirilis dengan beberapa fitur keren, perubahan besar (breaking changes), peningkatan DX, overlay error yang lebih baik, dan sebagainya. AstroPaper memanfaatkan fitur-fitur keren tersebut, terutama API Content Collections.

Introducing AstroPaper 2.0

Daftar Isi

Fitur & Perubahan

Type-safe Frontmatters dan Skema Blog yang Didefinisikan Ulang

Frontmatter konten markdown AstroPaper 2.0 sekarang type-safe berkat Content Collections Astro. Skema blog didefinisikan di dalam file src/content/_schemas.ts.

Rumah Baru untuk Konten Blog

Semua postingan blog dipindahkan dari src/contents ke direktori src/content/blog.

API Pengambilan Baru

Konten sekarang diambil dengan fungsi getCollection. Tidak perlu lagi menentukan path relatif ke konten.

// metode pengambilan konten lama
- const postImportResult = import.meta.glob<MarkdownInstance<Frontmatter>>(
  "../contents/**/**/*.md",);

// metode pengambilan konten baru
+ const postImportResult = await getCollection("blog");

Logika Pencarian yang Dimodifikasi untuk Hasil Pencarian yang Lebih Baik

Di versi AstroPaper yang lebih lama, ketika seseorang mencari artikel, kriteria pencarian yang akan dicari adalah title, description, dan headings (heading berarti semua heading h1 ~ h6 dari postingan blog). Di AstroPaper v2, hanya title dan description yang akan dicari saat pengguna mengetik.

Properti Frontmatter yang Diganti Namanya

Properti frontmatter berikut diganti namanya.

Nama LamaNama Baru
datetimepubDatetime
slugpostSlug

Tag Default untuk Postingan Blog

Jika sebuah postingan blog tidak memiliki tag (dengan kata lain, properti frontmatter tags tidak ditentukan), tag default others akan digunakan untuk postingan blog tersebut. Tapi kamu bisa mengatur tag default di file /src/content/_schemas.ts.

// src/contents/_schemas.ts
export const blogSchema = z.object({
  // ---
  // ganti "others" dengan apa pun yang kamu mau
  tags: z.array(z.string()).default(["others"]),
  ogImage: z.string().optional(),
  description: z.string(),
});

Skema Warna Gelap Pradefinisi Baru

AstroPaper v2 memiliki skema warna gelap baru (kontras tinggi & kontras rendah) yang didasarkan pada logo gelap Astro. Cek link ini untuk info lebih lanjut.

Skema Warna Gelap Pradefinisi Baru

Pengurutan Kelas Otomatis

AstroPaper 2.0 menyertakan pengurutan kelas otomatis dengan plugin Prettier TailwindCSS

Dokumen & README Diperbarui

Semua postingan blog #docs dan README diperbarui untuk AstroPaper v2 ini.

Perbaikan Bug