Header banner (#35)

* Start on responsive padding container

* Default to div

* install vueuse

* Install sass

Nesting isn't fully supported yet

* Tweak responsive sizes

* Add banner

* Update types for updates in instance

* Use caches for eslint

.gitignore

@@ -11,3 +11,4 @@ dist
 .idea
 *.story.md
 .vscode
+.eslintcache

components/Base/Container.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+interface BaseContainerProps {
+	tag?: 'div' | 'header' | 'footer' | 'section';
+}
+
+withDefaults(defineProps<BaseContainerProps>(), {
+	tag: 'div',
+});
+</script>
+
+<template>
+	<component :is="tag" class="container">
+		<slot />
+	</component>
+</template>
+
+<style scoped lang="scss">
+.container {
+	display: grid;
+	grid-template-columns:
+		[full-start] minmax(var(--space-2), 1fr)
+		[standard-start] 0
+		[narrow-start] minmax(var(--space-4), 67.5rem)
+		[narrow-end] 0
+		[standard-end] minmax(var(--space-2), 1fr)
+		[full-end];
+	position: relative;
+	padding: 0;
+
+	@media (min-width: 50rem) {
+		grid-template-columns:
+			[full-start] minmax(var(--space-8), 1fr)
+			[standard-start] var(--space-16)
+			[narrow-start] minmax(var(--space-4), 67.5rem)
+			[narrow-end] var(--space-16)
+			[standard-end] minmax(var(--space-8), 1fr)
+			[full-end];
+	}
+}
+
+.container :deep(> *) {
+	/** acts as an overridable default */
+	grid-column: standard;
+}
+</style>

components/Nav/Header/Banner.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+const { $directus, $readItems } = useNuxtApp();
+
+const { data: banner } = useAsyncData(
+	'site-banner',
+	async () =>
+		$directus.request(
+			$readItems('site_banners', {
+				fields: ['id', 'icon', 'content', 'link'],
+				sort: ['-date_created'],
+				limit: 1,
+			})
+		),
+	{ transform: (data) => data[0] }
+);
+
+const dismissedBanners = useLocalStorage('directus-dismissed-banners', [] as string[]);
+
+const bannerVisible = computed(() => {
+	if (!unref(banner)) return false;
+	return unref(dismissedBanners).includes(unref(banner)!.id) === false;
+});
+
+const dismiss = (id: string) => {
+	dismissedBanners.value = [...unref(dismissedBanners), id];
+};
+</script>
+
+<template>
+	<BaseContainer v-if="banner && bannerVisible" class="banner-container">
+		<NuxtLink class="banner" :href="banner.link ?? undefined">
+			<BaseIcon v-if="banner.icon" :name="banner.icon" size="small" />
+			<!-- eslint-disable-next-line vue/no-v-html -->
+			<span class="content" v-html="banner.content" />
+			<BaseIcon class="arrow" name="arrow_forward" size="small" />
+			<button class="dismiss" @click="dismiss(banner.id)"><BaseIcon name="close" size="small" /></button>
+		</NuxtLink>
+	</BaseContainer>
+</template>
+
+<style scoped lang="scss">
+.banner-container {
+	background: linear-gradient(88deg, var(--purple-300) 0%, var(--pink-200) 100%);
+	padding-block: var(--space-1);
+	cursor: pointer;
+}
+
+.banner {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+	color: var(--white);
+	text-decoration: none;
+	font-size: var(--font-size-xs);
+	line-height: var(--line-height-xs);
+
+	.content {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	&:hover .content {
+		text-decoration: underline;
+	}
+
+	button {
+		all: unset;
+		line-height: 0;
+
+		&:focus {
+			outline: revert;
+		}
+	}
+
+	.base-icon {
+		--base-icon-color: var(--white);
+	}
+
+	.arrow {
+		display: none;
+
+		@media (min-width: 50rem) {
+			display: block;
+		}
+	}
+
+	.dismiss {
+		margin-inline-start: auto;
+	}
+}
+</style>

components/Nav/Header.vue → components/Nav/Header/Header.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts"></script>
+
 <template>
-	<div></div>
+	<NavHeaderBanner />
 </template>

nuxt.config.ts

@@ -53,4 +53,6 @@ export default defineNuxtConfig({
 			concurrency: 1,
 		},
 	},
+
+	modules: ['@vueuse/nuxt'],
 });

package.json

@@ -6,7 +6,7 @@
 		"dev": "nuxt dev",
 		"postinstall": "nuxt prepare",
 		"typecheck": "nuxt typecheck",
-		"lint": "eslint .",
+		"lint": "eslint --cache .",
 		"format": "prettier --write \"**/*.{md,y?(a)ml,json,vue}\""
 	},
 	"devDependencies": {
@@ -16,13 +16,15 @@
 		"@types/node": "20.2.5",
 		"@typescript-eslint/eslint-plugin": "5.59.9",
 		"@typescript-eslint/parser": "5.59.9",
+		"@vueuse/nuxt": "10.2.1",
 		"eslint": "8.42.0",
 		"eslint-config-prettier": "8.8.0",
 		"eslint-plugin-prettier": "4.2.1",
 		"eslint-plugin-vue": "9.14.1",
 		"nuxt": "3.5.2",
 		"playwright-aws-lambda": "0.10.0",
 		"prettier": "2.8.8",
+		"sass": "1.64.1",
 		"sitemap": "7.1.1",
 		"typescript": "5.1.3",
 		"vue-tsc": "1.8.0"