vitepress 0.22.2 → 1.0.0-draft.1

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

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { inject } from 'vue'
+import VPLink from './VPLink.vue'
+
+defineProps<{
+  text: string
+  link: string
+}>()
+
+const closeScreen = inject('close-screen') as () => void
+</script>
+
+<template>
+  <VPLink class="VPNavScreenMenuGroupLink" :href="link" @click="closeScreen">
+    {{ text }}
+  </VPLink>
+</template>
+
+<style scoped>
+.VPNavScreenMenuGroupLink {
+  display: block;
+  line-height: 32px;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+  margin-left: 12px;
+}
+
+.VPNavScreenMenuGroupLink:hover {
+  color: var(--vp-c-brand);
+}
+</style>

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

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { DefaultTheme } from 'vitepress'
+import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue'
+
+defineProps<{
+  text?: string
+  items: DefaultTheme.NavItemWithLink[]
+}>()
+</script>
+
+<template>
+  <div class="VPNavScreenMenuGroupSection">
+    <p v-if="text" class="title">{{ text }}</p>
+    <VPNavScreenMenuGroupLink
+      v-for="item in items"
+      :key="item.text"
+      :text="item.text"
+      :link="item.link"
+    />
+  </div>
+</template>
+
+<style scoped>
+.VPNavScreenMenuGroupSection {
+  display: block;
+}
+
+.title {
+  line-height: 32px;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--vp-c-text-2);
+  transition: color 0.25s;
+}
+</style>

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

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { inject } from 'vue'
+import VPLink from './VPLink.vue'
+
+defineProps<{
+  text: string
+  link: string
+}>()
+
+const closeScreen = inject('close-screen') as () => void
+</script>
+
+<template>
+  <VPLink class="VPNavScreenMenuLink" :href="link" @click="closeScreen">
+    {{ text }}
+  </VPLink>
+</template>
+
+<style scoped>
+.VPNavScreenMenuLink {
+  display: block;
+  border-bottom: 1px solid var(--vp-c-divider-light);
+  padding: 12px 0 11px;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  transition: border-color 0.5s, color 0.25s;
+}
+
+.VPNavScreenMenuLink:hover {
+  color: var(--vp-c-brand);
+}
+</style>

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

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { useData } from 'vitepress'
+import VPSocialLinks from './VPSocialLinks.vue'
+
+const { theme } = useData()
+</script>
+
+<template>
+  <VPSocialLinks
+    v-if="theme.socialLinks"
+    class="VPNavScreenSocialLinks"
+    :links="theme.socialLinks"
+  />
+</template>

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

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useData } from 'vitepress'
+import VPIconChevronDown from './icons/VPIconChevronDown.vue'
+import VPIconLanguages from './icons/VPIconLanguages.vue'
+
+const { theme } = useData()
+
+const isOpen = ref(false)
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+</script>
+
+<template>
+  <div v-if="theme.localeLinks" class="VPNavScreenTranslations" :class="{ open: isOpen }">
+    <button class="title" @click="toggle">
+      <VPIconLanguages class="icon lang" />
+      {{ theme.localeLinks.text }}
+      <VPIconChevronDown class="icon chevron" />
+    </button>
+
+    <ul class="list">
+      <li v-for="locale in theme.localeLinks.items" :key="locale.link" class="item">
+        <a class="link" :href="locale.link">{{ locale.text }}</a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.VPNavScreenTranslations {
+  height: 24px;
+  overflow: hidden;
+}
+
+.VPNavScreenTranslations.open {
+  height: auto;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+}
+
+.icon {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+.icon.lang {
+  margin-right: 8px;
+}
+
+.icon.chevron {
+  margin-left: 4px;
+}
+
+.list {
+  padding: 4px 0 0 24px;
+}
+
+.link {
+  line-height: 32px;
+  font-size: 13px;
+  color: var(--vp-c-text-1);
+}
+</style>

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

@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import { ref, watchPostEffect, nextTick } from 'vue'
+import { useSidebar } from '../composables/sidebar'
+import VPSidebarGroup from './VPSidebarGroup.vue'
+
+const { sidebar, hasSidebar } = useSidebar()
+
+const props = defineProps<{
+  open: boolean
+}>()
+
+// a11y: focus Nav element when menu has opened
+let navEl = ref<(Element & { focus(): void }) | null>(null)
+
+watchPostEffect(async () => {
+  if (props.open) {
+    await nextTick()
+    navEl.value?.focus()
+  }
+})
+</script>
+
+<template>
+  <aside
+    v-if="hasSidebar"
+    class="VPSidebar"
+    :class="{ open }"
+    ref="navEl"
+    @click.stop
+  >
+    <nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1">
+      <span class="visually-hidden" id="sidebar-aria-label">
+        Sidebar Navigation
+      </span>
+
+      <div v-for="group in sidebar" :key="group.text" class="group">
+        <VPSidebarGroup :text="group.text" :items="group.items" />
+      </div>
+    </nav>
+  </aside>
+</template>
+
+<style scoped>
+.VPSidebar {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--vp-z-index-sidebar);
+  padding: 32px 32px 96px;
+  width: calc(100vw - 64px);
+  max-width: 320px;
+  background-color: var(--vp-c-bg);
+  opacity: 0;
+  box-shadow: var(--vp-c-shadow-3);
+  overflow-x: hidden;
+  overflow-y: auto;
+  transform: translateX(-100%);
+  transition: background-color 0.5s, opacity 0.5s, transform 0.25s ease;
+}
+
+.VPSidebar.open {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(0);
+  transition: background-color 0.5s,
+              opacity 0.25s,
+              transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.dark .VPSidebar {
+  box-shadow: var(--vp-shadow-1);
+}
+
+@media (min-width: 960px) {
+  .VPSidebar {
+    z-index: 1;
+    padding-top: var(--vp-nav-height-desktop);
+    padding-bottom: 128px;
+    width: var(--vp-sidebar-width);
+    max-width: 100%;
+    width: var(--vp-sidebar-width);
+    background-color: var(--vp-c-bg-sidebar);
+    opacity: 1;
+    visibility: visible;
+    box-shadow: none;
+    transform: translateX(0);
+    transition: border-color 0.5s, background-color 0.5s;
+  }
+}
+
+@media (min-width: 1440px) {
+  .VPSidebar {
+    padding-left: calc((100% - var(--vp-layout-max-width)) / 2);
+    width: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width) - 32px);
+  }
+}
+
+.nav {
+  outline: 0;
+}
+
+.group + .group {
+  margin-top: 32px;
+  border-top: 1px solid var(--vp-c-divider-light);
+  padding-top: 8px;
+}
+
+@media (min-width: 960px) {
+  .group {
+    padding-top: 8px;
+  }
+
+  .group + .group {
+    margin-top: 24px;
+  }
+}
+</style>

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

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { useData } from 'vitepress'
+import { DefaultTheme } from '../config'
+import VPSidebarLink from './VPSidebarLink.vue'
+
+const props = defineProps<{
+  text: string
+  items: DefaultTheme.SidebarItem[]
+}>()
+
+const { page } = useData()
+</script>
+
+<template>
+  <section class="VPSidebarGroup">
+    <div class="title">
+      <h2 class="title-text">{{ text }}</h2>
+    </div>
+
+    <template v-for="item in items" :key="item.link">
+      <VPSidebarLink :item="item" />
+    </template>
+  </section>
+</template>
+
+<style scoped>
+.title {
+  padding: 6px 0;
+}
+
+@media (min-width: 960px) {
+  .title {
+    padding: 4px 0;
+  }
+}
+
+.title-text {
+  line-height: 20px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  transition: color 0.5s;
+}
+</style>

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

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import { inject } from 'vue'
+import { useData } from 'vitepress'
+import { DefaultTheme } from '../config'
+import { isActive, normalizeLink } from '../support/utils'
+
+defineProps<{
+  item: DefaultTheme.SidebarItem
+}>()
+
+const { page } = useData()
+
+const closeSideBar = inject('close-sidebar') as () => void
+</script>
+
+<template>
+  <a
+    class="link"
+    :class="{ active: isActive(page.relativePath, item.link) }"
+    :href="normalizeLink(item.link)"
+    @click="closeSideBar"
+  >
+    <p class="link-text">{{ item.text }}</p>
+  </a>
+</template>
+
+<style scoped>
+.link {
+  display: block;
+  padding: 6px 0;
+}
+
+.link:hover .link-text {
+  color: var(--vp-c-brand);
+  transition: color 0.25s;
+}
+
+.link.active .link-text {
+  font-weight: 600;
+  color: var(--vp-c-brand);
+  transition: color 0.25s;
+}
+
+@media (min-width: 960px) {
+  .link {
+    padding: 4px 0;
+  }
+}
+
+.link-text {
+  line-height: 20px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  transition: color 0.5s;
+}
+</style>

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

@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { useRoute } from 'vitepress'
+
+const route = useRoute()
+const backToTop = ref()
+
+watch(() => route.path, () => backToTop.value.focus())
+
+function focusOnTargetAnchor({ target }: Event) {
+  const el = document.querySelector(
+    (target as HTMLAnchorElement).hash!
+  ) as HTMLAnchorElement
+
+  if (el) {
+    const removeTabIndex = () => {
+      el.removeAttribute('tabindex')
+      el.removeEventListener('blur', removeTabIndex)
+    }
+
+    el.setAttribute('tabindex', '-1')
+    el.addEventListener('blur', removeTabIndex)
+    el.focus()
+    window.scrollTo(0, 0)
+  }
+}
+</script>
+
+<template>
+  <span ref="backToTop" tabindex="-1" />
+  <a
+    href="#VPContent"
+    class="VPSkipLink visually-hidden"
+    @click="focusOnTargetAnchor"
+  >
+    Skip to content
+  </a>
+</template>
+
+<style scoped>
+.VPSkipLink {
+  top: 8px;
+  left: 8px;
+  padding: 8px 16px;
+  z-index: 999;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: bold;
+  text-decoration: none;
+  color: var(--vp-c-brand);
+  box-shadow: var(--vp-shadow-3);
+  background-color: var(--vp-c-bg);
+}
+
+.VPSkipLink:focus {
+  height: auto;
+  width: auto;
+  clip: auto;
+  clip-path: none;
+}
+
+.dark .VPSkipLink {
+  color: var(--vp-c-green);
+}
+
+@media (min-width: 1280px) {
+  .VPSkipLink {
+    top: 14px;
+    left: 16px;
+  }
+}
+</style>

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

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { DefaultTheme } from 'vitepress'
+import VPIconDiscord from './icons/VPIconDiscord.vue'
+import VPIconFacebook from './icons/VPIconFacebook.vue'
+import VPIconGitHub from './icons/VPIconGitHub.vue'
+import VPIconLinkedIn from './icons/VPIconLinkedIn.vue'
+import VPIconInstagram from './icons/VPIconInstagram.vue'
+import VPIconSlack from './icons/VPIconSlack.vue'
+import VPIconTwitter from './icons/VPIconTwitter.vue'
+import VPIconYouTube from './icons/VPIconYouTube.vue'
+
+const props = defineProps<{
+  icon: DefaultTheme.SocialLinkIcon
+  link: string
+}>()
+
+const icons = {
+  discord: VPIconDiscord,
+  facebook: VPIconFacebook,
+  github: VPIconGitHub,
+  instagram: VPIconInstagram,
+  linkedin: VPIconLinkedIn,
+  slack: VPIconSlack,
+  twitter: VPIconTwitter,
+  youtube: VPIconYouTube
+}
+</script>
+
+<template>
+  <a
+    class="VPSocialLink"
+    :href="link"
+    :title="icon"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    <component :is="icons[icon]" class="icon" />
+    <span class="visually-hidden">{{ icon }}</span>
+  </a>
+</template>
+
+<style scoped>
+.VPSocialLink {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 36px;
+  height: 36px;
+  color: var(--vp-c-text-2);
+  transition: color .5s;
+}
+
+.VPSocialLink:hover {
+  color: var(--vp-c-text-1);
+  transition: color .25s;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+}
+</style>

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

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { DefaultTheme } from 'vitepress'
+import VPSocialLink from './VPSocialLink.vue'
+
+defineProps<{
+  links: DefaultTheme.SocialLink[]
+}>()
+</script>
+
+<template>
+  <div class="VPSocialLinks">
+    <VPSocialLink
+      v-for="{ link, icon } in links"
+      :key="link"
+      :icon="icon"
+      :link="link"
+    />
+  </div>
+</template>
+
+<style scoped>
+.VPSocialLinks {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+</style>

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

@@ -0,0 +1,66 @@
+<template>
+  <button class="VPSwitch" type="button" role="switch">
+    <span class="check">
+      <span class="icon" v-if="$slots.default">
+        <slot />
+      </span>
+    </span>
+  </button>
+</template>
+
+<style scoped>
+.VPSwitch {
+  position: relative;
+  border-radius: 11px;
+  display: block;
+  width: 40px;
+  height: 22px;
+  flex-shrink: 0;
+  border: 1px solid var(--vp-c-divider);
+  background-color: var(--vp-c-bg-mute);
+  transition: border-color 0.25s, background-color 0.25s;
+}
+
+.VPSwitch:hover {
+  border-color: var(--vp-c-gray);
+}
+
+.check {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: var(--vp-c-white);
+  box-shadow: var(--vp-shadow-1);
+  transition: background-color 0.25s, transform 0.25s;
+}
+
+.dark .check {
+  background-color: var(--vp-c-black);
+}
+
+.icon {
+  position: relative;
+  display: block;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.icon :deep(svg) {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 12px;
+  height: 12px;
+  fill: var(--vp-c-text-2);
+}
+
+.dark .icon :deep(svg) {
+  fill: var(--vp-c-text-1);
+  transition: opacity 0.25s;
+}
+</style>