|
|
|
@ -4,10 +4,7 @@
|
|
|
|
|
<NavBar>
|
|
|
|
|
<template #search>
|
|
|
|
|
<slot name="navbar-search">
|
|
|
|
|
<AlgoliaSearchBox
|
|
|
|
|
v-if="$site.themeConfig.algolia"
|
|
|
|
|
:options="$site.themeConfig.algolia"
|
|
|
|
|
/>
|
|
|
|
|
<AlgoliaSearchBox v-if="theme.algolia" :options="theme.algolia" />
|
|
|
|
|
</slot>
|
|
|
|
|
</template>
|
|
|
|
|
</NavBar>
|
|
|
|
@ -41,10 +38,10 @@
|
|
|
|
|
<template #top>
|
|
|
|
|
<slot name="page-top-ads">
|
|
|
|
|
<CarbonAds
|
|
|
|
|
v-if="$site.themeConfig.carbonAds"
|
|
|
|
|
:key="'carbon' + $page.path"
|
|
|
|
|
:code="$site.themeConfig.carbonAds.carbon"
|
|
|
|
|
:placement="$site.themeConfig.carbonAds.placement"
|
|
|
|
|
v-if="theme.carbonAds"
|
|
|
|
|
:key="'carbon' + page.relativePath"
|
|
|
|
|
:code="theme.carbonAds.carbon"
|
|
|
|
|
:placement="theme.carbonAds.placement"
|
|
|
|
|
/>
|
|
|
|
|
</slot>
|
|
|
|
|
<slot name="page-top" />
|
|
|
|
@ -53,10 +50,10 @@
|
|
|
|
|
<slot name="page-bottom" />
|
|
|
|
|
<slot name="page-bottom-ads">
|
|
|
|
|
<BuySellAds
|
|
|
|
|
v-if="$site.themeConfig.carbonAds"
|
|
|
|
|
:key="'custom' + $page.path"
|
|
|
|
|
:code="$site.themeConfig.carbonAds.custom"
|
|
|
|
|
:placement="$site.themeConfig.carbonAds.placement"
|
|
|
|
|
v-if="theme.carbonAds && theme.carbonAds.custom"
|
|
|
|
|
:key="'custom' + page.relativePath"
|
|
|
|
|
:code="theme.carbonAds.custom"
|
|
|
|
|
:placement="theme.carbonAds.placement"
|
|
|
|
|
/>
|
|
|
|
|
</slot>
|
|
|
|
|
</template>
|
|
|
|
@ -67,24 +64,42 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { ref, computed, watch } from 'vue'
|
|
|
|
|
import { ref, computed, watch, defineAsyncComponent } from 'vue'
|
|
|
|
|
import {
|
|
|
|
|
useRoute,
|
|
|
|
|
useSiteData,
|
|
|
|
|
usePageData,
|
|
|
|
|
useSiteDataByRoute
|
|
|
|
|
} from 'vitepress'
|
|
|
|
|
import type { DefaultTheme } from './config'
|
|
|
|
|
|
|
|
|
|
// components
|
|
|
|
|
import NavBar from './components/NavBar.vue'
|
|
|
|
|
import Home from './components/Home.vue'
|
|
|
|
|
import ToggleSideBarButton from './components/ToggleSideBarButton.vue'
|
|
|
|
|
import SideBar from './components/SideBar.vue'
|
|
|
|
|
import Page from './components/Page.vue'
|
|
|
|
|
import { useRoute, useSiteData, useSiteDataByRoute } from 'vitepress'
|
|
|
|
|
import AlgoliaSearchBox from './components/AlgoliaSearchBox.vue'
|
|
|
|
|
import CarbonAds from './components/CarbonAds.vue'
|
|
|
|
|
import BuySellAds from './components/BuySellAds.vue'
|
|
|
|
|
const CarbonAds = defineAsyncComponent(
|
|
|
|
|
() => import('./components/CarbonAds.vue')
|
|
|
|
|
)
|
|
|
|
|
const BuySellAds = defineAsyncComponent(
|
|
|
|
|
() => import('./components/BuySellAds.vue')
|
|
|
|
|
)
|
|
|
|
|
const AlgoliaSearchBox = defineAsyncComponent(
|
|
|
|
|
() => import('./components/AlgoliaSearchBox.vue')
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
// generic state
|
|
|
|
|
const route = useRoute()
|
|
|
|
|
const siteData = useSiteData()
|
|
|
|
|
const siteData = useSiteData<DefaultTheme.Config>()
|
|
|
|
|
const siteRouteData = useSiteDataByRoute()
|
|
|
|
|
const theme = computed(() => siteData.value.themeConfig)
|
|
|
|
|
const page = usePageData()
|
|
|
|
|
|
|
|
|
|
const openSideBar = ref(false)
|
|
|
|
|
// home
|
|
|
|
|
const enableHome = computed(() => !!route.data.frontmatter.home)
|
|
|
|
|
|
|
|
|
|
// navbar
|
|
|
|
|
const showNavbar = computed(() => {
|
|
|
|
|
const { themeConfig } = siteRouteData.value
|
|
|
|
|
const { frontmatter } = route.data
|
|
|
|
@ -99,6 +114,9 @@ const showNavbar = computed(() => {
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// sidebar
|
|
|
|
|
const openSideBar = ref(false)
|
|
|
|
|
|
|
|
|
|
const showSidebar = computed(() => {
|
|
|
|
|
const { frontmatter } = route.data
|
|
|
|
|
const { themeConfig } = siteRouteData.value
|
|
|
|
@ -111,6 +129,17 @@ const showSidebar = computed(() => {
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const toggleSidebar = (to?: boolean) => {
|
|
|
|
|
openSideBar.value = typeof to === 'boolean' ? to : !openSideBar.value
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const hideSidebar = toggleSidebar.bind(null, false)
|
|
|
|
|
// close the sidebar when navigating to a different location
|
|
|
|
|
watch(route, hideSidebar)
|
|
|
|
|
// TODO: route only changes when the pathname changes
|
|
|
|
|
// listening to hashchange does nothing because it's prevented in router
|
|
|
|
|
|
|
|
|
|
// page classes
|
|
|
|
|
const pageClasses = computed(() => {
|
|
|
|
|
return [
|
|
|
|
|
{
|
|
|
|
@ -120,14 +149,4 @@ const pageClasses = computed(() => {
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const toggleSidebar = (to) => {
|
|
|
|
|
openSideBar.value = typeof to === 'boolean' ? to : !openSideBar.value
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const hideSidebar = toggleSidebar.bind(null, false)
|
|
|
|
|
// close the sidebar when navigating to a different location
|
|
|
|
|
watch(route, hideSidebar)
|
|
|
|
|
// TODO: route only changes when the pathname changes
|
|
|
|
|
// listening to hashchange does nothing because it's prevented in router
|
|
|
|
|
</script>
|
|
|
|
|