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

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

@@ -1,31 +1,31 @@
-<script setup lang="ts">
-import { withBase } from 'vitepress'
-import { useData } from './composables/data'
-import { useLangs } from './composables/langs'
-
-const { theme } = useData()
-const { currentLang } = useLangs()
+<script setup>
+import { withBase } from "vitepress";
+import { useData } from "./composables/data";
+import { useLangs } from "./composables/langs";
+const { theme } = useData();
+const { currentLang } = useLangs();
 </script>
 
 <template>
   <div class="NotFound">
-    <p class="code">{{ theme.notFound?.code ?? '404' }}</p>
-    <h1 class="title">{{ theme.notFound?.title ?? 'PAGE NOT FOUND' }}</h1>
+    <p class="code">{{ theme.notFound?.code ?? "404" }}</p>
+    <h1 class="title">
+      <bdi>{{ theme.notFound?.title ?? "PAGE NOT FOUND" }}</bdi>
+    </h1>
     <div class="divider" />
     <blockquote class="quote">
-      {{
-        theme.notFound?.quote ??
-        "But if you don't change your direction, and if you keep looking, you may end up where you are heading."
-      }}
+      <bdi>{{
+        theme.notFound?.quote ?? "But if you don't change your direction, and if you keep looking, you may end up where you are heading."
+      }}</bdi>
     </blockquote>
 
     <div class="action">
       <a
         class="link"
-        :href="withBase(currentLang.link)"
+        :href="withBase(theme.notFound?.link ?? currentLang.link)"
         :aria-label="theme.notFound?.linkLabel ?? 'go to home'"
       >
-        {{ theme.notFound?.linkText ?? 'Take me home' }}
+        <bdi>{{ theme.notFound?.linkText ?? "Take me home" }}</bdi>
       </a>
     </div>
   </div>
@@ -33,60 +33,58 @@ const { currentLang } = useLangs()
 
 <style scoped>
 .NotFound {
-  padding: 64px 24px 96px;
+  padding: 4rem 1.5rem 6rem;
   text-align: center;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .NotFound {
-    padding: 96px 32px 168px;
+    padding: 6rem 2rem 10.5rem;
   }
 }
 
 .code {
-  line-height: 64px;
-  font-size: 64px;
+  line-height: 1;
+  font-size: 4rem;
   font-weight: 600;
 }
 
 .title {
-  padding-top: 12px;
-  letter-spacing: 2px;
-  line-height: 20px;
-  font-size: 20px;
+  padding-top: 0.75rem;
+  letter-spacing: 0.1em;
+  line-height: 1;
+  font-size: 1.25rem;
   font-weight: 700;
 }
 
 .divider {
-  margin: 24px auto 18px;
-  width: 64px;
+  margin: 1.5rem auto 1.125rem;
+  width: 4rem;
   height: 1px;
   background-color: var(--vp-c-divider);
 }
 
 .quote {
   margin: 0 auto;
-  max-width: 256px;
-  font-size: 14px;
+  max-width: 16rem;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
 
 .action {
-  padding-top: 20px;
+  padding-top: 1.25rem;
 }
 
 .link {
   display: inline-block;
   border: 1px solid var(--vp-c-brand-1);
-  border-radius: 16px;
-  padding: 3px 16px;
-  font-size: 14px;
+  border-radius: 1rem;
+  padding: 0.1875rem 1rem;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-brand-1);
-  transition:
-    border-color 0.25s,
-    color 0.25s;
+  transition: border-color 0.25s, color 0.25s;
 }
 
 .link:hover {

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

@@ -0,0 +1,11 @@
+import type { DefaultTheme } from 'vitepress/theme';
+type __VLS_Props = {
+    algoliaOptions: DefaultTheme.AlgoliaSearchOptions;
+    openRequest?: {
+        target: 'search' | 'askAi' | 'toggleAskAi';
+        nonce: number;
+    } | null;
+};
+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/VPAlgoliaSearchBox.vue

@@ -1,77 +1,209 @@
-<script setup lang="ts">
-import docsearch from '@docsearch/js'
-import { useRouter } from 'vitepress'
-import type { DefaultTheme } from 'vitepress/theme'
-import { nextTick, onMounted, watch } from 'vue'
-import { useData } from '../composables/data'
-
-const props = defineProps<{
-  algolia: DefaultTheme.AlgoliaSearchOptions
-}>()
-
-const router = useRouter()
-const { site, localeIndex, lang } = useData()
-
-type DocSearchProps = Parameters<typeof docsearch>[0]
-
-onMounted(update)
-watch(localeIndex, update)
-
-async function update() {
-  await nextTick()
-  const options = {
-    ...props.algolia,
-    ...props.algolia.locales?.[localeIndex.value]
-  }
-  const rawFacetFilters = options.searchParameters?.facetFilters ?? []
-  const facetFilters = [
-    ...(Array.isArray(rawFacetFilters)
-      ? rawFacetFilters
-      : [rawFacetFilters]
-    ).filter((f) => !f.startsWith('lang:')),
-    `lang:${lang.value}`
-  ]
-  initialize({
-    ...options,
-    searchParameters: {
-      ...options.searchParameters,
-      facetFilters
-    }
-  })
+<script setup>
+import { inBrowser, useRouter } from "vitepress";
+import { nextTick, onUnmounted, watch } from "vue";
+import { useData } from "../composables/data";
+import { buildSidePanelProps, resolveMode, validateCredentials } from "../support/docsearch";
+import "../styles/docsearch.css";
+const props = defineProps({
+	algoliaOptions: {
+		type: Object,
+		required: true
+	},
+	openRequest: {
+		type: [Object, null],
+		required: false
+	}
+});
+const router = useRouter();
+const { site } = useData();
+let cleanup = () => {};
+let docsearchInstance;
+let sidepanelInstance;
+let openOnReady = null;
+let initializeCount = 0;
+let docsearchLoader;
+let sidepanelLoader;
+let lastFocusedElement = null;
+let skipEventDocsearch = false;
+let skipEventSidepanel = false;
+watch(() => props.algoliaOptions, update, { immediate: true });
+onUnmounted(cleanup);
+watch(() => props.openRequest?.nonce, () => {
+	const req = props.openRequest;
+	if (!req) return;
+	if (req.target === "search") {
+		if (docsearchInstance?.isReady) {
+			onBeforeOpen("docsearch", () => docsearchInstance?.open());
+		} else {
+			openOnReady = "search";
+		}
+	} else if (req.target === "toggleAskAi") {
+		if (sidepanelInstance?.isOpen) {
+			sidepanelInstance.close();
+		} else {
+			onBeforeOpen("sidepanel", () => sidepanelInstance?.open());
+		}
+	} else {
+		// askAi - open sidepanel or fallback to docsearch modal
+		if (sidepanelInstance?.isReady) {
+			onBeforeOpen("sidepanel", () => sidepanelInstance?.open());
+		} else if (sidepanelInstance) {
+			openOnReady = "askAi";
+		} else if (docsearchInstance?.isReady) {
+			onBeforeOpen("docsearch", () => docsearchInstance?.openAskAi());
+		} else {
+			openOnReady = "askAi";
+		}
+	}
+}, { immediate: true });
+async function update(options) {
+	if (!inBrowser) return;
+	await nextTick();
+	const askAi = options.askAi;
+	const { valid, ...credentials } = validateCredentials({
+		appId: options.appId ?? askAi?.appId,
+		apiKey: options.apiKey ?? askAi?.apiKey,
+		indexName: options.indexName ?? askAi?.indexName
+	});
+	if (!valid) {
+		console.warn("[vitepress] Algolia search cannot be initialized: missing appId/apiKey/indexName.");
+		return;
+	}
+	await initialize({
+		...options,
+		...credentials
+	});
 }
-
-function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
-  const options = Object.assign<
-    {},
-    DefaultTheme.AlgoliaSearchOptions,
-    Partial<DocSearchProps>
-  >({}, userOptions, {
-    container: '#docsearch',
-
-    navigator: {
-      navigate({ itemUrl }) {
-        router.go(itemUrl)
-      }
-    },
-
-    transformItems(items) {
-      return items.map((item) => {
-        return Object.assign({}, item, {
-          url: getRelativePath(item.url)
-        })
-      })
-    }
-  }) as DocSearchProps
-
-  docsearch(options)
+async function initialize(userOptions) {
+	const currentInitialize = ++initializeCount;
+	// Always tear down previous instances first (e.g. on locale changes)
+	cleanup();
+	const { useSidePanel } = resolveMode(userOptions);
+	const askAi = userOptions.askAi;
+	const { default: docsearch } = await loadDocsearch();
+	if (currentInitialize !== initializeCount) return;
+	if (useSidePanel && askAi?.sidePanel) {
+		const { default: sidepanel } = await loadSidepanel();
+		if (currentInitialize !== initializeCount) return;
+		sidepanelInstance = sidepanel({
+			...buildSidePanelProps(askAi, userOptions),
+			onOpen: focusInput,
+			onClose: onClose.bind(null, "sidepanel"),
+			onReady: () => {
+				if (openOnReady === "askAi") {
+					openOnReady = null;
+					onBeforeOpen("sidepanel", () => sidepanelInstance?.open());
+				}
+			},
+			keyboardShortcuts: { "Ctrl/Cmd+I": false }
+		});
+	}
+	const options = {
+		...userOptions,
+		container: "#vp-docsearch",
+		navigator: { navigate(item) {
+			router.go(item.itemUrl);
+		} },
+		transformItems: (items) => items.map((item) => ({
+			...item,
+			url: getRelativePath(item.url)
+		})),
+		// When sidepanel is enabled, intercept Ask AI events to open it instead (hybrid mode)
+		...useSidePanel && sidepanelInstance && { interceptAskAiEvent: (initialMessage) => {
+			onBeforeOpen("sidepanel", () => sidepanelInstance?.open(initialMessage));
+			return true;
+		} },
+		onOpen: focusInput,
+		onClose: onClose.bind(null, "docsearch"),
+		onReady: () => {
+			if (openOnReady === "search") {
+				openOnReady = null;
+				onBeforeOpen("docsearch", () => docsearchInstance?.open());
+			} else if (openOnReady === "askAi" && !sidepanelInstance) {
+				// No sidepanel configured, use docsearch modal for askAi
+				openOnReady = null;
+				onBeforeOpen("docsearch", () => docsearchInstance?.openAskAi());
+			}
+		},
+		keyboardShortcuts: {
+			"/": false,
+			"Ctrl/Cmd+K": false
+		}
+	};
+	docsearchInstance = docsearch(options);
+	cleanup = () => {
+		docsearchInstance?.destroy();
+		sidepanelInstance?.destroy();
+		docsearchInstance = undefined;
+		sidepanelInstance = undefined;
+		openOnReady = null;
+		lastFocusedElement = null;
+	};
 }
-
-function getRelativePath(url: string) {
-  const { pathname, hash } = new URL(url, location.origin)
-  return pathname.replace(/\.html$/, site.value.cleanUrls ? '' : '.html') + hash
+function focusInput() {
+	requestAnimationFrame(() => {
+		const input = document.querySelector("#docsearch-input") || document.querySelector("#docsearch-sidepanel textarea");
+		input?.focus();
+	});
+}
+function onBeforeOpen(target, cb) {
+	if (target === "docsearch") {
+		if (sidepanelInstance?.isOpen) {
+			skipEventSidepanel = true;
+			sidepanelInstance.close();
+		} else if (!docsearchInstance?.isOpen) {
+			if (document.activeElement instanceof HTMLElement) {
+				lastFocusedElement = document.activeElement;
+			}
+		}
+	} else if (target === "sidepanel") {
+		if (docsearchInstance?.isOpen) {
+			skipEventDocsearch = true;
+			docsearchInstance.close();
+		} else if (!sidepanelInstance?.isOpen) {
+			if (document.activeElement instanceof HTMLElement) {
+				lastFocusedElement = document.activeElement;
+			}
+		}
+	}
+	setTimeout(cb, 0);
+}
+function onClose(target) {
+	if (target === "docsearch") {
+		if (skipEventDocsearch) {
+			skipEventDocsearch = false;
+			return;
+		}
+	} else if (target === "sidepanel") {
+		if (skipEventSidepanel) {
+			skipEventSidepanel = false;
+			return;
+		}
+	}
+	if (lastFocusedElement) {
+		lastFocusedElement.focus();
+		lastFocusedElement = null;
+	}
+}
+function loadDocsearch() {
+	if (!docsearchLoader) {
+		docsearchLoader = import("@docsearch/js");
+	}
+	return docsearchLoader;
+}
+function loadSidepanel() {
+	if (!sidepanelLoader) {
+		sidepanelLoader = import("@docsearch/sidepanel-js");
+	}
+	return sidepanelLoader;
+}
+function getRelativePath(url) {
+	const { pathname, hash } = new URL(url, location.origin);
+	return pathname.replace(/\.html$/, site.value.cleanUrls ? "" : ".html") + hash;
 }
 </script>
 
 <template>
-  <div id="docsearch" />
+  <div id="vp-docsearch" />
+  <div id="vp-docsearch-sidepanel" />
 </template>

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    show: 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/VPBackdrop.vue

@@ -1,7 +1,8 @@
-<script lang="ts" setup>
-defineProps<{
-  show: boolean
-}>()
+<script setup>
+defineProps({ show: {
+	type: Boolean,
+	required: true
+} });
 </script>
 
 <template>
@@ -13,12 +14,7 @@ defineProps<{
 <style scoped>
 .VPBackdrop {
   position: fixed;
-  top: 0;
-  /*rtl:ignore*/
-  right: 0;
-  bottom: 0;
-  /*rtl:ignore*/
-  left: 0;
+  inset: 0;
   z-index: var(--vp-z-index-backdrop);
   background: var(--vp-backdrop-bg-color);
   transition: opacity 0.5s;
@@ -30,10 +26,10 @@ defineProps<{
 }
 
 .VPBackdrop.fade-leave-active {
-  transition-duration: .25s;
+  transition-duration: 0.25s;
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 80rem) {
   .VPBackdrop {
     display: none;
   }

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

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    text?: string;
+    type?: 'info' | 'note' | 'tip' | 'important' | 'caution' | 'warning' | 'danger';
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    type: "info" | "note" | "tip" | "important" | "caution" | "warning" | "danger";
+}, {}, {}, {}, 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/VPBadge.vue

@@ -1,15 +1,19 @@
-<script setup lang="ts">
-interface Props {
-  text?: string
-  type?: 'info' | 'tip' | 'warning' | 'danger'
-}
-withDefaults(defineProps<Props>(), {
-  type: 'tip'
-})
+<script setup>
+defineProps({
+	text: {
+		type: String,
+		required: false
+	},
+	type: {
+		type: String,
+		required: false,
+		default: "tip"
+	}
+});
 </script>
 
 <template>
-  <span class="VPBadge" :class="type">
+  <span class="VPBadge" :class="type" dir="auto">
     <slot>{{ text }}</slot>
   </span>
 </template>
@@ -17,36 +21,37 @@ withDefaults(defineProps<Props>(), {
 <style>
 .VPBadge {
   display: inline-block;
-  margin-left: 2px;
+  margin-inline-start: 0.125rem;
   border: 1px solid transparent;
-  border-radius: 12px;
-  padding: 0 10px;
-  line-height: 22px;
-  font-size: 12px;
+  border-radius: 0.75rem;
+  padding: 0 0.625rem;
+  line-height: 1.8333333;
+  font-size: 0.75rem;
   font-weight: 500;
-  transform: translateY(-2px);
+  white-space: nowrap;
+  transform: translateY(-0.125rem);
 }
 
 .VPBadge.small {
-  padding: 0 6px;
-  line-height: 18px;
-  font-size: 10px;
-  transform: translateY(-8px);
+  padding: 0 0.375rem;
+  line-height: 1.8;
+  font-size: 0.625rem;
+  transform: translateY(-0.5rem);
 }
 
 .VPDocFooter .VPBadge {
   display: none;
 }
 
-.vp-doc h1 > .VPBadge {
-  margin-top: 4px;
-  vertical-align: top;
+.vp-doc h1 > .VPBadge,
+.vp-doc h2 > .VPBadge {
+  margin: 0;
+  margin-inline-start: 0.125rem;
+  vertical-align: middle;
 }
 
 .vp-doc h2 > .VPBadge {
-  margin-top: 3px;
-  padding: 0 8px;
-  vertical-align: top;
+  padding: 0 0.5rem;
 }
 
 .vp-doc h3 > .VPBadge {
@@ -57,7 +62,7 @@ withDefaults(defineProps<Props>(), {
 .vp-doc h5 > .VPBadge,
 .vp-doc h6 > .VPBadge {
   vertical-align: middle;
-  line-height: 18px;
+  line-height: 1.5;
 }
 
 .VPBadge.info {
@@ -66,12 +71,30 @@ withDefaults(defineProps<Props>(), {
   background-color: var(--vp-badge-info-bg);
 }
 
+.VPBadge.note {
+  border-color: var(--vp-badge-note-border);
+  color: var(--vp-badge-note-text);
+  background-color: var(--vp-badge-note-bg);
+}
+
 .VPBadge.tip {
   border-color: var(--vp-badge-tip-border);
   color: var(--vp-badge-tip-text);
   background-color: var(--vp-badge-tip-bg);
 }
 
+.VPBadge.important {
+  border-color: var(--vp-badge-important-border);
+  color: var(--vp-badge-important-text);
+  background-color: var(--vp-badge-important-bg);
+}
+
+.VPBadge.caution {
+  border-color: var(--vp-badge-caution-border);
+  color: var(--vp-badge-caution-text);
+  background-color: var(--vp-badge-caution-bg);
+}
+
 .VPBadge.warning {
   border-color: var(--vp-badge-warning-border);
   color: var(--vp-badge-warning-text);

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

@@ -0,0 +1,25 @@
+interface Props {
+    tag?: string;
+    size?: 'medium' | 'big';
+    theme?: 'brand' | 'alt' | 'sponsor';
+    text?: string;
+    href?: string;
+    target?: string;
+    rel?: string;
+}
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: "big" | "medium";
+    theme: "alt" | "brand" | "sponsor";
+}, {}, {}, {}, 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;
+    };
+};