# shawneetz/ani-nino architecture

> Architecture diagram of the GitHub repository shawneetz/ani-nino, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/shawneetz/ani-nino
- Repository: https://github.com/shawneetz/ani-nino

## Overview

Anino ng Ani is a public-facing, source-oriented explorer of martial-law programs and their present-day echoes. Visitors can explore programs by year, topic, province, and era, then open program records; the site also presents sourced charts, sources, and research gaps. The Explorer’s shared filtering path and map/list views are visible in the excerpts. The README is empty, and page-to-data wiring is not established by the supplied evidence, so those connections are omitted rather than inferred.

Main entry points: [`nextjs-app/src/components/Explorer.tsx`](https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/components/Explorer.tsx) (Explorer coordinator), [`nextjs-app/src/components/PinMap.tsx`](https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/components/PinMap.tsx) (Program map), [`nextjs-app/src/lib/vocab.ts`](https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/lib/vocab.ts) (Domain vocabulary), [`nextjs-app/src/lib/load-content.ts`](https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/lib/load-content.ts) (Content loader)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Site pages"]
  node_home["Home explorer page<br/>[page.tsx]"]
  node_program_page["Program detail<br/>[page.tsx]"]
  node_charts_page["Charts page<br/>[page.tsx]"]
  node_sources_page["Sources page<br/>[page.tsx]"]
  node_about_page["About page<br/>[page.tsx]"]
end

subgraph group_explore["Program explorer"]
  node_explorer["Explorer coordinator<br/>[Explorer.tsx]"]
  node_filter_state["Filter state"]
  node_filter_logic["Filter logic<br/>[filter.ts]"]
  node_filter_controls["Filter controls"]
  node_year_slider["Year slider<br/>[YearSlider.tsx]"]
  node_pin_map["Program map<br/>[PinMap.tsx]"]
  node_legend["Map legend<br/>[legend.tsx]"]
  node_program_card["Program card<br/>[program-card.tsx]"]
end

subgraph group_research["Research views"]
  node_chart_card["Sourced chart<br/>[chart-card.tsx]"]
  node_source_list["Source list<br/>[source-list.tsx]"]
end

subgraph group_content["Content and definitions"]
  node_content_store["YAML content"]
  node_content_loader["Content loader<br/>[load-content.ts]"]
  node_content_schema["Content validation<br/>[content-schema.ts]"]
  node_vocabulary["Domain vocabulary<br/>[vocab.ts]"]
end

node_visitor(("Visitor"))
node_maplibre_cdn["MapLibre CDN"]
node_map_tiles["OpenFreeMap tiles"]

node_visitor -->|"opens"| node_home
node_explorer -->|"reads state"| node_filter_state
node_explorer -->|"filters programs"| node_filter_logic
node_explorer -->|"renders controls"| node_filter_controls
node_explorer -->|"renders slider"| node_year_slider
node_explorer -->|"renders map"| node_pin_map
node_explorer -->|"renders legend"| node_legend
node_explorer -->|"renders results"| node_program_card
node_pin_map -->|"navigates to"| node_program_page
node_pin_map -->|"loads library"| node_maplibre_cdn
node_pin_map -->|"uses map style"| node_map_tiles
node_charts_page -.->|"presents charts"| node_chart_card
node_sources_page -.->|"presents sources"| node_source_list
node_content_loader -->|"reads YAML"| node_content_store
node_content_loader -->|"validates with"| node_content_schema
node_content_schema -->|"uses domain keys"| node_vocabulary
node_filter_controls -->|"uses labels"| node_vocabulary
node_pin_map -->|"uses topic colors"| node_vocabulary
node_program_card -->|"uses topic labels"| node_vocabulary

click node_home "https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/app/page.tsx"
click node_program_page "https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/app/programs/%5Bslug%5D/page.tsx"
click node_charts_page "https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/app/charts/page.tsx"
click node_sources_page "https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/app/sources/page.tsx"
click node_about_page "https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/app/about/page.tsx"
click node_explorer "https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/components/Explorer.tsx"
click node_filter_state "https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/hooks/use-filter-state.ts"
click node_filter_logic "https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/lib/filter.ts"
click node_filter_controls "https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/components/filter-controls.tsx"
click node_year_slider "https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/components/YearSlider.tsx"
click node_pin_map "https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/components/PinMap.tsx"
click node_legend "https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/components/legend.tsx"
click node_program_card "https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/components/program-card.tsx"
click node_chart_card "https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/components/chart-card.tsx"
click node_source_list "https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/components/source-list.tsx"
click node_content_store "https://github.com/shawneetz/ani-nino/tree/main/nextjs-app/content"
click node_content_loader "https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/lib/load-content.ts"
click node_content_schema "https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/lib/content-schema.ts"
click node_vocabulary "https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/lib/vocab.ts"

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_home,node_program_page,node_charts_page,node_sources_page,node_about_page toneBlue
class node_explorer,node_filter_state,node_filter_logic,node_filter_controls,node_year_slider,node_pin_map,node_legend,node_program_card toneAmber
class node_chart_card,node_source_list toneMint
class node_content_store,node_content_loader,node_content_schema,node_vocabulary toneRose
class node_visitor,node_maplibre_cdn,node_map_tiles toneIndigo
```

## Components

### Site pages

- [Home explorer page](https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/app/page.tsx): `nextjs-app/app/page.tsx`
- [Program detail](https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/app/programs/%5Bslug%5D/page.tsx): `nextjs-app/app/programs/[slug]/page.tsx`
- [Charts page](https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/app/charts/page.tsx): `nextjs-app/app/charts/page.tsx`
- [Sources page](https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/app/sources/page.tsx): `nextjs-app/app/sources/page.tsx`
- [About page](https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/app/about/page.tsx): `nextjs-app/app/about/page.tsx`

### Program explorer

- [Explorer coordinator](https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/components/Explorer.tsx): `nextjs-app/src/components/Explorer.tsx`
- [Filter state](https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/hooks/use-filter-state.ts): `nextjs-app/src/hooks/use-filter-state.ts`
- [Filter logic](https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/lib/filter.ts): `nextjs-app/src/lib/filter.ts`
- [Filter controls](https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/components/filter-controls.tsx): `nextjs-app/src/components/filter-controls.tsx`
- [Year slider](https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/components/YearSlider.tsx): `nextjs-app/src/components/YearSlider.tsx`
- [Program map](https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/components/PinMap.tsx): `nextjs-app/src/components/PinMap.tsx`
- [Map legend](https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/components/legend.tsx): `nextjs-app/src/components/legend.tsx`
- [Program card](https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/components/program-card.tsx): `nextjs-app/src/components/program-card.tsx`

### Research views

- [Sourced chart](https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/components/chart-card.tsx): `nextjs-app/src/components/chart-card.tsx`
- [Source list](https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/components/source-list.tsx): `nextjs-app/src/components/source-list.tsx`

### Content and definitions

- [YAML content](https://github.com/shawneetz/ani-nino/tree/main/nextjs-app/content): `nextjs-app/content`
- [Content loader](https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/lib/load-content.ts): `nextjs-app/src/lib/load-content.ts`
- [Content validation](https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/lib/content-schema.ts): `nextjs-app/src/lib/content-schema.ts`
- [Domain vocabulary](https://github.com/shawneetz/ani-nino/blob/main/nextjs-app/src/lib/vocab.ts): `nextjs-app/src/lib/vocab.ts`

### Other components

- **Visitor**
- **MapLibre CDN**
- **OpenFreeMap tiles**

## Connections

- Visitor → Home explorer page: opens
- Explorer coordinator → Filter state: reads state (evidence: `nextjs-app/src/components/Explorer.tsx`)
- Explorer coordinator → Filter logic: filters programs (evidence: `nextjs-app/src/components/Explorer.tsx`)
- Explorer coordinator → Filter controls: renders controls (evidence: `nextjs-app/src/components/Explorer.tsx`)
- Explorer coordinator → Year slider: renders slider (evidence: `nextjs-app/src/components/Explorer.tsx`)
- Explorer coordinator → Program map: renders map (evidence: `nextjs-app/src/components/Explorer.tsx`)
- Explorer coordinator → Map legend: renders legend (evidence: `nextjs-app/src/components/Explorer.tsx`)
- Explorer coordinator → Program card: renders results (evidence: `nextjs-app/src/components/Explorer.tsx`)
- Program map → Program detail: navigates to (evidence: `nextjs-app/src/components/PinMap.tsx`)
- Program map → MapLibre CDN: loads library (evidence: `nextjs-app/src/components/PinMap.tsx`)
- Program map → OpenFreeMap tiles: uses map style (evidence: `nextjs-app/src/components/PinMap.tsx`)
- Charts page → Sourced chart: presents charts
- Sources page → Source list: presents sources
- Content loader → YAML content: reads YAML (evidence: `nextjs-app/src/lib/load-content.ts`)
- Content loader → Content validation: validates with (evidence: `nextjs-app/src/lib/load-content.ts`)
- Content validation → Domain vocabulary: uses domain keys (evidence: `nextjs-app/src/lib/content-schema.ts`)
- Filter controls → Domain vocabulary: uses labels (evidence: `nextjs-app/src/components/filter-controls.tsx`)
- Program map → Domain vocabulary: uses topic colors (evidence: `nextjs-app/src/components/PinMap.tsx`)
- Program card → Domain vocabulary: uses topic labels (evidence: `nextjs-app/src/components/program-card.tsx`)