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

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

@@ -1,28 +1,25 @@
-<script setup lang="ts">
-import VPButton from './VPButton.vue'
-import VPSponsors from './VPSponsors.vue'
-
-export interface Sponsors {
-  tier: string
-  size?: 'medium' | 'big'
-  items: Sponsor[]
-}
-
-export interface Sponsor {
-  name: string
-  img: string
-  url: string
-}
-interface Props {
-  message?: string
-  actionText?: string
-  actionLink?: string
-  data: Sponsors[]
-}
-
-withDefaults(defineProps<Props>(), {
-  actionText: 'Become a sponsor'
-})
+<script setup>
+import VPButton from "./VPButton.vue";
+import VPSponsors from "./VPSponsors.vue";
+defineProps({
+	message: {
+		type: String,
+		required: false
+	},
+	actionText: {
+		type: String,
+		required: false,
+		default: "Become a sponsor"
+	},
+	actionLink: {
+		type: String,
+		required: false
+	},
+	data: {
+		type: Array,
+		required: true
+	}
+});
 </script>
 
 <template>
@@ -36,7 +33,7 @@ withDefaults(defineProps<Props>(), {
       </div>
 
       <div class="sponsors">
-        <VPSponsors :data="data" />
+        <VPSponsors :data />
       </div>
 
       <div v-if="actionLink" class="action">
@@ -49,44 +46,44 @@ withDefaults(defineProps<Props>(), {
 <style scoped>
 .VPHomeSponsors {
   border-top: 1px solid var(--vp-c-gutter);
-  padding-top: 88px !important;
+  padding-top: 5.5rem !important;
 }
 
 .VPHomeSponsors {
-  margin: 96px 0;
+  margin: 6rem 0;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .VPHomeSponsors {
-    margin: 128px 0;
+    margin: 8rem 0;
   }
 }
 
 .VPHomeSponsors {
-  padding: 0 24px;
+  padding: 0 1.5rem;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .VPHomeSponsors {
-    padding: 0 48px;
+    padding: 0 3rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPHomeSponsors {
-    padding: 0 64px;
+    padding: 0 4rem;
   }
 }
 
 .container {
   margin: 0 auto;
-  max-width: 1152px;
+  max-width: 72rem;
 }
 
 .love {
   margin: 0 auto;
   width: fit-content;
-  font-size: 28px;
+  font-size: 1.75rem;
   color: var(--vp-c-text-3);
 }
 
@@ -96,21 +93,23 @@ withDefaults(defineProps<Props>(), {
 
 .message {
   margin: 0 auto;
-  padding-top: 10px;
-  max-width: 320px;
+  border-top: none;
+  padding-top: 0.625rem;
+  max-width: 20rem;
   text-align: center;
-  line-height: 24px;
-  font-size: 16px;
+  letter-spacing: normal;
+  line-height: 1.5;
+  font-size: 1rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
 
 .sponsors {
-  padding-top: 32px;
+  padding-top: 2rem;
 }
 
 .action {
-  padding-top: 40px;
+  padding-top: 2.5rem;
   text-align: center;
 }
 </style>

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

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    icon: string | {
+        svg: string;
+    };
+};
+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/VPIcon.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { useIcon } from "vitepress";
+import { useTemplateRef } from "vue";
+const props = defineProps({ icon: {
+	type: [String, Object],
+	required: true
+} });
+const el = useTemplateRef("el");
+const iconClass = useIcon(() => props.icon, el);
+</script>
+
+<template>
+  <span v-if="typeof icon === 'object'" class="VPIcon" v-html="icon.svg"></span>
+  <span v-else ref="el" :class="iconClass"></span>
+</template>
+
+<style scoped>
+.VPIcon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+}
+
+.VPIcon :deep(svg) {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+</style>

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

@@ -0,0 +1,8 @@
+import type { DefaultTheme } from 'vitepress/theme';
+type __VLS_Props = {
+    image: DefaultTheme.ThemeableImage;
+    alt?: string;
+};
+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/VPImage.vue

@@ -1,13 +1,16 @@
-<script setup lang="ts">
-import type { DefaultTheme } from 'vitepress/theme'
-import { withBase } from 'vitepress'
-
-defineProps<{
-  image: DefaultTheme.ThemeableImage
-  alt?: string
-}>()
-
-defineOptions({ inheritAttrs: false })
+<script setup>
+import { withBase } from "vitepress";
+defineProps({
+	image: {
+		type: [String, Object],
+		required: true
+	},
+	alt: {
+		type: String,
+		required: false
+	}
+});
+defineOptions({ inheritAttrs: false });
 </script>
 
 <template>
@@ -15,7 +18,10 @@ defineOptions({ inheritAttrs: false })
     <img
       v-if="typeof image === 'string' || 'src' in image"
       class="VPImage"
-      v-bind="typeof image === 'string' ? $attrs : { ...image, ...$attrs }"
+      v-bind="typeof image === 'string' ? $attrs : {
+	...image,
+	...$attrs
+}"
       :src="withBase(typeof image === 'string' ? image : image.src)"
       :alt="alt ?? (typeof image === 'string' ? '' : image.alt || '')"
     />
@@ -23,13 +29,13 @@ defineOptions({ inheritAttrs: false })
       <VPImage
         class="dark"
         :image="image.dark"
-        :alt="image.alt"
+        :alt="alt ?? image.alt"
         v-bind="$attrs"
       />
       <VPImage
         class="light"
         :image="image.light"
-        :alt="image.alt"
+        :alt="alt ?? image.alt"
         v-bind="$attrs"
       />
     </template>
@@ -40,7 +46,7 @@ defineOptions({ inheritAttrs: false })
 html:not(.dark) .VPImage.dark {
   display: none;
 }
-.dark .VPImage.light {
+html.dark .VPImage.light {
   display: none;
 }
 </style>

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

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    tag?: string;
+    href?: string;
+    noIcon?: boolean;
+    external?: boolean;
+    target?: string;
+    rel?: string;
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    external: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,22 +1,35 @@
-<script lang="ts" setup>
-import { computed } from 'vue'
-import { normalizeLink } from '../support/utils'
-import { EXTERNAL_URL_RE } from '../../shared'
-
-const props = defineProps<{
-  tag?: string
-  href?: string
-  noIcon?: boolean
-  target?: string
-  rel?: string
-}>()
-
-const tag = computed(() => props.tag ?? (props.href ? 'a' : 'span'))
-const isExternal = computed(
-  () =>
-    (props.href && EXTERNAL_URL_RE.test(props.href)) ||
-    props.target === '_blank'
-)
+<script setup>
+import { computed } from "vue";
+import { isLinkExternal, normalizeLink } from "../support/utils";
+const props = defineProps({
+	tag: {
+		type: String,
+		required: false
+	},
+	href: {
+		type: String,
+		required: false
+	},
+	noIcon: {
+		type: Boolean,
+		required: false
+	},
+	external: {
+		type: Boolean,
+		required: false,
+		default: undefined
+	},
+	target: {
+		type: String,
+		required: false
+	},
+	rel: {
+		type: String,
+		required: false
+	}
+});
+const tag = computed(() => props.tag ?? (props.href ? "a" : "span"));
+const isExternal = computed(() => isLinkExternal(props.href, props.target, props.external));
 </script>
 
 <template>
@@ -24,10 +37,10 @@ const isExternal = computed(
     :is="tag"
     class="VPLink"
     :class="{
-      link: href,
-      'vp-external-link-icon': isExternal,
-      'no-icon': noIcon
-    }"
+	link: href,
+	'vp-external-link-icon': isExternal,
+	'no-icon': noIcon
+}"
     :href="href ? normalizeLink(href) : undefined"
     :target="target ?? (isExternal ? '_blank' : undefined)"
     :rel="rel ?? (isExternal ? 'noreferrer' : undefined)"
@@ -35,3 +48,9 @@ const isExternal = computed(
     <slot />
   </component>
 </template>
+
+<style scoped>
+.vp-external-link-icon::after {
+  color: var(--vp-c-text-3);
+}
+</style>

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

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

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

@@ -1,78 +1,56 @@
-<script lang="ts" setup>
-import { useWindowScroll } from '@vueuse/core'
-import { onContentUpdated } from 'vitepress'
-import { computed, onMounted, ref } from 'vue'
-import { useData } from '../composables/data'
-import { useLocalNav } from '../composables/local-nav'
-import { getHeaders } from '../composables/outline'
-import { useSidebar } from '../composables/sidebar'
-import VPLocalNavOutlineDropdown from './VPLocalNavOutlineDropdown.vue'
-
-defineProps<{
-  open: boolean
-}>()
-
-defineEmits<{
-  (e: 'open-menu'): void
-}>()
-
-const { theme, frontmatter } = useData()
-const { hasSidebar } = useSidebar()
-const { headers } = useLocalNav()
-const { y } = useWindowScroll()
-
-const navHeight = ref(0)
-
+<script setup>
+import { useWindowScroll } from "@vueuse/core";
+import { computed, onMounted, ref } from "vue";
+import { useData } from "../composables/data";
+import { useLayout } from "../composables/layout";
+import VPLocalNavOutlineDropdown from "./VPLocalNavOutlineDropdown.vue";
+defineProps({ open: {
+	type: Boolean,
+	required: true
+} });
+defineEmits(["open-menu"]);
+const { theme } = useData();
+const { isHome, hasSidebar, headers, hasLocalNav } = useLayout();
+const { y } = useWindowScroll();
+const navHeight = ref(0);
 onMounted(() => {
-  navHeight.value = parseInt(
-    getComputedStyle(document.documentElement).getPropertyValue(
-      '--vp-nav-height'
-    )
-  )
-})
-
-onContentUpdated(() => {
-  headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
-})
-
-const empty = computed(() => {
-  return headers.value.length === 0
-})
-
-const emptyAndNoSidebar = computed(() => {
-  return empty.value && !hasSidebar.value
-})
-
-const classes = computed(() => {
-  return {
-    VPLocalNav: true,
-    'has-sidebar': hasSidebar.value,
-    empty: empty.value,
-    fixed: emptyAndNoSidebar.value
-  }
-})
+	// getComputedStyle returns custom properties as their raw token ("4rem"),
+	// so resolve the height by measuring instead of parsing
+	const probe = document.createElement("div");
+	probe.style.cssText = "position: absolute; visibility: hidden; height: var(--vp-nav-height)";
+	document.body.appendChild(probe);
+	navHeight.value = probe.offsetHeight;
+	probe.remove();
+});
+const isScrolled = computed(() => y.value >= navHeight.value);
 </script>
 
 <template>
   <div
-    v-if="frontmatter.layout !== 'home' && (!emptyAndNoSidebar || y >= navHeight)"
-    :class="classes"
+    v-if="!isHome && (hasLocalNav || hasSidebar || isScrolled)"
+    class="VPLocalNav"
+    :class="{
+	'has-sidebar': hasSidebar,
+	'empty': !hasLocalNav,
+	'fixed': !hasLocalNav && !hasSidebar
+}"
   >
     <div class="container">
       <button
         v-if="hasSidebar"
+        type="button"
         class="menu"
         :aria-expanded="open"
         aria-controls="VPSidebarNav"
         @click="$emit('open-menu')"
       >
-        <span class="vpi-align-left menu-icon"></span>
+        <span class="vpi-text-align-start menu-icon" aria-hidden="true"></span>
         <span class="menu-text">
-          {{ theme.sidebarMenuLabel || 'Menu' }}
+          {{ theme.sidebarMenuLabel || "Menu" }}
         </span>
       </button>
 
-      <VPLocalNavOutlineDropdown :headers="headers" :navHeight="navHeight" />
+      <VPLocalNavOutlineDropdown :headers :navHeight />
     </div>
   </div>
 </template>
@@ -81,26 +59,42 @@ const classes = computed(() => {
 .VPLocalNav {
   position: sticky;
   top: 0;
-  /*rtl:ignore*/
-  left: 0;
+  inset-inline-start: 0;
   z-index: var(--vp-z-index-local-nav);
-  border-bottom: 1px solid var(--vp-c-gutter);
+  border-bottom: 1px solid var(--vp-local-nav-divider-color);
   padding-top: var(--vp-layout-top-height, 0px);
   width: 100%;
+}
+
+/* the background surface — below 60rem it covers just this bar; from 60rem
+   the bar is pinned under the fixed navbar, so the surface extends up
+   behind it and one element carries the backdrop filter for both bars
+   (two stacked filters would show a seam at their shared edge) */
+.VPLocalNav::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
   background-color: var(--vp-local-nav-bg-color);
+  backdrop-filter: var(--vp-nav-backdrop-filter);
+  transition: background-color 0.25s;
 }
 
 .VPLocalNav.fixed {
   position: fixed;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPLocalNav {
     top: var(--vp-nav-height);
   }
 
+  .VPLocalNav::before {
+    top: calc(-1 * var(--vp-nav-height));
+  }
+
   .VPLocalNav.has-sidebar {
-    padding-left: var(--vp-sidebar-width);
+    padding-inline-start: var(--vp-sidebar-width);
   }
 
   .VPLocalNav.empty {
@@ -108,18 +102,12 @@ const classes = computed(() => {
   }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 80rem) {
   .VPLocalNav {
     display: none;
   }
 }
 
-@media (min-width: 1440px) {
-  .VPLocalNav.has-sidebar {
-    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
-  }
-}
-
 .container {
   display: flex;
   justify-content: space-between;
@@ -129,9 +117,8 @@ const classes = computed(() => {
 .menu {
   display: flex;
   align-items: center;
-  padding: 12px 24px 11px;
-  line-height: 24px;
-  font-size: 12px;
+  line-height: 2;
+  font-size: 0.75rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
   transition: color 0.5s;
@@ -142,30 +129,26 @@ const classes = computed(() => {
   transition: color 0.25s;
 }
 
-@media (min-width: 768px) {
-  .menu {
-    padding: 0 32px;
-  }
-}
-
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .menu {
     display: none;
   }
 }
 
 .menu-icon {
-  margin-right: 8px;
-  font-size: 14px;
+  margin-inline-end: 0.5rem;
+  font-size: 0.875rem;
 }
 
-.VPOutlineDropdown {
-  padding: 12px 24px 11px;
+.menu,
+:deep(.VPLocalNavOutlineDropdown > button) {
+  padding: 0.75rem 1.5rem 0.6875rem;
 }
 
-@media (min-width: 768px) {
-  .VPOutlineDropdown {
-    padding: 12px 32px 11px;
+@media (min-width: 48rem) {
+  .menu,
+  :deep(.VPLocalNavOutlineDropdown > button) {
+    padding: 0.75rem 2rem 0.6875rem;
   }
 }
 </style>

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

@@ -0,0 +1,8 @@
+import type { DefaultTheme } from 'vitepress/theme';
+type __VLS_Props = {
+    headers: DefaultTheme.OutlineItem[];
+    navHeight: 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;