Move to scss

.github/workflows/ci-cd-16x.yml

@@ -1,4 +1,3 @@
-# This CI Workflow was deployed and configured by WarpWing and Nate.
 name: CI/CD 16x
 
 on:
@@ -58,8 +57,25 @@ jobs:
       - name: Install node dependencies
         run: npm i
 
-      - name: Copy Config,
+      - name: Copy Config
         run: cp config.example.json config.json
 
       - name: Test Build
         run: npm run build
+
+  scss:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Git checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install node dependencies
+        run: npm i
+
+      - name: Test SCSS
+        run: npm run scss

.github/workflows/ci-cd-18x.yml

@@ -1,4 +1,3 @@
-# This CI Workflow was deployed and configured by WarpWing and Nate.
 name: CI/CD 18x
 
 on:
@@ -58,8 +57,25 @@ jobs:
       - name: Install node dependencies
         run: npm i
 
-      - name: Copy Config,
+      - name: Copy Config
         run: cp config.example.json config.json
 
       - name: Test Build
         run: npm run build
+
+  scss:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Git checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install node dependencies
+        run: npm i
+
+      - name: Test SCSS
+        run: npm run scss

.github/workflows/ci-cd-20.9.0.yml

@@ -1,4 +1,3 @@
-# This CI Workflow was deployed and configured by WarpWing and Nate.
 name: CI/CD 20.9.0
 
 on:
@@ -58,8 +57,25 @@ jobs:
       - name: Install node dependencies
         run: npm i
 
-      - name: Copy Config,
+      - name: Copy Config
         run: cp config.example.json config.json
 
       - name: Test Build
         run: npm run build
+
+  scss:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Git checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install node dependencies
+        run: npm i
+
+      - name: Test SCSS
+        run: npm run scss

.github/workflows/ci-cd-20x.yml

@@ -1,4 +1,3 @@
-# This CI Workflow was deployed and configured by WarpWing and Nate.
 name: CI/CD 20x
 
 on:
@@ -58,8 +57,25 @@ jobs:
       - name: Install node dependencies
         run: npm i
 
-      - name: Copy Config,
+      - name: Copy Config
         run: cp config.example.json config.json
 
       - name: Test Build
         run: npm run build
+
+  scss:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Git checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install node dependencies
+        run: npm i
+
+      - name: Test SCSS
+        run: npm run scss

.gitignore

@@ -3,4 +3,6 @@ node_modules/
 dist
 config.json
 src/files/
-package-lock.json
+package-lock.json
+*.css
+*.css.map

package.json

@@ -10,7 +10,9 @@
     "copy-web-data": "npx ncp src/views/ dist/src/views/ && npx ncp src/public/ dist/src/public/",
     "lint:check": "npx eslint index.ts src/",
     "lint": "npx eslint --fix index.ts src/",
-    "build": "npx tsc --build && npm run copy-web-data"
+    "scss": "npx sass src/public/scss:src/public/css --style=compressed",
+    "scss:watch": "npx sass --watch src/public/scss:src/public/css",
+    "build": "npx tsc --build && npm run scss && npm run copy-web-data"
   },
   "keywords": [],
   "author": "",
@@ -19,6 +21,7 @@
     "ejs": "^3.1.9",
     "express": "^4.18.2",
     "express-fileupload": "^1.4.3",
+    "sass": "^1.70.0",
     "winston": "^3.11.0"
   },
   "devDependencies": {

src/endpoints/file.ts

@@ -13,7 +13,12 @@ export default (app: Application) => {
       apiMessage(req.path, `User is trying to get a file - ${fileName}`);
       const fileNamePattern = /^[a-zA-Z0-9]+\.(jpg|jpeg|png|mp4)$/;
       if (!fileNamePattern.test(fileName)) {
-        return res.status(400).render('pages/badName');
+        return res.status(400).render('pages/error', {
+          type: 'Invalid file name',
+          message: `${fileName} is an invalid file name`,
+          message2: 'Please only use English Alphabet characters, 0-9',
+          message3: '.jpg .jpeg .png .mp4 are the only supported file types',
+        });
       }
       const dir = resolve(dirname(''), 'src/files');
       if (!existsSync(dir)) {
@@ -22,7 +27,10 @@ export default (app: Application) => {
       const filePath = resolve(dir, fileName);
       if (!existsSync(filePath)) {
         errorMessage(`File ${fileName} doesn't exists`);
-        return res.status(400).render('pages/missingFile');
+        return res.status(400).render('pages/error', {
+          type: 'File not found',
+          message: `File ${fileName} doesn't exist`,
+        });
       }
       apiMessage(req.path, `File ${fileName} found`);
       const stats = statSync(filePath);

src/public/scss/error.scss

@@ -0,0 +1,69 @@
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('fonts/Inter.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  padding: 0px;
+  margin: 0px;
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+  background-color: #dcdcdc;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.5rem;
+  color: #343434;
+  height: 100vh;
+  display: flex;
+  width: 100vw;
+  main {
+    filter: drop-shadow(#000000bf 20px 20px 30px);
+    background-color: #bfb9b9;
+    border-radius: 16px;
+
+    img {
+      border-radius: 16px 16px 0 0;
+      max-height: 75vh;
+      max-width: 75vw;
+      height: auto;
+      width: auto;
+    }
+
+    .text {
+      text-align: center;
+      max-height: 75vh;
+      max-width: 75vw;
+      padding: 20px;
+      height: auto;
+      width: auto;
+      z-index: 2;
+
+      .warningMsg {
+        color: red;
+        font-size: 1.5rem;
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #464646;
+    color: #dcdcdc;
+    main {
+      filter: drop-shadow(#ffffff1a 20px 20px 30px);
+      background-color: #363636;
+    }
+  }
+}