marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6331 from mermaid-js/fix-promo

Browse Source 
DOCS: fix promo bar
This commit is contained in:
Sidharth Vinod
2025-02-26 13:39:27 +01:00
committed by GitHub
parent fe2e73ed94 510fd0fe71
commit b22103b769
1 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/mermaid/src/docs/.vitepress/components/TopBar.vue
View File

@@ -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>
@@ -109,16 +118,17 @@ 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]"
:key="index"
:href="taglines[index].url"
target="_blank"
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>