vitepress 0.22.3 → 1.0.0-draft.2

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/VPSponsors.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import VPSponsorsGrid from './VPSponsorsGrid.vue'
+
+interface Sponsors {
+  tier?: string
+  size?: 'small' | 'medium' | 'big'
+  items: Sponsor[]
+}
+
+interface Sponsor {
+  name: string
+  img: string
+  url: string
+}
+
+const props = defineProps<{
+  tier?: string
+  size?: 'small' | 'medium' | 'big'
+  data: Sposors[] | Sponsor[]
+}>()
+
+const sponsors = computed(() => {
+  const isSponsors = props.data.some((s: any) => s.items)
+
+  if (isSponsors) {
+    return props.data
+  }
+
+  return [{
+    tier: props.tier,
+    size: props.size,
+    items: props.data
+  }]
+})
+</script>
+
+<template>
+  <div class="VPSponsors">
+    <section v-for="(sponsor, index) in sponsors" :key="index" class="section">
+      <h3 v-if="sponsor.tier" class="tier">{{ sponsor.tier }}</h3>
+      <VPSponsorsGrid :size="sponsor.size" :data="sponsor.items" />
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.VPSponsors {
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.section + .section {
+  margin-top: 4px;
+}
+
+.tier {
+  margin-bottom: 4px;
+  padding: 13px 0 11px;
+  text-align: center;
+  letter-spacing: 1px;
+  line-height: 24px;
+  width: 100%;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  background-color: var(--vp-c-white-soft);
+}
+
+.dark .tier {
+  background-color: var(--vp-c-black-mute);
+}
+
+.VPSponsorsGrid + .tier {
+  margin-top: 4px;
+}
+</style>

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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useSponsorsGrid } from '../composables/sponsor-grid'
+
+interface Sponsor {
+  name: string
+  img: string
+  url: string
+}
+
+const props = defineProps<{
+  size?: 'small' | 'medium' | 'big'
+  data: Sponsor[]
+}>()
+
+const el = ref(null)
+
+useSponsorsGrid({ el, size: props.size })
+</script>
+
+<template>
+  <div class="VPSponsorsGrid vp-sponsor-grid" :class="[props.size ?? 'medium']" ref="el">
+    <div v-for="sponsor in data" :key="sponsor.tier" class="vp-sponsor-grid-item">
+      <a class="vp-sponsor-grid-link" :href="sponsor.url" target="_blank" rel="sponsored noopener">
+        <article class="vp-sponsor-grid-box">
+          <h4 class="visually-hidden">{{ sponsor.name }}</h4>
+          <img class="vp-sponsor-grid-image" :src="sponsor.img" :alt="sponsor.name" />
+        </article>
+      </a>
+    </div>
+  </div>
+</template>

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>

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

@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import { APPEARANCE_KEY } from '../../shared'
+import VPSwitch from './VPSwitch.vue'
+import VPIconSun from './icons/VPIconSun.vue'
+import VPIconMoon from './icons/VPIconMoon.vue'
+
+const toggle = typeof localStorage !== 'undefined' ? useAppearance() : () => {}
+
+function useAppearance() {
+  const query = window.matchMedia('(prefers-color-scheme: dark)')
+  const classList = document.documentElement.classList
+
+  let userPreference = localStorage.getItem(APPEARANCE_KEY) || 'auto'
+
+  let isDark = userPreference === 'auto'
+    ? query.matches
+    : userPreference === 'dark'
+
+  query.onchange = (e) => {
+    if (userPreference === 'auto') {
+      setClass((isDark = e.matches))
+    }
+  }
+
+  function toggle() {
+    setClass((isDark = !isDark))
+
+    userPreference = isDark
+      ? query.matches ? 'auto' : 'dark'
+      : query.matches ? 'light' : 'auto'
+
+    localStorage.setItem(APPEARANCE_KEY, userPreference)
+  }
+
+  function setClass(dark: boolean): void {
+    classList[dark ? 'add' : 'remove']('dark')
+  }
+
+  return toggle
+}
+</script>
+
+<template>
+  <VPSwitch
+    class="VPSwitchAppearance"
+    aria-label="toggle dark mode"
+    @click="toggle"
+  >
+    <VPIconSun class="sun" />
+    <VPIconMoon class="moon" />
+  </VPSwitch>
+</template>
+
+<style scoped>
+.sun {
+  opacity: 1;
+}
+
+.moon {
+  opacity: 0;
+}
+
+.dark .sun {
+  opacity: 0;
+}
+
+.dark .moon {
+  opacity: 1;
+}
+
+.dark .VPSwitchAppearance :deep(.check) {
+  transform: translateX(18px);
+}
+</style>

package/dist/client/theme-default/components/icons/VPIconAlignJustify.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+    <path d="M21,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,11,21,11z" />
+    <path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z" />
+    <path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z" />
+    <path d="M21,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,19,21,19z" />
+  </svg>
+</template>

package/dist/client/theme-default/components/icons/VPIconAlignLeft.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+    <path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z" />
+    <path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z" />
+    <path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z" />
+    <path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z" />
+  </svg>
+</template>

package/dist/client/theme-default/components/icons/VPIconAlignRight.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+    <path d="M21,11H7c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S21.6,11,21,11z" />
+    <path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z" />
+    <path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z" />
+    <path d="M21,19H7c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S21.6,19,21,19z" />
+  </svg>
+</template>

package/dist/client/theme-default/components/icons/VPIconChevronDown.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+    <path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z" />
+  </svg>
+</template>

package/dist/client/theme-default/components/icons/VPIconChevronLeft.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+    <path d="M15,19c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4l6-6c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4L10.4,12l5.3,5.3c0.4,0.4,0.4,1,0,1.4C15.5,18.9,15.3,19,15,19z" />
+  </svg>
+</template>

package/dist/client/theme-default/components/icons/VPIconChevronRight.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+    <path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z" />
+  </svg>
+</template>

package/dist/client/theme-default/components/icons/VPIconChevronUp.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+    <path d="M18,16c-0.3,0-0.5-0.1-0.7-0.3L12,10.4l-5.3,5.3c-0.4,0.4-1,0.4-1.4,0s-0.4-1,0-1.4l6-6c0.4-0.4,1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4C18.5,15.9,18.3,16,18,16z" />
+  </svg>
+</template>