basic setup

pages/+Layout.vue

@@ -1,34 +1,61 @@
-<!-- https://vike.dev/Layout -->
-
 <template>
-    <div class="layout">
-        <slot />
-    </div>
+    <lenis root>
+        <div :class="classes" :style="styles">
+            <slot />
+        </div>
+    </lenis>
 </template>
 
-<script lang="ts" setup></script>
+<script setup>
+import '@/styles/main.scss'
+import { ref, computed, onMounted } from 'vue'
+import loadFonts from '@fuzzco/font-loader'
+import { useWindowSize } from '@vueuse/core'
+import Lenis from '@/components/Lenis.vue'
 
-<style>
-body {
-    margin: 0;
-    font-family: sans-serif;
-}
-* {
-    box-sizing: border-box;
-}
-a {
-    text-decoration: none;
-}
-</style>
+const { height } = useWindowSize()
 
-<style scoped>
-.layout {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    background: #131313;
-    color: #ebebeb;
+const fontsLoading = ref(true)
+
+const classes = computed(() => [
+    'container',
+    { 'fonts-ready': !fontsLoading.value },
+    'theme-dark',
+])
+
+onMounted(async () => {
+    // Load fonts
+    loadFonts([
+        {
+            name: 'Office Times',
+            weights: [400],
+        },
+    ])
+        .then(() => {
+            fontsLoading.value = false
+        })
+        .catch(() => {
+            fontsLoading.value = false
+        })
+})
+
+const styles = computed(() => ({
+    '--vh': height.value ? height.value / 100 + 'px' : '100vh',
+}))
+</script>
+
+<style lang="scss">
+.container {
+    min-height: calc(100 * var(--vh));
+    max-width: 100vw;
+    overflow-x: clip;
+    background: var(--theme-bg);
+    color: var(--theme-fg);
+    transition: opacity 1000ms;
+
+    &:not(.fonts-ready) {
+        opacity: 0;
+    }
 }
 
 /* Page Transition Animation */

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;
     }
 }