Use vite-ssg

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "scripts": {
     "dev": "vite --host",
-    "build": "vite build",
+    "build": "vite-ssg build",
     "start": "vite preview",
     "lint": "eslint . --fix"
   },
@@ -27,6 +27,7 @@
     "blobs": "^2.2.1-beta.1",
     "ohmyfetch": "^0.4.11",
     "unplugin-icons": "^0.12.23",
+    "vite-ssg": "^0.17.1",
     "vue": "^3.2.26",
     "vue-router": "^4.0.12"
   }

src/App.vue

@@ -9,7 +9,7 @@
   </div>
   <div class="bg-background fixed top-0 left-0 right-0 bottom-0 z-100 backdrop-filter" :style="loadingOverlayStyle">
     <div class="font-bold text-light-900 text-2xl h-full w-full flex justify-center items-center overflow-hidden" :style="loadingOverlayContentStyle">
-      <div :class="$style.loadingText">
+      <div :class="$style.centerLoadingText">
         Loading...
       </div>
       <div
@@ -34,6 +34,19 @@
     font-size: 17px;
   }
 
+  .centerLoadingText {
+    animation: fade-in 2s ease-out both;
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
   .loadingText {
     animation: fade-in-out 8s ease both;
   }
@@ -50,7 +63,7 @@
 
 <script lang="ts">
   import { computed, ref } from "vue"
-  import { useWindowSize, whenever } from "@vueuse/core"
+  import { useIntervalFn, useWindowSize, whenever } from "@vueuse/core"
   import { pageComponentLoading } from "./store"
   import { useRouter } from "vue-router"
 
@@ -98,7 +111,7 @@
 
       const { width, height } = useWindowSize()
 
-      setInterval(() => {
+      useIntervalFn(() => {
         const start = loadingStartedTime.value
         if (start === null) return
         if (Date.now() - start > 3000) {

src/components/BlurredBlobCanvas.vue

@@ -3,7 +3,9 @@
 </template>
 
 <script>
-  import { canvasPath as createBlobAnimation } from "blobs/v2/animate/index.module.js"
+  import blobsAnimate from "blobs/v2/animate/index.js"
+  const { canvasPath: createBlobAnimation } = blobsAnimate
+
   import { ref, watchEffect } from "vue"
   import { useRafFn } from "@vueuse/core"
 

src/main.ts

@@ -1,10 +1,10 @@
 import "virtual:windi.css"
 import originalRoutes from "~pages"
-import { createApp, FunctionalComponent } from "vue"
+import { FunctionalComponent } from "vue"
-import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"
+import { RouteRecordRaw } from "vue-router"
 import App from "./App.vue"
-import { createHead } from "@vueuse/head"
 import { pageComponentLoading } from "./store"
+import { ViteSSG } from "vite-ssg"
 
 const routes = originalRoutes.map(route => {
   if (typeof route.component !== "function") return route
@@ -23,19 +23,18 @@ const routes = originalRoutes.map(route => {
   }
 }) as RouteRecordRaw[]
 
-const router = createRouter({
+// noinspection JSUnusedGlobalSymbols
-  history: createWebHistory(),
+export const createApp = ViteSSG(
-  routes,
+  App,
-  scrollBehavior(to, from, savedPosition) {
+  {
-    if (savedPosition) return savedPosition
+    routes,
-    if (to.hash) return { el: to.hash }
+    scrollBehavior(to, from, savedPosition) {
-    return { top: 0 }
+      if (savedPosition) return savedPosition
+      if (to.hash) return { el: to.hash }
+      return { top: 0 }
+    }
+  },
+  () => {
+
   }
-})
+)
-
-const head = createHead()
-
-createApp(App)
-  .use(router)
-  .use(head)
-  .mount("#app")

vite.config.ts

@@ -12,5 +12,13 @@ export default defineConfig({
     }),
     windicssPlugin(),
     iconsPlugin()
-  ]
+  ],
+  ssgOptions: {
+    formatting: "minify",
+    includedRoutes(routes) {
+      return routes.filter(route => {
+        return /* Dynamic routes: */ !route.includes(":") && /* Blog post overview: */route !== "/blog"
+      })
+    }
+  }
 })