Skip to content

Commit d87151b

Browse files
committed
tmp: add existing vitepress template comonents...
for reference while implementing custom 'index' template
1 parent 2d66950 commit d87151b

File tree

132 files changed

+10349
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

132 files changed

+10349
-0
lines changed
Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<script setup lang="ts">
2+
import { computed, provide, useSlots } from 'vue'
3+
import VPBackdrop from './components/VPBackdrop.vue'
4+
import VPContent from './components/VPContent.vue'
5+
import VPFooter from './components/VPFooter.vue'
6+
import VPLocalNav from './components/VPLocalNav.vue'
7+
import VPNav from './components/VPNav.vue'
8+
import VPSidebar from './components/VPSidebar.vue'
9+
import VPSkipLink from './components/VPSkipLink.vue'
10+
import { useData } from './composables/data'
11+
import { layoutInfoInjectionKey, registerWatchers } from './composables/layout'
12+
import { useSidebarControl } from './composables/sidebar'
13+
14+
const {
15+
isOpen: isSidebarOpen,
16+
open: openSidebar,
17+
close: closeSidebar
18+
} = useSidebarControl()
19+
20+
registerWatchers({ closeSidebar })
21+
22+
const { frontmatter } = useData()
23+
24+
const slots = useSlots()
25+
const heroImageSlotExists = computed(() => !!slots['home-hero-image'])
26+
27+
provide(layoutInfoInjectionKey, { heroImageSlotExists })
28+
</script>
29+
30+
<template>
31+
<div
32+
v-if="frontmatter.layout !== false"
33+
class="Layout"
34+
:class="frontmatter.pageClass"
35+
>
36+
<slot name="layout-top" />
37+
<VPSkipLink />
38+
<VPBackdrop class="backdrop" :show="isSidebarOpen" @click="closeSidebar" />
39+
<VPNav>
40+
<template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
41+
<template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
42+
<template #nav-bar-content-before><slot name="nav-bar-content-before" /></template>
43+
<template #nav-bar-content-after><slot name="nav-bar-content-after" /></template>
44+
<template #nav-screen-content-before><slot name="nav-screen-content-before" /></template>
45+
<template #nav-screen-content-after><slot name="nav-screen-content-after" /></template>
46+
</VPNav>
47+
<VPLocalNav :open="isSidebarOpen" @open-menu="openSidebar" />
48+
49+
<VPSidebar :open="isSidebarOpen">
50+
<template #sidebar-nav-before><slot name="sidebar-nav-before" /></template>
51+
<template #sidebar-nav-after><slot name="sidebar-nav-after" /></template>
52+
</VPSidebar>
53+
54+
<VPContent>
55+
<template #page-top><slot name="page-top" /></template>
56+
<template #page-bottom><slot name="page-bottom" /></template>
57+
58+
<template #not-found><slot name="not-found" /></template>
59+
<template #home-hero-before><slot name="home-hero-before" /></template>
60+
<template #home-hero-info-before><slot name="home-hero-info-before" /></template>
61+
<template #home-hero-info><slot name="home-hero-info" /></template>
62+
<template #home-hero-info-after><slot name="home-hero-info-after" /></template>
63+
<template #home-hero-actions-after><slot name="home-hero-actions-after" /></template>
64+
<template #home-hero-image><slot name="home-hero-image" /></template>
65+
<template #home-hero-after><slot name="home-hero-after" /></template>
66+
<template #home-features-before><slot name="home-features-before" /></template>
67+
<template #home-features-after><slot name="home-features-after" /></template>
68+
69+
<template #doc-footer-before><slot name="doc-footer-before" /></template>
70+
<template #doc-before><slot name="doc-before" /></template>
71+
<template #doc-after><slot name="doc-after" /></template>
72+
<template #doc-top><slot name="doc-top" /></template>
73+
<template #doc-bottom><slot name="doc-bottom" /></template>
74+
75+
<template #aside-top><slot name="aside-top" /></template>
76+
<template #aside-bottom><slot name="aside-bottom" /></template>
77+
<template #aside-outline-before><slot name="aside-outline-before" /></template>
78+
<template #aside-outline-after><slot name="aside-outline-after" /></template>
79+
<template #aside-ads-before><slot name="aside-ads-before" /></template>
80+
<template #aside-ads-after><slot name="aside-ads-after" /></template>
81+
</VPContent>
82+
83+
<VPFooter />
84+
<slot name="layout-bottom" />
85+
</div>
86+
<Content v-else />
87+
</template>
88+
89+
<style scoped>
90+
.Layout {
91+
display: flex;
92+
flex-direction: column;
93+
min-height: 100vh;
94+
}
95+
</style>
Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<script setup lang="ts">
2+
import { withBase } from 'vitepress'
3+
import { useData } from './composables/data'
4+
import { useLangs } from './composables/langs'
5+
6+
const { theme } = useData()
7+
const { currentLang } = useLangs()
8+
</script>
9+
10+
<template>
11+
<div class="NotFound">
12+
<p class="code">{{ theme.notFound?.code ?? '404' }}</p>
13+
<h1 class="title">{{ theme.notFound?.title ?? 'PAGE NOT FOUND' }}</h1>
14+
<div class="divider" />
15+
<blockquote class="quote">
16+
{{
17+
theme.notFound?.quote ??
18+
"But if you don't change your direction, and if you keep looking, you may end up where you are heading."
19+
}}
20+
</blockquote>
21+
22+
<div class="action">
23+
<a
24+
class="link"
25+
:href="withBase(theme.notFound?.link ?? currentLang.link)"
26+
:aria-label="theme.notFound?.linkLabel ?? 'go to home'"
27+
>
28+
{{ theme.notFound?.linkText ?? 'Take me home' }}
29+
</a>
30+
</div>
31+
</div>
32+
</template>
33+
34+
<style scoped>
35+
.NotFound {
36+
padding: 64px 24px 96px;
37+
text-align: center;
38+
}
39+
40+
@media (min-width: 768px) {
41+
.NotFound {
42+
padding: 96px 32px 168px;
43+
}
44+
}
45+
46+
.code {
47+
line-height: 64px;
48+
font-size: 64px;
49+
font-weight: 600;
50+
}
51+
52+
.title {
53+
padding-top: 12px;
54+
letter-spacing: 2px;
55+
line-height: 20px;
56+
font-size: 20px;
57+
font-weight: 700;
58+
}
59+
60+
.divider {
61+
margin: 24px auto 18px;
62+
width: 64px;
63+
height: 1px;
64+
background-color: var(--vp-c-divider);
65+
}
66+
67+
.quote {
68+
margin: 0 auto;
69+
max-width: 256px;
70+
font-size: 14px;
71+
font-weight: 500;
72+
color: var(--vp-c-text-2);
73+
}
74+
75+
.action {
76+
padding-top: 20px;
77+
}
78+
79+
.link {
80+
display: inline-block;
81+
border: 1px solid var(--vp-c-brand-1);
82+
border-radius: 16px;
83+
padding: 3px 16px;
84+
font-size: 14px;
85+
font-weight: 500;
86+
color: var(--vp-c-brand-1);
87+
transition:
88+
border-color 0.25s,
89+
color 0.25s;
90+
}
91+
92+
.link:hover {
93+
border-color: var(--vp-c-brand-2);
94+
color: var(--vp-c-brand-2);
95+
}
96+
</style>
Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<script setup lang="ts">
2+
import docsearch from '@docsearch/js'
3+
import { useRouter } from 'vitepress'
4+
import type { DefaultTheme } from 'vitepress/theme'
5+
import { nextTick, onMounted, watch } from 'vue'
6+
import { useData } from '../composables/data'
7+
8+
const props = defineProps<{
9+
algolia: DefaultTheme.AlgoliaSearchOptions
10+
}>()
11+
12+
const router = useRouter()
13+
const { site, localeIndex, lang } = useData()
14+
15+
onMounted(update)
16+
watch(localeIndex, update)
17+
18+
async function update() {
19+
await nextTick()
20+
const options = {
21+
...props.algolia,
22+
...props.algolia.locales?.[localeIndex.value]
23+
}
24+
const rawFacetFilters = options.searchParameters?.facetFilters ?? []
25+
const facetFilters = [
26+
...(Array.isArray(rawFacetFilters)
27+
? rawFacetFilters
28+
: [rawFacetFilters]
29+
).filter((f) => !f.startsWith('lang:')),
30+
`lang:${lang.value}`
31+
]
32+
33+
// Rebuild the askAi prop as an object:
34+
// If the askAi prop is a string, treat it as the assistantId and use
35+
// the default indexName, apiKey and appId from the main options.
36+
// If the askAi prop is an object, spread its explicit values.
37+
const askAiProp = options.askAi
38+
const isAskAiString = typeof askAiProp === 'string'
39+
40+
const askAi = askAiProp
41+
? {
42+
indexName: isAskAiString ? options.indexName : askAiProp.indexName,
43+
apiKey: isAskAiString ? options.apiKey : askAiProp.apiKey,
44+
appId: isAskAiString ? options.appId : askAiProp.appId,
45+
assistantId: isAskAiString ? askAiProp : askAiProp.assistantId,
46+
// Re-use the merged facetFilters from the search parameters so that
47+
// Ask AI uses the same language filtering as the regular search.
48+
searchParameters: facetFilters.length ? { facetFilters } : undefined
49+
}
50+
: undefined
51+
52+
initialize({
53+
...options,
54+
searchParameters: {
55+
...options.searchParameters,
56+
facetFilters
57+
},
58+
askAi
59+
})
60+
}
61+
62+
function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
63+
const options = Object.assign({}, userOptions, {
64+
container: '#docsearch',
65+
66+
navigator: {
67+
navigate(item: { itemUrl: string }) {
68+
router.go(item.itemUrl)
69+
}
70+
},
71+
72+
transformItems(items: { url: string }[]) {
73+
return items.map((item) => {
74+
return Object.assign({}, item, {
75+
url: getRelativePath(item.url)
76+
})
77+
})
78+
}
79+
})
80+
81+
docsearch(options as any)
82+
}
83+
84+
function getRelativePath(url: string) {
85+
const { pathname, hash } = new URL(url, location.origin)
86+
return pathname.replace(/\.html$/, site.value.cleanUrls ? '' : '.html') + hash
87+
}
88+
</script>
89+
90+
<template>
91+
<div id="docsearch" />
92+
</template>
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<script lang="ts" setup>
2+
defineProps<{
3+
show: boolean
4+
}>()
5+
</script>
6+
7+
<template>
8+
<transition name="fade">
9+
<div v-if="show" class="VPBackdrop" />
10+
</transition>
11+
</template>
12+
13+
<style scoped>
14+
.VPBackdrop {
15+
position: fixed;
16+
top: 0;
17+
/*rtl:ignore*/
18+
right: 0;
19+
bottom: 0;
20+
/*rtl:ignore*/
21+
left: 0;
22+
z-index: var(--vp-z-index-backdrop);
23+
background: var(--vp-backdrop-bg-color);
24+
transition: opacity 0.5s;
25+
}
26+
27+
.VPBackdrop.fade-enter-from,
28+
.VPBackdrop.fade-leave-to {
29+
opacity: 0;
30+
}
31+
32+
.VPBackdrop.fade-leave-active {
33+
transition-duration: .25s;
34+
}
35+
36+
@media (min-width: 1280px) {
37+
.VPBackdrop {
38+
display: none;
39+
}
40+
}
41+
</style>

0 commit comments

Comments
 (0)