index.scroll
Changed around line 36: playgroundIde
- 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
-
-
-
-
-
+ 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
+
+
+ Hello
+
+
playground-ide.scroll
Changed around line 11: playgroundFileParser
- return `
-
+
Changed around line 28: playgroundIdeParser
- return `
-
+ return `
-
- `;
+ `;
documentation.scroll
Changed around line 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")
- }
index.scroll
Changed around line 17: Serverless coding environments for the web.
- documentation.scroll
playground-ide.scroll
Changed around line 13: playgroundFileParser
- ${this.subparticlesToString()}
+ ${this.subparticlesToString()}
.requests.scroll
Changed around line 1
+ 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
+
ReadersWriters
ReadersWriters
+ sparkline
+ y Readers
+ color blue
+ width 200
+ height 200
+ sparkline
+ y Writers
+ color green
+ width 200
+ height 200
+ printTable
+
+ tableSearch
+ scrollVersionLink
.stats.json
Changed around line 1
+ {
+ "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"
+ }
+ }
playground-ide.scroll
Changed around line 13: playgroundFileParser
- ${this.subparticlesToString()}
+ ${this.subparticlesToString()}
playground-ide.scroll
Changed around line 13: playgroundFileParser
- ${this.subparticlesToString()}
+ ${this.subparticlesToString()}
playground-ide.scroll
Changed around line 13: playgroundFileParser
- ${this.subparticlesToString()}
+ ${this.subparticlesToString()}
index.scroll
Changed around line 132: I didn't find a general way in scroll to use `encodeURIComponent` with other thi
- belowAsCode
+ belowAsCode 2
+ belowAsHtml
index.scroll
Changed around line 17: Serverless coding environments for the web.
+ documentation.scroll
- belowAsCode
+ belowAsCode 2
+ belowAsHtml
documentation.scroll
Changed around line 1
+ 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")
+ }
documentation.scroll
index.scroll
Changed around line 22: I implemented a playgroundIdeParser to wrap the `playground-ide` web component.
+ style height:150px
playground-ide.scroll
Changed around line 20: playgroundFileParser
- inScope playgroundFileParser
+ inScope playgroundFileParser aftertextStyleParser
+ get styles() {
+ const style = this.getParticle("style")
+ return style? `style="${style.content}"` : ""
+ }
-
+
index.scroll
Changed around line 139: tryscroll
- Would be nice if there was an easier way to `encodeURIComponent` into the iframe `src` attribute rather than implementing the `tryscrollParser`.
-
index.scroll
Changed around line 112: belowAsCode
+ The `program` parser in the `link` aftertextparser can be used to urlencode a scroll program as follows
+
+ belowAsCode
+ Link to open a scroll program on try scroll
+ link https://try.scroll.pub/# try scroll
+ program
+ scroll
+ theme gazette
+ code
+ two = 1 + 1
+
- I implemented a tryscrollParser to display try scroll in an iframe. Can scroll be loaded natively and into a web component somehow instead?
+ I didn't find a general way in scroll to use `encodeURIComponent` with other things like the `iframe` src attribute, so I implemented a tryscrollParser. It displays try scroll in an iframe.
Changed around line 137: tryscroll
- why does the above only show the editor and not the preview? When I had iframe directly both showed. Ok both don't show, but it fills the column width
+ Why does the above only show the editor and not the preview?
- belowAsCode
-
-
- belowAsCode
- Link to open a scroll program on try scroll
- link https://try.scroll.pub/# try scroll
- program
- scroll
- theme gazette
- code
- two = 1 + 1
+ Would be nice if there was an easier way to `encodeURIComponent` into the iframe `src` attribute rather than implementing the `tryscrollParser`.
- Would be nice if there was an easier way to `encodeURIComponent` into the iframe `src` attribute rather than implementing the `tryscrollParser`.
+ It would be nice if try scroll could be implemented as a web component instead of resorting to an iframe.
tryscroll.scroll
Changed around line 27: tryscrollParser
- const attrs = [`src="${this.link}"`, 'style="width: 100%; height: 300px;"']
+ const attrs = `src="${this.link}" style="width: 100%; height: 300px;"`
index.scroll
Changed around line 54: belowAsCode
- Load the code. The first two scripts are only required for the wasm based languages. The 3rd is the main web component and supports javascript natively
+ ## Load the code
+ The first two scripts are only required for the wasm based languages. The 3rd is the main web component and supports javascript natively
index.scroll
Changed around line 50: belowAsCode
- # code-api
+ # codapi
- https://codapi.org/ and https://github.com/nalgeon/codapi-js
-
- These first two are only required for wasm. The 3rd is the web component
+ https://codapi.org/ (github) is another web component which allows client-side presentation of code snippet playgrounds.
+ link https://github.com/nalgeon/codapi-js github
+ Load the code. The first two scripts are only required for the wasm based languages. The 3rd is the main web component and supports javascript natively
index.scroll
Changed around line 19: Serverless coding environments for the web.
- link playgroundIdeParser playground-ide.scroll
+ link playground-ide.scroll playgroundIdeParser
index.scroll
Changed around line 19: Serverless coding environments for the web.
+ link playgroundIdeParser playground-ide.scroll
index.scroll
Changed around line 18: Serverless coding environments for the web.
- I implemented a playgroundIdeParser to wrap the `` web component. Html, javascript, typescript, etc. files can be included in the playground like this:
+ I implemented a playgroundIdeParser to wrap the `playground-ide` web component. Html, javascript, typescript, etc. files can be included in the playground like this:
Changed around line 31: playgroundIde
- The results/preview pane can be displayed by itself without the ide/editor by using `` and ``, I haven't made a parser for these. Here is an example:
+ 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:
Changed around line 112: belowAsCode
- I implemented a tryscrollParser to display tryscroll in an iframe. Can scroll be loaded natively and into a web component somehow instead?
+ I implemented a tryscrollParser to display try scroll in an iframe. Can scroll be loaded natively and into a web component somehow instead?
- link https://try.scroll.pub tryscroll
+ link https://try.scroll.pub/# try scroll
index.scroll
Changed around line 18: Serverless coding environments for the web.
+ I implemented a playgroundIdeParser to wrap the `` web component. Html, javascript, typescript, etc. files can be included in the playground like this:
Changed around line 31: playgroundIde
- TODO: make scroll parser for this also
+ The results/preview pane can be displayed by itself without the ide/editor by using `` and ``, I haven't made a parser for these. Here is an example:
Changed around line 112: belowAsCode
- Implemented a parser to display tryscroll in an iframe. Can scroll be loaded natively and into a web component somehow instead?
- link tryscroll.scroll tryscroll
+ I implemented a tryscrollParser to display tryscroll in an iframe. Can scroll be loaded natively and into a web component somehow instead?
+ link tryscroll.scroll tryscrollParser
+ link https://try.scroll.pub tryscroll
index.scroll
Changed around line 22: belowAsCode
-
+
-
+
index.scroll
Changed around line 17: Serverless coding environments for the web.
+ playground-ide.scroll
- script
- import('https://cdn.jsdelivr.net/npm/playground-elements@0.18.1/+esm')
-
- belowAsCode
-
-
-
-
+ playgroundIde
+ file index.html
+
+
+ Hello
+
+ `;
+ }
+
+ playgroundIdeParser
+ extends abstractScrollParser
+ inScope playgroundFileParser
+ description playground-ide for html/typescript/javascript
+ cueFromId
+ javascript
+ buildHtml() {
+ return `
+
+ ${this.filter(p => p.buildHtml).map(p => p.buildHtml()).join("\n")}
+
+ `;
+ }
playground-ide.scroll
index.scroll
Changed around line 1
+
+ title Code playgrounds
+ printTitle
+
+ authors btheado
+ link https://github.com/btheado btheado
+ printAuthors
+
index.scroll
Changed around line 119: tryscroll
- why does the above only show the editor and not the preview? When I had iframe directly both showed
+ why does the above only show the editor and not the preview? When I had iframe directly both showed. Ok both don't show, but it fills the column width
index.scroll
Changed around line 119: tryscroll
+ why does the above only show the editor and not the preview? When I had iframe directly both showed
+
+ belowAsCode
+
+
index.scroll
Changed around line 43: belowAsCode
+ ***
+
Changed around line 102: belowAsCode
+ ***
+
tryscroll.scroll
Changed around line 1
- programLinkParser
- catchAllAtomType codeAtom
-
Changed around line 22: tryscrollParser
- console.log(baseLink + this.getParticle("program").encoded);
tryscroll.scroll
Changed around line 1
+ programLinkParser
+ catchAllAtomType codeAtom
+
tryscroll.scroll
Changed around line 20: tryscrollParser
- const baseLink = "https://try.scroll.pub/#scroll%0A%20"
+ const baseLink = "https://try.scroll.pub/#"
index.scroll
Changed around line 124: Link to open a scroll program on try scroll
- Would be nice if there was an easier way to `encodeURIComponent` into the iframe `src` attribute similar than implementing the `tryscrollParser`.
+ Would be nice if there was an easier way to `encodeURIComponent` into the iframe `src` attribute rather than implementing the `tryscrollParser`.
index.scroll
Changed around line 110: Implemented a parser to display tryscroll in an iframe. Can scroll be loaded nat
- theme gazette
- code
- two = 1 + 1
+ scroll
+ theme gazette
+ code
+ two = 1 + 1
- link https://try.scroll.pub/#scroll%0A%20 try scroll
+ link https://try.scroll.pub/# try scroll
- theme gazette
- code
- two = 1 + 1
+ scroll
+ theme gazette
+ code
+ two = 1 + 1
index.scroll
Changed around line 116: tryscroll
- link https://try.scroll.pub/# try scroll
+ link https://try.scroll.pub/#scroll%0A%20 try scroll
- scroll
- theme gazette
- code
- two = 1 + 1
+ theme gazette
+ code
+ two = 1 + 1
- Would be nice if there was an easy way to `encodeURIComponent` into the iframe `src` attribute similar to the `programParser` above
+ Would be nice if there was an easier way to `encodeURIComponent` into the iframe `src` attribute similar than implementing the `tryscrollParser`.
index.scroll
Changed around line 109: Implemented a parser to display tryscroll in an iframe. Can scroll be loaded nat
- theme gazette
- code
- two = 1 + 1
+ program
+ theme gazette
+ code
+ two = 1 + 1
index.scroll
Changed around line 102: belowAsCode
- Using an iframe here. Can scroll be loaded natively and into a web component somehow?
+ tryscroll.scroll
+
+ Implemented a parser to display tryscroll in an iframe. Can scroll be loaded natively and into a web component somehow instead?
+ link tryscroll.scroll tryscroll
+
-
+ tryscroll
+ theme gazette
+ code
+ two = 1 + 1
tryscroll.scroll
Changed around line 1
+ tryscrollParser
+ extends scrollParagraphParser
+ description Try scroll program in iframe
+ example
+ tryscroll
+ theme gazette
+ code
+ two = 1 + 1
+ atoms cueAtom
+ programParser
+ description Anything here will be URI encoded and inserted into iframe src.
+ cueFromId
+ atoms cueAtom
+ catchAllParser programLinkParser
+ javascript
+ get encoded() {
+ return encodeURIComponent(this.subparticlesToString())
+ }
+ cueFromId
+ javascript
+ tag = "iframe"
+ get link() {
+ const baseLink = "https://try.scroll.pub/#scroll%0A%20"
+ if (this.has("program")) {
+ console.log(baseLink + this.getParticle("program").encoded);
+ return baseLink + this.getParticle("program").encoded
+ }
+ return baseLink
+ }
+ get htmlAttributes() {
+ const attrs = [`src="${this.link}"`, 'style="width: 100%; height: 300px;"']
+ return attrs
+ }
tryscroll.scroll
index.scroll
Changed around line 10: Serverless coding environments for the web.
-
-
+ script
+ import('https://cdn.jsdelivr.net/npm/playground-elements@0.18.1/+esm')
+
+ belowAsCode
+
index.scroll
Changed around line 11: Serverless coding environments for the web.
-
+
Changed around line 26: belowAsCode
-
+
index.scroll
Changed around line 107: belowAsCode
- theme gazette
- code
- two = 1 + 1
+ scroll
+ theme gazette
+ code
+ two = 1 + 1
index.scroll
Changed around line 102: belowAsCode
+
+ belowAsCode
+ Link to open a scroll program on try scroll
+ link https://try.scroll.pub/# try scroll
+ program
+ theme gazette
+ code
+ two = 1 + 1
+
+ Would be nice if there was an easy way to `encodeURIComponent` into the iframe `src` attribute similar to the `programParser` above
index.scroll
Changed around line 1
+ authors https://github.com/btheado
index.scroll
Changed around line 25: belowAsCode
-
+
Changed around line 37: belowAsCode
-
+
index.scroll
Changed around line 7: thinColumns
+ ## with the IDE
Changed around line 23: belowAsCode
+ ## without the IDE
+ belowAsCode
+
+
+
+
+
+
index.scroll
Changed around line 1
+ thinColumns
index.scroll
Changed around line 25: belowAsCode
+ These first two are only required for wasm. The 3rd is the web component
index.scroll
Changed around line 25: belowAsCode
- Wasm based languages require these:
+
- aboveAsCode 2
-
- Load the web component:
-
- aboveAsCode
+ aboveAsCode 3
index.scroll
Changed around line 6: theme gazette
+ belowAsCode
-
+
Changed around line 19: Serverless coding environments for the web.
-
+
index.scroll
Changed around line 24: Serverless coding environments for the web.
+ Wasm based languages require these:
+
+
+ aboveAsCode 2
+
Changed around line 38: aboveAsCode
- console.log("ho");
+ console.log(msg);
Changed around line 46: belowAsCode
- Wasm based languages requires loading some more code:
-
-
- aboveAsCode 2
-
index.scroll
Changed around line 1
- theme roboto
+ theme gazette
index.scroll
Changed around line 1
- Hello World my name is
+ # playground-ide
+
+ Serverless coding environments for the web.
+ link https://github.com/google/playground-elements
+
+
+
+
+
+
+
+ # code-api
+
+ https://codapi.org/ and https://github.com/nalgeon/codapi-js
+
+ Load the web component:
+
+ aboveAsCode
+
+ ## browser native
+ ### javascript
+ belowAsCode
+
+ const msg = "Hello, World!"
+ console.log("ho");
+ console.log(window.location);
+ console.log(document.querySelector("pre"))
+
+
+
+ ## wasm based languages
+
+ Wasm based languages requires loading some more code:
+
+
+ aboveAsCode 2
+
+ Output after clicking the run button the first time for these will be slow as it needs to load some rather large wasm files
+
+ ### python
+
+ belowAsCode
+
+ msg = "Hello, World!"
+ print(msg)
+
+
+
+ ### ruby
+ belowAsCode
+
+ msg = "Hello, World!"
+ puts msg
+
+
+
+ ### sqlite
+ belowAsCode
+
+ select "Hello, World!" as message;
+
+
+
+ ### Lua
+ belowAsCode
+
+ local msg = "Hello, World!"
+ print(msg)
+
+
+
+ # scroll!
+
+ Using an iframe here. Can scroll be loaded natively and into a web component somehow?
+ belowAsCode
+
.gitignore
Changed around line 1
+ .DS_Store
+ *.html
+ *.txt
+ *.xml
+ *.css
+ *.js
+ *.csv
+ requests.scroll
index.scroll
Changed around line 1
+ buildHtml
+ theme roboto
+
+ Hello World my name is