feat: use mdx instead of gfm

.vscode/settings.json

@@ -17,5 +17,8 @@
   "tailwindCSS.experimental.classRegex": [
     "tw`([^`]*)",
     ["tw\\(([^\\)]*)\\)", "`([^`]*)`"]
-  ]
+  ],
+  "explorer.fileNesting.patterns": {
+    "*.mdx": "${capture}.js"
+  }
 }

deno.json

@@ -10,7 +10,7 @@
     "test:coverage:genhtml": "genhtml -o cov/html cov/cov.lcov",
     "manifest": "deno task cli manifest $(pwd)",
     "start": "deno run -A --watch=src/ src/dev.ts",
-    "build": "deno run -A src/dev.ts build",
+    "build": "deno run -A tool/compile-mdx.ts && deno run -A src/dev.ts build",
     "preview": "deno run -A src/main.ts",
     "update": "deno run -A -r https://fresh.deno.dev/update .",
     "esm": "deno run -A https://esm.sh/v135",
@@ -25,9 +25,9 @@
   "imports": {
     "$std/": "https://deno.land/std@0.211.0/",
     "$fresh/": "https://deno.land/x/fresh@1.6.1/",
-    "$gfm": "https://deno.land/x/gfm@0.3.0/mod.ts",
     "$tabler_icons/": "https://deno.land/x/tabler_icons_tsx@0.0.6/tsx/",
     "@headlessui/react": "https://esm.sh/v135/*@headlessui/react@1.7.17",
+    "@mdx-js/mdx": "npm:@mdx-js/mdx",
     "@preact/signals-core": "https://esm.sh/v135/@preact/signals-core@1.5.1",
     "@preact/signals": "https://esm.sh/v135/*@preact/signals@1.2.2",
     "preact": "https://esm.sh/v135/preact@10.19.3",

src/content/getting-started.js

@@ -0,0 +1,16 @@
+import {Fragment as _Fragment, jsx as _jsx} from "preact/jsx-runtime";
+export const title = "Getting Started";
+export const description = "Getting Started with green energy!";
+export const category = "green";
+function _createMdxContent(props) {
+  return _jsx(_Fragment, {});
+}
+export default function MDXContent(props = {}) {
+  const {wrapper: MDXLayout} = props.components || ({});
+  return MDXLayout ? _jsx(MDXLayout, {
+    ...props,
+    children: _jsx(_createMdxContent, {
+      ...props
+    })
+  }) : _createMdxContent(props);
+}

src/content/getting-started.mdx

@@ -0,0 +1,3 @@
+export const title = "Getting Started";
+export const description = "Getting Started with green energy!";
+export const category = "green";

src/content/guarantees-in-life.js

@@ -0,0 +1,29 @@
+import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "preact/jsx-runtime";
+export const title = "Taxes";
+export const description = "\"There are only two guarantees in life: death and taxes.\"";
+export const category = "monies";
+function _createMdxContent(props) {
+  const _components = {
+    h2: "h2",
+    p: "p",
+    ...props.components
+  };
+  return _jsxs(_Fragment, {
+    children: [_jsx(_components.h2, {
+      children: "Tax Rebates"
+    }), "\n", _jsx(_components.p, {
+      children: "Looking for information about tax rebates and incentives for green\nenergy?"
+    }), "\n", _jsx(_components.p, {
+      children: "Please keep in mind that, like death, taxes are a certainty, and thus\ntax evasion is illegal. If you wish to avoid taxes, please consult a\nregistered accountant rather than willy-nilly skipping them based on\nour advice."
+    })]
+  });
+}
+export default function MDXContent(props = {}) {
+  const {wrapper: MDXLayout} = props.components || ({});
+  return MDXLayout ? _jsx(MDXLayout, {
+    ...props,
+    children: _jsx(_createMdxContent, {
+      ...props
+    })
+  }) : _createMdxContent(props);
+}

src/content/guarantees-in-life.md → src/content/guarantees-in-life.mdx

@@ -1,8 +1,6 @@
----
-title: Taxes
-description: "There are only two guarantees in life: death and taxes."
-category: monies
----
+export const title = "Taxes"
+export const description = "\"There are only two guarantees in life: death and taxes.\""
+export const category = "monies"
 
 ## Tax Rebates
 

src/content/pricing.js

@@ -0,0 +1,16 @@
+import {Fragment as _Fragment, jsx as _jsx} from "preact/jsx-runtime";
+export const title = "Pricing";
+export const description = "Pricing for green energy";
+export const category = "monies";
+function _createMdxContent(props) {
+  return _jsx(_Fragment, {});
+}
+export default function MDXContent(props = {}) {
+  const {wrapper: MDXLayout} = props.components || ({});
+  return MDXLayout ? _jsx(MDXLayout, {
+    ...props,
+    children: _jsx(_createMdxContent, {
+      ...props
+    })
+  }) : _createMdxContent(props);
+}

src/content/pricing.mdx

@@ -0,0 +1,3 @@
+export const title = "Pricing";
+export const description = "Pricing for green energy";
+export const category = "monies";

src/content/programs.js

@@ -0,0 +1,16 @@
+import {Fragment as _Fragment, jsx as _jsx} from "preact/jsx-runtime";
+export const title = "Programs";
+export const description = "Green energy programs";
+export const category = "green";
+function _createMdxContent(props) {
+  return _jsx(_Fragment, {});
+}
+export default function MDXContent(props = {}) {
+  const {wrapper: MDXLayout} = props.components || ({});
+  return MDXLayout ? _jsx(MDXLayout, {
+    ...props,
+    children: _jsx(_createMdxContent, {
+      ...props
+    })
+  }) : _createMdxContent(props);
+}

src/content/programs.mdx

@@ -0,0 +1,3 @@
+export const title = "Programs";
+export const description = "Green energy programs";
+export const category = "green";

src/content/solar.js

@@ -0,0 +1,46 @@
+import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "preact/jsx-runtime";
+export const title = "Solar Energy Solutions";
+export const description = "Solar Energy is an undertapped energy resource.";
+export const category = "solar";
+function _createMdxContent(props) {
+  const _components = {
+    a: "a",
+    em: "em",
+    h2: "h2",
+    p: "p",
+    ...props.components
+  };
+  return _jsxs(_Fragment, {
+    children: [_jsx(_components.h2, {
+      children: "What is it?"
+    }), "\n", _jsx(_components.p, {
+      children: "Solar panels are useful. They collect energy from the sun, and can be placed on roofs discreetly."
+    }), "\n", _jsx(_components.h2, {
+      children: "Cost"
+    }), "\n", _jsx(_components.h2, {
+      children: "Tax Rebates"
+    }), "\n", _jsx(_components.h2, {
+      children: "Best Practices"
+    }), "\n", _jsx(_components.h2, {
+      children: "Buy Now"
+    }), "\n", _jsxs(_components.p, {
+      children: ["You can use our ", _jsx(_components.a, {
+        href: "/calculator/",
+        children: "online calculator"
+      }), " to calculate costs and buy ", _jsx(_components.em, {
+        children: "your"
+      }), " solar energy solution today!"]
+    }), "\n", _jsx(_components.h2, {
+      children: "Sources"
+    })]
+  });
+}
+export default function MDXContent(props = {}) {
+  const {wrapper: MDXLayout} = props.components || ({});
+  return MDXLayout ? _jsx(MDXLayout, {
+    ...props,
+    children: _jsx(_createMdxContent, {
+      ...props
+    })
+  }) : _createMdxContent(props);
+}

src/content/solar.md → src/content/solar.mdx

@@ -1,8 +1,6 @@
----
-title: Solar Energy Solutions
-description: Solar Energy is an undertapped energy resource.
-category: solar
----
+export const title = "Solar Energy Solutions";
+export const description = "Solar Energy is an undertapped energy resource.";
+export const category = "solar";
 
 ## What is it?
 

src/main.ts

@@ -9,5 +9,6 @@ import "$std/dotenv/load.ts";
 import { start } from "$fresh/server.ts";
 import config from "./fresh.config.ts";
 import manifest from "./fresh.gen.ts";
+import "./utils/imports.ts";
 
 await start(manifest, config);

src/routes/solutions/[slug].tsx

@@ -1,37 +1,38 @@
 import { Head } from "$fresh/runtime.ts";
 import type { Handlers, PageProps } from "$fresh/server.ts";
-import { render } from "$gfm";
 import type { JSX } from "preact";
 import { Cover } from "../../components/Cover.tsx";
 import { Meta } from "../../components/Meta.tsx";
 import type { FreshContextHelper } from "../../utils/handlers.ts";
 import { IconSolarPanel } from "../../utils/icons.ts";
-import { type SolutionPage, solutions } from "../../utils/solutions.ts";
+import type { MDXFile } from "../../utils/solutions.ts";
 
 export interface SolutionProps {
-  readonly page: SolutionPage;
+  readonly page: MDXFile;
 }
 
 export const handler: Handlers<SolutionProps> = {
-  GET(
+  async GET(
     _req: Request,
     ctx: FreshContextHelper<SolutionProps>,
-  ): Response | Promise<Response> {
-    const solution = solutions.find(
-      (page: SolutionPage): boolean => page?.slug === ctx.params["slug"],
-    );
+  ): Promise<Response> {
+    try {
+      const file: MDXFile = await import(
+        `../../content/${ctx.params["slug"]}.js`
+      );
 
-    return solution === undefined
-      ? ctx.renderNotFound()
-      : ctx.render({ page: solution });
+      return ctx.render({ page: file });
+    } catch {
+      return ctx.renderNotFound();
+    }
   },
 };
 
 export default function Solution({
   data,
 }: PageProps<SolutionProps>): JSX.Element {
-  const pageTitle = data.page.data.title;
-  const description = data.page.data.description;
+  const pageTitle = data.page.title;
+  const description = data.page.description;
 
   return (
     <>
@@ -50,14 +51,9 @@ export default function Solution({
         >
           <p class="my-4 dark:text-white">{description}</p>
         </Cover>
-        <article
-          class="p-10 prose prose-lg dark:prose-invert max-w-none prose-headings:flex prose-headings:flex-row prose-headings:items-center bg-slate-200 dark:bg-slate-800"
-          // biome-ignore lint/security/noDangerouslySetInnerHtml: required for markdown w/out a custom renderer
-          dangerouslySetInnerHTML={{
-            // TODO(lishaduck): AOT compile this using MDX.
-            __html: render(data.page.markdown ?? ""),
-          }}
-        />
+        <article class="p-10 prose prose-lg dark:prose-invert max-w-none prose-headings:flex prose-headings:flex-row prose-headings:items-center bg-slate-200 dark:bg-slate-800">
+          <data.page.default />
+        </article>
       </main>
     </>
   );

src/utils/imports.ts

@@ -0,0 +1,5 @@
+async () => await import("../content/programs.js");
+async () => await import("../content/pricing.js");
+async () => await import("../content/guarantees-in-life.js");
+async () => await import("../content/getting-started.js");
+async () => await import("../content/solar.js");

src/utils/solutions.ts

@@ -1,5 +1,4 @@
-import { extract } from "$std/front_matter/yaml.ts";
-import { join } from "$std/path/posix/join.ts";
+import type { ComponentType } from "preact";
 import { z } from "zod";
 
 export type SolutionPage = z.infer<typeof solutionPageSchema>;
@@ -18,7 +17,6 @@ const solutionDataSchema = z
 const solutionPageSchema = z
   .object({
     slug: z.string(), // The slug of the solution without a trailing slash.
-    markdown: z.string(),
     data: solutionDataSchema,
   })
   .strict()
@@ -38,19 +36,24 @@ const solutionPagesSchema = solutionPagesNullableSchema.transform(
     ),
 );
 
+export interface MDXFile extends SolutionData {
+  readonly default: ComponentType<{ readonly [x: string]: unknown }>;
+}
+
 const dir = "src/content";
 const categorySort = ["green", "monies", "solar"];
 
 export const solutions = await getSolutions();
 
 /** Get all solutions. */
 export async function getSolutions(): Promise<SolutionPages> {
-  const files = Deno.readDir(dir);
   const promises = [];
-  for await (const file of files) {
-    const slug = file.name.replace(".md", "");
-    promises.push(getSolution(slug));
+  for await (const entry of Deno.readDir(dir)) {
+    if (entry.isFile && entry.name.match(/mdx?/)) {
+      promises.push(getSolution(entry.name.replace(/\.[^\.]*$/, "")));
+    }
   }
+
   const unparsedSolutions = await Promise.all(promises);
   const solutions = solutionPagesSchema.parse(unparsedSolutions);
 
@@ -60,17 +63,15 @@ export async function getSolutions(): Promise<SolutionPages> {
       categorySort.indexOf(b.data.category),
   );
 }
+
 /** Get a solution. */
 export async function getSolution(
   slug: string,
 ): Promise<SolutionPage | undefined> {
   try {
-    const markdown = await Deno.readTextFile(join(dir, `${slug}.md`));
-    const extracted = extract(markdown);
-    const frontmatter = solutionDataSchema.parse(extracted.attrs);
-    const solution = { frontmatter, body: extracted.body };
+    const file: MDXFile = await import(`../content/${slug}.js`);
 
-    return { markdown: solution.body, data: solution.frontmatter, slug };
+    return { data: file, slug };
   } catch (error) {
     console.error(error);
     return undefined;