Make the plain page (public/resume.html) a generated declared mirror so it and the terminal share one source, and enrich that source to the superset both need. - resume.org: merged to the superset — richer achievement-oriented bullets, per-item subtitle/location/tech tags, all projects (adds Terrapin Rocket, Robotics@UMD) and the full course list. - org-to-json parser: optional subtitle/location fields + `- tech :: X` tagged bullets; `list` flag so education stays bullet-free; empty tag arrays dropped. - scripts/build-resume-html.mjs + resume.template.html: the template owns the design (unchanged look); content is rendered from resume.json. Adds a global search box that filters every card and course pill across sections, with a no-results empty state. HTML-escaped; arXiv ids linkified. - resume:build now generates both mirrors; resume:check + CI canary verify both. Verified: yarn build + tsc clean; both canaries green; driven headless — design preserved, 17 cards render, search isolates by keyword/tech/course, no errors. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Nt6ycjAMdUMqGTGtbKocrspull/59/head
Claude
3 months ago
parent
a8ec735c77
commit
2914f8dc02
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,248 @@
|
|||||||
|
#!/usr/bin/env node
|
||||||
|
// =============================================================================
|
||||||
|
// Module contract (praxis: Contract-First Modules · Tangle Discipline)
|
||||||
|
//
|
||||||
|
// provides — render the plain résumé page (public/resume.html) from the
|
||||||
|
// resume.json mirror + resume.template.html. One concern: json ->
|
||||||
|
// styled HTML. The template owns the design (hand-maintained); the
|
||||||
|
// content is generated so the plain page and terminal share one
|
||||||
|
// source (Single Source of Truth).
|
||||||
|
// requires — resume.json (generated from resume.org), resume.template.html.
|
||||||
|
// tests must show —
|
||||||
|
// * every section renders one card per item with its bullets/tech/meta;
|
||||||
|
// * courses render as filterable pills; each card/pill has data-search;
|
||||||
|
// * output is byte-stable so the CI canary (regen + diff) only trips on
|
||||||
|
// real drift; text is HTML-escaped; arXiv ids linkify.
|
||||||
|
//
|
||||||
|
// Flow is ONE-WAY: resume.json -> public/resume.html. Never hand-edit the
|
||||||
|
// generated page; edit resume.org (content) or resume.template.html (design).
|
||||||
|
// Usage: node scripts/build-resume-html.mjs [--check]
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
import { readFileSync, writeFileSync } from 'node:fs';
|
||||||
|
|
||||||
|
const SRC = 'resume.json';
|
||||||
|
const TEMPLATE = 'resume.template.html';
|
||||||
|
const OUT = 'public/resume.html';
|
||||||
|
|
||||||
|
const esc = (s = '') =>
|
||||||
|
String(s)
|
||||||
|
.replace(/&/g, '&')
|
||||||
|
.replace(/</g, '<')
|
||||||
|
.replace(/>/g, '>')
|
||||||
|
.replace(/"/g, '"');
|
||||||
|
|
||||||
|
// arXiv ids become links; run after escaping (ids are digits/dots, escape-safe).
|
||||||
|
const linkifyArxiv = (s) =>
|
||||||
|
s.replace(
|
||||||
|
/arXiv:(\d{4}\.\d{4,5})/gi,
|
||||||
|
(_m, id) => `<a href="https://arxiv.org/abs/${id}">arXiv:${id}</a>`,
|
||||||
|
);
|
||||||
|
|
||||||
|
const searchKey = (...parts) =>
|
||||||
|
esc(
|
||||||
|
parts.flat().filter(Boolean).join(' ').toLowerCase().replace(/\s+/g, ' '),
|
||||||
|
);
|
||||||
|
|
||||||
|
const tagList = (tech) =>
|
||||||
|
tech && tech.length
|
||||||
|
? `\n <ul class="tag-list">${tech
|
||||||
|
.map((t) => `<li class="tag">${esc(t)}</li>`)
|
||||||
|
.join('')}</ul>`
|
||||||
|
: '';
|
||||||
|
|
||||||
|
const bulletList = (bullets) =>
|
||||||
|
bullets && bullets.length
|
||||||
|
? `\n <ul class="bullet-list">${bullets
|
||||||
|
.map((x) => `<li>${linkifyArxiv(esc(x))}</li>`)
|
||||||
|
.join('')}</ul>`
|
||||||
|
: '';
|
||||||
|
|
||||||
|
const metaBlock = (lines) => {
|
||||||
|
const kept = lines.filter(Boolean);
|
||||||
|
if (!kept.length) return '';
|
||||||
|
return `\n <div class="card-meta">${kept
|
||||||
|
.map((l) => `<span class="meta-line">${esc(l)}</span>`)
|
||||||
|
.join('')}</div>`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const card = ({ title, subtitle, meta = [], tech, bullets, search }) => `
|
||||||
|
<article class="card" data-search="${search}">
|
||||||
|
<div class="card-header">
|
||||||
|
<div>
|
||||||
|
<h3 class="card-title">${esc(title)}</h3>${
|
||||||
|
subtitle ? `\n <p class="card-subtitle">${esc(subtitle)}</p>` : ''
|
||||||
|
}
|
||||||
|
</div>${metaBlock(meta)}
|
||||||
|
</div>${tagList(tech)}${bulletList(bullets)}
|
||||||
|
</article>`;
|
||||||
|
|
||||||
|
const section = (id, heading, inner) =>
|
||||||
|
` <section id="${id}">\n <h2 class="section-title">${esc(
|
||||||
|
heading,
|
||||||
|
)}</h2>\n${inner}\n </section>`;
|
||||||
|
|
||||||
|
function render(data) {
|
||||||
|
const {
|
||||||
|
profile,
|
||||||
|
experience,
|
||||||
|
projects,
|
||||||
|
organizations,
|
||||||
|
publications,
|
||||||
|
education,
|
||||||
|
} = data;
|
||||||
|
const edu = education[0] || {};
|
||||||
|
|
||||||
|
const eduCard = card({
|
||||||
|
title: edu.school,
|
||||||
|
subtitle: edu.subtitle,
|
||||||
|
meta: [`Expected Graduation · ${edu.graduation}`, `GPA · ${edu.gpa}`],
|
||||||
|
bullets: null,
|
||||||
|
search: searchKey(edu.school, edu.subtitle, edu.degrees, edu.honors),
|
||||||
|
});
|
||||||
|
const eduScholar =
|
||||||
|
edu.honors && edu.honors.length
|
||||||
|
? `\n <div class="scholarships">\n <p class="scholarships-title">Scholarships & Distinctions</p>\n <ul class="bullet-list">${edu.honors
|
||||||
|
.map((h) => `<li>${esc(h)}</li>`)
|
||||||
|
.join('')}</ul>\n </div>`
|
||||||
|
: '';
|
||||||
|
// inject scholarships before the closing </article> of the education card
|
||||||
|
const eduHtml = eduCard.replace(
|
||||||
|
'\n </article>',
|
||||||
|
`${eduScholar}\n </article>`,
|
||||||
|
);
|
||||||
|
const educationSection = section(
|
||||||
|
'education',
|
||||||
|
'Education',
|
||||||
|
` <div class="education-grid">${eduHtml}\n </div>`,
|
||||||
|
);
|
||||||
|
|
||||||
|
const experienceSection = section(
|
||||||
|
'work',
|
||||||
|
'Work Experience',
|
||||||
|
experience
|
||||||
|
.map((e) =>
|
||||||
|
card({
|
||||||
|
title: `${e.role} · ${e.company}`,
|
||||||
|
subtitle: e.subtitle,
|
||||||
|
meta: [e.dates, e.location],
|
||||||
|
tech: e.tech,
|
||||||
|
bullets: e.bullets,
|
||||||
|
search: searchKey(
|
||||||
|
e.role,
|
||||||
|
e.company,
|
||||||
|
e.subtitle,
|
||||||
|
e.location,
|
||||||
|
e.tech,
|
||||||
|
e.bullets,
|
||||||
|
),
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
.join('\n'),
|
||||||
|
);
|
||||||
|
|
||||||
|
const projectsSection = section(
|
||||||
|
'projects',
|
||||||
|
'Projects',
|
||||||
|
projects
|
||||||
|
.map((p) =>
|
||||||
|
card({
|
||||||
|
title: p.name,
|
||||||
|
subtitle: p.subtitle,
|
||||||
|
meta: [p.timeline],
|
||||||
|
tech: p.tech,
|
||||||
|
bullets: p.bullets,
|
||||||
|
search: searchKey(p.name, p.subtitle, p.tech, p.bullets),
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
.join('\n'),
|
||||||
|
);
|
||||||
|
|
||||||
|
const orgsSection = section(
|
||||||
|
'organizations',
|
||||||
|
'Organizations',
|
||||||
|
organizations
|
||||||
|
.map((o) =>
|
||||||
|
card({
|
||||||
|
title: `${o.role} · ${o.org}`,
|
||||||
|
meta: [o.dates],
|
||||||
|
bullets: o.bullets,
|
||||||
|
search: searchKey(o.role, o.org, o.bullets),
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
.join('\n'),
|
||||||
|
);
|
||||||
|
|
||||||
|
const pubsSection = section(
|
||||||
|
'publications',
|
||||||
|
'Publications',
|
||||||
|
publications
|
||||||
|
.map((p) =>
|
||||||
|
card({
|
||||||
|
title: p.title,
|
||||||
|
subtitle: p.status,
|
||||||
|
bullets: p.bullets,
|
||||||
|
search: searchKey(p.title, p.status, p.bullets),
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
.join('\n'),
|
||||||
|
);
|
||||||
|
|
||||||
|
const pills = (edu.coursework || [])
|
||||||
|
.map(
|
||||||
|
(c) =>
|
||||||
|
` <span class="course-pill" data-search="${searchKey(
|
||||||
|
c,
|
||||||
|
)}">${esc(c)}</span>`,
|
||||||
|
)
|
||||||
|
.join('\n');
|
||||||
|
const coursesSection = section(
|
||||||
|
'courses',
|
||||||
|
'Relevant Courses',
|
||||||
|
` <div class="courses-card">\n <div class="courses-grid" id="courses-grid">\n${pills}\n </div>\n </div>`,
|
||||||
|
);
|
||||||
|
|
||||||
|
const sections = [
|
||||||
|
educationSection,
|
||||||
|
experienceSection,
|
||||||
|
projectsSection,
|
||||||
|
orgsSection,
|
||||||
|
pubsSection,
|
||||||
|
coursesSection,
|
||||||
|
].join('\n\n');
|
||||||
|
|
||||||
|
const headerSub = `Dual Degree · ${(edu.degrees || []).join(' & ')} · GPA ${
|
||||||
|
edu.gpa
|
||||||
|
}`;
|
||||||
|
|
||||||
|
return readFileSync(TEMPLATE, 'utf8')
|
||||||
|
.replace('{{NAME}}', esc(profile.name))
|
||||||
|
.replace('{{HEADER_SUB}}', esc(headerSub))
|
||||||
|
.replace('{{SECTIONS}}', sections);
|
||||||
|
}
|
||||||
|
|
||||||
|
function main() {
|
||||||
|
const check = process.argv.includes('--check');
|
||||||
|
const html = render(JSON.parse(readFileSync(SRC, 'utf8')));
|
||||||
|
|
||||||
|
if (check) {
|
||||||
|
let current = '';
|
||||||
|
try {
|
||||||
|
current = readFileSync(OUT, 'utf8');
|
||||||
|
} catch {
|
||||||
|
/* missing counts as drift */
|
||||||
|
}
|
||||||
|
if (current !== html) {
|
||||||
|
process.stderr.write(
|
||||||
|
`DRIFT: ${OUT} is out of sync. Run: node scripts/build-resume-html.mjs\n`,
|
||||||
|
);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
process.stdout.write(`ok: ${OUT} matches ${SRC}\n`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
writeFileSync(OUT, html);
|
||||||
|
process.stdout.write(`wrote ${OUT} from ${SRC}\n`);
|
||||||
|
}
|
||||||
|
|
||||||
|
main();
|
||||||
Loading…
Reference in new issue