Lint

guardian · Jan 4, 2024 · 2f4490f · 2f4490f
1 parent a792648
commit 2f4490f
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 34 deletions.
diff --git a/src/templates/components/CapiCard.svelte b/src/templates/components/CapiCard.svelte
@@ -9,12 +9,25 @@
 	export let single: Single;
 	export let direction = 'row';
 
-	const { articleHeadline, articleUrl, articleText, articleImage, audioTag, galleryTag, videoTag, kicker } = single;
+	const {
+		articleHeadline,
+		articleUrl,
+		articleText,
+		articleImage,
+		audioTag,
+		galleryTag,
+		videoTag,
+		kicker,
+	} = single;
 	const pictureSupported =
 		articleImage.sources.length > 0 && 'srcset' in new Image();
 </script>
 
-<a class="{templateType}-card" href={articleUrl} style={`--direction: ${direction}`}>
+<a
+	class="{templateType}-card"
+	href={articleUrl}
+	style={`--direction: ${direction}`}
+>
 	<div class="media">
 		{#if pictureSupported}
 			<picture>
@@ -40,12 +53,12 @@
 	<div class="text">
 		<h2>
 			{#if kicker}
-				<span class="kicker">{kicker && kicker}</span><br>
+				<span class="kicker">{kicker && kicker}</span><br />
 			{/if}
 			{#if audioTag}
 				<AudioIcon />
 			{:else if galleryTag}
-				<CameraIcon/>
+				<CameraIcon />
 			{:else if videoTag}
 				<VideoIcon />
 			{/if}
@@ -73,7 +86,7 @@
 	}
 
 	a.multiple-card {
-		margin: 12px 10px 0px 10px;;
+		margin: 12px 10px 0px 10px;
 		display: block;
 		padding: 0 0 8px 0;
 		width: auto;
@@ -133,7 +146,7 @@
 			font-weight: 500;
 			padding: 0px;
 			margin: 6px 0 8px 0;
-			color: #333
+			color: #333;
 		}
 	}
 
@@ -166,7 +179,7 @@
 		}
 
 		a.multiple-card {
-			margin: 12px 10px
+			margin: 12px 10px;
 		}
 
 		a.multiple-card:nth-child(n) {
@@ -187,5 +200,4 @@
 			top: 12px;
 		}
 	}
-
 </style>
diff --git a/src/templates/components/PaidForHeader.svelte b/src/templates/components/PaidForHeader.svelte
@@ -32,8 +32,8 @@
 			{#if popup}
 				<div id="popup">
 					<p>
-						Paid content is paid for and controlled by an advertiser and produced
-						by the Guardian Labs team
+						Paid content is paid for and controlled by an advertiser and
+						produced by the Guardian Labs team
 					</p>
 					<a
 						class="popup-link"
@@ -44,7 +44,9 @@
 			{/if}
 		</div>
 
-		<h1 class="adverts__title {templateType === 'multiple' && 'multiple-title'}">
+		<h1
+			class="adverts__title {templateType === 'multiple' && 'multiple-title'}"
+		>
 			<a
 				href={`${CLICK_MACRO}https://theguardian.com/${SeriesUrl}`}
 				target="_top"

diff --git a/src/templates/components/Sponsor.svelte b/src/templates/components/Sponsor.svelte
@@ -13,10 +13,15 @@
 	const { width, height } = logo.dimensions;
 </script>
 
-<div class="{templateType === 'multiple' ? 'multiple-logo-container' : ''}">
+<div class={templateType === 'multiple' ? 'multiple-logo-container' : ''}>
 	<p>Paid for by</p>
 	<a href={`${CLICK_MACRO}${branding.logo.link}`}>
-		<img class="{templateType === 'multiple' ? 'multiple-logo' : ''}" src={logo.src} alt="" style={`aspect-ratio: ${width} / ${height};`} />
+		<img
+			class={templateType === 'multiple' ? 'multiple-logo' : ''}
+			src={logo.src}
+			alt=""
+			style={`aspect-ratio: ${width} / ${height};`}
+		/>
 	</a>
 </div>
 

diff --git a/src/templates/components/icons/AudioIcon.svelte b/src/templates/components/icons/AudioIcon.svelte
@@ -1 +1,5 @@
-<svg width="16" height="13" viewBox="0 0 16 13" class="icon"><path d="M3 4h-2l-1 1v3l1 1h2l4 4h1v-13h-1l-4 4zm11.7 2.5c0 2-.7 3.8-1.8 5.2l.4.4c1.6-1.3 2.6-3.3 2.6-5.6s-1-4.3-2.6-5.6l-.4.4c1.2 1.5 1.8 3.3 1.8 5.2m-3.7 0c0 1.1-.3 2.2-.9 3.1l.5.5c.8-1 1.4-2.2 1.4-3.6s-.6-2.6-1.5-3.5l-.5.5c.6.8 1 1.9 1 3"/></svg>
+<svg width="16" height="13" viewBox="0 0 16 13" class="icon"
+	><path
+		d="M3 4h-2l-1 1v3l1 1h2l4 4h1v-13h-1l-4 4zm11.7 2.5c0 2-.7 3.8-1.8 5.2l.4.4c1.6-1.3 2.6-3.3 2.6-5.6s-1-4.3-2.6-5.6l-.4.4c1.2 1.5 1.8 3.3 1.8 5.2m-3.7 0c0 1.1-.3 2.2-.9 3.1l.5.5c.8-1 1.4-2.2 1.4-3.6s-.6-2.6-1.5-3.5l-.5.5c.6.8 1 1.9 1 3"
+	/></svg
+>
diff --git a/src/templates/components/icons/CameraIcon.svelte b/src/templates/components/icons/CameraIcon.svelte
@@ -1 +1,5 @@
-<svg width="18" height="13" viewBox="0 0 18 13" class="icon"><path d="M18 3.5v8l-1.5 1.5h-15l-1.5-1.5v-8l1.5-1.5h3.5l2-2h4l2 2h3.5l1.5 1.5zm-9 7.5c1.9 0 3.5-1.6 3.5-3.5s-1.6-3.5-3.5-3.5-3.5 1.6-3.5 3.5 1.6 3.5 3.5 3.5z"/></svg>
+<svg width="18" height="13" viewBox="0 0 18 13" class="icon"
+	><path
+		d="M18 3.5v8l-1.5 1.5h-15l-1.5-1.5v-8l1.5-1.5h3.5l2-2h4l2 2h3.5l1.5 1.5zm-9 7.5c1.9 0 3.5-1.6 3.5-3.5s-1.6-3.5-3.5-3.5-3.5 1.6-3.5 3.5 1.6 3.5 3.5 3.5z"
+	/></svg
+>
diff --git a/src/templates/components/icons/VideoIcon.svelte b/src/templates/components/icons/VideoIcon.svelte
@@ -1 +1,5 @@
-<svg viewBox="0 0 36 23" class="icon"><path d="M3.2 0l-3.2 3.3v16.4l3.3 3.3h18.7v-23h-18.8m30.4 1l-8.6 8v5l8.6 8h2.4v-21h-2.4"/></svg>
+<svg viewBox="0 0 36 23" class="icon"
+	><path
+		d="M3.2 0l-3.2 3.3v16.4l3.3 3.3h18.7v-23h-18.8m30.4 1l-8.6 8v5l8.6 8h2.4v-21h-2.4"
+	/></svg
+>
diff --git a/src/templates/csr/capi-multiple-paidfor/index.svelte b/src/templates/csr/capi-multiple-paidfor/index.svelte
@@ -41,29 +41,29 @@
 			headline: Article1Headline,
 			image: Article1Image,
 			url: Article1URL,
-			kicker: Article1Kicker
+			kicker: Article1Kicker,
 		},
 		{
 			headline: Article2Headline,
 			image: Article2Image,
 			url: Article2URL,
-			kicker: Article2Kicker
+			kicker: Article2Kicker,
 		},
 		{
 			headline: Article3Headline,
 			image: Article3Image,
 			url: Article3URL,
-			kicker: Article3Kicker
+			kicker: Article3Kicker,
 		},
 		{
 			headline: Article4Headline,
 			image: Article4Image,
 			url: Article4URL,
-			kicker: Article4Kicker
+			kicker: Article4Kicker,
 		},
 	];
 
-	const requestData = retrieveCapiData(cards, SeriesUrl)
+	const requestData = retrieveCapiData(cards, SeriesUrl);
 
 	if (isValidReplacedVariable(Trackingpixel)) addTrackingPixel(Trackingpixel);
 
@@ -81,18 +81,21 @@
 				edition={response.articles[0].branding.edition}
 				{ComponentTitle}
 				{SeriesUrl}
-				templateType='multiple'
+				templateType="multiple"
 			/>
-				<div class="body">
-					<div class="cards-container">
-						{#each formattedCards as single}
-							<CapiCard templateType='multiple' {single} />
-						{/each}
-					</div>
-					<div class="sponsor-container">
-						<Sponsor branding={response.articles[0].branding} templateType ='multiple' />
-					</div>
+			<div class="body">
+				<div class="cards-container">
+					{#each formattedCards as single}
+						<CapiCard templateType="multiple" {single} />
+					{/each}
 				</div>
+				<div class="sponsor-container">
+					<Sponsor
+						branding={response.articles[0].branding}
+						templateType="multiple"
+					/>
+				</div>
+			</div>
 		</aside>
 		<Resizer {height} />
 	{/await}
@@ -147,5 +150,4 @@
 			flex-direction: column;
 		}
 	}
-
 </style>
diff --git a/src/templates/csr/capi-single-paidfor/index.svelte b/src/templates/csr/capi-single-paidfor/index.svelte
@@ -32,12 +32,12 @@
 {:then single}
 	<aside bind:clientHeight={height}>
 		<PaidForHeader
-		    templateType='single'
+			templateType="single"
 			edition={single.branding.edition}
 			{ComponentTitle}
 			{SeriesUrl}
 		/>
-		<CapiCard templateType='single' {single} />
+		<CapiCard templateType="single" {single} />
 	</aside>
 	<Resizer {height} />
 {:catch}