feat: banner (#240)

Author: PuruVJ

packages/site-kit/src/lib/components/Banner.svelte

@@ -0,0 +1,125 @@
+<script context="module">
+	const banner_preferences = persisted(
+		'svelte:banner-preferences',
+		/** @type {Record<string, boolean>} */ ({})
+	);
+</script>
+
+<script>
+	import { browser } from '$app/environment';
+	import { onMount } from 'svelte';
+	import { persisted } from 'svelte-local-storage-store';
+	import Icon from './Icon.svelte';
+
+	/** Whether to show an arrow at the end */
+	export let arrow = false;
+
+	/** Required for dismissing behavior e.g `<Banner id="svelte-5-runes" />` will make sure the banner
+	 * hidden only for this ID. Later if another banner is added, that will be visible by default.
+	 *
+	 * @type {string}
+	 */
+	export let id;
+
+	let height = 0;
+	$: if (browser) {
+		document.documentElement.style.setProperty(
+			'--sk-banner-bottom-height',
+			($banner_preferences[id] ? height : 0) + 'px'
+		);
+	}
+
+	onMount(() => {
+		$banner_preferences[id] ??= true;
+	});
+</script>
+
+{#if $banner_preferences[id]}
+	<div class="banner-bottom" bind:clientHeight={height}>
+		<div class="main-area">
+			<slot />
+
+			{#if arrow}
+				<Icon name="arrow-right" size="1.2em" />
+			{/if}
+		</div>
+
+		<button class="close-button" on:click={() => ($banner_preferences[id] = false)}>
+			<Icon name="close" />
+		</button>
+	</div>
+{/if}
+
+<style>
+	.banner-bottom {
+		position: relative;
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		overflow-y: auto;
+	}
+
+	.banner-bottom {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 80;
+
+		width: 100%;
+		height: max-content;
+	}
+
+	.banner-bottom {
+		text-align: center;
+		background: var(--sk-theme-1-variant);
+		color: white;
+		padding: 8px;
+	}
+
+	.banner-bottom :global(a) {
+		color: hsl(0, 0%, 99%);
+	}
+
+	button {
+		position: absolute;
+		top: 0;
+		right: 1rem;
+
+		display: flex;
+		align-items: center;
+
+		height: 100%;
+	}
+
+	.main-area {
+		display: flex;
+		align-items: center;
+		gap: 0.6rem;
+	}
+
+	.main-area :global(svg) {
+		transition: transform 0.2s var(--quint-out);
+	}
+
+	.main-area:hover :global(svg) {
+		transform: translateX(40%);
+	}
+
+	div :global(a[href]) {
+		text-decoration: none;
+	}
+
+	@media screen and (max-width: 800px) {
+		.banner-bottom {
+			bottom: initial;
+			top: 0;
+		}
+
+		.main-area :global(svg) {
+			display: none;
+		}
+	}
+</style>

packages/site-kit/src/lib/components/Shell.svelte

@@ -11,10 +11,6 @@ The main shell of the application. It provides a slot for the top navigation, th
 	import '../styles/index.css';
 	import Icons from './Icons.svelte';
 
-	/**
-	 * Height of the bottom banner. If '0px', the banner is not visible.
-	 */
-	export let banner_bottom_height = '0px';
 	/**
 	 * Whether the navigation is visible.
 	 */
@@ -60,15 +56,13 @@ The main shell of the application. It provides a slot for the top navigation, th
 
 <div class="modal-overlay" class:visible={$overlay_open} aria-hidden="true" />
 
-<main id="main" bind:this={main_el} style:--sk-banner-bottom-height={banner_bottom_height}>
+<main id="main" bind:this={main_el}>
 	<slot />
 </main>
 
-{#if banner_bottom_height !== '0px'}
-	<div class="banner-bottom" style:--sk-banner-bottom-height={banner_bottom_height}>
-		<slot name="banner-bottom" {banner_bottom_height} />
-	</div>
-{/if}
+<div class="banner-bottom">
+	<slot name="banner-bottom" />
+</div>
 
 <style>
 	.modal-overlay {
@@ -110,20 +104,6 @@ The main shell of the application. It provides a slot for the top navigation, th
 		}
 	}
 
-	.banner-bottom {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-	}
-
-	@media (max-width: 800px) {
-		.banner-bottom {
-			bottom: initial;
-			top: 0;
-		}
-	}
-
 	:global(body) {
 		font-size: 1.6rem !important;
 	}

packages/site-kit/src/lib/components/index.js

@@ -3,3 +3,4 @@ export { default as Icons } from './Icons.svelte';
 export { default as Section } from './Section.svelte';
 export { default as Shell } from './Shell.svelte';
 export { default as ThemeToggle } from './ThemeToggle.svelte';
+export { default as Banner } from './Banner.svelte';

packages/site-kit/src/lib/stores/index.js

@@ -1,5 +1,5 @@
-export { mql } from './mql';
-export { nav_open, on_this_page_open, overlay_open, should_nav_autohide } from './nav';
-export { reduced_motion } from './reduced-motion';
-export { search_query, search_recent, searching } from './search';
-export { theme } from './theme';
+export { mql } from './mql.js';
+export { nav_open, on_this_page_open, overlay_open, should_nav_autohide } from './nav.js';
+export { reduced_motion } from './reduced-motion.js';
+export { search_query, search_recent, searching } from './search.js';
+export { theme } from './theme.js';

packages/site-kit/src/lib/styles/tokens.css

@@ -17,6 +17,7 @@
 	--sk-thick-border-width: 0.3rem;
 	--sk-border-radius: 0.4rem;
 	--sk-page-main-width: 80rem;
+	--sk-banner-bottom-height: 0px;
 
 	/* typography */
 	--sk-font: 'Overpass', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,