Halaman Recent dan Pengurutan

Halaman /recent menampilkan koleksi tools yang diurutkan dari createdAt terbaru. Berkasnya pendek: satu getCollection, satu sort, satu <select> dua opsi, lalu map ke Card. Pengambilan koleksi dan pengurutan berjalan di frontmatter saat build, sedangkan satu-satunya skrip di browser adalah handler change pada pemilih urutan src/pages/recent.astro:43-54¹.

Menyaring tool berbayar lebih dulu

getCollection('tools', ...) dipanggil dengan filter data.isPaid !== true, sehingga tool yang frontmatter-nya bertanda isPaid: true tidak pernah masuk daftar recent src/pages/recent.astro:7-10². Pada schema koleksi, isPaid bersifat opsional dan createdAt wajib bertipe z.date() src/content/config.ts:10-12³. Contoh berkas yang ditandai berbayar adalah static.app, dengan createdAt: 2024-12-06T15:10:48.662Z dan isPaid: true src/content/tools/static-app.md:7-8⁴.

Filter ini sama persis dengan filter di beranda. Karena itu /recent dan beranda memuat himpunan tool yang sama, dan yang berbeda hanya urutannya; rincian penyaringan di beranda ada di Beranda dan Pencarian Klien.

Mengurutkan createdAt menurun

Setelah koleksi terkumpul, tools.sort membandingkan dua tanggal lewat new Date(a.data.createdAt) dan new Date(b.data.createdAt), keduanya di-cast as any, lalu mengembalikan dateB - dateA src/pages/recent.astro:12-17⁵. Pengurangan dua Date menghasilkan angka, sehingga tanggal yang lebih baru keluar lebih dulu. Cast as any dipakai agar TypeScript mengizinkan pengurangan tersebut, meskipun nilai createdAt sudah berupa Date dari schema src/content/config.ts:10-12³.

Judul dan deskripsi halaman ditetapkan sebagai string tetap, bukan dihitung dari koleksi src/pages/recent.astro:19-20⁶.

graph TD
  collection["getCollection('tools')"] --> filter{"filter: data.isPaid !== true"}
  filter -->|"isPaid true"| excluded["tool tidak masuk daftar"]
  filter -->|"lolos"| sort["tools.sort: dateB - dateA"]
  sort --> map["tools.map"]
  map --> card["Card tool={tool}"]
  card --> badge{"tool.data.isPaid?"}
  badge -->|"false"| fields["title, snippet, tags, body"]
  style collection fill:#336791,color:#fff
  style filter fill:#f59e0b,color:#000
  style sort fill:#2d7d46,color:#fff
  style map fill:#2d7d46,color:#fff
  style card fill:#8b5cf6,color:#fff
  style fields fill:#8b5cf6,color:#fff
  style badge fill:#f59e0b,color:#000
  style excluded fill:#dc2626,color:#fff
%% fig: Alur getCollection sampai render kartu di /recent
%% desc: Koleksi disaring, diurutkan menurun berdasarkan createdAt, lalu setiap tool dirender sebagai Card tanpa badge berbayar.

Pemilih urutan dan arah navigasinya

Markup pemilih berupa <select id="sort"> dengan dua <option>: newest dan random. Opsi pertama, yaitu Newest, tampil terpilih karena tidak ada atribut selected pada opsi mana pun src/pages/recent.astro:34-41⁷.

Handler change membaca (e.target as any).value, lalu mengarahkan browser: newest menuju ?sort=newest, nilai lain menuju / src/pages/recent.astro:43-54¹.

Satu-satunya rujukan ke /recent di src/ berada pada pemilih urutan di beranda, yang mengarahkan pembaca ke /recent ketika memilih newest src/pages/index.astro:59-60⁸. Sidebar tidak memuat tautan ke halaman ini.

graph LR
  select["#sort change"] --> check{"nilai opsi"}
  check -->|"newest"| newest["location.href = '?sort=newest'"]
  check -->|"random"| random["location.href = '/'"]
  newest --> same["query string diabaikan"]
  style select fill:#f59e0b,color:#000
  style check fill:#f59e0b,color:#000
  style newest fill:#8b5cf6,color:#fff
  style random fill:#2d7d46,color:#fff
  style same fill:#dc2626,color:#fff
%% fig: Cabang navigasi pemilih urutan
%% desc: Pilihan Newest hanya menambah query string relatif, sedangkan Random kembali ke beranda; query string itu tidak dibaca oleh halaman recent.

⚠️ Opsi Newest mengarah ke ?sort=newest, tetapi recent.astro tidak pernah membaca query string; tidak ada pemakaian Astro.url.searchParams di berkas itu. Akibatnya /recent?sort=newest tetap dirender dengan urutan createdAt menurun yang sama, dan penambahan parameter itu tidak mengubah apa pun selain URL src/pages/recent.astro:43-54¹. Untuk benar-benar kembali ke urutan acak, pembaca harus memilih Random atau memakai pemilih di beranda.

Kartu yang dirender

tools.map merender satu <Card tool={tool} /> untuk setiap tool yang lolos filter, di dalam pembungkus div berjarak mt-10 src/pages/recent.astro:57-63⁹. Card menerima prop tool beserta isHidden yang default-nya false, dan prop itu tidak dikirim oleh halaman ini.

Tiga tautan di baris aksi menuju halaman lain. Edit membuka berkas src/content/tools/${tool.slug}.md di GitHub, yang aturannya dibahas di Format Berkas dan Aturan Kontribusi. Visit menambahkan ?utm_source=freestuffdev ke tool.data.link. Alternatives menuju /alternative/${tool.slug} seperti dijelaskan pada Halaman Alternatif per Tool. Tombol Save dan Remove from Favorites memanggil fungsi dari Layout, yang dijelaskan di Fitur Favorit di Local Storage.