---
import type { Props } from '@astrojs/starlight/props';
import { getImage } from 'astro:assets';
import StarlightHead from '@astrojs/starlight/components/Head.astro';
import VtbotStarlight from 'astro-vtbot/components/starlight/Base.astro';
import { OG } from '@data/constants';

const canonical = new URL(Astro.url.pathname, Astro.site || Astro.url.origin)
  .href;
const socialImageRes = await getImage({
  src: OG.image,
  width: 1200,
  height: 600,
  format: 'png',
});
const socialImage = new URL(socialImageRes.src, Astro.site || Astro.url.origin)
  .href;
---

<VtbotStarlight {...Astro.props} viewTransitionsFallback="animate">
  <StarlightHead {...Astro.props}>
    <slot />
  </StarlightHead>
  <meta property="og:url" content={canonical} />
  <meta property="og:image" content={socialImage} />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="600" />
  <meta property="og:image:type" content="image/png" />
  <meta property="twitter:url" content={canonical} />
  <meta name="twitter:image" content={socialImage} />
  <script>
    import '@scripts/lenisSmoothScroll.js';
  </script>
</VtbotStarlight>

<style is:global>
  /* Slow down Chrome's default animation */
  ::view-transition-group(root) {
    animation-duration: 250ms;
  }

  /* Do not slide over the sidebars */
  ::view-transition-group(*) {
    overflow: hidden;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const siteSearch = document.querySelector(
      'site-search'
    ) as HTMLElement | null;
    if (siteSearch) {
      siteSearch.setAttribute('data-lenis-prevent', '');
    }
  });
</script>