perf: 优化

Author: wsafight

astro.config.mjs

@@ -46,10 +46,25 @@ export default defineConfig({
     }),
     icon({
       include: {
-        "preprocess: vitePreprocess(),": ["*"],
-        "fa6-brands": ["*"],
-        "fa6-regular": ["*"],
-        "fa6-solid": ["*"],
+        "material-symbols": [
+          "calendar-today-outline-rounded",
+          "edit-calendar-outline-rounded",
+          "book-2-outline-rounded",
+          "tag-rounded",
+          "notes-rounded",
+          "schedule-outline-rounded",
+          "chevron-left-rounded",
+          "chevron-right-rounded",
+          "keyboard-arrow-up-rounded",
+          "more-horiz",
+          "home-outline-rounded",
+          "palette-outline",
+          "menu-rounded",
+          "copyright-outline-rounded",
+        ],
+        "fa6-brands": ["creative-commons", "github"],
+        "fa6-regular": ["address-card"],
+        "fa6-solid": ["arrow-up-right-from-square"],
       },
     }),
     svelte(),

src/components/Search.svelte

@@ -2,8 +2,8 @@
 import { onMount } from 'svelte'
 import Icon from '@iconify/svelte'
 
-let keywordDesktop = ''
-let keywordMobile = ''
+let keywordDesktop = $state('')
+let keywordMobile = $state('')
 
 interface PagefindResult {
   url: string
@@ -13,25 +13,7 @@ interface PagefindResult {
   excerpt: string
 }
 
-let result: PagefindResult[] = []
-
-// const fakeResult: PagefindResult[] = [
-// {
-//   url: url('/'),
-//   meta: {
-//     title: 'This Is a Fake Search Result',
-//   },
-//   excerpt:
-//     'Because the search cannot work in the <mark>dev</mark> environment.',
-// },
-// {
-//   url: url('/'),
-//   meta: {
-//     title: 'If You Want to Test the Search',
-//   },
-//   excerpt: 'Try running <mark>npm build && npm preview</mark> instead.',
-// },
-// ]
+let result: PagefindResult[] = $state([])
 
 let search = (keyword: string, isDesktop: boolean) => {}
 
@@ -74,8 +56,8 @@ const togglePanel = () => {
   panel?.classList.toggle('float-panel-closed')
 }
 
-$: search(keywordDesktop, true)
-$: search(keywordMobile, false)
+$effect(() => { search(keywordDesktop, true) })
+$effect(() => { search(keywordMobile, false) })
 </script>
 
 <!-- search bar for desktop view -->
@@ -84,14 +66,14 @@ $: search(keywordMobile, false)
       dark:bg-white/5 dark:hover:bg-white/10 dark:focus-within:bg-white/10
 ">
     <Icon icon="material-symbols:search" class="absolute text-[1.25rem] pointer-events-none ml-3 transition my-auto text-black/30 dark:text-white/30"></Icon>
-    <input placeholder="搜索" bind:value={keywordDesktop} on:focus={() => search(keywordDesktop, true)}
+    <input placeholder="搜索" bind:value={keywordDesktop} onfocus={() => search(keywordDesktop, true)}
            class="transition-all pl-10 text-sm bg-transparent outline-0
          h-full w-40 active:w-60 focus:w-60 text-black/50 dark:text-white/50"
     >
 </div>
 
 <!-- toggle btn for phone/tablet view -->
-<button on:click={togglePanel} aria-label="Search Panel" id="search-switch"
+<button onclick={togglePanel} aria-label="Search Panel" id="search-switch"
         class="btn-plain scale-animation lg:!hidden rounded-lg w-11 h-11 active:scale-90">
     <Icon icon="material-symbols:search" class="text-[1.25rem]"></Icon>
 </button>

src/components/widget/DisplaySettings.svelte

@@ -2,16 +2,18 @@
 import { getDefaultHue, getHue, setHue } from '@utils/setting-utils'
 import Icon from '@iconify/svelte'
 
-let hue = getHue()
+let hue = $state(getHue())
 const defaultHue = getDefaultHue()
 
 function resetHue() {
   hue = getDefaultHue()
 }
 
-$: if (hue || hue === 0) {
-  setHue(hue)
-}
+$effect(() => {
+  if (hue || hue === 0) {
+    setHue(hue)
+  }
+})
 </script>
 
 <div id="display-setting" class="float-panel float-panel-closed absolute transition-all w-80 right-4 px-4 py-4">
@@ -22,7 +24,7 @@ $: if (hue || hue === 0) {
         >
             主题色
             <button aria-label="Reset to Default" class="btn-regular w-7 h-7 rounded-md  active:scale-90"
-                    class:opacity-0={hue === defaultHue} class:pointer-events-none={hue === defaultHue} on:click={resetHue}>
+                    class:opacity-0={hue === defaultHue} class:pointer-events-none={hue === defaultHue} onclick={resetHue}>
                 <div class="text-[var(--btn-content)]">
                     <Icon icon="fa6-solid:arrow-rotate-left" class="text-[0.875rem]"></Icon>
                 </div>

src/pages/posts/[...slug].astro

@@ -24,9 +24,7 @@ export async function getStaticPaths() {
 }
 
 const { entry } = Astro.props
-const { Content, headings } = await entry.render()
-
-const { remarkPluginFrontmatter } = await entry.render()
+const { Content, headings, remarkPluginFrontmatter } = await entry.render()
 
 const jsonLd = {
   '@context': 'https://schema.org',

src/utils/content-utils.ts

@@ -44,8 +44,8 @@ export type Tag = {
 export async function getTagList(): Promise<Tag[]> {
   const allBlogPosts = await getAllBlogPosts()
   const countMap: { [key: string]: number } = {}
-  allBlogPosts.map((post: { data: { tags: string[] } }) => {
-    post.data.tags.map((tag: string) => {
+  allBlogPosts.forEach((post: { data: { tags: string[] } }) => {
+    post.data.tags.forEach((tag: string) => {
       if (!countMap[tag]) countMap[tag] = 0
       countMap[tag]++
     })
@@ -67,7 +67,7 @@ export type Category = {
 export async function getCategoryList(): Promise<Category[]> {
   const allBlogPosts = await getAllBlogPosts()
   const count: { [key: string]: number } = {}
-  allBlogPosts.map((post: { data: { category: string | number } }) => {
+  allBlogPosts.forEach((post: { data: { category: string | number } }) => {
     if (!post.data.category) {
       const ucKey = '未分类'
       count[ucKey] = count[ucKey] ? count[ucKey] + 1 : 1