@reuters-graphics/graphics-components 1.1.4 → 1.1.6

package/dist/components/Analytics/Analytics.svelte

@@ -1,20 +1,23 @@
 <script context="module">
   import { registerPageview as registerChartbeatPageview } from './providers/chartbeat';
   import { registerPageview as registerGAPageview } from './providers/ga';
+  import { registerPageview as registerParselyPageview } from './providers/parsely';
 
   /** Register virtual pageviews when using client-side routing in multipage applications. */
   export function registerPageview() {
     registerChartbeatPageview();
     registerGAPageview();
+    registerParselyPageview();
   }
 </script>
 
 <!-- @component `Analytics` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Analytics--default) -->
 <script>export let authors = [];
 import { onMount } from "svelte";
-import { ga, chartbeat } from "./providers";
+import { ga, chartbeat, parsely } from "./providers";
 onMount(() => {
   ga();
   chartbeat(authors);
+  parsely();
 });
 </script>

package/dist/components/Analytics/providers/index.d.ts

@@ -1,2 +1,3 @@
 export { default as ga } from './ga';
 export { default as chartbeat } from './chartbeat';
+export { default as parsely } from './parsely';

package/dist/components/Analytics/providers/index.js

@@ -1,2 +1,3 @@
 export { default as ga } from './ga';
 export { default as chartbeat } from './chartbeat';
+export { default as parsely } from './parsely';

package/dist/components/Analytics/providers/parsely.d.ts

@@ -0,0 +1,3 @@
+declare const _default: () => void;
+export default _default;
+export declare const registerPageview: () => void;

package/dist/components/Analytics/providers/parsely.js

@@ -0,0 +1,29 @@
+const SITE_ID = 'reuters.com';
+const attachScript = () => {
+    const b = document.body;
+    const e = document.createElement('script');
+    e.id = 'parsely-cfg';
+    e.src = `//cdn.parsely.com/keys/${SITE_ID}/p.js`;
+    e.setAttribute('async', '');
+    e.setAttribute('defer', '');
+    b.appendChild(e);
+};
+export default () => {
+    window.PARSELY = window.PARSELY || {
+        autotrack: false,
+        onReady() {
+            window.PARSELY.updateDefaults({
+                data: {
+                    is_logged_in: false,
+                },
+            });
+            window.PARSELY.beacon.trackPageView();
+        },
+    };
+    attachScript();
+};
+export const registerPageview = () => {
+    if (typeof window === 'undefined' || !window.PARSELY)
+        return;
+    window.PARSELY.beacon.trackPageView();
+};

package/dist/components/Article/Article.svelte

@@ -19,7 +19,7 @@ $: columnWidthVars = {
 };
 </script>
 
-<main>
+<main id="main-content">
   <article {id} class:embedded {role} use:cssVariables="{columnWidthVars}">
     <!-- Article content -->
     <slot />

package/dist/components/SEO/SEO.svelte

@@ -19,7 +19,7 @@ const getOrigin = (baseUrl2) => {
   }
 };
 $: origin = getOrigin(baseUrl);
-$: canonicalUrl = (origin + pageUrl.pathname).replace(/index\.html\/$/, "");
+$: canonicalUrl = (origin + pageUrl?.pathname).replace(/index\.html\/$/, "");
 const orgLdJson = {
   "@context": "http://schema.org",
   "@type": "NewsMediaOrganization",
@@ -62,9 +62,9 @@ $: articleLdJson = {
     name,
     url
   })),
+  creator: authors.map(({ name }) => name),
   articleSection: "Graphics",
   isAccessibleForFree: true,
-  creator: ["Reuters Graphics"],
   keywords: ["Reuters graphics", "Reuters", "graphics", "Interactives"]
 };
 </script>

package/dist/components/SiteHeader/SiteHeader.svelte

@@ -40,13 +40,14 @@ onMount(async () => {
     --theme-font-family-sans-serif: Knowledge, sans-serif;
   `}"
 >
+  <a href="#main-content" class="skip-link"> Skip to main content </a>
   <div class="nav-container show-nav">
     <div class="scroll-container">
       <div class="inner">
         <div class="main-bar">
           <div class="logo-container">
             <div class="logo">
-              <a href="https://www.reuters.com">
+              <a href="https://www.reuters.com" aria-label="Reuters home">
                 <ReutersLogo
                   logoColour="var(--nav-accent)"
                   textColour="var(--nav-primary)"
@@ -236,4 +237,17 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
 }
 .mobile-menu .menu-button:focus-visible .button-container {
   border: 2px solid var(--nav-accent);
+}
+.skip-link {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+.skip-link:focus {
+  position: static;
+  width: auto;
+  height: auto;
 }</style>

package/dist/globals.d.ts

@@ -21,6 +21,14 @@ declare global {
     };
     /** Graphics ads */
     graphicsAdQueue: any[];
+    /** Parsely */
+    PARSELY: {
+      onLoad: () => void;
+      beacon: {
+        trackPageView: () => void;
+      };
+      updateDefaults: (params: any) => void;
+    };
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",