Allow Klipse to be easilly embedded as an iframe

[viebel]

A nice suggestion from @wilkerlucio.

Create a page klipse-embed.html that when included (presumably in an iframe) renders one or more Klipse snippets.

It would allow to embed Klipse snippets in blog posts very easily without any security concerns by embedding Klipse snippet iframe (See below).

The information about the snippets are passed as url query parameters. For example:

• snippet_language: cljs
• snippet_code: (map inc [1 2 3])
• snippet_gist: viebel/a56c879fb73c2afce0e466c43dc6a837

klipse-embed.html?snippet_language=cljs&snippet_code=(map inc [1 2 3])

It would be nice to support multiple snippets from multiple languages e.g.

klipse-embed.html?snippet_language=cljs&snippet_code=(map inc [1 2 3])&snippet_language=js&snippet_code=1+2

The snippets should be able to share code and data.

Here is how one could embed Klipse snippets in an iframe:

<iframe src="https://app.klipse.tech/klipse-embed.html?snippet_language=cljs&snippet_code=(map inc [1 2 3])"
        loading="lazy"
        width="600"
        height="400">
</iframe>

@wilkerlucio would you like to refine the requirements?

[naboo-sy]

function createParagraph() { let para = document.createElement('p'); para.textContent = 'You clicked the button!'; document.body.appendChild(para); }

/*

1. Get references to all the buttons on the page in an array format.

2. Loop through all the buttons and add a click event listener to each one.

   When any button is pressed, the createParagraph() function will be run. */

const buttons = document.querySelectorAll('button');

for (let i = 0; i < buttons.length ; i++) { buttons[i].addEventListener('click', createParagraph); }

[naboo-sy]

function create Paragraph() { let para = document.createElement('p'); para.textContent = 'You clicked the button!'; document.body.appendChild(para); }

/*

1. Get references to all the buttons on the page in an array format.
2. Loop through all the buttons and add a click event listener to each one. When any button is pressed, the create Paragraph() function will be run. */ const buttons = document.querySelectorAll('button'); for (let i = 0; i < buttons. Length ; I++) { buttons[i].addEventListener('click', create Paragraph); }

[viebel]

Hi @naboo-sy

Would you like to open a PR?