cloudcommerce 0.26.6 → 0.27.0

package/ecomplus-stores/{iluminim → monocard}/functions/ssr/src/components/ShopFooter.vue

@@ -1,25 +1,25 @@
 <template>
-  <footer class="w-screen bg-base-50 border-t border-base-100 py-2">
+  <footer class="w-screen bg-black text-base-300 border-t border-base-100 py-2">
     <div class="ui-section">
       <div class="pb-7 border-b border-base-200
         flex justify-between flex-wrap lg:flex-nowrap sm:gap-x-10 gap-y-5">
         <div class="shrink">
           <slot name="logo" />
-          <div v-if="$settings.description" class="prose">
+          <div v-if="$settings.description" class="prose prose-invert">
             <p>{{ $settings.description }}</p>
           </div>
-          <div class="flex gap-2 text-base-500">
+          <div class="flex gap-2 text-base-400">
             <span v-for="(href, network) in socialNetworks" :key="network">
               <SocialNetworkLink :network="network" class="p-1 hover:text-primary">
                 <template v-if="network === 'whatsapp'" #append>
-                  <span class="ml-1 text-sm text-base-600">
+                  <span class="ml-1 text-sm text-base-300">
                     {{ $settings.whatsapp }}
                   </span>
                 </template>
               </SocialNetworkLink>
             </span>
           </div>
-          <div v-if="$settings.address || $settings.phone" class="mt-3 text-base-700">
+          <div v-if="$settings.address || $settings.phone" class="mt-3 text-base-200">
             <address v-if="$settings.address" class="inline-block mr-4">
               {{ $settings.address }}
             </address>
@@ -33,27 +33,6 @@
             </ALink>
           </div>
         </div>
-        <div v-if="categories?.length" class="basis-1/2 sm:basis-auto">
-          <div class="text-lg font-medium mb-2.5">
-            {{ categoriesColTitle || $t.i19categories }}
-          </div>
-          <ul
-            class="text-sm"
-            :class="categories.length > 4
-              ? 'grid md:grid-cols-2 gap-x-5 gap-y-1.5' : 'space-y-1.5'"
-          >
-            <li v-for="({ name, slug }, i) in categories" :key="`c-${i}`">
-              <ALink :href="`/${slug}`" class="ui-link text-base-600">
-                {{ name }}
-              </ALink>
-            </li>
-            <li>
-              <ALink href="/s" class="ui-link text-base-900">
-                {{ $t.i19allProducts }}
-              </ALink>
-            </li>
-          </ul>
-        </div>
         <div v-if="pageLinks?.length" class="basis-1/2 sm:basis-auto">
           <div class="text-lg font-medium mb-2.5">
             {{ pagesColTitle || $t.i19institutional }}
@@ -64,7 +43,7 @@
               ? 'grid md:grid-cols-2 gap-x-5 gap-y-1.5' : 'space-y-1.5'"
           >
             <li v-for="({ title, href }, i) in pageLinks" :key="`p-${i}`">
-              <ALink :href="href" class="ui-link text-base-600">
+              <ALink :href="href" class="ui-link text-base-50">
                 {{ title }}
               </ALink>
             </li>
@@ -89,7 +68,7 @@
                   <i v-else-if="stamp.icon === 'check'" class="i-check-badge"></i>
                   <i v-else class="i-arrow-path-rounded-square"></i>
                 </span>
-                <span class="text-sm font-medium text-base-600 max-w-[140px]">
+                <span class="text-sm font-medium text-base-300 max-w-[140px]">
                   {{ stamp.alt }}
                   <i
                     v-if="stamp.href && stamp.href.charAt(0) !== '/'"
@@ -106,6 +85,7 @@
             v-for="paymentMethod in $settings.payment_methods"
             :key="paymentMethod"
             :flag="paymentMethod"
+            class="!text-base-50"
           />
         </div>
       </div>
@@ -116,7 +96,7 @@
           {{ $settings.address ? `/ ${$settings.address}` : '' }}
           / {{ $settings.doc_number }}
         </div>
-        <ALink href="https://www.ecomplus.io/" class="italic text-[#37003c]">
+        <ALink href="https://www.ecomplus.io/" class="italic text-[rgb(239,235,240)]">
           powered by <b>E-Com Plus</b>
         </ALink>
       </div>
@@ -125,7 +105,6 @@
 </template>
 
 <script setup lang="ts">
-import type { Categories } from '@cloudcommerce/api/types';
 import type { LayoutContent } from '@@sf/content';
 import { socialNetworks } from '@@sf/sf-lib';
 import SocialNetworkLink from '@@sf/components/SocialNetworkLink.vue';
@@ -133,11 +112,6 @@ import PaymentMethodFlag from '@@sf/components/PaymentMethodFlag.vue';
 
 export interface Props {
   stamps?: LayoutContent['footer']['stamps'];
-  categories?: Array<Partial<Categories> & {
-    name: string;
-    slug: string;
-  }>;
-  categoriesColTitle?: string;
   pageLinks?: Array<{
     title: string;
     href: string;

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/{iluminim → monocard}/functions/ssr/src/layouts/PageFooter.astro

@@ -1,7 +1,4 @@
 ---
-import { filterMainCategories } from '@@sf/composables/use-shop-header';
-import useSharedData from '@@sf/composables/use-shared-data';
-import Picture from '@@sf/components/Picture.astro';
 import {
   type Props as ShopFooterProps,
   default as ShopFooter,
@@ -14,21 +11,10 @@ const layoutContent = await getContent('layout');
 const {
   footer: {
     stamps,
-    categories_list: categoriesList,
     pages_list: pagesList,
   },
 } = layoutContent;
-let mainCategories: ShopFooterProps['categories'];
 let pageLinks: ShopFooterProps['pageLinks'];
-if (categoriesList?.enabled) {
-  if (categoriesList.categories?.length) {
-    mainCategories = categoriesList.categories;
-  } else {
-    // Will wait and reuse categories loaded from <PageHeader>
-    const { value: categories } = await useSharedData({ field: 'categories' });
-    mainCategories = filterMainCategories(categories);
-  }
-}
 if (pagesList?.enabled) {
   if (pagesList.links?.length) {
     pageLinks = pagesList.links;
@@ -47,20 +33,18 @@ if (pagesList?.enabled) {
 
 <ShopFooter
   {stamps}
-  categories={mainCategories}
-  categoriesColTitle={categoriesList?.title}
   {pageLinks}
   pagesColTitle={pagesList?.title}
 >
   <Fragment slot="logo">
     <a href="/">
       <LogoHeading>
-        <Picture
+        <img
           src={settings.logo}
           alt={settings.name}
-          widths={[300]}
+          width="150"
+          height="24.5"
           loading="lazy"
-          class="max-w-[150px]"
         />
       </LogoHeading>
     </a>

package/ecomplus-stores/{iluminim → monocard}/functions/ssr/src/layouts/PageHeader.astro

@@ -1,20 +1,14 @@
 ---
 import usePageHeader from '@@sf/layouts/use-page-header';
-import useSharedData from '@@sf/composables/use-shared-data';
-import Picture from '@@sf/components/Picture.astro';
 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: { categories, ...shopHeader },
-} = await usePageHeader({ routeContext });
-const { inlineClientJS } = await useSharedData({
-  field: 'categories',
-  value: categories?.map(({ _id, ...c }) => c),
+const { pitchBar, shopHeader } = await usePageHeader({
+  routeContext,
+  listedCategoryFields: null,
 });
 ---
 
@@ -22,19 +16,18 @@ const { inlineClientJS } = await useSharedData({
   {pitchBar.slides.length > 1 && <PitchBar {...pitchBar} client:idle />}
   {pitchBar.slides.length === 1 && <PitchBar {...pitchBar} />}
 </slot>
-<script is:inline set:html={inlineClientJS} />
 <ShopHeader {...shopHeader} client:load>
   <Fragment slot="logo">
     <a href="/">
       <LogoHeading>
-        <Picture
-          slot="logo-picture"
+        <img
           src={settings.logo}
           alt={settings.name}
-          widths={[300]}
+          width="150"
+          height="24.5"
           fetchpriority="high"
           loading="eager"
-          class="hover:drop-shadow-sm max-w-[150px] mx-auto"
+          class="hover:drop-shadow-sm mx-auto"
         />
       </LogoHeading>
     </a>

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>