foo bar
'; 6 | 7 | expect(stripHTML(test)).toBe('foo bar'); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /dotcom-rendering/src/devServer/docs/styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from '@emotion/react'; 2 | import { space } from '@guardian/source/foundations'; 3 | 4 | export const descriptionLinks = css({ 5 | dt: { 6 | paddingBottom: space[1], 7 | }, 8 | dd: { 9 | paddingBottom: space[1], 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /dotcom-rendering/src/static/icons/email.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dotcom-rendering/src/static/icons/info.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /ab-testing/deploy-lambda/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@guardian/tsconfig/tsconfig.json", 3 | "compilerOptions": { 4 | "allowImportingTsExtensions": true, 5 | "allowArbitraryExtensions": false, 6 | "erasableSyntaxOnly": true, 7 | "noEmit": true 8 | }, 9 | "exclude": ["node_modules"] 10 | } 11 | -------------------------------------------------------------------------------- /dotcom-rendering/src/components/ProfileAtomWrapper.importable.tsx: -------------------------------------------------------------------------------- 1 | import type { ProfileAtomProps } from './ProfileAtom.importable'; 2 | import { ProfileAtom } from './ProfileAtom.importable'; 3 | 4 | export const ProfileAtomWrapper = (props: ProfileAtomProps) => { 5 | returnThe Editions app is available on iOS, iPadOS and Android.
4 |Available Pages
5 |-
6 |
- 7 | Crosswords 8 | 9 |
12 | {children}
13 |
14 | );
15 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/experiments/utils.ts:
--------------------------------------------------------------------------------
1 | import { bypassCommercialMetricsSampling } from '@guardian/commercial-core';
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/static/icons/messenger.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/refresh.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/volume-high.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/client/debug/debug.ts:
--------------------------------------------------------------------------------
1 | // @ts-expect-error: Cannot find module
2 | import debugCss from './debug.css';
3 |
4 | const style = document.createElement('style');
5 | // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- We know this will be a string
6 | style.innerHTML = debugCss;
7 | document.body.appendChild(style);
8 |
--------------------------------------------------------------------------------
/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
13 | {children}
14 |
15 | );
16 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/ab-testing/config/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@guardian/tsconfig/tsconfig.json",
3 | "compilerOptions": {
4 | "noEmit": true,
5 | "skipLibCheck": true,
6 | "allowImportingTsExtensions": true,
7 | "erasableSyntaxOnly": true,
8 | "moduleResolution": "nodenext",
9 | "module": "nodenext"
10 | },
11 | "exclude": ["node_modules", "index.ts"]
12 | }
13 |
--------------------------------------------------------------------------------
/ab-testing/frontend/src/app.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | %sveltekit.head%
7 |
8 |
9 | %sveltekit.body%
10 |
11 |
12 |
--------------------------------------------------------------------------------
/dotcom-rendering/fixtures/manual/ensure.ts:
--------------------------------------------------------------------------------
1 | import { isUndefined } from '@guardian/libs';
2 |
3 | export function ensure
11 |
13 | );
14 | };
15 | Default.storyName = 'Default';
16 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/components/numbers/Zero.tsx:
--------------------------------------------------------------------------------
1 | export const Zero = () => (
2 |
5 | );
6 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/arrow-in-circle.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/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 The Guardian live apps, available on iOS, iPadOS and Android.
4 |Available Pages
5 |-
6 |
- 7 | Article 8 | 9 |
- 10 | Interactive 11 | 12 |
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/static/icons/weather/weather-33.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dotcom-rendering/src/components/Border.tsx: -------------------------------------------------------------------------------- 1 | import { css } from '@emotion/react'; 2 | import { from } from '@guardian/source/foundations'; 3 | import { palette as themePalette } from '../palette'; 4 | 5 | export const Border = () => ( 6 | 14 | ); 15 | -------------------------------------------------------------------------------- /dotcom-rendering/src/static/badges/EUReferendumBadge.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dotcom-rendering/src/static/icons/profile.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dotcom-rendering/docs/elements/Subheading.md: -------------------------------------------------------------------------------- 1 | # Subheading Element 2 | 3 | An element which contains a subheading. 4 | 5 | ## CAPI representation 6 | 7 | This element does not exist in CAPI. Subheadings were originally treated as `TextBlockElement`s. 8 | This element was introduced to ensure ads were not inserted after subheadings. 9 | 10 | ## CAPI HTML Output 11 | 12 | This is inserted raw into the document. 13 | -------------------------------------------------------------------------------- /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 | status: string; 17 | }; 18 | -------------------------------------------------------------------------------- /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/src/components/numbers/Five.tsx: -------------------------------------------------------------------------------- 1 | export const Five = () => ( 2 | 8 | ); 9 | -------------------------------------------------------------------------------- /dotcom-rendering/src/server/lib/header.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Formats script paths as a Link header 3 | * @see https://datatracker.ietf.org/doc/html/rfc5988#section-5.5 4 | * @param scriptPaths - the script paths to include in the Link header 5 | */ 6 | export const makePrefetchHeader = (scriptPaths: string[]): string => 7 | scriptPaths.reduce( 8 | (acc, scriptPath) => acc + `<${scriptPath}>; rel=prefetch,`, 9 | '', 10 | ); 11 | -------------------------------------------------------------------------------- /dotcom-rendering/src/components/ItemLinkBlockElement.stories.tsx: -------------------------------------------------------------------------------- 1 | import { ItemLinkBlockElement } from './ItemLinkBlockElement'; 2 | 3 | export default { 4 | component: ItemLinkBlockElement, 5 | title: 'Components/ItemLinkBlockElement', 6 | }; 7 | 8 | export const Default = () => ( 9 |15 | {text} 16 |
17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /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/static/icons/audio/skip-forward-15.svg: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # DCAR: Dotcom & Apps Rendering 2 | 3 | This repository contains the rendering logic for theguardian.com and for a subset of articles in the live apps. 4 | 5 | ## Run 6 | 7 | Go to [dotcom rendering](dotcom-rendering/README.md) for more details. 8 | 9 | ## Root actions 10 | 11 | Most commands are run from within the dotcom-rendering project but the following can be run from the root: 12 | 13 | ### Storybook 14 | 15 | `pnpm storybook` - Runs Storybook for all projects 16 | `pnpm build-storybook` - Builds Storybook for all projects 17 | -------------------------------------------------------------------------------- /dotcom-rendering/src/client/decidePublicPath.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Determine the path that webpack should use as base for dynamic imports 3 | * 4 | * @returns The webpack public path to use 5 | */ 6 | export const decidePublicPath = (): string => { 7 | const isDev = process.env.NODE_ENV === 'development'; 8 | const isLocalHost = window.location.hostname === 'localhost'; 9 | // Use relative path if running locally or in CI 10 | return isDev || isLocalHost 11 | ? '/assets/' 12 | : `${window.guardian.config.frontendAssetsFullURL}assets/`; 13 | }; 14 | -------------------------------------------------------------------------------- /dotcom-rendering/src/devServer/docs/interactive.tsx: -------------------------------------------------------------------------------- 1 | import { Available } from './available'; 2 | 3 | export const Interactive = () => ( 4 | <> 5 |7 | Interactives are actually a kind of article 8 | , but DCAR has a separate endpoint for them for performance reasons. 9 | You can find some examples on the{' '} 10 | 11 | Interactives front 12 | 13 | . 14 |
15 | 16 | ); 17 | -------------------------------------------------------------------------------- /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/static/badges/the-new-populism.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dotcom-rendering/src/components/ItemLinkBlockElement.tsx: -------------------------------------------------------------------------------- 1 | import { css } from '@emotion/react'; 2 | import { textSans17, textSansBold17 } from '@guardian/source/foundations'; 3 | 4 | type Props = { 5 | html: string; 6 | }; 7 | 8 | const itemLinkStyles = css` 9 | ${textSans17} 10 | a { 11 | ${textSansBold17} 12 | } 13 | strong { 14 | display: block; 15 | } 16 | `; 17 | 18 | export const ItemLinkBlockElement = ({ html }: Props) => { 19 | return ( 20 | 21 | ); 22 | }; 23 | -------------------------------------------------------------------------------- /dotcom-rendering/src/devServer/routers/targets.tsx: -------------------------------------------------------------------------------- 1 | import { Router } from 'express'; 2 | import { Targets } from '../docs/targets'; 3 | import { sendReact } from '../send'; 4 | import { dotcom } from './dotcom'; 5 | import { editionsApp } from './editionsApp'; 6 | import { liveApps } from './liveApps'; 7 | 8 | const targets = Router(); 9 | 10 | targets.get('/', sendReact('Targets',
10 |
23 | );
24 |
--------------------------------------------------------------------------------
/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/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/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/components/Discussion/Row.tsx:
--------------------------------------------------------------------------------
1 | import { css, type SerializedStyles } from '@emotion/react';
2 |
3 | type Props = {
4 | children: React.ReactNode;
5 | wrap?: boolean;
6 | cssOverrides?: SerializedStyles | SerializedStyles[];
7 | };
8 |
9 | const rowStyles = css`
10 | display: flex;
11 | flex-direction: row;
12 | `;
13 |
14 | export const Row = ({ children, wrap = false, cssOverrides }: Props) => (
15 |
11 |
14 | Small (50px)
13 |
15 |
18 | Default (71px)
17 |
19 |
22 | Large (200px)
21 |
19 | {children}
20 |
21 | );
22 |
--------------------------------------------------------------------------------
/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 |-
9 |
- 10 | Dotcom 11 | 12 |
- 13 | Live Apps 14 | 15 |
- 16 | Editions App 17 | 18 |
- 19 | AMP 20 | 21 |
20 | {children}
21 |
22 | );
23 |
--------------------------------------------------------------------------------
/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] = useState7 | These pages are summaries of cricket matches, and contain various 8 | statistics about a match, including batters, bowlers, and the fall 9 | of wickets. They are typically reached from a link at the top of 10 | some recent{' '} 11 | 12 | cricket liveblogs 13 | 14 | , which are a kind of article. 15 |
16 | 17 | ); 18 | -------------------------------------------------------------------------------- /dotcom-rendering/src/static/icons/weather/weather-15.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dotcom-rendering/src/static/icons/weather/weather-16.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /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/docs/contracts/002-viewer-body-selector.md: -------------------------------------------------------------------------------- 1 | # Viewer Body Selector 2 | 3 | ## What is the contract? 4 | 5 | We place the `article-body-viewer-selector` class on the container element for the article body. 6 | 7 | ## Where is it relied upon? 8 | 9 | [Here](https://github.com/guardian/editorial-viewer/blob/714862c72d8070e18715f01b04a64f2fd2500ff2/public/javascript/components/viewer.js#L252) is where the viewer from composer selects links from the article body of preview articles. 10 | 11 | ## Why is it required? 12 | 13 | Special behaviour is added to links in viewer to control whether or not the link opens in a new tab or within the iframe. 14 | -------------------------------------------------------------------------------- /dotcom-rendering/fixtures/manual/noTopPicks.ts: -------------------------------------------------------------------------------- 1 | export const noTopPicks = { 2 | status: 'ok', 3 | page: 1, 4 | pages: 1, 5 | pageSize: 50, 6 | orderBy: 'oldest', 7 | discussion: { 8 | key: '/p/39f5z', 9 | webUrl: 'https://www.theguardian.com/science/grrlscientist/2012/aug/07/3', 10 | apiUrl: 'https://discussion.guardianapis.com/discussion-api/discussion//p/39f5z', 11 | commentCount: 496, 12 | topLevelCommentCount: 405, 13 | isClosedForComments: false, 14 | isClosedForRecommendation: false, 15 | isThreaded: true, 16 | title: 'Mystery bird: black-and-red broadbill, Cymbirhynchus macrorhynchos story', 17 | comments: [], 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /dotcom-rendering/src/client/islands/onInteraction.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Use this function to delay execution of something until an element is interacted 3 | * with 4 | * 5 | * @param element : The html element that we want to wait for an interaction on; 6 | * @param callback : This is fired when the element is clicked on 7 | */ 8 | export const onInteraction = ( 9 | element: HTMLElement, 10 | callback: (e: HTMLElement) => Promise
7 | The{' '}
8 |
9 | all newsletters page
10 | {' '}
11 | is a list of the currently published Editorial email newsletters,
12 | and includes a way to sign up to several at once. It's powered by
13 | the Newsletters API and configured in the Newsletters Tool. The
14 | email newsletters themselves are rendered by{' '}
15 | email-rendering and frontend, not DCAR.
16 |
24 |
25 | );
26 | };
27 |
--------------------------------------------------------------------------------
/dotcom-rendering/docs/development/storybook.md:
--------------------------------------------------------------------------------
1 | # Storybook
2 |
3 | We use Storybook to visualise our components in an isolated environment, where we can tweak the conditions as we want.
4 | We use Chromatic for visual regression testing of Storybook components.
5 |
6 | ## Rendering context
7 |
8 | We use context for static, global state in the dotcom-rendering app, so every story is wrapped in a context provider component. In the real world, our top component includes this context provider.
9 |
10 | In Storybook is largely invisible as it's hidden within the [configuration](dotcom-rendering/.storybook). There's a decorator configured to wrap around stories and log the context output to the console, for easier debugging.
11 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/client/userFeatures/cookies/userBenefitsExpiry.ts:
--------------------------------------------------------------------------------
1 | import { getCookie } from '@guardian/libs';
2 |
3 | export const USER_BENEFITS_EXPIRY_COOKIE = 'gu_user_benefits_expiry';
4 |
5 | export const getUserBenefitsExpiryCookie = (): string | null =>
6 | getCookie({ name: USER_BENEFITS_EXPIRY_COOKIE });
7 |
8 | export const userBenefitsDataNeedsRefreshing = (): boolean =>
9 | !userBenefitsDataIsUpToDate();
10 |
11 | export const userBenefitsDataIsUpToDate = (): boolean => {
12 | const cookieValue = getUserBenefitsExpiryCookie();
13 | if (!cookieValue) return false;
14 | const expiryTime = parseInt(cookieValue, 10);
15 | const timeNow = new Date().getTime();
16 | return timeNow < expiryTime;
17 | };
18 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/components/InteractivesNativePlatformWrapper.importable.tsx:
--------------------------------------------------------------------------------
1 | import { NativePlatform } from '@guardian/bridget';
2 | import { log } from '@guardian/libs';
3 | import { useEffect } from 'react';
4 | import { getInteractivesClient } from '../lib/bridgetApi';
5 |
6 | export const InteractivesNativePlatformWrapper = () => {
7 | useEffect(() => {
8 | void getInteractivesClient()
9 | .getNativePlatform()
10 | .then((platform) =>
11 | document.documentElement.setAttribute(
12 | 'data-app-os',
13 | NativePlatform[platform],
14 | ),
15 | )
16 | .catch((error) => {
17 | log('dotcom', 'getNativePlatform check failed:', error);
18 | });
19 | }, []);
20 | return null;
21 | };
22 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/affiliateLinksUtils.ts:
--------------------------------------------------------------------------------
1 | /** A function to check if a URL represents an affiliate link */
2 | export const isSkimlink = (url?: string): boolean => {
3 | try {
4 | return !!url && new URL(url).host === 'go.skimresources.com';
5 | } catch (err: unknown) {
6 | // If not a valid URL, it won't be an affiliate link
7 | return false;
8 | }
9 | };
10 |
11 | /** A function to fetch the Skimlinks account ID from the URL to then pass it into the xcust*/
12 | export const getSkimlinksAccountId = (url?: string): string => {
13 | try {
14 | if (!url) return '';
15 | const parsedUrl = new URL(url);
16 | return parsedUrl.searchParams.get('id') ?? '';
17 | } catch {
18 | return '';
19 | }
20 | };
21 |
--------------------------------------------------------------------------------
/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/docs/architecture/014-client-side-computation.md:
--------------------------------------------------------------------------------
1 | # Client Side Computation
2 |
3 | ## Context
4 |
5 | When preparing data for the rendering components we currently have up to three possible locations to do so: (1) the frontend Scala backend, (2) the dotcom rendering backend and (3) the end user's client side.
6 |
7 | In the interest of the user, we should avoid postponing computation to the client side and precompute data and state on either of the two backends whenever possible.
8 |
9 | ## Decision
10 |
11 | - Favour computation in frontend over computation in dotcom-rendering
12 | - Favour computation on dotcom-rendering server than computation on the client
13 |
14 | ## Status
15 |
16 | Approved
17 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/badges/australian-election-2019.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/components/QuoteIcon.tsx:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/react';
2 |
3 | const base = css`
4 | height: 0.7em;
5 | width: auto;
6 | vertical-align: baseline;
7 | margin-right: 4px;
8 | `;
9 | type Props = {
10 | colour: string;
11 | };
12 |
13 | /**
14 | * An inline quote icon (“) sized to match the font size.
15 | */
16 | export const QuoteIcon = ({ colour }: Props) => (
17 | /* This viewBox is narrower than Source’s SvgQuote */
18 |
21 | );
22 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/icons/weather/weather-22.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/components/LastUpdated.tsx:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/react';
2 | import { textSans12 } from '@guardian/source/foundations';
3 | import { palette } from '../palette';
4 | import { DateTime } from './DateTime';
5 |
6 | const LastUpdated = ({ lastUpdated }: { lastUpdated: number }) => {
7 | return (
8 |
16 | Updated at
17 |
24 | );
25 | };
26 |
27 | export { LastUpdated };
28 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/components/InteractivesDisableArticleSwipe.importable.tsx:
--------------------------------------------------------------------------------
1 | import { log } from '@guardian/libs';
2 | import { useEffect } from 'react';
3 | import { getInteractionClient } from '../lib/bridgetApi';
4 |
5 | export const InteractivesDisableArticleSwipe = () => {
6 | const onTouchStart = () => {
7 | getInteractionClient()
8 | .disableArticleSwipe(true)
9 | .catch((error) => {
10 | log('dotcom', 'disableArticleSwipe failed', error);
11 | });
12 | };
13 | useEffect(() => {
14 | document.addEventListener('touchstart', onTouchStart, {
15 | passive: true,
16 | });
17 |
18 | return () => {
19 | document.removeEventListener('touchstart', onTouchStart);
20 | };
21 | }, []);
22 | return null;
23 | };
24 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/components/RightColumn.tsx:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/react';
2 | import { from, until } from '@guardian/source/foundations';
3 | import type { Breakpoint } from '@guardian/source/foundations';
4 |
5 | const hideBelow = (showFrom: Breakpoint) => css`
6 | ${until[showFrom]} {
7 | display: none;
8 | }
9 |
10 | ${from[showFrom]} {
11 | height: 100%;
12 | display: block;
13 | flex-basis: 300px;
14 | flex-grow: 0;
15 | flex-shrink: 0;
16 | }
17 | `;
18 |
19 | type Props = {
20 | children: React.ReactNode;
21 | showFrom?: Breakpoint;
22 | };
23 |
24 | export const RightColumn = ({ children, showFrom = 'desktop' }: Props) => {
25 | return
19 |
21 | );
22 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/model/buildCrosswordBlock.ts:
--------------------------------------------------------------------------------
1 | import type { FEArticle } from '../frontend/feArticle';
2 | import type { Block } from '../types/blocks';
3 |
4 | export const buildCrosswordBlock = (data: FEArticle): Block | undefined => {
5 | return data.crossword
6 | ? {
7 | id: data.crossword.id,
8 | elements: [
9 | {
10 | _type: 'model.dotcomrendering.pageElements.CrosswordElement',
11 | crossword: data.crossword,
12 | },
13 | ],
14 | attributes: {
15 | pinned: false,
16 | keyEvent: false,
17 | summary: false,
18 | },
19 | primaryDateLine: data.webPublicationDateDisplay,
20 | secondaryDateLine: data.webPublicationSecondaryDateDisplay,
21 | }
22 | : undefined;
23 | };
24 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/static/badges/nhs-70.svg:
--------------------------------------------------------------------------------
1 |
15 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/storyPackage.ts:
--------------------------------------------------------------------------------
1 | import type { FEStoryPackage } from './frontend/feArticle';
2 | import { decideTrail, decideTrailWithMasterImage } from './lib/decideTrail';
3 | import type { TrailType } from './types/trails';
4 |
5 | export type StoryPackage = {
6 | heading: string;
7 | trails: TrailType[];
8 | };
9 |
10 | export const parse = (
11 | feStoryPackage: FEStoryPackage | undefined,
12 | withMasterImage: boolean = false,
13 | ): StoryPackage | undefined => {
14 | if (feStoryPackage === undefined) {
15 | return undefined;
16 | }
17 |
18 | return {
19 | heading: feStoryPackage.heading,
20 | trails: feStoryPackage.trails.map(
21 | withMasterImage ? decideTrailWithMasterImage : decideTrail,
22 | ),
23 | };
24 | };
25 |
--------------------------------------------------------------------------------
/ab-testing/frontend/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./.svelte-kit/tsconfig.json",
3 | "compilerOptions": {
4 | "allowJs": true,
5 | "checkJs": true,
6 | "esModuleInterop": true,
7 | "forceConsistentCasingInFileNames": true,
8 | "resolveJsonModule": true,
9 | "skipLibCheck": true,
10 | "sourceMap": true,
11 | "strict": true,
12 | "moduleResolution": "bundler"
13 | }
14 | // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
15 | // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
16 | //
17 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
18 | // from the referenced tsconfig.json - TypeScript does not merge them in
19 | }
20 |
--------------------------------------------------------------------------------
/dotcom-rendering/.storybook/decorators/configContextDecorator.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ConfigProvider } from '../../src/components/ConfigContext';
3 | import type { Decorator } from '@storybook/react-webpack5';
4 | import { Config } from '../../src/types/configContext';
5 |
6 | const defaultConfig = {
7 | renderingTarget: 'Web',
8 | darkModeAvailable: false,
9 | assetOrigin: '/',
10 | editionId: 'UK',
11 | } satisfies Config;
12 |
13 | export const ConfigContextDecorator: Decorator<{
14 | config: Config;
15 | }> = (Story, { parameters: { config } }) => {
16 | const context = { ...defaultConfig, ...config };
17 |
18 | return (
19 |
19 |
23 |
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/parser/parseCheckoutOutCookieData.ts:
--------------------------------------------------------------------------------
1 | import type { CheckoutCompleteCookieData } from '../../components/SignInGate/types';
2 | import { isCheckoutCompleteCookieData } from '../../components/SignInGate/types';
3 | import { safeJsonParse } from './jsonParser';
4 |
5 | export const parseCheckoutCompleteCookieData = (
6 | checkoutCompleteStr: string,
7 | ): CheckoutCompleteCookieData | undefined => {
8 | const decodedCookieString = decodeURIComponent(checkoutCompleteStr);
9 | if (decodedCookieString === checkoutCompleteStr) return undefined;
10 | const parseResult = safeJsonParse(isCheckoutCompleteCookieData)(
11 | decodeURIComponent(checkoutCompleteStr),
12 | );
13 | return !parseResult.hasError ? parseResult.parsed : undefined;
14 | };
15 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/useCountryCode.ts:
--------------------------------------------------------------------------------
1 | import { type CountryCode, isNonNullable } from '@guardian/libs';
2 | import { useEffect, useState } from 'react';
3 | import { getLocaleCode } from './getCountryCode';
4 |
5 | export const useCountryCode = (feature: string): CountryCode | undefined => {
6 | const [countryCode, setCountryCode] = useState
23 |
27 | );
28 |
--------------------------------------------------------------------------------
/dotcom-rendering/src/lib/sendTargetingParams.apps.ts:
--------------------------------------------------------------------------------
1 | import type { EditionCommercialProperties } from '../types/commercial';
2 |
3 | export const getTargetingParams = (
4 | editionCommercialProperties: EditionCommercialProperties,
5 | ): Map