refactor: optimize hints page module rendering

Author: KristjanESPERANTO

website/result.css

@@ -91,28 +91,6 @@ body {
   line-height: 1.2;
 }
 
-.module-intro {
-  margin: 1rem 0 1.5rem;
-}
-
-.module-section-heading {
-  margin: 0 0 0.5rem;
-  font-size: 1.15rem;
-  line-height: 1.2;
-  color: #e7e7e7;
-}
-
-.module-intro ul {
-  margin: 0 0 1rem;
-  padding-left: 1.5rem;
-}
-
-#page-title {
-  margin: 0.15rem 0 0;
-  font-size: clamp(2rem, 4vw, 3.5rem);
-  line-height: 1.1;
-}
-
 a {
   text-decoration: none;
   color: inherit;

website/result.html

@@ -38,78 +38,90 @@
           .replaceAll("/", "");
       }
 
-      function filterToModule(markdownContainer, moduleSlug) {
-        if (!moduleSlug) {
-          return null;
-        }
-
-        const headings = [...markdownContainer.querySelectorAll("h3")];
-        const targetHeading = headings.find(
-          (heading) => normalizeModuleSlug(heading.textContent) === moduleSlug
+      function parseModuleHeadingText(line) {
+        const linkedHeadingMatch = line.match(
+          /^###\s+\[([^\]]+)\]\([^)]*\)\s*$/u
         );
-
-        if (!targetHeading) {
-          return null;
-        }
-
-        const section = [targetHeading];
-        let node = targetHeading.nextElementSibling;
-        while (node && node.tagName !== "H3") {
-          section.push(node);
-          node = node.nextElementSibling;
+        if (linkedHeadingMatch) {
+          return linkedHeadingMatch[1];
         }
 
-        markdownContainer.replaceChildren(...section);
-        return targetHeading.textContent;
+        const plainHeadingMatch = line.match(/^###\s+(.+)$/u);
+        return plainHeadingMatch ? plainHeadingMatch[1].trim() : "";
       }
 
-      function extractGeneralNotes(markdownContainer) {
-        const heading = [...markdownContainer.querySelectorAll("h2")].find(
-          (node) => node.textContent === "General notes"
+      function extractGeneralNotesMarkdown(lines) {
+        const startIndex = lines.findIndex(
+          (line) => line.trim() === "## General notes"
         );
-
-        if (!heading) {
+        if (startIndex === -1) {
           return [];
         }
 
         const notes = [];
-        let node = heading.nextElementSibling;
-        while (node && node.tagName !== "H2") {
-          notes.push(node.cloneNode(true));
-          const nextNode = node.nextElementSibling;
-          node.remove();
-          node = nextNode;
+        for (let i = startIndex + 1; i < lines.length; i++) {
+          if (/^##\s+/u.test(lines[i])) {
+            break;
+          }
+          notes.push(lines[i]);
         }
 
-        heading.remove();
         return notes;
       }
 
-      function injectModuleIntroSections(markdownContainer, notes) {
-        if (notes.length === 0) {
-          return;
-        }
+      function extractModuleSectionMarkdown(lines, moduleSlug) {
+        let startIndex = -1;
 
-        const headings = [...markdownContainer.querySelectorAll("h3")];
-        for (const heading of headings) {
-          const introSection = document.createElement("section");
-          introSection.className = "module-intro";
+        for (let i = 0; i < lines.length; i++) {
+          if (!lines[i].startsWith("### ")) {
+            continue;
+          }
 
-          const notesHeading = document.createElement("h4");
-          notesHeading.className = "module-section-heading";
-          notesHeading.textContent = "General notes";
+          const headingText = parseModuleHeadingText(lines[i]);
+          if (normalizeModuleSlug(headingText) === moduleSlug) {
+            startIndex = i;
+            break;
+          }
+        }
 
-          const findingsHeading = document.createElement("h4");
-          findingsHeading.className = "module-section-heading";
-          findingsHeading.textContent = "Findings";
+        if (startIndex === -1) {
+          return null;
+        }
 
-          introSection.appendChild(notesHeading);
-          for (const note of notes) {
-            introSection.appendChild(note.cloneNode(true));
+        let endIndex = lines.length;
+        for (let i = startIndex + 1; i < lines.length; i++) {
+          if (lines[i].startsWith("### ")) {
+            endIndex = i;
+            break;
           }
-          introSection.appendChild(findingsHeading);
-          heading.insertAdjacentElement("afterend", introSection);
         }
+
+        return {
+          bodyLines: lines.slice(startIndex + 1, endIndex),
+          title: parseModuleHeadingText(lines[startIndex])
+        };
+      }
+
+      function buildFilteredModuleMarkdown(markdownText, moduleSlug) {
+        const lines = markdownText.split("\n");
+        const moduleSection = extractModuleSectionMarkdown(lines, moduleSlug);
+        if (!moduleSection) {
+          return null;
+        }
+
+        const generalNotes = extractGeneralNotesMarkdown(lines);
+        const outputLines = [];
+
+        if (generalNotes.length > 0) {
+          outputLines.push("## General notes", "", ...generalNotes, "");
+        }
+
+        outputLines.push("## Findings", "", ...moduleSection.bodyLines);
+
+        return {
+          markdown: outputLines.join("\n").trim(),
+          title: moduleSection.title
+        };
       }
 
       function setPageTitle(title) {
@@ -136,23 +148,28 @@
             );
           }
           const markdownText = await response.text();
-          markdownContainer.innerHTML = marked.parse(markdownText);
+
           if (moduleSlug) {
-            const generalNotes = extractGeneralNotes(markdownContainer);
-            injectModuleIntroSections(markdownContainer, generalNotes);
-          }
-          const moduleTitle = filterToModule(markdownContainer, moduleSlug);
-          if (moduleTitle) {
-            setPageTitle(moduleTitle);
-            fullResultsLink.href = "result.html";
-            fullResultsLink.textContent = "Full hints list";
-          } else if (moduleSlug) {
-            markdownContainer.innerHTML =
-              "<p>No hints found for this module.</p>";
-            setPageTitle("Module hints");
-            fullResultsLink.href = "result.html";
-            fullResultsLink.textContent = "Full hints list";
+            const filtered = buildFilteredModuleMarkdown(
+              markdownText,
+              moduleSlug
+            );
+            if (!filtered) {
+              markdownContainer.innerHTML =
+                "<p>No hints found for this module.</p>";
+              setPageTitle("Module hints");
+              fullResultsLink.href = "result.html";
+              fullResultsLink.textContent = "Full hints list";
+            } else {
+              markdownContainer.innerHTML = marked.parse(filtered.markdown);
+              setPageTitle(filtered.title);
+              fullResultsLink.href = "result.html";
+              fullResultsLink.textContent = "Full hints list";
+            }
+          } else {
+            markdownContainer.innerHTML = marked.parse(markdownText);
           }
+
           addHeadingAnchors();
         } catch (error) {
           console.error("Error loading markdown:", error);
@@ -165,10 +182,6 @@
         const markdownContainer = document.getElementById("markdown-container");
         const headings = markdownContainer.querySelectorAll("h1, h2, h3, h4");
         headings.forEach((heading) => {
-          if (heading.classList.contains("module-section-heading")) {
-            return;
-          }
-
           const anchorId = normalizeModuleSlug(heading.textContent);
           const anchor = document.createElement("a");
           anchor.id = anchorId;