[...slug].astro

---
import type { InferGetStaticPropsType } from 'astro';
import TopBarWrapper from '../components/TopBarWrapper.astro';
import MainContainer from '../components/MainContainer.astro';
import PageLoadingIndicator from '../components/PageLoadingIndicator.astro';
import Layout from '../layouts/Layout.astro';
import '../styles/base.css';
import '@tutorialkit/custom.css';
import { generateStaticRoutes } from '../utils/routes';

export async function getStaticPaths() {
  return generateStaticRoutes();
}

type Props = InferGetStaticPropsType<typeof getStaticPaths>;

const { lesson, logoLink, navList, title } = Astro.props as Props;
const meta = lesson.data?.meta ?? {};

// use lesson's default title and a default description for SEO metadata
meta.title ??= title;
meta.description ??= 'A TutorialKit interactive lesson';
Astro.locals.tk = { lesson };
---

<Layout title={title} meta={meta}>
  <PageLoadingIndicator />
  <div id="previews-container"></div>
  <main class="max-w-full flex flex-col h-full overflow-hidden" data-swap-root>
    <TopBarWrapper logoLink={logoLink ?? '/'} openInStackBlitz={lesson.data.openInStackBlitz} />
    <MainContainer lesson={lesson} navList={navList} />
  </main>
</Layout>