From 999a30c38bd4212faf86b32589fa6ea1e77dd701 Mon Sep 17 00:00:00 2001
From: unnoq <contact@unnoq.com>
Date: Tue, 19 Nov 2024 15:22:09 +0700
Subject: [PATCH] docs: update playgrounds

---
 apps/content/content/docs/playground.mdx  | 39 ++++++++++++++++++++---
 playgrounds/contract-openapi/package.json |  6 ++--
 playgrounds/expressjs/package.json        | 11 ++-----
 playgrounds/nextjs/package.json           |  6 ++--
 4 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/apps/content/content/docs/playground.mdx b/apps/content/content/docs/playground.mdx
index 0a45eac5..8a53e466 100644
--- a/apps/content/content/docs/playground.mdx
+++ b/apps/content/content/docs/playground.mdx
@@ -1,10 +1,41 @@
 ---
 title: Playground
-description: The playground for oRPC
+description: Interactive development environments for exploring and testing oRPC functionality.
 icon: Code
 ---
 
-The oRPC Playground is an interactive environment for testing and experimenting with oRPC without local setup. 
-Try it out on [StackBlitz](https://stackblitz.com/~/github/unnoq/orpc-playground).
+Explore oRPC implementations through our interactive playgrounds, 
+featuring pre-configured examples accessible instantly via StackBlitz or local setup.
 
-<iframe src="https://stackblitz.com/~/github.com/unnoq/orpc-playground?embed=1" className="w-full"></iframe>
+## Available Playgrounds
+
+| Environment | StackBlitz | GitHub Source |
+|------------|------------|---------------|
+| Next.js Playground | [Open in StackBlitz](https://stackblitz.com/github/unnoq/orpc/tree/main/playgrounds/nextjs?file=src%2Frouter%2Findex.ts) | [View Source](https://github.com/unnoq/orpc/tree/main/playgrounds/nextjs/src/router/index.ts) |
+| OpenAPI Playground | [Open in StackBlitz](https://stackblitz.com/github/unnoq/orpc/tree/main/playgrounds/openapi?file=src%2Frouter%2Findex.ts) | [View Source](https://github.com/unnoq/orpc/tree/main/playgrounds/openapi/src/router/index.ts) |
+| OpenAPI with Contract Playground | [Open in StackBlitz](https://stackblitz.com/github/unnoq/orpc/tree/main/playgrounds/contract-openapi?file=src%2Frouter%2Findex.ts) | [View Source](https://github.com/unnoq/orpc/tree/main/playgrounds/contract-openapi/src/router/index.ts) |
+| Express.js Playground | [Open in StackBlitz](https://stackblitz.com/github/unnoq/orpc/tree/main/playgrounds/expressjs?file=src%2Frouter%2Findex.ts) | [View Source](https://github.com/unnoq/orpc/tree/main/playgrounds/expressjs/src/router/index.ts) |
+
+## Local Development
+
+If you prefer working locally, you can clone any playground using the following commands:
+
+```bash
+# Clone specific playground environments
+npx copy-github-directory https://github.com/unnoq/orpc/tree/main/playgrounds/nextjs orpc-nextjs-playground
+npx copy-github-directory https://github.com/unnoq/orpc/tree/main/playgrounds/openapi orpc-openapi-playground
+npx copy-github-directory https://github.com/unnoq/orpc/tree/main/playgrounds/contract-openapi orpc-contract-openapi-playground
+npx copy-github-directory https://github.com/unnoq/orpc/tree/main/playgrounds/expressjs orpc-expressjs-playground
+```
+
+For each project, set up the development environment:
+
+```bash
+# Install dependencies
+npm install
+
+# Start the development server
+npm run dev
+```
+
+That's it! You can now access the playground at `http://localhost:2026`.
diff --git a/playgrounds/contract-openapi/package.json b/playgrounds/contract-openapi/package.json
index a5e6df1e..1472b6c7 100644
--- a/playgrounds/contract-openapi/package.json
+++ b/playgrounds/contract-openapi/package.json
@@ -1,13 +1,13 @@
 {
-  "name": "orpc-openapi-playground",
+  "name": "orpc-contract-openapi-playground",
   "version": "0.0.0",
-  "description": "oRPC OpenAPI Playground",
+  "description": "oRPC Contract OpenAPI Playground",
   "type": "module",
   "scripts": {
     "dev": "tsx --watch src/main.ts",
     "start": "tsx src/main.ts"
   },
-  "keywords": ["orpc", "openapi", "playground", "unnoq"],
+  "keywords": ["orpc", "contract", "openapi", "playground", "unnoq"],
   "author": "",
   "license": "ISC",
   "devDependencies": {
diff --git a/playgrounds/expressjs/package.json b/playgrounds/expressjs/package.json
index c5133ee8..b222e4d9 100644
--- a/playgrounds/expressjs/package.json
+++ b/playgrounds/expressjs/package.json
@@ -1,18 +1,13 @@
 {
-  "name": "orpc-openapi-playground",
+  "name": "orpc-expresjs-playground",
   "version": "0.0.0",
-  "description": "oRPC OpenAPI Playground",
+  "description": "oRPC ExpressJS Playground",
   "type": "module",
   "scripts": {
     "dev": "tsx --watch src/main.ts",
     "start": "tsx src/main.ts"
   },
-  "keywords": [
-    "orpc",
-    "openapi",
-    "playground",
-    "unnoq"
-  ],
+  "keywords": ["orpc", "expressjs", "playground", "unnoq"],
   "author": "",
   "license": "ISC",
   "devDependencies": {
diff --git a/playgrounds/nextjs/package.json b/playgrounds/nextjs/package.json
index 3e8c358d..43466c35 100644
--- a/playgrounds/nextjs/package.json
+++ b/playgrounds/nextjs/package.json
@@ -1,11 +1,13 @@
 {
   "name": "orpc-nextjs-playground",
   "version": "0.1.0",
+  "description": "oRPC NextJS Playground",
   "private": true,
+  "keywords": ["orpc", "nextjs", "playground", "unnoq"],
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --port 2026",
     "build": "next build",
-    "start": "next start",
+    "start": "next start --port 2026",
     "lint": "next lint"
   },
   "dependencies": {