search

orchidhq / Orchid

Build and deploy beautiful documentation sites that grow with you
https://orchid.run
GNU General Public License v3.0
513 stars 53 forks source link

Embedded Kotlin Playground #316

Closed jmfayard closed 4 years ago

jmfayard commented 4 years ago

Hello,

Not sure if that's the same thing as Plugin Proposal: Snippets at https://github.com/JavaEden/Orchid/issues/293

But it would be nice if we can embed the Kotlin Playground like on dev.to

See it in action here https://dev.to/jmfayard/comment/fh79

It is just an embedded iframe. Here is how I implemented it https://github.com/thepracticaldev/dev.to/pull/3801/files

The hard part is iframe resizing which is not done correctly on dev.to https://github.com/thepracticaldev/dev.to/issues/4011

cjbrooks12 commented 4 years ago

Nope, #293 is a slightly different problem. It's to solve the problem of code snippets in docs getting out of date, not working, or even not compiling, by having Orchid find marked snippets from unit tests to embed in docs.

That said, adding a Kotlin playground should be very easy. It would be a custom Tag, which can be added to your own project as shown in the Starter Project, but I would welcome it as a contribution to the main Orchid repo! OrchidWritersBlocks would be the place to put it.

jmfayard commented 4 years ago

@cjbrooks12 Actually the better solution would be to use the native solution developped by JetBrains. It's great for writers, because we don't have to maintain snippets in a separate website. Instead we use a normal markdown block with the language run-kotlin instead of kotlin

https://blog.jetbrains.com/kotlin/2018/04/embedding-kotlin-playground/

The pre-requisite would be to be able to load the heavy npm package lazily only when it's needed to not slow down everything.

Is that possible?

cjbrooks12 commented 4 years ago

Tags cannot add additional scripts to the page, but Components can. I've never used the embedded playground myself so I'm just now seeing the docs for the first time, and it would be a great candidate for a new Component with usage similar to the existing prism component from the OrchidSyntaxHighlighter plugin. The OrchidStarter repo has an example of a custom component too.

Adding scripts from a Component will allow you to use the async and defer attributes on the script for lazy loading (see example here). Another mode of optimization is to only add that component to a certain set of pages, such as only on the wiki, etc, which is done through Archetypes.

Also, I noticed that the CDN URL for the kotlin playground does not have the .js extension, so Orchid will complain about that right now. I've been meaning to remove that restriction, so if you would like to contribute this component here go ahead and remove this check to fix that problem. Otherwise, I'll have it removed in the 0.18.0 release.

cjbrooks12 commented 4 years ago

I'm starting to work on this now, it will be available in the next patch release.

cjbrooks12 commented 4 years ago

This has been released in 0.17.6. It is available in the OrchidSyntaxHighlighter artifact, and you can read the docs here.