Skip to content

Commit 0442e96

Browse files
jorgeazevedojorgeazevedo
authored
Merge branch 'main' into ja-revert-to-default-ssm
2 parents 97a8ce8 + 1d01676 commit 0442e96

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+1023
-872
lines changed

‎dotcom-rendering/cdk/bin/cdk.ts

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ new RenderingCDKStack(cdkApp, 'ArticleRendering-PROD', {
2828
stage: 'PROD',
2929
domainName: 'article-rendering.guardianapis.com',
3030
scaling: {
31-
minimumInstances: 27,
32-
maximumInstances: 270,
31+
minimumInstances: 24,
32+
maximumInstances: 240,
3333
policies: {
3434
step: {
3535
cpu: cpuScalingSteps,
@@ -52,7 +52,7 @@ new RenderingCDKStack(cdkApp, 'ArticleRendering-PROD', {
5252
},
5353
},
5454
},
55-
instanceType: InstanceType.of(InstanceClass.C7G, InstanceSize.MEDIUM),
55+
instanceType: InstanceType.of(InstanceClass.C8G, InstanceSize.MEDIUM),
5656
});
5757

5858
/** Facia */
@@ -68,8 +68,8 @@ new RenderingCDKStack(cdkApp, 'FaciaRendering-PROD', {
6868
stage: 'PROD',
6969
domainName: 'facia-rendering.guardianapis.com',
7070
scaling: {
71-
minimumInstances: 30,
72-
maximumInstances: 180,
71+
minimumInstances: 21,
72+
maximumInstances: 210,
7373
policies: {
7474
step: {
7575
cpu: cpuScalingSteps,
@@ -92,7 +92,7 @@ new RenderingCDKStack(cdkApp, 'FaciaRendering-PROD', {
9292
},
9393
},
9494
},
95-
instanceType: InstanceType.of(InstanceClass.C7G, InstanceSize.MEDIUM),
95+
instanceType: InstanceType.of(InstanceClass.C8G, InstanceSize.MEDIUM),
9696
});
9797

9898
/** Tag pages */
@@ -108,8 +108,8 @@ new RenderingCDKStack(cdkApp, 'TagPageRendering-PROD', {
108108
stage: 'PROD',
109109
domainName: 'tag-page-rendering.guardianapis.com',
110110
scaling: {
111-
minimumInstances: 15,
112-
maximumInstances: 150,
111+
minimumInstances: 9,
112+
maximumInstances: 90,
113113
policies: {
114114
step: {
115115
cpu: cpuScalingSteps,
@@ -132,7 +132,7 @@ new RenderingCDKStack(cdkApp, 'TagPageRendering-PROD', {
132132
},
133133
},
134134
},
135-
instanceType: InstanceType.of(InstanceClass.C7G, InstanceSize.MEDIUM),
135+
instanceType: InstanceType.of(InstanceClass.C8G, InstanceSize.MEDIUM),
136136
});
137137

138138
/** Interactive */
@@ -172,5 +172,5 @@ new RenderingCDKStack(cdkApp, 'InteractiveRendering-PROD', {
172172
},
173173
},
174174
},
175-
instanceType: InstanceType.of(InstanceClass.C7G, InstanceSize.MEDIUM),
175+
instanceType: InstanceType.of(InstanceClass.C8G, InstanceSize.MEDIUM),
176176
});

‎dotcom-rendering/fixtures/manual/footballData.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,21 @@ export const initialDays: FootballMatches = [
4545
},
4646
status: '1st',
4747
},
48+
{
49+
kind: 'Live',
50+
dateTimeISOString: new Date(
51+
'2022-01-01T11:11:00Z',
52+
).toISOString(),
53+
paId: '12345',
54+
homeTeam: {
55+
name: 'Fiorentina',
56+
},
57+
awayTeam: {
58+
name: 'Bologna',
59+
},
60+
status: 'S',
61+
comment: 'Awaiting officials decision',
62+
},
4863
{
4964
kind: 'Fixture',
5065
dateTimeISOString: new Date(

‎dotcom-rendering/fixtures/manual/show-more-trails.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* Exporting this 'as' FEFrontCard because we know it should be of the right shape.
55
*/
66

7-
import type { FEFrontCard } from '../../src/types/front';
7+
import type { FEFrontCard } from '../../src/frontend/feFront';
88

99
export const trails: [
1010
FEFrontCard,

‎dotcom-rendering/scripts/jsonSchema/schema.mjs

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const program = TJS.getProgramFromFiles(
1111
[
1212
path.resolve(`${root}/index.d.ts`),
1313
path.resolve(`${root}/src/types/frontend.ts`),
14+
path.resolve(`${root}/src/frontend/feFront.ts`),
1415
path.resolve(`${root}/src/frontend/feTagPage.ts`),
1516
path.resolve(`${root}/src/types/newslettersPage.ts`),
1617
path.resolve(`${root}/src/types/editionsCrossword.ts`),
@@ -38,8 +39,8 @@ const schemas = [
3839
file: `${root}/src/model/article-schema.json`,
3940
},
4041
{
41-
typeName: 'FEFrontType',
42-
file: `${root}/src/model/front-schema.json`,
42+
typeName: 'FEFront',
43+
file: `${root}/src/frontend/schemas/feFront.json`,
4344
},
4445
{
4546
typeName: 'FETagPage',

‎dotcom-rendering/src/components/AdSlot.web.tsx

Lines changed: 38 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { css, type Interpolation } from '@emotion/react';
22
import type { SlotName } from '@guardian/commercial';
3-
import { adSizes, constants } from '@guardian/commercial';
3+
import { adSizes } from '@guardian/commercial';
44
import {
55
between,
66
breakpoints,
@@ -67,7 +67,7 @@ type RightProps = {
6767
};
6868

6969
type RightFootballProps = {
70-
position: 'right-football';
70+
position: 'football-right';
7171
colourScheme?: ColourScheme;
7272
index?: never;
7373
shouldHideReaderRevenue?: never;
@@ -92,6 +92,10 @@ type Props = DefaultProps &
9292

9393
const halfPageAdHeight = adSizes.halfPage.height;
9494

95+
/** Calculates the minimum height for an ad slot. Used to avoid CLS */
96+
const getMinHeight = (adHeight: number, padding?: number): number =>
97+
adHeight + labelHeight + (padding ?? 0);
98+
9599
const outOfPageStyles = css`
96100
height: 0;
97101
`;
@@ -111,7 +115,7 @@ const topAboveNavContainerStyles = css`
111115
* render first, we need to reserve space for the ad to avoid CLS.
112116
*/
113117
const showcaseRightColumnContainerStyles = css`
114-
min-height: ${halfPageAdHeight + labelHeight}px;
118+
min-height: ${getMinHeight(halfPageAdHeight)}px;
115119
`;
116120

117121
const showcaseRightColumnStyles = css`
@@ -131,16 +135,18 @@ const merchandisingAdContainerStyles = css`
131135

132136
const merchandisingAdStyles = css`
133137
position: relative;
134-
min-height: ${adSizes.billboard.height + labelHeight}px;
135-
margin: 12px auto;
138+
min-height: ${getMinHeight(adSizes.billboard.height, space[3])}px;
139+
margin: ${space[3]}px auto;
136140
max-width: ${breakpoints['wide']}px;
137141
overflow: hidden;
142+
padding-bottom: ${space[3]}px;
138143
139144
${from.desktop} {
140145
margin: 0;
141-
padding-bottom: 20px;
142-
min-height: ${adSizes.billboard.height + labelHeight + 20}px;
146+
padding-bottom: ${space[5]}px;
147+
min-height: ${getMinHeight(adSizes.billboard.height, space[5])}px;
143148
}
149+
144150
&:not(.ad-slot--fluid).ad-slot--rendered {
145151
${between.phablet.and.desktop} {
146152
display: none;
@@ -171,7 +177,7 @@ const liveblogInlineContainerStyles = css`
171177

172178
const liveblogInlineAdStyles = css`
173179
position: relative;
174-
min-height: ${adSizes.mpu.height + labelHeight}px;
180+
min-height: ${getMinHeight(adSizes.mpu.height)}px;
175181
background-color: ${schemedPalette('--ad-background-article-inner')};
176182
177183
${until.tablet} {
@@ -181,7 +187,7 @@ const liveblogInlineAdStyles = css`
181187

182188
const liveblogInlineMobileAdStyles = css`
183189
position: relative;
184-
min-height: ${adSizes.outstreamMobile.height + labelHeight}px;
190+
min-height: ${getMinHeight(adSizes.outstreamMobile.height)}px;
185191
186192
${from.tablet} {
187193
display: none;
@@ -190,32 +196,27 @@ const liveblogInlineMobileAdStyles = css`
190196

191197
const mobileFrontAdStyles = css`
192198
position: relative;
193-
min-height: ${adSizes.mpu.height + labelHeight}px;
199+
min-height: ${getMinHeight(adSizes.mpu.height, space[3])}px;
194200
min-width: 300px;
195201
width: 300px;
196-
margin: 12px auto;
202+
margin: ${space[3]}px auto;
203+
padding-bottom: ${space[3]}px;
197204
198205
${from.tablet} {
199206
display: none;
200207
}
201208
`;
202209

203-
const frontsBannerPaddingHeight = 20;
204-
const frontsBannerMinHeightTablet =
205-
adSizes.leaderboard.height + labelHeight + frontsBannerPaddingHeight;
206-
const frontsBannerMinHeight =
207-
adSizes.billboard.height + labelHeight + frontsBannerPaddingHeight;
208-
209210
const frontsBannerAdTopContainerStyles = css`
210211
display: none;
211212
${from.tablet} {
212213
display: flex;
213214
justify-content: center;
214-
min-height: ${frontsBannerMinHeightTablet}px;
215+
min-height: ${getMinHeight(adSizes.leaderboard.height, space[6])}px;
215216
background-color: ${schemedPalette('--ad-background')};
216217
}
217218
${from.desktop} {
218-
min-height: ${frontsBannerMinHeight}px;
219+
min-height: ${getMinHeight(adSizes.billboard.height, space[6])}px;
219220
}
220221
`;
221222

@@ -240,11 +241,11 @@ const frontsBannerCollapseStyles = css`
240241

241242
const frontsBannerAdStyles = css`
242243
position: relative;
243-
min-height: ${frontsBannerMinHeightTablet}px;
244+
min-height: ${getMinHeight(adSizes.leaderboard.height, space[6])}px;
244245
max-width: ${adSizes.leaderboard.width}px;
245-
max-height: ${adSizes.leaderboard.height + labelHeight}px;
246246
overflow: hidden;
247-
padding-bottom: ${frontsBannerPaddingHeight}px;
247+
padding-bottom: ${space[6]}px;
248+
248249
${from.desktop} {
249250
/* No banner should be taller than 600px */
250251
max-height: ${600 + labelHeight}px;
@@ -254,7 +255,7 @@ const frontsBannerAdStyles = css`
254255

255256
const articleEndAdStyles = css`
256257
position: relative;
257-
min-height: ${adSizes.outstreamDesktop.height + labelHeight}px;
258+
min-height: ${getMinHeight(adSizes.outstreamDesktop.height)}px;
258259
259260
&.ad-slot--fluid {
260261
min-height: 450px;
@@ -263,7 +264,7 @@ const articleEndAdStyles = css`
263264

264265
const mostPopAdStyles = css`
265266
position: relative;
266-
min-height: ${adSizes.mpu.height + labelHeight}px;
267+
min-height: ${getMinHeight(adSizes.mpu.height)}px;
267268
min-width: ${adSizes.mpu.width}px;
268269
max-width: ${adSizes.mpu.width}px;
269270
text-align: center;
@@ -277,7 +278,7 @@ const mostPopAdStyles = css`
277278
`;
278279

279280
const mostPopContainerStyles = css`
280-
min-height: ${adSizes.mpu.height + labelHeight}px;
281+
min-height: ${getMinHeight(adSizes.mpu.height)}px;
281282
min-width: ${adSizes.mpu.width}px;
282283
width: fit-content;
283284
max-width: ${adSizes.mpu.width}px;
@@ -291,7 +292,7 @@ const mostPopContainerStyles = css`
291292
`;
292293

293294
const liveBlogTopAdStyles = css`
294-
min-height: ${adSizes.mpu.height + labelHeight}px;
295+
min-height: ${getMinHeight(adSizes.mpu.height)}px;
295296
min-width: ${adSizes.mpu.width}px;
296297
width: fit-content;
297298
max-width: ${adSizes.mpu.width}px;
@@ -379,7 +380,7 @@ const mobileStickyAdStylesFullWidth = css`
379380
`;
380381

381382
const crosswordBannerMobileAdStyles = css`
382-
min-height: ${adSizes.mobilesticky.height + constants.AD_LABEL_HEIGHT}px;
383+
min-height: ${getMinHeight(adSizes.mobilesticky.height)}px;
383384
`;
384385

385386
const AdSlotWrapper = ({
@@ -515,7 +516,7 @@ export const AdSlot = ({
515516
default:
516517
return null;
517518
}
518-
case 'right-football': {
519+
case 'football-right': {
519520
const slotId = 'dfp-ad--right';
520521
return (
521522
<AdSlotWrapper
@@ -583,7 +584,7 @@ export const AdSlot = ({
583584
}
584585
case 'top-above-nav': {
585586
return (
586-
<AdSlotWrapper css={[topAboveNavContainerStyles]}>
587+
<AdSlotWrapper css={topAboveNavContainerStyles}>
587588
<div
588589
id="dfp-ad--top-above-nav"
589590
className={[
@@ -626,15 +627,15 @@ export const AdSlot = ({
626627
}
627628
case 'merchandising-high': {
628629
return (
629-
<AdSlotWrapper css={[merchandisingAdContainerStyles]}>
630+
<AdSlotWrapper css={merchandisingAdContainerStyles}>
630631
<div
631632
id="dfp-ad--merchandising-high"
632633
className={[
633634
'js-ad-slot',
634635
'ad-slot',
635636
'ad-slot--merchandising-high',
636637
].join(' ')}
637-
css={[merchandisingAdStyles]}
638+
css={merchandisingAdStyles}
638639
data-link-name="ad slot merchandising-high"
639640
data-name="merchandising-high"
640641
data-refresh="false"
@@ -654,7 +655,7 @@ export const AdSlot = ({
654655
'ad-slot',
655656
'ad-slot--merchandising',
656657
].join(' ')}
657-
css={[merchandisingAdStyles]}
658+
css={merchandisingAdStyles}
658659
data-link-name="ad slot merchandising"
659660
data-name="merchandising"
660661
data-testid="slot"
@@ -685,7 +686,7 @@ export const AdSlot = ({
685686
'ad-slot--rendered',
686687
hasPageskin && 'ad-slot--collapse',
687688
].join(' ')}
688-
css={[frontsBannerAdStyles]}
689+
css={frontsBannerAdStyles}
689690
data-link-name={`ad slot ${advertId}`}
690691
data-name={`${advertId}`}
691692
data-testid="slot"
@@ -773,7 +774,7 @@ export const AdSlot = ({
773774
'ad-slot--liveblog-top',
774775
'ad-slot--rendered',
775776
].join(' ')}
776-
css={[liveBlogTopAdStyles]}
777+
css={liveBlogTopAdStyles}
777778
data-link-name="ad slot liveblog-top"
778779
data-name="liveblog-top"
779780
data-testid="slot"
@@ -797,7 +798,7 @@ export const AdSlot = ({
797798
'mobile-only',
798799
'ad-slot--rendered',
799800
].join(' ')}
800-
css={[mobileFrontAdStyles]}
801+
css={mobileFrontAdStyles}
801802
data-link-name={`ad slot ${advertId}`}
802803
data-name={advertId}
803804
data-testid="slot"
@@ -841,7 +842,7 @@ export const AdSlot = ({
841842
'ad-slot--article-end',
842843
'ad-slot--rendered',
843844
].join(' ')}
844-
css={[articleEndAdStyles]}
845+
css={articleEndAdStyles}
845846
data-link-name="ad slot article-end"
846847
data-name="article-end"
847848
data-testid="slot"
@@ -861,7 +862,7 @@ export const AdSlot = ({
861862
'ad-slot--crossword-banner-mobile',
862863
'ad-slot--rendered',
863864
].join(' ')}
864-
css={[crosswordBannerMobileAdStyles]}
865+
css={crosswordBannerMobileAdStyles}
865866
data-link-name="ad slot crossword-banner-mobile"
866867
data-name="crossword-banner-mobile"
867868
data-testid="slot"

0 commit comments

Comments
 (0)