@reuters-graphics/graphics-components 0.0.21 → 0.0.23

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

@@ -0,0 +1,38 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+           * Section ID, which is often the URL path to the section page on reuters.com.
+           *
+           * Note that not all section pages will be available in the recent stories by section API.
+           * @required
+           */ section?: string;
+        /**
+           * Number of referrals to show.
+           * @required
+           */ number?: number;
+        /**
+           * Link [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target), e.g., `_blank` or `_parent`.
+           */ linkTarget?: string;
+        /**
+           * Add a heading to the referral block.
+           */ heading?: string;
+        /**
+           * Width of the component within the text well.
+           * @required
+           */ width?: "normal" | "wide" | "wider" | "widest" | "fluid";
+        /** Add an ID to target with SCSS. */ id?: string;
+        /** Add a class to target with SCSS. */ cls?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ReferralBlockProps = typeof __propDef.props;
+export declare type ReferralBlockEvents = typeof __propDef.events;
+export declare type ReferralBlockSlots = typeof __propDef.slots;
+/** `ReferralBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ReferralBlock--default) */
+export default class ReferralBlock extends SvelteComponentTyped<ReferralBlockProps, ReferralBlockEvents, ReferralBlockSlots> {
+}
+export {};

package/dist/@types/components/ReferralBlock/stores.d.ts

@@ -0,0 +1 @@
+export const referrals: import("svelte/store").Writable<any[]>;

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

@@ -14,6 +14,7 @@ export { default as PaddingReset } from "./components/PaddingReset/PaddingReset.
 export { default as PhotoPack } from "./components/PhotoPack/PhotoPack.svelte";
 export { default as PymChild } from "./components/PymChild/PymChild.svelte";
 export { pymChildStore } from "./components/PymChild/stores.js";
+export { default as ReferralBlock } from "./components/ReferralBlock/ReferralBlock.svelte";
 export { default as ReutersLogo } from "./components/ReutersLogo/ReutersLogo.svelte";
 export { default as Scroller } from "./components/Scroller/Scroller.svelte";
 export { default as SEO } from "./components/SEO/SEO.svelte";

package/dist/components/ReferralBlock/ReferralBlock.svelte

@@ -0,0 +1,212 @@
+<!-- @component `ReferralBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ReferralBlock--default) -->
+<script>/** ✏️ DOCUMENT your chart's props using TypeScript and JSDoc comments like below! */
+/**
+ * Section ID, which is often the URL path to the section page on reuters.com.
+ *
+ * Note that not all section pages will be available in the recent stories by section API.
+ * @required
+ */
+export let section = '/world/';
+/**
+ * Number of referrals to show.
+ * @required
+ */
+export let number = 4;
+/**
+ * Link [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target), e.g., `_blank` or `_parent`.
+ */
+export let linkTarget = '_self';
+/**
+ * Add a heading to the referral block.
+ */
+export let heading = '';
+/**
+ * Width of the component within the text well.
+ * @required
+ */
+export let width = 'wide';
+/** Add an ID to target with SCSS. */
+export let id = '';
+/** Add a class to target with SCSS. */
+export let cls = '';
+import Block from '../Block/Block.svelte';
+import { referrals } from './stores.js';
+import { onMount } from 'svelte';
+import { getTime } from '../SiteHeader/NavBar/NavDropdown/StoryCard/time';
+let clientWidth;
+onMount(async () => {
+    try {
+        const response = await fetch('https://www.reuters.com/pf/api/v3/content/fetch/recent-stories-by-sections-v1?' +
+            new URLSearchParams({
+                query: JSON.stringify({
+                    section_ids: section,
+                    size: 20,
+                    website: 'reuters',
+                }),
+            }));
+        const articles = (await response.json()).result.articles
+            .filter((a) => { var _a; return (_a = a === null || a === void 0 ? void 0 : a.kicker) === null || _a === void 0 ? void 0 : _a.name; })
+            .filter((a) => { var _a, _b, _c; return (_c = (_b = (_a = a === null || a === void 0 ? void 0 : a.thumbnail) === null || _a === void 0 ? void 0 : _a.renditions) === null || _b === void 0 ? void 0 : _b.landscape) === null || _c === void 0 ? void 0 : _c['240w']; })
+            .filter((a) => { var _a; return !((_a = a === null || a === void 0 ? void 0 : a.content) === null || _a === void 0 ? void 0 : _a.third_party); })
+            .slice(0, number);
+        referrals.set(articles);
+    }
+    catch (e) {
+        console.warn('Unable to fetch referral links.');
+    }
+});
+getTime();
+</script>
+
+{#if $referrals.length === number}
+  <Block width="{width}" id="{id}" cls="referrals-block {cls}">
+    {#if heading}
+      <h4 class:stacked="{clientWidth && clientWidth < 750}">{heading}</h4>
+    {/if}
+    <div
+      class="referral-container"
+      class:stacked="{clientWidth && clientWidth < 750}"
+      class:xs="{clientWidth && clientWidth < 450}"
+      bind:clientWidth
+    >
+      {#each $referrals as referral}
+        <div class="referral">
+          <a
+            href="https://www.reuters.com{referral.canonical_url}"
+            target="{linkTarget}"
+            rel="{linkTarget === '_blank' ? 'noreferrer' : null}"
+          >
+            <div class="referral-pack">
+              <div
+                class="headline"
+                class:xs="{clientWidth && clientWidth < 450}"
+              >
+                <div class="kicker">{referral.kicker.name}</div>
+                <div class="title">{referral.title}</div>
+                <div class="publish-time">
+                  {getTime(new Date(referral.display_time))}
+                </div>
+              </div>
+              <div
+                class="image-container"
+                class:xs="{clientWidth && clientWidth < 450}"
+              >
+                <img
+                  src="{referral.thumbnail.renditions.landscape['240w']}"
+                  alt="{referral.thumbnail.caption ||
+                    referral.thumbnail.alt_text}"
+                />
+              </div>
+            </div>
+          </a>
+        </div>
+      {/each}
+    </div>
+  </Block>
+{/if}
+
+<style>h4 {
+  font-family: var(--theme-font-family-subhed);
+  color: var(--theme-colour-text-primary, #404040);
+  font-size: 1.1rem;
+  margin: 0 0 5px;
+  font-weight: bold;
+}
+h4.stacked {
+  max-width: 450px;
+  margin: 0 auto 5px;
+}
+
+.referral-container {
+  width: 100%;
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px 40px;
+}
+.referral-container a {
+  text-decoration: none;
+}
+.referral-container.stacked .referral {
+  width: 100%;
+}
+.referral-container.stacked .referral .headline {
+  padding: 0 10px 0 0;
+}
+.referral-container .referral {
+  display: block;
+  width: calc(50% - 20px);
+  max-width: 450px;
+}
+.referral-container .referral:hover .title {
+  text-decoration: underline;
+}
+.referral-container .referral:hover img {
+  filter: brightness(85%);
+}
+.referral-container .referral div.referral-pack {
+  display: flex;
+  justify-content: space-around;
+  max-width: 450px;
+  margin: 0 auto;
+}
+.referral-container .referral .headline {
+  display: inline-block;
+  width: calc(100% - 140px);
+  padding: 0 10px 0 0;
+}
+.referral-container .referral .headline.xs {
+  width: calc(100% - 80px);
+}
+.referral-container .referral .headline.xs .kicker {
+  font-size: 0.85rem;
+}
+.referral-container .referral .headline.xs .title {
+  font-size: 0.9rem;
+  line-height: 1.1rem;
+}
+.referral-container .referral .headline .kicker {
+  font-family: var(--theme-font-family-subhed);
+  color: var(--theme-colour-text-secondary, #666666);
+  font-size: 0.9rem;
+  margin: 0;
+  font-weight: 400;
+}
+.referral-container .referral .headline .title {
+  font-family: var(--theme-font-family-subhed);
+  color: var(--theme-colour-text-primary, #404040);
+  font-size: 0.95rem;
+  line-height: 1.15rem;
+  font-weight: bold;
+  margin: 0;
+}
+.referral-container .referral .headline .publish-time {
+  font-family: var(--theme-font-family-subhed);
+  color: var(--theme-colour-text-secondary, #666666);
+  font-size: 0.75rem;
+  margin: 2px 0 0;
+  font-weight: 400;
+}
+.referral-container .referral .image-container {
+  margin: 0;
+  overflow: hidden;
+  border-radius: 10px;
+  border: 1px solid var(--theme-colour-brand-rules, #d0d0d0);
+  display: block;
+  position: relative;
+  width: 140px;
+  height: 90px;
+}
+.referral-container .referral .image-container.xs {
+  width: 80px;
+  height: 60px;
+}
+.referral-container .referral .image-container img {
+  transition: filter 0.1s;
+  display: block;
+  width: 100%;
+  height: inherit;
+  -o-object-fit: cover;
+     object-fit: cover;
+  margin: 0;
+}</style>

package/dist/components/ReferralBlock/stores.js

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const referrals = writable([]);

package/dist/components/SEO/analytics.js

@@ -16,30 +16,32 @@ const attachScript = function (i, s, o, g, r, a, m) {
 /* eslint-enable */
 
 export default (page, title) => {
-  if (!window.ga) {
-    attachScript(
-      window,
-      document,
-      'script',
-      'https://www.google-analytics.com/analytics.js',
-      'ga'
-    );
-
-    window.ga('create', 'UA-41619329-3', { cookieDomain: 'auto' });
-    window.ga('require', 'linkid', 'linkid.js');
-  }
-
-  window.ga('send', 'pageview', {
-    page,
-    title,
-  });
+  try {
+    if (!window.ga) {
+      attachScript(
+        window,
+        document,
+        'script',
+        'https://www.google-analytics.com/analytics.js',
+        'ga'
+      );
+
+      window.ga('create', 'UA-41619329-3', { cookieDomain: 'auto' });
+      window.ga('require', 'linkid', 'linkid.js');
+    }
 
-  if (!inIframe()) {
-    // start time on page tracking if not in an iframe
-    riveted.init({
-      reportInterval: 30,
+    window.ga('send', 'pageview', {
+      page,
+      title,
     });
-  }
+
+    if (!inIframe()) {
+      // start time on page tracking if not in an iframe
+      riveted.init({
+        reportInterval: 30,
+      });
+    }
+  } catch (e) {}
 };
 
 // checks if page is in an iframe

package/dist/components/SEO/publisherTags.js

@@ -1,32 +1,34 @@
 export default () => {
-  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();
-  });
+  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) {}
 };

package/dist/components/SiteHeader/MobileMenu/index.svelte

@@ -190,6 +190,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
 .section .section-link,
 .section .subsection-link {
   font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  text-decoration: none;
   line-height: 1.2;
   color: var(--nav-primary);
 }

package/dist/index.js

@@ -15,6 +15,7 @@ export { default as PaddingReset } from './components/PaddingReset/PaddingReset.
 export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';
 export { default as PymChild } from './components/PymChild/PymChild.svelte';
 export { pymChildStore } from './components/PymChild/stores.js';
+export { default as ReferralBlock } from './components/ReferralBlock/ReferralBlock.svelte';
 export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.svelte';
 export { default as Scroller } from './components/Scroller/Scroller.svelte';
 export { default as SEO } from './components/SEO/SEO.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -123,6 +123,8 @@
     "./components/PhotoPack/docProps.ts": "./dist/components/PhotoPack/docProps.ts",
     "./components/PymChild/PymChild.svelte": "./dist/components/PymChild/PymChild.svelte",
     "./components/PymChild/stores": "./dist/components/PymChild/stores.js",
+    "./components/ReferralBlock/ReferralBlock.svelte": "./dist/components/ReferralBlock/ReferralBlock.svelte",
+    "./components/ReferralBlock/stores": "./dist/components/ReferralBlock/stores.js",
     "./components/ReutersLogo/ReutersLogo.svelte": "./dist/components/ReutersLogo/ReutersLogo.svelte",
     "./components/SEO/SEO.svelte": "./dist/components/SEO/SEO.svelte",
     "./components/SEO/analytics": "./dist/components/SEO/analytics.js",