|
1 | 1 | <template> |
2 | | - <div class="theme" :class="pageClasses"> |
3 | | - <NavBar v-if="showNavbar" @toggle="toggleSidebar"> |
| 2 | + <V5 /> |
| 3 | + <div |
| 4 | + class="theme" |
| 5 | + :class="pageClasses" |
| 6 | + :style="{ |
| 7 | + paddingTop: '60px', |
| 8 | + }" |
| 9 | + > |
| 10 | + <NavBar |
| 11 | + v-if="showNavbar" |
| 12 | + @toggle="toggleSidebar" |
| 13 | + :style="{ |
| 14 | + top: '60px', |
| 15 | + }" |
| 16 | + > |
4 | 17 | <template #search> |
5 | 18 | <slot name="navbar-search"> |
6 | 19 | <AlgoliaSearchBox |
|
41 | 54 | <Page v-else> |
42 | 55 | <template #top> |
43 | 56 | <slot name="page-top-ads"> |
44 | | - <div |
45 | | - id="ads-container" |
46 | | - v-if="theme.carbonAds && theme.carbonAds.carbon" |
47 | | - > |
| 57 | + <div id="ads-container" v-if="theme.carbonAds && theme.carbonAds.carbon"> |
48 | 58 | <CarbonAds |
49 | 59 | :key="'carbon' + page.relativePath" |
50 | 60 | :code="theme.carbonAds.carbon" |
|
72 | 82 | </template> |
73 | 83 |
|
74 | 84 | <script setup lang="ts"> |
75 | | -import { ref, computed, watch, defineAsyncComponent } from 'vue' |
76 | | -import { |
77 | | - useRoute, |
78 | | - useSiteData, |
79 | | - usePageData, |
80 | | - useSiteDataByRoute |
81 | | -} from 'vitepress' |
82 | | -import { isSideBarEmpty, getSideBarConfig } from './support/sideBar' |
83 | | -import type { DefaultTheme } from './config' |
84 | | -
|
85 | | -// components |
86 | | -import NavBar from './components/NavBar.vue' |
87 | | -import SideBar from './components/SideBar.vue' |
88 | | -import Page from './components/Page.vue' |
89 | | -
|
90 | | -const Home = defineAsyncComponent(() => import('./components/Home.vue')) |
91 | | -
|
92 | | -const NoopComponent = () => null |
93 | | -
|
94 | | -const CarbonAds = __CARBON__ |
95 | | - ? defineAsyncComponent(() => import('./components/CarbonAds.vue')) |
96 | | - : NoopComponent |
97 | | -const BuySellAds = __BSA__ |
98 | | - ? defineAsyncComponent(() => import('./components/BuySellAds.vue')) |
99 | | - : NoopComponent |
100 | | -const AlgoliaSearchBox = __ALGOLIA__ |
101 | | - ? defineAsyncComponent(() => import('./components/AlgoliaSearchBox.vue')) |
102 | | - : NoopComponent |
103 | | -
|
104 | | -// generic state |
105 | | -const route = useRoute() |
106 | | -const siteData = useSiteData<DefaultTheme.Config>() |
107 | | -const siteRouteData = useSiteDataByRoute() |
108 | | -const theme = computed(() => siteData.value.themeConfig) |
109 | | -const page = usePageData() |
110 | | -
|
111 | | -// custom layout |
112 | | -const isCustomLayout = computed(() => !!route.data.frontmatter.customLayout) |
113 | | -// home |
114 | | -const enableHome = computed(() => !!route.data.frontmatter.home) |
115 | | -
|
116 | | -// navbar |
117 | | -const showNavbar = computed(() => { |
118 | | - const { themeConfig } = siteRouteData.value |
119 | | - const { frontmatter } = route.data |
120 | | - if (frontmatter.navbar === false || themeConfig.navbar === false) { |
121 | | - return false |
122 | | - } |
123 | | - return ( |
124 | | - siteData.value.title || |
125 | | - themeConfig.logo || |
126 | | - themeConfig.repo || |
127 | | - themeConfig.nav |
128 | | - ) |
129 | | -}) |
130 | | -
|
131 | | -// sidebar |
132 | | -const openSideBar = ref(false) |
133 | | -
|
134 | | -const showSidebar = computed(() => { |
135 | | - const { frontmatter } = route.data |
136 | | -
|
137 | | - if (frontmatter.home || frontmatter.sidebar === false) { |
138 | | - return false |
139 | | - } |
| 85 | + import V5 from './V5.vue'; |
| 86 | + import { ref, computed, watch, defineAsyncComponent } from 'vue'; |
| 87 | + import { useRoute, useSiteData, usePageData, useSiteDataByRoute } from 'vitepress'; |
| 88 | + import { isSideBarEmpty, getSideBarConfig } from './support/sideBar'; |
| 89 | + import type { DefaultTheme } from './config'; |
| 90 | +
|
| 91 | + // components |
| 92 | + import NavBar from './components/NavBar.vue'; |
| 93 | + import SideBar from './components/SideBar.vue'; |
| 94 | + import Page from './components/Page.vue'; |
| 95 | +
|
| 96 | + const Home = defineAsyncComponent(() => import('./components/Home.vue')); |
| 97 | +
|
| 98 | + const NoopComponent = () => null; |
| 99 | +
|
| 100 | + const CarbonAds = __CARBON__ |
| 101 | + ? defineAsyncComponent(() => import('./components/CarbonAds.vue')) |
| 102 | + : NoopComponent; |
| 103 | + const BuySellAds = __BSA__ |
| 104 | + ? defineAsyncComponent(() => import('./components/BuySellAds.vue')) |
| 105 | + : NoopComponent; |
| 106 | + const AlgoliaSearchBox = __ALGOLIA__ |
| 107 | + ? defineAsyncComponent(() => import('./components/AlgoliaSearchBox.vue')) |
| 108 | + : NoopComponent; |
| 109 | +
|
| 110 | + // generic state |
| 111 | + const route = useRoute(); |
| 112 | + const siteData = useSiteData<DefaultTheme.Config>(); |
| 113 | + const siteRouteData = useSiteDataByRoute(); |
| 114 | + const theme = computed(() => siteData.value.themeConfig); |
| 115 | + const page = usePageData(); |
| 116 | +
|
| 117 | + // custom layout |
| 118 | + const isCustomLayout = computed(() => !!route.data.frontmatter.customLayout); |
| 119 | + // home |
| 120 | + const enableHome = computed(() => !!route.data.frontmatter.home); |
| 121 | +
|
| 122 | + // navbar |
| 123 | + const showNavbar = computed(() => { |
| 124 | + const { themeConfig } = siteRouteData.value; |
| 125 | + const { frontmatter } = route.data; |
| 126 | + if (frontmatter.navbar === false || themeConfig.navbar === false) { |
| 127 | + return false; |
| 128 | + } |
| 129 | + return siteData.value.title || themeConfig.logo || themeConfig.repo || themeConfig.nav; |
| 130 | + }); |
| 131 | +
|
| 132 | + // sidebar |
| 133 | + const openSideBar = ref(false); |
140 | 134 |
|
141 | | - const { themeConfig } = siteRouteData.value |
142 | | -
|
143 | | - return !isSideBarEmpty( |
144 | | - getSideBarConfig(themeConfig.sidebar, route.data.relativePath) |
145 | | - ) |
146 | | -}) |
147 | | -
|
148 | | -const toggleSidebar = (to?: boolean) => { |
149 | | - openSideBar.value = typeof to === 'boolean' ? to : !openSideBar.value |
150 | | -} |
151 | | -
|
152 | | -const hideSidebar = toggleSidebar.bind(null, false) |
153 | | -// close the sidebar when navigating to a different location |
154 | | -watch(route, hideSidebar) |
155 | | -// TODO: route only changes when the pathname changes |
156 | | -// listening to hashchange does nothing because it's prevented in router |
157 | | -
|
158 | | -// page classes |
159 | | -const pageClasses = computed(() => { |
160 | | - return [ |
161 | | - { |
162 | | - 'no-navbar': !showNavbar.value, |
163 | | - 'sidebar-open': openSideBar.value, |
164 | | - 'no-sidebar': !showSidebar.value |
| 135 | + const showSidebar = computed(() => { |
| 136 | + const { frontmatter } = route.data; |
| 137 | +
|
| 138 | + if (frontmatter.home || frontmatter.sidebar === false) { |
| 139 | + return false; |
165 | 140 | } |
166 | | - ] |
167 | | -}) |
| 141 | +
|
| 142 | + const { themeConfig } = siteRouteData.value; |
| 143 | +
|
| 144 | + return !isSideBarEmpty(getSideBarConfig(themeConfig.sidebar, route.data.relativePath)); |
| 145 | + }); |
| 146 | +
|
| 147 | + const toggleSidebar = (to?: boolean) => { |
| 148 | + openSideBar.value = typeof to === 'boolean' ? to : !openSideBar.value; |
| 149 | + }; |
| 150 | +
|
| 151 | + const hideSidebar = toggleSidebar.bind(null, false); |
| 152 | + // close the sidebar when navigating to a different location |
| 153 | + watch(route, hideSidebar); |
| 154 | + // TODO: route only changes when the pathname changes |
| 155 | + // listening to hashchange does nothing because it's prevented in router |
| 156 | +
|
| 157 | + // page classes |
| 158 | + const pageClasses = computed(() => { |
| 159 | + return [ |
| 160 | + { |
| 161 | + 'no-navbar': !showNavbar.value, |
| 162 | + 'sidebar-open': openSideBar.value, |
| 163 | + 'no-sidebar': !showSidebar.value, |
| 164 | + }, |
| 165 | + ]; |
| 166 | + }); |
168 | 167 | </script> |
169 | 168 |
|
170 | 169 | <style> |
171 | | -#ads-container { |
172 | | - margin: 0 auto; |
173 | | -} |
174 | | -
|
175 | | -@media (min-width: 420px) { |
176 | 170 | #ads-container { |
177 | | - position: relative; |
178 | | - right: 0; |
179 | | - float: right; |
180 | | - margin: -8px -8px 24px 24px; |
181 | | - width: 146px; |
| 171 | + margin: 0 auto; |
182 | 172 | } |
183 | | -} |
184 | 173 |
|
185 | | -@media (max-width: 420px) { |
186 | | - #ads-container { |
187 | | - /* Avoid layout shift */ |
188 | | - height: 105px; |
189 | | - margin: 1.75rem 0; |
| 174 | + @media (min-width: 420px) { |
| 175 | + #ads-container { |
| 176 | + position: relative; |
| 177 | + right: 0; |
| 178 | + float: right; |
| 179 | + margin: -8px -8px 24px 24px; |
| 180 | + width: 146px; |
| 181 | + } |
190 | 182 | } |
191 | | -} |
192 | 183 |
|
193 | | -@media (min-width: 1400px) { |
194 | | - #ads-container { |
195 | | - position: fixed; |
196 | | - right: 8px; |
197 | | - bottom: 8px; |
| 184 | + @media (max-width: 420px) { |
| 185 | + #ads-container { |
| 186 | + /* Avoid layout shift */ |
| 187 | + height: 105px; |
| 188 | + margin: 1.75rem 0; |
| 189 | + } |
| 190 | + } |
| 191 | +
|
| 192 | + @media (min-width: 1400px) { |
| 193 | + #ads-container { |
| 194 | + position: fixed; |
| 195 | + right: 8px; |
| 196 | + bottom: 8px; |
| 197 | + } |
198 | 198 | } |
199 | | -} |
200 | 199 | </style> |
0 commit comments