adding PrismJS; fixing bugs; styling

cneill · Sep 17, 2023 · 6ee02e9 · 6ee02e9
1 parent 4b0baf4
commit 6ee02e9
Show file tree

Hide file tree

Showing 5 changed files with 181 additions and 23 deletions.
diff --git a/cmd/jsonstruct/http/static/index.css b/cmd/jsonstruct/http/static/index.css
@@ -5,9 +5,9 @@
     margin: 0;
 }
 
-.form {
-    margin: 0;
-    padding: 0;
+.form, .output-pre {
+    margin: 0 !important;
+    padding: 0 !important;
     width: 100%;
     height: 100%;
 }
@@ -25,11 +25,15 @@
 .input-container {
     grid-row: 1/2;
     grid-column: 1/2;
+    margin: 0;
+    padding: 0;
 }
 
 .output-container {
     grid-row: 1/2;
     grid-column: 2/3;
+    margin: 0;
+    padding: 0;
 }
 
 .options-container {
@@ -39,18 +43,27 @@
 }
 
 .input, .output {
+    margin: 0;
+    padding: 0;
     height: 100%;
     width: 100%;
     background-color: #000000;
     color: #ffffff;
-    /*font-size: 1.5em;*/
     font-family: Lucida Console, monospace;
     border-color: #333333;
 }
 
+.fieldset {
+    border-radius:  5px;
+}
+
+.fieldset-legend {
+    color: #000000;
+    background-color: #ffffff;
+    border-radius: 5px;
+}
+
 .button {
-    font-size: 20pt;
-    /*width: 100%;*/
     border-width: 3px;
     border-style: solid;
     border-radius: 3px;

diff --git a/cmd/jsonstruct/http/static/index.js b/cmd/jsonstruct/http/static/index.js
@@ -1,8 +1,9 @@
 function clipboardCopy() {
-    var output = document.querySelector("#output");
-    output.select();
-    output.setSelectionRange(0, 9999999);
-    navigator.clipboard.writeText(output.value);
+    let outputElem = document.querySelector("#output");
+
+    if (outputElem) {
+        navigator.clipboard.writeText(outputElem.innerText);
+    }
 }
 
 
@@ -14,22 +15,32 @@ window.onload = function() {
     });
 }
 
+document.body.addEventListener("htmx:beforeRequest", e => {
+    let inputElem = e.detail.elt.querySelector(".input");
+    if (!inputElem) {
+        return;
+    }
+
+    try {
+        JSON.parse(inputElem.value);
+    } catch (err) {
+        if (inputElem.value != "") {
+            e.preventDefault();
+        }
+    }
+});
+
 document.body.addEventListener("htmx:beforeSwap", e => {
     if (e.detail.xhr.status >= 400) {
         e.detail.shouldSwap = false;
         e.detail.isError = true;
     }
 });
 
-document.body.addEventListener("htmx:beforeRequest", e => {
-    let inputElem = e.detail.elt.querySelector(".input");
-    let inputText = inputElem.value;
+document.body.addEventListener("htmx:afterSwap", e => {
+    let codeElem = e.detail.elt.querySelector(".output");
 
-    try {
-        JSON.parse(inputText);
-    } catch (err) {
-        if (inputText != "") {
-            e.preventDefault();
-        }
+    if (codeElem) {
+        Prism.highlightElement(codeElem);
     }
 });
diff --git a/cmd/jsonstruct/http/static/prism.css b/cmd/jsonstruct/http/static/prism.css
@@ -0,0 +1,123 @@
+/* PrismJS 1.29.0
+https://prismjs.com/download.html#themes=prism-tomorrow&languages=clike+go+json+jsonp */
+code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}
+
+/**
+ * MIT License
+ * Copyright (c) 2021 Ayush Saini
+ * Holi Theme for prism.js
+ * @author Ayush Saini <@AyushCodes on Twitter>
+ */
+
+code[class*='language-'],
+pre[class*='language-'] {
+	color: #d6e7ff;
+	background: #030314;
+	text-shadow: none;
+	font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+	font-size: 1em;
+	line-height: 1.5;
+	letter-spacing: .2px;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	text-align: left;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection,
+code[class*='language-']::-moz-selection,
+code[class*='language-'] ::-moz-selection,
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection,
+code[class*='language-']::selection,
+code[class*='language-'] ::selection {
+	color: inherit;
+	background: #1d3b54;
+	text-shadow: none;
+}
+
+pre[class*='language-'] {
+	border: 1px solid #2a4555;
+	border-radius: 5px;
+	padding: 1.5em 1em;
+	margin: 1em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*='language-'] {
+	color: #f0f6f6;
+	background: #2a4555;
+	padding: 0.2em 0.3em;
+	border-radius: 0.2em;
+	box-decoration-break: clone;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #446e69;
+}
+
+.token.punctuation {
+	color: #d6b007;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #d6e7ff;
+}
+
+.token.selector,
+.token.attr-name,
+.token.builtin,
+.token.inserted {
+	color: #e60067;
+}
+
+.token.string,
+.token.char {
+	color: #49c6ec;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #ec8e01;
+	background: transparent;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #0fe468;
+}
+
+.token.function,
+.token.class-name {
+	color: #78f3e9;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #d6e7ff;
+}
diff --git a/cmd/jsonstruct/http/static/prism.js b/cmd/jsonstruct/http/static/prism.js
diff --git a/cmd/jsonstruct/http/templates/templates.gohtml b/cmd/jsonstruct/http/templates/templates.gohtml
@@ -4,6 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <title>Roam Quote Prettifier</title>
+    <link rel="stylesheet" href="/static/prism.css" type="text/css"></link>
     <link rel="stylesheet" href="/static/index.css" type="text/css"></link>
 </head>
 <body class="body">
@@ -18,19 +19,21 @@
             </div>
             <div class="output-container" id="output-container">
                 <img class="htmx-indicator" id="indicator" src="/static/loading.webp" />
-                <textarea class="output" id="output" readonly></textarea>
+                <pre class="output-pre language-go"><code id="output" class="output language-go"></code></pre>
             </div>
             <div class="options-container"
                 hx-post="/generate"
                 hx-swap="innerHTML"
                 hx-target="#output-container"
                 hx-trigger="change">
-                <fieldset name="options">
-                    <legend>Options</legend>
+                <fieldset name="options" class="fieldset">
+                    <legend class="fieldset-legend">Options</legend>
                     <label for="value_comments">Include value comments</label>
                     <input type="checkbox" name="value_comments">
+                    <br />
                     <label for="sort_fields">Sort fields</label>
                     <input type="checkbox" name="sort_fields">
+                    <br />
                     <label for="inline_structs">Inline structs</label>
                     <input type="checkbox" name="inline_structs">
                 </fieldset>
@@ -43,12 +46,13 @@
     </form>
 
     <script src="/static/htmx.min.js"></script>
+    <script src="/static/prism.js"></script>
     <script src="/static/index.js"></script>
 </body>
 </html>
 {{- end }}
 
 {{- define "generate" }}
 <img class="htmx-indicator" id="indicator" src="/static/loading.webp" />
-<textarea id="output" class="output" readonly>{{ .Generated }}</textarea>
+<pre class="output-pre language-go"><code id="output" class="output language-go">{{ .Generated }}</code></pre>
 {{- end }}