From 9268cc2e07461f2265a7767b5831219a1637eec8 Mon Sep 17 00:00:00 2001
From: Steph <35910788+huynhicode@users.noreply.github.com>
Date: Tue, 25 Feb 2025 21:37:38 -0800
Subject: [PATCH 1/2] fix promo bar

---
 .../src/docs/.vitepress/components/TopBar.vue | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
index 94c32d840..ee29e07a8 100644
--- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue';
+import { type Ref, ref, onMounted } from 'vue';
 
 interface Taglines {
   label: string;
@@ -93,13 +93,22 @@ const allTaglines: { [key: string]: { design: number; taglines: Taglines[] } } =
   },
 };
 
-const { design, taglines } =
-  Object.values(allTaglines)[Math.floor(Math.random() * Object.values(allTaglines).length)];
+// Initialize with default values
+const design: Ref<number> = ref(1);
+const taglines: Ref<Taglines[]> = ref([]);
+const index: Ref<number> = ref(0);
 
-let index = ref(Math.floor(Math.random() * taglines.length));
 onMounted(() => {
+  // Select a random variant on client side
+  const variant =
+    Object.values(allTaglines)[Math.floor(Math.random() * Object.values(allTaglines).length)];
+  design.value = variant.design;
+  taglines.value = variant.taglines;
+  index.value = Math.floor(Math.random() * taglines.value.length);
+
+  // Set up the interval for cycling through taglines
   setInterval(() => {
-    index.value = (index.value + 1) % taglines.length;
+    index.value = (index.value + 1) % taglines.value.length;
   }, 5_000);
 });
 </script>
@@ -112,6 +121,7 @@ onMounted(() => {
     <p class="w-full tracking-wide fade-text">
       <transition name="fade" mode="out-in">
         <a
+          v-if="taglines.length > 0 && taglines[index]"
           :key="index"
           :href="taglines[index].url"
           target="_blank"

From 510fd0fe71ad64fb46ff2abc870aeab813e692a4 Mon Sep 17 00:00:00 2001
From: Steph <35910788+huynhicode@users.noreply.github.com>
Date: Tue, 25 Feb 2025 21:57:38 -0800
Subject: [PATCH 2/2] update styling

---
 packages/mermaid/src/docs/.vitepress/components/TopBar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
index ee29e07a8..0914d808e 100644
--- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
@@ -118,7 +118,7 @@ onMounted(() => {
     :class="[design === 1 ? 'bg-gradient-to-r from-[#bd34fe] to-[#ff3670] ' : 'bg-[#E0095F]']"
     class="mb-4 w-full top-bar flex p-2"
   >
-    <p class="w-full tracking-wide fade-text">
+    <p class="w-full tracking-wide fade-text text-sm">
       <transition name="fade" mode="out-in">
         <a
           v-if="taglines.length > 0 && taglines[index]"
@@ -128,7 +128,7 @@ onMounted(() => {
           class="unstyled flex justify-center items-center gap-4 text-white tracking-wide plausible-event-name=bannerClick"
         >
           <span class="font-semibold">{{ taglines[index].label }}</span>
-          <button class="bg-[#1E1A2E] rounded-lg p-1.5 px-4 font-semibold tracking-wide">
+          <button class="bg-[#1E1A2E] shrink-0 rounded-lg p-1.5 px-4 font-semibold tracking-wide">
             Try now
           </button>
         </a>