feat: hosting tech

packages/website/src/pages/tools/embed/[embed]/host/_index.tsx

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import { parse } from 'urlon';
+import {
+  embedConfigurations,
+  embedRenderers,
+  extractEmbedConfigDefaults,
+} from '../../../../../constants/embeds';
+import {
+  EmbedState,
+  type EmbedConfig,
+  type ExtractEmbedConfigTypes,
+} from '../../../../../stores/embedState';
+
+interface PageProps {
+  embed: keyof typeof embedConfigurations;
+}
+
+export function Page({ embed }: PageProps) {
+  const state = useMemo(() => {
+    const params = new URLSearchParams(window.location.search);
+    const stateRaw = params.get('state');
+    const partialState = stateRaw === null ? {} : parse(stateRaw);
+    const state = {
+      ...extractEmbedConfigDefaults(embedConfigurations[embed]),
+      ...partialState,
+    } as ExtractEmbedConfigTypes<EmbedConfig>;
+
+    return state;
+  }, [embed]);
+  const Renderer = embedRenderers[embed];
+
+  return (
+    <EmbedState.Provider data={state}>
+      <Renderer />
+    </EmbedState.Provider>
+  );
+}

packages/website/src/pages/tools/embed/[embed]/host/index.astro

@@ -1,14 +1,13 @@
 ---
-import { embedPreviews } from '../../../../../constants/embeds';
-import { EmbedState } from '../../../../../stores/embedState';
+import { capitalize } from 'lodash-es';
+import EmbedLayout from '../../../../../layouts/EmbedLayout.astro';
+import { Page } from './_index';
 
 export { getStaticPaths } from '../index.astro';
-
-const Test = embedPreviews.breakdown;
 ---
 
-sploinky sploinky splonk
+<title>BlitzKit - {capitalize(Astro.params.embed)} embed</title>
 
-<EmbedState.Provider>
-  <Test />
-</EmbedState.Provider>
+<EmbedLayout>
+  <Page client:only="react" embed={Astro.params.embed} />
+</EmbedLayout>