src/layouts/Default.astro

---
import type {
  DefaultLayoutQuery,
  Site,
  SiteLocale,
  Tag,
} from '@lib/datocms/types';
import { datocmsRequest } from '@lib/datocms';
import { defaultLocale, t } from '@lib/i18n';
import { getHomeHref } from '@lib/routing';
import { datocmsNoIndex, getSearchPathname } from '@lib/search';
import { siteName } from '@lib/seo';
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 LocaleSelector from '@components/LocaleSelector/LocaleSelector.astro';
import PerfHead from '@components/PerfHead/PerfHead.astro';
import PreviewModeProvider from '@components/PreviewMode/PreviewModeProvider.astro';
import StructuredData from '@components/StructuredData/StructuredData.astro';
import SeoHead from '@components/SeoHead.astro';
import SkipLink from '@components/SkipLink/SkipLink.astro';
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 },
})) as { site: Site };
const { breadcrumbs = [], pageUrls, seoMetaTags } = Astro.props;
const mainContentId = 'content';
---

<!doctype html>
<html lang={locale}>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <PerfHead />
    <SeoHead
      pageUrls={pageUrls}
      tags={[...data.site.faviconMetaTags, ...seoMetaTags]}
    />
    <StructuredData />
  </head>
  <body>
    <PreviewModeProvider>
      <SkipLink targetId={mainContentId} />
      <header {...datocmsNoIndex}>
        {
          /* accessible home link, inspired by https://www.gov.uk/; with Microformats rel */
        }
        <a
          rel="home"
          href={getHomeHref()}
          aria-label={t('go_to_home_page', { siteName: siteName() })}>[Logo]</a
        >
        <div>
          <LocaleSelector pageUrls={pageUrls} />
          <a rel="search" href={getSearchPathname(locale)}>{t('search')}</a>
        </div>
      </header>
      {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>
  /* very basic reset */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html,
  body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  }
  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 */
  header {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 2px solid black;
  }
  header div {
    display: flex;
  }
  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>