Fix playground

apps/playgrounds/node/index.ts

@@ -1,9 +1,9 @@
 import arkenv from "arkenv";
 
 const env = arkenv({
-	NODE_ENV: "'development' | 'production' | 'test' = 'development'",
 	HOST: "string.host",
 	PORT: "number.port",
+	NODE_ENV: "'development' | 'production' | 'test' = 'development'",
 });
 
 // Automatically validate and parse process.env

apps/www/.env.example

@@ -2,10 +2,6 @@
 # Example: https://github.com/yamcodes/arkenv
 NEXT_PUBLIC_GITHUB_URL=
 
-# StackBlitz GitHub repository slug
-# Example: yamcodes/arkenv/tree/main/examples/basic
-NEXT_PUBLIC_STACKBLITZ_GITHUB_REPO_SLUG=
-
 # Sentry Data Source Name (DSN)
 # Example: https://...
 NEXT_PUBLIC_SENTRY_DSN=

apps/www/app/(home)/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import { Bricolage_Grotesque } from "next/font/google";
-import { SailButton, StackBlitzDemo, StarUsButton } from "~/components/page";
+import { SailButton, StarUsButton, VideoDemo } from "~/components/page";
 
 const bricolageGrotesque = Bricolage_Grotesque({
 	subsets: ["latin"],
@@ -41,9 +41,8 @@ export default function HomePage() {
 				<SailButton />
 				<StarUsButton />
 			</div>
-			<div className="mt-6 sm:mt-12 sm:px-8 max-w-5xl mx-auto w-full">
-				<h2 className="text-xl font-semibold mb-4">See ArkEnv in action 👇</h2>
-				<StackBlitzDemo />
+			<div className="mt-4 sm:mt-8 sm:px-8 max-w-5xl mx-auto w-full">
+				<VideoDemo />
 			</div>
 		</main>
 	);

apps/www/components/page/index.ts

@@ -1,5 +1,5 @@
 export * from "./copy-button";
 export * from "./logo";
 export * from "./sail-button";
-export * from "./stackblitz-demo";
 export * from "./star-us-button";
+export * from "./video-demo";

apps/www/components/page/star-us-button.tsx

@@ -6,6 +6,7 @@ import { Star } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Button } from "~/components/ui/button";
 import { cn } from "~/lib/utils/cn";
+import { breakDownGithubUrl } from "~/lib/utils/github";
 
 const starUsButtonVariants = cva("text-lg font-bold", {
 	variants: {
@@ -67,12 +68,17 @@ type StarUsProps = {
 export function StarUsButton({ className }: StarUsProps) {
 	const [starCount, setStarCount] = useState<number | null>(null);
 
+	// Compute githubUrl once and extract owner/repo
+	const githubUrl =
+		process.env.NEXT_PUBLIC_GITHUB_URL ?? "https://github.com/yamcodes/arkenv";
+	const { owner, repo } = breakDownGithubUrl(githubUrl);
+
 	// Fetch star count from GitHub API
 	useEffect(() => {
 		const fetchStarCount = async () => {
 			try {
 				const response = await fetch(
-					"https://api.github.com/repos/yamcodes/arkenv",
+					`https://api.github.com/repos/${owner}/${repo}`,
 				);
 				if (response.ok) {
 					const data = await response.json();
@@ -84,7 +90,7 @@ export function StarUsButton({ className }: StarUsProps) {
 		};
 
 		fetchStarCount();
-	}, []);
+	}, [owner, repo]);
 
 	return (
 		<>
@@ -130,10 +136,7 @@ export function StarUsButton({ className }: StarUsProps) {
 					className={cn(starUsButtonVariants({ variant: "mobile" }), className)}
 				>
 					<a
-						href={
-							process.env.NEXT_PUBLIC_GITHUB_URL ??
-							"https://github.com/your-org/your-repo"
-						}
+						href={`https://github.com/${owner}/${repo}`}
 						target="_blank"
 						rel="noopener noreferrer"
 					>
@@ -169,10 +172,7 @@ export function StarUsButton({ className }: StarUsProps) {
 					)}
 				>
 					<a
-						href={
-							process.env.NEXT_PUBLIC_GITHUB_URL ??
-							"https://github.com/your-org/your-repo"
-						}
+						href={`https://github.com/${owner}/${repo}`}
 						target="_blank"
 						rel="noopener noreferrer"
 					>

apps/www/components/page/video-demo.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+export function VideoDemo() {
+	const handleVideoClick = () => {
+		const stackblitzUrl =
+			"https://stackblitz.com/github/yamcodes/arkenv/tree/main/examples/basic?file=index.ts";
+		window.open(stackblitzUrl, "_blank", "noopener,noreferrer");
+	};
+
+	return (
+		<div className="inline-block relative mb-4">
+			{/* Shadow element for glow effect */}
+			<div className="absolute inset-0 rounded-lg pointer-events-none shadow-[0_0_20px_rgba(96,165,250,0.6)] dark:shadow-[0_0_100px_rgba(96,165,250,0.2)]" />
+
+			{/* Main video container */}
+			<button
+				type="button"
+				className="rounded-lg overflow-hidden border border-fd-border shadow-lg bg-black/5 dark:bg-black/20 cursor-pointer"
+				onClick={handleVideoClick}
+				aria-label="Play demo video"
+			>
+				<video
+					autoPlay
+					loop
+					muted
+					playsInline
+					className="block max-h-[600px] sm:max-h-[1000px] object-contain"
+				>
+					<source src="/arkenv-video.mov" type="video/quicktime" />
+					Your browser does not support the video tag.
+				</video>
+			</button>
+		</div>
+	);
+}

apps/www/package.json

@@ -18,13 +18,12 @@
 		"@radix-ui/react-slot": "^1.2.3",
 		"@radix-ui/react-toast": "^1.2.15",
 		"@sentry/nextjs": "^10.12.0",
-		"@stackblitz/sdk": "^1.11.0",
 		"arkdark": "^5.4.2",
 		"arkenv": "workspace:*",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
-		"fumadocs-mdx": "12.0.0",
 		"fumadocs-core": "15.7.13",
+		"fumadocs-mdx": "12.0.0",
 		"fumadocs-twoslash": "^3.1.7",
 		"fumadocs-ui": "15.7.13",
 		"import-in-the-middle": "^1.14.2",

examples/basic/package.json

@@ -5,6 +5,7 @@
 	"scripts": {
 		"start": "tsx --env-file .env index.ts",
 		"dev": "tsx watch --env-file .env index.ts",
+		"dev:example": "tsx watch --env-file .env.example index.ts",
 		"build": "tsc"
 	},
 	"dependencies": {
@@ -18,5 +19,8 @@
 	"packageManager": "npm@10.9.2",
 	"engines": {
 		"node": "22"
+	},
+	"stackblitz": {
+		"startCommand": "npm install && npm run dev:example"
 	}
 }