Skip to content

Commit 96d6dda

Browse files
marjisoundmarjisound
committed
Add ios pre warm assets to dcar
1 parent 5a31639 commit 96d6dda

File tree

7 files changed

+311
-41
lines changed

7 files changed

+311
-41
lines changed

‎dotcom-rendering/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@
6767
"@types/express": "5.0.1",
6868
"@types/he": "1.2.0",
6969
"@types/html-minifier-terser": "7.0.2",
70+
"@types/html-webpack-plugin": "3.2.9",
7071
"@types/jest": "29.5.14",
7172
"@types/jsdom": "21.1.1",
7273
"@types/k6": "0.52.0",
@@ -122,6 +123,7 @@
122123
"find": "0.3.0",
123124
"he": "1.2.0",
124125
"html-minifier-terser": "7.2.0",
126+
"html-webpack-plugin": "5.6.4",
125127
"is-mobile": "3.1.1",
126128
"jest": "29.7.0",
127129
"jest-environment-jsdom": "29.7.0",

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { type Handler, Router } from 'express';
1+
import path from 'node:path';
2+
import { static as expressStatic, type Handler, Router } from 'express';
23
import { pages } from '../devServer/routers/pages';
34
import { targets } from '../devServer/routers/targets';
45
import { handleAllEditorialNewslettersPage } from './handler.allEditorialNewslettersPage.web';
@@ -119,6 +120,13 @@ renderer.post('/FootballTablesPage', handleFootballTablesPage);
119120
renderer.post('/CricketMatchPage', handleCricketMatchPage);
120121
renderer.post('/FootballMatchSummaryPage', handleFootballMatchPage);
121122

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+
122130
const router = Router();
123131
router.use('/pages', pages);
124132
router.use('/targets', targets);

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

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

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

‎dotcom-rendering/webpack/assets-styles.js‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
const assetsCss = `
2+
@font-face {
3+
font-family: Guardian Text Egyptian Web;
4+
font-weight: 400;
5+
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-Regular.ttf");
6+
}
7+
.GuardianTextEgyptian-Reg {
8+
font-family: Guardian Text Egyptian Web;
9+
font-weight: 400;
10+
}
11+
@font-face {
12+
font-family: Guardian Text Egyptian Web;
13+
font-style: italic;
14+
font-weight: 400;
15+
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-RegularItalic.ttf");
16+
}
17+
.GuardianTextEgyptian-RegItalic {
18+
font-family: Guardian Text Egyptian Web;
19+
font-style: italic;
20+
font-weight: 400;
21+
}
22+
@font-face {
23+
font-family: Guardian Text Egyptian Web;
24+
font-weight: 700;
25+
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-Bold.ttf");
26+
}
27+
.GuardianTextEgyptian-Bold {
28+
font-family: Guardian Text Egyptian Web;
29+
font-weight: 700;
30+
}
31+
@font-face {
32+
font-family: Guardian Text Egyptian Web;
33+
font-style: italic;
34+
font-weight: 700;
35+
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-BoldItalic.ttf");
36+
}
37+
.GuardianTextEgyptian-BoldItalic {
38+
font-family: Guardian Text Egyptian Web;
39+
font-style: italic;
40+
font-weight: 700;
41+
}
42+
@font-face {
43+
font-family: Guardian Text Sans Web;
44+
font-weight: 400;
45+
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-textsans/noalts-not-hinted/GuardianTextSans-Regular.ttf");
46+
}
47+
.GuardianTextSans-Regular {
48+
font-family: Guardian Text Sans Web;
49+
font-weight: 400;
50+
}
51+
@font-face {
52+
font-family: Guardian Text Sans Web;
53+
font-style: italic;
54+
font-weight: 400;
55+
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-textsans/noalts-not-hinted/GuardianTextSans-RegularItalic.ttf");
56+
}
57+
.GuardianTextSans-RegularItalic {
58+
font-family: Guardian Text Sans Web;
59+
font-style: italic;
60+
font-weight: 400;
61+
}
62+
@font-face {
63+
font-family: Guardian Text Sans Web;
64+
font-weight: 700;
65+
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-textsans/noalts-not-hinted/GuardianTextSans-Bold.ttf");
66+
}
67+
.GuardianTextSans-Bold {
68+
font-family: Guardian Text Sans Web;
69+
font-weight: 700;
70+
}
71+
@font-face {
72+
font-family: Guardian Text Sans Web;
73+
font-style: italic;
74+
font-weight: 700;
75+
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-textsans/noalts-not-hinted/GuardianTextSans-BoldItalic.ttf");
76+
}
77+
.GuardianTextSans-BoldItalic {
78+
font-family: Guardian Text Sans Web;
79+
font-style: italic;
80+
font-weight: 700;
81+
}
82+
@font-face {
83+
font-family: GH Guardian Headline;
84+
font-weight: 300;
85+
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.ttf");
86+
}
87+
.GHGuardianHeadline-Light {
88+
font-family: GH Guardian Headline;
89+
font-weight: 300;
90+
}
91+
@font-face {
92+
font-family: GH Guardian Headline;
93+
font-style: italic;
94+
font-weight: 300;
95+
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.ttf");
96+
}
97+
.GHGuardianHeadline-LightItalic {
98+
font-family: GH Guardian Headline;
99+
font-style: italic;
100+
font-weight: 300;
101+
}
102+
@font-face {
103+
font-family: GH Guardian Headline;
104+
font-weight: 400;
105+
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.ttf");
106+
}
107+
.GHGuardianHeadline-Regular {
108+
font-family: GH Guardian Headline;
109+
font-weight: 400;
110+
}
111+
@font-face {
112+
font-family: GH Guardian Headline;
113+
font-style: italic;
114+
font-weight: 400;
115+
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.ttf");
116+
}
117+
.GHGuardianHeadline-RegularItalic {
118+
font-family: GH Guardian Headline;
119+
font-style: italic;
120+
font-weight: 400;
121+
}
122+
@font-face {
123+
font-family: GH Guardian Headline;
124+
font-weight: 500;
125+
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.ttf");
126+
}
127+
.GHGuardianHeadline-Medium {
128+
font-family: GH Guardian Headline;
129+
font-weight: 500;
130+
}
131+
@font-face {
132+
font-family: GH Guardian Headline;
133+
font-style: italic;
134+
font-weight: 500;
135+
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-MediumItalic.ttf");
136+
}
137+
.GHGuardianHeadline-MediumItalic {
138+
font-family: GH Guardian Headline;
139+
font-style: italic;
140+
font-weight: 500;
141+
}
142+
@font-face {
143+
font-family: GH Guardian Headline;
144+
font-weight: 600;
145+
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.ttf");
146+
}
147+
.GHGuardianHeadline-Semibold {
148+
font-family: GH Guardian Headline;
149+
font-weight: 600;
150+
}
151+
@font-face {
152+
font-family: GH Guardian Headline;
153+
font-style: italic;
154+
font-weight: 600;
155+
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.ttf");
156+
}
157+
.GHGuardianHeadline-SemiboldItalic {
158+
font-family: GH Guardian Headline;
159+
font-style: italic;
160+
font-weight: 600;
161+
}
162+
@font-face {
163+
font-family: GH Guardian Headline;
164+
font-weight: 700;
165+
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.ttf");
166+
}
167+
.GHGuardianHeadline-Bold {
168+
font-family: GH Guardian Headline;
169+
font-weight: 700;
170+
}
171+
@font-face {
172+
font-family: GH Guardian Headline;
173+
font-style: italic;
174+
font-weight: 700;
175+
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.ttf");
176+
}
177+
.GHGuardianHeadline-BoldItalic {
178+
font-family: GH Guardian Headline;
179+
font-style: italic;
180+
font-weight: 700;
181+
}
182+
`;
183+
184+
module.exports = { assetsCss };

‎dotcom-rendering/webpack/assets-template.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Rendered Items Assets Html</title>
6+
<style>
7+
<%= styles %>
8+
</style>
9+
</head>
10+
<body>
11+
<div class="GuardianTextEgyptian-Reg">.</div>
12+
<div class="GuardianTextEgyptian-RegItalic">.</div>
13+
<div class="GuardianTextEgyptian-Bold">.</div>
14+
<div class="GuardianTextEgyptian-BoldItalic">.</div>
15+
<div class="GuardianTextSans-Regular">.</div>
16+
<div class="GuardianTextSans-RegularItalic">.</div>
17+
<div class="GuardianTextSans-Bold">.</div>
18+
<div class="GuardianTextSans-BoldItalic">.</div>
19+
<div class="GHGuardianHeadline-Light">.</div>
20+
<div class="GHGuardianHeadline-LightItalic">.</div>
21+
<div class="GHGuardianHeadline-Regular">.</div>
22+
<div class="GHGuardianHeadline-RegularItalic">.</div>
23+
<div class="GHGuardianHeadline-Medium">.</div>
24+
<div class="GHGuardianHeadline-MediumItalic">.</div>
25+
<div class="GHGuardianHeadline-Semibold">.</div>
26+
<div class="GHGuardianHeadline-SemiboldItalic">.</div>
27+
<div class="GHGuardianHeadline-Bold">.</div>
28+
<div class="GHGuardianHeadline-BoldItalic">.</div>
29+
<div class="icons">.</div>
30+
</body>
31+
</html>

‎dotcom-rendering/webpack/webpack.config.client.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
1+
const { createHash } = require('node:crypto');
2+
const path = require('node:path');
3+
const CleanCSS = require('clean-css');
4+
const HtmlWebpackPlugin = require('html-webpack-plugin');
15
const webpack = require('webpack');
26
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
37
const swcConfig = require('./.swcrc.json');
8+
const { assetsCss } = require('./assets-styles');
49
const { getBrowserTargets } = require('./browser-targets');
510
const { svgr } = require('./svg.cjs');
611

@@ -61,6 +66,11 @@ const getLoaders = (build) => {
6166
}
6267
};
6368

69+
const assetsTemplateCss = new CleanCSS().minify(assetsCss).styles.trim();
70+
71+
const assetHash = (asset) =>
72+
createHash('sha256').update(asset).digest('base64');
73+
6474
/**
6575
* @param {{ build: Build }} options
6676
* @returns {import('webpack').Configuration}
@@ -113,6 +123,30 @@ module.exports = ({ build }) => ({
113123
new WebpackManifestPlugin({
114124
fileName: `manifest.${build}.json`,
115125
}),
126+
...(build === 'client.apps'
127+
? [
128+
new HtmlWebpackPlugin({
129+
excludeChunks: ['debug'],
130+
meta: {
131+
'Content-Security-Policy': {
132+
'http-equiv': 'Content-Security-Policy',
133+
content: `style-src 'sha256-${assetHash(
134+
assetsTemplateCss,
135+
)}';`,
136+
},
137+
},
138+
filename: 'rendered-items-assets.html',
139+
minify: true,
140+
template: path.resolve(
141+
__dirname,
142+
'assets-template.html',
143+
),
144+
templateParameters: {
145+
styles: assetsTemplateCss,
146+
},
147+
}),
148+
]
149+
: []),
116150
...(build === 'client.apps' || build === 'client.editionsCrossword'
117151
? [
118152
new webpack.optimize.LimitChunkCountPlugin({

0 commit comments

Comments
 (0)