Update Vue sandbox

barvian · Oct 26, 2024 · 4f038c3 · 4f038c3
1 parent 949a634
commit 4f038c3
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 8 deletions.
diff --git a/site/src/lib/framework.ts b/site/src/lib/framework.ts
@@ -1,17 +1,20 @@
 export type FrameworkData = {
 	name: string | undefined
+	sandbox: string
 	lightColor: string
 	darkColor: string
 }
 
 export const FRAMEWORKS = {
 	react: {
 		name: 'React',
+		sandbox: 'https://codesandbox.io/p/sandbox/r47dcw',
 		lightColor: '#0A7EA4',
 		darkColor: '#58C4DC'
 	},
 	vue: {
 		name: 'Vue',
+		sandbox: 'https://codesandbox.io/p/devbox/number-flow-vue-7t7y6y',
 		lightColor: '#42B883',
 		darkColor: '#42B883'
 	}

diff --git a/site/src/pages/[...framework]/_Hero.tsx b/site/src/pages/[...framework]/_Hero.tsx
@@ -44,7 +44,7 @@ const FORMATS = [
 	}
 ] as Format[]
 
-export default function Hero() {
+export default function Hero({ sandbox }: { sandbox: string }) {
 	const [value, cycleValue] = useCycle(NUMBERS)
 	const [locale, cycleLocale] = useCycle(LOCALES)
 	const [format, cycleFormat] = useCycle(FORMATS)
@@ -106,11 +106,7 @@ export default function Hero() {
 					</svg>
 					Shuffle
 				</button>
-				<a
-					href="https://codesandbox.io/p/sandbox/r47dcw"
-					target="_blank"
-					className="btn btn-secondary"
-				>
+				<a href={sandbox} target="_blank" className="btn btn-secondary">
 					Open sandbox
 					<ArrowUpRight className="size-4" />
 				</a>

diff --git a/site/src/pages/[...framework]/_Home.astro b/site/src/pages/[...framework]/_Home.astro
@@ -3,17 +3,20 @@ import DocsLayout from '@/layouts/Docs.astro'
 import type { MDXLayoutProps } from 'astro'
 import Hero from './_Hero'
 import Link from '@/components/Link.astro'
+import { FRAMEWORKS, getFramework } from '@/lib/framework'
 
 type Props = MDXLayoutProps<{
 	title: string
 	description: string
 }>
 
+const { sandbox } = FRAMEWORKS[getFramework(Astro.params)!]
+
 const { frontmatter } = Astro.props
 ---
 
 <DocsLayout title={frontmatter.title} description={frontmatter.description}>
-	<Hero transition:persist="home-hero" client:load slot="hero" />
+	<Hero transition:persist="home-hero" client:load {sandbox} slot="hero" />
 	<slot />
 	<footer
 		slot="footer"

diff --git a/site/src/pages/[...framework]/examples/_Examples.astro b/site/src/pages/[...framework]/examples/_Examples.astro
@@ -2,12 +2,15 @@
 import DocsLayout from '@/layouts/Docs.astro'
 import type { MDXLayoutProps } from 'astro'
 import { ArrowUpRight } from 'lucide-react'
+import { FRAMEWORKS, getFramework } from '@/lib/framework'
 
 type Props = MDXLayoutProps<{
 	title: string
 	description: string
 }>
 
+const { sandbox } = FRAMEWORKS[getFramework(Astro.params)!]
+
 const { frontmatter } = Astro.props
 ---
 
@@ -18,7 +21,7 @@ const { frontmatter } = Astro.props
 			<p>{frontmatter.description}</p>
 		</div>
 		<div class="~mt-6/8 flex w-full flex-wrap items-stretch justify-center gap-3">
-			<a href="https://codesandbox.io/p/sandbox/r47dcw" target="_blank" class="btn btn-primary">
+			<a href={sandbox} target="_blank" class="btn btn-primary">
 				Open sandbox
 				<ArrowUpRight className="size-4" />
 			</a>