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

57 lines
1.6 KiB
JavaScript
Raw Normal View History

import html from '../utils/html.js'
import markdown from '../utils/markdown.js'
import Icon from './icon.js'
import Link from './link.js'
const formatCountry = countryCode => Intl.DisplayNames
? new Intl.DisplayNames(['en'], { type: 'region' }).of(countryCode)
: countryCode
export default function Header(basics = {}) {
const { email, image, label, location, name, phone, profiles = [], summary, url } = basics
return html`
<header class="masthead">
${image && html`<img src="${image}" alt="">`}
<div>
${name && html`<h1>${name}</h1>`}
${label && html`<h2>${label}</h2>`}
</div>
${summary && html`<article>${markdown(summary)}</article>`}
<ul class="icon-list">
${location?.city && html`
<li>
${Icon('map-pin')}
${location.city}${location.countryCode && html`, ${formatCountry(location.countryCode)}`}
</li>
`}
${email && html`
<li>
${Icon('mail')}
<a href="mailto:${email}">${email}</a>
</li>
`}
${phone && html`
<li>
${Icon('phone')}
<a href="tel:${phone.replace(/\s/g, '')}">${phone}</a>
</li>
`}
${url && html`
<li>
${Icon('link')}
${Link(url)}
</li>
`}
${profiles.map(({ network, url, username }) => html`
<li>
${Icon(network, 'user')}
${Link(url, username)}
${network && html`<span class="network">(${network})</span>`}
</li>
`)}
</ul>
</header>
`
}