${esc(clean)}

`;\n }\n}\n\nfunction dateRange(start?: string, end?: string): string {\n if (!start && !end) return \"\";\n const s = start ? start.substring(0, 7) : \"\";\n const e = end ? end.substring(0, 7) : \"Present\";\n return s ? `${s} \\u2013 ${e}` : e;\n}\n\n/**\n * Flatten skills: API sends { name:\"Skills\", keywords:[...all skills...] }.\n * Expand keywords into individual chips; skip entries named \"Skills\".\n */\nfunction flatSkills(skills: JsonResume[\"skills\"]): string[] {\n if (!skills?.length) return [];\n const chips: string[] = [];\n for (const sk of skills) {\n if (sk.keywords?.length) {\n chips.push(...sk.keywords);\n } else if (sk.name && sk.name.toLowerCase() !== \"skills\") {\n chips.push(sk.name);\n }\n }\n return chips;\n}\n\n/** Deduplicate \"X, X\" degree strings produced by the API mapper */\nfunction dedupDegree(degree: string): string {\n if (!degree.includes(\", \")) return degree;\n const parts = degree.split(\", \");\n return parts.length === 2 && parts[0] === parts[1] ? parts[0] : degree;\n}\n\n// ---------------------------------------------------------------------------\n// Error page\n// ---------------------------------------------------------------------------\n\nfunction renderError(message: string, hint?: string): string {\n const hintHtml = hint\n ? `

${hint}

`\n : \"\";\n return `\n\n\n\n\nResume \\u2014 Error\n\n\n\n

\\u26a0\\ufe0f

Could not load resume

${esc(message)}

\n ${hintHtml}\n

\n\n`;\n}\n\n// ---------------------------------------------------------------------------\n// Validation\n// ---------------------------------------------------------------------------\n\nfunction validateResume(data: unknown): data is JsonResume {\n if (!data || typeof data !== \"object\") return false;\n const r = data as JsonResume;\n // Require at least a name so we don't render a blank page\n return typeof r.basics?.name === \"string\" && r.basics.name.trim().length > 0;\n}\n\n// ---------------------------------------------------------------------------\n// Photo helpers\n// ---------------------------------------------------------------------------\n\n/**\n * Parse ?photo_pos=x:y into CSS object-position value.\n * Both x and y are 0-100; defaults: x=50 (center), y=20 (slightly above center — portrait heuristic).\n */\nfunction photoPosition(param: string | null): string {\n const def = { x: 50, y: 20 };\n if (!param) return `${def.x}% ${def.y}%`;\n const [xRaw, yRaw] = param.split(\":\");\n const clamp = (v: number) => Math.min(100, Math.max(0, v));\n const x = xRaw !== undefined && xRaw !== \"\" ? clamp(Number(xRaw)) : def.x;\n const y = yRaw !== undefined && yRaw !== \"\" ? clamp(Number(yRaw)) : def.y;\n return `${isNaN(x) ? def.x : x}% ${isNaN(y) ? def.y : y}%`;\n}\n\n/**\n * Returns CSS for a circular avatar.\n * Uses a fixed-size container div + absolutely-positioned img to ensure\n * proportional scaling without distortion regardless of source image dimensions.\n * The fills the container via object-fit:cover; object-position controls crop anchor.\n */\nfunction photoCSS(containerCls: string, imgCls: string, pos: string): string {\n return [\n ` .${containerCls} { width: 96px; height: 96px; border-radius: 50%;`,\n ` flex-shrink: 0; overflow: hidden; position: relative; }`,\n ` .${imgCls} { width: 100%; height: 100%; object-fit: cover;`,\n ` object-position: ${pos}; display: block; }`,\n ].join(\"\\n\");\n}\n\n/** Render photo HTML: a container div wrapping the img */\nfunction photoHTML(containerCls: string, imgCls: string, src: string, alt: string): string {\n return `

$\"${esc(alt)}\"$

`;\n}\n\n// ---------------------------------------------------------------------------\n// Minimal theme\n// ---------------------------------------------------------------------------\n\nfunction renderMinimal(resume: JsonResume, showPhoto: boolean, photoPos: string): string {\n const {\n basics = {}, work = [], education = [], languages = [],\n projects = [], volunteer = [], awards = [], publications = [],\n certificates = [],\n } = resume;\n\n const skills = flatSkills(resume.skills);\n const location = basics.location\n ? [basics.location.city, basics.location.region, basics.location.countryCode]\n .filter(Boolean).join(\", \")\n : \"\";\n const labelText = basics.label?.replace(/\\s*\\n\\s*/g, \" \\u00b7 \").replace(/ /g, \" \") ?? \"\";\n\n let html = `\n\n\n\n\n${esc(basics.name)} \\u2013 Resume\n\n\n\n

\n${showPhoto && basics.image ? photoHTML(\"photo-wrap\", \"photo-img\", basics.image, basics.name ?? \"\") : \"\"}\n

${esc(basics.name)}

${esc(labelText)}

\n`;\n\n const cp: string[] = [];\n if (location) cp.push(`${esc(location)}`);\n if (basics.email) cp.push(`${esc(basics.email)}`);\n if (basics.phone) cp.push(`${esc(basics.phone)}`);\n if (basics.url) cp.push(`${esc(basics.url)}`);\n for (const p of basics.profiles ?? []) {\n if (p.url) cp.push(`${esc(p.network || p.username)}`);\n }\n if (cp.length) html += ` ${cp.join(\"\\n \")}\\n`;\n html += `

\\n

\\n`;\n\n if (basics.summary) html += `

${md(basics.summary)}

\\n`;\n\n if (work.length) {\n html += `

Experience

\\n`;\n for (const job of work) {\n html += `

${esc(job.position)}${job.name ? ` — ${job.url ? `${esc(job.name)}` : esc(job.name)}` : \"\"}

${dateRange(job.startDate, job.endDate)}

\n${job.summary ? `

${md(job.summary)}

` : \"\"}\n${job.highlights?.length ? `

${md(h)}

` : \"\"}\n

\\n`;\n }\n }\n\n if (education.length) {\n html += `

Education

\\n`;\n for (const edu of education) {\n const deg = dedupDegree([edu.studyType, edu.area].filter(Boolean).join(\", \"));\n html += `

${edu.url ? `${esc(edu.institution)}` : esc(edu.institution)}

${esc(deg)}${edu.score ? ` \\u00b7 GPA: ${esc(edu.score)}` : \"\"} ${dateRange(edu.startDate, edu.endDate)}

\n${edu.courses?.length ? `

${esc(c)}

` : \"\"}\n

\\n`;\n }\n }\n\n if (skills.length) {\n html += `

Skills

\\n

\\n`;\n for (const sk of skills) html += `${esc(sk)}\\n`;\n html += `

\\n`;\n }\n\n if (languages.length) {\n html += `

Languages

\\n\\n`;\n }\n\n if (projects.length) {\n html += `

Projects

\\n`;\n for (const proj of projects) {\n html += `

${proj.url ? `${esc(proj.name)}` : esc(proj.name)}

${dateRange(proj.startDate, proj.endDate)}

\n${proj.description ? `

${md(proj.description)}

` : \"\"}\n${proj.highlights?.length ? `

${md(h)}

` : \"\"}\n${proj.keywords?.length ? `

${proj.keywords.map(esc).join(\", \")}

` : \"\"}\n

\\n`;\n }\n }\n\n if (volunteer.length) {\n html += `

Volunteer

\\n`;\n for (const v of volunteer) {\n html += `

${esc(v.position)}${v.organization ? ` — ${v.url ? `${esc(v.organization)}` : esc(v.organization)}` : \"\"}

${dateRange(v.startDate, v.endDate)}

\n${v.summary ? `

${md(v.summary)}

` : \"\"}\n

\\n`;\n }\n }\n\n if (awards.length) {\n html += `

Awards

\\n`;\n for (const a of awards) {\n html += `

${esc(a.title)}

${[a.awarder, a.date?.substring(0, 7)].filter(Boolean).join(\" \\u00b7 \")}

\n${a.summary ? `

${md(a.summary)}

` : \"\"}\n

\\n`;\n }\n }\n\n if (publications.length) {\n html += `

Publications

\\n`;\n for (const pub of publications) {\n html += `

${pub.url ? `${esc(pub.name)}` : esc(pub.name)}

${[pub.publisher, pub.releaseDate?.substring(0, 7)].filter(Boolean).join(\" \\u00b7 \")}

\n${pub.summary ? `

${md(pub.summary)}

` : \"\"}\n

\\n`;\n }\n }\n\n if (certificates.length) {\n html += `

Certificates

\\n`;\n for (const cert of certificates) {\n html += `

${cert.url ? `${esc(cert.name)}` : esc(cert.name)}

${[cert.issuer, cert.date?.substring(0, 7)].filter(Boolean).join(\" \\u00b7 \")}

\\n`;\n }\n }\n\n html += `\\n`;\n return html;\n}\n\n// ---------------------------------------------------------------------------\n// Tailwind theme\n// ---------------------------------------------------------------------------\n\nfunction renderTailwind(resume: JsonResume, showPhoto: boolean, photoPos: string): string {\n const {\n basics = {}, work = [], education = [], languages = [],\n projects = [], volunteer = [], awards = [], publications = [],\n certificates = [],\n } = resume;\n\n const skills = flatSkills(resume.skills);\n const location = basics.location\n ? [basics.location.city, basics.location.region, basics.location.countryCode]\n .filter(Boolean).join(\", \")\n : \"\";\n const labelText = basics.label?.replace(/\\s*\\n\\s*/g, \" \\u00b7 \").replace(/ /g, \" \") ?? \"\";\n\n const section = (title: string, body: string) =>\n `

${title}

${body}

`;\n\n let html = `\n\n\n\n\n${esc(basics.name)} \\u2013 Resume\n\n\n\n\n

\n ${showPhoto && basics.image ? photoHTML(\"photo-wrap\", \"photo-img\", basics.image, basics.name ?? \"\") : \"\"}\n

${esc(basics.name)}

${esc(labelText)}

`;\n\n if (location) html += `${esc(location)}`;\n if (basics.email) html += `${esc(basics.email)}`;\n if (basics.phone) html += `${esc(basics.phone)}`;\n if (basics.url) html += `${esc(basics.url)}`;\n for (const p of basics.profiles ?? []) {\n if (p.url) html += `${esc(p.network || p.username)}`;\n }\n\n html += `

`;\n if (basics.summary) html += `

${md(basics.summary)}

`;\n html += `

\\n

`;\n\n if (work.length) {\n let s = \"\";\n for (const job of work) {\n s += `

${esc(job.position)}

\n ${dateRange(job.startDate, job.endDate)}\n

${job.url ? `${esc(job.name)}` : esc(job.name)}

\n${job.summary ? `

${md(job.summary)}

` : \"\"}\n${job.highlights?.length ? `

${md(h)}

` : \"\"}\n

`;\n }\n html += section(\"Experience\", s);\n }\n\n if (education.length) {\n let s = \"\";\n for (const edu of education) {\n const deg = dedupDegree([edu.studyType, edu.area].filter(Boolean).join(\", \"));\n s += `

${edu.url ? `${esc(edu.institution)}` : esc(edu.institution)}

\n ${dateRange(edu.startDate, edu.endDate)}\n

${esc(deg)}${edu.score ? ` \\u00b7 GPA ${esc(edu.score)}` : \"\"}

`;\n }\n html += section(\"Education\", s);\n }\n\n if (skills.length) {\n const s = `

${skills.map(sk =>\n `${esc(sk)}`\n ).join(\"\")}

`;\n html += section(\"Skills\", s);\n }\n\n if (languages.length) {\n const s = `

${languages.map(l =>\n `${esc(l.language)} ${esc(l.fluency)}`\n ).join(\"\")}

`;\n html += section(\"Languages\", s);\n }\n\n if (projects.length) {\n let s = \"\";\n for (const proj of projects) {\n s += `

${proj.url ? `${esc(proj.name)}` : esc(proj.name)}

\n ${dateRange(proj.startDate, proj.endDate)}\n

\n${proj.description ? `

${md(proj.description)}

` : \"\"}\n${proj.highlights?.length ? `

${md(h)}

` : \"\"}\n${proj.keywords?.length ? `

${proj.keywords.map(esc).join(\", \")}

` : \"\"}\n

`;\n }\n html += section(\"Projects\", s);\n }\n\n if (volunteer.length) {\n let s = \"\";\n for (const v of volunteer) {\n s += `

${esc(v.position)} — ${v.url ? `${esc(v.organization)}` : esc(v.organization)}

\n ${dateRange(v.startDate, v.endDate)}\n

\n${v.summary ? `

${md(v.summary)}

` : \"\"}\n

`;\n }\n html += section(\"Volunteer\", s);\n }\n\n if (awards.length) {\n let s = \"\";\n for (const a of awards) {\n s += `

${esc(a.title)}

${[a.awarder, a.date?.substring(0, 7)].filter(Boolean).join(\" \\u00b7 \")}

\n${a.summary ? `

${md(a.summary)}

` : \"\"}\n

`;\n }\n html += section(\"Awards\", s);\n }\n\n if (publications.length) {\n let s = \"\";\n for (const pub of publications) {\n s += `

${pub.url ? `${esc(pub.name)}` : esc(pub.name)}

${[pub.publisher, pub.releaseDate?.substring(0, 7)].filter(Boolean).join(\" \\u00b7 \")}

\n${pub.summary ? `

${md(pub.summary)}

` : \"\"}\n

`;\n }\n html += section(\"Publications\", s);\n }\n\n if (certificates.length) {\n let s = \"\";\n for (const cert of certificates) {\n s += `

${cert.url ? `${esc(cert.name)}` : esc(cert.name)}

${[cert.issuer, cert.date?.substring(0, 7)].filter(Boolean).join(\" \\u00b7 \")}

`;\n }\n html += section(\"Certificates\", s);\n }\n\n html += `

`;\n return html;\n}\n\n// ---------------------------------------------------------------------------\n// JSON Resume theme — server-side render via npm:\n// ---------------------------------------------------------------------------\n\ntype ResumeTransform = (r: JsonResume) => JsonResume;\n\n// Convert Markdown string to HTML string (for use inside theme transforms)\nconst mdStr = (s?: string): string | undefined =>\n s ? (marked.parse(s.replace(/\\u00a0/g, \" \").trim()) as string) : s;\n\n /**\n * Universal sentinel-based render for jsonresume themes.\n *\n * For every rich-text field in the resume:\n * - Replace the value with a unique sentinel string \\x02MDPL_{id}\\x03\n * - Pass the modified resume to renderFn\n * - In the output HTML, find each sentinel (in either raw or Mustache-escaped form)\n * and replace with the markdown-rendered HTML\n *\n * This works transparently for both {{double}} (Mustache escapes sentinel -> ...)\n * and {{{triple}}} (sentinel passes through unchanged) template fields.\n * Fields not rendered by the theme are simply not found in the output — no harm done.\n *\n * preTransform: optional schema-compat function applied before sentinels (e.g. flatCompat).\n */\nfunction sentinelRender(\n renderFn: (r: any) => string,\n resume: JsonResume,\n preTransform?: (r: JsonResume) => JsonResume,\n): string {\n let counter = 0;\n const sentinelMap = new Map(); // sentinel -> rendered HTML\n\n function slot(raw: string | undefined): string | undefined {\n if (!raw) return raw;\n const id = counter++;\n const sentinel = `\\x02MDPL_${id}\\x03`;\n sentinelMap.set(sentinel, mdStr(raw) ?? raw);\n return sentinel;\n }\n\n const base = preTransform ? preTransform(resume) : resume;\n\n const patched: any = {\n ...base,\n basics: base.basics ? { ...base.basics, summary: slot(base.basics.summary) } : undefined,\n work: base.work?.map(j => ({\n ...j,\n summary: slot(j.summary),\n highlights: j.highlights?.map(h => slot(h) ?? h),\n })),\n projects: base.projects?.map(p => ({ ...p, description: slot(p.description) })),\n volunteer: base.volunteer?.map(v => ({ ...v, summary: slot(v.summary) })),\n awards: base.awards?.map(a => ({ ...a, summary: slot(a.summary) })),\n publications: base.publications?.map(p => ({ ...p, summary: slot(p.summary) })),\n };\n\n let html: string = renderFn(patched);\n\n // Replace sentinels — check both raw and Mustache-escaped (...) forms\n for (const [sentinel, rendered] of sentinelMap) {\n const escapedSentinel = sentinel.replace(/\\x02/g, \"\").replace(/\\x03/g, \"\");\n if (html.includes(escapedSentinel)) {\n html = html.replaceAll(escapedSentinel, rendered);\n } else if (html.includes(sentinel)) {\n html = html.replaceAll(sentinel, rendered);\n }\n // Not found — field not rendered by this theme, skip silently\n }\n\n return html;\n}\n\n/**\n * flat schema compat: map JSON Resume v1 field names to v0 names that flat's template expects.\n * url -> website (basics, work, volunteer)\n * work[].name -> work[].company\n */\nfunction flatCompat(resume: JsonResume): JsonResume {\n return {\n ...resume,\n basics: resume.basics ? {\n ...resume.basics,\n ...(resume.basics.url && !(resume.basics as any).website\n ? { website: resume.basics.url } : {}),\n } : undefined,\n work: resume.work?.map(j => ({\n ...j,\n ...(j.url && !(j as any).website ? { website: j.url } : {}),\n ...((j as any).company === undefined && j.name ? { company: j.name } : {}),\n })),\n volunteer: resume.volunteer?.map(v => ({\n ...v,\n ...(v.url && !(v as any).website ? { website: v.url } : {}),\n })),\n };\n}\n\n/**\n * Themes that handle Markdown natively — skip sentinel processing entirely.\n * \"even\": micromark renderer built-in\n * \"stackoverflow\": nl2br / paragraph transformation built-in\n */\nconst NATIVE_MD_THEMES = new Set([\"even\", \"stackoverflow\"]);\n\n/**\n * Per-theme preTransform functions for schema compatibility fixes.\n * Applied before sentinel injection.\n */\nconst THEME_PRETRANSFORMS: Record JsonResume> = {\n \"flat\": flatCompat,\n};\n\n/**\n * Inject a CSS override block before .\n * Used to fix theme-internal styles we cannot control via data.\n */\nfunction injectHeadCSS(html: string, css: string): string {\n const tag = ``;\n const idx = html.indexOf(\"\");\n if (idx === -1) return html + \"\\n\" + tag;\n return html.slice(0, idx) + tag + \"\\n\" + html.slice(idx);\n}\n\nasync function renderJsonResume(\n resume: JsonResume,\n themeName: string,\n photoPos: string,\n extraHeaders: Record = {},\n): Promise {\n try {\n const mod = await import(`npm:jsonresume-theme-${themeName}`);\n const renderFn = mod.render ?? mod.default?.render;\n if (typeof renderFn !== \"function\") {\n return new Response(\n renderError(\n `Theme \"${themeName}\" has no render() export.`,\n `Try: even, kendall, flat, stackoverflow, paper, elegant`,\n ),\n { status: 500, headers: { \"Content-Type\": \"text/html; charset=utf-8\" } },\n );\n }\n\n let html: string;\n\n if (NATIVE_MD_THEMES.has(themeName)) {\n // Theme handles Markdown internally — pass data as-is\n html = renderFn(resume);\n } else {\n // Universal sentinel post-processing: works for both {{double}} and {{{triple}}} fields\n html = sentinelRender(renderFn, resume, THEME_PRETRANSFORMS[themeName]);\n }\n\n // CSS overrides injected after theme rendering\n if (themeName === \"kendall\") {\n // Fix disproportionate photo: override hardcoded 150px width/height\n html = injectHeadCSS(html,\n `#photo img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: ${photoPos}; }`,\n );\n }\n\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\", \"Cache-Control\": \"no-cache\", ...extraHeaders },\n });\n } catch (e: any) {\n const msg = String(e?.message ?? e);\n return new Response(\n renderError(\n `Failed to render theme \"${themeName}\": ${msg}`,\n `Some npm themes have exotic dependencies that fail under Deno. Try: even, kendall, flat.`,\n ),\n { status: 500, headers: { \"Content-Type\": \"text/html; charset=utf-8\", ...extraHeaders } },\n );\n }\n}\n\n// ---------------------------------------------------------------------------\n// Main handler\n// ---------------------------------------------------------------------------\n\nexport default async function handler(req: Request): Promise {\n const reqUrl = new URL(req.url);\n const pathname = reqUrl.pathname.replace(/\\/+$/, \"\") || \"/\";\n const route = pathname.slice(1); // \"\" | \"minimal\" | \"tailwind\" | \"jsonresume\"\n\n // Root: redirect to DEFAULT\n if (route === \"\") {\n const defaultRoute = (Deno.env.get(\"DEFAULT\") ?? \"minimal\").trim();\n const [defaultPath, defaultQuery] = defaultRoute.split(\"?\", 2);\n const dest = new URL(req.url);\n dest.pathname = \"/\" + defaultPath;\n if (defaultQuery) {\n for (const [k, v] of new URLSearchParams(defaultQuery)) {\n if (!dest.searchParams.has(k)) dest.searchParams.set(k, v);\n }\n }\n return Response.redirect(dest.toString(), 302);\n }\n\n if (![\"minimal\", \"tailwind\", \"jsonresume\"].includes(route)) {\n return new Response(\n renderError(`Unknown route /${route}. Valid: /minimal /tailwind /jsonresume`),\n { status: 404, headers: { \"Content-Type\": \"text/html; charset=utf-8\" } },\n );\n }\n\n const showPhoto = reqUrl.searchParams.has(\"photo\");\n const photoPos = photoPosition(reqUrl.searchParams.get(\"photo_pos\"));\n const jsonThemeName = reqUrl.searchParams.get(\"theme\") ?? \"even\";\n const force = reqUrl.searchParams.has(\"force\"); // presence-only, like ?photo\n\n // --- Cache read (skip on ?force=1) ---\n const cached = force ? null : await readCache();\n const cacheHit = cached !== null && cached.ageMs <= CACHE_TTL_MS;\n\n let resume: JsonResume;\n let cacheAgeMs: number | null = cached?.ageMs ?? null;\n\n if (cacheHit) {\n // Fresh cache — use directly\n resume = cached!.resume;\n } else {\n // Need fresh data: fetch from upstream API\n const baseUrl = (\n Deno.env.get(\"DATA_API_URL\") ??\n \"https://foxdark410--19f86d2a2ce611f1b48942dde27851f2.web.val.run\"\n ).replace(/\\/+$/, \"\");\n const dataApiUrl = `${baseUrl}/jsonresume`;\n\n let apiRes: Response;\n try {\n apiRes = await fetch(dataApiUrl, { headers: { Accept: \"application/json\" } });\n } catch (e) {\n // Network error — fall back to stale cache if available\n if (cached) {\n resume = cached.resume;\n cacheAgeMs = cached.ageMs;\n } else {\n return new Response(\n renderError(\n `Network error reaching Data API at ${dataApiUrl}: ${e}`,\n `Check that DATA_API_URL env var points to your linkedin-mdp-api val.`,\n ),\n { status: 502, headers: { \"Content-Type\": \"text/html; charset=utf-8\" } },\n );\n }\n }\n\n if (!resume!) {\n if (!apiRes!.ok) {\n // Non-OK upstream (429, 401, 5xx) — fall back to stale cache if available\n if (cached) {\n resume = cached.resume;\n cacheAgeMs = cached.ageMs;\n } else {\n // No cache at all — pass through the error as-is\n return new Response(apiRes!.body, {\n status: apiRes!.status,\n statusText: apiRes!.statusText,\n headers: { \"Content-Type\": apiRes!.headers.get(\"Content-Type\") ?? \"application/json\" },\n });\n }\n } else {\n let json: unknown;\n try {\n json = await apiRes!.json();\n } catch {\n return new Response(\n renderError(`Data API returned non-JSON (HTTP ${apiRes!.status}).`),\n { status: 502, headers: { \"Content-Type\": \"text/html; charset=utf-8\" } },\n );\n }\n\n if (!validateResume(json)) {\n return new Response(\n renderError(\"Data API response is missing required field: basics.name.\"),\n { status: 502, headers: { \"Content-Type\": \"text/html; charset=utf-8\" } },\n );\n }\n\n resume = json;\n cacheAgeMs = 0;\n // Always save fresh data to cache (even on ?force=1)\n await writeCache(resume);\n }\n }\n }\n\n // X-Cache-Age header: seconds since last successful cache write (-1 = no cache)\n const cacheAgeHeader = cacheAgeMs !== null\n ? String(Math.floor(cacheAgeMs / 1000))\n : \"-1\";\n const extraHeaders = { \"X-Cache-Age\": cacheAgeHeader };\n\n if (route === \"jsonresume\") {\n // Strip basics.image unless ?photo is present — themes render photo unconditionally if set\n const resumeForTheme = showPhoto\n ? resume\n : { ...resume, basics: { ...resume.basics, image: undefined } };\n return renderJsonResume(resumeForTheme, jsonThemeName, photoPos, extraHeaders);\n }\n\n const html = route === \"tailwind\"\n ? renderTailwind(resume, showPhoto, photoPos)\n : renderMinimal(resume, showPhoto, photoPos);\n\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\", \"Cache-Control\": \"no-cache\", ...extraHeaders },\n });\n}\n","deleted","label",[115],"92de3bc0-3105-11f1-873f-42dde27851f2","README.md","9953d0f8-3067-11f1-9f33-42dde27851f2",["D",1775403543366],12,"# linkedin-resume-ui\n\nPresentation layer (HTTP val) that fetches JSON Resume data from\n[`linkedin-mdp-api`](https://www.val.town/x/foxdark410/linkedin-mdp-api) and\nrenders it as a styled HTML page in the browser.\n\n> **Architecture:** This val is a pure UI layer. It contains zero LinkedIn/OAuth\n> logic — all data fetching and normalization lives in `linkedin-mdp-api`.\n\n---\n\n## Live Endpoints\n\n| URL | Description |\n|-----|-------------|\n| `/` | 302 redirect to the route configured in `DEFAULT` env var |\n| `/minimal` | Serif CSS-only theme (print-friendly) |\n| `/tailwind` | Card-based theme via Tailwind CDN |\n| `/jsonresume` | Server-side render using a [jsonresume.org](https://jsonresume.org/themes/) theme |\n\n### Query Parameters\n\n| Param | Description |\n|-------|-------------|\n| `?photo` | Show `basics.image` as avatar; absent = no photo. Applies to all routes. |\n| `?photo_pos=x:y` | Crop anchor for avatar: both values 0–100, default `50:20` (center-top heuristic for portraits). Either part optional: `?photo_pos=:30` sets only Y. Applies to `/minimal`, `/tailwind`. |\n| `?force` | Bypass cache read; always fetch fresh data from upstream (result still saved to cache). Presence-only — value is ignored. Applies to all routes. |\n\n### `/jsonresume` Parameters\n\n| Param | Description |\n|-------|-------------|\n| `?theme=` | jsonresume theme package name (default: `even`). Any `npm:jsonresume-theme-` is accepted. |\n\n### Known-working themes for `/jsonresume`\n\n| Theme | Markdown handling | Notes |\n|-------|:-----------------:|-------|\n| `even` (default) | ✅ native (micromark) | Processes every text field internally; do not preprocess |\n| `kendall` | ✅ sentinel post-processing | Works for all fields: `{{{triple}}}` and `{{double}}` both handled |\n| `flat` | ✅ sentinel post-processing | Schema compat (url→website, name→company) applied first |\n| `stackoverflow` | ✅ native (nl2br/paragraphs) | Built-in paragraph transform; sentinel skipped |\n| `paper` | ✅ sentinel post-processing | Applied automatically as unknown theme |\n| `elegant` | ✅ sentinel post-processing | Applied automatically as unknown theme |\n\n> **Sentinel post-processing** is applied to all themes except `even` and `stackoverflow` (which have native Markdown renderers). Each rich-text field is replaced with a unique `\\x02MDPL_{n}\\x03` sentinel before rendering. After `render()`, sentinels are located in the output HTML (in either raw or Mustache-escaped `...` form) and replaced with the markdown-rendered HTML. Fields not rendered by a theme are simply not found and skipped silently.\n\nThemes with exotic runtime dependencies (native addons, missing peer packages like `@resume/core`) may fail — the error page shows the exact message.\n\n---\n\n## Response Headers\n\n| Header | Description |\n|--------|-------------|\n| `X-Cache-Age` | Seconds since the last successful cache write. `-1` = no cache entry exists yet. `0` = data just fetched fresh. |\n\n---\n\n## Environment Variables\n\n| Key | Required | Default | Description |\n|-----|:--------:|---------|-------------|\n| `DATA_API_URL` | — | hardcoded `linkedin-mdp-api` endpoint | Base URL of the data API (no trailing slash) |\n| `DEFAULT` | — | `minimal` | Default route for `/` redirect. Can include query string, e.g. `tailwind?photo` |\n\n> `DEFAULT` warning in logs (`\"DEFAULT\" is not set`) is harmless — the val falls back to `minimal`.\n\n---\n\n## Caching\n\nResume data is cached in **Val Town Blob Storage** for **24 hours**.\n\n| Detail | Value |\n|--------|-------|\n| Blob key | `linkedin_resume_cache` |\n| Format | `{ fetchedAt: number (ms), data: JsonResume }` |\n| TTL | 24 hours |\n| `?force` | Skips cache **read** only; result is still written to cache |\n| Stale fallback | If upstream returns 429/5xx/network error **and** a stale entry exists (any age), stale data is served silently |\n\n---\n\n## Data Flow\n\n```\nBrowser → /minimal (or /tailwind, /jsonresume)\n └─ Blob cache (24h TTL)\n └─ fetch DATA_API_URL/jsonresume [on cache miss or ?force]\n └─ linkedin-mdp-api\n └─ LinkedIn DMA API (OAuth)\n```\n\n**linkedin-mdp-api** applies all data normalization:\n- Markdown-compatible paragraph/bullet formatting\n- photo extraction from `RICH_MEDIA` log\n- JSON Resume schema v1.0.0 compliance\n\n**linkedin-resume-ui** applies presentation-only transformations:\n- `md()` — renders Markdown to HTML via `npm:marked` (GFM); used in `/minimal` and `/tailwind`\n- `mdStr()` — same, for pre-processing fields before passing to `/jsonresume` themes\n- `preprocessAll()` — applies `mdStr()` to all text fields; used when `?preprocess=html`\n- `patchedKendallRender()` — kendall-specific: sentinel post-processing for `projects.description`\n- `flatSkills()` — expands `{ name: \"Skills\", keywords: [...] }` into chips\n- `dedupDegree()` — removes `\"X, X\"` duplicated degree strings\n- `dateRange()` — formats ISO dates as `YYYY-MM – YYYY-MM` or `YYYY-MM – Present`\n- label normalization — `\\n`-separated role titles → ` · ` separator\n\n---\n\n## Photo Rendering\n\nPhotos are rendered as circular avatars (96×96 px) using a container div + inner ``:\n\n- **Proportional scaling:** the `` fills its container via `object-fit: cover`. Source aspect ratio is always preserved — no distortion.\n- **Crop anchor:** `object-position` is controlled by `?photo_pos=x:y`. Default is `50% 20%` (center horizontally, slightly above center vertically — a heuristic that works well for LinkedIn-style portrait photos where the face tends to be in the upper third).\n- **`/jsonresume`:** `basics.image` is stripped from the payload when `?photo` is absent, because themes render the photo unconditionally if the field is set.\n\n---\n\n## Error Handling\n\n| Situation | Behaviour |\n|-----------|----------|\n| LinkedIn API 429/5xx + stale cache | Serve stale cache silently |\n| LinkedIn API 429/5xx + no cache | Pass through response as-is |\n| Network error + stale cache | Serve stale cache silently |\n| Network error + no cache | 502 + error page with `DATA_API_URL` hint |\n| API returns non-JSON | 502 + error page |\n| `basics.name` missing | 502 + error page |\n| Unknown route | 404 + error page listing valid routes |\n| Theme has no `render()` export | 500 + error page with list of working alternatives |\n| Theme import/render throws | 500 + error page with exact error message and Deno hint |\n\n---\n\n## Current Version: v16\n\n### Changelog\n\n| Version | Key changes |\n|---------|-------------|\n| v1–v3 | Initial themes, token passing, basic structure |\n| v4 | Skills flatting, degree dedup, `prose()`, label normalization |\n| v5 | `DEFAULT` redirect, `?photo`, jsonresume server-side render |\n| v6 | API error passthrough, `basics.name` validation, `object-fit: cover` |\n| v7–v10 | npm: import fix, theme compatibility, blob cache (24h TTL) |\n| v11–v12 | Stale-while-revalidate, `X-Cache-Age`, `?force`, `?photo_pos=x:y` |\n| v13 | `prose()` → `marked` (full GFM), proportional photo, per-theme markdown map |\n| v14–v15 | kendall CSS override, sentinel post-processing, `?force` presence-only |\n| **v16** | Universal `sentinelRender` for all non-native themes; `?preprocess=html` removed; `flat` now gets markdown rendering via sentinel |\n\n---\n\n## TODO\n\n### Active / next\n\n- [ ] **Theme selector UI** — a nav bar / dropdown listing available routes and\n themes. Input field should be **editable** (free text) to support unofficial\n `jsonresume-theme-*` npm packages beyond the official list.\n Official theme list source: [npmjs.com search: jsonresume-theme](https://www.npmjs.com/search?q=jsonresume-theme)\n\n- [ ] **Banner support** — `linkedin-mdp-api` exposes a banner/background image\n URL in the raw data. JSON Resume schema does not have a standard banner field.\n Investigate: (a) whether any jsonresume themes support it via a non-standard field;\n (b) adding a banner strip to `/minimal`/`/tailwind`.\n\n- [ ] **`basics.image` proxy** — LinkedIn photo URLs may expire or require auth;\n consider proxying through the val to avoid broken images.\n\n### PDF / DOCX export\n\nApproaches evaluated (priority: minimum code + fast):\n\n| Approach | Effort | Speed | Quality | Notes |\n|----------|:------:|:-----:|:-------:|-------|\n| **`print.css`** polish for `/minimal` | Minimal | Instant (browser `Ctrl+P`) | Good | `/minimal` already has `@media print` skeleton; needs page-break rules and margin tuning. **Recommended first step.** |\n| **Puppeteer** `/pdf` route | ~10 lines | ~1s | Excellent | Requires `npm:puppeteer` or Val Town `@browserless`; cold-start latency |\n| **`npm:marked` + Pandoc WASM** client-side DOCX | ~20 lines JS | 5–20s (WASM load) | Good | Client-side, no server cost; Markdown is the source format |\n\n**Rejected approaches:**\n- **RenderCV** — Python/Pydantic/LaTeX CLI only; no WASM, no serverless path.\n- **Pandoc server-side** — Haskell binary; cannot run in Deno/Val Town.\n- **OpenResume** — React SPA with proprietary JSON schema; no public render API.\n- **HackMyResume/FluentCV** — abandoned (last commit 2018).\n\n### Lower priority\n\n- [ ] `` tags for social sharing preview.\n- [ ] Dark mode via `@media (prefers-color-scheme: dark)`.\n- [ ] `?lang=` param to filter multi-language data (dependent on API support).\n- [ ] **Extend sentinel post-processing to `flat`** — verify that `flat`'s template renders a `projects` section, then apply the same per-field sentinel approach used for `kendall`.\n\n---\n\n## Alternative Tools & Ecosystem\n\n| Tool | Format | Render | Status |\n|------|--------|--------|--------|\n| **[JSON Resume](https://jsonresume.org)** | JSON | 30+ npm themes | ✅ In use |\n| **[RenderCV](https://rendercv.com)** | YAML | LaTeX/Typst → PDF CLI | CLI only, no serverless |\n| **[OpenResume](https://open-resume.com)** | Proprietary JSON | React SPA → PDF | No public API |\n| **[Manfred MAC](https://getmanfred.com)** | MAC JSON | getmanfred.com SaaS | No open-source renderer |\n| **[HackMyResume](https://github.com/hacksalot/HackMyResume)** | JSON Resume / FRESH | HTML/PDF/DOCX CLI | Abandoned since 2018 |\n| **[Pandoc](https://pandoc.org)** | Markdown | DOCX/HTML/PDF | Useful as Markdown→DOCX (WASM, client-side) |\n\n---\n\n## Known Issues\n\n### `429 Too Many Requests` from LinkedIn\nLinkedIn DMA API has a per-day rate limit. Once exhausted, all endpoints return\n`429` until midnight UTC. The stale cache fallback means the UI continues serving\nthe last known data silently.\n\n### `projects` section missing in some themes\nThemes control which sections they render. Some (e.g. `flat`) do not include a\nprojects section in their template — this cannot be fixed without forking the theme.\n\n### jsonresume theme compatibility\nThemes imported via `npm:jsonresume-theme-` work if they only depend on\npure-JS packages. Themes with native addons or missing peer packages (e.g.\n`@resume/core`) will fail — the error page shows the exact message.\n\n### `DEFAULT` env var warning in logs\nVal Town emits `WARNING: \"DEFAULT\" is not set` on every request. Cosmetic only\n— set the env var to silence it.\n\n### LinkedIn API data is a snapshot\nProfile edits may take hours or up to a day to appear. LinkedIn DMA API limitation.\n\n---\n\n## Related Vals\n\n- [`foxdark410/linkedin-mdp-api`](https://www.val.town/x/foxdark410/linkedin-mdp-api)\n — data layer: fetches LinkedIn DMA snapshot, exports JSON Resume, MAC, RenderCV,\n Markdown, plain text.\n\n---\n\n## Development Notes\n\n### File structure\n```\nlinkedin-resume-ui/\n└── main.ts # Single HTTP handler — all themes, routing, helpers in one file\n```\n\nAll logic intentionally lives in one file to keep the val self-contained.\nIf the file grows beyond ~1000 lines, consider splitting into:\n- `themes/minimal.ts`, `themes/tailwind.ts`, `themes/jsonresume.ts`\n- `utils.ts` (md, esc, dateRange, flatSkills, dedupDegree, photoCSS)\n- `main.ts` (router + cache + error handler)\n\n### Deno import conventions (Val Town)\n- npm packages: `import X from \"npm:package-name\"`\n- Val Town std lib: `import { blob } from \"https://esm.town/v/std/blob\"`\n\n### Testing without LinkedIn token\nWhen the LinkedIn API limit is hit (429), test by temporarily hardcoding a\nfixture object in `main.ts` and bypassing the `fetch` call:\n```ts\n// Temporary fixture for local dev / rate-limit debugging\nconst json = { basics: { name: \"Test User\", label: \"Engineer\" }, work: [] };\n```\n",[133],"pulls",1,"forks","envVars",{"_146":140,"_148":52},"connections",{"_146":52,"_147":52},"count","unfilledCount","emptyCount",{"_20":132,"_13":133,"_116":134,"_118":-5,"_119":21,"_120":30,"_122":107,"_22":155,"_29":136,"_125":100,"_127":137,"_129":38,"_130":-5,"_152":156,"_88":157},{"_20":114,"_13":115,"_116":117,"_118":-5,"_119":21,"_120":121,"_122":107,"_22":151,"_29":124,"_125":126,"_127":128,"_129":38,"_130":-5,"_152":153,"_88":154},["D",1775403438687],"children",[],[115],["D",1775403543366],[],[133],["D",1775325417955],{"_11":12,"_86":82},{"_11":12,"_80":-5,"_81":82,"_45":46,"_83":84,"_85":38},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_75":-5,"_76":-5,"_77":-5,"_78":14,"_79":12},"ctx",{"_68":-5,"_109":195,"_196":197,"_198":199,"_200":38,"_201":38,"_202":38,"_203":107,"_204":-5,"_205":-7,"_206":-7,"_207":52,"_208":38,"_209":38,"_210":-5,"_211":38,"_212":38,"_213":38,"_214":-5},"ENV",{"_166":167,"_168":169,"_170":26,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Branches1

Branches
1