vitepress 2.0.0-alpha.4 → 2.0.0-alpha.5

package/README.md

@@ -1,6 +1,6 @@
 # VitePress 📝💨
 
-[![test](https://github.com/vuejs/vitepress/workflows/Test/badge.svg)](https://github.com/vuejs/vitepress/actions)
+[![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)](https://www.npmjs.com/package/vitepress)
 [![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/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/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,18 +8,16 @@ 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 { 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()
 
@@ -31,7 +28,11 @@ provide('hero-image-slot-exists', 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' }}

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

@@ -7,7 +7,7 @@ interface Props {
   tag?: string
   size?: 'medium' | 'big'
   theme?: 'brand' | 'alt' | 'sponsor'
-  text: string
+  text?: string
   href?: string
   target?: string;
   rel?: string;
@@ -35,7 +35,7 @@ const component = computed(() => {
     :target="props.target ?? (isExternal ? '_blank' : undefined)"
     :rel="props.rel ?? (isExternal ? 'noreferrer' : undefined)"
   >
-    {{ text }}
+    <slot>{{ text }}</slot>
   </component>
 </template>
 

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

@@ -1,23 +1,20 @@
 <script setup lang="ts">
 import NotFound from '../NotFound.vue'
 import { useData } from '../composables/data'
-import { useSidebar } from '../composables/sidebar'
+import { useLayout } from '../composables/layout'
 import VPDoc from './VPDoc.vue'
 import VPHome from './VPHome.vue'
 import VPPage from './VPPage.vue'
 
 const { page, frontmatter } = useData()
-const { hasSidebar } = useSidebar()
+const { isHome, hasSidebar } = useLayout()
 </script>
 
 <template>
   <div
     class="VPContent"
     id="VPContent"
-    :class="{
-      'has-sidebar': hasSidebar,
-      'is-home': frontmatter.layout === 'home'
-    }"
+    :class="{ 'has-sidebar': hasSidebar, 'is-home': isHome }"
   >
     <slot name="not-found" v-if="page.isNotFound"><NotFound /></slot>
 

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

@@ -2,14 +2,14 @@
 import { useRoute } from 'vitepress'
 import { computed } from 'vue'
 import { useData } from '../composables/data'
-import { useSidebar } from '../composables/sidebar'
+import { useLayout } from '../composables/layout'
 import VPDocAside from './VPDocAside.vue'
 import VPDocFooter from './VPDocFooter.vue'
 
 const { theme } = useData()
 
 const route = useRoute()
-const { hasSidebar, hasAside, leftAside } = useSidebar()
+const { hasSidebar, hasAside, leftAside } = useLayout()
 
 const pageName = computed(() =>
   route.path.replace(/[./]+/g, '_').replace(/_html$/, '')

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

@@ -1,26 +1,17 @@
 <script setup lang="ts">
-import { onContentUpdated } from 'vitepress'
-import { ref, shallowRef } from 'vue'
+import { ref } from 'vue'
 import { useData } from '../composables/data'
-import {
-  getHeaders,
-  resolveTitle,
-  useActiveAnchor,
-  type MenuItem
-} from '../composables/outline'
+import { resolveTitle, useActiveAnchor } from '../composables/outline'
 import VPDocOutlineItem from './VPDocOutlineItem.vue'
+import { useLayout } from '../composables/layout'
 
-const { frontmatter, theme } = useData()
-
-const headers = shallowRef<MenuItem[]>([])
-
-onContentUpdated(() => {
-  headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
-})
+const { theme } = useData()
 
 const container = ref()
 const marker = ref()
 
+const { headers, hasLocalNav } = useLayout()
+
 useActiveAnchor(container, marker)
 </script>
 
@@ -28,7 +19,7 @@ useActiveAnchor(container, marker)
   <nav
     aria-labelledby="doc-outline-aria-label"
     class="VPDocAsideOutline"
-    :class="{ 'has-outline': headers.length > 0 }"
+    :class="{ 'has-outline': hasLocalNav }"
     ref="container"
   >
     <div class="content">
@@ -43,7 +34,7 @@ useActiveAnchor(container, marker)
         {{ resolveTitle(theme) }}
       </div>
 
-      <VPDocOutlineItem :headers="headers" :root="true" />
+      <VPDocOutlineItem :headers :root="true" />
     </div>
   </nav>
 </template>

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

@@ -12,6 +12,6 @@ defineProps<{
 
 <template>
   <div class="VPDocAsideSponsors">
-    <VPSponsors mode="aside" :tier="tier" :size="size" :data="data" />
+    <VPSponsors mode="aside" :tier :size :data />
   </div>
 </template>

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { MenuItem } from '../composables/outline'
+import type { DefaultTheme } from 'vitepress/theme'
 
 defineProps<{
-  headers: MenuItem[]
+  headers: DefaultTheme.OutlineItem[]
   root?: boolean
 }>()
 
@@ -16,7 +16,9 @@ function onClick({ target: el }: Event) {
 <template>
   <ul class="VPDocOutlineItem" :class="root ? 'root' : 'nested'">
     <li v-for="{ children, link, title } in headers">
-      <a class="outline-link" :href="link" @click="onClick" :title="title">{{ title }}</a>
+      <a class="outline-link" :href="link" @click="onClick" :title>
+        {{ title }}
+      </a>
       <template v-if="children?.length">
         <VPDocOutlineItem :headers="children" />
       </template>

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

@@ -18,8 +18,8 @@ defineProps<{
   <VPLink
     class="VPFeature"
     :href="link"
-    :rel="rel"
-    :target="target"
+    :rel
+    :target
     :no-icon="true"
     :tag="link ? 'a' : 'div'"
   >

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

@@ -45,7 +45,7 @@ function onBlur() {
     </button>
 
     <div class="menu">
-      <VPMenu :items="items">
+      <VPMenu :items>
         <slot />
       </VPMenu>
     </div>

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useData } from '../composables/data'
-import { useSidebar } from '../composables/sidebar'
+import { useLayout } from '../composables/layout'
 
 const { theme, frontmatter } = useData()
-const { hasSidebar } = useSidebar()
+const { hasSidebar } = useLayout()
 </script>
 
 <template>

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

@@ -57,7 +57,7 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
         <div class="image-container">
           <div class="image-bg" />
           <slot name="home-hero-image">
-            <VPImage v-if="image" class="image-src" :image="image" />
+            <VPImage v-if="image" class="image-src" :image />
           </slot>
         </div>
       </div>
@@ -322,6 +322,9 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
   left: 50%;
   max-width: 192px;
   max-height: 192px;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
   /*rtl:ignore*/
   transform: translate(-50%, -50%);
 }

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

@@ -36,7 +36,7 @@ withDefaults(defineProps<Props>(), {
       </div>
 
       <div class="sponsors">
-        <VPSponsors :data="data" />
+        <VPSponsors :data />
       </div>
 
       <div v-if="actionLink" class="action">

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

@@ -1,11 +1,8 @@
 <script lang="ts" setup>
 import { useWindowScroll } from '@vueuse/core'
-import { onContentUpdated } from 'vitepress'
 import { computed, onMounted, ref } from 'vue'
 import { useData } from '../composables/data'
-import { useLocalNav } from '../composables/local-nav'
-import { getHeaders } from '../composables/outline'
-import { useSidebar } from '../composables/sidebar'
+import { useLayout } from '../composables/layout'
 import VPLocalNavOutlineDropdown from './VPLocalNavOutlineDropdown.vue'
 
 defineProps<{
@@ -16,9 +13,8 @@ defineEmits<{
   (e: 'open-menu'): void
 }>()
 
-const { theme, frontmatter } = useData()
-const { hasSidebar } = useSidebar()
-const { headers } = useLocalNav()
+const { theme } = useData()
+const { isHome, hasSidebar, headers, hasLocalNav } = useLayout()
 const { y } = useWindowScroll()
 
 const navHeight = ref(0)
@@ -31,31 +27,19 @@ onMounted(() => {
   )
 })
 
-onContentUpdated(() => {
-  headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
-})
-
-const empty = computed(() => {
-  return headers.value.length === 0
-})
-
-const emptyAndNoSidebar = computed(() => {
-  return empty.value && !hasSidebar.value
-})
-
 const classes = computed(() => {
   return {
     VPLocalNav: true,
     'has-sidebar': hasSidebar.value,
-    empty: empty.value,
-    fixed: emptyAndNoSidebar.value
+    empty: !hasLocalNav.value,
+    fixed: !hasLocalNav.value && !hasSidebar.value,
   }
 })
 </script>
 
 <template>
   <div
-    v-if="frontmatter.layout !== 'home' && (!emptyAndNoSidebar || y >= navHeight)"
+    v-if="!isHome && (hasLocalNav || hasSidebar || y >= navHeight)"
     :class="classes"
   >
     <div class="container">
@@ -72,7 +56,7 @@ const classes = computed(() => {
         </span>
       </button>
 
-      <VPLocalNavOutlineDropdown :headers="headers" :navHeight="navHeight" />
+      <VPLocalNavOutlineDropdown :headers :navHeight />
     </div>
   </div>
 </template>

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

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { onKeyStroke } from '@vueuse/core'
 import { onContentUpdated } from 'vitepress'
+import type { DefaultTheme } from 'vitepress/theme'
 import { nextTick, ref, watch } from 'vue'
 import { useData } from '../composables/data'
-import { resolveTitle, type MenuItem } from '../composables/outline'
+import { resolveTitle } from '../composables/outline'
 import VPDocOutlineItem from './VPDocOutlineItem.vue'
 
 const props = defineProps<{
-  headers: MenuItem[]
+  headers: DefaultTheme.OutlineItem[]
   navHeight: number
 }>()
 
@@ -83,7 +84,7 @@ function scrollToTop() {
           </a>
         </div>
         <div class="outline">
-          <VPDocOutlineItem :headers="headers" />
+          <VPDocOutlineItem :headers />
         </div>
       </div>
     </Transition>
@@ -125,7 +126,7 @@ function scrollToTop() {
   vertical-align: middle;
   margin-left: 2px;
   font-size: 14px;
-  transform: rotate(0)/*rtl:rotate(180deg)*/;
+  transform: rotate(0) /*rtl:rotate(180deg)*/;
   transition: transform 0.25s;
 }
 

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

@@ -11,7 +11,7 @@ defineProps<{
   <div class="VPMenu">
     <div v-if="items" class="items">
       <template v-for="item in items" :key="JSON.stringify(item)">
-        <VPMenuLink v-if="'link' in item" :item="item" />
+        <VPMenuLink v-if="'link' in item" :item />
         <component
           v-else-if="'component' in item"
           :is="item.component"

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

@@ -12,7 +12,7 @@ defineProps<{
     <p v-if="text" class="title">{{ text }}</p>
 
     <template v-for="item in items">
-      <VPMenuLink v-if="'link' in item" :item="item" />
+      <VPMenuLink v-if="'link' in item" :item />
     </template>
   </div>
 </template>

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

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import { useWindowScroll } from '@vueuse/core'
 import { ref, watchPostEffect } from 'vue'
-import { useData } from '../composables/data'
-import { useSidebar } from '../composables/sidebar'
+import { useLayout } from '../composables/layout'
 import VPNavBarAppearance from './VPNavBarAppearance.vue'
 import VPNavBarExtra from './VPNavBarExtra.vue'
 import VPNavBarHamburger from './VPNavBarHamburger.vue'
@@ -21,15 +20,14 @@ defineEmits<{
 }>()
 
 const { y } = useWindowScroll()
-const { hasSidebar } = useSidebar()
-const { frontmatter } = useData()
+const { isHome, hasSidebar } = useLayout()
 
 const classes = ref<Record<string, boolean>>({})
 
 watchPostEffect(() => {
   classes.value = {
     'has-sidebar': hasSidebar.value,
-    'home': frontmatter.value.layout === 'home',
+    'home': isHome.value,
     'top': y.value === 0,
     'screen-open': props.isScreenOpen
   }

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

@@ -16,13 +16,13 @@ const { theme } = useData()
       Main Navigation
     </span>
     <template v-for="item in theme.nav" :key="JSON.stringify(item)">
-      <VPNavBarMenuLink v-if="'link' in item" :item="item" />
+      <VPNavBarMenuLink v-if="'link' in item" :item />
       <component
         v-else-if="'component' in item"
         :is="item.component"
         v-bind="item.props"
       />
-      <VPNavBarMenuGroup v-else :item="item" />
+      <VPNavBarMenuGroup v-else :item />
     </template>
   </nav>
 </template>