diff --git a/src/lib/Previews.svelte b/src/lib/Previews.svelte
index 6e867af0..16046455 100644
--- a/src/lib/Previews.svelte
+++ b/src/lib/Previews.svelte
@@ -9,6 +9,7 @@
import { replaceGAMVariables } from '$lib/gam';
import { onMount } from 'svelte';
import type { Message } from './messenger';
+ import { tones } from './types/tones';
export let template: string;
export let html: string;
@@ -90,7 +91,16 @@
diff --git a/src/lib/gam.ts b/src/lib/gam.ts
index 55aecec0..e1fe5047 100644
--- a/src/lib/gam.ts
+++ b/src/lib/gam.ts
@@ -1,9 +1,9 @@
const CLICK_MACRO = '%%CLICK_URL_UNESC%%';
const CACHE_BUST = '%%CACHEBUSTER%%';
-type GAMVariable = `[%${T}%]`;
+type GAMVariable = T;
-const gamVar = (s: T): GAMVariable => `[%${s}%]`;
+const gamVar = (s: T): `[%${GAMVariable}%]` => `[%${s}%]`;
const replaceGAMVariables = (
input: string,
@@ -30,6 +30,8 @@ const addTrackingPixel = (url: string) => {
const isValidReplacedVariable = (s: GAMVariable): boolean =>
s.length > 0 && !s.startsWith('[%') && !s.endsWith('%]');
+const clickMacro = (url: string): string => `${CLICK_MACRO}${url}`;
+
export type { GAMVariable };
export {
CACHE_BUST,
@@ -38,4 +40,5 @@ export {
gamVar,
isValidReplacedVariable,
replaceGAMVariables,
+ clickMacro,
};
diff --git a/src/lib/svelte.ts b/src/lib/svelte.ts
index 8ed6c57f..0915b370 100644
--- a/src/lib/svelte.ts
+++ b/src/lib/svelte.ts
@@ -9,7 +9,7 @@ type Props = Record;
const REGEX = {
script: /
-
+
+
-
{boldTitle}{regularTitle}
-
{EventDateTime}
+
+
+ {#if linkText}
+
+ {linkText}
+
+
+ {/if}
-
- Book tickets
-
-
-
diff --git a/src/templates/components/ToneLogo.svelte b/src/templates/components/ToneLogo.svelte
new file mode 100644
index 00000000..33cd833e
--- /dev/null
+++ b/src/templates/components/ToneLogo.svelte
@@ -0,0 +1,44 @@
+
+
+
+ {#if toneLogoMapping[tone]}
+
+ {:else}
+
+ {/if}
+
diff --git a/src/templates/components/colours/tones.css b/src/templates/components/colours/tones.css
index 0903c6ba..ce23c36c 100644
--- a/src/templates/components/colours/tones.css
+++ b/src/templates/components/colours/tones.css
@@ -18,6 +18,11 @@
--bg: #d01317;
}
+[data-tone='subs-rebrand'] {
+ --bg: #005689;
+ --header-btn-bg: #ffe500;
+}
+
[data-tone='live'] {
--bg: #c83877;
}
@@ -34,10 +39,35 @@
--bg: #b39069;
}
-[data-tone='masterclass'] {
- --bg: #f4bc44;
-}
-
[data-tone='book'] {
--bg: #8e246f;
}
+
+[data-tone='climate'],
+[data-tone='climate2'] {
+ --bg: #ffe500;
+}
+
+[data-tone='job'] {
+ --bg: #469d93;
+}
+
+[data-tone='weekly'] {
+ --bg: #2c363b;
+}
+
+[data-tone='members'] {
+ --bg: #bb3a7f;
+}
+
+[data-tone='patron'] {
+ --bg: #4f5249;
+}
+
+[data-tone='lifestyle'] {
+ --bg: #bb3b80;
+}
+
+[data-tone='support'] {
+ --bg: #ff7f0f;
+}
diff --git a/src/templates/components/icons/BookshopLogo.svelte b/src/templates/components/icons/BookshopLogo.svelte
new file mode 100644
index 00000000..1dcc8a64
--- /dev/null
+++ b/src/templates/components/icons/BookshopLogo.svelte
@@ -0,0 +1,100 @@
+
diff --git a/src/templates/components/icons/GenericLogo.svelte b/src/templates/components/icons/GenericLogo.svelte
new file mode 100644
index 00000000..16ae1189
--- /dev/null
+++ b/src/templates/components/icons/GenericLogo.svelte
@@ -0,0 +1,14 @@
+
diff --git a/src/templates/components/icons/HolidaysLogo.svelte b/src/templates/components/icons/HolidaysLogo.svelte
new file mode 100644
index 00000000..72c0e058
--- /dev/null
+++ b/src/templates/components/icons/HolidaysLogo.svelte
@@ -0,0 +1,98 @@
+
diff --git a/src/templates/components/icons/JobsLogo.svelte b/src/templates/components/icons/JobsLogo.svelte
new file mode 100644
index 00000000..287e5a01
--- /dev/null
+++ b/src/templates/components/icons/JobsLogo.svelte
@@ -0,0 +1,85 @@
+
diff --git a/src/templates/components/icons/MembersLogo.svelte b/src/templates/components/icons/MembersLogo.svelte
new file mode 100644
index 00000000..2ef0cd95
--- /dev/null
+++ b/src/templates/components/icons/MembersLogo.svelte
@@ -0,0 +1,100 @@
+
diff --git a/src/templates/components/icons/MoneydealsLogo.svelte b/src/templates/components/icons/MoneydealsLogo.svelte
new file mode 100644
index 00000000..b1507a3f
--- /dev/null
+++ b/src/templates/components/icons/MoneydealsLogo.svelte
@@ -0,0 +1,107 @@
+
diff --git a/src/templates/components/icons/PatronLogo.svelte b/src/templates/components/icons/PatronLogo.svelte
new file mode 100644
index 00000000..38188df1
--- /dev/null
+++ b/src/templates/components/icons/PatronLogo.svelte
@@ -0,0 +1,129 @@
+
diff --git a/src/templates/components/icons/SubscriptionsLogo.svelte b/src/templates/components/icons/SubscriptionsLogo.svelte
new file mode 100644
index 00000000..055abb8b
--- /dev/null
+++ b/src/templates/components/icons/SubscriptionsLogo.svelte
@@ -0,0 +1,117 @@
+
diff --git a/src/templates/components/icons/WeeklyLogo.svelte b/src/templates/components/icons/WeeklyLogo.svelte
new file mode 100644
index 00000000..b83b371f
--- /dev/null
+++ b/src/templates/components/icons/WeeklyLogo.svelte
@@ -0,0 +1,89 @@
+
diff --git a/src/templates/csr/events-multiple/index.svelte b/src/templates/csr/events-multiple/index.svelte
index 4b4f19f9..0551c151 100644
--- a/src/templates/csr/events-multiple/index.svelte
+++ b/src/templates/csr/events-multiple/index.svelte
@@ -2,13 +2,15 @@
import type { GAMVariable } from '$lib/gam';
import '$templates/components/fonts/Sans.css';
import ManualCard from '$templates/components/ManualCard.svelte';
- import EventsHeader from '$templates/components/EventsHeader.svelte';
import Resizer from '$templates/components/Resizer.svelte';
+ import ManualHeader from '$templates/components/ManualHeader.svelte';
+ import ToneLogo from '$templates/components/ToneLogo.svelte';
+ import type { Tone } from '$lib/types/tones';
export let BannerDescription: GAMVariable;
export let HeaderButtonText: GAMVariable;
export let HeaderButtonUrl: GAMVariable;
- export let NumberOfCards: GAMVariable;
+ export let Tone: GAMVariable;
export let EventTitle1: GAMVariable;
export let EventTitle2: GAMVariable;
export let EventTitle3: GAMVariable;
@@ -53,20 +55,37 @@
},
];
+ events = events.filter((event) => event.eventTitle !== '');
+
let height: number = -1;
@@ -88,6 +107,7 @@
.cards-container {
display: flex;
flex-direction: row;
+ justify-content: space-evenly;
}
@media (min-width: 1140px) {
diff --git a/src/templates/csr/events-multiple/test.json b/src/templates/csr/events-multiple/test.json
index c38c524e..98589552 100644
--- a/src/templates/csr/events-multiple/test.json
+++ b/src/templates/csr/events-multiple/test.json
@@ -1,8 +1,8 @@
{
+ "Tone": "live",
"BannerDescription": "Hear from leading thinkers and award-winning journalists in livestreamed and interactive events",
"HeaderButtonText": "Browse all",
"HeaderButtonUrl": "https://www.theguardian.com/guardian-masterclasses",
- "NumberOfCards": 4,
"EventTitle1": "Carlo Rovelli meets Dara Ó Briain: Live in London and online",
"EventDateTime1": "Monday 30 October 2023, 7pm–8.30pm GMT",
"EventImage1": "https://media.guim.co.uk/a2a1c4db8beab56c032b81def3ba41eab148a6ea/0_0_1200_720/1200.jpg",
diff --git a/src/templates/csr/manual-multiple/ad.json b/src/templates/csr/manual-multiple/ad.json
new file mode 100644
index 00000000..5102ddc4
--- /dev/null
+++ b/src/templates/csr/manual-multiple/ad.json
@@ -0,0 +1,3 @@
+{
+ "nativeStyleId": "70191"
+}
diff --git a/src/templates/csr/manual-multiple/index.svelte b/src/templates/csr/manual-multiple/index.svelte
new file mode 100644
index 00000000..272b7d21
--- /dev/null
+++ b/src/templates/csr/manual-multiple/index.svelte
@@ -0,0 +1,129 @@
+
+
+
+
+
+
diff --git a/src/templates/csr/manual-multiple/test.json b/src/templates/csr/manual-multiple/test.json
new file mode 100644
index 00000000..94af245a
--- /dev/null
+++ b/src/templates/csr/manual-multiple/test.json
@@ -0,0 +1,29 @@
+{
+ "TrackingId": "",
+ "Tone": "subs-rebrand",
+ "Title": "The Guardian Live",
+ "TitleURL": "",
+ "Explainer": "Discussions with The Guardian and interviews ",
+ "ViewAll": "View events",
+ "IsProminent": "false",
+ "Offer1Title": "Peter Carey in conversation",
+ "Offer1Image": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDrkYS0UhABGAEyCDZQMZwoEqIG",
+ "Offer1Meta": "Wednesday 17 January 2018",
+ "Offer1LinkText": "Book tickets",
+ "Offer1URL": "",
+ "Offer2Title": "Ten years on: the aftermath of the global financial crisis",
+ "Offer2Image": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDr8fDHyQEQARgBMghrCKnIYHk6ig",
+ "Offer2Meta": "Tuesday 30 January 2018",
+ "Offer2LinkText": "Book tickets",
+ "Offer2URL": "",
+ "Offer3Title": "Mikhail Khodorkovsky in conversation",
+ "Offer3Image": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDrqYDeAhABGAEyCEyDZAg8RiG5",
+ "Offer3Meta": "Wednesday 17 January 2018",
+ "Offer3LinkText": "Book tickets",
+ "Offer3URL": "",
+ "Offer4Title": "",
+ "Offer4Image": "",
+ "Offer4Meta": "",
+ "Offer4LinkText": "",
+ "Offer4URL": ""
+}