vitepress 0.22.2 → 1.0.0-draft.1

package/dist/client/theme-default/components/VPNavBarSearch.vue

@@ -0,0 +1,269 @@
+<script lang="ts" setup>
+import '@docsearch/css'
+import { useData } from 'vitepress'
+import { defineAsyncComponent, ref, onMounted, onUnmounted } from 'vue'
+
+const VPAlgoliaSearchBox = defineAsyncComponent(
+  () => import('./VPAlgoliaSearchBox.vue')
+)
+
+const { theme } = useData()
+
+// to avoid loading the docsearch js upfront (which is more than 1/3 of the
+// payload), we delay initializing it until the user has actually clicked or
+// hit the hotkey to invoke it.
+const loaded = ref(false)
+
+const metaKey = ref()
+
+onMounted(() => {
+  if (!theme.value.algolia) {
+    return
+  }
+
+  // meta key detect (same logic as in @docsearch/js)
+  metaKey.value.textContent = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)
+    ? '⌘'
+    : 'Ctrl'
+
+  const handleSearchHotKey = (e: KeyboardEvent) => {
+    if (e.key === 'k' && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault()
+      load()
+      remove()
+    }
+  }
+
+  const remove = () => {
+    window.removeEventListener('keydown', handleSearchHotKey)
+  }
+
+  window.addEventListener('keydown', handleSearchHotKey)
+
+  onUnmounted(remove)
+})
+
+function load() {
+  if (!loaded.value) {
+    loaded.value = true
+  }
+}
+</script>
+
+<template>
+  <div v-if="theme.algolia" class="VPNavBarSearch">
+    <VPAlgoliaSearchBox v-if="loaded" />
+
+    <div v-else id="docsearch" @click="load">
+      <button
+        type="button"
+        class="DocSearch DocSearch-Button"
+        aria-label="Search"
+      >
+        <span class="DocSearch-Button-Container">
+          <svg
+            class="DocSearch-Search-Icon"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+          >
+            <path
+              d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+              stroke="currentColor"
+              fill="none"
+              fill-rule="evenodd"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          <span class="DocSearch-Button-Placeholder">Search</span>
+        </span>
+        <span class="DocSearch-Button-Keys">
+          <span class="DocSearch-Button-Key" ref="metaKey">Meta</span>
+          <span class="DocSearch-Button-Key">K</span>
+        </span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style>
+.VPNavBarSearch {
+  display: flex;
+  align-items: center;
+}
+
+@media (min-width: 768px) {
+  .VPNavBarSearch {
+    flex-grow: 1;
+    padding-left: 24px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPNavBarSearch {
+    padding-left: 32px;
+  }
+}
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand);
+  --docsearch-highlight-color: var(--docsearch-primary-color);
+  --docsearch-text-color: var(--vp-c-text-1);
+  --docsearch-muted-color: var(--vp-c-text-2);
+  --docsearch-searchbox-shadow: none;
+  --docsearch-searchbox-focus-background: transparent;
+  --docsearch-key-gradient: transparent;
+  --docsearch-key-shadow: none;
+  --docsearch-modal-background: var(--vp-c-bg-soft);
+  --docsearch-footer-background: var(--vp-c-bg);
+}
+
+.dark .DocSearch {
+  --docsearch-modal-shadow: none;
+  --docsearch-footer-shadow: none;
+  --docsearch-logo-color: var(--vp-c-text-2);
+  --docsearch-hit-background: var(--vp-c-bg-mute);
+  --docsearch-hit-color: var(--vp-c-text-2);
+  --docsearch-hit-shadow: none;
+}
+
+.DocSearch-Button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  width: 32px;
+  height: 55px;
+  background: transparent;
+  transition: border-color 0.25s;
+}
+
+.DocSearch-Button:hover {
+  background: transparent;
+}
+
+.DocSearch-Button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.DocSearch-Button:focus:not(:focus-visible) {
+  outline: none !important;
+}
+
+@media (min-width: 768px) {
+  .DocSearch-Button {
+    justify-content: flex-start;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    padding: 0 10px 0 12px;
+    width: 100%;
+    height: 40px;
+    background-color: var(--vp-c-bg-sidebar);
+  }
+
+  .DocSearch-Button:hover {
+    border-color: var(--vp-c-brand);
+    background: var(--vp-c-bg-sidebar);
+  }
+}
+
+.DocSearch-Button .DocSearch-Button-Container {
+  display: flex;
+  align-items: center;
+}
+
+.DocSearch-Button .DocSearch-Search-Icon {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  color: var(--vp-c-text-1);
+  fill: currentColor;
+  transition: color 0.5s;
+}
+
+.DocSearch-Button:hover .DocSearch-Search-Icon {
+  color: var(--vp-c-text-1);
+}
+
+@media (min-width: 768px) {
+  .DocSearch-Button .DocSearch-Search-Icon {
+    top: 1px;
+    margin-right: 8px;
+    width: 14px;
+    height: 14px;
+    color: var(--vp-c-text-2);
+  }
+}
+
+.DocSearch-Button .DocSearch-Button-Placeholder {
+  display: none;
+  margin-top: 2px;
+  padding: 0 16px 0 0;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  transition: color 0.5s;
+}
+
+.DocSearch-Button:hover .DocSearch-Button-Placeholder {
+  color: var(--vp-c-text-1);
+}
+
+@media (min-width: 768px) {
+  .DocSearch-Button .DocSearch-Button-Placeholder {
+    display: inline-block;
+  }
+}
+
+.DocSearch-Button .DocSearch-Button-Keys {
+  display: none;
+  min-width: auto;
+}
+
+@media (min-width: 768px) {
+  .DocSearch-Button .DocSearch-Button-Keys {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.DocSearch-Button .DocSearch-Button-Key {
+  display: block;
+  margin: 2px 0 0 0;
+  border: 1px solid var(--vp-c-divider);
+  border-right: none;
+  border-radius: 4px 0 0 4px;
+  padding-left: 6px;
+  min-width: 0;
+  width: auto;
+  height: 22px;
+  line-height: 22px;
+  font-size: 12px;
+  font-weight: 500;
+  transition: color 0.5s, border-color 0.5s;
+}
+
+.DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
+  border-right: 1px solid var(--vp-c-divider);
+  border-left: none;
+  border-radius: 0 4px 4px 0;
+  padding-left: 2px;
+  padding-right: 6px;
+}
+
+.dark .DocSearch-Footer {
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.DocSearch-Form {
+  border: 1px solid var(--vp-c-brand);
+  background-color: var(--vp-c-white);
+}
+
+.dark .DocSearch-Form {
+  background-color: var(--vp-c-bg-mute);
+}
+</style>

package/dist/client/theme-default/components/VPNavBarSocialLinks.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { useData } from 'vitepress'
+import VPSocialLinks from './VPSocialLinks.vue'
+
+const { theme } = useData()
+</script>
+
+<template>
+  <VPSocialLinks
+    v-if="theme.socialLinks"
+    class="VPNavBarSocialLinks"
+    :links="theme.socialLinks"
+  />
+</template>
+
+<style scoped>
+.VPNavBarSocialLinks {
+  display: none;
+}
+
+@media (min-width: 1280px) {
+  .VPNavBarSocialLinks {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

package/dist/client/theme-default/components/VPNavBarTitle.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+
+const { site, theme } = useData()
+</script>
+
+<template>
+  <a class="VPNavBarTitle" href="/">
+    <img v-if="theme.logo" class="logo" :src="theme.logo" :alt="site.title">
+    {{ site.title }}
+  </a>
+</template>
+
+<style scoped>
+.VPNavBarTitle {
+  display: flex;
+  align-items: center;
+  height: var(--vp-nav-height-mobile);
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  transition: background-color 0.5s, opacity 0.25s;
+}
+
+.VPNavBarTitle:hover {
+  opacity: 0.6;
+}
+
+@media (min-width: 960px) {
+  .VPNavBarTitle {
+    flex-shrink: 0;
+    margin-right: 32px;
+    border-bottom: 1px solid var(--vp-c-divider-light);
+    width: calc(var(--vp-sidebar-width) - 64px);
+    height: var(--vp-nav-height-desktop);
+    background-color: var(--vp-c-bg-sidebar);
+  }
+}
+
+.logo {
+  margin-right: 8px;
+  height: 24px;
+}
+</style>

package/dist/client/theme-default/components/VPNavBarTranslations.vue

@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useData } from 'vitepress'
+import VPIconLanguages from './icons/VPIconLanguages.vue'
+import VPFlyout from './VPFlyout.vue'
+
+const { theme } = useData()
+
+const isOpen = ref(false)
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+</script>
+
+<template>
+  <VPFlyout
+    v-if="theme.localeLinks"
+    class="VPNavBarTranslations"
+    :icon="VPIconLanguages"
+  >
+    <div class="container">
+      <p class="title">
+        {{ theme.localeLinks.text }}
+      </p>
+
+      <ul class="list">
+        <li v-for="locale in theme.localeLinks.items" :key="locale.link" class="lang">
+          <a class="link" :href="locale.link">{{ locale.text }}</a>
+        </li>
+      </ul>
+    </div>
+  </VPFlyout>
+</template>
+
+<style scoped>
+.VPNavBarTranslations {
+  display: none;
+}
+
+@media (min-width: 1280px) {
+  .VPNavBarTranslations {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.container {
+  padding: 0 16px;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.lang {
+  padding: 4px 0 0 0;
+}
+
+.link {
+  line-height: 28px;
+  font-size: 13px;
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+.link:hover {
+  color: var(--vp-c-brand);
+}
+</style>

package/dist/client/theme-default/components/VPNavScreen.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
+import VPNavScreenMenu from './VPNavScreenMenu.vue'
+import VPNavScreenAppearance from './VPNavScreenAppearance.vue'
+import VPNavScreenTranslations from './VPNavScreenTranslations.vue'
+import VPNavScreenSocialLinks from './VPNavScreenSocialLinks.vue'
+
+defineProps<{
+  open: boolean
+}>()
+
+const screen = ref<HTMLElement | null>(null)
+
+function lockBodyScroll() {
+  disableBodyScroll(screen.value!, { reserveScrollBarGap: true })
+}
+
+function unlockBodyScroll() {
+  clearAllBodyScrollLocks()
+}
+</script>
+
+<template>
+  <transition
+    name="fade"
+    @enter="lockBodyScroll"
+    @after-leave="unlockBodyScroll"
+  >
+    <div v-if="open" class="VPNavScreen" ref="screen">
+      <div class="container">
+        <VPNavScreenMenu class="menu" />
+        <VPNavScreenTranslations class="translations" />
+        <VPNavScreenAppearance class="appearance" />
+        <VPNavScreenSocialLinks class="social-links" />
+      </div>
+    </div>
+  </transition>
+</template>
+
+<style scoped>
+.VPNavScreen {
+  position: fixed;
+  top: var(--vp-nav-height-mobile);
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 0 32px;
+  width: 100%;
+  background-color: var(--vp-c-bg);
+  overflow-y: auto;
+  transition: background-color 0.5s;
+}
+
+.VPNavScreen.fade-enter-active,
+.VPNavScreen.fade-leave-active {
+  transition: opacity 0.25s;
+}
+
+.VPNavScreen.fade-enter-active .container,
+.VPNavScreen.fade-leave-active .container {
+  transition: transform 0.25s ease;
+}
+
+.VPNavScreen.fade-enter-from,
+.VPNavScreen.fade-leave-to {
+  opacity: 0;
+}
+
+.VPNavScreen.fade-enter-from .container,
+.VPNavScreen.fade-leave-to .container {
+  transform: translateY(-8px);
+}
+
+@media (min-width: 768px) {
+  .VPNavScreen {
+    display: none;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  padding: 24px 0 96px;
+  max-width: 288px;
+}
+
+.menu + .translations,
+.menu + .appearance,
+.translations + .appearance {
+  margin-top: 24px;
+}
+
+.menu + .social-links {
+  margin-top: 16px;
+}
+
+.appearance + .social-links {
+  margin-top: 16px;
+}
+</style>

package/dist/client/theme-default/components/VPNavScreenAppearance.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import VPSwitchAppearance from './VPSwitchAppearance.vue'
+</script>
+
+<template>
+  <div class="VPNavScreenAppearance">
+    <p class="text">Appearance</p>
+    <VPSwitchAppearance />
+  </div>
+</template>
+
+<style scoped>
+.VPNavScreenAppearance {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 8px;
+  padding: 12px 14px 12px 16px;
+  background-color: var(--vp-c-bg-soft);
+  transition: background-color 0.5s;
+}
+
+.text {
+  line-height: 24px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  transition: color 0.5s;
+}
+</style>

package/dist/client/theme-default/components/VPNavScreenMenu.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { useData } from 'vitepress'
+import VPNavScreenMenuLink from './VPNavScreenMenuLink.vue'
+import VPNavScreenMenuGroup from './VPNavScreenMenuGroup.vue'
+
+const { theme } = useData()
+</script>
+
+<template>
+  <nav v-if="theme.nav" class="VPNavScreenMenu">
+    <template v-for="item in theme.nav" :key="item.text">
+      <VPNavScreenMenuLink
+        v-if="'link' in item"
+        :text="item.text"
+        :link="item.link"
+      />
+      <VPNavScreenMenuGroup
+        v-else
+        :text="item.text || ''"
+        :items="item.items"
+      />
+    </template>
+  </nav>
+</template>

package/dist/client/theme-default/components/VPNavScreenMenuGroup.vue

@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { DefaultTheme } from 'vitepress'
+import VPIconPlus from './icons/VPIconPlus.vue'
+import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue'
+import VPNavScreenMenuGroupSection from './VPNavScreenMenuGroupSection.vue'
+
+const props = defineProps<{
+  text: string
+  items: DefaultTheme.NavItemChild[]
+}>()
+
+const isOpen = ref(false)
+
+const groupId = computed(() =>
+  `NavScreenGroup-${props.text.replace(' ', '-').toLowerCase()}`
+)
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+</script>
+
+<template>
+  <div class="VPNavScreenMenuGroup" :class="{ open: isOpen }">
+    <button
+      class="button"
+      :aria-controls="groupId"
+      :aria-expanded="isOpen"
+      @click="toggle"
+    >
+      <span class="button-text">{{ text }}</span>
+      <VPIconPlus class="button-icon" />
+    </button>
+
+    <div :id="groupId" class="items">
+      <template v-for="item in items" :key="item.text">
+        <div v-if="'link' in item" :key="item.text" class="item">
+          <VPNavScreenMenuGroupLink
+            :text="item.text"
+            :link="item.link"
+          />
+        </div>
+
+        <div v-else class="group">
+          <VPNavScreenMenuGroupSection
+            :text="item.text"
+            :items="item.items"
+          />
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPNavScreenMenuGroup {
+  border-bottom: 1px solid var(--vp-c-divider-light);
+  height: 48px;
+  overflow: hidden;
+  transition: border-color 0.5s;
+}
+
+.VPNavScreenMenuGroup .items {
+  visibility: hidden;
+}
+
+.VPNavScreenMenuGroup.open .items {
+  visibility: visible;
+}
+
+.VPNavScreenMenuGroup.open {
+  padding-bottom: 10px;
+  height: auto;
+}
+
+.VPNavScreenMenuGroup.open .button {
+  padding-bottom: 6px;
+  color: var(--vp-c-brand);
+}
+
+.VPNavScreenMenuGroup.open .button-icon {
+  transform: rotate(45deg);
+}
+
+.button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 4px 11px 0;
+  width: 100%;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+.button:hover {
+  color: var(--vp-c-brand);
+}
+
+.button-icon {
+  width: 14px;
+  height: 14px;
+  fill: var(--vp-c-text-2);
+  transition: fill 0.5s, transform 0.25s;
+}
+
+.group:first-child {
+  padding-top: 0px;
+}
+
+.group + .group,
+.group + .item {
+  padding-top: 4px;
+}
+</style>