Add embed feature

README.md

@@ -1,9 +1,13 @@
 # Paste
 
+> Paste is available at [`bokub.github.io/paste`](https://bokub.github.io/paste) ⚡
+
 Paste is a client-side paste service which works **without any database** or back-end code
 
 Instead, the data is **compressed** then **stored** into a unique URL that can be decoded later. For example, [this is the HTML code of the service][example]
 
+As a result, there is no risk of data being lost or deleted. Nobody will ever be able to read your data unless you give them the link
+
 > **Note:** This project is a clone of [Topaz's paste service][topaz-example], with a reworked design and additional features such as syntax highlighting, line numbers, and more
 
 ## How it works
@@ -12,5 +16,13 @@ When you click on "Generate Link", the whole text is compressed using the [LZMA
 
 When you open a link which contains data, the fragment is decoded, decompressed, and displayed in the editor
 
-[example]: https://bokub.github.io/paste/?lang=html#XQAAAQBDBwAAAAAAAAAeCEUG0O+oKBdZ2an16qclPsVsA9xArjEo+v7wdal3Am1AsLdXzw9L86kFJA/HP3aMP31FQJprZ5BJcObQ9gG2mgk/o5ash0rBKVbyUAKaYDis7d4edb3x84EDgAqgJKRMcakcJsfTA+uQObpFvFBj4JdsawhToiw1f3rTDRF0BzhxihlMCqxRYKFQb7lOgjWPhG5X0YrIEDYqhOsPidFI+jXGLFay7Q18DShtXbTtor7HAiKD/vYrV4EftOwEhIx+9v4QNwZnLSwUscY6W6QcwG/FkV1J8/Q8a4v7E2U0yyVaWb4RXDsy2idMYak/KABWGc3fqB1PkyeWIgrSydSjnfP7ywvJA/zDwk9M1SMpFi1ick30SSbtx03xRhuH5Rd+DVIe5ZySuH9x0MxsXE+cMNOZqBn7RvAtAofFiY/suJ9rDWi8pafibzEOMF7CDPcdUSRincTXV7ID76oZPIZPJW/YMqnwSlP9lyLnByMtsTjYkCeBT2oYZrzu9E9R9ltNsGM2EbqoeqSsbiOFdpZ4tlY2MsD/Wu6NCj5Bm1jkUuObZ0Jbk9Z6XPbp5b6PaYOVo06bYs+pX/+0dV4ShqtNrNOnw4sqeN1KrjeIk8fQ+Tei7vf0hVm7682xQbk4u/kpK2ytMewaoXyh4dcyL5VCUFeVMbLgvB4F3KTrtQUQTJ3Hh1pjFUR2tCe70YCWNoiRcLD59GiyofsmUsZMH87IsvGUo/WCcVYs4RYAgnluSwrUqJ4LiJkZF/USlqYOame0T+ERXr+51/32bFnqhDiNEnF4yptuq8EH69+GwfTzglFXNyTUbu83reCkXlSjnTFRlAnBdj4MPSEfud25dnpK3xEjpnlIxl2HBBVc8Z1gwuq3TL4/7w7/oQ8MS7Y4ctWNTrLyRur8VWWQsDcz3Lw81l4h7dw/8jNyxSl08r5AOd1oZI471l76AyDIoaSh7y3n39lVmDmvJIh8S/0rNQI=
+## Embedded Paste snippets
+
+You can include code snippets into your own website by clicking the _Embed_ button and using the generated HTML code
+
+[This is what an embedded Paste snippet looks like](https://jsfiddle.net/bokub/nwtcdrph/show)
+
+Feel free to edit the `height` and `widht` attributes to your needs
+
+[example]: https://bokub.github.io/paste/?lang=html#XQAAAQA4CAAAAAAAAAAeCEUG0O+oKBdZ2an16qclPsVsA9xArjEo+v7wdal3Am1AsLdXzw9L86kFJA/HP3aMP31FQJprZ5BJcObQ9gG2mgk/o5ash0rBKVbyUAKaYDis7d4edb3x84EDgAqgJKRMcakcJsfTA+uQObpFvFBj4JdsawhToiw1f3rTDRF0BzhxihlMCqxRYKFQb7lOgjWPhG5X0YrIEDYqhOsPidFI+jXGLFay7Q18DShtXbTtor7HAiKD/vYrV4EftOwEhIx+9v4QIqbwBpmOJ7XkxV57CC6fb3sX+P/Tu/0qhTWxjOCVi1W1M9VepYdpS5pYNwcsMmpopEGli0YFXihb0sTTOQATnqsED8maqIRFGK22zsq3zfIe2tOvhKJMaz0KP6fSIWOMs2v73NpTNBaGR36IQJWdEk9EIZZPEtkqbaIlhC6eHJNoR7KURPGu47nEAP6g+D/W3cz/jQrWuXe0mA6h6EGpfFJ1cqYcklTI+snJNjPlpm8c9mzroLRzySgySW/Ln1n2GdSYTDktiJ08fxN45oRCBQ4toU6upFIuulJlhKdRNhKrv5SJrFm0iSopJ2mbnnkg4Z5TxmePFG8ZUv2SKUiahzcATDFYf1lmKRA3s89yfy573LnUzdA5R4cU+BwVP1IcuddDNy7yQW1ZI/ButV4QBGqqTdKH+khb/Z6CGfZsKTOjbZ1AoCJkBborgHdGQZgDpqcH8vlnaGYQ8ZxC53gdyfSSd1jVoNK3qZqEzmqoA/t3nd3eoKQPZ6ptGPsdW0m/9lW0mxJh4Z+t1OiNSwkZTqebsfS6rbp8Iz7FUN9AQVUa7zumDpEpupkASB8EDGl9+IZ+vhWC8NObyJi1nAmZ2IBmWsacgOcR5tpAz3wqqhavdEuHs+G11uWFwYmUyw1spE4MrzmEU1wrlL0U02d7ajE8toU6yh1c+ywG101WUailsjUxctM/28cJmzBfGHUjwYcd4Frf9hrAyptNekB8Vo6SMT5Z8uYlg6AjrFmiMtfPFmwjb2IJU2j1vqMyJtSXN1icvVc8mfwPkFwpDd59W5p9OCMFHp//1lHBOQ==
 [topaz-example]: https://topaz.github.io/paste/#XQAAAQCiAAAAAAAAAAAFFgvDUiqpf8dDPleMqfsqtbQYE28suCtDTB9iyFgGByXFmowl4KuT1zR0KewRAjxBzVDFlaaSzZrLsTZN82bHBNa68mD6Hhjf6r2befIMbSVBF8hxtQCVzmmFJTLWz8Bj6c+XGOhkHz+MPe8nEJ2py8kO0IU7g03WBV7fzp2WTp1jlaD/4fcYAA==

index.html

@@ -7,7 +7,7 @@
             content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
         />
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-        <title>Paste</title>
+        <title>Paste - Client-side paste service</title>
         <script src="https://cdn.jsdelivr.net/combine/
 npm/lzma@2.3.2/src/lzma.min.js,
 npm/slim-select@1.25.0/dist/slimselect.min.js,
@@ -38,6 +38,7 @@ npm/codemirror@5.51.0/theme/dracula.min.css
             <span class="grow"></span>
             <button onclick="generateLink('url')" type="button">Generate link</button>
             <button onclick="generateLink('markdown')" type="button">Generate markdown</button>
+            <button onclick="generateLink('iframe')" type="button">Embed</button>
         </div>
         <div id="copy" style="display: none">
             <input
@@ -45,7 +46,7 @@ npm/codemirror@5.51.0/theme/dracula.min.css
                 value="copy me"
                 id="copy-link"
                 class="grow"
-                onClick="this.setSelectionRange(0, this.value.length)"
+                onclick="this.setSelectionRange(0, this.value.length)"
             />
             <button class="clipboard" id="copy-btn" data-clipboard-target="#copy-link" type="button">Copy</button>
             <button onclick="hideCopyBar(false)" type="button">Cancel</button>

index.js

@@ -13,11 +13,16 @@ const init = () => {
 };
 
 const initCodeEditor = () => {
+    const readOnly = new URLSearchParams(window.location.search).has('readonly');
     CodeMirror.modeURL = 'https://cdn.jsdelivr.net/npm/codemirror@5.51.0/mode/%N/%N.js';
     editor = new CodeMirror(document.getElementById('editor'), {
         lineNumbers: true,
-        theme: 'dracula'
+        theme: 'dracula',
+        readOnly: readOnly
     });
+    if (readOnly) {
+        document.body.classList.add('readonly');
+    }
 };
 
 const initLangSelector = () => {
@@ -36,8 +41,7 @@ const initLangSelector = () => {
         }
     });
 
-    const urlParams = new URLSearchParams(window.location.search);
+    select.set(decodeURIComponent(new URLSearchParams(window.location.search).get('lang') || 'plain-text'));
-    select.set(decodeURIComponent(urlParams.get('lang') || 'plain-text'));
 };
 
 const initCode = () => {
@@ -97,10 +101,19 @@ const hideCopyBar = success => {
 
 // Build a shareable URL
 const buildUrl = (rawData, mode) => {
-    const url = `${location.protocol}//${location.host}${location.pathname}?lang=${encodeURIComponent(
+    const url =
-        select.selected()
+        `${location.protocol}//${location.host}${location.pathname}` +
-    )}#${rawData}`;
+        `?lang=${encodeURIComponent(select.selected())}` +
-    return mode === 'markdown' ? `[paste](${url})` : url;
+        (mode === 'iframe' ? '&readonly' : '') +
+        `#${rawData}`;
+    if (mode === 'markdown') {
+        return `[paste](${url})`;
+    }
+    if (mode === 'iframe') {
+        const height = document.getElementsByClassName('CodeMirror-sizer')[0].scrollHeight;
+        return `<iframe width="100%" height="${height}" frameborder="0" src="${url}"></iframe>`;
+    }
+    return url;
 };
 
 // Transform a compressed base64 string into a plain text string

style.css

@@ -13,6 +13,9 @@
     top: 0;
     bottom: 46px;
 }
+.readonly #editor {
+    bottom: 0;
+}
 
 .CodeMirror {
     height: 100%;
@@ -32,6 +35,11 @@
 #copy > * {
     margin: 0 6px;
 }
+
+.readonly #footer {
+    display: none;
+}
+
 #progress {
     top: 0;
     height: 3px;