Restructure files

README.md

@@ -25,11 +25,23 @@ Options:
 
 ## Templates
 
-`buildmd` uses simple HTML files as templates, replacing instances of `%key%` with the value of `key` in the metadata of the document.
+`buildmd` uses HTML files as templates. Instances of `%key%` are replaced with value of `key` from the built document.
 
-By default, `buildmd` will look for a `_template.html` file in the current working directory, unless an alternate template is specified with the `--template` or `-t` option.
+You can provide a template path with the `--template` or `-t` flag. If no template flag is provided, `buildmd`
+will look for a `_template.html` file in the current directory. If no template file is found, a simple
+default template will be used.
 
-The following metadata is available by default:
+## Stylesheets
+
+`buildmd` supports custom stylesheets. You can specify a stylesheet with the `--stylesheet` or `-s` flag.
+
+If no stylesheet is specified, `buildmd` will look for a `_style.css` file in the current directory.
+
+If no stylesheet is found, a default stylesheet will be used.
+
+## Data
+
+The following keys are always available in the template data:
 
 - `title`: The title of the document
 - `content`: The rendered markdown content
@@ -38,14 +50,6 @@ The following metadata is available by default:
 - `datetime` A localized string representing when the build occurred
 
 Additionally, any data defined in YAML frontmatter in the markdown file
-will be available for use in the template. Properties defined in frontmatter
+will be available in the template. Properties defined in frontmatter
 take precedence over the default metadata.
 
-If no template file is discovered, `buildmd` will inject a default template that includes the stylesheet, title, and content in well-structured HTML.
-
-## Styles
-
-`buildmd` will automatically look for a `_style.css` file in the current working directory, unless an alternate stylesheet is specified with the `--stylesheet` or `-s` option. The contents of the discovered stylesheet file will be available in the template as `%stylesheet%`.
-
-In the event that no stylesheet is found, `buildmd` will inject a default stylesheet.
-

bun.lock

@@ -6,10 +6,11 @@
       "dependencies": {
         "@biomejs/biome": "^1.9.4",
         "@endeavorance/emdy": "^1.0.0",
-        "marked": "^15.0.12",
+        "rehype-callouts": "^2.1.0",
         "rehype-raw": "^7.0.0",
         "rehype-slug": "^6.0.0",
         "rehype-stringify": "^10.0.1",
+        "remark-custom-heading-id": "^2.0.0",
         "remark-gfm": "^4.0.1",
         "remark-parse": "^11.0.0",
         "remark-rehype": "^11.1.2",
@@ -90,10 +91,14 @@
 
     "github-slugger": ["github-slugger@2.0.0", "", {}, "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw=="],
 
+    "hast-util-from-html": ["hast-util-from-html@2.0.3", "", { "dependencies": { "@types/hast": "^3.0.0", "devlop": "^1.1.0", "hast-util-from-parse5": "^8.0.0", "parse5": "^7.0.0", "vfile": "^6.0.0", "vfile-message": "^4.0.0" } }, "sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw=="],
+
     "hast-util-from-parse5": ["hast-util-from-parse5@8.0.3", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "devlop": "^1.0.0", "hastscript": "^9.0.0", "property-information": "^7.0.0", "vfile": "^6.0.0", "vfile-location": "^5.0.0", "web-namespaces": "^2.0.0" } }, "sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg=="],
 
     "hast-util-heading-rank": ["hast-util-heading-rank@3.0.0", "", { "dependencies": { "@types/hast": "^3.0.0" } }, "sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA=="],
 
+    "hast-util-is-element": ["hast-util-is-element@3.0.0", "", { "dependencies": { "@types/hast": "^3.0.0" } }, "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g=="],
+
     "hast-util-parse-selector": ["hast-util-parse-selector@4.0.0", "", { "dependencies": { "@types/hast": "^3.0.0" } }, "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A=="],
 
     "hast-util-raw": ["hast-util-raw@9.1.0", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "@ungap/structured-clone": "^1.0.0", "hast-util-from-parse5": "^8.0.0", "hast-util-to-parse5": "^8.0.0", "html-void-elements": "^3.0.0", "mdast-util-to-hast": "^13.0.0", "parse5": "^7.0.0", "unist-util-position": "^5.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0", "web-namespaces": "^2.0.0", "zwitch": "^2.0.0" } }, "sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw=="],
@@ -116,7 +121,7 @@
 
     "markdown-table": ["markdown-table@3.0.4", "", {}, "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw=="],
 
-    "marked": ["marked@15.0.12", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA=="],
+    "mdast-heading-id": ["mdast-heading-id@2.0.0", "", {}, "sha512-JVh0xKqsI3INPzJEqqCiuq3BGde5x6AlBTQAetLQQr9qTiDjX4dCvFhIiGmyPt1rftiHELQPI5obGphIOTXeWQ=="],
 
     "mdast-util-find-and-replace": ["mdast-util-find-and-replace@3.0.2", "", { "dependencies": { "@types/mdast": "^4.0.0", "escape-string-regexp": "^5.0.0", "unist-util-is": "^6.0.0", "unist-util-visit-parents": "^6.0.0" } }, "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg=="],
 
@@ -170,6 +175,8 @@
 
     "micromark-factory-whitespace": ["micromark-factory-whitespace@2.0.1", "", { "dependencies": { "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ=="],
 
+    "micromark-heading-id": ["micromark-heading-id@2.0.0", "", { "dependencies": { "micromark-util-symbol": "^2.0.0" } }, "sha512-TdR5WCmwuCroK8QrfX0/4w9bjj3ayN0GzatxGV/lWQKmM75kNKVZEmdvKZS4MOskARxWXu1WHdIJjMSVMBegow=="],
+
     "micromark-util-character": ["micromark-util-character@2.1.1", "", { "dependencies": { "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q=="],
 
     "micromark-util-chunked": ["micromark-util-chunked@2.0.1", "", { "dependencies": { "micromark-util-symbol": "^2.0.0" } }, "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA=="],
@@ -204,12 +211,16 @@
 
     "property-information": ["property-information@7.1.0", "", {}, "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ=="],
 
+    "rehype-callouts": ["rehype-callouts@2.1.0", "", { "dependencies": { "@types/hast": "^3.0.4", "hast-util-from-html": "^2.0.3", "hast-util-is-element": "^3.0.0", "hastscript": "^9.0.1", "unist-util-visit": "^5.0.0" } }, "sha512-Als/wlYpXg2Rs0p/yofrkSH6IQzn1xh6cvBC5BHy5JVT3lGlzUvVT8wOyVqCEgf8Eun6cQ3f47rLLoaiyLkP0w=="],
+
     "rehype-raw": ["rehype-raw@7.0.0", "", { "dependencies": { "@types/hast": "^3.0.0", "hast-util-raw": "^9.0.0", "vfile": "^6.0.0" } }, "sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww=="],
 
     "rehype-slug": ["rehype-slug@6.0.0", "", { "dependencies": { "@types/hast": "^3.0.0", "github-slugger": "^2.0.0", "hast-util-heading-rank": "^3.0.0", "hast-util-to-string": "^3.0.0", "unist-util-visit": "^5.0.0" } }, "sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A=="],
 
     "rehype-stringify": ["rehype-stringify@10.0.1", "", { "dependencies": { "@types/hast": "^3.0.0", "hast-util-to-html": "^9.0.0", "unified": "^11.0.0" } }, "sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA=="],
 
+    "remark-custom-heading-id": ["remark-custom-heading-id@2.0.0", "", { "dependencies": { "mdast-heading-id": "*", "micromark-heading-id": "*", "unist-util-visit": "^5.0.0" } }, "sha512-LpR+c4pmuBGG/zhNbebecDnpKyXU4B7bdNu6tXW83T3QWlkwUpHYyUR8uXQ/BERK9HlI5pXGLu7DjkIS07/iVQ=="],
+
     "remark-gfm": ["remark-gfm@4.0.1", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-gfm": "^3.0.0", "micromark-extension-gfm": "^3.0.0", "remark-parse": "^11.0.0", "remark-stringify": "^11.0.0", "unified": "^11.0.0" } }, "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg=="],
 
     "remark-parse": ["remark-parse@11.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-from-markdown": "^2.0.0", "micromark-util-types": "^2.0.0", "unified": "^11.0.0" } }, "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA=="],

demo/another.md

@@ -8,3 +8,16 @@ It has a list!
 
 - See?
 - Fancy!
+
+How about a callout?
+
+> [!info] This is an info callout
+> Here's some more info
+> etc
+
+> [!warning]- This is collapsible
+> And how!
+
+## A subheading
+
+This is a section!

demo/index.md

@@ -1,5 +1,6 @@
 ---
 title: Home | Demo
+and: how
 ---
 
 # Demo Data
@@ -16,7 +17,7 @@ Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapi
 
 Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
 
-## Another section
+## Another section {#customid}
 
 Tables should be a thing too
 
@@ -33,3 +34,8 @@ Tables should be a thing too
 - Need numbers
 
 <span style="font-size: 0.5rem">HTML works, still!</span>
+
+
+| hello                                       | world | hello | world | hello | world | hello | world | hello | world | hello |
+| ------------------------------------------- | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- |
+| dfjhasfdlkjahslfkjahsdlfjhasldjhasldjhasldk and such and things and whatnot and even more words in this cell so that hopefully itll wrap at some point ya dig? |       |       |       |       |       |       |       |       |       |       |

package.json

@@ -3,7 +3,11 @@
   "module": "index.ts",
   "type": "module",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.3.1",
+  "scripts": {
+    "build": ".run/build",
+    "fmt": "bunx --bun biome check --fix"
+  },
   "devDependencies": {
     "@types/bun": "latest"
   },
@@ -13,9 +17,11 @@
   "dependencies": {
     "@biomejs/biome": "^1.9.4",
     "@endeavorance/emdy": "^1.0.0",
+    "rehype-callouts": "^2.1.0",
     "rehype-raw": "^7.0.0",
     "rehype-slug": "^6.0.0",
     "rehype-stringify": "^10.0.1",
+    "remark-custom-heading-id": "^2.0.0",
     "remark-gfm": "^4.0.1",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",

src/build.ts

@@ -0,0 +1,42 @@
+import EMDY from "@endeavorance/emdy";
+import type { BunFile } from "bun";
+import { parseMarkdown } from "./markdown";
+import type { CLIOptions } from "./options";
+import { loadStylesheet } from "./stylesheet";
+import { loadTemplate, renderTemplate } from "./template";
+
+/**
+ * Build a file and return the rendered HTML string
+ * @param infile - The input file to read from
+ * @param outfile - The output file to write to
+ * @param options - The CLI options containing template and stylesheet paths
+ */
+export async function buildFile(
+  infile: BunFile,
+  options: CLIOptions,
+): Promise<string> {
+  // Load resources
+  const input = await infile.text();
+  const template = await loadTemplate(options);
+  const stylesheet = await loadStylesheet(options);
+  const { content, ...props } = EMDY.parse(input) as Record<string, unknown> & {
+    content: string;
+  };
+
+  // Render markdown
+  const html = await parseMarkdown(content);
+
+  // Prepare data
+  const title = options.title ?? props.title ?? "Untitled";
+  const templateData = {
+    content: html,
+    title,
+    stylesheet: stylesheet,
+    timestamp: new Date().toISOString(),
+    datetime: new Date().toLocaleString(),
+    ...props,
+  };
+
+  // Render template
+  return renderTemplate(template, templateData);
+}

src/defaults/default-style.css

@@ -92,16 +92,18 @@ a {
 }
 
 table {
-  border-collapse: collapse;
-  width: 100%;
-  max-width: 100%;
-  margin: 1em 0;
-  font-size: 1em;
-  background-color: var(--color-bg);
+  display: block;
   color: var(--color-text);
+  background-color: var(--color-bg);
+  width: 100%;
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+  overflow-x: auto;
+  font-size: 1em;
   border: 1px solid var(--color-text);
+  margin: 0 auto;
+  border-collapse: collapse;
 }
-
 th,
 td {
   padding: 0.5em 0.5em;
@@ -113,3 +115,247 @@ th {
   background: var(--color-bg);
   font-weight: 500;
 }
+
+/* Callout styles, from https://raw.githubusercontent.com/lin-stephanie/rehype-callouts/refs/heads/main/src/themes/obsidian/index.css */
+
+[data-callout="note"] {
+  --rc-color-light: var(--callout-note-color-light, rgb(8, 109, 221));
+  --rc-color-dark: var(--callout-note-color-dark, rgb(2, 122, 255));
+}
+
+[data-callout="abstract"] {
+  --rc-color-light: var(--callout-abstract-color-light, rgb(0, 191, 188));
+  --rc-color-dark: var(--callout-abstract-color-dark, rgb(83, 223, 221));
+}
+
+[data-callout="summary"] {
+  --rc-color-light: var(--callout-summary-color-light, rgb(0, 191, 188));
+  --rc-color-dark: var(--callout-summary-color-dark, rgb(83, 223, 221));
+}
+
+[data-callout="tldr"] {
+  --rc-color-light: var(--callout-tldr-color-light, rgb(0, 191, 188));
+  --rc-color-dark: var(--callout-tldr-color-dark, rgb(83, 223, 221));
+}
+
+[data-callout="info"] {
+  --rc-color-light: var(--callout-info-color-light, rgb(8, 109, 221));
+  --rc-color-dark: var(--callout-info-color-dark, rgb(2, 122, 255));
+}
+
+[data-callout="todo"] {
+  --rc-color-light: var(--callout-todo-color-light, rgb(8, 109, 221));
+  --rc-color-dark: var(--callout-todo-color-dark, rgb(2, 122, 255));
+}
+
+[data-callout="tip"] {
+  --rc-color-light: var(--callout-tip-color-light, rgb(0, 191, 188));
+  --rc-color-dark: var(--callout-tip-color-dark, rgb(83, 223, 221));
+}
+
+[data-callout="hint"] {
+  --rc-color-light: var(--callout-hint-color-light, rgb(0, 191, 188));
+  --rc-color-dark: var(--callout-hint-color-dark, rgb(83, 223, 221));
+}
+
+[data-callout="important"] {
+  --rc-color-light: var(--callout-important-color-light, rgb(0, 191, 188));
+  --rc-color-dark: var(--callout-important-color-dark, rgb(83, 223, 221));
+}
+
+[data-callout="success"] {
+  --rc-color-light: var(--callout-success-color-light, rgb(8, 185, 78));
+  --rc-color-dark: var(--callout-success-color-dark, rgb(68, 207, 110));
+}
+
+[data-callout="check"] {
+  --rc-color-light: var(--callout-check-color-light, rgb(8, 185, 78));
+  --rc-color-dark: var(--callout-check-color-dark, rgb(68, 207, 110));
+}
+
+[data-callout="done"] {
+  --rc-color-light: var(--callout-done-color-light, rgb(8, 185, 78));
+  --rc-color-dark: var(--callout-done-color-dark, rgb(68, 207, 110));
+}
+
+[data-callout="question"] {
+  --rc-color-light: var(--callout-question-color-light, rgb(236, 117, 0));
+  --rc-color-dark: var(--callout-question-color-dark, rgb(233, 151, 63));
+}
+
+[data-callout="help"] {
+  --rc-color-light: var(--callout-help-color-light, rgb(236, 117, 0));
+  --rc-color-dark: var(--callout-help-color-dark, rgb(233, 151, 63));
+}
+
+[data-callout="faq"] {
+  --rc-color-light: var(--callout-faq-color-light, rgb(236, 117, 0));
+  --rc-color-dark: var(--callout-faq-color-dark, rgb(233, 151, 63));
+}
+
+[data-callout="warning"] {
+  --rc-color-light: var(--callout-warning-color-light, rgb(236, 117, 0));
+  --rc-color-dark: var(--callout-warning-color-dark, rgb(233, 151, 63));
+}
+
+[data-callout="attention"] {
+  --rc-color-light: var(--callout-attention-color-light, rgb(236, 117, 0));
+  --rc-color-dark: var(--callout-attention-color-dark, rgb(233, 151, 63));
+}
+
+[data-callout="caution"] {
+  --rc-color-light: var(--callout-caution-color-light, rgb(236, 117, 0));
+  --rc-color-dark: var(--callout-caution-color-dark, rgb(233, 151, 63));
+}
+
+[data-callout="failure"] {
+  --rc-color-light: var(--callout-failure-color-light, rgb(233, 49, 71));
+  --rc-color-dark: var(--callout-failure-color-dark, rgb(251, 70, 76));
+}
+
+[data-callout="missing"] {
+  --rc-color-light: var(--callout-missing-color-light, rgb(233, 49, 71));
+  --rc-color-dark: var(--callout-missing-color-dark, rgb(251, 70, 76));
+}
+
+[data-callout="fail"] {
+  --rc-color-light: var(--callout-fail-color-light, rgb(233, 49, 71));
+  --rc-color-dark: var(--callout-fail-color-dark, rgb(251, 70, 76));
+}
+
+[data-callout="danger"] {
+  --rc-color-light: var(--callout-danger-color-light, rgb(233, 49, 71));
+  --rc-color-dark: var(--callout-danger-color-dark, rgb(251, 70, 76));
+}
+
+[data-callout="error"] {
+  --rc-color-light: var(--callout-error-color-light, rgb(233, 49, 71));
+  --rc-color-dark: var(--callout-error-color-dark, rgb(251, 70, 76));
+}
+
+[data-callout="bug"] {
+  --rc-color-light: var(--callout-bug-color-light, rgb(233, 49, 71));
+  --rc-color-dark: var(--callout-bug-color-dark, rgb(251, 70, 76));
+}
+
+[data-callout="example"] {
+  --rc-color-light: var(--callout-example-color-light, rgb(120, 82, 238));
+  --rc-color-dark: var(--callout-example-color-dark, rgb(168, 130, 255));
+}
+
+[data-callout="quote"] {
+  --rc-color-light: var(--callout-quote-color-light, rgb(158, 158, 158));
+  --rc-color-dark: var(--callout-quote-color-dark, rgb(158, 158, 158));
+}
+
+[data-callout="cite"] {
+  --rc-color-light: var(--callout-cite-color-light, rgb(158, 158, 158));
+  --rc-color-dark: var(--callout-cite-color-dark, rgb(158, 158, 158));
+}
+
+.callout {
+  --rc-color-default: #888;
+
+  overflow: hidden;
+
+  padding: 12px 12px 12px 24px;
+  border-radius: 4px;
+  margin: 1em 0;
+
+  line-height: 1.3;
+
+  mix-blend-mode: darken;
+  background-color: rgb(
+    from var(--rc-color-light, var(--rc-color-default)) r g b /
+    0.1
+  );
+}
+
+.dark .callout {
+  mix-blend-mode: lighten;
+  background-color: rgb(
+    from var(--rc-color-dark, var(--rc-color-default)) r g b /
+    0.1
+  );
+}
+
+.callout-title {
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+
+  color: var(--rc-color-light, var(--rc-color-default));
+  font-size: inherit;
+}
+
+.dark .callout-title {
+  color: var(--rc-color-dark, var(--rc-color-default));
+}
+
+.callout-title::-webkit-details-marker {
+  display: none;
+}
+
+.callout-title-icon {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+}
+
+.callout-title-text {
+  color: inherit;
+  font-weight: 600;
+}
+
+.callout-content {
+  overflow-x: auto;
+  padding: 0;
+  background-color: transparent;
+}
+
+.callout[data-collapsible="true"] .callout-title {
+  cursor: pointer;
+}
+
+.callout[data-collapsible="true"] .callout-fold-icon {
+  display: flex;
+  align-items: center;
+  padding-inline-end: 8px;
+}
+
+.callout[data-collapsible="true"] > .callout-title .callout-fold-icon svg {
+  transform: rotate(-90deg);
+  transition: transform 100ms ease-in-out;
+}
+
+.callout[data-collapsible="true"][open]
+  > .callout-title
+  .callout-fold-icon
+  svg {
+  transform: none;
+}
+
+.callout-title-icon::after,
+.callout-fold-icon::after {
+  content: "\200B";
+}
+
+.callout-title-icon svg,
+.callout-fold-icon svg {
+  width: 18px;
+  height: 18px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .callout {
+    mix-blend-mode: lighten;
+    background-color: rgb(
+      from var(--rc-color-dark, var(--rc-color-default)) r g b /
+      0.1
+    );
+  }
+
+  .callout-title {
+    color: var(--rc-color-dark, var(--rc-color-default));
+  }
+}

src/file-util.ts

@@ -0,0 +1,77 @@
+import Path from "node:path";
+import type { BunFile } from "bun";
+import { CLIError } from "./error";
+import type { CLIOptions } from "./options";
+
+/**
+ * Check if a given path is a directory
+ *
+ * @param path - The path to check
+ * @returns A promise that resolves to true if the path is a directory, false otherwise
+ */
+export async function isDirectory(path: string): Promise<boolean> {
+  const file = Bun.file(path);
+  const stat = await file.stat();
+  return stat.isDirectory();
+}
+
+/**
+ * Given a file path, attempt to read the text of the file
+ * @param filePath - The path to the file to read
+ * @returns The text content of the file
+ *
+ * @throws CLIError if the file does not exist
+ */
+export async function readFile(filePath: string): Promise<string> {
+  const file = Bun.file(filePath);
+  const exists = await file.exists();
+  if (!exists) {
+    throw new CLIError(`File ${filePath} does not exist.`);
+  }
+  return file.text();
+}
+
+/**
+ * Get the output path based on the input path and options
+ * @param inputPath - The path of the input file
+ * @param options - The CLI options containing output directory
+ * @returns The resolved output path
+ */
+async function getOutputPath(inputPath: string, options: CLIOptions) {
+  const inputDirname = Path.dirname(inputPath);
+  const inputBasename = Path.basename(inputPath);
+  const outputBasename = inputBasename.replace(/\.md$/, ".html");
+
+  if (options.outdir) {
+    const dirPath = Path.relative(options.cwd, inputDirname);
+    const outputPath = Path.join(options.outdir, dirPath, outputBasename);
+    return Path.resolve(outputPath);
+  }
+
+  return Path.join(inputDirname, outputBasename);
+}
+
+/**
+ * Get the output file based on the input path and options
+ * @param inputPath - The path of the input file
+ * @param options - The CLI options containing output file and directory
+ * @returns The BunFile object representing the output file
+ */
+export async function getOutputFile(
+  inputPath: string,
+  options: CLIOptions,
+): Promise<BunFile> {
+  // --stdout option -> Force stdout
+  if (options.stdout) {
+    return Bun.stdout;
+  }
+
+  // Exact outfile defined -> write to file
+  if (options.outfile) {
+    return Bun.file(options.outfile);
+  }
+
+  // Input path with --outdir -> calculate output path
+  const outputPath = await getOutputPath(inputPath, options);
+  return Bun.file(outputPath);
+}

src/index.ts

@@ -1,263 +1,63 @@
-import Path from "node:path";
-import { parseArgs } from "node:util";
-import EMDY from "@endeavorance/emdy";
-import { marked } from "marked";
-import defaultStylesheet from "./defaults/default-style.css" with {
-  type: "text",
-};
-import defaultTemplate from "./defaults/default-template.html" with {
-  type: "text",
-};
+import { Glob } from "bun";
+import { buildFile } from "./build";
 import { CLIError } from "./error";
-import type { BunFile } from "bun";
-import { parseMarkdown } from "./markdown";
+import { getOutputFile, isDirectory } from "./file-util";
+import { type CLIOptions, USAGE, parseCLIArgs } from "./options";
 
-const DEFAULT_TEMPLATE_FILE = "_template.html";
-const DEFAULT_STYLESHEET_FILE = "_style.css";
+async function processStdin(options: CLIOptions): Promise<void> {
+  const outfile = options.outfile ? Bun.file(options.outfile) : Bun.stdout;
+  const renderedHTML = await buildFile(Bun.stdin, options);
+  await Bun.write(outfile, renderedHTML);
+}
 
-async function readFile(filePath: string): Promise<string> {
+async function processFileAtPath(
+  filePath: string,
+  options: CLIOptions,
+): Promise<void> {
+  console.log(`Building ${filePath}...`);
   const file = Bun.file(filePath);
-  const exists = await file.exists();
-  if (!exists) {
+
+  // Ensure input files exist
+  if (!(await file.exists())) {
     throw new CLIError(`File ${filePath} does not exist.`);
   }
-  return file.text();
-}
 
-function replacePlaceholders(
-  template: string,
-  data: Record<string, unknown>,
-): string {
-  let output = template;
-  for (const [key, value] of Object.entries(data)) {
-    output = output.replace(new RegExp(`%${key}%`, "g"), String(value));
-  }
-  return output;
-}
-
-interface CLIOptions {
-  outfile: string | null;
-  outdir: string | null;
-  stdout: boolean;
-  templateFilePath: string | null;
-  stylesheetFilePath: string | null;
-  help: boolean;
-  title: string | null;
-  cwd: string;
-}
-
-function parseCLIArgs(): { options: CLIOptions; args: string[] } {
-  const { values: flags, positionals } = parseArgs({
-    args: Bun.argv.slice(2),
-    options: {
-      outfile: {
-        type: "string",
-        short: "o",
-      },
-      outdir: {
-        type: "string",
-        short: "d",
-      },
-      stdout: {
-        type: "boolean",
-      },
-      template: {
-        type: "string",
-        short: "t",
-      },
-      title: {
-        type: "string",
-        short: "T",
-      },
-      stylesheet: {
-        type: "string",
-        short: "s",
-      },
-      cwd: {
-        type: "string",
-        default: process.cwd(),
-      },
-      help: {
-        type: "boolean",
-        short: "h",
-      },
-    },
-    allowPositionals: true,
-  });
-
-  // Validation
-
-  if (positionals.length > 1 && flags.outfile) {
-    throw new CLIError("--outfile cannot be used with multiple inputs.");
-  }
-
-  if (flags.outdir && flags.outfile) {
-    throw new CLIError("--outdir and --outfile cannot be used together.");
-  }
-
-  return {
-    options: {
-      cwd: flags.cwd,
-      outfile: flags.outfile ?? null,
-      outdir: flags.outdir ?? null,
-      stdout: flags.stdout ?? false,
-      templateFilePath: flags.template ?? null,
-      stylesheetFilePath: flags.stylesheet ?? null,
-      help: flags.help ?? false,
-      title: flags.title ?? null,
-    },
-    args: positionals,
-  };
-}
-
-async function loadTemplate(options: CLIOptions): Promise<string> {
-  if (options.templateFilePath) {
-    return readFile(options.templateFilePath);
-  }
-
-  const defaultTemplateFilePath = Path.join(options.cwd, DEFAULT_TEMPLATE_FILE);
-  const defaultTemplateFile = Bun.file(defaultTemplateFilePath);
-
-  if (await defaultTemplateFile.exists()) {
-    return defaultTemplateFile.text();
-  }
-
-  return defaultTemplate;
-}
-
-async function loadStylesheet(options: CLIOptions): Promise<string> {
-  if (options.stylesheetFilePath) {
-    return readFile(options.stylesheetFilePath);
-  }
-
-  const defaultStylesheetFilePath = Path.join(
-    options.cwd,
-    DEFAULT_STYLESHEET_FILE,
-  );
-  const defaultStylesheetFile = Bun.file(defaultStylesheetFilePath);
-
-  if (await defaultStylesheetFile.exists()) {
-    return defaultStylesheetFile.text();
-  }
-
-  return defaultStylesheet;
-}
-
-async function buildFile(
-  infile: BunFile,
-  outfile: BunFile,
-  options: CLIOptions,
-): Promise<string> {
-  const input = await infile.text();
-  const template = await loadTemplate(options);
-  const stylesheet = await loadStylesheet(options);
-
-  const { content, ...props } = EMDY.parse(input) as Record<string, unknown> & {
-    content: string;
-  };
-
-  const html = await parseMarkdown(content);
-
-  const title = [options.title, props.title].find((t) => t) || "Untitled";
-
-  const replacers = {
-    content: html,
-    title,
-    stylesheet: stylesheet,
-    timestamp: new Date().toISOString(),
-    datetime: new Date().toLocaleString(),
-    ...props,
-  };
-
-  const output = replacePlaceholders(template, replacers);
-
-  Bun.write(outfile, output);
-
-  return output;
-}
-
-async function getOutputPath(inputPath: string, options: CLIOptions) {
-  const inputDirname = Path.dirname(inputPath);
-  const inputBasename = Path.basename(inputPath);
-  const outputBasename = inputBasename.replace(/\.md$/, ".html");
-
-  if (options.outdir) {
-    const dirPath = Path.relative(options.cwd, inputDirname);
-    const outputPath = Path.join(options.outdir, dirPath, outputBasename);
-    return Path.resolve(outputPath);
-  }
-
-  return Path.join(inputDirname, outputBasename);
-}
-
-async function getOutputFile(
-  inputPath: string,
-  options: CLIOptions,
-): Promise<BunFile> {
-  // --stdout option -> Force stdout
-  if (options.stdout) {
-    return Bun.stdout;
-  }
-
-  // Exact outfile defined -> write to file
-  if (options.outfile) {
-    return Bun.file(options.outfile);
-  }
-
-  // Input path with --outdir -> calculate output path
-  const outputPath = await getOutputPath(inputPath, options);
-  return Bun.file(outputPath);
+  const outfile = await getOutputFile(filePath, options);
+  const renderedHTML = await buildFile(file, options);
+  await Bun.write(outfile, renderedHTML);
 }
 
 async function main() {
   const { options, args } = parseCLIArgs();
 
   if (options.help) {
-    console.log(
-      `
-buildmd - Build markdown files to html with templates and metadata
-
-Usage:
-  buildmd file.md
-  buildmd file.md -o output.html
-  echo "some markdown" | buildmd
-
-Options:
-  --outfile, -o <file>    Output path
-  --outdir,  -d <dir>     Output directory
-  --stdout                Force output to stdout
-  --template, -t <file>   Template path (default: _template.html)
-  --stylesheet, -s <file> Stylesheet path (default: _style.css)
-  --title, -T <string>    Document title override
-  --help, -h              Show this help message
-`.trim(),
-    );
-    process.exit(0);
+    console.log(USAGE);
+    return;
   }
 
   // stdin mode
   if (args.length === 0) {
-    const outfile = options.outfile ? Bun.file(options.outfile) : Bun.stdout;
-    await buildFile(Bun.stdin, outfile, options);
-    process.exit(0);
+    return processStdin(options);
   }
 
   // file mode
-  for (const arg of args) {
-    const file = Bun.file(arg);
+  for (const inputPath of args) {
+    const isDir = await isDirectory(inputPath);
 
-    // Ensure input files exist
-    if (!(await file.exists())) {
-      throw new CLIError(`File ${arg} does not exist.`);
+    if (isDir) {
+      const dirGlob = new Glob(`${inputPath}/**/*.md`);
+      for await (const file of dirGlob.scan()) {
+        await processFileAtPath(file, options);
+      }
+    } else {
+      await processFileAtPath(inputPath, options);
     }
-
-    const outfile = await getOutputFile(arg, options);
-    await buildFile(file, outfile, options);
   }
 }
 
 try {
   await main();
+  process.exit(0);
 } catch (error) {
   if (error instanceof CLIError) {
     console.error(error.message);

src/markdown.ts

@@ -1,18 +1,44 @@
+import rehypeCallouts from "rehype-callouts";
 import rehypeRaw from "rehype-raw";
-import remarkGfm from "remark-gfm";
+import rehypeSlug from "rehype-slug";
 import rehypeStringify from "rehype-stringify";
+import { remarkHeadingId } from "remark-custom-heading-id";
+import remarkGfm from "remark-gfm";
 import remarkParse from "remark-parse";
 import remarkRehype from "remark-rehype";
-import rehypeSlug from "rehype-slug";
 import { unified } from "unified";
 
+/**
+ * Parse the provided markdown into an HTML string
+ *
+ * @param markdown - The markdown string to parse
+ * @returns The parsed HTML string in a promise
+ */
 export async function parseMarkdown(markdown: string): Promise<string> {
   const file = await unified()
+
+    // Parse markdown
     .use(remarkParse)
+
+    // Support github-flavored markdown
     .use(remarkGfm)
+
+    // Accept custom heading ids: # My heading {#custom-id}
+    .use(remarkHeadingId)
+
+    // Pass-thru HTML
     .use(remarkRehype, { allowDangerousHtml: true })
+
+    // Process to html/html
     .use(rehypeRaw)
+
+    // Apply heading IDs to headings without a custom ID
     .use(rehypeSlug)
+
+    // Support callouts/admonitions
+    .use(rehypeCallouts)
+
+    // Render to string
     .use(rehypeStringify)
     .process(markdown);
 

src/options.ts

@@ -0,0 +1,128 @@
+import { parseArgs } from "node:util";
+import { CLIError } from "./error";
+
+/**
+ * A collection of options parsed from the command line arguments.
+ */
+export interface CLIOptions {
+  /** A path to the output file */
+  outfile: string | null;
+
+  /** A path to the output directory */
+  outdir: string | null;
+
+  /** If true, force output to stdout */
+  stdout: boolean;
+
+  /** The path to the template file */
+  templateFilePath: string | null;
+
+  /** The path to the stylesheet file */
+  stylesheetFilePath: string | null;
+
+  /** If the default stylesheet should be included regardless of the provided stylesheet */
+  includeDefaultStylesheet: boolean;
+
+  /** If true, show help message */
+  help: boolean;
+
+  /** If provided, overrides the document title */
+  title: string | null;
+
+  /** If provided, overrides the current working directory (default: .) */
+  cwd: string;
+}
+
+/**
+ * Parse the command line arguments and return the options and positional arguments.
+ * @returns An object containing the parsed options and positional arguments
+ */
+export function parseCLIArgs(): { options: CLIOptions; args: string[] } {
+  const { values: flags, positionals } = parseArgs({
+    args: Bun.argv.slice(2),
+    options: {
+      outfile: {
+        type: "string",
+        short: "o",
+      },
+      outdir: {
+        type: "string",
+        short: "d",
+      },
+      stdout: {
+        type: "boolean",
+      },
+      template: {
+        type: "string",
+        short: "t",
+      },
+      title: {
+        type: "string",
+        short: "T",
+      },
+      stylesheet: {
+        type: "string",
+        short: "s",
+      },
+      "include-default-stylesheet": {
+        type: "boolean",
+        short: "S",
+      },
+      cwd: {
+        type: "string",
+        default: process.cwd(),
+      },
+      help: {
+        type: "boolean",
+        short: "h",
+      },
+    },
+    allowPositionals: true,
+  });
+
+  // == Argument Validation ==
+
+  // Outfile requires only one argument
+  if (flags.outfile && positionals.length > 1) {
+    throw new CLIError("--outfile cannot be used with multiple inputs.");
+  }
+
+  // Outfile and Outdir cannot be used together
+  if (flags.outdir && flags.outfile) {
+    throw new CLIError("--outdir and --outfile cannot be used together.");
+  }
+
+  return {
+    options: {
+      cwd: flags.cwd,
+      outfile: flags.outfile ?? null,
+      outdir: flags.outdir ?? null,
+      stdout: flags.stdout ?? false,
+      templateFilePath: flags.template ?? null,
+      stylesheetFilePath: flags.stylesheet ?? null,
+      includeDefaultStylesheet: flags["include-default-stylesheet"] ?? false,
+      help: flags.help ?? false,
+      title: flags.title ?? null,
+    },
+    args: positionals,
+  };
+}
+
+export const USAGE = `
+buildmd - Build markdown files to html with templates and metadata
+
+Usage:
+  buildmd file.md
+  buildmd file.md -o output.html
+  echo "some markdown" | buildmd
+
+Options:
+  --outfile, -o <file>              Output path
+  --outdir,  -d <dir>               Output directory
+  --stdout                          Force output to stdout
+  --template, -t <file>             Template path (default: _template.html)
+  --stylesheet, -s <file>           Stylesheet path (default: _style.css)
+  --include-default-stylesheet, -S  Extend default CSS instead of overwriting
+  --title, -T <string>              Document title override
+  --help, -h                        Show this help message
+`.trim();

src/stylesheet.ts

@@ -0,0 +1,33 @@
+import Path from "node:path";
+import DEFAULT_STYLESHEET from "./defaults/default-style.css" with {
+  type: "text",
+};
+import { readFile } from "./file-util";
+import type { CLIOptions } from "./options";
+
+const DEFAULT_STYLESHEET_FILE = "_style.css";
+
+/**
+ * Attempt to load a custom stylesheet, falling back to a default
+ * @param options - The CLI options containing the stylesheet file path
+ * @returns The stylesheet string
+ */
+export async function loadStylesheet(options: CLIOptions): Promise<string> {
+  const preamble = options.includeDefaultStylesheet ? DEFAULT_STYLESHEET : "";
+
+  if (options.stylesheetFilePath) {
+    const loadedSheet = await readFile(options.stylesheetFilePath);
+    return [preamble, loadedSheet].join("\n");
+  }
+
+  const checkStylesheetFile = Bun.file(
+    Path.join(options.cwd, DEFAULT_STYLESHEET_FILE),
+  );
+
+  if (await checkStylesheetFile.exists()) {
+    const loadedSheet = await checkStylesheetFile.text();
+    return [preamble, loadedSheet].join("\n");
+  }
+
+  return DEFAULT_STYLESHEET;
+}

src/template.ts

@@ -0,0 +1,46 @@
+import Path from "node:path";
+import DEFAULT_TEMPLATE from "./defaults/default-template.html" with {
+  type: "text",
+};
+import { readFile } from "./file-util";
+import type { CLIOptions } from "./options";
+
+const DEFAULT_TEMPLATE_FILE = "_template.html";
+
+/**
+ * Renders the provided template with the given data.
+ * @param template - The template string containing placeholders like %key%
+ * @param data - An object containing key-value pairs to replace in the template
+ * @returns The rendered string with all placeholders replaced by their corresponding values
+ */
+export function renderTemplate(
+  template: string,
+  data: Record<string, unknown>,
+): string {
+  let output = template;
+  for (const [key, value] of Object.entries(data)) {
+    output = output.replace(new RegExp(`%${key}%`, "g"), String(value));
+  }
+  return output;
+}
+
+/**
+ * Attempt to load a custom template, falling back to a default
+ * @param options - The CLI options containing the template file path
+ * @returns The template string
+ */
+export async function loadTemplate(options: CLIOptions): Promise<string> {
+  if (options.templateFilePath) {
+    return readFile(options.templateFilePath);
+  }
+
+  const checkTemplateFile = Bun.file(
+    Path.join(options.cwd, DEFAULT_TEMPLATE_FILE),
+  );
+
+  if (await checkTemplateFile.exists()) {
+    return checkTemplateFile.text();
+  }
+
+  return DEFAULT_TEMPLATE;
+}