Use dismissable banner

app/assets/css/style.css

@@ -95,7 +95,7 @@ h6 { font-size: 0.90em; }
 .material-symbols-outlined {
     font-variation-settings:
         'FILL' 0,
-        'wght' 100,
+        'wght' 400,
         'GRAD' 0,
         'opsz' 24
 }
@@ -623,7 +623,6 @@ button.btn,
 a.btn {
     cursor: pointer;
 }
-
 .btn {
     all: unset;
     display: flex;
@@ -635,6 +634,10 @@ a.btn {
     padding-inline: calc(var(--ui-spacing)*4);
     border-radius: calc(var(--ui-spacing)*5);
 }
+.btn.btn-secondary {
+    background: var(--color-secondary);
+    color: var(--color-on-secondary);
+}
 .btn.btn-sm {
     height: calc(var(--ui-spacing)*9);
 }
@@ -722,4 +725,22 @@ a.btn {
 }
 .toc .toc-link-indent-4 {
     margin-left: calc(var(--ui-spacing)*6);
+}
+.web-dismissable-banner {
+  position: sticky;
+  width: 100%;
+  text-align: center;
+  padding: 0.75rem;
+  background: var(--color-primary);
+  color: var(--color-on-primary);
+}
+.web-dismissable-banner > .web-dismissable-banner-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  max-width: var(--ui-container);
+  padding: 0 calc(var(--ui-spacing)*4);
+  margin: 0 auto;
+  justify-content: space-between;
 }

app/components/web-dismissable-global-banner.vue

@@ -0,0 +1,58 @@
+<template>
+  <div
+    v-if="visible && banner && banner.active"
+    class="web-dismissable-banner"
+  >
+    <div class="web-dismissable-banner-content">
+      <a :href="banner.link" target="_blank" rel="noopener">
+        {{ banner.message }}
+      </a>
+      <button class="btn btn-secondary" @click="dismiss"><span class="material-symbols-outlined">close</span></button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+// 🍪 Cookies
+const bannerDismissedCookie = useCookie('web_banner_dismissed', { maxAge: 60 * 60 * 24 * 30 }) // 30 days
+const bannerLastIdCookie = useCookie('web_banner_last_id', { maxAge: 60 * 60 * 24 * 30 }) // 30 days
+
+// 🔹 State
+const banner = ref<any>(null)
+const visible = ref(false)
+
+onMounted(async () => {
+  try {
+    const data = await $fetch('https://files.thawia.ng/files/config/web/banner/tmp/index.json')
+
+    // If no data or inactive, bail
+    if (!data || !data.active) return
+
+    banner.value = data
+
+    // Check if the banner is new or dismissed
+    const currentId = data.id?.toString() || ''
+    const lastSeenId = bannerLastIdCookie.value?.toString() || ''
+    const dismissed = bannerDismissedCookie.value === currentId
+
+    // Show banner only if new or not dismissed yet
+    if (currentId && (currentId !== lastSeenId || !dismissed)) {
+      visible.value = true
+    }
+
+    // Update last seen id
+    bannerLastIdCookie.value = currentId
+  } catch (err) {
+    console.error('Banner fetch failed:', err)
+  }
+})
+
+function dismiss() {
+  if (banner.value?.id) {
+    bannerDismissedCookie.value = banner.value.id.toString()
+  }
+  visible.value = false
+}
+</script>

app/layouts/default.vue

@@ -1,5 +1,10 @@
+<script setup lang="ts">
+
+</script>
+
 <template>
     <div>
+        <WebDismissableGlobalBanner/>
         <WebHeader/>
         <slot/>
         <WebFooter/>