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] 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' },
-  ]}"
-/>
-```