closes #3... again with better handling for vite

src/components/SEO/SEO.stories.svelte

@@ -30,8 +30,8 @@
 <Story
   name="Default"
   args="{{
-    origin: 'https://graphics.reuters.com',
-    url: new URL('https://graphics.reuters.com/hello-world/'),
+    baseUrl: 'https://graphics.reuters.com',
+    pageUrl: new URL('https://graphics.reuters.com/hello-world/'),
     publishTime: new Date('2020-09-15').toISOString(),
   }}"
 />
@@ -39,8 +39,8 @@
 <Story
   name="🚀 QUICKIT"
   args="{{
-    origin: 'https://graphics.reuters.com',
-    url: new URL('https://graphics.reuters.com/hello-world/'),
+    baseUrl: 'https://graphics.reuters.com',
+    pageUrl: new URL('https://graphics.reuters.com/hello-world/'),
     publishTime: new Date('2020-09-15').toISOString(),
   }}"
   {...withStoryDocs(quickitDocs)}

src/components/SEO/SEO.svelte

@@ -3,17 +3,18 @@
   import publisherTags from './publisherTags';
 
   /**
-   * [URL origin](https://developer.mozilla.org/en-US/docs/Web/API/URL/origin) for the page.
+   * 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`.
    * @required
    * @type {string}
    */
-  export let origin: string = '';
+  export let baseUrl: string = '';
   /**
    * [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page.
    * @required
    * @type {URL}
    */
-  export let url: URL | null = null;
+  export let pageUrl: URL | null = null;
 
   /**
    * SEO title
@@ -60,7 +61,7 @@
    * @type {string}
    */
   export let updateTime: string = '';
-  
+
   interface GraphicAuthor {
     name: string;
     url: string;
@@ -75,7 +76,8 @@
    */
   export let includeAnalytics: boolean = false;
 
-  $: canonicalUrl = origin + url.pathname;
+  $: origin = new URL(baseUrl).origin;
+  $: canonicalUrl = origin + pageUrl.pathname;
 
   // Only fire analytics on prod sites
   if (typeof window !== 'undefined' && includeAnalytics) {
@@ -170,11 +172,7 @@
     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" />

src/components/SEO/stories/docs/component.md

@@ -6,8 +6,10 @@ The `SEO` component adds essential metadata to published pages.
 </script>
 
 <SEO
-  origin="https://graphics.reuters.com"
-  url={new URL('https://graphics.reuters.com/world-coronavirus-tracker-and-maps/')}
+  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"
@@ -16,10 +18,10 @@ The `SEO` component adds essential metadata to published pages.
   lang="en"
   publishTime="2020-09-15T00:00:00.000Z"
   updateTime="2021-01-10T12:30:00.000Z"
-  authors={[
+  authors="{[
     { name: 'Jane Doe', url: 'https://twitter.com/JaneDoe' },
     { name: 'John Doe', url: 'https://twitter.com/JohnDoe' },
-  ]}
-  includeAnalytics={true}
+  ]}"
+  includeAnalytics="{true}"
 />
 ```

src/components/SEO/stories/docs/quickit.md

@@ -13,16 +13,16 @@ Most of the fields are filled in by other sources, like your Google Doc and pack
 
 <SEO
   lang="en"
-  origin={import.meta.env.BASE_URL}
-  url={$page.url}
+  baseUrl="{import.meta.env.BASE_URL}"
+  pageUrl="{$page.url}"
   seoTitle="{content.SEOTitle}"
   seoDescription="{content.SEODescription}"
   shareTitle="{content.ShareTitle}"
   shareDescription="{content.ShareDescription}"
   shareImgPath="{`${assets}/${content.ShareImgPath}`}"
-  publishTime={pkg?.reuters?.graphic?.published}
-  updateTime={pkg?.reuters?.graphic?.updated}
-  authors={pkg?.reuters?.graphic?.authors}
-  includeAnalytics={$page.url.hostname === 'graphics.reuters.com'}
+  publishTime="{pkg?.reuters?.graphic?.published}"
+  updateTime="{pkg?.reuters?.graphic?.updated}"
+  authors="{pkg?.reuters?.graphic?.authors}"
+  includeAnalytics="{$page.url.hostname === 'graphics.reuters.com'}"
 />
 ```