// Main app for jingxuan.uk const { useState, useEffect, useRef } = React; // `data` defaults to the static bundle in data.js so the homepage renders // instantly; App's first effect re-fetches /api/site-data (KV-backed, what // /edit writes to) and reassigns this binding before forcing a re-render. let data = window.SITE_DATA; const PubThumb = window.PubThumb; // ============================================================ // Small UI atoms // ============================================================ const MonoLabel = ({ children, className = "" }) => ( {children} ); const WechatChip = ({ id }) => { const [copied, setCopied] = useState(false); const onClick = (e) => { e.preventDefault(); if (navigator.clipboard?.writeText) { navigator.clipboard.writeText(id).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1500); }); } }; return ( {copied ? "Copied!" : `微信 ${id}`} ); }; const SectionTitle = ({ index, title, hint }) => (
{index && § {index}} {hint && {hint}}

{title}

); // Inline icon set — kept minimal, stroke-based const Icon = ({ name, size = 16 }) => { const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }; const paths = { scholar: <>, github: <>, x: <>, mail: <>, wechat: <>微, linuxdo: <>, cv: <>, arrow: <>, arrowUp: <>, back: <>, clock: <>, }; return {paths[name]}; }; // ============================================================ // Top navigation // ============================================================ const TABS = [ { id: "about", label: "About" }, { id: "research", label: "Research" }, { id: "news", label: "News" }, { id: "publications", label: "Publications" }, { id: "blog", label: "Article" }, { id: "service", label: "Service" }, ]; const Nav = ({ view, setView }) => { const onClick = (id) => (e) => { e.preventDefault(); setView(id); window.scrollTo({ top: 0, behavior: "instant" }); }; // Hidden admin trigger: triple-click on the brand mark within 600ms → /edit.html const brandClicks = useRef(0); const brandClickTimer = useRef(null); const onBrandMarkClick = (e) => { brandClicks.current += 1; clearTimeout(brandClickTimer.current); if (brandClicks.current >= 3) { e.preventDefault(); e.stopPropagation(); brandClicks.current = 0; window.location.href = "/edit.html"; return; } brandClickTimer.current = setTimeout(() => { brandClicks.current = 0; }, 600); }; return ( ); }; // ============================================================ // Hero / About // ============================================================ const Hero = () => (
jingxuan.uk · est. 2026

Jingxuan Kang

PhD Student · Imperial College London

{data.profile.department}

{data.profile.bio.map((p, i) =>

{p}

)}
based in {data.profile.location}
Scholar GitHub X Email {data.links.wechat && } Linux.do
); // ============================================================ // Research Interests // ============================================================ const Research = () => (
{data.interests.map((it, i) => (
{String(i + 1).padStart(2, "0")}

{it.title}

{it.blurb}

))}
); // ============================================================ // News // ============================================================ const Highlights = ({ setView }) => (
{data.highlights.map((h, i) => { const isExternal = h.href.startsWith("mailto:") || h.href.startsWith("http"); const onClick = (e) => { if (h.href.startsWith("#")) { e.preventDefault(); setView(h.href.slice(1)); window.scrollTo({ top: 0, behavior: "instant" }); } }; return ( {h.label}

{h.title}

{h.body}

{h.cta} ); })}
); const NewsAndHighlights = ({ setView }) => (
News & Highlights} hint="recent activity" />
    {data.news.slice(0, 5).map((n, i) => (
  1. {n.date}

    {n.body}

    2. ))}
{ e.preventDefault(); setView("news"); window.scrollTo({ top: 0, behavior: "instant" }); }}> View all news
); const News = () => (
    {data.news.map((n, i) => (
  1. {n.date}

    {n.body}

    2. ))}
); // ============================================================ // Publications // ============================================================ const formatAuthors = (authors) => { return authors.map((a, i) => { const isMe = a.replace(/[†*]/g, "").trim() === "J. Kang"; return ( {a}{i < authors.length - 1 ? ", " : ""} ); }); }; const PubThumbImg = ({ pub }) => { const [errored, setErrored] = useState(false); const src = `papers/thumbs/${pub.id}.webp`; if (errored) { return ; } return setErrored(true)} />; }; const PubLink = ({ href, children }) => ( {children} ); const Publications = () => { return (
    {data.publications.map((p) => (
  • {p.venue} '{String(p.year).slice(2)} {p.tag && {p.tag}} {typeof p.citations === "number" && p.citations > 0 && ( cited by {p.citations} )}

    {p.title}

    {formatAuthors(p.authors)}

    {p.paper && Paper} {p.pdf && PDF} {p.code && Code}
    • ))}
); }; // ============================================================ // Service & Office Hours // ============================================================ const Service = ({ variant }) => (

Reviewer

    {data.service.reviewer.map((r) => (
  • {r.name} {r.years && {r.years}} {r.badge && {r.badge}}
    • ))}
); const OfficeHours = ({ variant }) => (
office hours

Want to chat?

{data.officeHours.blurb}

when {data.officeHours.slots}
{data.officeHours.cta}
); // ============================================================ // Blog view // ============================================================ // Posts live as standalone HTML under /blog/.html. blog/index.json is // rebuilt by scripts/index_blog.py from each file's . // Two sub-tabs: Paper (论文笔记) / Blog (杂记), split by . const BlogView = ({ setView }) => { const [posts, setPosts] = useState(null); // null = loading, [] = empty const [sub, setSub] = useState("blog"); // "paper" | "blog" useEffect(() => { fetch("/blog/index.json", { headers: { Accept: "application/json" } }) .then((r) => (r.ok ? r.json() : [])) .then((list) => setPosts(Array.isArray(list) ? list : [])) .catch(() => setPosts([])); }, []); const counts = { paper: 0, blog: 0 }; (posts || []).forEach((p) => { const c = p.category === "paper" ? "paper" : "blog"; counts[c] += 1; }); const visible = (posts || []).filter((p) => (p.category === "paper" ? "paper" : "blog") === sub); const hint = posts === null ? "loading" : posts.length ? `${posts.length} posts` : "coming soon"; return (
{[ { id: "paper", label: "Paper" }, { id: "blog", label: "Blog" }, ].map((t) => ( ))}
{visible.length > 0 && ( )} {posts && visible.length === 0 && (

{sub === "paper" ? "还没有论文笔记 — first one coming soon." : "No posts yet — first one is in the oven."}

)}
); }; // ============================================================ // Footer // ============================================================ const Footer = () => (
$ whoami

Jingxuan Kang · PhD Student · Imperial College London

© 2026 · last updated 2026.05.15 built with html, ☕ and too many late nights
); // ============================================================ // Main App // ============================================================ const App = () => { const [view, setView] = useState("about"); const [tweaks, setTweak] = useTweaks(window.TWEAK_DEFAULTS); const [, forceRerender] = useState(0); useEffect(() => { let cancelled = false; // /site.json is the public, Cloudflare-Access-bypass-safe mirror of // site:data KV. /api/site-data is the same data but gated to edit users. fetch("/site.json", { headers: { Accept: "application/json" } }) .then((r) => (r.ok ? r.json() : null)) .then((next) => { if (cancelled || !next || typeof next !== "object" || !next.profile) return; data = next; window.SITE_DATA = next; forceRerender((n) => n + 1); }) .catch(() => {}); return () => { cancelled = true; }; }, []); useEffect(() => { const fromHash = () => { const h = window.location.hash.replace("#", ""); const valid = TABS.some((t) => t.id === h); if (valid && h !== view) setView(h); }; fromHash(); window.addEventListener("hashchange", fromHash); return () => window.removeEventListener("hashchange", fromHash); }, []); // Hidden admin trigger: Cmd+E / Ctrl+E from anywhere → /edit.html useEffect(() => { const handler = (e) => { if ((e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey && e.key.toLowerCase() === "e") { e.preventDefault(); window.location.href = "/edit.html"; } }; window.addEventListener("keydown", handler); return () => window.removeEventListener("keydown", handler); }, []); useEffect(() => { if (view && window.location.hash.replace("#", "") !== view) { history.replaceState(null, "", `#${view}`); } }, [view]); return ( <>