vitepress 2.0.0-alpha.2 → 2.0.0-alpha.21

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

@@ -1,29 +1,24 @@
-<script setup lang="ts">
-import type { DefaultTheme } from 'vitepress/theme'
-import { onBeforeUnmount, onMounted, ref } from 'vue'
-import VPSidebarItem from './VPSidebarItem.vue'
-
-defineProps<{
-  items: DefaultTheme.SidebarItem[]
-}>()
-
-const disableTransition = ref(true)
-
-let timer: ReturnType<typeof setTimeout> | null = null
-
+<script setup>
+import { onBeforeUnmount, onMounted, ref } from "vue";
+import VPSidebarItem from "./VPSidebarItem.vue";
+defineProps({ items: {
+	type: Array,
+	required: true
+} });
+const disableTransition = ref(true);
+let timer = null;
 onMounted(() => {
-  timer = setTimeout(() => {
-    timer = null
-    disableTransition.value = false
-  }, 300)
-})
-
+	timer = setTimeout(() => {
+		timer = null;
+		disableTransition.value = false;
+	}, 300);
+});
 onBeforeUnmount(() => {
-  if (timer != null) {
-    clearTimeout(timer)
-    timer = null
-  }
-})
+	if (timer != null) {
+		clearTimeout(timer);
+		timer = null;
+	}
+});
 </script>
 
 <template>
@@ -33,7 +28,7 @@ onBeforeUnmount(() => {
     class="group"
     :class="{ 'no-transition': disableTransition }"
   >
-    <VPSidebarItem :item="item" :depth="0" />
+    <VPSidebarItem :item :depth="0" />
   </div>
 </template>
 
@@ -44,13 +39,13 @@ onBeforeUnmount(() => {
 
 .group + .group {
   border-top: 1px solid var(--vp-c-divider);
-  padding-top: 10px;
+  padding-top: 0.625rem;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .group {
-    padding-top: 10px;
-    width: calc(var(--vp-sidebar-width) - 64px);
+    padding-top: 0.625rem;
+    width: calc(var(--vp-sidebar-width) - 4rem);
   }
 }
 </style>

package/dist/client/theme-default/components/VPSidebarItem.d.vue.ts

@@ -0,0 +1,8 @@
+import type { DefaultTheme } from 'vitepress/theme';
+type __VLS_Props = {
+    item: DefaultTheme.SidebarItem;
+    depth: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,119 +1,87 @@
-<script setup lang="ts">
-import type { DefaultTheme } from 'vitepress/theme'
-import { computed } from 'vue'
-import { useSidebarControl } from '../composables/sidebar'
-import VPLink from './VPLink.vue'
-
-const props = defineProps<{
-  item: DefaultTheme.SidebarItem
-  depth: number
-}>()
-
-const {
-  collapsed,
-  collapsible,
-  isLink,
-  isActiveLink,
-  hasActiveLink,
-  hasChildren,
-  toggle
-} = useSidebarControl(computed(() => props.item))
-
-const sectionTag = computed(() => (hasChildren.value ? 'section' : `div`))
-
-const linkTag = computed(() => (isLink.value ? 'a' : 'div'))
-
-const textTag = computed(() => {
-  return !hasChildren.value
-    ? 'p'
-    : props.depth + 2 === 7
-      ? 'p'
-      : `h${props.depth + 2}`
-})
-
-const itemRole = computed(() => (isLink.value ? undefined : 'button'))
-
-const classes = computed(() => [
-  [`level-${props.depth}`],
-  { collapsible: collapsible.value },
-  { collapsed: collapsed.value },
-  { 'is-link': isLink.value },
-  { 'is-active': isActiveLink.value },
-  { 'has-active': hasActiveLink.value }
-])
-
-function onItemInteraction(e: MouseEvent | Event) {
-  if ('key' in e && e.key !== 'Enter') {
-    return
-  }
-  !props.item.link && toggle()
-}
-
-function onCaretClick() {
-  props.item.link && toggle()
+<script setup>
+import { computed } from "vue";
+import { useSidebarItemControl } from "../composables/sidebar";
+import VPLink from "./VPLink.vue";
+const props = defineProps({
+	item: {
+		type: Object,
+		required: true
+	},
+	depth: {
+		type: Number,
+		required: true
+	}
+});
+const { collapsed, collapsible, isLink, isActiveLink, isCurrentLink, hasActiveLink, hasChildren, toggle } = useSidebarItemControl(computed(() => props.item));
+const linkTag = computed(() => isLink.value ? "a" : "div");
+const textTag = computed(() => hasChildren.value && props.depth < 5 ? `h${props.depth + 2}` : "p");
+// a section needs a heading
+const sectionTag = computed(() => props.item.text && textTag.value !== "p" ? "section" : "div");
+function onItemClick() {
+	!props.item.link && toggle();
 }
 </script>
 
 <template>
-  <component :is="sectionTag" class="VPSidebarItem" :class="classes">
-    <div
-      v-if="item.text"
-      class="item"
-      :role="itemRole"
-      v-on="
-        item.items
-          ? { click: onItemInteraction, keydown: onItemInteraction }
-          : {}
-      "
-      :tabindex="item.items && 0"
-    >
+  <component
+    :is="sectionTag"
+    class="VPSidebarItem"
+    :class="[`level-${depth}`, {
+	collapsible,
+	collapsed,
+	'is-link': isLink,
+	'is-active': isActiveLink,
+	'has-active': hasActiveLink
+}]"
+  >
+    <div v-if="item.text" class="item" @click="onItemClick">
       <div class="indicator" />
 
       <VPLink
         v-if="item.link"
         :tag="linkTag"
         class="link"
+        :aria-current="isCurrentLink ? 'page' : undefined"
         :href="item.link"
         :rel="item.rel"
         :target="item.target"
       >
-        <component :is="textTag" class="text" v-html="item.text" />
+        <component :is="textTag" class="text"><bdi v-html="item.text" /></component>
       </VPLink>
-      <component v-else :is="textTag" class="text" v-html="item.text" />
+      <component v-else :is="textTag" class="text"><bdi v-html="item.text" /></component>
 
-      <div
+      <button
         v-if="item.collapsed != null && item.items && item.items.length"
+        type="button"
         class="caret"
-        role="button"
         aria-label="toggle section"
-        @click="onCaretClick"
-        @keydown.enter="onCaretClick"
-        tabindex="0"
+        :aria-expanded="!collapsed"
+        @click.stop="toggle"
       >
         <span class="vpi-chevron-right caret-icon" />
-      </div>
+      </button>
     </div>
 
-    <div v-if="item.items && item.items.length" class="items">
-      <template v-if="depth < 5">
+    <ul v-if="item.items && item.items.length" class="items">
+      <li v-if="depth < 5">
         <VPSidebarItem
           v-for="i in item.items"
           :key="i.text"
           :item="i"
           :depth="depth + 1"
         />
-      </template>
-    </div>
+      </li>
+    </ul>
   </component>
 </template>
 
 <style scoped>
 .VPSidebarItem.level-0 {
-  padding-bottom: 24px;
+  padding-bottom: 1.5rem;
 }
 
 .VPSidebarItem.collapsed.level-0 {
-  padding-bottom: 10px;
+  padding-bottom: 0.625rem;
 }
 
 .item {
@@ -128,9 +96,9 @@ function onCaretClick() {
 
 .indicator {
   position: absolute;
-  top: 6px;
-  bottom: 6px;
-  left: -17px;
+  top: 0.375rem;
+  bottom: 0.375rem;
+  inset-inline-start: calc(-1rem - 1px);
   width: 2px;
   border-radius: 2px;
   transition: background-color 0.25s;
@@ -151,9 +119,9 @@ function onCaretClick() {
 
 .text {
   flex-grow: 1;
-  padding: 4px 0;
-  line-height: 24px;
-  font-size: 14px;
+  padding: 0.25rem 0;
+  line-height: 1.7142857;
+  font-size: 0.875rem;
   transition: color 0.25s;
 }
 
@@ -208,9 +176,9 @@ function onCaretClick() {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-right: -7px;
-  width: 32px;
-  height: 32px;
+  margin-inline-end: -0.4375rem;
+  width: 2rem;
+  height: 2rem;
   color: var(--vp-c-text-3);
   cursor: pointer;
   transition: color 0.25s;
@@ -226,14 +194,13 @@ function onCaretClick() {
 }
 
 .caret-icon {
-  font-size: 18px;
-  /*rtl:ignore*/
+  font-size: 1.125rem;
   transform: rotate(90deg);
   transition: transform 0.25s;
 }
 
 .VPSidebarItem.collapsed .caret-icon {
-  transform: rotate(0)/*rtl:rotate(180deg)*/;
+  transform: rotate(0);
 }
 
 .VPSidebarItem.level-1 .items,
@@ -241,8 +208,8 @@ function onCaretClick() {
 .VPSidebarItem.level-3 .items,
 .VPSidebarItem.level-4 .items,
 .VPSidebarItem.level-5 .items {
-  border-left: 1px solid var(--vp-c-divider);
-  padding-left: 16px;
+  border-inline-start: 1px solid var(--vp-c-divider);
+  padding-inline-start: 1rem;
 }
 
 .VPSidebarItem.collapsed .items {

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    inert?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,52 +1,33 @@
-<script lang="ts" setup>
-import { ref, watch } from 'vue'
-import { useRoute } from 'vitepress'
-import { useData } from '../composables/data'
-
-const { theme } = useData()
-const route = useRoute()
-const backToTop = ref()
-
-watch(() => route.path, () => backToTop.value.focus())
-
-function focusOnTargetAnchor({ target }: Event) {
-  const el = document.getElementById(
-    decodeURIComponent((target as HTMLAnchorElement).hash).slice(1)
-  )
-
-  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 setup>
+import { useRoute } from "vitepress";
+import { useTemplateRef, watch } from "vue";
+import { useData } from "../composables/data";
+defineProps({ inert: {
+	type: Boolean,
+	required: false
+} });
+const { theme } = useData();
+const route = useRoute();
+const backToTop = useTemplateRef("backToTop");
+watch(() => route.path, () => backToTop.value?.focus());
 </script>
 
 <template>
   <span ref="backToTop" tabindex="-1" />
-  <a
-    href="#VPContent"
-    class="VPSkipLink visually-hidden"
-    @click="focusOnTargetAnchor"
-  >
-    {{ theme.skipToContentLabel || 'Skip to content' }}
+  <a href="#VPContent" class="VPSkipLink visually-hidden" :inert>
+    {{ theme.skipToContentLabel || "Skip to content" }}
   </a>
 </template>
 
 <style scoped>
 .VPSkipLink {
-  top: 8px;
-  left: 8px;
-  padding: 8px 16px;
+  position: fixed;
+  top: 0.5rem;
+  inset-inline-start: 0.5rem;
+  padding: 0.5rem 1rem;
   z-index: 999;
-  border-radius: 8px;
-  font-size: 12px;
+  border-radius: 0.5rem;
+  font-size: 0.75rem;
   font-weight: bold;
   text-decoration: none;
   color: var(--vp-c-brand-1);
@@ -61,10 +42,10 @@ function focusOnTargetAnchor({ target }: Event) {
   clip-path: none;
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 80rem) {
   .VPSkipLink {
-    top: 14px;
-    left: 16px;
+    top: 0.875rem;
+    inset-inline-start: 1rem;
   }
 }
 </style>

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

@@ -0,0 +1,11 @@
+import type { DefaultTheme } from 'vitepress/theme';
+type __VLS_Props = {
+    icon: DefaultTheme.SocialLinkIcon;
+    link: string;
+    ariaLabel?: string;
+    target?: string;
+    me: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,53 +1,42 @@
-<script lang="ts" setup>
-import type { DefaultTheme } from 'vitepress/theme'
-import { computed, nextTick, onMounted, ref, useSSRContext } from 'vue'
-import type { SSGContext } from '../../shared'
-
-const props = defineProps<{
-  icon: DefaultTheme.SocialLinkIcon
-  link: string
-  ariaLabel?: string
-}>()
-
-const el = ref<HTMLAnchorElement>()
-
-onMounted(async () => {
-  await nextTick()
-  const span = el.value?.children[0]
-  if (
-    span instanceof HTMLElement &&
-    span.className.startsWith('vpi-social-') &&
-    (getComputedStyle(span).maskImage ||
-      getComputedStyle(span).webkitMaskImage) === 'none'
-  ) {
-    span.style.setProperty(
-      '--icon',
-      `url('https://api.iconify.design/simple-icons/${props.icon}.svg')`
-    )
-  }
-})
-
-const svg = computed(() => {
-  if (typeof props.icon === 'object') return props.icon.svg
-  return `<span class="vpi-social-${props.icon}"></span>`
-})
-
-if (import.meta.env.SSR) {
-  typeof props.icon === 'string' &&
-    useSSRContext<SSGContext>()?.vpSocialIcons.add(props.icon)
-}
+<script setup>
+import { computed } from "vue";
+import { isExternal } from "../../shared";
+import VPIcon from "./VPIcon.vue";
+const props = defineProps({
+	icon: {
+		type: [String, Object],
+		required: true
+	},
+	link: {
+		type: String,
+		required: true
+	},
+	ariaLabel: {
+		type: String,
+		required: false
+	},
+	target: {
+		type: String,
+		required: false
+	},
+	me: {
+		type: Boolean,
+		required: true
+	}
+});
+const qualifiedIcon = computed(() => typeof props.icon === "string" && !props.icon.includes(":") ? `simple-icons:${props.icon}` : props.icon);
 </script>
 
 <template>
   <a
-    ref="el"
     class="VPSocialLink no-icon"
     :href="link"
     :aria-label="ariaLabel ?? (typeof icon === 'string' ? icon : '')"
-    target="_blank"
-    rel="noopener"
-    v-html="svg"
-  ></a>
+    :target="target ?? (isExternal(link) ? '_blank' : undefined)"
+    :rel="me ? 'me noopener' : 'noopener'"
+  >
+    <VPIcon :icon="qualifiedIcon" />
+  </a>
 </template>
 
 <style scoped>
@@ -55,8 +44,8 @@ if (import.meta.env.SSR) {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 36px;
-  height: 36px;
+  width: 2.25rem;
+  height: 2.25rem;
   color: var(--vp-c-text-2);
   transition: color 0.5s;
 }
@@ -66,10 +55,14 @@ if (import.meta.env.SSR) {
   transition: color 0.25s;
 }
 
-.VPSocialLink > :deep(svg),
-.VPSocialLink > :deep([class^="vpi-social-"]) {
-  width: 20px;
-  height: 20px;
+.VPSocialLink > :deep(span) {
+  /* keeps a nested custom svg centered instead of baseline-aligned */
+  display: flex;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.VPSocialLink :deep(svg) {
   fill: currentColor;
 }
 </style>

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

@@ -0,0 +1,10 @@
+import type { DefaultTheme } from 'vitepress/theme';
+type __VLS_Props = {
+    links: DefaultTheme.SocialLink[];
+    me?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    me: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,22 +1,24 @@
-<script lang="ts" setup>
-import type { DefaultTheme } from 'vitepress/theme'
-import VPSocialLink from './VPSocialLink.vue'
-
-defineProps<{
-  links: DefaultTheme.SocialLink[]
-}>()
+<script setup>
+import VPSocialLink from "./VPSocialLink.vue";
+defineProps({
+	links: {
+		type: Array,
+		required: true
+	},
+	me: {
+		type: Boolean,
+		required: false,
+		default: true
+	}
+});
 </script>
 
 <template>
-  <div class="VPSocialLinks">
-    <VPSocialLink
-      v-for="{ link, icon, ariaLabel } in links"
-      :key="link"
-      :icon="icon"
-      :link="link"
-      :ariaLabel="ariaLabel"
-    />
-  </div>
+  <ul class="VPSocialLinks">
+    <li v-for="{ link, icon, ariaLabel, target } in links" :key="link">
+      <VPSocialLink :icon :link :ariaLabel :target :me />
+    </li>
+  </ul>
 </template>
 
 <style scoped>
@@ -24,4 +26,12 @@ defineProps<{
   display: flex;
   justify-content: center;
 }
+
+/* Reset styles from vp-doc if used in markdown */
+.vp-doc .VPSocialLinks,
+.vp-doc .VPSocialLinks > li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
 </style>

package/dist/client/theme-default/components/VPSponsors.d.vue.ts

@@ -0,0 +1,18 @@
+import type { GridSize } from '../composables/sponsor-grid.js';
+import type { Sponsor } from './VPSponsorsGrid.vue';
+export interface Sponsors {
+    tier?: string;
+    size?: GridSize;
+    items: Sponsor[];
+}
+interface Props {
+    mode?: 'normal' | 'aside';
+    tier?: string;
+    size?: GridSize;
+    data: Sponsors[] | Sponsor[];
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    mode: "aside" | "normal";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;