Bugfix v0.5.4-alpha

.browserslistrc

@@ -0,0 +1,16 @@
+# @see https://github.com/browserslist/browserslist
+
+# @see https://browsersl.ist/#q=last+1+chrome+version%0Alast+1+firefox+version%0Alast+1+safari+version
+[development]
+last 1 chrome version
+last 1 firefox version
+last 1 safari version
+
+# @see https://browsersl.ist/#q=%3E+0.2%25%0Adefaults%0Aie+11%0Alast+2+versions%0Anot+dead%0Anot+op_mini+all
+[production]
+> 0.2%
+defaults
+ie 11
+last 2 versions
+not dead
+not op_mini all

.gitignore

@@ -1,3 +1,5 @@
+# Generated by GitHub New Repository wizard on Nov 5, 2024.
+
 # Logs
 logs
 *.log
@@ -96,7 +98,7 @@ dist/*
 # https://nextjs.org/blog/next-9-1#public-directory-support
 # public
 
-public/images/graycraft.png
+static/images/graycraft-cotd.png
 
 # vuepress build output
 .vuepress/dist
@@ -131,3 +133,7 @@ public/images/graycraft.png
 .pnp.*
 
 distribution/*
+
+# PM2 production configuration.
+
+ecosystem.config.js

.prettierignore

@@ -1,4 +1,6 @@
 # Directories with auto-generated files.
+
+.browserslistrc
 .vscode
 distribution
-public
+static

.vscode/settings.json

@@ -1,7 +1,9 @@
 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.rulers": [80, 100, 120],
-  "emmet.includeLanguages": {
-    "ejs": "html",
-  },
+  "editor.formatOnSave": true,
+  "editor.rulers": [
+    80,
+    100,
+    120
+  ],
 }

README.md

@@ -2,6 +2,10 @@
 
 Client and server logic of the [graycraft.me](https://graycraft.me) website.
 
+The legacy stack CSS/Express/Pug/Webpack used for this project intentionally
+
+to compare with modern approaches like SCSS/NestJS/React/Vite.
+
 ## Prerequisites
 
 Node.js 22.11.0:
@@ -79,6 +83,12 @@ $ npm i
 
 ## Usage
 
+Build static files for the frontend:
+
+```bash
+$ npm run webpack:build
+```
+
 Run production server:
 
 ```bash

app.mts

@@ -7,82 +7,84 @@
  * @module app
  */
 
-import type { Express, ErrorRequestHandler, RequestHandler } from 'express';
-
 import nodeFs from 'node:fs';
 import nodePath from 'node:path';
 import { fileURLToPath } from 'node:url';
 
+import compression from 'compression';
 import cookieParser from 'cookie-parser';
 import express from 'express';
 import createError from 'http-errors';
 import logger from 'morgan';
 
+import type { Express, ErrorRequestHandler, RequestHandler } from 'express';
+
 import { HTTP } from './library/constants.mts';
 import { SIZE, SIZE_MIN } from './library/graycraft.mts';
 import routerIndex from './routes/index.mts';
-import graycraft from './source/graycraft.umd.js';
+import graycraft from './source/graycraft.mjs';
 
 const {
-    STATUS: { INTERNAL_SERVER_ERROR },
+    STATUS: { INTERNAL_SERVER_ERROR, NOT_FOUND },
   } = HTTP,
   __filename = fileURLToPath(import.meta.url),
   __dirname = nodePath.dirname(__filename),
   app: Express = express();
 
 app.set('views', nodePath.join(__dirname, 'views'));
-app.set('view engine', 'ejs');
+app.set('view engine', 'pug');
+app.use(compression());
 app.use(logger('dev'));
 app.use(express.json());
 app.use(express.urlencoded({ extended: false }));
 app.use(cookieParser());
-app.use(express.static(nodePath.join(__dirname, 'public')));
+app.use(express.static(nodePath.join(__dirname, 'static')));
 app.use('/', routerIndex);
 
 /**
- * Catch 404 and forward to error handler.
+ * Catch HTTP status code 404 and forward to the error handler.
  */
 app.use(((req, res, next) => {
+  next(createError(NOT_FOUND.CODE));
+}) as RequestHandler);
+
+/**
+ * Error handler.
+ */
+app.use(((error, req, res, next) => {
   const { DEPLOYMENT, HOSTNAME, PORT, PORT_PROXY } = process.env,
-    externalLinkBuffer = nodeFs.readFileSync('public/images/external_link.svg'),
-    externalLink = global.encodeURIComponent(String(externalLinkBuffer)),
-    host = HOSTNAME + ':' + (DEPLOYMENT === 'local' ? PORT : PORT_PROXY),
-    cssBuffer = nodeFs.readFileSync('public/stylesheets/style.css'),
-    css = String(cssBuffer),
     { back: backQuery, fore: foreQuery, size: sizeQuery } = req.query,
     back = String(backQuery ?? 'transparent'),
+    cssBuffer = nodeFs.readFileSync('distribution/main.css'),
+    css = String(cssBuffer),
     fore = String(foreQuery ?? ''),
+    imagePath = 'images/graycraft-cotd.png',
+    host = HOSTNAME + ':' + (DEPLOYMENT === 'local' ? PORT : PORT_PROXY),
     size = Number(sizeQuery ?? SIZE) < SIZE_MIN ? SIZE_MIN : Number(sizeQuery ?? SIZE),
-    { getYear, hsl, hslLight, rgb } = graycraft(size, fore, back);
+    { getYear, hsl, hslLight, rgb } = graycraft(size, fore, back),
+    status: number = error.status || INTERNAL_SERVER_ERROR.CODE;
 
-  res.render('404', {
-    back,
+  /** Set locals, only providing error in development mode. */
+  res.locals.message = error?.message;
+  res.locals.error = req.app.get('env') === 'development' ? error : {};
+  res.status(status);
+  res.render('error', {
     css,
-    externalLink,
+    header: status,
     host,
-    header: '404',
     hsl,
     hslLight,
-    imagePath: 'images/graycraft.png',
-    paragraph: 'This page is not found on the server.',
+    imagePath,
+    paragraph:
+      ({
+        404: 'This page is not found on the server',
+        500: 'An error occurred on the server',
+      }[status] ?? 'Unknown error') + '.',
     rgb,
     size,
-    title: 'Not Found',
+    title: Object.values(HTTP.STATUS).find(({ CODE }) => CODE === status)?.TEXT ?? 'Error',
     year: getYear(),
   });
-  next(createError(404));
-}) as RequestHandler);
-
-/**
- * Error handler.
- */
-app.use(((error, req, res) => {
-  /** Set locals, only providing error in development mode. */
-  res.locals.message = error?.message;
-  res.locals.error = req.app.get('env') === 'development' ? error : {};
-
-  res.status(error.status || INTERNAL_SERVER_ERROR);
-  res.render('error');
 }) as ErrorRequestHandler);
 
 export default app;

index.mts

@@ -65,9 +65,11 @@ function onError(error: NodeJS.ErrnoException) {
     case 'EACCES':
       console.error(bind + ' requires elevated privileges');
       process.exit(1);
+      break;
     case 'EADDRINUSE':
       console.error(bind + ' is already in use');
       process.exit(1);
+      break;
     default:
       throw error;
   }

library/constants.mts

@@ -8,12 +8,20 @@
 /**
  * @type {{
  *   STATUS: {
- *     INTERNAL_SERVER_ERROR: 500;
+ *     INTERNAL_SERVER_ERROR: { CODE: 500, TEXT: string };
+ *     NOT_FOUND: { CODE: 404, TEXT: string };
  *   };
  * }}
  */
 export const HTTP = {
   STATUS: {
-    INTERNAL_SERVER_ERROR: 500,
+    INTERNAL_SERVER_ERROR: {
+      CODE: 500,
+      TEXT: 'Internal Server Error',
+    },
+    NOT_FOUND: {
+      CODE: 404,
+      TEXT: 'Not Found',
+    },
   },
 };

library/graycraft.mts

@@ -5,53 +5,78 @@
  * @module library/graycraft
  */
 
+import { compile } from 'pug';
+
 export const SIZE: number = 480;
 export const SIZE_MIN: number = 256;
 
 /**
  * Draw shapes on SVG element (server only).
  * @param {() => RSvg} drawSvg Draw shapes function to get parameters.
- * @returns {string} SVG template.
+ * @returns {string} Compiled Pug template with SVG.
  */
 const templateSvg = (
   drawSvg: () => {
     back: string;
+    defCraft: string;
+    defGray: string;
     hsl: string;
-    pathCraft: string;
-    pathGray: string;
     round: boolean;
     size: string;
     sizeHalf: string;
     translateY: number;
   },
 ) => {
-  const { back, hsl, pathCraft, pathGray, round, size, sizeHalf, translateY } = drawSvg(),
+  const { back, defCraft, defGray, hsl, round, size, sizeHalf, translateY } = drawSvg(),
     /** Setting height keeps empty space at the top and bottom of a scaled SVG image. */
-    template = `<svg
-      class="logotype"
-      ${/* height="" */ ''}
-      onerror="'use strict'; console.error('Can not load the SVG:', this);"
-      preserveAspectRatio="xMidYMid meet"
-      style="background-color: ${round ? 'transparent' : back};"
-      viewBox="0 0 ${size} ${size}"
-      width="${size}"
-    >
-      <title>Graycraft</title>
-      <desc>SVG is not supported by your browser.</desc>
-      ${round ? `<circle cx="${sizeHalf}" cy="${sizeHalf}" fill="${back}" r="${sizeHalf}"></circle>` : ''}
-      <g transform="translate(0, ${translateY})">
-        <path
-          d="${pathGray}"
-          fill="${hsl}"
-        ></path>
-        <path
-          d="${pathCraft}"
-          fill="black"
-        ></path>
-      </g>
-    </svg>`;
+    template = compile(
+      `svg(
+        class="logotype"
+        onerror="'use strict'; console.error('Can not load the SVG:', this);"
+        preserveAspectRatio="xMidYMid meet"
+        style="background-color: ${round ? 'transparent' : back};"
+        viewBox="0 0 ${size} ${size}"
+        width="${size}"
+      )
+          defs
+            title="Graycraft"
+            desc="SVG is not supported by your browser."
+            filter(
+              color-interpolation-filters="sRGB"
+              id="shadow"
+            )
+              feDropShadow(
+                dx="16.666667"
+                dy="10"
+                flood-color="black"
+                flood-opacity="0.5"
+                stdDeviation="5"
+              )
+          ${
+            round
+              ? `circle(
+                  cx="${sizeHalf}"
+                  cy="${sizeHalf}"
+                  fill="${back}"
+                  r="${sizeHalf}"
+                )`
+              : ''
+          }
+          g(
+            filter="url(#shadow)"
+            transform="translate(0, ${translateY})"
+          )
+            path(
+              d="${defGray}"
+              fill="${hsl}"
+            )
+            path(
+              d="${defCraft}"
+              fill="black"
+            )`,
+    );
 
-  return template;
+  return template();
 };
 
 export default templateSvg;