suggested changes
This commit is contained in:
Jon McClure
parent
68c586684a
commit
ad61eb558f
11 changed files with 334 additions and 325 deletions
|
|
@ -88,6 +88,7 @@
|
|||
"marked": "^4.0.8",
|
||||
"proper-url-join": "^2.1.1",
|
||||
"pym.js": "^1.3.2",
|
||||
"slugify": "^1.6.5",
|
||||
"svelte-fa": "^2.4.0",
|
||||
"svelte-intersection-observer": "^0.10.0",
|
||||
"svelte-search": "^2.0.1",
|
||||
|
|
|
|||
|
|
@ -1,153 +0,0 @@
|
|||
<script lang="ts">
|
||||
/**
|
||||
* Headline, parsed as an _inline_ markdown string in an `h1` element.
|
||||
* @type {string}
|
||||
*/
|
||||
export let hed: string = 'Reuters Graphics Interactive';
|
||||
/**
|
||||
* Section title, defaulting to 'Reuters Graphics'. Change to custom title if desired.
|
||||
* @type {string}
|
||||
*/
|
||||
export let section: string = 'Reuters Graphics';
|
||||
/**
|
||||
* Section url, parsed as a string, defaulting to graphics.reuters.com. Set to blank to remove link.
|
||||
* @type {string}
|
||||
*/
|
||||
export let sectionUrl: string = 'https://graphics.reuters.com/';
|
||||
|
||||
/**
|
||||
* Margin bottom, passed as CSS string, defining distance between Headline and body; can be negative.
|
||||
* @type {string}
|
||||
*/
|
||||
export let marginBottom = '4rem';
|
||||
|
||||
import Block from '../Block/Block.svelte';
|
||||
import { marked } from 'marked';
|
||||
</script>
|
||||
|
||||
<Block cls="mb-1" width="normal">
|
||||
<header class="headline" style="--marginBottom: {marginBottom};">
|
||||
<div class="title">
|
||||
{#if section}
|
||||
<p class="{'section-title'}">
|
||||
{#if sectionUrl}
|
||||
<a href="{sectionUrl}">{section}</a>
|
||||
{:else}
|
||||
{section}
|
||||
{/if}
|
||||
</p>
|
||||
{/if}
|
||||
{#if hed}
|
||||
<h1>{@html marked.parseInline(hed)}</h1>
|
||||
{/if}
|
||||
</div>
|
||||
{#if $$slots.byline || $$slots.dateline}
|
||||
<aside class="article-metadata" class:pt-1="{false}">
|
||||
{#if $$slots.byline}
|
||||
<div class="byline-container">
|
||||
<div class="byline">
|
||||
<!-- Byline named slot -->
|
||||
<slot name="byline" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if $$slots.dateline}
|
||||
<div class="dateline-container">
|
||||
<div class="published">
|
||||
<!-- Dateline named slot -->
|
||||
<slot name="dateline" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</aside>
|
||||
{/if}
|
||||
</header>
|
||||
</Block>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../scss/colours/thematic/tr';
|
||||
@import '../../scss/fonts/variables';
|
||||
|
||||
// Official styles
|
||||
header.headline {
|
||||
text-align: center;
|
||||
margin-top: 4rem;
|
||||
margin-bottom: var(--marginBottom);
|
||||
color: var(--theme-colour-text-primary, $tr-dark-grey);
|
||||
@media (max-width: 900px) {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
:global {
|
||||
h1 {
|
||||
text-align: left;
|
||||
font-size: 3rem;
|
||||
line-height: 1.14;
|
||||
margin: 0.6rem 0;
|
||||
font-family: var(--theme-font-family-hed, $font-family-display);
|
||||
color: var(--theme-colour-text-primary, $tr-dark-grey);
|
||||
@media (max-width: 900px) {
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
font-size: 2.1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: var(--theme-font-family-subhed, $font-family-display);
|
||||
color: var(--theme-colour-text-primary, $tr-dark-grey);
|
||||
margin: 0;
|
||||
font-weight: 200;
|
||||
|
||||
&.section-title {
|
||||
font-weight: 800;
|
||||
color: var(--theme-colour-accent, $tr-dark-red);
|
||||
text-align: left;
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
a {
|
||||
color: #999;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.article-metadata {
|
||||
padding: 40px 0;
|
||||
padding-top: 0;
|
||||
font-family: var(--theme-font-family-note, $font-family-display);
|
||||
color: var(--theme-colour-text-primary, $tr-dark-grey);
|
||||
text-align: left;
|
||||
|
||||
.byline-container {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.byline {
|
||||
font-weight: bold;
|
||||
//color: #404040;
|
||||
font-weight: 600;
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
:global {
|
||||
a {
|
||||
color: var(--theme-colour-text-primary, $tr-dark-grey);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dateline-container {
|
||||
text-transform: uppercase;
|
||||
color: var(--theme-colour-text-secondary, $tr-medium-grey);
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.2rem;
|
||||
letter-spacing: 0.2px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
<script>
|
||||
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
|
||||
import { apdate } from 'journalize';
|
||||
import { marked } from 'marked';
|
||||
|
||||
// @ts-ignore
|
||||
import componentDocs from './stories/docs/component.md?raw';
|
||||
// @ts-ignore
|
||||
import withByline from './stories/docs/withByline.md?raw';
|
||||
// @ts-ignore
|
||||
import quickitDocs from './stories/docs/quickit.md?raw';
|
||||
|
||||
import HeadlineBreakingNews from './HeadlineBreakingNews.svelte';
|
||||
|
||||
import {
|
||||
withComponentDocs,
|
||||
withStoryDocs,
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/HeadlineBreakingNews',
|
||||
component: HeadlineBreakingNews,
|
||||
...withComponentDocs(componentDocs),
|
||||
};
|
||||
|
||||
const content = {
|
||||
Kicker: 'Global News',
|
||||
KickerUrl: '',
|
||||
Hed: 'Reuters Graphics Interactive',
|
||||
Byline: 'Sherlock Holmes',
|
||||
Published: '2022-09-12T08:30:00.000Z',
|
||||
Updated: '',
|
||||
MarginBottom: '2rem',
|
||||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
|
||||
<Template let:args>
|
||||
<HeadlineBreakingNews {...args} />
|
||||
</Template>
|
||||
|
||||
<Story
|
||||
name="Default"
|
||||
args="{{
|
||||
hed: 'Reuters Graphics interactive',
|
||||
}}"
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="With byline, dateline, without a link to Reuters Graphics"
|
||||
{...withStoryDocs(withByline)}
|
||||
>
|
||||
<HeadlineBreakingNews
|
||||
hed="{'Reuters Graphics Interactive'}"
|
||||
section="{'World News'}"
|
||||
sectionUrl=""
|
||||
>
|
||||
<!-- Use named slots to add a byline... -->
|
||||
<span slot="byline">By <strong>Peppa Pig</strong></span>
|
||||
<!-- ...and a dateline. -->
|
||||
<span slot="dateline"
|
||||
>Published <time datetime="{new Date('2020-01-01').toISOString()}"
|
||||
>Jan. 1, 2020</time
|
||||
></span
|
||||
>
|
||||
</HeadlineBreakingNews>
|
||||
</Story>
|
||||
|
||||
<Story name="🚀 QUICKIT" {...withStoryDocs(quickitDocs)}>
|
||||
<HeadlineBreakingNews
|
||||
hed="{content.Hed}"
|
||||
section="{content.Kicker}"
|
||||
sectionUrl="{content.KickerUrl}"
|
||||
marginBottom="{content.MarginBottom}"
|
||||
>
|
||||
<span slot="byline">By {@html marked.parseInline(content.Byline)} </span>
|
||||
<div slot="dateline">
|
||||
Published <time datetime="{content.Published}">
|
||||
{apdate(new Date(content.Published))}</time
|
||||
>
|
||||
{#if content.Updated}
|
||||
<br /> Updated
|
||||
<time datetime="{content.Updated}">
|
||||
{apdate(new Date(content.Updated))}
|
||||
</time>
|
||||
{/if}
|
||||
</div>
|
||||
</HeadlineBreakingNews>
|
||||
</Story>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
Reuters Graphics headline for breaking news pages
|
||||
|
||||
This is a simplified version of the `Headline` component. It doesn't allow for the addition of crown, the dek is removed, and the styles are
|
||||
simplified. It is meant to serve as a unifying style for quick turnaround pages.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { HeadlineBreakingNews } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<Headline hed="{'Reuters Graphics Interactive'}" />
|
||||
```
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
Setup your Google Doc to work with the `HeadlineBreakingNews` component.
|
||||
|
||||
```yaml
|
||||
# Beginning of your Google doc
|
||||
Kicker: Global News
|
||||
KickerUrl:
|
||||
Hed: A beautiful page
|
||||
Byline: Sherlock Holmes
|
||||
Published: 2022-09-12T08:30:00.000Z
|
||||
Updated:
|
||||
MarginBottom: 2rem
|
||||
```
|
||||
|
||||
Note that this works in exactly the same way as the `Headline` component, but for the extra prop of `KickerUrl` which you need to add if
|
||||
you don't want your kicker to be a link to Reuters Graphics. You can also additionally have a `MarginBottom` prop.
|
||||
|
||||
```svelte
|
||||
<!-- App.svelte -->
|
||||
<script>
|
||||
import { HeadlineBreakingNews } from '@reuters-graphics/graphics-components';
|
||||
|
||||
// These should be already imported for you.
|
||||
import content from '$locales/en/content.json';
|
||||
import { apdate } from 'journalize';
|
||||
import { marked } from 'marked';
|
||||
</script>
|
||||
|
||||
<HeadlineBreakingNews
|
||||
section="{content.Kicker}"
|
||||
sectionUrl="{content.KickerUrl}"
|
||||
hed="{content.Hed}"
|
||||
marginBottom="{content.MarginBottom}"
|
||||
>
|
||||
<span slot="byline">By {@html marked.parseInline(content.Byline)} </span>
|
||||
<div slot="dateline">
|
||||
Published <time datetime="{content.Published}">
|
||||
{apdate(new Date(content.Published))}</time
|
||||
>
|
||||
{#if content.Updated}
|
||||
<br /> Updated
|
||||
<time datetime="{content.Updated}">
|
||||
{apdate(new Date(content.Updated))}
|
||||
</time>
|
||||
{/if}
|
||||
</div>
|
||||
</HeadlineBreakingNews>
|
||||
```
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
Add a byline and dateline with `byline` and `dateline` named slots.
|
||||
If you don't want to display 'Global Graphics' with a link to graphics.reuters.com at the top, you can
|
||||
replace with a section title using the `section` prop and leaving the `sectionUrl` blank.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { HeadlineBreakingNews } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<HeadlineBreakingNews
|
||||
hed="{'Reuters Graphics Interactive'}"
|
||||
section="{'World News'}"
|
||||
sectionUrl=""
|
||||
>
|
||||
<!-- Use named slots to add a byline... -->
|
||||
<span slot="byline">By <strong>Peppa Pig</strong></span>
|
||||
<!-- ...and a dateline. -->
|
||||
<span slot="dateline">Published Jan. 1, 2020</span>
|
||||
</HeadlineBreakingNews>
|
||||
```
|
||||
66
src/components/SiteHeadline/SiteHeadline.stories.svelte
Normal file
66
src/components/SiteHeadline/SiteHeadline.stories.svelte
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
<script>
|
||||
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
|
||||
|
||||
// @ts-ignore
|
||||
import componentDocs from './stories/docs/component.md?raw';
|
||||
// @ts-ignore
|
||||
import quickitDocs from './stories/docs/quickit.md?raw';
|
||||
|
||||
import SiteHeadline from './SiteHeadline.svelte';
|
||||
|
||||
import {
|
||||
withComponentDocs,
|
||||
withStoryDocs,
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/SiteHeadline',
|
||||
component: SiteHeadline,
|
||||
...withComponentDocs(componentDocs),
|
||||
};
|
||||
|
||||
const content = {
|
||||
Section: 'Global News',
|
||||
SectionUrl: '',
|
||||
Hed: 'A beautiful page',
|
||||
Authors: 'Samuel Granados, Dea Bankova',
|
||||
Published: '2022-09-12T08:30:00.000Z',
|
||||
Updated: '',
|
||||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
|
||||
<Template let:args>
|
||||
<SiteHeadline {...args} />
|
||||
</Template>
|
||||
|
||||
<Story
|
||||
name="Default"
|
||||
args="{{
|
||||
section: 'Graphics',
|
||||
sectionUrl: 'https://graphics.reuters.com',
|
||||
hed: 'Ukraine makes surprising gains in swift counteroffensive',
|
||||
authors: [
|
||||
'Dea Bankova',
|
||||
'Michael Ovaska',
|
||||
'Samuel Granados',
|
||||
'Prasanta Kumar Dutta',
|
||||
],
|
||||
publishTime: new Date('2021-09-12').toISOString(),
|
||||
updateTime: new Date('2021-09-12T13:57:00').toISOString(),
|
||||
}}"
|
||||
/>
|
||||
|
||||
<Story name="🚀 QUICKIT" {...withStoryDocs(quickitDocs)}>
|
||||
<SiteHeadline
|
||||
hed="{content.Hed}"
|
||||
section="{content.Section}"
|
||||
sectionUrl="{content.SectionUrl}"
|
||||
authors="{content.Authors.split(',')}"
|
||||
publishTime="{content.Published}"
|
||||
/>
|
||||
</Story>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
223
src/components/SiteHeadline/SiteHeadline.svelte
Normal file
223
src/components/SiteHeadline/SiteHeadline.svelte
Normal file
|
|
@ -0,0 +1,223 @@
|
|||
<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}
|
||||
*/
|
||||
export let cls: string = '';
|
||||
|
||||
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}" cls="headline-container {cls}" width="normal">
|
||||
<header class="headline">
|
||||
<div class="title">
|
||||
{#if section}
|
||||
<p class="section-title">
|
||||
{#if sectionUrl}
|
||||
<a href="{sectionUrl}">{section}</a>
|
||||
{:else}
|
||||
{section}
|
||||
{/if}
|
||||
</p>
|
||||
{/if}
|
||||
{#if hed}
|
||||
<h1>{hed}</h1>
|
||||
{/if}
|
||||
</div>
|
||||
<aside class="article-metadata">
|
||||
<div class="byline-container">
|
||||
<div class="byline">
|
||||
By
|
||||
{#if authors.length > 0}
|
||||
{#each authors as author, i}
|
||||
<a
|
||||
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">
|
||||
{#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">
|
||||
@import '../../scss/colours/thematic/tr';
|
||||
@import '../../scss/fonts/variables';
|
||||
|
||||
:global(div.article-block.headline-container) {
|
||||
margin: 4rem auto;
|
||||
}
|
||||
|
||||
// Official styles
|
||||
header.headline {
|
||||
text-align: center;
|
||||
color: var(--theme-colour-text-primary, $tr-dark-grey);
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
font-size: 3rem;
|
||||
line-height: 1.14;
|
||||
margin: 0.6rem 0;
|
||||
font-family: var(--theme-font-family-hed, $font-family-display);
|
||||
color: var(--theme-colour-text-primary, $tr-dark-grey);
|
||||
@media (max-width: 900px) {
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
font-size: 2.1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: var(--theme-font-family-subhed, $font-family-display);
|
||||
color: var(--theme-colour-text-primary, $tr-dark-grey);
|
||||
margin: 0;
|
||||
font-weight: 200;
|
||||
|
||||
&.section-title {
|
||||
font-weight: 800;
|
||||
color: var(--theme-colour-text-secondary, $tr-light-grey);
|
||||
text-align: left;
|
||||
font-size: 1.2rem;
|
||||
opacity: 0.8;
|
||||
@media (max-width: 600px) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
a {
|
||||
color: var(--theme-colour-text-secondary, $tr-light-grey);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.article-metadata {
|
||||
padding: 40px 0 0;
|
||||
padding-top: 0;
|
||||
font-family: var(--theme-font-family-note, $font-family-display);
|
||||
color: var(--theme-colour-text-primary, $tr-dark-grey);
|
||||
text-align: left;
|
||||
|
||||
.byline-container {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.byline {
|
||||
font-weight: bold;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
line-height: 1.4rem;
|
||||
a {
|
||||
color: var(--theme-colour-text-primary, $tr-dark-grey);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dateline-container {
|
||||
text-transform: uppercase;
|
||||
color: var(--theme-colour-text-secondary, $tr-medium-grey);
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.1rem;
|
||||
letter-spacing: 0.3px;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
11
src/components/SiteHeadline/stories/docs/component.md
Normal file
11
src/components/SiteHeadline/stories/docs/component.md
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
A simplified Reuters Graphics headline, loosely modelled off our dotcom site.
|
||||
|
||||
Styles for this headline are intentionally restricted. It is meant to serve as a unifying style for quick-turnaround, usually shorter breaking news pages.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { SiteHeadline } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<SiteHeadline hed="{'Reuters Graphics Interactive'}" />
|
||||
```
|
||||
28
src/components/SiteHeadline/stories/docs/quickit.md
Normal file
28
src/components/SiteHeadline/stories/docs/quickit.md
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
Setup your Google Doc to work with the `SiteHeadline` component.
|
||||
|
||||
```yaml
|
||||
# Beginning of your Google doc
|
||||
Section: Global News
|
||||
SectionUrl:
|
||||
Hed: A beautiful page
|
||||
Authors: Samuel Granados, Dea Bankova
|
||||
Published: 2022-09-12T08:30:00.000Z
|
||||
Updated:
|
||||
```
|
||||
|
||||
```svelte
|
||||
<!-- App.svelte -->
|
||||
<script>
|
||||
import { SiteHeadline } from '@reuters-graphics/graphics-components';
|
||||
|
||||
// These should be already imported for you.
|
||||
import content from '$locales/en/content.json';
|
||||
</script>
|
||||
|
||||
<SiteHeadline
|
||||
section="{content.Section}"
|
||||
sectionUrl="{content.SectionUrl}"
|
||||
hed="{content.Hed}"
|
||||
authors="{content.Authors.split(',')}"
|
||||
/>
|
||||
```
|
||||
|
|
@ -10816,6 +10816,11 @@ slice-ansi@^2.1.0:
|
|||
astral-regex "^1.0.0"
|
||||
is-fullwidth-code-point "^2.0.0"
|
||||
|
||||
slugify@^1.6.5:
|
||||
version "1.6.5"
|
||||
resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.6.5.tgz#c8f5c072bf2135b80703589b39a3d41451fbe8c8"
|
||||
integrity sha512-8mo9bslnBO3tr5PEVFzMPIWwWnipGS0xVbYf65zxDqfNwmzYn1LpiKNrR6DlClusuvo+hDHd1zKpmfAe83NQSQ==
|
||||
|
||||
snake-case@^3.0.4:
|
||||
version "3.0.4"
|
||||
resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"
|
||||
|
|
|
|||
Loading…
Reference in a new issue