search

JetBrains / kotlin-playground

Self-contained component to embed in websites for running Kotlin code
https://jetbrains.github.io/kotlin-playground/examples/
Apache License 2.0
452 stars 80 forks source link

Embed Kotlin Playground on dev.to #64

Open jmfayard opened 5 years ago

jmfayard commented 5 years ago

Hello,

I'm adding support for embedding kotlin playground in https://dev.to

One issue I'm having is that I would like to prevent people from using not the embedded link (from the medium tab) but the link to edit the playground.

Is there a way to distinguish which url is embedded or not?

https://github.com/thepracticaldev/dev.to/pull/3801

AlexanderPrendota commented 5 years ago

Hi! :) Could you please add more description?

jmfayard commented 5 years ago

@AlexanderPrendota This kotlinplayground.html is rendered like this:

image

I want to prevent the people writing on http://dev.to to make the mistake to use the wrong link when they embed a code snippet.

Let say the URLs were instead something like

Then I could raise an error if they try to use the second URL

AlexanderPrendota commented 5 years ago

Hey. Ah, got it.

Your link https://pl.kotl.in/owreUFFUG?embedded&theme=darcula&from=3&to=6 will redirect on https://play.kotlinlang.org/embed?short=owreUFFUG&embedded&theme=darcula&from=3&to=6. You can prevent people by /embed url.

Does it possible?

jmfayard commented 5 years ago

That solves my problem, thank you @AlexanderPrendota

jmfayard commented 5 years ago

Hello @AlexanderPrendota
My pull-request for embedding Kotlin Playground snippets is now live in dev.to

For example you can see at this URL

image

I have two remaining problems:

1) The iframe is vertically too short. Is there a way I can compute the height of the iframe? Medium.com does it fine

2) I have an escaping problem in my query string. When I write a post with {% kotlin https://pl.kotl.in/m2LoR1KM5?theme=darcula&from=6&to=16 %}, then Ruby on Rails (which powers dev.to) insists on not allowing & inside the iframe URL. 

<iframe src="https://play.kotlinlang.org/embed?short=owreUFFUG&amp;from&amp;to&amp;theme=darcula&amp;readOnly" allowtransparency="true" scrolling="no" frameborder="0"></iframe>

I have found in Wikipedia https://en.wikipedia.org/wiki/Query_string#Web_forms that the W3C recommands that all web servers support query Elements separated by a semi-colon ; in addition of &. Here it means the two URLs would be equivalent:

Could this be supported by the Kotlin Playground? That would solve my problem

AlexanderPrendota commented 5 years ago

The problem due to iframe resizing. We will have a look. Thanks!

AlexanderPrendota commented 5 years ago

@jmfayard Do you know dev.to has API for iframe resizing? I can send some events on editor changes. for examples, emdedly platform provides resizing for the Medium : https://docs.embed.ly/v1.0/docs/provider-height-resizing

AlexanderPrendota commented 4 years ago

@jmfayard Any updates here?

jmfayard commented 4 years ago

@AlexanderPrendota I have asked the dev.to team right now here https://github.com/thepracticaldev/dev.to/issues/4011

AlexanderPrendota commented 4 years ago

Thanks!