Merge branch 'master' into develop

* master: update link to mermaid chart playground fix promo bar links Fix text color Add animated transitions feat: Update promo bar links update badge on mermaid chart page remove product hunt badge chore: Revert pnpm changes add most recent blog posts update product hunt badges chore: Update docs Add Slidev to the list of integrations add announcement bar to docs and minor styling update update product hunt badge on mermaid chart page add product hunt badge to homepage fix linting issue add blog post confluence plugin
2025-01-14 06:43:25 +08:00 · 2024-08-22 16:58:19 +05:30 · 2024-08-22 16:58:19 +05:30 · 2fe5e678bf
commit 2fe5e678bf
parent 0e68788de4 59aaa310dd
10 changed files with 131 additions and 26 deletions
--- a/.cspell/libraries.txt
+++ b/.cspell/libraries.txt
@ -58,6 +58,7 @@ rehype
 roughjs
 rscratch
 shiki
+Slidev
 sparkline
 sphinxcontrib
 ssim
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@ -59,6 +59,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
 - [MonsterWriter](https://www.monsterwriter.com/) ✅
 - [Joplin](https://joplinapp.org) ✅
 - [LiveBook](https://livebook.dev) ✅
+- [Slidev](https://sli.dev) ✅
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
 - [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
 - [Mermerd](https://github.com/KarnerTh/mermerd)
--- a/docs/ecosystem/mermaid-chart.md
+++ b/docs/ecosystem/mermaid-chart.md
@ -12,7 +12,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun

 <br />

-<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+<a href="https://www.producthunt.com/products/mermaid-chart?utm_source=badge-follow&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/follow.svg?product_id=552855&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>

 ## About

--- a/docs/news/blog.md
+++ b/docs/news/blog.md
@ -6,6 +6,30 @@

 # Blog

+## [Mermaid AI Is Here to Change the Game For Diagram Creation](https://www.mermaidchart.com/blog/posts/mermaid-ai-is-here-to-change-the-game-for-diagram-creation/)
+
+22 July 2024 · 5 mins
+
+The Mermaid AI chat interface
+
+## [How to Make a Sequence Diagram with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-sequence-diagram-in-mermaid-chart-step-by-step-guide/)
+
+8 July 2024 · 6 mins
+
+Sequence diagrams are important for communicating complex systems in a clear and concise manner.
+
+## [How to Use the New “Comments” Feature in Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-use-the-new-comments-feature-in-mermaid-chart/)
+
+2 July 2024 · 3 mins
+
+How to Use the New Comments Feature in Mermaid Chart
+
+## [How to Use the official Mermaid Chart for Confluence app](https://www.mermaidchart.com/blog/posts/how-to-use-the-official-mermaid-chart-for-confluence-app/)
+
+21 May 2024 · 4 mins
+
+It doesn’t matter if you’re a data enthusiast, software engineer, or visual storyteller; our Confluence app can allow you to embed Mermaid Chart diagrams — and dynamically edit them — within your Confluence pages.
+
 ## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/)

 7 May 2024 · 5 mins
--- a/packages/mermaid/src/docs/.vitepress/components/ProductHuntBadge.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/ProductHuntBadge.vue
@ -0,0 +1,14 @@
+<template>
+  <div class="-mt-6 mb-8">
+    <a
+      href="https://www.producthunt.com/posts/mermaid-ai-2?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;ai&#0045;2"
+      target="_blank"
+      ><img
+        src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=465568&theme=light"
+        alt="Mermaid&#0032;AI - Maximize&#0032;your&#0032;diagramming&#0032;efficiency&#0032;with&#0032;Mermaid&#0032;AI | Product Hunt"
+        style="width: 250px; height: 54px"
+        width="250"
+        height="54"
+    /></a>
+  </div>
+</template>
--- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
@ -1,26 +1,65 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+interface Taglines {
+  label: string;
+  url: string;
+}
+
+const taglines: Taglines[] = [
+  {
+    label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',
+    url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=visual_editor',
+  },
+  {
+    label: 'Diagram live with teammates in Mermaid Chart',
+    url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=teams',
+  },
+  {
+    label: 'Skip the rough draft with Mermaid AI in Mermaid Chart',
+    url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=mermaid_ai',
+  },
+];
+
+let index = ref(Math.floor(Math.random() * taglines.length));
+onMounted(() => {
+  setInterval(() => {
+    index.value = (index.value + 1) % taglines.length;
+  }, 60_000);
+});
+</script>
+
 <template>
-  <div
-    class="w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex items-center text-center justify-center p-1 text-white"
-  >
-    <p class="flex-grow text-center tracking-wide text-text">
-      <a
-        href="https://www.mermaidchart.com/landing"
-        target="_blank"
-        class="unstyled flex-grow tracking-wide plausible-event-name=bannerClick"
-      >
-        <span class="text-primary-50 font-semibold">{{
-          [
-            'Try diagramming with ChatGPT at Mermaid Chart',
-            'Try Mermaid’s Visual Editor at Mermaid Chart',
-            'Enjoy live collaboration with teammates at Mermaid Chart',
-          ][Math.floor(Math.random() * 3)]
-        }}</span>
-        <button
-          class="ml-4 rounded bg-[#111113] p-1 px-2 text-sm font-semibold tracking-wide text-white"
+  <div class="mb-4 w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex p-1">
+    <p class="w-full tracking-wide fade-text">
+      <transition name="fade" mode="out-in">
+        <a
+          :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"
        >
-          Try it now
-        </button>
-      </a>
+          <span class="font-semibold">{{ taglines[index].label }}</span>
+          <button class="rounded bg-[#111113] p-1 px-2 text-sm font-semibold tracking-wide">
+            Try it now
+          </button>
+        </a>
+      </transition>
    </p>
  </div>
 </template>
+
+<style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 1s;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+</style>
--- a/packages/mermaid/src/docs/.vitepress/theme/index.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/index.ts
@ -11,11 +11,11 @@ import HomePage from '../components/HomePage.vue';
 import TopBar from '../components/TopBar.vue';
 import { getRedirect } from './redirect.js';
 // @ts-ignore Type not available
-import { h } from 'vue';
-import Theme from 'vitepress/theme';
-import '../style/main.css';
 import 'uno.css';
 import type { EnhanceAppContext } from 'vitepress';
+import Theme from 'vitepress/theme';
+import { h } from 'vue';
+import '../style/main.css';

 export default {
  ...DefaultTheme,
@ -24,6 +24,7 @@ export default {
      // Keeping this as comment as it took a lot of time to figure out how to add a component to the top bar.
      'home-hero-before': () => h(TopBar),
      'home-features-after': () => h(HomePage),
+      'doc-before': () => h(TopBar),
    });
  },
  enhanceApp({ app, router }: EnhanceAppContext) {
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@ -54,6 +54,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
 - [MonsterWriter](https://www.monsterwriter.com/) ✅
 - [Joplin](https://joplinapp.org) ✅
 - [LiveBook](https://livebook.dev) ✅
+- [Slidev](https://sli.dev) ✅
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
 - [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
 - [Mermerd](https://github.com/KarnerTh/mermerd)
--- a/packages/mermaid/src/docs/ecosystem/mermaid-chart.md
+++ b/packages/mermaid/src/docs/ecosystem/mermaid-chart.md
@ -6,7 +6,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun

 <br />

-<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+<a href="https://www.producthunt.com/products/mermaid-chart?utm_source=badge-follow&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/follow.svg?product_id=552855&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>

 ## About

--- a/packages/mermaid/src/docs/news/blog.md
+++ b/packages/mermaid/src/docs/news/blog.md
@ -1,5 +1,29 @@
 # Blog

+## [Mermaid AI Is Here to Change the Game For Diagram Creation](https://www.mermaidchart.com/blog/posts/mermaid-ai-is-here-to-change-the-game-for-diagram-creation/)
+
+22 July 2024 · 5 mins
+
+The Mermaid AI chat interface
+
+## [How to Make a Sequence Diagram with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-sequence-diagram-in-mermaid-chart-step-by-step-guide/)
+
+8 July 2024 · 6 mins
+
+Sequence diagrams are important for communicating complex systems in a clear and concise manner.
+
+## [How to Use the New “Comments” Feature in Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-use-the-new-comments-feature-in-mermaid-chart/)
+
+2 July 2024 · 3 mins
+
+How to Use the New Comments Feature in Mermaid Chart
+
+## [How to Use the official Mermaid Chart for Confluence app](https://www.mermaidchart.com/blog/posts/how-to-use-the-official-mermaid-chart-for-confluence-app/)
+
+21 May 2024 · 4 mins
+
+It doesn’t matter if you’re a data enthusiast, software engineer, or visual storyteller; our Confluence app can allow you to embed Mermaid Chart diagrams — and dynamically edit them — within your Confluence pages.
+
 ## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/)

 7 May 2024 · 5 mins