@reuters-graphics/graphics-components 0.0.1-beta.1

package/dist/components/Hero/Hero.svelte

@@ -0,0 +1,78 @@
+<script>/**
+  * Headline
+  */
+export let hed = 'Reuters Graphics Interactive';
+/**
+  * Hedline colour
+  */
+export let hedColour = 'white';
+/**
+  * Dek
+  */
+export let dek = null;
+/**
+  * Section title
+  */
+export let section = null;
+/**
+  * Section colour
+  */
+export let sectionColour = 'red';
+export let imgSrc;
+export let imgAltText;
+export let overlay = true;
+export let top = false;
+export let bottom = false;
+export let left = false;
+export let right = false;
+</script>
+
+
+<section class="hero-title">
+  <figure>
+    {#if $$slots.image}
+      <slot name='image'></slot>
+    {:else}
+      <img src="{imgSrc}" alt="{imgAltText}" />
+    {/if}
+    {#if overlay}
+      <div
+        class="overlay"
+        class:lightest={overlay === 'lightest'}
+        class:lighter={overlay === 'lighter'}
+        class:light={overlay === 'light'}
+        class:dark={overlay === 'dark'}
+        class:darker={overlay === 'darker'}
+        class:darkest={overlay === 'darkest'}
+      ></div>
+    {/if}
+  </figure>
+  <div
+    class="title color-white"
+    class:top={top}
+    class:bottom={bottom}
+    class:left={left}
+    class:right={right}
+  >
+    {#if section}
+      <p class={`section-title color-${sectionColour} text-shadow`}>{section}</p>
+    {/if}
+    
+    {#if $$slots.hed}
+       <slot name="hed"></slot>
+    {:else}
+      <h2
+        class={`text-shadow-darker color-${hedColour} important`}
+      >{hed}</h2>
+    {/if}
+
+    {#if $$slots.dek}
+       <slot name="dek"></slot>
+    {:else}
+      {#if dek}
+        <p class="text-shadow-darkest">{dek}</p>
+      {/if}
+    {/if}
+  </div>
+</section>
+

package/dist/components/NoteText/NoteText.svelte

@@ -0,0 +1,124 @@
+<script>/**
+ * A markdown text string.
+ * @type {string}
+ * @required
+ */
+export let text;
+import { marked } from 'marked';
+import Block from '../Block/Block.svelte';
+</script>
+
+<Block cls="notes">
+  {#if text}
+    {@html marked.parse(text)}
+  {/if}
+</Block>
+
+<!-- svelte-ignore css-unused-selector -->
+<style global>:global(.paragraph-size) {
+  font-size: 1.3rem;
+  line-height: 2.1rem;
+}
+:global(.paragraph-size.font-sans) {
+  font-size: 1.1rem;
+  line-height: 1.75rem;
+}
+@media (max-width: 540px) {
+  :global(.paragraph-size) {
+    font-size: 1.1rem;
+    line-height: 1.8rem;
+  }
+  :global(.paragraph-size.font-sans) {
+    font-size: 1rem;
+    line-height: 1.6rem;
+  }
+}
+:global(.paragraph-size.important) {
+  font-size: 1.3rem !important;
+  line-height: 2.1rem !important;
+}
+:global(.paragraph-size.important.font-sans) {
+  font-size: 1.1rem !important;
+  line-height: 1.8rem !important;
+}
+@media (max-width: 540px) {
+  :global(.paragraph-size.important) {
+    font-size: 1.1rem !important;
+    line-height: 1.8rem !important;
+  }
+  :global(.paragraph-size.important.font-sans) {
+    font-size: 1rem !important;
+    line-height: 1.6rem !important;
+  }
+}
+
+:global(.small-size) {
+  font-size: 0.9rem;
+  line-height: 1.2rem;
+}
+@media (max-width: 540px) {
+  :global(.small-size) {
+    font-size: 0.8rem;
+    line-height: 1.1rem;
+  }
+}
+:global(.small-size.important) {
+  font-size: 0.9rem !important;
+  line-height: 1.2rem !important;
+}
+@media (max-width: 540px) {
+  :global(.small-size.important) {
+    font-size: 0.8rem !important;
+    line-height: 1.1rem !important;
+  }
+}
+
+:global(.blockquote-size) {
+  font-size: 1.6rem;
+  line-height: 2.1rem;
+}
+@media (max-width: 540px) {
+  :global(.blockquote-size) {
+    font-size: 1.3rem;
+    line-height: 1.9rem;
+  }
+}
+:global(.blockquote-size.important) {
+  font-size: 1.6rem !important;
+  line-height: 2rem !important;
+}
+@media (max-width: 540px) {
+  :global(.blockquote-size.important) {
+    font-size: 1.3rem !important;
+    line-height: 1.8rem !important;
+  }
+}
+
+:global(div.article-block.notes) :global(h2),
+:global(div.article-block.notes) :global(h3),
+:global(div.article-block.notes) :global(h4),
+:global(div.article-block.notes) :global(h5),
+:global(div.article-block.notes) :global(h6) {
+  font-family: var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);
+  color: var(--theme-colour-text-primary);
+  margin: 1rem 0 0;
+  font-size: 1rem;
+  letter-spacing: 0.5px;
+}
+:global(div.article-block.notes) :global(p) {
+  font-family: var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);
+  font-size: 1rem;
+  font-weight: 200;
+  color: var(--theme-colour-text-primary);
+}
+:global(div.article-block.notes) :global(p) :global(a) {
+  color: currentColor;
+  background-size: 1px 1px;
+  background-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="2" y2="2" stroke="rgba(0, 0, 0, 0.8)" /></svg>');
+  background-position: 0 1.1rem;
+  background-repeat: repeat-x;
+  text-decoration: none;
+}
+:global(div.article-block.notes) :global(p) :global(a:hover) {
+  text-decoration: none;
+}</style>

package/dist/components/PaddingReset/index.svelte

@@ -0,0 +1,17 @@
+<script>
+  export let width = 'normal';
+</script>
+
+{#if width === 'fluid'}
+  <div>
+    <slot />
+  </div>
+{:else}
+  <slot />
+{/if}
+
+<style>
+  div {
+    width: 100%;
+    padding: 0 15px;
+  }</style>

package/dist/components/PhotoPack/PhotoPack.svelte

@@ -0,0 +1,156 @@
+<script>/**
+ * Array of image objects
+ * @required
+ */
+export let images = [];
+/**
+ * Array of layout objects
+ * @required
+ */
+export let layouts = [];
+/**
+ * Gap between images.
+ * @type {number}
+ */
+export let gap = 10;
+const random4 = () => Math.floor((1 + Math.random()) * 0x10000)
+    .toString(16)
+    .substring(1);
+/**
+ * Add an ID to target with SCSS. Should be unique from all other elements.
+ * @type {string}
+ */
+export let id = 'photopack-' + random4() + random4();
+/**
+ * Add a class to target with SCSS.
+ * @type {string}
+ */
+export let cls = '';
+/** Width of the component within the text well. */
+export let width = 'normal';
+/**
+ * Set a different width for captions within the text well, for example,
+ * "normal" to keep captions inline with the rest of the text well.
+ * Can't ever be wider than `width`.
+ * @type {string}
+ */
+export let captionWidth = 'normal';
+import Block from '../Block/Block.svelte';
+import PaddingReset from '../PaddingReset/index.svelte';
+import { marked } from 'marked';
+let containerWidth;
+const groupRows = (images, layout) => {
+    // Default layout, one img per row
+    if (!layout)
+        return images.map((img) => [img]);
+    // Otherwise, chunk into rows according to layout scheme
+    let i = 0;
+    const rows = [];
+    for (const rowLength of layout.rows) {
+        const row = [];
+        for (const imgI of [...Array(rowLength).keys()]) {
+            row.push(images[imgI + i]);
+        }
+        rows.push(row);
+        i += rowLength;
+    }
+    return rows;
+};
+// Sort so breakpoints always descend
+$: layouts.sort((a, b) => (a.breakpoint < b.breakpoint ? 1 : -1));
+$: layout = layouts.find((l) => 
+// Must have valid rows schema, i.e., adds to the total number of images
+l.rows.reduce((a, b) => a + b, 0) === images.length &&
+    // Breakpoint is higher than container width
+    (containerWidth || 0) >= l.breakpoint);
+$: rows = groupRows(images, layout);
+</script>
+
+<Block width="{width}" id="{id}" cls="photopack {cls}">
+  <div class="photopack-container" bind:clientWidth="{containerWidth}">
+    {#each rows as row, ri}
+      <div
+        class="photopack-row"
+        style:gap="0 {gap}px"
+        style:margin-bottom="{gap + 'px'}"
+      >
+        {#each row as img, i}
+          <figure aria-labelledby="{id}-figure-{ri}-{i}">
+            <img
+              src="{img.src}"
+              alt="{img.altText}"
+              style:max-height="{img.maxHeight ? img.maxHeight + 'px' : ''}"
+            />
+            {#if !img.altText}
+              <div class="alt-warning">altText</div>
+            {/if}
+          </figure>
+        {/each}
+      </div>
+    {/each}
+  </div>
+  <PaddingReset width="{width}">
+    <Block width="{captionWidth}">
+      <div class="captions-container">
+        {#each rows as row, ri}
+          {#each row as img, i}
+            {#if img.caption}
+              <div id="{id}-figure-{ri}-{i}" class="caption">
+                {@html marked(img.caption)}
+              </div>
+            {/if}
+          {/each}
+        {/each}
+      </div>
+    </Block>
+  </PaddingReset>
+</Block>
+
+<style>div.photopack-container {
+  display: block;
+  width: 100%;
+  margin-bottom: 10px;
+}
+div.photopack-container div.photopack-row {
+  display: flex;
+  justify-content: space-between;
+}
+div.photopack-container div.photopack-row figure {
+  flex: 1;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+div.photopack-container div.photopack-row figure img {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+div.photopack-container div.photopack-row figure div.alt-warning {
+  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  padding: 5px 10px;
+  background-color: red;
+  color: white;
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 14px;
+  line-height: 16px;
+}
+
+div.captions-container div.caption {
+  margin: 0 0 0.6rem;
+}
+div.captions-container div.caption:last-of-type {
+  margin-bottom: 0;
+}
+div.captions-container div.caption :global(p) {
+  font-size: 0.85rem;
+  line-height: 1.1rem;
+  font-family: var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);
+  color: var(--theme-colour-text-secondary, #666666);
+  margin: 0;
+  font-weight: 300;
+}</style>

package/dist/components/PhotoPack/docProps.js

@@ -0,0 +1,20 @@
+import urlJoin from 'proper-url-join';
+export const getPhotoPackPropsFromDoc = (docBlock, assetsPath = '') => {
+    return {
+        id: docBlock.ID,
+        cls: docBlock.Class,
+        width: docBlock.Width,
+        captionWidth: docBlock.CaptionWidth,
+        gap: docBlock.Gap && isNaN(docBlock.Gap) ? null : parseInt(docBlock.Gap),
+        images: docBlock.Images.map((img) => ({
+            src: /^https?:\/\/|^\/\//i.test(img.Src) ? img.Src : urlJoin(assetsPath, img.Src),
+            altText: img.AltText,
+            caption: img.Caption,
+            maxHeight: img.MaxHeight && isNaN(img.MaxHeight) ? null : parseFloat(img.MaxHeight),
+        })),
+        layouts: docBlock.Layouts.map((layout) => ({
+            breakpoint: isNaN(layout.Breakpoint) ? null : parseFloat(layout.Breakpoint),
+            rows: layout.Rows.split(',').map(r => parseInt(r.trim())),
+        })),
+    };
+};

package/dist/components/PymChild/PymChild.svelte

@@ -0,0 +1,10 @@
+<script>/** Pym.js polling interval */
+export let polling = 500;
+import { onMount } from 'svelte';
+import pym from 'pym.js';
+// @ts-ignore
+let pymChild;
+onMount(() => {
+    pymChild = new pym.Child({ polling });
+});
+</script>

package/dist/components/ReutersLogo/ReutersLogo.svelte

@@ -0,0 +1,21 @@
+<script>/** "Kinesis" colour */
+export let logoColour = '#FA6400';
+/** Text colour */
+export let textColour = '#404040';
+/** CSS width value */
+export let width = '100%';
+</script>
+
+<svg
+  aria-hidden="true"
+  focusable="false"
+  viewBox="0 0 301 72"
+  style="width: {width};"
+>
+  <path
+    d="M79.231 36.006a4.171 4.171 0 11-8.342 0 4.171 4.171 0 018.342 0zm-12.81-7.292a2.506 2.506 0 100 5.011 2.506 2.506 0 000-5.01zm-2.959-8.744a3.187 3.187 0 100 6.373 3.187 3.187 0 000-6.373zm-5.165-6.632a2.944 2.944 0 100 5.888 2.944 2.944 0 000-5.888zM51.8 9.387a2.51 2.51 0 100 5.02 2.51 2.51 0 000-5.02zm-6.882-1.626a2.123 2.123 0 100 4.245 2.123 2.123 0 000-4.245zm-6.745.297a1.637 1.637 0 100 3.273 1.637 1.637 0 000-3.273zm-5.868 1.416a1.408 1.408 0 100 2.816 1.408 1.408 0 000-2.816zm-5.015 2.238a1.214 1.214 0 100 2.43 1.214 1.214 0 000-2.43zm-4.426 2.904a1.41 1.41 0 100 2.82 1.41 1.41 0 000-2.82zm-4.182 4.064a1.633 1.633 0 100 3.265 1.633 1.633 0 000-3.265zm-3.501 5.452a1.94 1.94 0 100 3.881 1.94 1.94 0 000-3.88zm-2.023 7.008a2.058 2.058 0 100 4.116 2.058 2.058 0 000-4.116zm.143 7.139a2.508 2.508 0 100 5.016 2.508 2.508 0 000-5.016zm2.956 7.387a3.185 3.185 0 100 6.37 3.185 3.185 0 000-6.37zm5.203 7.099a2.942 2.942 0 100 5.883 2.942 2.942 0 000-5.883zm6.27 4.703a2.505 2.505 0 100 5.01 2.505 2.505 0 000-5.01zm7.08 2.544a2.12 2.12 0 100 4.241 2.12 2.12 0 000-4.24zm6.733.666a1.63 1.63 0 100 3.26 1.63 1.63 0 000-3.26zm5.885-.96a1.41 1.41 0 100 2.821 1.41 1.41 0 000-2.82zm5.01-1.86a1.212 1.212 0 100 2.425 1.212 1.212 0 000-2.424zm4.425-3.29a1.415 1.415 0 100 2.829 1.415 1.415 0 000-2.83zm4.189-4.51a1.637 1.637 0 100 3.274 1.637 1.637 0 000-3.273zm3.492-6.07a1.939 1.939 0 100 3.879 1.939 1.939 0 000-3.878zm2.03-7.231a2.048 2.048 0 100 4.096 2.048 2.048 0 000-4.096zm-8.018-2.354a1.943 1.943 0 100 3.887 1.943 1.943 0 000-3.886zm-7.522-1.729a1.1 1.1 0 100 2.201 1.1 1.1 0 000-2.201zm-2.08-5.232a1.513 1.513 0 100 3.026 1.513 1.513 0 000-3.027zm-4.94-4.396a2.066 2.066 0 100 4.13 2.066 2.066 0 000-4.13zm-6.704-.742a2.33 2.33 0 100 4.66 2.33 2.33 0 000-4.66zm-5.678 3.236a2.216 2.216 0 100 4.432 2.216 2.216 0 000-4.432zm-2.91 6.09a1.492 1.492 0 100 2.984 1.492 1.492 0 000-2.985zm.116 5.686a1.098 1.098 0 100 2.197 1.098 1.098 0 000-2.197zm1.971 4.365a1.514 1.514 0 100 3.028 1.514 1.514 0 000-3.028zm4.97 3.369a2.064 2.064 0 100 4.128 2.064 2.064 0 000-4.128zm6.685.171a2.326 2.326 0 100 4.653 2.326 2.326 0 000-4.653zm5.712-3.023a2.222 2.222 0 100 4.444 2.222 2.222 0 000-4.444zm2.9-4.616a1.494 1.494 0 100 2.988 1.494 1.494 0 000-2.988zM57.58 26.61a2.498 2.498 0 100 4.996 2.498 2.498 0 000-4.996zm-4.232-7.013a2.986 2.986 0 100 5.972 2.986 2.986 0 000-5.972zm-6.385-3.924a2.676 2.676 0 100 5.353 2.676 2.676 0 000-5.353zm-7.088-.78a2.35 2.35 0 100 4.7 2.35 2.35 0 000-4.7zm-7.085 2.27a1.758 1.758 0 100 3.516 1.758 1.758 0 000-3.517zm-5.984 4.16a1.618 1.618 0 100 3.234 1.618 1.618 0 000-3.235zm-4.045 5.94a1.624 1.624 0 100 3.248 1.624 1.624 0 000-3.249zm-1.704 6.503a1.936 1.936 0 100 3.873 1.936 1.936 0 000-3.873zm.991 6.655a2.501 2.501 0 100 5.002 2.501 2.501 0 000-5.002zm4.229 6.055a2.98 2.98 0 100 5.96 2.98 2.98 0 000-5.96zm6.416 4.522a2.686 2.686 0 100 5.372 2.686 2.686 0 000-5.372zm7.066 1.415a2.366 2.366 0 100 4.733 2.366 2.366 0 000-4.733zm7.09-1.05a1.758 1.758 0 100 3.516 1.758 1.758 0 000-3.516zm5.992-3.852a1.62 1.62 0 100 3.238 1.62 1.62 0 000-3.238zm4.042-6a1.62 1.62 0 100 3.239 1.62 1.62 0 000-3.238zm16.53-20.253a3.603 3.603 0 100 7.205 3.603 3.603 0 000-7.205zm-4.581-8.281a3.066 3.066 0 100 6.133 3.066 3.066 0 000-6.133zm-6.8-6.497a2.642 2.642 0 100 5.284 2.642 2.642 0 000-5.284zm-7.626-3.932a2.14 2.14 0 100 4.279 2.14 2.14 0 000-4.28zM46.907.534a1.842 1.842 0 100 3.685 1.842 1.842 0 000-3.685zM39.855 0a1.585 1.585 0 100 3.17 1.585 1.585 0 000-3.17zm-7.03.526a1.847 1.847 0 100 3.694 1.847 1.847 0 000-3.693zm-7.5 2.022a2.141 2.141 0 100 4.282 2.141 2.141 0 000-4.282zm-7.633 3.924a2.644 2.644 0 100 5.288 2.644 2.644 0 000-5.288zm-6.801 6.505a3.064 3.064 0 100 6.127 3.064 3.064 0 000-6.127zM6.315 21.27a3.603 3.603 0 100 7.205 3.603 3.603 0 000-7.205zM4.662 31.835a4.171 4.171 0 100 8.342 4.171 4.171 0 000-8.342zm1.655 11.696a3.606 3.606 0 100 7.21 3.606 3.606 0 000-7.21zm4.578 9.374a3.062 3.062 0 100 6.125 3.062 3.062 0 000-6.125zm6.792 7.34a2.644 2.644 0 100 5.288 2.644 2.644 0 000-5.288zm7.638 4.927a2.142 2.142 0 100 4.284 2.142 2.142 0 000-4.284zm7.505 2.616a1.845 1.845 0 100 3.69 1.845 1.845 0 000-3.69zm7.041 1.036a1.588 1.588 0 100 3.176 1.588 1.588 0 000-3.176zm7.03-1.038a1.845 1.845 0 100 3.69 1.845 1.845 0 000-3.69zm7.505-2.61a2.148 2.148 0 100 4.297 2.148 2.148 0 000-4.297zm7.632-4.938a2.646 2.646 0 100 5.292 2.646 2.646 0 000-5.292zm6.8-7.335a3.059 3.059 0 100 6.118 3.059 3.059 0 000-6.118zm4.578-9.366a3.609 3.609 0 100 7.217 3.609 3.609 0 000-7.217z"
+    style="fill: {logoColour};"></path>
+  <path
+    d="M121.865 50.29c0 .287-.167.497-.498.497h-5.085c-.455 0-.624-.422-.83-.833l-5.997-10.096h-.922c-1.087 0-4.451-.119-5.41-.168v10.264c0 .456-.336.833-.793.833h-4.165a.837.837 0 01-.83-.833V22.667c0-.833.494-1.125 1.333-1.248 2.166-.331 6.82-.537 9.864-.537 6.41 0 12.331 2.291 12.331 9.407v.378c0 4.407-2.204 6.82-5.616 8.146l6.532 11.141a.543.543 0 01.086.336zm-6.746-20c0-3.123-2.422-4.456-6.586-4.456-.878 0-4.666.084-5.41.168v9.026c.661.043 4.695.127 5.41.127 4.284 0 6.586-.826 6.586-4.488v-.378zm144.946 20c0 .287-.166.497-.498.497h-5.084c-.456 0-.625-.422-.83-.833l-5.998-10.096h-.922c-1.087 0-4.45-.119-5.41-.168v10.264c0 .456-.335.833-.793.833h-4.165a.837.837 0 01-.83-.833V22.667c0-.833.494-1.125 1.333-1.248 2.167-.331 6.82-.537 9.865-.537 6.41 0 12.33 2.291 12.33 9.407v.378c0 4.407-2.204 6.82-5.615 8.146l6.532 11.141a.544.544 0 01.085.336zm-6.745-20c0-3.123-2.423-4.456-6.587-4.456-.878 0-4.666.084-5.41.168v9.026c.661.043 4.695.127 5.41.127 4.284 0 6.587-.826 6.587-4.488v-.378zm-121.253 7.603h13.327a.835.835 0 00.833-.827V34.06a.837.837 0 00-.833-.829h-13.327v-3.818c0-3.482.134-3.578 3.284-3.578h10.54a.842.842 0 00.835-.836v-2.66c0-.585-.21-.796-.835-.876-1.332-.204-4.045-.58-8.995-.58-6.912 0-10.578-.048-10.578 8.53v13.174c0 8.579 3.666 8.531 10.578 8.531 4.95 0 7.663-.372 8.995-.583.625-.08.835-.288.835-.875v-2.66a.837.837 0 00-.835-.83h-10.54c-3.15 0-3.284-.094-3.284-3.583v-4.693zm82.266 0h13.326a.835.835 0 00.834-.827V34.06a.837.837 0 00-.834-.829h-13.326v-3.818c0-3.482.133-3.578 3.283-3.578h10.54a.842.842 0 00.836-.836v-2.66c0-.585-.21-.796-.835-.876-1.333-.204-4.045-.58-8.996-.58-6.912 0-10.578-.048-10.578 8.53v13.174c0 8.579 3.666 8.531 10.578 8.531 4.95 0 7.663-.372 8.996-.583.625-.08.835-.288.835-.875v-2.66a.837.837 0 00-.835-.83h-10.541c-3.15 0-3.284-.094-3.284-3.583v-4.693zM177 39.331V22.004c0-.462-.374-.791-.837-.791h-4.121c-.458 0-.83.329-.83.79v17.328c0 4.749-2.192 7-6.69 7-4.489 0-6.685-2.251-6.685-7V22.004c0-.462-.372-.791-.834-.791h-4.114c-.457 0-.836.329-.836.79v17.328c0 8.873 5.77 11.786 12.47 11.786 6.705 0 12.477-2.913 12.477-11.786zm26.923-13.292h-8.304v23.915a.84.84 0 01-.839.833h-4.117a.834.834 0 01-.83-.833V26.04h-8.315c-.455 0-.834-.288-.834-.745v-3.29c0-.462.379-.791.834-.791h22.404c.458 0 .835.33.835.791v3.29c0 .457-.377.745-.834.745zm81.586 16.38c0-3.994-2.27-6.06-5.788-7.48-2.766-1.112-5.196-2.057-7.046-2.785-1.842-.73-3.41-1.993-3.41-3.364 0-1.87 2.319-2.955 5.392-2.955 3.626 0 6.477.506 9.227.757h.084c.414 0 .703-.338.703-.75V22.76c0-.413-.327-.706-.746-.787-1.411-.339-5.044-1.094-9.015-1.094-7.74 0-11.432 3.33-11.432 7.912 0 2.911 1.283 5.781 4.912 7.279 3.636 1.5 11.08 3.228 11.08 6.35 0 2.414-1.124 3.741-4.833 3.741-3.848 0-7.745-.545-9.412-.754h-.083a.793.793 0 00-.789.793v3c0 .458.375.745.79.828 2.002.46 5.735 1.094 9.41 1.094 8.335 0 10.956-4.5 10.956-8.703zm3.039-15.501c0 3.27 2.412 6.038 6.092 6.038 3.68 0 6.119-2.769 6.119-6.038 0-3.296-2.44-6.006-6.12-6.006-3.679 0-6.091 2.71-6.091 6.006zm.887 0c0-2.908 2.049-5.23 5.205-5.23 3.183 0 5.23 2.322 5.23 5.23 0 2.909-2.047 5.263-5.23 5.263-3.156 0-5.204-2.354-5.204-5.263zm7.97 2.69l-1.321-2.25c.69-.267 1.136-.754 1.136-1.644v-.075c0-1.438-1.196-1.9-2.491-1.9-.612 0-1.553.042-1.99.11-.169.023-.269.082-.269.25v5.51a.17.17 0 00.169.167h.84c.091 0 .158-.076.158-.167v-2.073c.195.01.875.035 1.092.035h.187l1.213 2.038c.04.082.074.167.166.167h1.027c.065 0 .1-.043.1-.1 0-.019 0-.043-.017-.067zm-1.345-3.893c0 .738-.464.905-1.331.905-.14 0-.955-.017-1.092-.026v-1.821a21.3 21.3 0 011.092-.034c.842 0 1.331.269 1.331.9v.076z"
+    style="fill: {textColour};"></path>
+</svg>

package/dist/components/SEO/SEO.svelte

@@ -0,0 +1,179 @@
+<script>import analytics from './analytics';
+import publisherTags from './publisherTags';
+/**
+ * [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page.
+ * @required
+ * @type {URL}
+ */
+export let url = null;
+/**
+ * SEO title
+ * @required
+ * @type {string}
+ */
+export let seoTitle;
+/**
+ * SEO description
+ * @required
+ * @type {string}
+ */
+export let seoDescription;
+/**
+ * Share title
+ * @required
+ * @type {string}
+ */
+export let shareTitle;
+/**
+ * Share description
+ * @required
+ * @type {string}
+ */
+export let shareDescription;
+/**
+ * Share image path. **Must be an absolute path.**
+ * @required
+ * @type {string}
+ */
+export let shareImgPath;
+/**
+ * [HTML lang attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang). **Two-letter code only.**
+ * @type {string}
+ */
+export let lang = 'en';
+/**
+ * Publish time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
+ * @type {string}
+ */
+export let publishTime = '';
+/**
+ * Updated time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
+ * @type {string}
+ */
+export let updateTime = '';
+/**
+ * Array of authors for the piece. Each author object must have `name` and `url` attributes.
+ */
+export let authors = [];
+/**
+ * Whether to inject Google Analytics code for this page.
+ */
+export let includeAnalytics = false;
+// Only fire analytics on prod sites
+if (typeof window !== 'undefined' && includeAnalytics) {
+    analytics(url, seoTitle);
+    publisherTags();
+}
+const orgLdJson = {
+    '@context': 'http://schema.org',
+    '@type': 'NewsMediaOrganization',
+    '@id': 'https://www.reuters.com/#publisher',
+    name: 'Reuters',
+    logo: {
+        '@type': 'ImageObject',
+        url: 'https://s3.reutersmedia.net/resources_v2/images/reuters_social_logo.png',
+        width: '200',
+        height: '200',
+    },
+    url: 'https://www.reuters.com/',
+};
+const articleLdJson = {
+    '@context': 'http://schema.org',
+    '@type': 'NewsArticle',
+    headline: seoTitle,
+    url: url.href,
+    mainEntityOfPage: {
+        '@type': 'WebPage',
+        '@id': url.href,
+    },
+    thumbnailUrl: shareImgPath,
+    image: [
+        {
+            '@context': 'http://schema.org',
+            '@type': 'ImageObject',
+            url: shareImgPath,
+        },
+    ],
+    publisher: { '@id': 'https://www.reuters.com/#publisher' },
+    copyrightHolder: { '@id': 'https://www.reuters.com/#publisher' },
+    sourceOrganization: { '@id': 'https://www.reuters.com/#publisher' },
+    copyrightYear: new Date().getFullYear(),
+    dateCreated: publishTime,
+    datePublished: publishTime,
+    dateModified: updateTime,
+    author: authors.map(({ name, url }) => ({
+        '@type': 'Person',
+        name,
+        url,
+    })),
+    articleSection: 'Graphics',
+    isAccessibleForFree: true,
+    creator: ['Reuters Graphics'],
+    keywords: ['Reuters graphics', 'Reuters', 'graphics', 'Interactives'],
+};
+</script>
+
+<svelte:head>
+  <html lang="{lang}"></html>
+  <title>{seoTitle}</title>
+  <meta name="description" content="{seoDescription}" />
+  <link rel="canonical" href="{url.href}" />
+  <link
+    rel="shortcut icon"
+    type="image/x-icon"
+    href="https://s3.reutersmedia.net/resources_v2/images/favicon/favicon.ico"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    href="https://s3.reutersmedia.net/resources_v2/images/favicon/favicon-16x16.png"
+    sizes="16x16"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    href="https://s1.reutersmedia.net/resources_v2/images/favicon/favicon-32x32.png"
+    sizes="32x32"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    href="https://s3.reutersmedia.net/resources_v2/images/favicon/favicon-96x96.png"
+    sizes="96x96"
+  />
+
+  <meta property="og:url" content="{url.href}" />
+  <meta property="og:type" content="article" />
+  <meta property="og:title" content="{shareTitle}" itemprop="name" />
+  <meta
+    property="og:description"
+    content="{shareDescription}"
+    itemprop="description"
+  />
+  <meta
+    property="og:image"
+    content="{shareImgPath}"
+    itemprop="image"
+  />
+  <meta property="og:site_name" content="Reuters" />
+
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:site" content="@ReutersGraphics" />
+  <meta name="twitter:creator" content="@ReutersGraphics" />
+  <meta name="twitter:domain" content="{url.origin}" />
+  <meta name="twitter:title" content="{shareTitle}" />
+  <meta name="twitter:description" content="{shareDescription}" />
+  <meta name="twitter:image:src" content="{shareImgPath}" />
+
+  <meta property="fb:app_id" content="319194411438328" />
+  <meta property="fb:admins" content="616167736" />
+  <meta property="fb:admins" content="625796953" />
+  <meta property="fb:admins" content="571759798" />
+
+  {@html `<${'script'} type="application/ld+json">${JSON.stringify(
+    orgLdJson
+  )}</script>`}
+  {@html `<${'script'} type="application/ld+json">${JSON.stringify(
+    articleLdJson
+  )}</script>`}
+</svelte:head>