Journal Ocean — Website

Website resmi Journal Ocean (sebelumnya Yayasan Sawiyan), dibangun dengan Astro + Tailwind CSS v4 + Directus CMS.

---

🧭 Quick Start

npm install
npm run dev      # dev server di http://localhost:4321
npm run build    # build ke ./dist
npm run preview  # preview production build

Environment vars (lihat .env):

DIRECTUS_URL='https://cms.sawiyan.or.id/'
DIRECTUS_TOKEN='...'   # opsional, hanya kalau perlu write access

---

📁 Project Structure

/
├── docs/                       # Dokumentasi setup & panduan
│   └── directus-cms-setup.md   # Setup collection, fields, permissions di Directus
├── public/                     # Static assets (logo, favicon, dll)
│   └── logo-journalocean.png
├── src/
│   ├── components/
│   │   ├── animations/         # Framer Motion wrappers
│   │   ├── globals/            # Layout shell: Navbar, Footer, Preloader
│   │   └── pages/              # Komponen per-halaman
│   │       ├── berita/         # HeroWithSidebar, LatestBeritaCarousel
│   │       ├── landing-pages/  # Profile, Pengumuman, Slider ← dari CMS
│   │       ├── profil/         # ProfilJournalOcean, VisiMisi, StrukturOrganisasi
│   │       └── program/        # ProgramSosial, Kemanusiaan, Keagamaan
│   ├── layouts/
│   │   └── Layout.astro        # Root layout
│   ├── lib/
│   │   └── directus.ts         # Directus SDK client + CMS fetchers
│   ├── pages/                  # Astro routes
│   │   ├── index.astro
│   │   ├── profil.astro
│   │   ├── program.astro
│   │   └── berita/
│   └── styles/
│       └── globals.css         # Tailwind v4 @theme + design tokens
├── astro.config.mjs
├── tailwind config di globals.css
├── tsconfig.json
└── package.json

---

🎨 Design System

Theme: Navy & Teal — akademik editorial, precise, modern

Token	Hex	Usage
navy	#1455aa	Primary, CTA
navy-dark	#0f418b	Dark primary
navy-pale	#90c0ea	Soft accent
teal	#16d7d6	Secondary accent
teal-bright	#26e5e5	Highlight accent
paper	#fafdfe	Page background
aqua	#eef7f8	Card background
white	#ffffff	Surface
ink	#224c7d	Body text

Typography:

• Fraunces — Display serif (heading, hero)
• Merriweather Sans Variable — Body sans-serif
• JetBrains Mono — Numerals, labels, counter

Tokens didefinisikan di src/styles/globals.css via Tailwind v4 @theme directive.

---

🗄️ Content Management (Directus)

Website ini ter-integrasi dengan Directus untuk konten dinamis. Saat ini yang CMS-driven:

• Slider landing page — hero_slides collection (lihat docs/directus-cms-setup.md)

Cara kerja

• output: "server" di astro.config.mjs → setiap request fetch ulang dari CMS
• src/lib/directus.ts punya:
  • getHeroSlides() — fetch hero_slides dari CMS, sort by id asc
  • directusAssetUrl() — convert UUID asset ke full URL
  • 60s in-memory cache per request
• Slider sekarang bergantung pada data CMS hero_slides dan tidak memakai fallback hardcoded.

Menambah collection baru

1. Create collection di Directus admin (/admin)
2. Set public read permission
3. Tambah fetcher di src/lib/directus.ts (mirip getHeroSlides)
4. Pakai di .astro component: const data = await getXxx()

---

🧞 Commands

Command	Action
npm install	Install dependencies
npm run dev	Dev server di localhost:4321
npm run build	Production build ke ./dist/
npm run preview	Preview production build sebelum deploy
npm run astro ...	Run CLI commands (e.g. astro add, astro check)
npx astro check	TypeScript + Astro diagnostics

---

📚 Dokumentasi Lain

• docs/directus-cms-setup.md — Setup Directus collection, fields, permissions, dan seed data
• docs/hero-slides-content.md — Konten siap-paste untuk 6 slide hero_slides
• docs/netlify-deploy.md — Panduan deploy native Netlify untuk Astro SSR
• docs/coolify-docker-deploy.md — Panduan deploy Coolify dengan Dockerfile

---

📝 Catatan

• Astro v6, Tailwind v4 (CSS-based config, @theme directive)
• SSR mode via adapter auto-detect (@astrojs/netlify atau @astrojs/node)
• Animations: Framer Motion, GSAP, Swiper, Embla Carousel
• Icons: lucide-astro / lucide-react