vitepress 1.6.4 → 2.0.0-alpha.10

package/README.md

@@ -1,7 +1,7 @@
 # VitePress 📝💨
 
-[![test](https://github.com/vuejs/vitepress/workflows/Test/badge.svg)](https://github.com/vuejs/vitepress/actions)
-[![npm](https://img.shields.io/npm/v/vitepress)](https://www.npmjs.com/package/vitepress)
+[![test](https://github.com/vuejs/vitepress/actions/workflows/test.yml/badge.svg?branch=main)](https://github.com/vuejs/vitepress/actions/workflows/test.yml)
+[![npm](https://img.shields.io/npm/v/vitepress/next)](https://www.npmjs.com/package/vitepress/v/next)
 [![nightly releases](https://img.shields.io/badge/nightly-releases-orange)](https://nightly.akryum.dev/vuejs/vitepress)
 [![chat](https://img.shields.io/badge/chat-discord-blue?logo=discord)](https://chat.vuejs.org)
 

package/bin/vitepress.js

@@ -1,2 +1,16 @@
 #!/usr/bin/env node
+// @ts-check
+
+import module from 'node:module'
+
+// https://github.com/vitejs/vite/blob/6c8a5a27e645a182f5b03a4ed6aa726eab85993f/packages/vite/bin/vite.js#L48-L63
+try {
+  module.enableCompileCache?.()
+  setTimeout(() => {
+    try {
+      module.flushCompileCache?.()
+    } catch {}
+  }, 10 * 1000).unref()
+} catch {}
+
 import('../dist/node/cli.js')

package/dist/client/app/composables/copyCode.js

@@ -1,4 +1,6 @@
 import { inBrowser } from 'vitepress';
+const shellRE = /language-(shellscript|shell|bash|sh|zsh)/;
+const ignoredNodes = ['.vp-copy-ignore', '.diff.remove'].join(', ');
 export function useCopyCode() {
     if (inBrowser) {
         const timeoutIdMap = new WeakMap();
@@ -6,17 +8,17 @@ export function useCopyCode() {
             const el = e.target;
             if (el.matches('div[class*="language-"] > button.copy')) {
                 const parent = el.parentElement;
-                const sibling = el.nextElementSibling?.nextElementSibling;
+                const sibling = el.nextElementSibling?.nextElementSibling; // <pre> tag
                 if (!parent || !sibling) {
                     return;
                 }
-                const isShell = /language-(shellscript|shell|bash|sh|zsh)/.test(parent.className);
-                const ignoredNodes = ['.vp-copy-ignore', '.diff.remove'];
+                const isShell = shellRE.test(parent.className);
                 // Clone the node and remove the ignored nodes
                 const clone = sibling.cloneNode(true);
-                clone
-                    .querySelectorAll(ignoredNodes.join(','))
-                    .forEach((node) => node.remove());
+                clone.querySelectorAll(ignoredNodes).forEach((node) => node.remove());
+                // remove extra newlines left after removing ignored nodes (affecting textContent because it is inside `<pre>`)
+                // doesn't affect the newlines already in the code because they are rendered as `\n<span class="line"></span>`
+                clone.innerHTML = clone.innerHTML.replace(/\n+/g, '\n');
                 let text = clone.textContent || '';
                 if (isShell) {
                     text = text.replace(/^ *(\$|>) /gm, '').trim();

package/dist/client/app/data.js

@@ -7,7 +7,7 @@ export const dataSymbol = Symbol();
 export const siteDataRef = shallowRef((import.meta.env.PROD ? siteData : readonly(siteData)));
 // hmr
 if (import.meta.hot) {
-    import.meta.hot.accept('/@siteData', (m) => {
+    import.meta.hot.accept('@siteData', (m) => {
         if (m) {
             siteDataRef.value = m.default;
         }

package/dist/client/app/devtools.js

@@ -10,7 +10,6 @@ export const setupDevtools = (app, router, data) => {
         homepage: 'https://vitepress.dev',
         componentStateTypes: [COMPONENT_STATE_TYPE]
     }, (api) => {
-        // TODO: remove any
         api.on.inspectComponent((payload) => {
             payload.instanceData.state.push({
                 type: COMPONENT_STATE_TYPE,

package/dist/client/app/index.js

@@ -128,16 +128,13 @@ function newRouter() {
 if (inBrowser) {
     createApp().then(({ app, router, data }) => {
         // wait until page component is fetched before mounting
-        router.go().then(() => {
+        router.go(location.href, { initialLoad: true }).then(() => {
             // dynamically update head tags
             useUpdateHead(router.route, data.site);
             app.mount('#app');
             // scroll to hash on new tab during dev
             if (import.meta.env.DEV && location.hash) {
-                const target = document.getElementById(decodeURIComponent(location.hash).slice(1));
-                if (target) {
-                    scrollTo(target, location.hash);
-                }
+                scrollTo(location.hash);
             }
         });
     });

package/dist/client/app/router.js

@@ -8,6 +8,8 @@ export const RouterSymbol = Symbol();
 const fakeHost = 'http://a.com';
 const getDefaultRoute = () => ({
     path: '/',
+    hash: '',
+    query: '',
     component: null,
     data: notFoundPageData
 });
@@ -15,20 +17,16 @@ export function createRouter(loadPageModule, fallbackComponent) {
     const route = reactive(getDefaultRoute());
     const router = {
         route,
-        go
-    };
-    async function go(href = inBrowser ? location.href : '/') {
-        href = normalizeHref(href);
-        if ((await router.onBeforeRouteChange?.(href)) === false)
-            return;
-        if (inBrowser && href !== normalizeHref(location.href)) {
-            // save scroll position before changing url
-            history.replaceState({ scrollPosition: window.scrollY }, '');
-            history.pushState({}, '', href);
+        async go(href, options) {
+            href = normalizeHref(href);
+            if ((await router.onBeforeRouteChange?.(href)) === false)
+                return;
+            if (!inBrowser || (await changeRoute(href, options)))
+                await loadPage(href);
+            syncRouteQueryAndHash();
+            await router.onAfterRouteChange?.(href);
         }
-        await loadPage(href);
-        await (router.onAfterRouteChange ?? router.onAfterRouteChanged)?.(href);
-    }
+    };
     let latestPendingPath = null;
     async function loadPage(href, scrollPosition = 0, isRetry = false) {
         if ((await router.onBeforePageLoad?.(href)) === false)
@@ -37,21 +35,20 @@ export function createRouter(loadPageModule, fallbackComponent) {
         const pendingPath = (latestPendingPath = targetLoc.pathname);
         try {
             let page = await loadPageModule(pendingPath);
-            if (!page) {
+            if (!page)
                 throw new Error(`Page not found: ${pendingPath}`);
-            }
             if (latestPendingPath === pendingPath) {
                 latestPendingPath = null;
                 const { default: comp, __pageData } = page;
-                if (!comp) {
+                if (!comp)
                     throw new Error(`Invalid route component: ${comp}`);
-                }
                 await router.onAfterPageLoad?.(href);
                 route.path = inBrowser ? pendingPath : withBase(pendingPath);
                 route.component = markRaw(comp);
                 route.data = import.meta.env.PROD
                     ? markRaw(__pageData)
                     : readonly(__pageData);
+                syncRouteQueryAndHash(targetLoc);
                 if (inBrowser) {
                     nextTick(() => {
                         let actualPathname = siteDataRef.value.base +
@@ -64,20 +61,7 @@ export function createRouter(loadPageModule, fallbackComponent) {
                             href = actualPathname + targetLoc.search + targetLoc.hash;
                             history.replaceState({}, '', href);
                         }
-                        if (targetLoc.hash && !scrollPosition) {
-                            let target = null;
-                            try {
-                                target = document.getElementById(decodeURIComponent(targetLoc.hash).slice(1));
-                            }
-                            catch (e) {
-                                console.warn(e);
-                            }
-                            if (target) {
-                                scrollTo(target, targetLoc.hash);
-                                return;
-                            }
-                        }
-                        window.scrollTo(0, scrollPosition);
+                        return scrollTo(targetLoc.hash, false, scrollPosition);
                     });
                 }
             }
@@ -104,19 +88,25 @@ export function createRouter(loadPageModule, fallbackComponent) {
                 route.path = inBrowser ? pendingPath : withBase(pendingPath);
                 route.component = fallbackComponent ? markRaw(fallbackComponent) : null;
                 const relativePath = inBrowser
-                    ? pendingPath
+                    ? route.path
                         .replace(/(^|\/)$/, '$1index')
                         .replace(/(\.html)?$/, '.md')
-                        .replace(/^\//, '')
+                        .slice(siteDataRef.value.base.length)
                     : '404.md';
                 route.data = { ...notFoundPageData, relativePath };
+                syncRouteQueryAndHash(targetLoc);
             }
         }
     }
+    function syncRouteQueryAndHash(loc = inBrowser
+        ? location
+        : { search: '', hash: '' }) {
+        route.query = loc.search;
+        route.hash = decodeURIComponent(loc.hash);
+    }
     if (inBrowser) {
-        if (history.state === null) {
+        if (history.state === null)
             history.replaceState({}, '');
-        }
         window.addEventListener('click', (e) => {
             if (e.defaultPrevented ||
                 !(e.target instanceof Element) ||
@@ -125,46 +115,29 @@ export function createRouter(loadPageModule, fallbackComponent) {
                 e.ctrlKey ||
                 e.shiftKey ||
                 e.altKey ||
-                e.metaKey)
+                e.metaKey) {
                 return;
+            }
             const link = e.target.closest('a');
             if (!link ||
                 link.closest('.vp-raw') ||
                 link.hasAttribute('download') ||
-                link.hasAttribute('target'))
+                link.hasAttribute('target')) {
                 return;
+            }
             const linkHref = link.getAttribute('href') ??
                 (link instanceof SVGAElement ? link.getAttribute('xlink:href') : null);
             if (linkHref == null)
                 return;
-            const { href, origin, pathname, hash, search } = new URL(linkHref, link.baseURI);
-            const currentUrl = new URL(location.href); // copy to keep old data
+            const { href, origin, pathname } = new URL(linkHref, link.baseURI);
+            const currentLoc = new URL(location.href); // copy to keep old data
             // only intercept inbound html links
-            if (origin === currentUrl.origin && treatAsHtml(pathname)) {
+            if (origin === currentLoc.origin && treatAsHtml(pathname)) {
                 e.preventDefault();
-                if (pathname === currentUrl.pathname &&
-                    search === currentUrl.search) {
-                    // scroll between hash anchors in the same page
-                    // avoid duplicate history entries when the hash is same
-                    if (hash !== currentUrl.hash) {
-                        history.pushState({}, '', href);
-                        // still emit the event so we can listen to it in themes
-                        window.dispatchEvent(new HashChangeEvent('hashchange', {
-                            oldURL: currentUrl.href,
-                            newURL: href
-                        }));
-                    }
-                    if (hash) {
-                        // use smooth scroll when clicking on header anchor links
-                        scrollTo(link, hash, link.classList.contains('header-anchor'));
-                    }
-                    else {
-                        window.scrollTo(0, 0);
-                    }
-                }
-                else {
-                    go(href);
-                }
+                router.go(href, {
+                    // use smooth scroll when clicking on header anchor links
+                    smoothScroll: link.classList.contains('header-anchor')
+                });
             }
         }, { capture: true });
         window.addEventListener('popstate', async (e) => {
@@ -172,10 +145,12 @@ export function createRouter(loadPageModule, fallbackComponent) {
                 return;
             const href = normalizeHref(location.href);
             await loadPage(href, (e.state && e.state.scrollPosition) || 0);
-            await (router.onAfterRouteChange ?? router.onAfterRouteChanged)?.(href);
+            syncRouteQueryAndHash();
+            await router.onAfterRouteChange?.(href);
         });
         window.addEventListener('hashchange', (e) => {
             e.preventDefault();
+            syncRouteQueryAndHash();
         });
     }
     handleHMR(route);
@@ -183,20 +158,21 @@ export function createRouter(loadPageModule, fallbackComponent) {
 }
 export function useRouter() {
     const router = inject(RouterSymbol);
-    if (!router) {
+    if (!router)
         throw new Error('useRouter() is called without provider.');
-    }
     return router;
 }
 export function useRoute() {
     return useRouter().route;
 }
-export function scrollTo(el, hash, smooth = false) {
+export function scrollTo(hash, smooth = false, scrollPosition = 0) {
+    if (!hash || scrollPosition) {
+        window.scrollTo(0, scrollPosition);
+        return;
+    }
     let target = null;
     try {
-        target = el.classList.contains('header-anchor')
-            ? el
-            : document.getElementById(decodeURIComponent(hash).slice(1));
+        target = document.getElementById(decodeURIComponent(hash).slice(1));
     }
     catch (e) {
         console.warn(e);
@@ -222,9 +198,8 @@ function handleHMR(route) {
     if (import.meta.hot) {
         // hot reload pageData
         import.meta.hot.on('vitepress:pageData', (payload) => {
-            if (shouldHotReload(payload)) {
+            if (shouldHotReload(payload))
                 route.data = payload.pageData;
-            }
         });
     }
 }
@@ -239,9 +214,44 @@ function normalizeHref(href) {
     const url = new URL(href, fakeHost);
     url.pathname = url.pathname.replace(/(^|\/)index(\.html)?$/, '$1');
     // ensure correct deep link so page refresh lands on correct files.
-    if (siteDataRef.value.cleanUrls)
+    if (siteDataRef.value.cleanUrls) {
         url.pathname = url.pathname.replace(/\.html$/, '');
-    else if (!url.pathname.endsWith('/') && !url.pathname.endsWith('.html'))
+    }
+    else if (!url.pathname.endsWith('/') && !url.pathname.endsWith('.html')) {
         url.pathname += '.html';
+    }
     return url.pathname + url.search + url.hash;
 }
+async function changeRoute(href, { smoothScroll = false, initialLoad = false, replace = false } = {}) {
+    const loc = normalizeHref(location.href);
+    const nextUrl = new URL(href, location.origin);
+    const currentUrl = new URL(loc, location.origin);
+    if (href === loc) {
+        if (!initialLoad) {
+            scrollTo(nextUrl.hash, smoothScroll);
+            return false;
+        }
+    }
+    else {
+        if (replace) {
+            history.replaceState({}, '', href);
+        }
+        else {
+            // save scroll position before changing URL
+            history.replaceState({ scrollPosition: window.scrollY }, '');
+            history.pushState({}, '', href);
+        }
+        if (nextUrl.pathname === currentUrl.pathname) {
+            // scroll between hash anchors on the same page, avoid duplicate entries
+            if (nextUrl.hash !== currentUrl.hash) {
+                window.dispatchEvent(new HashChangeEvent('hashchange', {
+                    oldURL: currentUrl.href,
+                    newURL: nextUrl.href
+                }));
+                scrollTo(nextUrl.hash, smoothScroll);
+            }
+            return false;
+        }
+    }
+    return true;
+}

package/dist/client/app/utils.js

@@ -1,4 +1,5 @@
-import { h, onMounted, onUnmounted, shallowRef } from 'vue';
+import { tryOnUnmounted } from '@vueuse/core';
+import { h, onMounted, shallowRef } from 'vue';
 import { EXTERNAL_URL_RE, inBrowser, sanitizeFileName } from '../shared';
 import { siteDataRef } from './data';
 export { escapeHtml as _escapeHtml, inBrowser } from '../shared';
@@ -62,7 +63,7 @@ export let contentUpdatedCallbacks = [];
  */
 export function onContentUpdated(fn) {
     contentUpdatedCallbacks.push(fn);
-    onUnmounted(() => {
+    tryOnUnmounted(() => {
         contentUpdatedCallbacks = contentUpdatedCallbacks.filter((f) => f !== fn);
     });
 }

package/dist/client/index.d.ts

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { Component, InjectionKey, Ref, App, AsyncComponentLoader } from 'vue';
+import { Component, Ref, InjectionKey, App, AsyncComponentLoader } from 'vue';
 import { PageData, Awaitable, SiteData } from '../../types/shared.js';
 export { HeadConfig, Header, PageData, SiteData } from '../../types/shared.js';
 
@@ -11,6 +11,8 @@ declare function escapeHtml(str: string): string;
 
 interface Route {
     path: string;
+    hash: string;
+    query: string;
     data: PageData;
     component: Component | null;
 }
@@ -22,7 +24,11 @@ interface Router {
     /**
      * Navigate to a new URL.
      */
-    go: (to?: string) => Promise<void>;
+    go: (to: string, options?: {
+        initialLoad?: boolean;
+        smoothScroll?: boolean;
+        replace?: boolean;
+    }) => Promise<void>;
     /**
      * Called before the route changes. Return `false` to cancel the navigation.
      */
@@ -40,10 +46,6 @@ interface Router {
      * Called after the route changes.
      */
     onAfterRouteChange?: (to: string) => Awaitable<void>;
-    /**
-     * @deprecated use `onAfterRouteChange` instead
-     */
-    onAfterRouteChanged?: (to: string) => Awaitable<void>;
 }
 declare function useRouter(): Router;
 declare function useRoute(): Route;

package/dist/client/shared.js

@@ -1,5 +1,7 @@
 export const EXTERNAL_URL_RE = /^(?:[a-z]+:|\/\/)/i;
 export const APPEARANCE_KEY = 'vitepress-theme-appearance';
+export const VP_SOURCE_KEY = '[VP_SOURCE]';
+const UnpackStackView = Symbol('stack-view:unpack');
 const HASH_RE = /#.*$/;
 const HASH_OR_QUERY_RE = /[?#].*$/;
 const INDEX_OR_EXT_RE = /(?:(^|\/)index)?\.(?:md|html)$/;
@@ -42,26 +44,29 @@ export function isExternal(path) {
 export function getLocaleForPath(siteData, relativePath) {
     return (Object.keys(siteData?.locales || {}).find((key) => key !== 'root' &&
         !isExternal(key) &&
-        isActive(relativePath, `/${key}/`, true)) || 'root');
+        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
-        }
-    });
+    const { label, link, ...localeConfig } = siteData.locales[localeIndex] ?? {};
+    Object.assign(localeConfig, { localeIndex });
+    const additionalConfigs = resolveAdditionalConfig(siteData, relativePath);
+    if (inBrowser && import.meta.env?.DEV) {
+        ;
+        localeConfig[VP_SOURCE_KEY] = `locale config (${localeIndex})`;
+        reportConfigLayers(relativePath, [
+            ...additionalConfigs,
+            localeConfig,
+            siteData
+        ]);
+    }
+    const topLayer = {
+        head: mergeHead(siteData.head ?? [], localeConfig.head ?? [], ...additionalConfigs.map((data) => data.head ?? []).reverse())
+    };
+    return stackView(topLayer, ...additionalConfigs, localeConfig, siteData);
 }
 /**
  * Create the page title string based on config.
@@ -90,17 +95,29 @@ function createTitleTemplate(siteTitle, template) {
     }
     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];
+export function mergeHead(...headArrays) {
+    const merged = [];
+    const metaKeyMap = new Map();
+    for (const current of headArrays) {
+        for (const tag of current) {
+            const [type, attrs] = tag;
+            const keyAttr = Object.entries(attrs)[0];
+            if (type !== 'meta' || !keyAttr) {
+                merged.push(tag);
+                continue;
+            }
+            const key = `${keyAttr[0]}=${keyAttr[1]}`;
+            const existingIndex = metaKeyMap.get(key);
+            if (existingIndex != null) {
+                merged[existingIndex] = tag; // replace existing tag
+            }
+            else {
+                metaKeyMap.set(key, merged.length);
+                merged.push(tag);
+            }
+        }
+    }
+    return merged;
 }
 // https://github.com/rollup/rollup/blob/fec513270c6ac350072425cc045db367656c623b/src/utils/sanitizeFileName.ts
 const INVALID_CHAR_REGEX = /[\u0000-\u001F"#$&*+,:;<=>?[\]^`{|}\u007F]/g;
@@ -150,3 +167,73 @@ export function escapeHtml(str) {
         .replace(/"/g, '&quot;')
         .replace(/&(?![\w#]+;)/g, '&amp;');
 }
+function resolveAdditionalConfig({ additionalConfig }, path) {
+    if (additionalConfig === undefined)
+        return [];
+    if (typeof additionalConfig === 'function')
+        return additionalConfig(path) ?? [];
+    const configs = [];
+    const segments = path.split('/').slice(0, -1); // remove file name
+    while (segments.length) {
+        const key = `/${segments.join('/')}/`;
+        configs.push(additionalConfig[key]);
+        segments.pop();
+    }
+    configs.push(additionalConfig['/']);
+    return configs.filter((config) => config !== undefined);
+}
+// This helps users to understand which configuration files are active
+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_KEY] ?? '(Unknown Source)'}`;
+    });
+    console.debug([summaryTitle, ''.padEnd(summaryTitle.length, '='), ...summary].join('\n'));
+}
+/**
+ * Creates a deep, merged view of multiple objects without mutating originals.
+ * Returns a readonly proxy behaving like a merged object of the input objects.
+ * Layers are merged in descending precedence, i.e. earlier layer is on top.
+ */
+export 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({}, {
+        // TODO: optimize for performance, this is a hot path
+        get(_, prop) {
+            if (prop === UnpackStackView)
+                return layers;
+            return stackView(...layers
+                .map((layer) => layer[prop])
+                .filter((v) => v !== undefined));
+        },
+        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];
+};
+export function isObject(value) {
+    return Object.prototype.toString.call(value) === '[object Object]';
+}

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { useRoute } from 'vitepress'
-import { computed, provide, useSlots, watch } from 'vue'
+import { computed, provide, useSlots } from 'vue'
 import VPBackdrop from './components/VPBackdrop.vue'
 import VPContent from './components/VPContent.vue'
 import VPFooter from './components/VPFooter.vue'
@@ -9,29 +8,31 @@ 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'
+import { layoutInfoInjectionKey, registerWatchers } from './composables/layout'
+import { useSidebarControl } from './composables/sidebar'
 
 const {
   isOpen: isSidebarOpen,
   open: openSidebar,
   close: closeSidebar
-} = useSidebar()
+} = useSidebarControl()
 
-const route = useRoute()
-watch(() => route.path, closeSidebar)
-
-useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)
+registerWatchers({ closeSidebar })
 
 const { frontmatter } = useData()
 
 const slots = useSlots()
 const heroImageSlotExists = computed(() => !!slots['home-hero-image'])
 
-provide('hero-image-slot-exists', heroImageSlotExists)
+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"
+  >
     <slot name="layout-top" />
     <VPSkipLink />
     <VPBackdrop class="backdrop" :show="isSidebarOpen" @click="closeSidebar" />

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

@@ -22,7 +22,7 @@ const { currentLang } = useLangs()
     <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' }}