From 4dd1113b6d713559ca47ead7418c175f26ea87dc Mon Sep 17 00:00:00 2001 From: tresabhi <43380238+tresabhi@users.noreply.github.com> Date: Fri, 16 May 2025 00:03:47 -0500 Subject: [PATCH] feat: migrate embed and fix embed not rendering because of no context --- .../website/src/components/Embeds/Boolean.tsx | 2 +- .../website/src/components/Embeds/Color.tsx | 2 +- .../website/src/components/Embeds/Enum.tsx | 2 +- .../src/components/Embeds/GenerateURL.tsx | 2 +- .../website/src/components/Embeds/Radius.tsx | 2 +- .../src/components/Embeds/RichText.tsx | 2 +- .../website/src/components/Embeds/Size.tsx | 2 +- .../src/components/Embeds/SizeWithout0.tsx | 2 +- .../website/src/components/Embeds/Slider.tsx | 2 +- .../src/components/Embeds/TextController.tsx | 2 +- .../{tools => }/embed/[embed]/_index.tsx | 40 +++++++++---------- .../{tools => }/embed/[embed]/host/_index.tsx | 22 ++++++---- .../embed/[embed]/host/index.astro | 6 ++- .../{tools => }/embed/[embed]/index.astro | 4 +- .../[...locale]/{tools => }/embed/_index.tsx | 19 +++++---- .../src/pages/[...locale]/embed/index.astro | 13 ++++++ .../src/pages/[...locale]/tools/embed.astro | 7 ++++ .../pages/[...locale]/tools/embed/index.astro | 13 ------ 18 files changed, 79 insertions(+), 65 deletions(-) rename packages/website/src/pages/[...locale]/{tools => }/embed/[embed]/_index.tsx (86%) rename packages/website/src/pages/[...locale]/{tools => }/embed/[embed]/host/_index.tsx (66%) rename packages/website/src/pages/[...locale]/{tools => }/embed/[embed]/host/index.astro (50%) rename packages/website/src/pages/[...locale]/{tools => }/embed/[embed]/index.astro (91%) rename packages/website/src/pages/[...locale]/{tools => }/embed/_index.tsx (85%) create mode 100644 packages/website/src/pages/[...locale]/embed/index.astro create mode 100644 packages/website/src/pages/[...locale]/tools/embed.astro delete mode 100644 packages/website/src/pages/[...locale]/tools/embed/index.astro diff --git a/packages/website/src/components/Embeds/Boolean.tsx b/packages/website/src/components/Embeds/Boolean.tsx index 071caa1c4..60b6a5dbf 100644 --- a/packages/website/src/components/Embeds/Boolean.tsx +++ b/packages/website/src/components/Embeds/Boolean.tsx @@ -1,5 +1,5 @@ import { Switch } from '@radix-ui/themes'; -import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/tools/embed/[embed]/_index'; +import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index'; import { EmbedState } from '../../stores/embedState'; export function Boolean({ configKey }: EmbedPreviewControllerProps) { diff --git a/packages/website/src/components/Embeds/Color.tsx b/packages/website/src/components/Embeds/Color.tsx index 259665bb6..d6eb531de 100644 --- a/packages/website/src/components/Embeds/Color.tsx +++ b/packages/website/src/components/Embeds/Color.tsx @@ -1,4 +1,4 @@ -import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/tools/embed/[embed]/_index'; +import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index'; import { EmbedState } from '../../stores/embedState'; import { ColorControllerRaw } from './ColorControllerRaw'; diff --git a/packages/website/src/components/Embeds/Enum.tsx b/packages/website/src/components/Embeds/Enum.tsx index 607e9dfc0..67e20832b 100644 --- a/packages/website/src/components/Embeds/Enum.tsx +++ b/packages/website/src/components/Embeds/Enum.tsx @@ -1,6 +1,6 @@ import { Select } from '@radix-ui/themes'; import { useLocale } from '../../hooks/useLocale'; -import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/tools/embed/[embed]/_index'; +import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index'; import { EmbedState } from '../../stores/embedState'; import type { EmbedConfigItemType, diff --git a/packages/website/src/components/Embeds/GenerateURL.tsx b/packages/website/src/components/Embeds/GenerateURL.tsx index 71c9a9803..3afb5bf5d 100644 --- a/packages/website/src/components/Embeds/GenerateURL.tsx +++ b/packages/website/src/components/Embeds/GenerateURL.tsx @@ -199,7 +199,7 @@ export function GenerateURL({ embed }: GenerateURLProps) { setSearchDialogOpen(false); setCopyDialogOpen(false); - return `${location.origin}/tools/embed/${embed}/host?${searchParams.toString()}`; + return `${location.origin}/embed/${embed}/host?${searchParams.toString()}`; }} > {' '} diff --git a/packages/website/src/components/Embeds/Radius.tsx b/packages/website/src/components/Embeds/Radius.tsx index fe20a1c8f..28009a46a 100644 --- a/packages/website/src/components/Embeds/Radius.tsx +++ b/packages/website/src/components/Embeds/Radius.tsx @@ -1,5 +1,5 @@ import { Slider } from '@radix-ui/themes'; -import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/tools/embed/[embed]/_index'; +import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index'; import { EmbedState, type RadixRadius } from '../../stores/embedState'; export function Radius({ configKey }: EmbedPreviewControllerProps) { diff --git a/packages/website/src/components/Embeds/RichText.tsx b/packages/website/src/components/Embeds/RichText.tsx index 9cb75e9f0..1894b969a 100644 --- a/packages/website/src/components/Embeds/RichText.tsx +++ b/packages/website/src/components/Embeds/RichText.tsx @@ -1,6 +1,6 @@ import { FontBoldIcon, FontSizeIcon } from '@radix-ui/react-icons'; import { Flex, Slider, Text } from '@radix-ui/themes'; -import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/tools/embed/[embed]/_index'; +import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index'; import { EmbedState, type RadixSizeWithout0 } from '../../stores/embedState'; import { radixTextWeights, diff --git a/packages/website/src/components/Embeds/Size.tsx b/packages/website/src/components/Embeds/Size.tsx index 170119264..39a54ea40 100644 --- a/packages/website/src/components/Embeds/Size.tsx +++ b/packages/website/src/components/Embeds/Size.tsx @@ -1,5 +1,5 @@ import { Slider } from '@radix-ui/themes'; -import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/tools/embed/[embed]/_index'; +import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index'; import { EmbedState, type RadixSize } from '../../stores/embedState'; export function Size({ configKey }: EmbedPreviewControllerProps) { diff --git a/packages/website/src/components/Embeds/SizeWithout0.tsx b/packages/website/src/components/Embeds/SizeWithout0.tsx index 07415eaab..02f155661 100644 --- a/packages/website/src/components/Embeds/SizeWithout0.tsx +++ b/packages/website/src/components/Embeds/SizeWithout0.tsx @@ -1,5 +1,5 @@ import { Slider } from '@radix-ui/themes'; -import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/tools/embed/[embed]/_index'; +import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index'; import { EmbedState, type RadixSizeWithout0 } from '../../stores/embedState'; export function SizeWithout0({ configKey }: EmbedPreviewControllerProps) { diff --git a/packages/website/src/components/Embeds/Slider.tsx b/packages/website/src/components/Embeds/Slider.tsx index 8f5951d27..d45f085d5 100644 --- a/packages/website/src/components/Embeds/Slider.tsx +++ b/packages/website/src/components/Embeds/Slider.tsx @@ -1,5 +1,5 @@ import { Slider as RadixSlider } from '@radix-ui/themes'; -import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/tools/embed/[embed]/_index'; +import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index'; import { EmbedState, type RadixSize } from '../../stores/embedState'; import type { EmbedConfigItemType, diff --git a/packages/website/src/components/Embeds/TextController.tsx b/packages/website/src/components/Embeds/TextController.tsx index 894d71c88..91ae643b5 100644 --- a/packages/website/src/components/Embeds/TextController.tsx +++ b/packages/website/src/components/Embeds/TextController.tsx @@ -1,5 +1,5 @@ import { TextField } from '@radix-ui/themes'; -import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/tools/embed/[embed]/_index'; +import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index'; import { EmbedState } from '../../stores/embedState'; export function TextController({ configKey }: EmbedPreviewControllerProps) { diff --git a/packages/website/src/pages/[...locale]/tools/embed/[embed]/_index.tsx b/packages/website/src/pages/[...locale]/embed/[embed]/_index.tsx similarity index 86% rename from packages/website/src/pages/[...locale]/tools/embed/[embed]/_index.tsx rename to packages/website/src/pages/[...locale]/embed/[embed]/_index.tsx index 125f2a1a9..2693e60f8 100644 --- a/packages/website/src/pages/[...locale]/tools/embed/[embed]/_index.tsx +++ b/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; diff --git a/packages/website/src/pages/[...locale]/tools/embed/[embed]/host/_index.tsx b/packages/website/src/pages/[...locale]/embed/[embed]/host/_index.tsx similarity index 66% rename from packages/website/src/pages/[...locale]/tools/embed/[embed]/host/_index.tsx rename to packages/website/src/pages/[...locale]/embed/[embed]/host/_index.tsx index fbdc1b54e..755f5b248 100644 --- a/packages/website/src/pages/[...locale]/tools/embed/[embed]/host/_index.tsx +++ b/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 ( - - - + + + + + ); } diff --git a/packages/website/src/pages/[...locale]/tools/embed/[embed]/host/index.astro b/packages/website/src/pages/[...locale]/embed/[embed]/host/index.astro similarity index 50% rename from packages/website/src/pages/[...locale]/tools/embed/[embed]/host/index.astro rename to packages/website/src/pages/[...locale]/embed/[embed]/host/index.astro index 8bf3f08a5..a3e79ec72 100644 --- a/packages/website/src/pages/[...locale]/tools/embed/[embed]/host/index.astro +++ b/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; --- - + diff --git a/packages/website/src/pages/[...locale]/tools/embed/[embed]/index.astro b/packages/website/src/pages/[...locale]/embed/[embed]/index.astro similarity index 91% rename from packages/website/src/pages/[...locale]/tools/embed/[embed]/index.astro rename to packages/website/src/pages/[...locale]/embed/[embed]/index.astro index c161789f6..f1b8d7da6 100644 --- a/packages/website/src/pages/[...locale]/tools/embed/[embed]/index.astro +++ b/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'; diff --git a/packages/website/src/pages/[...locale]/tools/embed/_index.tsx b/packages/website/src/pages/[...locale]/embed/_index.tsx similarity index 85% rename from packages/website/src/pages/[...locale]/tools/embed/_index.tsx rename to packages/website/src/pages/[...locale]/embed/_index.tsx index d9956ac2e..47cd697b4 100644 --- a/packages/website/src/pages/[...locale]/tools/embed/_index.tsx +++ b/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} - . diff --git a/packages/website/src/pages/[...locale]/embed/index.astro b/packages/website/src/pages/[...locale]/embed/index.astro new file mode 100644 index 000000000..e538c3ea8 --- /dev/null +++ b/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; +--- + + + + diff --git a/packages/website/src/pages/[...locale]/tools/embed.astro b/packages/website/src/pages/[...locale]/tools/embed.astro new file mode 100644 index 000000000..179dd726a --- /dev/null +++ b/packages/website/src/pages/[...locale]/tools/embed.astro @@ -0,0 +1,7 @@ +--- +import ToolRedirect from '../../../components/ToolRedirect.astro'; + +export { getStaticPaths } from '../index.astro'; +--- + + diff --git a/packages/website/src/pages/[...locale]/tools/embed/index.astro b/packages/website/src/pages/[...locale]/tools/embed/index.astro deleted file mode 100644 index 366e9631e..000000000 --- a/packages/website/src/pages/[...locale]/tools/embed/index.astro +++ /dev/null @@ -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; ---- - - - -