From 16ae5821fdebdf3705de531268c5e8220c8517d2 Mon Sep 17 00:00:00 2001 From: Rokas Muningis <28229273+muningis@users.noreply.github.com> Date: Wed, 18 Dec 2024 20:27:58 +0200 Subject: [PATCH 1/2] feat: added MDX example --- mdx/content/blog/hello-world.mdx | 8 ++++++++ mdx/package.json | 12 +++++++++++ mdx/server/getContent.ts | 32 +++++++++++++++++++++++++++++ mdx/src/components/HonoInfoCard.tsx | 15 ++++++++++++++ mdx/src/index.tsx | 29 ++++++++++++++++++++++++++ mdx/tsconfig.json | 10 +++++++++ 6 files changed, 106 insertions(+) create mode 100644 mdx/content/blog/hello-world.mdx create mode 100644 mdx/package.json create mode 100644 mdx/server/getContent.ts create mode 100644 mdx/src/components/HonoInfoCard.tsx create mode 100644 mdx/src/index.tsx create mode 100644 mdx/tsconfig.json diff --git a/mdx/content/blog/hello-world.mdx b/mdx/content/blog/hello-world.mdx new file mode 100644 index 0000000..aa28409 --- /dev/null +++ b/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! + + \ No newline at end of file diff --git a/mdx/package.json b/mdx/package.json new file mode 100644 index 0000000..6da5a80 --- /dev/null +++ b/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" + } +} diff --git a/mdx/server/getContent.ts b/mdx/server/getContent.ts new file mode 100644 index 0000000..b75f55c --- /dev/null +++ b/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 { + 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 }; diff --git a/mdx/src/components/HonoInfoCard.tsx b/mdx/src/components/HonoInfoCard.tsx new file mode 100644 index 0000000..8eb5ce7 --- /dev/null +++ b/mdx/src/components/HonoInfoCard.tsx @@ -0,0 +1,15 @@ +export const HonoInfoCard = () => { + return (
+
Hono
+
Web application framework
+ +
Benefits
+
Fast
+
Lightweight
+
Built on Web Standards
+
Support for any JavaScript runtime
+ +
Interested?
+
Click here to learn more
+
) +} \ No newline at end of file diff --git a/mdx/src/index.tsx b/mdx/src/index.tsx new file mode 100644 index 0000000..2515566 --- /dev/null +++ b/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(
+

{frontmater.title}

+ +
+ ) +}); + +export default app; diff --git a/mdx/tsconfig.json b/mdx/tsconfig.json new file mode 100644 index 0000000..9e267ec --- /dev/null +++ b/mdx/tsconfig.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "target": "ESNext", + "module": "ESNext", + "moduleResolution": "Bundler", + "strict": true, + "jsx": "react-jsx", + "jsxImportSource": "hono/jsx" + } +} From 09fbfc2a220748762ac1cf9944ea5d8e306c00b6 Mon Sep 17 00:00:00 2001 From: Rokas Muningis <28229273+muningis@users.noreply.github.com> Date: Mon, 10 Feb 2025 21:23:14 +0200 Subject: [PATCH 2/2] feat: finalize MDX example --- mdx/package.json | 2 +- mdx/server/getContent.ts | 6 +++--- mdx/src/index.tsx | 11 +++++------ mdx/tsconfig.json | 3 ++- pages-stack/tsconfig.json | 16 ++++++++++++++-- 5 files changed, 25 insertions(+), 13 deletions(-) diff --git a/mdx/package.json b/mdx/package.json index 6da5a80..855c19a 100644 --- a/mdx/package.json +++ b/mdx/package.json @@ -6,7 +6,7 @@ }, "dependencies": { "hono": "4.2.4", - "mdx-bundler": "10.0.3", + "mdx-bundler": "10.1.0", "esbuild": "0.24.0" } } diff --git a/mdx/server/getContent.ts b/mdx/server/getContent.ts index b75f55c..5a5c83f 100644 --- a/mdx/server/getContent.ts +++ b/mdx/server/getContent.ts @@ -3,7 +3,7 @@ import { readFile } from "node:fs/promises"; import { join } from "node:path"; -async function getContent(...params: string[]): Promise { +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")]); @@ -11,11 +11,11 @@ async function getContent(...params: string[]): Promise { source, cwd: process.cwd(), jsxConfig: { - JsxLib: { + jsxLib: { varName: 'HonoJSX', package: 'hono/jsx', }, - JsxDom: { + jsxDom: { varName: 'HonoDOM', package: 'hono/jsx/dom', }, diff --git a/mdx/src/index.tsx b/mdx/src/index.tsx index 2515566..cb0c46a 100644 --- a/mdx/src/index.tsx +++ b/mdx/src/index.tsx @@ -4,7 +4,7 @@ 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 { getMDXComponent } from "mdx-bundler/client/jsx"; import { HonoInfoCard } from "./components/HonoInfoCard"; const app = new Hono(); @@ -15,15 +15,14 @@ const jsxComponents = { app.get("/", (c) => { return c.json({ foo: "Bar" }); -}).get("/blog/:slug", (c) => { - const { code, frontmater } = getContent("blog", c.req.param("slug")); +}).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(
-

{frontmater.title}

+

{frontmatter.title}

-
- ) + ); }); export default app; diff --git a/mdx/tsconfig.json b/mdx/tsconfig.json index 9e267ec..3afb21d 100644 --- a/mdx/tsconfig.json +++ b/mdx/tsconfig.json @@ -5,6 +5,7 @@ "moduleResolution": "Bundler", "strict": true, "jsx": "react-jsx", - "jsxImportSource": "hono/jsx" + "jsxImportSource": "hono/jsx", + "typeRoots": ["./node_modules/@types"], } } diff --git a/pages-stack/tsconfig.json b/pages-stack/tsconfig.json index 95de9ee..db1fad9 100644 --- a/pages-stack/tsconfig.json +++ b/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"] } \ No newline at end of file