;
20 |
21 | export default meta;
22 |
23 | export const Default = {};
24 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/components/Masthead/Titlepiece/constants.ts:
--------------------------------------------------------------------------------
1 | import { space } from '@guardian/source/foundations';
2 |
3 | export const navInputCheckboxId = 'header-nav-input-checkbox';
4 | export const veggieBurgerId = 'header-veggie-burger';
5 | export const expandedMenuRootId = 'header-expanded-menu-root';
6 | export const expandedMenuId = 'header-expanded-menu';
7 |
8 | export const pillarLeftMarginPx = 6;
9 |
10 | export const pillarWidthsPx = {
11 | tablet: 108,
12 | leftCol: 125,
13 | wide: 136,
14 | };
15 |
16 | export const smallMobilePageMargin = '10px';
17 | export const pageMargin = `${space[5]}px`;
18 |
19 | export const minHeaderHeightPx = 126;
20 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/components/NewsletterBadge.stories.tsx:
--------------------------------------------------------------------------------
1 | import { NewsletterBadge } from './NewsletterBadge';
2 |
3 | export default {
4 | component: NewsletterBadge,
5 | title: 'Components/NewsletterBadge',
6 | };
7 |
8 | export const Default = () => {
9 | return
11 |
13 | );
14 | };
15 | Default.storyName = 'Default';
16 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/components/ShadyPie.tsx:
--------------------------------------------------------------------------------
1 | const params = new URLSearchParams();
2 | params.set(
3 | 'acquisitionData',
4 | JSON.stringify({
5 | componentType: 'ACQUISITIONS_OTHER',
6 | source: 'GUARDIAN_WEB',
7 | campaignCode: 'shady_pie_open_2019',
8 | componentId: 'shady_pie_open_2019',
9 | }),
10 | );
11 | params.set('INTCMP', 'shady_pie_open_2019');
12 |
13 | export const ShadyPie = () => {
14 | return (
15 |
19 |
25 | );
26 | };
27 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/components/SoundcloudBlockComponent.amp.tsx:
--------------------------------------------------------------------------------
1 | import type { SoundcloudBlockElement } from '../types/content';
2 |
3 | type Props = {
4 | element: SoundcloudBlockElement;
5 | };
6 |
7 | export const SoundcloudBlockComponent = ({ element }: Props) => {
8 | return element.isTrack ? (
9 |
3 |
8 | );
9 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/components/numbers/Five.tsx:
--------------------------------------------------------------------------------
1 | export const Five = () => (
2 |
3 |
8 | );
9 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/components/numbers/Four.tsx:
--------------------------------------------------------------------------------
1 | export const Four = () => (
2 |
3 |
8 | );
9 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/components/numbers/Nine.tsx:
--------------------------------------------------------------------------------
1 | export const Nine = () => (
2 |
3 |
8 | );
9 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/components/numbers/One.tsx:
--------------------------------------------------------------------------------
1 | export const One = () => (
2 |
3 |
8 | );
9 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/components/numbers/Seven.tsx:
--------------------------------------------------------------------------------
1 | export const Seven = () => (
2 |
3 |
8 | );
9 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/components/numbers/Six.tsx:
--------------------------------------------------------------------------------
1 | export const Six = () => (
2 |
3 |
8 | );
9 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/components/numbers/Ten.tsx:
--------------------------------------------------------------------------------
1 | export const Ten = () => (
2 |
3 |
8 | );
9 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/components/numbers/Three.tsx:
--------------------------------------------------------------------------------
1 | export const Three = () => (
2 |
3 |
8 | );
9 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/components/numbers/Two.tsx:
--------------------------------------------------------------------------------
1 | export const Two = () => (
2 |
3 |
5 | );
6 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/components/numbers/Zero.tsx:
--------------------------------------------------------------------------------
1 | export const Zero = () => (
2 |
3 |
5 | );
6 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/devServer/docs/amp.tsx:
--------------------------------------------------------------------------------
1 | export const Amp = () => (
2 | <>
3 |
4 | Some parts of dotcom are available in AMP format, on{' '}
5 |
6 | https://amp.theguardian.com
7 |
8 | .
9 |
10 | Available Pages
11 |
19 |
20 | );
21 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/devServer/docs/editionsApp.tsx:
--------------------------------------------------------------------------------
1 | export const EditionsApp = () => (
2 | <>
3 | The Editions app is available on iOS, iPadOS and Android.
4 | Available Pages
5 |
10 |
11 | );
12 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/devServer/docs/editionsCrosswords.tsx:
--------------------------------------------------------------------------------
1 | import { Available } from './available';
2 |
3 | export const EditionsCrosswords = () => (
4 | <>
5 |
7 | The only page powered by DCAR in the Editions app is the crosswords
8 | player, which contains a list of recent crosswords and a way to play
9 | them.
10 |
11 |
12 | );
13 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/devServer/docs/liveApps.tsx:
--------------------------------------------------------------------------------
1 | export const LiveApps = () => (
2 | <>
3 | The Guardian live apps, available on iOS, iPadOS and Android.
4 | Available Pages
5 |
13 |
14 | );
15 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/devServer/docs/targets.tsx:
--------------------------------------------------------------------------------
1 | export const Targets = () => (
2 | <>
3 |
4 | This a breakdown of the different kinds of targets DCAR can render
5 | for. To instead see a breakdown by pages see{' '}
6 | Pages .
7 |
8 |
22 |
23 | );
24 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/devServer/routers/amp.ts:
--------------------------------------------------------------------------------
1 | import express from 'express';
2 | import { Amp } from '../docs/amp';
3 | import { sendReact } from '../send';
4 |
5 | const amp = express.Router();
6 |
7 | amp.get('/', sendReact('AMP', Amp));
8 |
9 | export { amp };
10 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/devServer/routers/dotcom.ts:
--------------------------------------------------------------------------------
1 | import { Router } from 'express';
2 | import { Dotcom } from '../docs/dotcom';
3 | import { sendReact } from '../send';
4 |
5 | const dotcom = Router();
6 |
7 | dotcom.get('/', sendReact('Dotcom', Dotcom));
8 |
9 | export { dotcom };
10 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/devServer/routers/editionsApp.ts:
--------------------------------------------------------------------------------
1 | import express from 'express';
2 | import { EditionsApp } from '../docs/editionsApp';
3 | import { EditionsCrosswords } from '../docs/editionsCrosswords';
4 | import { sendReact } from '../send';
5 |
6 | const editionsApp = express.Router();
7 |
8 | editionsApp.get('/', sendReact('Editions App', EditionsApp));
9 | editionsApp.get(
10 | '/crosswords',
11 | sendReact('Editions Crosswords', EditionsCrosswords),
12 | );
13 |
14 | export { editionsApp };
15 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/devServer/routers/liveApps.ts:
--------------------------------------------------------------------------------
1 | import express from 'express';
2 | import { LiveApps } from '../docs/liveApps';
3 | import { sendReact } from '../send';
4 |
5 | const liveApps = express.Router();
6 |
7 | liveApps.get('/', sendReact('Live Apps', LiveApps));
8 |
9 | export { liveApps };
10 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/devServer/routers/pages.ts:
--------------------------------------------------------------------------------
1 | import { Router } from 'express';
2 | import { Pages } from '../docs/pages';
3 | import { sendReact } from '../send';
4 |
5 | const pages = Router();
6 |
7 | pages.get('/', sendReact('Pages', Pages));
8 |
9 | export { pages };
10 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/devServer/routers/targets.ts:
--------------------------------------------------------------------------------
1 | import { Router } from 'express';
2 | import { Targets } from '../docs/targets';
3 | import { sendReact } from '../send';
4 | import { amp } from './amp';
5 | import { dotcom } from './dotcom';
6 | import { editionsApp } from './editionsApp';
7 | import { liveApps } from './liveApps';
8 |
9 | const targets = Router();
10 |
11 | targets.get('/', sendReact('Targets', Targets));
12 | targets.use('/dotcom', dotcom);
13 | targets.use('/live-apps', liveApps);
14 | targets.use('/editions-app', editionsApp);
15 | targets.use('/amp', amp);
16 |
17 | export { targets };
18 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/devServer/send.tsx:
--------------------------------------------------------------------------------
1 | import path from 'node:path';
2 | import type { RequestHandler } from 'express';
3 | import type { FunctionComponent } from 'react';
4 | import { renderToPipeableStream } from 'react-dom/server';
5 | import { Doc } from './docs/doc';
6 |
7 | export const sendReact =
8 | (title: string, Component: FunctionComponent): RequestHandler =>
9 | (req, res) => {
10 | const element = (
11 |
12 |
14 | );
15 |
16 | const { pipe } = renderToPipeableStream(element, {
17 | onShellReady() {
18 | res.setHeader('content-type', 'text/html');
19 | pipe(res);
20 | },
21 | });
22 | };
23 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/experiments/tests/auxia-sign-in-gate.ts:
--------------------------------------------------------------------------------
1 | import type { ABTest } from '@guardian/ab-core';
2 |
3 | export const auxiaSignInGate: ABTest = {
4 | id: 'AuxiaSignInGate',
5 | start: '2025-01-23',
6 | expiry: '2026-01-30',
7 | author: 'Pascal (Growth Team)',
8 | description:
9 | 'R&D Experiment: using Auxia API to drive the behavior of the SignIn gate',
10 | audience: 0.35,
11 | audienceOffset: 0,
12 | successMeasure: '',
13 | audienceCriteria: '',
14 | dataLinkNames: 'AuxiaSignInGate',
15 | idealOutcome: '',
16 | showForSensitive: false,
17 | canRun: () => true,
18 | variants: [
19 | {
20 | id: 'auxia-signin-gate',
21 | test: (): void => {},
22 | },
23 | ],
24 | };
25 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/experiments/tests/consentless-ads.ts:
--------------------------------------------------------------------------------
1 | import type { ABTest } from '@guardian/ab-core';
2 |
3 | export const consentlessAds: ABTest = {
4 | id: 'ConsentlessAds',
5 | author: '@guardian/commercial-dev',
6 | start: '2022-08-11',
7 | expiry: '2023-06-01',
8 | audience: 0 / 100,
9 | audienceOffset: 0 / 100,
10 | audienceCriteria: 'All pageviews',
11 | successMeasure: 'Testing Opt Out ads in production',
12 | description: 'Use consentless ad stack rather than consented / standalone',
13 | variants: [
14 | { id: 'control', test: (): void => {} },
15 | { id: 'variant', test: (): void => {} },
16 | ],
17 | canRun: () => true,
18 | };
19 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/experiments/utils.ts:
--------------------------------------------------------------------------------
1 | import { bypassCommercialMetricsSampling } from '@guardian/commercial';
2 | import { bypassCoreWebVitalsSampling } from '@guardian/core-web-vitals';
3 |
4 | export const bypassMetricsSampling = (): void => {
5 | void bypassCommercialMetricsSampling();
6 | void bypassCoreWebVitalsSampling();
7 | };
8 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/frontend/README.md:
--------------------------------------------------------------------------------
1 | # The `frontend` Directory
2 |
3 | This contains code related to the requests sent to DCAR from frontend. In practice this means the TypeScript types representing JSON data sent via POST request to DCAR, and the JSON schema files that are generated from them by `scripts/jsonSchema`.
4 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/layouts/lib/pageSkin.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/react';
2 | import { breakpoints, from } from '@guardian/source/foundations';
3 |
4 | const pageSkinContainer = css`
5 | ${from.desktop} {
6 | max-width: ${breakpoints.desktop}px;
7 | margin: auto;
8 | }
9 | `;
10 |
11 | export { pageSkinContainer };
12 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/assert-unreachable.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * A function that asserts it should never be called
3 | *
4 | * Useful for checking exhaustiveness of switch cases
5 | *
6 | * @see https://tinytip.co/tips/ts-switch-assert-unreachable/
7 | *
8 | */
9 | // eslint-disable-next-line @typescript-eslint/no-unused-vars -- We don't actually use the value
10 | export const assertUnreachable = (value: never): never => {
11 | throw new Error('This should be unreachable');
12 | };
13 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/audio-data.ts:
--------------------------------------------------------------------------------
1 | import type { FEElement } from '../types/content';
2 |
3 | export const getAudioData = (
4 | mainMediaElements: FEElement[] | undefined,
5 | ): { audioDownloadUrl: string; mediaId: string } | undefined => {
6 | const audioBlockElement = mainMediaElements?.find(
7 | (element) =>
8 | element._type ===
9 | 'model.dotcomrendering.pageElements.AudioBlockElement',
10 | );
11 | if (audioBlockElement?.assets[0] && audioBlockElement.id) {
12 | return {
13 | audioDownloadUrl: audioBlockElement.assets[0].url,
14 | mediaId: audioBlockElement.id,
15 | };
16 | }
17 | return undefined;
18 | };
19 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/block-link.amp.ts:
--------------------------------------------------------------------------------
1 | export const blockLink = (url: string, blockID: string): string => {
2 | return `${url}?page=with:block-${blockID}#block-${blockID}`;
3 | };
4 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/braze/hasRequiredConsents.ts:
--------------------------------------------------------------------------------
1 | import { getConsentFor, onConsentChange } from '@guardian/libs';
2 |
3 | const hasRequiredConsents = (): Promise =>
4 | new Promise((resolve, reject) => {
5 | onConsentChange((state) => {
6 | try {
7 | resolve(getConsentFor('braze', state));
8 | } catch (e) {
9 | reject(e);
10 | }
11 | });
12 | });
13 |
14 | export { hasRequiredConsents };
15 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/braze/taylorReport.ts:
--------------------------------------------------------------------------------
1 | import type { TagType } from '../../types/tag';
2 |
3 | const tagId = 'news/series/cotton-capital';
4 |
5 | export const suppressForTaylorReport = (tags: TagType[]): boolean =>
6 | window.guardian.config.switches.brazeTaylorReport === true &&
7 | !tags.find((tag) => tag.id === tagId);
8 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/buildNewsletterSignUpText.tsx:
--------------------------------------------------------------------------------
1 | const supportedFrequencyValues = ['daily', 'weekly', 'monthly', 'fortnightly'];
2 | const specialCasedValues: Record = {
3 | 'every weekday': 'daily',
4 | };
5 | export const buildDetailText = (input: string) => {
6 | const normalisedInput = input.toLowerCase().trim();
7 | const specialCasedValue = specialCasedValues[normalisedInput];
8 |
9 | if (specialCasedValue) {
10 | return `Free ${specialCasedValue} newsletter`;
11 | }
12 |
13 | if (supportedFrequencyValues.includes(normalisedInput)) {
14 | return `Free ${normalisedInput} newsletter`;
15 | }
16 |
17 | return 'Free newsletter';
18 | };
19 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/byline-tokens.amp.test.ts:
--------------------------------------------------------------------------------
1 | import { bylineTokens } from './byline-tokens.amp';
2 |
3 | describe('byline-tokens', () => {
4 | it('should split out tag titles from the text', () => {
5 | const byline = 'John Smith and Mary Piper';
6 | const contributorTags = [
7 | {
8 | id: 'profile/john-smith',
9 | type: 'Contributor',
10 | title: 'John Smith',
11 | },
12 | {
13 | id: 'profile/mary-piper',
14 | type: 'Contributor',
15 | title: 'Mary Piper',
16 | },
17 | ];
18 |
19 | const tokens = bylineTokens(byline, contributorTags);
20 |
21 | expect(tokens).toEqual(['John Smith', ' and ', 'Mary Piper']);
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/byline-tokens.amp.ts:
--------------------------------------------------------------------------------
1 | import type { TagType } from '../types/tag';
2 |
3 | export const bylineTokens = (
4 | byline: string,
5 | contributorTags: TagType[],
6 | ): string[] => {
7 | const titles = contributorTags.map((c) => c.title);
8 | const regex = new RegExp(`(${titles.join('|')})`);
9 |
10 | return byline.split(regex).filter(Boolean);
11 | };
12 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/center.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/react';
2 | import { from } from '@guardian/source/foundations';
3 |
4 | export const center = css`
5 | position: relative;
6 | margin: auto;
7 |
8 | ${from.tablet} {
9 | max-width: 740px;
10 | }
11 |
12 | ${from.desktop} {
13 | max-width: 980px;
14 | }
15 |
16 | ${from.leftCol} {
17 | max-width: 1140px;
18 | }
19 |
20 | ${from.wide} {
21 | max-width: 1300px;
22 | }
23 | `;
24 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/commercial-constants.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * The maximum number of fronts-banner ads that can be inserted on any front.
3 | * fronts-banner ads are inserted from the desktop breakpoint.
4 | */
5 | export const MAX_FRONTS_BANNER_ADS = 6;
6 |
7 | /**
8 | * The maximum number of fronts-banner ads that can be inserted on fronts with beta collections present.
9 | * fronts-banner ads are inserted from the desktop breakpoint.
10 | */
11 | export const MAX_FRONTS_BANNER_ADS_BETA = 8;
12 |
13 | /**
14 | * The maximum number of ads that can be inserted on any mobile front.
15 | * Mobile ads on fronts are inserted up until the tablet breakpoint.
16 | */
17 | export const MAX_FRONTS_MOBILE_ADS = 10;
18 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/decideLogo.ts:
--------------------------------------------------------------------------------
1 | import type { Branding } from '../types/branding';
2 | import type { DCRContainerPalette } from '../types/front';
3 | import { cardHasDarkBackground } from './cardHelpers';
4 |
5 | export const decideCardLogo = (
6 | branding: Branding,
7 | containerPalette?: DCRContainerPalette,
8 | ): Branding['logo'] => {
9 | return cardHasDarkBackground(containerPalette) &&
10 | branding.logoForDarkBackground
11 | ? branding.logoForDarkBackground
12 | : branding.logo;
13 | };
14 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/decideNavPillar.ts:
--------------------------------------------------------------------------------
1 | import type { LegacyPillar } from '../types/frontend';
2 | import { Pillar } from './articleFormat';
3 |
4 | export const decideNavPillar = (pillar: LegacyPillar): Pillar | undefined => {
5 | switch (pillar) {
6 | case 'news':
7 | return Pillar.News;
8 | case 'opinion':
9 | return Pillar.Opinion;
10 | case 'sport':
11 | return Pillar.Sport;
12 | case 'culture':
13 | return Pillar.Culture;
14 | case 'lifestyle':
15 | return Pillar.Lifestyle;
16 | default:
17 | return undefined;
18 | }
19 | };
20 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/domUtils.ts:
--------------------------------------------------------------------------------
1 | import { JSDOM } from 'jsdom';
2 |
3 | export const parseHtml = (html: string): DocumentFragment =>
4 | JSDOM.fragment(html);
5 |
6 | // The nodeType for ELEMENT_NODE has the value 1.
7 | export function isElement(node: Node): node is Element {
8 | return node.nodeType === 1;
9 | }
10 |
11 | export const getAttrs = (node: Node): NamedNodeMap | undefined =>
12 | isElement(node) ? node.attributes : undefined;
13 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/errors/not-renderable-in-dcr.ts:
--------------------------------------------------------------------------------
1 | export class NotRenderableInDCR extends Error {
2 | constructor() {
3 | super(
4 | 'This page cannot be rendered due to incompatible content that is marked as mandatory.',
5 | );
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/fetchEmail.ts:
--------------------------------------------------------------------------------
1 | import { getAuthState } from './identity';
2 |
3 | const getEmail = async (): Promise => {
4 | const authState = await getAuthState();
5 | return authState.idToken?.claims.email;
6 | };
7 |
8 | /**
9 | * Fetches a signed in user's email address from Okta token.
10 | * Returns null if no email address is found or if the request times out after 1 second.
11 | */
12 | export const lazyFetchEmailWithTimeout =
13 | (): (() => Promise) => () => {
14 | return new Promise((resolve) => {
15 | setTimeout(() => resolve(null), 1000);
16 | void getEmail().then((email) => {
17 | resolve(email ?? null);
18 | });
19 | });
20 | };
21 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/formatCount.ts:
--------------------------------------------------------------------------------
1 | import { isUndefined } from '@guardian/libs';
2 |
3 | export const formatCount = (
4 | count?: number,
5 | ): { short: string; long: string } => {
6 | if (isUndefined(count)) return { short: '…', long: '…' };
7 | if (count === 0) return { short: '0', long: '0' };
8 |
9 | const countAsInteger = Math.floor(count);
10 | const displayCountLong = Intl.NumberFormat('en-GB').format(countAsInteger);
11 | const displayCountShort =
12 | countAsInteger > 10000
13 | ? `${Math.round(countAsInteger / 1000)}k`
14 | : countAsInteger.toString();
15 |
16 | return {
17 | short: displayCountShort,
18 | long: displayCountLong,
19 | };
20 | };
21 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/get-video-id.amp.ts:
--------------------------------------------------------------------------------
1 | import { URL, URLSearchParams } from 'node:url';
2 | import { isString } from '@guardian/libs';
3 |
4 | export const getIdFromUrl = (
5 | urlString: string,
6 | tryInPath?: boolean,
7 | tryQueryParam?: string,
8 | ): string | undefined => {
9 | if (!URL.canParse(urlString)) return undefined;
10 |
11 | // Looks for ID in both formats if provided
12 | const url = new URL(urlString);
13 |
14 | return [
15 | tryQueryParam
16 | ? new URLSearchParams(url.search).get(tryQueryParam)
17 | : undefined,
18 | tryInPath ? url.pathname.split('/').at(-1) : undefined,
19 | ].find(isString);
20 | };
21 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/getAbUrlHash.ts:
--------------------------------------------------------------------------------
1 | import type { Participations } from '@guardian/ab-core';
2 |
3 | export const getForcedParticipationsFromUrl = (
4 | windowHash: string,
5 | ): Participations => {
6 | if (windowHash.startsWith('#ab')) {
7 | const tokens = windowHash.replace('#ab-', '').split(',');
8 | return tokens.reduce((obj, token) => {
9 | const [testId, variantId] = token.split('=');
10 |
11 | if (testId && variantId) {
12 | return {
13 | ...obj,
14 | [testId]: { variant: variantId },
15 | };
16 | }
17 |
18 | return obj;
19 | }, {});
20 | }
21 |
22 | return {};
23 | };
24 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/getBrazeUuid.ts:
--------------------------------------------------------------------------------
1 | import { getAuthState } from './identity';
2 |
3 | export const getBrazeUuid = async (): Promise => {
4 | const authState = await getAuthState();
5 | return authState.idToken?.claims.braze_uuid;
6 | };
7 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/getPrivacyFramework.ts:
--------------------------------------------------------------------------------
1 | import { getLocaleCode } from './getCountryCode';
2 |
3 | let frameworks: Record;
4 |
5 | export const getPrivacyFramework = async (): Promise => {
6 | if (typeof frameworks === 'undefined') {
7 | const isInUS = (await getLocaleCode()) === 'US';
8 |
9 | frameworks = {
10 | ccpa: isInUS,
11 | tcfv2: !isInUS,
12 | };
13 | }
14 | return frameworks;
15 | };
16 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/hasCurrentBrazeUser.ts:
--------------------------------------------------------------------------------
1 | import { storage } from '@guardian/libs';
2 |
3 | const KEY = 'gu.brazeUserSet';
4 |
5 | const hasCurrentBrazeUser = (): boolean => {
6 | return storage.local.getRaw(KEY) === 'true';
7 | };
8 |
9 | const setHasCurrentBrazeUser = (): void => {
10 | storage.local.setRaw(KEY, 'true');
11 | };
12 |
13 | const clearHasCurrentBrazeUser = (): void => {
14 | storage.local.remove(KEY);
15 | };
16 |
17 | export {
18 | hasCurrentBrazeUser,
19 | setHasCurrentBrazeUser,
20 | clearHasCurrentBrazeUser,
21 | };
22 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/hiddenStyles.tsx:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/react';
2 |
3 | export const hiddenStyles = css`
4 | &.hidden {
5 | display: none;
6 | }
7 | `;
8 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/hideAge.ts:
--------------------------------------------------------------------------------
1 | export const hideAge = [
2 | 'Newsletters',
3 | 'Showcase',
4 | 'How to listen to Podcasts',
5 | 'Get in touch',
6 | ];
7 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/isServer.ts:
--------------------------------------------------------------------------------
1 | export const isServer = typeof window === 'undefined';
2 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/isValidUrl.ts:
--------------------------------------------------------------------------------
1 | /** Checks if a given URL is valid */
2 | export const isValidUrl = (maybeUrl: string): boolean => {
3 | try {
4 | new URL(maybeUrl);
5 | return true;
6 | } catch (e) {
7 | return false;
8 | }
9 | };
10 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/json.ts:
--------------------------------------------------------------------------------
1 | import { error, ok, type Result } from './result';
2 |
3 | /**
4 | * Safely fetch JSON from a URL.
5 | *
6 | * If successful, the value is typed as `unknown`.
7 | */
8 | export const fetchJSON = async (
9 | ...args: Parameters
10 | ): Promise> => {
11 | try {
12 | const response = await fetch(...args);
13 | return ok(await response.json());
14 | } catch (err) {
15 | if (err instanceof SyntaxError) {
16 | return error('ApiError');
17 | }
18 |
19 | return error('NetworkError');
20 | }
21 | };
22 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/labs-constants.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Height of the Guardian Labs header
3 | *
4 | * Note this constant is stored separately so that it can be imported
5 | * into two distinct islands without polluting their bundles with extra
6 | * unecessary code.
7 | */
8 | export const LABS_HEADER_HEIGHT = 55;
9 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/lang.test.ts:
--------------------------------------------------------------------------------
1 | import { decideLanguage, decideLanguageDirection } from './lang';
2 |
3 | describe('decideLanguage', () => {
4 | test('returns undefined if input is "en"', () => {
5 | expect(decideLanguage('en')).toBe(undefined);
6 | });
7 |
8 | test('returns input if it is not "en"', () => {
9 | expect(decideLanguage('at')).toBe('at');
10 | expect(decideLanguage('fr')).toBe('fr');
11 | });
12 | });
13 |
14 | describe('describeLanguageDirection', () => {
15 | test('returns rtl if input is true', () => {
16 | expect(decideLanguageDirection(true)).toBe('rtl');
17 | expect(decideLanguageDirection(false)).toBe(undefined);
18 | });
19 | });
20 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/lang.ts:
--------------------------------------------------------------------------------
1 | // CAPI only supports certain languages. If CAPI doesn't recognise the language,
2 | // it defaults to `en`. We should filter out `en` so we don't set an incorrect value.
3 | // See https://github.com/guardian/content-api/blob/main/porter/src/main/scala/com.gu.contentapi.porter/integration/LanguageDetector.scala#L17
4 | export const decideLanguage = (language = ''): string | undefined =>
5 | language != 'en' ? language : undefined;
6 |
7 | export const decideLanguageDirection = (
8 | isRightToLeftLang = false,
9 | ): 'rtl' | undefined => (isRightToLeftLang ? 'rtl' : undefined);
10 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/layoutHelpers.ts:
--------------------------------------------------------------------------------
1 | import type { ArticleDeprecated } from '../types/article';
2 | import type { LegacyPillar } from '../types/frontend';
3 | import type { Pillar } from './articleFormat';
4 | import { decideNavPillar } from './decideNavPillar';
5 |
6 | export const getCurrentPillar = (
7 | article: ArticleDeprecated,
8 | ): Pillar | undefined => {
9 | const currentPillar =
10 | (article.nav.currentPillarTitle?.toLowerCase() as
11 | | LegacyPillar
12 | | undefined) ?? article.pillar;
13 | return decideNavPillar(currentPillar);
14 | };
15 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/linkNotificationCount.ts:
--------------------------------------------------------------------------------
1 | import type { DropdownLinkType } from '../components/Dropdown.importable';
2 |
3 | export const linkNotificationCount = (links: DropdownLinkType[]): number => {
4 | return links.reduce((runningCount, link) => {
5 | const thisLinkNotificationCount = link.notifications?.length ?? 0;
6 | return runningCount + thisLinkNotificationCount;
7 | }, 0);
8 | };
9 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/memoize.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Cache the results of calling an expensive function
3 | */
4 | import { isUndefined } from '@guardian/libs';
5 |
6 | export const makeMemoizedFunction = (
7 | f: (key: K) => V,
8 | ): ((key: K) => V) => {
9 | const cache: Map = new Map();
10 | return (key: K): V => {
11 | const memoized = cache.get(key);
12 | if (!isUndefined(memoized)) {
13 | return memoized;
14 | }
15 | const value = f(key);
16 | cache.set(key, value);
17 | return value;
18 | };
19 | };
20 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/mixins.ts:
--------------------------------------------------------------------------------
1 | export const clearFix = `
2 | :after {
3 | content: '';
4 | display: table;
5 | clear: both;
6 | }
7 | `;
8 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/mockRESTCallsInJest.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Request as NodeFetchRequest,
3 | Response as NodeFetchResponse,
4 | } from 'node-fetch';
5 | import { mockFetch } from './mockRESTCalls';
6 |
7 | global.Response = NodeFetchResponse as unknown as typeof Response;
8 | global.Request = NodeFetchRequest as unknown as typeof Request;
9 |
10 | export const jestMockFetch = (): void => {
11 | global.fetch = jest.fn(mockFetch);
12 | };
13 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/ophan-helpers.test.ts:
--------------------------------------------------------------------------------
1 | import { nestedOphanComponents } from './ophan-helpers';
2 |
3 | describe('Ophan helpers', () => {
4 | it('should handle nested values', () => {
5 | expect(nestedOphanComponents('logo')).toBe('logo');
6 | expect(nestedOphanComponents('nav', 'sub nav', 'final element')).toBe(
7 | 'nav : sub nav : final element',
8 | );
9 | });
10 | });
11 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/ophan-helpers.ts:
--------------------------------------------------------------------------------
1 | export const nestedOphanComponents = (...components: string[]): string =>
2 | components.join(' : ');
3 |
4 | const spaces = / /g;
5 |
6 | export const ophanComponentId = (name: string): string =>
7 | name.toLowerCase().replace(spaces, '-');
8 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/parser/jsonParser.ts:
--------------------------------------------------------------------------------
1 | export const safeJsonParse =
2 | (guard: (o: unknown) => o is T) =>
3 | (text: string): ParseResult => {
4 | try {
5 | const parsed = JSON.parse(text) as unknown;
6 | return guard(parsed)
7 | ? { parsed, hasError: false }
8 | : { hasError: true };
9 | } catch (_) {
10 | return { hasError: true };
11 | }
12 | };
13 |
14 | type ParseResult =
15 | | { parsed: T; hasError: false }
16 | | { parsed?: undefined; hasError: true };
17 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/querystring.test.ts:
--------------------------------------------------------------------------------
1 | import { constructQuery } from './querystring';
2 |
3 | describe('constructQuery', () => {
4 | it('constructs the correct query string from an object', () => {
5 | const testParams = {
6 | sens: 'f',
7 | si: 'f',
8 | vl: 333,
9 | cc: 'UK',
10 | s: 'sport',
11 | inskin: 'f',
12 | ct: 'article',
13 | url: '/sport/2017/sep/30/test-article',
14 | su: ['0'],
15 | pa: 'f',
16 | a: undefined,
17 | };
18 | const expectedQuery = `sens=f&si=f&vl=333&cc=UK&s=sport&inskin=f&ct=article&url=%2Fsport%2F2017%2Fsep%2F30%2Ftest-article&su=0&pa=f&a=undefined`;
19 | expect(constructQuery(testParams)).toBe(expectedQuery);
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/querystring.ts:
--------------------------------------------------------------------------------
1 | const constructQuery = (query: {
2 | [key: string]:
3 | | string
4 | | string[]
5 | | number
6 | | number[]
7 | | boolean
8 | | boolean[]
9 | | undefined;
10 | }): string =>
11 | Object.keys(query)
12 | .map((param: string) => {
13 | const value = query[param] ?? 'undefined';
14 | const queryValue = Array.isArray(value)
15 | ? value.map((v) => encodeURIComponent(v)).join(',')
16 | : encodeURIComponent(value);
17 | return `${param}=${queryValue}`;
18 | })
19 | .join('&');
20 |
21 | export { constructQuery };
22 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/revealStyles.ts:
--------------------------------------------------------------------------------
1 | import { css, keyframes } from '@emotion/react';
2 |
3 | /**
4 | * Sometimes we want to animate in new content using plain
5 | * javascript. We use these classes to do that.
6 | */
7 | export const revealStyles = css`
8 | /* We're using classnames here because we add and remove these classes
9 | using plain javascript */
10 | .reveal {
11 | animation: ${keyframes`
12 | 0% { opacity: 0; }
13 | 100% { opacity: 1; }
14 | `} 1s ease-out;
15 | }
16 | .reveal-slowly {
17 | animation: ${keyframes`
18 | 0% { opacity: 0; }
19 | 100% { opacity: 1; }
20 | `} 4s ease-out;
21 | }
22 | .pending {
23 | display: none;
24 | }
25 | `;
26 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/setAutomat.ts:
--------------------------------------------------------------------------------
1 | import * as emotionReact from '@emotion/react';
2 | import * as emotionReactJsxRuntime from '@emotion/react/jsx-runtime';
3 | import React from 'react';
4 |
5 | let hasAutomatBeenSet = false;
6 |
7 | export const setAutomat = (): void => {
8 | if (!hasAutomatBeenSet) {
9 | window.guardian.automat = {
10 | emotionReact,
11 | emotionReactJsxRuntime,
12 | react: React,
13 | };
14 | hasAutomatBeenSet = true;
15 | }
16 | };
17 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/slot-machine-flags.ts:
--------------------------------------------------------------------------------
1 | interface Flags {
2 | showBodyEnd: boolean;
3 | }
4 |
5 | export const parse = (flags: string): Flags => {
6 | const arr = flags.split(',');
7 | const args = new Set(arr);
8 |
9 | return {
10 | showBodyEnd: args.has('showBodyEnd'),
11 | };
12 | };
13 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/tag-utils.amp.ts:
--------------------------------------------------------------------------------
1 | import type { TagType } from '../types/tag';
2 |
3 | export const filterForTagsOfType = (
4 | tags: TagType[],
5 | tagType: string,
6 | ): TagType[] => {
7 | return tags.filter(
8 | (tag) =>
9 | tag.type === tagType ||
10 | (tag.type === 'PaidContent' && tag.paidContentType === tagType),
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/themeToPillar.ts:
--------------------------------------------------------------------------------
1 | import { type ArticleTheme, Pillar } from './articleFormat';
2 |
3 | export const themeToPillar = (theme?: ArticleTheme): Pillar | undefined => {
4 | switch (theme) {
5 | case Pillar.News:
6 | return Pillar.News;
7 | case Pillar.Sport:
8 | return Pillar.Sport;
9 | case Pillar.Opinion:
10 | return Pillar.Opinion;
11 | case Pillar.Culture:
12 | return Pillar.Culture;
13 | case Pillar.Lifestyle:
14 | return Pillar.Lifestyle;
15 | default:
16 | return undefined;
17 | }
18 | };
19 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/useAdBlockInUse.ts:
--------------------------------------------------------------------------------
1 | import { isAdBlockInUse } from '@guardian/commercial';
2 | import { useEffect, useState } from 'react';
3 |
4 | /**
5 | * @description
6 | * useAdBlockInUse provides a custom hook to integrate the isAdBlockInUse
7 | * promise into a react component
8 | * */
9 | export const useAdBlockInUse = (): boolean | undefined => {
10 | const [isInUse, setIsInUse] = useState();
11 | useEffect(() => {
12 | // eslint-disable-next-line @typescript-eslint/no-floating-promises
13 | isAdBlockInUse().then((blockerDetected) => {
14 | setIsInUse(blockerDetected);
15 | });
16 | }, []);
17 |
18 | return isInUse;
19 | };
20 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/useHydrated.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 |
3 | export const useHydrated = (): boolean => {
4 | const [hydrated, setHydrated] = useState(false);
5 | useEffect(() => {
6 | setHydrated(true);
7 | }, []);
8 |
9 | return hydrated;
10 | };
11 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/useIsMyGuardianEnabled.ts:
--------------------------------------------------------------------------------
1 | import { log } from '@guardian/libs';
2 | import { useEffect, useState } from 'react';
3 | import { getEnvironmentClient } from './bridgetApi';
4 |
5 | export const useIsMyGuardianEnabled = (): boolean | undefined => {
6 | const [isEnabled, setIsEnabled] = useState(undefined);
7 |
8 | useEffect(() => {
9 | void getEnvironmentClient()
10 | .isMyGuardianEnabled()
11 | .then(setIsEnabled)
12 | .catch((error) => {
13 | setIsEnabled(false);
14 | log('dotcom', 'isMyGuardianEnabled check failed:', error);
15 | });
16 | }, []);
17 | return isEnabled;
18 | };
19 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/usePageViewId.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { getOphan } from '../client/ophan/ophan';
3 | import type { RenderingTarget } from '../types/renderingTarget';
4 |
5 | export const usePageViewId = (
6 | renderingTarget: RenderingTarget,
7 | ): string | undefined => {
8 | const [id, setId] = useState();
9 |
10 | useEffect(() => {
11 | getOphan(renderingTarget)
12 | .then(({ pageViewId }) => {
13 | setId(pageViewId);
14 | })
15 | .catch(() => {
16 | setId('no-page-view-id-available');
17 | });
18 | }, [renderingTarget]);
19 |
20 | return id;
21 | };
22 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/useRequestSignUp.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { getNewslettersClient } from './bridgetApi';
3 |
4 | export const useRequestSignUp = (
5 | input: string,
6 | identityName: string,
7 | ): boolean | undefined => {
8 | const [isSuccess, setIsSuccess] = useState(undefined);
9 |
10 | useEffect(() => {
11 | if (input) {
12 | getNewslettersClient()
13 | .requestSignUp(input, identityName)
14 | .then((success) => {
15 | setIsSuccess(success);
16 | })
17 | .catch(() => {
18 | setIsSuccess(false);
19 | });
20 | }
21 | }, [input, identityName]);
22 |
23 | return isSuccess;
24 | };
25 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/useShouldAdapt.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { shouldAdapt as checkShouldAdapt } from '../client/adaptiveSite';
3 |
4 | /**
5 | * A hook that reports whether we should adapt the current page
6 | * to address poor performance issues
7 | */
8 | export const useShouldAdapt = (): boolean => {
9 | const [shouldAdapt, setShouldAdapt] = useState(false);
10 |
11 | useEffect(() => {
12 | void checkShouldAdapt().then(setShouldAdapt);
13 | }, []);
14 |
15 | return shouldAdapt;
16 | };
17 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/verticalDivider.ts:
--------------------------------------------------------------------------------
1 | import type { SerializedStyles } from '@emotion/react';
2 | import { css } from '@emotion/react';
3 | import { from } from '@guardian/source/foundations';
4 |
5 | export const verticalDivider = (
6 | verticalDividerColour: string,
7 | ): SerializedStyles => {
8 | return css`
9 | ${from.tablet} {
10 | ::before {
11 | content: '';
12 | display: block;
13 | position: absolute;
14 | top: 0;
15 | bottom: 0;
16 | left: 0;
17 | width: 1px;
18 | height: 100%;
19 | border-left: 1px solid ${verticalDividerColour};
20 | }
21 | }
22 | `;
23 | };
24 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/model/appsLightboxImages.ts:
--------------------------------------------------------------------------------
1 | import type { ImageForLightbox } from '../types/content';
2 |
3 | export type ImageForAppsLightbox = {
4 | masterUrl: string;
5 | width: number;
6 | height: number;
7 | credit?: string;
8 | caption?: string;
9 | elementId: string;
10 | };
11 |
12 | export const appsLightboxImages = (
13 | lightboxImages: ImageForLightbox[],
14 | ): ImageForAppsLightbox[] =>
15 | lightboxImages.map((li) => ({
16 | width: li.width,
17 | height: li.height,
18 | credit: li.credit,
19 | caption: li.caption,
20 | masterUrl: li.masterUrl,
21 | elementId: li.elementId,
22 | }));
23 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/model/enhanceStandfirst.ts:
--------------------------------------------------------------------------------
1 | import { transformDots } from './transformDots';
2 |
3 | export const enhanceStandfirst = (html: string): string => transformDots(html);
4 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/model/enhanceTags.ts:
--------------------------------------------------------------------------------
1 | import type { FETagType, TagType } from '../types/tag';
2 |
3 | export const enhanceTags = (tags: FETagType[]): TagType[] =>
4 | tags.map((tag) => enhanceTag(tag));
5 |
6 | const enhanceTag = ({
7 | properties: {
8 | id,
9 | tagType: type,
10 | webTitle: title,
11 | twitterHandle,
12 | bylineImageUrl,
13 | contributorLargeImagePath: bylineLargeImageUrl,
14 | },
15 | }: FETagType): TagType => ({
16 | id,
17 | type,
18 | title,
19 | twitterHandle,
20 | bylineImageUrl,
21 | bylineLargeImageUrl,
22 | });
23 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/model/isLegacyTableOfContents.ts:
--------------------------------------------------------------------------------
1 | import type { FEElement } from '../types/content';
2 |
3 | const scriptUrls = [
4 | 'https://interactive.guim.co.uk/page-enhancers/nav/boot.js',
5 | 'https://uploads.guim.co.uk/2019/03/20/boot.js',
6 | 'https://uploads.guim.co.uk/2019/12/11/boot.js',
7 | 'https://interactive.guim.co.uk/testing/2020/11/voterSlideshow/boot.js',
8 | 'https://uploads.guim.co.uk/2021/10/15/boot.js',
9 | ];
10 |
11 | export const isLegacyTableOfContents = (element: FEElement): boolean =>
12 | element._type ===
13 | 'model.dotcomrendering.pageElements.InteractiveBlockElement' &&
14 | !!element.scriptUrl &&
15 | scriptUrls.includes(element.scriptUrl);
16 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/model/pinnedPost.ts:
--------------------------------------------------------------------------------
1 | import type { ArticleFormat } from '../lib/articleFormat';
2 | import type { Block } from '../types/blocks';
3 | import type { RenderingTarget } from '../types/renderingTarget';
4 | import { enhanceBlocks } from './enhanceBlocks';
5 |
6 | export const enhancePinnedPost = (
7 | format: ArticleFormat,
8 | renderingTarget: RenderingTarget,
9 | pinnedPost: Block | undefined,
10 | ): Block | undefined => {
11 | if (pinnedPost === undefined) {
12 | return undefined;
13 | }
14 |
15 | return enhanceBlocks([pinnedPost], format, {
16 | renderingTarget,
17 | imagesForLightbox: [],
18 | promotedNewsletter: undefined,
19 | hasAffiliateLinksDisclaimer: false,
20 | })[0];
21 | };
22 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/model/sanitise.test.ts:
--------------------------------------------------------------------------------
1 | import { stripHTML } from './sanitise';
2 |
3 | describe('stripHTML', () => {
4 | it('removes all HTML tags', () => {
5 | const test = 'foo bar
';
6 |
7 | expect(stripHTML(test)).toBe('foo bar');
8 | });
9 | });
10 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/model/sanitise.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from 'dompurify';
2 | import createDOMPurify from 'dompurify';
3 | import { JSDOM } from 'jsdom';
4 |
5 | const { window } = new JSDOM('');
6 | const DOMPurify = createDOMPurify(window);
7 |
8 | type Opts = Config & {
9 | RETURN_DOM_FRAGMENT?: false | undefined;
10 | RETURN_DOM?: false | undefined;
11 | };
12 |
13 | export const sanitiseHTML = (html: string, opts: Opts = {}): string =>
14 | DOMPurify.sanitize(html, opts);
15 |
16 | export const stripHTML = (s: string): string =>
17 | DOMPurify.sanitize(s, { ALLOWED_TAGS: [] });
18 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/model/transformDots.ts:
--------------------------------------------------------------------------------
1 | // Fix for incorrect use of Middot
2 | export const transformDots = (html: string): string => {
3 | return html.replace(
4 | new RegExp('[•]', 'g'),
5 | '
2 |
4 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/audio/skip-backward-15.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/audio/skip-forward-15.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/camera.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/chevron-left-single.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/chevron-right-double.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/chevron-right-single.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/clock.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/comment.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/down-arrow.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/email.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/external-link.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/gifting.svg:
--------------------------------------------------------------------------------
1 |
2 |
8 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/info.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/messenger.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/minus.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/newspaper.svg:
--------------------------------------------------------------------------------
1 |
2 |
8 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/plus.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/profile.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/search.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/the-guardian-roundel.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/triangle.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/twitter.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/video-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/logos/hands.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guardian/dotcom-rendering/51a37f970de19d02a8b8db3177563450cb274049/dotcom-rendering/src/static/logos/hands.png
--------------------------------------------------------------------------------
/dotcom-rendering/src/types/badge.ts:
--------------------------------------------------------------------------------
1 | export interface DCRBadgeType {
2 | imageSrc: string;
3 | /** Link to an external sponsor page */
4 | href: string;
5 | }
6 |
7 | export interface FEArticleBadgeType {
8 | seriesTag: string;
9 | imageUrl: string;
10 | enhanced?: DCRBadgeType;
11 | }
12 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/types/footer.ts:
--------------------------------------------------------------------------------
1 | interface FooterLink {
2 | text: string;
3 | url: string;
4 | dataLinkName: string;
5 | extraClasses?: string;
6 | }
7 |
8 | export interface FooterType {
9 | footerLinks: FooterLink[][];
10 | }
11 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/types/liveBlog.ts:
--------------------------------------------------------------------------------
1 | export type LiveUpdateType = {
2 | numNewBlocks: number;
3 | html: string;
4 | mostRecentBlockId: string;
5 | };
6 |
7 | export interface PaginationType {
8 | currentPage: number;
9 | totalPages: number;
10 | newest?: string;
11 | newer?: string;
12 | oldest?: string;
13 | older?: string;
14 | }
15 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/types/matchReport.ts:
--------------------------------------------------------------------------------
1 | import type { TeamType } from './sport';
2 |
3 | export type MatchReportType = {
4 | id: string;
5 | isResult: boolean;
6 | homeTeam: TeamType;
7 | awayTeam: TeamType;
8 | competition: {
9 | fullName: string;
10 | };
11 | isLive: boolean;
12 | venue: string;
13 | comments: string;
14 | minByMinUrl: string;
15 | reportUrl: string;
16 | };
17 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/types/onwards.ts:
--------------------------------------------------------------------------------
1 | import type { FEFormat } from '../frontend/feArticle';
2 | import type { FETrailType } from './trails';
3 |
4 | /**
5 | * Onwards
6 | */
7 | export type FEOnwards = {
8 | heading: string;
9 | trails: FETrailType[];
10 | description?: string;
11 | url?: string;
12 | onwardsSource: OnwardsSource;
13 | format: FEFormat;
14 | isCuratedContent?: boolean;
15 | };
16 |
17 | export type OnwardsSource =
18 | | 'series'
19 | | 'more-on-this-story'
20 | | 'related-stories'
21 | | 'related-content'
22 | | 'more-media-in-section'
23 | | 'more-galleries'
24 | | 'curated-content'
25 | | 'newsletters-page'
26 | | 'unknown-source'; // We should never see this in the analytics data!
27 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/types/renderingTarget.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * A type defining what where we are targeting a particular rendered
3 | * page to be shown
4 | *
5 | * This can be used to make decisions during rendering, where there
6 | * might be differences in the requirements of each target.
7 | *
8 | * Targets:
9 | * - Web => A full web browser, such as chrome or safari on a desktop computer, laptop or phone.
10 | * - Apps => A webview rendered within the Android or iOS live apps
11 | */
12 | export type RenderingTarget = 'Web' | 'Apps';
13 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/types/sentry.ts:
--------------------------------------------------------------------------------
1 | export type ReportError = (
2 | error: Error,
3 | feature: string,
4 | tags?: Record,
5 | extras?: Record,
6 | ) => void;
7 |
--------------------------------------------------------------------------------
/dotcom-rendering/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "noEmit": false
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/dotcom-rendering/webpack/.swcrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "http://json.schemastore.org/swcrc",
3 | "jsc": {
4 | "parser": {
5 | "syntax": "typescript",
6 | "tsx": true,
7 | "decorators": false,
8 | "dynamicImport": true
9 | },
10 | "transform": {
11 | "react": {
12 | "runtime": "automatic",
13 | "importSource": "@emotion/react"
14 | }
15 | }
16 | },
17 | "sourceMaps": true
18 | }
19 |
--------------------------------------------------------------------------------
/dotcom-rendering/webpack/@types/webpack-filter-warnings-plugin/index.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'webpack-filter-warnings-plugin' {
2 | import type { Compiler, WebpackPluginInstance } from 'webpack';
3 |
4 | // eslint-disable-next-line import/no-default-export -- this is how the module exports
5 | export default class FilterWarningsPlugin implements WebpackPluginInstance {
6 | constructor(options: { exclude: RegExp });
7 |
8 | apply(compiler: Compiler): void;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/dotcom-rendering/webpack/@types/webpack-messages/index.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'webpack-messages' {
2 | import type * as webpack from 'webpack';
3 |
4 | type Options = {
5 | name: string;
6 | onComplete?: (...args: unknown[]) => void;
7 | logger?: (msg: string) => void;
8 | };
9 |
10 | class WebpackMessages implements webpack.WebpackPluginInstance {
11 | constructor(options: Options);
12 |
13 | printError(str: string, arr: string[]): void;
14 |
15 | apply(compiler: webpack.Compiler): void;
16 | }
17 |
18 | // eslint-disable-next-line import/no-default-export -- it is how the module is exported
19 | export default WebpackMessages;
20 | }
21 |
--------------------------------------------------------------------------------
/dotcom-rendering/webpack/svg.cjs:
--------------------------------------------------------------------------------
1 | /** @satisfies {import('webpack').RuleSetRule} */
2 | const svgr = {
3 | test: /\.svg$/,
4 | use: [
5 | {
6 | loader: '@svgr/webpack',
7 | options: {
8 | /** this ensures that we keep the viewBox for imported SVGs */
9 | svgo: false,
10 | },
11 | },
12 | ],
13 | };
14 |
15 | module.exports = { svgr };
16 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - 'apps-rendering'
3 | - 'dotcom-rendering'
4 | - 'libs/**'
5 |
--------------------------------------------------------------------------------
/scripts/deno/deno.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowJs": false,
4 | "lib": ["deno.window"],
5 | "strict": true
6 | },
7 | "unstable": ["temporal"],
8 | "fmt": {
9 | "useTabs": true,
10 | "lineWidth": 80,
11 | "indentWidth": 4,
12 | "singleQuote": true,
13 | "proseWrap": "preserve"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/scripts/deno/github.ts:
--------------------------------------------------------------------------------
1 | import { Octokit } from 'npm:octokit@4';
2 |
3 | /** Github token for Authentication */
4 | const token = Deno.env.get('GITHUB_TOKEN');
5 | if (!token) console.warn('Missing GITHUB_TOKEN');
6 |
7 | /**
8 | * A hydrated Octokit with types for the rest API.
9 | */
10 | export const octokit = token ? new Octokit({ auth: token }) : undefined;
11 |
--------------------------------------------------------------------------------
/scripts/deno/json.ts:
--------------------------------------------------------------------------------
1 | export const fetchJSON = async (
2 | url: Parameters[0],
3 | {
4 | headers,
5 | parser,
6 | }: {
7 | headers?: HeadersInit;
8 | parser: (data: unknown) => T | Promise;
9 | },
10 | ): Promise => {
11 | const data: unknown = await fetch(url, { headers }).then((r) => r.json());
12 | return parser(data);
13 | };
14 |
--------------------------------------------------------------------------------
/scripts/env/check-dependencies-mismatches.mjs:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | // @ts-check
4 |
5 | import ar from '../../apps-rendering/package.json' assert { type: 'json' };
6 | import dcr from '../../dotcom-rendering/package.json' assert { type: 'json' };
7 | import { log, warn } from '../log.js';
8 |
9 | log('checking mistmached dependencies between AR & DCR');
10 |
11 | for (const [name, dcrVersion] of Object.entries(dcr.dependencies)) {
12 | const arVersion = ar.dependencies[name];
13 | if (arVersion === undefined) continue;
14 | if (arVersion !== dcrVersion)
15 | warn(['Mismatch:', dcrVersion, '≠', arVersion, '\t', name].join(' '));
16 | }
17 |
--------------------------------------------------------------------------------
/scripts/env/check-package-manager:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | // get the package manager and version we need from package.json
4 | const pkgPackageManager = require('../../package.json').packageManager;
5 |
6 | if (!pkgPackageManager) {
7 | const { warn } = require('../log');
8 | warn(`The 'packageManager' field is missing from the root package.json`);
9 | process.exit(1);
10 | }
11 |
--------------------------------------------------------------------------------
/scripts/postinstall.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | # Automatically copy over required settings for vscode
4 | if [ ! -f .vscode/settings.json ] ;
5 | then echo "No VSCode settings.json found. Copying from repo required settings..." \
6 | && cp .vscode/settings.json.required .vscode/settings.json ;
7 | fi
8 |
--------------------------------------------------------------------------------
24 |
25 | );
26 | };
27 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/components/SoundcloudBlockComponent.amp.tsx:
--------------------------------------------------------------------------------
1 | import type { SoundcloudBlockElement } from '../types/content';
2 |
3 | type Props = {
4 | element: SoundcloudBlockElement;
5 | };
6 |
7 | export const SoundcloudBlockComponent = ({ element }: Props) => {
8 | return element.isTrack ? (
9 |