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: /[\s\S]+?<\/script>/g, - props: /export let (.+?): GAMVariable;/g, + props: /export let (.+?): GAMVariable(<[\s\S]+>)?;/g, }; const getProps = (path: string): Props => { diff --git a/src/lib/types/tones.ts b/src/lib/types/tones.ts new file mode 100644 index 00000000..54ff570d --- /dev/null +++ b/src/lib/types/tones.ts @@ -0,0 +1,24 @@ +const tones = [ + 'brand', + 'brand-new', + 'job', + 'live', + 'travel', + 'money', + 'book', + 'weekly', + 'members', + 'patron', + 'lifestyle', + 'climate', + 'climate2', + 'support', + 'subscription', + 'subs-rebrand', +]; + +type Tone = typeof tones[number]; + +export type { Tone }; + +export { tones }; diff --git a/src/templates/components/ManualCard.svelte b/src/templates/components/ManualCard.svelte index ef026052..81f023b2 100644 --- a/src/templates/components/ManualCard.svelte +++ b/src/templates/components/ManualCard.svelte @@ -1,6 +1,6 @@ - +
- +
+
-

{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": "" +}