demo/src/layouts/Default/Default.astro

---
import { Document, Body } from 'astro-base-document';
// import Resets from '@julian_cataldo/astro-resets/Resets.astro';
// import LightBox from '@julian_cataldo/astro-lightbox/LightBox.astro';
import { Breakpoints } from 'astro-breakpoints';
import { PageTransition } from 'astro-page-transition';
/* ·········································································· */
import Landing from 'src/modules/Landing/Landing.astro';
import NavigationBar from 'src/components/NavigationBar/NavigationBar.astro';
import Footer from './Footer.astro';
import Head from './Head.astro';
/* ·········································································· */
// FIXME: FOUT
import '@fontsource/exo-2/variable.css';
import '@fontsource/exo-2/variable-italic.css';
/* ·········································································· */
// TODO: importing globally here for HMR smoothness
import './Default.global.scss';
/* —————————————————————————————————————————————————————————————————————————— */

export interface Props {
  titles: { main: string; sub?: string };
  description?: string;
  actions?: { title: string; href: string }[];
}
const props = { ...Astro.props } as Props;
/* ············································ Typeguards + Fallbacks ······ */
if (typeof props?.titles?.main !== 'string') {
  props.titles = { main: '' };
}
/* —————————————————————————————————————————————————————————————————————————— */
---

<Document
  id="test-base-rootDoc"
  data-theme="default"
  data-color-mode={'light' /* FIXME: repair mixin for no JS support (themes/selector.scss) */}
  data-is-top="true"
  lang="en"
  class:list={[
    `mode-${import.meta.env.MODE}`,
    'test-base-rootDoc-1',
    'test-base-rootDoc-2',
  ]}
  data-test="scrollObserver-rootDoc base-rootDoc"
>
  <Fragment slot="head">
    <Head titles={props.titles} />
  </Fragment>

  <Body
    id="test-base-body"
    slot={'body' /* NOTE: investigate why this works */}
    class:list={['test-base-body-1', 'test-base-body-2']}
    data-test="base-body"
  >
    <Breakpoints />

    <PageTransition
      speed={500}
      zIndex={99}
      background={'var(--app-overlay-color)'}
    />
    <!--—————————————————————————————————————————————————————————————————————-->

    <NavigationBar />

    <header>
      <Landing
        title={props.titles.main}
        description={props.titles.sub}
        actions={props.actions}
      />
    </header>

    <main>
      <slot />
    </main>

    <Footer />
  </Body>
</Document>

<!-- Disabled here because HMR issues -->
<!-- <style lang="scss" is:global>
  @import './Default.global';
</style> -->

<script>
  import './Default.client.ts';
</script>