v10/site/src/layouts/Docs.astro

---

import { type CollectionEntry, getCollection } from 'astro:content';
import DocsSidebar from '@/components/docs/DocsSidebar.astro';
import DocsSidebarRestoration from '@/components/docs/DocsSidebarRestoration.astro';
import { Selectors } from '@/components/docs/Selectors';
import StyleInit from '@/components/docs/StyleInit.astro';
import Footer from '@/components/FooterDocs.astro';
import FooterEasterEgg from '@/components/FooterEasterEgg.astro';
import NavBarDocs from '@/components/NavBar/NavBarDocs.astro';
import { FRAMEWORK_LABELS, type SupportedFramework } from '@/types/docs';
import { getDocTitle } from '@/utils/docs/title';
import Base from './Base.astro';

type Props = {
  doc: CollectionEntry<'docs'>;
  framework: SupportedFramework;
  slug: string;
};

const { doc, framework, slug } = Astro.props;

// Fetch all docs to get their framework-specific titles
const allDocs = await getCollection('docs');
const docTitles = new Map(allDocs.map((d) => [d.id, getDocTitle(d, framework)]));

const seoCategory = `${FRAMEWORK_LABELS[framework]} Video Player`;
const docsSidebarId = 'docs-sidebar';
---

<Base
  title={getDocTitle(doc, framework)}
  suffix={`Open Source ${FRAMEWORK_LABELS[framework]} Video Player`}
  description={`${doc.data.description} — Video.js ${seoCategory}.`}
>
  <Fragment slot="priority-head">
    <StyleInit />
  </Fragment>
  <Fragment slot="head">
    <DocsSidebarRestoration docsSidebarId={docsSidebarId} />
    <slot name="head" slot="head" />
  </Fragment>
  <div
    class:list={[
      "grid min-h-screen grid-cols-1",
      "md:grid-cols-(--md-grid-cols) lg:grid-cols-(--lg-grid-cols)",
      "[--nav-h:calc(var(--spacing)*13)] sm:[--nav-h:calc(var(--spacing)*13.5)]",
    ]}
    style={{
      "--md-grid-cols": `calc(var(--spacing) * 70) minmax(0,1fr)`,
      "--lg-grid-cols": `calc(var(--spacing) * 75) minmax(0,1fr)`,
      "grid-template-rows": "auto minmax(0,1fr)",
    }}
  >
    <NavBarDocs class="col-span-full">
      <DocsSidebar
        slot="mobile-nav"
        framework={framework}
        docTitles={docTitles}
      />
    </NavBarDocs>
    <aside
      id={docsSidebarId}
      class="sticky z-10 hidden flex-col overflow-y-auto border-manila-75 md:flex md:border-r dark:border-warm-gray"
      style="top: var(--nav-h); max-height: calc(100vh - var(--nav-h));"
    >
      <DocsSidebar framework={framework} docTitles={docTitles} class="flex-1">
        <Selectors
          client:idle
          currentFramework={framework}
          currentSlug={slug}
        />
      </DocsSidebar>
    </aside>
    <div>
      <div class="flex flex-col" style="min-height:calc(100vh - var(--nav-h));">
        <slot />
      </div>
      <Footer class="mt-auto" />
      <FooterEasterEgg variant="short" class="md:col-start-2" />
    </div>
  </div>
</Base>