fix: use client island for aisummary card

src/components/AiSummary.vue

@@ -1,13 +1,24 @@
 <script setup lang="ts">
-defineProps(['content'])
+import { type Ref, onMounted, ref } from 'vue'
+import { type ContextDataType, getBlogContext } from '@/composables/useDynablog'
+
+const props = defineProps({
+  id: Number,
+})
+
+const data: Ref<ContextDataType | null> = ref(null)
+
+onMounted(async () => {
+  if (props.id)
+    data.value = await getBlogContext(props.id)
+})
 </script>
 
 <template>
-  <div class="rounded-lg mx-3 lg:mx-10 mt-6 p-5 w-full border-gray-300 border-2">
+  <div class="rounded-lg mx-auto max-w-[90%] mt-6 p-5 w-full border-gray-300 border-2">
     <HeadTitle class="!text-lg">
       AI 生成的摘要
-    </HeadTitle>
-    <!-- <span class="w-full text-gray-600 dark:text-gray-300" style="font-size: 14.5px;">{{ obj.output }}</span> -->
-    <span class="w-full text-gray-600 dark:text-gray-300" style="font-size: 14.5px;">{{ content }}</span>
+    </HeadTitle><br>
+    <span class="w-full text-gray-600 dark:text-gray-300" style="font-size: 14.5px;">{{ data?.aiSummary }}</span>
   </div>
 </template>

src/composables/useDynablog.ts

@@ -0,0 +1,18 @@
+export interface ContextDataType {
+  title: string
+  id: number
+  postLink: string
+  likes: string
+  aiSummary: string
+  comments: object[]
+}
+
+export async function getBlogContext(id: number): Promise<ContextDataType | null> {
+  const api_base = `https://dynablog.nickchen.top/api/blog/${id}/context`
+  try {
+    return await ((await fetch(api_base)).json())
+  }
+  catch {
+    return null
+  }
+}

src/layouts/post.vue

@@ -1,22 +1,18 @@
-<script client:load lang="ts">
-import { useFetch } from '@vueuse/core'
+<!-- eslint-disable import/first -->
+<script lang="ts" client:load>
 import Viewer from 'viewerjs'
 
 let mviewer
 const container = document.getElementById('articleBody')
 if (container !== null)
-  // eslint-disable-next-line unused-imports/no-unused-vars
+// eslint-disable-next-line unused-imports/no-unused-vars
   mviewer = new Viewer(container)
 </script>
 
 <script setup lang="ts">
-// eslint-disable-next-line import/first
-import { type Ref, onMounted } from 'vue'
-
 const page = usePage()
 const { frontmatter, meta } = page
 frontmatter.description ||= meta.excerpt
-// -----------------------------------------------//
 function formatDate(date: string) {
   return new Date(date).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })
 }
@@ -38,28 +34,6 @@ useHead({
     content: '800',
   }],
 })
-
-const id = frontmatter.id
-const api_base = `https://dynablog.nickchen.top/api/blog/${id}/`
-
-interface DataType {
-  title: string
-  id: number
-  postLink: string
-  likes: string
-  aiSummary: string
-  comments: object[]
-}
-let isFetching: Ref<boolean>
-let data: Ref<DataType>
-
-onMounted(() => {
-  // 😅😅😅😅😅😅😅
-  // eslint-disable-next-line ts/ban-ts-comment
-  // @ts-ignore
-  data = useFetch<DataType>(api_base).data
-  isFetching = useFetch<DataType>(api_base).isFetching
-})
 </script>
 
 <template layout="base">
@@ -87,7 +61,8 @@ onMounted(() => {
               <span
                 class="ml-1
               border-gray-600 after:border-b-2"
-              ><PostVisitorCounter :link="meta.href" client:idle /></span>
+              >
+                <PostVisitorCounter :link="meta.href" client:idle /></span>
             </a>
           </li>
           <li v-for="tag in frontmatter.tags" :key="tag">
@@ -99,7 +74,7 @@ onMounted(() => {
           </li>
         </ul>
       </div>
-      <AiSummary v-if="!isFetching && data" :content="data!.aiSummary" />
+      <AiSummary :content="frontmatter.id" client:idle />
       <div id="articleBody" class="md:px-10 markdown-body h-fit">
         <slot />
         <hr>

vite.config.cjs

@@ -2,6 +2,10 @@ import viteCompression from 'vite-plugin-compression'
 
 export default () => {
   return {
-    plugins: [viteCompression()],
+    plugins: [viteCompression({
+      algorithm: 'brotliCompress',
+      filter: /\.(fontello|js|map|json|css|html|wasm|txt|xml)$/i,
+      // deleteOriginFile: true,
+    })],
   }
 }