cloudcommerce 0.26.6 → 0.26.7

package/ecomplus-stores/monocard/functions/ssr/src/components/ShopHeader.vue

@@ -19,7 +19,7 @@
         >
           <i
             class="text-base-100 text-3xl"
-            :class="isSidenavOpen ? 'i-close' : 'i-menu'"
+            :class="isSidenavOpen ? 'i-close' : 'i-menu-3-line'"
           ></i>
         </button>
       </div>
@@ -29,22 +29,28 @@
         v-bind="{ isSticky, ...headerNavLinks }"
       />
       <div class="basis-1/4 px-2 flex justify-end items-center gap-3 lg:gap-4">
-        <AccountMenu
-          class="hidden sm:block"
-          :aria-label="$t.i19myAccount"
-          :service-links="serviceLinks"
-        >
+        <AccountMenu class="hidden sm:block">
           <template #button="{ open }">
             <i
-              class="i-account w-7 h-7
+              class="i-account-pin-circle-line w-7 h-7
               hover:text-primary hover:scale-110 active:scale-125"
               :class="open ? 'text-white scale-110' : 'text-base-200'"
             ></i>
           </template>
         </AccountMenu>
-        <button :aria-label="$t.i19openCart">
-          <i class="i-shopping-cart w-7 h-7
+        <button
+          :aria-label="$t.i19openCart"
+          @click="isCartOpen = !isCartOpen"
+          class="relative group"
+        >
+          <i class="i-shopping-bag-3-line w-7 h-7
             text-base-200 hover:text-primary hover:scale-110 active:scale-125"></i>
+          <span
+            v-if="delayedTotalItems"
+            class="ui-badge-pill-sm absolute -top-1 -right-1.5"
+          >
+            {{ delayedTotalItems }}
+          </span>
         </button>
       </div>
     </div>
@@ -53,46 +59,93 @@
       :has-close-button="false"
       position="absolute"
       :class="isSticky ? 'mt-2 md:mt-3' : 'mt-3 sm:mt-4 md:mt-5'"
-      :style="{ height: `calc(100vh - ${positionY}px + .5rem)` }"
+      :style="{
+        height: `calc(100vh - ${positionY}px + .5rem)`,
+        maxHeight: `calc(100dvh - ${positionY}px + .5rem)`,
+      }"
     >
       <ShopSidenav class="bg-white pt-6" />
     </Drawer>
+    <Teleport v-if="isMounted" to="#teleported-overlap">
+      <Drawer
+        v-model="isCartOpen"
+        placement="end"
+        backdrop-target="#teleported-overlap"
+      >
+        <Suspense>
+          <CartSidebar v-if="isCartOpenOnce" @close="isCartOpen = false" />
+          <template #fallback>
+            <Skeleton class="pt-16 px-6" is-bold />
+          </template>
+        </Suspense>
+      </Drawer>
+    </Teleport>
   </header>
 </template>
 
 <script setup lang="ts">
-import type { CategoriesList } from '@cloudcommerce/api/types';
-import { getCurrentInstance, ref } from 'vue';
-import useShopHeader from '@@sf/composables/use-shop-header';
+import {
+  ref,
+  watch,
+  onMounted,
+  defineAsyncComponent,
+  getCurrentInstance,
+} from 'vue';
+import { watchOnce } from '@vueuse/core';
+import { totalItems } from '@@sf/state/shopping-cart';
+import {
+  type Props as UseShopHeaderProps,
+  useShopHeader,
+} from '@@sf/composables/use-shop-header';
 import Drawer from '@@sf/components/Drawer.vue';
 import ShopSidenav from '~/components/ShopSidenav.vue';
 import ShopHeaderMenu from '~/components/ShopHeaderMenu.vue';
 import AccountMenu from '~/components/AccountMenu.vue';
 
-export interface Props {
-  categories: CategoriesList;
-  menuCategorySlugs?: string[];
-  menuRandomCategories?: number;
-  isAlphabeticalSortSubmenu?: boolean;
-  serviceLinks?: Array<{
-    title: string;
-    href: string;
-  }>;
-}
+export interface Props extends Omit<UseShopHeaderProps, 'header'> {}
 
+const CartSidebar = defineAsyncComponent(() => import('~/components/CartSidebar.vue'));
 const props = defineProps<Props>();
 const header = ref<HTMLElement | null>(null);
-const {
-  isSticky,
-  positionY,
-} = useShopHeader({ ...props, header });
+const { isSticky, positionY } = useShopHeader({ ...props, header });
 const isSidenavOpen = ref(false);
+const isSearchOpen = ref(false);
+const isSearchOpenOnce = ref(false);
+watchOnce(isSearchOpen, () => {
+  isSearchOpenOnce.value = true;
+});
+const isCartOpen = ref(false);
+const isCartOpenOnce = ref(false);
+watchOnce(isCartOpen, () => {
+  isCartOpenOnce.value = true;
+});
+const isMounted = ref(false);
+const delayedTotalItems = ref(0);
+onMounted(() => {
+  isMounted.value = true;
+  watch(totalItems, (newTotalItems, prevTotalItems) => {
+    if (typeof prevTotalItems === 'number') {
+      if (prevTotalItems < newTotalItems) {
+        isCartOpen.value = true;
+      } else if (prevTotalItems && !newTotalItems) {
+        isCartOpen.value = false;
+      }
+    }
+    delayedTotalItems.value = newTotalItems;
+  }, { immediate: true });
+});
 const vm = getCurrentInstance();
-const metafields = vm?.appContext.app.config.globalProperties.$settings.metafields || {};
+const metafields = {
+  support_url: '',
+  business_lp_url: '',
+  monocard_slug: '',
+  monodot_slug: '',
+  ...vm?.appContext.app.config.globalProperties.$settings.metafields,
+};
 const headerNavLinks = {
-  supportUrl: metafields.support_url || '',
-  businessLpUrl: metafields.business_lp_url || '',
-  monocardSlug: metafields.monocard_slug || '',
-  monodotSlug: metafields.monodot_slug || '',
+  supportUrl: metafields.support_url,
+  businessLpUrl: metafields.business_lp_url,
+  monocardSlug: metafields.monocard_slug,
+  monodotSlug: metafields.monodot_slug,
 };
 </script>

package/ecomplus-stores/monocard/functions/ssr/src/components/ShopHeaderMenu.vue

@@ -29,7 +29,7 @@
           >
             <span>{{ $t.i19buy }}</span>
             <i
-              class="i-chevron-down ml-1 transition-transform"
+              class="i-arrow-down-s-line ml-1 transition-transform"
               :class="open ? 'rotate-180' : 'opacity-50'"
             ></i>
           </MenuButton>

package/ecomplus-stores/monocard/functions/ssr/src/components/ShopSidenav.vue

@@ -12,7 +12,7 @@
     <footer class="text-base">
       <div class="flex items-center px-2 py-4 bg-base-100">
         <AccountLink class="p-2 grow flex items-center gap-3">
-          <i class="i-account text-4xl text-base-500 m-0"></i>
+          <i class="i-account-pin-circle-line text-4xl text-base-500 m-0"></i>
           <span class="leading-tight">
             {{ `${$t.i19hello} ${customerName || $t.i19visitor}` }}
             <small class="block lowercase font-semibold text-primary">
@@ -26,7 +26,7 @@
           class="p-2 text-right text-base-800"
         >
           <span class="text-base-600">{{ $t.i19logout }}</span>
-          <i class="i-logout text-lg ml-1"></i>
+          <i class="i-logout-circle-r-line text-lg ml-1"></i>
         </button>
       </div>
       <ul class="flex gap-3 p-4 bg-base-200 text-xl text-base-700">
@@ -47,7 +47,7 @@ import {
   isLogged,
   logout,
 } from '@@sf/state/customer-session';
-import { socialNetworks } from '@@sf/server-data';
+import { socialNetworks } from '@@sf/sf-lib';
 import AccountLink from '@@sf/components/AccountLink.vue';
 import SocialNetworkLink from '@@sf/components/SocialNetworkLink.vue';
 import ShopSidenavCategory from '~/components/ShopSidenavCategory.vue';

package/ecomplus-stores/monocard/functions/ssr/src/components/ShopSidenavCategory.vue

@@ -11,8 +11,8 @@
         :class="isOpen ? 'bg-base-100' : null"
       >
         <i :class="!isOpen
-          ? 'i-arrow-right float-right mb-0 mt-1 text-xl text-base-500'
-          : 'i-arrow-left text-lg'"></i>
+          ? 'i-arrow-right-line float-right mb-0 mt-1 text-xl text-base-500'
+          : 'i-arrow-left-line text-lg'"></i>
         <AImg
           v-if="!isOpen && categoryTree.icon"
           :picture="categoryTree.icon"

package/ecomplus-stores/monocard/functions/ssr/src/env.d.ts

@@ -1,5 +1,13 @@
-/// <reference path="../.astro/types.d.ts" />
 /// <reference types="@astrojs/image/client" />
 /// <reference types="vite-plugin-pwa/client" />
+/// <reference types="vue/ref-macros" />
 /// <reference types="@cloudcommerce/storefront/client" />
 /// <reference types="@cloudcommerce/storefront/server" />
+
+/* eslint-disable import/newline-after-import */
+
+declare module '*.vue' {
+  import { type DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/ecomplus-stores/monocard/functions/ssr/src/layouts/Base.astro

@@ -1,50 +1,15 @@
 ---
-import type { PageContext } from '@@sf/ssr-context';
-import Base from '@@sf/layouts/Base.astro';
+import SfBase from '@@sf/layouts/Base.astro';
 import InlineScripts from '~/scripts/InlineScripts.astro';
-import '@fontsource/inter/variable-full.css';
-
-export interface Props {
-  pageContext: PageContext;
-  title?: string;
-}
-
-const { pageContext, title } = Astro.props as Props;
+import '~/assets/style.css';
+import 'uno.css';
+import '@fontsource-variable/inter/index.css';
 ---
 
-<Base pageContext={pageContext} title={title}>
+<SfBase>
+  <Fragment slot="base-head">
+    <slot name="base-head" />
+  </Fragment>
   <InlineScripts slot="before-head-end" />
   <slot />
-</Base>
-
-<style is:global>
-@font-face {
-  font-family: 'Favorit';
-  src: url('/assets/fonts/FavoritPro-Regular.woff2') format('woff2');
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
-}
-:root {
-  --font-brand: "Favorit", sans-serif;
-  --custom-font-sans: "Inter";
-  --c-on-primary: rgb(0, 0, 0);
-  --un-prose-links: rgb(var(--rgb-primary-700));
-}
-@supports (font-variation-settings: normal) {
-  :root {
-    --custom-font-sans: "InterVariable";
-  }
-}
-html {
-  scroll-behavior: smooth;
-}
-body {
-  overflow-x: hidden;
-}
-a, button, button > * {
-  transition: background-color var(--transition),
-    color var(--transition), border-color var(--transition),
-    opacity var(--transition), transform var(--transition-fast);
-}
-</style>
+</SfBase>

package/ecomplus-stores/monocard/functions/ssr/src/layouts/PageFooter.astro

@@ -0,0 +1,52 @@
+---
+import {
+  type Props as ShopFooterProps,
+  default as ShopFooter,
+} from '~/components/ShopFooter.vue';
+
+const { routeContext } = Astro.locals;
+const { settings, getContent, isHomepage } = routeContext;
+const LogoHeading = isHomepage ? 'h2' : 'h3';
+const layoutContent = await getContent('layout');
+const {
+  footer: {
+    stamps,
+    pages_list: pagesList,
+  },
+} = layoutContent;
+let pageLinks: ShopFooterProps['pageLinks'];
+if (pagesList?.enabled) {
+  if (pagesList.links?.length) {
+    pageLinks = pagesList.links;
+  } else {
+    pageLinks = [];
+    const pageSlugs = await getContent('extra-pages/');
+    for (let i = 0; i < pageSlugs.length; i++) {
+      const { title } = await getContent(`extra-pages/${pageSlugs[i]}`);
+      if (title) {
+        pageLinks.push({ title, href: `/p/${pageSlugs[i]}` });
+      }
+    }
+  }
+}
+---
+
+<ShopFooter
+  {stamps}
+  {pageLinks}
+  pagesColTitle={pagesList?.title}
+>
+  <Fragment slot="logo">
+    <a href="/">
+      <LogoHeading>
+        <img
+          src={settings.logo}
+          alt={settings.name}
+          width="150"
+          height="24.5"
+          loading="lazy"
+        />
+      </LogoHeading>
+    </a>
+  </Fragment>
+</ShopFooter>

package/ecomplus-stores/monocard/functions/ssr/src/layouts/PageHeader.astro

@@ -0,0 +1,35 @@
+---
+import usePageHeader from '@@sf/layouts/use-page-header';
+import PitchBar from '~/components/PitchBar.vue';
+import ShopHeader from '~/components/ShopHeader.vue';
+
+const { routeContext } = Astro.locals;
+const { settings, isHomepage } = routeContext;
+const LogoHeading = isHomepage ? 'h1' : 'h2';
+const { pitchBar, shopHeader } = await usePageHeader({
+  routeContext,
+  listedCategoryFields: null,
+});
+---
+
+<slot name="pitch-bar">
+  {pitchBar.slides.length > 1 && <PitchBar {...pitchBar} client:idle />}
+  {pitchBar.slides.length === 1 && <PitchBar {...pitchBar} />}
+</slot>
+<ShopHeader {...shopHeader} client:load>
+  <Fragment slot="logo">
+    <a href="/">
+      <LogoHeading>
+        <img
+          src={settings.logo}
+          alt={settings.name}
+          width="150"
+          height="24.5"
+          fetchpriority="high"
+          loading="eager"
+          class="hover:drop-shadow-sm mx-auto"
+        />
+      </LogoHeading>
+    </a>
+  </Fragment>
+</ShopHeader>

package/ecomplus-stores/monocard/functions/ssr/src/main/Fallback.astro

@@ -1,9 +1,4 @@
 ---
-import type { PageContext } from '@@sf/ssr-context';
-
-export interface Props {
-  pageContext?: PageContext;
-}
 ---
 
 <main>

package/ecomplus-stores/monocard/functions/ssr/src/main/Home.astro

@@ -1,16 +1,10 @@
 ---
-import type { PageContext } from '@@sf/ssr-context';
-import api from '@cloudcommerce/api';
 import LottiePhoneNFC from '~/components/LottiePhoneNFC.vue';
 import CasesGrid from '~/components/CasesGrid.astro';
-import FeatureTabs from '~/components/FeatureTabs.astro';
+import FeaturesSection from '~/components/FeaturesSection.astro';
 
-export interface Props {
-  pageContext: PageContext;
-}
-
-const { settings } = Astro.props.pageContext;
-const products = (await api.get('products')).data.result;
+const { routeContext } = Astro.locals;
+const { settings } = routeContext;
 ---
 
 <main>
@@ -70,7 +64,7 @@ const products = (await api.get('products')).data.result;
           </div>
         </div>
         <div class="lg:col-span-4 mt-5 lg:mt-7 h-96 sm:h-auto">
-          <LottiePhoneNFC client:only />
+          <LottiePhoneNFC client:idle />
         </div>
       </div>
     </article>
@@ -80,7 +74,7 @@ const products = (await api.get('products')).data.result;
     <div class="max-w-lg mx-auto mt-7">
       <a href="/#avaliacoes" class="text-lg text-primary-600 hover:text-primary-800
         font-brand lowercase flex gap-1 sm:gap-2 items-center justify-center">
-        <i class="i-chevron-down text-3xl animate-bounce -mb-1.5"></i>
+        <i class="i-arrow-down-s-line text-3xl animate-bounce -mb-1.5"></i>
         <span class="underline underline-offset-4 decoration-primary">
           O que profissionais e times dizem</span>
         <div class="hidden sm:flex gap-0.5 text-xs text-yellow-400">
@@ -94,7 +88,7 @@ const products = (await api.get('products')).data.result;
     </div>
   </section>
   <section class="bg-gradient-to-br from-white to-base-100 py-9">
-    <FeatureTabs />
+    <FeaturesSection />
   </section>
   <section id="produtos"></section>
 </main>

package/ecomplus-stores/monocard/functions/ssr/src/main/Sections.astro

@@ -0,0 +1,38 @@
+---
+import { usePageSections } from '@@sf/layouts/use-page-main';
+import BannersGrid from '~/components/BannersGrid.astro';
+import ProductShelf from '~/components/ProductShelf.vue';
+import Breadcrumbs from '~/components/Breadcrumbs.astro';
+import DocDescription from '~/components/DocDescription.astro';
+
+const { routeContext } = Astro.locals;
+const { sections } = await usePageSections({
+  routeContext,
+  handleCustomSection: async (type, content) => {
+    if (type === 'c:foo') return { props: { ...content, foo: 'bar' } };
+    return { props: content };
+  },
+});
+/* `apiContext` is surelly set here (from Wildcard.astro)
+cause route resource is required to define sections from content. */
+const { apiContext: { doc: apiDoc } } = routeContext;
+---
+
+<article class="my-9 md:my-12">
+  {sections.map(async ({ type, props }) => {
+    switch (type) {
+      case 'product-shelf':
+        return <ProductShelf {...props} client:visible />
+      case 'banners-grid':
+        return <BannersGrid {...props} />
+      case 'breadcrumbs':
+        return apiDoc && <Breadcrumbs {...props} apiDoc={apiDoc} />
+      case 'doc-description':
+        return apiDoc && <DocDescription apiDoc={apiDoc} />
+      case 'c:foo':
+        return <div data-foo={props.foo}></div>
+      default:
+        return <div data-section={type}></div>
+    }
+  })}
+</article>

package/ecomplus-stores/monocard/functions/ssr/src/main/Wildcard.astro

@@ -1,23 +1,9 @@
 ---
-import type { PageContext } from '@@sf/ssr-context';
-
-export interface Props {
-  pageContext: PageContext;
-}
-
-const {
-  pageContext: { apiResource, apiDoc },
-} = Astro.props as Props;
+import Sections from '~/main/Sections.astro';
+const { fetchingApiContext } = Astro.locals.routeContext;
+await fetchingApiContext;
 ---
 
 <main>
-  {apiDoc &&
-    <h1>Hello <span class="text-gradient">{apiDoc.name}</span></h1>
-    <hr>
-    <div class="mt-3">
-      <mark>{apiDoc._id}</mark> from <i>{apiResource}</i>
-      <p>{Math.random()}</p>
-      <em>Lorem ipsum dolor sit amet</em>
-    </div>
-  }
+  <Sections />
 </main>

package/ecomplus-stores/monocard/functions/ssr/src/pages/[...slug].astro

@@ -1,17 +1,20 @@
 ---
 import api from '@cloudcommerce/api';
-import loadPageContext, { PageContext } from '@@sf/ssr-context';
-import PagesLayout from '~/layouts/Pages.astro';
+import loadRouteContext, { RouteContext } from '@@sf/ssr-context';
+import BaseHead from '@@sf/layouts/BaseHead.astro';
+import Base from '~/layouts/Base.astro';
+import PageHeader from '~/layouts/PageHeader.astro';
+import PageFooter from '~/layouts/PageFooter.astro';
 import WildcardMain from '~/main/Wildcard.astro';
 
 if (String(Astro.params.slug).endsWith('.css.map')) {
   return new Response(null, { status: 404 });
 }
 
-let pageContext: PageContext | undefined;
+let routeContext: RouteContext | undefined;
 let loadError: any;
 try {
-  pageContext = await loadPageContext(Astro);
+  routeContext = await loadRouteContext(Astro);
 } catch (err: any) {
   if (err.astroResponse) {
     return err.astroResponse;
@@ -26,11 +29,14 @@ export async function getStaticPaths() {
 ---
 
 <!DOCTYPE html>
-<html lang={pageContext?.lang.replace('_', '-')}>
-{pageContext &&
-  <PagesLayout pageContext={pageContext}>
-    <WildcardMain pageContext={pageContext} />
-  </PagesLayout>
+<html lang={routeContext?.lang.replace('_', '-')}>
+{routeContext &&
+  <Base>
+    <BaseHead slot="base-head" />
+    <PageHeader />
+    <WildcardMain />
+    <PageFooter />
+  </Base>
 }
 {loadError && <Fragment set:html={loadError.responseHTML} />}
 </html>

package/ecomplus-stores/monocard/functions/ssr/src/pages/comprar/index.astro

@@ -1,14 +1,18 @@
 ---
-import loadPageContext, { PageContext } from '@@sf/ssr-context';
-import PagesLayout from '~/layouts/Pages.astro';
+import loadRouteContext, { RouteContext } from '@@sf/ssr-context';
+import BaseHead from '@@sf/layouts/BaseHead.astro';
+import Base from '~/layouts/Base.astro';
+import PageHeader from '~/layouts/PageHeader.astro';
+import PageFooter from '~/layouts/PageFooter.astro';
 import MonocardCustomizer from '~/components/MonocardCustomizer.vue';
 import DemoVideo from '~/components/DemoVideo.vue';
+import cardCSS from '~/assets/card.css?raw';
 
-let pageContext: PageContext;
+let routeContext: RouteContext | undefined;
 let loadError: any;
 try {
-  pageContext = await loadPageContext(Astro);
-} catch (err) {
+  routeContext = await loadRouteContext(Astro);
+} catch (err: any) {
   if (err.astroResponse) {
     return err.astroResponse;
   }
@@ -22,9 +26,14 @@ window.monocardWithLogo = ${JSON.stringify(monocardWithLogo)};`;
 ---
 
 <!DOCTYPE html>
-<html lang={pageContext?.lang.replace('_', '-')}>
-{pageContext &&
-  <PagesLayout pageContext={pageContext}>
+<html lang={routeContext?.lang.replace('_', '-')}>
+{routeContext &&
+  <Base>
+    <Fragment slot="base-head">
+      <BaseHead />
+      <style is:inline set:html={cardCSS}></style>
+    </Fragment>
+    <PageHeader />
     <script is:inline set:html={inlineClientJS} />
     <MonocardCustomizer client:load {monocard} />
     <div class="max-w-3xl mx-auto mt-14">
@@ -36,7 +45,8 @@ window.monocardWithLogo = ${JSON.stringify(monocardWithLogo)};`;
         </a>
       </div>
     </div>
-  </PagesLayout>
+    <PageFooter />
+  </Base>
 }
 {loadError && <Fragment set:html={loadError.responseHTML} />}
 </html>

package/ecomplus-stores/monocard/functions/ssr/src/pages/index.astro

@@ -1,14 +1,17 @@
 ---
-import loadPageContext, { PageContext } from '@@sf/ssr-context';
-import PagesLayout from '~/layouts/Pages.astro';
+import loadRouteContext, { RouteContext } from '@@sf/ssr-context';
+import BaseHead from '@@sf/layouts/BaseHead.astro';
+import Base from '~/layouts/Base.astro';
+import PageHeader from '~/layouts/PageHeader.astro';
+import PageFooter from '~/layouts/PageFooter.astro';
 import HomeMain from '~/main/Home.astro';
 
-let pageContext: PageContext | undefined;
+let routeContext: RouteContext | undefined;
 let loadError: any;
 try {
-  pageContext = await loadPageContext(Astro);
+  routeContext = await loadRouteContext(Astro);
   /* Faster SSR without store categories (default) prefetch:
-  pageContext = await loadPageContext(Astro, {
+  routeContext = await loadRouteContext(Astro, {
     apiPrefetchEndpoints: [],
   });
   */
@@ -21,11 +24,14 @@ try {
 ---
 
 <!DOCTYPE html>
-<html lang={pageContext?.lang.replace('_', '-')}>
-{pageContext &&
-  <PagesLayout pageContext={pageContext}>
-    <HomeMain pageContext={pageContext} />
-  </PagesLayout>
+<html lang={routeContext?.lang.replace('_', '-')}>
+{routeContext &&
+  <Base>
+    <BaseHead slot="base-head" />
+    <PageHeader />
+    <HomeMain />
+    <PageFooter />
+  </Base>
 }
 {loadError && <Fragment set:html={loadError.responseHTML} />}
 </html>

package/ecomplus-stores/monocard/functions/ssr/src/pages/~fallback.astro

@@ -0,0 +1,25 @@
+---
+import loadRouteContext, { RouteContext } from '@@sf/ssr-context';
+import BaseHead from '@@sf/layouts/BaseHead.astro';
+import Base from '~/layouts/Base.astro';
+import PageHeader from '~/layouts/PageHeader.astro';
+import FallbackMain from '~/main/Fallback.astro';
+
+let routeContext: RouteContext;
+try {
+  routeContext = await loadRouteContext(Astro);
+} catch (err: any) {
+  return err.astroResponse;
+}
+
+// export const prerender = true;
+---
+
+<!DOCTYPE html>
+<html lang={routeContext?.lang.replace('_', '-')}>
+<Base>
+  <BaseHead slot="base-head" />
+  <PageHeader />
+  <FallbackMain />
+</Base>
+</html>