fix headers

Author: cometkim

scripts/extract-indices.mjs

@@ -9,74 +9,15 @@ import glob from "glob";
 import path from "path";
 import fs from "fs";
 import { URL } from 'url';
-import remarkRehype from "remark-rehype";
-import rehypeSlug from "rehype-slug";
-import rehypeStringify from "rehype-stringify";
 
 import { defaultProcessor } from "./markdown.js";
 
-const remarkCodeblocks = options => (tree, file) => {
-  const { children } = tree;
-  const codeblocks = {};
-
-  const formatter = value => {
-    // Strip newlines and weird spacing
-    return value
-      .replace(/\n/g, " ")
-      .replace(/\s+/g, " ")
-      .replace(/\(\s+/g, "(")
-      .replace(/\s+\)/g, ")");
-  };
-
-  children.forEach(child => {
-    if (child.type === "code" && child.value) {
-      const { meta, lang } = child;
-      if (meta === "sig" && lang === "re") {
-        if (codeblocks[lang] == null) {
-          codeblocks[lang] = [];
-        }
-        codeblocks[lang].push(formatter(child.value));
-      }
-    }
-  });
-
-  file.data = Object.assign({}, file.data, { codeblocks });
-};
-
-const rehypeHeaders = options => (tree, file) => {
-  const headers = [];
-  let mainHeader;
-  tree.children.forEach(child => {
-    if (child.type === "heading" && child.depth === 1) {
-      if (child.children.length > 0) {
-        mainHeader = child.children.map(element => element.value).join("");
-      }
-    }
-    if (child.type === "heading" && child.depth === 2) {
-      if (child.children.length > 0) {
-        const id = child.data.id || "";
-        const name = child.children.map(element => element.value).join("");
-        headers.push({ name, href: id });
-      }
-    }
-  });
-
-  file.data = Object.assign({}, file.data, { headers, mainHeader });
-};
-
-const processor = defaultProcessor
-  .use(remarkCodeblocks)
-  .use(remarkRehype)
-  .use(rehypeSlug)
-  .use(rehypeHeaders)
-  .use(rehypeStringify)
-
 const pathname = new URL('.', import.meta.url).pathname;
 const __dirname = process.platform !== 'win32' ? pathname : pathname.substring(1)
 
 const processFile = filepath => {
   const content = fs.readFileSync(filepath, "utf8");
-  const result = processor.processSync(content);
+  const result = defaultProcessor.processSync(content);
 
   const pagesPath = path.resolve("./pages");
   const relFilepath = path.relative(pagesPath, filepath);

scripts/extract-tocs.mjs

@@ -54,28 +54,6 @@ const collapseHeaderChildren = (children) => {
   }, "");
 };
 
-const headers = (options) => (tree, file) => {
-  const headers = [];
-  let mainHeader;
-  tree.children.forEach((child) => {
-    if (child.type === "heading" && child.depth === 1) {
-      if (child.children.length > 0) {
-        mainHeader = collapseHeaderChildren(child.children);
-      }
-    }
-    if (child.type === "heading" && child.depth === 2) {
-      if (child.children.length > 0) {
-        // Take the id generated from remark-slug
-        const headerValue = collapseHeaderChildren(child.children);
-        const id = child.data.id || "";
-        headers.push({ name: headerValue, href: id });
-      }
-    }
-  });
-
-  file.data = Object.assign({}, file.data, { headers, mainHeader });
-};
-
 // sidebarJson: { [category: string]: array<plain_filename_without_ext> }
 const processFile = (filepath, sidebarJson = {}) => {
   const content = fs.readFileSync(filepath, "utf8");

scripts/markdown.js

@@ -1,17 +1,72 @@
 import { unified } from "unified";
 import remarkParse from "remark-parse";
-import remarkStringify from "remark-stringify";
 import remarkGfm from "remark-gfm";
 import remarkFrontmatter from "remark-frontmatter";
+import remarkRehype from "remark-rehype";
+import rehypeSlug from "rehype-slug";
+import rehypeStringify from "rehype-stringify";
 import { matter } from "vfile-matter";
 
-export const vfileMatter = options => (tree, file) => {
+const remarkVfileMatter = options => (tree, file) => {
   matter(file);
 };
 
+const remarkCodeblocks = options => (tree, file) => {
+  const { children } = tree;
+  const codeblocks = {};
+
+  const formatter = value => {
+    // Strip newlines and weird spacing
+    return value
+      .replace(/\n/g, " ")
+      .replace(/\s+/g, " ")
+      .replace(/\(\s+/g, "(")
+      .replace(/\s+\)/g, ")");
+  };
+
+  children.forEach(child => {
+    if (child.type === "code" && child.value) {
+      const { meta, lang } = child;
+      if (meta === "sig" && lang === "re") {
+        if (codeblocks[lang] == null) {
+          codeblocks[lang] = [];
+        }
+        codeblocks[lang].push(formatter(child.value));
+      }
+    }
+  });
+
+  Object.assign(file.data, { codeblocks });
+};
+
+const rehypeHeaders = options => (tree, file) => {
+  const headers = [];
+  let mainHeader;
+  tree.children.forEach(child => {
+    if (child.tagName === "h1") {
+      if (child.children.length > 0) {
+        mainHeader = child.children.map(element => element.value).join("");
+      }
+    }
+    if (child.tagName === "h2") {
+      if (child.children.length > 0) {
+        const id = child.properties.id || "";
+        const name = child.children.map(element => element.value).join("");
+        headers.push({ name, href: id });
+      }
+    }
+  });
+
+  Object.assign(file.data, { headers, mainHeader });
+};
+
 export const defaultProcessor = unified()
   .use(remarkParse)
-  .use(remarkStringify)
   .use(remarkGfm)
   .use(remarkFrontmatter, [{ type: 'yaml', marker: '-' }])
-  .use(vfileMatter);
+  .use(remarkVfileMatter)
+  .use(remarkCodeblocks)
+  .use(remarkRehype)
+  .use(rehypeSlug)
+  .use(rehypeHeaders)
+  .use(rehypeStringify);