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

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

@@ -1,51 +1,68 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { normalizeLink } from '../support/utils'
-import { EXTERNAL_URL_RE } from '../../shared'
-
-interface Props {
-  tag?: string
-  size?: 'medium' | 'big'
-  theme?: 'brand' | 'alt' | 'sponsor'
-  text: string
-  href?: string
-  target?: string;
-  rel?: string;
-}
-const props = withDefaults(defineProps<Props>(), {
-  size: 'medium',
-  theme: 'brand'
-})
-
-const isExternal = computed(
-  () => props.href && EXTERNAL_URL_RE.test(props.href)
-)
-
+<script setup>
+import { computed } from "vue";
+import { EXTERNAL_URL_RE } from "../../shared";
+import { normalizeLink } from "../support/utils";
+const props = defineProps({
+	tag: {
+		type: String,
+		required: false
+	},
+	size: {
+		type: String,
+		required: false,
+		default: "medium"
+	},
+	theme: {
+		type: String,
+		required: false,
+		default: "brand"
+	},
+	text: {
+		type: String,
+		required: false
+	},
+	href: {
+		type: String,
+		required: false
+	},
+	target: {
+		type: String,
+		required: false
+	},
+	rel: {
+		type: String,
+		required: false
+	}
+});
+const isExternal = computed(() => props.href && EXTERNAL_URL_RE.test(props.href));
 const component = computed(() => {
-  return props.tag || (props.href ? 'a' : 'button')
-})
+	return props.tag || (props.href ? "a" : "button");
+});
 </script>
 
 <template>
   <component
     :is="component"
-    class="VPButton"
+    class="VPButton no-icon"
     :class="[size, theme]"
     :href="href ? normalizeLink(href) : undefined"
     :target="props.target ?? (isExternal ? '_blank' : undefined)"
     :rel="props.rel ?? (isExternal ? 'noreferrer' : undefined)"
   >
-    {{ text }}
+    <slot>{{ text }}</slot>
   </component>
 </template>
 
 <style scoped>
 .VPButton {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border: 1px solid transparent;
   text-align: center;
   font-weight: 600;
   white-space: nowrap;
+  text-decoration: none;
   transition: color 0.25s, border-color 0.25s, background-color 0.25s;
 }
 
@@ -54,17 +71,17 @@ const component = computed(() => {
 }
 
 .VPButton.medium {
-  border-radius: 20px;
-  padding: 0 20px;
-  line-height: 38px;
-  font-size: 14px;
+  height: 2.5rem;
+  border-radius: 1.25rem;
+  padding: 0 1.25rem;
+  font-size: 0.875rem;
 }
 
 .VPButton.big {
-  border-radius: 24px;
-  padding: 0 24px;
-  line-height: 46px;
-  font-size: 16px;
+  height: 3rem;
+  border-radius: 1.5rem;
+  padding: 0 1.5rem;
+  font-size: 1rem;
 }
 
 .VPButton.brand {

package/dist/client/theme-default/components/VPCarbonAds.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/VPCarbonAds.vue

@@ -1,51 +1,50 @@
-<script setup lang="ts">
-import type { DefaultTheme } from 'vitepress/theme'
-import { ref, watch, onMounted } from 'vue'
-import { useAside } from '../composables/aside'
-import { useData } from '../composables/data'
-
-const { page } = useData()
-const props = defineProps<{
-  carbonAds: DefaultTheme.CarbonAdsOptions
-}>()
-
-const carbonOptions = props.carbonAds
-
-const { isAsideEnabled } = useAside()
-const container = ref()
-
-let isInitialized = false
-
+<script setup>
+import { useMediaQuery } from "@vueuse/core";
+import { useRoute } from "vitepress";
+import { onMounted, useTemplateRef, watch } from "vue";
+const route = useRoute();
+const props = defineProps({ carbonAds: {
+	type: Object,
+	required: true
+} });
+const carbonOptions = props.carbonAds;
+const isAsideVisible = useMediaQuery("(min-width: 80rem)");
+const container = useTemplateRef("container");
+let isInitialized = false;
 function init() {
-  if (!isInitialized) {
-    isInitialized = true
-    const s = document.createElement('script')
-    s.id = '_carbonads_js'
-    s.src = `//cdn.carbonads.com/carbon.js?serve=${carbonOptions.code}&placement=${carbonOptions.placement}`
-    s.async = true
-    container.value.appendChild(s)
-  }
+	if (!isInitialized) {
+		isInitialized = true;
+		const params = new URLSearchParams({
+			serve: carbonOptions.code,
+			placement: carbonOptions.placement,
+			format: carbonOptions?.format || "classic"
+		});
+		const s = document.createElement("script");
+		s.id = "_carbonads_js";
+		s.src = `//cdn.carbonads.com/carbon.js?${params.toString()}`;
+		s.async = true;
+		container.value?.appendChild(s);
+	}
 }
-
-watch(() => page.value.relativePath, () => {
-  if (isInitialized && isAsideEnabled.value) {
-    ;(window as any)._carbonads?.refresh()
-  }
-})
-
+watch(() => route.data.relativePath, () => {
+	if (isInitialized && isAsideVisible.value) {
+		;
+		window._carbonads?.refresh();
+	}
+});
 // no need to account for option changes during dev, we can just
 // refresh the page
 if (carbonOptions) {
-  onMounted(() => {
-    // if the page is loaded when aside is active, load carbon directly.
-    // otherwise, only load it if the page resizes to wide enough. this avoids
-    // loading carbon at all on mobile where it's never shown
-    if (isAsideEnabled.value) {
-      init()
-    } else {
-      watch(isAsideEnabled, (wide) => wide && init())
-    }
-  })
+	onMounted(() => {
+		// if the page is loaded when aside is active, load carbon directly.
+		// otherwise, only load it if the page resizes to wide enough. this avoids
+		// loading carbon at all on mobile where it's never shown
+		if (isAsideVisible.value) {
+			init();
+		} else {
+			watch(isAsideVisible, (visible) => visible && init());
+		}
+	});
 }
 </script>
 
@@ -58,25 +57,25 @@ if (carbonOptions) {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 24px;
-  border-radius: 12px;
-  min-height: 256px;
+  padding: 1.5rem;
+  border-radius: 0.75rem;
+  min-height: 16rem;
   text-align: center;
-  line-height: 18px;
-  font-size: 12px;
+  line-height: 1.5;
+  font-size: 0.75rem;
   font-weight: 500;
   background-color: var(--vp-carbon-ads-bg-color);
 }
 
 .VPCarbonAds :deep(img) {
   margin: 0 auto;
-  border-radius: 6px;
+  border-radius: 0.375rem;
 }
 
 .VPCarbonAds :deep(.carbon-text) {
   display: block;
   margin: 0 auto;
-  padding-top: 12px;
+  padding-top: 0.75rem;
   color: var(--vp-carbon-ads-text-color);
   transition: color 0.25s;
 }
@@ -87,8 +86,8 @@ if (carbonOptions) {
 
 .VPCarbonAds :deep(.carbon-poweredby) {
   display: block;
-  padding-top: 6px;
-  font-size: 11px;
+  padding-top: 0.375rem;
+  font-size: 0.6875rem;
   font-weight: 500;
   color: var(--vp-carbon-ads-poweredby-color);
   text-transform: uppercase;

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

@@ -0,0 +1,59 @@
+declare var __VLS_1: {}, __VLS_15: {}, __VLS_18: {}, __VLS_27: {}, __VLS_30: {}, __VLS_33: {}, __VLS_36: {}, __VLS_39: {}, __VLS_42: {}, __VLS_45: {}, __VLS_48: {}, __VLS_51: {}, __VLS_54: {}, __VLS_63: {}, __VLS_66: {}, __VLS_69: {}, __VLS_72: {}, __VLS_75: {}, __VLS_78: {}, __VLS_81: {}, __VLS_84: {}, __VLS_87: {}, __VLS_90: {}, __VLS_93: {};
+type __VLS_Slots = {} & {
+    'not-found'?: (props: typeof __VLS_1) => any;
+} & {
+    'page-top'?: (props: typeof __VLS_15) => any;
+} & {
+    'page-bottom'?: (props: typeof __VLS_18) => any;
+} & {
+    'home-hero-before'?: (props: typeof __VLS_27) => any;
+} & {
+    'home-hero-info-before'?: (props: typeof __VLS_30) => any;
+} & {
+    'home-hero-info'?: (props: typeof __VLS_33) => any;
+} & {
+    'home-hero-info-after'?: (props: typeof __VLS_36) => any;
+} & {
+    'home-hero-actions-after'?: (props: typeof __VLS_39) => any;
+} & {
+    'home-hero-actions-before-actions'?: (props: typeof __VLS_42) => any;
+} & {
+    'home-hero-image'?: (props: typeof __VLS_45) => any;
+} & {
+    'home-hero-after'?: (props: typeof __VLS_48) => any;
+} & {
+    'home-features-before'?: (props: typeof __VLS_51) => any;
+} & {
+    'home-features-after'?: (props: typeof __VLS_54) => any;
+} & {
+    'doc-top'?: (props: typeof __VLS_63) => any;
+} & {
+    'doc-bottom'?: (props: typeof __VLS_66) => any;
+} & {
+    'doc-footer-before'?: (props: typeof __VLS_69) => any;
+} & {
+    'doc-before'?: (props: typeof __VLS_72) => any;
+} & {
+    'doc-after'?: (props: typeof __VLS_75) => any;
+} & {
+    'aside-top'?: (props: typeof __VLS_78) => any;
+} & {
+    'aside-outline-before'?: (props: typeof __VLS_81) => any;
+} & {
+    'aside-outline-after'?: (props: typeof __VLS_84) => any;
+} & {
+    'aside-ads-before'?: (props: typeof __VLS_87) => any;
+} & {
+    'aside-ads-after'?: (props: typeof __VLS_90) => any;
+} & {
+    'aside-bottom'?: (props: typeof __VLS_93) => 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/VPContent.vue

@@ -1,13 +1,16 @@
-<script setup lang="ts">
-import NotFound from '../NotFound.vue'
-import { useData } from '../composables/data'
-import { useSidebar } from '../composables/sidebar'
-import VPDoc from './VPDoc.vue'
-import VPHome from './VPHome.vue'
-import VPPage from './VPPage.vue'
-
-const { page, frontmatter } = useData()
-const { hasSidebar } = useSidebar()
+<script setup>
+import { resolveDynamicComponent } from "vue";
+import { useData } from "../composables/data";
+import { useLayout } from "../composables/layout";
+import NotFound from "../NotFound.vue";
+import VPDoc from "./VPDoc.vue";
+import VPHome from "./VPHome.vue";
+import VPPage from "./VPPage.vue";
+const { page, frontmatter } = useData();
+const { isHome, hasSidebar } = useLayout();
+function isRegistered(component) {
+	return typeof resolveDynamicComponent(component) !== "string";
+}
 </script>
 
 <template>
@@ -15,35 +18,31 @@ const { hasSidebar } = useSidebar()
     class="VPContent"
     id="VPContent"
     :class="{
-      'has-sidebar': hasSidebar,
-      'is-home': frontmatter.layout === 'home'
-    }"
+	'has-sidebar': hasSidebar,
+	'is-home': isHome
+}"
   >
     <slot name="not-found" v-if="page.isNotFound"><NotFound /></slot>
 
-    <VPPage v-else-if="frontmatter.layout === 'page'">
+    <VPPage v-else-if="frontmatter.layout === 'page' && !isRegistered('page')">
       <template #page-top><slot name="page-top" /></template>
       <template #page-bottom><slot name="page-bottom" /></template>
     </VPPage>
 
-    <VPHome v-else-if="frontmatter.layout === 'home'">
+    <VPHome v-else-if="frontmatter.layout === 'home' && !isRegistered('home')">
       <template #home-hero-before><slot name="home-hero-before" /></template>
       <template #home-hero-info-before><slot name="home-hero-info-before" /></template>
       <template #home-hero-info><slot name="home-hero-info" /></template>
       <template #home-hero-info-after><slot name="home-hero-info-after" /></template>
       <template #home-hero-actions-after><slot name="home-hero-actions-after" /></template>
+      <template #home-hero-actions-before-actions><slot name="home-hero-actions-before-actions" /></template>
       <template #home-hero-image><slot name="home-hero-image" /></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>
 
-    <component
-      v-else-if="frontmatter.layout && frontmatter.layout !== 'doc'"
-      :is="frontmatter.layout"
-    />
-
-    <VPDoc v-else>
+    <VPDoc v-else-if="(!frontmatter.layout || frontmatter.layout === 'doc') && !isRegistered('doc')">
       <template #doc-top><slot name="doc-top" /></template>
       <template #doc-bottom><slot name="doc-bottom" /></template>
 
@@ -58,6 +57,8 @@ const { hasSidebar } = useSidebar()
       <template #aside-ads-after><slot name="aside-ads-after" /></template>
       <template #aside-bottom><slot name="aside-bottom" /></template>
     </VPDoc>
+
+    <component v-else :is="frontmatter.layout || 'doc'" />
   </div>
 </template>
 
@@ -78,21 +79,21 @@ const { hasSidebar } = useSidebar()
   margin: 0;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPContent {
     padding-top: var(--vp-nav-height);
   }
 
   .VPContent.has-sidebar {
     margin: var(--vp-layout-top-height, 0px) 0 0;
-    padding-left: var(--vp-sidebar-width);
+    padding-inline-start: var(--vp-sidebar-width);
   }
 }
 
-@media (min-width: 1440px) {
+@media (min-width: 90rem) {
   .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));
+    padding-inline-end: calc((100% - var(--vp-layout-max-width)) / 2);
+    padding-inline-start: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
   }
 }
 </style>

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

@@ -0,0 +1,33 @@
+declare var __VLS_1: {}, __VLS_10: {}, __VLS_13: {}, __VLS_16: {}, __VLS_19: {}, __VLS_22: {}, __VLS_25: {}, __VLS_27: {}, __VLS_41: {}, __VLS_43: {}, __VLS_45: {};
+type __VLS_Slots = {} & {
+    'doc-top'?: (props: typeof __VLS_1) => any;
+} & {
+    'aside-top'?: (props: typeof __VLS_10) => any;
+} & {
+    'aside-bottom'?: (props: typeof __VLS_13) => any;
+} & {
+    'aside-outline-before'?: (props: typeof __VLS_16) => any;
+} & {
+    'aside-outline-after'?: (props: typeof __VLS_19) => any;
+} & {
+    'aside-ads-before'?: (props: typeof __VLS_22) => any;
+} & {
+    'aside-ads-after'?: (props: typeof __VLS_25) => any;
+} & {
+    'doc-before'?: (props: typeof __VLS_27) => any;
+} & {
+    'doc-footer-before'?: (props: typeof __VLS_41) => any;
+} & {
+    'doc-after'?: (props: typeof __VLS_43) => any;
+} & {
+    'doc-bottom'?: (props: typeof __VLS_45) => 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/VPDoc.vue

@@ -1,29 +1,34 @@
-<script setup lang="ts">
-import { useRoute } from 'vitepress'
-import { computed } from 'vue'
-import { useData } from '../composables/data'
-import { useSidebar } from '../composables/sidebar'
-import VPDocAside from './VPDocAside.vue'
-import VPDocFooter from './VPDocFooter.vue'
-
-const { theme } = useData()
-
-const route = useRoute()
-const { hasSidebar, hasAside, leftAside } = useSidebar()
-
-const pageName = computed(() =>
-  route.path.replace(/[./]+/g, '_').replace(/_html$/, '')
-)
+<script setup>
+import { useRoute } from "vitepress";
+import { computed } from "vue";
+import { runtimeBase } from "../../app/utils";
+import { isRelativeBase } from "../../shared";
+import { useData } from "../composables/data";
+import { useLayout } from "../composables/layout";
+import VPDocAside from "./VPDocAside.vue";
+import VPDocFooter from "./VPDocFooter.vue";
+const { theme, site } = useData();
+const route = useRoute();
+const { hasSidebar, hasAside, leftAside } = useLayout();
+const pageName = computed(() => {
+	// the mount point is unknown at build time, so the class must come from
+	// the site-relative path or ssr and hydration disagree
+	const path = isRelativeBase(site.value.base) ? "/" + route.path.slice(runtimeBase().length) : route.path;
+	return path.replace(/[./]+/g, "_").replace(/_html$/, "");
+});
 </script>
 
 <template>
   <div
     class="VPDoc"
-    :class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside }"
+    :class="{
+	'has-sidebar': hasSidebar,
+	'has-aside': hasAside
+}"
   >
     <slot name="doc-top" />
     <div class="container">
-      <div v-if="hasAside" class="aside" :class="{'left-aside': leftAside}">
+      <div v-if="hasAside" class="aside" :class="{ 'left-aside': leftAside }">
         <div class="aside-curtain" />
         <div class="aside-container">
           <div class="aside-content">
@@ -45,10 +50,7 @@ const pageName = computed(() =>
           <main class="main">
             <Content
               class="vp-doc"
-              :class="[
-                pageName,
-                theme.externalLinkIcon && 'external-link-icon-enabled'
-              ]"
+              :class="[pageName, theme.externalLinkIcon && 'external-link-icon-enabled']"
             />
           </main>
           <VPDocFooter>
@@ -64,33 +66,33 @@ const pageName = computed(() =>
 
 <style scoped>
 .VPDoc {
-  padding: 32px 24px 96px;
+  padding: 2rem 1.5rem 6rem;
   width: 100%;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .VPDoc {
-    padding: 48px 32px 128px;
+    padding: 3rem 2rem 8rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPDoc {
-    padding: 48px 32px 0;
+    padding: 3rem 2rem 0;
   }
 
   .VPDoc:not(.has-sidebar) .container {
     display: flex;
     justify-content: center;
-    max-width: 992px;
+    max-width: 62rem;
   }
 
   .VPDoc:not(.has-sidebar) .content {
-    max-width: 752px;
+    max-width: 47rem;
   }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 80rem) {
   .VPDoc .container {
     display: flex;
     justify-content: center;
@@ -101,13 +103,13 @@ const pageName = computed(() =>
   }
 }
 
-@media (min-width: 1440px) {
+@media (min-width: 90rem) {
   .VPDoc:not(.has-sidebar) .content {
-    max-width: 784px;
+    max-width: 49rem;
   }
 
   .VPDoc:not(.has-sidebar) .container {
-    max-width: 1104px;
+    max-width: 69rem;
   }
 }
 
@@ -121,25 +123,26 @@ const pageName = computed(() =>
   display: none;
   order: 2;
   flex-grow: 1;
-  padding-left: 32px;
+  padding-inline-start: 2rem;
   width: 100%;
-  max-width: 256px;
+  max-width: 16rem;
 }
 
 .left-aside {
   order: 1;
-  padding-left: unset;
-  padding-right: 32px;
+  padding-inline-start: unset;
+  padding-inline-end: 2rem;
 }
 
 .aside-container {
   position: fixed;
   top: 0;
-  padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 48px);
-  width: 224px;
+  padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 3rem);
+  width: 14rem;
   height: 100vh;
   overflow-x: hidden;
   overflow-y: auto;
+  overscroll-behavior: contain;
   scrollbar-width: none;
 }
 
@@ -151,16 +154,17 @@ const pageName = computed(() =>
   position: fixed;
   bottom: 0;
   z-index: 10;
-  width: 224px;
-  height: 32px;
+  width: 14rem;
+  height: 2rem;
   background: linear-gradient(transparent, var(--vp-c-bg) 70%);
+  pointer-events: none;
 }
 
 .aside-content {
   display: flex;
   flex-direction: column;
-  min-height: calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px));
-  padding-bottom: 32px;
+  min-height: calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 3rem));
+  padding-bottom: 2rem;
 }
 
 .content {
@@ -169,17 +173,17 @@ const pageName = computed(() =>
   width: 100%;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .content {
-    padding: 0 32px 128px;
+    padding: 0 2rem 8rem;
   }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 80rem) {
   .content {
     order: 1;
     margin: 0;
-    min-width: 640px;
+    min-width: 40rem;
   }
 }
 
@@ -188,6 +192,6 @@ const pageName = computed(() =>
 }
 
 .VPDoc.has-aside .content-container {
-  max-width: 688px;
+  max-width: 43rem;
 }
 </style>