@reuters-graphics/graphics-components 0.0.37 → 0.1.1

package/dist/@types/components/Analytics/Analytics.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+/** Register virtual pageviews when using client-side routing in multipage applications. */
+export declare function registerPageview(): void;
+declare const __propDef: {
+    props: {
+        /**
+           * Used to associate a page with its author(s) in Chartbeat.
+           */ authors?: {
+            name: string;
+        }[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type AnalyticsProps = typeof __propDef.props;
+export declare type AnalyticsEvents = typeof __propDef.events;
+export declare type AnalyticsSlots = typeof __propDef.slots;
+/** `Analytics` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Analytics--default) */
+export default class Analytics extends SvelteComponentTyped<AnalyticsProps, AnalyticsEvents, AnalyticsSlots> {
+}
+export {};

package/dist/@types/components/Analytics/providers/chartbeat.d.ts

@@ -0,0 +1,5 @@
+declare const _default: (authors: {
+    name: string;
+}[]) => void;
+export default _default;
+export declare const registerPageview: () => void;

package/dist/@types/components/Analytics/providers/ga.d.ts

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

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

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

package/dist/@types/components/Framer/Typeahead/index.svelte.d.ts

@@ -3,21 +3,21 @@
 /** @typedef {typeof __propDef.slots}  IndexSlots */
 export default class Index extends SvelteComponentTyped<{
     [x: string]: any;
-    value?: string;
-    extract?: (item: {
-        index: number;
-        embed: string;
-    }) => any;
-    id?: string;
     data?: {
         index: number;
         embed: string;
     }[];
-    disable?: (item: {
+    filter?: (item: {
         index: number;
         embed: string;
     }) => boolean;
-    filter?: (item: {
+    value?: string;
+    extract?: (item: {
+        index: number;
+        embed: string;
+    }) => any;
+    id?: string;
+    disable?: (item: {
         index: number;
         embed: string;
     }) => boolean;
@@ -71,21 +71,21 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        value?: string;
-        extract?: (item: {
-            index: number;
-            embed: string;
-        }) => any;
-        id?: string;
         data?: {
             index: number;
             embed: string;
         }[];
-        disable?: (item: {
+        filter?: (item: {
             index: number;
             embed: string;
         }) => boolean;
-        filter?: (item: {
+        value?: string;
+        extract?: (item: {
+            index: number;
+            embed: string;
+        }) => any;
+        id?: string;
+        disable?: (item: {
             index: number;
             embed: string;
         }) => boolean;

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

@@ -4,7 +4,7 @@ declare const __propDef: {
         /**
            * 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
+           * @requiredx
            * @type {string}
            */ baseUrl?: string;
         /**
@@ -55,9 +55,6 @@ declare const __propDef: {
             name: string;
             url: string;
         }[];
-        /**
-           * Whether to inject Google Analytics code for this page.
-           */ includeAnalytics?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/@types/components/Video/Video.svelte.d.ts

@@ -15,7 +15,7 @@ declare const __propDef: {
         /**
            * Preload options. `auto` is ignored if `autoplay` is true. Can also be `none` or `metadata`.
            * @type {string}
-           */ preloadVideo?: "auto" | "metadata" | "none";
+           */ preloadVideo?: "metadata" | "auto" | "none";
         /**
            * Whether the video should loop.
            */ loopVideo?: boolean;

package/dist/@types/index.d.ts

@@ -33,4 +33,5 @@ export { default as Video } from "./components/Video/Video.svelte";
 export { default as Visible } from "./components/Visible/Visible.svelte";
 export { getPhotoPackPropsFromDoc } from "./components/PhotoPack/docProps.js";
 export { getScrollerPropsFromDoc } from "./components/Scroller/docProps.js";
+export { default as Analytics, registerPageview } from "./components/Analytics/Analytics.svelte";
 export { default as Theme, themes } from "./components/Theme/Theme.svelte";

package/dist/components/Analytics/Analytics.svelte

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

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

@@ -0,0 +1,41 @@
+// Reuters Chartbeat UID
+const UID = 52639;
+const URL = '//static.chartbeat.com/js/chartbeat.js';
+const attachScript = () => {
+    // If script is already attached, skip
+    if (document.querySelector(`script[src="${URL}"]`))
+        return;
+    // ... else attach it.
+    const e = document.createElement('script');
+    const n = document.getElementsByTagName('script')[0];
+    e.type = 'text/javascript';
+    e.async = true;
+    e.src = URL;
+    n.parentNode.insertBefore(e, n);
+};
+export default (authors) => {
+    window._sf_async_config = {
+        uid: UID,
+        domain: 'reuters.com',
+        flickerControl: false,
+        useCanonical: true,
+        useCanonicalDomain: true,
+        sections: 'Graphics',
+        authors: authors.map((a) => (a === null || a === void 0 ? void 0 : a.name) || '').join(','),
+        ...(window._sf_async_config || {}),
+    };
+    try {
+        attachScript();
+    }
+    catch (e) {
+        console.warn(`Error initialising Chartbeat Analytics: ${e}`);
+    }
+};
+export const registerPageview = () => {
+    if (typeof window === 'undefined' || !window.pSUPERFLY)
+        return;
+    window.pSUPERFLY({
+        path: window.location.pathname,
+        title: document === null || document === void 0 ? void 0 : document.title,
+    });
+};

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

@@ -0,0 +1,44 @@
+// Reuters Google Tag ID
+const GOOGLE_TAG_ID = 'G-W3Q2X6NTNM';
+const URL = `https://www.googletagmanager.com/gtag/js?id=${GOOGLE_TAG_ID}`;
+const attachScript = () => {
+    // If script is already attached, skip
+    if (document.querySelector(`script[src="${URL}"]`))
+        return;
+    // ... else attach it.
+    const e = document.createElement('script');
+    const n = document.getElementsByTagName('script')[0];
+    e.type = 'text/javascript';
+    e.async = true;
+    e.src = URL;
+    n.parentNode.insertBefore(e, n);
+};
+export default () => {
+    try {
+        window.dataLayer = window.dataLayer || [];
+        if (!window.gtag) {
+            attachScript();
+            /** @type {Gtag.Gtag} */
+            window.gtag = function () {
+                window.dataLayer.push(arguments);
+            };
+            window.gtag('js', new Date());
+            // config event registers a pageview by default
+            window.gtag('config', GOOGLE_TAG_ID, {
+                send_page_view: false,
+            });
+            registerPageview();
+        }
+    }
+    catch (e) {
+        console.warn(`Error initialising Google Analytics: ${e}`);
+    }
+};
+export const registerPageview = () => {
+    if (typeof window === 'undefined' || !window.gtag)
+        return;
+    window.gtag('event', 'page_view', {
+        page_location: window.location.origin + window.location.pathname,
+        page_title: document === null || document === void 0 ? void 0 : document.title,
+    });
+};

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

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

package/dist/components/SEO/SEO.svelte

@@ -1,9 +1,8 @@
 <!-- @component `SEO` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SEO--default) -->
-<script>import { loadChartbeat, loadGA, loadPublisherTags, } from './analytics/index.js';
-/**
+<script>/**
  * 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
+ * @requiredx
  * @type {string}
  */
 export let baseUrl = '';
@@ -62,10 +61,6 @@ export let updateTime = '';
  * Array of authors for the piece. Each author object must have `name` and `url` attributes.
  */
 export let authors = [];
-/**
- * Whether to inject Google Analytics code for this page.
- */
-export let includeAnalytics = false;
 const getOrigin = (baseUrl) => {
     try {
         return new URL(baseUrl).origin;
@@ -80,14 +75,6 @@ const getOrigin = (baseUrl) => {
 };
 $: origin = getOrigin(baseUrl);
 $: canonicalUrl = origin + pageUrl.pathname;
-// Only fire analytics on prod sites
-$: {
-    if (typeof window !== 'undefined' && includeAnalytics) {
-        loadChartbeat(authors);
-        loadGA(canonicalUrl, seoTitle);
-        loadPublisherTags();
-    }
-}
 const orgLdJson = {
     '@context': 'http://schema.org',
     '@type': 'NewsMediaOrganization',

package/dist/components/Table/Table.svelte

@@ -346,7 +346,7 @@ section.table table thead tr th {
   text-transform: uppercase;
   letter-spacing: 0.06rem;
   line-height: 1.4;
-  padding: 0.5rem 0.25rem 0.5rem 0;
+  padding: 0.5rem 0.75rem 0.5rem 0;
 }
 section.table table thead tr th.sortable {
   cursor: pointer;

package/dist/globals.d.ts

@@ -0,0 +1,23 @@
+interface ChartbeatConfig {
+  uid?: number;
+  domain?: string;
+  flickerControl?: boolean;
+  useCanonical?: boolean;
+  useCanonicalDomain?: boolean;
+  sections?: string;
+  authors?: string;
+}
+
+declare global {
+  // eslint-disable-next-line no-unused-vars
+  interface Window {
+    /** Google analytics dataLayer */
+    dataLayer: Record<string, any>,
+    /** Chartbeat config */
+    _sf_async_config: ChartbeatConfig,
+    /** Chartbeat method */
+    pSUPERFLY: (config: { path: string, title: string }) => void,
+  }
+}
+
+export {};

package/dist/index.js

@@ -1,4 +1,5 @@
 // Components
+export { default as Analytics, registerPageview } from './components/Analytics/Analytics.svelte';
 export { default as Article } from './components/Article/Article.svelte';
 export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.svelte';
 export { default as Block } from './components/Block/Block.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "0.0.37",
+  "version": "0.1.1",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -41,6 +41,7 @@
     "@storybook/theming": "6.5.9",
     "@sveltejs/vite-plugin-svelte": "^1.0.1",
     "@tsconfig/svelte": "^3.0.0",
+    "@types/gtag.js": "^0.0.12",
     "@types/proper-url-join": "^2.1.1",
     "@types/react-syntax-highlighter": "^15.5.4",
     "@typescript-eslint/eslint-plugin": "^5.33.1",
@@ -100,6 +101,10 @@
     "./actions/cssVariables": "./dist/actions/cssVariables/index.js",
     "./actions/resizeObserver": "./dist/actions/resizeObserver/index.js",
     "./components/@types/global.ts": "./dist/components/@types/global.ts",
+    "./components/Analytics/Analytics.svelte": "./dist/components/Analytics/Analytics.svelte",
+    "./components/Analytics/providers/chartbeat.ts": "./dist/components/Analytics/providers/chartbeat.ts",
+    "./components/Analytics/providers/ga.ts": "./dist/components/Analytics/providers/ga.ts",
+    "./components/Analytics/providers/index.ts": "./dist/components/Analytics/providers/index.ts",
     "./components/Article/Article.svelte": "./dist/components/Article/Article.svelte",
     "./components/BeforeAfter/BeforeAfter.svelte": "./dist/components/BeforeAfter/BeforeAfter.svelte",
     "./components/Block/Block.svelte": "./dist/components/Block/Block.svelte",
@@ -131,10 +136,6 @@
     "./components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte": "./dist/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte",
     "./components/ReutersLogo/ReutersLogo.svelte": "./dist/components/ReutersLogo/ReutersLogo.svelte",
     "./components/SEO/SEO.svelte": "./dist/components/SEO/SEO.svelte",
-    "./components/SEO/analytics/chartbeat": "./dist/components/SEO/analytics/chartbeat.js",
-    "./components/SEO/analytics/ga": "./dist/components/SEO/analytics/ga.js",
-    "./components/SEO/analytics": "./dist/components/SEO/analytics/index.js",
-    "./components/SEO/analytics/publisherTags": "./dist/components/SEO/analytics/publisherTags.js",
     "./components/Scroller/Background.svelte": "./dist/components/Scroller/Background.svelte",
     "./components/Scroller/Embedded/Background.svelte": "./dist/components/Scroller/Embedded/Background.svelte",
     "./components/Scroller/Embedded/Foreground.svelte": "./dist/components/Scroller/Embedded/Foreground.svelte",
@@ -206,6 +207,7 @@
     "./components/Video/Controls.svelte": "./dist/components/Video/Controls.svelte",
     "./components/Video/Video.svelte": "./dist/components/Video/Video.svelte",
     "./components/Visible/Visible.svelte": "./dist/components/Visible/Visible.svelte",
+    "./globals.d.ts": "./dist/globals.d.ts",
     "./scss/mixins": "./dist/scss/_mixins.scss",
     "./scss/variables": "./dist/scss/_variables.scss",
     "./scss/bootstrap/main": "./dist/scss/bootstrap/_main.scss",

package/dist/@types/components/SEO/analytics/chartbeat.d.ts

@@ -1,2 +0,0 @@
-declare function _default(authors: any): void;
-export default _default;

package/dist/@types/components/SEO/analytics/ga.d.ts

@@ -1,2 +0,0 @@
-declare function _default(page: any, title: any): void;
-export default _default;

package/dist/@types/components/SEO/analytics/index.d.ts

@@ -1,3 +0,0 @@
-export { default as loadGA } from "./ga.js";
-export { default as loadChartbeat } from "./chartbeat.js";
-export { default as loadPublisherTags } from "./publisherTags.js";

package/dist/@types/components/SEO/analytics/publisherTags.d.ts

@@ -1,2 +0,0 @@
-declare function _default(): void;
-export default _default;

package/dist/components/SEO/analytics/chartbeat.js

@@ -1,33 +0,0 @@
-/* eslint-disable */
-const attachScript = () => {
-  // If script is already attached, skip
-  if (
-    document.querySelector(
-      'script[src="//static.chartbeat.com/js/chartbeat.js"]'
-    )
-  )
-    return;
-  // ... else attach it.
-  const e = document.createElement('script');
-  const n = document.getElementsByTagName('script')[0];
-  e.type = 'text/javascript';
-  e.async = true;
-  e.src = '//static.chartbeat.com/js/chartbeat.js';
-  n.parentNode.insertBefore(e, n);
-};
-
-export default (authors) => {
-  // @ts-ignore
-  const _sf_async_config = (window._sf_async_config =
-    window._sf_async_config || {});
-  _sf_async_config.uid = 52639;
-  _sf_async_config.domain = 'reuters.com';
-  _sf_async_config.flickerControl = false;
-  _sf_async_config.useCanonical = true;
-  _sf_async_config.useCanonicalDomain = true;
-  _sf_async_config.sections = 'Graphics';
-  _sf_async_config.authors = authors.map((a) => a.name).join(',');
-  try {
-    attachScript();
-  } catch (e) {}
-};

package/dist/components/SEO/analytics/ga.js

@@ -1,40 +0,0 @@
-/* eslint-disable */
-const attachScript = function (i, s, o, g, r, a, m) {
-  i.GoogleAnalyticsObject = r;
-  (i[r] =
-    i[r] ||
-    function () {
-      (i[r].q = i[r].q || []).push(arguments);
-    }),
-    (i[r].l = Date.now());
-  (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
-  a.async = 1;
-  a.src = g;
-  m.parentNode.insertBefore(a, m);
-};
-/* eslint-enable */
-
-export default (page, title) => {
-  try {
-    // @ts-ignore
-    if (!window.ga) {
-      attachScript(
-        window,
-        document,
-        'script',
-        'https://www.google-analytics.com/analytics.js',
-        'ga'
-      );
-
-      // @ts-ignore
-      window.ga('create', 'UA-41619329-3', { cookieDomain: 'auto' });
-      // @ts-ignore
-      window.ga('require', 'linkid', 'linkid.js');
-    }
-    // @ts-ignore
-    window.ga('send', 'pageview', {
-      page,
-      title,
-    });
-  } catch (e) {}
-};

package/dist/components/SEO/analytics/index.js

@@ -1,3 +0,0 @@
-export { default as loadGA } from './ga.js';
-export { default as loadChartbeat } from './chartbeat.js';
-export { default as loadPublisherTags } from './publisherTags.js';

package/dist/components/SEO/analytics/publisherTags.js

@@ -1,34 +0,0 @@
-export default () => {
-  try {
-    const { protocol } = document.location;
-    const gptScript = document.querySelector(
-      `script[src="${protocol}//www.googletagservices.com/tag/js/gpt.js"]`
-    );
-    // Only do this once.
-    if (gptScript) return;
-    const googletag = window.googletag || {};
-    googletag.cmd = googletag.cmd || [];
-    (function () {
-      const gads = document.createElement('script');
-      gads.async = true;
-      gads.type = 'text/javascript';
-      const useSSL = document.location.protocol === 'https:';
-      gads.src =
-        (useSSL ? 'https:' : 'http:') +
-        '//www.googletagservices.com/tag/js/gpt.js';
-      const node = document.getElementsByTagName('script')[0];
-      node.parentNode.insertBefore(gads, node);
-    })();
-    googletag.cmd.push(function () {
-      googletag
-        .defineSlot(
-          '/4735792/reuters_investigates',
-          [[300, 250]],
-          'div-gpt-ad-1441822201033-0'
-        )
-        .addService(googletag.pubads());
-      googletag.pubads().enableSingleRequest();
-      googletag.enableServices();
-    });
-  } catch (e) {}
-};