# masjid-alfath/masjidalfath architecture

> Architecture diagram of the GitHub repository masjid-alfath/masjidalfath, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/masjid-alfath/masjidalfath
- Repository: https://github.com/masjid-alfath/masjidalfath

## Overview

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: [`scripts/sync-notion.js`](https://github.com/masjid-alfath/masjidalfath/blob/main/scripts/sync-notion.js) (Notion synchronizer), [`layouts/index.html`](https://github.com/masjid-alfath/masjidalfath/blob/main/layouts/index.html) (Homepage), [`layouts/program`](https://github.com/masjid-alfath/masjidalfath/tree/main/layouts/program) (Program pages), [`layouts/ziswaf`](https://github.com/masjid-alfath/masjidalfath/tree/main/layouts/ziswaf) (ZISWAF page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_content["Site Content"]
  node_articles["Articles"]
  node_programs["Programs"]
  node_agenda["Agenda data<br/>[agenda.yaml]"]
  node_programdata["Program data<br/>[program.yaml]"]
  node_ziswafdata["ZISWAF data<br/>[ziswaf.yaml]"]
  node_about["About content"]
  node_ziswaf["ZISWAF content"]
  node_images["Site images"]
end

subgraph group_render["Page Rendering"]
  node_home["Homepage<br/>[index.html]"]
  node_base["Base layout<br/>[baseof.html]"]
  node_agenda_pages["Agenda pages"]
  node_article_pages["Article pages"]
  node_program_pages["Program pages"]
  node_about_pages["About page"]
  node_ziswaf_pages["ZISWAF page"]
end

subgraph group_sync["Notion Sync"]
  node_notion_sync["Notion synchronizer<br/>[sync-notion.js]"]
end

subgraph group_browser["Browser Experience"]
  node_browser_js["Browser interactions<br/>[main.js]"]
end

node_visitor(("Site visitor"))
node_hugo["Hugo renderer"]
node_notion["Notion API"]
node_clipboard["Clipboard"]

node_visitor -->|"browses"| node_home
node_visitor -->|"browses"| node_agenda_pages
node_visitor -->|"browses"| node_article_pages
node_visitor -->|"browses"| node_program_pages
node_visitor -->|"browses"| node_about_pages
node_visitor -->|"browses"| node_ziswaf_pages
node_hugo -->|"renders"| node_home
node_hugo -->|"renders"| node_agenda_pages
node_hugo -->|"renders"| node_article_pages
node_hugo -->|"renders"| node_program_pages
node_hugo -->|"renders"| node_about_pages
node_hugo -->|"renders"| node_ziswaf_pages
node_base -->|"frames"| node_home
node_articles -->|"supplies content"| node_article_pages
node_programs -->|"supplies content"| node_program_pages
node_agenda -->|"supplies data"| node_agenda_pages
node_programdata -->|"supplies data"| node_home
node_programdata -->|"supplies data"| node_program_pages
node_about -->|"supplies content"| node_about_pages
node_ziswaf -->|"supplies content"| node_ziswaf_pages
node_ziswafdata -->|"supplies data"| node_ziswaf_pages
node_notion_sync -->|"queries"| node_notion
node_notion_sync -->|"writes Markdown"| node_articles
node_notion_sync -->|"writes agenda"| node_agenda
node_notion_sync -->|"writes program data"| node_programdata
node_notion_sync -->|"writes program pages"| node_programs
node_notion_sync -->|"writes images"| node_images
node_visitor -->|"uses controls"| node_browser_js
node_browser_js -->|"copies text"| node_clipboard

click node_articles "https://github.com/masjid-alfath/masjidalfath/tree/main/content/artikel"
click node_programs "https://github.com/masjid-alfath/masjidalfath/tree/main/content/program"
click node_agenda "https://github.com/masjid-alfath/masjidalfath/blob/main/data/agenda.yaml"
click node_programdata "https://github.com/masjid-alfath/masjidalfath/blob/main/data/program.yaml"
click node_ziswafdata "https://github.com/masjid-alfath/masjidalfath/blob/main/data/ziswaf.yaml"
click node_about "https://github.com/masjid-alfath/masjidalfath/tree/main/content/tentang"
click node_ziswaf "https://github.com/masjid-alfath/masjidalfath/tree/main/content/ziswaf"
click node_home "https://github.com/masjid-alfath/masjidalfath/blob/main/layouts/index.html"
click node_base "https://github.com/masjid-alfath/masjidalfath/blob/main/layouts/_default/baseof.html"
click node_agenda_pages "https://github.com/masjid-alfath/masjidalfath/tree/main/layouts/agenda"
click node_article_pages "https://github.com/masjid-alfath/masjidalfath/tree/main/layouts/artikel"
click node_program_pages "https://github.com/masjid-alfath/masjidalfath/tree/main/layouts/program"
click node_about_pages "https://github.com/masjid-alfath/masjidalfath/tree/main/layouts/tentang"
click node_ziswaf_pages "https://github.com/masjid-alfath/masjidalfath/tree/main/layouts/ziswaf"
click node_notion_sync "https://github.com/masjid-alfath/masjidalfath/blob/main/scripts/sync-notion.js"
click node_images "https://github.com/masjid-alfath/masjidalfath/tree/main/static/images"
click node_browser_js "https://github.com/masjid-alfath/masjidalfath/blob/main/static/js/main.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_articles,node_programs,node_agenda,node_programdata,node_ziswafdata,node_about,node_ziswaf,node_images toneBlue
class node_home,node_base,node_agenda_pages,node_article_pages,node_program_pages,node_about_pages,node_ziswaf_pages toneAmber
class node_notion_sync,node_notion toneMint
class node_browser_js toneRose
class node_visitor,node_hugo,node_clipboard toneIndigo
```

## Components

### Site Content

- [Articles](https://github.com/masjid-alfath/masjidalfath/tree/main/content/artikel): `content/artikel`
- [Programs](https://github.com/masjid-alfath/masjidalfath/tree/main/content/program): `content/program`
- [Agenda data](https://github.com/masjid-alfath/masjidalfath/blob/main/data/agenda.yaml): `data/agenda.yaml`
- [Program data](https://github.com/masjid-alfath/masjidalfath/blob/main/data/program.yaml): `data/program.yaml`
- [ZISWAF data](https://github.com/masjid-alfath/masjidalfath/blob/main/data/ziswaf.yaml): `data/ziswaf.yaml`
- [About content](https://github.com/masjid-alfath/masjidalfath/tree/main/content/tentang): `content/tentang`
- [ZISWAF content](https://github.com/masjid-alfath/masjidalfath/tree/main/content/ziswaf): `content/ziswaf`
- [Site images](https://github.com/masjid-alfath/masjidalfath/tree/main/static/images): `static/images`

### Page Rendering

- [Homepage](https://github.com/masjid-alfath/masjidalfath/blob/main/layouts/index.html): `layouts/index.html`
- [Base layout](https://github.com/masjid-alfath/masjidalfath/blob/main/layouts/_default/baseof.html): `layouts/_default/baseof.html`
- [Agenda pages](https://github.com/masjid-alfath/masjidalfath/tree/main/layouts/agenda): `layouts/agenda`
- [Article pages](https://github.com/masjid-alfath/masjidalfath/tree/main/layouts/artikel): `layouts/artikel`
- [Program pages](https://github.com/masjid-alfath/masjidalfath/tree/main/layouts/program): `layouts/program`
- [About page](https://github.com/masjid-alfath/masjidalfath/tree/main/layouts/tentang): `layouts/tentang`
- [ZISWAF page](https://github.com/masjid-alfath/masjidalfath/tree/main/layouts/ziswaf): `layouts/ziswaf`

### Notion Sync

- [Notion synchronizer](https://github.com/masjid-alfath/masjidalfath/blob/main/scripts/sync-notion.js): `scripts/sync-notion.js`

### Browser Experience

- [Browser interactions](https://github.com/masjid-alfath/masjidalfath/blob/main/static/js/main.js): `static/js/main.js`

### Other components

- **Site visitor**
- **Hugo renderer**
- **Notion API**
- **Clipboard**

## Connections

- 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