feat: hosting tech

packages/website/src/components/Embeds/breakdown.tsx

@@ -26,3 +26,9 @@ export function BreakdownPreview() {
     </BreakdownEmbedWrapper>
   );
 }
+
+export function BreakdownRenderer() {
+  const { useState } = useEmbedStateCurry<typeof breakdownConfig>();
+
+  return useState('cardBodyBackgroundColor');
+}

packages/website/src/constants/embeds.ts

@@ -3,6 +3,7 @@ import { grayA, grayDark, grayDarkA } from '@radix-ui/colors';
 import type { ReactNode } from 'react';
 import {
   BreakdownPreview,
+  BreakdownRenderer,
   compositeStatsKeysOptions,
 } from '../components/Embeds/breakdown';
 import type {
@@ -99,3 +100,7 @@ export function extractEmbedConfigDefaults<Config extends EmbedConfig>(
     Object.entries(config).map(([key, value]) => [key, value.default]),
   ) as ExtractEmbedConfigTypes<Config>;
 }
+
+export const embedRenderers = {
+  breakdown: BreakdownRenderer,
+} satisfies Record<string, () => ReactNode>;

packages/website/src/layouts/BaseLayout.astro

@@ -5,25 +5,12 @@ import { Checks } from '../components/Checks';
 import Footer from '../components/Footer.astro';
 import Navbar from '../components/Navbar.astro';
 import Party3 from '../components/Party3.astro';
+import './base.css';
 
 const { pathname } = Astro.url;
 const isRoot = pathname === '/';
 ---
 
-<style is:global>
-  @import '@radix-ui/themes/styles.css';
-
-  body {
-    margin: 0;
-  }
-
-  .ad-container {
-    display: flex;
-    align-items: center;
-  }
-</style>
-
-<!-- MIGRATION TODO: roboto flex font -->
 <html lang="en">
   <head>
     {

packages/website/src/layouts/EmbedLayout.astro

@@ -0,0 +1,13 @@
+---
+import './base.css';
+---
+
+<html>
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+
+  <body>
+    <slot />
+  </body>
+</html>

packages/website/src/layouts/base.css

@@ -0,0 +1,5 @@
+@import '@radix-ui/themes/styles.css';
+
+body {
+  margin: 0;
+}

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>

packages/website/src/types/urlon.d.ts

@@ -1,4 +1,5 @@
 declare module 'urlon' {
   function stringify(value: any): string;
-  export { stringify };
+  function parse(value: string): any;
+  export { parse, stringify };
 }