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