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

chore: Update announcement bar

Browse Source
This commit is contained in:
rajat-ht
2025-05-05 21:17:09 +05:30
parent cee43a45f6
commit 02ff3c1216
1 changed files with 28 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { type Ref, ref, onMounted } from 'vue'; import { onMounted, type Ref, ref } from 'vue';
interface Taglines { interface Taglines {
label: string; label: string;
@@ -8,29 +8,46 @@ interface Taglines {
const taglines: Taglines[] = [ const taglines: Taglines[] = [
{ {
label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Chart', label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Pro',
url: 'https://www.mermaidchart.com/mermaid-ai?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=aibundle', url: 'https://www.mermaidchart.com/mermaid-ai?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=aibundle',
}, },
{ {
label: 'Diagram live with teammates in Mermaid Chart', label: 'Diagram live with teammates in Mermaid Pro',
url: 'https://www.mermaidchart.com/landing?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=team_collaboration', url: 'https://www.mermaidchart.com/landing?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=team_collaboration',
}, },
];
const randomTagLines: Taglines[] = [
{ {
label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams', label: 'Customize your layout and design in Mermaid Chart’s whiteboard!',
url: 'https://www.mermaidchart.com/landing?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor', url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=whiteboard',
}, },
{ {
label: 'Explore the Mermaid Whiteboard from the creators of Mermaid', label: 'Customize your layout and design in Mermaid Chart’s visual editor!',
url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=whiteboard', url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor',
},
{
label: 'Customize your layout and design with Mermaid Chart’s GUI!',
url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=GUI',
},
{
label: 'Customize your layout and design in Mermaid Chart!',
url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor_whiteboard_gui',
}, },
]; ];
const index: Ref<number> = ref(0); const index: Ref<number> = ref(0);
const currentBannerSet = ref<Taglines[]>(taglines);
console.log('currentBannerSet:', currentBannerSet.value);
onMounted(() => { onMounted(() => {
index.value = Math.floor(Math.random() * taglines.length); const newIndex = Math.floor(Math.random() * randomTagLines.length);
console.log('newIndex:', newIndex);
currentBannerSet.value = [...taglines, randomTagLines[newIndex]];
index.value = Math.floor(Math.random() * currentBannerSet.value.length);
setInterval(() => { setInterval(() => {
index.value = (index.value + 1) % taglines.length; index.value = (index.value + 1) % currentBannerSet.value.length;
}, 5_000); }, 5_000);
}); });
</script> </script>
@@ -41,11 +58,11 @@ onMounted(() => {
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<a <a
:key="index" :key="index"
:href="taglines[index].url" :href="currentBannerSet?.[index]?.url"
target="_blank" target="_blank"
class="unstyled flex justify-center items-center gap-4 text-white tracking-wide plausible-event-name=bannerClick" 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> <span class="font-semibold">{{ currentBannerSet?.[index]?.label }}</span>
<button class="bg-[#1E1A2E] shrink-0 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 Try now
</button> </button>