wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

migrates to svelte 5

Browse source
This commit is contained in:
MinamiFunakoshiTR 2025-03-24 14:46:25 -07:00
parent 740db10d7b
commit 8cf1b1b552
Failed to extract signature
3 changed files with 95 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/ReferralBlock/ReferralBlock.mdx
View file

@ -6,25 +6,31 @@ import * as ReferralBlockStories from './ReferralBlock.stories.svelte';
# ReferralBlock
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 `ReferralBlock` component creates a set of referral links from recent Reuters.com 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 `section` or `collection` prop determines which section or collection stories are from.
> Note: 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 can get the section ID from the URL for the Reuters.com section pages. For example, the section ID for [World - Europe](https://www.reuters.com/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.
> You should get the collection alias from the dotcom team.
```svelte
<script>
import { ReferralBlock } from '@reuters-graphics/graphics-components';
</script>
<ReferralBlock section="/lifestyle/sports/" />
<ReferralBlock
section="/lifestyle/sports/"
class="fmy-0"
heading="More World Cup coverage"
/>
```
<Canvas of={ReferralBlockStories.Demo} />
## Collection
## Collections
TK - Check if this is still relevant.
```svelte
<script>

5
src/components/ReferralBlock/ReferralBlock.stories.svelte
View file

@ -34,13 +34,12 @@
name="Demo"
args={{
section: '/lifestyle/sports/',
number: 4,
class: 'fmy-0',
heading: 'More World Cup coverage',
}}
/>
<Story
<!-- <Story
name="By collection"
exportName="ByCollection"
args={{
@ -49,4 +48,4 @@
class: 'fmy-8',
heading: 'The latest Trump coverage',
}}
/>
/> -->

154
src/components/ReferralBlock/ReferralBlock.svelte
View file

@ -1,65 +1,70 @@
<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
<!-- @component `ReferralBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-furniture-referralblock--docs) -->
<script lang="ts">
/** ✏️ 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.
*/
export let section: string | undefined = '/world/';
/**
* Collection alias, as defined in Arc Collections editor.
*/
export let collection: string | undefined;
/**
* Number of referrals to show.
* @required
*/
export let number: 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: string = '_self';
/**
* Add a heading to the referral block.
*/
export let heading: string = '';
type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
/**
* Width of the component within the text well.
* @required
*/
export let width: ContainerWidth = 'wide';
/** Add an ID to target with SCSS. */
export let id: string = '';
/** Add a class to target with SCSS. */
let cls: string = 'fmy-8';
export { cls as class };
import Block from '../Block/Block.svelte';
// Utils
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;
// Components
import Block from '../Block/Block.svelte';
// Types
import type { Article } from './types';
import type { Referrals } from './types';
type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
interface 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.
*/
section?: string;
/**
* Collection alias, as defined in Arc Collections editor.
*/
collection?: string;
/**
* Number of referrals to show.
*/
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: 'normal' | 'wide' | 'wider' | 'widest' | 'fluid'
*/
width?: ContainerWidth;
/** Add an ID to target with SCSS. */
id?: string;
/** Add a class to target with SCSS. */
class?: string;
}
let {
section = '/world/',
collection,
number = 4,
linkTarget = '_self',
heading = '',
width = 'wide',
id = '',
class: cls = 'fmy-8',
}: Props = $props();
let clientWidth = $state(0);
const SECTION_API = 'recent-stories-by-sections-v1';
/** @TODO - Check if collections alias API still exists*/
const COLLECTION_API = 'articles-by-collection-alias-or-id-v1';
let referrals: Article[] = [];
let referrals: Article[] = $state([]);
const getReferrals = async () => {
const isCollection = Boolean(collection);
@ -76,13 +81,16 @@
}),
})
);
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?.thumbnail?.url)
.filter((a) => !a?.content?.third_party)
.filter(articleIsNotCurrentPage)
.slice(0, number);
referrals = articles;
} catch {
console.warn('Unable to fetch referral links.');
@ -96,33 +104,33 @@
<Block {width} {id} class="referrals-block {cls}">
<div
class="block-container"
class:stacked="{clientWidth && clientWidth < 750}"
class:stacked={clientWidth && clientWidth < 750}
bind:clientWidth
>
{#if heading}
<div
class="heading h4 font-bold"
class:stacked="{clientWidth && clientWidth < 750}"
class:stacked={clientWidth && clientWidth < 750}
>
{heading}
</div>
{/if}
<div
class="referral-container inline-flex flex-wrap w-full justify-between"
class:stacked="{clientWidth && clientWidth < 750}"
class:xs="{clientWidth && clientWidth < 450}"
class:stacked={clientWidth && clientWidth < 750}
class:xs={clientWidth && clientWidth < 450}
>
{#each referrals as referral}
<div class="referral">
<a
href="https://www.reuters.com{referral.canonical_url}"
target="{linkTarget}"
rel="{linkTarget === '_blank' ? 'noreferrer' : null}"
target={linkTarget}
rel={linkTarget === '_blank' ? 'noreferrer' : null}
>
<div class="referral-pack flex justify-around my-0 mx-auto">
<div
class="headline"
class:xs="{clientWidth && clientWidth < 450}"
class:xs={clientWidth && clientWidth < 450}
>
<div
class="kicker m-0 body-caption leading-tighter"
@ -145,14 +153,14 @@
</div>
<div
class="image-container block m-0 overflow-hidden relative"
class:xs="{clientWidth && clientWidth < 450}"
class:xs={clientWidth && clientWidth < 450}
>
<img
class="block object-cover m-0 w-full"
data-chromatic="ignore"
src="{referral.thumbnail.renditions.landscape['240w']}"
alt="{referral.thumbnail.caption ||
referral.thumbnail.alt_text}"
src={referral.thumbnail.url}
alt={referral.thumbnail.alt_text ||
referral.thumbnail.caption}
/>
</div>
</div>
@ -165,7 +173,7 @@
{/if}
<style lang="scss">
@use '../../scss/mixins' as *;
@use '../../scss/mixins' as mixins;
div.block-container.stacked {
display: flex;
@ -198,7 +206,7 @@
display: block;
width: calc(50% - 30px);
max-width: 450px;
@include fmy-1;
@include mixins.fmy-1;
&:hover {
.title {
@ -212,25 +220,25 @@
.headline {
display: inline-block;
width: calc(100% - 9rem);
@include fpr-2;
@include mixins.fpr-2;
.kicker {
@include text-xxs;
@include mixins.text-xxs;
font-family: Knowledge, sans-serif;
}
.title {
@include font-medium;
@include text-sm;
@include text-primary;
@include mixins.font-medium;
@include mixins.text-sm;
@include mixins.text-primary;
font-family: Knowledge, sans-serif;
}
.publish-time {
@include text-xxs;
@include mixins.text-xxs;
font-family: Knowledge, sans-serif;
}
}
.image-container {
border-radius: 0.25rem;
border: 1px solid $theme-colour-brand-rules;
border: 1px solid mixins.$theme-colour-brand-rules;
width: 9rem;
&.xs {
width: 7rem;