72 lines
1.8 KiB
Vue
72 lines
1.8 KiB
Vue
<script setup lang="ts">
|
||
const config = useAppConfig()
|
||
const theme = useVThemeSSR()
|
||
const vdisp = ref(useVDisplay())
|
||
const { reader } = storeToRefs(usePageStore())
|
||
const route = useRoute()
|
||
|
||
useHead({
|
||
titleTemplate: (chunk?) => {
|
||
if (route.fullPath === '/') return config.title.full
|
||
|
||
console.log(route.fullPath.split('/'))
|
||
|
||
if (route.fullPath.split('/').length === 2)
|
||
switch (route.fullPath.split('/')[1]) {
|
||
case 'blog':
|
||
return 'The Enderchest'
|
||
default:
|
||
return `${chunk} – ${config.title.short}`
|
||
}
|
||
|
||
return chunk!
|
||
},
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<VThemeProvider
|
||
:theme="theme.dark.value ? config.theme.dark : config.theme.light"
|
||
>
|
||
<div
|
||
id="ender-layout"
|
||
class="p-animated d-flex flex-column align-items-center h-100"
|
||
:class="{ 'pt-sm-5': !reader }"
|
||
>
|
||
<AClientOnly appear mode="out-in">
|
||
<SwipeControls v-if="vdisp.xs" />
|
||
</AClientOnly>
|
||
|
||
<NuxtLayout
|
||
name="card"
|
||
class="animate__animated-sm animate__delay-1-5s animate__fadeInDown"
|
||
>
|
||
<template #footer>
|
||
<AClientOnly
|
||
appear
|
||
mode="in-out"
|
||
enter="animate__animated animate__delay-1s animate__fadeIn"
|
||
leave="animate__animated animate__fadeOut"
|
||
>
|
||
<Flooter v-if="vdisp.xs" opaque />
|
||
</AClientOnly>
|
||
</template>
|
||
</NuxtLayout>
|
||
</div>
|
||
|
||
<AClientOnly
|
||
appear
|
||
mode="out-in"
|
||
enter="animate__animated animate__delay-1s animate__fadeInUpBig animate__slow"
|
||
leave="animate__animated animate__fadeOutDown"
|
||
>
|
||
<Flooter v-if="vdisp.smAndUp && !reader" class="floaty mb-2 px-2" />
|
||
</AClientOnly>
|
||
|
||
<ClientOnly>
|
||
<template #fallback> </template>
|
||
<Portal layout="#ender-layout" animate randomize fade />
|
||
</ClientOnly>
|
||
</VThemeProvider>
|
||
</template>
|