Merge branch 'issue-16'

README.md

@@ -96,3 +96,4 @@ bun start examples/dir -o output
 - Parses a title from the input files. If the first line is followed by two blank lines, a `<h1>` tag will be generated in the HTML.
 - Can define a custom output directory with the `--output`/`-o` argument.
 - Program will exit with a non-zero exit code in an error occurred.
+- Add support for Markdown horizontal rules.

examples/dir/markdown1.md

@@ -5,16 +5,22 @@ First Heading 2 ## Testing out
 --
 A TIL—Today I Learned—is the most liberating form of content I know of.
 
+***
+
 Did you just learn how to do something? Write about that.
 
+---
+
 Call it a TIL—that way you’re not promising anyone a revelation or an in-depth tutorial. You’re saying “I just figured this out: here are my notes, you may find them useful too”.
 
+___
+
 I also like the humility of this kind of content. Part of the reason I publish them is to emphasize that even with 25 years of professional experience you should still celebrate learning even the most basic of things.
 
 Second Heading 2
   -----------------------------------------
 I learned the “interact” command in pdb the other day! [Here’s my TIL](https://til.simonwillison.net/python/pdb-interact).
 
-I started publishing TILs [in April 2020](https://simonwillison.net/2020/Apr/20/self-rewriting-readme/). I’m up to 346 now, and most of them took less than 10 minutes to write. It’s such a great format for quick and satisfying online writing.
+I started publishing TILs [in April 2020](https://simonwillison.net/2020/Apr/20/self-rewriting-readme/). I’m up to **346** now, and *most of them* took less than 10 minutes to write. It’s such a great format for quick and satisfying online writing.
 
 My collection lives at https://til.simonwillison.net/—which publishes content from my [simonw/til](https://github.com/simonw/til) GitHub repository.

src/parse-markdown/index.ts

@@ -1,4 +1,8 @@
-import parseBlock from "~/parse-markdown/parseBlock";
+import parseHeadingTwo from "./parseHeadingTwo";
+import parseLink from "~/parse-markdown/parseLink";
+import parseBold from "~/parse-markdown/parseBold";
+import parseItalics from "~/parse-markdown/parseItalics";
+import parseHorizontalRule from "~/parse-markdown/parseHorizontalRule";
 
 // Convert markdown to html
 export default function parseMarkdown(md: string, fname: string) {
@@ -20,27 +24,42 @@ export default function parseMarkdown(md: string, fname: string) {
   // Clear empty paragraphs
   paragraphs = paragraphs.filter((paragraph) => paragraph !== "");
 
-  paragraphs.forEach((paragraph, i) => {
+  paragraphs.forEach((md, i) => {
     const firstLine = i === 0;
-    let lineHtml = "\t\t";
+    let isBlock = false;
+    let mdParsed = md;
 
-    const parsedParagraph = parseBlock(paragraph);
+    // Check if block element
+    const headingTwo = parseHeadingTwo(mdParsed);
+    if (headingTwo !== false) {
+      mdParsed = headingTwo as string;
+      isBlock = true;
+    }
+
+    const horizontalRule = parseHorizontalRule(mdParsed);
+    if (horizontalRule !== false) {
+      mdParsed = horizontalRule as string;
+      isBlock = true;
+    }
+
+    // Check inline elements
+    mdParsed = parseLink(mdParsed);
+    mdParsed = parseBold(mdParsed);
+    mdParsed = parseItalics(mdParsed);
 
+    let html = "\t\t";
     if (firstLine && hasTitle) {
-      lineHtml += `<h1>${parsedParagraph}</h1>`;
-      title = parsedParagraph; // Set <title> tag
+      html += `<h1>${mdParsed}</h1>`;
+      title = mdParsed; // Set <title> tag
     } else {
-      if (
-        parsedParagraph.startsWith("<h2>") &&
-        parsedParagraph.endsWith("</h2>")
-      ) {
-        lineHtml += parsedParagraph;
+      if (isBlock) {
+        html += mdParsed;
       } else {
-        lineHtml += `<p>${parsedParagraph}</p>`;
+        html += `<p>${mdParsed}</p>`;
       }
     }
 
-    bodyHtml += `${lineHtml}\n`;
+    bodyHtml += `${html}\n`;
   });
 
   let html = "";

src/parse-markdown/parseHeadingTwo.ts

@@ -1,17 +1,20 @@
-export default function parseHeadingTwo(text: string) {
+export default function parseHeadingTwo(text: string): string | boolean {
+  let changed = false;
   let html = text;
 
-  const headingTwoPattern = /^( {0,3}##\s+.*)/;
+  const headingTwoPattern = /^( {0,3}##\s+.*)/g;
   html = html.replace(headingTwoPattern, (match, headingTwoText) => {
+    changed = true;
     const headingTwo = headingTwoText.split(/##/).slice(1).join("##").trim();
     return `<h2>${headingTwo}</h2>`;
   });
 
-  const headingTwoPattern2 = /^(.*\n {0,3}-+\s*)/;
+  const headingTwoPattern2 = /^(.*\n {0,3}-+\s*)/g;
   html = html.replace(headingTwoPattern2, (match, headingTwoText) => {
+    changed = true;
     const headingTwo = headingTwoText.split(/\n/)[0].trim();
     return `<h2>${headingTwo}</h2>`;
   });
 
-  return html;
+  return !!changed ? html : false;
 }

src/parse-markdown/parseHorizontalRule.ts

@@ -0,0 +1,24 @@
+export default function parseHorizontalRule(text: string): string | boolean {
+  let changed = false;
+  let html = text;
+
+  const hrPattern1 = /^\n*\*{3,}$/g;
+  html = html.replace(hrPattern1, (match) => {
+    changed = true;
+    return `<hr />`;
+  });
+
+  const hrPattern2 = /^\n*-{3,}$/g;
+  html = html.replace(hrPattern2, (match) => {
+    changed = true;
+    return `<hr />`;
+  });
+
+  const hrPattern3 = /^\n*_{3,}$/g;
+  html = html.replace(hrPattern3, (match) => {
+    changed = true;
+    return `<hr />`;
+  });
+
+  return !!changed ? html : false;
+}

src/style.css

@@ -34,4 +34,8 @@ a {
 
 .post > *:last-child {
   margin-bottom: 0px;
+}
+
+.post > hr {
+  width: 100%
 }