src/layouts/Default.astro

---
import type { DefaultLayoutQuery, SiteLocale, Tag } from '@lib/datocms/types';
import { datocmsRequest } from '@lib/datocms';
import { defaultLocale } from '@lib/i18n';
import { datocmsNoIndex } from '@lib/search';
import type { PageUrl } from '@lib/seo';
import query from './default.query.graphql';
import Breadcrumbs from '@components/Breadcrumbs/Breadcrumbs.astro';
import type { Breadcrumb } from '@components/Breadcrumbs';
import IconSprite from '@components/Icon/IconSprite.astro';
import PreviewModeProvider from '@components/PreviewMode/PreviewModeProvider.astro';
import StructuredData from '@components/StructuredData/StructuredData.astro';
import SkipLink from '@components/SkipLink/SkipLink.astro';
import AppHeader from './AppHeader/AppHeader.astro';
import PerfHead from './PerfHead/PerfHead.astro';
import SeoHead from './SeoHead/SeoHead.astro';
import { fontFamilyArchivo } from '@assets/fonts';
import '@assets/a11y.css';

interface Props {
  breadcrumbs?: Breadcrumb[];
  pageUrls: PageUrl[];
  seoMetaTags: Tag[];
}

const { locale = defaultLocale } = Astro.params as { locale?: SiteLocale };
const data = await datocmsRequest<DefaultLayoutQuery>({
  query,
  variables: { locale },
});
const { breadcrumbs = [], pageUrls, seoMetaTags } = Astro.props;
const mainContentId = 'content';
const menuItems = data.app?.menuItems ?? [];
---

<!doctype html>
<html lang={locale}>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <PerfHead />
    <SeoHead
      pageUrls={pageUrls}
      tags={[...data.seo.faviconMetaTags, ...seoMetaTags]}
    />
    <StructuredData />
  </head>
  <body>
    <PreviewModeProvider>
      <SkipLink targetId={mainContentId} />
      <div {...datocmsNoIndex}>
        <AppHeader {menuItems} {pageUrls} />
      </div>
      {breadcrumbs.length > 0 && <Breadcrumbs items={breadcrumbs} />}
      {
        /* main element requires tabindex to be focusable, see SkipLink/README.md */
      }
      <main id={mainContentId} tabindex="-1">
        <slot />
      </main>
      <footer {...datocmsNoIndex}>
        <p>Footer</p>
      </footer>
    </PreviewModeProvider>
    <IconSprite />
  </body>
</html>

<style is:global define:vars={{ fontFamilyArchivo }}>
  /* very basic reset */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html,
  body {
    margin: 0;
    padding: 0;
    font-family: var(--fontFamilyArchivo);
  }
  figure {
    margin: 0;
  }
</style>
<style>
  /* Sticky footer. @see https://css-tricks.com/a-clever-sticky-footer-technique/ */
  html,
  body {
    height: 100%;
  }
  footer {
    position: sticky;
    top: 100vh;
  }

  /* Basic layout: header, main, footer */
  main {
    margin: auto;
    padding: 1rem;
    width: 800px;
    max-width: calc(100% - 2rem);
    font-size: 20px;
    line-height: 1.6;
  }
  footer {
    padding: 1rem;
    border-top: 2px solid black;
  }
</style>