Switch human output to Hono JSX (#171)

MattIPv4 · web-flow · commit 4b494605f0b9 · 2026-03-10T14:24:38.000Z
diff --git a/eslint.config.js b/eslint.config.js
@@ -31,6 +31,6 @@ export default defineConfig(
     },
     {
         name: 'custom/ignores',
-        ignores: ['dist-worker/**', 'types/worker.d.ts'],
+        ignores: ['dist-worker/**', '.wrangler/**', 'types/worker.d.ts'],
     },
 );
diff --git a/src/index.ts b/src/index.ts
@@ -2,6 +2,7 @@ import * as Sentry from '@sentry/cloudflare';
 import { env } from 'cloudflare:workers';
 import { Hono } from 'hono';
 import { cors } from 'hono/cors';
+import { jsxRenderer } from 'hono/jsx-renderer';
 import { logger } from 'hono/logger';
 
 import errorRoutes from './routes/errors.ts';
@@ -11,11 +12,13 @@ import libraryRoutes from './routes/library.ts';
 import statsRoutes from './routes/stats.ts';
 import whitelistRoutes from './routes/whitelist.ts';
 import corsOptions from './utils/cors.ts';
+import layout from './utils/jsx/layout.tsx';
 
 // Create the base app
 const app = new Hono();
 if (!env.DISABLE_LOGGING) app.use('*', logger());
 app.use('*', cors(corsOptions));
+app.use('*', jsxRenderer(layout));
 
 // Load the routes
 indexRoutes(app);
diff --git a/src/utils/jsx/json.tsx b/src/utils/jsx/json.tsx
@@ -0,0 +1,40 @@
+/**
+ * Standard cdnjs HTML layout for pretty-printing JSON data.
+ *
+ * @param props Component props.
+ * @param props.json Data to be pretty-printed on the page.
+ */
+export default ({ json }: { json: unknown }) => (
+    <>
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css"
+            integrity="sha512-hasIneQUHlh06VNBe7f6ZcHmeRTLIaQWFd43YriJ0UND19bvYRauxthDg8E4eVNPm9bRUhr5JGeqH7FRFXQu5g=="
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"
+        />
+
+        <pre>
+            <code class="language-json">{JSON.stringify(json, null, 2)}</code>
+        </pre>
+
+        <script
+            src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"
+            integrity="sha512-EBLzUL8XLl+va/zAsmXwS7Z2B1F9HUHkZwyS/VKwh3S7T/U0nF4BaU29EP/ZSf6zgiIxYAnKLu6bJ8dqpmX5uw=="
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"
+        />
+        <script
+            src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/json.min.js"
+            integrity="sha512-f2/ljYb/tG4fTHu6672tyNdoyhTIpt4N1bGrBE8ZjwIgrjDCd+rljLpWCZ2Vym9PBWQy2Tl9O22Pp2rMOMvH4g=="
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"
+        />
+        <script
+            defer
+            dangerouslySetInnerHTML={{
+                __html: 'hljs.highlightAll();',
+            }}
+        />
+    </>
+);
diff --git a/src/utils/jsx/layout.tsx b/src/utils/jsx/layout.tsx
@@ -0,0 +1,24 @@
+import type { Child } from 'hono/jsx';
+
+/**
+ * Standard cdnjs HTML layout.
+ *
+ * @param props Component props.
+ * @param props.children Content to be included in the body of the page.
+ */
+export default ({ children }: { children?: Child }) => (
+    <html>
+        <head>
+            <meta name="robots" content="noindex" />
+        </head>
+        <body>
+            {children}
+            <script
+                defer
+                dangerouslySetInnerHTML={{
+                    __html: 'console.log("%cThanks for using cdnjs! 😊", "font-size: 5em; font-family: ui-sans-serif, system-ui, sans-serif; color: #e95420;");',
+                }}
+            />
+        </body>
+    </html>
+);
diff --git a/src/utils/respond.ts b/src/utils/respond.ts
@@ -1,6 +1,7 @@
 import type { Context } from 'hono';
 
 import event from './event.ts';
+import Json from './jsx/json.tsx';
 
 /**
  * Generate an HTML response with pretty-printed data.
@@ -11,22 +12,8 @@ import event from './event.ts';
 const human = (ctx: Context, data: unknown) => {
     event('human-output', ctx);
 
-    ctx.header('Content-Type', 'text/html');
     ctx.header('X-Robots-Tag', 'noindex');
-    return ctx.html(
-        '<!doctype><html>' +
-            '<head><meta name="robots" content="noindex"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css" integrity="sha256-Zd1icfZ72UBmsId/mUcagrmN7IN5Qkrvh75ICHIQVTk=" crossorigin="anonymous"/></head><body>' +
-            '<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous"></script>' +
-            '<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/json.min.js" integrity="sha256-KPdGtw3AdDen/v6+9ue/V3m+9C2lpNiuirroLsHrJZM=" crossorigin="anonymous" defer></script>' +
-            '<script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20160511/json2.min.js" integrity="sha256-Fsw5X9ZUnlJb302irkG8pKCRwerGfxSArAw22uG/QkQ=" crossorigin="anonymous"></script>' +
-            '<script defer>hljs.initHighlightingOnLoad();</script>' +
-            '<script defer>var output=' +
-            JSON.stringify(data) +
-            '; ' +
-            'document.write("<pre><code class=\'json\'>" + JSON.stringify(output,null,2) + "</code></pre>");</script>' +
-            '<script defer>console.log("%cThanks for using cdnjs! 😊", "font: 5em roboto; color: #e95420;");</script>' +
-            '</body></html>',
-    );
+    return ctx.render(Json({ json: data }));
 };
 
 /**
diff --git a/tsconfig.json b/tsconfig.json
@@ -9,11 +9,13 @@
         "erasableSyntaxOnly": true,
         "verbatimModuleSyntax": true,
         "esModuleInterop": true,
+        "jsx": "react-jsx",
+        "jsxImportSource": "hono/jsx",
         "noEmit": true,
         "strict": true,
         "skipLibCheck": true,
         "types": ["@cloudflare/vitest-pool-workers"]
     },
-    "include": ["**/*.ts", "**/*.js"],
+    "include": ["**/*.ts", "**/*.tsx", "**/*.js"],
     "exclude": ["node_modules", "dist-worker"]
 }

Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,6 @@ export default defineConfig(`
`31`	`31`	`},`
`32`	`32`	`{`
`33`	`33`	`name: 'custom/ignores',`
`34`		`- ignores: ['dist-worker/**', 'types/worker.d.ts'],`
	`34`	`+ ignores: ['dist-worker/', '.wrangler/', 'types/worker.d.ts'],`
`35`	`35`	`},`
`36`	`36`	`);`