Replace the Discord Popup Modal with a banner (#649)

docs/.vitepress/config.mts

@@ -1,3 +1,6 @@
+import type MarkdownIt from 'markdown-it'
+import type StateBlock from 'markdown-it/lib/rules_block/state_block'
+
 import { URL, fileURLToPath } from 'node:url'
 import { resolve } from 'path'
 
@@ -172,5 +175,42 @@ export default defineConfig({
     }
   },
 
-  ignoreDeadLinks: true
+  ignoreDeadLinks: true,
+
+  markdown: {
+    config: (md) => {
+      md.use(discordBannerPlugin);
+    },
+  }
 })
+
+// Custom Markdown-it plugin
+function discordBannerPlugin(md: MarkdownIt) {
+  const marker = '[ discord banner ]'
+
+  md.block.ruler.before(
+    'fence',
+    'discord-banner',
+    (state: StateBlock, startLine: number, endLine: number, silent: boolean): boolean => {
+    const start = state.bMarks[startLine] + state.tShift[startLine];
+    const max = state.eMarks[startLine];
+
+    // Match the custom marker
+    if (state.src.slice(start, max).trim() !== marker) {
+      return false;
+    }
+
+    if (silent) return true;
+
+    // Create a token for the banner component
+    const token = state.push('discord-banner', 'div', 0);
+    token.map = [startLine, startLine + 1];
+    state.line = startLine + 1;
+
+    return true;
+  });
+
+  // Render the component
+  md.renderer.rules['discord-banner'] = () => '<DiscordBanner />'
+}
+

docs/.vitepress/theme/assets/css/tailwind.css

@@ -204,6 +204,10 @@
     }
   }
 
+  .kit-button.kit-button-small {
+    font-size: 12px;
+  }
+
   .kit-button.kit-button-cornflower {
     @apply text-cornflower;
     @apply hocus:text-white hocus:bg-cornflower;

docs/.vitepress/theme/components/DiscordBanner.vue

@@ -0,0 +1,25 @@
+<template>
+<div class="discord-banner p-6 my-12 flex gap-6">
+  <div class="grow-0 shrink-0 basis-6">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path fill="none" d="M0 0h24v24H0z"></path><path d="M21 10.063V4C21 3.44772 20.5523 3 20 3H19C17.0214 4.97864 13.3027 6.08728 11 6.61281V17.3872C13.3027 17.9127 17.0214 19.0214 19 21H20C20.5523 21 21 20.5523 21 20V13.937C21.8626 13.715 22.5 12.9319 22.5 12 22.5 11.0681 21.8626 10.285 21 10.063ZM5 7C3.89543 7 3 7.89543 3 9V15C3 16.1046 3.89543 17 5 17H6L7 22H9V7H5Z"></path>
+    </svg>
+  </div>
+
+  <div class="flex-1 space-y-4">
+    <strong>Need help getting your ML projects to production?</strong>
+
+    <div>Talk with our team about how KitOps can help</div>
+
+    <div>
+      <button class="kit-button kit-button-small kit-button-cornflower">Join our Discord</button>
+    </div>
+  </div>
+</div>
+</template>
+
+<style>
+.discord-banner {
+  background: var(--vp-custom-block-tip-bg);
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -5,10 +5,10 @@ import DefaultTheme from 'vitepress/theme'
 import PlatformSelect from './components/PlatformSelect.vue'
 import PlatformSnippet from './components/PlatformSnippet.vue'
 import GithubStartButton from './components/GithubStartButton.vue'
+import DiscordBanner from './components/DiscordBanner.vue'
 import './assets/css/fonts.css'
 import './assets/css/tailwind.css'
 import './style.css'
-import DiscordModal from './components/DiscordModal.vue'
 
 const isPlatformModalOpen = ref(false)
 
@@ -33,11 +33,11 @@ export default {
       'nav-bar-content-after': () => h(GithubStartButton, {
         class: 'ml-4 pt-2'
       }),
-      'doc-bottom': () => h(DiscordModal)
     })
   },
   enhanceApp({ app, router, siteData }) {
     app.component('PlatformSnippet', PlatformSnippet)
     app.provide('isPlatformModalOpen', isPlatformModalOpen)
+    app.component('DiscordBanner', DiscordBanner);
   }
 } satisfies Theme

docs/src/docs/overview.md

@@ -61,6 +61,8 @@ AI/ML projects often deal with large, unstructured datasets, such as images, vid
 
 One of the core strengths of KitOps is its ability to keep data and code versions in sync. This crucial feature solves the reproducibility issues that frequently arise in AI/ML development, ensuring consistency and reliability across project stages.
 
+[ discord banner ]
+
 ### 🚀 Deployment Ready
 
 Designed with a focus on deployment, ModelKits package assets in standard formats so you can depoly them as [containers or to Kubernetes](./deploy.md). They're also [compatible with nearly any tool](./modelkit/compatibility.md) - helping you get your model to production faster and more efficiently.