feat: Responsive Banner text (#261)

sveltejs · Dec 7, 2023 · 7f4bb6b · 7f4bb6b
1 parent 567b0b5
commit 7f4bb6b
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 5 deletions.
diff --git a/.changeset/chilly-ears-rule.md b/.changeset/chilly-ears-rule.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/site-kit': patch
+---
+
+feat: Responsive banner
diff --git a/packages/site-kit/src/lib/components/Banner.svelte b/packages/site-kit/src/lib/components/Banner.svelte
@@ -13,6 +13,9 @@
 	 */
 	export let href;
 
+	/** @type {{ lg?: string; sm?: string }} */
+	export let content;
+
 	/** @type {import('svelte').EventDispatcher<{ close: undefined }>} */
 	const dispatch = createEventDispatcher();
 
@@ -28,7 +31,13 @@
 	<div class="banner-bottom" transition:fade={{ duration: 400, easing: quintOut }}>
 		<div class="main-area">
 			<a {href}>
-				<slot />
+				{#if content.lg}
+					<span class="lg">{content.lg}</span>
+				{/if}
+
+				{#if content.sm}
+					<span class="sm">{content.sm}</span>
+				{/if}
 			</a>
 
 			{#if arrow}
@@ -101,6 +110,14 @@
 		padding: 0;
 	}
 
+	a .lg {
+		display: initial;
+	}
+
+	a .sm {
+		display: none;
+	}
+
 	@media screen and (max-width: 800px) {
 		.banner-bottom {
 			bottom: initial;
@@ -110,5 +127,13 @@
 		.main-area :global(svg) {
 			display: none;
 		}
+
+		a .lg {
+			display: none;
+		}
+
+		a .sm {
+			display: initial;
+		}
 	}
 </style>
diff --git a/packages/site-kit/src/lib/components/Banners.svelte b/packages/site-kit/src/lib/components/Banners.svelte
@@ -8,7 +8,10 @@
 	 * end: number;
 	 * arrow: boolean;
 	 * href: string;
-	 * content: string;
+	 * content: {
+	 *   lg?: string;
+	 *   sm?: string;
+	 * };
 	 * scope?: BannerScope[];
 	 * }[]} BannerData
 	 *
@@ -38,6 +41,8 @@
 					}
 				}
 			}
+
+			return data;
 		}
 
 		const req = await fetch('https://svelte.dev/banner.json');
@@ -97,7 +102,5 @@
 </script>
 
 {#each showing as { content, href, id, arrow }}
-	<Banner {arrow} {href} on:close={() => ($preferences[id] = false)}>
-		{@html content}
-	</Banner>
+	<Banner {arrow} {href} on:close={() => ($preferences[id] = false)} {content} />
 {/each}