feat: enhance playground UI with page title and style adjustments (#3289)

package-lock.json

@@ -6017,14 +6017,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/ioredis-mock": {
-      "version": "8.2.7",
-      "license": "MIT",
-      "peer": true,
-      "peerDependencies": {
-        "ioredis": ">=5"
-      }
-    },
     "node_modules/@types/jquery": {
       "version": "3.5.34",
       "dev": true,
@@ -7032,6 +7024,7 @@
     },
     "node_modules/assertion-error": {
       "version": "1.1.0",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": "*"
@@ -7519,6 +7512,7 @@
     },
     "node_modules/chai": {
       "version": "4.5.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "assertion-error": "^1.1.0",
@@ -8121,6 +8115,7 @@
     },
     "node_modules/deep-eql": {
       "version": "4.1.4",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "type-detect": "^4.0.0"
@@ -11535,6 +11530,7 @@
     },
     "node_modules/loupe": {
       "version": "2.3.7",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "get-func-name": "^2.0.1"
@@ -12552,6 +12548,7 @@
     },
     "node_modules/pathval": {
       "version": "1.1.1",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": "*"
@@ -15069,6 +15066,7 @@
     },
     "node_modules/type-detect": {
       "version": "4.1.0",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -15112,7 +15110,7 @@
     },
     "node_modules/typescript": {
       "version": "5.9.3",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",

src/docs/src/playground.js

@@ -84,8 +84,11 @@ const playgroundHtml = `
         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://js.puter.com/v2/"></script>
 
-    <div style="height: 50px; padding: 10px; background-color: #474e5d; display: flex; flex-direction: row;">
-        <h1 class="logo"><a href="/playground/">Puter.js Playground</a></h1>
+    <div style="height: 70px; padding: 10px; background-color: #474e5d; display: flex; flex-direction: row;">
+        <h1 class="logo">
+            <a href="/playground/">Puter.js Playground</a>
+            <span class="playground-page-title" style="margin: 0; font-size: 16px; color: #ccc;">{{PAGE_TITLE}}</span>
+        </h1>
         <div style="float:right;" class="navbar">
             <a href="/" target="_blank" style="margin-right: 35px;">Docs</a>
             <a style="display: flex; flex-direction: row; align-items: center;"
@@ -167,7 +170,11 @@ const generatePlayground = () => {
             htmlTemplate = htmlTemplate.replaceAll('{{DESCRIPTION}}', pageDescription);
             const canonicalUrl = `https://docs.puter.com/playground/${example.slug ? `${example.slug }/` : ''}`;
             htmlTemplate = htmlTemplate.replaceAll('{{CANONICAL}}', canonicalUrl);
-            const finalHtml = htmlTemplate.replace('{{CODE}}', sourceContent);
+            htmlTemplate = htmlTemplate.replaceAll('{{PAGE_TITLE}}', example.title);
+            const codeWithDescription = example.description
+                ? `<!-- ${example.description} -->\n\n${sourceContent}`
+                : sourceContent;
+            const finalHtml = htmlTemplate.replace('{{CODE}}', codeWithDescription);
 
             // Create output directory
             const outputDir = path.join('dist', 'playground', example.slug);

src/docs/src/playground/assets/css/style.css

@@ -66,7 +66,7 @@ body {
 
 .main-container {
   display: flex;
-  height: calc(100vh - 50px);
+  height: calc(100vh - 70px);
   width: 100%;
 }
 
@@ -147,7 +147,9 @@ body {
   font-weight: 300;
   font-size: 21px;
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  align-items: start;
+  gap: 8px;
 }
 
 .logo a {
@@ -167,6 +169,10 @@ body {
     font-size: 16px;
   }
 
+  .logo .playground-page-title {
+    font-size: 12px;
+  }
+
   .navbar a {
     font-size: 14px;
     margin-right: 10px;
@@ -180,7 +186,7 @@ body {
 
   #sidebar-container {
     position: fixed;
-    top: 50px;
+    top: 70px;
     left: 0;
     right: 0;
     width: 100%;
@@ -197,7 +203,7 @@ body {
 
   /* When sidebar is open on mobile, it overlays the content */
   #sidebar-container:not(.collapsed) {
-    height: calc(100vh - 50px);
+    height: calc(100vh - 70px);
   }
 
   /* When sidebar is collapsed, only the header is shown */
@@ -210,7 +216,7 @@ body {
     flex-direction: column !important;
     flex: 1;
     min-height: 0;
-    margin-top: 50px;
+    margin-top: 70px;
   }
 
   #code-container {

src/docs/src/playground/assets/js/app.js

@@ -11,6 +11,7 @@ document.addEventListener('DOMContentLoaded', function () {
         editor = monaco.editor.create(editorElement, {
             language: 'html',
             fontFamily: 'monospace',
+            wordWrap: 'on',
             minimap: {
                 enabled: false,
             },
@@ -246,6 +247,13 @@ document.addEventListener('click', function (e) {
             document.title = newTitle.textContent;
         }
 
+        // Update the playground page title in the header
+        const newPageTitle = doc.querySelector('.playground-page-title');
+        const currentPageTitle = document.querySelector('.playground-page-title');
+        if ( newPageTitle && currentPageTitle ) {
+            currentPageTitle.textContent = newPageTitle.textContent;
+        }
+
         // Update meta description
         const newDescription = doc.querySelector('meta[name="description"]');
         if ( newDescription ) {