@warleon/jsonresume-theme-compact
Version:
A JSON Resume theme, compatible with the latest resume schema
438 lines (423 loc) • 13.3 kB
JavaScript
;var y=Object.freeze,w=Object.defineProperty;var b=(t,i)=>y(w(t,"raw",{value:y(i||t.slice())}));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@rbardini/html"),j=require("micromark"),C=require("striptags"),x=require("feather-icons"),L=`
:root {
--color-background: #ffffff;
--color-dimmed: #f3f4f5;
--color-primary: #191e23;
--color-secondary: #6c7781;
--color-accent: #0073aa;
--scale-ratio: 1.2;
--scale0: 0.875rem;
--scale1: calc(var(--scale0) * var(--scale-ratio));
--scale2: calc(var(--scale1) * var(--scale-ratio));
--scale3: calc(var(--scale2) * var(--scale-ratio));
--scale4: calc(var(--scale3) * var(--scale-ratio));
--scale5: calc(var(--scale4) * var(--scale-ratio));
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 12px;
}
body {
background: var(--color-background);
color: var(--color-primary);
display: flex;
flex-direction: column;
gap: 1rem;
}
h3,h1 {
font-weight: bold;
text-transform: uppercase;
}
.masthead {
> article {
margin-bottom: 0.5rem;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
gap: 1.5rem ;
flex-wrap: wrap;
justify-content: center;
> li {
display: flex;
text-wrap: nowrap;
}
}
section {
> .stack {
margin-left: 1rem;
}
}
.meta{
display: flex;
gap: 1.5rem;
margin-left: 1.5rem;
> div{
display: flex;
gap: 1.5rem;
}
}
article {
> header {
display: flex;
}
> .timeline {
margin-left: 0.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
> div {
> div:first-child {
display: flex;
}
> p {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
> ul {
justify-content: flex-start;
gap: 0;
> li {
&::before {
content: "•";
margin-right: 0.25rem;
}
}
}
}
}
}
#volunteer,#education,#projects,#awards,#publications {
article {
> p,ul,h5 {
margin-left: 0.5rem;
}
> ul {
display: flex;
justify-content: flex-start;
gap: 0.25rem 0.5rem;
> li {
&::before {
content: "•";
margin: auto 0.25rem;
}
}
}
}
}
.grid-list {
margin-left: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
> div {
display: flex;
gap: 1.5rem;
flex-wrap: nowrap;
> ul {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 0.5rem;
justify-content: flex-start;
> li {
&::before {
content: "•";
margin: auto 0.25rem;
}
}
}
}
}
blockquote {
> p{
display: inline;
}
> p:last-child {
margin-left: auto;
&::before {
content: "—";
margin: auto 0.25rem;
font-size: 1.5rem;
font-weight: bold;
}
}
}
`;function s(t,i=!1){const l=j(t);return i?C(l):l}const q=t=>new Date(t).toLocaleDateString("en",{month:"short",year:"numeric",timeZone:"UTC"});function v(t){return e.html`<time datetime="${t}">${q(t)}</time>`}function P(t=[]){return t.length>0&&e.html`
<section id="awards">
<h3>Awards</h3>
<div class="stack">
${t.map(({awarder:i,date:l,summary:a,title:n})=>e.html`
<article>
<header>
<h4>${n}</h4>
<div class="meta">
${i&&e.html`<div>Awarded by <strong>${i}</strong></div>`} ${l&&v(l)}
</div>
</header>
${a&&s(a)}
</article>
`)}
</div>
</section>
`}const R=t=>t.replace(/^(https?:|)\/\//,"").replace(/\/$/,"");function u(t,i){return i?t?e.html`<a href="${t}">${i}</a>`:i:t&&e.html`<a href="${t}">${R(t)}</a>`}function I(t=[]){return t.length>0&&e.html`
<section id="certificates">
<h3>Certificates</h3>
<div class="stack">
${t.map(({date:i,issuer:l,name:a,url:n})=>e.html`
<article>
<header>
<h4>${u(n,a)}</h4>
<div class="meta">
${l&&e.html`<div>Issued by <strong>${l}</strong></div>`} ${i&&v(i)}
</div>
</header>
</article>
`)}
</div>
</section>
`}function f(t,i){return i===t?v(i):e.html`<time-duration>${v(t)} – ${i?v(i):"Present"}</time-duration>`}function S(t=[]){return t.length>0&&e.html`
<section id="education">
<h3>Education</h3>
<div class="stack">
${t.map(({area:i,courses:l=[],institution:a,startDate:n,endDate:o,studyType:r,url:c})=>e.html`
<article>
<header>
<h4>${u(c,a)}</h4>
<div class="meta">
${r&&e.html`<strong>${r}</strong> on`}
${i&&e.html`<strong>${i}</strong>`}
${n&&e.html`<div>${f(n,o)}</div>`}
</div>
</header>
${l.length>0&&e.html`
<h5>Courses</h5>
<ul>
${l.map(h=>e.html`<li>${s(h)}</li>`)}
</ul>
`}
</article>
`)}
</div>
</section>
`}function p(t,i){return(x.icons[t.toLowerCase()]||i&&x.icons[i.toLowerCase()])?.toSvg({width:16,height:16})}const z=t=>t;function A(t={}){const{email:i,image:l,label:a,location:n,name:o,phone:r,profiles:c=[],summary:h,url:m}=t;return e.html`
<header class="masthead">
${l&&e.html`<img src="${l}" alt="" />`}
<div>${o&&e.html`<h1>${o}</h1>`} ${a&&e.html`<h2>${a}</h2>`}</div>
${h&&e.html`<article>${s(h)}</article>`}
<ul class="icon-list">
${n?.city&&e.html`
<li>
${p("map-pin")} ${n.city}${n.countryCode&&e.html`, ${z(n.countryCode)}`}
</li>
`}
${i&&e.html`
<li>
${p("mail")}
<a href="mailto:${i}">${i}</a>
</li>
`}
${r&&e.html`
<li>
${p("phone")}
<a href="tel:${r.replace(/\s/g,"")}">${r}</a>
</li>
`}
${m&&e.html`<li>${p("link")} ${u(m)}</li>`}
${c.map(({network:d,url:$,username:g})=>e.html`
<li>
${d&&p(d,"user")} ${u($,g)}
${d&&e.html`<span class="network">(${d})</span>`}
</li>
`)}
</ul>
</header>
`}function O(t=[]){return t.length>0&&e.html`
<section id="interests">
<h3>Interests</h3>
<div class="grid-list">
${t.map(({keywords:i=[],name:l})=>e.html`
<div>
${l&&e.html`<h4>${l}</h4>`}
${i.length>0&&e.html`
<ul class="tag-list">
${i.map(a=>e.html`<li>${a}</li>`)}
</ul>
`}
</div>
`)}
</div>
</section>
`}function T(t=[]){return t.length>0&&e.html`
<section id="languages">
<h3>Languages</h3>
<div class="grid-list">
${t.map(({fluency:i,language:l})=>e.html`<div>${l&&e.html`<h4>${l}</h4>`} ${i}</div>`)}
</div>
</section>
`}function W(t={}){const{name:i,summary:l}=t;return e.html`
${i&&e.html`<title>${i}</title>`}
${l&&e.html`<meta name="description" content="${s(l,!0)}" />`}
`}const E=t=>Intl.ListFormat?new Intl.ListFormat("en").format(t):t.join(", ");function F(t=[]){return t.length>0&&e.html`
<section id="projects">
<h3>Projects</h3>
<div class="stack">
${t.map(({description:i,entity:l,highlights:a=[],keywords:n=[],name:o,startDate:r,endDate:c,roles:h=[],type:m,url:d})=>e.html`
<article>
<header>
<h4>${u(d,o)}</h4>
<div class="meta">
<div>
${h.length>0&&e.html`<strong>${E(h)}</strong>`}
${l&&e.html`at <strong>${l}</strong>`}
</div>
${r&&e.html`<div>${f(r,c)}</div>`} ${m&&e.html`<div>${m}</div>`}
</div>
</header>
${i&&s(i)}
${a.length>0&&e.html`
<ul>
${a.map($=>e.html`<li>${s($)}</li>`)}
</ul>
`}
${n.length>0&&e.html`
<ul class="tag-list">
${n.map($=>e.html`<li>${$}</li>`)}
</ul>
`}
</article>
`)}
</div>
</section>
`}function M(t=[]){return t.length>0&&e.html`
<section id="publications">
<h3>Publications</h3>
<div class="stack">
${t.map(({name:i,publisher:l,releaseDate:a,summary:n,url:o})=>e.html`
<article>
<header>
<h4>${u(o,i)}</h4>
<div class="meta">
${l&&e.html`<div>Published by <strong>${l}</strong></div>`}
${a&&v(a)}
</div>
</header>
${n&&s(n)}
</article>
`)}
</div>
</section>
`}function U(t=[]){return t.length>0&&e.html`
<section id="references">
<h3>References</h3>
<div class="stack">
${t.map(({name:i,reference:l})=>e.html`
<blockquote>
${l&&s(l)}
${i&&e.html`
<p>
<cite>${i}</cite>
</p>
`}
</blockquote>
`)}
</div>
</section>
`}function V(t=[]){return t.length>0&&e.html`
<section id="skills">
<h3>Skills</h3>
<div class="grid-list">
${t.map(({keywords:i=[],name:l})=>e.html`
<div>
${l&&e.html`<h4>${l}</h4>`}
${i.length>0&&e.html`
<ul class="tag-list">
${i.map(a=>e.html`<li>${a}</li>`)}
</ul>
`}
</div>
`)}
</div>
</section>
`}function B(t=[]){return t.length>0&&e.html`
<section id="volunteer">
<h3>Volunteer</h3>
<div class="stack">
${t.map(({highlights:i=[],organization:l,position:a,startDate:n,endDate:o,summary:r,url:c})=>e.html`
<article>
<header>
<h4>${u(c,l)}</h4>
<div class="meta">
<strong>${a}</strong>
${n&&e.html`<div>${f(n,o)}</div>`}
</div>
</header>
${r&&s(r)}
${i.length>0&&e.html`
<ul>
${i.map(h=>e.html`<li>${s(h)}</li>`)}
</ul>
`}
</article>
`)}
</div>
</section>
`}function H(t=[]){const i=t.reduce((l,{description:a,name:n,url:o,...r})=>{const c=l[l.length-1];return c&&c.name===n&&c.description===a&&c.url===o?c.items.push(r):l.push({description:a,name:n,url:o,items:[r]}),l},[]);return t.length>0&&e.html`
<section id="work">
<h3>Work</h3>
<div class="stack">
${i.map(({description:l,name:a,url:n,items:o=[]})=>e.html`
<article>
<header>
<h4>${u(n,a)}</h4>
<div class="meta">${l&&e.html`<div>${l}</div>`}</div>
</header>
<div class="timeline">
${o.map(({highlights:r=[],location:c,position:h,startDate:m,endDate:d,summary:$})=>e.html`
<div>
<div>
<h5>${h}</h5>
<div class="meta">
${m&&e.html`<div>${f(m,d)}</div>`}
${c&&e.html`<div>${c}</div>`}
</div>
</div>
${$&&s($)}
${r.length>0&&e.html`
<ul>
${r.map(g=>e.html`<li>${s(g)}</li>`)}
</ul>
`}
</div>
`)}
</div>
</article>
`)}
</div>
</section>
`}var k;function Z(t,{css:i,js:l}={}){return e.html`
<html lang="en">
<head>
<meta charset="utf-8" />
${W(t.basics)}
<meta name="viewport" content="width=device-width, initial-scale=1" />
${i&&e.html`<style>
${i}
</style>`}
${l&&e.html(k||(k=b([`<script type="module">
`,`
<\/script>`])),l)}
</head>
<body>
${A(t.basics)} ${H(t.work)} ${B(t.volunteer)} ${S(t.education)}
${F(t.projects)} ${P(t.awards)} ${I(t.certificates)}
${M(t.publications)} ${V(t.skills)} ${T(t.languages)}
${O(t.interests)} ${U(t.references)}
</body>
</html>`}const G={mediaType:"print",printBackground:!0},J=t=>Z(t,{css:L,js:""});exports.pdfRenderOptions=G;exports.render=J;