Add linting and pre-commit

See: https://codeberg.org/kytta/toot/pulls/17

.eslintignore

@@ -0,0 +1,2 @@
+/dist/
+/public/

.eslintrc.json

@@ -0,0 +1,23 @@
+{
+	"env": {
+		"browser": true
+	},
+	"extends": ["eslint:recommended", "plugin:unicorn/recommended", "prettier"],
+	"parserOptions": {
+		"ecmaVersion": "latest",
+		"sourceType": "module"
+	},
+	"overrides": [
+		{
+			"files": ["gulpfile.js", "api/*.js"],
+			"env": {
+				"node": true,
+				"browser": false
+			},
+			"rules": {
+				"unicorn/prefer-module": 0,
+				"unicorn/prefer-node-protocol": 0
+			}
+		}
+	]
+}

.node-version

@@ -1 +0,0 @@
-14

.pre-commit-config.yaml

@@ -0,0 +1,27 @@
+repos:
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v4.4.0
+    hooks:
+      - id: end-of-file-fixer
+      - id: fix-byte-order-marker
+      - id: mixed-line-ending
+      - id: trailing-whitespace
+        args: [--markdown-linebreak-ext=md]
+      - id: check-json
+      - id: check-toml
+      - id: check-yaml
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: "v2.7.1"
+    hooks:
+      - id: prettier
+        additional_dependencies:
+          - prettier@2
+  - repo: https://github.com/pre-commit/mirrors-eslint
+    rev: "v8.35.0"
+    hooks:
+      - id: eslint
+        additional_dependencies:
+          - eslint
+          - eslint-config-prettier
+          - eslint-plugin-unicorn
+          - prettier

.prettierignore

@@ -1,3 +1,5 @@
 *.md
-/public
-/.vercel
+/dist/
+/public/
+/.vercel/
+pnpm-lock.yaml

.prettierrc.json

@@ -1 +1,4 @@
-{}
+{
+	"quoteProps": "consistent",
+	"trailingComma": "es5"
+}

api/toot.js

@@ -19,20 +19,21 @@
 const http = require("http");
 
 http
-	.createServer(async (req, res) => {
+	.createServer(async (request, response) => {
 		const buffers = [];
-		for await (const chunk of req) {
+		for await (const chunk of request) {
 			buffers.push(chunk);
 		}
 		const data = Buffer.concat(buffers).toString();
-		const params = new URLSearchParams(data);
+		const searchParameters = new URLSearchParams(data);
 
-		const text = params.get("text") || "";
-		const instanceURL = params.get("instance") || "https://mastodon.social/";
+		const text = searchParameters.get("text") || "";
+		const instanceURL =
+			searchParameters.get("instance") || "https://mastodon.social/";
 
 		const finalURL = new URL("share", instanceURL);
 		finalURL.search = new URLSearchParams({ text }).toString();
 
-		res.writeHead(303, { Location: finalURL.toString() }).end();
+		response.writeHead(303, { Location: finalURL.toString() }).end();
 	})
 	.listen(8000);

gulpfile.js

@@ -1,20 +1,22 @@
-const { join, resolve } = require("path");
+const path = require("path");
 const gulp = require("gulp");
 const postcss = require("gulp-postcss");
 const sass = require("gulp-sass")(require("sass"));
 const sourcemaps = require("gulp-sourcemaps");
 const terser = require("gulp-terser");
 
-const SOURCE_DIR = resolve(__dirname, "src");
-const OUTPUT_DIR = resolve(__dirname, "public");
+const SOURCE_DIR = path.resolve(__dirname, "src");
+const OUTPUT_DIR = path.resolve(__dirname, "public");
 
 function html() {
-	return gulp.src(join(SOURCE_DIR, "index.html")).pipe(gulp.dest(OUTPUT_DIR));
+	return gulp
+		.src(path.join(SOURCE_DIR, "index.html"))
+		.pipe(gulp.dest(OUTPUT_DIR));
 }
 
 function css() {
 	return gulp
-		.src(join(SOURCE_DIR, "scss", "*.scss"))
+		.src(path.join(SOURCE_DIR, "scss", "*.scss"))
 		.pipe(sourcemaps.init())
 		.pipe(sass.sync().on("error", sass.logError))
 		.pipe(postcss([require("autoprefixer"), require("postcss-csso")]))
@@ -24,24 +26,24 @@ function css() {
 
 function js() {
 	return gulp
-		.src([join(SOURCE_DIR, "main.js"), join(SOURCE_DIR, "count.js")])
+		.src([path.join(SOURCE_DIR, "main.js"), path.join(SOURCE_DIR, "count.js")])
 		.pipe(sourcemaps.init())
 		.pipe(terser({ ecma: 5 }))
 		.pipe(sourcemaps.write("."))
 		.pipe(gulp.dest(OUTPUT_DIR));
 }
 
-function static() {
+function staticFiles() {
 	return gulp
-		.src(join(SOURCE_DIR, "static", "**", "*"))
+		.src(path.join(SOURCE_DIR, "static", "**", "*"))
 		.pipe(gulp.dest(OUTPUT_DIR));
 }
 
-exports.default = gulp.parallel(html, css, js, static);
+exports.default = gulp.parallel(html, css, js, staticFiles);
 
 exports.watch = () => {
-	gulp.watch(join(SOURCE_DIR, "index.html"), html);
-	gulp.watch(join(SOURCE_DIR, "scss", "*.scss"), css);
-	gulp.watch(join(SOURCE_DIR, "*.js"), js);
-	gulp.watch(join(SOURCE_DIR, "static", "**", "*"), static);
+	gulp.watch(path.join(SOURCE_DIR, "index.html"), html);
+	gulp.watch(path.join(SOURCE_DIR, "scss", "*.scss"), css);
+	gulp.watch(path.join(SOURCE_DIR, "*.js"), js);
+	gulp.watch(path.join(SOURCE_DIR, "static", "**", "*"), staticFiles);
 };

package.json

@@ -13,11 +13,17 @@
 	"scripts": {
 		"build": "gulp",
 		"dev": "gulp watch",
+		"fmt": "prettier --write .",
+		"lint": "prettier --check . && eslint .",
+		"test": "pnpm run lint",
 		"serve": "sirv ./public --dev"
 	},
 	"devDependencies": {
 		"autoprefixer": "^10.4.2",
 		"browserslist": "^4.19.1",
+		"eslint": "^8.35.0",
+		"eslint-config-prettier": "^8.6.0",
+		"eslint-plugin-unicorn": "^45.0.2",
 		"gulp": "^4.0.2",
 		"gulp-postcss": "^9.0.1",
 		"gulp-sass": "^5.1.0",
@@ -25,7 +31,7 @@
 		"gulp-terser": "^2.1.0",
 		"postcss": "^8.4.6",
 		"postcss-csso": "^6.0.0",
-		"prettier": "2.5.1",
+		"prettier": "^2.8.4",
 		"sass": "^1.49.7",
 		"sirv-cli": "^2.0.2"
 	}

src/count.js

@@ -38,25 +38,24 @@ if (
 	window.location.host === "s2f.kytta.dev" ||
 	window.location.host === "share2fedi.kytta.dev"
 ) {
-	fetch("//gc.zgo.at/", { method: "HEAD" })
-		.then((result) => {
-			if (!result.ok) {
-				return;
-			}
+	// eslint-disable-next-line unicorn/prefer-top-level-await
+	fetch("//gc.zgo.at/", { method: "HEAD" }).then((result) => {
+		if (!result.ok) {
+			return;
+		}
 
-			const screen = encodeURIComponent(
-				[
-					window.screen.width,
-					window.screen.height,
-					window.devicePixelRatio || 1,
-				].join(",")
-			);
+		const screen = encodeURIComponent(
+			[
+				window.screen.width,
+				window.screen.height,
+				window.devicePixelRatio || 1,
+			].join(",")
+		);
 
-			const random = encodeURIComponent(Math.random().toString(36).slice(2));
+		const random = encodeURIComponent(Math.random().toString(36).slice(2));
 
-			navigator.sendBeacon(
-				`https://share2fedi.goatcounter.com/count?p=%2F&s=${screen}&b=0&rnd=${random}`
-			);
-		})
-		.catch((_) => {});
+		navigator.sendBeacon(
+			`https://share2fedi.goatcounter.com/count?p=%2F&s=${screen}&b=0&rnd=${random}`
+		);
+	});
 }

src/main.js

@@ -30,8 +30,8 @@ const INSTANCE_LIST_URL = "https://api.joinmastodon.org/servers";
 const LOCAL_STORAGE_KEY = "recentInstances";
 const RECENT_INSTANCES_SIZE = 5;
 
-const $instance = document.getElementById("instance");
-const $instanceDatalist = document.getElementById("instanceDatalist");
+const $instance = document.querySelector("#instance");
+const $instanceDatalist = document.querySelector("#instanceDatalist");
 
 /**
  * Adds missing "https://" and ending slash to the URL
@@ -40,7 +40,7 @@ const $instanceDatalist = document.getElementById("instanceDatalist");
  * @return {string} normalized URL
  */
 function normalizeUrl(url) {
-	if (url.indexOf("http://") == -1 && url.indexOf("https://") == -1) {
+	if (!url.includes("http://") && !url.includes("https://")) {
 		url = "https://" + url;
 	}
 	if (url.charAt(url.length - 1) !== "/") {
@@ -59,16 +59,18 @@ function onLoadInstancesSuccess() {
 	}
 
 	const currentInstance = $instance.value;
-	const instanceDomains = JSON.parse(this.responseText).map((i) => i.domain);
-	if (currentInstance && instanceDomains.indexOf(currentInstance) < 0) {
+	const instanceDomains = JSON.parse(this.responseText).map(
+		(index) => index.domain
+	);
+	if (currentInstance && !instanceDomains.includes(currentInstance)) {
 		instanceDomains.push(currentInstance);
 	}
 	instanceDomains.sort();
 
-	for (let i = 0; i < instanceDomains.length; i++) {
+	for (const instanceDomain of instanceDomains) {
 		const $option = document.createElement("option");
-		$option.value = normalizeUrl(instanceDomains[i]);
-		$instanceDatalist.appendChild($option);
+		$option.value = normalizeUrl(instanceDomain);
+		$instanceDatalist.append($option);
 	}
 }
 
@@ -106,6 +108,8 @@ function rememberInstance(instance) {
 	);
 }
 
+// Used in HTML
+// eslint-disable-next-line no-unused-vars
 function onFormSubmit(form) {
 	const formData = new FormData(form);
 
@@ -117,17 +121,19 @@ function onFormSubmit(form) {
 
 let prefillInstance = getRecentInstances()[0];
 
-const URLParams = window.location.search.substr(1).split("&");
-for (let i = 0; i < URLParams.length; i++) {
-	const URLParamPair = URLParams[i].split("=");
-	if (URLParamPair[0] === "text") {
-		document.getElementById("text").value = decodeURIComponent(URLParamPair[1]);
-	} else if (URLParamPair[0] === "instance") {
-		prefillInstance = decodeURIComponent(URLParamPair[1]);
+const URLParameters = window.location.search.slice(1).split("&");
+for (const URLParameter of URLParameters) {
+	const URLParameterPair = URLParameter.split("=");
+	if (URLParameterPair[0] === "text") {
+		document.querySelector("#text").value = decodeURIComponent(
+			URLParameterPair[1]
+		);
+	} else if (URLParameterPair[0] === "instance") {
+		prefillInstance = decodeURIComponent(URLParameterPair[1]);
 	}
 }
 
-if (prefillInstance != null) {
+if (prefillInstance != undefined) {
 	$instance.value = normalizeUrl(prefillInstance);
 }