đŸŽŦ SawadeeSeries

đŸ“Ļ Panduan Deploy Lengkap - Version 2.0

✅ Build Success Thailand Edition ⚠ī¸ COPY HTML INI DULU SEBELUM BUILD!

⚠ī¸ PENTING! BACA INI DULU!

  1. File ini ada di folder docs/ - Tidak akan ter-build ke production
  2. COPY HTML ini SEBELUM deploy - Untuk dokumentasi
  3. Jangan upload folder docs/ - Hanya untuk referensi lokal
  4. Upload hanya folder dist/ - Hasil build production

✅ Ringkasan Fixes Terbaru

✅ 3 Masalah Utama Sudah Fixed:
  • ✅ Iklan Banner - Sudah muncul dengan benar
  • ✅ MovieCard Click - Tidak redirect ke home lagi
  • ✅ URL Thailand - Sudah pakai /th/ path

1ī¸âƒŖ Fix Iklan Banner

Yang Dilakukan:

  • ✅ Simplified ad loading mechanism
  • ✅ Direct DOM injection (no iframe)
  • ✅ Loading timeout 2 detik
  • ✅ Fallback placeholder jika error
  • ✅ Console logs untuk debugging

2ī¸âƒŖ Fix MovieCard Navigation

Yang Dilakukan:

  • ✅ Dynamic base URL detection di client-side
  • ✅ Auto detect sub-path dari window.location
  • ✅ Proper navigation tanpa redirect loop
  • ✅ Console logs lengkap untuk tracking
// Dynamic base URL detection: const currentPath = window.location.pathname; const pathParts = currentPath.split('/').filter(Boolean); const baseUrl = pathParts.length > 0 ? '/' + pathParts[0] : ''; const detailUrl = `${baseUrl}/movie/${item.id}`;

3ī¸âƒŖ URL Thailand Format

Perubahan URL:

Type Old URL New URL
Movie /en/movie/{id} /th/movie/{id}
TV Season /en/tv/{id}-{s}-1/... /th/tv/{id}-{s}-1/...
TV Episode /en/tv/{id}-{s}-{e}/... /th/tv/{id}-{s}-{e}/...

🚀 Cara Deploy ke Webflow

⚠ī¸ SEBELUM DEPLOY:
  1. COPY HTML ini terlebih dahulu untuk dokumentasi
  2. Simpan di tempat aman (Notepad, Google Docs, dll)
  3. Baru jalankan npm run build

Step 1: Build Project

# Di terminal/command prompt: npm run build # Expected output: # ✓ built in ~5s # [build] Complete!

Step 2: Cek Folder dist/

Files yang HARUS ADA:

  • ⚠ī¸ _worker.js - Cloudflare Workers entry (WAJIB!)
  • ✅ _routes.json - Routing config
  • ✅ _headers - Security headers
  • ✅ _astro/ - Folder assets
  • ✅ favicon.ico - Site icon
  • ✅ placeholder.svg - Fallback image

Step 3: Upload ke Webflow

  1. ✅ Login ke Webflow Dashboard
  2. ✅ Pilih Site → Apps → Cloudflare Workers
  3. ✅ HAPUS semua file lama (penting!)
  4. ✅ Upload SEMUA file dari folder dist/
  5. ✅ Pastikan struktur folder tetap sama
  6. ✅ Verify _worker.js ter-upload
  7. ✅ Save & Deploy
❌ JANGAN UPLOAD INI:
  • ❌ Folder docs/ - Hanya untuk dokumentasi lokal
  • ❌ File .md - README files
  • ❌ File node_modules/ - Dependencies
  • ❌ File src/ - Source code

Step 4: Test Deploy

  1. ✅ Buka site URL di browser
  2. ✅ Hard refresh - Ctrl+Shift+R atau Cmd+Shift+R
  3. ✅ Check homepage load (harus ada movie cards)
  4. ✅ Klik card → Harus ke detail page (bukan home!)
  5. ✅ Check iklan banner muncul (tunggu 2-5 detik)
  6. ✅ Test tombol "ā¸”ā¸šāš€ā¸Ĩā¸ĸ" → Buka tab baru
  7. ✅ Check console - Tidak ada error
  8. ✅ Test di mobile & desktop

đŸ§Ē Testing Checklist

✅ Homepage Test

Yang Harus Terlihat:

  • ✅ Hero section: 30 card BL series dengan badge ranking (1-30)
  • ✅ Section "ā¸­ā¸ąā¸›āš€ā¸”ā¸•ā¸Ĩāšˆā¸˛ā¸Ēā¸¸ā¸”" (18 cards)
  • ✅ Section "ā¸‹ā¸ĩā¸Ŗā¸ĩā¸ĒāšŒā¸§ā¸˛ā¸ĸāšā¸™ā¸°ā¸™ā¸ŗ" (18 cards)
  • ✅ Section "ā¸‹ā¸ĩā¸Ŗā¸ĩā¸ĒāšŒā¸ĸā¸šā¸Ŗā¸´ā¸Ąā¸˛āšā¸Ŗā¸‡" (18 cards)
  • ✅ Section "ā¸‹ā¸ĩā¸Ŗā¸ĩā¸ĒāšŒāš€ā¸­āš€ā¸Šā¸ĩā¸ĸā¸ĸā¸­ā¸”ā¸Žā¸´ā¸•" (18 cards)
  • ✅ Section "ā¸ ā¸˛ā¸žā¸ĸā¸™ā¸•ā¸ŖāšŒāš„ā¸—ā¸ĸā¸­ā¸­ā¸™āš„ā¸Ĩā¸™āšŒ" (18 cards)
  • ✅ 4-5 iklan banner di antara sections
  • ✅ Header dengan logo & navigation
  • ✅ Footer dengan info & links

✅ Card Click Test

Expected Behavior:

  • ✅ Klik card → URL berubah ke detail page
  • ✅ Format: /sawadeeseries/movie/{id}
  • ✅ Atau: /sawadeeseries/tv/{id}/{slug}
  • ✅ Detail page load dengan info lengkap
  • ✅ NO redirect loop ke homepage
✅ Console Log yang Benar:
đŸŽ¯ Navigating to detail page: { currentPath: "/sawadeeseries", baseUrl: "/sawadeeseries", detailUrl: "/sawadeeseries/movie/12345", mediaType: "movie", id: 12345, title: "Movie Title" }

✅ Ad Banner Test

Expected Behavior:

  • ✅ Loading state 2 detik
  • ✅ Banner ad muncul di container
  • ✅ Jika error → Placeholder "ā¸žā¸ˇāš‰ā¸™ā¸—ā¸ĩāšˆāš‚ā¸†ā¸Šā¸“ā¸˛ đŸ“ĸ"
  • ✅ Responsive di mobile & desktop
✅ Console Log yang Benar:
đŸŽ¯ Loading ad: d548a9a52514b2cf478f899621432232 (728x90) đŸ“Ļ Ad scripts injected: d548a9a52514b2cf478f899621432232 ✅ Ad script loaded successfully

✅ Watch Button Test

Expected Behavior:

  • ✅ Klik tombol "ā¸”ā¸šāš€ā¸Ĩā¸ĸ"
  • ✅ Buka tab baru
  • ✅ URL: https://zeromovies4k.net/th/movie/{id}
  • ✅ Atau: https://zeromovies4k.net/th/tv/{id}-{s}-{e}/episode-{e}
  • ✅ Parent tab tetap di detail page
✅ Console Log yang Benar:
đŸŽŦ Opening episode in new tab: { watchUrl: "https://zeromovies4k.net/th/tv/12345-1-5/episode-5", tvId: "12345", season: "1", episode: "5" }

🐛 Troubleshooting

Problem 1: Card Klik Kembali ke Home

❌ Symptom:

Klik card → Redirect ke homepage, bukan detail page

✅ Solution:
  1. Hard Refresh: Ctrl+Shift+R atau Cmd+Shift+R
  2. Clear Cache: Browser settings → Clear all data
  3. Check Console: F12 → Console → Look for navigation logs
  4. Verify _worker.js: Pastikan file ini ter-upload
  5. Re-deploy: Hapus semua file, upload ulang

Problem 2: Iklan Tidak Muncul

❌ Symptom:

Banner ad tidak load, hanya loading spinner atau placeholder

✅ Solution:
  1. Wait: Tunggu 5-10 detik (ad network slow)
  2. Disable Ad-blocker: Matikan extension ad-block
  3. Check Network: F12 → Network → Filter "highperformanceformat"
  4. Verify Ad Key: Pastikan adKey benar di component
  5. Check _headers: Pastikan CORS policy benar

Problem 3: 404 Not Found

❌ Symptom:

Detail page atau assets return 404 error

✅ Solution:
  1. Check URL: Pastikan format URL benar
  2. Verify _routes.json: File ter-upload & valid JSON
  3. Check Middleware: Cloudflare Workers berjalan
  4. Verify Assets: Folder _astro/ ter-upload lengkap
  5. Re-deploy: Upload ulang semua files

Problem 4: Page Menampilkan HTML Documentation

❌ Symptom:

Homepage menampilkan HTML dokumentasi, bukan movie cards

✅ Solution:
  1. Hapus file docs/ dari upload (jika ter-upload)
  2. Hapus semua .html files di root Webflow
  3. Build ulang: npm run build
  4. Upload hanya dist/ folder
  5. Hard refresh browser

📊 URL Structure Reference

Internal URLs (SawadeeSeries)

Page Type URL Pattern Example
Homepage / /sawadeeseries
Movie Detail /movie/{id} /sawadeeseries/movie/12345
TV Detail /tv/{id}/{slug} /sawadeeseries/tv/12345/some-series
Season Page /tv/{id}/{slug}/season/{num} /sawadeeseries/tv/12345/some-series/season/1

External URLs (ZeroMovies4K - Thailand)

Content Type URL Pattern Example
Movie Watch zeromovies4k.net/th/movie/{id} https://zeromovies4k.net/th/movie/12345
TV Season zeromovies4k.net/th/tv/{id}-{s}-1/episode-1 https://zeromovies4k.net/th/tv/12345-1-1/episode-1
TV Episode zeromovies4k.net/th/tv/{id}-{s}-{e}/episode-{e} https://zeromovies4k.net/th/tv/12345-1-5/episode-5

đŸ“Ļ Build Information

📊 Build Stats

  • Total Files: 56
  • Build Time: ~5s
  • Output: dist/
  • Status: ✅ Ready

🔧 Tech Stack

  • ✅ Astro 5.x
  • ✅ React 19
  • ✅ Tailwind CSS 4
  • ✅ Cloudflare Workers
  • ✅ TMDB API

đŸŽ¯ Features

  • ✅ 30 Top BL Series
  • ✅ Latest Updates
  • ✅ Thai BL/GL Series
  • ✅ K-Drama & C-Drama
  • ✅ Thai Cinema
  • ✅ Ad Integration

📝 Final Checklist

  1. ✅ COPY HTML ini untuk dokumentasi
  2. ✅ Build project dengan npm run build
  3. ✅ Verify dist/ folder ada _worker.js
  4. ✅ Hapus file lama di Webflow
  5. ✅ Upload dist/ ke Webflow
  6. ✅ Hard refresh browser
  7. ✅ Test semua fitur
  8. ✅ Check console untuk errors
✅ Ready to Deploy!

Dokumentasi ini ada di docs/DEPLOY_GUIDE.html
File ini TIDAK akan ter-build ke production.
Hanya upload folder dist/ saja!

🎉 Happy Deploying! 🚀

Kalau ada masalah, screenshot console dan beritahu saya!

SawadeeSeries v2.0 - Thailand Edition

Build Date: 2026-03-26 | Status: ✅ Production Ready

Dokumentasi ini ada di folder docs/ - Tidak akan ter-build