detail page port

pages/+Layout.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import '@/styles/main.scss'
+import '@/styles/global.scss'
 import { ref, computed, onMounted } from 'vue'
 import loadFonts from '@fuzzco/font-loader'
 import { useWindowSize } from '@vueuse/core'
@@ -20,19 +20,26 @@ const fontsLoading = ref(true)
 const classes = computed(() => [
     'container',
     { 'fonts-ready': !fontsLoading.value },
-    'theme-dark',
+    'theme-light',
 ])
 
 onMounted(async () => {
     // Load fonts
     loadFonts([
         {
-            name: 'Leibniz Fraktur',
-            weights: [400],
+            name: 'Arial Narrow',
+            weights: [700],
+            styles: ['normal', 'italic'],
         },
         {
-            name: 'Geist Mono',
-            weights: [400, 700],
+            name: 'Druk Wide',
+            weights: [900],
+            styles: ['normal'],
+        },
+        {
+            name: 'GT Super',
+            weights: [400],
+            styles: ['italic'],
         },
     ])
         .then(() => {

pages/@id/+Page.vue

@@ -0,0 +1,37 @@
+<template>
+    <column-layout class="event-detail">
+        <template v-slot:column-one>
+            <event-info :event="event" :product="product" />
+        </template>
+
+        <template v-slot:column-two>
+            <slices-map :slices="slices" />
+        </template>
+    </column-layout>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useData } from 'vike-vue/useData'
+import ColumnLayout from '@/components/ColumnLayout.vue'
+import EventInfo from '@/components/event/Info.vue'
+import SlicesMap from '@/components/slices/Map.vue'
+
+const { event, product } = useData()
+
+const slices = computed(() => event?.slices || [])
+</script>
+
+<style lang="scss">
+main.event-detail {
+    .column.two {
+        padding-bottom: desktop-vw(75px);
+
+        .slices-full-bleed-media.diptych {
+            .prismic-media {
+                border-width: 1px 0;
+            }
+        }
+    }
+}
+</style>

pages/@id/+data.js

@@ -0,0 +1,29 @@
+import * as prismic from '@prismicio/client'
+import { createStorefrontApiClient } from '@shopify/storefront-api-client'
+import { GET_PRODUCT_BY_HANDLE } from '@/libs/shopify/product'
+
+export const data = async (pageContext) => {
+    const { id } = pageContext.routeParams
+    const prismicClient = prismic.createClient('swang')
+
+    const eventDoc = await prismicClient.getByUID('event', id)
+    const event = eventDoc?.data
+
+    const productHandle = event?.shopify_product_handle
+
+    if (!productHandle) return { event, product: null }
+
+    const shopifyClient = createStorefrontApiClient({
+        storeDomain: `https://swangent.myshopify.com`,
+        apiVersion: '2026-04',
+        publicAccessToken: 'd2848b9bcde999cea878c218493cfe84',
+    })
+
+    const query = GET_PRODUCT_BY_HANDLE
+    const variables = { handle: productHandle }
+
+    const productRes = await shopifyClient.request(query, { variables })
+    const product = productRes?.data
+
+    return { event, product }
+}

pages/index/+Page.vue

@@ -1,86 +1,19 @@
 <template>
     <main class="splash">
-        <svg-wordmark />
-
-        <div class="content">
-            <strapi-blocks v-if="content" :content="content" />
-        </div>
-
-        <a :href="downloadUrl" download>
-            <btn :disabled="loading">
-                {{ loading ? 'Checking for updates…' : `Download for ${os}` }}
-            </btn>
-        </a>
+        <pre>{{ events }}</pre>
     </main>
 </template>
 
 <script setup>
-import { StrapiBlocks } from 'vue-strapi-blocks-renderer'
-import { ref, computed, onMounted } from 'vue'
-import SvgWordmark from '@/components/svg/Wordmark.vue'
-import useDetectOS from '@/composables/useDetectOS'
-import Btn from '@/components/Btn.vue'
 import { useData } from 'vike-vue/useData'
 
-const BASE_URL = 'https://s3.takerofnotes.com'
-
-const { os } = useDetectOS()
-const { data } = useData()
-
-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}`
-})
-const content = computed(() => data?.content)
-
-onMounted(async () => {
-    try {
-        const response = await fetch(
-            `${BASE_URL}/dist/latest-${os.value.toLowerCase()}.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'}`
-        console.error('Failed to fetch latest version info')
-    } finally {
-        loading.value = false
-    }
-})
+const { events } = useData()
 </script>
 
 <style lang="scss">
 main.splash {
-    height: 100vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    gap: desktop-vw(40px);
-
-    .svg-wordmark {
-        width: 70%;
-        height: auto;
-        display: block;
-    }
-
-    .content {
-        margin: var(--layout-margin);
-
-        p {
-            max-width: desktop-vw(500px);
-        }
+    pre {
+        margin: 0;
     }
 }
 </style>

pages/index/+data.js

@@ -1,11 +1,9 @@
-import { strapi } from '@strapi/client'
+import * as prismic from '@prismicio/client'
 
 export const data = async () => {
-    const client = strapi({
-        baseURL: 'https://cms.takerofnotes.com/api',
-        auth: import.meta.env.STRAPI_API_TOKEN,
-    })
+    const client = prismic.createClient('swang')
 
-    const global = client.single('global')
-    return await global.find()
+    const events = await client.getAllByType('event')
+
+    return { events }
 }