blitzkit/packages/preforged/tools/embed/[embed]/index.astro

---
import { AstroSeo } from '@astrolib/seo';
import type { GetStaticPaths } from 'astro';
import { capitalize } from 'lodash-es';
import { embedConfigurations } from '../../../../../constants/embeds';
import BaseLayout from '../../../../../layouts/BaseLayout.astro';
import { getStaticPaths as parentGetStaticPaths } from '../index.astro';
import { Page } from './_index';

export const getStaticPaths = (() => {
  const parentPaths = parentGetStaticPaths();

  return Object.keys(embedConfigurations)
    .map((embed) =>
      parentPaths.map((parent) => ({
        params: {
          ...parent.params,
          embed: embed as keyof typeof embedConfigurations,
        },
      })),
    )
    .flat();
}) satisfies GetStaticPaths;

const name = capitalize(Astro.params.embed);
const title = `BlitzKit - ${name} embed`;
const description = `BlitzKit ${name} embeds for streaming World of Tanks Blitz with extreme customization`;
const { locale } = Astro.params;
---

<AstroSeo
  title={title}
  description={description}
  canonical={Astro.url.href}
  openGraph={{
    url: Astro.url.href,
    title,
    description,
    site_name: 'BlitzKit',
  }}
  twitter={{ cardType: 'summary_large_image' }}
/>

<style is:global>
  @keyframes fade-out-border {
    from {
      outline: 1rem solid #ff0000ff;
    }
    to {
      outline: 0.75rem solid #ff000000;
    }
  }

  .preview-container-animated {
    animation: fade-out-border 0.5s linear;
  }

  .preview-container-animated:hover {
    outline: 1rem solid #ff000080;
  }
</style>

<BaseLayout>
  <Page {locale} client:load embed={Astro.params.embed} />
</BaseLayout>