json-theme-even-fork/components/work.js

51 lines
1.7 KiB
JavaScript
Raw Normal View History

import html from '../utils/html.js'
import markdown from '../utils/markdown.js'
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">
${nestedWork.map(({ description, name, url, items = [] }) => html`
<article>
<header>
<h4>${Link(url, name)}</h4>
<div class="meta">
${description && html`<div>${description}</div>`}
</div>
</header>
<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>
</section>
`
}