Merge pull request #51 from adobe/syntax-highlight

feat: syntax highlight

Author: fkakatie

tools/log-viewer/scripts.js

@@ -1,4 +1,6 @@
 /* eslint-disable class-methods-use-this */
+import { loadPrism, highlight } from '../../utils/prism/prism.js';
+
 // utility functions
 function getFormData(form) {
   const data = {};
@@ -88,15 +90,17 @@ function calculatePastDate(days, hours, mins, now = new Date()) {
 
 // loading button management
 function showLoadingButton(button) {
-  const { width } = button.getBoundingClientRect();
+  button.disabled = true;
+  const { width, height } = button.getBoundingClientRect();
   button.style.minWidth = `${width}px`;
+  button.style.minHeight = `${height}px`;
   button.dataset.label = button.textContent;
   button.innerHTML = '<i class="symbol symbol-loading"></i>';
 }
 
 function resetLoadingButton(button) {
-  button.removeAttribute('style');
   button.textContent = button.dataset.label;
+  button.removeAttribute('style');
   button.disabled = false;
 }
 
@@ -146,18 +150,20 @@ function writeLoginMessage(owner, repo) {
 function registerAdminDetailsListener(buttons) {
   buttons.forEach((button) => {
     button.addEventListener('click', async () => {
+      showLoadingButton(button);
       const url = new URL(button.dataset.url);
       const { createModal } = await import('../../blocks/modal/modal.js');
       if (url) {
         const res = await fetch(url);
         const jsonContent = await res.json();
         const modalContent = document.createElement('div');
-        modalContent.innerHTML = `<pre>
-            ${JSON.stringify(jsonContent, null, 3)}
-          </pre>`;
+        modalContent.innerHTML = `<pre><code class="language-js">${JSON.stringify(jsonContent, null, 2)}
+          </code></pre>`;
         const { showModal } = await createModal(modalContent.childNodes);
         showModal();
+        highlight(document.querySelector('.modal'));
       }
+      resetLoadingButton(button);
     });
   });
 }
@@ -473,6 +479,8 @@ function registerListeners(doc) {
     } else updateTableError('Site URL', 'Enter a valid hlx/aem page or live URL to see logs.');
   });
 
+  TIMEFRAME_FORM.addEventListener('submit', loadPrism, { once: true });
+
   TIMEFRAME_FORM.addEventListener('reset', (e) => {
     e.preventDefault();
     SITE_FIELD.value = '';

utils/prism/prism.css

@@ -0,0 +1,98 @@
+/* PrismJS 1.29.0 (Default), slightly altered
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+json */
+
+code[class*='language-'],
+pre[class*='language-'] {
+  color: var(--color-text);
+  text-align: left;
+  white-space: pre;
+  word-break: normal;
+  word-spacing: normal;
+  word-wrap: normal;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+  -moz-tab-size: 2;
+  -o-tab-size: 2;
+  tab-size: 2;
+}
+
+pre[class*='language-'] {
+  overflow: auto;
+}
+
+.token.cdata,
+.token.comment,
+.token.doctype,
+.token.prolog {
+  color: #708090;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.token.namespace {
+  opacity: 0.8;
+}
+
+.token.property {
+  color: #4b0082;
+}
+
+.token.boolean,
+.token.constant,
+.token.deleted,
+.token.number,
+.token.symbol,
+.token.tag {
+  color: #905;
+}
+
+.token.attr-name,
+.token.builtin,
+.token.char,
+.token.inserted,
+.token.selector,
+.token.string {
+  color: #690;
+}
+
+.language-css .token.string,
+.style .token.string,
+.token.entity,
+.token.operator,
+.token.url {
+  color: #9a6e3a;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.class-name,
+.token.function {
+  color: #dd4a68;
+}
+
+.token.important,
+.token.regex,
+.token.variable {
+  color: #e90;
+}
+
+.token.bold,
+.token.important {
+  font-weight: 700;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

utils/prism/prism.js

@@ -0,0 +1,22 @@
+/* eslint-disable no-undef */
+import { loadScript, loadCSS } from '../../scripts/aem.js';
+
+/**
+ * Highlights <pre><code> element with Prism.js.
+ * @param {HTMLElement} el - Element to search for <pre><code>.
+ */
+export function highlight(el) {
+  const code = el.nodeName === 'CODE' ? el : el.querySelector('pre > code[class^="language"]');
+  if (code) Prism.highlightElement(code);
+}
+
+/**
+ * Loads Prism.js library and associated CSS for syntax highlighting.
+ * @param {Event} e - Event object containing target element to highlight, if available.
+ */
+export function loadPrism(e) {
+  loadScript('https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js').then(() => {
+    loadCSS('../../utils/prism/prism.css');
+    if (e.target) highlight(e.target);
+  });
+}