Merge pull request #202 from reuters-graphics/jon-referrals

ReferralBlock checks for current page

.changeset/empty-garlics-smell.md

@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+ReferralBlock checks if a referral is for the current page and doesn't include it if so.

src/components/ReferralBlock/ReferralBlock.svelte

@@ -49,13 +49,16 @@
 
   import { onMount } from 'svelte';
   import { getTime } from '../SiteHeader/NavBar/NavDropdown/StoryCard/time';
+  import type { Referrals } from './types';
+  import { articleIsNotCurrentPage } from './filterCurrentPage';
+  import type { Article } from './types';
 
   let clientWidth: number;
 
   const SECTION_API = 'recent-stories-by-sections-v1';
   const COLLECTION_API = 'articles-by-collection-alias-or-id-v1';
 
-  let referrals = [];
+  let referrals: Article[] = [];
 
   const getReferrals = async () => {
     const isCollection = Boolean(collection);
@@ -72,11 +75,12 @@
             }),
           })
       );
-      const data = await response.json();
+      const data = (await response.json()) as Referrals;
       const articles = data.result.articles
         .filter((a) => a?.headline_category || a?.kicker?.name)
         .filter((a) => a?.thumbnail?.renditions?.landscape?.['240w'])
         .filter((a) => !a?.content?.third_party)
+        .filter(articleIsNotCurrentPage)
         .slice(0, number);
       referrals = articles;
     } catch {

src/components/ReferralBlock/filterCurrentPage.ts

@@ -0,0 +1,32 @@
+import type { Article } from './types';
+
+const getUrlFromPath = (path: string) => {
+  const base = 'https://www.reuters.com';
+
+  try {
+    return new URL(path);
+  } catch {
+    try {
+      return new URL(path, base);
+    } catch {
+      return null;
+    }
+  }
+};
+
+const isCurrentPage = (urlPath: string) => {
+  if (typeof window === 'undefined' || typeof window.location === 'undefined') {
+    return false;
+  }
+  const url = getUrlFromPath(urlPath);
+  if (!url) return false;
+  return window.location.href === url.href;
+};
+
+export const articleIsNotCurrentPage = (article: Article) => {
+  const { redirect_url: redirectUrl, canonical_url: canonicalUrl } = article;
+
+  if (redirectUrl) return !isCurrentPage(redirectUrl);
+  if (canonicalUrl) return !isCurrentPage(canonicalUrl);
+  return true;
+};

src/components/ReferralBlock/types.ts

@@ -0,0 +1,109 @@
+export interface Referrals {
+  statusCode: number;
+  message: string;
+  result: Result;
+}
+
+interface Result {
+  date_modified: Date;
+  pagination: Pagination;
+  fetch_type: string;
+  title: string;
+  articles: Article[];
+}
+
+export interface Article {
+  id: string;
+  canonical_url: string;
+  basic_headline: string;
+  title: string;
+  lead_art: LeadArt;
+  description: string;
+  web: string;
+  content_code: string;
+  updated_time: Date;
+  published_time: Date;
+  display_time: Date;
+  thumbnail: LeadArt;
+  primary_media_type: string;
+  source: Source;
+  redirect_url: string;
+  distributor: string;
+  authors: Author[];
+  kicker: Kicker;
+  content_elements: unknown[];
+  headline_category?: unknown;
+  content?: {
+    third_party?: unknown;
+  };
+}
+
+interface Author {
+  topic_url: string;
+  thumbnail: Thumbnail;
+  id: string;
+  name: string;
+  first_name: string;
+  last_name: string;
+  company: string;
+  social_links: SocialLink[];
+  byline: string;
+}
+
+interface SocialLink {
+  url: string;
+  site: string;
+}
+
+interface Thumbnail {
+  url: string;
+  resizer_url: string;
+  renditions: Renditions;
+}
+
+interface Renditions {
+  square: Landscape;
+  landscape: Landscape;
+  portrait: Landscape;
+  original: Landscape;
+}
+
+interface Landscape {
+  '60w': string;
+  '120w': string;
+  '240w': string;
+  '480w': string;
+  '960w': string;
+  '1080w': string;
+  '1200w': string;
+  '1920w': string;
+}
+
+interface Kicker {
+  name: string;
+  path: string;
+  names: string[];
+}
+
+interface LeadArt {
+  type: string;
+  url: string;
+  resizer_url: string;
+  renditions: Renditions;
+  id: string;
+  caption?: string;
+  alt_text: string;
+  width: number;
+  height: number;
+  subtitle: string;
+  updated_at: Date;
+}
+
+interface Source {
+  name: string;
+}
+
+interface Pagination {
+  size: number;
+  expected_size: number;
+}

src/docs/docs-components/CopyColourTable/styles.module.scss

@@ -134,7 +134,7 @@ $header: #5e81ac;
 .importsnippet :global {
   max-width: 600px;
   position: relative;
-  
+
   p {
     font-size: 0.8rem;
     line-height: 1;
@@ -147,7 +147,9 @@ $header: #5e81ac;
   }
 
   pre {
-    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23) !important;
+    box-shadow:
+      0 5px 10px rgba(0, 0, 0, 0.19),
+      0 3px 3px rgba(0, 0, 0, 0.23) !important;
     margin-top: 0 !important;
     border-radius: 4px;
     border: 1px solid hsla(203, 50%, 30%, 0.15);

src/docs/docs-components/ThemeBuilder/NewTheme/styles.module.scss

@@ -8,7 +8,9 @@
   }
 
   pre {
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;
+    box-shadow:
+      0 10px 20px rgba(0, 0, 0, 0.19),
+      0 6px 6px rgba(0, 0, 0, 0.23) !important;
     border: 0 !important;
     padding: 1em 1.5em !important;
   }