chore: update example site and docs

README.md

@@ -14,7 +14,7 @@ A `vite (3.x || 4.x)` plugin which can transform `SVG` icon to `vue (2.7.X || 3.
 
 > this plugin dependencies on `vue/compiler-sfc`, so keep your `vue` version to **3.2.13+** or **2.7.14+**.
 
-- [Example and docs](https://hongwenqing.com/vite-plugin-svg4vue/).
+- [Example Here](https://hongwenqing.com/vite-plugin-svg4vue/).
 - [Release Notes](./CHANGELOG.md).
 
 # Features

example/package.json

@@ -13,6 +13,7 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "demoify": "^2.1.0",
     "pinia": "^2.1.6",
     "toolkitcss": "^1.1.1",
     "vite-plugin-svg4vue": "^3.0.0",

example/src/App.vue

@@ -1,9 +1,26 @@
 <template>
   <div>
+    <DemoHeader
+      logo-text="SVG"
+      title="vite-plugin-svg4vue"
+      :title-link="LINKS.repo"
+      :right-links="[
+        {
+          href: LINKS.repo,
+          title: 'Documentation',
+        },
+        {
+          href: LINKS.changelog,
+          title: 'Changelog',
+        },
+        { href: LINKS.repo, title: 'Github' },
+      ]"
+    />
     <RouterView />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { RouterView } from 'vue-router'
+import { LINKS } from '@/settings'
 </script>

example/src/components/RawQueryString/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="">
-    <FeatureSection>
+    <FeatureSection :reverse="false">
       <template #title> <code>with ?raw</code> </template>
 
       <template #sub-title>

example/src/main.ts

@@ -4,12 +4,16 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 
+import DemoifyUI from 'demoify'
+import 'demoify/lib/style.css'
+
 import '@/assets/styles/home.scss'
 import 'prismjs/themes/prism-okaidia.min.css'
 import 'toolkitcss/dist/index.css'
 
 const app = createApp(App)
 
+app.use(DemoifyUI)
 app.use(createPinia())
 app.use(router)
 

example/src/views/Home.vue

@@ -1,24 +1,5 @@
 <template>
   <div class="home">
-    <div class="home-header">
-      <div class="home-header__left">
-        <div class="logo">
-          <span>SVG4</span>
-          <span>Vue</span>
-        </div>
-        <div class="about">
-          <a :href="LINKS.changelog" target="_blank">Changelog</a>
-        </div>
-        <div class="documentation">
-          <a :href="LINKS.repo" target="_blank">Documentation</a>
-        </div>
-      </div>
-
-      <div class="home-header__right">
-        <a :href="LINKS.repo" target="_blank">Github</a>
-      </div>
-    </div>
-
     <div class="home-body">
       <div class="features">
         <ComponentQueryString />
@@ -34,7 +15,6 @@
 </template>
 
 <script lang="ts" setup>
-import { LINKS } from '@/settings'
 import ComponentQueryString from '@/components/ComponentQueryString/index.vue'
 import UrlQueryString from '@/components/UrlQueryString/index.vue'
 import RawQueryString from '@/components/RawQueryString/index.vue'
@@ -52,55 +32,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.home-header {
-  padding: 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 120px;
-
-  .logo {
-    width: 40px;
-    height: 40px;
-    background: linear-gradient(180deg, #f36c45 20%, #e75755);
-    border-radius: 2px;
-    color: #fff;
-    display: flex;
-    flex-direction: column;
-    font-size: 12px;
-    justify-content: center;
-    align-items: center;
-    line-height: 1.2em;
-    font-weight: bold;
-    font-family: fantasy;
-    font-style: italic;
-  }
-
-  a {
-    &:any-link {
-      color: var(--theme-text-color);
-      text-decoration: none;
-      font-family: var(--theme-font-family);
-    }
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  &__left {
-    display: flex;
-    align-items: center;
-
-    .about,
-    .documentation {
-      margin-left: 20px;
-    }
-  }
-}
-
 .home-body {
   margin: 0 auto;
   width: 1200px;
+  padding-top: 60px;
 }
 </style>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-plugin-svg4vue",
   "version": "3.1.0",
-  "description": "A vite plugin which can transform svg icon to vue component.",
+  "description": "A vite plugin which can transform svg icon to vue component, support optimization via SVGO, easy to customize svg color and size.",
   "main": "lib/index.cjs.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",