Skip to content

Commit 95c971e

Browse files
dyzulkdyzulk
committed
feat: plugin docs modal with markdown rendering
1 parent 150ec8e commit 95c971e

4 files changed

Lines changed: 217 additions & 4 deletions

File tree

‎.vitepress/theme/components/Modal.vue‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<script setup>
2+
defineProps({
3+
show: Boolean,
4+
title: String
5+
})
6+
7+
defineEmits(['close'])
8+
</script>
9+
10+
<template>
11+
<Transition name="modal">
12+
<div v-if="show" class="modal-mask" @click.self="$emit('close')">
13+
<div class="modal-container glass-panel">
14+
<div class="modal-header">
15+
<h3 class="modal-title">{{ title }}</h3>
16+
<button class="close-btn" @click="$emit('close')">
17+
<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>
18+
</button>
19+
</div>
20+
21+
<div class="modal-body custom-scrollbar">
22+
<slot name="body">Default body</slot>
23+
</div>
24+
</div>
25+
</div>
26+
</Transition>
27+
</template>
28+
29+
<style scoped>
30+
.modal-mask {
31+
position: fixed;
32+
z-index: 9998;
33+
top: 0;
34+
left: 0;
35+
width: 100%;
36+
height: 100%;
37+
background-color: rgba(0, 0, 0, 0.5);
38+
backdrop-filter: blur(4px);
39+
display: flex;
40+
transition: opacity 0.3s ease;
41+
align-items: center;
42+
justify-content: center;
43+
padding: 20px;
44+
}
45+
46+
.modal-container {
47+
width: 100%;
48+
max-width: 800px;
49+
max-height: 85vh;
50+
display: flex;
51+
flex-direction: column;
52+
background: var(--vp-c-bg);
53+
border-radius: 12px;
54+
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
55+
transition: all 0.3s ease;
56+
border: 1px solid var(--vp-c-divider);
57+
}
58+
59+
.modal-header {
60+
padding: 16px 24px;
61+
border-bottom: 1px solid var(--vp-c-divider);
62+
display: flex;
63+
justify-content: space-between;
64+
align-items: center;
65+
}
66+
67+
.modal-title {
68+
margin: 0;
69+
font-size: 1.25rem;
70+
font-weight: 600;
71+
}
72+
73+
.close-btn {
74+
background: transparent;
75+
border: none;
76+
cursor: pointer;
77+
color: var(--vp-c-text-2);
78+
padding: 4px;
79+
border-radius: 4px;
80+
}
81+
82+
.close-btn:hover {
83+
background-color: var(--vp-c-bg-alt);
84+
color: var(--vp-c-text-1);
85+
}
86+
87+
.modal-body {
88+
padding: 24px;
89+
overflow-y: auto;
90+
line-height: 1.6;
91+
}
92+
93+
/* Transitions */
94+
.modal-enter-from {
95+
opacity: 0;
96+
}
97+
98+
.modal-leave-to {
99+
opacity: 0;
100+
}
101+
102+
.modal-enter-from .modal-container,
103+
.modal-leave-to .modal-container {
104+
transform: scale(0.95);
105+
opacity: 0;
106+
}
107+
</style>

‎.vitepress/theme/components/PluginRegistry.vue‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<script setup>
22
import { ref, computed, onMounted } from 'vue'
3+
import MarkdownIt from 'markdown-it'
4+
import Modal from './Modal.vue'
35
46
const props = defineProps({
57
title: { type: String, default: 'Plugin Registry' },
@@ -11,6 +13,33 @@ const loading = ref(true)
1113
const searchQuery = ref('')
1214
const activeCategory = ref('All')
1315
16+
// Docs Modal Logic
17+
const showModal = ref(false)
18+
const modalTitle = ref('')
19+
const modalContent = ref('')
20+
const loadingDocs = ref(false)
21+
const md = new MarkdownIt({ html: true, linkify: true })
22+
23+
const fetchDocs = async (plugin) => {
24+
modalTitle.value = plugin.name
25+
modalContent.value = ''
26+
showModal.value = true
27+
loadingDocs.value = true
28+
29+
try {
30+
const res = await fetch(plugin.readme)
31+
if (!res.ok) throw new Error('Failed to load README')
32+
const text = await res.text()
33+
// Simple sanitization or just render
34+
modalContent.value = md.render(text)
35+
} catch (e) {
36+
modalContent.value = `<p class="text-error">Failed to load documentation: ${e.message}</p>
37+
<p><a href="${plugin.repo}" target="_blank" rel="noopener noreferrer">View on GitHub</a></p>`
38+
} finally {
39+
loadingDocs.value = false
40+
}
41+
}
42+
1443
// Fetch data
1544
const fetchPlugins = async () => {
1645
loading.value = true
@@ -75,6 +104,16 @@ function copyToClipboard(text) {
75104
<p class="page-description">{{ description }}</p>
76105
</div>
77106

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

140179
<div class="card-footer">
141-
<a :href="plugin.readme" target="_blank" class="VPButton alt action-btn">Docs</a>
180+
<button @click="fetchDocs(plugin)" class="VPButton alt action-btn">Docs</button>
142181
<a :href="plugin.download" class="VPButton brand action-btn">Download</a>
143182
</div>
144183
</div>

‎package-lock.json‎

Lines changed: 67 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
},
2626
"dependencies": {
2727
"flag-icons": "^7.5.0",
28-
"lucide-vue-next": "^0.562.0"
28+
"lucide-vue-next": "^0.562.0",
29+
"markdown-it": "^14.1.0"
2930
}
30-
}
31+
}

0 commit comments

Comments
 (0)