Add TopBar

docs/ecosystem/integrations-community.md

@@ -4,7 +4,9 @@
 >
 > ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/integrations-community.md](../../packages/mermaid/src/docs/ecosystem/integrations-community.md).
 
-# Integrations - community
+# Integrations
+
+## Official integration: [Mermaid Chart](./mermaid-chart.md)
 
 We're excited about the growth of the Mermaid community, and the number of plugins and integrations that have been created with Mermaid.
 

packages/mermaid/src/docs/.vitepress/components/TopBar.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex items-center justify-center p-1"
+  >
+    We've made our
+    <a
+      href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&amp;utm_medium=badge&amp;utm_souce=badge-mermaid-chart"
+      target="_blank"
+      class="unstyled font-semibold text-lg underline px-1"
+      >Product Hunt</a
+    >
+    debut! &nbsp;
+    <a
+      href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&amp;utm_medium=badge&amp;utm_souce=badge-mermaid-chart"
+      target="_blank"
+      >Show us some love and help spread the word</a
+    >, plus receive 25% off on annual Pro subscription!
+  </div>
+</template>

packages/mermaid/src/docs/.vitepress/theme/index.ts

@@ -6,6 +6,9 @@ import Mermaid from './Mermaid.vue';
 import Contributors from '../components/Contributors.vue';
 // @ts-ignore
 import HomePage from '../components/HomePage.vue';
+// @ts-ignore
+import TopBar from '../components/TopBar.vue';
+
 import { getRedirect } from './redirect.js';
 
 import { h } from 'vue';
@@ -18,6 +21,7 @@ export default {
   ...DefaultTheme,
   Layout() {
     return h(Theme.Layout, null, {
+      'home-hero-before': () => h(TopBar),
       'home-features-after': () => h(HomePage),
     });
   },