Add Pub/Sub occupancy example to npm workspace

Author: GregHolmes

examples/package.json

@@ -32,6 +32,8 @@
     "pub-sub-history/javascript",
     "pub-sub-message-encryption/react",
     "pub-sub-message-encryption/javascript",
+    "pub-sub-occupancy/react",
+    "pub-sub-occupancy/javascript",
     "pub-sub-presence/react",
     "pub-sub-presence/javascript",
     "spaces-avatar-stack/react",
@@ -70,6 +72,8 @@
     "pub-sub-history-react": "yarn workspace pub-sub-history-react dev",
     "pub-sub-message-encryption-javascript": "yarn workspace pub-sub-message-encryption-javascript dev",
     "pub-sub-message-encryption-react": "yarn workspace pub-sub-message-encryption-react dev",
+    "pub-sub-occupancy-javascript": "yarn workspace pub-sub-occupancy-javascript dev",
+    "pub-sub-occupancy-react": "yarn workspace pub-sub-occupancy-react dev",
     "pub-sub-presence-javascript": "yarn workspace pub-sub-presence-javascript dev",
     "pub-sub-presence-react": "yarn workspace pub-sub-presence-react dev",
     "spaces-avatar-stack-javascript": "yarn workspace spaces-avatar-stack-javascript dev",
@@ -90,6 +94,7 @@
     "nanoid": "^5.0.7",
     "react": "^18",
     "react-dom": "^18",
+    "react-icons": "^5.4.0",
     "ts-node": "^10.9.2",
     "vite": "^5.4.2",
     "usehooks-ts": "^3.1.0"

examples/pub-sub-occupancy/javascript/.env.example

@@ -13,7 +13,7 @@ git clone [email protected]:ably/docs.git
 2. Change directory:
 
 ```sh
-cd /examples/pub-sub-occupancy/javascript/
+cd /examples/
 ```
 
 3. Rename the environment file:
@@ -33,7 +33,7 @@ yarn install
 6. Run the server:
 
 ```sh
-yarn run dev
+yarn run pub-sub-occupancy-javascript
 ```
 
 7. Try it out by opening a tab to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result.

examples/pub-sub-occupancy/javascript/README.md

@@ -1,23 +1,11 @@
 {
-  "name": "js-pub-sub-occupancy",
+  "name": "pub-sub-occupancy-javascript",
   "version": "1.0.0",
   "main": "index.js",
   "license": "MIT",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
-  },
-  "devDependencies": {
-    "autoprefixer": "^10.4.20",
-    "dotenv": "^16.4.5",
-    "postcss": "^8.4.47",
-    "tailwindcss": "^3.4.13",
-    "typescript": "^5.6.3"
-  },
-  "dependencies": {
-    "ably": "^2.3.1",
-    "nanoid": "^5.0.7",
-    "vite": "^5.4.12"
   }
 }

examples/pub-sub-occupancy/javascript/package.json

@@ -1,12 +1,13 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vite';
+import dotenv from 'dotenv';
+import path from 'path';
+
+dotenv.config({ path: path.resolve(__dirname, '../../.env.local') });
 
 export default defineConfig({
   css: {
     postcss: {
-      plugins: [
-        require('tailwindcss'),
-        require('autoprefixer'),
-      ],
-    }
-  }
-})
+      plugins: [require('tailwindcss'), require('autoprefixer')],
+    },
+  },
+});

examples/pub-sub-occupancy/javascript/vite.config.ts

@@ -44,7 +44,7 @@ git clone [email protected]:ably/docs.git
 2. Change directory:
 
 ```sh
-cd /examples/pub-sub-occupancy/react/
+cd /examples/
 ```
 
 3. Rename the environment file:
@@ -53,7 +53,7 @@ cd /examples/pub-sub-occupancy/react/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `VITE_PUBLIC_API_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `NEXT_PUBLIC_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -64,7 +64,7 @@ yarn install
 6. Run the server:
 
 ```sh
-yarn run dev
+yarn run pub-sub-occupancy-react
 ```
 
 7. Try it out by opening a tab to [http://localhost:3000/](http://localhost:3000/) with your browser to see the result.
@@ -80,7 +80,7 @@ git clone [email protected]:ably/docs.git
 2. Change directory:
 
 ```sh
-cd /examples/pub-sub-occupancy/javascript/
+cd /examples/
 ```
 
 3. Rename the environment file:
@@ -100,7 +100,7 @@ yarn install
 6. Run the server:
 
 ```sh
-yarn run dev
+yarn run pub-sub-occupancy-javascript
 ```
 
 7. Try it out by opening a tab to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result.

examples/pub-sub-occupancy/javascript/yarn.lock

@@ -13,7 +13,7 @@ git clone [email protected]:ably/docs.git
 2. Change directory:
 
 ```sh
-cd /examples/pub-sub-occupancy/react/
+cd /examples/
 ```
 
 3. Rename the environment file:
@@ -33,7 +33,7 @@ yarn install
 6. Run the server:
 
 ```sh
-yarn run dev
+yarn run pub-sub-occupancy-react
 ```
 
 7. Try it out by opening a tab to [http://localhost:3000/](http://localhost:3000/) with your browser to see the result.

examples/pub-sub-occupancy/page.md

@@ -1,7 +1,14 @@
 import type { NextConfig } from "next";
+import dotenv from 'dotenv';
+import path from 'path';
+
+dotenv.config({ path: path.resolve(process.cwd(), '../../.env.local') });
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  reactStrictMode: true,
+  env: {
+    NEXT_PUBLIC_ABLY_KEY: process.env.NEXT_PUBLIC_ABLY_KEY,
+  },
 };
 
 export default nextConfig;

examples/pub-sub-occupancy/react/.env.example

@@ -1,29 +1,11 @@
 {
-  "name": "react-pub-sub-occupancy",
+  "name": "pub-sub-occupancy-react",
   "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
-  },
-  "dependencies": {
-    "ably": "^2.5.0",
-    "next": "15.1.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-icons": "^5.4.0"
-  },
-  "devDependencies": {
-    "@eslint/eslintrc": "^3",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "15.1.3",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5"
   }
 }