Fix SSR compatibility and complete Nuxt SSG migration

Agent-Logs-Url: https://github.com/hykilpikonna/corner/sessions/5ad4b623-9a6b-480e-80fa-d83eee774f01

Co-authored-by: hykilpikonna <22280294+hykilpikonna@users.noreply.github.com>

src/app.vue

@@ -28,7 +28,8 @@
 </template>
 
 <script setup lang="ts">
-import {nextTick, onMounted, onUnmounted, ref, ComponentPublicInstance, watch} from 'vue';
+import {nextTick, onMounted, onUnmounted, ref, watch} from 'vue';
+import type {ComponentPublicInstance} from 'vue'
 
 const route = useRoute()
 

src/components/BlogIndex.vue

@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import Tag from "@/components/Tag.vue";
 import {pushQuery} from "@/scripts/router";
-import {BlogMeta} from "@/scripts/models";
+import type {BlogMeta} from "@/scripts/models";
 import {globals} from "@/scripts/global";
 
 withDefaults(defineProps<{ mode?: 'tags' | 'categories' }>(), {

src/components/BlogPost.vue

@@ -28,7 +28,7 @@
 
 <script lang="ts" setup>
 import Tag from "@/components/Tag.vue";
-import {BlogPost} from "@/scripts/models";
+import type {BlogPost} from "@/scripts/models";
 import {pushQuery} from "@/scripts/router";
 import {$, hosts} from "@/scripts/constants";
 import {marked} from "marked";

src/components/Dynamic.vue

@@ -0,0 +1,16 @@
+<script lang="ts">
+import {defineComponent, h} from 'vue'
+
+export default defineComponent({
+  name: 'Dynamic',
+  props: {
+    template: {
+      type: String,
+      required: true
+    }
+  },
+  render() {
+    return h({template: this.template})
+  }
+})
+</script>

src/components/ZoteroPublication.vue

@@ -30,7 +30,7 @@ import MetaTable from "@/components/MetaTable.vue";
 import {capitalize} from "@/scripts/utils";
 import linkifyUrls from "linkify-urls";
 import {$} from '@/scripts/constants';
-import {ZoteroData, ZoteroItem} from "@/scripts/zotero";
+import type {ZoteroData, ZoteroItem} from "@/scripts/zotero";
 
 const props = defineProps<{ item: ZoteroItem }>()
 

src/scripts/global.ts

@@ -1,4 +1,4 @@
-import {BlogMeta} from "@/scripts/models";
+import type {BlogMeta} from "@/scripts/models";
 
 export let globals = {
   staticMeta: {tags: [], categories: [], posts: []} as BlogMeta,

src/scripts/router.ts

@@ -1,4 +1,5 @@
-import {NavigationFailure, useRoute, useRouter} from 'vue-router'
+import {useRoute, useRouter} from 'vue-router'
+import type {NavigationFailure} from 'vue-router'
 
 export function pushQuery(query: {[id: string]: string | null}): Promise<void | NavigationFailure | undefined> {
   const route = useRoute()

src/views/About.vue

@@ -17,7 +17,7 @@ import {parseExtensions} from '@/scripts/extended_markdown'
 import ZoteroPublication from "@/components/ZoteroPublication.vue";
 import {hosts} from "@/scripts/constants";
 import Loading from "@/components/Loading.vue";
-import {ZoteroAttachment, ZoteroItem} from "@/scripts/zotero";
+import type {ZoteroAttachment, ZoteroItem} from "@/scripts/zotero";
 
 const html = ref("")
 const publications = ref<ZoteroItem[]>([])

src/views/Blog.vue

@@ -18,8 +18,9 @@
 <script setup lang="ts">
 import BlogPostPreview from "@/components/BlogPost.vue";
 import Loading from "@/components/Loading.vue";
-import {BlogMeta} from "@/scripts/models";
-import {Ref, ref, computed, onMounted} from "vue";
+import type {BlogMeta} from "@/scripts/models";
+import {ref, computed, onMounted} from "vue";
+import type {Ref} from "vue";
 import {hosts} from "@/scripts/constants";
 import {globals} from "@/scripts/global";
 

src/views/Life.vue

@@ -1,17 +1,24 @@
 <template>
+  <ClientOnly>
     <TgBlog postsUrl="https://profile-api.hydev.org/exports/hykilp/posts.json">
-        <div class="title">
-            <h2>生活</h2>
-            <div class="subtitle">
-                <p>
-                    在这个时间只会正向流动的世界里，每当秒针划过刻度线，就不可能再回到那里了——每一刻都是我们的第一次、也是最后一次。二十岁，人生中最有趣的这段时光，只匆匆忙忙地经历一次太可惜了。但是或许可以通过这里的照片和文字，让未来的自己能够重新体验这些心情起伏——这是这个频道的初衷。
-                </p>
-                <p>
-                    这里是我记录生活的地方，没有固定格式和内容，更新也会比较频繁。
-                </p>
-            </div>
+      <div class="title">
+        <h2>生活</h2>
+        <div class="subtitle">
+          <p>
+            在这个时间只会正向流动的世界里，每当秒针划过刻度线，就不可能再回到那里了——每一刻都是我们的第一次、也是最后一次。二十岁，人生中最有趣的这段时光，只匆匆忙忙地经历一次太可惜了。但是或许可以通过这里的照片和文字，让未来的自己能够重新体验这些心情起伏——这是这个频道的初衷。
+          </p>
+          <p>
+            这里是我记录生活的地方，没有固定格式和内容，更新也会比较频繁。
+          </p>
         </div>
+      </div>
     </TgBlog>
+    <template #fallback>
+      <div class="title">
+        <h2>生活</h2>
+      </div>
+    </template>
+  </ClientOnly>
 </template>
 
 <script lang="ts" setup>
@@ -24,6 +31,6 @@ import 'tg-blog/dist/style.css'
 @use "../css/responsive"
 
 .title
-    text-align: left
-    margin-bottom: 30px
+  text-align: left
+  margin-bottom: 30px
 </style>