vitepress 1.0.0-rc.8 → 1.0.0

package/README.md

@@ -1,14 +1,12 @@
-# VitePress (RC: release candidate) 📝💨
+# VitePress 📝💨
 
-[![Test](https://github.com/vuejs/vitepress/workflows/Test/badge.svg)](https://github.com/vuejs/vitepress/actions)
+[![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)
 [![chat](https://img.shields.io/badge/chat-discord-blue?logo=discord)](https://chat.vuejs.org)
 
 ---
 
-VitePress is [VuePress](https://vuepress.vuejs.org)' spiritual successor, built on top of [vite](https://github.com/vitejs/vite).
-
-Currently, it is in the `release candidate` stage. It is already suitable for out-of-the-box documentation use. We do not plan to introduce any breaking changes from here on until the stable release. 
+VitePress is a Vue-powered static site generator and a spiritual successor to [VuePress](https://vuepress.vuejs.org), built on top of [Vite](https://github.com/vitejs/vite).
 
 ## Documentation
 

package/dist/client/app/components/Content.js

@@ -14,7 +14,8 @@ export const Content = defineComponent({
             route.component
                 ? h(route.component, {
                     onVnodeMounted: runCbs,
-                    onVnodeUpdated: runCbs
+                    onVnodeUpdated: runCbs,
+                    onVnodeUnmounted: runCbs
                 })
                 : '404 Page Not Found'
         ]);

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

@@ -11,11 +11,13 @@ export function useCopyCode() {
                     return;
                 }
                 const isShell = /language-(shellscript|shell|bash|sh|zsh)/.test(parent.className);
-                let text = '';
-                sibling
-                    .querySelectorAll('span.line:not(.diff.remove)')
-                    .forEach((node) => (text += (node.textContent || '') + '\n'));
-                text = text.slice(0, -1);
+                const ignoredNodes = ['.vp-copy-ignore', '.diff.remove'];
+                // Clone the node and remove the ignored nodes
+                const clone = sibling.cloneNode(true);
+                clone
+                    .querySelectorAll(ignoredNodes.join(','))
+                    .forEach((node) => node.remove());
+                let text = clone.textContent || '';
                 if (isShell) {
                     text = text.replace(/^ *(\$|>) /gm, '').trim();
                 }

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

@@ -1,22 +1,37 @@
 import { watchEffect } from 'vue';
 import { createTitle, mergeHead } from '../../shared';
 export function useUpdateHead(route, siteDataByRouteRef) {
-    let managedHeadTags = [];
     let isFirstUpdate = true;
+    let managedHeadElements = [];
     const updateHeadTags = (newTags) => {
         if (import.meta.env.PROD && isFirstUpdate) {
             // in production, the initial meta tags are already pre-rendered so we
             // skip the first update.
             isFirstUpdate = false;
+            newTags.forEach((tag) => {
+                const headEl = createHeadElement(tag);
+                for (const el of document.head.children) {
+                    if (el.isEqualNode(headEl)) {
+                        managedHeadElements.push(el);
+                        return;
+                    }
+                }
+            });
             return;
         }
-        managedHeadTags.forEach((el) => document.head.removeChild(el));
-        managedHeadTags = [];
-        newTags.forEach((headConfig) => {
-            const el = createHeadElement(headConfig);
-            document.head.appendChild(el);
-            managedHeadTags.push(el);
+        const newElements = newTags.map(createHeadElement);
+        managedHeadElements.forEach((oldEl, oldIndex) => {
+            const matchedIndex = newElements.findIndex((newEl) => newEl?.isEqualNode(oldEl ?? null));
+            if (matchedIndex !== -1) {
+                delete newElements[matchedIndex];
+            }
+            else {
+                oldEl?.remove();
+                delete managedHeadElements[oldIndex];
+            }
         });
+        newElements.forEach((el) => el && document.head.appendChild(el));
+        managedHeadElements = [...managedHeadElements, ...newElements].filter(Boolean);
     };
     watchEffect(() => {
         const pageData = route.data;
@@ -24,11 +39,16 @@ export function useUpdateHead(route, siteDataByRouteRef) {
         const pageDescription = pageData && pageData.description;
         const frontmatterHead = (pageData && pageData.frontmatter.head) || [];
         // update title and description
-        document.title = createTitle(siteData, pageData);
+        const title = createTitle(siteData, pageData);
+        if (title !== document.title) {
+            document.title = title;
+        }
         const description = pageDescription || siteData.description;
         let metaDescriptionElement = document.querySelector(`meta[name=description]`);
         if (metaDescriptionElement) {
-            metaDescriptionElement.setAttribute('content', description);
+            if (metaDescriptionElement.getAttribute('content') !== description) {
+                metaDescriptionElement.setAttribute('content', description);
+            }
         }
         else {
             createHeadElement(['meta', { name: 'description', content: description }]);
@@ -44,6 +64,11 @@ function createHeadElement([tag, attrs, innerHTML]) {
     if (innerHTML) {
         el.innerHTML = innerHTML;
     }
+    if (tag === 'script' && !attrs.async) {
+        // async is true by default for dynamically created scripts
+        ;
+        el.async = false;
+    }
     return el;
 }
 function isMetaDescription(headConfig) {

package/dist/client/app/data.js

@@ -16,17 +16,16 @@ if (import.meta.hot) {
 // per-app data
 export function initData(route) {
     const site = computed(() => resolveSiteDataByRoute(siteDataRef.value, route.data.relativePath));
-    const isDark = site.value.appearance
-        ? useDark({
-            storageKey: APPEARANCE_KEY,
-            initialValue: () => typeof site.value.appearance === 'string'
-                ? site.value.appearance
-                : 'auto',
-            ...(typeof site.value.appearance === 'object'
-                ? site.value.appearance
-                : {})
-        })
-        : ref(false);
+    const appearance = site.value.appearance; // fine with reactivity being lost here, config change triggers a restart
+    const isDark = appearance === 'force-dark'
+        ? ref(true)
+        : appearance
+            ? useDark({
+                storageKey: APPEARANCE_KEY,
+                initialValue: () => typeof appearance === 'string' ? appearance : 'auto',
+                ...(typeof appearance === 'object' ? appearance : {})
+            })
+            : ref(false);
     return {
         site,
         theme: computed(() => site.value.themeConfig),
@@ -34,14 +33,10 @@ export function initData(route) {
         frontmatter: computed(() => route.data.frontmatter),
         params: computed(() => route.data.params),
         lang: computed(() => site.value.lang),
-        dir: computed(() => site.value.dir),
+        dir: computed(() => route.data.frontmatter.dir || site.value.dir),
         localeIndex: computed(() => site.value.localeIndex || 'root'),
-        title: computed(() => {
-            return createTitle(site.value, route.data);
-        }),
-        description: computed(() => {
-            return route.data.description || site.value.description;
-        }),
+        title: computed(() => createTitle(site.value, route.data)),
+        description: computed(() => route.data.description || site.value.description),
         isDark
     };
 }

package/dist/client/app/devtools.js

@@ -1,7 +1,7 @@
-import { setupDevtoolsPlugin } from '@vue/devtools-api';
+import { setupDevToolsPlugin } from '@vue/devtools-api';
 const COMPONENT_STATE_TYPE = 'VitePress';
 export const setupDevtools = (app, router, data) => {
-    setupDevtoolsPlugin({
+    setupDevToolsPlugin({
         // fix recursive reference
         app: app,
         id: 'org.vuejs.vitepress',
@@ -10,6 +10,7 @@ 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

@@ -29,15 +29,15 @@ const Theme = resolveThemeExtends(RawTheme);
 const VitePressApp = defineComponent({
     name: 'VitePressApp',
     setup() {
-        const { site } = useData();
+        const { site, lang, dir } = useData();
         // change the language on the HTML element based on the current lang
         onMounted(() => {
             watchEffect(() => {
-                document.documentElement.lang = site.value.lang;
-                document.documentElement.dir = site.value.dir;
+                document.documentElement.lang = lang.value;
+                document.documentElement.dir = dir.value;
             });
         });
-        if (import.meta.env.PROD) {
+        if (import.meta.env.PROD && site.value.router.prefetchLinks) {
             // in prod mode, enable intersectionObserver based pre-fetch
             usePrefetch();
         }
@@ -51,6 +51,8 @@ const VitePressApp = defineComponent({
     }
 });
 export async function createApp() {
+    ;
+    globalThis.__VITEPRESS__ = true;
     const router = newRouter();
     const app = newApp();
     app.provide(RouterSymbol, router);
@@ -95,21 +97,28 @@ function newRouter() {
     let initialPath;
     return createRouter((path) => {
         let pageFilePath = pathToFile(path);
-        if (!pageFilePath)
-            return null;
-        if (isInitialPageLoad) {
-            initialPath = pageFilePath;
-        }
-        // use lean build if this is the initial page load or navigating back
-        // to the initial loaded path (the static vnodes already adopted the
-        // static content on that load so no need to re-fetch the page)
-        if (isInitialPageLoad || initialPath === pageFilePath) {
-            pageFilePath = pageFilePath.replace(/\.js$/, '.lean.js');
+        let pageModule = null;
+        if (pageFilePath) {
+            if (isInitialPageLoad) {
+                initialPath = pageFilePath;
+            }
+            // use lean build if this is the initial page load or navigating back
+            // to the initial loaded path (the static vnodes already adopted the
+            // static content on that load so no need to re-fetch the page)
+            if (isInitialPageLoad || initialPath === pageFilePath) {
+                pageFilePath = pageFilePath.replace(/\.js$/, '.lean.js');
+            }
+            if (import.meta.env.SSR) {
+                pageModule = import(/*@vite-ignore*/ pageFilePath + '?t=' + Date.now());
+            }
+            else {
+                pageModule = import(/*@vite-ignore*/ pageFilePath);
+            }
         }
         if (inBrowser) {
             isInitialPageLoad = false;
         }
-        return import(/*@vite-ignore*/ pageFilePath);
+        return pageModule;
     }, Theme.NotFound);
 }
 if (inBrowser) {

package/dist/client/app/router.js

@@ -1,7 +1,7 @@
-import { reactive, inject, markRaw, nextTick, readonly } from 'vue';
-import { notFoundPageData } from '../shared';
-import { inBrowser, withBase } from './utils';
+import { inject, markRaw, nextTick, reactive, readonly } from 'vue';
+import { notFoundPageData, treatAsHtml } from '../shared';
 import { siteDataRef } from './data';
+import { getScrollOffset, inBrowser, withBase } from './utils';
 export const RouterSymbol = Symbol();
 // we are just using URL to parse the pathname and hash - the base doesn't
 // matter and is only passed to support same-host hrefs.
@@ -18,18 +18,20 @@ export function createRouter(loadPageModule, fallbackComponent) {
         go
     };
     async function go(href = inBrowser ? location.href : '/') {
+        href = normalizeHref(href);
         if ((await router.onBeforeRouteChange?.(href)) === false)
             return;
-        const url = new URL(href, fakeHost);
-        if (!siteDataRef.value.cleanUrls) {
-            // ensure correct deep link so page refresh lands on correct files.
-            // if cleanUrls is enabled, the server should handle this
-            if (!url.pathname.endsWith('/') && !url.pathname.endsWith('.html')) {
-                url.pathname += '.html';
-                href = url.pathname + url.search + url.hash;
+        if (inBrowser) {
+            const currentUrl = new URL(location.href);
+            if (href !== normalizeHref(currentUrl.href)) {
+                // save scroll position before changing url
+                history.replaceState({ scrollPosition: window.scrollY }, document.title);
+                history.pushState(null, '', href);
+                if (new URL(href, fakeHost).hash !== currentUrl.hash) {
+                    window.dispatchEvent(new Event('hashchange'));
+                }
             }
         }
-        updateHistory(href);
         await loadPage(href);
         await router.onAfterRouteChanged?.(href);
     }
@@ -124,24 +126,22 @@ export function createRouter(loadPageModule, fallbackComponent) {
                 const { href, origin, pathname, hash, search } = new URL(link.href instanceof SVGAnimatedString
                     ? link.href.animVal
                     : link.href, link.baseURI);
-                const currentUrl = window.location;
-                const extMatch = pathname.match(/\.\w+$/);
-                // only intercept inbound links
+                const currentUrl = new URL(location.href); // copy to keep old data
+                // only intercept inbound html links
                 if (!e.ctrlKey &&
                     !e.shiftKey &&
                     !e.altKey &&
                     !e.metaKey &&
                     !target &&
                     origin === currentUrl.origin &&
-                    // don't intercept if non-html extension is present
-                    !(extMatch && extMatch[0] !== '.html')) {
+                    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(null, '', hash);
+                            history.pushState(null, '', href);
                             // still emit the event so we can listen to it in themes
                             window.dispatchEvent(new Event('hashchange'));
                         }
@@ -150,7 +150,6 @@ export function createRouter(loadPageModule, fallbackComponent) {
                             scrollTo(link, hash, link.classList.contains('header-anchor'));
                         }
                         else {
-                            updateHistory(href);
                             window.scrollTo(0, 0);
                         }
                     }
@@ -160,8 +159,9 @@ export function createRouter(loadPageModule, fallbackComponent) {
                 }
             }
         }, { capture: true });
-        window.addEventListener('popstate', (e) => {
-            loadPage(location.href, (e.state && e.state.scrollPosition) || 0);
+        window.addEventListener('popstate', async (e) => {
+            await loadPage(normalizeHref(location.href), (e.state && e.state.scrollPosition) || 0);
+            router.onAfterRouteChanged?.(location.href);
         });
         window.addEventListener('hashchange', (e) => {
             e.preventDefault();
@@ -191,32 +191,10 @@ export function scrollTo(el, hash, smooth = false) {
         console.warn(e);
     }
     if (target) {
-        let scrollOffset = siteDataRef.value.scrollOffset;
-        let offset = 0;
-        let padding = 24;
-        if (typeof scrollOffset === 'object' && 'padding' in scrollOffset) {
-            padding = scrollOffset.padding;
-            scrollOffset = scrollOffset.selector;
-        }
-        if (typeof scrollOffset === 'number') {
-            offset = scrollOffset;
-        }
-        else if (typeof scrollOffset === 'string') {
-            offset = tryOffsetSelector(scrollOffset, padding);
-        }
-        else if (Array.isArray(scrollOffset)) {
-            for (const selector of scrollOffset) {
-                const res = tryOffsetSelector(selector, padding);
-                if (res) {
-                    offset = res;
-                    break;
-                }
-            }
-        }
         const targetPadding = parseInt(window.getComputedStyle(target).paddingTop, 10);
         const targetTop = window.scrollY +
             target.getBoundingClientRect().top -
-            offset +
+            getScrollOffset() +
             targetPadding;
         function scrollToTarget() {
             // only smooth scroll if distance is smaller than screen height.
@@ -228,15 +206,6 @@ export function scrollTo(el, hash, smooth = false) {
         requestAnimationFrame(scrollToTarget);
     }
 }
-function tryOffsetSelector(selector, padding) {
-    const el = document.querySelector(selector);
-    if (!el)
-        return 0;
-    const bot = el.getBoundingClientRect().bottom;
-    if (bot < 0)
-        return 0;
-    return bot + padding;
-}
 function handleHMR(route) {
     // update route.data on HMR updates of active page
     if (import.meta.hot) {
@@ -249,16 +218,19 @@ function handleHMR(route) {
     }
 }
 function shouldHotReload(payload) {
-    const payloadPath = payload.path.replace(/(\bindex)?\.md$/, '');
+    const payloadPath = payload.path.replace(/(?:(^|\/)index)?\.md$/, '$1');
     const locationPath = location.pathname
-        .replace(/(\bindex)?\.html$/, '')
+        .replace(/(?:(^|\/)index)?\.html$/, '')
         .slice(siteDataRef.value.base.length - 1);
     return payloadPath === locationPath;
 }
-function updateHistory(href) {
-    if (inBrowser && href !== location.href) {
-        // save scroll position before changing url
-        history.replaceState({ scrollPosition: window.scrollY }, document.title);
-        history.pushState(null, '', href);
-    }
+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)
+        url.pathname = url.pathname.replace(/\.html$/, '');
+    else if (!url.pathname.endsWith('/') && !url.pathname.endsWith('.html'))
+        url.pathname += '.html';
+    return url.pathname + url.search + url.hash;
 }

package/dist/client/app/utils.js

@@ -83,3 +83,37 @@ export function defineClientComponent(loader, args, cb) {
         }
     };
 }
+export function getScrollOffset() {
+    let scrollOffset = siteDataRef.value.scrollOffset;
+    let offset = 0;
+    let padding = 24;
+    if (typeof scrollOffset === 'object' && 'padding' in scrollOffset) {
+        padding = scrollOffset.padding;
+        scrollOffset = scrollOffset.selector;
+    }
+    if (typeof scrollOffset === 'number') {
+        offset = scrollOffset;
+    }
+    else if (typeof scrollOffset === 'string') {
+        offset = tryOffsetSelector(scrollOffset, padding);
+    }
+    else if (Array.isArray(scrollOffset)) {
+        for (const selector of scrollOffset) {
+            const res = tryOffsetSelector(selector, padding);
+            if (res) {
+                offset = res;
+                break;
+            }
+        }
+    }
+    return offset;
+}
+function tryOffsetSelector(selector, padding) {
+    const el = document.querySelector(selector);
+    if (!el)
+        return 0;
+    const bot = el.getBoundingClientRect().bottom;
+    if (bot < 0)
+        return 0;
+    return bot + padding;
+}

package/dist/client/index.d.ts

@@ -61,9 +61,9 @@ interface VitePressData<T = any> {
     title: Ref<string>;
     description: Ref<string>;
     lang: Ref<string>;
-    isDark: Ref<boolean>;
     dir: Ref<string>;
     localeIndex: Ref<string>;
+    isDark: Ref<boolean>;
 }
 declare function useData<T = any>(): VitePressData<T>;
 
@@ -100,6 +100,7 @@ declare function defineClientComponent(loader: AsyncComponentLoader, args?: any[
         [key: string]: any;
     }> | null;
 };
+declare function getScrollOffset(): number;
 
 declare const Content: vue.DefineComponent<{
     as: {
@@ -108,7 +109,7 @@ declare const Content: vue.DefineComponent<{
     };
 }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     as: {
         type: (ObjectConstructor | StringConstructor)[];
         default: string;
@@ -117,4 +118,4 @@ declare const Content: vue.DefineComponent<{
     as: string | Record<string, any>;
 }, {}>;
 
-export { Content, type EnhanceAppContext, type Route, type Router, type Theme, type VitePressData, dataSymbol, defineClientComponent, inBrowser, onContentUpdated, useData, useRoute, useRouter, withBase };
+export { Content, type EnhanceAppContext, type Route, type Router, type Theme, type VitePressData, dataSymbol, defineClientComponent, getScrollOffset, inBrowser, onContentUpdated, useData, useRoute, useRouter, withBase };

package/dist/client/index.js

@@ -1,9 +1,9 @@
 // exports in this file are exposed to themes and md files via 'vitepress'
-// so the user can do `import { useRoute, useSiteData } from 'vitepress'`
+// so the user can do `import { useRoute, useData } from 'vitepress'`
 // composables
 export { useData, dataSymbol } from './app/data';
 export { useRoute, useRouter } from './app/router';
 // utilities
-export { inBrowser, onContentUpdated, defineClientComponent, withBase } from './app/utils';
+export { inBrowser, onContentUpdated, defineClientComponent, withBase, getScrollOffset } from './app/utils';
 // components
 export { Content } from './app/components/Content';

package/dist/client/shared.js

@@ -1,7 +1,8 @@
-export const EXTERNAL_URL_RE = /^[a-z]+:/i;
+export const EXTERNAL_URL_RE = /^(?:[a-z]+:|\/\/)/i;
 export const APPEARANCE_KEY = 'vitepress-theme-appearance';
-export const HASH_RE = /#.*$/;
-export const EXT_RE = /(index)?\.(md|html)$/;
+const HASH_RE = /#.*$/;
+const HASH_OR_QUERY_RE = /[?#].*$/;
+const INDEX_OR_EXT_RE = /(?:(^|\/)index)?\.(?:md|html)$/;
 export const inBrowser = typeof document !== 'undefined';
 export const notFoundPageData = {
     relativePath: '',
@@ -30,8 +31,10 @@ export function isActive(currentPath, matchPath, asRegex = false) {
     }
     return true;
 }
-export function normalize(path) {
-    return decodeURI(path).replace(HASH_RE, '').replace(EXT_RE, '');
+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);
@@ -67,6 +70,9 @@ export function createTitle(siteData, pageData) {
         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) {
@@ -108,3 +114,26 @@ export function sanitizeFileName(name) {
 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');
+}

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

@@ -35,7 +35,7 @@ provide('hero-image-slot-exists', heroImageSlotExists)
     <slot name="layout-top" />
     <VPSkipLink />
     <VPBackdrop class="backdrop" :show="isSidebarOpen" @click="closeSidebar" />
-    <VPNav v-if="frontmatter.navbar !== false">
+    <VPNav>
       <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
       <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
       <template #nav-bar-content-before><slot name="nav-bar-content-before" /></template>
@@ -56,7 +56,10 @@ provide('hero-image-slot-exists', heroImageSlotExists)
 
       <template #not-found><slot name="not-found" /></template>
       <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-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>