Add eslint

Author: thorio

.github/workflows/lint.yml

@@ -16,4 +16,4 @@ jobs:
       - name: Build and run dev container task
         uses: devcontainers/[email protected]
         with:
-          runCmd: pnpm run build && pnpm run lint
+          runCmd: pnpm -w run build && pnpm -w run lint

errorpages/eslint.config.mjs

@@ -0,0 +1,6 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  // Your custom configs here
+)

errorpages/nuxt.config.ts

@@ -2,6 +2,7 @@ import routes from "./pages";
 
 export default defineNuxtConfig({
 	compatibilityDate: "2024-10-19",
+	modules: ["@nuxt/eslint"],
 
 	app: {
 		head: {

errorpages/package.json

@@ -4,13 +4,14 @@
 	"scripts": {
 		"build": "nuxt generate",
 		"dev": "nuxt dev --port=3001",
-		"lint": "nuxt typecheck",
+		"lint": "nuxt typecheck && eslint .",
 		"postinstall": "nuxt prepare"
 	},
 	"dependencies": {
 		"@workspace/ui-lib": "workspace:^"
 	},
 	"devDependencies": {
+		"@nuxt/eslint": "^0.6.0",
 		"@types/node": "^18.19.57",
 		"nuxt": "^3.13.2",
 		"sass": "^1.80.3"

errorpages/pages/_error/[id].html.vue

@@ -10,9 +10,11 @@ useSeoMeta({ title: `${errorpage?.name} - Chirality` });
 </script>
 
 <template>
-	<h1>{{ errorpage?.name }}</h1>
-	<sub>{{ errorpage?.subtitle }}</sub>
-	<p>{{ errorpage?.title }}</p>
+	<div>
+		<h1>{{ errorpage?.name }}</h1>
+		<sub>{{ errorpage?.subtitle }}</sub>
+		<p>{{ errorpage?.title }}</p>
+	</div>
 </template>
 
 <style lang="scss">

home/components/TileContainer.vue

@@ -6,9 +6,9 @@ defineProps<{ tiles: Tile[]; }>();
 
 <template>
 	<section>
-		<a class="tile" v-for="tile in tiles" :href="tile.url">
+		<a v-for="tile in tiles" :key="tile.name" class="tile" :href="tile.url">
 			<div class="image-container">
-				<img width="80" height="80" :src="`/icons/${tile.icon}`" alt="" />
+				<img width="80" height="80" :src="`/icons/${tile.icon}`" alt="">
 			</div>
 			<p>{{ tile.name }}</p>
 		</a>

home/eslint.config.mjs

@@ -0,0 +1,6 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  // Your custom configs here
+)

home/package.json

@@ -3,7 +3,7 @@
 	"scripts": {
 		"build": "nuxt build",
 		"dev": "nuxt dev --port=3000",
-		"lint": "nuxt typecheck",
+		"lint": "nuxt typecheck && eslint .",
 		"postinstall": "nuxt prepare"
 	},
 	"dependencies": {

home/pages/index.vue

@@ -6,6 +6,8 @@ useSeoMeta({ description: `${appName} Service Dashboard` });
 </script>
 
 <template>
-	<AppHeader :username="data!.username" />
-	<TileContainer :tiles="data!.tiles" />
+	<div>
+		<AppHeader :username="data!.username" />
+		<TileContainer :tiles="data!.tiles" />
+	</div>
 </template>

home/server/api/home.ts

@@ -2,9 +2,8 @@ import { getUser } from "~/src/user";
 import { getServices } from "~/src/services";
 
 export default defineEventHandler((e) => {
-	let user = getUser(e.node.req.headers);
+	const user = getUser(e.node.req.headers);
 
-	e.node.req.headers;
 	return {
 		username: user.name,
 		tiles: getServices(user),

home/src/config.ts

@@ -19,7 +19,7 @@ export function getConfig(): Config {
 }
 
 function loadConfig(): Config {
-	let configString = fs.readFileSync(`${process.cwd()}/config.yml`);
+	const configString = fs.readFileSync(`${process.cwd()}/config.yml`);
 
 	return yaml.parse(configString.toString());
 }

home/src/user.ts

@@ -6,9 +6,9 @@ const RemoteGroups = "remote-groups";
 const RemoteName = "remote-name";
 
 export function getUser(headers: IncomingHttpHeaders): User {
-	let user = headers[RemoteUser] as string;
-	let name = headers[RemoteName] as string ?? user;
-	let groups = headers[RemoteGroups] as string ?? "";
+	const user = headers[RemoteUser] as string;
+	const name = headers[RemoteName] as string ?? user;
+	const groups = headers[RemoteGroups] as string ?? "";
 
 	if (!user) {
 		throw new Error("Remote-User header is not set");

package.json

@@ -8,6 +8,7 @@
 		"down": "docker-compose down --remove-orphans"
 	},
 	"devDependencies": {
+		"eslint": "^9.13.0",
 		"vue-tsc": "^2.1.6"
 	}
 }