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.1.0",
+    "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[]) {
+  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,28 @@
+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/jsx";
+import { HonoInfoCard } from "./components/HonoInfoCard";
+
+const app = new Hono();
+
+const jsxComponents = {
+  HonoInfoCard
+}
+
+app.get("/", (c) => {
+  return c.json({ foo: "Bar" });
+}).get("/blog/:slug", async (c) => {
+  const { code, frontmatter } = await getContent("blog", c.req.param("slug"));
+  const Component = getMDXComponent(code, { HonoJSX, HonoDOM, _jsx_runtime });
+
+  return c.render(<article>
+    <h2>{frontmatter.title}</h2>
+    <Component components={jsxComponents} />
+  </article>);
+});
+
+export default app;

mdx/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "hono/jsx",
+    "typeRoots": ["./node_modules/@types"],
+  }
+}

pages-stack/tsconfig.json

@@ -2,6 +2,18 @@
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "jsx": "react-jsx"
-  }
+    "jsx": "react-jsx",
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "typeRoots": ["./node_modules/@types"],
+    "paths": {
+      "*": ["./node_modules/*"]
+    },
+    "baseUrl": ".",
+    "isolatedModules": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
 }