152 lines
4.1 KiB
Svelte
152 lines
4.1 KiB
Svelte
<script lang="ts">
|
|
/**
|
|
* Headline
|
|
* @type {string}
|
|
* @required
|
|
*/
|
|
export let hed: string = 'Reuters Graphics Interactive';
|
|
/**
|
|
* Section title.
|
|
* @type {string}
|
|
*/
|
|
export let section: string = 'Graphics';
|
|
/**
|
|
* Section url, parsed as a string. Set to blank to remove link.
|
|
* @type {string}
|
|
*/
|
|
export let sectionUrl: string = 'https://graphics.reuters.com';
|
|
/**
|
|
* Array of author names, which will be slugified to create links to Reuters author pages
|
|
*/
|
|
export let authors: string[] = [];
|
|
/**
|
|
* Publish time as a datetime string.
|
|
* @type {string}
|
|
*/
|
|
export let publishTime: string = '';
|
|
/**
|
|
* Update time as a datetime string.
|
|
* @type {string}
|
|
*/
|
|
export let updateTime: string = '';
|
|
/**
|
|
* Add an id to to target with custom CSS.
|
|
* @type {string}
|
|
*/
|
|
export let id: string = '';
|
|
/**
|
|
* Add extra classes to target with custom CSS.
|
|
* @type {string}
|
|
*/
|
|
let cls: string = '';
|
|
export { cls as class };
|
|
|
|
import Block from '../Block/Block.svelte';
|
|
import slugify from 'slugify';
|
|
import { apdate } from 'journalize';
|
|
|
|
const isValidDate = (datetime) => {
|
|
if (!datetime) return false;
|
|
if (!Date.parse(datetime)) return false;
|
|
return true;
|
|
};
|
|
|
|
const formatTime = (datetime) =>
|
|
new Date(datetime).toLocaleTimeString([], {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
timeZoneName: 'short',
|
|
});
|
|
|
|
const areSameDay = (first, second) =>
|
|
first.getFullYear() === second.getFullYear() &&
|
|
first.getMonth() === second.getMonth() &&
|
|
first.getDate() === second.getDate();
|
|
</script>
|
|
|
|
<Block id="{id}" class="headline-container !my-16 {cls}" width="normal">
|
|
<header class="headline">
|
|
<div class="title">
|
|
{#if section}
|
|
<p
|
|
class="section-title mb-2 font-subhed text-sm text-secondary font-bold"
|
|
>
|
|
{#if sectionUrl}
|
|
<a class="no-underline !text-secondary" href="{sectionUrl}"
|
|
>{section}</a
|
|
>
|
|
{:else}
|
|
{section}
|
|
{/if}
|
|
</p>
|
|
{/if}
|
|
{#if hed}
|
|
<h1 class="my-0 font-hed text-primary leading-none text-3xl">{hed}</h1>
|
|
{/if}
|
|
</div>
|
|
<aside class="article-metadata mt-2 font-subhed">
|
|
<div class="byline-container">
|
|
<div class="byline text-sm text-primary font-bold leading-tight">
|
|
By
|
|
{#if authors.length > 0}
|
|
{#each authors as author, i}
|
|
<a
|
|
class="no-underline"
|
|
href="https://www.reuters.com/authors/{slugify(author.trim(), {
|
|
lower: true,
|
|
})}/"
|
|
rel="author"
|
|
>
|
|
{author.trim()}</a
|
|
>{#if authors.length > 1 && i < authors.length - 2},{/if}
|
|
{#if authors.length > 1 && i === authors.length - 2}and {/if}
|
|
{/each}
|
|
{:else}
|
|
Reuters
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="dateline-container mt-1.5 text-secondary text-xxs uppercase leading-normal tracking-normal"
|
|
>
|
|
{#if isValidDate(publishTime)}
|
|
<div>
|
|
Published
|
|
<time datetime="{publishTime}">
|
|
{#if isValidDate(updateTime)}
|
|
{apdate(new Date(publishTime))}
|
|
{:else}
|
|
{apdate(new Date(publishTime))} {formatTime(
|
|
publishTime
|
|
)}
|
|
{/if}
|
|
</time>
|
|
</div>
|
|
{/if}
|
|
{#if isValidDate(publishTime) && isValidDate(updateTime)}
|
|
<div>
|
|
Last updated
|
|
<time datetime="{updateTime}">
|
|
{#if areSameDay(new Date(publishTime), new Date(updateTime))}
|
|
{formatTime(updateTime)}
|
|
{:else}
|
|
{apdate(new Date(updateTime))} {formatTime(
|
|
updateTime
|
|
)}
|
|
{/if}
|
|
</time>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</aside>
|
|
</header>
|
|
</Block>
|
|
|
|
<style lang="scss">
|
|
.byline a {
|
|
text-decoration: none;
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
</style>
|