curveball · evert · Jan 15, 2024 · Jan 15, 2024 · Jan 15, 2024 · Jan 15, 2024
diff --git a/changelog.md b/changelog.md
@@ -1,6 +1,13 @@
 Changelog
 =========
 
+1.0.3 (2024-01-15)
+------------------
+
+* Added a DOCTYPE so we're not in quircks mode.
+* Added a bug related to loading image assets.
+
+
 1.0.2 (2024-01-15)
 ------------------
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@curveball/browser",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Automatic API browser generator. A middleware that turns your JSON responses into HTML if accessed by a browser.",
   "type": "module",
   "exports": "./dist/index.js",

diff --git a/src/html-index.tsx b/src/html-index.tsx
@@ -41,7 +41,7 @@ export default async function generateHtmlIndex(ctx: Context, options: Options)
   }
 
   ctx.response.type = 'text/html; charset=utf-8';
-  ctx.response.body = ReactDOMServer.renderToString(
+  ctx.response.body = '<!DOCTYPE html>\n' + ReactDOMServer.renderToString(
     <App
       resourceState={state}
       options={options}

diff --git a/src/index.ts b/src/index.ts
@@ -2,6 +2,8 @@ import { Middleware, invokeMiddlewares } from '@curveball/kernel';
 import generateHtmlIndex from './html-index.js';
 import { NavigationLinkMap, Options } from './types.js';
 import staticMw from '@curveball/static';
+import { fileURLToPath } from 'node:url';
+import { join } from 'node:path';
 
 export const supportedContentTypes = [
   'application/json',
@@ -107,10 +109,12 @@ const defaultNavigationLinks: NavigationLinkMap = {
 
 export { Options } from './types.js';
 
+const assetsPath = join(fileURLToPath(new URL(import.meta.url)),'../../assets');
+
 export default function browser(options?: Partial<Options>): Middleware {
 
   const stat = staticMw({
-    staticDir: __dirname + '/../assets',
+    staticDir: assetsPath,
     pathPrefix: '/_hal-browser/assets',
     maxAge: 3600,
   });

diff --git a/test/json-test.ts b/test/json-test.ts
@@ -0,0 +1,28 @@
+import { Application } from '@curveball/kernel';
+import browser from '../src/index.js';
+import { expect } from 'chai';
+
+describe('Browser middleware integration test', () => {
+
+  it('should render a HTML page when an `Accept` header with text/html is emitted', async() => {
+
+    const app = new Application();
+    const mw = browser();
+    app.use(mw);
+
+    app.use( ctx => {
+      ctx.response.body = { hello: 'world' };
+      ctx.response.type = 'application/json';
+    });
+
+    const resp = await app.subRequest('GET', '/', {
+      Accept: 'text/html'
+    });
+
+    expect(resp.status).to.equal(200);
+    expect(resp.is('html')).to.equal(true);
+    expect(resp.body).to.contain('<html><head>');
+
+  });
+
+});
diff --git a/test/test.ts b/test/test.ts