feat: migrate embed and fix embed not rendering because of no context

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

@@ -8,33 +8,33 @@ import {
 } from '@radix-ui/react-icons';
 import { Box, Button, Flex, Heading, ScrollArea, Text } from '@radix-ui/themes';
 import { useEffect, useRef, useState, type ReactNode } from 'react';
-import { CopyButton } from '../../../../../components/CopyButton';
-import { Boolean } from '../../../../../components/Embeds/Boolean';
-import { Color } from '../../../../../components/Embeds/Color';
-import { Enum } from '../../../../../components/Embeds/Enum';
-import { GenerateURL } from '../../../../../components/Embeds/GenerateURL';
-import { Import } from '../../../../../components/Embeds/Import';
-import { PreviewWrapper } from '../../../../../components/Embeds/PreviewWrapper';
-import { Radius } from '../../../../../components/Embeds/Radius';
-import { RichText } from '../../../../../components/Embeds/RichText';
-import { Size } from '../../../../../components/Embeds/Size';
-import { SizeWithout0 } from '../../../../../components/Embeds/SizeWithout0';
-import { Slider } from '../../../../../components/Embeds/Slider';
-import { TextController } from '../../../../../components/Embeds/TextController';
-import { PageWrapper } from '../../../../../components/PageWrapper';
+import { CopyButton } from '../../../../components/CopyButton';
+import { Boolean } from '../../../../components/Embeds/Boolean';
+import { Color } from '../../../../components/Embeds/Color';
+import { Enum } from '../../../../components/Embeds/Enum';
+import { GenerateURL } from '../../../../components/Embeds/GenerateURL';
+import { Import } from '../../../../components/Embeds/Import';
+import { PreviewWrapper } from '../../../../components/Embeds/PreviewWrapper';
+import { Radius } from '../../../../components/Embeds/Radius';
+import { RichText } from '../../../../components/Embeds/RichText';
+import { Size } from '../../../../components/Embeds/Size';
+import { SizeWithout0 } from '../../../../components/Embeds/SizeWithout0';
+import { Slider } from '../../../../components/Embeds/Slider';
+import { TextController } from '../../../../components/Embeds/TextController';
+import { PageWrapper } from '../../../../components/PageWrapper';
 import {
   embedConfigurations,
   extractEmbedConfigDefaults,
-} from '../../../../../constants/embeds';
-import { NAVBAR_HEIGHT } from '../../../../../constants/navbar';
+} from '../../../../constants/embeds';
+import { NAVBAR_HEIGHT } from '../../../../constants/navbar';
 import {
   LocaleProvider,
   useLocale,
   type LocaleAcceptorProps,
-} from '../../../../../hooks/useLocale';
-import { App } from '../../../../../stores/app';
-import { EmbedState, type EmbedConfig } from '../../../../../stores/embedState';
-import { EmbedItemType } from '../../../../../stores/embedState/constants';
+} from '../../../../hooks/useLocale';
+import { App } from '../../../../stores/app';
+import { EmbedState, type EmbedConfig } from '../../../../stores/embedState';
+import { EmbedItemType } from '../../../../stores/embedState/constants';
 
 export interface EmbedPreviewControllerProps {
   configKey: string;

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

@@ -1,24 +1,28 @@
 import { Box } from '@radix-ui/themes';
 import { useMemo } from 'react';
 import { parse } from 'urlon';
-import { BlitzKitTheme } from '../../../../../../components/BlitzKitTheme';
+import { BlitzKitTheme } from '../../../../../components/BlitzKitTheme';
 import {
   embedConfigurations,
   embedRenderers,
   extractEmbedConfigDefaults,
-} from '../../../../../../constants/embeds';
+} from '../../../../../constants/embeds';
+import {
+  LocaleProvider,
+  type LocaleAcceptorProps,
+} from '../../../../../hooks/useLocale';
 import {
   EmbedState,
   type EmbedConfig,
   type ExtractEmbedConfigTypes,
-} from '../../../../../../stores/embedState';
-import { useEmbedStateCurry } from '../../../../../../stores/embedState/utilities';
+} from '../../../../../stores/embedState';
+import { useEmbedStateCurry } from '../../../../../stores/embedState/utilities';
 
 interface PageProps {
   embed: keyof typeof embedConfigurations;
 }
 
-export function Page({ embed }: PageProps) {
+export function Page({ embed, locale }: PageProps & LocaleAcceptorProps) {
   const state = useMemo(() => {
     const params = new URLSearchParams(window.location.search);
     const stateRaw = params.get('state');
@@ -32,9 +36,11 @@ export function Page({ embed }: PageProps) {
   }, [embed]);
 
   return (
-    <EmbedState.Provider data={state}>
-      <Content embed={embed} />
-    </EmbedState.Provider>
+    <LocaleProvider locale={locale}>
+      <EmbedState.Provider data={state}>
+        <Content embed={embed} />
+      </EmbedState.Provider>
+    </LocaleProvider>
   );
 }
 

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

@@ -1,11 +1,13 @@
 ---
-import EmbedLayout from '../../../../../../layouts/EmbedLayout.astro';
+import EmbedLayout from '../../../../../layouts/EmbedLayout.astro';
 import type { getStaticPaths } from '../index.astro';
 import { Page } from './_index';
 
 export { getStaticPaths } from '../index.astro';
+
+const { locale } = Astro.params;
 ---
 
 <EmbedLayout>
-  <Page client:only="react" embed={Astro.params.embed} />
+  <Page {locale} client:only="react" embed={Astro.params.embed} />
 </EmbedLayout>

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

@@ -2,8 +2,8 @@
 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 { embedConfigurations } from '../../../../constants/embeds';
+import BaseLayout from '../../../../layouts/BaseLayout.astro';
 import { getStaticPaths as parentGetStaticPaths } from '../index.astro';
 import { Page } from './_index';
 

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

@@ -1,19 +1,19 @@
 import { Box, Flex, Link, Text } from '@radix-ui/themes';
-import { PreviewWrapper } from '../../../../components/Embeds/PreviewWrapper';
-import { LinkI18n } from '../../../../components/LinkI18n';
-import { PageWrapper } from '../../../../components/PageWrapper';
+import { PreviewWrapper } from '../../../components/Embeds/PreviewWrapper';
+import { LinkI18n } from '../../../components/LinkI18n';
+import { PageWrapper } from '../../../components/PageWrapper';
 import {
   embedConfigurations,
   extractEmbedConfigDefaults,
-} from '../../../../constants/embeds';
-import { Var } from '../../../../core/radix/var';
+} from '../../../constants/embeds';
+import { Var } from '../../../core/radix/var';
 import {
+  type LocaleAcceptorProps,
   LocaleProvider,
   useLocale,
-  type LocaleAcceptorProps,
-} from '../../../../hooks/useLocale';
-import { App } from '../../../../stores/app';
-import { EmbedState } from '../../../../stores/embedState';
+} from '../../../hooks/useLocale';
+import { App } from '../../../stores/app';
+import { EmbedState } from '../../../stores/embedState';
 
 export function Page({ locale }: LocaleAcceptorProps) {
   return (
@@ -39,7 +39,6 @@ function Content() {
         >
           {strings.website.tools.embed.suggest}
         </Link>
-        .
       </Text>
 
       <Flex justify="center">

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

@@ -0,0 +1,13 @@
+---
+import { embedTool } from '../../../constants/tools';
+import ToolLayout from '../../../layouts/ToolLayout.astro';
+import { Page } from './_index';
+
+export { getStaticPaths } from '../index.astro';
+
+const { locale } = Astro.params;
+---
+
+<ToolLayout tool={embedTool}>
+  <Page {locale} />
+</ToolLayout>

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

@@ -0,0 +1,7 @@
+---
+import ToolRedirect from '../../../components/ToolRedirect.astro';
+
+export { getStaticPaths } from '../index.astro';
+---
+
+<ToolRedirect tool="embed" />

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

@@ -1,13 +0,0 @@
----
-import { embedTool } from '../../../../constants/tools';
-import ToolLayout from '../../../../layouts/ToolLayout.astro';
-import { Page } from './_index';
-
-export { getStaticPaths } from '../../index.astro';
-
-const { locale } = Astro.params;
----
-
-<ToolLayout tool={embedTool}>
-  <Page {locale} />
-</ToolLayout>