docs: add addon gallery

docs/components/AddonGallery.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+export interface ValaxyAddon {
+  name: string
+  repo: string
+  desc: string
+  siteImage: string
+  siteExampleURL?: string
+  tags?: string[]
+}
+
+const props = withDefaults(defineProps<{
+  addons: ValaxyAddon[]
+}>(), {})
+
+const { t } = useI18n()
+const keyword = ref('')
+const filteredAddons = computed(() => {
+  return props.addons.filter((item) => {
+    return item.name.includes(keyword.value) || item.tags?.some(t => t.includes(keyword.value))
+  })
+})
+</script>
+
+<template>
+  <div class="relative mx-1 my-4 flex-center border border-slate-300" flex="~" rounded>
+    <div class="i-ri-search-line absolute text-slate-400 left-0 pl-12" />
+    <input
+      v-model="keyword"
+      :placeholder="t('gallery.tip')"
+      class="placeholder:text-slate-400
+      focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1
+      b-2 w-full h-12"
+      rounded
+      pl-10 pr-4
+      type="text" name="search"
+    >
+  </div>
+  <ul class="m-0 p-0 sm:grid-cols-1 lg:grid-cols-2 grid">
+    <li v-for="addon, i in filteredAddons" :key="i" class="w-full lg:p-4 sm:pb-4 list-none">
+      <a mr-2 :href="addon.repo" target="_blank">
+        <h3 flex="~" justify-center items-center>
+          <div text-xl mr-1 i-ri-github-line />
+          <span>{{ addon.name }}</span>
+        </h3>
+      </a>
+      <div text-xl>
+        <a mr-2 class="text-red-600" :href="`https://npmjs.com/package/${addon.name}`" target="_blank" alt="NPM Package">
+          <div i-ri-npmjs-line />
+        </a>
+      </div>
+      <p m-1>
+        {{ addon.desc }}
+      </p>
+      <ul class=" m-0 p-0 flex flex-wrap">
+        <span v-for="tag, j in addon.tags" :key="j" class="break-all text-gray mr-6px">
+          #{{ tag }}
+        </span>
+      </ul>
+    </li>
+  </ul>
+</template>

docs/pages/addons/gallery.md

@@ -0,0 +1,25 @@
+---
+title: Valaxy Addons Gallery
+title_zh-CN: Valaxy 插件橱窗
+categories:
+  - Addon
+end: false
+
+addons:
+  - name: valaxy-addon-algolia
+    repo: https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-addon-algolia
+  - name: valaxy-addon-components
+    repo: https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-addon-components
+    desc: Common Components for Valaxy.
+  - name: valaxy-addon-lightgallery
+    repo: https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-addon-lightgallery
+    desc: LightGallery for Valaxy.
+  - name: valaxy-addon-waline
+    repo: https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-addon-waline
+    desc: Waline comment.
+  - name: valaxy-addon-twikoo
+    repo: https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-addon-twikoo
+    desc: Twikoo comment.
+---
+
+<AddonGallery :addons="$frontmatter.addons" />

docs/pages/addons/write.md

@@ -3,6 +3,9 @@ title: Write a Addon
 title_zh-CN: 编写一个插件
 categories:
   - Addon
+end: false
+
+
 ---
 
 ## 开始编写
@@ -20,4 +23,6 @@ categories:
 
 - `components`: 放置于 `components` 文件夹下的组件将会被自动注册，但不会被挂载。用户可以手动加载使用。
 
-用户如何配置 global
+> 文档正在施工中，您可以参照 [插件橱窗](/addons/gallery) 一些已有的插件。
+
+<!-- 用户如何配置 global -->

uno.config.ts

@@ -0,0 +1,3 @@
+import { defineConfig } from 'unocss'
+
+export default defineConfig({})