docs: make it easy to share with LLMs (#3003)

Co-authored-by: Oli Morris <[email protected]>

Author: olimorris

doc/.vitepress/config.mjs

@@ -3,6 +3,7 @@ import { defineConfig } from "vitepress";
 import { execSync } from "node:child_process";
 import { withMermaid } from "vitepress-plugin-mermaid";
 import llmstxt from "vitepress-plugin-llms";
+import { copyOrDownloadAsMarkdownButtons } from "vitepress-plugin-llms";
 
 const inProd = process.env.NODE_ENV === "production";
 
@@ -78,6 +79,11 @@ export default withMermaid(
     vite: {
       plugins: [llmstxt()],
     },
+    markdown: {
+      config(md) {
+        md.use(copyOrDownloadAsMarkdownButtons);
+      },
+    },
     mermaid: {
       securityLevel: "loose", // Allows more flexibility
       theme: "base", // Use base theme to allow CSS variables to take effect

doc/.vitepress/theme/CopyOrDownloadAsMarkdownButtons.js

@@ -0,0 +1,24 @@
+import { defineClientComponent, useData } from "vitepress";
+import { computed, defineComponent } from "vue";
+
+const ClientCopyOrDownloadAsMarkdownButtons = defineClientComponent(() => {
+  return import("vitepress-plugin-llms/vitepress-components/CopyOrDownloadAsMarkdownButtons.vue");
+});
+
+export default defineComponent({
+  name: "CopyOrDownloadAsMarkdownButtons",
+  setup() {
+    const { page } = useData();
+
+    const shouldShow = computed(() => {
+      // Hide component if path starts with /zh
+      return !page.value.relativePath.startsWith("zh");
+    });
+
+    return () => {
+      if (!shouldShow.value) return null;
+
+      return <ClientCopyOrDownloadAsMarkdownButtons />;
+    };
+  },
+});

doc/.vitepress/theme/index.js

@@ -1,6 +1,14 @@
 import DefaultTheme from "vitepress/theme";
+import CopyOrDownloadAsMarkdownButtons from "vitepress-plugin-llms/vitepress-components/CopyOrDownloadAsMarkdownButtons.vue";
+
 import "./vaporwave.css";
 
 export default {
   extends: DefaultTheme,
+  enhanceApp({ app }) {
+    app.component(
+      "CopyOrDownloadAsMarkdownButtons",
+      CopyOrDownloadAsMarkdownButtons,
+    );
+  },
 };

doc/.vitepress/theme/vaporwave.css

@@ -7,7 +7,8 @@
   --vw-blue: #118dc3;
   --vw-yellow: #eea825;
 
-  .VPMenu {
+  .VPMenu,
+  .dropdown-menu {
     background-color: var(--vp-c-bg) !important;
   }