feat: some hero code

packages/website/src/pages/[...locale]/tanks/[slug]/_index.tsx

@@ -1,26 +1,49 @@
 import { Tank, TankArmor } from '@blitzkit/core';
-import { Box } from '@radix-ui/themes';
-import { OrbitControls } from '@react-three/drei';
-import { Canvas } from '@react-three/fiber';
-import { ArmorGroup } from '../../../../components/ArmorGroup';
 import { PageWrapper } from '../../../../components/PageWrapper';
+import { HeroSection } from '../../../../components/Tankopedia/HeroSection';
+import {
+  LocaleProvider,
+  type LocaleAcceptorProps,
+} from '../../../../hooks/useLocale';
+import { App } from '../../../../stores/app';
+import { Duel } from '../../../../stores/duel';
+import { TankopediaEphemeral } from '../../../../stores/tankopediaEphemeral';
+import { TankopediaPersistent } from '../../../../stores/tankopediaPersistent';
+import type { MaybeSkeletonComponentProps } from '../../../../types/maybeSkeletonComponentProps';
 
-interface PageProps {
-  tank: Tank;
-  armor: TankArmor;
-}
+type PageProps = MaybeSkeletonComponentProps &
+  LocaleAcceptorProps & {
+    tank: Tank;
+    armor: TankArmor;
+  };
 
-export function Page({ tank, armor }: PageProps) {
+export function Page({ tank, armor, skeleton, locale }: PageProps) {
   return (
-    <PageWrapper p="0" maxWidth="unset">
-      <Box height="100%" width="100%" flexGrow="1" position="relative">
-        <Box position="absolute" top="0" left="0" width="100%" height="100%">
-          <Canvas>
-            <OrbitControls />
-            <ArmorGroup group="hull" tank={tank} armor={armor} />
-          </Canvas>
-        </Box>
-      </Box>
-    </PageWrapper>
+    <LocaleProvider locale={locale}>
+      <TankopediaEphemeral.Provider data={armor}>
+        <App.Provider>
+          <TankopediaPersistent.Provider>
+            <Duel.Provider
+              data={{
+                tank,
+                // provisionDefinitions,
+              }}
+            >
+              <PageWrapper p="0" maxWidth="unset" color="purple" gap="9" pb="9">
+                <HeroSection skeleton={skeleton} />
+                {/* <CalloutsSection /> */}
+                {/* <MetaSection /> */}
+                {/* {tank.type === TankType.RESEARCHABLE && !tank.deprecated && (
+                  <TechTreeSection skeleton={skeleton} />
+                )} */}
+                {/* <CharacteristicsSection /> */}
+                {/* <GameModeSection /> */}
+                {/* <VideoSection skeleton={skeleton} /> */}
+              </PageWrapper>
+            </Duel.Provider>
+          </TankopediaPersistent.Provider>
+        </App.Provider>
+      </TankopediaEphemeral.Provider>
+    </LocaleProvider>
   );
 }

packages/website/src/pages/[...locale]/tanks/[slug]/_pre_index.astro

@@ -0,0 +1,30 @@
+---
+import { fetchTank, fetchTankArmor } from '@blitzkit/core';
+import type { GetStaticPaths } from 'astro';
+import { awaitableTanksFull } from '../../../../core/awaitables/tanksFull';
+import BaseLayout from '../../../../layouts/BaseLayout.astro';
+import { getStaticPaths as parentGetStaticPaths } from '../index.astro';
+import { Page } from './_pre_index';
+
+export const getStaticPaths = (async () => {
+  const tanksFull = await awaitableTanksFull;
+  const parentPaths = parentGetStaticPaths();
+
+  return tanksFull.tanks
+    .map((tank) =>
+      parentPaths.map((parent) => ({
+        params: { ...parent.params, slug: tank.slug },
+        props: { id: tank.id },
+      })),
+    )
+    .flat();
+}) satisfies GetStaticPaths;
+
+const { id } = Astro.props;
+const tank = await fetchTank(id);
+const armor = await fetchTankArmor(id);
+---
+
+<BaseLayout>
+  <Page {tank} {armor} client:load />
+</BaseLayout>

packages/website/src/pages/[...locale]/tanks/[slug]/_pre_index.tsx

@@ -0,0 +1,26 @@
+import { Tank, TankArmor } from '@blitzkit/core';
+import { Box } from '@radix-ui/themes';
+import { OrbitControls } from '@react-three/drei';
+import { Canvas } from '@react-three/fiber';
+import { ArmorGroup } from '../../../../components/ArmorGroup';
+import { PageWrapper } from '../../../../components/PageWrapper';
+
+interface PageProps {
+  tank: Tank;
+  armor: TankArmor;
+}
+
+export function Page({ tank, armor }: PageProps) {
+  return (
+    <PageWrapper p="0" maxWidth="unset">
+      <Box height="100%" width="100%" flexGrow="1" position="relative">
+        <Box position="absolute" top="0" left="0" width="100%" height="100%">
+          <Canvas>
+            <OrbitControls />
+            <ArmorGroup group="hull" tank={tank} armor={armor} />
+          </Canvas>
+        </Box>
+      </Box>
+    </PageWrapper>
+  );
+}

packages/website/src/pages/[...locale]/tanks/[slug]/index.astro

@@ -1,5 +1,6 @@
 ---
 import { fetchTank, fetchTankArmor } from '@blitzkit/core';
+import { DEFAULT_LOCALE } from '@blitzkit/i18n';
 import type { GetStaticPaths } from 'astro';
 import { awaitableTanksFull } from '../../../../core/awaitables/tanksFull';
 import BaseLayout from '../../../../layouts/BaseLayout.astro';
@@ -20,11 +21,80 @@ export const getStaticPaths = (async () => {
     .flat();
 }) satisfies GetStaticPaths;
 
+const locale = Astro.params.locale ?? DEFAULT_LOCALE;
 const { id } = Astro.props;
 const tank = await fetchTank(id);
 const armor = await fetchTankArmor(id);
+
+// const strings = getStrings(locale);
+// const tankDefinitions = await fetchTankDefinitions();
+// const skillDefinitions = await fetchSkillDefinitions();
+// const provisionDefinitions = await fetchProvisionDefinitions();
+// const equipmentDefinitions = await fetchEquipmentDefinitions();
+// const tankModelDefinitions = await fetchModelDefinitions();
+// const tank = tankDefinitions.tanks[id];
+// const tankModelDefinition = tankModelDefinitions.models[tank.id];
+// const name = tank.name_full ?? tank.name;
+// const unwrap = unwrapper(locale);
+// const title = literals(strings.website.tools.tanks.tank_seo_title, [
+//   unwrap(name),
+//   TIER_ROMAN_NUMERALS[tank.tier],
+//   strings.common.nations_adjectives[
+//     tank.nation as keyof typeof strings.common.nations_adjectives
+//   ],
+//   strings.common.tank_class_short[tank.class],
+//   'BlitzKit',
+//   strings.common.nations[tank.nation as keyof typeof strings.common.nations],
+// ]);
+// const url = import.meta.env.SITE + Astro.url.pathname;
+// const icon = asset(`icons/tanks/big/${id}.webp`);
+// const turret = tank.turrets.at(-1)!;
+// const gun = turret.guns.at(-1)!;
+// const characteristics = tankCharacteristics(
+//   {
+//     tank,
+//     applyDynamicArmor: false,
+//     applyReactiveArmor: false,
+//     applySpallLiner: false,
+//     camouflage: true,
+//     consumables: [],
+//     crewSkills: createDefaultSkills(skillDefinitions),
+//     engine: tank.engines.at(-1)!,
+//     equipmentMatrix: genericDefaultEquipmentMatrix,
+//     turret,
+//     gun,
+//     provisions: createDefaultProvisions(tank, gun, provisionDefinitions),
+//     shell: gun.gun_type!.value.base.shells[0],
+//     stockEngine: tank.engines[0],
+//     stockGun: tank.turrets[0].guns[0],
+//     stockTurret: tank.turrets[0],
+//     stockTrack: tank.tracks[0],
+//     track: tank.tracks.at(-1)!,
+//   },
+//   { equipmentDefinitions, provisionDefinitions, tankModelDefinition },
+// );
+// const description = literals(strings.website.tools.tanks.tank_seo_description, [
+//   unwrap(name),
+//   Math.round(characteristics.dpm).toLocaleString(locale),
+//   Math.round(characteristics.damage).toLocaleString(locale),
+//   Math.round(characteristics.penetration).toLocaleString(locale),
+//   Math.round(characteristics.speedForwards).toLocaleString(locale),
+//   Math.round(characteristics.health).toLocaleString(locale),
+// ]);
 ---
 
+<!-- <title>{title}</title>
+<meta property="og:title" content={title} />
+<meta name="description" content={description} />
+<meta property="og:description" content={description} />
+<meta property="og:image" content={icon} />
+<meta property="og:url" content={url} />
+<meta name="twitter:title" content={title} />
+<meta name="twitter:description" content={description} />
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:image:src" content={icon} /> -->
 <BaseLayout>
-  <Page {tank} {armor} client:load />
+  <Page {tank} {armor} {locale} client:only="react">
+    <Page {tank} {armor} {locale} skeleton slot="fallback" />
+  </Page>
 </BaseLayout>