dyte-io · roerohan · Jun 12, 2025 · Jun 12, 2025 · Jun 12, 2025 · Jun 12, 2025
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -1,34 +1,22 @@
-name: Deploy to github.io
+name: Deploy
 
 on:
-  push:
-    branches:
-      - main
+    push:
+        branches:
+            - main
 
 jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-          submodules: recursive
+    deploy:
+        runs-on: ubuntu-latest
+        name: Deploy
+        steps:
+            - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v2
-        with:
-          node-version: 16
+            - build: npm run build
 
-      - name: npm install
-        run: |
-          npm install
-
-      - name: npm build
-        run: |
-          npm run build
-
-      - name: Deploy to github.io
-        uses: JamesIves/github-pages-deploy-action@4.1.1
-        with:
-          branch: gh-pages
-          folder: samples
+            - name: Deploy to Production
+              uses: cloudflare/wrangler-action@v3
+              with:
+                  apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+                  accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+                  wranglerVersion: "4.19.1"
diff --git a/index.html b/index.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Samples - Cloudflare Realtime Kit</title>
+    <style>
+        body {
+            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f0f2f5; /* Light gray background */
+            color: #333;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start; /* Align to top */
+            min-height: 100vh;
+            padding-top: 40px; /* Add some padding at the top */
+        }
+        #root {
+            background-color: #ffffff; /* White card background */
+            padding: 30px 40px;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            width: 90%;
+            max-width: 700px;
+        }
+        h1 {
+            color: #f38020; /* Cloudflare Orange */
+            text-align: center;
+            margin-bottom: 30px;
+            font-size: 28px;
+            font-weight: 600;
+        }
+        ul {
+            list-style-type: none;
+            padding: 0;
+            margin: 0;
+        }
+        li {
+            margin-bottom: 15px;
+            border-bottom: 1px solid #e0e0e0; /* Light separator line */
+            padding-bottom: 15px;
+        }
+        li:last-child {
+            border-bottom: none;
+            margin-bottom: 0;
+            padding-bottom: 0;
+        }
+        a {
+            text-decoration: none;
+            color: #0053a0; /* Cloudflare Blue */
+            font-size: 18px;
+            font-weight: 500;
+            display: block; /* Make the whole area clickable */
+            padding: 8px 0;
+            transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
+        }
+        a:hover {
+            color: #f38020; /* Cloudflare Orange on hover */
+            transform: translateX(5px);
+        }
+        /* Responsive adjustments */
+        @media (max-width: 600px) {
+            #root {
+                padding: 20px;
+            }
+            h1 {
+                font-size: 24px;
+            }
+            a {
+                font-size: 16px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="root">
+        <h1>Cloudflare Realtime Kit React Samples</h1>
+        <ul>
+            <li><a href="/samples/active-speaker-ui/dist">Active Speaker UI</a></li>
+            <li><a href="/samples/async-video-survey/dist">Async Video Survey</a></li>
+            <li><a href="/samples/audio-room/dist">Audio Room</a></li>
+            <li><a href="/samples/chat/dist">Chat</a></li>
+            <li><a href="/samples/chat-widget/dist">Chat Widget</a></li>
+            <li><a href="/samples/clubhouse/dist">Clubhouse</a></li>
+            <li><a href="/samples/create-your-own-ui/dist">Create Your Own UI</a></li>
+            <li><a href="/samples/default-meeting-ui/dist">Default Meeting UI</a></li>
+            <li><a href="/samples/facetime/dist">Facetime</a></li>
+            <li><a href="/samples/live-auction/dist">Live Auction</a></li>
+            <li><a href="/samples/multi-meeting/dist">Multiple Meeting UI</a></li>
+            <li><a href="/samples/screenshare-focused-ui-with-custom-addons/dist">Screenshare Focused UI with Custom Addons</a></li>
+            <li><a href="/samples/simple-group-call/dist">Simple Group Call</a></li>
+            <li><a href="/samples/simple-ui/dist">Simple UI</a></li>
+            <li><a href="/samples/with-background-transformer/dist">With Background Transformer</a></li>
+        </ul>
+    </div>
+</body>
+</html>