refactor: migrate result page to ESM imports + some simplifications

Author: KristjanESPERANTO

website/result-page.js

@@ -1,3 +1,6 @@
+// eslint-disable-next-line import-x/no-unresolved
+import { marked } from "https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js";
+
 function normalizeModuleSlug(text) {
   return text
     .replaceAll(" ", "-")
@@ -17,6 +20,20 @@ function parseModuleHeadingText(line) {
   return plainHeadingMatch ? plainHeadingMatch[1].trim() : "";
 }
 
+function collectLinesUntil(lines, startIndex, isEndLine) {
+  const collected = [];
+
+  for (let lineIndex = startIndex; lineIndex < lines.length; lineIndex += 1) {
+    const line = lines[lineIndex];
+    if (isEndLine(line)) {
+      break;
+    }
+    collected.push(line);
+  }
+
+  return collected;
+}
+
 function extractGeneralNotesMarkdown(lines) {
   const startIndex = lines.findIndex(
     line => line.trim() === "## General notes"
@@ -25,40 +42,33 @@ function extractGeneralNotesMarkdown(lines) {
     return [];
   }
 
-  const notes = [];
-  for (let lineIndex = startIndex + 1; lineIndex < lines.length; lineIndex += 1) {
-    if (/^##\s+/u.test(lines[lineIndex])) {
-      break;
-    }
-    notes.push(lines[lineIndex]);
-  }
-
-  return notes;
+  return collectLinesUntil(
+    lines,
+    startIndex + 1,
+    line => /^##\s+/u.test(line)
+  );
 }
 
 function extractModuleSectionMarkdown(lines, moduleSlug) {
-  let startIndex = -1;
-
-  for (const [lineIndex, line] of lines.entries()) {
-    if (line.startsWith("### ")) {
-      const headingText = parseModuleHeadingText(line);
-      if (normalizeModuleSlug(headingText) === moduleSlug) {
-        startIndex = lineIndex;
-        break;
-      }
+  const startIndex = lines.findIndex((line) => {
+    if (!line.startsWith("### ")) {
+      return false;
     }
-  }
+
+    const headingText = parseModuleHeadingText(line);
+    return normalizeModuleSlug(headingText) === moduleSlug;
+  });
 
   if (startIndex === -1) {
     return null;
   }
 
+  const relativeEndIndex = lines
+    .slice(startIndex + 1)
+    .findIndex(line => line.startsWith("### "));
   let endIndex = lines.length;
-  for (let lineIndex = startIndex + 1; lineIndex < lines.length; lineIndex += 1) {
-    if (lines[lineIndex].startsWith("### ")) {
-      endIndex = lineIndex;
-      break;
-    }
+  if (relativeEndIndex !== -1) {
+    endIndex = startIndex + 1 + relativeEndIndex;
   }
 
   return {
@@ -77,12 +87,13 @@ function buildFilteredModuleMarkdown(markdownText, moduleSlug) {
 
   const generalNotes = extractGeneralNotesMarkdown(lines);
   const moduleHeadingLine = moduleSection.headingLine.replace(/^###\s+/u, "## ");
-  const outputLines = [moduleHeadingLine, ""];
+  const outputLines = [];
 
   if (generalNotes.length > 0) {
     outputLines.push("### General notes", "", ...generalNotes, "");
   }
 
+  outputLines.push(moduleHeadingLine, "");
   outputLines.push("### Findings", "", ...moduleSection.bodyLines);
 
   return {
@@ -95,18 +106,18 @@ function setPageTitle(title) {
   document.title = `${title} · Module hints`;
 }
 
+function setFullHintsListLink(fullResultsLink) {
+  fullResultsLink.href = "result.html";
+  fullResultsLink.textContent = "Full hints list";
+}
+
 async function loadAndDisplayMarkdown() {
   const markdownContainer = document.getElementById("markdown-container");
   const markdownFile = "result.md";
   const moduleSlug = new URLSearchParams(window.location.search).get(
     "module"
   );
   const fullResultsLink = document.getElementById("full-results-link");
-  const markedParser = window.marked?.parse;
-
-  if (typeof markedParser !== "function") {
-    throw new Error("Marked parser is not available");
-  }
 
   if (!moduleSlug) {
     fullResultsLink.remove();
@@ -127,21 +138,19 @@ async function loadAndDisplayMarkdown() {
         moduleSlug
       );
       if (filtered) {
-        markdownContainer.innerHTML = markedParser(filtered.markdown);
+        markdownContainer.innerHTML = marked.parse(filtered.markdown);
         setPageTitle(filtered.title);
-        fullResultsLink.href = "result.html";
-        fullResultsLink.textContent = "Full hints list";
+        setFullHintsListLink(fullResultsLink);
       }
       else {
         markdownContainer.innerHTML
           = "<p>No hints found for this module.</p>";
         setPageTitle("Module hints");
-        fullResultsLink.href = "result.html";
-        fullResultsLink.textContent = "Full hints list";
+        setFullHintsListLink(fullResultsLink);
       }
     }
     else {
-      markdownContainer.innerHTML = markedParser(markdownText);
+      markdownContainer.innerHTML = marked.parse(markdownText);
     }
 
     addHeadingAnchors();
@@ -179,4 +188,4 @@ function addHeadingAnchors() {
   }
 }
 
-window.onload = loadAndDisplayMarkdown;
+loadAndDisplayMarkdown();

website/result.css

@@ -51,6 +51,9 @@ body {
   line-height: 1;
   text-decoration: none;
   border: 1px solid transparent;
+  background: linear-gradient(135deg, #7b7b7b, #616161);
+  color: #fff;
+  border-color: #a9a9a9;
   box-shadow: 0 8px 20px rgb(0 0 0 / 18%);
   transition:
     transform 140ms ease,
@@ -63,6 +66,7 @@ body {
 .action-button:hover {
   text-decoration: none;
   transform: translateY(-1px);
+  background: linear-gradient(135deg, #8a8a8a, #707070);
   box-shadow: 0 10px 24px rgb(0 0 0 / 26%);
 }
 
@@ -71,16 +75,6 @@ body {
   outline-offset: 3px;
 }
 
-.action-button {
-  background: linear-gradient(135deg, #7b7b7b, #616161);
-  color: #fff;
-  border-color: #a9a9a9;
-}
-
-.action-button:hover {
-  background: linear-gradient(135deg, #8a8a8a, #707070);
-}
-
 #page-eyebrow {
   margin: 0;
   color: #a9a9a9;
@@ -120,7 +114,7 @@ h3 > a {
   color: var(--color-link);
 }
 
-a:hover {
+#markdown-container a:hover {
   text-decoration: underline;
 }
 

website/result.html

@@ -6,7 +6,6 @@
     <title>Result of the module analysis</title>
     <link rel="icon" type="image/x-icon" href="favicon.svg" />
     <link rel="stylesheet" href="result.css?v=__ASSET_VERSION__" />
-    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   </head>
   <body>
     <header id="page-header">
@@ -30,6 +29,6 @@
     <main id="page-content">
       <div id="markdown-container"></div>
     </main>
-    <script src="result-page.js?v=__ASSET_VERSION__"></script>
+    <script src="result-page.js?v=__ASSET_VERSION__" type="module"></script>
   </body>
 </html>