masq
/
json-theme-even-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(work): group by organization in timeline

This commit is contained in:
Rafael Bardini 2023-08-29 02:36:34 +02:00
parent 2741e64aaf
commit f06e0c3d35
3 changed files with 78 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
components/work.js
View File

@ -4,29 +4,44 @@ import Duration from './duration.js'
import Link from './link.js'
export default function Work(work = []) {
const nestedWork = work.reduce((acc, { description, name, url, ...rest }) => {
const prev = acc[acc.length - 1]
if (prev && prev.name === name && prev.description === description && prev.url === url) prev.items.push(rest)
else acc.push({ description, name, url, items: [rest] })
return acc
}, [])
return work.length > 0 && html`
<section id="work">
<h3>Work</h3>
<div class="stack">
${work.map(({ description, highlights = [], location, name, position, startDate, endDate, summary, url }) => html`
${nestedWork.map(({ description, name, url, items = [] }) => html`
<article>
<header>
<h4>${Link(url, name)}</h4>
<div class="meta">
<div>
${description && html`<div>${description}</div>`}
<strong>${position}</strong>
</div>
<div>${Duration(startDate, endDate)}</div>
${location && html`<div>${location}</div>`}
${description && html`<div>${description}</div>`}
</div>
</header>
${summary && markdown(summary)}
${highlights.length > 0 && html`
<ul>
${highlights.map(highlight => html`<li>${markdown(highlight)}</li>`)}
</ul>
`}
<div class="timeline">
${items.map(({highlights = [], location, position, startDate, endDate, summary }) => html`
<div>
<div>
<h5>${position}</h5>
<div class="meta">
<div>${Duration(startDate, endDate)}</div>
${location && html`<div>${location}</div>`}
</div>
</div>
${summary && markdown(summary)}
${highlights.length > 0 && html`
<ul>
${highlights.map(highlight => html`<li>${markdown(highlight)}</li>`)}
</ul>
`}
</div>
`)}
</div>
</article>
`)}
</div>

34
style.css
View File

@ -169,7 +169,8 @@ section {
}
article > * + *,
blockquote > * + * {
blockquote > * + *,
.timeline > div > * + * {
margin-top: 0.6em;
}
@ -210,9 +211,34 @@ blockquote > * + * {
padding: 0.2em 0.6em;
}
.bullet-item:not(:first-child)::before {
content: '· ';
margin: 0 0.2em;
.timeline > div {
position: relative;
}
.timeline > div:not(:last-child) {
padding-bottom: 1rem;
}
.timeline > div:not(:last-child)::before {
content: '';
position: absolute;
top: 1rem;
left: -15px;
width: 2px;
height: 100%;
background: var(--color-secondary);
}
.timeline > div:not(:only-child)::after {
content: '';
position: absolute;
top: 0.6rem;
left: -20px;
width: 8px;
height: 8px;
background: var(--color-secondary);
border: 2px solid var(--color-background);
border-radius: 50%;
}
@media print, (min-width: 48em) {

28
test/__snapshots__/index.test.js.snap
View File

@ -72,20 +72,28 @@ exports[`renders a resume 1`] = `
<header>
<h4><a href=\\"http://piedpiper.example.com\\">Pied Piper</a></h4>
<div class=\\"meta\\">
<div>
<div>Awesome compression company</div>
<strong>CEO/President</strong>
</div>
<div><time datetime=\\"2013-12-01\\">Dec 2013</time> – <time datetime=\\"2014-12-01\\">Dec 2014</time></div>
<div>Palo Alto, CA</div>
<div>Awesome compression company</div>
</div>
</header>
<p>Pied Piper is a multi-platform technology based on a proprietary universal compression algorithm that has consistently fielded high Weisman Scores™ that are not merely competitive, but approach the theoretical limit of lossless compression.</p>
<div class=\\"timeline\\">
<ul>
<li><p>Build an algorithm for artist to detect if their music was violating copy right infringement laws</p></li><li><p>Successfully won Techcrunch Disrupt</p></li><li><p>Optimized an algorithm that holds the current world record for Weisman Scores</p></li>
</ul>
<div>
<div>
<h5>CEO/President</h5>
<div class=\\"meta\\">
<div><time datetime=\\"2013-12-01\\">Dec 2013</time> – <time datetime=\\"2014-12-01\\">Dec 2014</time></div>
<div>Palo Alto, CA</div>
</div>
</div>
<p>Pied Piper is a multi-platform technology based on a proprietary universal compression algorithm that has consistently fielded high Weisman Scores™ that are not merely competitive, but approach the theoretical limit of lossless compression.</p>
<ul>
<li><p>Build an algorithm for artist to detect if their music was violating copy right infringement laws</p></li><li><p>Successfully won Techcrunch Disrupt</p></li><li><p>Optimized an algorithm that holds the current world record for Weisman Scores</p></li>
</ul>
</div>
</div>
</article>
</div>