chore: update dependencies version

.vitepress/config.mts → .vitepress/config.mjs

@@ -1,10 +1,6 @@
-/// <reference types="vite-svg-loader" />
-import { defineConfig, type HeadConfig } from "vitepress"
-import svgLoader from 'vite-svg-loader'
+import { defineConfig } from 'vitepress'
 
-// https://vitepress.dev/reference/site-config
-
-const head:HeadConfig[] = [
+const head = [
   ["link", { rel: "icon", href: "/favicon.ico" }],
   ["link", { rel: "manifest", href: "/site.webmanifest" }],
 ]
@@ -45,11 +41,11 @@ if (process.env.NODE_ENV === 'production') {
   )
 }
 
+// https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: "Maicss",
   description: "Miacss' website pyqt 中文 教程 pyqt5 pyqt6",
   head,
-  srcDir: "./pages",
   lang: "zh-CN",
   cleanUrls: true,
   themeConfig: {
@@ -123,9 +119,9 @@ export default defineConfig({
       // message: 'Released under the MIT License.',
       copyright: "Copyright © 2019-present Maicss",
     },
-    // search: {
-    //   provider: 'local'
-    // },
+    search: {
+      provider: 'local'
+    },
 
     // carbonAds: {
     //   code: 'your-carbon-code',
@@ -144,9 +140,6 @@ export default defineConfig({
     }
   },
   vite: {
-    plugins: [svgLoader({
-      defaultImport: 'component'
-    })],
     build: {
       rollupOptions: {
         output: {
@@ -156,4 +149,4 @@ export default defineConfig({
     }
   },
   // buildEnd: genFeed
-});
+})

.vitepress/theme/BlogIndex.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { useData } from 'vitepress'
-import { data } from './blog.data'
+import { data } from './blog.data.js'
 import {ref, computed} from 'vue'
-import ArrowLeft from './assets/arrow-left.svg'
-import ArrowRight from './assets/arrow-right.svg'
 const { frontmatter } = useData()
 
-const PRE_PAGE = 15
+const PRE_PAGE = 10
 
 const pageTotal = Math.ceil(data.length/PRE_PAGE)
 
@@ -29,24 +27,27 @@ const changePage = (page:number|'prev'|'next') => {
 </script>
 
 <template>
-  <div class="antialiased dark:bg-slate-900">
+  <div class="antialiased dark:bg-slate-900 blog-index">
     <main class="max-w-3xl mx-auto px-4 sm:px-6 xl:max-w-5xl xl:px-0 pt-10">
       <ul>
-        <li v-for="item in currentPagePosts" :key="item.url" class="mb-4 hover:scale-105 cursor-pointer overflow-hidden duration-150">
-          <a :href="item.url" class="flex gap-x-4 h-44 rounded-lg border overflow-hidden blog-index-list-item line-clamp-6 no-underline">
-            <img :src="item.image.startsWith('http') ? item.image : ('/assets/' + item.image)" alt="" class="flex-[1_4] object-center object-cover">
-            <div v-html="item.excerpt" class="prose dark:prose-invert flex-[3_4] py-2 pr-2 h-full overflow-hidden"></div>
+        <li v-for="item in currentPagePosts" :key="item.url" class="mb-4 cursor-pointer border-b last-of-type:border-b-0 py-10">
+          <a :href="item.url" class="flex gap-y-4 flex-col no-underline">
+            <p>{{ item.date }}</p>
+            <div v-html="item.excerpt" class="line-clamp-5 prose dark:prose-invert lg:prose-xl flex-[3_4]"></div>
+            <div class="text-base leading-6 font-medium text-right">
+              <a class="text-sky-500" aria-label="read more" :href="url">Read more →</a>
+            </div>
           </a>
         </li>
     </ul>
     <div class="pagination my-8 select-none" v-if="pageTotal > 1">
       <ul class="flex gap-x-4 justify-center items-center">
         <li class="bordered rounded w-8 h-8 bg-slate-100 flex justify-center items-center cursor-pointer hover:text-sky-400" @click="changePage('prev')">
-          <ArrowLeft width="20px"/>
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M685.248 104.704a64 64 0 0 1 0 90.496L368.448 512l316.8 316.8a64 64 0 0 1-90.496 90.496L232.704 557.248a64 64 0 0 1 0-90.496l362.048-362.048a64 64 0 0 1 90.496 0z"></path></svg>
         </li>
         <li v-for="index in pageTotal" class="bordered rounded w-8 h-8 flex justify-center items-center cursor-pointer" :class="[pageCurrent === index ? ' bg-sky-300 text-white' : 'text-black hover:text-sky-300 bg-slate-100']" @click="changePage(index)">{{ index }}</li>
         <li class="bordered rounded w-8 h-8 bg-slate-100 flex justify-center items-center cursor-pointer hover:text-sky-400" @click="changePage('next')">
-          <ArrowRight width="20px"/>
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M338.752 104.704a64 64 0 0 0 0 90.496l316.8 316.8-316.8 316.8a64 64 0 0 0 90.496 90.496l362.048-362.048a64 64 0 0 0 0-90.496L429.248 104.704a64 64 0 0 0-90.496 0z"></path></svg>
         </li>
       </ul>
     </div>