feat(gnoweb): source code viewer improvements

gno.land/pkg/gnoweb/static/css/app.css

@@ -825,6 +825,13 @@ code.hljs {
   color: var(--highlight-variable, #54790d);
 }
 
+.hljs-link {
+  text-decoration: none; /* Remove underline by default */
+}
+.hljs-link:hover {
+  text-decoration: underline; /* Add underline on hover */
+}
+
 .hljs-meta,
 .hljs-selector-pseudo {
   color: var(--highlight-keyword, #015692);

gno.land/pkg/gnoweb/static/js/renderer.js

@@ -7,12 +7,87 @@ function renderUsernames(raw) {
   return raw.replace(/( |\n)@([_a-z0-9]{5,16})/, "$1[@$2](/r/demo/users:$2)");
 }
 
+// Create text nodes for the quotes with class names
+const createQuoteNode = (quote) => {
+  const node = document.createElement("a");
+  node.textContent = quote;
+  node.className = "hljs-string";
+  return node;
+};
+
 function parseContent(source, isCode) {
   if (isCode) {
+    // replace & with & in code blocks
+    source = source.replace(/&/g, "&");
+
     const highlightedCode = hljs.highlightAuto(source).value;
+
+    // Split the highlighted code into lines
+    const lines = highlightedCode.split('\n');
+
+    // Add line numbers to each line
+    const numberedLines = lines.map((line, index) => {
+      return `<asp class="number">${index + 1}</asp> ${line}`;
+    });
+
+    // Join the lines back into a single string
+    const numberedCode = numberedLines.join('\n');
+
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(numberedCode, "text/html");
+
+    // get all span nodes of class hljs-keyword and a value of 'import'
+    const nodes = doc.querySelectorAll("span.hljs-keyword");
+    for (const node of nodes) {
+      if (node.textContent === "import") {
+        let nextNode = node.nextSibling;
+        while (true) {
+          if (nextNode) {
+            if (nextNode.textContent.includes(")")) {
+              break;
+            } else if (nextNode.textContent.includes("/p") || nextNode.textContent.includes("/r")) {
+              const nextSibling = nextNode.nextSibling;
+              const cleanPath = nextNode.textContent.replace(/(https?:\/\/)?gno\.land\/p\//, "/p/").replace(/^"|"$/g, '');
+              // Extract the text content
+              const textContent = nextNode.textContent;
+
+              // Split the text content into parts
+              const openingQuote = textContent.charAt(0);
+              const mainContent = textContent.slice(1, -1);
+              const closingQuote = textContent.charAt(textContent.length - 1);
+
+              // Create text nodes for the quotes
+              const openingQuoteNode = createQuoteNode(openingQuote);
+              const closingQuoteNode = createQuoteNode(closingQuote);
+
+              // Create a span for the main content and add the hljs-link class
+              const mainContentNode = document.createElement("a");
+              mainContentNode.className = "hljs-link";
+              mainContentNode.textContent = mainContent;
+              mainContentNode.href = cleanPath;
+
+              // Create a document fragment to hold the new nodes
+              const fragment = document.createElement("span");
+              fragment.appendChild(openingQuoteNode);
+              fragment.appendChild(mainContentNode);
+              fragment.appendChild(closingQuoteNode);
+
+              // Replace the original node with the new nodes
+              nextNode.replaceWith(fragment);
+              nextNode = nextSibling;
+              continue;
+            }
+          } else {
+            break;
+          }
+          nextNode = nextNode.nextSibling;
+        }
+      }
+    }
+
     const codeElement = document.createElement("code");
     codeElement.classList.add("hljs");
-    codeElement.innerHTML = highlightedCode;
+    codeElement.innerHTML = doc.body.innerHTML;
 
     const preElement = document.createElement("pre");
     preElement.appendChild(codeElement);