Merge branch 'master' into develop

* master:
  chore: Update MC promo link
  remove toSorted
  chore: Tweak start and end dates
  feat: Add Holiday2023 banner

src/lib/components/Navbar.svelte

@@ -8,6 +8,7 @@
 
 <script lang="ts">
   import Theme from './Theme.svelte';
+  import { dismissPromotion, getActivePromotion } from '$lib/util/promos/promo';
   let isMenuOpen = false;
 
   function toggleMenu() {
@@ -46,8 +47,25 @@
       img: './mermaidchart-logo.svg'
     }
   ];
+
+  let activePromotion = getActivePromotion();
 </script>
 
+{#if activePromotion}
+  <div
+    class="z-10 w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex items-center text-center justify-center p-1 text-white">
+    <svelte:component this={activePromotion.component} />
+    <button
+      title="Dismiss banner"
+      on:click={() => {
+        dismissPromotion(activePromotion?.id);
+        activePromotion = undefined;
+      }}>
+      <i class="fa fa-close px-2" />
+    </button>
+  </div>
+{/if}
+
 <div class="navbar shadow-lg bg-primary p-0">
   <div class="flex-1 px-2 mx-2">
     <span class="text-lg font-bold">
@@ -93,7 +111,7 @@
     id="menu-toggle"
     bind:checked={isMenuOpen}
     on:click={toggleMenu} />
-  
+
   <div class="hidden lg:flex lg:items-center lg:w-auto w-full" id="menu">
     <Theme />
     <ul class="lg:flex items-center justify-between text-base pt-4 lg:pt-0">
@@ -115,7 +133,6 @@
   </div>
 </div>
 
-
 <style>
   #menu-toggle:checked + #menu {
     position: absolute;

src/lib/util/promos/Holiday2023.svelte

@@ -0,0 +1,7 @@
+<a
+  href="https://www.mermaidchart.com/app/user/billing/checkout?coupon=HOLIDAYS2023"
+  target="_blank"
+  class="tracking-wide flex-grow">
+  Get AI, team collaboration, storage, and more with
+  <span class="font-bold underline">Mermaid Chart Pro. Start free trial today & get 25% off.</span>
+</a>

src/lib/util/promos/promo.ts

@@ -0,0 +1,47 @@
+import { writable, type Writable, get } from 'svelte/store';
+import { persist, localStorage } from '../persist';
+import Holiday2023 from './Holiday2023.svelte';
+
+interface Promotion {
+  id: string;
+  startDate: Date;
+  endDate: Date;
+  component: ConstructorOfATypedSvelteComponent;
+}
+
+const promotions: Promotion[] = [
+  {
+    id: 'holiday-2023',
+    startDate: new Date('2023-11-27'),
+    endDate: new Date('2024-01-01'),
+    component: Holiday2023
+  }
+];
+
+export const dismissPromotion = (id?: string): void => {
+  if (!id) {
+    return;
+  }
+  dismissedPromotionsStore.update((dismissedIDs: string[]) => {
+    dismissedIDs.push(id);
+    return dismissedIDs;
+  });
+};
+
+const dismissedPromotionsStore: Writable<string[]> = persist(
+  writable([]),
+  localStorage(),
+  'dismissedPromotions'
+);
+
+export const getActivePromotion = (): Promotion | undefined => {
+  const dismissedPromotions = get(dismissedPromotionsStore);
+  const now = new Date();
+  return promotions
+    .filter(
+      (p: Promotion) =>
+        p.startDate <= now && p.endDate >= now && !dismissedPromotions.includes(p.id)
+    )
+    .sort((a: Promotion, b: Promotion) => b.endDate.getTime() - a.endDate.getTime())
+    .pop();
+};