mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-20 07:49:43 +02:00
Merge pull request #6624 from mermaid-js/rajat-ht/chore-update-banner-ad
chore: update banner ad
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, type Ref, ref } from 'vue';
|
||||
import { useRoute } from 'vitepress';
|
||||
import { computed, onMounted, type Ref, ref } from 'vue';
|
||||
|
||||
interface Taglines {
|
||||
label: string;
|
||||
@@ -7,6 +8,10 @@ interface Taglines {
|
||||
}
|
||||
|
||||
const taglines: Taglines[] = [
|
||||
{
|
||||
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=visual_editor',
|
||||
},
|
||||
{
|
||||
label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Chart',
|
||||
url: 'https://www.mermaidchart.com/mermaid-ai?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=aibundle',
|
||||
@@ -17,38 +22,21 @@ const taglines: Taglines[] = [
|
||||
},
|
||||
];
|
||||
|
||||
const randomTagLines: Taglines[] = [
|
||||
{
|
||||
label: "Customize your layout and design in Mermaid Chart's whiteboard!",
|
||||
url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=whiteboard',
|
||||
},
|
||||
{
|
||||
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=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 currentBannerSet: Ref<Taglines[]> = ref(taglines);
|
||||
const isPaused: Ref<boolean> = ref(false);
|
||||
const route = useRoute();
|
||||
|
||||
const isHomePage = computed(() => {
|
||||
return route.path === '/';
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
const newIndex = Math.floor(Math.random() * randomTagLines.length);
|
||||
currentBannerSet.value = [...taglines, randomTagLines[newIndex]];
|
||||
index.value = Math.floor(Math.random() * currentBannerSet.value.length);
|
||||
index.value = Math.floor(Math.random() * taglines.length);
|
||||
setInterval(() => {
|
||||
if (isPaused.value) {
|
||||
return;
|
||||
}
|
||||
index.value = (index.value + 1) % currentBannerSet.value.length;
|
||||
index.value = (index.value + 1) % taglines.length;
|
||||
}, 5_000);
|
||||
});
|
||||
</script>
|
||||
@@ -59,16 +47,19 @@ onMounted(() => {
|
||||
@mouseenter="isPaused = true"
|
||||
@mouseleave="isPaused = false"
|
||||
>
|
||||
<p class="w-full tracking-wide fade-text text-sm">
|
||||
<p class="w-full tracking-wide fade-text" :class="isHomePage ? 'text-lg' : 'text-sm'">
|
||||
<transition name="fade" mode="out-in">
|
||||
<a
|
||||
:key="index"
|
||||
:href="currentBannerSet[index].url"
|
||||
:href="taglines[index].url"
|
||||
target="_blank"
|
||||
class="unstyled flex justify-center items-center gap-4 text-white no-tooltip tracking-wide plausible-event-name=bannerClick"
|
||||
class="unstyled flex justify-center items-center gap-4 no-tooltip text-white tracking-wide plausible-event-name=bannerClick"
|
||||
>
|
||||
<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">
|
||||
<span class="font-semibold">{{ taglines[index].label }}</span>
|
||||
<button
|
||||
class="bg-[#1E1A2E] shrink-0 rounded-lg p-1.5 px-4 font-semibold tracking-wide"
|
||||
:class="isHomePage ? 'text-lg' : 'text-sm'"
|
||||
>
|
||||
Try now
|
||||
</button>
|
||||
</a>
|
||||
|
Reference in New Issue
Block a user