---
import "@fontsource/inter";
import "@fontsource/inter/500.css";
import "@fontsource/inter/600.css";
import "@fontsource/inter/700.css";
import "@fontsource/inter/800.css";
import "@fontsource/inter/900.css";

export interface Props {
  title: string;
}

const { title } = Astro.props;
const rybbitSiteId = "3";
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="generator" content={Astro.generator} />
    <!-- Primary Meta Tags -->
    <title>{title}</title>
    <meta name="title" content={title} />
    <meta
      name="description"
      content="Transform and upload spreadsheet data to CKAN with our streamlined desktop app, featuring 'recipes' for common data wrangling tasks. Based on the qsv CLI tool."
    />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://qsvpro.dathere.com" />
    <meta property="og:title" content={title} />
    <meta
      property="og:description"
      content="Transform and upload spreadsheet data to CKAN with our streamlined desktop app, featuring 'recipes' for common data wrangling tasks. Based on the qsv CLI tool."
    />
    <meta property="og:image" content="/sm-preview.jpg" />

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://qsvpro.dathere.com" />
    <meta property="twitter:title" content={title} />
    <meta
      property="twitter:description"
      content="Transform and upload spreadsheet data to CKAN with our streamlined desktop app, featuring 'recipes' for common data wrangling tasks. Based on the qsv CLI tool."
    />
    <meta property="twitter:image" content="/sm-preview.jpg" />
    <script is:inline
      src="https://mk-analytics.dathere.com/api/script.js"
      data-site-id={rybbitSiteId}
      data-session-replay="true"
      data-track-errors="true"
      data-web-vitals="true"
      async
      defer
    ></script>
  </head>
  <body>
    <slot />
    <style is:global>
      html {
        font-family: Inter;
        background-color: #26272b;
        overflow-x: hidden;
        scroll-behavior: smooth;
      }
    </style>
  </body>
</html>
