Skip to content

Commit 08bc2d6

Browse files
marjisoundmarjisound
authored
Merge pull request #14816 from guardian/add-ios-pre-warm-asset-to-dcar
Add ios pre warm assets to dcar
2 parents 4e48b66 + df92cc2 commit 08bc2d6

File tree

4 files changed

+118
-11
lines changed

4 files changed

+118
-11
lines changed

‎dotcom-rendering/src/lib/fonts-css.ts‎

Lines changed: 48 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,17 @@ type FontFamily =
88

99
type FontStyle = 'normal' | 'italic';
1010

11-
interface FontDisplay {
11+
export interface FontDisplay {
1212
family: FontFamily;
1313
woff2: string;
1414
woff: string;
1515
ttf: string;
1616
weight: number;
1717
style: FontStyle;
18+
uniqueName: string;
1819
}
1920

20-
const fontList: FontDisplay[] = [
21+
export const fontList: FontDisplay[] = [
2122
// GH Guardian Headline, with legacy family name of Guardian Egyptian Web
2223
{
2324
family: 'GH Guardian Headline',
@@ -26,6 +27,7 @@ const fontList: FontDisplay[] = [
2627
ttf: 'fonts/guardian-headline/latin1-not-hinted/GHGuardianHeadline-Light.ttf',
2728
weight: 300,
2829
style: 'normal',
30+
uniqueName: 'GHGuardianHeadline-Light',
2931
},
3032
{
3133
family: 'Guardian Egyptian Web',
@@ -34,6 +36,7 @@ const fontList: FontDisplay[] = [
3436
ttf: 'fonts/guardian-headline/latin1-not-hinted/GHGuardianHeadline-Light.ttf',
3537
weight: 300,
3638
style: 'normal',
39+
uniqueName: 'GuardianEgyptian-Light',
3740
},
3841
{
3942
family: 'GH Guardian Headline',
@@ -42,6 +45,7 @@ const fontList: FontDisplay[] = [
4245
ttf: 'fonts/guardian-headline/latin1-not-hinted/GHGuardianHeadline-LightItalic.ttf',
4346
weight: 300,
4447
style: 'italic',
48+
uniqueName: 'GHGuardianHeadline-LightItalic',
4549
},
4650
{
4751
family: 'Guardian Egyptian Web',
@@ -50,6 +54,7 @@ const fontList: FontDisplay[] = [
5054
ttf: 'fonts/guardian-headline/latin1-not-hinted/GHGuardianHeadline-LightItalic.ttf',
5155
weight: 300,
5256
style: 'italic',
57+
uniqueName: 'GuardianEgyptian-LightItalic',
5358
},
5459
{
5560
family: 'GH Guardian Headline',
@@ -58,6 +63,7 @@ const fontList: FontDisplay[] = [
5863
ttf: 'fonts/guardian-headline/latin1-not-hinted/GHGuardianHeadline-Medium.ttf',
5964
weight: 500,
6065
style: 'normal',
66+
uniqueName: 'GHGuardianHeadline-Medium',
6167
},
6268
{
6369
family: 'Guardian Egyptian Web',
@@ -66,6 +72,7 @@ const fontList: FontDisplay[] = [
6672
ttf: 'fonts/guardian-headline/latin1-not-hinted/GHGuardianHeadline-Medium.ttf',
6773
weight: 500,
6874
style: 'normal',
75+
uniqueName: 'GuardianEgyptian-Medium',
6976
},
7077
{
7178
family: 'GH Guardian Headline',
@@ -74,6 +81,7 @@ const fontList: FontDisplay[] = [
7481
ttf: 'fonts/guardian-headline/latin1-not-hinted/GHGuardianHeadline-MediumItalic.ttf',
7582
weight: 500,
7683
style: 'italic',
84+
uniqueName: 'GHGuardianHeadline-MediumItalic',
7785
},
7886
{
7987
family: 'Guardian Egyptian Web',
@@ -82,6 +90,7 @@ const fontList: FontDisplay[] = [
8290
ttf: 'fonts/guardian-headline/latin1-not-hinted/GHGuardianHeadline-MediumItalic.ttf',
8391
weight: 500,
8492
style: 'italic',
93+
uniqueName: 'GuardianEgyptian-MediumItalic',
8594
},
8695
{
8796
family: 'GH Guardian Headline',
@@ -90,6 +99,7 @@ const fontList: FontDisplay[] = [
9099
ttf: 'fonts/guardian-headline/latin1-not-hinted/GHGuardianHeadline-Bold.ttf',
91100
weight: 700,
92101
style: 'normal',
102+
uniqueName: 'GHGuardianHeadline-Bold',
93103
},
94104
{
95105
family: 'Guardian Egyptian Web',
@@ -98,6 +108,7 @@ const fontList: FontDisplay[] = [
98108
ttf: 'fonts/guardian-headline/latin1-not-hinted/GHGuardianHeadline-Bold.ttf',
99109
weight: 700,
100110
style: 'normal',
111+
uniqueName: 'GuardianEgyptian-Bold',
101112
},
102113
{
103114
family: 'GH Guardian Headline',
@@ -106,6 +117,7 @@ const fontList: FontDisplay[] = [
106117
ttf: 'fonts/guardian-headline/latin1-not-hinted/GHGuardianHeadline-BoldItalic.ttf',
107118
weight: 700,
108119
style: 'italic',
120+
uniqueName: 'GHGuardianHeadline-BoldItalic',
109121
},
110122
{
111123
family: 'Guardian Egyptian Web',
@@ -114,6 +126,7 @@ const fontList: FontDisplay[] = [
114126
ttf: 'fonts/guardian-headline/latin1-not-hinted/GHGuardianHeadline-BoldItalic.ttf',
115127
weight: 700,
116128
style: 'italic',
129+
uniqueName: 'GuardianEgyptian-BoldItalic',
117130
},
118131
// GuardianTextEgyptian, with legacy family name of Guardian Text Egyptian Web
119132
{
@@ -123,6 +136,7 @@ const fontList: FontDisplay[] = [
123136
ttf: 'fonts/guardian-textegyptian/latin1-not-hinted/GuardianTextEgyptian-Regular.ttf',
124137
weight: 400,
125138
style: 'normal',
139+
uniqueName: 'GuardianTextEgyptian-Regular',
126140
},
127141
{
128142
family: 'Guardian Text Egyptian Web',
@@ -131,6 +145,7 @@ const fontList: FontDisplay[] = [
131145
ttf: 'fonts/guardian-textegyptian/latin1-not-hinted/GuardianTextEgyptian-Regular.ttf',
132146
weight: 400,
133147
style: 'normal',
148+
uniqueName: 'GuardianTextEgyptianWeb-Regular',
134149
},
135150
{
136151
family: 'GuardianTextEgyptian',
@@ -139,6 +154,7 @@ const fontList: FontDisplay[] = [
139154
ttf: 'fonts/guardian-textegyptian/latin1-not-hinted/GuardianTextEgyptian-RegularItalic.ttf',
140155
weight: 400,
141156
style: 'italic',
157+
uniqueName: 'GuardianTextEgyptian-RegularItalic',
142158
},
143159
{
144160
family: 'Guardian Text Egyptian Web',
@@ -147,6 +163,7 @@ const fontList: FontDisplay[] = [
147163
ttf: 'fonts/guardian-textegyptian/latin1-not-hinted/GuardianTextEgyptian-RegularItalic.ttf',
148164
weight: 400,
149165
style: 'italic',
166+
uniqueName: 'GuardianTextEgyptianWeb-RegularItalic',
150167
},
151168
{
152169
family: 'GuardianTextEgyptian',
@@ -155,6 +172,7 @@ const fontList: FontDisplay[] = [
155172
ttf: 'fonts/guardian-textegyptian/latin1-not-hinted/GuardianTextEgyptian-Bold.ttf',
156173
weight: 700,
157174
style: 'normal',
175+
uniqueName: 'GuardianTextEgyptian-Bold',
158176
},
159177
{
160178
family: 'Guardian Text Egyptian Web',
@@ -163,6 +181,7 @@ const fontList: FontDisplay[] = [
163181
ttf: 'fonts/guardian-textegyptian/latin1-not-hinted/GuardianTextEgyptian-Bold.ttf',
164182
weight: 700,
165183
style: 'normal',
184+
uniqueName: 'GuardianTextEgyptianWeb-Bold',
166185
},
167186
{
168187
family: 'GuardianTextEgyptian',
@@ -171,6 +190,7 @@ const fontList: FontDisplay[] = [
171190
ttf: 'fonts/guardian-textegyptian/latin1-not-hinted/GuardianTextEgyptian-BoldItalic.ttf',
172191
weight: 700,
173192
style: 'italic',
193+
uniqueName: 'GuardianTextEgyptian-BoldItalic',
174194
},
175195
{
176196
family: 'Guardian Text Egyptian Web',
@@ -179,6 +199,7 @@ const fontList: FontDisplay[] = [
179199
ttf: 'fonts/guardian-textegyptian/latin1-not-hinted/GuardianTextEgyptian-BoldItalic.ttf',
180200
weight: 700,
181201
style: 'italic',
202+
uniqueName: 'GuardianTextEgyptianWeb-BoldItalic',
182203
},
183204
// GuardianTextSans, with legacy family name of Guardian Text Sans Web
184205
{
@@ -188,6 +209,7 @@ const fontList: FontDisplay[] = [
188209
ttf: 'fonts/guardian-textsans/latin1-not-hinted/GuardianTextSans-Regular.ttf',
189210
weight: 400,
190211
style: 'normal',
212+
uniqueName: 'GuardianTextSans-Regular',
191213
},
192214
{
193215
family: 'Guardian Text Sans Web',
@@ -196,6 +218,7 @@ const fontList: FontDisplay[] = [
196218
ttf: 'fonts/guardian-textsans/latin1-not-hinted/GuardianTextSans-Regular.ttf',
197219
weight: 400,
198220
style: 'normal',
221+
uniqueName: 'GuardianTextSansWeb-Regular',
199222
},
200223
{
201224
family: 'GuardianTextSans',
@@ -204,6 +227,7 @@ const fontList: FontDisplay[] = [
204227
ttf: 'fonts/guardian-textsans/latin1-not-hinted/GuardianTextSans-RegularItalic.ttf',
205228
weight: 400,
206229
style: 'italic',
230+
uniqueName: 'GuardianTextSans-RegularItalic',
207231
},
208232
{
209233
family: 'Guardian Text Sans Web',
@@ -212,6 +236,7 @@ const fontList: FontDisplay[] = [
212236
ttf: 'fonts/guardian-textsans/latin1-not-hinted/GuardianTextSans-RegularItalic.ttf',
213237
weight: 400,
214238
style: 'italic',
239+
uniqueName: 'GuardianTextSansWeb-RegularItalic',
215240
},
216241
{
217242
family: 'GuardianTextSans',
@@ -220,6 +245,7 @@ const fontList: FontDisplay[] = [
220245
ttf: 'fonts/guardian-textsans/latin1-not-hinted/GuardianTextSans-Bold.ttf',
221246
weight: 700,
222247
style: 'normal',
248+
uniqueName: 'GuardianTextSans-Bold',
223249
},
224250
{
225251
family: 'Guardian Text Sans Web',
@@ -228,6 +254,7 @@ const fontList: FontDisplay[] = [
228254
ttf: 'fonts/guardian-textsans/latin1-not-hinted/GuardianTextSans-Bold.ttf',
229255
weight: 700,
230256
style: 'normal',
257+
uniqueName: 'GuardianTextSansWeb-Bold',
231258
},
232259
{
233260
family: 'GuardianTextSans',
@@ -236,6 +263,7 @@ const fontList: FontDisplay[] = [
236263
ttf: 'fonts/guardian-textsans/latin1-not-hinted/GuardianTextSans-BoldItalic.ttf',
237264
weight: 700,
238265
style: 'italic',
266+
uniqueName: 'GuardianTextSans-BoldItalic',
239267
},
240268
{
241269
family: 'Guardian Text Sans Web',
@@ -244,24 +272,33 @@ const fontList: FontDisplay[] = [
244272
ttf: 'fonts/guardian-textsans/latin1-not-hinted/GuardianTextSans-BoldItalic.ttf',
245273
weight: 700,
246274
style: 'italic',
275+
uniqueName: 'GuardianTextSansWeb-BoldItalic',
247276
},
248277
];
249278

250-
const getFontUrl = (path: string): string =>
251-
`https://assets.guim.co.uk/static/frontend/${path}`;
279+
const getFontUrl = (filePath: string): string =>
280+
`https://assets.guim.co.uk/static/frontend/${filePath}`;
252281

253-
export const rawFontsCss = fontList
254-
.map(
255-
(font) => `
256-
@font-face {
282+
const getFontFaceCss = (font: FontDisplay): string => `@font-face {
257283
font-family: "${font.family}";
258284
src: url(${getFontUrl(font.woff2)}) format("woff2"),
259285
url(${getFontUrl(font.woff)}) format("woff"),
260286
url(${getFontUrl(font.ttf)}) format("truetype");
261287
font-weight: ${font.weight};
262288
font-style: ${font.style};
263289
font-display: swap;
264-
}
265-
`,
266-
)
290+
}`;
291+
292+
export const rawFontsCss = fontList.map(getFontFaceCss).join('\n');
293+
294+
export const rawFontsCssWithClassNames = fontList
295+
.map((font) => {
296+
return `
297+
${getFontFaceCss(font)}
298+
.${font.uniqueName} {
299+
font-family: "${font.family}";
300+
font-weight: ${font.weight};
301+
font-style: ${font.style};
302+
}`;
303+
})
267304
.join('\n');

‎dotcom-rendering/src/server/handler.assets.apps.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { createHash } from 'node:crypto';
2+
import { isString } from '@guardian/libs';
3+
import { type RequestHandler } from 'express';
4+
import { renderToString } from 'react-dom/server';
5+
import { generateScriptTags, getPathFromManifest } from '../lib/assets';
6+
import {
7+
type FontDisplay,
8+
fontList,
9+
rawFontsCssWithClassNames,
10+
} from '../lib/fonts-css';
11+
12+
export const handleAppsAssets: RequestHandler = (req, res) => {
13+
const clientScripts = [
14+
getPathFromManifest('client.apps', 'index.js'),
15+
].filter(isString);
16+
17+
const scriptTags = generateScriptTags([...clientScripts]);
18+
const html = buildHtml(scriptTags);
19+
res.status(200).send(html);
20+
};
21+
22+
type Props = {
23+
fontList: FontDisplay[];
24+
};
25+
26+
export const buildHtml = (scriptTags: string[]) => {
27+
const body = renderToString(<AssetsPage fontList={fontList} />);
28+
29+
return `<!doctype html>
30+
<html lang='en'>
31+
<head>
32+
<title>The Guardian Rendered Items Assets Html</title>
33+
<meta charset='utf-8'>
34+
35+
<style>
36+
${rawFontsCssWithClassNames}
37+
</style>
38+
39+
<meta http-equiv='Content-Security-Policy' content="style-src 'sha256-${assetHash(
40+
rawFontsCssWithClassNames,
41+
)}';">
42+
43+
${scriptTags.join('\n')}
44+
45+
<body>
46+
${body}
47+
</body>
48+
</html>`;
49+
};
50+
51+
const assetHash = (asset: string) =>
52+
createHash('sha256').update(asset).digest('base64');
53+
54+
export const AssetsPage = ({ fontList: fonts }: Props) => {
55+
return (
56+
<>
57+
{fonts.map((font) => (
58+
<div key={font.uniqueName} className={font.uniqueName}>
59+
.
60+
</div>
61+
))}
62+
</>
63+
);
64+
};

‎dotcom-rendering/src/server/server.dev.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
handleBlocks,
1313
handleInteractive,
1414
} from './handler.article.web';
15+
import { handleAppsAssets } from './handler.assets.apps';
1516
import { handleEditionsCrossword } from './handler.editionsCrossword';
1617
import { handleFront, handleTagPage } from './handler.front.web';
1718
import {
@@ -119,6 +120,8 @@ renderer.post('/FootballTablesPage', handleFootballTablesPage);
119120
renderer.post('/CricketMatchPage', handleCricketMatchPage);
120121
renderer.post('/FootballMatchSummaryPage', handleFootballMatchPage);
121122

123+
renderer.get('/assets/rendered-items-assets', handleAppsAssets);
124+
122125
const router = Router();
123126
router.use('/pages', pages);
124127
router.use('/targets', targets);

‎dotcom-rendering/src/server/server.prod.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
handleBlocks,
1515
handleInteractive,
1616
} from './handler.article.web';
17+
import { handleAppsAssets } from './handler.assets.apps';
1718
import { handleEditionsCrossword } from './handler.editionsCrossword';
1819
import { handleFront, handleTagPage } from './handler.front.web';
1920
import {
@@ -85,6 +86,8 @@ export const prodServer = (): void => {
8586
app.post('/AppsBlocks', logRenderTime, handleAppsBlocks);
8687
app.post('/EditionsCrossword', logRenderTime, handleEditionsCrossword);
8788

89+
app.get('/assets/rendered-items-assets', handleAppsAssets);
90+
8891
// All params to error handlers must be declared for express to identify them as error middleware
8992
// https://expressjs.com/en/api.html#:~:text=Error%2Dhandling%20middleware%20always,see%3A%20Error%20handling
9093
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- all params to error handlers must be declared

0 commit comments

Comments
 (0)