81 lines
1.7 KiB
Vue
81 lines
1.7 KiB
Vue
<template>
|
|
<lenis root>
|
|
<preview-banner
|
|
v-if="data"
|
|
:is-preview="data.isPreview"
|
|
:status="data.status"
|
|
/>
|
|
<div :class="classes">
|
|
<slot />
|
|
</div>
|
|
<LivePreview v-if="data?.isPreview" />
|
|
</lenis>
|
|
</template>
|
|
|
|
<script setup>
|
|
import '@/styles/main.scss'
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import loadFonts from '@fuzzco/font-loader'
|
|
import { useWindowSize } from '@vueuse/core'
|
|
import { useData } from 'vike-vue/useData'
|
|
import Lenis from '@/components/Lenis.vue'
|
|
import PreviewBanner from '@/components/PreviewBanner.vue'
|
|
import LivePreview from '@/components/LivePreview.vue'
|
|
|
|
const data = useData()
|
|
|
|
const { height } = useWindowSize()
|
|
|
|
const fontsLoading = ref(true)
|
|
|
|
const classes = computed(() => [
|
|
'container',
|
|
{ 'fonts-ready': !fontsLoading.value },
|
|
'theme-dark',
|
|
])
|
|
|
|
onMounted(async () => {
|
|
// Load fonts
|
|
loadFonts([
|
|
{
|
|
name: 'Leibniz Fraktur',
|
|
weights: [400],
|
|
},
|
|
{
|
|
name: 'Geist Mono',
|
|
weights: [400, 700],
|
|
},
|
|
])
|
|
.then(() => {
|
|
fontsLoading.value = false
|
|
})
|
|
.catch(() => {
|
|
fontsLoading.value = false
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.container {
|
|
min-height: 100vh;
|
|
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 */
|
|
#page-content {
|
|
opacity: 1;
|
|
transition: opacity 0.3s ease-in-out;
|
|
}
|
|
body.page-transition #page-content {
|
|
opacity: 0;
|
|
}
|
|
</style>
|