clean up code and set up better linting

.github/workflows/build.yml

@@ -1,22 +1,22 @@
 name: Build test
 on:
-  workflow_dispatch:        # can be triggered manually
-  pull_request:             # and for PRs
-jobs:  
-  build_site:    
-    runs-on: ubuntu-latest    
-    steps:      
-      - name: Checkout        
+  workflow_dispatch: # can be triggered manually
+  pull_request: # and for PRs
+jobs:
+  build_site:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
         uses: actions/checkout@v4
-      - name: Install Node.js        
-        uses: actions/setup-node@v4        
-        with:          
-          node-version: 20          
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
           cache: npm
-      - name: Install dependencies        
+      - name: Install dependencies
         run: npm install
-      - name: build        
-        env:          
-          BASE_PATH: '/${{ github.event.repository.name }}'        
+      - name: build
+        env:
+          BASE_PATH: "/${{ github.event.repository.name }}"
         run: |
           npm run build

.github/workflows/deploy.yml

@@ -1,24 +1,24 @@
 name: Deploy to GitHub Pages
 on:
-  workflow_dispatch:        # can be triggered manually
-  push:    
-    branches: 'main'
-jobs:  
-  build_site:    
-    runs-on: ubuntu-latest    
-    steps:      
-      - name: Checkout        
+  workflow_dispatch: # can be triggered manually
+  push:
+    branches: "main"
+jobs:
+  build_site:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
         uses: actions/checkout@v4
-      - name: Install Node.js        
-        uses: actions/setup-node@v4        
-        with:          
-          node-version: 20          
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
           cache: npm
-      - name: Install dependencies        
+      - name: Install dependencies
         run: npm install
-      - name: build        
-        env:          
-          BASE_PATH: '/${{ github.event.repository.name }}'        
+      - name: build
+        env:
+          BASE_PATH: "/${{ github.event.repository.name }}"
         run: |
           npm run build
       - name: Deploy to the gh-pages branch
@@ -27,4 +27,3 @@ jobs:
           branch: gh-pages
           folder: build
           clean: true
-

.github/workflows/eslint.yml

@@ -11,10 +11,10 @@ name: ESLint
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ["main"]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ "main" ]
+    branches: ["main"]
   # schedule:  If we need to run this regularly, we can uncomment this
   #  - cron: '33 8 * * 0'
 

.prettierrc

@@ -4,9 +4,7 @@
   "trailingComma": "none",
   "printWidth": 100,
   "tabWidth": 2,
-  "plugins": [
-    "prettier-plugin-svelte"
-  ],
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
   "overrides": [
     {
       "files": "*.svelte",

.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "firefox",
+      "request": "launch",
+      "reAttach": true,
+      "name": "Run Firefox debugger",
+      "url": "http://localhost:5173/",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

README.md

@@ -21,7 +21,7 @@ This app is written in Typescript for type-safety. See: [svelte & typescript](ht
   - [Playwright](https://playwright.dev/) for end-to-end testing
   - [Prettier](https://prettier.io/) for formatting
   - ESLint for linting
- 
+
 See:
 
 - [How do I test svelte apps?](https://svelte.dev/docs/faq#how-do-i-test-svelte-apps)
@@ -33,6 +33,7 @@ Install dependencies:
 ```
 npm install
 ```
+
 Run development server:
 
 ```bash

components.json

@@ -1,14 +1,14 @@
 {
-	"$schema": "https://shadcn-svelte.com/schema.json",
-	"style": "default",
-	"tailwind": {
-		"config": "tailwind.config.js",
-		"css": "src/app.css",
-		"baseColor": "slate"
-	},
-	"aliases": {
-		"components": "$lib/components",
-		"utils": "$lib/utils"
-	},
-	"typescript": true
-}
+  "$schema": "https://shadcn-svelte.com/schema.json",
+  "style": "default",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/app.css",
+    "baseColor": "slate"
+  },
+  "aliases": {
+    "components": "$lib/components",
+    "utils": "$lib/utils"
+  },
+  "typescript": true
+}

eslint.config.js

@@ -1,33 +1,42 @@
-import js from '@eslint/js';
-import ts from 'typescript-eslint';
-import svelte from 'eslint-plugin-svelte';
-import prettier from 'eslint-config-prettier';
-import globals from 'globals';
+import js from "@eslint/js";
+import prettier from "eslint-config-prettier";
+import perfectionist from 'eslint-plugin-perfectionist'
+import sonarjs from "eslint-plugin-sonarjs";
+import svelte from "eslint-plugin-svelte";
+import globals from "globals";
+import ts from "typescript-eslint";
 
 /** @type {import('eslint').Linter.FlatConfig[]} */
 export default [
-	js.configs.recommended,
-	...ts.configs.recommended,
-	...svelte.configs['flat/recommended'],
-	prettier,
-	...svelte.configs['flat/prettier'],
-	{
-		languageOptions: {
-			globals: {
-				...globals.browser,
-				...globals.node
-			}
-		}
-	},
-	{
-		files: ['**/*.svelte'],
-		languageOptions: {
-			parserOptions: {
-				parser: ts.parser
-			}
-		}
-	},
-	{
-		ignores: ['build/', '.svelte-kit/', 'dist/', 'src/lib/components/ui']
-	}
+  js.configs.recommended,
+  ...ts.configs.recommended,
+  ...svelte.configs["flat/recommended"],
+  prettier,
+  ...svelte.configs["flat/prettier"],
+  sonarjs.configs.recommended,
+  perfectionist.configs["recommended-natural"],
+  {
+    rules: {
+      "sonarjs/no-duplicate-string": "warn"
+    }
+  },
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node
+      }
+    }
+  },
+  {
+    files: ["**/*.svelte"],
+    languageOptions: {
+      parserOptions: {
+        parser: ts.parser
+      }
+    }
+  },
+  {
+    ignores: ["build/", ".svelte-kit/", "dist/", "src/lib/components/ui"]
+  }
 ];