msb-public
/
vitepress
mirror of https://github.com/vuejs/vitepress
2
1
Code Issues Projects Releases Wiki Activity

refactor: layout component

Browse Source
pull/172/head
Kia King Ishii 4 years ago
parent 1b6981a915
commit 7c83105e51
7 changed files with 131 additions and 137 deletions
Show Stats Download Patch File Download Diff File

2
src/client/app/router.ts
Unescape View File

@ -170,7 +170,7 @@ export function useRoute(): Route {
} }
function scrollTo(el: HTMLElement, hash: string, smooth = false) { function scrollTo(el: HTMLElement, hash: string, smooth = false) {
const pageOffset = (document.querySelector('.navbar') as HTMLElement) const pageOffset = (document.querySelector('.nav-bar') as HTMLElement)
.offsetHeight .offsetHeight
const target = el.classList.contains('.header-anchor') const target = el.classList.contains('.header-anchor')
? el ? el

96
src/client/theme-default/Layout.vue
Unescape View File

@ -1,15 +1,13 @@
<template> <template>
<div class="theme" :class="pageClasses"> <div class="theme" :class="pageClasses">
<header class="navbar" v-if="showNavbar"> <NavBar v-if="showNavbar" @toggle="toggleSidebar">
<NavBar> <template #search>
<template #search> <slot name="navbar-search">
<slot name="navbar-search"> <AlgoliaSearchBox v-if="theme.algolia" :options="theme.algolia" />
<AlgoliaSearchBox v-if="theme.algolia" :options="theme.algolia" /> </slot>
</slot> </template>
</template> </NavBar>
</NavBar>
<ToggleSideBarButton @toggle="toggleSidebar" />
</header>
<SideBar :open="openSideBar"> <SideBar :open="openSideBar">
<template #sidebar-top> <template #sidebar-top>
<slot name="sidebar-top" /> <slot name="sidebar-top" />
@ -20,46 +18,45 @@
</SideBar> </SideBar>
<!-- TODO: make this button accessible --> <!-- TODO: make this button accessible -->
<div class="sidebar-mask" @click="toggleSidebar(false)" /> <div class="sidebar-mask" @click="toggleSidebar(false)" />
<main class="main-home" aria-labelledby="main-title" v-if="enableHome">
<Home> <Home v-if="enableHome">
<template #hero> <template #hero>
<slot name="home-hero" /> <slot name="home-hero" />
</template> </template>
<template #features> <template #features>
<slot name="home-features" /> <slot name="home-features" />
</template> </template>
<template #footer> <template #footer>
<slot name="home-footer" /> <slot name="home-footer" />
</template> </template>
</Home> </Home>
</main>
<main v-else> <Page v-else>
<Page> <template #top>
<template #top> <slot name="page-top-ads">
<slot name="page-top-ads"> <CarbonAds
<CarbonAds v-if="theme.carbonAds"
v-if="theme.carbonAds" :key="'carbon' + page.relativePath"
:key="'carbon' + page.relativePath" :code="theme.carbonAds.carbon"
:code="theme.carbonAds.carbon" :placement="theme.carbonAds.placement"
:placement="theme.carbonAds.placement" />
/> </slot>
</slot> <slot name="page-top" />
<slot name="page-top" /> </template>
</template> <template #bottom>
<template #bottom> <slot name="page-bottom" />
<slot name="page-bottom" /> <slot name="page-bottom-ads">
<slot name="page-bottom-ads"> <BuySellAds
<BuySellAds v-if="theme.carbonAds && theme.carbonAds.custom"
v-if="theme.carbonAds && theme.carbonAds.custom" :key="'custom' + page.relativePath"
:key="'custom' + page.relativePath" :code="theme.carbonAds.custom"
:code="theme.carbonAds.custom" :placement="theme.carbonAds.placement"
:placement="theme.carbonAds.placement" />
/> </slot>
</slot> </template>
</template> </Page>
</Page>
</main>
</div> </div>
<Debug /> <Debug />
</template> </template>
@ -76,7 +73,6 @@ import type { DefaultTheme } from './config'
// components // components
import NavBar from './components/NavBar.vue' import NavBar from './components/NavBar.vue'
import Home from './components/Home.vue' import Home from './components/Home.vue'
import ToggleSideBarButton from './components/ToggleSideBarButton.vue'
import SideBar from './components/SideBar.vue' import SideBar from './components/SideBar.vue'
import Page from './components/Page.vue' import Page from './components/Page.vue'
const CarbonAds = defineAsyncComponent( const CarbonAds = defineAsyncComponent(

20
src/client/theme-default/components/Home.vue
Unescape View File

@ -1,10 +1,12 @@
<template> <template>
<HomeHero /> <main class="home" aria-labelledby="main-title">
<slot name="hero" /> <HomeHero />
<HomeFeatures /> <slot name="hero" />
<slot name="features" /> <HomeFeatures />
<HomeFooter /> <slot name="features" />
<slot name="footer" /> <HomeFooter />
<slot name="footer" />
</main>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -12,3 +14,9 @@ import HomeHero from './HomeHero.vue'
import HomeFeatures from './HomeFeatures.vue' import HomeFeatures from './HomeFeatures.vue'
import HomeFooter from './HomeFooter.vue' import HomeFooter from './HomeFooter.vue'
</script> </script>
<style scoped>
.home {
padding-top: var(--header-height);
}
</style>

41
src/client/theme-default/components/NavBar.vue
Unescape View File

@ -1,21 +1,50 @@
<template> <template>
<NavBarTitle /> <header class="nav-bar">
<ToggleSideBarButton @toggle="$emit('toggle')" />
<div class="flex-grow" /> <NavBarTitle />
<div class="nav"> <div class="flex-grow" />
<NavLinks />
</div>
<slot name="search" /> <div class="nav">
<NavLinks />
</div>
<slot name="search" />
</header>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { defineEmit } from 'vue'
import NavBarTitle from './NavBarTitle.vue' import NavBarTitle from './NavBarTitle.vue'
import NavLinks from './NavLinks.vue' import NavLinks from './NavLinks.vue'
import ToggleSideBarButton from './ToggleSideBarButton.vue'
defineEmit(['toggle'])
</script> </script>
<style scoped> <style scoped>
.nav-bar {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: var(--z-index-navbar);
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--c-divider);
padding: .7rem 1.5rem .7rem 4rem;
height: var(--header-height);
background-color: #ffffff;
}
@media (min-width: 720px) {
.nav-bar {
padding: .7rem 1.5rem;
}
}
.flex-grow { .flex-grow {
flex-grow: 1; flex-grow: 1;
} }

36
src/client/theme-default/components/Page.vue
Unescape View File

@ -1,17 +1,19 @@
<template> <template>
<div class="page"> <main class="page">
<slot name="top" /> <div class="container">
<slot name="top" />
<div class="content"> <div class="content">
<Content /> <Content />
</div> </div>
<PageFooter /> <PageFooter />
<NextAndPrevLinks /> <NextAndPrevLinks />
<slot name="bottom" /> <slot name="bottom" />
</div> </div>
</main>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -21,6 +23,22 @@ import NextAndPrevLinks from './NextAndPrevLinks.vue'
<style scoped> <style scoped>
.page { .page {
padding-top: var(--header-height);
}
@media (min-width: 720px) {
.page {
margin-left: 16.4rem;
}
}
@media (min-width: 960px) {
.page {
margin-left: 20rem;
}
}
.container {
margin: 0 auto; margin: 0 auto;
padding: 0 1.5rem 4rem; padding: 0 1.5rem 4rem;
max-width: 48rem; max-width: 48rem;

2
src/client/theme-default/composables/activeSidebarLink.ts
Unescape View File

@ -81,7 +81,7 @@ function getAnchors(sidebarLinks: HTMLAnchorElement[]): HTMLAnchorElement[] {
} }
function getPageOffset(): number { function getPageOffset(): number {
return (document.querySelector('.navbar') as HTMLElement).offsetHeight return (document.querySelector('.nav-bar') as HTMLElement).offsetHeight
} }
function getAnchorTop(anchor: HTMLAnchorElement): number { function getAnchorTop(anchor: HTMLAnchorElement): number {

71
src/client/theme-default/styles/layout.css
Unescape View File

@ -199,32 +199,6 @@ form {
margin: 0; margin: 0;
} }
.theme {
font-size: 16px;
color: var(--c-text);
}
.theme .navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--header-height);
background-color: #fff;
border-bottom: 1px solid var(--c-divider);
z-index: var(--z-index-navbar);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.7rem 1.5rem;
}
@media screen and (max-width: 719px) {
.theme .navbar {
padding-left: 4rem;
}
}
.theme.sidebar-open .sidebar-mask { .theme.sidebar-open .sidebar-mask {
display: block; display: block;
} }
@ -243,51 +217,20 @@ form {
top: 0; top: 0;
} }
@media screen and (max-width: 959px) {
.theme aside {
width: var(--sidebar-width);
}
}
.sidebar-mask {
z-index: 2;
position: fixed;
width: 100vw;
height: 100vh;
display: none;
}
.theme main {
padding-top: var(--header-height);
}
@media screen and (min-width: 960px) {
.theme main {
padding-left: 20rem;
}
.theme main.main-home {
padding-left: 0;
}
}
@media screen and (min-width: 720px) { @media screen and (min-width: 720px) {
.theme.no-sidebar aside { .theme.no-sidebar aside {
display: none; display: none;
} }
.theme.no-sidebar main { .theme.no-sidebar main {
margin-left: 0; margin-left: 0;
} }
} }
@media screen and (max-width: 959px) { .sidebar-mask {
.theme main { position: fixed;
margin-left: 16.4rem; z-index: 2;
} display: none;
} width: 100vw;
height: 100vh;
@media screen and (max-width: 719px) {
.theme main {
margin-left: 0;
}
} }

Write Preview
Loading…
Cancel
Save