add linting

.github/workflows/ci-cd.yml

@@ -15,6 +15,15 @@ jobs:
 
       - run: npm run format:check
 
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: ./.github/actions/setup
+
+      - run: npm run lint:check
+
   build:
     runs-on: ubuntu-latest
     steps:
@@ -82,6 +91,7 @@ jobs:
     concurrency: deploy-group
     needs:
       - format
+      - lint
       - test
       - e2e
       - build

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npm run format:check
+npm run lint:check && npm run format:check

.husky/pre-push

@@ -1,5 +1,2 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npm run build:server --workspace=@digital-garden/blog
 npm run test --workspace=@digital-garden/blog

biome.json

@@ -1,5 +1,57 @@
 {
 	"$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+	"linter": {
+		"rules": {
+			"correctness": {
+				"noUnusedImports": "error",
+				"noUnusedVariables": "error",
+				"noUnusedPrivateClassMembers": "error",
+				"useArrayLiterals": "error",
+				"useHookAtTopLevel": "error"
+			},
+			"nursery": {
+				"useSortedClasses": {
+					"level": "error",
+					"options": {
+						"attributes": ["className"],
+						"functions": ["cn"]
+					}
+				}
+			},
+			"performance": {
+				"noBarrelFile": "error"
+			},
+			"style": {
+				"noDefaultExport": "error",
+				"noNamespace": "error",
+				"noNamespaceImport": "error",
+				"noNegationElse": "error",
+				"useBlockStatements": "error",
+				"useCollapsedElseIf": "error",
+				"useConsistentArrayType": {
+					"level": "error",
+					"options": {
+						"syntax": "generic"
+					}
+				},
+				"useFilenamingConvention": {
+					"level": "error",
+					"options": {
+						"requireAscii": true,
+						"filenameCases": ["kebab-case"]
+					}
+				},
+				"useForOf": "error",
+				"useFragmentSyntax": "error",
+				"useNamingConvention": "error",
+				"useShorthandAssign": "error"
+			},
+			"suspicious": {
+				"noConsoleLog": "error",
+				"useAwait": "error"
+			}
+		}
+	},
 	"formatter": {
 		"attributePosition": "multiline"
 	},
@@ -19,6 +71,26 @@
 		]
 	},
 	"overrides": [
+		{
+			"include": ["*.config.js"],
+			"linter": {
+				"rules": {
+					"style": {
+						"noDefaultExport": "off"
+					}
+				}
+			}
+		},
+		{
+			"include": ["*.spec.ts", "*.spec.tsx"],
+			"linter": {
+				"rules": {
+					"style": {
+						"noNamespaceImport": "off"
+					}
+				}
+			}
+		},
 		{
 			"include": ["tsconfig.*.json"],
 			"json": {

package.json

@@ -7,7 +7,10 @@
 	"scripts": {
 		"prepare": "husky install",
 		"format:check": "biome format .",
-		"format:fix": "biome format --write ."
+		"format:fix": "biome format --write .",
+		"lint:check": "biome lint .",
+		"lint:fix": "biome lint --write .",
+		"lint:fix:unsafe": "biome lint --write --unsafe ."
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^1.8.3",

packages/blog/playwright.config.js

@@ -1,5 +1,5 @@
-import { defineConfig, devices } from "@playwright/test";
 import process from "node:process";
+import { defineConfig, devices } from "@playwright/test";
 import { envSchema } from "./src/config/models/env.model.js";
 
 const env = envSchema.parse(process.env);
@@ -12,6 +12,7 @@ export default defineConfig({
 	workers: env.CI ? 1 : undefined,
 	reporter: "html",
 	use: {
+		// biome-ignore lint/style/useNamingConvention: 3-rd party type
 		baseURL: `http://localhost:${env.PORT}`,
 		trace: "on-first-retry",
 	},

packages/blog/src/client.ts

@@ -7,6 +7,7 @@ import "./style.css";
 
 declare global {
 	interface Window {
+		// biome-ignore lint/style/useNamingConvention: 3-rd party type
 		Alpine: typeof Alpine;
 	}
 }

packages/blog/src/config/models/env.model.ts

@@ -1,9 +1,13 @@
 import { z } from "zod";
 
 export const envSchema = z.object({
+	// biome-ignore lint/style/useNamingConvention: env variables have different convention
 	NODE_ENV: z.enum(["development", "production"]).default("development"),
+	// biome-ignore lint/style/useNamingConvention: env variables have different convention
 	CI: z.coerce.boolean().default(false),
+	// biome-ignore lint/style/useNamingConvention: env variables have different convention
 	PORT: z.coerce.number().default(3000),
+	// biome-ignore lint/style/useNamingConvention: env variables have different convention
 	BASE_URL: z.string().default("http://localhost:3000"),
 });
 export type EnvModel = z.infer<typeof envSchema>;

packages/blog/src/content/utils/fs.spec.ts

@@ -3,7 +3,7 @@ import { describe, it } from "node:test";
 import { getIdFromContentFilePath } from "./fs.js";
 
 describe("getIdFromContentFilePath", () => {
-	it("should return the slug from the file path", async () => {
+	it("should return the slug from the file path", () => {
 		const input =
 			"posts/branding-an-angular-app-with-docker-volumes-and-css3-variables/index.md";
 		const expected =
@@ -23,7 +23,7 @@ describe("getIdFromContentFilePath", () => {
 		});
 	});
 
-	it("should throw an error if the slug cannot be extracted", async () => {
+	it("should throw an error if the slug cannot be extracted", () => {
 		const input = "posts/index.md";
 
 		assert.throws(() => getIdFromContentFilePath(input), {

packages/blog/src/content/utils/fs.ts

@@ -1,5 +1,5 @@
-import fg from "fast-glob";
 import path from "node:path";
+import fg from "fast-glob";
 import { read } from "to-vfile";
 import type { VFile } from "vfile";
 import { resolveContentPath } from "./path.js";
@@ -8,7 +8,7 @@ import { resolveContentPath } from "./path.js";
  * content-specific replacement for fs.readdir with filter for only content files (excluding content assets files)
  * @returns list of content file paths relative to content root directory
  */
-export async function readContentDir(prefix = ""): Promise<string[]> {
+export async function readContentDir(prefix = ""): Promise<Array<string>> {
 	const prefixAdjusted = `${prefix}/**/index.md`;
 
 	return await fg(prefixAdjusted, {
@@ -40,7 +40,7 @@ export function getIdFromContentFilePath(filePath: string): string {
 		throw new Error(`Invalid content file path: ${filePath}`);
 	}
 
-	return filepathParts.at(-2)!;
+	return filepathParts.at(-2) as string;
 }
 
 const minValidContentFilePathLength = 3;

packages/blog/src/content/utils/path.spec.ts

@@ -5,15 +5,15 @@ import { describe, it } from "node:test";
 import { resolveContentPath } from "./path.js";
 
 describe("resolveContentPath", () => {
-	it("should resolve absolute path to content", async () => {
+	it("should resolve absolute path to content", () => {
 		const input = "posts";
 		const expected = path.resolve(process.cwd(), "content/posts");
 
 		const actual = resolveContentPath(input);
 		assert.equal(actual, expected);
 	});
 
-	it("should ignore leading slash", async () => {
+	it("should ignore leading slash", () => {
 		const input = "/posts";
 		const expected = path.resolve(process.cwd(), "content/posts");
 

packages/blog/src/content/utils/processor.ts

@@ -1,7 +1,7 @@
+import path from "node:path";
 import rehypeShiki from "@shikijs/rehype";
 import type { Root, Text } from "hast";
 import { h } from "hastscript";
-import path from "node:path";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypeExternalLinks from "rehype-external-links";
 import rehypeSlug from "rehype-slug";
@@ -11,7 +11,7 @@ import remarkGfm from "remark-gfm";
 import remarkParse from "remark-parse";
 import remarkReadingTime from "remark-reading-time";
 import remarkRehype from "remark-rehype";
-import { unified, type Plugin } from "unified";
+import { type Plugin, unified } from "unified";
 import { visit } from "unist-util-visit";
 import { matter } from "vfile-matter";
 import { isHttpUrl } from "../../http/utils/url.js";
@@ -28,7 +28,9 @@ const remarkContent: Plugin = () => (_, file) => {
 		throw new Error("Expected dirname to be defined");
 	}
 
-	(file.data as ContentModel).id = file.dirname.split(path.sep).at(-1)!;
+	(file.data as ContentModel).id = file.dirname
+		.split(path.sep)
+		.at(-1) as string;
 	(file.data as ContentModel).path = file.dirname.replace(
 		resolveContentPath(),
 		"",

packages/blog/src/global.d.ts

@@ -3,13 +3,16 @@ import "react";
 import type { EnvModel } from "./config/models/env.model.js";
 
 declare module "react" {
+	// biome-ignore lint/style/useNamingConvention: 3-rd party type
 	interface CSSProperties {
 		[key: `--${string}`]: string | number;
 	}
 
+	// biome-ignore lint/style/noNamespace: 3-rd party type
+	// biome-ignore lint/style/useNamingConvention: 3-rd party type
 	namespace JSX {
 		interface IntrinsicElements {
-			"lottie-player": any;
+			"lottie-player": unknown;
 		}
 	}
 }

packages/blog/src/home/components/intro.tsx

@@ -5,8 +5,8 @@ import { ThemedImage } from "../../ui/components/themed-image.js";
 import { cn } from "../../ui/utils/cn.js";
 
 export const Intro: FC = () => (
-	<StandOut className="items-center my-4 dark:!border-2 dark:!rounded-lg dark:!border-sky-200 dark:rotate-3 dark:shadow-[0_0_2px_#fff,inset_0_0_2px_#fff,0_0_5px_rgb(6,182,255),0_0_15px_rgb(6,182,255),0_0_30px_rgb(6,182,255)]">
-		<div className="hidden lg:block shrink-0">
+	<StandOut className="dark:!border-2 dark:!rounded-lg dark:!border-sky-200 my-4 items-center dark:rotate-3 dark:shadow-[0_0_2px_#fff,inset_0_0_2px_#fff,0_0_5px_rgb(6,182,255),0_0_15px_rgb(6,182,255),0_0_30px_rgb(6,182,255)]">
+		<div className="hidden shrink-0 lg:block">
 			<ThemedImage
 				src="/home/intro-logo.webp"
 				srcDark="/home/intro-logo-dark.webp"
@@ -19,15 +19,15 @@ export const Intro: FC = () => (
 			<Text base="strong">Hi, there, I'm Mordechai! 👋</Text>
 			<Text
 				base="span"
-				className={cn("text-sm font-light")}
+				className={cn("font-light text-sm")}
 			>
 				Welcome to my digital garden, here I write about all sorts of things
 				(mostly about technologies, a little bit on gaming, traveling and
 				self-reflecting)
 			</Text>
 			<Text
 				base="span"
-				className={cn("text-sm font-light")}
+				className={cn("font-light text-sm")}
 			>
 				Make yourself at home, take a sit and grab something to{" "}
 				<span className="line-through">drink</span> read

packages/blog/src/home/components/social-links.tsx

@@ -47,20 +47,20 @@ const socialLinksMeta = [
 	},
 ] as const;
 
-const socialLinks: ReactNode[] = socialLinksMeta.map((socialLink) => (
+const socialLinks: Array<ReactNode> = socialLinksMeta.map((socialLink) => (
 	<li key={socialLink.url}>
 		<ButtonLink
 			variant="outlined"
 			href={socialLink.url}
 			target="_blank"
 			className={cn(
-				"text-slate-800 dark:text-slate-100 flex h-24 w-24 flex-col items-center justify-center gap-2 p-2",
+				"flex h-24 w-24 flex-col items-center justify-center gap-2 p-2 text-slate-800 dark:text-slate-100",
 			)}
 		>
 			<span className="text-xl">
 				<Icon glyph={socialLink.glyph} />
 			</span>
-			<span className="truncate max-w-full">{socialLink.label}</span>
+			<span className="max-w-full truncate">{socialLink.label}</span>
 		</ButtonLink>
 	</li>
 ));

packages/blog/src/home/pages/about.page.tsx

@@ -1,4 +1,4 @@
-import type { FastifyPluginAsync } from "fastify";
+import type { FastifyPluginCallback } from "fastify";
 import { contentType } from "../../http/types/content-type.js";
 import { statusCode } from "../../http/types/status-code.js";
 import { DefaultLayout } from "../../ui/layouts/default.layout.js";
@@ -7,8 +7,8 @@ import { Intro } from "../components/intro.js";
 import { SocialLinks } from "../components/social-links.js";
 import { StayUpToDate } from "../components/stay-up-to-date.js";
 
-export const aboutPage: FastifyPluginAsync = async (app) => {
-	app.get("/about", async (_, reply) => {
+export const aboutPage: FastifyPluginCallback = (app, _, done) => {
+	app.get("/about", (_, reply) => {
 		return reply
 			.status(statusCode.ok)
 			.type(contentType.html)
@@ -28,4 +28,6 @@ export const aboutPage: FastifyPluginAsync = async (app) => {
 				),
 			);
 	});
+
+	done();
 };

packages/blog/src/home/pages/home.page.tsx

@@ -1,4 +1,4 @@
-import type { FastifyPluginAsync } from "fastify";
+import type { FastifyPluginCallback } from "fastify";
 import { contentType } from "../../http/types/content-type.js";
 import { statusCode } from "../../http/types/status-code.js";
 import { PinnedPosts } from "../../posts/components/pinned-posts.js";
@@ -10,7 +10,7 @@ import { DefaultLayout } from "../../ui/layouts/default.layout.js";
 import { render } from "../../ui/utils/render.js";
 import { Intro } from "../components/intro.js";
 
-export const homePage: FastifyPluginAsync = async (app) => {
+export const homePage: FastifyPluginCallback = (app, _, done) => {
 	app.get("/", async (_, reply) => {
 		const [allPosts, allProjects] = await Promise.all([
 			findPosts(),
@@ -45,4 +45,6 @@ export const homePage: FastifyPluginAsync = async (app) => {
 				),
 			);
 	});
+
+	done();
 };