From 4f038c3757980ace3d710197256132e990d7454a Mon Sep 17 00:00:00 2001
From: Maxwell Barvian <max@barvian.me>
Date: Fri, 25 Oct 2024 19:35:27 -0700
Subject: [PATCH] Update Vue sandbox

---
 site/src/lib/framework.ts                              | 3 +++
 site/src/pages/[...framework]/_Hero.tsx                | 8 ++------
 site/src/pages/[...framework]/_Home.astro              | 5 ++++-
 site/src/pages/[...framework]/examples/_Examples.astro | 5 ++++-
 4 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/site/src/lib/framework.ts b/site/src/lib/framework.ts
index dab73d23..cb9a5ebf 100644
--- a/site/src/lib/framework.ts
+++ b/site/src/lib/framework.ts
@@ -1,5 +1,6 @@
 export type FrameworkData = {
 	name: string | undefined
+	sandbox: string
 	lightColor: string
 	darkColor: string
 }
@@ -7,11 +8,13 @@ export type FrameworkData = {
 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
index df186b45..797eff5d 100644
--- 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
index dc87c3fa..2f65d32b 100644
--- 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
index 17e08b58..60c1e6f2 100644
--- 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>