update to new item content structure

.env

@@ -1 +1,5 @@
+VITE_STRAPI_URL=http://localhost:1337
+VITE_STRAPI_API_TOKEN=7e379ac0df1d055e91f1add3c97947068f60dc943a208524c7e10201c9d66210d6dee3ab48155581892e2cabe7a285d12395ace15a1f982e68fe5078abce0aebb826ae7c701302aa932d638ec57cb10f71fee7971e0a2b87a7fdf8eeb848eea90fb97d45fc8af69e818d1d5a59dc79cbc24f0bd1830d78670b85775ad6e05c6b
+
+VITE_STRAPI_URL=https://cms.nicwands.com
 VITE_STRAPI_API_TOKEN=5934fb84b89fdca49ef58e4f493381848289fcfb09a5664c5a61d4673a6b81b10bdf1d364fa250d185049c14487b7297758c3653dbf37390f567d6d08d559b4c40aaf4dc10730a60b98011d6dc0553f2bd633b373739579d579e39a162f67ca6d8f0e5c5adb3537a7e94b303d79c4cb7f3f877e39158e37e5bd6838596ee9afe

src/App.vue

@@ -16,6 +16,7 @@
 import { ref, computed, onMounted } from 'vue'
 import loadFonts from '@fuzzco/font-loader'
 import { useWindowSize } from '@vueuse/core'
+import useLenis from './composables/useLenis'
 
 const { height } = useWindowSize()
 
@@ -25,9 +26,9 @@ const classes = computed(() => [
     'theme-light',
 ])
 
+// Load fonts
 const fontsLoading = ref(true)
-onMounted(async () => {
+onMounted(() => {
-    // Load fonts
     loadFonts([
         {
             name: 'Liberation Sans',
@@ -48,6 +49,7 @@ onMounted(async () => {
         })
 })
 
+// Set vh value for mobile sizing
 const styles = computed(() => ({
     '--vh': height.value ? height.value / 100 + 'px' : '100vh',
 }))

src/components.d.ts

@@ -22,6 +22,8 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     SiteHeader: typeof import('./components/site/Header.vue')['default']
     StrapiContent: typeof import('./components/strapi/Content.vue')['default']
+    StrapiCopy: typeof import('./components/strapi/Copy.vue')['default']
+    StrapiMap: typeof import('./components/strapi/Map.vue')['default']
     StrapiMedia: typeof import('./components/strapi/Media.vue')['default']
   }
 }

src/components/MosaicModal.vue

@@ -10,7 +10,8 @@
         <div class="window content" @click.stop data-lenis-prevent>
             <lenis instance="mosaic-modal">
                 <h1 class="title">{{ item.title }}</h1>
-                <strapi-content :content="item.content" />
+
+                <strapi-map :items="item.content" />
             </lenis>
         </div>
 

src/components/MosaicViewport.vue

@@ -17,7 +17,7 @@
                 @click="openModal(cell.content)"
             >
                 <strapi-media
-                    :field="cell.content.image"
+                    :image="cell.content.image"
                     :aspect="100"
                     fit="contain"
                 />
@@ -36,10 +36,9 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed, watch } from 'vue'
 import { useEventListener } from '@vueuse/core'
 import useLenis from '@/composables/useLenis'
-import _kebabCase from 'lodash/kebabCase'
 import { useRoute, useRouter } from 'vue-router'
 
 const props = defineProps({
@@ -60,14 +59,14 @@ const selectedItem = computed(() => {
     const { item } = route.query
 
     return props.content.cells.find((cell) => {
-        return _kebabCase(cell?.content?.title || '') === item
+        return cell?.content?.slug === item
     })?.content
 })
 
 const openModal = (cellContent) => {
     router.push({
         query: {
-            item: _kebabCase(cellContent.title),
+            item: cellContent.slug,
         },
     })
 }

src/components/strapi/Copy.vue

@@ -0,0 +1,7 @@
+<template>
+    <strapi-content class="strapi-copy" :content="content" />
+</template>
+
+<script setup>
+const props = defineProps({ content: Array })
+</script>

src/components/strapi/Map.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="strapi-map">
+        <component
+            v-for="item in items"
+            v-bind="item"
+            :is="MAP[item.__component]"
+        />
+    </div>
+</template>
+
+<script setup>
+import Copy from './Copy.vue'
+import Media from './Media.vue'
+
+const MAP = {
+    'global.copy': Copy,
+    'global.media': Media,
+}
+
+const props = defineProps({
+    items: Array,
+})
+</script>
+
+<style lang="scss">
+.strapi-map {
+    display: flex;
+    flex-direction: column;
+    gap: desktop-vw(40px);
+}
+</style>

src/components/strapi/Media.vue

@@ -15,6 +15,15 @@
                 loading="lazy"
                 decoding="async"
             />
+
+            <video
+                v-if="video?.url"
+                :src="addURLBase(video.url)"
+                muted
+                autoplay
+                playsinline
+                loop
+            />
         </div>
     </div>
 </template>
@@ -24,7 +33,8 @@ import { breakpoints } from '@/libs/theme'
 import { computed } from 'vue'
 
 const props = defineProps({
-    field: Object,
+    image: Object,
+    video: Object,
     aspect: {
         type: [String, Number],
         default: () => -1,
@@ -47,14 +57,12 @@ const props = defineProps({
     },
 })
 
-const addURLBase = (path) => `https://cms.nicwands.com${path}`
+const addURLBase = (path) => `${import.meta.env.VITE_STRAPI_URL}${path}`
 
-// const image = computed(() => props.field.image)
+const formats = computed(() => props.image?.formats || {})
-const image = computed(() => props.field)
-const formats = computed(() => image.value?.formats || {})
 const ratio = computed(() => {
-    if (!image.value) return 1
+    if (!props.image) return 1
-    return image.value.height / image.value.width
+    return props.image.height / props.image.width
 })
 const aspect = computed(() => {
     // calculate if no aspect provided

src/plugins/strapi.js

@@ -3,7 +3,7 @@ import { strapi } from '@strapi/client'
 export default {
     install: (app) => {
         const client = strapi({
-            baseURL: 'https://cms.nicwands.com/api',
+            baseURL: `${import.meta.env.VITE_STRAPI_URL}/api`,
             auth: import.meta.env.VITE_STRAPI_API_TOKEN,
         })