Playground Next #872
Playground Next #872
Conversation
Many of the global IRIs should not change as the defined term IRI is an `http://` IRI and the community has not (yet?) defined new term IRIs with the `https://` prefix. They are identifiers...not necessarily locators, after all.
Not a good idea to link to someone elses .com domain.
Really not a fan of the Bootstrap 5 UI kit. It is very low contrast (bad for accessibility) and changes most of the old Bootstrap classes (making upgrade non-trivial). Consequently, any other CSS framework would be nearly as complex to upgrade to...so exploring other options is back on the table.
Fomantic is far more legible and learnable than Bootstrap (any version) and has an active community and plenty of primitives for updating this site.
So far the editor only displays JSON (with linting) and loads examples. Much more to come.
Similar to what is there now. CodeMirror 6 has many more features, so these suggestions can eventually be far more targeted to specific areas of the JSON-LD document (like within an `@context` object or a Value Object).
It does not yet show it, however...
Also made editors fixed height, but resizable.
Deploying json-ld-org with
|
| Latest commit: |
0cb5151
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://e5c9bbc0.json-ld-org.pages.dev |
| Branch Preview URL: | https://playground-next.json-ld-org.pages.dev |
There was a problem hiding this comment.
Layout looks good. One glitch in the Playground is that, if you select Options, then an example, then JSON-LD Input, the displayed content doesn't match the selected example.
For example:
- Switch to the Playground
- Select Options
- Select Event
- Select JSON-LD Input
Note that the input content is empty. If, instead, you select Person, then Options, then Event, then JSON-LD Input, the content will still show Person, but the result will be for Event.
As soon as you click in the text box, the content does sync up.
|
Thanks, @gkellogg .I'll watch for that in this new Playground. |
Using CodeMirror change events to alter the reactive `store.doc` value which in turn is monitored via the `v-effect` on the #editor in the DOM which then triggers the `docChanged()` method when `store.doc` changes and runs the tab change code to recreate the expanded, etc. output.
It is also already displayed under the red squiggly line within CodeMirror, but that may get easily missed.
More tabs incoming. `this.tab` is now `this.outputTab`.
Note: most of the changes to the HTML in this commit are whitespace changes.
This additional editor will also be used for frames, etc.
Unlike the current playground feature, this button does _not_ disable the context editor nor does try to keep the context in sync. We can bring that feature back later (and make it actually work...), if we feel it is needed in the future.
The side editor setup now is far from ideal... State understanding is leaking everywhere... Refactoring awaits! Additionally, the current side editor forces pretty printing after user edits...which moves the cursor and makes one crazy. So...more to refactor.
This avoids the frequent remounting of the side editor. It should now only happen once on page load.
BigBlueHat
requested review from
gkellogg,
niklasl,
msporny,
dlongley,
pchampin,
iherman and
TallTed
|
New features include a YAML-LD output tab (hi there, @anatoly-scherbakov) and a CBOR-LD output tab! I'm planning to do the Visualized tab later as the visualization library hasn't been updated in ages, so I'm expecting that to be a relatively heavy lift...so I don't want to block on that, but plan to return to it soon (as I find it useful). So, with that status, this thing feels ready to go and I'm itching to get it in front of developers sooner than later--so reviews welcome! |
|
...actually...looks like I introduced a bug into the editing when I added the debounce stuff... Trying to sort that out. |
Much more useful, generally.
Makes the markup shorter and the tabs object can now more easily be mutated (if/when needed) for future conditions where they may not all be available for a certain use case (or hidden optionally to improve developer focus).
BigBlueHat
force-pushed
the
playground-next
branch
from
5663d80 to
470d980
Compare
|
k. I removed the somewhat ill advised "immediatelyChange" hack I'd added along the way. We may need to revisit something like that (when debounce-ing may not be wanted), but right now this puts the train back on the track. 🚋 |
Sadly, there is still a bit remaining, but this is a bit less jarring above the fold.
Also added wrapping quotes in the default suggestions.
|
k, folks. I need to stop making this more awesome, so y'all can review it! 😜 This should now have greatly improved autocomplete as well as syntax highlighting! Other than fixing bugs here, I'm keen to get this merged and do any more feature addition/improvements on other branches...so, please review soon! 😁 Cheers! |
It is, indeed, looking pretty awesome!
It would be nice if the input could be YAML-LD or CBOR-LD, as well as N-Quads. Of course, even nicer, if input could be any RDF format (and output), at least TriG, using for example RDF JS N3.js. |
Want to make some issues? 😁 |
|
I've merged this one, so we can continue to play with it at https://json-ld.org/playground/next/ It will eventually replace the current Playground, but there are a couple more things to get done yet (like the query/hash parameter handling). Having this merged, though, should make it possible to have smaller PRs going forward and to rework the rest of the site with some of this new tooling. |
See #875. |
Still early days, but definitely a more stable foundation.Completely rebuilt Playground at last!
Fomantic-UI is used for the design of this page (to be used elsewhere once the
new playground is deployed--in a separate PR).
The editor is now CodeMirror 6 and the UX integration code is using petite-vue.
You can preview the new Playground at https://playground-next.json-ld-org.pages.dev/playground/next/