feat: start on embed host

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

@@ -17,12 +17,12 @@ import {
 import { debounce } from 'lodash-es';
 import { useCallback, useRef, useState } from 'react';
 import { stringify } from 'urlon';
-import type { configurations } from '../../constants/embeds';
+import type { embedConfigurations } from '../../constants/embeds';
 import { EmbedState, type EmbedStateStore } from '../../stores/embedState';
 import { CopyButton } from '../CopyButton';
 
 interface CopyURLProps {
-  embed: keyof typeof configurations;
+  embed: keyof typeof embedConfigurations;
 }
 
 export function CopyURL({ embed }: CopyURLProps) {

packages/website/src/components/Embeds/PreviewWrapper/index.tsx

@@ -1,18 +1,18 @@
 import { Box } from '@radix-ui/themes';
 import { useEffect, useRef } from 'react';
-import { previews } from '../../../constants/embeds';
+import { embedPreviews } from '../../../constants/embeds';
 import { useEmbedStateCurry } from '../../../stores/embedState/utilities';
 import * as styles from './index.css';
 
 interface PreviewWrapperProps {
-  name: keyof typeof previews;
+  name: keyof typeof embedPreviews;
 }
 
 export function PreviewWrapper({ name }: PreviewWrapperProps) {
   const { useState } = useEmbedStateCurry();
   const width = useState('width');
   const height = useState('height');
-  const Preview = previews[name];
+  const Preview = embedPreviews[name];
   const wrapper = useRef<HTMLDivElement>(null);
 
   useEffect(() => {

packages/website/src/constants/embeds.ts

@@ -85,11 +85,11 @@ export const breakdownConfig = {
   column4CustomLabel: { type: EmbedItemType.String, default: '' },
 } satisfies EmbedConfig;
 
-export const configurations = {
+export const embedConfigurations = {
   breakdown: breakdownConfig,
 } satisfies Record<string, EmbedConfig>;
 
-export const previews = {
+export const embedPreviews = {
   breakdown: BreakdownPreview,
 } satisfies Record<string, () => ReactNode>;
 export function extractEmbedConfigDefaults<Config extends EmbedConfig>(

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

@@ -25,7 +25,7 @@ import { Slider } from '../../../../components/Embeds/Slider';
 import { TextController } from '../../../../components/Embeds/TextController';
 import { PageWrapper } from '../../../../components/PageWrapper';
 import {
-  configurations,
+  embedConfigurations,
   extractEmbedConfigDefaults,
 } from '../../../../constants/embeds';
 import { NAVBAR_HEIGHT } from '../../../../constants/navbar';
@@ -38,11 +38,11 @@ export interface EmbedPreviewControllerProps {
 }
 
 interface PageProps {
-  embed: keyof typeof configurations;
+  embed: keyof typeof embedConfigurations;
 }
 
 export function Page({ embed }: PageProps) {
-  const config = configurations[embed];
+  const config = embedConfigurations[embed];
 
   return (
     <App.Provider>
@@ -56,7 +56,7 @@ export function Page({ embed }: PageProps) {
 function Content({ embed }: PageProps) {
   const embedStateStore = EmbedState.useStore();
   const appStore = App.useStore();
-  const config = configurations[embed] as EmbedConfig;
+  const config = embedConfigurations[embed] as EmbedConfig;
   const [backgroundImage, setBackgroundImage] = useState(
     imgur('SO13zur', { format: 'jpeg' }),
   );

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

@@ -0,0 +1,14 @@
+---
+import { embedPreviews } from '../../../../../constants/embeds';
+import { EmbedState } from '../../../../../stores/embedState';
+
+export { getStaticPaths } from '../index.astro';
+
+const Test = embedPreviews.breakdown;
+---
+
+sploinky sploinky splonk
+
+<EmbedState.Provider>
+  <Test />
+</EmbedState.Provider>

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

@@ -1,12 +1,12 @@
 ---
 import type { GetStaticPaths } from 'astro';
-import { configurations } from '../../../../constants/embeds';
+import { embedConfigurations } from '../../../../constants/embeds';
 import BaseLayout from '../../../../layouts/BaseLayout.astro';
 import { Page } from './_index';
 
 export const getStaticPaths = (() => {
-  return Object.keys(configurations).map((embed) => ({
+  return Object.keys(embedConfigurations).map((embed) => ({
-    params: { embed: embed as keyof typeof configurations },
+    params: { embed: embed as keyof typeof embedConfigurations },
   }));
 }) satisfies GetStaticPaths;
 ---

packages/website/src/pages/tools/embed/index.astro

@@ -1,7 +1,7 @@
 ---
 import { Link } from '@radix-ui/themes';
 import { PageWrapper } from '../../../components/PageWrapper';
-import { configurations } from '../../../constants/embeds';
+import { embedConfigurations } from '../../../constants/embeds';
 import { embedTool } from '../../../constants/tools';
 import ToolLayout from '../../../layouts/ToolLayout.astro';
 ---
@@ -9,7 +9,7 @@ import ToolLayout from '../../../layouts/ToolLayout.astro';
 <ToolLayout tool={embedTool}>
   <PageWrapper color="red">
     {
-      Object.entries(configurations).map(([embed, config]) => (
+      Object.entries(embedConfigurations).map(([embed, config]) => (
         <Link href={`/tools/embed/${embed}`}>{embed}</Link>
       ))
     }