From 2e37d39fda984b9f401f54bd9e164e3fb90337a8 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 11 Mar 2025 12:12:23 -0700
Subject: [PATCH 1/8] updates seo

---
 src/components/BodyText/BodyText.mdx         |   2 +-
 src/components/SEO/SEO.mdx                   |  77 ++++++++++++
 src/components/SEO/SEO.stories.svelte        |  48 ++------
 src/components/SEO/SEO.svelte                | 121 +++++++++----------
 src/components/SEO/stories/docs/archieML.md  |  36 ------
 src/components/SEO/stories/docs/component.md |  26 ----
 6 files changed, 143 insertions(+), 167 deletions(-)
 create mode 100644 src/components/SEO/SEO.mdx
 delete mode 100644 src/components/SEO/stories/docs/archieML.md
 delete mode 100644 src/components/SEO/stories/docs/component.md

diff --git a/src/components/BodyText/BodyText.mdx b/src/components/BodyText/BodyText.mdx
index 9cd25312..1395c3a2 100644
--- a/src/components/BodyText/BodyText.mdx
+++ b/src/components/BodyText/BodyText.mdx
@@ -33,7 +33,7 @@ Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatbal
 With the graphics kit, you'll likely get your text value from an ArchieML doc.
 
 ```yaml
-# Archie ML doc
+# ArchieML doc
 [blocks]
 
 type: text
diff --git a/src/components/SEO/SEO.mdx b/src/components/SEO/SEO.mdx
new file mode 100644
index 00000000..44cd57bd
--- /dev/null
+++ b/src/components/SEO/SEO.mdx
@@ -0,0 +1,77 @@
+import { Meta } 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://graphics.reuters.com"
+  pageUrl={new URL(
+    'https://graphics.reuters.com/world-coronavirus-tracker-and-maps/'
+  )}
+  seoTitle="A title for Google"
+  seoDescription="A description for Google"
+  shareTitle="A title for Twitter/Facebook"
+  shareDecription="A description for Twitter/Facebook"
+  shareImgPath="https://graphics.reuters.com/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', url: 'https://twitter.com/JaneDoe' },
+    { name: 'John Doe', url: 'https://twitter.com/JohnDoe' },
+  ]}
+/>
+```
+
+## Using with ArchieML docs
+
+With the Graphics Kit, you'll likely get 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.
diff --git a/src/components/SEO/SEO.stories.svelte b/src/components/SEO/SEO.stories.svelte
index e09205b5..d8fba939 100644
--- a/src/components/SEO/SEO.stories.svelte
+++ b/src/components/SEO/SEO.stories.svelte
@@ -1,49 +1,21 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import archieMLDocs from './stories/docs/archieML.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import SEO from './SEO.svelte';
 
-  import {
-    withComponentDocs,
-    withStoryDocs,
-  } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Ads & analytics/SEO',
     component: SEO,
-    ...withComponentDocs(componentDocs),
-  };
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-</script>
-
-<Template >
-  {#snippet children({ args })}
-    <SEO {...args} />
-    <div>Nothing to see here. 😎</div>
-  {/snippet}
-</Template>
-
 <Story
-  name="Default"
-  args="{{
+  name="Demo"
+  args={{
+    seoTitle: 'blah',
     baseUrl: 'https://graphics.reuters.com',
     pageUrl: new URL('https://graphics.reuters.com/hello-world/'),
     publishTime: new Date('2020-09-15').toISOString(),
-  }}"
-/>
-
-<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)}
-/>
+  }}
+>
+  View page source to see the SEO metadata.
+</Story>
diff --git a/src/components/SEO/SEO.svelte b/src/components/SEO/SEO.svelte
index c18ae2b8..6afeb156 100644
--- a/src/components/SEO/SEO.svelte
+++ b/src/components/SEO/SEO.svelte
@@ -1,85 +1,72 @@
 <!-- @component `SEO` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytic-seo--docs) -->
 <script lang="ts">
-  
-  
-
-  
-  
-  
-  
-  
-  
-  
-  
-
   interface GraphicAuthor {
     name: string;
     url: 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`.
-   * @requiredx
-   * @type {string}
-   */
+     * 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}
-   */
+     * [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}
-   */
+     * SEO title
+     * @required
+     * @type {string}
+     */
     seoTitle: string;
     /**
-   * SEO description
-   * @required
-   * @type {string}
-   */
+     * SEO description
+     * @required
+     * @type {string}
+     */
     seoDescription: string;
     /**
-   * Share title
-   * @required
-   * @type {string}
-   */
+     * Share title
+     * @required
+     * @type {string}
+     */
     shareTitle: string;
     /**
-   * Share description
-   * @required
-   * @type {string}
-   */
+     * Share description
+     * @required
+     * @type {string}
+     */
     shareDescription: string;
     /**
-   * Share image path. **Must be an absolute path.**
-   * @required
-   * @type {string}
-   */
+     * Share image path. **Must be an absolute path.**
+     * @required
+     * @type {string}
+     */
     shareImgPath: string;
     /**
-   * Share image alt text, up to 420 characters.
-   * @type {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}
-   */
+     * 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}
-   */
+     * 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.
-   */
+     * Array of authors for the piece. Each author object must have `name` and `url` attributes.
+     */
     authors?: GraphicAuthor[];
   }
 
@@ -94,7 +81,7 @@
     shareImgAlt = '',
     publishTime = '',
     updateTime = '',
-    authors = []
+    authors = [],
   }: Props = $props();
 
   const getOrigin = (baseUrl: string) => {
@@ -109,7 +96,9 @@
   };
 
   let origin = $derived(getOrigin(baseUrl));
-  let canonicalUrl = $derived((origin + pageUrl?.pathname).replace(/index\.html\/$/, ''));
+  let canonicalUrl = $derived(
+    (origin + pageUrl?.pathname).replace(/index\.html\/$/, '')
+  );
 
   const orgLdJson = {
     '@context': 'http://schema.org',
@@ -164,8 +153,8 @@
 <svelte:head>
   {#key canonicalUrl}
     <title>{seoTitle}</title>
-    <meta name="description" content="{seoDescription}" />
-    <link rel="canonical" href="{canonicalUrl}" />
+    <meta name="description" content={seoDescription} />
+    <link rel="canonical" href={canonicalUrl} />
     <link
       rel="shortcut icon"
       type="image/x-icon"
@@ -190,26 +179,26 @@
       sizes="96x96"
     />
 
-    <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" />
diff --git a/src/components/SEO/stories/docs/archieML.md b/src/components/SEO/stories/docs/archieML.md
deleted file mode 100644
index db2ebca9..00000000
--- a/src/components/SEO/stories/docs/archieML.md
+++ /dev/null
@@ -1,36 +0,0 @@
-```yaml
-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.
-```
-
-```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.
-
diff --git a/src/components/SEO/stories/docs/component.md b/src/components/SEO/stories/docs/component.md
deleted file mode 100644
index 0b5c0aa2..00000000
--- a/src/components/SEO/stories/docs/component.md
+++ /dev/null
@@ -1,26 +0,0 @@
-The `SEO` component adds essential metadata to published pages.
-
-```svelte
-<script>
-  import { SEO } from '@reuters-graphics/graphics-components';
-</script>
-
-<SEO
-  baseUrl="https://graphics.reuters.com"
-  pageUrl="{new URL(
-    'https://graphics.reuters.com/world-coronavirus-tracker-and-maps/'
-  )}"
-  seoTitle="A title for Google"
-  seoDescription="A description for Google"
-  shareTitle="A title for Twitter/Facebook"
-  shareDecription="A description for Twitter/Facebook"
-  shareImgPath="https://graphics.reuters.com/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', url: 'https://twitter.com/JaneDoe' },
-    { name: 'John Doe', url: 'https://twitter.com/JohnDoe' },
-  ]}"
-/>
-```

From b6f585f7c0faf474fe112944e6b58bdf6683a4e4 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 11 Mar 2025 12:34:27 -0700
Subject: [PATCH 2/8] cleaned up docs

---
 src/components/SEO/SEO.mdx            |  7 +++++--
 src/components/SEO/SEO.stories.svelte | 17 +++++++++++------
 src/components/SEO/SEO.svelte         | 27 ++++-----------------------
 3 files changed, 20 insertions(+), 31 deletions(-)

diff --git a/src/components/SEO/SEO.mdx b/src/components/SEO/SEO.mdx
index 44cd57bd..437f26f7 100644
--- a/src/components/SEO/SEO.mdx
+++ b/src/components/SEO/SEO.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta, Canvas } from '@storybook/blocks';
 
 import * as SEOStories from './SEO.stories.svelte';
 
@@ -21,7 +21,7 @@ The `SEO` component adds essential metadata to pages.
   seoTitle="A title for Google"
   seoDescription="A description for Google"
   shareTitle="A title for Twitter/Facebook"
-  shareDecription="A description for Twitter/Facebook"
+  shareDescription="A description for Twitter/Facebook"
   shareImgPath="https://graphics.reuters.com/world-coronavirus-tracker-and-maps/assets/images/share.jpg"
   shareImgAlt="An image showing global COVID infection rates"
   publishTime="2020-09-15T00:00:00.000Z"
@@ -75,3 +75,6 @@ shareImgAlt: Alt text for share image.
 ```
 
 > **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} />
+```
diff --git a/src/components/SEO/SEO.stories.svelte b/src/components/SEO/SEO.stories.svelte
index d8fba939..967bd0dd 100644
--- a/src/components/SEO/SEO.stories.svelte
+++ b/src/components/SEO/SEO.stories.svelte
@@ -8,14 +8,19 @@
   });
 </script>
 
+<div>View page source to see the SEO metadata.</div>
 <Story
   name="Demo"
   args={{
-    seoTitle: 'blah',
     baseUrl: 'https://graphics.reuters.com',
-    pageUrl: new URL('https://graphics.reuters.com/hello-world/'),
-    publishTime: new Date('2020-09-15').toISOString(),
+    // pageUrl:{new URL(
+    //   'https://graphics.reuters.com/world-coronavirus-tracker-and-maps/'
+    // )}
+    seoTitle: 'A title for Google',
+    seoDescription: 'A description for Google',
+    shareTitle: 'A title for Twitter/Facebook',
+    shareDescription: 'A description for Twitter/Facebook',
+    shareImgPath:
+      'https://graphics.reuters.com/world-coronavirus-tracker-and-maps/assets/images/share.jpg',
   }}
->
-  View page source to see the SEO metadata.
-</Story>
+/>
diff --git a/src/components/SEO/SEO.svelte b/src/components/SEO/SEO.svelte
index 6afeb156..a9018264 100644
--- a/src/components/SEO/SEO.svelte
+++ b/src/components/SEO/SEO.svelte
@@ -7,61 +7,43 @@
 
   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`.
-     * @requiredx
-     * @type {string}
+     * 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;
+    baseUrl: string;
     /**
      * [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page.
-     * @required
-     * @type {URL}
      */
-    pageUrl?: URL | null;
+    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;
     /**
@@ -71,7 +53,7 @@
   }
 
   let {
-    baseUrl = '',
+    baseUrl,
     pageUrl = null,
     seoTitle,
     seoDescription,
@@ -83,7 +65,6 @@
     updateTime = '',
     authors = [],
   }: Props = $props();
-
   const getOrigin = (baseUrl: string) => {
     try {
       return new URL(baseUrl).origin;

From d715a7c2a6d796890237832588a0c4ee285b354b Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Wed, 12 Mar 2025 12:29:15 +0000
Subject: [PATCH 3/8] docs

---
 src/components/SEO/SEO.mdx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/SEO/SEO.mdx b/src/components/SEO/SEO.mdx
index 437f26f7..e3943ce8 100644
--- a/src/components/SEO/SEO.mdx
+++ b/src/components/SEO/SEO.mdx
@@ -27,15 +27,15 @@ The `SEO` component adds essential metadata to pages.
   publishTime="2020-09-15T00:00:00.000Z"
   updateTime="2021-01-10T12:30:00.000Z"
   authors={[
-    { name: 'Jane Doe', url: 'https://twitter.com/JaneDoe' },
-    { name: 'John Doe', url: 'https://twitter.com/JohnDoe' },
+    { 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 your text values from an ArchieML doc...
+With the graphics kit, you'll likely get many of your text values from an ArchieML doc...
 
 ```yaml
 # ArchieML doc
@@ -74,7 +74,7 @@ shareImgAlt: Alt text for share image.
 />
 ```
 
-> **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.
+> **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} />
 ```

From 02efac9e5b947dabc9ad4e72c96ced8272dc0749 Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Wed, 12 Mar 2025 12:33:13 +0000
Subject: [PATCH 4/8] changes author url to link to align with publisher

---
 src/components/SEO/SEO.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/SEO/SEO.svelte b/src/components/SEO/SEO.svelte
index a9018264..db63e839 100644
--- a/src/components/SEO/SEO.svelte
+++ b/src/components/SEO/SEO.svelte
@@ -2,7 +2,7 @@
 <script lang="ts">
   interface GraphicAuthor {
     name: string;
-    url: string;
+    link: string;
   }
 
   interface Props {
@@ -47,7 +47,7 @@
      */
     updateTime?: string;
     /**
-     * Array of authors for the piece. Each author object must have `name` and `url` attributes.
+     * Array of authors for the piece. Each author object must have `name` and `link` attributes.
      */
     authors?: GraphicAuthor[];
   }
@@ -119,10 +119,10 @@
     dateCreated: publishTime,
     datePublished: publishTime,
     dateModified: updateTime,
-    author: authors.map(({ name, url }) => ({
+    author: authors.map(({ name, link }) => ({
       '@type': 'Person',
       name,
-      url,
+      url: link,
     })),
     creator: authors.map(({ name }) => name),
     articleSection: 'Graphics',

From 42e012ab1bc2d567d8775b144d59872041b91b25 Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Wed, 12 Mar 2025 12:34:34 +0000
Subject: [PATCH 5/8] one last coersion

---
 src/components/SEO/SEO.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SEO/SEO.svelte b/src/components/SEO/SEO.svelte
index db63e839..7b8a16af 100644
--- a/src/components/SEO/SEO.svelte
+++ b/src/components/SEO/SEO.svelte
@@ -78,7 +78,7 @@
 
   let origin = $derived(getOrigin(baseUrl));
   let canonicalUrl = $derived(
-    (origin + pageUrl?.pathname).replace(/index\.html\/$/, '')
+    (origin + (pageUrl?.pathname || '')).replace(/index\.html\/$/, '')
   );
 
   const orgLdJson = {

From 7431cda546b191103c7444e8859dcc23f4acda0b Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Wed, 12 Mar 2025 12:40:53 +0000
Subject: [PATCH 6/8] docs

---
 src/components/SEO/SEO.mdx            | 6 +++---
 src/components/SEO/SEO.stories.svelte | 7 ++-----
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/SEO/SEO.mdx b/src/components/SEO/SEO.mdx
index e3943ce8..e56e7ca5 100644
--- a/src/components/SEO/SEO.mdx
+++ b/src/components/SEO/SEO.mdx
@@ -14,15 +14,15 @@ The `SEO` component adds essential metadata to pages.
 </script>
 
 <SEO
-  baseUrl="https://graphics.reuters.com"
+  baseUrl="https://www.reuters.com/graphics/world-coronavirus-tracker-and-maps"
   pageUrl={new URL(
-    'https://graphics.reuters.com/world-coronavirus-tracker-and-maps/'
+    '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://graphics.reuters.com/world-coronavirus-tracker-and-maps/assets/images/share.jpg"
+  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"
diff --git a/src/components/SEO/SEO.stories.svelte b/src/components/SEO/SEO.stories.svelte
index 967bd0dd..dc354359 100644
--- a/src/components/SEO/SEO.stories.svelte
+++ b/src/components/SEO/SEO.stories.svelte
@@ -12,15 +12,12 @@
 <Story
   name="Demo"
   args={{
-    baseUrl: 'https://graphics.reuters.com',
-    // pageUrl:{new URL(
-    //   'https://graphics.reuters.com/world-coronavirus-tracker-and-maps/'
-    // )}
+    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://graphics.reuters.com/world-coronavirus-tracker-and-maps/assets/images/share.jpg',
+      'https://www.reuters.com/graphics/world-coronavirus-tracker-and-maps/assets/images/share.jpg',
   }}
 />

From 6c2dc4d31e3b21657f4ca90d96ae7bd1d7c4e806 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Wed, 12 Mar 2025 08:44:46 -0700
Subject: [PATCH 7/8] capitalise Graphics Kit in docs

---
 src/components/SEO/SEO.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/SEO/SEO.mdx b/src/components/SEO/SEO.mdx
index e56e7ca5..1772a3be 100644
--- a/src/components/SEO/SEO.mdx
+++ b/src/components/SEO/SEO.mdx
@@ -35,7 +35,7 @@ The `SEO` component adds essential metadata to pages.
 
 ## Using with ArchieML docs
 
-With the graphics kit, you'll likely get many of your text values from an ArchieML doc...
+With the Graphics Kit, you'll likely get many of your text values from an ArchieML doc...
 
 ```yaml
 # ArchieML doc
@@ -74,7 +74,7 @@ shareImgAlt: Alt text for share image.
 />
 ```
 
-> **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.
+> **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} />
 ```

From b1aa5326e8b5d2a8131654f1a0ab7d71bc732f79 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Wed, 12 Mar 2025 09:20:38 -0700
Subject: [PATCH 8/8] seo prop tweaks

---
 .../ReutersGraphicsLogo/ReutersGraphicsLogo.svelte       | 9 +++++----
 src/components/SEO/SEO.svelte                            | 4 ++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte
index 6fe397dc..cb6e31bc 100644
--- a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte
+++ b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte
@@ -1,8 +1,5 @@
 <!-- @component `ReutersGraphicsLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reutersgraphicslogo--docs) -->
 <script lang="ts">
-  
-  
-  
   interface Props {
     /** "Kinesis" colour */
     logoColour?: string;
@@ -12,7 +9,11 @@
     width?: string;
   }
 
-  let { logoColour = '#D64000', textColour = '#212223', width = '100%' }: Props = $props();
+  let {
+    logoColour = '#D64000',
+    textColour = '#212223',
+    width = '100%',
+  }: Props = $props();
 </script>
 
 <svg
diff --git a/src/components/SEO/SEO.svelte b/src/components/SEO/SEO.svelte
index 7b8a16af..dd407342 100644
--- a/src/components/SEO/SEO.svelte
+++ b/src/components/SEO/SEO.svelte
@@ -13,7 +13,7 @@
     /**
      * [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page.
      */
-    pageUrl: URL | null;
+    pageUrl: URL;
     /**
      * SEO title
      */
@@ -54,7 +54,7 @@
 
   let {
     baseUrl,
-    pageUrl = null,
+    pageUrl,
     seoTitle,
     seoDescription,
     shareTitle,