From d17ddd9371c98590889fbe4faf60a51cb8ff6ad6 Mon Sep 17 00:00:00 2001 From: Reynaldi Chernando Date: Fri, 14 Nov 2025 18:02:15 +0700 Subject: [PATCH 01/21] Init generate playground pages --- build.js | 2 + src/playground.js | 431 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 433 insertions(+) create mode 100644 src/playground.js diff --git a/build.js b/build.js index d7fe374..d4ca233 100644 --- a/build.js +++ b/build.js @@ -8,6 +8,7 @@ const { encode } = require('html-entities'); const { JSDOM } = require('jsdom'); const yaml = require('js-yaml'); const esbuild = require('esbuild'); +const { generatePlayground } = require('./src/playground') const site = "https://docs.puter.com"; @@ -689,6 +690,7 @@ generateDocumentation('./src'); generateRedirects(); generateSitemap(); generateLLMs(); +generatePlayground(); if (anyErrors) { process.exit(1); diff --git a/src/playground.js b/src/playground.js new file mode 100644 index 0000000..0f551cd --- /dev/null +++ b/src/playground.js @@ -0,0 +1,431 @@ +const fs = require('fs'); +const path = require('path'); + +const playgroundHtml = ` + + + + + + + Puter.js Playground + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Puter.js Playground

+
+ Docs + + GitHub + + +
+
+
+
+
+

Code: +

+
+
+ +
+
+
+
+

+ Preview:

+ +
+
+
+
+ + + + +` + +const examples = [ + { + title: 'Chat with Claude', + slug: 'ai-chat-claude', + source: '/playground/examples/ai-chat-claude.html' + } +] + +const generatePlayground = () => { + examples.forEach(example => { + // Read source file from src/ directory + const sourcePath = path.join('src', example.source); + const sourceContent = fs.readFileSync(sourcePath, 'utf8'); + + // Copy playgroundHtml to avoid tainting the original + const htmlTemplate = playgroundHtml.slice(); + + // Replace {{CODE}} in the copied template with the source content + const finalHtml = htmlTemplate.replace('{{CODE}}', sourceContent); + + // Create output directory + const outputDir = path.join('dist', 'playground', example.slug); + fs.mkdirSync(outputDir, { recursive: true }); + + // Write the file + const outputPath = path.join(outputDir, 'index.html'); + fs.writeFileSync(outputPath, finalHtml, 'utf8'); + + console.log(`Generated: ${outputPath}`); + }); +} + +module.exports = { generatePlayground }; From 417af08be1d98fcfe9444a92c06ff5a7935f8bc7 Mon Sep 17 00:00:00 2001 From: Reynaldi Chernando Date: Fri, 14 Nov 2025 18:06:45 +0700 Subject: [PATCH 02/21] Add more examples --- src/playground.js | 408 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 406 insertions(+), 2 deletions(-) diff --git a/src/playground.js b/src/playground.js index 0f551cd..d737aee 100644 --- a/src/playground.js +++ b/src/playground.js @@ -397,10 +397,414 @@ const playgroundHtml = ` ` const examples = [ + // Introduction { - title: 'Chat with Claude', + title: 'Chat with GPT-5 nano', + slug: 'intro-chatgpt', + source: '/playground/examples/intro-chatgpt.html' + }, + { + title: 'Image Analysis', + slug: 'intro-gpt-vision', + source: '/playground/examples/intro-gpt-vision.html' + }, + { + title: 'Cloud Storage', + slug: 'intro-fs-write', + source: '/playground/examples/intro-fs-write.html' + }, + { + title: 'Key-Value Store', + slug: 'intro-kv-set', + source: '/playground/examples/intro-kv-set.html' + }, + { + title: 'Publish a Website', + slug: 'intro-hosting', + source: '/playground/examples/intro-hosting.html' + }, + { + title: 'Authentication', + slug: 'intro-auth', + source: '/playground/examples/intro-auth.html' + }, + // AI + { + title: 'Chat with GPT-5 nano', + slug: 'ai-chatgpt', + source: '/playground/examples/ai-chatgpt.html' + }, + { + title: 'Image Analysis', + slug: 'ai-gpt-vision', + source: '/playground/examples/ai-gpt-vision.html' + }, + { + title: 'Stream the response', + slug: 'ai-chat-stream', + source: '/playground/examples/ai-chat-stream.html' + }, + { + title: 'Function Calling', + slug: 'ai-function-calling', + source: '/playground/examples/ai-function-calling.html' + }, + { + title: 'AI Resume Analyzer (File handling)', + slug: 'ai-resume-analyzer', + source: '/playground/examples/ai-resume-analyzer.html' + }, + { + title: 'Chat with OpenAI o3-mini', + slug: 'ai-chat-openai-o3-mini', + source: '/playground/examples/ai-chat-openai-o3-mini.html' + }, + { + title: 'Chat with Claude Sonnet', slug: 'ai-chat-claude', source: '/playground/examples/ai-chat-claude.html' + }, + { + title: 'Chat with DeepSeek', + slug: 'ai-chat-deepseek', + source: '/playground/examples/ai-chat-deepseek.html' + }, + { + title: 'Chat with Gemini', + slug: 'ai-chat-gemini', + source: '/playground/examples/ai-chat-gemini.html' + }, + { + title: 'Chat with xAI (Grok)', + slug: 'ai-xai', + source: '/playground/examples/ai-xai.html' + }, + { + title: 'Extract Text from Image', + slug: 'ai-img2txt', + source: '/playground/examples/ai-img2txt.html' + }, + { + title: 'Text to Image', + slug: 'ai-txt2img', + source: '/playground/examples/ai-txt2img.html' + }, + { + title: 'Text to Image with options', + slug: 'ai-txt2img-options', + source: '/playground/examples/ai-txt2img-options.html' + }, + { + title: 'Text to Image with image-to-image generation', + slug: 'ai-txt2img-image-to-image', + source: '/playground/examples/ai-txt2img-image-to-image.html' + }, + { + title: 'Text to Speech', + slug: 'ai-txt2speech', + source: '/playground/examples/ai-txt2speech.html' + }, + { + title: 'Text to Speech with options', + slug: 'ai-txt2speech-options', + source: '/playground/examples/ai-txt2speech-options.html' + }, + { + title: 'Text to Speech with engines', + slug: 'ai-txt2speech-engines', + source: '/playground/examples/ai-txt2speech-engines.html' + }, + { + title: 'Text to Speech with OpenAI', + slug: 'ai-txt2speech-openai', + source: '/playground/examples/ai-txt2speech-openai.html' + }, + { + title: 'Text to Video', + slug: 'ai-txt2vid', + source: '/playground/examples/ai-txt2vid.html' + }, + { + title: 'Text to Video with options', + slug: 'ai-txt2vid-options', + source: '/playground/examples/ai-txt2vid-options.html' + }, + // FileSystem + { + title: 'Write File', + slug: 'fs-write', + source: '/playground/examples/fs-write.html' + }, + { + title: 'Read File', + slug: 'fs-read', + source: '/playground/examples/fs-read.html' + }, + { + title: 'Make a Directory', + slug: 'fs-mkdir', + source: '/playground/examples/fs-mkdir.html' + }, + { + title: 'Delete', + slug: 'fs-delete', + source: '/playground/examples/fs-delete.html' + }, + { + title: 'Read Directory', + slug: 'fs-readdir', + source: '/playground/examples/fs-readdir.html' + }, + { + title: 'Rename', + slug: 'fs-rename', + source: '/playground/examples/fs-rename.html' + }, + { + title: 'Get File/Directory Info', + slug: 'fs-stat', + source: '/playground/examples/fs-stat.html' + }, + { + title: 'Copy File/Directory', + slug: 'fs-copy', + source: '/playground/examples/fs-copy.html' + }, + { + title: 'Move File/Directory', + slug: 'fs-move', + source: '/playground/examples/fs-move.html' + }, + { + title: 'Upload', + slug: 'fs-upload', + source: '/playground/examples/fs-upload.html' + }, + { + title: 'Write a file with deduplication', + slug: 'fs-write-dedupe', + source: '/playground/examples/fs-write-dedupe.html' + }, + { + title: 'Create a new file with input coming from a file input', + slug: 'fs-write-from-input', + source: '/playground/examples/fs-write-from-input.html' + }, + { + title: 'Create a file in a directory that does not exist', + slug: 'fs-write-create-missing-parents', + source: '/playground/examples/fs-write-create-missing-parents.html' + }, + { + title: 'Create a directory with deduplication', + slug: 'fs-mkdir-dedupe', + source: '/playground/examples/fs-mkdir-dedupe.html' + }, + { + title: 'Create a directory with missing parent directories', + slug: 'fs-mkdir-create-missing-parents', + source: '/playground/examples/fs-mkdir-create-missing-parents.html' + }, + { + title: 'Move a file with missing parent directories', + slug: 'fs-move-create-missing-parents', + source: '/playground/examples/fs-move-create-missing-parents.html' + }, + { + title: 'Delete a directory', + slug: 'fs-delete-directory', + source: '/playground/examples/fs-delete-directory.html' + }, + // Key-Value Store + { + title: 'Set', + slug: 'kv-set', + source: '/playground/examples/kv-set.html' + }, + { + title: 'Get', + slug: 'kv-get', + source: '/playground/examples/kv-get.html' + }, + { + title: 'Increment', + slug: 'kv-incr', + source: '/playground/examples/kv-incr.html' + }, + { + title: 'Increment (Object value)', + slug: 'kv-incr-nested', + source: '/playground/examples/kv-incr-nested.html' + }, + { + title: 'Decrement', + slug: 'kv-decr', + source: '/playground/examples/kv-decr.html' + }, + { + title: 'Decrement (Object value)', + slug: 'kv-decr-nested', + source: '/playground/examples/kv-decr-nested.html' + }, + { + title: 'Delete', + slug: 'kv-del', + source: '/playground/examples/kv-del.html' + }, + { + title: 'List', + slug: 'kv-list', + source: '/playground/examples/kv-list.html' + }, + { + title: 'Flush', + slug: 'kv-flush', + source: '/playground/examples/kv-flush.html' + }, + { + title: "What's your name?", + slug: 'kv-name', + source: '/playground/examples/kv-name.html' + }, + // Networking + { + title: 'Basic TCP Socket', + slug: 'net-basic', + source: '/playground/examples/net-basic.html' + }, + { + title: 'TLS Socket', + slug: 'net-tls', + source: '/playground/examples/net-tls.html' + }, + { + title: 'Fetch', + slug: 'net-fetch', + source: '/playground/examples/net-fetch.html' + }, + // Hosting + { + title: 'Create a simple website displaying "Hello world!"', + slug: 'hosting-create', + source: '/playground/examples/hosting-create.html' + }, + { + title: 'Create 3 random websites and then list them', + slug: 'hosting-list', + source: '/playground/examples/hosting-list.html' + }, + { + title: 'Create a random website then delete it', + slug: 'hosting-delete', + source: '/playground/examples/hosting-delete.html' + }, + { + title: 'Update a subdomain to point to a new directory', + slug: 'hosting-update', + source: '/playground/examples/hosting-update.html' + }, + { + title: 'Retrieve information about a subdomain', + slug: 'hosting-get', + source: '/playground/examples/hosting-get.html' + }, + // Authentication + { + title: 'Sign in', + slug: 'auth-sign-in', + source: '/playground/examples/auth-sign-in.html' + }, + { + title: 'Sign out', + slug: 'auth-sign-out', + source: '/playground/examples/auth-sign-out.html' + }, + { + title: 'Check sign in', + slug: 'auth-is-signed-in', + source: '/playground/examples/auth-is-signed-in.html' + }, + { + title: 'Get user', + slug: 'auth-get-user', + source: '/playground/examples/auth-get-user.html' + }, + { + title: "Get user's monthly usage", + slug: 'auth-get-monthly-usage', + source: '/playground/examples/auth-get-monthly-usage.html' + }, + // Apps + { + title: 'To-Do List', + slug: 'app-todo', + source: '/playground/examples/app-todo.html' + }, + { + title: 'AI Chat', + slug: 'app-ai-chat', + source: '/playground/examples/app-ai-chat.html' + }, + { + title: 'Camera Photo Describer', + slug: 'app-camera', + source: '/playground/examples/app-camera.html' + }, + { + title: 'Text Summarizer', + slug: 'app-summarizer', + source: '/playground/examples/app-summarizer.html' + }, + { + title: 'Create an app pointing to example.com', + slug: 'app-create', + source: '/playground/examples/app-create.html' + }, + { + title: 'Create 3 random apps and then list them', + slug: 'app-list', + source: '/playground/examples/app-list.html' + }, + { + title: 'Create a random app then delete it', + slug: 'app-delete', + source: '/playground/examples/app-delete.html' + }, + { + title: 'Create a random app then change its title', + slug: 'app-update', + source: '/playground/examples/app-update.html' + }, + { + title: 'Create a random app then get it', + slug: 'app-get', + source: '/playground/examples/app-get.html' + }, + // Workers + { + title: 'Create a worker', + slug: 'workers-create', + source: '/playground/examples/workers-create.html' + }, + { + title: 'List workers', + slug: 'workers-list', + source: '/playground/examples/workers-list.html' + }, + { + title: 'Get a worker', + slug: 'workers-get', + source: '/playground/examples/workers-get.html' + }, + { + title: 'Workers Management', + slug: 'workers-management', + source: '/playground/examples/workers-management.html' + }, + { + title: 'Authenticated Worker Requests', + slug: 'workers-exec', + source: '/playground/examples/workers-exec.html' } ] @@ -424,8 +828,8 @@ const generatePlayground = () => { const outputPath = path.join(outputDir, 'index.html'); fs.writeFileSync(outputPath, finalHtml, 'utf8'); - console.log(`Generated: ${outputPath}`); }); + console.log(`Generated ${examples.length} playground examples.`); } module.exports = { generatePlayground }; From e5cad004ec382285905661d6dafb7200fc2541f4 Mon Sep 17 00:00:00 2001 From: Reynaldi Chernando Date: Fri, 14 Nov 2025 18:10:49 +0700 Subject: [PATCH 03/21] Init sidebar --- src/playground.js | 175 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 173 insertions(+), 2 deletions(-) diff --git a/src/playground.js b/src/playground.js index d737aee..ec02562 100644 --- a/src/playground.js +++ b/src/playground.js @@ -1,6 +1,60 @@ const fs = require('fs'); const path = require('path'); +// Function to generate sidebar HTML +const generateSidebarHtml = (examples) => { + const categories = { + 'Introduction': [], + 'AI': [], + 'FileSystem': [], + 'Key-Value Store': [], + 'Networking': [], + 'Hosting': [], + 'Authentication': [], + 'Apps': [], + 'Workers': [] + }; + + // Group examples by category based on slug prefix + examples.forEach(example => { + if (example.slug.startsWith('intro-')) { + categories['Introduction'].push(example); + } else if (example.slug.startsWith('ai-')) { + categories['AI'].push(example); + } else if (example.slug.startsWith('fs-')) { + categories['FileSystem'].push(example); + } else if (example.slug.startsWith('kv-')) { + categories['Key-Value Store'].push(example); + } else if (example.slug.startsWith('net-')) { + categories['Networking'].push(example); + } else if (example.slug.startsWith('hosting-')) { + categories['Hosting'].push(example); + } else if (example.slug.startsWith('auth-')) { + categories['Authentication'].push(example); + } else if (example.slug.startsWith('app-')) { + categories['Apps'].push(example); + } else if (example.slug.startsWith('workers-')) { + categories['Workers'].push(example); + } + }); + + let sidebarHtml = '
'; + + Object.keys(categories).forEach(categoryName => { + if (categories[categoryName].length > 0) { + sidebarHtml += `
`; + sidebarHtml += `
${categoryName}
`; + categories[categoryName].forEach(example => { + sidebarHtml += `${example.title}`; + }); + sidebarHtml += `
`; + } + }); + + sidebarHtml += '
'; + return sidebarHtml; +}; + const playgroundHtml = ` @@ -204,6 +258,87 @@ const playgroundHtml = ` .resizer.dragging { background: #ccc; } + + /* Sidebar styles */ + .sidebar { + position: fixed; + left: -300px; + top: 50px; + width: 300px; + height: calc(100vh - 50px); + background: #f8f9fa; + border-right: 1px solid #e1e1e1; + overflow-y: auto; + transition: left 0.3s ease; + z-index: 1000; + } + + .sidebar.open { + left: 0; + } + + .sidebar-toggle { + position: fixed; + left: 10px; + top: 10px; + background: white; + border: none; + padding: 8px 12px; + cursor: pointer; + border-radius: 4px; + z-index: 1001; + font-size: 16px; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + } + + .sidebar-toggle:hover { + background: #f0f0f0; + } + + .sidebar-content { + padding: 20px; + } + + .sidebar-category { + margin-bottom: 25px; + } + + .sidebar-category-title { + font-weight: bold; + font-size: 14px; + color: #333; + margin-bottom: 10px; + text-transform: uppercase; + letter-spacing: 0.5px; + } + + .sidebar-item { + display: block; + padding: 8px 12px; + color: #555; + text-decoration: none; + border-radius: 4px; + margin-bottom: 4px; + font-size: 14px; + transition: background 0.2s ease; + } + + .sidebar-item:hover { + background: #e9ecef; + color: #2563eb; + } + + .sidebar-item.active { + background: #2563eb; + color: white; + } + + @media (max-width: 768px) { + .sidebar { + width: 250px; + left: -250px; + } + } @@ -215,6 +350,14 @@ const playgroundHtml = ` crossorigin="anonymous" referrerpolicy="no-referrer"> + + + + + +

Puter.js Playground

@@ -391,6 +534,30 @@ const playgroundHtml = ` } } }); + + // Sidebar toggle functionality + const sidebarToggle = document.getElementById('sidebar-toggle'); + const sidebar = document.getElementById('sidebar'); + + sidebarToggle.addEventListener('click', () => { + sidebar.classList.toggle('open'); + }); + + // Close sidebar when clicking outside + document.addEventListener('click', (e) => { + if (!sidebar.contains(e.target) && !sidebarToggle.contains(e.target) && sidebar.classList.contains('open')) { + sidebar.classList.remove('open'); + } + }); + + // Highlight active example in sidebar + const currentPath = window.location.pathname; + const sidebarItems = document.querySelectorAll('.sidebar-item'); + sidebarItems.forEach(item => { + if (item.getAttribute('href') === currentPath) { + item.classList.add('active'); + } + }); @@ -809,15 +976,19 @@ const examples = [ ] const generatePlayground = () => { + // Generate sidebar HTML once for all examples + const sidebarHtml = generateSidebarHtml(examples); + examples.forEach(example => { // Read source file from src/ directory const sourcePath = path.join('src', example.source); const sourceContent = fs.readFileSync(sourcePath, 'utf8'); // Copy playgroundHtml to avoid tainting the original - const htmlTemplate = playgroundHtml.slice(); + let htmlTemplate = playgroundHtml.slice(); - // Replace {{CODE}} in the copied template with the source content + // Replace {{SIDEBAR}} and {{CODE}} in the template + htmlTemplate = htmlTemplate.replace('{{SIDEBAR}}', sidebarHtml); const finalHtml = htmlTemplate.replace('{{CODE}}', sourceContent); // Create output directory From ae829aea5f43baf2070ae1caf052b23f4319bdd1 Mon Sep 17 00:00:00 2001 From: Reynaldi Chernando Date: Fri, 14 Nov 2025 18:23:38 +0700 Subject: [PATCH 04/21] Simplify sidebar --- src/examples.js | 449 +++++++++++++++++++++++++++++ src/playground.js | 711 +++++++++++----------------------------------- 2 files changed, 607 insertions(+), 553 deletions(-) create mode 100644 src/examples.js diff --git a/src/examples.js b/src/examples.js new file mode 100644 index 0000000..a66c5b6 --- /dev/null +++ b/src/examples.js @@ -0,0 +1,449 @@ +const examples = [ + { + title: 'Introduction', + children: [ + { + title: 'Chat with GPT-5 nano', + slug: 'intro-chatgpt', + source: '/playground/examples/intro-chatgpt.html' + }, + { + title: 'Image Analysis', + slug: 'intro-gpt-vision', + source: '/playground/examples/intro-gpt-vision.html' + }, + { + title: 'Cloud Storage', + slug: 'intro-fs-write', + source: '/playground/examples/intro-fs-write.html' + }, + { + title: 'Key-Value Store', + slug: 'intro-kv-set', + source: '/playground/examples/intro-kv-set.html' + }, + { + title: 'Publish a Website', + slug: 'intro-hosting', + source: '/playground/examples/intro-hosting.html' + }, + { + title: 'Authentication', + slug: 'intro-auth', + source: '/playground/examples/intro-auth.html' + } + ] + }, + { + title: 'AI', + children: [ + { + title: 'Chat with GPT-5 nano', + slug: 'ai-chatgpt', + source: '/playground/examples/ai-chatgpt.html' + }, + { + title: 'Image Analysis', + slug: 'ai-gpt-vision', + source: '/playground/examples/ai-gpt-vision.html' + }, + { + title: 'Stream the response', + slug: 'ai-chat-stream', + source: '/playground/examples/ai-chat-stream.html' + }, + { + title: 'Function Calling', + slug: 'ai-function-calling', + source: '/playground/examples/ai-function-calling.html' + }, + { + title: 'AI Resume Analyzer (File handling)', + slug: 'ai-resume-analyzer', + source: '/playground/examples/ai-resume-analyzer.html' + }, + { + title: 'Chat with OpenAI o3-mini', + slug: 'ai-chat-openai-o3-mini', + source: '/playground/examples/ai-chat-openai-o3-mini.html' + }, + { + title: 'Chat with Claude Sonnet', + slug: 'ai-chat-claude', + source: '/playground/examples/ai-chat-claude.html' + }, + { + title: 'Chat with DeepSeek', + slug: 'ai-chat-deepseek', + source: '/playground/examples/ai-chat-deepseek.html' + }, + { + title: 'Chat with Gemini', + slug: 'ai-chat-gemini', + source: '/playground/examples/ai-chat-gemini.html' + }, + { + title: 'Chat with xAI (Grok)', + slug: 'ai-xai', + source: '/playground/examples/ai-xai.html' + }, + { + title: 'Extract Text from Image', + slug: 'ai-img2txt', + source: '/playground/examples/ai-img2txt.html' + }, + { + title: 'Text to Image', + slug: 'ai-txt2img', + source: '/playground/examples/ai-txt2img.html' + }, + { + title: 'Text to Image with options', + slug: 'ai-txt2img-options', + source: '/playground/examples/ai-txt2img-options.html' + }, + { + title: 'Text to Image with image-to-image generation', + slug: 'ai-txt2img-image-to-image', + source: '/playground/examples/ai-txt2img-image-to-image.html' + }, + { + title: 'Text to Speech', + slug: 'ai-txt2speech', + source: '/playground/examples/ai-txt2speech.html' + }, + { + title: 'Text to Speech with options', + slug: 'ai-txt2speech-options', + source: '/playground/examples/ai-txt2speech-options.html' + }, + { + title: 'Text to Speech with engines', + slug: 'ai-txt2speech-engines', + source: '/playground/examples/ai-txt2speech-engines.html' + }, + { + title: 'Text to Speech with OpenAI', + slug: 'ai-txt2speech-openai', + source: '/playground/examples/ai-txt2speech-openai.html' + }, + { + title: 'Text to Video', + slug: 'ai-txt2vid', + source: '/playground/examples/ai-txt2vid.html' + }, + { + title: 'Text to Video with options', + slug: 'ai-txt2vid-options', + source: '/playground/examples/ai-txt2vid-options.html' + } + ] + }, + { + title: 'FileSystem', + children: [ + { + title: 'Write File', + slug: 'fs-write', + source: '/playground/examples/fs-write.html' + }, + { + title: 'Read File', + slug: 'fs-read', + source: '/playground/examples/fs-read.html' + }, + { + title: 'Make a Directory', + slug: 'fs-mkdir', + source: '/playground/examples/fs-mkdir.html' + }, + { + title: 'Delete', + slug: 'fs-delete', + source: '/playground/examples/fs-delete.html' + }, + { + title: 'Read Directory', + slug: 'fs-readdir', + source: '/playground/examples/fs-readdir.html' + }, + { + title: 'Rename', + slug: 'fs-rename', + source: '/playground/examples/fs-rename.html' + }, + { + title: 'Get File/Directory Info', + slug: 'fs-stat', + source: '/playground/examples/fs-stat.html' + }, + { + title: 'Copy File/Directory', + slug: 'fs-copy', + source: '/playground/examples/fs-copy.html' + }, + { + title: 'Move File/Directory', + slug: 'fs-move', + source: '/playground/examples/fs-move.html' + }, + { + title: 'Upload', + slug: 'fs-upload', + source: '/playground/examples/fs-upload.html' + }, + { + title: 'Write a file with deduplication', + slug: 'fs-write-dedupe', + source: '/playground/examples/fs-write-dedupe.html' + }, + { + title: 'Create a new file with input coming from a file input', + slug: 'fs-write-from-input', + source: '/playground/examples/fs-write-from-input.html' + }, + { + title: 'Create a file in a directory that does not exist', + slug: 'fs-write-create-missing-parents', + source: '/playground/examples/fs-write-create-missing-parents.html' + }, + { + title: 'Create a directory with deduplication', + slug: 'fs-mkdir-dedupe', + source: '/playground/examples/fs-mkdir-dedupe.html' + }, + { + title: 'Create a directory with missing parent directories', + slug: 'fs-mkdir-create-missing-parents', + source: '/playground/examples/fs-mkdir-create-missing-parents.html' + }, + { + title: 'Move a file with missing parent directories', + slug: 'fs-move-create-missing-parents', + source: '/playground/examples/fs-move-create-missing-parents.html' + }, + { + title: 'Delete a directory', + slug: 'fs-delete-directory', + source: '/playground/examples/fs-delete-directory.html' + } + ] + }, + { + title: 'Key-Value Store', + children: [ + { + title: 'Set', + slug: 'kv-set', + source: '/playground/examples/kv-set.html' + }, + { + title: 'Get', + slug: 'kv-get', + source: '/playground/examples/kv-get.html' + }, + { + title: 'Increment', + slug: 'kv-incr', + source: '/playground/examples/kv-incr.html' + }, + { + title: 'Increment (Object value)', + slug: 'kv-incr-nested', + source: '/playground/examples/kv-incr-nested.html' + }, + { + title: 'Decrement', + slug: 'kv-decr', + source: '/playground/examples/kv-decr.html' + }, + { + title: 'Decrement (Object value)', + slug: 'kv-decr-nested', + source: '/playground/examples/kv-decr-nested.html' + }, + { + title: 'Delete', + slug: 'kv-del', + source: '/playground/examples/kv-del.html' + }, + { + title: 'List', + slug: 'kv-list', + source: '/playground/examples/kv-list.html' + }, + { + title: 'Flush', + slug: 'kv-flush', + source: '/playground/examples/kv-flush.html' + }, + { + title: "What's your name?", + slug: 'kv-name', + source: '/playground/examples/kv-name.html' + } + ] + }, + { + title: 'Networking', + children: [ + { + title: 'Basic TCP Socket', + slug: 'net-basic', + source: '/playground/examples/net-basic.html' + }, + { + title: 'TLS Socket', + slug: 'net-tls', + source: '/playground/examples/net-tls.html' + }, + { + title: 'Fetch', + slug: 'net-fetch', + source: '/playground/examples/net-fetch.html' + } + ] + }, + { + title: 'Hosting', + children: [ + { + title: 'Create a simple website displaying "Hello world!"', + slug: 'hosting-create', + source: '/playground/examples/hosting-create.html' + }, + { + title: 'Create 3 random websites and then list them', + slug: 'hosting-list', + source: '/playground/examples/hosting-list.html' + }, + { + title: 'Create a random website then delete it', + slug: 'hosting-delete', + source: '/playground/examples/hosting-delete.html' + }, + { + title: 'Update a subdomain to point to a new directory', + slug: 'hosting-update', + source: '/playground/examples/hosting-update.html' + }, + { + title: 'Retrieve information about a subdomain', + slug: 'hosting-get', + source: '/playground/examples/hosting-get.html' + } + ] + }, + { + title: 'Authentication', + children: [ + { + title: 'Sign in', + slug: 'auth-sign-in', + source: '/playground/examples/auth-sign-in.html' + }, + { + title: 'Sign out', + slug: 'auth-sign-out', + source: '/playground/examples/auth-sign-out.html' + }, + { + title: 'Check sign in', + slug: 'auth-is-signed-in', + source: '/playground/examples/auth-is-signed-in.html' + }, + { + title: 'Get user', + slug: 'auth-get-user', + source: '/playground/examples/auth-get-user.html' + }, + { + title: "Get user's monthly usage", + slug: 'auth-get-monthly-usage', + source: '/playground/examples/auth-get-monthly-usage.html' + } + ] + }, + { + title: 'Apps', + children: [ + { + title: 'To-Do List', + slug: 'app-todo', + source: '/playground/examples/app-todo.html' + }, + { + title: 'AI Chat', + slug: 'app-ai-chat', + source: '/playground/examples/app-ai-chat.html' + }, + { + title: 'Camera Photo Describer', + slug: 'app-camera', + source: '/playground/examples/app-camera.html' + }, + { + title: 'Text Summarizer', + slug: 'app-summarizer', + source: '/playground/examples/app-summarizer.html' + }, + { + title: 'Create an app pointing to example.com', + slug: 'app-create', + source: '/playground/examples/app-create.html' + }, + { + title: 'Create 3 random apps and then list them', + slug: 'app-list', + source: '/playground/examples/app-list.html' + }, + { + title: 'Create a random app then delete it', + slug: 'app-delete', + source: '/playground/examples/app-delete.html' + }, + { + title: 'Create a random app then change its title', + slug: 'app-update', + source: '/playground/examples/app-update.html' + }, + { + title: 'Create a random app then get it', + slug: 'app-get', + source: '/playground/examples/app-get.html' + } + ] + }, + { + title: 'Workers', + children: [ + { + title: 'Create a worker', + slug: 'workers-create', + source: '/playground/examples/workers-create.html' + }, + { + title: 'List workers', + slug: 'workers-list', + source: '/playground/examples/workers-list.html' + }, + { + title: 'Get a worker', + slug: 'workers-get', + source: '/playground/examples/workers-get.html' + }, + { + title: 'Workers Management', + slug: 'workers-management', + source: '/playground/examples/workers-management.html' + }, + { + title: 'Authenticated Worker Requests', + slug: 'workers-exec', + source: '/playground/examples/workers-exec.html' + } + ] + } +]; + +module.exports = examples; \ No newline at end of file diff --git a/src/playground.js b/src/playground.js index ec02562..d216430 100644 --- a/src/playground.js +++ b/src/playground.js @@ -1,54 +1,18 @@ const fs = require('fs'); const path = require('path'); +const examples = require('./examples') // Function to generate sidebar HTML -const generateSidebarHtml = (examples) => { - const categories = { - 'Introduction': [], - 'AI': [], - 'FileSystem': [], - 'Key-Value Store': [], - 'Networking': [], - 'Hosting': [], - 'Authentication': [], - 'Apps': [], - 'Workers': [] - }; - - // Group examples by category based on slug prefix - examples.forEach(example => { - if (example.slug.startsWith('intro-')) { - categories['Introduction'].push(example); - } else if (example.slug.startsWith('ai-')) { - categories['AI'].push(example); - } else if (example.slug.startsWith('fs-')) { - categories['FileSystem'].push(example); - } else if (example.slug.startsWith('kv-')) { - categories['Key-Value Store'].push(example); - } else if (example.slug.startsWith('net-')) { - categories['Networking'].push(example); - } else if (example.slug.startsWith('hosting-')) { - categories['Hosting'].push(example); - } else if (example.slug.startsWith('auth-')) { - categories['Authentication'].push(example); - } else if (example.slug.startsWith('app-')) { - categories['Apps'].push(example); - } else if (example.slug.startsWith('workers-')) { - categories['Workers'].push(example); - } - }); - +const generateSidebarHtml = (sections) => { let sidebarHtml = '
'; - Object.keys(categories).forEach(categoryName => { - if (categories[categoryName].length > 0) { - sidebarHtml += `
`; - sidebarHtml += `
${categoryName}
`; - categories[categoryName].forEach(example => { - sidebarHtml += `${example.title}`; - }); - sidebarHtml += `
`; - } + sections.forEach(section => { + sidebarHtml += `
`; + sidebarHtml += `
${section.title}
`; + section.children.forEach(example => { + sidebarHtml += `${example.title}`; + }); + sidebarHtml += `
`; }); sidebarHtml += '
'; @@ -107,6 +71,10 @@ const playgroundHtml = ` border: none; } + #code, #output { + overflow: hidden; + } + #run { float: right; margin: 10px; @@ -147,19 +115,45 @@ const playgroundHtml = ` float: right; } + .main-container { + display: flex; + height: calc(100vh - 50px); + width: 100%; + } + + #sidebar-container { + width: 250px; + background: #f8f9fa; + border-right: 1px solid #e1e1e1; + transition: width 0.3s ease, margin-left 0.3s ease; + overflow: hidden; + flex-shrink: 0; + display: flex; + flex-direction: column; + } + + #sidebar-container.collapsed { + width: 0; + margin-left: 0; + border-right: none; + } + #code-container { - width: 50%; + flex: 1; height: 100%; - float: left; position: relative; + min-width: 0; + display: flex; + flex-direction: column; } #output-container { - width: calc(50% - 6px); - /* Subtract resizer width */ + flex: 1; height: 100%; - float: right; position: relative; + min-width: 0; + display: flex; + flex-direction: column; } #run span { @@ -215,19 +209,36 @@ const playgroundHtml = ` width: 200px; margin-right: 0; } - } @media (max-width: 768px) { + .main-container { + flex-direction: column; + } + + #sidebar-container { + width: 100%; + height: auto; + max-height: 200px; + border-right: none; + border-bottom: 1px solid #e1e1e1; + } + + #sidebar-container.collapsed { + height: 0; + max-height: 0; + } + #code-container { - width: 100vw; - height: calc(50vh - 100px); + width: 100%; + height: 50%; + flex: none; } #output-container { - width: 100vw; - height: calc(50vh - 50px); - margin-top: 50px; + width: 100%; + height: 50%; + flex: none; } #select-example { @@ -236,22 +247,17 @@ const playgroundHtml = ` .resizer { display: none; - /* Hide resizer on mobile */ } } .resizer { width: 6px; - height: 100%; background: #e1e1e1; - position: absolute; - right: 0; - top: 0; cursor: col-resize; z-index: 100; transition: background 0.2s ease; - height: calc(100vh - 50px); user-select: none; + flex-shrink: 0; } .resizer:hover, @@ -261,42 +267,45 @@ const playgroundHtml = ` /* Sidebar styles */ .sidebar { - position: fixed; - left: -300px; - top: 50px; - width: 300px; - height: calc(100vh - 50px); - background: #f8f9fa; - border-right: 1px solid #e1e1e1; + flex: 1; overflow-y: auto; - transition: left 0.3s ease; - z-index: 1000; } - .sidebar.open { - left: 0; + .sidebar-header { + height: 50px; + display: flex; + align-items: center; + padding: 0 15px; + border-bottom: 1px solid #e1e1e1; + background: #fff; } .sidebar-toggle { - position: fixed; - left: 10px; - top: 10px; - background: white; + background: transparent; border: none; - padding: 8px 12px; + padding: 8px; cursor: pointer; + font-size: 20px; + color: #333; + display: flex; + align-items: center; + justify-content: center; border-radius: 4px; - z-index: 1001; - font-size: 16px; - box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .sidebar-toggle:hover { - background: #f0f0f0; + background: #e9ecef; + } + + .sidebar-title { + font-size: 14px; + font-weight: 500; + color: #666; + margin-left: 10px; } .sidebar-content { - padding: 20px; + padding: 15px; } .sidebar-category { @@ -332,13 +341,6 @@ const playgroundHtml = ` background: #2563eb; color: white; } - - @media (max-width: 768px) { - .sidebar { - width: 250px; - left: -250px; - } - } @@ -350,14 +352,6 @@ const playgroundHtml = ` crossorigin="anonymous" referrerpolicy="no-referrer"> - - - - - -

Puter.js Playground

@@ -372,23 +366,38 @@ const playgroundHtml = `
-
+ +
+ + + +
-
-

Code: -

+
+

Code:

-
+
-
+ + +
+ +
-
-

- Preview:

+
+

Preview:

-
+
- + ` From 561accbfc5ddaa2325150ffa51794fb3f2bd4827 Mon Sep 17 00:00:00 2001 From: Reynaldi Chernando Date: Mon, 17 Nov 2025 17:29:16 +0700 Subject: [PATCH 07/21] Separate playground assets in its own directory --- src/playground.js | 300 +----------------- src/playground/assets/css/style.css | 295 +++++++++++++++++ .../assets/js}/app.js | 0 3 files changed, 297 insertions(+), 298 deletions(-) create mode 100644 src/playground/assets/css/style.css rename src/{assets/js/playground => playground/assets/js}/app.js (100%) diff --git a/src/playground.js b/src/playground.js index 9ba78a1..6a5ede0 100644 --- a/src/playground.js +++ b/src/playground.js @@ -48,303 +48,7 @@ const playgroundHtml = ` - - + @@ -403,7 +107,7 @@ const playgroundHtml = `
- + ` diff --git a/src/playground/assets/css/style.css b/src/playground/assets/css/style.css new file mode 100644 index 0000000..5f5753f --- /dev/null +++ b/src/playground/assets/css/style.css @@ -0,0 +1,295 @@ +body { + margin: 0; + padding: 0; + height: 100vh; + -webkit-font-smoothing: antialiased; +} + +* { + box-sizing: border-box; +} + +body { + font-family: "Roboto", Arial, Helvetica, sans-serif; +} + +#output-iframe { + width: 100%; + height: 100%; + border: none; +} + +#code, +#output { + overflow: hidden; +} + +#run { + float: right; + margin: 10px; + padding: 7px 20px; + background-color: #2563eb; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + font-weight: bold; + user-select: none; +} + +#run:hover { + background-color: #1d4ed8; +} + +#run:active { + background-color: #1e40af; +} + +#select-example { + padding: 5px 10px; + min-width: 300px; + font-size: 14px; + margin-right: 10px; +} + +.go-to-docs { + margin-right: 5px; + color: white; + text-decoration: none; + border: 2px solid white; + padding: 5px 7px; + box-sizing: border-box; + border-radius: 4px; + font-size: 15px; + float: right; +} + +.main-container { + display: flex; + height: calc(100vh - 50px); + width: 100%; +} + +#sidebar-container { + width: 250px; + background: #f8f9fa; + border-right: 1px solid #e1e1e1; + overflow: hidden; + flex-shrink: 0; + display: flex; + flex-direction: column; +} + +#sidebar-container.collapsed { + width: 50px; + margin-left: 0; +} + +#sidebar-container.collapsed .sidebar-title, +#sidebar-container.collapsed .sidebar { + display: none; +} + +#code-container { + flex: 1; + height: 100%; + position: relative; + min-width: 0; + display: flex; + flex-direction: column; +} + +#output-container { + flex: 1; + height: 100%; + position: relative; + min-width: 0; + display: flex; + flex-direction: column; +} + +#run span { + background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22lucide%20lucide-play-icon%20lucide-play%22%3E%3Cpath%20d%3D%22M5%205a2%202%200%200%201%203.008-1.728l11.997%206.998a2%202%200%200%201%20.003%203.458l-12%207A2%202%200%200%201%205%2019z%22%2F%3E%3C%2Fsvg%3E"); + width: 20px; + display: block; + height: 20px; + background-size: 15px; + background-repeat: no-repeat; + float: left; + margin-top: 2px; + margin-right: 5px; +} + +.navbar { + float: right; + display: flex; + flex-direction: row; + align-items: center; +} + +.navbar a { + color: white; + text-decoration: none; + margin-right: 20px; +} + +.navbar a:hover { + text-decoration: underline; +} + +.logo { + margin: 0; + font-size: 25px; + color: white; + font-weight: 400; + flex-grow: 1; + font-weight: 300; + font-size: 21px; + display: flex; + align-items: center; +} + +.logo a { + color: white; + text-decoration: none; +} + +@media (max-width: 500px) { + #select-example { + max-width: 300px; + font-size: 13px; + width: 200px; + margin-right: 0; + } +} + +@media (max-width: 768px) { + .main-container { + flex-direction: column; + } + + #sidebar-container { + width: 100%; + height: auto; + max-height: 200px; + border-right: none; + border-bottom: 1px solid #e1e1e1; + } + + #sidebar-container.collapsed { + height: 50px; + max-height: 50px; + } + + #code-container { + width: 100%; + height: 50%; + flex: none; + } + + #output-container { + width: 100%; + height: 50%; + flex: none; + } + + #select-example { + max-width: 300px; + } + + .resizer { + display: none; + } +} + +.resizer { + width: 6px; + background: #e1e1e1; + cursor: col-resize; + z-index: 100; + transition: background 0.2s ease; + user-select: none; + flex-shrink: 0; +} + +.resizer:hover, +.resizer.dragging { + background: #ccc; +} + +/* Sidebar styles */ +.sidebar { + flex: 1; + overflow-y: auto; +} + +.sidebar-header { + height: 50px; + display: flex; + align-items: center; + padding: 0 15px; + border-bottom: 1px solid #e1e1e1; + background: #fff; +} + +.sidebar-toggle { + background: transparent; + border: none; + padding: 8px; + cursor: pointer; + font-size: 20px; + color: #333; + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; +} + +.sidebar-toggle:hover { + background: #e9ecef; +} + +.sidebar-title { + font-size: 14px; + font-weight: 500; + color: #666; + margin-left: 10px; +} + +.sidebar-content { + padding: 15px; +} + +.sidebar-category { + margin-bottom: 25px; +} + +.sidebar-category-title { + font-weight: bold; + font-size: 14px; + color: #333; + margin-bottom: 10px; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.sidebar-item { + display: block; + padding: 8px 12px; + color: #555; + text-decoration: none; + border-radius: 4px; + margin-bottom: 4px; + font-size: 14px; + transition: background 0.2s ease; +} + +.sidebar-item:hover { + background: #e9ecef; + color: #2563eb; +} + +.sidebar-item.active { + background: #2563eb; + color: white; +} diff --git a/src/assets/js/playground/app.js b/src/playground/assets/js/app.js similarity index 100% rename from src/assets/js/playground/app.js rename to src/playground/assets/js/app.js From 2f0c7b5f3b435ea9fd53ad6dc2df421390b850a0 Mon Sep 17 00:00:00 2001 From: Reynaldi Chernando Date: Mon, 17 Nov 2025 17:34:05 +0700 Subject: [PATCH 08/21] Remove unused sandbox svg --- src/playground/sandbox.svg | 20 -------------------- 1 file changed, 20 deletions(-) delete mode 100644 src/playground/sandbox.svg diff --git a/src/playground/sandbox.svg b/src/playground/sandbox.svg deleted file mode 100644 index aacf192..0000000 --- a/src/playground/sandbox.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - - - - - - - - - - - - \ No newline at end of file From 0667cd90d8d97cbdabd9660a3b57d513112059ed Mon Sep 17 00:00:00 2001 From: Reynaldi Chernando Date: Mon, 17 Nov 2025 18:01:10 +0700 Subject: [PATCH 09/21] Fix resizing --- src/playground.js | 36 +++++++++++++++-------------- src/playground/assets/css/style.css | 4 ++-- src/playground/assets/js/app.js | 17 ++++++-------- 3 files changed, 28 insertions(+), 29 deletions(-) diff --git a/src/playground.js b/src/playground.js index 6a5ede0..02dfabc 100644 --- a/src/playground.js +++ b/src/playground.js @@ -86,27 +86,29 @@ const playgroundHtml = `
- -
-
-

Code:

+
+ +
+
+

Code:

+
+
-
- -
- - -
- - -
-
-

Preview:

- + + +
+ + +
+
+

Preview:

+ +
+
-
+ diff --git a/src/playground/assets/css/style.css b/src/playground/assets/css/style.css index 5f5753f..4b36617 100644 --- a/src/playground/assets/css/style.css +++ b/src/playground/assets/css/style.css @@ -91,7 +91,7 @@ body { } #code-container { - flex: 1; + width: 50%; height: 100%; position: relative; min-width: 0; @@ -100,7 +100,7 @@ body { } #output-container { - flex: 1; + width: 50%; height: 100%; position: relative; min-width: 0; diff --git a/src/playground/assets/js/app.js b/src/playground/assets/js/app.js index 47b950a..f61ec98 100644 --- a/src/playground/assets/js/app.js +++ b/src/playground/assets/js/app.js @@ -113,19 +113,16 @@ resizer.addEventListener('mousedown', (e) => { document.addEventListener('mousemove', (e) => { if (!isResizing) return; - const mainContainer = codeContainer.parentElement; - const sidebarContainer = document.getElementById('sidebar-container'); - const sidebarWidth = sidebarContainer.offsetWidth; - const availableWidth = mainContainer.offsetWidth - sidebarWidth - 6; // minus resizer width + const parentWidth = codeContainer.parentElement.offsetWidth; const diffX = e.pageX - startX; - const newCodeWidth = startWidthCode + diffX; - const newOutputWidth = startWidthOutput - diffX; + const newCodeWidth = ((startWidthCode + diffX) / parentWidth * 100); + const newOutputWidth = ((startWidthOutput - diffX) / parentWidth * 100); - // Set minimum width to 200px - if (newCodeWidth >= 200 && newOutputWidth >= 200) { - codeContainer.style.flex = `0 0 \${newCodeWidth}px`; - outputContainer.style.flex = `0 0 \${newOutputWidth}px`; + // Set minimum width to 20% + if (newCodeWidth >= 20 && newOutputWidth >= 20) { + codeContainer.style.width = `${newCodeWidth}%`; + outputContainer.style.width = `${newOutputWidth}%`; editor.layout(); // Resize Monaco editor } }); From ed413d297e6de74e5e774e209cb62a822297c24d Mon Sep 17 00:00:00 2001 From: Reynaldi Chernando Date: Mon, 17 Nov 2025 18:05:14 +0700 Subject: [PATCH 10/21] Fix active sidebar --- src/playground.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/playground.js b/src/playground.js index 02dfabc..47a65bd 100644 --- a/src/playground.js +++ b/src/playground.js @@ -10,7 +10,7 @@ const generateSidebarHtml = (sections) => { sidebarHtml += `
`; sidebarHtml += `
${section.title}
`; section.children.forEach(example => { - sidebarHtml += `${example.title}`; + sidebarHtml += `${example.title}`; }); sidebarHtml += `
`; }); From db3d7ab27165d1ad2eb8d8d5e3188b9599fee7bf Mon Sep 17 00:00:00 2001 From: Reynaldi Chernando Date: Mon, 17 Nov 2025 18:16:46 +0700 Subject: [PATCH 11/21] Init first page as hello world --- src/examples.js | 5 - src/playground.js | 27 +++ src/playground/index.html | 478 -------------------------------------- 3 files changed, 27 insertions(+), 483 deletions(-) delete mode 100755 src/playground/index.html diff --git a/src/examples.js b/src/examples.js index a66c5b6..6239131 100644 --- a/src/examples.js +++ b/src/examples.js @@ -2,11 +2,6 @@ const examples = [ { title: 'Introduction', children: [ - { - title: 'Chat with GPT-5 nano', - slug: 'intro-chatgpt', - source: '/playground/examples/intro-chatgpt.html' - }, { title: 'Image Analysis', slug: 'intro-gpt-vision', diff --git a/src/playground.js b/src/playground.js index 47a65bd..b6e0b0a 100644 --- a/src/playground.js +++ b/src/playground.js @@ -6,6 +6,9 @@ const examples = require('./examples') const generateSidebarHtml = (sections) => { let sidebarHtml = '
'; + // Add index page as first item without category + sidebarHtml += `Hello World`; + sections.forEach(section => { sidebarHtml += `
`; sidebarHtml += `
${section.title}
`; @@ -118,6 +121,30 @@ const generatePlayground = () => { // Generate sidebar HTML once for all examples const sidebarHtml = generateSidebarHtml(examples); + // Generate index page with empty code + let indexHtmlTemplate = playgroundHtml.slice(); + indexHtmlTemplate = indexHtmlTemplate.replace('{{SIDEBAR}}', sidebarHtml); + const indexHtml = indexHtmlTemplate.replace('{{CODE}}', ` + + + + +`); + + const indexOutputDir = path.join('dist', 'playground'); + fs.mkdirSync(indexOutputDir, { recursive: true }); + + const indexOutputPath = path.join(indexOutputDir, 'index.html'); + fs.writeFileSync(indexOutputPath, indexHtml, 'utf8'); + let totalExamples = 0; examples.forEach(section => { diff --git a/src/playground/index.html b/src/playground/index.html deleted file mode 100755 index 21cdc93..0000000 --- a/src/playground/index.html +++ /dev/null @@ -1,478 +0,0 @@ - - - - - - Puter.js Playground - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-

Code:

-
- Example: - -
-
-
-
-
-
-
-

Preview:

- -
-
-
-
- - - - From 9aee5ab89f8fdc9a575da33e9f88832c46f9b6a6 Mon Sep 17 00:00:00 2001 From: Reynaldi Chernando Date: Mon, 17 Nov 2025 18:26:12 +0700 Subject: [PATCH 12/21] Adjust style and improve hello world page --- src/examples.js | 5 ++++ src/playground.js | 5 +--- src/playground/assets/css/style.css | 38 ++++++++++++++--------------- 3 files changed, 25 insertions(+), 23 deletions(-) diff --git a/src/examples.js b/src/examples.js index 6239131..23ae091 100644 --- a/src/examples.js +++ b/src/examples.js @@ -2,6 +2,11 @@ const examples = [ { title: 'Introduction', children: [ + { + title: 'Hello World', + slug: '', + source: '/playground/examples/intro-chatgpt.html' + }, { title: 'Image Analysis', slug: 'intro-gpt-vision', diff --git a/src/playground.js b/src/playground.js index b6e0b0a..fa17590 100644 --- a/src/playground.js +++ b/src/playground.js @@ -6,14 +6,11 @@ const examples = require('./examples') const generateSidebarHtml = (sections) => { let sidebarHtml = '
'; - // Add index page as first item without category - sidebarHtml += `Hello World`; - sections.forEach(section => { sidebarHtml += `
`; sidebarHtml += `
${section.title}
`; section.children.forEach(example => { - sidebarHtml += `${example.title}`; + sidebarHtml += `${example.title}`; }); sidebarHtml += `
`; }); diff --git a/src/playground/assets/css/style.css b/src/playground/assets/css/style.css index 4b36617..e82b9a8 100644 --- a/src/playground/assets/css/style.css +++ b/src/playground/assets/css/style.css @@ -71,7 +71,7 @@ body { } #sidebar-container { - width: 250px; + width: 280px; background: #f8f9fa; border-right: 1px solid #e1e1e1; overflow: hidden; @@ -221,6 +221,8 @@ body { .sidebar { flex: 1; overflow-y: auto; + padding-left: 20px; + padding-right: 20px; } .sidebar-header { @@ -257,39 +259,37 @@ body { } .sidebar-content { - padding: 15px; + padding-top: 20px; } .sidebar-category { - margin-bottom: 25px; + margin-bottom: 30px; } .sidebar-category-title { - font-weight: bold; - font-size: 14px; - color: #333; - margin-bottom: 10px; - text-transform: uppercase; - letter-spacing: 0.5px; + font-weight: 500; + font-size: 15px; + color: #012238; + margin-bottom: 20px; +} + +.sidebar-category:first-child .sidebar-category-title { + padding-top: 0; } .sidebar-item { display: block; - padding: 8px 12px; - color: #555; + color: #5f5f5f; text-decoration: none; - border-radius: 4px; - margin-bottom: 4px; - font-size: 14px; - transition: background 0.2s ease; + margin-right: 15px; + margin-bottom: 15px; + font-size: 15px; } .sidebar-item:hover { - background: #e9ecef; - color: #2563eb; + text-decoration: underline; } .sidebar-item.active { - background: #2563eb; - color: white; + text-decoration: underline; } From 473f813f220bb50e3b914ed9ab0361df48ab20e2 Mon Sep 17 00:00:00 2001 From: Reynaldi Chernando Date: Mon, 17 Nov 2025 18:32:21 +0700 Subject: [PATCH 13/21] Readd autorun --- build.js | 2 +- src/playground/assets/js/app.js | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/build.js b/build.js index d4ca233..91a34bb 100644 --- a/build.js +++ b/build.js @@ -47,7 +47,7 @@ marked.use({ html += '
'; // "Run" if (exampleID) - html += ``; + html += ``; // "Copy" html += '
'; diff --git a/src/playground/assets/js/app.js b/src/playground/assets/js/app.js index f61ec98..859b490 100644 --- a/src/playground/assets/js/app.js +++ b/src/playground/assets/js/app.js @@ -19,6 +19,12 @@ document.addEventListener('DOMContentLoaded', function () { // Load initial code from iframe editor.setValue(document.getElementById('initial-code').textContent); + // auto run? + var urlParams = new URLSearchParams(window.location.search); + var autoRun = urlParams.get('autorun'); + if (autoRun) { + loadStringInIframe(editor.getValue()); + } }); function fetchGitHubData() { From 0e06589681644d75a543fef00eac13b2698bc3dd Mon Sep 17 00:00:00 2001 From: Reynaldi Chernando Date: Mon, 17 Nov 2025 18:48:44 +0700 Subject: [PATCH 14/21] Set SEO title --- src/playground.js | 28 +++------------------------- 1 file changed, 3 insertions(+), 25 deletions(-) diff --git a/src/playground.js b/src/playground.js index fa17590..128d1b0 100644 --- a/src/playground.js +++ b/src/playground.js @@ -28,7 +28,7 @@ const playgroundHtml = ` crossorigin="anonymous" referrerpolicy="no-referrer" /> - Puter.js Playground + {{TITLE}} @@ -118,30 +118,6 @@ const generatePlayground = () => { // Generate sidebar HTML once for all examples const sidebarHtml = generateSidebarHtml(examples); - // Generate index page with empty code - let indexHtmlTemplate = playgroundHtml.slice(); - indexHtmlTemplate = indexHtmlTemplate.replace('{{SIDEBAR}}', sidebarHtml); - const indexHtml = indexHtmlTemplate.replace('{{CODE}}', ` - - - - -`); - - const indexOutputDir = path.join('dist', 'playground'); - fs.mkdirSync(indexOutputDir, { recursive: true }); - - const indexOutputPath = path.join(indexOutputDir, 'index.html'); - fs.writeFileSync(indexOutputPath, indexHtml, 'utf8'); - let totalExamples = 0; examples.forEach(section => { @@ -155,6 +131,8 @@ const generatePlayground = () => { // Replace {{SIDEBAR}} and {{CODE}} in the template htmlTemplate = htmlTemplate.replace('{{SIDEBAR}}', sidebarHtml); + const pageTitle = example.slug === '' ? 'Puter.js Playground' : `${example.title} | Puter.js Playground`; + htmlTemplate = htmlTemplate.replace('{{TITLE}}', pageTitle); const finalHtml = htmlTemplate.replace('{{CODE}}', sourceContent); // Create output directory From 56f2c86fe05194c6bcc2d8c022f5aff3952e8136 Mon Sep 17 00:00:00 2001 From: Reynaldi Chernando Date: Mon, 17 Nov 2025 21:42:42 +0700 Subject: [PATCH 15/21] Improve styling --- src/playground/assets/css/style.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/playground/assets/css/style.css b/src/playground/assets/css/style.css index e82b9a8..489b7fd 100644 --- a/src/playground/assets/css/style.css +++ b/src/playground/assets/css/style.css @@ -81,8 +81,8 @@ body { } #sidebar-container.collapsed { - width: 50px; margin-left: 0; + width: auto; } #sidebar-container.collapsed .sidebar-title, @@ -229,7 +229,7 @@ body { height: 50px; display: flex; align-items: center; - padding: 0 15px; + padding: 0 10px; border-bottom: 1px solid #e1e1e1; background: #fff; } @@ -237,7 +237,6 @@ body { .sidebar-toggle { background: transparent; border: none; - padding: 8px; cursor: pointer; font-size: 20px; color: #333; From abe79be39eec34f4674c75bed821bd98b2a9e762 Mon Sep 17 00:00:00 2001 From: Reynaldi Chernando Date: Mon, 17 Nov 2025 22:05:09 +0700 Subject: [PATCH 16/21] Refine style --- src/playground.js | 4 +- src/playground/assets/css/style.css | 63 ++++++++++++++++++++++------- src/playground/assets/js/app.js | 9 +++-- 3 files changed, 57 insertions(+), 19 deletions(-) diff --git a/src/playground.js b/src/playground.js index 128d1b0..588f09c 100644 --- a/src/playground.js +++ b/src/playground.js @@ -78,7 +78,9 @@ const playgroundHtml = `