@reuters-graphics/graphics-components 0.0.12 → 0.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
/**
|
|
5
|
+
* Headline
|
|
6
|
+
* @type {string}
|
|
7
|
+
* @required
|
|
8
|
+
*/ hed?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Section title.
|
|
11
|
+
* @type {string}
|
|
12
|
+
*/ section?: string;
|
|
13
|
+
/**
|
|
14
|
+
* Section url, parsed as a string. Set to blank to remove link.
|
|
15
|
+
* @type {string}
|
|
16
|
+
*/ sectionUrl?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Array of author names, which will be slugified to create links to Reuters author pages
|
|
19
|
+
*/ authors?: string[];
|
|
20
|
+
/**
|
|
21
|
+
* Publish time as a datetime string.
|
|
22
|
+
* @type {string}
|
|
23
|
+
*/ publishTime?: string;
|
|
24
|
+
/**
|
|
25
|
+
* Update time as a datetime string.
|
|
26
|
+
* @type {string}
|
|
27
|
+
*/ updateTime?: string;
|
|
28
|
+
/**
|
|
29
|
+
* Add an id to to target with custom CSS.
|
|
30
|
+
* @type {string}
|
|
31
|
+
*/ id?: string;
|
|
32
|
+
/**
|
|
33
|
+
* Add extra classes to target with custom CSS.
|
|
34
|
+
* @type {string}
|
|
35
|
+
*/ cls?: string;
|
|
36
|
+
};
|
|
37
|
+
events: {
|
|
38
|
+
[evt: string]: CustomEvent<any>;
|
|
39
|
+
};
|
|
40
|
+
slots: {};
|
|
41
|
+
};
|
|
42
|
+
export declare type SiteHeadlineProps = typeof __propDef.props;
|
|
43
|
+
export declare type SiteHeadlineEvents = typeof __propDef.events;
|
|
44
|
+
export declare type SiteHeadlineSlots = typeof __propDef.slots;
|
|
45
|
+
export default class SiteHeadline extends SvelteComponentTyped<SiteHeadlineProps, SiteHeadlineEvents, SiteHeadlineSlots> {
|
|
46
|
+
}
|
|
47
|
+
export {};
|
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
<script>/**
|
|
2
|
+
* Headline
|
|
3
|
+
* @type {string}
|
|
4
|
+
* @required
|
|
5
|
+
*/
|
|
6
|
+
export let hed = 'Reuters Graphics Interactive';
|
|
7
|
+
/**
|
|
8
|
+
* Section title.
|
|
9
|
+
* @type {string}
|
|
10
|
+
*/
|
|
11
|
+
export let section = 'Graphics';
|
|
12
|
+
/**
|
|
13
|
+
* Section url, parsed as a string. Set to blank to remove link.
|
|
14
|
+
* @type {string}
|
|
15
|
+
*/
|
|
16
|
+
export let sectionUrl = 'https://graphics.reuters.com';
|
|
17
|
+
/**
|
|
18
|
+
* Array of author names, which will be slugified to create links to Reuters author pages
|
|
19
|
+
*/
|
|
20
|
+
export let authors = [];
|
|
21
|
+
/**
|
|
22
|
+
* Publish time as a datetime string.
|
|
23
|
+
* @type {string}
|
|
24
|
+
*/
|
|
25
|
+
export let publishTime = '';
|
|
26
|
+
/**
|
|
27
|
+
* Update time as a datetime string.
|
|
28
|
+
* @type {string}
|
|
29
|
+
*/
|
|
30
|
+
export let updateTime = '';
|
|
31
|
+
/**
|
|
32
|
+
* Add an id to to target with custom CSS.
|
|
33
|
+
* @type {string}
|
|
34
|
+
*/
|
|
35
|
+
export let id = '';
|
|
36
|
+
/**
|
|
37
|
+
* Add extra classes to target with custom CSS.
|
|
38
|
+
* @type {string}
|
|
39
|
+
*/
|
|
40
|
+
export let cls = '';
|
|
41
|
+
import Block from '../Block/Block.svelte';
|
|
42
|
+
import slugify from 'slugify';
|
|
43
|
+
import { apdate } from 'journalize';
|
|
44
|
+
const isValidDate = (datetime) => {
|
|
45
|
+
if (!datetime)
|
|
46
|
+
return false;
|
|
47
|
+
if (!Date.parse(datetime))
|
|
48
|
+
return false;
|
|
49
|
+
return true;
|
|
50
|
+
};
|
|
51
|
+
const formatTime = (datetime) => new Date(datetime).toLocaleTimeString([], {
|
|
52
|
+
hour: '2-digit',
|
|
53
|
+
minute: '2-digit',
|
|
54
|
+
timeZoneName: 'short',
|
|
55
|
+
});
|
|
56
|
+
const areSameDay = (first, second) => first.getFullYear() === second.getFullYear() &&
|
|
57
|
+
first.getMonth() === second.getMonth() &&
|
|
58
|
+
first.getDate() === second.getDate();
|
|
59
|
+
</script>
|
|
60
|
+
|
|
61
|
+
<Block id="{id}" cls="headline-container {cls}" width="normal">
|
|
62
|
+
<header class="headline">
|
|
63
|
+
<div class="title">
|
|
64
|
+
{#if section}
|
|
65
|
+
<p class="section-title">
|
|
66
|
+
{#if sectionUrl}
|
|
67
|
+
<a href="{sectionUrl}">{section}</a>
|
|
68
|
+
{:else}
|
|
69
|
+
{section}
|
|
70
|
+
{/if}
|
|
71
|
+
</p>
|
|
72
|
+
{/if}
|
|
73
|
+
{#if hed}
|
|
74
|
+
<h1>{hed}</h1>
|
|
75
|
+
{/if}
|
|
76
|
+
</div>
|
|
77
|
+
<aside class="article-metadata">
|
|
78
|
+
<div class="byline-container">
|
|
79
|
+
<div class="byline">
|
|
80
|
+
By
|
|
81
|
+
{#if authors.length > 0}
|
|
82
|
+
{#each authors as author, i}
|
|
83
|
+
<a
|
|
84
|
+
href="https://www.reuters.com/authors/{slugify(author.trim(), {
|
|
85
|
+
lower: true,
|
|
86
|
+
})}/"
|
|
87
|
+
rel="author"
|
|
88
|
+
>
|
|
89
|
+
{author.trim()}</a
|
|
90
|
+
>{#if authors.length > 1 && i < authors.length - 2},{/if}
|
|
91
|
+
{#if authors.length > 1 && i === authors.length - 2}and {/if}
|
|
92
|
+
{/each}
|
|
93
|
+
{:else}
|
|
94
|
+
Reuters
|
|
95
|
+
{/if}
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
<div class="dateline-container">
|
|
99
|
+
{#if isValidDate(publishTime)}
|
|
100
|
+
<div>
|
|
101
|
+
Published
|
|
102
|
+
<time datetime="{publishTime}">
|
|
103
|
+
{#if isValidDate(updateTime)}
|
|
104
|
+
{apdate(new Date(publishTime))}
|
|
105
|
+
{:else}
|
|
106
|
+
{apdate(new Date(publishTime))} {formatTime(
|
|
107
|
+
publishTime
|
|
108
|
+
)}
|
|
109
|
+
{/if}
|
|
110
|
+
</time>
|
|
111
|
+
</div>
|
|
112
|
+
{/if}
|
|
113
|
+
{#if isValidDate(publishTime) && isValidDate(updateTime)}
|
|
114
|
+
<div>
|
|
115
|
+
Last updated
|
|
116
|
+
<time datetime="{updateTime}">
|
|
117
|
+
{#if areSameDay(new Date(publishTime), new Date(updateTime))}
|
|
118
|
+
{formatTime(updateTime)}
|
|
119
|
+
{:else}
|
|
120
|
+
{apdate(new Date(updateTime))} {formatTime(
|
|
121
|
+
updateTime
|
|
122
|
+
)}
|
|
123
|
+
{/if}
|
|
124
|
+
</time>
|
|
125
|
+
</div>
|
|
126
|
+
{/if}
|
|
127
|
+
</div>
|
|
128
|
+
</aside>
|
|
129
|
+
</header>
|
|
130
|
+
</Block>
|
|
131
|
+
|
|
132
|
+
<style>:global(div.article-block.headline-container) {
|
|
133
|
+
margin: 4rem auto;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
header.headline {
|
|
137
|
+
text-align: center;
|
|
138
|
+
color: var(--theme-colour-text-primary, #404040);
|
|
139
|
+
}
|
|
140
|
+
header.headline h1 {
|
|
141
|
+
text-align: left;
|
|
142
|
+
font-size: 3rem;
|
|
143
|
+
line-height: 1.14;
|
|
144
|
+
margin: 0.6rem 0;
|
|
145
|
+
font-family: var(--theme-font-family-hed, "Knowledge", "Source Sans Pro", Arial, sans-serif);
|
|
146
|
+
color: var(--theme-colour-text-primary, #404040);
|
|
147
|
+
}
|
|
148
|
+
@media (max-width: 900px) {
|
|
149
|
+
header.headline h1 {
|
|
150
|
+
font-size: 2.6rem;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
@media (max-width: 600px) {
|
|
154
|
+
header.headline h1 {
|
|
155
|
+
font-size: 2.1rem;
|
|
156
|
+
font-weight: 500;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
header.headline p {
|
|
160
|
+
font-family: var(--theme-font-family-subhed, "Knowledge", "Source Sans Pro", Arial, sans-serif);
|
|
161
|
+
color: var(--theme-colour-text-primary, #404040);
|
|
162
|
+
margin: 0;
|
|
163
|
+
font-weight: 200;
|
|
164
|
+
}
|
|
165
|
+
header.headline p.section-title {
|
|
166
|
+
font-weight: 800;
|
|
167
|
+
color: var(--theme-colour-text-secondary, #afafaf);
|
|
168
|
+
text-align: left;
|
|
169
|
+
font-size: 1.2rem;
|
|
170
|
+
opacity: 0.8;
|
|
171
|
+
}
|
|
172
|
+
@media (max-width: 600px) {
|
|
173
|
+
header.headline p.section-title {
|
|
174
|
+
font-size: 1rem;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
header.headline p.section-title a {
|
|
178
|
+
color: var(--theme-colour-text-secondary, #afafaf);
|
|
179
|
+
text-decoration: none;
|
|
180
|
+
}
|
|
181
|
+
header.headline .article-metadata {
|
|
182
|
+
padding: 40px 0 0;
|
|
183
|
+
padding-top: 0;
|
|
184
|
+
font-family: var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);
|
|
185
|
+
color: var(--theme-colour-text-primary, #404040);
|
|
186
|
+
text-align: left;
|
|
187
|
+
}
|
|
188
|
+
header.headline .article-metadata .byline-container {
|
|
189
|
+
margin-bottom: 0px;
|
|
190
|
+
}
|
|
191
|
+
header.headline .article-metadata .byline {
|
|
192
|
+
font-weight: bold;
|
|
193
|
+
font-weight: 600;
|
|
194
|
+
font-size: 1rem;
|
|
195
|
+
line-height: 1.4rem;
|
|
196
|
+
}
|
|
197
|
+
@media (max-width: 600px) {
|
|
198
|
+
header.headline .article-metadata .byline {
|
|
199
|
+
font-size: 0.9rem;
|
|
200
|
+
line-height: 1.2rem;
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
header.headline .article-metadata .byline a {
|
|
204
|
+
color: var(--theme-colour-text-primary, #404040);
|
|
205
|
+
text-decoration: none;
|
|
206
|
+
white-space: nowrap;
|
|
207
|
+
}
|
|
208
|
+
header.headline .article-metadata .byline a:hover {
|
|
209
|
+
text-decoration: underline;
|
|
210
|
+
}
|
|
211
|
+
header.headline .article-metadata .dateline-container {
|
|
212
|
+
text-transform: uppercase;
|
|
213
|
+
color: var(--theme-colour-text-secondary, #666666);
|
|
214
|
+
font-size: 0.8rem;
|
|
215
|
+
line-height: 1.1rem;
|
|
216
|
+
letter-spacing: 0.3px;
|
|
217
|
+
margin-top: 0.5rem;
|
|
218
|
+
}
|
|
219
|
+
@media (max-width: 600px) {
|
|
220
|
+
header.headline .article-metadata .dateline-container {
|
|
221
|
+
font-size: 0.75rem;
|
|
222
|
+
line-height: 1.05rem;
|
|
223
|
+
}
|
|
224
|
+
}</style>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@reuters-graphics/graphics-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.13",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"private": false,
|
|
6
6
|
"homepage": "https://reuters-graphics.github.io/graphics-components",
|
|
@@ -82,11 +82,13 @@
|
|
|
82
82
|
"bootstrap": "^5.2.0",
|
|
83
83
|
"classnames": "^2.3.1",
|
|
84
84
|
"dayjs": "^1.11.3",
|
|
85
|
+
"journalize": "^2.5.1",
|
|
85
86
|
"lodash-es": "^4.17.21",
|
|
86
87
|
"lottie-web": "^5.7.13",
|
|
87
88
|
"marked": "^4.0.8",
|
|
88
89
|
"proper-url-join": "^2.1.1",
|
|
89
90
|
"pym.js": "^1.3.2",
|
|
91
|
+
"slugify": "^1.6.5",
|
|
90
92
|
"svelte-fa": "^2.4.0",
|
|
91
93
|
"svelte-intersection-observer": "^0.10.0",
|
|
92
94
|
"svelte-search": "^2.0.1",
|
|
@@ -173,6 +175,7 @@
|
|
|
173
175
|
"./components/SiteHeader/scss/z-indexes": "./dist/components/SiteHeader/scss/_z-indexes.scss",
|
|
174
176
|
"./components/SiteHeader/svgs/Close.svelte": "./dist/components/SiteHeader/svgs/Close.svelte",
|
|
175
177
|
"./components/SiteHeader/svgs/Menu.svelte": "./dist/components/SiteHeader/svgs/Menu.svelte",
|
|
178
|
+
"./components/SiteHeadline/SiteHeadline.svelte": "./dist/components/SiteHeadline/SiteHeadline.svelte",
|
|
176
179
|
"./components/Spinner/Spinner.svelte": "./dist/components/Spinner/Spinner.svelte",
|
|
177
180
|
"./components/Theme/@types/component.ts": "./dist/components/Theme/@types/component.ts",
|
|
178
181
|
"./components/Theme/Theme.svelte": "./dist/components/Theme/Theme.svelte",
|