Add Ruang Belajar collection

src/components/SiteHeader.astro

@@ -7,15 +7,16 @@ const navItems = [
   ['Home', '/'],
   ['Falsafah', '/falsafah/'],
   ['Proyek', '/projects/'],
+  ['Belajar', '/belajar/'],
   ['Blog', '/blog/'],
   ['Forum', '/forum/'],
   ['Kontak', '/contact/']
 ];
 
 const mobileNavItems = [
   ['Home', '/', 'ph-house'],
-  ['Falsafah', '/falsafah/', 'ph-book-open-text'],
   ['Proyek', '/projects/', 'ph-grid-four'],
+  ['Belajar', '/belajar/', 'ph-books'],
   ['Blog', '/blog/', 'ph-article'],
   ['Forum', '/forum/', 'ph-chats-circle']
 ];

src/layouts/BaseLayout.astro

@@ -91,6 +91,7 @@ const csp = [
   "img-src 'self' data: https://raw.githubusercontent.com https://avatars.githubusercontent.com",
   "font-src 'self' data:",
   "connect-src 'self'",
+  "frame-src https://drive.google.com",
   "form-action 'self'",
   "frame-ancestors 'none'",
   "object-src 'none'"

src/lib/learning.ts

@@ -0,0 +1,86 @@
+import type { ImageMetadata } from 'astro';
+import aiYangProaktifOg from '../assets/og/learning/ai-yang-proaktif.jpg';
+import aiUntukProgrammingOg from '../assets/og/learning/ai-untuk-programming-dan-coding-cepat.jpg';
+import buatAiOg from '../assets/og/learning/buat-ai-sendiri-dengan-open-source.jpg';
+import menulisJurnalOg from '../assets/og/learning/menulis-jurnal-dibantu-ai.jpg';
+import roadmapAiOg from '../assets/og/learning/roadmap-ai-gotong-royong.jpg';
+import smartDigitalEnergyOg from '../assets/og/learning/smart-digital-energy.jpg';
+
+export interface LearningResource {
+  slug: string;
+  title: string;
+  year: number;
+  topic: string;
+  description: string;
+  driveId: string;
+  ogImage: ImageMetadata;
+}
+
+export const learningResources: LearningResource[] = [
+  {
+    slug: 'buat-ai-sendiri-dengan-open-source',
+    title: 'Buat AI Sendiri dengan Open Source',
+    year: 2026,
+    topic: 'AI & Open Source',
+    description: 'Pengantar membangun kemampuan AI secara mandiri dengan teknologi terbuka.',
+    driveId: '1K7Cm_itM66Pc7QENrQAdv1C3zs6zwTJU',
+    ogImage: buatAiOg
+  },
+  {
+    slug: 'ai-untuk-programming-dan-coding-cepat',
+    title: 'AI untuk Programming dan Coding Cepat',
+    year: 2026,
+    topic: 'Pemrograman',
+    description: 'Catatan praktis memakai AI untuk mempercepat kerja pemrograman.',
+    driveId: '1uHtRMjQ-sUcK6vhfUAaljpJjZw4edDCg',
+    ogImage: aiUntukProgrammingOg
+  },
+  {
+    slug: 'ai-yang-proaktif',
+    title: 'AI yang Proaktif: Memahami Agentic AI dengan Contoh Sederhana',
+    year: 2025,
+    topic: 'Agentic AI',
+    description: 'Pengenalan agentic AI melalui contoh yang mudah diikuti.',
+    driveId: '1XyHLOwuX073coykmbv7B0R-qeOR7iM92',
+    ogImage: aiYangProaktifOg
+  },
+  {
+    slug: 'menulis-jurnal-dibantu-ai',
+    title: 'Menulis Jurnal Dibantu AI: Data-First Anti-Halusinasi',
+    year: 2025,
+    topic: 'Literasi AI',
+    description: 'Panduan menggunakan AI secara berbasis data untuk penulisan jurnal.',
+    driveId: '1RkpZOjNcIcAyq4LYYKhw6kP3kJZcCtwW',
+    ogImage: menulisJurnalOg
+  },
+  {
+    slug: 'roadmap-ai-gotong-royong',
+    title: 'Roadmap AI Gotong Royong bagi Bangsa Indonesia',
+    year: 2025,
+    topic: 'Transformasi Digital',
+    description: 'Pandangan tentang arah pengembangan AI yang kolaboratif di Indonesia.',
+    driveId: '1P30QgMJq6G3srKYbXYye2DJFciNE7D6p',
+    ogImage: roadmapAiOg
+  },
+  {
+    slug: 'smart-digital-energy',
+    title: 'Smart Digital Energy: Inovasi Teknologi Open Source untuk Pencapaian Target Produksi Migas',
+    year: 2025,
+    topic: 'Energi',
+    description: 'Contoh pemanfaatan teknologi open source untuk sektor energi.',
+    driveId: '1swVUuIxriekfYxl4KXL5moLonArrH0n9',
+    ogImage: smartDigitalEnergyOg
+  }
+];
+
+export const author = 'Onno W. Purbo';
+export const authorProfileHref = '/belajar/onno-w-purbo/';
+export const authorWebsite = 'https://onnocenter.or.id/';
+
+export function drivePreviewUrl(resource: LearningResource) {
+  return `https://drive.google.com/file/d/${resource.driveId}/preview`;
+}
+
+export function driveDownloadUrl(resource: LearningResource) {
+  return `https://drive.usercontent.google.com/download?id=${resource.driveId}&export=download&confirm=t`;
+}

src/pages/belajar/[slug].astro

@@ -0,0 +1,48 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import BaseButton from '../../components/BaseButton.astro';
+import { author, authorProfileHref, driveDownloadUrl, drivePreviewUrl, learningResources, type LearningResource } from '../../lib/learning';
+
+export function getStaticPaths() {
+  return learningResources.map((resource) => ({ params: { slug: resource.slug }, props: { resource } }));
+}
+
+const { resource } = Astro.props as { resource: LearningResource };
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'Book',
+  name: resource.title,
+  author: { '@type': 'Person', name: author },
+  datePublished: String(resource.year),
+  description: resource.description,
+  url: new URL(Astro.url.pathname, Astro.site || 'https://indopensource.org').toString()
+};
+---
+
+<BaseLayout title={`${resource.title} - Ruang Belajar`} description={resource.description} image={resource.ogImage.src} type="article" jsonLd={jsonLd}>
+  <section class="border-b-[3px] border-ink bg-paper py-12 md:py-16">
+    <div class="mx-auto w-[min(1120px,calc(100%-32px))]">
+      <div class="mb-5 flex items-center gap-3"><span class="sticker">Ruang Belajar</span><span class="rule grow"></span></div>
+      <p class="meta-row font-semibold text-brand-dark">{resource.topic} · {resource.year} · Karya <a class="underline decoration-2 underline-offset-2 hover:text-accent" href={authorProfileHref}>{author}</a></p>
+      <h1 class="display-lg mt-4 max-w-5xl text-ink">{resource.title}</h1>
+      <p class="mt-5 max-w-3xl font-body text-xl leading-8 text-muted">{resource.description}</p>
+      <div class="mt-7 flex flex-wrap gap-3">
+        <BaseButton href={driveDownloadUrl(resource)}>Unduh PDF</BaseButton>
+        <BaseButton href="/belajar/" variant="secondary">Koleksi lainnya</BaseButton>
+      </div>
+    </div>
+  </section>
+
+  <section class="bg-canvas py-8 md:py-12">
+    <div class="mx-auto w-[min(1120px,calc(100%-32px))]">
+      <iframe
+        class="h-[72vh] min-h-125 w-full border-2 border-ink bg-paper riso-shadow"
+        src={drivePreviewUrl(resource)}
+        title={`Baca ${resource.title} karya ${author}`}
+        loading="eager"
+        sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+        allowfullscreen
+      ></iframe>
+    </div>
+  </section>
+</BaseLayout>

src/pages/belajar/index.astro

@@ -0,0 +1,63 @@
+---
+import { Image } from 'astro:assets';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import BaseButton from '../../components/BaseButton.astro';
+import PageHeader from '../../components/PageHeader.astro';
+import onnoPhoto from '../../assets/onno-w-purbo.jpg';
+import { author, authorProfileHref, learningResources } from '../../lib/learning';
+
+const topics = [...new Set(learningResources.map((resource) => resource.topic))];
+---
+
+<BaseLayout
+  title="Ruang Belajar - IndopenSource"
+  description="Koleksi bacaan teknologi terbuka karya Onno W. Purbo yang dapat dibaca dan diunduh."
+>
+  <PageHeader eyebrow="Ruang Belajar" title="Baca, unduh, dan sebarkan pengetahuan terbuka.">
+    <p>
+      Koleksi awal karya <a class="font-semibold text-brand underline decoration-2 underline-offset-2 hover:text-accent" href={authorProfileHref}>{author}</a>, tersedia untuk dibaca langsung dari IndopenSource atau diunduh dari sumbernya.
+    </p>
+    <div class="meta-row mt-5 flex flex-wrap gap-2 font-semibold text-brand-dark">
+      {topics.map((topic) => <span class="border-2 border-ink bg-canvas px-2 py-1 text-xs">{topic}</span>)}
+    </div>
+  </PageHeader>
+
+  <section class="bg-canvas py-16 md:py-20">
+    <div class="mx-auto w-[min(1120px,calc(100%-32px))]">
+      <div class="reveal-stagger grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {learningResources.map((resource) => (
+          <article class="riso-hover riso-shadow flex flex-col border-2 border-ink bg-paper p-5">
+            <div class="meta-row flex items-center justify-between gap-3 font-semibold text-muted">
+              <span>{resource.topic}</span>
+              <span>{resource.year}</span>
+            </div>
+            <h2 class="display-sm mt-4 text-ink">{resource.title}</h2>
+            <p class="mt-3 font-body text-lg leading-7 text-muted">{resource.description}</p>
+            <p class="meta-row mt-5 font-semibold text-brand-dark">Karya <a class="underline decoration-2 underline-offset-2 hover:text-accent" href={authorProfileHref}>{author}</a></p>
+            <div class="mt-6">
+              <BaseButton href={`/belajar/${resource.slug}/`} variant="secondary">Baca online</BaseButton>
+            </div>
+          </article>
+        ))}
+      </div>
+    </div>
+  </section>
+
+  <section class="border-t-[3px] border-ink bg-paper py-12 md:py-16">
+    <div class="mx-auto w-[min(1120px,calc(100%-32px))]">
+      <div class="mb-7 flex items-end justify-between gap-5 max-md:flex-col max-md:items-start">
+        <div><span class="sticker">Direktori Penulis</span><h2 class="display-md mt-4">Kenali penulisnya.</h2></div>
+        <span class="meta-row font-semibold text-muted">1 penulis</span>
+      </div>
+      <a class="riso-hover riso-shadow grid overflow-hidden border-2 border-ink bg-canvas md:grid-cols-[220px_minmax(0,1fr)]" href={authorProfileHref}>
+        <Image src={onnoPhoto} alt={`Foto ${author}`} widths={[220, 440]} sizes="(max-width: 767px) 100vw, 220px" class="h-full min-h-56 w-full object-cover" loading="lazy" />
+        <div class="p-6">
+          <p class="meta-row font-semibold text-brand-dark">Penulis · Pendidik · Penggerak internet terbuka</p>
+          <h3 class="display-sm mt-3 text-ink">{author}</h3>
+          <p class="mt-3 max-w-2xl font-body text-lg leading-7 text-muted">Pakar teknologi informasi yang dikenal lewat perjuangan open source, jaringan komunitas, dan akses internet terjangkau di Indonesia.</p>
+          <span class="mt-5 inline-block font-mono text-sm font-bold uppercase tracking-[0.04em] text-brand-dark">Buka profil →</span>
+        </div>
+      </a>
+    </div>
+  </section>
+</BaseLayout>

src/pages/belajar/onno-w-purbo.astro

@@ -0,0 +1,88 @@
+---
+import { Image } from 'astro:assets';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import BaseButton from '../../components/BaseButton.astro';
+import onnoPhoto from '../../assets/onno-w-purbo.jpg';
+import { author, authorWebsite, learningResources } from '../../lib/learning';
+
+const itbProfile = 'https://alumni.itb.ac.id/onno-w-purbo/';
+const isocProfile = 'https://www.internetsociety.org/news/press-releases/2020/prestigious-jonathan-b-postel-service-award-presented-to-onno-w-purbo/';
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'Person',
+  name: author,
+  description: 'Pakar teknologi informasi, penulis, pendidik, dan advokat akses internet terbuka di Indonesia.',
+  image: new URL(onnoPhoto.src, Astro.site || 'https://indopensource.org').toString(),
+  alumniOf: { '@type': 'CollegeOrUniversity', name: 'Institut Teknologi Bandung' },
+  award: 'Jonathan B. Postel Service Award (2020)',
+  sameAs: [authorWebsite, itbProfile, isocProfile]
+};
+---
+
+<BaseLayout
+  title={`${author} - Ruang Belajar`}
+  description="Profil Onno W. Purbo, penulis, pendidik, dan pelopor akses internet terbuka di Indonesia."
+  image={onnoPhoto.src}
+  type="profile"
+  jsonLd={jsonLd}
+>
+  <section class="border-b-[3px] border-ink bg-paper py-14 md:py-20">
+    <div class="mx-auto grid w-[min(1120px,calc(100%-32px))] items-center gap-8 md:grid-cols-[minmax(0,1fr)_minmax(260px,380px)]">
+      <div>
+        <div class="mb-5 flex items-center gap-3"><span class="sticker">Penulis Ruang Belajar</span><span class="rule grow"></span></div>
+        <h1 class="display-lg m-0 text-ink">{author}</h1>
+        <p class="mt-5 max-w-3xl font-body text-xl leading-8 text-muted">Pakar teknologi informasi, penulis, pendidik, dan penggerak akses internet yang lebih terbuka dan terjangkau di Indonesia.</p>
+        <div class="mt-7 flex flex-wrap gap-3">
+          <BaseButton href="/belajar/">Baca koleksi karya</BaseButton>
+          <BaseButton href={authorWebsite} variant="secondary">Onno Center</BaseButton>
+          <BaseButton href={itbProfile} variant="secondary">Profil ITB</BaseButton>
+        </div>
+      </div>
+      <figure class="m-0 border-2 border-ink bg-canvas p-2 riso-shadow">
+        <Image src={onnoPhoto} alt={`Foto ${author}`} widths={[380, 760]} sizes="(max-width: 767px) calc(100vw - 64px), 380px" class="aspect-[4/3] w-full object-cover" loading="eager" />
+        <figcaption class="meta-row mt-2 px-1 text-muted">Foto: <a class="underline decoration-2 underline-offset-2 hover:text-accent" href={itbProfile}>Direktorat Kealumnian ITB</a></figcaption>
+      </figure>
+    </div>
+  </section>
+
+  <section class="border-b-[3px] border-ink bg-canvas py-16 md:py-20">
+    <div class="mx-auto grid w-[min(1120px,calc(100%-32px))] gap-8 lg:grid-cols-[minmax(0,1fr)_360px]">
+      <article class="border-2 border-ink bg-paper p-6 riso-shadow">
+        <span class="sticker">Jejak</span>
+        <h2 class="display-md mt-4">Membuka akses, membagikan pengetahuan.</h2>
+        <div class="mt-5 grid gap-5 font-body text-lg leading-8 text-muted">
+          <p>Menurut profil alumni ITB, Onno W. Purbo menempuh Teknik Elektro di ITB, lalu meraih Ph.D. dari University of Waterloo pada bidang teknologi rangkaian terintegrasi untuk satelit.</p>
+          <p>Ia dikenal lewat perjuangannya untuk Linux dan open source, juga inovasi seperti Wajanbolic, RT/RW-Net, serta penerapan OpenBTS untuk memperluas akses internet yang terjangkau.</p>
+          <p>Internet Society mencatat perannya dalam koneksi internet pertama di ITB, jaringan pendidikan Indonesia, teknologi nirkabel dan VoIP, serta penerimaan Jonathan B. Postel Service Award pada 2020.</p>
+        </div>
+      </article>
+      <aside class="grid content-start gap-4">
+        <article class="border-2 border-ink bg-brand p-5 text-paper riso-shadow">
+          <p class="meta-row font-semibold text-sun">2020</p>
+          <h2 class="display-sm mt-3 text-paper">Jonathan B. Postel Service Award</h2>
+          <p class="mt-3 font-body text-lg leading-7">Penghargaan Internet Society atas kontribusi teknis, kepemimpinan, dan pelayanan bagi komunitas internet global.</p>
+        </article>
+        <a class="riso-hover riso-shadow-sm border-2 border-ink bg-paper p-5" href={isocProfile}>
+          <span class="meta-row font-semibold text-muted">Sumber utama</span>
+          <strong class="mt-2 block font-display text-xl text-ink">Internet Society ↗</strong>
+        </a>
+        <a class="riso-hover riso-shadow-sm border-2 border-ink bg-paper p-5" href={itbProfile}>
+          <span class="meta-row font-semibold text-muted">Sumber biografi & foto</span>
+          <strong class="mt-2 block font-display text-xl text-ink">Alumni ITB ↗</strong>
+        </a>
+      </aside>
+    </div>
+  </section>
+
+  <section class="bg-paper py-16 md:py-20">
+    <div class="mx-auto w-[min(1120px,calc(100%-32px))]">
+      <div class="mb-8 flex items-end justify-between gap-5 max-md:flex-col max-md:items-start">
+        <div><span class="sticker">Koleksi</span><h2 class="display-md mt-4">Karya yang tersedia</h2></div>
+        <BaseButton href="/belajar/" variant="secondary">Lihat semua</BaseButton>
+      </div>
+      <div class="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
+        {learningResources.map((resource) => <a class="riso-hover riso-shadow-sm border-2 border-ink bg-canvas p-4" href={`/belajar/${resource.slug}/`}><span class="meta-row text-brand-dark">{resource.topic} · {resource.year}</span><h3 class="display-sm mt-3 text-ink">{resource.title}</h3></a>)}
+      </div>
+    </div>
+  </section>
+</BaseLayout>

src/pages/index.astro

@@ -168,4 +168,15 @@ const heroPreload = await getImage({
       </div>
     </div>
   </section>
+
+  <section class="relative overflow-hidden border-t-[3px] border-ink bg-brand py-16 md:py-20">
+    <div class="mx-auto flex w-[min(1120px,calc(100%-32px))] items-end justify-between gap-8 max-md:flex-col max-md:items-start">
+      <div class="max-w-3xl">
+        <div class="mb-5 flex items-center gap-3"><span class="sticker">Ruang Belajar</span><span class="meta-row text-paper">// karya Onno W. Purbo</span></div>
+        <h2 class="display-md text-paper">Baca pengetahuan teknologi terbuka.</h2>
+        <p class="mt-5 max-w-2xl font-body text-xl leading-8 text-paper">Koleksi awal karya Onno W. Purbo untuk dibaca langsung dan diunduh dari sumbernya.</p>
+      </div>
+      <BaseButton href="/belajar/" variant="light">Buka koleksi</BaseButton>
+    </div>
+  </section>
 </BaseLayout>