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

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

@@ -0,0 +1,23 @@
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_10: {}, __VLS_12: {}, __VLS_19: {}, __VLS_21: {};
+type __VLS_Slots = {} & {
+    'aside-top'?: (props: typeof __VLS_1) => any;
+} & {
+    'aside-outline-before'?: (props: typeof __VLS_3) => any;
+} & {
+    'aside-outline-after'?: (props: typeof __VLS_10) => any;
+} & {
+    'aside-ads-before'?: (props: typeof __VLS_12) => any;
+} & {
+    'aside-ads-after'?: (props: typeof __VLS_19) => any;
+} & {
+    'aside-bottom'?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/VPDocAside.vue

@@ -1,9 +1,8 @@
-<script setup lang="ts">
-import { useData } from '../composables/data'
-import VPDocAsideOutline from './VPDocAsideOutline.vue'
-import VPDocAsideCarbonAds from './VPDocAsideCarbonAds.vue'
-
-const { theme } = useData()
+<script setup>
+import { useData } from "../composables/data";
+import VPDocAsideCarbonAds from "./VPDocAsideCarbonAds.vue";
+import VPDocAsideOutline from "./VPDocAsideOutline.vue";
+const { theme } = useData();
 </script>
 
 <template>
@@ -37,10 +36,10 @@ const { theme } = useData()
 
 .VPDocAside :deep(.spacer + .VPDocAsideSponsors),
 .VPDocAside :deep(.spacer + .VPDocAsideCarbonAds) {
-  margin-top: 24px;
+  margin-top: 1.5rem;
 }
 
 .VPDocAside :deep(.VPDocAsideSponsors + .VPDocAsideCarbonAds) {
-  margin-top: 16px;
+  margin-top: 1rem;
 }
 </style>

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

@@ -0,0 +1,7 @@
+import type { DefaultTheme } from 'vitepress/theme';
+type __VLS_Props = {
+    carbonAds: DefaultTheme.CarbonAdsOptions;
+};
+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/VPDocAsideCarbonAds.vue

@@ -1,14 +1,10 @@
-<script setup lang="ts">
-import { defineAsyncComponent } from 'vue'
-import type { DefaultTheme } from 'vitepress/theme'
-
-defineProps<{
-  carbonAds: DefaultTheme.CarbonAdsOptions
-}>()
-
-const VPCarbonAds = __CARBON__
-  ? defineAsyncComponent(() => import('./VPCarbonAds.vue'))
-  : () => null
+<script setup>
+import { defineAsyncComponent } from "vue";
+defineProps({ carbonAds: {
+	type: Object,
+	required: true
+} });
+const VPCarbonAds = __CARBON__ ? defineAsyncComponent(() => import("./VPCarbonAds.vue")) : () => null;
 </script>
 
 <template>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,34 +1,21 @@
-<script setup lang="ts">
-import { onContentUpdated } from 'vitepress'
-import { ref, shallowRef } from 'vue'
-import { useData } from '../composables/data'
-import {
-  getHeaders,
-  resolveTitle,
-  useActiveAnchor,
-  type MenuItem
-} from '../composables/outline'
-import VPDocOutlineItem from './VPDocOutlineItem.vue'
-
-const { frontmatter, theme } = useData()
-
-const headers = shallowRef<MenuItem[]>([])
-
-onContentUpdated(() => {
-  headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
-})
-
-const container = ref()
-const marker = ref()
-
-useActiveAnchor(container, marker)
+<script setup>
+import { useTemplateRef } from "vue";
+import { useData } from "../composables/data";
+import { useLayout } from "../composables/layout";
+import { resolveTitle, useActiveAnchor } from "../composables/outline";
+import VPDocOutlineItem from "./VPDocOutlineItem.vue";
+const { theme } = useData();
+const container = useTemplateRef("container");
+const marker = useTemplateRef("marker");
+const { headers, hasLocalNav } = useLayout();
+useActiveAnchor(container, marker);
 </script>
 
 <template>
   <nav
     aria-labelledby="doc-outline-aria-label"
     class="VPDocAsideOutline"
-    :class="{ 'has-outline': headers.length > 0 }"
+    :class="{ 'has-outline': hasLocalNav }"
     ref="container"
   >
     <div class="content">
@@ -43,7 +30,7 @@ useActiveAnchor(container, marker)
         {{ resolveTitle(theme) }}
       </div>
 
-      <VPDocOutlineItem :headers="headers" :root="true" />
+      <VPDocOutlineItem :headers :root="true" />
     </div>
   </nav>
 </template>
@@ -59,31 +46,28 @@ useActiveAnchor(container, marker)
 
 .content {
   position: relative;
-  border-left: 1px solid var(--vp-c-divider);
-  padding-left: 16px;
-  font-size: 13px;
+  border-inline-start: 1px solid var(--vp-c-divider);
+  padding-inline-start: 1rem;
+  font-size: 0.8125rem;
   font-weight: 500;
 }
 
 .outline-marker {
   position: absolute;
-  top: 32px;
-  left: -1px;
+  top: 2rem;
+  inset-inline-start: -1px;
   z-index: 0;
   opacity: 0;
   width: 2px;
   border-radius: 2px;
-  height: 18px;
+  height: 1.125rem;
   background-color: var(--vp-c-brand-1);
-  transition:
-    top 0.25s cubic-bezier(0, 1, 0.5, 1),
-    background-color 0.5s,
-    opacity 0.25s;
+  transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s, opacity 0.25s;
 }
 
 .outline-title {
-  line-height: 32px;
-  font-size: 14px;
+  line-height: 2.2857143;
+  font-size: 0.875rem;
   font-weight: 600;
 }
 </style>

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

@@ -0,0 +1,10 @@
+import type { Sponsors } from './VPSponsors.vue';
+import type { Sponsor } from './VPSponsorsGrid.vue';
+type __VLS_Props = {
+    tier?: string;
+    size?: 'xmini' | 'mini' | 'small';
+    data: Sponsors[] | Sponsor[];
+};
+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/VPDocAsideSponsors.vue

@@ -1,17 +1,23 @@
-<script setup lang="ts">
-import type { Sponsors } from './VPSponsors.vue'
-import type { Sponsor } from './VPSponsorsGrid.vue'
-import VPSponsors from './VPSponsors.vue'
-
-defineProps<{
-  tier?: string
-  size?: 'xmini' | 'mini' | 'small'
-  data: Sponsors[] | Sponsor[]
-}>()
+<script setup>
+import VPSponsors from "./VPSponsors.vue";
+defineProps({
+	tier: {
+		type: String,
+		required: false
+	},
+	size: {
+		type: String,
+		required: false
+	},
+	data: {
+		type: Array,
+		required: true
+	}
+});
 </script>
 
 <template>
   <div class="VPDocAsideSponsors">
-    <VPSponsors mode="aside" :tier="tier" :size="size" :data="data" />
+    <VPSponsors mode="aside" :tier :size :data />
   </div>
 </template>

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

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    'doc-footer-before'?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/VPDocFooter.vue

@@ -1,27 +1,16 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useData } from '../composables/data'
-import { useEditLink } from '../composables/edit-link'
-import { usePrevNext } from '../composables/prev-next'
-import VPLink from './VPLink.vue'
-import VPDocFooterLastUpdated from './VPDocFooterLastUpdated.vue'
-
-const { theme, page, frontmatter } = useData()
-
-const editLink = useEditLink()
-const control = usePrevNext()
-
-const hasEditLink = computed(
-  () => theme.value.editLink && frontmatter.value.editLink !== false
-)
-const hasLastUpdated = computed(() => page.value.lastUpdated)
-const showFooter = computed(
-  () =>
-    hasEditLink.value ||
-    hasLastUpdated.value ||
-    control.value.prev ||
-    control.value.next
-)
+<script setup>
+import { computed } from "vue";
+import { useData } from "../composables/data";
+import { useEditLink } from "../composables/edit-link";
+import { usePrevNext } from "../composables/prev-next";
+import VPDocFooterLastUpdated from "./VPDocFooterLastUpdated.vue";
+import VPLink from "./VPLink.vue";
+const { theme, page, frontmatter } = useData();
+const editLink = useEditLink();
+const control = usePrevNext();
+const hasEditLink = computed(() => theme.value.editLink && frontmatter.value.editLink !== false);
+const hasLastUpdated = computed(() => page.value.lastUpdated);
+const showFooter = computed(() => hasEditLink.value || hasLastUpdated.value || control.value.prev || control.value.next);
 </script>
 
 <template>
@@ -53,12 +42,14 @@ const showFooter = computed(
           v-if="control.prev?.link"
           class="pager-link prev"
           :href="control.prev.link"
+          :target="control.prev.target"
+          :rel="control.prev.rel"
         >
           <span
             class="desc"
             v-html="theme.docFooter?.prev || 'Previous page'"
           ></span>
-          <span class="title" v-html="control.prev.text"></span>
+          <span class="title"><bdi v-html="control.prev.text" /></span>
         </VPLink>
       </div>
       <div class="pager">
@@ -66,12 +57,14 @@ const showFooter = computed(
           v-if="control.next?.link"
           class="pager-link next"
           :href="control.next.link"
+          :target="control.next.target"
+          :rel="control.next.rel"
         >
           <span
             class="desc"
             v-html="theme.docFooter?.next || 'Next page'"
           ></span>
-          <span class="title" v-html="control.next.text"></span>
+          <span class="title"><bdi v-html="control.next.text" /></span>
         </VPLink>
       </div>
     </nav>
@@ -80,19 +73,19 @@ const showFooter = computed(
 
 <style scoped>
 .VPDocFooter {
-  margin-top: 64px;
+  margin-top: 4rem;
 }
 
 .edit-info {
-  padding-bottom: 18px;
+  padding-bottom: 1.125rem;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .edit-info {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-bottom: 14px;
+    padding-bottom: 0.875rem;
   }
 }
 
@@ -100,8 +93,8 @@ const showFooter = computed(
   display: flex;
   align-items: center;
   border: 0;
-  line-height: 32px;
-  font-size: 14px;
+  line-height: 2.2857143;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-brand-1);
   transition: color 0.25s;
@@ -112,28 +105,28 @@ const showFooter = computed(
 }
 
 .edit-link-icon {
-  margin-right: 8px;
+  margin-inline-end: 0.5rem;
 }
 
 .prev-next {
   border-top: 1px solid var(--vp-c-divider);
-  padding-top: 24px;
+  padding-top: 1.5rem;
   display: grid;
-  grid-row-gap: 8px;
+  grid-row-gap: 0.5rem;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .prev-next {
     grid-template-columns: repeat(2, 1fr);
-    grid-column-gap: 16px;
+    grid-column-gap: 1rem;
   }
 }
 
 .pager-link {
   display: block;
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 11px 16px 13px;
+  border-radius: 0.5rem;
+  padding: 0.6875rem 1rem 0.8125rem;
   width: 100%;
   height: 100%;
   transition: border-color 0.25s;
@@ -144,22 +137,22 @@ const showFooter = computed(
 }
 
 .pager-link.next {
-  margin-left: auto;
-  text-align: right;
+  margin-inline-start: auto;
+  text-align: end;
 }
 
 .desc {
   display: block;
-  line-height: 20px;
-  font-size: 12px;
+  line-height: 1.6666667;
+  font-size: 0.75rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
 
 .title {
   display: block;
-  line-height: 20px;
-  font-size: 14px;
+  line-height: 1.4285714;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-brand-1);
   transition: color 0.25s;

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,49 +1,50 @@
-<script setup lang="ts">
-import { ref, computed, watchEffect, onMounted } from 'vue'
-import { useData } from '../composables/data'
-
-const { theme, page, lang } = useData()
-
-const date = computed(
-  () => new Date(page.value.lastUpdated!)
-)
-const isoDatetime = computed(() => date.value.toISOString())
-const datetime = ref('')
-
+<script setup>
+import { useNavigatorLanguage } from "@vueuse/core";
+import { computed, onMounted, shallowRef, useTemplateRef, watchEffect } from "vue";
+import { useData } from "../composables/data";
+const { theme, page, lang: pageLang } = useData();
+const { language: browserLang } = useNavigatorLanguage();
+const timeRef = useTemplateRef("timeRef");
+const date = computed(() => new Date(page.value.lastUpdated));
+const isoDatetime = computed(() => date.value.toISOString());
+const datetime = shallowRef("");
 // set time on mounted hook to avoid hydration mismatch due to
 // potential differences in timezones of the server and clients
 onMounted(() => {
-  watchEffect(() => {
-    datetime.value = new Intl.DateTimeFormat(
-      theme.value.lastUpdated?.formatOptions?.forceLocale ? lang.value : undefined,
-      theme.value.lastUpdated?.formatOptions ?? {
-        dateStyle: 'short',
-        timeStyle: 'short'
-      }
-    ).format(date.value)
-  })
-})
+	watchEffect(() => {
+		const lang = theme.value.lastUpdated?.formatOptions?.forceLocale ? pageLang.value : browserLang.value;
+		datetime.value = new Intl.DateTimeFormat(lang, theme.value.lastUpdated?.formatOptions ?? {
+			dateStyle: "medium",
+			timeStyle: "medium"
+		}).format(date.value);
+		if (lang && pageLang.value !== lang) {
+			timeRef.value?.setAttribute("lang", lang);
+		} else {
+			timeRef.value?.removeAttribute("lang");
+		}
+	});
+});
 </script>
 
 <template>
   <p class="VPLastUpdated">
-    {{ theme.lastUpdated?.text || theme.lastUpdatedText || 'Last updated' }}:
-    <time :datetime="isoDatetime">{{ datetime }}</time>
+    <bdi>{{ theme.lastUpdated?.text || "Last updated" }}:</bdi>
+    <time ref="timeRef" dir="auto" :datetime="isoDatetime">{{ datetime }}</time>
   </p>
 </template>
 
 <style scoped>
 .VPLastUpdated {
-  line-height: 24px;
-  font-size: 14px;
+  line-height: 1.7142857;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .VPLastUpdated {
-    line-height: 32px;
-    font-size: 14px;
+    line-height: 2.2857143;
+    font-size: 0.875rem;
     font-weight: 500;
   }
 }

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

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

@@ -1,22 +1,22 @@
-<script setup lang="ts">
-import type { MenuItem } from '../composables/outline'
-
-defineProps<{
-  headers: MenuItem[]
-  root?: boolean
-}>()
-
-function onClick({ target: el }: Event) {
-  const id = (el as HTMLAnchorElement).href!.split('#')[1]
-  const heading = document.getElementById(decodeURIComponent(id))
-  heading?.focus({ preventScroll: true })
-}
+<script setup>
+defineProps({
+	headers: {
+		type: Array,
+		required: true
+	},
+	root: {
+		type: Boolean,
+		required: false
+	}
+});
 </script>
 
 <template>
   <ul class="VPDocOutlineItem" :class="root ? 'root' : 'nested'">
     <li v-for="{ children, link, title } in headers">
-      <a class="outline-link" :href="link" @click="onClick" :title="title">{{ title }}</a>
+      <a class="outline-link" :href="link" :title>
+        <bdi>{{ title }}</bdi>
+      </a>
       <template v-if="children?.length">
         <VPDocOutlineItem :headers="children" />
       </template>
@@ -31,16 +31,17 @@ function onClick({ target: el }: Event) {
 }
 
 .nested {
-  padding-right: 16px;
-  padding-left: 16px;
+  padding-inline: 1rem;
 }
 
 .outline-link {
   display: block;
-  line-height: 32px;
-  font-size: 14px;
+  line-height: 2.2857143;
+  font-size: 0.875rem;
   font-weight: 400;
   color: var(--vp-c-text-2);
+  scroll-margin-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 2rem);
+  scroll-margin-bottom: 3rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -54,6 +55,6 @@ function onClick({ target: el }: Event) {
 }
 
 .outline-link.nested {
-  padding-left: 13px;
+  padding-inline-start: 0.8125rem;
 }
 </style>

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

@@ -0,0 +1,13 @@
+import type { DefaultTheme } from 'vitepress/theme';
+type __VLS_Props = {
+    icon?: DefaultTheme.FeatureIcon;
+    title: string;
+    details?: string;
+    link?: string;
+    linkText?: string;
+    rel?: string;
+    target?: 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;