docs: name the link to each package's example app by its host

The overview of each package now has a playground of its own, so the
link that opens the example app of the package reads "Open in
StackBlitz" or "Open in Snack" rather than "Playground".

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Author: timphandev

AGENTS.md

@@ -134,7 +134,8 @@ Native's `style` prop keeps its identity between renders.
   docs depend on React Native and its React types only to typecheck the
   recipes of `@lynstack/native-recipe`.
 - `examples` holds an example of each package that readers open in the
-  browser, from the Playground link of its overview page: `recipe` and
+  browser, from the Open in StackBlitz or Open in Snack link of its
+  overview page: `recipe` and
   `class-recipe` are React apps, built with Vite, that StackBlitz opens
   from the `main` branch, and `native-recipe/App.tsx` is the app of an
   Expo Snack, whose link `docs/src/packages.ts` builds. The examples are not in the

README.md

@@ -58,8 +58,9 @@ button({ tone: "danger" });
 
 The [Quick start](https://lynstack.github.io/recipe/class-recipe/quick-start/)
 styles a component step by step, and each package's README shows its own
-example. To try a package in the browser, open the Playground link on the
-overview page of its docs.
+example. To try a package in the browser, choose its variants in the
+playground on the overview page of its docs, or open its example app from
+the Open in StackBlitz or Open in Snack link there.
 
 ## Why recipe
 

docs/src/components/PackageMeta.astro

@@ -24,6 +24,6 @@ const pkg = packages[Astro.props.folder];
     <a href={pkg.source}>Source</a>
   </li>
   <li>
-    <a href={pkg.playground}>Playground</a>
+    <a href={pkg.exampleApp.url}>Open in {pkg.exampleApp.host}</a>
   </li>
 </ul>

docs/src/packages.ts

@@ -6,6 +6,12 @@ import recipePackage from "../../packages/recipe/package.json";
 
 const repository = "https://github.com/lynstack/recipe";
 
+/** An app that runs an example of a package, and the site that hosts it. */
+interface ExampleApp {
+  readonly host: "Snack" | "StackBlitz";
+  readonly url: string;
+}
+
 /** A package of the repository, as the docs present it. */
 interface PackageInfo {
   /** The npm name of the package. */
@@ -25,30 +31,33 @@ interface PackageInfo {
   /** The package's changelog on GitHub. */
   readonly changelog: string;
   /** An example of the package that runs in the browser, to edit and try. */
-  readonly playground: string;
+  readonly exampleApp: ExampleApp;
   /** The requirements of the package, on its installation page. */
   readonly requirements: string;
 }
 
 /** Opens the example in `examples/<folder>` on StackBlitz. */
-function stackBlitzUrl(folder: PackageIconName, file: string): string {
+function stackBlitzApp(folder: PackageIconName, file: string): ExampleApp {
   const query = new URLSearchParams({ file, title: `${folder} example` });
-  return `https://stackblitz.com/github/lynstack/recipe/tree/main/examples/${folder}?${query}`;
+  return {
+    host: "StackBlitz",
+    url: `https://stackblitz.com/github/lynstack/recipe/tree/main/examples/${folder}?${query}`,
+  };
 }
 
 /**
  * Opens `code` as the `App.js` of an Expo Snack that installs `dependency`.
  * The editor of Snack checks TypeScript with a version too old to read the
  * types of the packages, so the example runs as JavaScript.
  */
-function snackUrl(dependency: string, code: string): string {
+function snackApp(dependency: string, code: string): ExampleApp {
   const query = new URLSearchParams({
     dependencies: dependency,
     files: JSON.stringify({ "App.js": { contents: code, type: "CODE" } }),
     name: "native-recipe example",
     platform: "web",
   });
-  return `https://snack.expo.dev/?${query}`;
+  return { host: "Snack", url: `https://snack.expo.dev/?${query}` };
 }
 
 function packageInfo(
@@ -59,15 +68,15 @@ function packageInfo(
     readonly description: string;
     readonly license: string;
   },
-  { label, playground }: Pick<PackageInfo, "label" | "playground">,
+  { label, exampleApp }: Pick<PackageInfo, "exampleApp" | "label">,
 ): PackageInfo {
   return {
     changelog: `${repository}/blob/main/packages/${folder}/CHANGELOG.md`,
+    exampleApp,
     label,
     license: manifest.license,
     name: manifest.name,
     npm: `https://www.npmjs.com/package/${manifest.name}`,
-    playground,
     requirements: `/recipe/${folder}/installation/#requirements`,
     source: `${repository}/tree/main/packages/${folder}`,
     summary: manifest.description,
@@ -78,19 +87,19 @@ function packageInfo(
 /** Each package, by the name of its folder, which is also its sidebar topic. */
 const packages = {
   "class-recipe": packageInfo("class-recipe", classRecipePackage, {
+    exampleApp: stackBlitzApp("class-recipe", "src/recipes.ts"),
     label: "Class names",
-    playground: stackBlitzUrl("class-recipe", "src/recipes.ts"),
   }),
   "native-recipe": packageInfo("native-recipe", nativeRecipePackage, {
-    label: "React Native styles",
-    playground: snackUrl(
+    exampleApp: snackApp(
       `${nativeRecipePackage.name}@${nativeRecipePackage.version}`,
       nativeRecipeExample,
     ),
+    label: "React Native styles",
   }),
   recipe: packageInfo("recipe", recipePackage, {
+    exampleApp: stackBlitzApp("recipe", "src/recipes.ts"),
     label: "Core engine",
-    playground: stackBlitzUrl("recipe", "src/recipes.ts"),
   }),
 } as const satisfies Readonly<Record<PackageIconName, PackageInfo>>;