vitepress 0.22.3 → 1.0.0-draft.2

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

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { useRoute, useData } from 'vitepress'
+import { useSidebar } from '../composables/sidebar'
+import NotFound from '../NotFound.vue'
+import VPPage from './VPPage.vue'
+import VPHome from './VPHome.vue'
+import VPDoc from './VPDoc.vue'
+
+const route = useRoute()
+const { frontmatter } = useData()
+const { hasSidebar } = useSidebar()
+</script>
+
+<template>
+  <div
+    class="VPContent"
+    id="VPContent"
+    :class="{
+      'has-sidebar': hasSidebar,
+      'is-home': frontmatter.layout === 'home'
+    }"
+  >
+    <NotFound v-if="route.component === NotFound" />
+
+    <VPPage v-else-if="frontmatter.layout === 'page'" />
+
+    <VPHome v-else-if="frontmatter.layout === 'home'">
+      <template #home-hero-before><slot name="home-hero-before" /></template>
+      <template #home-hero-after><slot name="home-hero-after" /></template>
+      <template #home-features-before><slot name="home-features-before" /></template>
+      <template #home-features-after><slot name="home-features-after" /></template>
+    </VPHome>
+
+    <VPDoc v-else :class="{ 'has-sidebar': hasSidebar }" />
+  </div>
+</template>
+
+<style scoped>
+.VPContent {
+  flex-grow: 1;
+  margin: 0 auto;
+  max-width: var(--vp-layout-max-width);
+}
+
+.VPContent.is-home {
+  width: 100%;
+  max-width: 100%;
+}
+
+@media (max-width: 768px) {
+  .VPContent {
+    overflow-x: hidden;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPContent {
+    padding-top: var(--vp-nav-height);
+  }
+
+  .VPContent.has-sidebar {
+    margin: 0;
+    padding-left: var(--vp-sidebar-width);
+    max-width: 100%;
+  }
+}
+
+@media (min-width: 1440px) {
+  .VPContent.has-sidebar {
+    padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
+    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width) - 32px);
+  }
+}
+</style>

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

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+import VPDocOutline from './VPDocOutline.vue'
+import VPDocFooter from './VPDocFooter.vue'
+
+const { page } = useData()
+
+const pageName = computed(() => {
+  return page.value.relativePath.slice(0, page.value.relativePath.indexOf('/'))
+})
+</script>
+
+<template>
+  <div class="VPDoc has-aside">
+    <div class="container">
+      <div class="aside">
+        <div class="aside-container">
+          <div class="aside-curtain" />
+          <div class="aside-content">
+            <VPDocOutline v-if="page.headers" />
+          </div>
+        </div>
+      </div>
+
+      <div class="content">
+        <main class="main">
+          <Content class="vp-doc" :class="pageName" />
+        </main>
+
+        <VPDocFooter />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPDoc {
+  padding: 32px 24px 96px;
+}
+
+@media (min-width: 768px) {
+  .VPDoc {
+    padding: 48px 32px 128px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPDoc {
+    padding: 32px 64px 96px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .VPDoc {
+    padding: 32px 0 128px 64px;
+  }
+
+  .VPDoc:not(.has-sidebar.has-aside) {
+    padding-left: calc((100vw - 688px) / 2);
+  }
+
+  .VPDoc.has-aside:not(.has-sidebar) {
+    padding-left: calc((100vw - 688px - 320px) / 2);
+  }
+
+  .VPDoc:not(.has-aside) .content {
+    min-width: 688px;
+  }
+}
+
+@media (min-width: 1440px) {
+  .VPDoc {
+    padding: 32px 0 128px 96px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    display: flex;
+  }
+}
+
+.aside {
+  position: relative;
+  display: none;
+  order: 2;
+  flex-shrink: 0;
+  flex-grow: 1;
+  padding-left: 64px;
+  padding-right: 32px;
+  min-width: 320px;
+}
+
+@media (min-width: 1280px) {
+  .aside {
+    display: block;
+  }
+}
+
+@media (min-width: 1440px) {
+  .aside {
+    padding-left: 96px;
+  }
+}
+
+.aside-container {
+  position: fixed;
+  top: var(--vp-nav-height-desktop);
+  bottom: 0;
+  padding-top: 32px;
+  width: 224px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.aside-container::-webkit-scrollbar {
+  display: none;
+}
+
+@media (min-width: 1440px) {
+  .aside-container {
+    width: 256px;
+  }
+}
+
+.aside-curtain {
+  position: fixed;
+  top: var(--vp-nav-height-desktop);
+  z-index: 10;
+  width: 100%;
+  height: 40px;
+  background: linear-gradient(var(--vp-c-bg-content), transparent);
+}
+
+.aside-content {
+  padding-bottom: 96px;
+}
+
+.content {
+  position: relative;
+  margin: 0 auto;
+  max-width: 688px;
+}
+
+@media (min-width: 1280px) {
+  .content {
+    order: 1;
+    margin: 0;
+    min-width: 632px;
+  }
+}
+
+.edit-link {
+  margin: 0 0 32px;
+}
+
+.edit-link .vt-link {
+  font-size: 14px;
+  color: var(--vt-c-brand);
+  font-weight: 500;
+}
+
+.vt-icon {
+  width: 18px;
+  height: 18px;
+  color: var(--vt-c-brand);
+  display: inline-block;
+  margin-right: 8px;
+  position: relative;
+  top: -1px;
+}
+</style>

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

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { normalizeLink } from '../support/utils'
+import { useEditLink } from '../composables/edit-link'
+import { usePrevNext } from '../composables/prev-next'
+import VPIconEdit from './icons/VPIconEdit.vue'
+import VPLink from './VPLink.vue'
+
+const { theme, frontmatter } = useData()
+
+const editLink = useEditLink()
+const control = usePrevNext()
+</script>
+
+<template>
+  <footer v-if="control.prev || control.next" class="VPDocFooter">
+    <div v-if="theme.editLink && frontmatter.editLink !== false" class="edit-link">
+      <VPLink class="edit-link-button" :href="editLink.url" :no-icon="true">
+        <VPIconEdit class="edit-link-icon" />
+        {{ editLink.text }}
+      </VPLink>
+    </div>
+
+    <div class="prev-next">
+      <div class="pager">
+        <a v-if="control.prev" class="pager-link prev" :href="normalizeLink(control.prev.link)">
+          <span class="desc">Previous page</span>
+          <span class="title">{{ control.prev.text }} </span>
+        </a>
+      </div>
+      <div class="pager" :class="{ 'has-prev': control.prev }">
+        <a v-if="control.next"  class="pager-link next" :href="normalizeLink(control.next.link)">
+          <span class="desc">Next page</span>
+          <span class="title">{{ control.next.text }}</span>
+        </a>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.VPDocFooter {
+  margin-top: 64px;
+}
+
+.edit-link {
+  padding-bottom: 8px;
+}
+
+.edit-link-button {
+  display: flex;
+  align-items: center;
+  border: 0;
+  padding: 10px 0;
+  line-height: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-brand);
+  transition: color 0.25s;
+}
+
+.edit-link-button:hover {
+  color: var(--vp-c-brand-dark);
+}
+
+.edit-link-icon {
+  margin-right: 8px;
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+
+.prev-next {
+  border-top: 1px solid var(--vp-c-divider-light);
+  padding-top: 24px;
+}
+
+@media (min-width: 640px) {
+  .prev-next {
+    display: flex;
+  }
+}
+
+.pager.has-prev {
+  padding-top: 8px;
+}
+
+@media (min-width: 640px) {
+  .pager {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    width: 50%;
+  }
+
+  .pager.has-prev {
+    padding-top: 0;
+    padding-left: 16px;
+  }
+}
+
+.pager-link {
+  display: block;
+  border: 1px solid var(--vp-c-divider-light);
+  border-radius: 8px;
+  padding: 11px 16px 13px;
+  width: 100%;
+  height: 100%;
+  transition: border-color 0.25s;
+}
+
+.pager-link:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.pager-link:hover .title {
+  color: var(--vp-c-brand-dark);
+}
+
+.pager-link.next {
+  margin-left: auto;
+  text-align: right;
+}
+
+.desc {
+  display: block;
+  line-height: 20px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.title {
+  display: block;
+  line-height: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-brand);
+  transition: color 0.25s;
+}
+</style>

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

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useData } from 'vitepress'
+import { resolveHeaders, useActiveAnchor } from '../composables/outline'
+
+const { page, frontmatter } = useData()
+
+const container = ref()
+const marker = ref()
+
+useActiveAnchor(container, marker)
+
+const resolvedHeaders = computed(() => {
+  return resolveHeaders(page.value.headers)
+})
+
+function handleClick({ target: el }: Event) {
+  const id = '#' + (el as HTMLAnchorElement).href!.split('#')[1]
+  const heading = document.querySelector(id) as HTMLAnchorElement
+  heading?.focus()
+}
+</script>
+
+<template>
+  <div class="VPDocOutline" ref="container">
+    <div class="outline-marker" ref="marker" />
+
+    <div class="outline-title">On this page</div>
+
+    <nav aria-labelledby="doc-outline-aria-label">
+      <span class="visually-hidden" id="doc-outline-aria-label">
+        Table of Contents for current page
+      </span>
+
+      <ul class="root">
+        <li
+          v-for="{ text, link, children, hidden } in resolvedHeaders"
+          v-show="!hidden"
+        >
+          <a class="outline-link" :href="link" @click="handleClick">
+            {{ text }}
+          </a>
+          <ul v-if="children && frontmatter.outline === 'deep'">
+            <li v-for="{ text, link, hidden } in children" v-show="!hidden">
+              <a class="outline-link nested" :href="link" @click="handleClick">
+                {{ text }}
+              </a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
+
+<style scoped>
+.VPDocOutline {
+  position: relative;
+  border-left: 1px solid var(--vp-c-divider-light);
+  padding-left: 16px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.outline-marker {
+  position: absolute;
+  top: 32px;
+  left: -1px;
+  z-index: 0;
+  opacity: 0;
+  width: 1px;
+  height: 18px;
+  background-color: var(--vp-c-brand);
+  transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s, opacity 0.25s;
+}
+
+.outline-title {
+  letter-spacing: 0.4px;
+  line-height: 28px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.outline-link {
+  display: block;
+  line-height: 28px;
+  color: var(--vp-c-text-2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.5s;
+}
+
+.outline-link:hover,
+.outline-link.active {
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+.outline-link.nested {
+  padding-left: 13px;
+}
+
+.root {
+  position: relative;
+  z-index: 1;
+}
+</style>

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

@@ -0,0 +1,149 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { DefaultTheme } from 'vitepress'
+import { useFlyout } from '../composables/flyout'
+import VPIconChevronDown from './icons/VPIconChevronDown.vue'
+import VPIconMoreHorizontal from './icons/VPIconMoreHorizontal.vue'
+import VPMenu from './VPMenu.vue'
+
+const props = defineProps<{
+  icon?: any
+  button?: string
+  label?: string
+  items?: any[]
+}>()
+
+const open = ref(false)
+const el = ref<HTMLElement>()
+
+useFlyout({ el, onBlur })
+
+function onBlur() {
+  open.value = false
+}
+</script>
+
+<template>
+  <div
+    class="VPFlyout"
+    ref="el"
+    @mouseenter="open = true"
+    @mouseleave="open = false"
+  >
+    <button
+      type="button"
+      class="button"
+      aria-haspopup="true"
+      :aria-expanded="open"
+      :aria-label="label"
+      @click="open = !open"
+    >
+      <span v-if="button || icon" class="text">
+        <component v-if="icon" :is="icon" class="option-icon" />
+        {{ button }}
+        <VPIconChevronDown class="text-icon" />
+      </span>
+
+      <VPIconMoreHorizontal v-else class="icon" />
+    </button>
+
+    <div class="menu">
+      <VPMenu :items="items">
+        <slot />
+      </VPMenu>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPFlyout {
+  position: relative;
+}
+
+.VPFlyout:hover {
+  color: var(--vp-c-bland);
+  transition: color 0.25s;
+}
+
+.VPFlyout:hover .text {
+  color: var(--vp-c-text-2);
+}
+
+.VPFlyout:hover .icon {
+  fill: var(--vp-c-text-2);
+}
+
+.VPFlyout:hover .menu,
+.button[aria-expanded="true"] + .menu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.button {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  height: var(--vp-nav-height-mobile);
+  color: var(--vp-c-text-1);
+  transition: color 0.5s;
+}
+
+@media (min-width: 960px) {
+  .button {
+    height: var(--vp-nav-height-desktop);
+  }
+}
+
+.text {
+  display: flex;
+  align-items: center;
+  line-height: var(--vp-nav-height-mobile);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+@media (min-width: 960px) {
+  .text {
+    line-height: var(--vp-nav-height-desktop);
+  }
+}
+
+.option-icon {
+  margin-right: 0px;
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+.text-icon {
+  margin-left: 4px;
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+  transition: fill 0.25s;
+}
+
+.menu {
+  position: absolute;
+  top: calc(var(--vp-nav-height-mobile) / 2 + 20px);
+  right: 0;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
+}
+
+@media (min-width: 1280px) {
+  .menu {
+    top: calc(var(--vp-nav-height-desktop) / 2 + 20px);
+  }
+}
+</style>

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

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { useSidebar } from '../composables/sidebar'
+
+const { theme } = useData()
+const { hasSidebar } = useSidebar()
+</script>
+
+<template>
+  <footer v-if="theme.footer" class="VPFooter" :class="{ 'has-sidebar': hasSidebar }">
+    <div class="container">
+      <p class="message">{{ theme.footer.message }}</p>
+      <p class="copyright">{{ theme.footer.copyright }}</p>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.VPFooter {
+  position: relative;
+  z-index: var(--vp-z-index-footer);
+  border-top: 1px solid var(--vp-c-divider-light);
+  padding: 32px 24px;
+  background-color: var(--vp-c-bg-content);
+}
+
+.VPFooter.has-sidebar {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .VPFooter {
+    padding: 32px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: var(--vp-layout-max-width);
+  text-align: center;
+}
+
+.message,
+.copyright {
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.message   { order: 2; }
+.copyright { order: 1; }
+</style>