feat!: automatic update check

Author: hywax

app.vue

@@ -14,5 +14,8 @@ locale.value = $settings.lang
 
 useHead({
   title: $settings.title,
+  bodyAttrs: {
+    class: 'relative',
+  },
 })
 </script>

components/Update.vue

@@ -0,0 +1,15 @@
+<template>
+  <Teleport v-if="data && data.available" to="body">
+    <div class="fixed z-20 bottom-[30px] right-[30px] opacity-80 hover:opacity-100 transition-all">
+      <div class="w-[160px] h-[160px] -z-1 rounded-full bg-brand-600 blur-3xl right-0 -bottom-20 absolute" />
+      <div class="z-1 relative text-end text-fg-dimmed">
+        A new version is available <strong>{{ data.version }}</strong><br>
+        <a :href="`https://github.com/hywax/mafl/releases/tag/v${data.version}`" class="border-b border-dashed" target="_blank">Visit on github →</a>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+const { data } = await useFetch('/api/update')
+</script>

pages/index.vue

@@ -16,8 +16,9 @@
       </p>
     </template>
   </Message>
+  <Update v-if="$settings.checkUpdates" />
 </template>
 
 <script setup lang="ts">
-const { $services } = useNuxtApp()
+const { $services, $settings } = useNuxtApp()
 </script>

server/api/update.ts

@@ -0,0 +1,15 @@
+import currentPackage from '~/package.json'
+
+export default defineEventHandler(async () => {
+  const latestPackage = await $fetch<typeof currentPackage>('https://raw.githubusercontent.com/hywax/mafl/main/package.json', {
+    parseResponse: (json) => JSON.parse(json),
+  })
+
+  const parseVersion = (version: string): number => Number.parseInt(version.replace(/\./g, ''), 10)
+  const difference = parseVersion(latestPackage.version) - parseVersion(currentPackage.version)
+
+  return {
+    available: difference > 0,
+    version: latestPackage.version,
+  }
+})

server/utils/config.ts

@@ -18,6 +18,7 @@ export function getDefaultConfig(): CompleteConfig {
     lang: 'en',
     theme: 'system',
     services: [],
+    checkUpdates: true,
   }
 }
 

types/config.d.ts

@@ -10,6 +10,7 @@ export interface Config {
   lang: 'en' | 'ru'
   theme?: 'system' | 'light' | 'dark' | 'deep'
   services: ServicesGroup[]
+  checkUpdates: boolean
 }
 
 export type CompleteConfig = Required<Config>