Merge pull request #1879 from mermaid-js/release-promotion

Release live editor

.vscode/settings.json

@@ -16,6 +16,7 @@
     "localstorage",
     "mermaidchart",
     "mindmap",
+    "NEWYEAR",
     "Pageview",
     "pako",
     "panmove",

package.json

@@ -95,7 +95,7 @@
     "@fsegurai/codemirror-theme-vscode-light": "^6.1.4",
     "@mermaid-js/examples": "^1.0.0",
     "@mermaid-js/layout-elk": "^0.1.9",
-    "@mermaid-js/layout-tidy-tree": "^0.2.0",
+    "@mermaid-js/layout-tidy-tree": "^0.2.1",
     "@mermaid-js/mermaid-zenuml": "^0.2.2",
     "codemirror": "^6.0.1",
     "dayjs": "^1.11.13",

pnpm-lock.yaml

@@ -42,8 +42,8 @@ importers:
         specifier: ^0.1.9
         version: 0.1.9(mermaid@11.12.0)
       '@mermaid-js/layout-tidy-tree':
-        specifier: ^0.2.0
-        version: 0.2.0(mermaid@11.12.0)
+        specifier: ^0.2.1
+        version: 0.2.1(mermaid@11.12.0)
       '@mermaid-js/mermaid-zenuml':
         specifier: ^0.2.2
         version: 0.2.2(mermaid@11.12.0)
@@ -792,8 +792,8 @@ packages:
     peerDependencies:
       mermaid: ^11.0.2
 
-  '@mermaid-js/layout-tidy-tree@0.2.0':
-    resolution: {integrity: sha512-0bZFuMQKgpW16cQ4MlUkLTi8l4UUz1pQ0tokGAuR/uVSo2BYvixYBPGxYm13fyQ5M/UUSjUQQ0Zo2nrWUKPwSA==}
+  '@mermaid-js/layout-tidy-tree@0.2.1':
+    resolution: {integrity: sha512-LZFmu6SZmAR5N/aesR7ya5JwEjCrGh7J64n7vFmHqVDHDJjIx+LsEi0dmt0WTYbP4wdKFLLykpvRsemRgAnLXA==}
     peerDependencies:
       mermaid: ^11.0.2
 
@@ -2858,9 +2858,6 @@ packages:
   node-releases@2.0.19:
     resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
 
-  non-layered-tidy-tree-layout@2.0.2:
-    resolution: {integrity: sha512-gkXMxRzUH+PB0ax9dUN0yYF0S25BqeAYqhgMaLUFmpXLEk7Fcu8f4emJuOAY0V8kjDICxROIKsTAKsV/v355xw==}
-
   normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
@@ -4676,11 +4673,10 @@ snapshots:
       elkjs: 0.9.3
       mermaid: 11.12.0
 
-  '@mermaid-js/layout-tidy-tree@0.2.0(mermaid@11.12.0)':
+  '@mermaid-js/layout-tidy-tree@0.2.1(mermaid@11.12.0)':
     dependencies:
       d3: 7.9.0
       mermaid: 11.12.0
-      non-layered-tidy-tree-layout: 2.0.2
 
   '@mermaid-js/mermaid-zenuml@0.2.2(mermaid@11.12.0)':
     dependencies:
@@ -5311,7 +5307,7 @@ snapshots:
       '@vue/compiler-ssr': 3.5.13
       '@vue/shared': 3.5.13
       estree-walker: 2.0.2
-      magic-string: 0.30.17
+      magic-string: 0.30.21
       postcss: 8.5.6
       source-map-js: 1.2.1
     optional: true
@@ -6874,8 +6870,6 @@ snapshots:
 
   node-releases@2.0.19: {}
 
-  non-layered-tidy-tree-layout@2.0.2: {}
-
   normalize-path@3.0.0: {}
 
   normalize-range@0.1.2: {}

src/lib/util/promos/NewYear2026.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import { Button } from '$/components/ui/button';
+  import { env } from '$/util/env';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    closeBanner: Snippet;
+  }
+
+  let { closeBanner }: Props = $props();
+
+  interface VariantConfig {
+    bannerCopy: string;
+    buttonCopy: string;
+    campaign: 'variant_a' | 'variant_b' | 'variant_c';
+  }
+
+  const variants: VariantConfig[] = [
+    {
+      bannerCopy: 'Use code NEWYEAR for 10% off Mermaid Advanced Editor (limited time)',
+      buttonCopy: 'Try now',
+      campaign: 'variant_a'
+    },
+    {
+      bannerCopy: 'Limited time: 10% off Mermaid Advanced Editor with code NEWYEAR',
+      buttonCopy: 'Claim discount',
+      campaign: 'variant_b'
+    },
+    {
+      bannerCopy: 'Try Mermaid Advanced Editor — get 10% off with code NEWYEAR',
+      buttonCopy: 'Get started',
+      campaign: 'variant_c'
+    }
+  ];
+
+  // Determine UTM source based on deployment domain
+  const getUtmSource = (): string => {
+    const domain = env.domain;
+    if (domain === 'mermaid.ai') {
+      return 'mermaid_ai_live';
+    }
+    return 'mermaid_live_editor';
+  };
+
+  // Randomly select a variant on component mount
+  const getRandomVariant = (): VariantConfig => {
+    const index = Math.floor(Math.random() * variants.length);
+    return variants[index];
+  };
+
+  const selectedVariant = getRandomVariant();
+  const utmSource = getUtmSource();
+
+  const buildUrl = (variant: VariantConfig): string => {
+    const params = new URLSearchParams({
+      utm_medium: 'banner_ad',
+      utm_campaign: variant.campaign,
+      utm_source: utmSource
+    });
+    return `https://mermaid.ai/?${params.toString()}`;
+  };
+</script>
+
+<div class="flex w-full items-center bg-[#E0095F] p-1.5" role="banner">
+  <div class="grid grow">
+    <a
+      href={buildUrl(selectedVariant)}
+      target="_blank"
+      class="col-start-1 row-start-1 flex items-center justify-center gap-4 no-underline">
+      <span class="text-base tracking-wider text-white">{selectedVariant.bannerCopy}</span>
+      <Button
+        class="shrink-0 rounded-md bg-[#1E1A2E] px-3 py-1.5 text-base font-semibold tracking-wide text-white hover:bg-[#261A56]">
+        {selectedVariant.buttonCopy}
+      </Button>
+    </a>
+  </div>
+  {@render closeBanner()}
+</div>

src/lib/util/promos/promo.ts

@@ -5,6 +5,7 @@ import type { Component } from 'svelte';
 import { get, writable, type Writable } from 'svelte/store';
 import { localStorage, persist } from '../persist';
 import April2025 from './April2025.svelte';
+import NewYear2026 from './NewYear2026.svelte';
 
 dayjs.extend(duration);
 
@@ -16,6 +17,12 @@ interface Promotion {
 }
 
 const promotions: Record<string, Promotion> = {
+  'promo-newyear-2026': {
+    startDate: new Date('2026-01-01'),
+    endDate: new Date('2026-03-14'),
+    component: NewYear2026,
+    hideDurationMs: dayjs.duration(1, 'week').asMilliseconds()
+  },
   'promo-april-2025': {
     startDate: new Date('2025-04-01'),
     endDate: new Date('2028-12-31'),