---
import '@styles/main.css';
import { Container } from '@components/primitives';
import { Sidebar } from '@/components/patterns';
import { Header } from '@/components/patterns';

interface Props {
  title?: string;
  description?: string;
}

const {
  title = 'Express - Node.js web application framework',
  description = 'Fast, unopinionated, minimalist web framework for Node.js',
} = Astro.props;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <link rel="icon" href="/favicon.ico" sizes="any" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />
    <meta name="description" content={description} />

    <title>{title}</title>

    <style is:inline>
      @layer base, primitives, patterns;
    </style>

    <link rel="sitemap" href="/sitemap-index.xml" />
    <!-- Robots meta tag for Google Search. Enables a large image preview in Google search results,
      most pertinently in Chrome’s “Discover” view on mobile. See:
      https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag#max-image-preview
    -->
    <meta name="robots" content="max-image-preview:large, index, follow" />
    <meta name="googlebot" content="index, follow" />
  </head>
  <body>
    <Sidebar />
    <Header />
    <Container>
      <slot />
    </Container>
  </body>
</html>
