move the landing / dashboard page to an external HTML file

pmcelhaney · Oct 11, 2022 · 058d5f3 · 058d5f3
1 parent 68d2807
commit 058d5f3
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 37 deletions.
diff --git a/src/client/index.html b/src/client/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Counterfact</title>
+    <meta name="description" content="Counterfact dashboard" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style type="text/css">
+      body {
+        font-family: sans-serif;
+
+        margin: 20vh;
+        font-size: 3vh;
+        text-align: center;
+      }
+
+      ul {
+        list-style: none;
+        margin: 0;
+        line-height: 2em;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Counterfact is running!</h1>
+    <ul>
+      <li>
+        The generated code is at<br /><a href="vscode://file{{basePath}}"
+          >{{basePath}}</a
+        >
+      </li>
+      <li>
+        You can explore the API using
+        <a href="/counterfact/swagger">Swagger UI</a>
+      </li>
+      <li>
+        <a
+          href="https://github.com/pmcelhaney/counterfact/blob/main/docs/usage.md#generated-code-"
+          >How does this work?</a
+        >
+      </li>
+    </ul>
+  </body>
+</html>
diff --git a/src/server/start.js b/src/server/start.js
@@ -9,6 +9,9 @@ import { readFile } from "../util/read-file.js";
 
 import { counterfact } from "./counterfact.js";
 
+// eslint-disable-next-line no-underscore-dangle
+const __dirname = nodePath.dirname(new URL(import.meta.url).pathname);
+
 const DEFAULT_PORT = 3100;
 
 function swaggerUi(app, openApiPath, port) {
@@ -44,46 +47,17 @@ function swaggerUi(app, openApiPath, port) {
   );
 }
 
-export function landingPageBody(basePath) {
-  return `
-  <html>
-    <head>
-      <title>Counterfact</title>
-      <style type="text/css">
-        body {
-          font-family: sans-serif;
-        
-          margin: 20vh;
-          font-size: 3vh;
-          text-align: center;
-        }
-
-        ul {
-          list-style: none;
-          margin: 0;
-          line-height: 2em;
-        }
-
-       
-      </style>
-    </head>
-    <body>
-      <h1>Counterfact is running!</h1>
-      <ul> 
-        
-        <li>The generated code is at<br><a href="vscode://file${basePath}">${basePath}</a></li>
-        <li>You can explore the API using <a href="/counterfact/swagger">Swagger UI</a></li>
-        <li><a href="https://github.com/pmcelhaney/counterfact/blob/main/docs/usage.md#generated-code-">How does this work?</a></li>
-      </ul>  
-    </body>
-  </html>
-`;
+export async function landingPageBody(basePath) {
+  const body = await readFile(nodePath.join(__dirname, "../client/index.html"));
+
+  return body.replaceAll("{{basePath}}", basePath);
 }
 
 export function landingPage(app, basePath) {
   app.use(async (ctx, next) => {
     if (ctx.URL.pathname === "/counterfact") {
-      ctx.body = landingPageBody(basePath);
+      // eslint-disable-next-line require-atomic-updates
+      ctx.body = await landingPageBody(basePath);
 
       return;
     }

diff --git a/test/server/start.test.js b/test/server/start.test.js
@@ -1,9 +1,9 @@
 import { landingPageBody } from "../../src/server/start.js";
 
 describe("start", () => {
-  it("renders the landing page", () => {
+  it("renders the landing page", async () => {
     const basePath = "/home/user/counterfact";
-    const result = landingPageBody(basePath);
+    const result = await landingPageBody(basePath);
 
     expect(result).toContain(basePath);
   });