Add linting, formatting and pre-commit (#53)

* Add dev-dependancies

* Security update npm packages

* Force audit fix

* Add linting, formatting and precommit

* Format files

.editorconfig

@@ -0,0 +1,15 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false
+
+[pug.ts]
+indent_size = 4

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["prettier"]
+}

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "trailingComma": "es5",
+  "semi": true,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

app.js

@@ -4,7 +4,7 @@ var path = require('path');
 var cookieParser = require('cookie-parser');
 var mLogger = require('morgan');
 var logger = require('./config/winston');
-const helmet = require("helmet");
+const helmet = require('helmet');
 
 var indexRouter = require('./routes/index');
 var aboutRouter = require('./routes/about');
@@ -12,7 +12,8 @@ var contactRouter = require('./routes/contact');
 
 var app = express();
 
-if (process.env.IS_DOCKER != 'true') app.set('trust proxy', 'loopback,uniquelocal');
+if (process.env.IS_DOCKER != 'true')
+  app.set('trust proxy', 'loopback,uniquelocal');
 app.disable('x-powered-by');
 
 // view engine setup
@@ -20,7 +21,7 @@ app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'pug');
 
 if (process.env.NODE_ENV === 'production') {
-    app.use(mLogger("common", { "stream": logger.stream }));
+  app.use(mLogger('common', { stream: logger.stream }));
 } else {
   app.use(mLogger('dev'));
 }
@@ -30,16 +31,33 @@ app.use(
   helmet.contentSecurityPolicy({
     directives: {
       defaultSrc: ["'self'"],
-        scriptSrc: ["'self'", "'unsafe-inline'", "'unsafe-eval'", "https://hcaptcha.com", "https://*.hcaptcha.com", "https://cdn.ravenjs.com/"],
+      scriptSrc: [
-        imgSrc: ["'self'", "https://blog.pastel.codes", "https://static.ghost.org", "https://secure.gravatar.com"],
+        "'self'",
-        styleSrc: ["'self'", "'unsafe-inline'", "https://hcaptcha.com", "https://*.hcaptcha.com"],
+        "'unsafe-inline'",
-        fontSrc: ["'self'", "data:"],
+        "'unsafe-eval'",
-        frameSrc: ["https://hcaptcha.com", "https://*.hcaptcha.com"],
+        'https://hcaptcha.com',
+        'https://*.hcaptcha.com',
+        'https://cdn.ravenjs.com/',
+      ],
+      imgSrc: [
+        "'self'",
+        'https://blog.pastel.codes',
+        'https://static.ghost.org',
+        'https://secure.gravatar.com',
+      ],
+      styleSrc: [
+        "'self'",
+        "'unsafe-inline'",
+        'https://hcaptcha.com',
+        'https://*.hcaptcha.com',
+      ],
+      fontSrc: ["'self'", 'data:'],
+      frameSrc: ['https://hcaptcha.com', 'https://*.hcaptcha.com'],
       objectSrc: ["'none'"],
       upgradeInsecureRequests: [],
     },
   })
-  );
+);
 
 app.use(express.json());
 app.use(express.urlencoded({ extended: false }));
@@ -51,19 +69,19 @@ app.use('/about', aboutRouter);
 app.use('/contact', contactRouter);
 
 // catch 404 and forward to error handler
-app.use(function(req, res, next) {
+app.use(function (req, res, next) {
   next(createError(404));
 });
 
 // error handler
-app.use(function(err, req, res, next) {
+app.use(function (err, req, res, _next) {
   // set locals, only providing error in development
   res.locals.message = err.message;
   res.locals.error = req.app.get('env') === 'development' ? err : {};
 
   // render the error page
   res.status(err.status || 500);
-    res.render('error', { title: 'Error', description: "Error" });
+  res.render('error', { title: 'Error', description: 'Error' });
 });
 
 module.exports = app;

bin/www

@@ -59,9 +59,7 @@ function onError(error) {
     throw error;
   }
 
-    var bind = typeof port === 'string'
+  var bind = typeof port === 'string' ? 'Pipe ' + port : 'Port ' + port;
-        ? 'Pipe ' + port
-        : 'Port ' + port;
 
   // handle specific listen errors with friendly messages
   switch (error.code) {
@@ -84,8 +82,6 @@ function onError(error) {
 
 function onListening() {
   var addr = server.address();
-    var bind = typeof addr === 'string'
+  var bind = typeof addr === 'string' ? 'pipe ' + addr : 'port ' + addr.port;
-        ? 'pipe ' + addr
-        : 'port ' + addr.port;
   debug('Listening on ' + bind);
 }

config/winston.js

@@ -10,21 +10,21 @@ var logger = new winston.createLogger({
       json: true,
       maxsize: 5242880, //5MB
       maxFiles: 5,
-            colorize: false
+      colorize: false,
     }),
     new winston.transports.Console({
       level: 'debug',
       handleExceptions: true,
       json: false,
-            colorize: true
+      colorize: true,
-        })
+    }),
   ],
-    exitOnError: false
+  exitOnError: false,
 });
 
 logger.stream = {
-    write: function(message, encoding){
+  write: function (message, _encoding) {
     logger.info(message);
-    }
+  },
 };
-module.exports = logger
+module.exports = logger;

eslint.config.mjs

@@ -0,0 +1,20 @@
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+
+export default [
+  { files: ['**/*.js'], languageOptions: { sourceType: 'commonjs' } },
+  { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
+  pluginJs.configs.recommended,
+  {
+    rules: {
+      'no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+        },
+      ],
+    },
+  },
+];

package.json

@@ -12,14 +12,19 @@
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "npx nodemon ./bin/www -e js,pug,sass",
+    "dev": "npx nodemon ./bin/www -e js,pug,sass",
+    "start": "npx ./bin/www -e js,pug,sass",
     "watch-tailwind": "npx npm-watch",
-    "build-tailwind": "npx postcss src/tailwind.css -o public/stylesheets/style.css"
+    "build-tailwind": "npx postcss src/tailwind.css -o public/stylesheets/style.css",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write --ignore-path .gitignore .",
+    "prepare": "husky install"
   },
   "dependencies": {
-    "@sendgrid/mail": "^7.4.4",
+    "@sendgrid/mail": "^8.1.3",
     "app-root-path": "^3.0.0",
-    "axios": "^0.21.3",
+    "autoprefixer": "^10.3.4",
+    "axios": "^1.6.8",
     "cookie-parser": "^1.4.5",
     "express": "^4.17.1",
     "express-rate-limit": "^5.2.6",
@@ -28,12 +33,25 @@
     "http-errors": "^1.8.0",
     "morgan": "^1.10.0",
     "nodemailer": "^6.6.1",
-    "pug": "^3.0.2",
-    "tailwind-hamburgers": "^1.1.1",
-    "winston": "^3.3.3",
-    "autoprefixer": "^10.3.4",
     "npm-watch": "^0.11.0",
     "postcss-cli": "^8.3.1",
-    "tailwindcss": "^2.2.15"
+    "pug": "^3.0.2",
+    "tailwind-hamburgers": "^1.1.1",
+    "tailwindcss": "^2.2.15",
+    "winston": "^3.3.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.1.1",
+    "eslint": "^9.1.1",
+    "eslint-config-prettier": "^9.1.0",
+    "globals": "^15.1.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.14"
+  },
+  "lint-staged": {
+    "*.js": "eslint --cache --fix",
+    "*.{js,css,md,pug}": "prettier --write"
   }
 }

postcss.config.js

@@ -1,6 +1,3 @@
 module.exports = {
-    plugins: [
+  plugins: [require('tailwindcss'), require('autoprefixer')],
-        require('tailwindcss'),
+};
-        require('autoprefixer')
-    ]
-}

public/stylesheets/old-style.sass

@@ -94,7 +94,6 @@ main
       font-size: 2rem
       margin-bottom: 5px
 
-
 footer
   text-align: center
   font-size: 1rem
@@ -151,7 +150,6 @@ footer
     margin-bottom: 3vh
     margin-top: 1vh
 
-
 .pr-text
   a
     color: $pink
@@ -287,9 +285,7 @@ footer
     .ff
       min-height: 82.8vh !important
 
-
 @media only screen and (max-height: 815px)
   .ef
     max-height: none !important
     min-height: 0 !important
-

routes/about.js

@@ -3,23 +3,33 @@ const axios = require('axios');
 var router = express.Router();
 
 /* GET home page. */
-router.get('/', function(req, res, next) {
+router.get('/', function (req, res, _next) {
-    const GHOST_KEY = process.env.GHOST_KEY
+  const GHOST_KEY = process.env.GHOST_KEY;
-    const base_url = `https://blog.pastel.codes/ghost/api/v3/content/posts/?key=${GHOST_KEY}`
+  const base_url = `https://blog.pastel.codes/ghost/api/v3/content/posts/?key=${GHOST_KEY}`;
 
-    axios.all([
+  axios
+    .all([
       axios.get(`${base_url}&limit=3`),
       axios.get(`${base_url}&limit=3&filter=tag:project`),
     ])
-        .then(axios.spread((response1, response2) => {
+    .then(
-            var base = { title: 'About', description: 'Who??? What??? AAAAaaa, about me.'};
+      axios.spread((response1, response2) => {
-            var blog = JSON.parse(JSON.stringify(response1.data).split('"posts":').join('"blog":'));
+        var base = {
-            var projects = JSON.parse(JSON.stringify(response2.data).split('"posts":').join('"project":'));
+          title: 'About',
+          description: 'Who??? What??? AAAAaaa, about me.',
+        };
+        var blog = JSON.parse(
+          JSON.stringify(response1.data).split('"posts":').join('"blog":')
+        );
+        var projects = JSON.parse(
+          JSON.stringify(response2.data).split('"posts":').join('"project":')
+        );
         var out = Object.assign(base, blog, projects);
 
         res.render('about', out);
-        }))
+      })
-        .catch(error => {
+    )
+    .catch((error) => {
       console.log(error);
     });
 });

routes/contact.js

@@ -1,7 +1,6 @@
 var express = require('express');
-var rate_limit = require("express-rate-limit")
+var rate_limit = require('express-rate-limit');
-const {verify} = require('hcaptcha');
+const { verify } = require('hcaptcha');
-const nodemailer = require('nodemailer')
 var router = express.Router();
 
 const sgMail = require('@sendgrid/mail');
@@ -10,23 +9,23 @@ sgMail.setApiKey(process.env.SENDGRID_API_KEY);
 const contact_rate_limit = rate_limit({
   windowMs: 10 * 60 * 1000, // 10 minutes
   max: 5, // limit each IP to 10 requests per windowMs
-    message: "Too many contact requests, try again later.",
+  message: 'Too many contact requests, try again later.',
   handler: function (req, res /*, next*/) {
     res.render('error', {
-            title: "Error",
+      title: 'Error',
-            message: "Too many contact requests, try again later.",
+      message: 'Too many contact requests, try again later.',
-            error: {status: null}
+      error: { status: null },
-        })
+    });
   },
 });
 
 // POST route from contact form
 router.post('/', contact_rate_limit, (req, res) => {
-    const TO_MAIL_USER = process.env.TO_MAIL_USER
+  const TO_MAIL_USER = process.env.TO_MAIL_USER;
-    const FROM_MAIL_USER = process.env.FROM_MAIL_USER
+  const FROM_MAIL_USER = process.env.FROM_MAIL_USER;
-    const HCAPTCHA_KEY = process.env.HCAPTCHA_KEY
+  const HCAPTCHA_KEY = process.env.HCAPTCHA_KEY;
-    const REPLY_TO_MAIL = process.env.REPLY_TO_MAIL
+  const REPLY_TO_MAIL = process.env.REPLY_TO_MAIL;
-    const token = req.body["g-recaptcha-response"];
+  const token = req.body['g-recaptcha-response'];
   const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
 
   verify(HCAPTCHA_KEY, token)
@@ -36,7 +35,7 @@ router.post('/', contact_rate_limit, (req, res) => {
           to: TO_MAIL_USER,
           from: FROM_MAIL_USER,
           subject: 'New message from contact form at pastel.codes',
-                    text: `${req.body.firstname} ${req.body.lastname} (${req.body.email})\nsays: ${req.body.message}\n\nip: ${ip}`
+          text: `${req.body.firstname} ${req.body.lastname} (${req.body.email})\nsays: ${req.body.message}\n\nip: ${ip}`,
         };
 
         sgMail
@@ -44,30 +43,38 @@ router.post('/', contact_rate_limit, (req, res) => {
           .then(() => {
             res.render('contact', {
               title: 'Contact',
-                            message: "I will get back to you soon!",
+              message: 'I will get back to you soon!',
-                            success: "Make sure the email is from ",
+              success: 'Make sure the email is from ',
-                            email: REPLY_TO_MAIL
+              email: REPLY_TO_MAIL,
-                        })
+            });
-                    })
+          })
-                    .catch(error => {
+          .catch((error) => {
-                        console.log(error)
+            console.log(error);
-                        res.render('error', {title: 'Contact', message: "Email did not send"})
+            res.render('error', {
+              title: 'Contact',
+              message: 'Email did not send',
+            });
           });
-
       } else {
         // rerender with same info in the text box and show error message
-                res.render('contact', {title: 'Contact', message: "Captcha failed, try again"});
+        res.render('contact', {
+          title: 'Contact',
+          message: 'Captcha failed, try again',
+        });
       }
     })
-        .catch(error => {
+    .catch((error) => {
       console.log(error);
-            res.render('contact', {title: 'Contact', message: "Something wrong happened, try again later"});
+      res.render('contact', {
+        title: 'Contact',
+        message: 'Something wrong happened, try again later',
       });
-})
+    });
+});
 
 /* GET home page. */
-router.get('/', function (req, res, next) {
+router.get('/', function (req, res, _next) {
-    res.render('contact', {title: 'Contact', description: "Contact me!"});
+  res.render('contact', { title: 'Contact', description: 'Contact me!' });
 });
 
 module.exports = router;

routes/index.js

@@ -2,7 +2,7 @@ var express = require('express');
 var router = express.Router();
 
 /* GET home page. */
-router.get('/', function(req, res, next) {
+router.get('/', function (req, res, _next) {
   res.render('index', { title: 'Home', description: "Hello, I'm E" });
 });
 

src/tailwind.css

@@ -3,17 +3,17 @@
 
 @font-face {
   font-family: 'Titling Gothic FB';
-    src: url("../fonts/TITLINGGOTHICFB-WIDE.OTF") format('opentype')
+  src: url('../fonts/TITLINGGOTHICFB-WIDE.OTF') format('opentype');
 }
 
 @font-face {
   font-family: 'Gilroy';
-    src: url("../fonts/Gilroy-ExtraBold.otf") format('opentype')
+  src: url('../fonts/Gilroy-ExtraBold.otf') format('opentype');
 }
 
 @font-face {
   font-family: 'Apercu Mono';
-    src: url("../fonts/ApercuMono.ttf") format('truetype');
+  src: url('../fonts/ApercuMono.ttf') format('truetype');
 }
 
 .wavy {

tailwind.config.js

@@ -1,13 +1,13 @@
 module.exports = {
-  mode: "jit",
+  mode: 'jit',
   purge: ['views/*.pug'],
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {
       fontFamily: {
-        'extra': ['"Titling Gothic FB"'],
+        extra: ['"Titling Gothic FB"'],
-        'sans': ['Gilroy'],
+        sans: ['Gilroy'],
-        'mono': ['"Apercu Mono"'],
+        mono: ['"Apercu Mono"'],
       },
       colors: {
         transparent: 'transparent',
@@ -20,14 +20,12 @@ module.exports = {
         },
         green: {
           DEFAULT: '#CDE7B0',
-        }
+        },
-      }
+      },
     },
   },
   variants: {
     extend: {},
   },
-  plugins: [
+  plugins: [require('tailwind-hamburgers')],
-    require('tailwind-hamburgers'),
+};
-  ],
-}