feat: render .md files from packages (#2540)

<!-- please provide a detailed description of the changes made in this
pull request. -->
This PR aims to solves #2494 in order to parse `markdown` files from
packages templates. It currently uses the file extension (from
`window.location`) to detect if the content is a `md` file in a package
template.

_Although keeping the extension in the url is not a good practice for
SEO & UX (because we are using pretty URLs for some other contents and
are not consistent throughout gnoweb), This should do the work for now
as short term solution since we are gonna parse `.md` from `go` soon
with the new gnoweb design/codebase refactor (cc @gfanton)._

It also improves the package file template by removing global JS and
pushing the `source` content into the main rendering flow from
`renderer.js`.

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

@@ -7,27 +7,42 @@ function renderUsernames(raw) {
   return raw.replace(/( |\n)@([_a-z0-9]{5,16})/, "$1[@$2](/r/demo/users:$2)");
 }
 
-function parseContent(source) {
-  const { markedHighlight } = globalThis.markedHighlight;
-  const { Marked } = globalThis.marked;
-  const markedInstance = new Marked(
-    markedHighlight({
-      langPrefix: 'language-',
-      highlight(code, lang, info) {
-        if (lang === "json") {
-          try {
-            code = JSON.stringify(JSON.parse(code), null, 2);
-          } catch {}
-        }
-        const language = hljs.getLanguage(lang) ? lang : 'plaintext';
-        return hljs.highlight(code, { language }).value;
-      }
-    })
-  );
-  markedInstance.setOptions({ gfm: true });
-  const doc = new DOMParser().parseFromString(source, "text/html");
-  const contents = doc.documentElement.textContent;
-  return markedInstance.parse(contents);
+function parseContent(source, isCode) {
+  if (isCode) {
+    const highlightedCode = hljs.highlightAuto(source).value;
+    const codeElement = document.createElement("code");
+    codeElement.classList.add("hljs");
+    codeElement.innerHTML = highlightedCode;
+
+    const preElement = document.createElement("pre");
+    preElement.appendChild(codeElement);
+
+    return preElement;
+  } else {
+    const { markedHighlight } = globalThis.markedHighlight;
+    const { Marked } = globalThis.marked;
+    const markedInstance = new Marked(
+      markedHighlight({
+        langPrefix: "language-",
+        highlight(code, lang, info) {
+          if (lang === "json") {
+            try {
+              code = JSON.stringify(JSON.parse(code), null, 2);
+            } catch {
+                console.error('Error: The provided JSON code is invalid.');
+            }
+          }
+          const language = hljs.getLanguage(lang) ? lang : "plaintext";
+          return hljs.highlight(code, { language }).value;
+        },
+      })
+    );
+    markedInstance.setOptions({ gfm: true });
+    const doc = new DOMParser().parseFromString(source, "text/html");
+    const contents = doc.documentElement.textContent;
+
+    return markedInstance.parse(contents);
+  }
 }
 
 /*

gno.land/pkg/gnoweb/views/funcs.html

@@ -160,18 +160,20 @@
 <script type="text/javascript" src="/static/js/renderer.js"></script>
 <script type="text/javascript">
   function main() {
-    const parsed = parseContent(document.getElementById("source").innerHTML);
     const DOM = {
       home: document.getElementById("home"),
       realm_render: document.getElementById("realm_render"),
+      package_render: document.getElementById("package_file"),
     };
 
     for (const [key, el] of Object.entries(DOM)) {
-      if (el !== null) {
-        el.innerHTML = DOMPurify.sanitize(parsed, {
-          USE_PROFILES: { html: true },
-        });
-      }
+      if (el === null) continue;
+
+      const extension = window.location.pathname.split(".").pop();
+      const isCode = key === "package_render" && extension !== "md";
+
+      const parsed = parseContent(document.getElementById("source").innerHTML, isCode);
+      el.innerHTML = DOMPurify.sanitize(parsed, { USE_PROFILES: { html: true } });
     }
   }
 </script>

gno.land/pkg/gnoweb/views/package_file.html

@@ -11,21 +11,13 @@
       <div class="inline-list">
         <span id="logo_path"> <a href="{{ .Data.DirPath }}/">{{ .Data.DirPath }}/</a>{{ .Data.FileName }} </span>
       </div>
-
       <div id="package_file" class="container">
-        <pre><code>{{ .Data.FileContents }}</code></pre>
+        <code id="source">{{ .Data.FileContents }}</code>
       </div>
 
       {{ template "footer" }}
     </div>
     {{ template "js" .}}
-    <script type="text/javascript" src="/static/js/highlight.min.js"></script>
-    <script>
-      hljs.configure({
-        throwUnescapedHTML: true, // important to avoid inserting escaped html
-      });
-      hljs.highlightAll(); // applied to all <pre><code>...</code></pre>
-    </script>
   </body>
 </html>
 {{- end -}}