From 2e312dc7cb0ec7adb7085f9ae8879ecf0de22ba7 Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Sun, 15 Jan 2023 12:09:27 +0100
Subject: [PATCH] Universal code viewer

---
 frontend/src/components/code-example.svelte   |  8 +++++-
 .../{jsonviewer.svelte => codeviewer.svelte}  | 25 +++++++++++++------
 .../organisms/collection-detail/find.svelte   |  4 +--
 3 files changed, 26 insertions(+), 11 deletions(-)
 rename frontend/src/components/{jsonviewer.svelte => codeviewer.svelte} (62%)

diff --git a/frontend/src/components/code-example.svelte b/frontend/src/components/code-example.svelte
index 06eb5ea..ddd44a9 100644
--- a/frontend/src/components/code-example.svelte
+++ b/frontend/src/components/code-example.svelte
@@ -1,12 +1,18 @@
 <script>
+  import CodeViewer from './codeviewer.svelte';
+
   export let code = '';
+
+  let modalCode = '';
 </script>
 
-<div class="examplecode">
+<div class="examplecode" on:pointerdown={() => modalCode = code}>
   <strong>CLI command</strong>
   <code>{code}</code>
 </div>
 
+<CodeViewer bind:code={modalCode} language="js" />
+
 <style>
   .examplecode {
     border: 1px solid #ccc;
diff --git a/frontend/src/components/jsonviewer.svelte b/frontend/src/components/codeviewer.svelte
similarity index 62%
rename from frontend/src/components/jsonviewer.svelte
rename to frontend/src/components/codeviewer.svelte
index da8dbc1..c18549d 100644
--- a/frontend/src/components/jsonviewer.svelte
+++ b/frontend/src/components/codeviewer.svelte
@@ -1,22 +1,31 @@
 <script>
   import hljs from 'highlight.js/lib/core';
-  import hljsJson from 'highlight.js/lib/languages/json';
-  import 'highlight.js/styles/atom-one-dark.css';
+  import hljsJSON from 'highlight.js/lib/languages/json';
+  import hljsJavaScript from 'highlight.js/lib/languages/javascript';
   import Icon from './icon.svelte';
   import Modal from './modal.svelte';
+  import 'highlight.js/styles/atom-one-dark.css';
 
-  export let json = '';
+  export let code = '';
+  export let language = 'json';
 
-  hljs.registerLanguage('json', hljsJson);
-  $: highlighted = json ? hljs.highlight('json', json).value : '';
+  const languageNames = {
+    json: 'JSON',
+    js: 'JavaScript',
+  };
+
+  hljs.registerLanguage('json', hljsJSON);
+  hljs.registerLanguage('js', hljsJavaScript);
+
+  $: highlighted = code ? hljs.highlight(language, code).value : '';
 
   function copy() {
-    navigator.clipboard.writeText(json);
+    navigator.clipboard.writeText(code);
   }
 </script>
 
-{#if json}
-  <Modal bind:show={json} title="JSON viewer" contentPadding={false}>
+{#if code}
+  <Modal bind:show={code} title="{languageNames[language]} viewer" contentPadding={false}>
     <div class="codeblock">
       <div class="buttons">
         <button class="btn" on:click={copy}>
diff --git a/frontend/src/organisms/collection-detail/find.svelte b/frontend/src/organisms/collection-detail/find.svelte
index f1f9dfc..0e7248d 100644
--- a/frontend/src/organisms/collection-detail/find.svelte
+++ b/frontend/src/organisms/collection-detail/find.svelte
@@ -5,7 +5,7 @@
   import { input } from '../../actions';
   import ObjectGrid from '../../components/objectgrid.svelte';
   import Icon from '../../components/icon.svelte';
-  import JsonViewer from '../../components/jsonviewer.svelte';
+  import CodeViewer from '../../components/codeviewer.svelte';
 
   export let collection;
 
@@ -136,7 +136,7 @@
   </div>
 </div>
 
-<JsonViewer bind:json />
+<CodeViewer bind:code={json} language="json" />
 
 <style>
   .find {