Attempt to make the spec look stylish

Author: jdesrosiers

package-lock.json

@@ -0,0 +1,75 @@
+import { text } from "mdast-builder";
+import { visit } from "unist-util-visit";
+
+
+/**
+ * RFC 2119 / RFC 8174 keywords
+ * Order matters: longer phrases first
+ */
+const KEYWORDS = [
+  "MUST NOT",
+  "NOT REQUIRED",
+  "SHALL NOT",
+  "SHOULD NOT",
+  "NOT RECOMMENDED",
+  "MUST",
+  "REQUIRED",
+  "SHALL",
+  "SHOULD",
+  "RECOMMENDED",
+  "MAY",
+  "OPTIONAL"
+];
+
+const KEYWORD_REGEX = new RegExp(`(?:${KEYWORDS.map((k) => k.replace(" ", "\\s")).join("|")})`, "gm");
+
+const skipNodes = new Set(["code", "inlineCode", "link", "definition", "html"]);
+
+export default function remarkRfc2119() {
+  return (tree) => {
+    visit(tree, "text", (node, index, parent) => {
+      // Do not touch code, inlineCode, links, or HTML
+      if (skipNodes.has(parent.type)) {
+        return;
+      }
+
+      const value = node.value;
+      let match;
+      let lastIndex = 0;
+      const children = [];
+
+      KEYWORD_REGEX.lastIndex = 0;
+
+      while ((match = KEYWORD_REGEX.exec(value)) !== null) {
+        const [keyword] = match;
+        const start = match.index;
+        const end = start + keyword.length;
+
+        if (start > lastIndex) {
+          children.push(text(value.slice(lastIndex, start)));
+        }
+
+        const keywordNode = text(keyword);
+        keywordNode.data = {
+          hName: "span",
+          hProperties: {
+            className: ["rfc2119", keyword.toLowerCase().replace(/\s+/g, "-")]
+          }
+        };
+        children.push(keywordNode);
+
+        lastIndex = end;
+      }
+
+      if (children.length === 0) {
+        return;
+      }
+
+      if (lastIndex < value.length) {
+        children.push(text(value.slice(lastIndex)));
+      }
+
+      parent.children.splice(index, 1, ...children);
+    });
+  };
+}

remark/remark-rfc2119.js

@@ -25,6 +25,17 @@ const remarkTableOfContents = (options) => (tree, file) => {
     const headingText = nodeToString(headingNode);
 
     if (headingText === options.heading) {
+      headingNode.data = {
+        hProperties: {
+          className: ["toc-heading"]
+        }
+      };
+      tableOfContents.data = {
+        hProperties: {
+          className: ["toc"]
+        }
+      };
+
       insertTableOfContents = () => {
         parent.children.splice(index + 1, 0, tableOfContents);
       };
@@ -37,7 +48,7 @@ const remarkTableOfContents = (options) => (tree, file) => {
     while (headingNode.depth > currentDepth) {
       const newList = list("unordered");
       listStack.push(newList);
-      currentList.children.push(newList);
+      currentList.children.push(listItem(newList));
       currentList = newList;
       currentDepth++;
     }

remark/remark-table-of-contents.js

@@ -18,9 +18,17 @@ export default {
     [rehypeHighlightCodeLines, { showLineNumbers: true }],
     rehypeLinkTransformer,
     [rehypeDocument, {
-      css: [
-        "https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css",
-        "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/styles/github-dark-dimmed.min.css"
+      link: [
+        {
+          rel: "stylesheet",
+          href: "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/styles/github-dark-dimmed.min.css",
+          media: "(prefers-color-scheme: dark)"
+        },
+        {
+          rel: "stylesheet",
+          href: "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/styles/github.css",
+          media: "(prefers-color-scheme: light)"
+        }
       ],
       style: readFileSync(resolve(import.meta.dirname, "spec.css"), "utf8")
     }],

specs/.remarkrc-build.js

@@ -5,6 +5,7 @@ import remarkCodeTitles from "../remark/remark-code-titles.js";
 import remarkHeadings from "../remark/remark-headings.js";
 import remarkReferenceLinks from "../remark/remark-reference-links.js";
 import remarkTableOfContents from "../remark/remark-table-of-contents.js";
+import remarkRfc2119 from "../remark/remark-rfc2119.js";
 
 
 export default {
@@ -37,6 +38,7 @@ export default {
       ]
     }],
     remarkFlexibleContainers,
-    remarkCodeTitles
+    remarkCodeTitles,
+    remarkRfc2119
   ]
 };