feat: better page title for home page

Tim-Saijun · Aug 18, 2023 · 9c09e57 · 9c09e57
1 parent 4b2c25f
commit 9c09e57
Show file tree

Hide file tree

Showing 22 changed files with 99 additions and 61 deletions.
diff --git a/package.json b/package.json
@@ -40,8 +40,7 @@
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.2.2",
     "vue3-click-away": "^1.2.4",
-    "vue3-lazyload": "^0.3.6",
-    "vue3-scroll-spy": "^1.0.8"
+    "vue3-lazyload": "^0.3.6"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.6.6",
@@ -73,6 +72,7 @@
     "vite-plugin-html-transformer": "^4.0.0",
     "vite-plugin-svg-icons": "^2.0.1",
     "vue-easy-lightbox": "^1.16.0",
-    "vue-jest": "^3.0.7"
+    "vue-jest": "^3.0.7",
+    "vue3-scroll-spy": "^1.0.8"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Breadcrumbs.vue b/src/components/Breadcrumbs.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul class="breadcrumbs flex flex-row gap-6 text-white z-50">
+  <ul class="breadcrumbs flex flex-row gap-6 text-white z-50 px-4">
     <li>
       {{ t('menu.home') }}
     </li>

diff --git a/src/components/Footer/Footer.vue b/src/components/Footer/Footer.vue
@@ -58,13 +58,13 @@
               </span>
             </li>
           </ul>
-          <ul class="flex flex-col min-w-[150px]">
+          <ul class="flex flex-col min-w-[150px] gap-1.5">
             <li class="flex" v-if="enabledPlugin === 'waline'">
               <span>
                 <SvgIcon
                   icon-class="hot"
                   class="mr-1 text-lg inline-block"
-                  :svg-type="SvgTypes.fill"
+                  stroke="currentColor"
                 />
                 {{ t('settings.page-views-value') }}
               </span>
@@ -90,7 +90,11 @@
 
             <li v-if="runningDays" class="flex">
               <span class="">
-                <SvgIcon icon-class="date" class="mr-1 text-lg inline-block" />
+                <SvgIcon
+                  icon-class="date"
+                  class="mr-1 text-lg inline-block"
+                  stroke="currentColor"
+                />
                 {{ t('settings.site-running-for') }}
               </span>
               <span class="flex-1 text-right"

diff --git a/src/components/Post/PostStats.vue b/src/components/Post/PostStats.vue
@@ -5,7 +5,8 @@
   >
     <span>
       <SvgIcon
-        icon-class="clock-outline"
+        class="opacity-70"
+        icon-class="clock"
         fill="none"
         stroke="white"
         height="1.25em"
@@ -17,7 +18,8 @@
     </span>
     <span>
       <SvgIcon
-        icon-class="text-outline"
+        class="opacity-70"
+        icon-class="text"
         fill="none"
         stroke="white"
         height="1.25em"
@@ -31,7 +33,7 @@
     <!-- Waline -->
     <span v-if="plugin === 'waline'">
       <SvgIcon
-        class="h-5 w-5"
+        class="opacity-70"
         icon-class="hot"
         fill="none"
         stroke="white"
@@ -46,7 +48,7 @@
     </span>
     <span v-if="comments && plugin === 'waline'">
       <SvgIcon
-        class="h-5 w-5"
+        class="opacity-70"
         icon-class="quote"
         fill="none"
         stroke="white"
@@ -63,7 +65,7 @@
     <!-- Twikoo -->
     <span v-if="plugin === 'twikoo'">
       <SvgIcon
-        class="h-5 w-5"
+        class="opacity-70"
         icon-class="hot"
         fill="none"
         stroke="white"
@@ -76,7 +78,7 @@
     </span>
     <span v-if="comments && plugin === 'twikoo'">
       <SvgIcon
-        class="h-5 w-5"
+        class="opacity-70"
         icon-class="quote"
         fill="none"
         stroke="white"
@@ -97,7 +99,7 @@
     <!-- Valine -->
     <span v-if="plugin === 'valine'">
       <SvgIcon
-        class="h-5 w-5"
+        class="opacity-70"
         icon-class="hot"
         fill="none"
         stroke="white"
@@ -121,7 +123,8 @@
   <div v-else class="post-stats">
     <span>
       <SvgIcon
-        icon-class="clock-outline"
+        class="opacity-70"
+        icon-class="clock"
         fill="none"
         stroke="white"
         height="1.25em"
@@ -133,8 +136,9 @@
     </span>
     <span>
       <SvgIcon
-        icon-class="text-outline"
-        fill="none"
+        class="opacity-70"
+        icon-class="text"
+        fill="white"
         stroke="white"
         height="1.25em"
         width="1.25em"
@@ -147,6 +151,7 @@
       v-if="plugin === 'waline' || plugin === 'twikoo' || plugin === 'valine'"
     >
       <SvgIcon
+        class="opacity-70"
         icon-class="hot"
         fill="none"
         stroke="white"
@@ -159,6 +164,7 @@
     </span>
     <span v-if="comments && (plugin === 'waline' || plugin === 'twikoo')">
       <SvgIcon
+        class="opacity-70"
         icon-class="quote"
         fill="none"
         stroke="white"

diff --git a/src/components/Sidebar/src/Navigator.vue b/src/components/Sidebar/src/Navigator.vue
@@ -7,31 +7,45 @@
       class="border-r-4 border-ob-deep-900 flex justify-center py-3 w-full hover:opacity-50 hover:text-ob transition-all cursor-pointer"
       @click="goBack"
     >
-      <SvgIcon class="inline-block text-3xl" icon-class="go-back" />
+      <SvgIcon
+        class="inline-block text-3xl"
+        icon-class="go-back"
+        fill="none"
+        stroke="currentColor"
+      />
     </li>
     <li
       class="border-r-4 border-ob-deep-900 flex justify-center py-3 w-full hover:opacity-50 hover:text-ob transition-all cursor-pointer"
       @click="backToTop"
     >
-      <SvgIcon class="inline-block text-3xl" icon-class="back-to-top" />
+      <SvgIcon
+        class="inline-block text-3xl"
+        icon-class="back-to-top"
+        fill="none"
+        stroke="currentColor"
+      />
     </li>
     <li
       v-if="comments"
       class="flex justify-center py-3 w-full hover:opacity-50 hover:text-ob transition-all cursor-pointer"
       @click="jumpToComments"
       data-dia="jump-to-comment"
     >
-      <SvgIcon class="inline-block text-3xl" icon-class="quote" />
+      <SvgIcon
+        class="inline-block text-3xl"
+        icon-class="quote"
+        fill="none"
+        stroke="currentColor"
+      />
     </li>
   </ul>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue'
+import { defineComponent } from 'vue'
 import { useRouter } from 'vue-router'
 import SvgIcon from '@/components/SvgIcon/index.vue'
 import useJumpToEle from '@/hooks/useJumpToEle'
-import useCommentPlugin from '@/hooks/useCommentPlugin'
 
 export default defineComponent({
   name: 'Navigator',

diff --git a/src/components/Sidebar/src/Profile.vue b/src/components/Sidebar/src/Profile.vue
@@ -35,7 +35,7 @@
         >
           <p
             v-if="authorData.description"
-            class="flex-1 pt-6 px-8 w-full text-sm leading-6"
+            class="flex-1 pt-6 px-8 w-full text-sm leading-8 text-center"
             v-html="authorData.description"
           />
           <p

diff --git a/src/components/Sidebar/src/TagBox.vue b/src/components/Sidebar/src/TagBox.vue
@@ -1,6 +1,6 @@
 <template>
   <Sticky
-    :stickyTop="32"
+    :stickyTop="32 + 81"
     endingElId="footer-link"
     dynamicElClass="#sticky-tag-box"
   >
@@ -22,8 +22,10 @@
               <SvgIcon
                 class="font-bold"
                 icon-class="more"
-                height="2rem"
-                width="2rem"
+                fill="currentColor"
+                stroke="none"
+                height="1.5rem"
+                width="1.5rem"
               />
               <span>{{ t('settings.more-tags') }}</span>
             </div>
@@ -94,19 +96,19 @@ export default defineComponent({
 }
 
 .more-btn {
-  @apply flex flex-col justify-center items-center h-11 cursor-pointer absolute bg-ob-deep-900 rounded-lg w-full shadow-md overflow-hidden;
+  @apply flex flex-col justify-center items-center h-9 cursor-pointer absolute bg-ob-deep-900 rounded-lg w-full shadow-md overflow-hidden;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   svg {
     transition: 0.2s all ease-in-out;
   }
   span {
-    @apply opacity-0 font-bold -mb-8;
+    @apply opacity-0 font-bold -mb-7;
     transition: 0.2s all ease-in-out;
   }
   &:hover span {
-    @apply scale-110 opacity-100 mb-1.5;
+    @apply scale-110 opacity-100 mb-0.5;
   }
   &:hover svg {
     @apply opacity-0;

diff --git a/src/components/Sidebar/src/Toc.vue b/src/components/Sidebar/src/Toc.vue
@@ -1,6 +1,6 @@
 <template>
   <Sticky
-    :stickyTop="32"
+    :stickyTop="32 + 81"
     endingElId="footer-link"
     dynamicElClass="#sticky-sidebar"
   >

diff --git a/src/components/Title/src/SubTitle.vue b/src/components/Title/src/SubTitle.vue
@@ -1,19 +1,13 @@
 <template>
   <p
-    class="
-      relative
-      flex
-      items-center
-      pb-2
-      mb-4
-      text-xl text-ob-bright
-      uppercase
-    "
+    class="relative flex items-center pb-2 mb-4 text-xl text-ob-bright uppercase"
   >
     <SvgIcon
       v-if="icon && side === 'left'"
       :icon-class="icon"
       class="inline-block mr-2"
+      fill="none"
+      stroke="currentColor"
     />
     <span :class="titleClass">{{ t(titleStr) }}</span>
     <SvgIcon

diff --git a/src/components/Title/src/Title.vue b/src/components/Title/src/Title.vue
@@ -1,6 +1,12 @@
 <template>
   <p :id="id" :class="titleClasses">
-    <SvgIcon v-if="icon" :icon-class="icon" class="inline-block mr-2" />
+    <SvgIcon
+      v-if="icon"
+      :icon-class="icon"
+      class="inline-block mr-2"
+      fill="none"
+      stroke="currentColor"
+    />
     {{ t(titleStr) }} <span class="ml-2" v-if="count">({{ count }})</span>
     <span
       class="absolute bottom-0 h-1 w-24 rounded-full"

diff --git a/src/hooks/usePageTitle.ts b/src/hooks/usePageTitle.ts
@@ -21,6 +21,10 @@ export default function usePageTitle() {
     metaStore.setTitle(pageTitle.value)
   }
 
+  const updateTitleByText = (text: string) => {
+    metaStore.setTitle(text)
+  }
+
   watch(
     () => appStore.locale,
     value => {
@@ -32,6 +36,7 @@ export default function usePageTitle() {
 
   return {
     pageTitle,
-    updateTitle
+    updateTitle,
+    updateTitleByText
   }
 }
diff --git a/src/models/ThemeConfig.class.ts b/src/models/ThemeConfig.class.ts
@@ -373,6 +373,8 @@ export class CustomSocials {
 export class Site {
   /** Website subtitle (used after `-`) */
   subtitle = ''
+  /** Slog use in the title */
+  slogan = ''
   /** Author of the blog website */
   author = ''
   /** Author's nick name */

diff --git a/src/stores/meta.ts b/src/stores/meta.ts
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import i18n from '@/locales/index'
 import { useAppStore } from './app'
+import { useRoute } from 'vue-router'
 
 interface StateData {
   title: string
@@ -33,7 +34,11 @@ export const useMetaStore = defineStore({
      */
     getTitle(): string {
       const appStore = useAppStore()
-      const subtitle = appStore.themeConfig.site.subtitle || 'Blog'
+      const route = useRoute()
+      let subtitle = appStore.themeConfig.site.subtitle || 'Blog'
+      if (route.name && route.name === 'home') {
+        subtitle = appStore.themeConfig.site.slogan
+      }
       if (this.title === '') return subtitle
       return `${this.title} | ${subtitle}`
     }