@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/SEO/SEO.mdx

@@ -0,0 +1,80 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as SEOStories from './SEO.stories.svelte';
+
+<Meta of={SEOStories} />
+
+# SEO
+
+The `SEO` component adds essential metadata to pages.
+
+```svelte
+<script>
+  import { SEO } from '@reuters-graphics/graphics-components';
+</script>
+
+<SEO
+  baseUrl="https://www.reuters.com/graphics/world-coronavirus-tracker-and-maps"
+  pageUrl={new URL(
+    'https://www.reuters.com/graphics/world-coronavirus-tracker-and-maps/countries/united-kingdom/'
+  )}
+  seoTitle="A title for Google"
+  seoDescription="A description for Google"
+  shareTitle="A title for Twitter/Facebook"
+  shareDescription="A description for Twitter/Facebook"
+  shareImgPath="https://www.reuters.com/graphics/world-coronavirus-tracker-and-maps/assets/images/share.jpg"
+  shareImgAlt="An image showing global COVID infection rates"
+  publishTime="2020-09-15T00:00:00.000Z"
+  updateTime="2021-01-10T12:30:00.000Z"
+  authors={[
+    { name: 'Jane Doe', link: 'https://www.reuters.com/authors/jane-doe/' },
+    { name: 'John Doe', link: 'https://www.reuters.com/authors/john-doe/' },
+  ]}
+/>
+```
+
+## Using with ArchieML docs
+
+With the graphics kit, you'll likely get many of your text values from an ArchieML doc...
+
+```yaml
+# ArchieML doc
+slug: ROOT-SLUG/WILD
+seoTitle: Page title for search
+seoDescription: Page description for search
+shareTitle: Page title for social media
+shareDescription: Page description for social media
+shareImgPath: images/reuters-graphics.jpg
+shareImgAlt: Alt text for share image.
+```
+
+... which you'll pass to the `SEO` component.
+
+```svelte
+<script>
+  import { SEO } from '@reuters-graphics/graphics-components';
+  import pkg from '$pkg';
+  import content from '$locales/en/content.json';
+  import { assets } from '$app/paths';
+  import { page } from '$app/stores';
+</script>
+
+<SEO
+  baseUrl={VITE_BASE_URL}
+  pageUrl={$page.url}
+  seoTitle={content.seoTitle}
+  seoDescription={content.seoDescription}
+  shareTitle={content.shareTitle}
+  shareDescription={content.shareDescription}
+  shareImgPath={`${assets}/${content.shareImgPath}`}
+  shareImgAlt={content.shareImgAlt}
+  publishTime={pkg?.reuters?.graphic?.published}
+  updateTime={pkg?.reuters?.graphic?.updated}
+  authors={pkg?.reuters?.graphic?.authors}
+/>
+```
+
+> **Note:** For _reasons_, we can't document the value of `VITE_BASE_URL` below. It's `import` + `.meta.env.BASE_URL` (concatenate all that) in the graphics kit and other Vite-based rigs.
+
+<Canvas of={SEOStories.Demo} />
+```

package/dist/components/SEO/SEO.stories.svelte

@@ -1,41 +1,23 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import archieMLDocs from "./stories/docs/archieML.md?raw";
-import SEO from "./SEO.svelte";
-import {
-  withComponentDocs,
-  withStoryDocs
-} from "../../lib/docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Ads & analytics/SEO",
-  component: SEO,
-  ...withComponentDocs(componentDocs)
-};
-</script>
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import SEO from './SEO.svelte';
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
+  const { Story } = defineMeta({
+    title: 'Components/Ads & analytics/SEO',
+    component: SEO,
+  });
 </script>
 
-<Template let:args>
-  <SEO {...args} />
-  <div>Nothing to see here. 😎</div>
-</Template>
-
-<Story
-  name="Default"
-  args="{{
-    baseUrl: 'https://graphics.reuters.com',
-    pageUrl: new URL('https://graphics.reuters.com/hello-world/'),
-    publishTime: new Date('2020-09-15').toISOString(),
-  }}"
-/>
-
+<div>View page source to see the SEO metadata.</div>
 <Story
-  name="ArchieML"
-  args="{{
-    baseUrl: 'https://graphics.reuters.com',
-    pageUrl: new URL('https://graphics.reuters.com/hello-world/'),
-    publishTime: new Date('2020-09-15').toISOString(),
-  }}"
-  {...withStoryDocs(archieMLDocs)}
+  name="Demo"
+  args={{
+    baseUrl: 'https://www.reuters.com',
+    seoTitle: 'A title for Google',
+    seoDescription: 'A description for Google',
+    shareTitle: 'A title for Twitter/Facebook',
+    shareDescription: 'A description for Twitter/Facebook',
+    shareImgPath:
+      'https://www.reuters.com/graphics/world-coronavirus-tracker-and-maps/assets/images/share.jpg',
+  }}
 />

package/dist/components/SEO/SEO.stories.svelte.d.ts

@@ -1,24 +1,18 @@
-import { SvelteComponent } from "svelte";
-import SEO from './SEO.svelte';
-export declare const meta: {
-    parameters: {
-        docs: any;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    title: string;
-    component: typeof SEO;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SeoProps = typeof __propDef.props;
-export type SeoEvents = typeof __propDef.events;
-export type SeoSlots = typeof __propDef.slots;
-export default class Seo extends SvelteComponent<SeoProps, SeoEvents, SeoSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Seo: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Seo = InstanceType<typeof Seo>;
+export default Seo;

package/dist/components/SEO/SEO.svelte

@@ -1,123 +1,183 @@
 <!-- @component `SEO` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytic-seo--docs) -->
-<script>export let baseUrl = "";
-export let pageUrl = null;
-export let seoTitle;
-export let seoDescription;
-export let shareTitle;
-export let shareDescription;
-export let shareImgPath;
-export let shareImgAlt = "";
-export let publishTime = "";
-export let updateTime = "";
-export let authors = [];
-const getOrigin = (baseUrl2) => {
-  try {
-    return new URL(baseUrl2).origin;
-  } catch {
-    if (typeof window !== "undefined") return getOrigin(window.location.href);
-    return "";
+<script lang="ts">
+  interface GraphicAuthor {
+    name: string;
+    link: string;
   }
-};
-$: origin = getOrigin(baseUrl);
-$: canonicalUrl = (origin + pageUrl?.pathname).replace(/index\.html\/$/, "");
-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/"
-};
-$: articleLdJson = {
-  "@context": "http://schema.org",
-  "@type": "NewsArticle",
-  headline: seoTitle,
-  url: canonicalUrl,
-  mainEntityOfPage: {
-    "@type": "WebPage",
-    "@id": canonicalUrl
-  },
-  thumbnailUrl: shareImgPath,
-  image: [
-    {
-      "@context": "http://schema.org",
-      "@type": "ImageObject",
-      url: shareImgPath
+
+  interface Props {
+    /**
+     * Base url for the page, which in [Vite-based projects](https://vitejs.dev/guide/build.html#public-base-path) is globally available as `import.meta.env.BASE_URL`.
+     */
+    baseUrl: string;
+    /**
+     * [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page.
+     */
+    pageUrl: URL;
+    /**
+     * SEO title
+     */
+    seoTitle: string;
+    /**
+     * SEO description
+     */
+    seoDescription: string;
+    /**
+     * Share title
+     */
+    shareTitle: string;
+    /**
+     * Share description
+     */
+    shareDescription: string;
+    /**
+     * Share image path. **Must be an absolute path.**
+     */
+    shareImgPath: string;
+    /**
+     * Share image alt text, up to 420 characters.
+     */
+    shareImgAlt?: string;
+    /**
+     * Publish time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
+     */
+    publishTime?: string;
+    /**
+     * Updated time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
+     */
+    updateTime?: string;
+    /**
+     * Array of authors for the piece. Each author object must have `name` and `link` attributes.
+     */
+    authors?: GraphicAuthor[];
+  }
+
+  let {
+    baseUrl,
+    pageUrl,
+    seoTitle,
+    seoDescription,
+    shareTitle,
+    shareDescription,
+    shareImgPath,
+    shareImgAlt = '',
+    publishTime = '',
+    updateTime = '',
+    authors = [],
+  }: Props = $props();
+  const getOrigin = (baseUrl: string) => {
+    try {
+      return new URL(baseUrl).origin;
+    } catch {
+      // This handles a weird case where Vite's base path is
+      // reset to './' after the app hydrates...
+      if (typeof window !== 'undefined') return getOrigin(window.location.href);
+      return '';
     }
-  ],
-  publisher: { "@id": "https://www.reuters.com/#publisher" },
-  copyrightHolder: { "@id": "https://www.reuters.com/#publisher" },
-  sourceOrganization: { "@id": "https://www.reuters.com/#publisher" },
-  copyrightYear: (/* @__PURE__ */ new Date()).getFullYear(),
-  dateCreated: publishTime,
-  datePublished: publishTime,
-  dateModified: updateTime,
-  author: authors.map(({ name, url }) => ({
-    "@type": "Person",
-    name,
-    url
-  })),
-  creator: authors.map(({ name }) => name),
-  articleSection: "Graphics",
-  isAccessibleForFree: true,
-  keywords: ["Reuters graphics", "Reuters", "graphics", "Interactives"]
-};
+  };
+
+  let origin = $derived(getOrigin(baseUrl));
+  let canonicalUrl = $derived(
+    (origin + (pageUrl?.pathname || '')).replace(/index\.html\/$/, '')
+  );
+
+  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/',
+  };
+
+  let articleLdJson = $derived({
+    '@context': 'http://schema.org',
+    '@type': 'NewsArticle',
+    headline: seoTitle,
+    url: canonicalUrl,
+    mainEntityOfPage: {
+      '@type': 'WebPage',
+      '@id': canonicalUrl,
+    },
+    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, link }) => ({
+      '@type': 'Person',
+      name,
+      url: link,
+    })),
+    creator: authors.map(({ name }) => name),
+    articleSection: 'Graphics',
+    isAccessibleForFree: true,
+    keywords: ['Reuters graphics', 'Reuters', 'graphics', 'Interactives'],
+  });
 </script>
 
 <svelte:head>
   {#key canonicalUrl}
     <title>{seoTitle}</title>
-    <meta name="description" content="{seoDescription}" />
-    <link rel="canonical" href="{canonicalUrl}" />
-    <link
-      rel="shortcut icon"
-      type="image/x-icon"
-      href="https://s3.reutersmedia.net/resources_v2/images/favicon/favicon.ico"
-    />
+    <meta name="description" content={seoDescription} />
+    <link rel="canonical" href={canonicalUrl} />
     <link
       rel="icon"
       type="image/png"
-      href="https://s3.reutersmedia.net/resources_v2/images/favicon/favicon-16x16.png"
-      sizes="16x16"
+      href="https://graphics.thomsonreuters.com/style-assets/images/logos/favicon/favicon-96x96.png"
+      sizes="96x96"
     />
     <link
       rel="icon"
-      type="image/png"
-      href="https://s1.reutersmedia.net/resources_v2/images/favicon/favicon-32x32.png"
-      sizes="32x32"
+      type="image/svg+xml"
+      href="https://graphics.thomsonreuters.com/style-assets/images/logos/favicon/kinesis.svg"
     />
     <link
-      rel="icon"
-      type="image/png"
-      href="https://s3.reutersmedia.net/resources_v2/images/favicon/favicon-96x96.png"
-      sizes="96x96"
+      rel="shortcut icon"
+      type="image/x-icon"
+      href="https://graphics.thomsonreuters.com/style-assets/images/logos/favicon/favicon.ico"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="https://graphics.thomsonreuters.com/style-assets/images/logos/favicon/apple-touch-icon.png"
     />
 
-    <meta property="og:url" content="{canonicalUrl}" />
+    <meta property="og:url" content={canonicalUrl} />
     <meta property="og:type" content="article" />
-    <meta property="og:title" content="{shareTitle}" itemprop="name" />
+    <meta property="og:title" content={shareTitle} itemprop="name" />
     <meta
       property="og:description"
-      content="{shareDescription}"
+      content={shareDescription}
       itemprop="description"
     />
-    <meta property="og:image" content="{shareImgPath}" itemprop="image" />
+    <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="{origin}" />
-    <meta name="twitter:title" content="{shareTitle}" />
-    <meta name="twitter:description" content="{shareDescription}" />
-    <meta name="twitter:image" content="{shareImgPath}" />
+    <meta name="twitter:domain" content={origin} />
+    <meta name="twitter:title" content={shareTitle} />
+    <meta name="twitter:description" content={shareDescription} />
+    <meta name="twitter:image" content={shareImgPath} />
     {#if shareImgAlt}
-      <meta name="twitter:image:alt" content="{shareImgAlt}" />
+      <meta name="twitter:image:alt" content={shareImgAlt} />
     {/if}
 
     <meta property="fb:app_id" content="319194411438328" />

package/dist/components/SEO/SEO.svelte.d.ts

@@ -1,72 +1,54 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-           * Base url for the page, which in [Vite-based projects](https://vitejs.dev/guide/build.html#public-base-path)
-           * is globally available as `import.meta.env.BASE_URL`.
-           * @requiredx
-           * @type {string}
-           */ baseUrl?: string;
-        /**
-           * [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page.
-           * @required
-           * @type {URL}
-           */ pageUrl?: URL | null;
-        /**
-           * SEO title
-           * @required
-           * @type {string}
-           */ seoTitle: string;
-        /**
-           * SEO description
-           * @required
-           * @type {string}
-           */ seoDescription: string;
-        /**
-           * Share title
-           * @required
-           * @type {string}
-           */ shareTitle: string;
-        /**
-           * Share description
-           * @required
-           * @type {string}
-           */ shareDescription: string;
-        /**
-           * Share image path. **Must be an absolute path.**
-           * @required
-           * @type {string}
-           */ shareImgPath: string;
-        /**
-           * Share image alt text, up to 420 characters.
-           * @type {string}
-           */ shareImgAlt?: string;
-        /**
-           * Publish time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
-           * @type {string}
-           */ publishTime?: string;
-        /**
-           * Updated time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
-           * @type {string}
-           */ updateTime?: string;
-        /**
-           * Array of authors for the piece. Each author object must have `name` and `url` attributes.
-           */ authors?: {
-            name: string;
-            url: string;
-        }[];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SeoProps = typeof __propDef.props;
-export type SeoEvents = typeof __propDef.events;
-export type SeoSlots = typeof __propDef.slots;
-/** `SEO` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytic-seo--docs) */
-export default class Seo extends SvelteComponent<SeoProps, SeoEvents, SeoSlots> {
+interface GraphicAuthor {
+    name: string;
+    link: string;
+}
+interface Props {
+    /**
+     * Base url for the page, which in [Vite-based projects](https://vitejs.dev/guide/build.html#public-base-path) is globally available as `import.meta.env.BASE_URL`.
+     */
+    baseUrl: string;
+    /**
+     * [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page.
+     */
+    pageUrl: URL;
+    /**
+     * SEO title
+     */
+    seoTitle: string;
+    /**
+     * SEO description
+     */
+    seoDescription: string;
+    /**
+     * Share title
+     */
+    shareTitle: string;
+    /**
+     * Share description
+     */
+    shareDescription: string;
+    /**
+     * Share image path. **Must be an absolute path.**
+     */
+    shareImgPath: string;
+    /**
+     * Share image alt text, up to 420 characters.
+     */
+    shareImgAlt?: string;
+    /**
+     * Publish time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
+     */
+    publishTime?: string;
+    /**
+     * Updated time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
+     */
+    updateTime?: string;
+    /**
+     * Array of authors for the piece. Each author object must have `name` and `link` attributes.
+     */
+    authors?: GraphicAuthor[];
 }
-export {};
+/** `SEO` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytic-seo--docs) */
+declare const Seo: import("svelte").Component<Props, {}, "">;
+type Seo = ReturnType<typeof Seo>;
+export default Seo;

package/dist/components/Scroller/Background.svelte

@@ -1,7 +1,14 @@
-<script>export let index;
-export let steps = [];
-export let preload = 1;
-export let stackBackground = true;
+<script lang="ts">
+  import type { ScrollerStep } from '../@types/global';
+
+  interface Props {
+    index: number;
+    steps: ScrollerStep[];
+    preload?: number;
+    stackBackground?: boolean;
+  }
+
+  let { index, steps, preload = 1, stackBackground = true }: Props = $props();
 </script>
 
 {#each steps as step, i}
@@ -10,13 +17,10 @@ export let stackBackground = true;
   {#if preload === 0 || (i >= (stackBackground ? 0 : index - preload) && i <= index + preload)}
     <div
       class="step-background step-{i + 1} w-full absolute"
-      class:visible="{stackBackground ? i <= index : i === index}"
-      class:invisible="{stackBackground ? i > index : i !== index}"
+      class:visible={stackBackground ? i <= index : i === index}
+      class:invisible={stackBackground ? i > index : i !== index}
     >
-      <svelte:component
-        this="{step.background}"
-        {...step.backgroundProps || {}}
-      />
+      <step.background {...step.backgroundProps || {}}></step.background>
     </div>
   {/if}
 {/each}

package/dist/components/Scroller/Background.svelte.d.ts

@@ -1,22 +1,10 @@
-import { SvelteComponent } from "svelte";
 import type { ScrollerStep } from '../@types/global';
-declare const __propDef: {
-    props: {
-        index: number;
-        steps?: ScrollerStep[];
-        preload?: number;
-        stackBackground?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type BackgroundProps = typeof __propDef.props;
-export type BackgroundEvents = typeof __propDef.events;
-export type BackgroundSlots = typeof __propDef.slots;
-export default class Background extends SvelteComponent<BackgroundProps, BackgroundEvents, BackgroundSlots> {
+interface Props {
+    index: number;
+    steps: ScrollerStep[];
+    preload?: number;
+    stackBackground?: boolean;
 }
-export {};
+declare const Background: import("svelte").Component<Props, {}, "">;
+type Background = ReturnType<typeof Background>;
+export default Background;