basic setup

pages/index/+Page.vue

@@ -1,19 +1,68 @@
 <template>
     <main class="splash">
         <svg-wordmark />
+
+        <a :href="downloadUrl" download>
+            <btn :disabled="loading">
+                {{ loading ? 'Checking for updates…' : `Download for ${os}` }}
+            </btn>
+        </a>
     </main>
 </template>
 
 <script setup>
+import { ref, computed, onMounted } from 'vue'
 import SvgWordmark from '@/components/svg/Wordmark.vue'
+import useDetectOS from '@/composables/useDetectOS'
+import Btn from '@/components/Btn.vue'
+
+const BASE_URL = 'https://s3.takerofnotes.com'
+
+const { os } = useDetectOS()
+
+const version = ref(null)
+const downloadPath = ref(null)
+const loading = ref(true)
+
+const downloadUrl = computed(() => {
+    if (!downloadPath.value || os.value === 'Unknown') return null
+    return `${BASE_URL}/dist/${os.value.toLowerCase()}/${version.value}/${downloadPath.value}`
+})
+
+onMounted(async () => {
+    try {
+        const response = await fetch(
+            `${BASE_URL}/dist/${os.value.toLowerCase()}/latest.yml`,
+        )
+        if (!response.ok) throw new Error(response.statusText)
+        const yaml = await response.text()
+
+        const versionMatch = yaml.match(/^version:\s*(.+)/m)
+        const pathMatch = yaml.match(/^path:\s*(.+)/m)
+
+        if (versionMatch) version.value = versionMatch[1].trim()
+        if (pathMatch) downloadPath.value = pathMatch[1].trim()
+    } catch {
+        // fallback to placeholder
+        downloadPath.value = `takerofnotes-app-0.2.0.${os.value === 'Windows' ? 'exe' : os.value === 'macOS' ? 'dmg' : 'AppImage'}`
+    } finally {
+        loading.value = false
+    }
+})
 </script>
 
-<style>
+<style lang="scss">
 main.splash {
+    height: calc(100 * var(--vh));
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: desktop-vw(40px);
+
     .svg-wordmark {
         width: 70%;
         height: auto;
-        margin: auto;
         display: block;
     }
 }