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

Release live editor
2025-02-21 22:43:23 +05:30
parent 9a70c08a6f 03404e8e59
commit e0b660d56b
6 changed files with 85 additions and 64 deletions
@@ -1 +1 @@
-20.18.2
+20.18.3
@@ -25,7 +25,7 @@
    "@cypress/snapshot": "2.1.7",
    "@fortawesome/fontawesome-free": "^6.5.1",
    "@sveltejs/adapter-static": "3.0.8",
-    "@sveltejs/kit": "2.17.1",
+    "@sveltejs/kit": "2.17.2",
    "@sveltejs/vite-plugin-svelte": "^4.0.0",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/svelte": "^5.2.4",
@@ -95,7 +95,7 @@
    ]
  },
  "volta": {
-    "node": "18.20.6",
+    "node": "18.20.7",
    "yarn": "1.22.22"
  },
  "engines": {
@@ -15,3 +15,7 @@
  position: initial;
  vertical-align: revert;
 }
+
+.d {
+  @apply border border-red-500;
+}
@@ -67,18 +67,19 @@
      tabindex="0"
      onclick={trackBannerClick}
      onkeypress={trackBannerClick}>
-      <activePromotion.component />
+      <activePromotion.component {closeBanner} />
    </div>
-    <button
-      class="rounded hover:text-black"
-      title="Dismiss banner"
-      aria-label="Dismiss banner"
-      onclick={() => {
-        dismissPromotion(activePromotion?.id);
-        activePromotion = undefined;
-      }}>
-      <i class="fa fa-close px-2"></i>
-    </button>
+    {#snippet closeBanner()}
+      <button
+        title="Dismiss banner"
+        aria-label="Dismiss banner"
+        onclick={() => {
+          dismissPromotion(activePromotion?.id);
+          activePromotion = undefined;
+        }}>
+        <i class="fa fa-close px-2"></i>
+      </button>
+    {/snippet}
  </div>
 {/if}

@@ -1,7 +1,13 @@
 <script lang="ts">
-  import { onDestroy } from 'svelte';
+  import { onDestroy, type Snippet } from 'svelte';
  import { fade } from 'svelte/transition';

+  interface Props {
+    closeBanner: Snippet;
+  }
+
+  let { closeBanner }: Props = $props();
+
  interface Taglines {
    label: string;
    url: string;
@@ -13,15 +19,15 @@
      taglines: [
        {
          label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Chart',
-          url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=AIbundle_A'
+          url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=AIbundle_A'
        },
        {
          label: 'Diagram live with teammates in Mermaid Chart',
-          url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=teams_A'
+          url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=teams_A'
        },
        {
          label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',
-          url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=visual_editor_A'
+          url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=visual_editor_A'
        },
        {
          label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
@@ -46,7 +52,7 @@
        },
        {
          label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
-          url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=whiteboard_A'
+          url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=whiteboard_B'
        }
      ]
    },
@@ -67,7 +73,7 @@
        },
        {
          label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
-          url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=whiteboard_B'
+          url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=whiteboard_A'
        }
      ]
    },
@@ -88,7 +94,7 @@
        },
        {
          label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
-          url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=whiteboard_B'
+          url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=whiteboard_B'
        }
      ]
    }
@@ -101,31 +107,41 @@
  let currentTagline = $state(taglines[index]);

  const interval = setInterval(() => {
-    index = (index + 1) % taglines.length;
-    currentTagline = taglines[index];
+    if (shouldAnimate) {
+      index = (index + 1) % taglines.length;
+      currentTagline = taglines[index];
+    }
  }, 5000);

  onDestroy(() => {
    clearInterval(interval);
  });
+
+  let shouldAnimate = $state(true);
 </script>

 <div
-  class="grid w-full {design === 1
+  class="flex w-full p-1.5 {design === 1
    ? 'bg-gradient-to-r from-[#bd34fe] to-[#ff3670]'
-    : 'bg-[#2E2183]'} ">
-  {#key currentTagline}
-    <a
-      href={currentTagline.url}
-      target="_blank"
-      class="col-start-1 row-start-1 flex items-center justify-center gap-4 p-0.5 no-underline"
-      in:fade={{ delay: 750 }}
-      out:fade={{ duration: 1000 }}>
-      <span class="text-sm tracking-wider">{currentTagline.label}</span>
-      <button
-        class="rounded p-0.5 px-2 text-sm font-semibold tracking-wide"
-        class:bg-[#2E2183]={design === 1}
-        class:bg-[#E0095F]={design === 2}>Try now</button>
-    </a>
-  {/key}
+    : 'bg-[#E0095F]'}"
+  role="banner"
+  onmouseenter={() => (shouldAnimate = false)}
+  onmouseleave={() => (shouldAnimate = true)}>
+  <div class="grid grow">
+    {#key currentTagline}
+      <a
+        href={currentTagline.url}
+        target="_blank"
+        class="col-start-1 row-start-1 flex items-center justify-center gap-4 no-underline"
+        in:fade={{ delay: 750 }}
+        out:fade={{ duration: 1000 }}>
+        <span class="text-sm tracking-wider">{currentTagline.label}</span>
+        <button
+          class="shrink-0 rounded-lg bg-[#1E1A2E] px-3 py-1.5 text-sm font-semibold tracking-wide">
+          Try now
+        </button>
+      </a>
+    {/key}
+  </div>
+  {@render closeBanner()}
 </div>
@@ -81,9 +81,9 @@
  integrity sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==

 "@babel/runtime@^7.12.5":
-  version "7.26.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1"
-  integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==
+  version "7.26.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.9.tgz#aa4c6facc65b9cb3f87d75125ffd47781b475433"
+  integrity sha512-aA63XwOkcl4xxQa3HjPMqOP6LiK0ZDv3mUPYEFXkpHbaFjtGggE1A61FjFzJnB+p7/oy2gA8E+rcBNl/zC1tMg==
  dependencies:
    regenerator-runtime "^0.14.0"

@@ -662,10 +662,10 @@
  resolved "https://registry.yarnpkg.com/@sveltejs/adapter-static/-/adapter-static-3.0.8.tgz#f23ee99a9678dbaec58b79d183bc3defbfe99f1a"
  integrity sha512-YaDrquRpZwfcXbnlDsSrBQNCChVOT9MGuSg+dMAyfsAa1SmiAhrA5jUYUiIMC59G92kIbY/AaQOWcBdq+lh+zg==

-"@sveltejs/kit@2.17.1":
-  version "2.17.1"
-  resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-2.17.1.tgz#24a55dc164f2c88511daac6fcc8bb7db6802d1ba"
-  integrity sha512-CpoGSLqE2MCmcQwA2CWJvOsZ9vW+p/1H3itrFykdgajUNAEyQPbsaSn7fZb6PLHQwe+07njxje9ss0fjZoCAyw==
+"@sveltejs/kit@2.17.2":
+  version "2.17.2"
+  resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-2.17.2.tgz#87c6a1efe42a3f06dd0558e49b79988fec4338bd"
+  integrity sha512-Vypk02baf7qd3SOB1uUwUC/3Oka+srPo2J0a8YN3EfJypRshDkNx9HzNKjSmhOnGWwT+SSO06+N0mAb8iVTmTQ==
  dependencies:
    "@types/cookie" "^0.6.0"
    cookie "^0.6.0"
@@ -738,9 +738,9 @@
    redent "^3.0.0"

 "@testing-library/svelte@^5.2.4":
-  version "5.2.6"
-  resolved "https://registry.yarnpkg.com/@testing-library/svelte/-/svelte-5.2.6.tgz#fdbb1a8950d8b57c75602e4fda8b4627e7c37eac"
-  integrity sha512-1Y8cEg/BtV4J6g9irkY0ksz+ueDFYLiikjTLiqvQPkOUeDzR4gg2zECBf8yrOrCy3e2TAOYMcaysFa0bQMyk1w==
+  version "5.2.7"
+  resolved "https://registry.yarnpkg.com/@testing-library/svelte/-/svelte-5.2.7.tgz#c759401cd186ad85ab30a981f8c82de3997b994f"
+  integrity sha512-aGhUaFmEXEVost4QOsbHUUbHLwi7ZZRRxAHFDO2Cmr0BZD3/3+XvaYEPq70Rdw0NRNjdqZHdARBEcrCOkPuAqw==
  dependencies:
    "@testing-library/dom" "^10.0.0"

@@ -1844,9 +1844,9 @@ caniuse-api@^3.0.0:
    lodash.uniq "^4.5.0"

 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001565, caniuse-lite@^1.0.30001587, caniuse-lite@^1.0.30001646:
-  version "1.0.30001696"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001696.tgz"
-  integrity sha512-pDCPkvzfa39ehJtJ+OwGT/2yvT2SbjfHhiIW2LWOAcMQ7BzwxT/XuyUp4OTOd0XFWA6BKw0JalnBHgSi5DGJBQ==
+  version "1.0.30001699"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001699.tgz"
+  integrity sha512-b+uH5BakXZ9Do9iK+CkDmctUSEqZl+SP056vc5usa0PL+ev5OHw003rZXcnjNDv3L8P5j6rwT6C0BPKSikW08w==

 caseless@~0.12.0:
  version "0.12.0"
@@ -3238,9 +3238,9 @@ esquery@^1.4.2, esquery@^1.5.0:
    estraverse "^5.1.0"

 esrap@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/esrap/-/esrap-1.4.3.tgz#456ed3c97cf0e6b58b952d351c7c78fe27116576"
-  integrity sha512-Xddc1RsoFJ4z9nR7W7BFaEPIp4UXoeQ0+077UdWLxbafMQFyU79sQJMk7kxNgRwQ9/aVgaKacCHC2pUACGwmYw==
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/esrap/-/esrap-1.4.5.tgz#45469ad75773fd948d0eb190c2677e4807ba2483"
+  integrity sha512-CjNMjkBWWZeHn+VX+gS8YvFwJ5+NDhg8aWZBSFJPR8qQduDNjbJodA2WcwCm7uQa5Rjqj+nZvVmceg1RbHFB9g==
  dependencies:
    "@jridgewell/sourcemap-codec" "^1.4.15"

@@ -5393,9 +5393,9 @@ postcss@^8.3.0:
    source-map-js "^1.0.2"

 postcss@^8.4.23, postcss@^8.4.33, postcss@^8.4.38, postcss@^8.4.39, postcss@^8.4.4, postcss@^8.4.43, postcss@^8.4.47:
-  version "8.5.1"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.1.tgz#e2272a1f8a807fafa413218245630b5db10a3214"
-  integrity sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==
+  version "8.5.3"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.3.tgz#1463b6f1c7fb16fe258736cba29a2de35237eafb"
+  integrity sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==
  dependencies:
    nanoid "^3.3.8"
    picocolors "^1.1.1"
@@ -5426,9 +5426,9 @@ prettier-plugin-tailwindcss@^0.6.0:
  integrity sha512-YxaYSIvZPAqhrrEpRtonnrXdghZg1irNg4qrjboCXrpybLWVs55cW2N3juhspVJiO0JBvYJT8SYsJpc8OQSnsA==

 prettier@^3.1.0:
-  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.4.2.tgz#a5ce1fb522a588bf2b78ca44c6e6fe5aa5a2b13f"
-  integrity sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.5.1.tgz#22fac9d0b18c0b92055ac8fb619ac1c7bef02fb7"
+  integrity sha512-hPpFQvHwL3Qv5AdRvBFMhnKo4tYxp0ReXiPn2bxkiohEX6mBeBwEpBSQTkD458RaaDKQMYSp4hX4UtfUTA5wDw==

 pretty-bytes@^5.6.0:
  version "5.6.0"
@@ -6210,9 +6210,9 @@ svelte-preprocess@^6.0.0:
  integrity sha512-PLG2k05qHdhmRG7zR/dyo5qKvakhm8IJ+hD2eFRQmMLHp7X3eJnjeupUtvuRpbNiF31RjVw45W+abDwHEmP5OA==

 svelte@^5.0.0:
-  version "5.19.7"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-5.19.7.tgz#4f3c32d0e6ef8c737f6951d786b502671e440559"
-  integrity sha512-I0UUp2MpB5gF8aqHJVklOcRcoLgQNnBolSwLMMqDepE9gVwmGeYBmJp1/obzae72QpxdPIymA4AunIm2x70LBg==
+  version "5.20.2"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-5.20.2.tgz#b08c003e982a32c588dcbbf24c1ac8606c0654dd"
+  integrity sha512-aYXJreNUiyTob0QOzRZeBXZMGeFZDch6SrSRV8QTncZb6zj0O3BEdUzPpojuHQ1pTvk+KX7I6rZCXPUf8pTPxA==
  dependencies:
    "@ampproject/remapping" "^2.3.0"
    "@jridgewell/sourcemap-codec" "^1.5.0"
@@ -1 +1 @@
 .18.2
 .18.3