Initial rearrangment of vuetom site source
This commit is contained in:
114
packages/vuetom/blog/layouts/Layout.vue
Normal file
114
packages/vuetom/blog/layouts/Layout.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<script setup lang="ts">
|
||||
import { provide, onMounted, ref, computed, reactive } from 'vue'
|
||||
import VPNav from 'vitepress/dist/client/theme-default/components/VPNav.vue'
|
||||
// import VPNav from '../components/nav/VPNav.vue'
|
||||
import VTFloat from '../components/VTFloat.vue'
|
||||
import VPContent from '../components/VPContent.vue'
|
||||
import VTBackground from '../components/VTBackground.vue'
|
||||
import type { UseScrollReturn } from '@vueuse/core'
|
||||
import { useScriptTag } from '@vueuse/core'
|
||||
import { vScroll } from '@vueuse/components'
|
||||
import { useSidebar, useCloseSidebarOnEscape } from '../composables/sidebar.js'
|
||||
import { useHomeBg } from '../composables/homebg.js'
|
||||
|
||||
const { bgStyle, bgImgSrc } = useHomeBg()
|
||||
|
||||
const {
|
||||
isOpen: isSidebarOpen,
|
||||
// open: openSidebar,
|
||||
close: closeSidebar,
|
||||
} = useSidebar()
|
||||
|
||||
useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)
|
||||
|
||||
provide('close-sidebar', closeSidebar)
|
||||
|
||||
const renderHomeBackground = () => {
|
||||
// const ds = document.documentElement.style
|
||||
// ds.setProperty('--vt-bg-light', lightStyle)
|
||||
|
||||
const vpHome = document.getElementById('VTLayoutScroll')
|
||||
const hs = vpHome.style
|
||||
hs.backgroundSize = 'cover'
|
||||
hs.backgroundAttachment = 'fixed'
|
||||
hs.backgroundPosition = 'center center'
|
||||
hs.backgroundImage = bgStyle
|
||||
}
|
||||
|
||||
// const handleScroll = () => {
|
||||
// const scrollTop = window.pageYOffset
|
||||
// || document.documentElement.scrollTop
|
||||
// || document.body.scrollTop
|
||||
// if (scrollTop <= 100) navOpacity.value = scrollTop / 100
|
||||
// }
|
||||
|
||||
onMounted(() => {
|
||||
renderHomeBackground()
|
||||
|
||||
// window.addEventListener('scroll', handleScroll)
|
||||
})
|
||||
|
||||
const navOpacity = ref(0)
|
||||
function onScroll(state: UseScrollReturn) {
|
||||
const arrivedTop = state.arrivedState.top
|
||||
const val = state.y.value / 200
|
||||
if (arrivedTop) navOpacity.value = 0
|
||||
else navOpacity.value <= 1 ? (navOpacity.value = val) : 1
|
||||
}
|
||||
|
||||
useScriptTag(
|
||||
'/js/leaf.js',
|
||||
(el: HTMLScriptElement) => {
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="Layout">
|
||||
<slot name="layout-top" />
|
||||
<!-- <VPSkipLink /> -->
|
||||
<!-- <VPBackdrop class="backdrop" :show="isSidebarOpen" @click="closeSidebar" /> -->
|
||||
<VPNav
|
||||
class="transition-opacity duration-1000"
|
||||
:style="[{ opacity: navOpacity }]" />
|
||||
<!-- <VPLocalNav :open="isSidebarOpen" @open-menu="openSidebar" /> -->
|
||||
<!-- <VPSidebar :open="isSidebarOpen" /> -->
|
||||
<div
|
||||
id="VTLayoutScroll"
|
||||
class="h-screen overflow-scroll"
|
||||
v-scroll="[onScroll, { throttle: 10 }]">
|
||||
<VTBackground>
|
||||
<VPContent class="h-full relative z-10" />
|
||||
</VTBackground>
|
||||
</div>
|
||||
|
||||
<!-- <VPContent>
|
||||
<template #home-hero-before><slot name="home-hero-before" /></template>
|
||||
<template #home-hero-after><slot name="home-hero-after" /></template>
|
||||
<template #home-features-before><slot name="home-features-before" /></template>
|
||||
<template #home-features-after><slot name="home-features-after" /></template>
|
||||
|
||||
<template #doc-before><slot name="doc-before" /></template>
|
||||
<template #doc-after><slot name="doc-after" /></template>
|
||||
|
||||
<template #aside-top><slot name="aside-top" /></template>
|
||||
<template #aside-bottom><slot name="aside-bottom" /></template>
|
||||
<template #aside-outline-before><slot name="aside-outline-before" /></template>
|
||||
<template #aside-outline-after><slot name="aside-outline-after" /></template>
|
||||
<template #aside-ads-before><slot name="aside-ads-before" /></template>
|
||||
<template #aside-ads-after><slot name="aside-ads-after" /></template>
|
||||
</VPContent> -->
|
||||
|
||||
<VTFloat />
|
||||
<slot name="layout-bottom" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.Layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
94
packages/vuetom/blog/layouts/NotFound.vue
Normal file
94
packages/vuetom/blog/layouts/NotFound.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<script setup lang="ts">
|
||||
import { useData } from 'vitepress'
|
||||
|
||||
const { site } = useData()
|
||||
|
||||
const msgs = [
|
||||
'There\'s nothing here.',
|
||||
'How did we get here?',
|
||||
'That\'s a Four-Oh-Four.',
|
||||
'Looks like we\'ve got some broken links.'
|
||||
]
|
||||
|
||||
function getMsg() {
|
||||
return msgs[Math.floor(Math.random() * msgs.length)]
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="NotFound">
|
||||
<p class="code">404</p>
|
||||
<h1 class="title">PAGE NOT FOUND</h1>
|
||||
<div class="divider"></div>
|
||||
<blockquote class="quote">
|
||||
{{ getMsg() }}
|
||||
</blockquote>
|
||||
<div class="action">
|
||||
<a class="link" :href="site.base" aria-label="go to home">
|
||||
Take me home
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.NotFound {
|
||||
padding: 64px 24px 96px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.NotFound {
|
||||
padding: 96px 32px 168px;
|
||||
}
|
||||
}
|
||||
|
||||
.code {
|
||||
line-height: 64px;
|
||||
font-size: 64px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-top: 12px;
|
||||
letter-spacing: 2px;
|
||||
line-height: 20px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: 24px auto 18px;
|
||||
width: 64px;
|
||||
height: 1px;
|
||||
background-color: var(--vp-c-divider)
|
||||
}
|
||||
|
||||
.quote {
|
||||
margin: 0 auto;
|
||||
max-width: 256px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.action {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: inline-block;
|
||||
border: 1px solid var(--vp-c-brand);
|
||||
border-radius: 16px;
|
||||
padding: 3px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-brand);
|
||||
transition: border-color 0.25s, color .25s;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
border-color: var(--vp-c-brand-dark);
|
||||
color: var(--vp-c-brand-dark);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user