css, replacer: style <details> in content text

2 files changed, 49 insertions, 0 deletions

diff --git a/src/static/css/site.css b/src/static/css/site.css
index f67326e2..d9b3bff0 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1227,6 +1227,14 @@ ul.image-details li {
   box-shadow: 1px 2px 6px 5px #04040460;
 }
 
+.commentary-entry-body summary {
+  list-style-position: outside;
+}
+
+.commentary-entry-body summary > span {
+  color: var(--primary-color);
+}
+
 .commentary-art {
   float: right;
   width: 30%;
diff --git a/src/util/replacer.js b/src/util/replacer.js
index 9034cb9d..a11e9c8f 100644
--- a/src/util/replacer.js
+++ b/src/util/replacer.js
@@ -596,6 +596,46 @@ export function postprocessHeadings(inputNodes) {
   return outputNodes;
 }
 
+export function postprocessSummaries(inputNodes) {
+  const outputNodes = [];
+
+  for (const node of inputNodes) {
+    if (node.type !== 'text') {
+      outputNodes.push(node);
+      continue;
+    }
+
+    const summaryRegexp = /<summary>(.*)<\/summary>/g;
+
+    let textContent = '';
+
+    let match = null, parseFrom = 0;
+    while (match = summaryRegexp.exec(node.data)) {
+      textContent += node.data.slice(parseFrom, match.index);
+      parseFrom = match.index + match[0].length;
+
+      // We're wrapping the contents of the <summary> with a <span>.
+      // This means we have to add the closing </span> where the summary ends.
+      textContent += `<summary><span>`;
+      textContent += match[1];
+      textContent += `</span></summary>`;
+    }
+
+    if (parseFrom !== node.data.length) {
+      textContent += node.data.slice(parseFrom);
+    }
+
+    outputNodes.push({
+      type: 'text',
+      data: textContent,
+      i: node.i,
+      iEnd: node.iEnd,
+    });
+  }
+
+  return outputNodes;
+}
+
 export function postprocessExternalLinks(inputNodes) {
   const outputNodes = [];
 
@@ -671,6 +711,7 @@ export function parseInput(input) {
     let output = parseNodes(input, 0);
     output = postprocessImages(output);
     output = postprocessHeadings(output);
+    output = postprocessSummaries(output);
     output = postprocessExternalLinks(output);
     return output;
   } catch (errorNode) {