Merge branch 'pr/nakrovati/1369-1'

Author: krausest

index.html

@@ -2,6 +2,8 @@ import Fastify from "fastify";
 import frameworksRouter from "./src/frameworks/frameworksRouter.js";
 import cspRouter from "./src/csp/cspRouter.js";
 import staticRouter from "./src/static/staticRouter.js";
+import * as ejs from "ejs";
+import * as fastifyView from "@fastify/view";
 
 /**
  * Builds the server but does not start it. Need it for testing API
@@ -11,6 +13,12 @@ import staticRouter from "./src/static/staticRouter.js";
 function buildServer(options = {}) {
   const fastify = Fastify(options);
 
+  fastify.register(fastifyView, {
+    engine: {
+      ejs: ejs,
+    },
+  });
+
   fastify.addHook("onRequest", (request, reply, done) => {
     if (request.url.endsWith("index.html")) {
       reply.header("Cross-Origin-Embedder-Policy", "require-corp");

server/app.js

@@ -15,13 +15,16 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@fastify/static": "^6.10.2",
-    "fastify": "^4.21.0"
+    "@fastify/static": "^6.11.2",
+    "@fastify/view": "^8.2.0",
+    "ejs": "^3.1.9",
+    "fastify": "^4.23.2"
   },
   "devDependencies": {
-    "@types/node": "^20.4.4",
-    "eslint": "^8.46.0",
+    "@types/ejs": "^3.1.2",
+    "@types/node": "^20.6.2",
+    "eslint": "^8.49.0",
     "nodemon": "^3.0.1",
-    "prettier": "^3.0.0"
+    "prettier": "^3.0.3"
   }
 }

server/package-lock.json

@@ -1,15 +1,18 @@
+// @ts-check
 import { loadFrameworkVersions } from "./frameworksServices.js";
+import { prepareFrameworkData } from "./helpers/index.js";
 
 /**
  * @typedef {import("fastify").FastifyRequest} Request
  * @typedef {import("fastify").FastifyReply} Reply
  */
 
 /**
+ * Get framework versions.
  * @param {Request} request
  * @param {Reply} reply
  */
-export async function getFrameworksVersions(_request, reply) {
+export async function getFrameworksVersions(request, reply) {
   performance.mark("Start");
 
   const frameworks = await loadFrameworkVersions();
@@ -26,3 +29,12 @@ export async function getFrameworksVersions(_request, reply) {
 
   return reply.send(frameworks);
 }
+
+/**
+ * Get and serve the index HTML page.
+ * @param {Request} request
+ * @param {Reply} reply
+ */
+export async function generateAndServeIndex(request, reply) {
+  return reply.view("templates/index.ejs", {frameworks: await prepareFrameworkData()});
+}

server/package.json

@@ -1,5 +1,5 @@
-import path from "path";
-import fs from "fs";
+import path from "node:path";
+import * as fs from "node:fs";
 
 import { frameworksDirectory } from "../config/directories.js";
 import { buildFrameworkVersionString, copyProps } from "./helpers/index.js";

server/src/frameworks/frameworksControllers.js

@@ -1,2 +1,3 @@
 export { copyProps } from "./copyProps.js";
 export { buildFrameworkVersionString } from "./buildFrameworkVersionString.js";
+export { prepareFrameworkData } from "./prepareFrameworkData.js";

server/src/frameworks/frameworksServices.js

@@ -0,0 +1,19 @@
+import { loadFrameworkVersions } from "../frameworksServices.js";
+
+/**
+ * Generate the index HTML page.
+ */
+export async function prepareFrameworkData() {
+  const frameworks = await loadFrameworkVersions();
+
+  for (const framework of frameworks) {
+    framework.uri = `frameworks/${framework.type}/${framework.directory}${
+      framework.customURL || ""
+    }`;
+  }
+
+  frameworks.sort((a, b) =>
+    a.frameworkVersionString.localeCompare(b.frameworkVersionString),
+  );
+  return frameworks;
+}

server/src/frameworks/helpers/index.js

@@ -1,9 +1,10 @@
 import fastifyStatic from "@fastify/static";
-import path from "path";
-import { cwd } from "process";
+import path from "node:path";
+import { cwd } from "node:process";
 
 import { isCSPEnabled } from "../csp/cspControllers.js";
 import { frameworksDirectory } from "../config/directories.js";
+import { generateAndServeIndex } from "../frameworks/frameworksControllers.js";
 
 const projectRootPath = path.join(cwd(), "..");
 
@@ -37,9 +38,8 @@ async function routes(fastify) {
     decorateReply: false,
   });
 
-  fastify.get("/index.html", async (_request, reply) => {
-    return reply.sendFile("index.html", projectRootPath);
-  });
+  fastify.get("/", generateAndServeIndex);
+  fastify.get("/index.html", generateAndServeIndex);
 }
 
 export default routes;

server/src/frameworks/helpers/prepareFrameworkData.js

@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+  <head>
+    <title>JS-Frameworks Benchmark</title>
+    <meta charset="UTF-8" />
+    <link href="css/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="css/main.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+
+  <body>
+    <div class="container">
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          <h3 class="panel-title">Choose a framework:</h3>
+        </div>
+        <div class="panel-body">
+          <ul class="nav nav-pills nav-stacked">
+            <% frameworks.forEach(framework => { %>
+            <li>
+              <a href="/<%= framework.uri %>/index.html"
+                ><span
+                  class="glyphicon glyphicon-arrow-right mr-5"
+                  aria-hidden="true"
+                ></span>&nbsp;<%= framework.frameworkVersionString %>
+              </a>
+            </li>
+            <% }); %>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>