draft: feat: added MDX example

mdx/content/blog/hello-world.mdx

@@ -0,0 +1,8 @@
+---
+title: Hello world!
+description: Example blog post using MDX on Hono webserver
+---
+
+This is markdown, but it has JSX components!
+
+<HonoInfoCard />

mdx/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "mdx",
+  "license": "MIT",
+  "scripts": {
+    "dev": "bun run --hot src/index.tsx"
+  },
+  "dependencies": {
+    "hono": "4.2.4",
+    "mdx-bundler": "10.0.3",
+    "esbuild": "0.24.0"
+  }
+}

mdx/server/getContent.ts

@@ -0,0 +1,32 @@
+import { bundleMDX } from "mdx-bundler";
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+
+
+async function getContent(...params: string[]): Promise<any> {
+  const file_path = join(process.cwd(), "content", ...params.slice(0, -1), `${params.at(-1)}.mdx`);
+  const [source] = await Promise.all([readFile(file_path, "utf-8")]);
+
+  const post = await bundleMDX({
+    source,
+    cwd: process.cwd(),
+    jsxConfig: {
+      JsxLib: {
+        varName: 'HonoJSX',
+        package: 'hono/jsx',
+      },
+      JsxDom: {
+        varName: 'HonoDOM',
+        package: 'hono/jsx/dom',
+      },
+      jsxRuntime: {
+        varName: '_jsx_runtime',
+        package: 'hono/jsx/jsx-runtime',
+      },
+    }
+  });
+
+  return post;
+}
+
+export { getContent };

mdx/src/components/HonoInfoCard.tsx

@@ -0,0 +1,15 @@
+export const HonoInfoCard = () => {
+  return (<dl>
+    <dt>Hono</dt>
+    <dd>Web application framework</dd>
+
+    <dt>Benefits</dt>
+    <dd>Fast</dd>
+    <dd>Lightweight</dd>
+    <dd>Built on Web Standards</dd>
+    <dd>Support for any JavaScript runtime</dd>
+
+    <dt>Interested?</dt>
+    <dd><a href="https://hono.dev/" rel="noreferrer nofollow">Click here to learn more</a></dd>
+  </dl>)
+}

mdx/src/index.tsx

@@ -0,0 +1,29 @@
+import { Hono } from "hono";
+import { getContent } from "../server/getContent";
+
+import * as HonoJSX from "hono/jsx";
+import * as HonoDOM from "hono/jsx/dom";
+import * as _jsx_runtime from "hono/jsx/jsx-runtime";
+import { getMDXComponent } from "mdx-bundler/client";
+import { HonoInfoCard } from "./components/HonoInfoCard";
+
+const app = new Hono();
+
+const jsxComponents = {
+  HonoInfoCard
+}
+
+app.get("/", (c) => {
+  return c.json({ foo: "Bar" });
+}).get("/blog/:slug", (c) => {
+  const { code, frontmater } = getContent("blog", c.req.param("slug"));
+  const Component = getMDXComponent(code, { HonoJSX, HonoDOM, _jsx_runtime });
+
+  return c.render(<article>
+    <h2>{frontmater.title}</h2>
+    <Component components={jsxComponents} />
+  </article>
+  )
+});
+
+export default app;

mdx/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "hono/jsx"
+  }
+}