Use monospace font for timecodes, don't use list icons, fix expando row positioning (#356)

* Use monospace font for timecodes, don't use list icons, fix expando row positioning

* Remove `00:` hour prefix from every timecode

* Fix /transcripts rendering

Author: vcarl

src/components/Layout/MarkdownStyles.js

@@ -37,13 +37,16 @@ export const MarkdownStyles = createGlobalStyle`
     word-break: break-word;
     word-wrap: break-word;
   }
+  ul {
+    list-style: none;
+  }
   li > details {
     display: block;
   }
   summary {
     cursor: pointer;
+    margin-left: -2rem;
     user-select: none;
-    list-style: none;
     display: block;
     &::marker,
     &::-webkit-details-marker {

src/helpers/rehypeWrapTimecodes.ts

@@ -0,0 +1,83 @@
+import { visit } from "unist-util-visit";
+import type { Root, Element, Text, ElementContent } from "hast";
+
+/**
+ * Rehype plugin that wraps timecode patterns in <code> tags.
+ * Looks for list items that start with `[<timecode link>]` pattern
+ * and wraps them in <code> tags for styling.
+ *
+ * Input:  <li>[<a href="#intro">00:00</a>] Intro</li>
+ * Output: <li><code>[<a href="#intro">00:00</a>]</code> Intro</li>
+ */
+export default function rehypeWrapTimecodes() {
+  return (tree: Root) => {
+    visit(tree, "element", (node) => {
+      // Only process <li> elements
+      if (node.tagName !== "li") {
+        return;
+      }
+
+      // Check if first child is a text node starting with "["
+      if (node.children.length < 3) {
+        return;
+      }
+
+      const firstChild = node.children[0];
+      if (firstChild.type !== "text" || !firstChild.value.startsWith("[")) {
+        return;
+      }
+
+      // Check if second child is a link with a timecode pattern
+      const secondChild = node.children[1];
+      if (secondChild.type !== "element" || secondChild.tagName !== "a") {
+        return;
+      }
+
+      // Check if the link text matches timecode pattern (HH:MM:SS or MM:SS)
+      const linkText =
+        secondChild.children[0]?.type === "text"
+          ? secondChild.children[0].value
+          : "";
+      const timecodePattern = /^\d{1,2}:\d{2}(:\d{2})?$/;
+      if (!timecodePattern.test(linkText)) {
+        return;
+      }
+
+      // Check if third child is a text node starting with "]"
+      const thirdChild = node.children[2];
+      if (thirdChild.type !== "text" || !thirdChild.value.startsWith("]")) {
+        return;
+      }
+
+      // Extract and modify the bracket text nodes
+      const openingBracket: Text = {
+        type: "text",
+        value: "[",
+      };
+
+      const closingBracket: Text = {
+        type: "text",
+        value: "]",
+      };
+
+      // Update the original text nodes to remove the brackets
+      const firstTextNode = firstChild as Text;
+      firstTextNode.value = firstTextNode.value.slice(1); // Remove leading "["
+
+      const thirdTextNode = thirdChild as Text;
+      thirdTextNode.value = thirdTextNode.value.slice(1); // Remove leading "]"
+
+      // Create the <code> wrapper with the timecode content
+      const codeElement: Element = {
+        type: "element",
+        tagName: "code",
+        properties: {},
+        children: [openingBracket, secondChild, closingBracket],
+      };
+
+      // Rebuild the children array
+      const remainingContent = node.children.slice(2);
+      node.children = [codeElement, ...remainingContent];
+    });
+  };
+}

src/helpers/retrieveMdPages.ts

@@ -11,6 +11,7 @@ import rehypeSlug from "rehype-slug";
 import remarkHeadings, { hasHeadingsData } from "@vcarl/remark-headings";
 import { toString } from "mdast-util-to-string";
 import rehypeWrapFirstList from "./rehypeWrapFirstList";
+import rehypeWrapTimecodes from "./rehypeWrapTimecodes";
 
 const loadMd = async (path: string) => {
   const fullPath = join(process.cwd(), `${path}.md`);
@@ -55,6 +56,7 @@ export const processMd = (mdSource: string, options?: ProcessMdOptions) => {
       .use(remarkHeadings as ReturnType<ReturnType<typeof unified>["use"]>)
       .use(remarkRehype, { allowDangerousHtml: true })
       .use(rehypeSlug)
+      .use(rehypeWrapTimecodes)
       .use(rehypeWrapFirstList)
       .use(rehypeStringify, { allowDangerousHtml: true });
   }

src/pages/transcripts.tsx

@@ -38,7 +38,10 @@ export default function Transcripts({
             <p>
               <em>Transcript from {date}</em>
             </p>
-            <div dangerouslySetInnerHTML={{ __html: latest.html }} />
+            <div
+              className="markdown"
+              dangerouslySetInnerHTML={{ __html: latest.html }}
+            />
           </div>
         </>
       )}
@@ -68,7 +71,7 @@ export async function getStaticProps() {
         title: latest.title,
         description: latest.description,
         date: latest.date,
-        html: processMd(latest.content).html,
+        html: processMd(latest.content, { wrapFirstList: true }).html,
       },
     },
   };