298 Replace prismjs with shiki for code highlight

.github/workflows/pr.yml

@@ -48,5 +48,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: ESLint check
+        run: pnpm lint
+
       - name: Build
         run: pnpm build
+

.github/workflows/release.yml

@@ -50,16 +50,20 @@ jobs:
       - name: Build
         run: pnpm build
 
-      # - name: Obtain a GitHub App Installation Access Token
-      #   id: githubAppAuth
-      #   run: |
-      #     echo "GITHUB_APP_TOKEN=$(npx obtain-github-app-installation-access-token ci ${{ secrets.GH_APP_CREDENTIALS_TOKEN }})" >> $GITHUB_OUTPUT
+      - name: Generate a token
+        id: generate_token
+        uses: tibdex/github-app-token@b62528385c34dbc9f38e5f4225ac829252d1ea92
+        with:
+          app_id: ${{ secrets.APP_ID }}
+          private_key: ${{ secrets.APP_PRIVATE_KEY }}
 
       - name: Release
         env:
           # GITHUB_TOKEN: ${{ steps.githubAppAuth.outputs.GITHUB_APP_TOKEN }}
-          GH_TOKEN: ${{ secrets.CI_GITHUB_TOKEN }}
-          GITHUB_TOKEN: ${{ secrets.NPM_TOKEN }}
+#          GH_TOKEN: ${{ secrets.CI_GITHUB_TOKEN }}
+#          GITHUB_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GH_TOKEN: ${{ steps.generate_token.outputs.token }}
+          GITHUB_TOKEN: ${{ steps.generate_token.outputs.token }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           GIT_CREDENTIALS: ${{ secrets.GIT_CREDENTIALS }}
           GIT_AUTHOR_NAME: ${{ secrets. GIT_AUTHOR_NAME }}

_config.yml

@@ -211,3 +211,10 @@ footer_links:
       - title: Friends # link of friends mode / 友链模式
         mode: 'links'
 
+#! ---------------------------------------------------------------
+#! Highlighter Shiki
+#! ---------------------------------------------------------------
+shiki:
+  enable: true
+  backgroundColor: "#1a1a1a"
+

package.json

@@ -68,7 +68,7 @@
     "script-ext-html-webpack-plugin": "^2.1.5",
     "semantic-release": "^21.1.1",
     "tailwindcss": "3.3.3",
-    "typescript": "~5.2.2",
+    "typescript": "^5.1.0",
     "vite": "^4.4.9",
     "vite-plugin-html-transformer": "^4.0.0",
     "vite-plugin-pages": "^0.31.0",

src/App.vue

@@ -182,7 +182,7 @@ export default defineComponent({
     onMounted(() => {
       let wrapperHeight = screen.height
       const footerEl = document.getElementById('footer')
-      const footerHeight = footerEl?.getBoundingClientRect().height
+      const footerHeight = footerEl?.getBoundingClientRect().height ?? 0
       wrapperHeight = wrapperHeight - footerHeight * 2
       wrapperStyle.value = {
         'min-height': wrapperHeight + 'px'

src/components/ArticleCard/index.ts

@@ -1,2 +1,2 @@
 export { default as HorizontalArticle } from './src/HorizontalArticle.vue'
-export { default as Article } from './src/Article.vue'
+export { default as ArticleCard } from './src/ArticleCard.vue'

src/components/ArticleCard/src/Article.vue → src/components/ArticleCard/src/ArticleCard.vue

@@ -128,7 +128,7 @@ import SvgIcon from '@/components/SvgIcon/index.vue'
 import { useRouter } from 'vue-router'
 
 export default defineComponent({
-  name: 'ObFeatureList',
+  name: 'ARArticleCard',
   components: { SvgIcon },
   props: {
     data: {

src/components/ArticleCard/src/HorizontalArticle.vue

@@ -141,7 +141,7 @@ export default defineComponent({
   props: {
     data: {
       type: Object,
-      default: {}
+      default: () => ({})
     }
   },
   setup(props) {

src/components/Breadcrumbs.vue

@@ -12,7 +12,7 @@ import { defineComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 export default defineComponent({
-  name: 'Breadcrumb',
+  name: 'ArBreadcrumbBar',
   props: {
     current: String
   },

src/components/Comment.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="wrapperClasses">
-    <Title
+    <MainTitle
       :title="'titles.comment'"
       icon="quote"
       paddings="pb-2 pt-0"
@@ -16,7 +16,7 @@
 <script lang="ts">
 import { useAppStore } from '@/stores/app'
 import { computed, defineComponent, onMounted, toRefs, watch } from 'vue'
-import { Title } from '@/components/Title'
+import { MainTitle } from '@/components/Title'
 import { usePostStore } from '@/stores/post'
 import { twikooInit } from '@/utils/comments/twikoo-api'
 import { githubInit } from '@/utils/comments/github-api'
@@ -42,7 +42,7 @@ export default defineComponent({
       default: ''
     }
   },
-  components: { Title },
+  components: { MainTitle },
   setup(props) {
     const postTitle = toRefs(props).title
     const postBody = toRefs(props).body

src/components/Dia.vue

@@ -88,23 +88,21 @@ export default defineComponent({
   flex-direction: column;
   width: 100%;
   height: 100%;
-  --auora-dia--width: 65px; /* 110px */
-  --auora-dia--height: 50px; /* 95px */
-  --auora-dia--hover-height: 60px; /* 105px */
-  --auora-dia--jump-1: 55px; /* 95px */
-  --auora-dia--jump-2: 60px; /* 100px */
-  --auora-dia--jump-3: 45px; /* 85px */
-  --auora-dia--eye-top: 10px; /* 25px */
-  --auora-dia--eye-height: 15px; /* 25px */
-  --auora-dia--eye-width: 8px; /* 15px */
-  --auora-dia--eye-top: 10px; /* 20px */
-  --auora-dia--platform-size: var(--auora-dia--jump-2); /* 100px */
-  --auora-dia--platform-size-shake-1: 75px; /* 115px */
-  --auora-dia--platform-size-shake-2: 45px; /* 115px */
-  --auora-dia--platform-top: -15px; /* 0 */
-  --aurora-dia--linear-gradient: var(
-    --main-gradient
-  ); /* linear-gradient(to bottom, #5fc, #1a8) */
+  --auora-dia--width: 65px;
+  --auora-dia--height: 50px;
+  --auora-dia--hover-height: 60px;
+  --auora-dia--jump-1: 55px;
+  --auora-dia--jump-2: 60px;
+  --auora-dia--jump-3: 45px;
+  --auora-dia--eye-top: 10px;
+  --auora-dia--eye-height: 15px;
+  --auora-dia--eye-width: 8px;
+  --auora-dia--eye-top: 10px;
+  --auora-dia--platform-size: var(--auora-dia--jump-2);
+  --auora-dia--platform-size-shake-1: 75px;
+  --auora-dia--platform-size-shake-2: 45px;
+  --auora-dia--platform-top: -15px;
+  --aurora-dia--linear-gradient: var(--main-gradient);
   --aurora-dia--linear-gradient-hover: linear-gradient(
     to bottom,
     #25b0cc,
@@ -139,7 +137,9 @@ export default defineComponent({
   transition: 0.3s linear all;
 }
 .Aurora-Dia.active {
-  animation: deactivate 0.75s linear, bounce-then-breathe 5s linear infinite;
+  animation:
+    deactivate 0.75s linear,
+    bounce-then-breathe 5s linear infinite;
 }
 
 .Aurora-Dia--eyes > .Aurora-Dia--eye {
@@ -168,8 +168,8 @@ export default defineComponent({
   transform: rotateX(70deg);
   width: var(--auora-dia--platform-size);
   height: var(--auora-dia--platform-size);
-  box-shadow: 0 0 var(--auora-dia--platform-size)
-      var(--aurora-dia--platform-light),
+  box-shadow:
+    0 0 var(--auora-dia--platform-size) var(--aurora-dia--platform-light),
     0 0 15px var(--aurora-dia--platform-light) inset;
   animation: jump-pulse 3s linear infinite;
 }
@@ -193,7 +193,8 @@ export default defineComponent({
   box-shadow: 0 0 5px var(--text-accent);
 }
 .Aurora-Dia:hover + .Aurora-Dia--platform {
-  box-shadow: 0 0 var(--auora-dia--platform-size) var(--text-accent),
+  box-shadow:
+    0 0 var(--auora-dia--platform-size) var(--text-accent),
     0 0 15px var(--text-accent) inset;
   animation: shake-pulse 0.5s linear;
 }
@@ -331,18 +332,21 @@ export default defineComponent({
   40%,
   80%,
   100% {
-    box-shadow: 0 0 30px var(--aurora-dia--platform-light),
+    box-shadow:
+      0 0 30px var(--aurora-dia--platform-light),
       0 0 45px var(--aurora-dia--platform-light) inset;
   }
   20%,
   60%,
   70%,
   90% {
-    box-shadow: 0 0 70px var(--aurora-dia--platform-light),
+    box-shadow:
+      0 0 70px var(--aurora-dia--platform-light),
       0 0 25px var(--aurora-dia--platform-light) inset;
   }
   85% {
-    box-shadow: 0 0 100px var(--aurora-dia--platform-light),
+    box-shadow:
+      0 0 100px var(--aurora-dia--platform-light),
       0 0 15px var(--aurora-dia--platform-light) inset;
   }
 }
@@ -379,23 +383,26 @@ export default defineComponent({
   60%,
   80%,
   100% {
-    box-shadow: 0 0 var(--auora-dia--platform-size) #2cdcff,
+    box-shadow:
+      0 0 var(--auora-dia--platform-size) #2cdcff,
       0 0 15px #2cdcff inset;
   }
   10%,
   25%,
   35%,
   50%,
   65% {
-    box-shadow: 0 0 var(--auora-dia--platform-size-shake-1) #2cdcff,
+    box-shadow:
+      0 0 var(--auora-dia--platform-size-shake-1) #2cdcff,
       0 0 15px #2cdcff inset;
   }
   15%,
   30%,
   45%,
   55%,
   70% {
-    box-shadow: 0 0 var(--auora-dia--platform-size-shake-2) #2cdcff,
+    box-shadow:
+      0 0 var(--auora-dia--platform-size-shake-2) #2cdcff,
       0 0 15px #2cdcff inset;
   }
 }

src/components/Dropdown/src/Dropdown.vue

@@ -40,7 +40,7 @@ export default defineComponent({
       }
     )
 
-    let sharedState: { active: boolean } = reactive({
+    const sharedState: { active: boolean } = reactive({
       active: false
     })
 

src/components/Dropdown/src/DropdownItem.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject } from 'vue'
+import { computed, defineComponent } from 'vue'
 import { useDropdownStore } from '@/stores/dropdown'
 
 export default defineComponent({

src/components/Feature/src/Feature.vue

@@ -11,13 +11,13 @@ import { defineComponent, toRefs } from 'vue'
 import HorizontalArticle from '@/components/ArticleCard/src/HorizontalArticle.vue'
 
 export default defineComponent({
-  name: 'Feature',
+  name: 'ArFeature',
   props: {
     data: Object
   },
   components: { HorizontalArticle },
   setup(props) {
-    let featurePost = toRefs(props).data
+    const featurePost = toRefs(props).data
 
     return {
       featurePost

src/components/Feature/src/FeatureList.vue

@@ -23,12 +23,12 @@
     <ul class="grid lg:grid-cols-2 gap-7">
       <template v-if="featurePosts.length > 0">
         <li v-for="post in featurePosts" :key="post.slug">
-          <Article :data="post" />
+          <ArticleCard :data="post" />
         </li>
       </template>
       <template v-else>
         <li v-for="n in 2" :key="n">
-          <Article :data="{}" />
+          <ArticleCard :data="{}" />
         </li>
       </template>
     </ul>
@@ -39,14 +39,14 @@
 import { useAppStore } from '@/stores/app'
 import { useI18n } from 'vue-i18n'
 import { PropType, StyleValue, computed, defineComponent, toRefs } from 'vue'
-import { Article } from '@/components/ArticleCard'
+import { ArticleCard } from '@/components/ArticleCard'
 import SvgIcon from '@/components/SvgIcon/index.vue'
 import { Post } from '@/models/Post.class'
 
 export default defineComponent({
   name: 'ObFeatureList',
   components: {
-    Article,
+    ArticleCard,
     SvgIcon
   },
   props: {

src/components/Footer/FooterLink.vue

@@ -14,8 +14,9 @@
       class="flex flex-row flex-wrap justify-center bg-ob-deep-900 rounded-lg max-w-10/12 lg:max-w-screen-2xl text-normal text-ob-normal w-full py-6 px-6 items-start gap-8 md:gap-10 xl:gap-16"
     >
       <div
-        v-for="link of links"
+        v-for="[i, link] of links.entries()"
         class="flex flex-col items-center md:items-start"
+        :key="i"
       >
         <div class="flex mb-4 items-center">
           <h3 class="text-ob-dim font-bold mr-2">{{ link.title }}</h3>
@@ -30,20 +31,28 @@
           v-if="!link.mode"
           class="flex flex-col gap-1 items-center md:items-start"
         >
-          <li v-for="sub of link.links" class="cursor-pointer">
+          <li
+            v-for="[i, sub] of link.links.entries()"
+            class="cursor-pointer"
+            :key="i"
+          >
             <a :href="sub.url" target="_blank">{{ sub.title }}</a>
           </li>
         </ul>
         <ul v-if="link.mode === 'links' && linksData" class="flex flex-col">
-          <li v-for="avatar of linksData" class="cursor-pointer">
+          <li
+            v-for="[i, avatar] of linksData.entries()"
+            class="cursor-pointer"
+            :key="i"
+          >
             <a :href="avatar.link" target="_blank">{{ avatar.nick }}</a>
           </li>
         </ul>
         <ul
           v-if="link.mode === 'links' && loadingLinks"
           class="flex flex-col items-center md:items-start"
         >
-          <li v-for="i in 5" class="cursor-pointer">
+          <li v-for="i in 5" class="cursor-pointer" :key="i">
             <ob-skeleton :count="1" height="22px" width="7.5rem" />
           </li>
         </ul>

src/components/Header/src/Controls.vue

@@ -105,7 +105,7 @@ import { useNavigatorStore } from '@/stores/navigator'
 import { Locales } from '@/models/ThemeConfig.class'
 
 export default defineComponent({
-  name: 'Controls',
+  name: 'ArControls',
   components: {
     Dropdown,
     DropdownMenu,

src/components/Header/src/Header.vue

@@ -17,20 +17,13 @@
 </template>
 
 <script lang="ts">
-/**
- * Lodash package is imported through CDN.
- *
- * For version 4.17.21
- */
-declare const _: any
-
 import { computed, defineComponent, ref } from 'vue'
 import { Logo, Navigation, Controls, Notification } from '../index'
 import Sticky from '@/components/Sticky.vue'
 import { useNavigatorStore } from '@/stores/navigator'
 
 export default defineComponent({
-  name: 'Header',
+  name: 'ArHeader',
   components: {
     Logo,
     Navigation,