feat: revert banner

src/lib/components/AnnouncementBanner.svelte

@@ -1,74 +1,24 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { browser } from '$app/environment';
+    import { BANNER_KEY } from '$lib/constants';
+
+    const hideTopBanner = () => {
+        document.body.dataset.bannerHidden = '';
+        localStorage.setItem(BANNER_KEY, 'true');
+    };
 </script>
 
-<div class="banner" class:hidden={$page.url.pathname.includes('init')}>
+<div class="web-top-banner">
-    <div class="content web-u-color-text-primary">
+    <div class="web-top-banner-content web-u-color-text-primary">
-        <div class="headings">
+        <slot />
-            <span style:font-weight="500"
+        {#if browser}
-                >init<span class="web-u-color-text-accent">_</span> is coming
+            <button
-            </span>
+                class="web-top-banner-button"
-            <span class="web-u-color-text-secondary">The start of something new</span>
+                aria-label="close discord message"
-        </div>
+                on:click={hideTopBanner}
-        <a href="/init/tickets" rel="noopener noreferrer">
+            >
-            <span class="web-caption-500">Register now</span>
+                <span class="web-icon-close" aria-hidden="true" />
-            <span class="web-icon-arrow-right" aria-hidden="true" />
+            </button>
-        </a>
+        {/if}
     </div>
-    <div class="shine" />
-    <div class="border" />
 </div>
-
-<style lang="scss">
-    .banner {
-        --shine: rgba(255, 255, 255, 0.04);
-        position: relative;
-        min-height: 80px;
-        display: flex;
-        align-items: center;
-        border-bottom: 1px solid hsl(var(--web-color-border));
-
-        &.hidden {
-            display: none;
-        }
-
-        .content {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            width: 100%;
-            position: relative;
-            z-index: 10;
-            padding-inline: clamp(1.25rem, 4vw, 120rem);
-
-            .headings {
-                display: flex;
-                flex-direction: column;
-            }
-        }
-
-        .shine {
-            position: absolute;
-            inset: 0;
-            background: hsl(var(--web-color-background))
-                linear-gradient(
-                    -24deg,
-                    rgba(255, 255, 255, 0) 0,
-                    var(--shine) 20%,
-                    rgba(255, 255, 255, 0) 40%,
-                    var(--shine) 50%,
-                    rgba(255, 255, 255, 0) 60%,
-                    var(--shine) 80%,
-                    rgba(255, 255, 255, 0) 100%
-                );
-        }
-        .border {
-            position: absolute;
-            left: 0;
-            right: 0;
-            height: 1px;
-            background-color: hsl(var(--web-color-border));
-            bottom: 0;
-        }
-    }
-</style>

src/lib/components/InitBanner.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+</script>
+
+<div class="banner" class:hidden={$page.url.pathname.includes('init')}>
+    <div class="content web-u-color-text-primary">
+        <div class="headings">
+            <span style:font-weight="500"
+                >init<span class="web-u-color-text-accent">_</span> is coming
+            </span>
+            <span class="web-u-color-text-secondary">The start of something new</span>
+        </div>
+        <a href="/init/tickets" rel="noopener noreferrer">
+            <span class="web-caption-500">Register now</span>
+            <span class="web-icon-arrow-right" aria-hidden="true" />
+        </a>
+    </div>
+    <div class="shine" />
+    <div class="border" />
+</div>
+
+<style lang="scss">
+    .banner {
+        --shine: rgba(255, 255, 255, 0.04);
+        position: relative;
+        min-height: 80px;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid hsl(var(--web-color-border));
+
+        &.hidden {
+            display: none;
+        }
+
+        .content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+            position: relative;
+            z-index: 10;
+            padding-inline: clamp(1.25rem, 4vw, 120rem);
+
+            .headings {
+                display: flex;
+                flex-direction: column;
+            }
+        }
+
+        .shine {
+            position: absolute;
+            inset: 0;
+            background: hsl(var(--web-color-background))
+                linear-gradient(
+                    -24deg,
+                    rgba(255, 255, 255, 0) 0,
+                    var(--shine) 20%,
+                    rgba(255, 255, 255, 0) 40%,
+                    var(--shine) 50%,
+                    rgba(255, 255, 255, 0) 60%,
+                    var(--shine) 80%,
+                    rgba(255, 255, 255, 0) 100%
+                );
+        }
+        .border {
+            position: absolute;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background-color: hsl(var(--web-color-border));
+            bottom: 0;
+        }
+    }
+</style>

src/lib/constants.ts

@@ -1,5 +1,5 @@
 export const GITHUB_STARS = '42.8K';
-export const BANNER_KEY = 'init-banner-02'; // Change key to force banner to show again
+export const BANNER_KEY: Banners = 'discord-banner-01'; // Change key to force banner to show again
 export const SENTRY_DSN =
     'https://27d41dc8bb67b596f137924ab8599e59@o1063647.ingest.us.sentry.io/4507497727000576';
 
@@ -9,6 +9,8 @@ export const SENTRY_DSN =
  * init-banner-02
  * pricing-banner-01
  */
+type Banners = 'discord-banner-01' | 'init-banner-02' | 'pricing-banner-01'
+
 
 export type Social = {
     icon: string;

src/lib/layouts/Main.svelte

@@ -25,6 +25,7 @@
     import { loggedIn } from '$lib/utils/console';
     import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
     import AnnouncementBanner from '$lib/components/AnnouncementBanner.svelte';
+    import InitBanner from '$lib/components/InitBanner.svelte';
 
     export let omitMainId = false;
     let theme: 'light' | 'dark' | null = 'dark';
@@ -189,13 +190,25 @@
         </div>
     </section>
     <header
-        class="web-main-header theme-{resolvedTheme} is-transparent"
+        class="web-main-header is-special-padding theme-{resolvedTheme} is-transparent"
-        style="padding-left:0;padding-right:0;"
         class:is-hidden={$isHeaderHidden}
+        class:is-special-padding={BANNER_KEY !== 'init-banner-02'}
+        style={BANNER_KEY === 'init-banner-02' ? 'padding-inline: 0' : ''}
     >
-        <AnnouncementBanner />
+        <AnnouncementBanner>
+            <a href="/discord" target="_blank" rel="noopener noreferrer">
+                <span class="web-caption-500">We are having lots of fun on</span>
+                <span class="web-icon-discord" aria-hidden="true" />
+                <span class="web-caption-500">Discord. Come and join us!</span>
+            </a>
+        </AnnouncementBanner>
 
-        <div class="web-main-header-wrapper is-special-padding">
+        <!-- <InitBanner /> -->
+
+        <div
+            class="web-main-header-wrapper"
+            class:is-special-padding={BANNER_KEY === 'init-banner-02'}
+        >
             <div class="web-main-header-start">
                 <a href="/">
                     <img