feat: plugin docs modal with markdown rendering

2026-01-26 05:25:36 +07:00 · 2026-01-18 19:02:35 +07:00
parent 150ec8e0a3
commit 95c971e591
4 changed files with 217 additions and 4 deletions
--- a/.vitepress/theme/components/Modal.vue
+++ b/.vitepress/theme/components/Modal.vue
@@ -0,0 +1,107 @@
+<script setup>
+defineProps({
+  show: Boolean,
+  title: String
+})
+
+defineEmits(['close'])
+</script>
+
+<template>
+  <Transition name="modal">
+    <div v-if="show" class="modal-mask" @click.self="$emit('close')">
+      <div class="modal-container glass-panel">
+        <div class="modal-header">
+          <h3 class="modal-title">{{ title }}</h3>
+          <button class="close-btn" @click="$emit('close')">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+          </button>
+        </div>
+
+        <div class="modal-body custom-scrollbar">
+          <slot name="body">Default body</slot>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  display: flex;
+  transition: opacity 0.3s ease;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.modal-container {
+  width: 100%;
+  max-width: 800px;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
+  transition: all 0.3s ease;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.modal-header {
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--vp-c-divider);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.close-btn {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--vp-c-text-2);
+  padding: 4px;
+  border-radius: 4px;
+}
+
+.close-btn:hover {
+  background-color: var(--vp-c-bg-alt);
+  color: var(--vp-c-text-1);
+}
+
+.modal-body {
+  padding: 24px;
+  overflow-y: auto;
+  line-height: 1.6;
+}
+
+/* Transitions */
+.modal-enter-from {
+  opacity: 0;
+}
+
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-from .modal-container,
+.modal-leave-to .modal-container {
+  transform: scale(0.95);
+  opacity: 0;
+}
+</style>
--- a/.vitepress/theme/components/PluginRegistry.vue
+++ b/.vitepress/theme/components/PluginRegistry.vue
@@ -1,5 +1,7 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
+import MarkdownIt from 'markdown-it'
+import Modal from './Modal.vue'

 const props = defineProps({
    title: { type: String, default: 'Plugin Registry' },
@@ -11,6 +13,33 @@ const loading = ref(true)
 const searchQuery = ref('')
 const activeCategory = ref('All')

+// Docs Modal Logic
+const showModal = ref(false)
+const modalTitle = ref('')
+const modalContent = ref('')
+const loadingDocs = ref(false)
+const md = new MarkdownIt({ html: true, linkify: true })
+
+const fetchDocs = async (plugin) => {
+    modalTitle.value = plugin.name
+    modalContent.value = ''
+    showModal.value = true
+    loadingDocs.value = true
+    
+    try {
+        const res = await fetch(plugin.readme)
+        if (!res.ok) throw new Error('Failed to load README')
+        const text = await res.text()
+        // Simple sanitization or just render
+        modalContent.value = md.render(text)
+    } catch (e) {
+        modalContent.value = `<p class="text-error">Failed to load documentation: ${e.message}</p>
+        <p><a href="${plugin.repo}" target="_blank" rel="noopener noreferrer">View on GitHub</a></p>`
+    } finally {
+        loadingDocs.value = false
+    }
+}
+
 // Fetch data
 const fetchPlugins = async () => {
    loading.value = true
@@ -75,6 +104,16 @@ function copyToClipboard(text) {
            <p class="page-description">{{ description }}</p>
        </div>

+        <!-- Docs Modal -->
+        <Modal :show="showModal" :title="modalTitle" @close="showModal = false">
+            <template #body>
+                <div v-if="loadingDocs" class="flex justify-center p-8">
+                    <div class="spinner"></div>
+                </div>
+                <div v-else class="markdown-body vp-doc" v-html="modalContent"></div>
+            </template>
+        </Modal>
+
        <div class="plugin-registry space-y-8">
            <!-- Search & Filter Controls -->
            <div class="controls-wrapper glass-panel">
@@ -138,7 +177,7 @@ function copyToClipboard(text) {
                    </div>

                    <div class="card-footer">
-                        <a :href="plugin.readme" target="_blank" class="VPButton alt action-btn">Docs</a>
+                        <button @click="fetchDocs(plugin)" class="VPButton alt action-btn">Docs</button>
                        <a :href="plugin.download" class="VPButton brand action-btn">Download</a>
                    </div>
                </div>
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,8 @@
            "license": "MIT",
            "dependencies": {
                "flag-icons": "^7.5.0",
-                "lucide-vue-next": "^0.562.0"
+                "lucide-vue-next": "^0.562.0",
+                "markdown-it": "^14.1.0"
            },
            "devDependencies": {
                "autoprefixer": "^10.4.23",
@@ -1692,6 +1693,12 @@
            "dev": true,
            "license": "MIT"
        },
+        "node_modules/argparse": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+            "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+            "license": "Python-2.0"
+        },
        "node_modules/autoprefixer": {
            "version": "10.4.23",
            "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.23.tgz",
@@ -2381,6 +2388,15 @@
            "dev": true,
            "license": "MIT"
        },
+        "node_modules/linkify-it": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+            "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+            "license": "MIT",
+            "dependencies": {
+                "uc.micro": "^2.0.0"
+            }
+        },
        "node_modules/lucide-vue-next": {
            "version": "0.562.0",
            "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.562.0.tgz",
@@ -2406,6 +2422,35 @@
            "dev": true,
            "license": "MIT"
        },
+        "node_modules/markdown-it": {
+            "version": "14.1.0",
+            "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+            "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+            "license": "MIT",
+            "dependencies": {
+                "argparse": "^2.0.1",
+                "entities": "^4.4.0",
+                "linkify-it": "^5.0.0",
+                "mdurl": "^2.0.0",
+                "punycode.js": "^2.3.1",
+                "uc.micro": "^2.1.0"
+            },
+            "bin": {
+                "markdown-it": "bin/markdown-it.mjs"
+            }
+        },
+        "node_modules/markdown-it/node_modules/entities": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+            "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+            "license": "BSD-2-Clause",
+            "engines": {
+                "node": ">=0.12"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/entities?sponsor=1"
+            }
+        },
        "node_modules/mdast-util-to-hast": {
            "version": "13.2.1",
            "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz",
@@ -2428,6 +2473,12 @@
                "url": "https://opencollective.com/unified"
            }
        },
+        "node_modules/mdurl": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+            "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+            "license": "MIT"
+        },
        "node_modules/merge2": {
            "version": "1.4.1",
            "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -2876,6 +2927,15 @@
                "url": "https://github.com/sponsors/wooorm"
            }
        },
+        "node_modules/punycode.js": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+            "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
        "node_modules/queue-microtask": {
            "version": "1.2.3",
            "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -3321,6 +3381,12 @@
            "dev": true,
            "license": "Apache-2.0"
        },
+        "node_modules/uc.micro": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+            "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+            "license": "MIT"
+        },
        "node_modules/unist-util-is": {
            "version": "6.0.1",
            "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
    },
    "dependencies": {
        "flag-icons": "^7.5.0",
-        "lucide-vue-next": "^0.562.0"
+        "lucide-vue-next": "^0.562.0",
+        "markdown-it": "^14.1.0"
    }
-}
+}