feat: auto module

Author: ntnyq

index.html

@@ -7,6 +7,8 @@
   <meta http-equiv="X-UA-Compatible" content="chrome=1" />
   <meta name="revisit-after" content="7 days" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="keywords" content="ntnyq">
+  <meta name="description" content="ntnyq's website">
   <meta name="theme-color" content="#ffffff" />
   <link rel="shortcut icon" href="/static/icons/favicon.png" type="image/png" />
   <link href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@200;400;600&display=swap" rel="stylesheet" />

package.json

@@ -48,6 +48,7 @@
     "vite-ssg-sitemap": "^0.2.2"
   },
   "dependencies": {
+    "@gtm-support/vue-gtm": "^1.4.0",
     "@vueuse/core": "^8.2.6",
     "@vueuse/head": "^0.7.6",
     "nprogress": "^0.2.0",

pnpm-lock.yaml

@@ -1,12 +1,12 @@
 <template>
-  <a
+  <span
     @click="toggleDark"
     title="Toggle Color Scheme"
-    class="select-none"
+    class="select-none cursor-pointer"
   >
     <IRiMoonLine v-if="isDark" />
     <IRiSunLine v-else />
-  </a>
+  </span>
 </template>
 
 <script setup lang="ts">

src/components/ThemeToggle.vue

@@ -1,13 +1,13 @@
+import pages from '~pages'
+import { ViteSSG } from 'vite-ssg'
+import type { RouterScrollBehavior } from 'vue-router'
+import App from './App.vue'
+
 import '@unocss/reset/tailwind.css'
 import 'uno.css'
 import '@/styles/main.css'
 import '@/styles/prose.css'
 import '@/styles/markdown.css'
-import pages from '~pages'
-import { ViteSSG } from 'vite-ssg'
-import NPprogress from 'nprogress'
-import type { RouterScrollBehavior } from 'vue-router'
-import App from './App.vue'
 
 const routes = pages.map(route => ({
   ...route,
@@ -20,16 +20,10 @@ const scrollBehavior: RouterScrollBehavior = (_, __, savedPosition) =>
 
 export const createApp = ViteSSG(
   App,
-  { routes, scrollBehavior },
-  ({ router, isClient }) => {
-    if (isClient) {
-      router.beforeEach(() => {
-        NPprogress.start()
-      })
-
-      router.afterEach(() => {
-        NPprogress.done()
-      })
-    }
-  }
+  { routes, scrollBehavior, base: import.meta.env.BASE_URL },
+  ctx => {
+    Object.values(import.meta.globEager(`./modules/*.ts`)).forEach(i =>
+      i.install?.(ctx),
+    )
+  },
 )

src/main.ts

@@ -0,0 +1,6 @@
+import { createGtm } from '@gtm-support/vue-gtm'
+import type { UserModule } from '@/types'
+
+export const install: UserModule = ({ app }) => {
+  app.use(createGtm({ id: `GTM-T497H2P` }))
+}

src/modules/gtm.ts

@@ -0,0 +1,11 @@
+import NProgress from 'nprogress'
+import { type UserModule } from '@/types'
+
+export const install: UserModule = ({ isClient, router }) => {
+  if (!isClient) return
+  router.beforeEach((to, from) => {
+    if (to.path === from.path) return
+    NProgress.start()
+  })
+  router.afterEach(() => NProgress.done())
+}

src/modules/nprogress.ts

@@ -0,0 +1,8 @@
+import { type UserModule } from '@/types'
+
+export const install: UserModule = async ({ isClient, router }) => {
+  if (!isClient) return
+  await router.isReady()
+  const { registerSW } = await import(`virtual:pwa-register`)
+  registerSW({ immediate: true })
+}

src/modules/pwa.ts

@@ -0,0 +1,3 @@
+import { type ViteSSGContext } from 'vite-ssg'
+
+export type UserModule = (ctx: ViteSSGContext) => void

src/types/index.d.ts

@@ -74,12 +74,7 @@ export default defineConfig({
       presets: [
         presetUno(),
         presetIcons({
-          extraProperties: {
-            dispaly: `inline-block`,
-            height: `1.2em`,
-            width: `1.2em`,
-            'vertical-align': `text-bottom`,
-          },
+          warn: true,
         }),
       ],
     }),