Yayasan Amal Shalih Insan Bantul — Website Resmi

Repository: amalshalih/amalshalih.github.io
Owner: Yayasan Amal Shalih Insan Bantul
Maintained by: PT Koneksi Jaringan Indonesia (Engineering) + Tim IT ASIB
Purpose: Technical repository untuk website development & maintenance

📚 Knowledge Base (OpenKB): amalshalih/amalshalih/.openkb/ — Single source of truth untuk semua dokumentasi yayasan

Sekilas Project

Yayasan Amal Shalih Insan Bantul (ASIB) adalah organisasi nirlaba yang bergerak di bidang Pendidikan Islam, Sosial Kemanusiaan, dan Keagamaan. Website ini dibangun untuk:

Tujuan	Deskripsi
Publikasi	Menampilkan profil, program, dan kegiatan yayasan secara transparan
Donasi	Memudahkan donatur menyalurkan donasi melalui berbagai channel (transfer bank, QRIS, Kitabisa)
Dakwah Digital	Menjangkau masyarakat luas dengan informasi keislaman dan laporan kegiatan
Profesionalitas	Menunjukkan keseriusan yayasan sebagai lembaga yang modern dan terpercaya

Domain: https://amalshalih.or.id
Legacy Domain: https://amalshalih.id → Redirects to amalshalih.or.id (brand protection) Status: 🟢 Production (Private Repository)

Tech Stack

Komponen	Teknologi	Keterangan
Framework	Astro v6	Static Site Generator, island architecture
Styling	Tailwind CSS v4	Utility-first CSS dengan custom theme
Package Manager	Bun	Runtime & package manager
Icons	Inline SVG via komponen `<Icon />`	Zero dependency icon system
Content	Astro Content Collections	Markdown/MDX untuk konten kegiatan
Sitemap	`@astrojs/sitemap`	Auto-generate sitemap.xml
Deployment	Cloudflare Workers	SSR via Workers + Assets
Monitoring	Sentry + Spotlight	Error tracking & debugging
Kualitas Gambar	WebP	Semua aset gambar dikompresi ke format WebP

Persyaratan Sistem

Dependency	Versi Minimal
Bun	≥ 1.2
Node.js	≥ 22.12.0 (via Bun)

Fitur

Halaman

Halaman	Route	Konten
Beranda	`/`	Hero section, statistik, program unggulan, ajakan donasi
Tentang	`/tentang`	Profil yayasan, visi-misi, legalitas (SK, NIB, NPWP)
Program	`/program`	3 pilar program: Pendidikan, Keagamaan, Sosial
Kegiatan	`/kegiatan`	Daftar kegiatan & berita (dinamis dari content collection)
Detail Kegiatan	`/kegiatan/:slug`	Konten lengkap kegiatan
Donasi	`/donasi`	Channel donasi (BSI, QRIS, Kitabisa)
Kontak	`/kontak`	Alamat, telepon, email, form kontak (Resend)
404	`/*`	Halaman tidak ditemukan

Aksesibilitas

Website ini dibangun dengan WCAG AA sebagai standar minimum:

✅ Kontras warna minimum 4.5:1 untuk semua teks
✅ Semantic HTML (<header>, <main>, <article>, <nav>, <footer>)
✅ Skip-to-content link
✅ ARIA labels pada icon dan link sosial media
✅ Focus-visible ring untuk keyboard navigasi
✅ Form labels dan required attributes
✅ Responsive sampai 320px viewport width

Performa

✅ WebP — semua gambar dalam format WebP (logo: 13KB, QRIS: 44KB)
✅ Zero JS runtime — Astro static rendering, tanpa JavaScript di client
✅ CSS purging — Tailwind v4 hanya generate class yang terpakai
✅ Sitemap otomatis — untuk SEO
✅ Font system — menggunakan system font stack + Inter (variable font)

Struktur Project

yayasan-amal-shalih-insan-bantul/
├── public/                          # Aset statis (favicon, logo, QRIS)
│   ├── favicon.svg
│   ├── favicon.ico
│   ├── logo-yayasan.webp            # Logo utama (512px, 13KB)
│   ├── logo-yayasan-sm.webp         # Logo kecil (256px, 6KB)
│   └── qris.webp                    # QRIS (44KB)
├── src/
│   ├── components/
│   │   ├── sections/
│   │   │   └── PageHeader.astro     # Gradient page header (reusable)
│   │   ├── ui/
│   │   │   ├── Button.astro         # 5 varian button
│   │   │   ├── Card.astro           # 4 varian card
│   │   │   └── Icon.astro           # SVG icon system (18 icons)
│   │   └── BaseHead.astro           # SEO & meta tags
│   ├── content/
│   │   └── kegiatan/                # Markdown content collection
│   │       ├── jumat-bersedekah.md
│   │       ├── santunan-sembako-mei-2026.md
│   │       └── wisuda-juz30-milad-3.md
│   ├── data/
│   │   └── site.ts                  # Semua data konten (SITE, CONTACT, SOCIAL, dll)
│   ├── layouts/
│   │   └── BaseLayout.astro         # Layout utama (header, nav, footer)
│   ├── lib/
│   │   └── constants.ts             # NAV_ITEMS, KATEGORI_LABELS
│   ├── pages/
│   │   ├── index.astro              # Beranda
│   │   ├── 404.astro                # Not Found
│   │   ├── tentang.astro
│   │   ├── program.astro
│   │   ├── donasi.astro
│   │   ├── kontak.astro
│   │   └── kegiatan/
│   │       ├── index.astro          # Daftar kegiatan
│   │       └── [slug].astro         # Detail kegiatan (dynamic route)
│   └── styles/
│       └── global.css               # Tailwind theme, custom utilities
├── docs/                            # Pointer ke OpenKB kanonikal
│   └── README.md                    # Penjelasan migrasi dokumen
├── .openkb/                         # Technical knowledge base (terstruktur)
│   ├── README.md                    # Indeks utama KB teknis
│   ├── 10-arsitektur/               # Arsitektur, konfigurasi, audit (9 file)
│   ├── 20-cms-dan-konten/           # CMS, konten (4 file)
│   └── 30-deploy/                   # Deployment & workflow (3 file)
├── .sisyphus/                       # Work plans from Sisyphus AI agent
├── sentry.client.config.js          # Sentry client-side initialization
├── sentry.server.config.js          # Sentry server-side initialization
├── .env.example                     # Contoh environment variables
├── wrangler.toml                    # Cloudflare Workers config
├── astro.config.mjs
├── package.json
├── tsconfig.json
└── bun.lock

Documentation

📚 OpenKB — Single Source of Truth

Seluruh dokumentasi yayasan (organisasi, SOP, template, IT teknis, legal, panduan AI agent) telah dipindahkan ke repository OpenKB yang terstruktur:

amalshalih/amalshalih/.openkb/

Repository ini adalah kanonikal — akses oleh operator, konsumen, dan AI agent.

📘 Technical Knowledge Base (`.openkb/` — repo ini)

Folder .openkb/ di repo ini berisi 16 file teknis yang terorganisir dalam 3 subdirektori (arsitektur, CMS/konten, deployment) + README.md — hanya tentang website. Untuk dokumentasi organisasi yayasan (SOP, template, legal, AI agent, panduan media), lihat OpenKB di atas.

Persiapan Lingkungan

1. Clone Repository

git clone <repo-url>
cd yayasan-amal-shalih-insan-bantul

2. Install Dependencies

bun install

Catatan: Project ini menggunakan Bun sebagai package manager. Jangan gunakan npm install atau yarn — lockfile (bun.lock) hanya kompatibel dengan Bun.

3. Environment Variables

Salin .env.example ke .env dan isi nilai yang diperlukan:

cp .env.example .env

Variable	Wajib	Deskripsi
`SENTRY_AUTH_TOKEN`	✅ Production	Auth token Sentry untuk source maps & release tracking. Generate di sentry.io. Scope: `org:read`, `project:releases`, `project:write`
`SANITY_API_READ_TOKEN`	❌ Opsional	Read-only token Sanity. Tidak diperlukan untuk development karena konten di-fetch publik

Catatan: Sentry hanya aktif di production. Spotlight aktif di development mode untuk debugging lokal.

Development

Menjalankan Development Server

bun run dev

Server akan berjalan di http://localhost:4321 dengan hot-reload.

Mematikan Server

Ctrl + C

Build Production

bun run build

Output akan tersimpan di dist/ — siap dideploy.

Preview Build

bun run preview

Build & Deploy

Cloudflare Workers (SSR)

Project ini menggunakan Astro SSR dengan adapter @astrojs/cloudflare dan dideploy ke Cloudflare Workers.

Kenapa Workers, bukan Pages?

@astrojs/cloudflare v13+ menghasilkan output Workers (entry.mjs dengan export default { fetch })
Workers mendukung nodejs_compat untuk library seperti @sentry/cloudflare
Static assets ditangani via Workers Assets binding

Deployment Pipeline

Automatic (via GitHub Actions): Push ke branch main → GitHub Actions workflow (.github/workflows/deploy.yml):

Install dependencies (bun install)
Build (bun run build)
Generate Workers config (scripts/generate-wrangler-config.mjs)
Deploy ke Workers (wrangler deploy --config dist/wrangler.json)

Manual (via Wrangler CLI):

bun run build
bun run scripts/generate-wrangler-config.mjs
npx wrangler deploy --config dist/wrangler.json

Environment variables (untuk build & deploy):

Variable	Required	Source
`CLOUDFLARE_API_TOKEN`	✅ Deploy	Cloudflare dashboard → API Tokens
`CLOUDFLARE_ACCOUNT_ID`	✅ Deploy	Cloudflare dashboard → Workers overview
`SENTRY_AUTH_TOKEN`	✅ Build (source maps)	sentry.io → Auth Tokens

Observability & Monitoring

Sentry — Error Tracking

Project menggunakan Sentry untuk memantau error di production.

Inisialisasi:

DSN dan konfigurasi ada di:

sentry.client.config.js — konfigurasi client-side (browser)
sentry.server.config.js — konfigurasi server-side (SSR/API)

Integrasi Astro:

@sentry/astro terdaftar sebagai integration di astro.config.mjs:

sentry({
	project: 'amalshalih',
	org: 'yayasan-amal-shalih-insan-bant',
	authToken: process.env.SENTRY_AUTH_TOKEN,
})

Environment Variables:

Variable	Required	Source
`SENTRY_AUTH_TOKEN`	✅ Production	sentry.io → Settings → API → Auth Tokens

Scopes yang dibutuhkan: org:read, project:releases, project:write

Spotlight — Debugging Sidecar

Spotlight adalah sidecar debugger yang menampilkan log Sentry secara real-time di localhost.

Aktivasi:

bunx spotlight

Kemudian akses http://localhost:4321 — panel Spotlight akan muncul di pojok kanan bawah.

Konfigurasi:

Spotlight terdaftar sebagai integration di astro.config.mjs. Urutan penting:

integrations: [
	sentry(),      // 1. Sentry dulu
	spotlightjs(), // 2. Spotlight setelah Sentry
]

Spotlight hanya aktif di development — tidak akan muncul di production.

Struktur File

sentry.client.config.js    # Inisialisasi Sentry untuk browser
sentry.server.config.js    # Inisialisasi Sentry untuk server
.env.example               # Contoh environment variables (token, dll)

Design System

Dokumen design system lengkap tersedia di: 📄 .openkb/10-arsitektur/brainstorming.md — section "Design System & Visual Identity"

Prinsip Desain

Prinsip	Penerapan
WCAG AA	Semua kombinasi warna minimum 4.5:1
Modern Islamic	Warm, berlapis, elegan — hijau islami + gold aksen
Mobile First	Responsive dari 320px ke atas
Zero JS Client	Semua halaman static, tanpa JavaScript runtime
Konsisten	Satu design language di semua halaman

Palet Warna

Role	Color	Tailwind Class
Primary (Islamic Green)	#166534 → #14532d	`primary-800` → `primary-900`
Gold (Accent)	#fcd34d → #f59e0b	`gold-300` → `gold-500`
Warm (Neutral)	#fafaf9 → #1c1917	`warm-50` → `warm-900`

Commit Convention

Project ini mengikuti Conventional Commits dengan format:

<type>: <deskripsi singkat>

Type	Penggunaan
`feat`	Fitur baru (halaman, komponen, data)
`fix`	Bug fix (WCAG, styling, accessibility)
`chore`	Tugas maintenance (config, cleanup, dependencies)
`docs`	Dokumentasi (README, brainstorming, handover)
`refactor`	Perubahan kode tanpa perubahan fungsionalitas
`style`	Perubahan styling (formatting, spacing, warna)

Struktur Commit per Domain

Setiap commit bersifat atomic — satu domain per commit:

# Contoh:
chore: clean up Astro template boilerplate
chore: configure project settings and assets
feat: add data layer and content
feat: add UI components
feat: add layout and navigation
feat: add all pages and documentation
fix: resolve WCAG contrast on page header titles

Referensi: Dokumen commit strategy lengkap → .openkb/30-deploy/commit-strategy.md

Tim Pengembang

Peran	Nama / Tim	Keterangan
Pengembang	PT Koneksi Jaringan Indonesia	Development & maintenance
Klien	Yayasan Amal Shalih Insan Bantul (ASIB)	Pemilik produk & konten

PT Koneksi Jaringan Indonesia Perusahaan pengembang perangkat lunak yang berfokus pada solusi digital untuk organisasi nirlaba, pendidikan, dan dakwah Islam.

Kontak Pengembang

Untuk issue teknis, pengembangan fitur, atau maintenance, hubungi tim pengembang melalui kanal yang telah ditentukan dalam kontrak project.

Lisensi

Repository ini bersifat private dan seluruh hak cipta dilindungi undang-undang. Tidak diperkenankan mendistribusikan, menggandakan, atau menggunakan kode ini tanpa izin tertulis dari pemilik hak cipta.

Dokumen README ini diperbarui secara berkala. Terakhir diperbarui: 27 Mei 2026

Name		Name	Last commit message	Last commit date
Latest commit History 217 Commits
.github/workflows		.github/workflows
.husky		.husky
.openkb		.openkb
.sisyphus		.sisyphus
.understand-anything		.understand-anything
.vscode		.vscode
docs		docs
public		public
scripts		scripts
src		src
studio-amalshalih		studio-amalshalih
test		test
.env.example		.env.example
.gitignore		.gitignore
DESIGN_SYSTEM_AUDIT.md		DESIGN_SYSTEM_AUDIT.md
README.md		README.md
WEBSITE_AUDIT_CHECKLIST.md		WEBSITE_AUDIT_CHECKLIST.md
astro.config.mjs		astro.config.mjs
biome.json		biome.json
bun.lock		bun.lock
eslint.config.js		eslint.config.js
package.json		package.json
playwright.config.ts		playwright.config.ts
tsconfig.json		tsconfig.json
vitest.config.ts		vitest.config.ts
wrangler.jsonc		wrangler.jsonc

Folders and files

Latest commit

History

Repository files navigation

Yayasan Amal Shalih Insan Bantul — Website Resmi

Daftar Isi

Sekilas Project

Tech Stack

Persyaratan Sistem

Fitur

Halaman

Aksesibilitas

Performa

Struktur Project

Documentation

📚 OpenKB — Single Source of Truth

📘 Technical Knowledge Base (.openkb/ — repo ini)

Persiapan Lingkungan

1. Clone Repository

2. Install Dependencies

3. Environment Variables

Development

Menjalankan Development Server

Mematikan Server

Build Production

Preview Build

Build & Deploy

Cloudflare Workers (SSR)

Deployment Pipeline

Observability & Monitoring

Sentry — Error Tracking

Spotlight — Debugging Sidecar

Struktur File

Design System

Prinsip Desain

Palet Warna

Commit Convention

Struktur Commit per Domain

Tim Pengembang

Kontak Pengembang

Lisensi

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

📘 Technical Knowledge Base (`.openkb/` — repo ini)

Packages