From 4421662c5b711845a5d89e1e144840c0a16d2a1f Mon Sep 17 00:00:00 2001 From: hobbes7878 Date: Thu, 28 Nov 2024 14:04:44 +0000 Subject: [PATCH 1/3] closes #201 --- .../ReferralBlock/ReferralBlock.svelte | 8 +- .../ReferralBlock/filterCurrentPage.ts | 32 +++++ src/components/ReferralBlock/types.ts | 109 ++++++++++++++++++ 3 files changed, 147 insertions(+), 2 deletions(-) create mode 100644 src/components/ReferralBlock/filterCurrentPage.ts create mode 100644 src/components/ReferralBlock/types.ts diff --git a/src/components/ReferralBlock/ReferralBlock.svelte b/src/components/ReferralBlock/ReferralBlock.svelte index 21ad19d5..a2036f80 100644 --- a/src/components/ReferralBlock/ReferralBlock.svelte +++ b/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 { diff --git a/src/components/ReferralBlock/filterCurrentPage.ts b/src/components/ReferralBlock/filterCurrentPage.ts new file mode 100644 index 00000000..03de0e24 --- /dev/null +++ b/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; +}; diff --git a/src/components/ReferralBlock/types.ts b/src/components/ReferralBlock/types.ts new file mode 100644 index 00000000..b0875000 --- /dev/null +++ b/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; +} From ca278c425e131783122d69098f21e5d3ce6f5e07 Mon Sep 17 00:00:00 2001 From: hobbes7878 Date: Thu, 28 Nov 2024 14:05:23 +0000 Subject: [PATCH 2/3] docs(changeset): ReferralBlock checks if a referral is for the current page and doesn't include it if so. --- .changeset/empty-garlics-smell.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/empty-garlics-smell.md diff --git a/.changeset/empty-garlics-smell.md b/.changeset/empty-garlics-smell.md new file mode 100644 index 00000000..e1761ab5 --- /dev/null +++ b/.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. From 341ec9dfc06ed600036efc4ea4dd8b2c421070da Mon Sep 17 00:00:00 2001 From: hobbes7878 Date: Thu, 28 Nov 2024 14:07:14 +0000 Subject: [PATCH 3/3] prettier --- src/docs/docs-components/CopyColourTable/styles.module.scss | 6 ++++-- .../ThemeBuilder/NewTheme/styles.module.scss | 4 +++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/docs/docs-components/CopyColourTable/styles.module.scss b/src/docs/docs-components/CopyColourTable/styles.module.scss index 59b310af..9cb8de33 100644 --- a/src/docs/docs-components/CopyColourTable/styles.module.scss +++ b/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); diff --git a/src/docs/docs-components/ThemeBuilder/NewTheme/styles.module.scss b/src/docs/docs-components/ThemeBuilder/NewTheme/styles.module.scss index 8d7de894..51187024 100644 --- a/src/docs/docs-components/ThemeBuilder/NewTheme/styles.module.scss +++ b/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; }