feat: plugin docs modal with markdown rendering

.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>

.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>