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

package/dist/client/shared.js

@@ -1,152 +1,276 @@
-export const EXTERNAL_URL_RE = /^(?:[a-z]+:|\/\/)/i;
-export const APPEARANCE_KEY = 'vitepress-theme-appearance';
-const HASH_RE = /#.*$/;
+//#region src/client/shared.ts
+const EXTERNAL_URL_RE = /^(?:[a-z]+:|\/\/)/i;
+const APPEARANCE_KEY = "vitepress-theme-appearance";
+const iconNameRE = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+/**
+* Parses a fully qualified `collection:name` icon name, corresponding to
+* the `vpi-<collection>-<name>` class. Returns null for anything else,
+* keeping malformed input out of generated selectors and class attributes.
+*/
+function parseIconName(name) {
+	const colon = name.indexOf(":");
+	if (colon === -1) return null;
+	const collection = name.slice(0, colon);
+	const icon = name.slice(colon + 1);
+	if (!iconNameRE.test(collection) || !iconNameRE.test(icon)) return null;
+	return {
+		collection,
+		icon
+	};
+}
+/**
+* Placeholder prepended to SSR-emitted URLs when base is relative, later
+* replaced with each page's `../` prefix back to the site root.
+*/
+const RELATIVE_BASE_SENTINEL = "/__VP_BASE__/";
+function isRelativeBase(base) {
+	return base === "./";
+}
+/**
+* The ../-prefix that leads from `relativePath`'s directory back to the
+* site root ('./' for root-level pages).
+*/
+function relativePathToRoot(relativePath) {
+	const depth = relativePath.split("/").length - 1;
+	return depth ? "../".repeat(depth) : "./";
+}
+/**
+* Join two paths, collapsing slash collisions but keeping the `//` that
+* follows a protocol.
+*/
+function joinPath(base, path) {
+	const protocol = /^(?:[a-z]+:)?\/\//i.exec(base)?.[0] ?? "";
+	return protocol + `${base.slice(protocol.length)}${path}`.replace(/\/+/g, "/");
+}
+const VP_SOURCE_KEY = "[VP_SOURCE]";
+const UnpackStackView = Symbol("stack-view:unpack");
+const HASH_WITHOUT_FRAGMENT_RE = /#.*?(?=:~:|$)/;
 const HASH_OR_QUERY_RE = /[?#].*$/;
-const INDEX_OR_EXT_RE = /(?:(^|\/)index)?\.(?:md|html)$/;
-export const inBrowser = typeof document !== 'undefined';
-export const notFoundPageData = {
-    relativePath: '404.md',
-    filePath: '',
-    title: '404',
-    description: 'Not Found',
-    headers: [],
-    frontmatter: { sidebar: false, layout: 'page' },
-    lastUpdated: 0,
-    isNotFound: true
+const INDEX_OR_EXT_RE = /(?:(^|\/)index)?(?:\.(?:md|html))?$/;
+const INVALID_CHAR_REGEX = /[\u0000-\u001F"#$&*+,:;<=>?[\]^`{|}\u007F]/g;
+const DRIVE_LETTER_REGEX = /^[a-z]:/i;
+const KNOWN_EXTENSIONS = /* @__PURE__ */ new Set();
+const shellLangs = [
+	"shellscript",
+	"shell",
+	"bash",
+	"sh",
+	"zsh"
+];
+const inBrowser = typeof document !== "undefined";
+const notFoundPageData = {
+	relativePath: "404.md",
+	filePath: "",
+	title: "404",
+	description: "Not Found",
+	headers: [],
+	frontmatter: {
+		sidebar: false,
+		layout: "page"
+	},
+	lastUpdated: 0,
+	isNotFound: true
 };
-export function isActive(currentPath, matchPath, asRegex = false) {
-    if (matchPath === undefined) {
-        return false;
-    }
-    currentPath = normalize(`/${currentPath}`);
-    if (asRegex) {
-        return new RegExp(matchPath).test(currentPath);
-    }
-    if (normalize(matchPath) !== currentPath) {
-        return false;
-    }
-    const hashMatch = matchPath.match(HASH_RE);
-    if (hashMatch) {
-        return (inBrowser ? location.hash : '') === hashMatch[0];
-    }
-    return true;
-}
-export function normalize(path) {
-    return decodeURI(path)
-        .replace(HASH_OR_QUERY_RE, '')
-        .replace(INDEX_OR_EXT_RE, '$1');
-}
-export function isExternal(path) {
-    return EXTERNAL_URL_RE.test(path);
-}
-export function getLocaleForPath(siteData, relativePath) {
-    return (Object.keys(siteData?.locales || {}).find((key) => key !== 'root' &&
-        !isExternal(key) &&
-        isActive(relativePath, `/${key}/`, true)) || 'root');
+function isActive(currentPath, currentHash, matchPath, asRegex = false, skipHashCheck = false) {
+	currentPath = normalize(`/${currentPath}`);
+	if (asRegex) return new RegExp(matchPath).test(currentPath);
+	if (normalize(matchPath) !== currentPath) return false;
+	if (skipHashCheck) return true;
+	const hashMatch = matchPath.match(HASH_WITHOUT_FRAGMENT_RE);
+	if (hashMatch) return currentHash === hashMatch[0];
+	return true;
+}
+function normalize(path) {
+	return decodeURI(path).replace(HASH_OR_QUERY_RE, "").replace(INDEX_OR_EXT_RE, "$1");
+}
+function isExternal(path) {
+	return EXTERNAL_URL_RE.test(path);
+}
+function getLocaleForPath(siteData, relativePath) {
+	return Object.keys(siteData?.locales || {}).find((key) => key !== "root" && !isExternal(key) && isActive(relativePath, "", `^/${key}/`, true)) || "root";
 }
 /**
- * this merges the locales data to the main data by the route
- */
-export function resolveSiteDataByRoute(siteData, relativePath) {
-    const localeIndex = getLocaleForPath(siteData, relativePath);
-    return Object.assign({}, siteData, {
-        localeIndex,
-        lang: siteData.locales[localeIndex]?.lang ?? siteData.lang,
-        dir: siteData.locales[localeIndex]?.dir ?? siteData.dir,
-        title: siteData.locales[localeIndex]?.title ?? siteData.title,
-        titleTemplate: siteData.locales[localeIndex]?.titleTemplate ?? siteData.titleTemplate,
-        description: siteData.locales[localeIndex]?.description ?? siteData.description,
-        head: mergeHead(siteData.head, siteData.locales[localeIndex]?.head ?? []),
-        themeConfig: {
-            ...siteData.themeConfig,
-            ...siteData.locales[localeIndex]?.themeConfig
-        }
-    });
+* Resolves the site data for a route, layering the matched locale and
+* additional configs over the root config.
+*/
+function resolveSiteDataByRoute(siteData, relativePath, filePath) {
+	const localeIndex = getLocaleForPath(siteData, relativePath);
+	const { label, link, markdown, ...localeConfig } = siteData.locales[localeIndex] ?? {};
+	Object.assign(localeConfig, { localeIndex });
+	const additionalConfigs = resolveAdditionalConfig(siteData, filePath || relativePath);
+	if (inBrowser && import.meta.env?.DEV) {
+		localeConfig[VP_SOURCE_KEY] = `locale config (${localeIndex})`;
+		reportConfigLayers(relativePath, [
+			...additionalConfigs,
+			localeConfig,
+			siteData
+		]);
+	}
+	return stackView({ head: mergeHead(siteData.head ?? [], localeConfig.head ?? [], ...additionalConfigs.map((data) => data.head ?? []).reverse()) }, ...additionalConfigs, localeConfig, siteData);
 }
 /**
- * Create the page title string based on config.
- */
-export function createTitle(siteData, pageData) {
-    const title = pageData.title || siteData.title;
-    const template = pageData.titleTemplate ?? siteData.titleTemplate;
-    if (typeof template === 'string' && template.includes(':title')) {
-        return template.replace(/:title/g, title);
-    }
-    const templateString = createTitleTemplate(siteData.title, template);
-    if (title === templateString.slice(3)) {
-        return title;
-    }
-    return `${title}${templateString}`;
+* Create the page title string based on config.
+*/
+function createTitle(siteData, pageData) {
+	const title = pageData.title || siteData.title;
+	const template = pageData.titleTemplate ?? siteData.titleTemplate;
+	if (typeof template === "string" && template.includes(":title")) return template.replace(/:title/g, () => title);
+	const templateString = createTitleTemplate(siteData.title, template);
+	if (title === templateString.slice(3)) return title;
+	return `${title}${templateString}`;
 }
 function createTitleTemplate(siteTitle, template) {
-    if (template === false) {
-        return '';
-    }
-    if (template === true || template === undefined) {
-        return ` | ${siteTitle}`;
-    }
-    if (siteTitle === template) {
-        return '';
-    }
-    return ` | ${template}`;
-}
-function hasTag(head, tag) {
-    const [tagType, tagAttrs] = tag;
-    if (tagType !== 'meta')
-        return false;
-    const keyAttr = Object.entries(tagAttrs)[0]; // First key
-    if (keyAttr == null)
-        return false;
-    return head.some(([type, attrs]) => type === tagType && attrs[keyAttr[0]] === keyAttr[1]);
-}
-export function mergeHead(prev, curr) {
-    return [...prev.filter((tagAttrs) => !hasTag(curr, tagAttrs)), ...curr];
-}
-// https://github.com/rollup/rollup/blob/fec513270c6ac350072425cc045db367656c623b/src/utils/sanitizeFileName.ts
-const INVALID_CHAR_REGEX = /[\u0000-\u001F"#$&*+,:;<=>?[\]^`{|}\u007F]/g;
-const DRIVE_LETTER_REGEX = /^[a-z]:/i;
-export function sanitizeFileName(name) {
-    const match = DRIVE_LETTER_REGEX.exec(name);
-    const driveLetter = match ? match[0] : '';
-    return (driveLetter +
-        name
-            .slice(driveLetter.length)
-            .replace(INVALID_CHAR_REGEX, '_')
-            .replace(/(^|\/)_+(?=[^/]*$)/, '$1'));
-}
-export function slash(p) {
-    return p.replace(/\\/g, '/');
-}
-const KNOWN_EXTENSIONS = new Set();
-export function treatAsHtml(filename) {
-    if (KNOWN_EXTENSIONS.size === 0) {
-        const extraExts = (typeof process === 'object' && process.env?.VITE_EXTRA_EXTENSIONS) ||
-            import.meta.env?.VITE_EXTRA_EXTENSIONS ||
-            '';
-        ('3g2,3gp,aac,ai,apng,au,avif,bin,bmp,cer,class,conf,crl,css,csv,dll,' +
-            'doc,eps,epub,exe,gif,gz,ics,ief,jar,jpe,jpeg,jpg,js,json,jsonld,m4a,' +
-            'man,mid,midi,mjs,mov,mp2,mp3,mp4,mpe,mpeg,mpg,mpp,oga,ogg,ogv,ogx,' +
-            'opus,otf,p10,p7c,p7m,p7s,pdf,png,ps,qt,roff,rtf,rtx,ser,svg,t,tif,' +
-            'tiff,tr,ts,tsv,ttf,txt,vtt,wav,weba,webm,webp,woff,woff2,xhtml,xml,' +
-            'yaml,yml,zip' +
-            (extraExts && typeof extraExts === 'string' ? ',' + extraExts : ''))
-            .split(',')
-            .forEach((ext) => KNOWN_EXTENSIONS.add(ext));
-    }
-    const ext = filename.split('.').pop();
-    return ext == null || !KNOWN_EXTENSIONS.has(ext.toLowerCase());
-}
-// https://github.com/sindresorhus/escape-string-regexp/blob/ba9a4473850cb367936417e97f1f2191b7cc67dd/index.js
-export function escapeRegExp(str) {
-    return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d');
+	if (template === false) return "";
+	if (template === true || template === void 0) return ` | ${siteTitle}`;
+	if (siteTitle === template) return "";
+	return ` | ${template}`;
+}
+function mergeHead(...headArrays) {
+	const merged = [];
+	const keyMap = /* @__PURE__ */ new Map();
+	for (const current of headArrays) for (const tag of current) {
+		const key = getHeadKey(tag);
+		if (key == null) {
+			merged.push(tag);
+			continue;
+		}
+		const existingIndex = keyMap.get(key);
+		if (existingIndex != null) merged[existingIndex] = tag;
+		else {
+			keyMap.set(key, merged.length);
+			merged.push(tag);
+		}
+	}
+	return merged;
+}
+function getHeadKey([type, attrs]) {
+	if (attrs.id) return `id=${attrs.id}`;
+	if (type !== "meta") return;
+	for (const name in attrs) if (name !== "content") return `${name}=${attrs[name]}`;
+}
+function sanitizeFileName(name) {
+	const match = DRIVE_LETTER_REGEX.exec(name);
+	const driveLetter = match ? match[0] : "";
+	return driveLetter + name.slice(driveLetter.length).replace(INVALID_CHAR_REGEX, "_").replace(/(^|\/)_+(?=[^/]*$)/, "$1");
+}
+/**
+* Output path of a page's client chunk relative to `assetsDir`, from its hash
+* map entry. The entry is the chunk's hash, prefixed with the subdirectory the
+* build put the chunk in when `assetsShards` is set (`<shard>/<hash>`), so the
+* client never has to guess the layout.
+*/
+function pageChunkPath(pageName, hashEntry, ext = ".js") {
+	const dir = hashEntry.lastIndexOf("/") + 1;
+	return `${hashEntry.slice(0, dir)}${pageName}.${hashEntry.slice(dir)}${ext}`;
+}
+function slash(p) {
+	return p.replace(/\\/g, "/");
+}
+function treatAsHtml(filename) {
+	if (KNOWN_EXTENSIONS.size === 0) {
+		const extraExts = globalThis.process?.env?.VITE_EXTRA_EXTENSIONS || import.meta.env?.VITE_EXTRA_EXTENSIONS || "";
+		("3g2,3gp,aac,ai,apng,au,avif,bin,bmp,cer,class,conf,crl,css,csv,dll,doc,eps,epub,exe,gif,gz,ics,ief,jar,jpe,jpeg,jpg,js,json,jsonld,m4a,man,mid,midi,mjs,mov,mp2,mp3,mp4,mpe,mpeg,mpg,mpp,oga,ogg,ogv,ogx,opus,otf,p10,p7c,p7m,p7s,pdf,png,ps,qt,roff,rtf,rtx,ser,svg,t,tif,tiff,tr,ts,tsv,ttf,txt,vtt,wav,weba,webm,webp,woff,woff2,xhtml,xml,yaml,yml,zip" + (extraExts && typeof extraExts === "string" ? "," + extraExts : "")).split(",").forEach((ext) => KNOWN_EXTENSIONS.add(ext));
+	}
+	const ext = filename.split(".").pop();
+	return ext == null || !KNOWN_EXTENSIONS.has(ext.toLowerCase());
+}
+const SPACE_OR_PUNCTUATION_RE = /[\n\r\p{Z}\p{P}]+/u;
+const UNSPACED_RUN_RE = /[\p{scx=Han}\p{scx=Hiragana}\p{scx=Katakana}]+|[^\p{scx=Han}\p{scx=Hiragana}\p{scx=Katakana}]+/gu;
+const UNSPACED_START_RE = /^[\p{scx=Han}\p{scx=Hiragana}\p{scx=Katakana}]/u;
+let segmenter;
+/**
+* Default `tokenize` of the local search. It splits on spaces and punctuation
+* like MiniSearch does, and additionally segments the runs of Chinese or
+* Japanese characters inside those words, as they are not separated by spaces.
+* Everything else is kept as MiniSearch would.
+*
+* It is used both when building the index and when searching in the browser.
+* A browser without `Intl.Segmenter` (e.g. Firefox < 125) falls back to the
+* plain split, which can't match multi-word queries against an index that was
+* built with segmentation.
+*
+* @internal
+*/
+function tokenizeSearchText(text) {
+	const terms = text.split(SPACE_OR_PUNCTUATION_RE);
+	if (typeof Intl.Segmenter !== "function") return terms;
+	segmenter ??= new Intl.Segmenter(void 0, { granularity: "word" });
+	return terms.flatMap((term) => term.match(UNSPACED_RUN_RE)?.flatMap((run) => UNSPACED_START_RE.test(run) ? Array.from(segmenter.segment(run), (part) => part.segment) : run) ?? term);
+}
+function escapeRegExp(str) {
+	return str.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&").replace(/-/g, "\\x2d");
+}
+/**
+* @internal
+*/
+function escapeHtml(str) {
+	return str.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/&(?![\w#]+;)/g, "&amp;");
+}
+function resolveAdditionalConfig({ additionalConfig }, path) {
+	if (additionalConfig === void 0) return [];
+	if (typeof additionalConfig === "function") return additionalConfig(path) ?? [];
+	const configs = [];
+	const segments = path.split("/").slice(0, -1);
+	while (segments.length) {
+		const key = `/${segments.join("/")}/`;
+		configs.push(additionalConfig[key]);
+		segments.pop();
+	}
+	configs.push(additionalConfig["/"]);
+	return configs.filter((config) => config !== void 0);
+}
+function reportConfigLayers(path, layers) {
+	const summaryTitle = `Config Layers for ${path}:`;
+	const summary = layers.map((c, i, arr) => {
+		const n = i + 1;
+		if (n === arr.length) return `${n}. .vitepress/config (root)`;
+		return `${n}. ${c?.["[VP_SOURCE]"] ?? "(Unknown Source)"}`;
+	});
+	console.debug([
+		summaryTitle,
+		"".padEnd(summaryTitle.length, "="),
+		...summary
+	].join("\n"));
 }
 /**
- * @internal
- */
-export function escapeHtml(str) {
-    return str
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/&(?![\w#]+;)/g, '&amp;');
+* Creates a readonly proxy behaving like a deep merge of the given layers,
+* without mutating them. Earlier layers take precedence.
+*/
+function stackView(..._layers) {
+	const layers = _layers.filter((layer) => isObject(layer));
+	if (layers.length <= 1) return _layers[0];
+	const allKeys = new Set(layers.flatMap((layer) => Reflect.ownKeys(layer)));
+	const allKeysArray = [...allKeys];
+	return new Proxy({}, {
+		get(_, prop) {
+			if (prop === UnpackStackView) return layers;
+			return stackView(...layers.map((layer) => layer[prop]).filter((v) => v !== void 0));
+		},
+		set() {
+			throw new Error("StackView is read-only and cannot be mutated.");
+		},
+		has(_, prop) {
+			return allKeys.has(prop);
+		},
+		ownKeys() {
+			return allKeysArray;
+		},
+		getOwnPropertyDescriptor(_, prop) {
+			for (const layer of layers) {
+				const descriptor = Object.getOwnPropertyDescriptor(layer, prop);
+				if (descriptor) return descriptor;
+			}
+		}
+	});
+}
+stackView.unpack = function(obj) {
+	return obj?.[UnpackStackView];
+};
+function isObject(value) {
+	return Object.prototype.toString.call(value) === "[object Object]";
+}
+function isShell(lang) {
+	return shellLangs.includes(lang);
 }
+//#endregion
+export { APPEARANCE_KEY, EXTERNAL_URL_RE, RELATIVE_BASE_SENTINEL, VP_SOURCE_KEY, createTitle, escapeHtml, escapeRegExp, getLocaleForPath, inBrowser, isActive, isExternal, isObject, isRelativeBase, isShell, joinPath, mergeHead, normalize, notFoundPageData, pageChunkPath, parseIconName, relativePathToRoot, resolveSiteDataByRoute, sanitizeFileName, slash, stackView, tokenizeSearchText, treatAsHtml };

package/dist/client/theme-default/Layout.d.vue.ts

@@ -0,0 +1,79 @@
+declare var __VLS_1: {}, __VLS_22: {}, __VLS_25: {}, __VLS_28: {}, __VLS_31: {}, __VLS_34: {}, __VLS_37: {}, __VLS_53: {}, __VLS_56: {}, __VLS_65: {}, __VLS_68: {}, __VLS_71: {}, __VLS_74: {}, __VLS_77: {}, __VLS_80: {}, __VLS_83: {}, __VLS_86: {}, __VLS_89: {}, __VLS_92: {}, __VLS_95: {}, __VLS_98: {}, __VLS_101: {}, __VLS_104: {}, __VLS_107: {}, __VLS_110: {}, __VLS_113: {}, __VLS_116: {}, __VLS_119: {}, __VLS_122: {}, __VLS_125: {}, __VLS_128: {}, __VLS_131: {}, __VLS_134: {}, __VLS_141: {};
+type __VLS_Slots = {} & {
+    'layout-top'?: (props: typeof __VLS_1) => any;
+} & {
+    'nav-bar-title-before'?: (props: typeof __VLS_22) => any;
+} & {
+    'nav-bar-title-after'?: (props: typeof __VLS_25) => any;
+} & {
+    'nav-bar-content-before'?: (props: typeof __VLS_28) => any;
+} & {
+    'nav-bar-content-after'?: (props: typeof __VLS_31) => any;
+} & {
+    'nav-screen-content-before'?: (props: typeof __VLS_34) => any;
+} & {
+    'nav-screen-content-after'?: (props: typeof __VLS_37) => any;
+} & {
+    'sidebar-nav-before'?: (props: typeof __VLS_53) => any;
+} & {
+    'sidebar-nav-after'?: (props: typeof __VLS_56) => any;
+} & {
+    'page-top'?: (props: typeof __VLS_65) => any;
+} & {
+    'page-bottom'?: (props: typeof __VLS_68) => any;
+} & {
+    'not-found'?: (props: typeof __VLS_71) => any;
+} & {
+    'home-hero-before'?: (props: typeof __VLS_74) => any;
+} & {
+    'home-hero-info-before'?: (props: typeof __VLS_77) => any;
+} & {
+    'home-hero-info'?: (props: typeof __VLS_80) => any;
+} & {
+    'home-hero-info-after'?: (props: typeof __VLS_83) => any;
+} & {
+    'home-hero-actions-after'?: (props: typeof __VLS_86) => any;
+} & {
+    'home-hero-actions-before-actions'?: (props: typeof __VLS_89) => any;
+} & {
+    'home-hero-image'?: (props: typeof __VLS_92) => any;
+} & {
+    'home-hero-after'?: (props: typeof __VLS_95) => any;
+} & {
+    'home-features-before'?: (props: typeof __VLS_98) => any;
+} & {
+    'home-features-after'?: (props: typeof __VLS_101) => any;
+} & {
+    'doc-footer-before'?: (props: typeof __VLS_104) => any;
+} & {
+    'doc-before'?: (props: typeof __VLS_107) => any;
+} & {
+    'doc-after'?: (props: typeof __VLS_110) => any;
+} & {
+    'doc-top'?: (props: typeof __VLS_113) => any;
+} & {
+    'doc-bottom'?: (props: typeof __VLS_116) => any;
+} & {
+    'aside-top'?: (props: typeof __VLS_119) => any;
+} & {
+    'aside-bottom'?: (props: typeof __VLS_122) => any;
+} & {
+    'aside-outline-before'?: (props: typeof __VLS_125) => any;
+} & {
+    'aside-outline-after'?: (props: typeof __VLS_128) => any;
+} & {
+    'aside-ads-before'?: (props: typeof __VLS_131) => any;
+} & {
+    'aside-ads-after'?: (props: typeof __VLS_134) => any;
+} & {
+    'layout-bottom'?: (props: typeof __VLS_141) => 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/Layout.vue

@@ -1,39 +1,35 @@
-<script setup lang="ts">
-import { useRoute } from 'vitepress'
-import { computed, provide, useSlots, watch } from 'vue'
-import VPBackdrop from './components/VPBackdrop.vue'
-import VPContent from './components/VPContent.vue'
-import VPFooter from './components/VPFooter.vue'
-import VPLocalNav from './components/VPLocalNav.vue'
-import VPNav from './components/VPNav.vue'
-import VPSidebar from './components/VPSidebar.vue'
-import VPSkipLink from './components/VPSkipLink.vue'
-import { useData } from './composables/data'
-import { useCloseSidebarOnEscape, useSidebar } from './composables/sidebar'
-
-const {
-  isOpen: isSidebarOpen,
-  open: openSidebar,
-  close: closeSidebar
-} = useSidebar()
-
-const route = useRoute()
-watch(() => route.path, closeSidebar)
-
-useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)
-
-const { frontmatter } = useData()
-
-const slots = useSlots()
-const heroImageSlotExists = computed(() => !!slots['home-hero-image'])
-
-provide('hero-image-slot-exists', heroImageSlotExists)
+<script setup>
+import { computed, provide, useSlots } from "vue";
+import VPBackdrop from "./components/VPBackdrop.vue";
+import VPContent from "./components/VPContent.vue";
+import VPFooter from "./components/VPFooter.vue";
+import VPLocalNav from "./components/VPLocalNav.vue";
+import VPNav from "./components/VPNav.vue";
+import VPSidebar from "./components/VPSidebar.vue";
+import VPSkipLink from "./components/VPSkipLink.vue";
+import { useData } from "./composables/data";
+import { layoutInfoInjectionKey, registerWatchers } from "./composables/layout";
+import { useNav } from "./composables/nav";
+import { useSidebarControl } from "./composables/sidebar";
+const { isOpen: isSidebarOpen, open: openSidebar, close: closeSidebar } = useSidebarControl();
+// everything behind the open nav screen is inert so keyboard and screen
+// reader users can't reach the covered page content
+const { isScreenOpen } = useNav();
+registerWatchers({ closeSidebar });
+const { frontmatter, theme } = useData();
+const slots = useSlots();
+const heroImageSlotExists = computed(() => !!slots["home-hero-image"]);
+provide(layoutInfoInjectionKey, { heroImageSlotExists });
 </script>
 
 <template>
-  <div v-if="frontmatter.layout !== false" class="Layout" :class="frontmatter.pageClass" >
+  <div
+    v-if="frontmatter.layout !== false"
+    class="Layout"
+    :class="[frontmatter.pageClass, theme.gradedContainers && 'vp-graded-containers']"
+  >
     <slot name="layout-top" />
-    <VPSkipLink />
+    <VPSkipLink :inert="isScreenOpen" />
     <VPBackdrop class="backdrop" :show="isSidebarOpen" @click="closeSidebar" />
     <VPNav>
       <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
@@ -43,14 +39,14 @@ provide('hero-image-slot-exists', heroImageSlotExists)
       <template #nav-screen-content-before><slot name="nav-screen-content-before" /></template>
       <template #nav-screen-content-after><slot name="nav-screen-content-after" /></template>
     </VPNav>
-    <VPLocalNav :open="isSidebarOpen" @open-menu="openSidebar" />
+    <VPLocalNav :open="isSidebarOpen" @open-menu="openSidebar" :inert="isScreenOpen" />
 
-    <VPSidebar :open="isSidebarOpen">
+    <VPSidebar :open="isSidebarOpen" :inert="isScreenOpen">
       <template #sidebar-nav-before><slot name="sidebar-nav-before" /></template>
       <template #sidebar-nav-after><slot name="sidebar-nav-after" /></template>
     </VPSidebar>
 
-    <VPContent>
+    <VPContent :inert="isScreenOpen">
       <template #page-top><slot name="page-top" /></template>
       <template #page-bottom><slot name="page-bottom" /></template>
 
@@ -60,6 +56,7 @@ provide('hero-image-slot-exists', heroImageSlotExists)
       <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>
@@ -79,7 +76,7 @@ provide('hero-image-slot-exists', heroImageSlotExists)
       <template #aside-ads-after><slot name="aside-ads-after" /></template>
     </VPContent>
 
-    <VPFooter />
+    <VPFooter :inert="isScreenOpen" />
     <slot name="layout-bottom" />
   </div>
   <Content v-else />

package/dist/client/theme-default/NotFound.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;