From 8f7f4cab42d5ba077db403aeb960713cf97ff151 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Mon, 8 Jan 2024 00:41:11 +0800
Subject: [PATCH] style: lint fix

---
 docs/.vuepress/theme.ts                       |  12 +-
 eslint.config.js                              |   3 +
 .../src/client/clientConfig.ts                |   2 +-
 .../client/styles/{button.scss => button.css} |   0
 stylelint.config.js                           |   2 +-
 theme/src/client/components/Archives.vue      |   2 +
 theme/src/client/components/BlogExtract.vue   |   8 +-
 theme/src/client/components/Flyout/index.vue  |  60 +++--
 theme/src/client/components/Friends.vue       |  12 +-
 theme/src/client/components/FriendsItem.vue   |  18 +-
 theme/src/client/components/Home.vue          |   2 -
 .../client/components/Nav/NavBarHamburger.vue |  62 ++---
 .../client/components/Nav/NavBarSearch.vue    | 233 ------------------
 theme/src/client/components/Nav/NavScreen.vue |  12 +-
 .../components/Nav/NavScreenMenuGroup.vue     |  24 +-
 theme/src/client/components/Page.vue          | 120 +++++----
 theme/src/client/components/PageFooter.vue    |  33 ++-
 theme/src/client/components/PostItem.vue      | 130 +++++-----
 theme/src/client/components/PostList.vue      |  27 +-
 theme/src/client/components/SidebarItem.vue   |  30 +--
 theme/src/client/components/Tags.vue          |   6 +-
 theme/src/client/styles/content.scss          |  47 ----
 theme/src/client/styles/md-enhance.scss       |  35 ++-
 theme/src/client/styles/normalize.scss        |  26 +-
 theme/src/client/styles/search.scss           | 231 +++++++++++++++++
 25 files changed, 583 insertions(+), 554 deletions(-)
 rename plugins/plugin-copy-code/src/client/styles/{button.scss => button.css} (100%)

diff --git a/docs/.vuepress/theme.ts b/docs/.vuepress/theme.ts
index 625a7243..4297e650 100644
--- a/docs/.vuepress/theme.ts
+++ b/docs/.vuepress/theme.ts
@@ -7,11 +7,13 @@ export const theme = themePlume({
   hostname: 'https://pengzhanbo.cn',
   repo: 'https://github.com/pengzhanbo/vuepress-theme-plume',
   docsDir: 'docs',
+
   avatar: {
     url: '/images/blogger.jpg',
     name: 'Plume Theme',
     description: 'The Theme for Vuepress 2.0',
   },
+
   social: [{ icon: 'github', link: 'https://github.com/pengzhanbo' }],
   footer: { copyright: 'Copyright © 2022-present pengzhanbo' },
 
@@ -26,10 +28,10 @@ export const theme = themePlume({
     },
   },
   plugins: {
-    // docsearch: {
-    //   apiKey: '111',
-    //   appId: '111',
-    //   indexName: '1234',
-    // }
+    docsearch: {
+      apiKey: '111',
+      appId: '111',
+      indexName: '1234',
+    },
   },
 })
diff --git a/eslint.config.js b/eslint.config.js
index 29c01be0..f3e6261e 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -11,4 +11,7 @@ export default config({
     __VUE_OPTIONS_API__: 'readonly',
     __VUE_PROD_DEVTOOLS__: 'readonly',
   },
+  rules: {
+    'vue/no-v-text-v-html-on-component': 'off',
+  },
 })
diff --git a/plugins/plugin-copy-code/src/client/clientConfig.ts b/plugins/plugin-copy-code/src/client/clientConfig.ts
index 06ba938d..b0e3727a 100644
--- a/plugins/plugin-copy-code/src/client/clientConfig.ts
+++ b/plugins/plugin-copy-code/src/client/clientConfig.ts
@@ -1,7 +1,7 @@
 import { defineClientConfig } from '@vuepress/client'
 import { setupCopyCode } from './setupCopyCode.js'
 
-import './styles/button.scss'
+import './styles/button.css'
 
 export default defineClientConfig({
   setup() {
diff --git a/plugins/plugin-copy-code/src/client/styles/button.scss b/plugins/plugin-copy-code/src/client/styles/button.css
similarity index 100%
rename from plugins/plugin-copy-code/src/client/styles/button.scss
rename to plugins/plugin-copy-code/src/client/styles/button.css
diff --git a/stylelint.config.js b/stylelint.config.js
index ce1a5d7e..7f6cb898 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -5,7 +5,7 @@ export default stylelintConfig({
     'selector-pseudo-element-no-unknown': [true, {
       ignorePseudoElements: ['input-placeholder'],
     }],
-    'no-descending-specificity': null,
+    // 'no-descending-specificity': null,
     'custom-property-empty-line-before': null,
     'property-no-vendor-prefix': null,
     'selector-no-vendor-prefix': null,
diff --git a/theme/src/client/components/Archives.vue b/theme/src/client/components/Archives.vue
index 31bd7311..c9ad6caf 100644
--- a/theme/src/client/components/Archives.vue
+++ b/theme/src/client/components/Archives.vue
@@ -29,7 +29,9 @@ const { archives } = useArchives()
 <style scoped>
 .archives-wrapper {
   flex: 1;
+  max-width: 768px;
   padding: 32px 24px;
+  margin: 0 auto;
 }
 
 .archives-title {
diff --git a/theme/src/client/components/BlogExtract.vue b/theme/src/client/components/BlogExtract.vue
index f049afed..e195b4cb 100644
--- a/theme/src/client/components/BlogExtract.vue
+++ b/theme/src/client/components/BlogExtract.vue
@@ -67,7 +67,7 @@ const showBlogExtract = computed(() => {
               </p>
             </div>
           </div>
-          <div v-if="hasBlogExtract" class="blog-nav">
+          <div v-if="hasBlogExtract" class="blog-nav" :class="{ 'no-avatar': !avatar }">
             <AutoLink class="nav-link" :href="tags.link">
               <IconTag class="icon" />
               <span>{{ tags.text }}</span>
@@ -190,6 +190,12 @@ const showBlogExtract = computed(() => {
   border-top: solid 1px var(--vp-c-divider);
 }
 
+.blog-nav.no-avatar {
+  padding-top: 0;
+  margin: 0;
+  border-top: none;
+}
+
 .nav-link {
   display: flex;
   align-items: center;
diff --git a/theme/src/client/components/Flyout/index.vue b/theme/src/client/components/Flyout/index.vue
index 100bd434..b2f7bbc0 100644
--- a/theme/src/client/components/Flyout/index.vue
+++ b/theme/src/client/components/Flyout/index.vue
@@ -69,6 +69,35 @@ export default {
   transition: color 0.25s;
 }
 
+.text {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: normal;
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+  fill: currentcolor;
+  transition: fill 0.25s;
+}
+
+.menu {
+  position: absolute;
+  top: calc(var(--vp-nav-height) / 2 + 20px);
+  right: 0;
+  visibility: hidden;
+  opacity: 0;
+  transition:
+    opacity 0.25s,
+    visibility 0.25s,
+    transform 0.25s;
+}
+
 .flyout-wrapper:hover {
   color: var(--vp-c-brand-1);
 }
@@ -105,18 +134,6 @@ export default {
   transition: color 0.5s;
 }
 
-.text {
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  font-weight: 500;
-
-  /* line-height: var(--vp-nav-height); */
-  line-height: normal;
-  color: var(--vp-c-text-1);
-  transition: color 0.25s;
-}
-
 .option-icon {
   width: 16px;
   height: 16px;
@@ -130,23 +147,4 @@ export default {
   margin-left: 4px;
   fill: currentcolor;
 }
-
-.icon {
-  width: 20px;
-  height: 20px;
-  fill: currentcolor;
-  transition: fill 0.25s;
-}
-
-.menu {
-  position: absolute;
-  top: calc(var(--vp-nav-height) / 2 + 20px);
-  right: 0;
-  visibility: hidden;
-  opacity: 0;
-  transition:
-    opacity 0.25s,
-    visibility 0.25s,
-    transform 0.25s;
-}
 </style>
diff --git a/theme/src/client/components/Friends.vue b/theme/src/client/components/Friends.vue
index f3a25bb0..c607228f 100644
--- a/theme/src/client/components/Friends.vue
+++ b/theme/src/client/components/Friends.vue
@@ -22,11 +22,19 @@ const list = computed(() => matter.value.list || [])
       {{ matter.description }}
     </p>
     <section v-if="list.length" class="friends-list">
-      <FriendsItem v-for="(friend, index) in list" :key="friend.name + index" :friend="friend" />
+      <FriendsItem
+        v-for="(friend, index) in list"
+        :key="friend.name + index"
+        :friend="friend"
+      />
     </section>
 
     <div v-if="editNavLink" class="edit-link">
-      <AutoLink class="edit-link-button" :href="editNavLink.link" :no-icon="true">
+      <AutoLink
+        class="edit-link-button"
+        :href="editNavLink.link"
+        :no-icon="true"
+      >
         <IconEdit class="edit-link-icon" aria-label="edit icon" />
         {{ editNavLink.text }}
       </AutoLink>
diff --git a/theme/src/client/components/FriendsItem.vue b/theme/src/client/components/FriendsItem.vue
index c6fb11de..6ff8411a 100644
--- a/theme/src/client/components/FriendsItem.vue
+++ b/theme/src/client/components/FriendsItem.vue
@@ -9,11 +9,23 @@ defineProps<{
 
 <template>
   <div class="friend">
-    <AutoLink class="avatar-link" :href="friend.link" no-icon>
-      <div class="avatar" :style="{ backgroundImage: `url(${friend.avatar})` }" />
+    <AutoLink
+      class="avatar-link"
+      :href="friend.link"
+      no-icon
+    >
+      <div
+        class="avatar"
+        :style="{ backgroundImage: `url(${friend.avatar})` }"
+      />
     </AutoLink>
+
     <div class="content">
-      <AutoLink class="title" :href="friend.link" no-icon>
+      <AutoLink
+        class="title"
+        :href="friend.link"
+        no-icon
+      >
         {{ friend.name }}
       </AutoLink>
       <p v-if="friend.desc">
diff --git a/theme/src/client/components/Home.vue b/theme/src/client/components/Home.vue
index 4b2d9a00..be40bfc4 100644
--- a/theme/src/client/components/Home.vue
+++ b/theme/src/client/components/Home.vue
@@ -2,8 +2,6 @@
 import { usePageFrontmatter, withBase } from '@vuepress/client'
 import { computed } from 'vue'
 import type { PlumeThemeHomeFrontmatter } from '../../shared/index.js'
-
-// import { useThemeLocaleData } from '../composables/index.js'
 import { useDarkMode } from '../composables/darkMode.js'
 import VButton from './VButton.vue'
 
diff --git a/theme/src/client/components/Nav/NavBarHamburger.vue b/theme/src/client/components/Nav/NavBarHamburger.vue
index 8e46ef33..1a494e45 100644
--- a/theme/src/client/components/Nav/NavBarHamburger.vue
+++ b/theme/src/client/components/Nav/NavBarHamburger.vue
@@ -46,6 +46,37 @@ defineEmits<(e: 'click') => void>()
   overflow: hidden;
 }
 
+.top,
+.middle,
+.bottom {
+  position: absolute;
+  width: 16px;
+  height: 2px;
+  background-color: var(--vp-c-text-1);
+  transition:
+    top 0.25s,
+    background-color 0.5s,
+    transform 0.25s;
+}
+
+.top {
+  top: 0;
+  left: 0;
+  transform: translateX(0);
+}
+
+.middle {
+  top: 6px;
+  left: 0;
+  transform: translateX(8px);
+}
+
+.bottom {
+  top: 12px;
+  left: 0;
+  transform: translateX(4px);
+}
+
 .navbar-hamburger:hover .top {
   top: 0;
   left: 0;
@@ -88,35 +119,4 @@ defineEmits<(e: 'click') => void>()
     background-color 0.25s,
     transform 0.25s;
 }
-
-.top,
-.middle,
-.bottom {
-  position: absolute;
-  width: 16px;
-  height: 2px;
-  background-color: var(--vp-c-text-1);
-  transition:
-    top 0.25s,
-    background-color 0.5s,
-    transform 0.25s;
-}
-
-.top {
-  top: 0;
-  left: 0;
-  transform: translateX(0);
-}
-
-.middle {
-  top: 6px;
-  left: 0;
-  transform: translateX(8px);
-}
-
-.bottom {
-  top: 12px;
-  left: 0;
-  transform: translateX(4px);
-}
 </style>
diff --git a/theme/src/client/components/Nav/NavBarSearch.vue b/theme/src/client/components/Nav/NavBarSearch.vue
index e236bf8e..09970773 100644
--- a/theme/src/client/components/Nav/NavBarSearch.vue
+++ b/theme/src/client/components/Nav/NavBarSearch.vue
@@ -3,236 +3,3 @@
     <DocSearch />
   </div>
 </template>
-
-<style>
-.navbar-search {
-  display: flex;
-  align-items: center;
-}
-
-/* plugin-docsearch */
-.DocSearch {
-  --docsearch-primary-color: var(--vp-c-brand-1);
-  --docsearch-highlight-color: var(--docsearch-primary-color);
-  --docsearch-text-color: var(--vp-c-text-1);
-  --docsearch-muted-color: var(--vp-c-text-2);
-  --docsearch-searchbox-shadow: none;
-  --docsearch-searchbox-background: var(--vp-c-default-soft);
-  --docsearch-searchbox-focus-background: var(--vp-c-default-3);
-  --docsearch-key-gradient: transparent;
-  --docsearch-key-shadow: none;
-  --docsearch-modal-background: var(--vp-c-bg-soft);
-  --docsearch-footer-background: var(--vp-c-bg);
-}
-
-.dark .DocSearch {
-  --docsearch-modal-shadow: none;
-  --docsearch-footer-shadow: none;
-  --docsearch-logo-color: var(--vp-c-text-2);
-  --docsearch-hit-background: var(--vp-c-default-soft);
-  --docsearch-hit-color: var(--vp-c-text-2);
-  --docsearch-hit-shadow: none;
-}
-
-.navbar-search .DocSearch-Button {
-  display: flex;
-  align-items: center;
-  justify-content: center !important;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  margin: 0;
-  background: var(--docsearch-searchbox-background);
-  transition: border-color 0.25s;
-}
-
-.navbar-search .DocSearch-Button:hover {
-  background: var(--docsearch-searchbox-focus-background);
-}
-
-.navbar-search .DocSearch-Button:focus {
-  outline: 1px dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-}
-
-.navbar-search .DocSearch-Button:focus:not(:focus-visible) {
-  outline: none !important;
-}
-
-.navbar-search #docsearch-container {
-  min-width: 32px;
-}
-
-.DocSearch-Button .DocSearch-Button-Container {
-  display: flex;
-  align-items: center;
-}
-
-.DocSearch-Button .DocSearch-Search-Icon {
-  position: relative;
-  width: 16px;
-  height: 16px;
-  color: var(--vp-c-text-1);
-  fill: currentcolor;
-  transition: color 0.5s;
-}
-
-.DocSearch-Button:hover .DocSearch-Search-Icon {
-  color: var(--vp-c-text-1);
-}
-
-.DocSearch-Button .DocSearch-Button-Placeholder {
-  display: none;
-  padding: 0 16px 0 0;
-  margin-top: 2px;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--vp-c-text-2);
-  transition: color 0.5s;
-}
-
-.DocSearch-Button:hover .DocSearch-Button-Placeholder {
-  color: var(--vp-c-text-1);
-}
-
-.DocSearch-Button .DocSearch-Button-Keys {
-  /* rtl:ignore */
-  direction: ltr;
-  display: none;
-  min-width: auto;
-}
-
-.DocSearch-Button .DocSearch-Button-Key {
-  display: block;
-  width: auto;
-
-  /* rtl:end:ignore */
-  min-width: 0;
-  height: 22px;
-  padding-left: 6px;
-  margin: 2px 0 0;
-  font-family: var(--vp-font-family-base);
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 22px;
-  border: 1px solid var(--vp-c-divider);
-
-  /* rtl:begin:ignore */
-  border-right: none;
-  border-radius: 4px 0 0 4px;
-  transition:
-    color 0.5s,
-    border-color 0.5s;
-}
-
-.DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
-  padding-right: 6px;
-  padding-left: 2px;
-
-  /* rtl:begin:ignore */
-  border-right: 1px solid var(--vp-c-divider);
-  border-left: none;
-  border-radius: 0 4px 4px 0;
-
-  /* rtl:end:ignore */
-}
-
-.DocSearch-Button .DocSearch-Button-Key:first-child {
-  font-size: 1px;
-  color: transparent;
-  letter-spacing: -12px;
-}
-
-.DocSearch-Button .DocSearch-Button-Key:first-child::after {
-  font-size: 12px;
-  color: var(--docsearch-muted-color);
-  letter-spacing: normal;
-}
-
-.DocSearch-Button .DocSearch-Button-Key:first-child > * {
-  display: none;
-}
-
-.dark .DocSearch-Footer {
-  border-top: 1px solid var(--vp-c-divider);
-}
-
-.DocSearch-Form {
-  background-color: var(--vp-c-white);
-  border: 1px solid var(--vp-c-brand-1);
-}
-
-.dark .DocSearch-Form {
-  background-color: var(--vp-c-bg-soft);
-}
-
-/* plugin-docsearch */
-
-/* plugin-search */
-.navbar-search .search-box input {
-  padding: 0 0.4rem 0 1.555rem;
-  background-position: 0.5rem 0.4rem;
-}
-
-/* plugin-search */
-
-/* stylelint-disable-next-line order/order */
-@media (min-width: 768px) {
-  .navbar-search {
-    flex-grow: 1;
-    padding-left: 24px;
-  }
-}
-
-@media (min-width: 960px) {
-  .navbar-search {
-    padding-left: 32px;
-  }
-}
-
-@media print {
-  .navbar-search {
-    display: none;
-  }
-}
-
-@media (min-width: 768px) {
-  .navbar-search .DocSearch-Button {
-    justify-content: flex-start;
-    width: 100%;
-    height: 40px;
-    padding: 0 10px 0 12px;
-    background-color: var(--vp-c-bg-alt);
-    border: 1px solid transparent;
-    border-radius: 8px;
-  }
-
-  .navbar-search .DocSearch-Button:hover {
-    background: var(--docsearch-searchbox-focus-background);
-    border-color: var(--vp-c-brand-1);
-  }
-}
-
-@media (min-width: 768px) {
-  .DocSearch-Button .DocSearch-Search-Icon {
-    top: 1px;
-    width: 14px;
-    height: 14px;
-    margin-right: 8px;
-    color: var(--vp-c-text-2);
-  }
-}
-
-@media (min-width: 768px) {
-  .DocSearch-Button .DocSearch-Button-Placeholder {
-    display: inline-block;
-  }
-}
-
-@media (min-width: 768px) {
-  .DocSearch-Button .DocSearch-Button-Keys {
-    display: flex;
-    align-items: center;
-  }
-}
-</style>
diff --git a/theme/src/client/components/Nav/NavScreen.vue b/theme/src/client/components/Nav/NavScreen.vue
index 7a940f8a..facb9f42 100644
--- a/theme/src/client/components/Nav/NavScreen.vue
+++ b/theme/src/client/components/Nav/NavScreen.vue
@@ -47,6 +47,12 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
   transition: background-color 0.5s;
 }
 
+.container {
+  max-width: 288px;
+  padding: 24px 0 96px;
+  margin: 0 auto;
+}
+
 .nav-screen.fade-enter-active,
 .nav-screen.fade-leave-active {
   transition: opacity 0.25s;
@@ -73,12 +79,6 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
   }
 }
 
-.container {
-  max-width: 288px;
-  padding: 24px 0 96px;
-  margin: 0 auto;
-}
-
 .menu + .translations,
 .menu + .appearance,
 .translations + .appearance {
diff --git a/theme/src/client/components/Nav/NavScreenMenuGroup.vue b/theme/src/client/components/Nav/NavScreenMenuGroup.vue
index b6f8803f..2392319b 100644
--- a/theme/src/client/components/Nav/NavScreenMenuGroup.vue
+++ b/theme/src/client/components/Nav/NavScreenMenuGroup.vue
@@ -79,16 +79,6 @@ function toggle() {
   padding-bottom: 10px;
 }
 
-.nav-screen-menu-group.open .button {
-  padding-bottom: 6px;
-  color: var(--vp-c-brand-1);
-}
-
-.nav-screen-menu-group.open .button-icon {
-  /* rtl:ignore */
-  transform: rotate(45deg);
-}
-
 .button {
   display: flex;
   align-items: center;
@@ -106,8 +96,9 @@ function toggle() {
   color: var(--vp-c-brand-1);
 }
 
-.button-text i {
-  font-style: normal;
+.nav-screen-menu-group.open .button {
+  padding-bottom: 6px;
+  color: var(--vp-c-brand-1);
 }
 
 .button-icon {
@@ -119,6 +110,15 @@ function toggle() {
     transform 0.25s;
 }
 
+.nav-screen-menu-group.open .button-icon {
+  /* rtl:ignore */
+  transform: rotate(45deg);
+}
+
+.button-text i {
+  font-style: normal;
+}
+
 .group:first-child {
   padding-top: 0;
 }
diff --git a/theme/src/client/components/Page.vue b/theme/src/client/components/Page.vue
index a1035cc7..8a3c06db 100644
--- a/theme/src/client/components/Page.vue
+++ b/theme/src/client/components/Page.vue
@@ -55,68 +55,6 @@ onContentUpdated(() => zoom?.refresh())
 </template>
 
 <style scoped>
-/* .plume-page.is-blog {
-  padding-top: calc(var(--vp-nav-height) + 32px);
-} */
-
-@media (min-width: 768px) {
-  .plume-page {
-    padding: 48px 32px 128px;
-  }
-}
-
-@media (min-width: 960px) {
-  .plume-page,
-  .plume-page.is-blog {
-    padding: 32px 32px 0;
-  }
-
-  .plume-page:not(.has-sidebar) .container {
-    display: flex;
-    justify-content: center;
-    max-width: 992px;
-  }
-
-  .plume-page:not(.has-sidebar) .content {
-    max-width: 752px;
-  }
-}
-
-@media (min-width: 1280px) {
-  .plume-page .container {
-    display: flex;
-    justify-content: center;
-  }
-
-  .plume-page .aside {
-    display: block;
-  }
-}
-
-@media (min-width: 1440px) {
-  .plume-page:not(.has-sidebar) .content {
-    max-width: 784px;
-  }
-
-  .plume-page:not(.has-sidebar) .container {
-    max-width: 1204px;
-  }
-}
-
-@media (min-width: 960px) {
-  .content {
-    padding: 0 32px 128px;
-  }
-}
-
-@media (min-width: 1280px) {
-  .content {
-    order: 1;
-    min-width: 640px;
-    margin: 0;
-  }
-}
-
 .plume-page {
   position: relative;
   display: flex;
@@ -198,4 +136,62 @@ onContentUpdated(() => zoom?.refresh())
 .giscus-wrapper {
   padding: 5rem 0 0;
 }
+
+@media (min-width: 768px) {
+  .plume-page {
+    padding: 48px 32px 128px;
+  }
+}
+
+@media (min-width: 960px) {
+  .plume-page,
+  .plume-page.is-blog {
+    padding: 32px 32px 0;
+  }
+
+  .plume-page:not(.has-sidebar) .container {
+    display: flex;
+    justify-content: center;
+    max-width: 992px;
+  }
+
+  .plume-page:not(.has-sidebar) .content {
+    max-width: 752px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .plume-page .container {
+    display: flex;
+    justify-content: center;
+  }
+
+  .plume-page .aside {
+    display: block;
+  }
+}
+
+@media (min-width: 1440px) {
+  .plume-page:not(.has-sidebar) .content {
+    max-width: 784px;
+  }
+
+  .plume-page:not(.has-sidebar) .container {
+    max-width: 1204px;
+  }
+}
+
+@media (min-width: 960px) {
+  .content {
+    padding: 0 32px 128px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .content {
+    order: 1;
+    min-width: 640px;
+    margin: 0;
+  }
+}
 </style>
diff --git a/theme/src/client/components/PageFooter.vue b/theme/src/client/components/PageFooter.vue
index af714786..2d7316a2 100644
--- a/theme/src/client/components/PageFooter.vue
+++ b/theme/src/client/components/PageFooter.vue
@@ -25,7 +25,11 @@ const showFooter = computed(() => {
   <footer v-if="showFooter" class="page-footer">
     <div v-if="editNavLink || lastUpdated" class="edit-info">
       <div v-if="editNavLink" class="edit-link">
-        <AutoLink class="edit-link-button" :href="editNavLink.link" :no-icon="true">
+        <AutoLink
+          class="edit-link-button"
+          :href="editNavLink.link"
+          :no-icon="true"
+        >
           <IconEdit class="edit-link-icon" aria-label="edit icon" />
           {{ editNavLink.text }}
         </AutoLink>
@@ -34,12 +38,17 @@ const showFooter = computed(() => {
       <div v-if="lastUpdated" class="last-updated">
         <p class="last-updated-text">
           {{ themeLocale.lastUpdatedText || 'Last updated' }}:
-          <time :datetime="lastUpdated" class="last-updated-time">{{ lastUpdated }}</time>
+          <time :datetime="lastUpdated" class="last-updated-time">
+            {{ lastUpdated }}
+          </time>
         </p>
       </div>
     </div>
+
     <div v-if="contributors && contributors.length" class="contributors">
-      <span class="contributors-label">{{ themeLocale.contributorsText || 'Contributors' }}:</span>
+      <span class="contributors-label">
+        {{ themeLocale.contributorsText || 'Contributors' }}:
+      </span>
       <span class="contributors-info">
         <template v-for="(contributor, index) in contributors" :key="contributor">
           <span class="contributor" :title="`email: ${contributor.email}`">
@@ -52,18 +61,22 @@ const showFooter = computed(() => {
 
     <nav v-if="prev?.link || next?.link" class="prev-next">
       <div class="pager">
-        <AutoLink v-if="prev?.link" class="pager-link prev" :href="prev.link">
-          <!-- eslint-disable-next-line vue/no-v-html -->
+        <AutoLink
+          v-if="prev?.link"
+          class="pager-link prev"
+          :href="prev.link"
+        >
           <span class="desc" v-html="themeLocale.prevPageLabel || 'Previous page'" />
-          <!-- eslint-disable-next-line vue/no-v-html -->
           <span class="title" v-html="prev.text" />
         </AutoLink>
       </div>
       <div class="pager">
-        <AutoLink v-if="next?.link" class="pager-link next" :href="next.link">
-          <!-- eslint-disable-next-line vue/no-v-html -->
+        <AutoLink
+          v-if="next?.link"
+          class="pager-link next"
+          :href="next.link"
+        >
           <span class="desc" v-html="themeLocale.nextPageLabel || 'Next page'" />
-          <!-- eslint-disable-next-line vue/no-v-html -->
           <span class="title" v-html="next.text" />
         </AutoLink>
       </div>
@@ -71,7 +84,7 @@ const showFooter = computed(() => {
   </footer>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .page-footer {
   margin-top: 96px;
 }
diff --git a/theme/src/client/components/PostItem.vue b/theme/src/client/components/PostItem.vue
index 157e5cf9..c7d4a174 100644
--- a/theme/src/client/components/PostItem.vue
+++ b/theme/src/client/components/PostItem.vue
@@ -10,17 +10,17 @@ const props = defineProps<{
   post: PlumeThemeBlogPostItem
 }>()
 
-const categoryList = computed(() => {
-  return props.post.categoryList ?? []
-})
+const categoryList = computed(() =>
+  props.post.categoryList ?? [],
+)
 
-const tags = computed(() => {
-  return (props.post.tags ?? []).slice(0, 4)
-})
+const tags = computed(() =>
+  (props.post.tags ?? []).slice(0, 4),
+)
 
-const createTime = computed(() => {
-  return props.post.createTime?.split(' ')[0].replace(/\//g, '-')
-})
+const createTime = computed(() =>
+  props.post.createTime?.split(' ')[0].replace(/\//g, '-'),
+)
 </script>
 
 <template>
@@ -56,54 +56,52 @@ const createTime = computed(() => {
         <span>{{ createTime }}</span>
       </div>
     </div>
-    <!-- eslint-disable vue/no-v-html -->
     <div v-if="post.excerpt" class="plume-content" v-html="post.excerpt" />
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .post-item {
   padding-top: 1rem;
   margin: 0 1.75rem 2rem;
+}
 
-  @media (min-width: 960px) {
-    h3 {
-      font-size: 20px;
-    }
-  }
-  // border-bottom: solid 1px var(--vp-c-divider);
+.post-item:last-of-type {
+  border-bottom: none;
+}
 
-  &:last-of-type {
-    border-bottom: none;
-  }
+.post-item .sticky {
+  display: inline-block;
+  padding: 3px 6px;
+  margin-left: 0.5rem;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--vp-c-text-2);
+  background-color: var(--vp-c-default-soft);
+  border-radius: 4px;
+}
 
-  h3 {
-    display: flex;
-    align-items: center;
-    margin-bottom: 0.75rem;
-    font-size: 18px;
-    font-weight: 600;
-    transition: color var(--t-color);
-  }
+.post-item h3 {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.75rem;
+  font-size: 18px;
+  font-weight: 600;
+  transition: color var(--t-color);
+}
 
-  h3:hover {
-    color: var(--vp-c-brand-1);
+.post-item h3:hover {
+  color: var(--vp-c-brand-1);
+}
 
-    .sticky {
-      color: var(--vp-c-text-2);
-    }
-  }
+.post-item h3:hover .sticky {
+  color: var(--vp-c-text-2);
+}
 
-  .sticky {
-    display: inline-block;
-    padding: 3px 6px;
-    margin-left: 0.5rem;
-    font-size: 13px;
-    font-weight: 600;
-    line-height: 1;
-    color: var(--vp-c-text-2);
-    background-color: var(--vp-c-default-soft);
-    border-radius: 4px;
+@media (min-width: 960px) {
+  .post-item h3 {
+    font-size: 20px;
   }
 }
 
@@ -116,33 +114,33 @@ const createTime = computed(() => {
   font-size: 14px;
   font-weight: 400;
   color: var(--vp-c-text-2);
+}
 
-  > div {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    margin-right: 1rem;
+.post-meta > div {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-right: 1rem;
+}
 
-    &:last-of-type {
-      margin-right: 0;
-    }
-  }
+.post-meta > div:last-of-type {
+  margin-right: 0;
+}
 
-  .tag-list {
-    display: flex;
-    align-items: center;
+.post-meta .tag-list {
+  display: flex;
+  align-items: center;
+}
 
-    .tag {
-      margin: 0 0.2rem;
-    }
-  }
+.post-meta .tag-list .tag {
+  margin: 0 0.2rem;
+}
 
-  .icon {
-    width: 14px;
-    height: 14px;
-    margin: 0.3rem;
-    color: var(--vp-c-text-3);
-  }
+.post-meta .icon {
+  width: 14px;
+  height: 14px;
+  margin: 0.3rem;
+  color: var(--vp-c-text-3);
 }
 
 .plume-content :deep(p) {
diff --git a/theme/src/client/components/PostList.vue b/theme/src/client/components/PostList.vue
index 968d7304..eb6a9833 100644
--- a/theme/src/client/components/PostList.vue
+++ b/theme/src/client/components/PostList.vue
@@ -16,13 +16,30 @@ const {
 
 <template>
   <div class="post-list">
-    <PostItem v-for="post in postList" :key="post.path" :post="post" />
+    <PostItem
+      v-for="post in postList"
+      :key="post.path"
+      :post="post"
+    />
+
     <div v-if="isPaginationEnabled" class="pagination">
-      <button type="button" class="btn prev" :disabled="isFirstPage" @click="() => changePage(-1)">
+      <button
+        type="button"
+        class="btn prev"
+        :disabled="isFirstPage"
+        @click="() => changePage(-1)"
+      >
         {{ pagination?.prevPageText || 'Prev' }}
       </button>
-      <span class="page-info">{{ page }} / {{ totalPage }}</span>
-      <button type="button" class="btn next" :disabled="isLastPage" @click="() => changePage(1)">
+      <span class="page-info">
+        {{ page }} / {{ totalPage }}
+      </span>
+      <button
+        type="button"
+        class="btn next"
+        :disabled="isLastPage"
+        @click="() => changePage(1)"
+      >
         {{ pagination?.nextPageText || 'Next' }}
       </button>
     </div>
@@ -32,7 +49,9 @@ const {
 <style scoped>
 .post-list {
   flex: 1;
+  max-width: 768px;
   padding-top: 2rem;
+  margin: 0 auto;
 }
 
 .pagination {
diff --git a/theme/src/client/components/SidebarItem.vue b/theme/src/client/components/SidebarItem.vue
index 28d98cdb..7d5ebd90 100644
--- a/theme/src/client/components/SidebarItem.vue
+++ b/theme/src/client/components/SidebarItem.vue
@@ -69,13 +69,15 @@ function onCaretClick() {
     >
       <div class="indicator" />
 
-      <AutoLink v-if="item.link" :tag="linkTag" class="link" :href="item.link">
-        <!-- eslint-disable vue/no-v-text-v-html-on-component -->
-        <!-- eslint-disable-next-line vue/no-v-html -->
+      <AutoLink
+        v-if="item.link"
+        :tag="linkTag"
+        class="link"
+        :href="item.link"
+      >
         <Component :is="textTag" class="text" v-html="item.text" />
       </AutoLink>
-      <!-- eslint-disable vue/no-v-text-v-html-on-component -->
-      <!-- eslint-disable-next-line vue/no-v-html -->
+
       <Component :is="textTag" v-else class="text" v-html="item.text" />
 
       <div
@@ -166,15 +168,6 @@ function onCaretClick() {
   color: var(--vp-c-text-2);
 }
 
-.sidebar-item.level-0.is-link > .item > .link:hover .text,
-.sidebar-item.level-1.is-link > .item > .link:hover .text,
-.sidebar-item.level-2.is-link > .item > .link:hover .text,
-.sidebar-item.level-3.is-link > .item > .link:hover .text,
-.sidebar-item.level-4.is-link > .item > .link:hover .text,
-.sidebar-item.level-5.is-link > .item > .link:hover .text {
-  color: var(--vp-c-brand-1);
-}
-
 .sidebar-item.level-0.has-active > .item > .link > .text,
 .sidebar-item.level-1.has-active > .item > .link > .text,
 .sidebar-item.level-2.has-active > .item > .link > .text,
@@ -193,6 +186,15 @@ function onCaretClick() {
   color: var(--vp-c-brand-1);
 }
 
+.sidebar-item.level-0.is-link > .item > .link:hover .text,
+.sidebar-item.level-1.is-link > .item > .link:hover .text,
+.sidebar-item.level-2.is-link > .item > .link:hover .text,
+.sidebar-item.level-3.is-link > .item > .link:hover .text,
+.sidebar-item.level-4.is-link > .item > .link:hover .text,
+.sidebar-item.level-5.is-link > .item > .link:hover .text {
+  color: var(--vp-c-brand-1);
+}
+
 .caret {
   display: flex;
   align-items: center;
diff --git a/theme/src/client/components/Tags.vue b/theme/src/client/components/Tags.vue
index 1e4a8e8e..963bbca2 100644
--- a/theme/src/client/components/Tags.vue
+++ b/theme/src/client/components/Tags.vue
@@ -38,7 +38,9 @@ const { tags: tagsLink } = useBlogExtract()
 <style scoped>
 .tags-wrapper {
   flex: 1;
+  max-width: 768px;
   padding: 32px 24px 168px;
+  margin: 0 auto;
 }
 
 .tags-wrapper.has-list {
@@ -73,10 +75,6 @@ const { tags: tagsLink } = useBlogExtract()
   padding: 6px 6px 6px 10px;
   margin: 8px;
   line-height: 1;
-
-  /* background-color: var(--vp-c-default-soft); */
-
-  /* color: var(--vp-c-text-2); */
   color: var(--vp-tag-color);
   word-wrap: break-word;
   cursor: pointer;
diff --git a/theme/src/client/styles/content.scss b/theme/src/client/styles/content.scss
index 12a292ba..e9fed56d 100644
--- a/theme/src/client/styles/content.scss
+++ b/theme/src/client/styles/content.scss
@@ -209,49 +209,6 @@
   border-top: 1px solid var(--vp-c-divider);
 }
 
-/**
- * Custom Block
- * -------------------------------------------------------------------------- */
-
-// .plume-content .custom-block {
-//   margin: 16px 0;
-// }
-
-// .plume-content .custom-block p {
-//   margin: 8px 0;
-//   line-height: 24px;
-// }
-
-// .plume-content .custom-block p:first-child {
-//   margin: 0;
-// }
-
-// .plume-content .custom-block a {
-//   color: inherit;
-//   font-weight: 600;
-//   text-decoration: underline;
-//   transition: opacity 0.25s;
-// }
-
-// .plume-content .custom-block a:hover {
-//   opacity: 0.6;
-// }
-
-// .plume-content .custom-block code {
-//   font-size: var(--vp-custom-block-code-font-size);
-//   font-weight: 700;
-//   color: inherit;
-// }
-
-// .plume-content .custom-block div[class*='language-'] {
-//   margin: 8px 0;
-// }
-
-// .plume-content .custom-block div[class*='language-'] code {
-//   font-weight: 400;
-//   background-color: transparent;
-// }
-
 /**
  * Code
  * -------------------------------------------------------------------------- */
@@ -284,7 +241,3 @@
 .plume-content a:hover > code {
   color: var(--vp-code-link-hover-color);
 }
-
-.plume-content .vp-code-tabs-nav {
-  margin: 0.85rem 0 0;
-}
diff --git a/theme/src/client/styles/md-enhance.scss b/theme/src/client/styles/md-enhance.scss
index b3d1fdc3..e02a57c8 100644
--- a/theme/src/client/styles/md-enhance.scss
+++ b/theme/src/client/styles/md-enhance.scss
@@ -1,3 +1,6 @@
+/* stylelint-disable no-descending-specificity */
+
+/* ------------------ Markdown Enhance: Hint Container  ------------------ */
 .plume-content {
   .hint-container {
     padding: 16px 16px 8px;
@@ -20,6 +23,12 @@
       color: inherit;
     }
 
+    th,
+    blockquote > p {
+      font-size: var(--vp-custom-block-font-size);
+      color: inherit;
+    }
+
     div[class*="language-"] {
       margin: 8px 0;
     }
@@ -115,14 +124,18 @@
     [class*="language-"] .line-numbers {
       padding-top: 21px;
     }
-
-    th,
-    blockquote > p {
-      font-size: var(--vp-custom-block-font-size);
-      color: inherit;
-    }
   }
+}
 
+/* ------------------ Markdown Enhance: Code Tabs ----------------------- */
+.plume-content {
+  .vp-code-tabs-nav {
+    margin: 0.85rem 0 0;
+  }
+}
+
+/* --------------------  Markdown Enhance: Code Demo  -------------------- */
+.plume-content {
   .vp-code-demo {
     overflow: hidden;
     border: solid 1px var(--vp-c-divider);
@@ -193,7 +206,10 @@
       margin: 8px -12px;
     }
   }
+}
 
+/* ----------------------  Markdown Enhance: Task List ---------------------- */
+.plume-content {
   .task-list-container {
     padding-left: 0;
 
@@ -232,7 +248,10 @@
       }
     }
   }
+}
 
+/* ----------------------------  Markdown Enhance: Tabs ----------------------------- */
+.plume-content {
   .vp-tabs {
     margin: 1.5rem -0.75rem;
     overflow: hidden;
@@ -258,7 +277,10 @@
       }
     }
   }
+}
 
+/* --------------------- Markdown Enhance: Footnote -------------------------------- */
+.plume-content {
   .footnotes-sep {
     margin-top: 48px;
   }
@@ -341,6 +363,7 @@
   }
 }
 
+/* --------------  Markdown Enhance: Image Figure --------------------- */
 .plume-content {
   figure {
     position: relative;
diff --git a/theme/src/client/styles/normalize.scss b/theme/src/client/styles/normalize.scss
index 0810c23f..9af37b34 100644
--- a/theme/src/client/styles/normalize.scss
+++ b/theme/src/client/styles/normalize.scss
@@ -164,6 +164,19 @@ textarea {
   border: 0;
 }
 
+textarea {
+  resize: vertical;
+}
+
+select {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+input {
+  background-color: transparent;
+}
+
 button {
   padding: 0;
   font-family: inherit;
@@ -196,10 +209,6 @@ table {
   border-collapse: collapse;
 }
 
-input {
-  background-color: transparent;
-}
-
 input:-ms-input-placeholder,
 textarea:-ms-input-placeholder {
   color: var(--vp-c-text-3);
@@ -229,15 +238,6 @@ input[type="number"] {
   appearance: textfield;
 }
 
-textarea {
-  resize: vertical;
-}
-
-select {
-  -webkit-appearance: none;
-  appearance: none;
-}
-
 fieldset {
   padding: 0;
   margin: 0;
diff --git a/theme/src/client/styles/search.scss b/theme/src/client/styles/search.scss
index 529d28e0..8e2e30a6 100644
--- a/theme/src/client/styles/search.scss
+++ b/theme/src/client/styles/search.scss
@@ -1,3 +1,234 @@
+.navbar-search {
+  display: flex;
+  align-items: center;
+}
+
+/* plugin-docsearch */
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1);
+  --docsearch-highlight-color: var(--docsearch-primary-color);
+  --docsearch-text-color: var(--vp-c-text-1);
+  --docsearch-muted-color: var(--vp-c-text-2);
+  --docsearch-searchbox-shadow: none;
+  --docsearch-searchbox-background: var(--vp-c-default-soft);
+  --docsearch-searchbox-focus-background: var(--vp-c-default-3);
+  --docsearch-key-gradient: transparent;
+  --docsearch-key-shadow: none;
+  --docsearch-modal-background: var(--vp-c-bg-soft);
+  --docsearch-footer-background: var(--vp-c-bg);
+}
+
+.dark .DocSearch {
+  --docsearch-modal-shadow: none;
+  --docsearch-footer-shadow: none;
+  --docsearch-logo-color: var(--vp-c-text-2);
+  --docsearch-hit-background: var(--vp-c-default-soft);
+  --docsearch-hit-color: var(--vp-c-text-2);
+  --docsearch-hit-shadow: none;
+}
+
+.navbar-search .DocSearch-Button {
+  display: flex;
+  align-items: center;
+  justify-content: center !important;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  margin: 0;
+  background: var(--docsearch-searchbox-background);
+  transition: border-color 0.25s;
+}
+
+.navbar-search .DocSearch-Button:hover {
+  background: var(--docsearch-searchbox-focus-background);
+}
+
+.navbar-search .DocSearch-Button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.navbar-search .DocSearch-Button:focus:not(:focus-visible) {
+  outline: none !important;
+}
+
+.navbar-search #docsearch-container {
+  min-width: 32px;
+}
+
+.DocSearch-Button .DocSearch-Button-Container {
+  display: flex;
+  align-items: center;
+}
+
+.DocSearch-Button .DocSearch-Search-Icon {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  color: var(--vp-c-text-1);
+  fill: currentcolor;
+  transition: color 0.5s;
+}
+
+.DocSearch-Button:hover .DocSearch-Search-Icon {
+  color: var(--vp-c-text-1);
+}
+
+.DocSearch-Button .DocSearch-Button-Placeholder {
+  display: none;
+  padding: 0 16px 0 0;
+  margin-top: 2px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  transition: color 0.5s;
+}
+
+.DocSearch-Button:hover .DocSearch-Button-Placeholder {
+  color: var(--vp-c-text-1);
+}
+
+.DocSearch-Button .DocSearch-Button-Keys {
+  /* rtl:ignore */
+  direction: ltr;
+  display: none;
+  min-width: auto;
+}
+
+.DocSearch-Button .DocSearch-Button-Key {
+  display: block;
+  width: auto;
+
+  /* rtl:end:ignore */
+  min-width: 0;
+  height: 22px;
+  padding-left: 6px;
+  margin: 2px 0 0;
+  font-family: var(--vp-font-family-base);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 22px;
+  border: 1px solid var(--vp-c-divider);
+
+  /* rtl:begin:ignore */
+  border-right: none;
+  border-radius: 4px 0 0 4px;
+  transition:
+    color 0.5s,
+    border-color 0.5s;
+}
+
+.DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
+  padding-right: 6px;
+  padding-left: 2px;
+
+  /* rtl:begin:ignore */
+  border-right: 1px solid var(--vp-c-divider);
+  border-left: none;
+  border-radius: 0 4px 4px 0;
+
+  /* rtl:end:ignore */
+}
+
+.DocSearch-Button .DocSearch-Button-Key:first-child {
+  font-size: 1px;
+  color: transparent;
+  letter-spacing: -12px;
+}
+
+.DocSearch-Button .DocSearch-Button-Key:first-child::after {
+  font-size: 12px;
+  color: var(--docsearch-muted-color);
+  letter-spacing: normal;
+}
+
+.DocSearch-Button .DocSearch-Button-Key:first-child > * {
+  display: none;
+}
+
+.dark .DocSearch-Footer {
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.DocSearch-Form {
+  background-color: var(--vp-c-white);
+  border: 1px solid var(--vp-c-brand-1);
+}
+
+.dark .DocSearch-Form {
+  background-color: var(--vp-c-bg-soft);
+}
+
+/* plugin-docsearch */
+
+/* plugin-search */
+.navbar-search .search-box input {
+  padding: 0 0.4rem 0 1.555rem;
+  background-position: 0.5rem 0.4rem;
+}
+
+/* plugin-search */
+
+/* stylelint-disable-next-line order/order */
+@media (min-width: 768px) {
+  .navbar-search {
+    flex-grow: 1;
+    padding-left: 24px;
+  }
+}
+
+@media (min-width: 960px) {
+  .navbar-search {
+    padding-left: 32px;
+  }
+}
+
+@media print {
+  .navbar-search {
+    display: none;
+  }
+}
+
+@media (min-width: 768px) {
+  .navbar-search .DocSearch-Button {
+    justify-content: flex-start;
+    width: 100%;
+    height: 40px;
+    padding: 0 10px 0 12px;
+    background-color: var(--vp-c-bg-alt);
+    border: 1px solid transparent;
+    border-radius: 8px;
+  }
+
+  .navbar-search .DocSearch-Button:hover {
+    background: var(--docsearch-searchbox-focus-background);
+    border-color: var(--vp-c-brand-1);
+  }
+}
+
+@media (min-width: 768px) {
+  .DocSearch-Button .DocSearch-Search-Icon {
+    top: 1px;
+    width: 14px;
+    height: 14px;
+    margin-right: 8px;
+    color: var(--vp-c-text-2);
+  }
+}
+
+@media (min-width: 768px) {
+  .DocSearch-Button .DocSearch-Button-Placeholder {
+    display: inline-block;
+  }
+}
+
+@media (min-width: 768px) {
+  .DocSearch-Button .DocSearch-Button-Keys {
+    display: flex;
+    align-items: center;
+  }
+}
+
 .search-box .suggestions {
   top: 2.5rem;
   right: -1rem;