← Back to archive § Architecture
Meta page Bangkok · 2026.05
§ 03How the archive is built

The shape
of the archive.

Seven pages, three layers, one shared design system. Click any node below to jump to it. The structure mirrors the analytical claim: multiple reading positions onto a single pattern.

§ A · LANDING HUB § B · FIVE READING ENTRIES § C · SUPPORT & META PAGES § D · SHARED DESIGN SYSTEM index.html Landing hub § A · entry point persona.html Role path · main § 01.1 · 4-step path picker → lanyard → story → outcome [ FLAGSHIP ] map.html Physical map § 01.2 · physical 9 sites · dossier + timeline scrubber 2007 → 2026 network.html Power relations § 01.3 · relational 14 actors · 8 instruments 6 events filter chips · hover analysis cases.html Conflict readings § 01.4 · conflict 4 site clusters two-side analysis + mechanism reveal gallery.html Image archive § 01.5 · visual documents · photos drawings [ COMING SOON ] architecture.html § 03 · this page contribute.html § 02 · guidelines + intake form slogan · §02.1–02.4 · form · EN 中 ไทย chula-powermap.css design tokens · all pages dither.js bg canvas portrait.js pixel faces index.js landing only persona.js picker → outcome
Hub
Single entry to the archive
Flagship
Main reading entry (persona path)
Reading page
One of four parallel ways in
Support page
Gallery (WIP), contribute (merged), meta
§ Layer A · Hub

One door.

index.html is the only landing page. It states the claim — shrine still standing, 122M baht lawsuit active — and offers five parallel ways in.

The hero combines a full-bleed dither background with a four-photo collage of the key sites. No video, no scrolling animation — the visual weight is in typography and the corridor itself.

index.html
index.js
chula-powermap.css
dither.js · portrait.js
§ Layer B · Five reading entries

Five positions, one truth.

The archive treats reading position as analytically meaningful. Persona makes you somebody; Map gives you addresses; Network gives you relations; Cases gives you conflict pairs; Gallery (when ready) gives you the visual record.

Persona is the flagship — it forces a 4-step decision walk that ends in one of four real-history mechanisms (M02, M03, M04, M05).

persona.html / persona.js
map.html
network.html
cases.html
gallery.html
§ Layer C/D · Support & shared

The infrastructure.

One shared stylesheet (chula-powermap.css) holds every design token — colors, type scale, spacing. Three shared JS files handle the dither background, pixel portraits, and landing interactions. Each reading page adds only its own page-specific styles inline.

contribute.html now merges the editorial guidelines and the intake form on a single page — slogan opener, §02.1–02.4 on the left, the submission form on the right, with an EN · 中 · ไทย language toggle. It is reachable from every reading entry. This page is the meta-architecture for reviewers.

contribute.html (guidelines + form)
architecture.html
chula-powermap.css
dither.js · portrait.js · *.js
§ File tree · all 13 files chula-powermap/
├── index.html // landing hub · five-entry SpotlightCard grid
├── persona.html // picker → lanyard → story → outcome
├── map.html // 9 sites + timeline scrubber (2007-2026)
├── network.html // 14 actors · 8 instruments · 6 events
├── cases.html // 4 conflict clusters, expandable
├── gallery.html // coming soon placeholder
├── contribute.html // MERGED: guidelines + intake form · EN 中 ไทย
├── architecture.html // this page

├── chula-powermap.css // design tokens · shared by all pages
├── dither.js // purple Bayer dither background
├── portrait.js // pixel face drawing (96 unique seeds)
├── index.js // landing-only spotlight + portrait strip
└── persona.js // picker · 3D lanyard · typewriter · story tree · outcomes