From c815b7c125ddae0d045e8f4c7a650010cd7e5c43 Mon Sep 17 00:00:00 2001
From: Boris Kubiak <kubiakboris@gmail.com>
Date: Fri, 21 Feb 2020 15:23:26 +0100
Subject: [PATCH] Slugify lang param, use bigger font size

---
 README.md |  5 ++---
 index.js  | 24 ++++++++++++++++++------
 style.css |  1 +
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index efc653a..61a8d32 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,6 @@ 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
 
-[Format code]: # ( npx prettier --write --single-quote --tab-width=4 --print-width=120 index.js *.{html,css,md} )
-
-[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=
+[format code]: # ' npx prettier --write --single-quote --tab-width=4 --print-width=120 index.js *.{html,css,md} '
+[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=
 [topaz-example]: https://topaz.github.io/paste/#XQAAAQCiAAAAAAAAAAAFFgvDUiqpf8dDPleMqfsqtbQYE28suCtDTB9iyFgGByXFmowl4KuT1zR0KewRAjxBzVDFlaaSzZrLsTZN82bHBNa68mD6Hhjf6r2befIMbSVBF8hxtQCVzmmFJTLWz8Bj6c+XGOhkHz+MPe8nEJ2py8kO0IU7g03WBV7fzp2WTp1jlaD/4fcYAA==
diff --git a/index.js b/index.js
index ccbc482..4a71b31 100644
--- a/index.js
+++ b/index.js
@@ -21,18 +21,21 @@ const initCodeEditor = () => {
 const initLangSelector = () => {
     select = new SlimSelect({
         select: '#language',
-        data: CodeMirror.modeInfo.map(e => ({ text: e.name })),
+        data: CodeMirror.modeInfo.map(e => ({
+            text: e.name,
+            value: slugify(e.name),
+            data: { mime: e.mime, mode: e.mode }
+        })),
         showContent: 'up',
         onChange: e => {
-            let mode = CodeMirror.findModeByName(e.text);
-            mode = mode ? mode.mode : null;
-            editor.setOption('mode', mode);
-            CodeMirror.autoLoadMode(editor, mode);
+            const language = e.data || { mime: null, mode: null };
+            editor.setOption('mode', language.mime);
+            CodeMirror.autoLoadMode(editor, language.mode);
         }
     });
 
     const urlParams = new URLSearchParams(window.location.search);
-    select.set(decodeURIComponent(urlParams.get('lang') || 'Plain Text'));
+    select.set(decodeURIComponent(urlParams.get('lang') || 'plain-text'));
 };
 
 const initCode = () => {
@@ -145,4 +148,13 @@ const compress = (str, cb) => {
     );
 };
 
+const slugify = str =>
+    str
+        .toString()
+        .toLowerCase()
+        .replace(/\s+/g, '-')
+        .replace(/\+/g, '-p')
+        .replace(/#/g, '-sharp')
+        .replace(/[^\w\-]+/g, '');
+
 init();
diff --git a/style.css b/style.css
index 86285b0..99c427b 100644
--- a/style.css
+++ b/style.css
@@ -16,6 +16,7 @@
 
 .CodeMirror {
     height: 100%;
+    font-size: 13px;
 }
 
 #footer,