@warleon/jsonresume-theme-html
Version:
A JSON Resume theme, compatible with the latest resume schema
409 lines (408 loc) • 11.4 kB
JavaScript
var k = Object.freeze, L = Object.defineProperty;
var b = (i, e) => k(L(i, "raw", { value: k(e || i.slice()) }));
import { html as t } from "@rbardini/html";
import C from "micromark";
import I from "striptags";
import w from "feather-icons";
function r(i, e = !1) {
const n = (
/** @type {string} */
C(i)
);
return e ? I(n) : n;
}
const P = (i) => new Date(i).toLocaleDateString("en", {
month: "short",
year: "numeric",
timeZone: "UTC"
});
function m(i) {
return t`<time datetime="${i}">${P(i)}</time>`;
}
function R(i = []) {
return i.length > 0 && t`
<section id="awards">
<h3>Awards</h3>
<div class="stack">
${i.map(
({ awarder: e, date: n, summary: s, title: a }) => t`
<article>
<header>
<h4>${a}</h4>
<div class="meta">
${e && t`<div>Awarded by <strong>${e}</strong></div>`} ${n && m(n)}
</div>
</header>
${s && r(s)}
</article>
`
)}
</div>
</section>
`;
}
const j = (i) => i.replace(/^(https?:|)\/\//, "").replace(/\/$/, "");
function u(i, e) {
return e ? i ? t`<a href="${i}">${e}</a>` : e : i && t`<a href="${i}">${j(i)}</a>`;
}
function S(i = []) {
return i.length > 0 && t`
<section id="certificates">
<h3>Certificates</h3>
<div class="stack">
${i.map(
({ date: e, issuer: n, name: s, url: a }) => t`
<article>
<header>
<h4>${u(a, s)}</h4>
<div class="meta">
${n && t`<div>Issued by <strong>${n}</strong></div>`} ${e && m(e)}
</div>
</header>
</article>
`
)}
</div>
</section>
`;
}
function g(i, e) {
return e === i ? m(e) : t`<time-duration>${m(i)} – ${e ? m(e) : "Present"}</time-duration>`;
}
function A(i = []) {
return i.length > 0 && t`
<section id="education">
<h3>Education</h3>
<div class="stack">
${i.map(
({ area: e, courses: n = [], institution: s, startDate: a, endDate: c, studyType: l, url: $ }) => t`
<article>
<header>
<h4>${u($, s)}</h4>
<div class="meta">
${e && t`<strong>${e}</strong>`}
${a && t`<div>${g(a, c)}</div>`}
</div>
</header>
${l && r(l)}
${n.length > 0 && t`
<h5>Courses</h5>
<ul>
${n.map((o) => t`<li>${r(o)}</li>`)}
</ul>
`}
</article>
`
)}
</div>
</section>
`;
}
function p(i, e) {
return (w.icons[
/** @type {FeatherIconNames} */
i.toLowerCase()
] || e && w.icons[
/** @type {FeatherIconNames} */
e.toLowerCase()
])?.toSvg({ width: 16, height: 16 });
}
const W = (i) => Intl.DisplayNames ? new Intl.DisplayNames(["en"], { type: "region" }).of(i) : i;
function q(i = {}) {
const { email: e, image: n, label: s, location: a, name: c, phone: l, profiles: $ = [], summary: o, url: d } = i;
return t`
<header class="masthead">
${n && t`<img src="${n}" alt="" />`}
<div>${c && t`<h1>${c}</h1>`} ${s && t`<h2>${s}</h2>`}</div>
${o && t`<article>${r(o)}</article>`}
<ul class="icon-list">
${a?.city && t`
<li>
${p("map-pin")} ${a.city}${a.countryCode && t`, ${W(a.countryCode)}`}
</li>
`}
${e && t`
<li>
${p("mail")}
<a href="mailto:${e}">${e}</a>
</li>
`}
${l && t`
<li>
${p("phone")}
<a href="tel:${l.replace(/\s/g, "")}">${l}</a>
</li>
`}
${d && t`<li>${p("link")} ${u(d)}</li>`}
${$.map(
({ network: h, url: v, username: f }) => t`
<li>
${h && p(h, "user")} ${u(v, f)}
${h && t`<span class="network">(${h})</span>`}
</li>
`
)}
</ul>
</header>
`;
}
function E(i = []) {
return i.length > 0 && t`
<section id="interests">
<h3>Interests</h3>
<div class="grid-list">
${i.map(
({ keywords: e = [], name: n }) => t`
<div>
${n && t`<h4>${n}</h4>`}
${e.length > 0 && t`
<ul class="tag-list">
${e.map((s) => t`<li>${s}</li>`)}
</ul>
`}
</div>
`
)}
</div>
</section>
`;
}
function F(i = []) {
return i.length > 0 && t`
<section id="languages">
<h3>Languages</h3>
<div class="grid-list">
${i.map(
({ fluency: e, language: n }) => t`<div>${n && t`<h4>${n}</h4>`} ${e}</div>`
)}
</div>
</section>
`;
}
function N(i = {}) {
const { name: e, summary: n } = i;
return t`
${e && t`<title>${e}</title>`}
${n && t`<meta name="description" content="${r(n, !0)}" />`}
`;
}
const T = (i) => Intl.ListFormat ? new Intl.ListFormat("en").format(i) : i.join(", ");
function U(i = []) {
return i.length > 0 && t`
<section id="projects">
<h3>Projects</h3>
<div class="stack">
${i.map(
({
description: e,
entity: n,
highlights: s = [],
keywords: a = [],
name: c,
startDate: l,
endDate: $,
roles: o = [],
type: d,
url: h
}) => t`
<article>
<header>
<h4>${u(h, c)}</h4>
<div class="meta">
<div>
${o.length > 0 && t`<strong>${T(o)}</strong>`}
${n && t`at <strong>${n}</strong>`}
</div>
${l && t`<div>${g(l, $)}</div>`} ${d && t`<div>${d}</div>`}
</div>
</header>
${e && r(e)}
${s.length > 0 && t`
<ul>
${s.map((v) => t`<li>${r(v)}</li>`)}
</ul>
`}
${a.length > 0 && t`
<ul class="tag-list">
${a.map((v) => t`<li>${v}</li>`)}
</ul>
`}
</article>
`
)}
</div>
</section>
`;
}
function V(i = []) {
return i.length > 0 && t`
<section id="publications">
<h3>Publications</h3>
<div class="stack">
${i.map(
({ name: e, publisher: n, releaseDate: s, summary: a, url: c }) => t`
<article>
<header>
<h4>${u(c, e)}</h4>
<div class="meta">
${n && t`<div>Published by <strong>${n}</strong></div>`}
${s && m(s)}
</div>
</header>
${a && r(a)}
</article>
`
)}
</div>
</section>
`;
}
function x(i = []) {
return i.length > 0 && t`
<section id="references">
<h3>References</h3>
<div class="stack">
${i.map(
({ name: e, reference: n }) => t`
<blockquote>
${n && r(n)}
${e && t`
<p>
<cite>${e}</cite>
</p>
`}
</blockquote>
`
)}
</div>
</section>
`;
}
function B(i = []) {
return i.length > 0 && t`
<section id="skills">
<h3>Skills</h3>
<div class="grid-list">
${i.map(
({ keywords: e = [], name: n }) => t`
<div>
${n && t`<h4>${n}</h4>`}
${e.length > 0 && t`
<ul class="tag-list">
${e.map((s) => t`<li>${s}</li>`)}
</ul>
`}
</div>
`
)}
</div>
</section>
`;
}
function H(i = []) {
return i.length > 0 && t`
<section id="volunteer">
<h3>Volunteer</h3>
<div class="stack">
${i.map(
({ highlights: e = [], organization: n, position: s, startDate: a, endDate: c, summary: l, url: $ }) => t`
<article>
<header>
<h4>${u($, n)}</h4>
<div class="meta">
<strong>${s}</strong>
${a && t`<div>${g(a, c)}</div>`}
</div>
</header>
${l && r(l)}
${e.length > 0 && t`
<ul>
${e.map((o) => t`<li>${r(o)}</li>`)}
</ul>
`}
</article>
`
)}
</div>
</section>
`;
}
function M(i = []) {
const e = i.reduce(
(n, { description: s, name: a, url: c, ...l }) => {
const $ = n[n.length - 1];
return $ && $.name === a && $.description === s && $.url === c ? $.items.push(l) : n.push({ description: s, name: a, url: c, items: [l] }), n;
},
/** @type {NestedWork[]} */
[]
);
return i.length > 0 && t`
<section id="work">
<h3>Work</h3>
<div class="stack">
${e.map(
({ description: n, name: s, url: a, items: c = [] }) => t`
<article>
<header>
<h4>${u(a, s)}</h4>
<div class="meta">${n && t`<div>${n}</div>`}</div>
</header>
<div class="timeline">
${c.map(
({ highlights: l = [], location: $, position: o, startDate: d, endDate: h, summary: v }) => t`
<div>
<div>
<h5>${o}</h5>
<div class="meta">
${d && t`<div>${g(d, h)}</div>`}
${$ && t`<div>${$}</div>`}
</div>
</div>
${v && r(v)}
${l.length > 0 && t`
<ul>
${l.map((f) => t`<li>${r(f)}</li>`)}
</ul>
`}
</div>
`
)}
</div>
</article>
`
)}
</div>
</section>
`;
}
var y;
function O(i, { css: e, js: n } = {}) {
return t`<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
${N(i.basics)}
<meta name="viewport" content="width=device-width, initial-scale=1" />
${e && t`<style>
${e}
</style>`}
${n && t(y || (y = b([`<script type="module">
`, `
<\/script>`])), n)}
</head>
<body>
${q(i.basics)} ${M(i.work)} ${H(i.volunteer)} ${A(i.education)}
${U(i.projects)} ${R(i.awards)} ${S(i.certificates)}
${V(i.publications)} ${B(i.skills)} ${F(i.languages)}
${E(i.interests)} ${x(i.references)}
</body>
</html>`;
}
const Q = {
mediaType: "print",
printBackground: !0
}, X = (i) => O(i, { css: "", js: "" });
export {
Q as pdfRenderOptions,
X as render
};