'use strict'; // ───────────────────────────────────────────────────────────────────────────── // DESIGN TOKENS // ───────────────────────────────────────────────────────────────────────────── const TOK = { bg: "#f1ece2", bgAlt: "#e3dccd", bgDeep: "#2c3a3a", ink: "#1f2a2a", inkSoft: "#5a6868", accent: "#3f6764", accentSoft: "#86a09c", rule: "#cdc5b3", serif: "'Cormorant Garamond', Georgia, serif", sans: "'DM Sans', system-ui, sans-serif", mono: "'JetBrains Mono', ui-monospace, monospace", }; const shell = { fontFamily: TOK.sans, color: TOK.ink, background: TOK.bg, minHeight: "100vh", lineHeight: 1.55, fontSize: 15, }; const PAGES = [ { label: "Home", hash: "home" }, { label: "Research", hash: "research" }, { label: "Publications", hash: "publications" }, { label: "Engagement", hash: "engagement" }, { label: "Contact", hash: "contact" }, ]; // ───────────────────────────────────────────────────────────────────────────── // CSV PARSER // ───────────────────────────────────────────────────────────────────────────── function parseCSV(text) { if (!text) return []; const lines = text.trim().split(/\r?\n/); if (lines.length < 2) return []; const headers = parseRow(lines[0]); return lines.slice(1) .map(line => { const values = parseRow(line); const obj = {}; headers.forEach((h, i) => { obj[h.trim()] = (values[i] || "").trim(); }); return obj; }) .filter(row => row[headers[0].trim()]); } function parseRow(line) { const result = []; let current = ""; let inQuotes = false; for (let i = 0; i < line.length; i++) { const ch = line[i]; if (ch === '"') { if (inQuotes && line[i + 1] === '"') { current += '"'; i++; } else { inQuotes = !inQuotes; } } else if (ch === ',' && !inQuotes) { result.push(current); current = ""; } else { current += ch; } } result.push(current); return result; } function splitSemi(str) { return (str || "").split(";").map(s => s.trim()).filter(Boolean); } // ───────────────────────────────────────────────────────────────────────────── // DATA LOADER // ───────────────────────────────────────────────────────────────────────────── async function loadData() { const get = url => fetch(url).then(r => { if (!r.ok) throw new Error(url); return r; }); const json = url => get(url).then(r => r.json()); const csv = url => get(url).then(r => r.text()).then(parseCSV); const [site, themes, projects, publications, engagement, collaborations, awards, grants, gallery] = await Promise.all([ json("data/site.json"), csv("data/research_themes.csv"), csv("data/projects.csv"), csv("data/publications.csv"), csv("data/engagement.csv"), csv("data/collaborations.csv"), csv("data/awards.csv"), csv("data/grants.csv"), csv("data/gallery.csv"), ]); // Join themes + projects const themeList = themes.map(t => ({ ...t, tags: splitSemi(t.tags), projects: projects .filter(p => p.theme_id === t.id) .map(p => ({ ...p, sites: splitSemi(p.sites), funders: splitSemi(p.funders), partners: splitSemi(p.partners), outputs: splitSemi(p.outputs), })), })); // Build slug lookup across all themes const projectBySlug = {}; themeList.forEach(t => t.projects.forEach(p => { projectBySlug[p.slug] = { theme: t, project: p }; })); // Group publications by theme const pubThemes = []; publications.forEach(pub => { let group = pubThemes.find(g => g.theme === pub.theme); if (!group) { group = { theme: pub.theme, items: [] }; pubThemes.push(group); } group.items.push(pub); }); return { site, themeList, projectBySlug, pubThemes, engagement: { podcasts: engagement.filter(e => e.type === "Podcast"), writing: engagement.filter(e => e.type === "Writing"), talks: engagement.filter(e => e.type === "Talk"), }, collaborations, awards, grants, gallery, }; } // ───────────────────────────────────────────────────────────────────────────── // PLACEHOLDER IMAGES // ───────────────────────────────────────────────────────────────────────────── const PH_TONES = { warm: { bg: "#e8d9c4", accent: "#c9a989", text: "#5a4836" }, sand: { bg: "#e7dcc7", accent: "#b8a07a", text: "#4a3c26" }, teal: { bg: "#c8d4d2", accent: "#7a9590", text: "#2f4744" }, }; function FieldPlaceholder({ label = "photo", tone = "teal", aspect = "4 / 5" }) { const t = PH_TONES[tone] || PH_TONES.teal; const id = React.useId(); return (
▢ {label}
); } function Portrait({ src, tone = "teal", aspect = "4 / 5" }) { const [failed, setFailed] = React.useState(false); if (!src || failed) return ; return ( setFailed(true)} style={{ width: "100%", aspectRatio: aspect, objectFit: "cover", display: "block" }} /> ); } // ───────────────────────────────────────────────────────────────────────────── // SHARED COMPONENTS // ───────────────────────────────────────────────────────────────────────────── function Nav({ active, mobile, onNav }) { if (mobile) { return (
onNav("home")} style={{ fontFamily: TOK.serif, fontSize: 22, fontStyle: "italic", fontWeight: 400, cursor: "pointer" }}> Clara Siagian
); } return (
onNav("home")} style={{ fontFamily: TOK.serif, fontSize: 26, fontStyle: "italic", fontWeight: 400, letterSpacing: "-0.005em", cursor: "pointer" }}> Clara Siagian
); } function Footer({ mobile }) { return ( ); } function Eyebrow({ children, light = false }) { return (
{children}
); } function PageHeader({ eyebrow, title, em, lead, mobile }) { return ( <> {eyebrow && {eyebrow}} {(title || em) && (

{title}{title && em ? " " : ""}{em}

)} {lead && (

{lead}

)} ); } // ───────────────────────────────────────────────────────────────────────────── // HOME // ───────────────────────────────────────────────────────────────────────────── function Home({ data, mobile, onNav }) { const { site } = data; const bioParagraphs = (site.bio || "").split(/\n\n+/).filter(Boolean); const { links = {} } = site; const portraitLinks = [ { key: "orcid", label: "ORCID" }, { key: "linkedin", label: "LinkedIn" }, ].filter(l => links[l.key]); return (
); } // ───────────────────────────────────────────────────────────────────────────── // RESEARCH // ───────────────────────────────────────────────────────────────────────────── const THEME_TONES = ["teal", "sand", "teal", "sand"]; function ThemePhoto({ theme, tone, mobile }) { const [failed, setFailed] = React.useState(false); const aspect = mobile ? "5 / 4" : "4 / 5"; if (!theme.image || failed) { return ; } return ( {theme.title} setFailed(true)} style={{ width: "100%", aspectRatio: aspect, objectFit: "cover", display: "block" }} /> ); } function Research({ data, mobile, onNav }) { const { themeList } = data; return (
); } // ───────────────────────────────────────────────────────────────────────────── // PROJECT DETAIL // ───────────────────────────────────────────────────────────────────────────── function ProjectBanner({ project, mobile }) { const [failed, setFailed] = React.useState(false); const aspect = mobile ? "5 / 3" : "16 / 7"; if (!project.image || failed) { return ; } return ( {project.title} setFailed(true)} style={{ width: "100%", aspectRatio: aspect, objectFit: "cover", display: "block" }} /> ); } function ProjectDetail({ data, mobile, onNav, slug }) { const entry = data.projectBySlug[slug]; if (!entry) return (
); const { theme, project } = entry; const metaFields = [ { label: "Period", value: project.period }, { label: "Sites", value: project.sites.join(" · ") }, { label: "Role", value: project.role }, { label: "Funding", value: project.funders.join(" · ") }, { label: "Collaborators", value: project.partners.join(" · ") }, ].filter(f => f.value); return (
); } // ───────────────────────────────────────────────────────────────────────────── // PUBLICATIONS // ───────────────────────────────────────────────────────────────────────────── function Publications({ data, mobile, onNav }) { const { pubThemes } = data; return (
); } // ───────────────────────────────────────────────────────────────────────────── // ENGAGEMENT // ───────────────────────────────────────────────────────────────────────────── function Engagement({ data, mobile, onNav }) { const { engagement } = data; const sections = [ { name: "Podcasts", subtitle: "Conversations", items: engagement.podcasts, kind: "Audio" }, { name: "Public Writing", subtitle: "Op-eds & Essays", items: engagement.writing, kind: "Essay" }, { name: "Invited Talks", subtitle: "Lectures & Workshops", items: engagement.talks, kind: "Talk" }, ].filter(s => s.items.length > 0); return (
); } // ───────────────────────────────────────────────────────────────────────────── // CONTACT // ───────────────────────────────────────────────────────────────────────────── function Contact({ data, mobile, onNav }) { const { site } = data; const { links = {} } = site; const email = site.email || links.email; const elsewhere = [ { label: "Google Scholar", url: links.scholar }, { label: "ORCID", url: links.orcid }, { label: "LinkedIn", url: links.linkedin }, { label: "Bluesky", url: links.bluesky }, { label: "ResearchGate", url: links.researchgate }, ].filter(l => l.url); return (
); } // ───────────────────────────────────────────────────────────────────────────── // ROUTER + APP // ───────────────────────────────────────────────────────────────────────────── const PAGE_MAP = { home: Home, research: Research, publications: Publications, engagement: Engagement, contact: Contact, }; function AppShell({ data }) { const [hash, setHash] = React.useState(() => window.location.hash.slice(1) || "home"); const [isMobile, setMobile] = React.useState(window.innerWidth < 768); React.useEffect(() => { const onHash = () => { setHash(window.location.hash.slice(1) || "home"); window.scrollTo(0, 0); }; const onResize = () => setMobile(window.innerWidth < 768); window.addEventListener("hashchange", onHash); window.addEventListener("resize", onResize); return () => { window.removeEventListener("hashchange", onHash); window.removeEventListener("resize", onResize); }; }, []); const onNav = target => { window.location.hash = "#" + target; }; const props = { data, mobile: isMobile, onNav }; if (hash.startsWith("project/")) { return ; } const Page = PAGE_MAP[hash] || Home; return ; } // ───────────────────────────────────────────────────────────────────────────── // MOUNT // ───────────────────────────────────────────────────────────────────────────── loadData() .then(data => { ReactDOM.createRoot(document.getElementById("root")).render(); }) .catch(err => { console.error("[app]", err); const root = document.getElementById("root"); root.innerHTML = '
Error loading site data. Make sure you are serving via a local server (e.g. python3 -m http.server 8080).
'; });