From cd1434efc138aef3b43b7cbf8418e7386c641988 Mon Sep 17 00:00:00 2001 From: Jon McClure Date: Tue, 3 Oct 2023 18:47:51 +0100 Subject: [PATCH] closes #130 --- .../ReferralBlock.stories.svelte | 17 +++++++-- .../ReferralBlock/ReferralBlock.svelte | 36 ++++++++++++------- .../ReferralBlock/stories/docs/collection.md | 7 ++++ .../ReferralBlock/stories/docs/component.md | 6 ++-- 4 files changed, 50 insertions(+), 16 deletions(-) create mode 100644 src/components/ReferralBlock/stories/docs/collection.md diff --git a/src/components/ReferralBlock/ReferralBlock.stories.svelte b/src/components/ReferralBlock/ReferralBlock.stories.svelte index 0eea42d1..fa51c0a0 100644 --- a/src/components/ReferralBlock/ReferralBlock.stories.svelte +++ b/src/components/ReferralBlock/ReferralBlock.stories.svelte @@ -3,10 +3,12 @@ // @ts-ignore import componentDocs from './stories/docs/component.md?raw'; + // @ts-ignore + import collectionDocs from './stories/docs/collection.md?raw'; import ReferralBlock from './ReferralBlock.svelte'; - import { withComponentDocs } from '$docs/utils/withParams.js'; + import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js'; const metaProps = { ...withComponentDocs(componentDocs), @@ -50,7 +52,18 @@ args="{{ section: '/lifestyle/sports/', number: 4, - class: 'fmy-5', + class: 'fmy-0', heading: 'More World Cup coverage', }}" /> + + diff --git a/src/components/ReferralBlock/ReferralBlock.svelte b/src/components/ReferralBlock/ReferralBlock.svelte index ac62022d..8b40a75d 100644 --- a/src/components/ReferralBlock/ReferralBlock.svelte +++ b/src/components/ReferralBlock/ReferralBlock.svelte @@ -6,9 +6,13 @@ * 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: string = '/world/'; + export let section: string | undefined = '/world/'; + + /** + * Collection alias, as defined in Arc Collections editor. + */ + export let collection: string | undefined; /** * Number of referrals to show. @@ -38,24 +42,32 @@ export let id: string = ''; /** Add a class to target with SCSS. */ - let cls: string = ''; + let cls: string = 'fmy-8'; export { cls as class }; import Block from '../Block/Block.svelte'; - import { referrals } from './stores.js'; + // import { referrals } from './stores.js'; import { onMount } from 'svelte'; import { getTime } from '../SiteHeader/NavBar/NavDropdown/StoryCard/time'; let clientWidth; + const SECTION_API = 'recent-stories-by-sections-v1'; + const COLLECTION_API = 'articles-by-collection-alias-or-id-v1'; + + let referrals = []; + onMount(async () => { + const isCollection = Boolean(collection); + const API = isCollection ? COLLECTION_API : SECTION_API; try { const response = await fetch( - 'https://www.reuters.com/pf/api/v3/content/fetch/recent-stories-by-sections-v1?' + + `https://www.reuters.com/pf/api/v3/content/fetch/${API}?` + new URLSearchParams({ query: JSON.stringify({ - section_ids: section, + section_ids: isCollection ? undefined : section, + collection_alias: isCollection ? collection : undefined, size: 20, website: 'reuters', }), @@ -63,11 +75,11 @@ ); const data = await response.json(); const articles = data.result.articles - .filter((a) => a?.headline_category) + .filter((a) => a?.headline_category || a?.kicker?.name) .filter((a) => a?.thumbnail?.renditions?.landscape?.['240w']) .filter((a) => !a?.content?.third_party) .slice(0, number); - referrals.set(articles); + referrals = articles; console.log('articles', data, articles); } catch (e) { console.warn('Unable to fetch referral links.'); @@ -77,8 +89,8 @@ getTime(); -{#if $referrals.length === number} - +{#if referrals.length === number} + {#if heading}
- {#each $referrals as referral} + {#each referrals as referral}
- {referral.headline_category} + {referral.headline_category || referral.kicker.name}
+ import { ReferralBlock } from '@reuters-graphics/graphics-components'; + + + +``` diff --git a/src/components/ReferralBlock/stories/docs/component.md b/src/components/ReferralBlock/stories/docs/component.md index 5cc913b7..61bb9141 100644 --- a/src/components/ReferralBlock/stories/docs/component.md +++ b/src/components/ReferralBlock/stories/docs/component.md @@ -1,8 +1,10 @@ -The `ReferralBlock` component creates a set of referral links from recent dotcom stories using the [recent stories by section API](https://www.reuters.com/pf/api/v3/content/fetch/recent-stories-by-sections-v1?query=%7B%22section_ids%22%3A%22%2Fworld%2F%22%2C%22size%22%3A20%2C%22website%22%3A%22reuters%22%7D). +The `ReferralBlock` component creates a set of referral links from recent dotcom stories using the [recent stories by section API](https://www.reuters.com/pf/api/v3/content/fetch/recent-stories-by-sections-v1?query=%7B%22section_ids%22%3A%22%2Fworld%2F%22%2C%22size%22%3A20%2C%22website%22%3A%22reuters%22%7D) or the [articles by collection API](https://www.reuters.com/pf/api/v3/content/fetch/articles-by-collection-alias-or-id-v1?query=%7B%22collection_alias%22%3A%22x-trump%22%2C%22size%22%3A20%2C%22website%22%3A%22reuters%22%7D). -> The `section` prop determines which section stories are from. +> The `section` or `collection` prop determines which section or collection stories are from. > > You can get the section ID from the section page on dotcom. For example, the section ID for World - Europe stories at `www.reuters.com/world/europe/` would be `/world/europe/`. (The leading and trailing slashes are required!) +> +> You should get a collection alias from the dotcom team. ```svelte