Skip to content

Commit f38f20c

Browse files
marjisoundmarjisound
committed
Add DCAR fonts to pre-warm assets for iOS
- Add class name to font list in fonts-css.ts - Dynamically create font-face and css classes based on font list and add the styles to rendered-items-assets-template.html - Dynamically create divs with class names from font list in rendered-items-assets-template.html - This is to download the assets on iOS
1 parent 96d6dda commit f38f20c

File tree

7 files changed

+76
-243
lines changed

7 files changed

+76
-243
lines changed

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

Lines changed: 47 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,10 @@ interface FontDisplay {
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/server.dev.ts‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import path from 'node:path';
2-
import { static as expressStatic, type Handler, Router } from 'express';
1+
import { type Handler, Router } from 'express';
32
import { pages } from '../devServer/routers/pages';
43
import { targets } from '../devServer/routers/targets';
54
import { handleAllEditorialNewslettersPage } from './handler.allEditorialNewslettersPage.web';
@@ -120,13 +119,6 @@ renderer.post('/FootballTablesPage', handleFootballTablesPage);
120119
renderer.post('/CricketMatchPage', handleCricketMatchPage);
121120
renderer.post('/FootballMatchSummaryPage', handleFootballMatchPage);
122121

123-
// TODO: Why AR was doing it in both dist annd assets?
124-
renderer.use('/assets', expressStatic(path.resolve(__dirname, '../assets')));
125-
renderer.use(
126-
'/assets',
127-
expressStatic(path.resolve(__dirname, '../dist/assets')),
128-
);
129-
130122
const router = Router();
131123
router.use('/pages', pages);
132124
router.use('/targets', targets);

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import path from 'node:path';
21
import compression from 'compression';
32
import type { ErrorRequestHandler, Request, Response } from 'express';
43
import express from 'express';
@@ -86,9 +85,6 @@ export const prodServer = (): void => {
8685
app.post('/AppsBlocks', logRenderTime, handleAppsBlocks);
8786
app.post('/EditionsCrossword', logRenderTime, handleEditionsCrossword);
8887

89-
// TODO: Why AR was doing it in both dist and assets?
90-
app.use('/assets', express.static(path.resolve(__dirname, '../assets')));
91-
9288
// All params to error handlers must be declared for express to identify them as error middleware
9389
// https://expressjs.com/en/api.html#:~:text=Error%2Dhandling%20middleware%20always,see%3A%20Error%20handling
9490
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- all params to error handlers must be declared

0 commit comments

Comments
 (0)