A joinComponents.js

@@ -0,0 +1,51 @@
+import { writeComponent } from "./writeComponent";
+import { unified } from "unified";
+import rehypeParse from "rehype-parse";
+import rehypeStringify from "rehype-stringify";
+import rehypeDocument from "rehype-document";
+import { writePageMain } from "./writePageMain";
+import rehypeFormat from "rehype-format";
+import { extractFrontmatter } from "./extractFrontmatter";
+
+//NOTE right now we're strinfigying, connecting the strings, then parsing for
+//more rehype processing. I'm sure there's a more correct way to do this, but
+//that can happen later
+
+export async function joinComponents(filepath) {
+  const frontmatter = await extractFrontmatter(filepath);
+  const recipe = Object.keys(frontmatter).filter((x) =>
+    ["before", "header", "footer", "after"].includes(x),
+  );
+  let union = "";
+
+  //HACK
+  if (recipe.includes("header")) {
+    union += await writeComponent(frontmatter.header, frontmatter, "header");
+  }
+  if (recipe.includes("before")) {
+    union += await writeComponent(frontmatter.before, frontmatter);
+  }
+  union += await writePageMain(filepath);
+
+  if (recipe.includes("after")) {
+    union += await writeComponent(frontmatter.after, frontmatter);
+  }
+  if (recipe.includes("footer")) {
+    union += await writeComponent(frontmatter.footer, frontmatter, "footer");
+  }
+  //HACK
+
+  const processor = unified()
+    .use(rehypeParse, { fragment: true })
+    .use(rehypeDocument, {
+      css: frontmatter.css ?? "style.css",
+      title: frontmatter?.title ?? frontmatter?.filename ?? "title",
+      link: [{ href: "favicon.png", rel: "icon", type: "image/png" }],
+    })
+    .use(rehypeFormat)
+    .use(rehypeStringify);
+
+  const output = await processor.process(union);
+  return output.value;
+}
+console.log(await joinComponents("./input/content/cookie.md"));

M writeComponent.js → writeComponent.js

@@ -4,7 +4,7 @@ import rehypeFormat from "rehype-format";
 import rehypeParse from "rehype-parse";
 import rehypeRaw from "rehype-raw";
 
-export async function writeComponent(componentName, data) {
+export async function writeComponent(componentName, data = {}) {
   const fn = await import(`./input/templates/${componentName}.jsx`);
   const jsxProcessor = unified()
     .use(rehypeParse, { fragment: true })
@@ -12,9 +12,7 @@ .use(rehypeRaw)
     .use(rehypeFormat)
     .use(rehypeStringify);
 
-  return await jsxProcessor.stringify(await jsxProcessor.run(fn.default(data)));
-  // return await jsxProcessor.run(fn.default(data));
+  return jsxProcessor.stringify(await jsxProcessor.run(fn.default(data)));
 }
 
 // console.log(await writeComponent("h2", { title: "blah" }));
-// console.log(await writeComponent("home"));