commit 9a13c23846fa99315f9ec3a9adee0e24fd5234e3
Author: ffff:99.11.193.233 <ffff:99.11.193.233@hub.scroll.pub>
Date: 2025-01-01 19:42:52 +0000
Subject: updated index.scroll
diff --git a/index.scroll b/index.scroll
index 62d6b49..dd68d50 100644
--- a/index.scroll
+++ b/index.scroll
@@ -36,21 +36,20 @@ playgroundIde
document.body.appendChild(document.createTextNode("World!"))
## without the IDE
-The results/preview pane can be displayed by itself without the ide/editor by using `playground-project` and `playground-preview`, I haven't made a parser for these web components. Here is an example:
-belowAsCode
-<playground-project id=hello1 style="display:none">
- <script type="sample/html" filename="index.html">
- <!doctype html>
- <body>
- Hello
- <script type="module" src="./index.js"></script>
- </body>
- </script>
- <script type="sample/js" filename="index.js">
- document.body.appendChild(document.createTextNode("World!"))
- </script>
- </playground-project>
- <playground-preview style="height: 150px;" project="hello1"></playground-preview>
+The results/preview pane can be displayed by itself without the ide/editor by using `playground-project` and `playground-preview` html elements. I wrote a playgroundPreviewParser to encapsulate these. Here is an example:
+ link playground-ide.scroll playgroundPreviewParser
+belowAsCode 2
+belowAsHtml
+playgroundPreview
+ style height:150px
+ file index.html
+ <!doctype html>
+ <body>
+ Hello
+ <script type="module" src="./index.js"></script>
+ </body>
+ file index.js
+ document.body.appendChild(document.createTextNode("World!"))
***
commit 2e46a52903b966975c853c1d95b1ea50f492577c
Author: ffff:99.11.193.233 <ffff:99.11.193.233@hub.scroll.pub>
Date: 2025-01-01 19:39:24 +0000
Subject: updated playground-ide.scroll
diff --git a/playground-ide.scroll b/playground-ide.scroll
index 0bc677e..7c891ec 100644
--- a/playground-ide.scroll
+++ b/playground-ide.scroll
@@ -32,3 +32,20 @@ playgroundIdeParser
${this.filter(p => p.buildHtml).map(p => p.buildHtml()).join("\n")}
</playground-ide>`;
}
+
+playgroundPreviewParser
+ extends abstractAftertextParser
+ inScope playgroundFileParser aftertextStyleParser aftertextIdParser
+ description playground-preview for html/typescript/javascript
+ cueFromId
+ javascript
+ get styles() {
+ const style = this.getParticle("style")
+ return style? `style="${style.content}"` : ""
+ }
+ buildHtml() {
+ return `<playground-project id="${this.htmlId}" style="display:none">
+ ${this.filter(p => p.buildHtml).map(p => p.buildHtml()).join("\n")}
+ </playground-project>
+ <playground-preview ${this.styles} project="${this.htmlId}"></playground-preview>`;
+ }
commit b24acb4d78c9bf7fb9d46beba9eeb81f43d365e2
Author: ffff:99.11.193.233 <ffff:99.11.193.233@hub.scroll.pub>
Date: 2025-01-01 18:59:24 +0000
Subject: updated index.scroll
diff --git a/index.scroll b/index.scroll
index 4c277d8..62d6b49 100644
--- a/index.scroll
+++ b/index.scroll
@@ -8,7 +8,9 @@ authors btheado
link https://github.com/btheado btheado
printAuthors
-authors https://github.com/btheado
+These code playgrounds all run client-side in the browser
+ center
+
thinColumns
# playground-ide
commit 175870b19f51e0e8facbbd480df7711caa40f22d
Author: ffff:99.11.193.233 <ffff:99.11.193.233@hub.scroll.pub>
Date: 2025-01-01 18:50:41 +0000
Subject: updated index.scroll
diff --git a/index.scroll b/index.scroll
index 6de1c9d..4c277d8 100644
--- a/index.scroll
+++ b/index.scroll
@@ -142,4 +142,29 @@ tryscroll
Why does the above only show the editor and not the preview?
-It would be nice if try scroll could be implemented as a web component instead of resorting to an iframe.
\ No newline at end of file
+It would be nice if try scroll could be implemented as a web component instead of resorting to an iframe.
+
+
+***
+
+# flems.io
+
+flems is similar to playground-ide, but not implemented as a web component
+ link https://flems.io flems
+
+belowAsCode
+<div id="flems" style="height: 250px;"/>
+ <script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script>
+ <script>
+ window.Flems(flems, {
+ files: [{
+ name: 'app.js',
+ content: 'm.render(\n\tdocument.body,\n\tm("h1", "Hello world")\n)'
+ }],
+ links: [{
+ name: 'mithril',
+ type: 'js',
+ url: 'https://unpkg.com/mithril'
+ }]
+ })
+ </script>
commit 000915a60a0b2bf7dcbe95c861865fcfab97f84a
Author: ffff:99.11.193.233 <ffff:99.11.193.233@hub.scroll.pub>
Date: 2025-01-01 02:45:49 +0000
Subject: updated playground-ide.scroll
diff --git a/playground-ide.scroll b/playground-ide.scroll
index e261253..0bc677e 100644
--- a/playground-ide.scroll
+++ b/playground-ide.scroll
@@ -11,10 +11,9 @@ playgroundFileParser
javascript
buildHtml() {
const extension = this.content.split(".").pop()
- return `
- <script type="sample/${extension}" filename="${this.content}">
+ return `<script type="sample/${extension}" filename="${this.content}">
${this.subparticlesToString()}
- </script>
+ </script>
`;
}
@@ -29,9 +28,7 @@ playgroundIdeParser
return style? `style="${style.content}"` : ""
}
buildHtml() {
- return `
- <playground-ide ${this.styles} editable-file-system line-numbers resizable>
+ return `<playground-ide ${this.styles} editable-file-system line-numbers resizable>
${this.filter(p => p.buildHtml).map(p => p.buildHtml()).join("\n")}
- </playground-ide>
- `;
+ </playground-ide>`;
}
commit 96ad555b4e90c119c360a4282dd01802782254f5
Author: root <root@hub.scroll.pub>
Date: 2025-01-01 02:42:37 +0000
Subject: Deleted documentation.scroll
diff --git a/documentation.scroll b/documentation.scroll
deleted file mode 100644
index 1becdca..0000000
--- a/documentation.scroll
+++ /dev/null
@@ -1,8 +0,0 @@
-belowAsHtmlParser
- extends belowAsCodeParser
- description displays html output of next particle in a code block
- cueFromId
- javascript
- get code() {
- return this.selectedParticles.filter(p => p.buildHtml).map(p => p.buildHtml()).join("\n")
- }
\ No newline at end of file
commit ab81737894381890dd5985d0805ff3b83d3c9900
Author: ffff:99.11.193.233 <ffff:99.11.193.233@hub.scroll.pub>
Date: 2025-01-01 02:41:54 +0000
Subject: updated index.scroll
diff --git a/index.scroll b/index.scroll
index 7ec9a38..6de1c9d 100644
--- a/index.scroll
+++ b/index.scroll
@@ -17,7 +17,6 @@ Serverless coding environments for the web.
link https://github.com/google/playground-elements
## with the IDE
-documentation.scroll
playground-ide.scroll
I implemented a playgroundIdeParser to wrap the `playground-ide` web component. Html, javascript, typescript, etc. files can be included in the playground like this:
link playground-ide.scroll playgroundIdeParser
commit 10b0ef48e1c1729205c3a8b31162ea8f5d126962
Author: ffff:99.11.193.233 <ffff:99.11.193.233@hub.scroll.pub>
Date: 2025-01-01 02:41:24 +0000
Subject: updated playground-ide.scroll
diff --git a/playground-ide.scroll b/playground-ide.scroll
index 8e5c787..e261253 100644
--- a/playground-ide.scroll
+++ b/playground-ide.scroll
@@ -13,7 +13,7 @@ playgroundFileParser
const extension = this.content.split(".").pop()
return `
<script type="sample/${extension}" filename="${this.content}">
- ${this.subparticlesToString()}
+ ${this.subparticlesToString()}
</script>
`;
}
commit 6440282b1bd2a5b91eab82cae5c19674cc3a1eb6
Author: ffff:99.11.193.233 <ffff:99.11.193.233@hub.scroll.pub>
Date: 2024-12-31 20:46:18 +0000
Subject: Reverted to b5e4f437040e6fb953a85496a0105823e53e5913
diff --git a/.requests.scroll b/.requests.scroll
new file mode 100644
index 0000000..39cb748
--- /dev/null
+++ b/.requests.scroll
@@ -0,0 +1,34 @@
+title Traffic Data
+metaTags
+homeButton
+buildHtml
+theme gazette
+
+printTitle
+
+container
+
+Real time view
+ /globe.html?folderName=codeplaygrounds
+
+button Refresh
+ link /summarizeRequests.htm?folderName=codeplaygrounds
+ post
+ // Anything
+
+.requests.csv
+ <br><br><span style="width: 200px; display:inline-block; color: blue;">Readers</span><span style="color:green;">Writers</span><br><br>
+ sparkline
+ y Readers
+ color blue
+ width 200
+ height 200
+ sparkline
+ y Writers
+ color green
+ width 200
+ height 200
+ printTable
+
+tableSearch
+scrollVersionLink
diff --git a/.stats.json b/.stats.json
new file mode 100644
index 0000000..4ada185
--- /dev/null
+++ b/.stats.json
@@ -0,0 +1,20 @@
+{
+ "files": [
+ ".gitignore",
+ "documentation.scroll",
+ "index.scroll",
+ "playground-ide.scroll",
+ "tryscroll.scroll"
+ ],
+ "hasSslCert": true,
+ "stats": {
+ "folder": "codeplaygrounds",
+ "folderLink": "https://hub.scroll.pub/codeplaygrounds",
+ "created": "2024-12-31T20:45:41.000Z",
+ "revised": "2024-12-31T20:45:41.000Z",
+ "files": 5,
+ "mb": 1,
+ "revisions": 50,
+ "hash": "fd80a39494"
+ }
+}
\ No newline at end of file
diff --git a/playground-ide.scroll b/playground-ide.scroll
index a2112f3..8e5c787 100644
--- a/playground-ide.scroll
+++ b/playground-ide.scroll
@@ -13,7 +13,7 @@ playgroundFileParser
const extension = this.content.split(".").pop()
return `
<script type="sample/${extension}" filename="${this.content}">
- ${this.subparticlesToString()}
+ ${this.subparticlesToString()}
</script>
`;
}
commit fd80a39494e1862cde1753873ca14ec824dc5e32
Author: ffff:99.11.193.233 <ffff:99.11.193.233@hub.scroll.pub>
Date: 2024-12-31 20:45:41 +0000
Subject: updated playground-ide.scroll
diff --git a/playground-ide.scroll b/playground-ide.scroll
index e261253..a2112f3 100644
--- a/playground-ide.scroll
+++ b/playground-ide.scroll
@@ -13,7 +13,7 @@ playgroundFileParser
const extension = this.content.split(".").pop()
return `
<script type="sample/${extension}" filename="${this.content}">
- ${this.subparticlesToString()}
+ ${this.subparticlesToString()}
</script>
`;
}