vitepress 1.0.0-alpha.2 → 1.0.0-alpha.3

package/dist/client/app/data.js

@@ -1,17 +1,15 @@
 import { shallowRef, readonly, computed, inject } from 'vue';
-import serializedSiteData from '@siteData';
+import siteData from '@siteData';
 import { resolveSiteDataByRoute, createTitle } from '../shared';
 import { withBase } from './utils';
 export const dataSymbol = Symbol();
-export const siteDataRef = shallowRef(parse(serializedSiteData));
-function parse(data) {
-    const parsed = JSON.parse(data);
-    return (import.meta.env.DEV ? readonly(parsed) : parsed);
-}
+export const siteDataRef = shallowRef(import.meta.env.PROD ? siteData : readonly(siteData));
 // hmr
 if (import.meta.hot) {
     import.meta.hot.accept('/@siteData', (m) => {
-        siteDataRef.value = parse(m.default);
+        if (m) {
+            siteDataRef.value = m.default;
+        }
     });
 }
 // per-app data

package/dist/client/theme-default/Layout.vue

@@ -22,6 +22,7 @@ provide('close-sidebar', closeSidebar)
 
 <template>
   <div class="Layout">
+    <slot name="layout-top" />
     <VPSkipLink />
     <VPBackdrop class="backdrop" :show="isSidebarOpen" @click="closeSidebar" />
     <VPNav />
@@ -46,6 +47,7 @@ provide('close-sidebar', closeSidebar)
     </VPContent>
 
     <VPFooter />
+    <slot name="layout-bottom" />
   </div>
 </template>
 

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

@@ -1,9 +1,8 @@
 <script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
 import docsearch from '@docsearch/js'
-import { DocSearchHit } from '@docsearch/react/dist/esm/types'
 import { onMounted } from 'vue'
 import { useRouter, useRoute, useData } from 'vitepress'
-import { DefaultTheme } from '../config'
 
 const router = useRouter()
 const route = useRoute()
@@ -52,7 +51,7 @@ function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
       }
     },
 
-    transformItems(items: DocSearchHit[]) {
+    transformItems(items: any[]) {
       return items.map((item) => {
         return Object.assign({}, item, {
           url: getRelativePath(item.url)
@@ -60,7 +59,7 @@ function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
       })
     },
 
-    hitComponent({ hit, children }: { hit: DocSearchHit, children: any }) {
+    hitComponent({ hit, children }: { hit: any; children: any }) {
       const relativeHit = hit.url.startsWith('http')
         ? getRelativePath(hit.url as string)
         : hit.url

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

@@ -169,24 +169,4 @@ const pageName = path.replace(/[./]+/g, '_').replace(/_html$/, '')
   margin: 0 auto;
   max-width: 688px;
 }
-
-.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

@@ -19,7 +19,7 @@ const hasLastUpdated = computed(() => {
 </script>
 
 <template>
-  <footer v-if="control.prev || control.next" class="VPDocFooter">
+  <footer class="VPDocFooter">
     <div class="edit-info">
       <div v-if="theme.editLink && frontmatter.editLink !== false" class="edit-link">
         <VPLink class="edit-link-button" :href="editLink.url" :no-icon="true">
@@ -33,7 +33,7 @@ const hasLastUpdated = computed(() => {
       </div>
     </div>
 
-    <div class="prev-next">
+    <div v-if="control.prev || control.next" 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>

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

@@ -72,6 +72,14 @@ function onBlur() {
   fill: var(--vp-c-text-2);
 }
 
+.VPFlyout.active .text {
+  color: var(--vp-c-brand);
+}
+
+.VPFlyout.active:hover .text {
+  color: var(--vp-c-brand-dark);
+}
+
 .VPFlyout:hover .menu,
 .button[aria-expanded="true"] + .menu {
   opacity: 1;

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

@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
 import VPButton from './VPButton.vue'
+import VPImage from './VPImage.vue'
 
 export interface HeroAction {
   theme?: 'brand' | 'alt'
@@ -7,16 +9,11 @@ export interface HeroAction {
   link: string
 }
 
-export interface Image {
-  src: string
-  alt?: string
-}
-
 defineProps<{
   name?: string
   text: string
   tagline?: string
-  image?: Image
+  image?: DefaultTheme.ThemeableImage
   actions?: HeroAction[]
 }>()
 </script>
@@ -25,7 +22,9 @@ defineProps<{
   <div class="VPHero" :class="{ 'has-image': image }">
     <div class="container">
       <div class="main">
-        <h1 v-if="name" class="name"><span class="clip">{{ name }}</span></h1>
+        <h1 v-if="name" class="name">
+          <span class="clip">{{ name }}</span>
+        </h1>
         <p v-if="text" class="text">{{ text }}</p>
         <p v-if="tagline" class="tagline">{{ tagline }}</p>
 
@@ -45,7 +44,7 @@ defineProps<{
       <div v-if="image" class="image">
         <div class="image-container">
           <div class="image-bg" />
-          <img class="image-src" :src="image.src" :alt="image.alt">
+          <VPImage class="image-src" :image="image" />
         </div>
       </div>
     </div>
@@ -293,7 +292,7 @@ defineProps<{
   }
 }
 
-.image-src {
+:deep(.image-src) {
   position: absolute;
   top: 50%;
   left: 50%;

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
+import { withBase } from 'vitepress'
+
+defineProps<{
+  image: DefaultTheme.ThemeableImage
+}>()
+</script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false
+}
+</script>
+
+<template>
+  <template v-if="image">
+    <img
+      v-if="typeof image === 'string' || 'src' in image"
+      class="VPImage"
+      v-bind="typeof image === 'string' ? $attrs : { ...image, ...$attrs }"
+      :src="withBase(typeof image === 'string' ? image : image.src)"
+    />
+    <template v-else>
+      <VPImage class="dark" :image="image.dark" v-bind="$attrs" />
+      <VPImage class="light" :image="image.light" v-bind="$attrs" />
+    </template>
+  </template>
+</template>
+
+<style scoped>
+html:not(.dark) .VPImage.dark {
+  display: none;
+}
+.dark .VPImage.light {
+  display: none;
+}
+</style>

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

@@ -48,7 +48,6 @@ const { hasSidebar } = useSidebar()
   border-bottom: 1px solid var(--vp-c-divider-light);
   padding: 0 8px 0 24px;
   height: var(--vp-nav-height-mobile);
-  background-color: var(--vt-c-bg);
   transition: border-color 0.5s, background-color 0.5s;
 }
 

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

@@ -48,18 +48,18 @@ defineEmits<{
   overflow: hidden;
 }
 
-.container:hover .top    { top: 0; left: 0; transform: translateX(4px); }
-.container:hover .middle { top: 6; left: 0; transform: translateX(0); }
-.container:hover .bottom { top: 12px; left: 0; transform: translateX(8px); }
+.VPNavBarHamburger:hover .top    { top: 0; left: 0; transform: translateX(4px); }
+.VPNavBarHamburger:hover .middle { top: 6; left: 0; transform: translateX(0); }
+.VPNavBarHamburger:hover .bottom { top: 12px; left: 0; transform: translateX(8px); }
 
-.container.active .top    { top: 6px; transform: translateX(0) rotate(225deg); }
-.container.active .middle { top: 6px; transform: translateX(16px); }
-.container.active .bottom { top: 6px; transform: translateX(0) rotate(135deg); }
+.VPNavBarHamburger.active .top    { top: 6px; transform: translateX(0) rotate(225deg); }
+.VPNavBarHamburger.active .middle { top: 6px; transform: translateX(16px); }
+.VPNavBarHamburger.active .bottom { top: 6px; transform: translateX(0) rotate(135deg); }
 
-.container.active:hover .top,
-.container.active:hover .middle,
-.container.active:hover .bottom {
-  background-color: var(--vt-c-text-2);
+.VPNavBarHamburger.active:hover .top,
+.VPNavBarHamburger.active:hover .middle,
+.VPNavBarHamburger.active:hover .bottom {
+  background-color: var(--vp-c-text-2);
   transition: top .25s, background-color .25s, transform .25s;
 }
 

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

@@ -1,12 +1,27 @@
 <script lang="ts" setup>
-import { DefaultTheme } from '../config'
+import { useData } from 'vitepress'
+import type { DefaultTheme } from 'vitepress/theme'
+import { isActive } from '../support/utils'
 import VPFlyout from './VPFlyout.vue'
 
 defineProps<{
   item: DefaultTheme.NavItemWithChildren
 }>()
+
+const { page } = useData()
 </script>
 
 <template>
-  <VPFlyout :button="item.text" :items="item.items" />
+  <VPFlyout
+    :class="{
+      VPNavBarMenuGroup: true,
+      active: isActive(
+        page.relativePath,
+        item.activeMatch,
+        !!item.activeMatch
+      )
+    }"
+    :button="item.text"
+    :items="item.items"
+  />
 </template>

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import type { DefaultTheme } from 'vitepress/theme'
 import { useData } from 'vitepress'
 import { isActive } from '../support/utils'
-import { DefaultTheme } from '../config'
 import VPLink from './VPLink.vue'
 
 defineProps<{

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useData } from 'vitepress'
 import { useSidebar } from '../composables/sidebar'
+import VPImage from './VPImage.vue'
 
 const { site, theme } = useData()
 const { hasSidebar } = useSidebar()
@@ -9,7 +10,7 @@ const { hasSidebar } = useSidebar()
 <template>
   <div class="VPNavBarTitle" :class="{ 'has-sidebar': hasSidebar }">
     <a class="title" :href="site.base">
-      <img v-if="theme.logo" class="logo" :src="theme.logo">
+      <VPImage class="logo" :image="theme.logo" />
       <template v-if="theme.siteTitle">{{ theme.siteTitle }}</template>
       <template v-else-if="theme.siteTitle === undefined">{{ site.title }}</template>
     </a>
@@ -52,7 +53,7 @@ const { hasSidebar } = useSidebar()
   }
 }
 
-.logo {
+:deep(.logo) {
   margin-right: 8px;
   height: 24px;
 }

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { DefaultTheme } from '../config'
+import type { DefaultTheme } from 'vitepress/theme'
 import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue'
 
 defineProps<{

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
-import { DefaultTheme } from '../config'
+import type { DefaultTheme } from 'vitepress/theme'
+import { ref, watchEffect } from 'vue'
 import VPIconPlusSquare from './icons/VPIconPlusSquare.vue'
 import VPIconMinusSquare from './icons/VPIconMinusSquare.vue'
 import VPSidebarLink from './VPSidebarLink.vue'
@@ -12,7 +12,10 @@ const props = defineProps<{
   collapsed?: boolean
 }>()
 
-const collapsed = ref(props.collapsible && props.collapsed)
+const collapsed = ref(false)
+watchEffect(() => {
+  collapsed.value = !!(props.collapsible && props.collapsed)
+})
 
 function toggle() {
   if (props.collapsible) {

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

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
+import type { DefaultTheme } from 'vitepress/theme'
 import { inject } from 'vue'
 import { useData } from 'vitepress'
-import { DefaultTheme } from '../config'
-import { isActive, normalizeLink } from '../support/utils'
+import { isActive } from '../support/utils'
 import VPLink from './VPLink.vue'
 
 defineProps<{

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { DefaultTheme } from '../config'
+import type { DefaultTheme } from 'vitepress/theme'
 import VPIconDiscord from './icons/VPIconDiscord.vue'
 import VPIconFacebook from './icons/VPIconFacebook.vue'
 import VPIconGitHub from './icons/VPIconGitHub.vue'

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { DefaultTheme } from '../config'
+import type { DefaultTheme } from 'vitepress/theme'
 import VPSocialLink from './VPSocialLink.vue'
 
 defineProps<{

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

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { DefaultTheme } from '..'
+import VPTeamMembersItem from './VPTeamMembersItem.vue'
+
+const props = defineProps<{
+  size?: 'small' | 'medium'
+  members: DefaultTheme.TeamMember[]
+}>()
+
+const classes = computed(() => [
+  props.size ?? 'medium',
+  `count-${props.members.length}`
+])
+</script>
+
+<template>
+  <div class="VPTeamMembers" :class="classes">
+    <div class="container">
+      <div v-for="member in members" :key="member.name" class="item">
+        <VPTeamMembersItem :size="size" :member="member" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPTeamMembers.small .container {
+  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
+}
+
+.VPTeamMembers.small.count-1 .container { max-width: 276px; }
+.VPTeamMembers.small.count-2 .container { max-width: calc(276px * 2 + 24px); }
+.VPTeamMembers.small.count-3 .container { max-width: calc(276px * 3 + 24px * 2); }
+
+.VPTeamMembers.medium .container {
+  grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
+}
+
+@media (min-width: 375px) {
+  .VPTeamMembers.medium .container {
+    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
+  }
+}
+
+.VPTeamMembers.medium.count-1 .container { max-width: 368px; }
+.VPTeamMembers.medium.count-2 .container { max-width: calc(368px * 2 + 24px); }
+
+.container {
+  display: grid;
+  gap: 24px;
+  margin: 0 auto;
+  max-width: 1152px;
+}
+</style>

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

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import type { DefaultTheme } from '..'
+import VPIconHeart from './icons/VPIconHeart.vue'
+import VPLink from './VPLink.vue'
+import VPSocialLinks from './VPSocialLinks.vue'
+
+defineProps<{
+  size?: 'small' | 'medium'
+  member: DefaultTheme.TeamMember
+}>()
+</script>
+
+<template>
+  <article class="VPTeamMembersItem" :class="[size ?? 'medium']">
+    <div class="profile">
+      <figure class="avatar">
+        <img class="avatar-img" :src="member.avatar" :alt="member.name">
+      </figure>
+      <div class="data">
+        <h1 class="name">
+          {{ member.name }}
+        </h1>
+        <p v-if="member.title || member.org" class="affiliation">
+          <span v-if="member.title" class="title">
+            {{ member.title }}
+          </span>
+          <span v-if="member.title && member.org" class="at">
+            @
+          </span>
+          <VPLink v-if="member.org" class="org" :class="{ link: member.orgLink }" :href="member.orgLink" no-icon>
+            {{ member.org }}
+          </VPLink>
+        </p>
+        <p v-if="member.desc" class="desc">
+          {{ member.desc }}
+        </p>
+        <div v-if="member.links" class="links">
+          <VPSocialLinks :links="member.links" />
+        </div>
+      </div>
+    </div>
+    <div v-if="member.sponsor" class="sponsor">
+      <VPLink class="sponsor-link" :href="member.sponsor" no-icon>
+        <VPIconHeart class="sponsor-icon" /> Sponsor
+      </VPLink>
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.VPTeamMembersItem {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  border-radius: 12px;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.VPTeamMembersItem.small .profile {
+  padding: 32px;
+}
+
+.VPTeamMembersItem.small .data {
+  padding-top: 20px;
+}
+
+.VPTeamMembersItem.small .avatar {
+  width: 64px;
+  height: 64px;
+}
+
+.VPTeamMembersItem.small .name {
+  line-height: 24px;
+  font-size: 16px;
+}
+
+.VPTeamMembersItem.small .affiliation {
+  padding-top: 4px;
+  line-height: 20px;
+  font-size: 14px;
+}
+
+.VPTeamMembersItem.small .desc {
+  padding-top: 12px;
+  line-height: 20px;
+  font-size: 14px;
+}
+
+.VPTeamMembersItem.small .links {
+  margin: 0 -16px -20px;
+  padding: 10px 0 0;
+}
+
+.VPTeamMembersItem.medium .profile {
+  padding: 48px 32px;
+}
+
+.VPTeamMembersItem.medium .data {
+  padding-top: 24px;
+  text-align: center;
+}
+
+.VPTeamMembersItem.medium .avatar {
+  width: 96px;
+  height: 96px;
+}
+
+.VPTeamMembersItem.medium .name {
+  letter-spacing: 0.15px;
+  line-height: 28px;
+  font-size: 20px;
+}
+
+.VPTeamMembersItem.medium .affiliation {
+  padding-top: 4px;
+  font-size: 16px;
+}
+
+.VPTeamMembersItem.medium .desc {
+  padding-top: 16px;
+  max-width: 288px;
+  font-size: 16px;
+}
+
+.VPTeamMembersItem.medium .links {
+  margin: 0 -16px -12px;
+  padding: 16px 12px 0;
+}
+
+.profile {
+  flex-grow: 1;
+  background-color: var(--vp-c-bg-soft);
+}
+
+.data {
+  text-align: center;
+}
+
+.avatar {
+  position: relative;
+  flex-shrink: 0;
+  margin: 0 auto;
+  border-radius: 50%;
+  box-shadow: var(--vp-shadow-3);
+}
+
+.avatar-img {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.name {
+  margin:  0;
+  font-weight: 600;
+}
+
+.affiliation {
+  margin:  0;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.org.link {
+  color: var(--vp-c-text-2);
+  transition: color 0.25s;
+}
+
+.org.link:hover {
+  color: var(--vp-c-brand);
+}
+
+.desc {
+  margin: 0 auto;
+}
+
+.links {
+  display: flex;
+  justify-content: center;
+  height: 56px;
+}
+
+.sponsor-link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-sponsor);
+  background-color: var(--vp-c-bg-soft);
+  transition: color 0.25s, background-color 0.25s;
+}
+
+.sponsor-link:hover,
+.sponsor-link:focus {
+  outline: none;
+  color: var(--vp-c-text-dark-1);
+  background-color: var(--vp-c-sponsor);
+}
+
+.sponsor-icon {
+  margin-right: 8px;
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+</style>