---
import TheHeader from '@/components/TheHeader.vue';
import SiteHead from '@/components/SiteHead.astro';
import Ad from '@/components/Ad.vue';
import SpriteSheet from '@/components/SpriteSheet.astro';
import '@/styles/tailwind.css';
import '@/styles/home.css';
import { buildMenu, Frontmatter } from '@/utils/seo';

const menu = [
  {
    title: 'tutorials',
    pages: buildMenu(await Astro.glob<Frontmatter>('../pages/tutorials/*.mdx')),
  },
  {
    title: 'guide',
    pages: buildMenu(await Astro.glob<Frontmatter>('../pages/guide/*.mdx')),
  },
  {
    title: 'examples',
    pages: buildMenu(await Astro.glob<Frontmatter>('../pages/examples/*.mdx')),
  },
  {
    title: 'resources',
    pages: buildMenu(await Astro.glob<Frontmatter>('../pages/resources.mdx')),
  },
  {
    title: 'integrations',
    pages: buildMenu(await Astro.glob<Frontmatter>('../pages/integrations/*.mdx')),
  },
  {
    title: 'api reference',
    pages: buildMenu(await Astro.glob<Frontmatter>('../pages/api/*.mdx')),
  },
];
---

<html lang="en">
  <SiteHead {...Astro.props} />
  <body>
    <SpriteSheet />
    <TheHeader client:load menu={menu} currentUrl="" />
    <div class="App">
      <main class="main">
        <slot />
      </main>
      <Ad client:idle placement="home-page" />
    </div>
  </body>
</html>
