feat(docs): docs viewer, API reference generator, markdown rendering
- Add YAML frontmatter (title/order/category) to 13 docs/*.md files
- Add services/docs_service.py: mtime-cache, frontmatter parsing w/ fallback,
bleach sanitize, path traversal protection
- Add routes/docs.py: GET /api/docs, GET /api/docs/<slug>, GET /api/docs/api-reference
- Register docs_bp in app.py
- Add frontend /docs + /docs/[slug] routes (sidebar nav + markdown render)
- Add frontend/src/types/docs.ts interfaces
- Add link from /help page to /docs viewer
- Add scripts/validate_docs.py: frontmatter + broken link validation
- Add elemes.sh docs-validate command
Endpoints documented in API reference: /quiz-attempts/<lesson>,
/sessions, /bab/<folder>, /compile/sessions, /lesson/<slug>.json + all 30 routes
2026-08-17 11:29:43 +07:00
|
|
|
---
|
|
|
|
|
title: Slide Presentasi
|
|
|
|
|
order: 9
|
|
|
|
|
category: slides
|
|
|
|
|
---
|
2026-08-08 11:57:08 +07:00
|
|
|
# 09. Slide Presentasi Interaktif
|
|
|
|
|
|
|
|
|
|
Blok `---slide-start---` dan `---slide-end---` di materi markdown membuat carousel presentasi interaktif dengan fullscreen mode.
|
|
|
|
|
|
|
|
|
|
## Format
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
---slide-start---
|
|
|
|
|
## Slide 1: Judul
|
|
|
|
|
Konten slide ini mendukung teks, gambar, code fence, dan embed.
|
|
|
|
|
|
|
|
|
|
```c
|
|
|
|
|
int main() {
|
|
|
|
|
printf("Hello, World!\n");
|
|
|
|
|
return 0;
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
---slide-end---
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Fitur
|
|
|
|
|
|
|
|
|
|
- **Fullscreen mode** — tombol fullscreen untuk setiap slide
|
|
|
|
|
- **Embed support** — Canva, YouTube, Google Docs, Figma di dalam slide
|
|
|
|
|
- **Auto-save indicator** — indikator penyimpanan otomatis
|
|
|
|
|
- **Progress indicator** — menunjukkan slide ke berapa dari total
|
|
|
|
|
|
|
|
|
|
## Contoh
|
|
|
|
|
|
|
|
|
|
Lihat `examples/content/dasar/rangkaian_dasar.md` untuk contoh slide dengan embed Canva dan circuit.
|
|
|
|
|
|
|
|
|
|
## Catatan
|
|
|
|
|
|
|
|
|
|
- Slide mendukung semua blok markdown kecuali `---QUIZ_FLASHCARD---` dan `---slide-start---` di dalam slide
|
|
|
|
|
- Embed di dalam slide diproses otomatis oleh backend (`_process_embed_embeds()` di loop slide)
|
|
|
|
|
- Gambar di slide menggunakan path relatif `/assets/` atau URL absolut
|