How masjid-alfath/masjidalfath works
Masjid Al-Fath is a Hugo-based public website for a mosque, presenting articles, programs, events, ZISWAF information, and about content. Visitors browse the generated pages; the templates combine repository content and data, while a separate Notion sync script fetches editorial material and writes site inputs. Browser JavaScript handles navigation, theme toggling, and copy-to-clipboard. The README provides no architectural detail, and the sync-script excerpt is partial, so only evidenced integrations and outputs are shown.
Main entry points: sync-notion.js Notion synchronizer · index.html Homepage · program Program pages · ziswaf ZISWAF page
Components 21
Site Content
- Articles
content/artikel - Programs
content/program - Agenda data
data/agenda.yaml - Program data
data/program.yaml - ZISWAF data
data/ziswaf.yaml - About content
content/tentang - ZISWAF content
content/ziswaf - Site images
static/images
Page Rendering
- Homepage
layouts/index.html - Base layout
layouts/_default/baseof.html - Agenda pages
layouts/agenda - Article pages
layouts/artikel - Program pages
layouts/program - About page
layouts/tentang - ZISWAF page
layouts/ziswaf
Notion Sync
- Notion synchronizer
scripts/sync-notion.js
Browser Experience
- Browser interactions
static/js/main.js
Other components
- Site visitor
- Hugo renderer
- Notion API
- Clipboard
Connections 29
- Site visitor → Homepage: browses
- Site visitor → Agenda pages: browses
- Site visitor → Article pages: browses
- Site visitor → Program pages: browses
- Site visitor → About page: browses
- Site visitor → ZISWAF page: browses
- Hugo renderer → Homepage: renders
- Hugo renderer → Agenda pages: renders
- Hugo renderer → Article pages: renders
- Hugo renderer → Program pages: renders
- Hugo renderer → About page: renders
- Hugo renderer → ZISWAF page: renders
- Base layout → Homepage: frames
- Articles → Article pages: supplies content
- Programs → Program pages: supplies content
- Agenda data → Agenda pages: supplies data
- Program data → Homepage: supplies data
- Program data → Program pages: supplies data
- About content → About page: supplies content
- ZISWAF content → ZISWAF page: supplies content
- ZISWAF data → ZISWAF page: supplies data
- Notion synchronizer → Notion API: queries
- Notion synchronizer → Articles: writes Markdown
- Notion synchronizer → Agenda data: writes agenda
- Notion synchronizer → Program data: writes program data
- Notion synchronizer → Programs: writes program pages
- Notion synchronizer → Site images: writes images
- Site visitor → Browser interactions: uses controls
- Browser interactions → Clipboard: copies text