mirror of
https://github.com/mivodev/mivodev.github.io.git
synced 2026-01-26 05:25:36 +07:00
465 lines
12 KiB
Vue
465 lines
12 KiB
Vue
<script setup>
|
|
import { ref, computed, onMounted } from 'vue'
|
|
|
|
const props = defineProps({
|
|
title: { type: String, default: 'Plugin Registry' },
|
|
description: { type: String, default: 'Explore extensions for Mivo.' }
|
|
})
|
|
|
|
const plugins = ref([])
|
|
const loading = ref(true)
|
|
const searchQuery = ref('')
|
|
const activeCategory = ref('All')
|
|
|
|
// Fetch data
|
|
const fetchPlugins = async () => {
|
|
loading.value = true
|
|
try {
|
|
// Fetch from the external registry repository
|
|
const response = await fetch('https://mivodev.github.io/registry/plugins.json')
|
|
if (!response.ok) throw new Error('Failed to fetch plugins')
|
|
plugins.value = await response.json()
|
|
} catch (e) {
|
|
console.error(e)
|
|
// Fallback for local dev or if registry is down
|
|
try {
|
|
const localRes = await fetch('/plugins.json')
|
|
if (localRes.ok) plugins.value = await localRes.json()
|
|
} catch (err) {
|
|
console.error('Local fallback failed', err)
|
|
}
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
fetchPlugins()
|
|
})
|
|
|
|
// Categories
|
|
const categories = computed(() => {
|
|
if (!plugins.value.length) return ['All']
|
|
const cats = new Set(plugins.value.map(p => p.category).filter(Boolean))
|
|
return ['All', ...Array.from(cats).sort()]
|
|
})
|
|
|
|
// Filter Logic
|
|
const filteredPlugins = computed(() => {
|
|
return plugins.value.filter(p => {
|
|
const name = p.name || ''
|
|
const desc = p.description || ''
|
|
const query = searchQuery.value.toLowerCase()
|
|
|
|
const matchesSearch = name.toLowerCase().includes(query) ||
|
|
desc.toLowerCase().includes(query) ||
|
|
(p.tags && p.tags.some(t => t && t.toLowerCase().includes(query)))
|
|
|
|
const matchesCategory = activeCategory.value === 'All' || p.category === activeCategory.value
|
|
|
|
return matchesSearch && matchesCategory
|
|
})
|
|
})
|
|
|
|
function copyToClipboard(text) {
|
|
navigator.clipboard.writeText(text)
|
|
alert('Clipboard action')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="registry-container">
|
|
<!-- Unified Header -->
|
|
<div class="registry-header">
|
|
<h1 class="page-title">{{ title }}</h1>
|
|
<p class="page-description">{{ description }}</p>
|
|
</div>
|
|
|
|
<div class="plugin-registry space-y-8">
|
|
<!-- Search & Filter Controls -->
|
|
<div class="controls-wrapper glass-panel">
|
|
<div class="search-container">
|
|
<div class="search-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
|
</div>
|
|
<input
|
|
v-model="searchQuery"
|
|
type="text"
|
|
placeholder="Find plugins..."
|
|
class="search-input"
|
|
/>
|
|
</div>
|
|
|
|
<div class="vr hidden sm:block"></div>
|
|
|
|
<div class="categories">
|
|
<button
|
|
v-for="cat in categories"
|
|
:key="cat"
|
|
@click="activeCategory = cat"
|
|
:class="{ active: activeCategory === cat }"
|
|
class="category-pill"
|
|
>
|
|
{{ cat }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="loading" class="loading-state">
|
|
<div class="spinner"></div>
|
|
<span>Loading registry...</span>
|
|
</div>
|
|
|
|
<div v-else class="plugin-grid transition-opacity duration-500" :class="{ 'opacity-0': loading }">
|
|
<div v-for="plugin in filteredPlugins" :key="plugin.id" class="VPFeature plugin-card group">
|
|
<div class="card-body">
|
|
<div class="card-header">
|
|
<div class="plugin-icon-wrapper">
|
|
<span class="plugin-initial">{{ plugin.name ? plugin.name.charAt(0) : '?' }}</span>
|
|
</div>
|
|
<div class="plugin-title-block">
|
|
<h3 class="plugin-title group-hover:text-brand transition-colors">{{ plugin.name }}</h3>
|
|
<div class="plugin-meta-row">
|
|
<a :href="plugin.repo" target="_blank" class="plugin-author" title="View Author">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
|
|
{{ plugin.author }}
|
|
</a>
|
|
<span class="dot">•</span>
|
|
<span class="version">{{ plugin.version }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="plugin-description">{{ plugin.description }}</p>
|
|
|
|
<div class="plugin-tags">
|
|
<span v-for="tag in plugin.tags" :key="tag" class="tag-pill">{{ tag }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<a :href="plugin.readme" target="_blank" class="VPButton alt action-btn">Docs</a>
|
|
<a :href="plugin.download" class="VPButton brand action-btn">Download</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="!loading && filteredPlugins.length === 0" class="empty-state">
|
|
<div class="empty-icon-wrapper">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
|
</div>
|
|
<p class="empty-text">No plugins found matching "{{ searchQuery }}"</p>
|
|
<button @click="searchQuery = ''; activeCategory = 'All'" class="link-btn">Clear filters</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Container & Typography */
|
|
.registry-container {
|
|
max-width: 1280px; /* XL breakpoint */
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
padding: 2rem 0;
|
|
}
|
|
|
|
.registry-header {
|
|
margin-bottom: 3rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 32px;
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.2;
|
|
margin-bottom: 0.75rem;
|
|
background: -webkit-linear-gradient(315deg, var(--vp-c-brand-1) 25%, var(--vp-c-text-1));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.dark .page-title {
|
|
background: -webkit-linear-gradient(315deg, #fff 25%, var(--vp-c-brand-1));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.page-description {
|
|
font-size: 18px;
|
|
color: var(--vp-c-text-2);
|
|
max-width: 600px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.plugin-registry {
|
|
/* No margin top needed as header handles spacing */
|
|
min-height: 50vh;
|
|
}
|
|
|
|
/* Glass Control Panel */
|
|
.glass-panel {
|
|
background: var(--vp-c-bg-alt);
|
|
border: 1px solid var(--vp-c-divider);
|
|
border-radius: 12px; /* rounded-xl */
|
|
padding: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
margin-bottom: 32px; /* Increased separation */
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.glass-panel {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 8px 16px;
|
|
}
|
|
}
|
|
|
|
.search-container {
|
|
position: relative;
|
|
flex: 1;
|
|
}
|
|
|
|
.search-icon {
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--vp-c-text-2);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.search-input {
|
|
width: 100%;
|
|
padding: 8px 12px 8px 36px;
|
|
border-radius: 8px;
|
|
border: 1px solid transparent;
|
|
background: transparent;
|
|
color: var(--vp-c-text-1);
|
|
font-size: 14px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.search-input:focus {
|
|
background: var(--vp-c-bg);
|
|
border-color: var(--vp-c-brand-1);
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px rgba(var(--vp-c-brand-1), 0.1);
|
|
}
|
|
|
|
/* Vertical Separator */
|
|
.vr {
|
|
width: 1px;
|
|
height: 24px;
|
|
background-color: var(--vp-c-divider);
|
|
margin: 0 8px;
|
|
}
|
|
|
|
.categories {
|
|
display: flex;
|
|
gap: 6px;
|
|
overflow-x: auto;
|
|
padding: 4px 0;
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.category-pill {
|
|
padding: 4px 12px;
|
|
border-radius: 6px; /* Slightly softer than pill */
|
|
border: 1px solid transparent;
|
|
background: transparent;
|
|
color: var(--vp-c-text-2);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.category-pill:hover {
|
|
background: var(--vp-c-bg-elv);
|
|
color: var(--vp-c-text-1);
|
|
}
|
|
|
|
.category-pill.active {
|
|
background: var(--vp-c-brand-1);
|
|
color: var(--vp-c-bg);
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
/* Grid & Cards */
|
|
.plugin-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 20px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.plugin-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.plugin-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
.plugin-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
padding: 24px;
|
|
/* .VPFeature provides main styling */
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: flex-start;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.plugin-icon-wrapper {
|
|
width: 44px;
|
|
height: 44px;
|
|
background: linear-gradient(135deg, var(--vp-c-brand-1), var(--vp-c-brand-2));
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.plugin-initial {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.dark .plugin-initial {
|
|
color: #000;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.plugin-title-block {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.plugin-title {
|
|
margin: 0 !important;
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.group-hover\:text-brand:hover {
|
|
color: var(--vp-c-brand-1);
|
|
}
|
|
|
|
.plugin-meta-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-top: 4px;
|
|
font-size: 13px;
|
|
color: var(--vp-c-text-2);
|
|
}
|
|
|
|
.plugin-author {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
color: inherit;
|
|
text-decoration: none !important;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.plugin-author:hover {
|
|
color: var(--vp-c-brand-1);
|
|
}
|
|
|
|
.dot {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.plugin-description {
|
|
font-size: 14px;
|
|
color: var(--vp-c-text-2);
|
|
line-height: 1.6;
|
|
margin: 0 0 20px 0;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
min-height: 44px; /* Maintain height alignment */
|
|
}
|
|
|
|
.plugin-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.tag-pill {
|
|
font-size: 11px;
|
|
padding: 2px 8px;
|
|
border-radius: 6px;
|
|
background: var(--vp-c-bg); /* Contrast against card bg */
|
|
color: var(--vp-c-text-2);
|
|
border: 1px solid var(--vp-c-divider);
|
|
}
|
|
|
|
.card-footer {
|
|
margin-top: auto;
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.action-btn {
|
|
flex: 1;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 8px 16px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
text-decoration: none !important;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 4rem 2rem;
|
|
text-align: center;
|
|
background: var(--vp-c-bg-alt);
|
|
border-radius: 12px;
|
|
border: 1px dashed var(--vp-c-divider);
|
|
}
|
|
|
|
.empty-icon-wrapper {
|
|
color: var(--vp-c-text-3);
|
|
margin-bottom: 1rem;
|
|
display: inline-block;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 16px;
|
|
color: var(--vp-c-text-2);
|
|
margin-bottom: 1rem;
|
|
}
|
|
</style>
|