feat: tooling (ts, lint, format, commit hook)

.husky/pre-commit

@@ -0,0 +1 @@
+pnpm lint-staged

.prettierrc.json

@@ -0,0 +1,14 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "printWidth": 80,
+  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
+  "overrides": [
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro"
+      }
+    }
+  ]
+}

.vscode/extensions.json

@@ -1,4 +1,9 @@
 {
-  "recommendations": ["astro-build.astro-vscode"],
+  "recommendations": [
+    "astro-build.astro-vscode",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "oxc.oxc-vscode"
+  ],
   "unwantedRecommendations": []
 }

.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+  "explorer.fileNesting.enabled": true,
+  "explorer.fileNesting.patterns": {
+    "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .oxlint*, oxlint*, .prettier*, prettier*, .editorconfig"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit"
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "oxc.enable": true
+}

README.md

@@ -23,23 +23,23 @@ pnpm dev
 
 ## Scripts
 
-| Command | Description |
-|---------|-------------|
-| `pnpm dev` | Start dev server |
-| `pnpm build` | Production build |
-| `pnpm preview` | Preview production build |
-| `pnpm test` | Run tests in watch mode |
-| `pnpm test:run` | Run tests once (CI) |
-| `pnpm lint` | Lint with ESLint |
+| Command         | Description              |
+| --------------- | ------------------------ |
+| `pnpm dev`      | Start dev server         |
+| `pnpm build`    | Production build         |
+| `pnpm preview`  | Preview production build |
+| `pnpm test`     | Run tests in watch mode  |
+| `pnpm test:run` | Run tests once (CI)      |
+| `pnpm lint`     | Lint with ESLint         |
 
 The Open Graph image at `/og-image.png` is generated at build time from `public/og-image.svg` and `public/logo.png` via a [static file endpoint](https://docs.astro.build/en/guides/endpoints/#static-file-endpoints) (`src/pages/og-image.png.ts`).
 
 ## Environment variables
 
-| Variable | Description |
-|----------|-------------|
-| `PUBLIC_SITE_URL` | Canonical site URL for meta tags |
-| `PUBLIC_DISCORD_INVITE_URL` | Discord invite link for CTAs |
+| Variable                    | Description                      |
+| --------------------------- | -------------------------------- |
+| `PUBLIC_SITE_URL`           | Canonical site URL for meta tags |
+| `PUBLIC_DISCORD_INVITE_URL` | Discord invite link for CTAs     |
 
 ## Pages
 
@@ -51,11 +51,11 @@ The Open Graph image at `/og-image.png` is generated at build time from `public/
 
 This project includes a [`wrangler.toml`](wrangler.toml) for Cloudflare Pages.
 
-| Setting | Value |
-|---------|-------|
-| Build command | `pnpm build` |
-| Output directory | `dist` |
-| Node version | 24 |
+| Setting          | Value        |
+| ---------------- | ------------ |
+| Build command    | `pnpm build` |
+| Output directory | `dist`       |
+| Node version     | 24           |
 
 Set `PUBLIC_SITE_URL` and `PUBLIC_DISCORD_INVITE_URL` in Cloudflare Pages environment variables.
 

astro.config.mjs

@@ -1,34 +1,34 @@
 // @ts-check
-import { fileURLToPath, URL } from 'node:url';
-import { defineConfig, envField } from 'astro/config';
-import react from '@astrojs/react';
-import tailwindcss from '@tailwindcss/vite';
+import { fileURLToPath, URL } from "node:url";
+import { defineConfig, envField } from "astro/config";
+import react from "@astrojs/react";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://astro.build/config
 // Static output — deploy dist/ to Cloudflare Pages without an adapter.
 // Add @astrojs/cloudflare when switching to output: 'server'.
 export default defineConfig({
-  site: process.env.PUBLIC_SITE_URL ?? 'https://webdevdesign.example.com',
+  site: process.env.PUBLIC_SITE_URL ?? "https://webdevdesign.example.com",
   env: {
     schema: {
       PUBLIC_SITE_URL: envField.string({
-        context: 'client',
-        access: 'public',
-        default: 'https://webdevdesign.example.com',
+        context: "client",
+        access: "public",
+        default: "https://webdevdesign.example.com",
       }),
       PUBLIC_DISCORD_INVITE_URL: envField.string({
-        context: 'client',
-        access: 'public',
-        default: 'https://discord.gg/webdevdesign',
+        context: "client",
+        access: "public",
+        default: "https://discord.gg/webdevdesign",
       }),
     },
   },
-  output: 'static',
+  output: "static",
   integrations: [react()],
   vite: {
     resolve: {
       alias: {
-        '@': fileURLToPath(new URL('./src', import.meta.url)),
+        "@": fileURLToPath(new URL("./src", import.meta.url)),
       },
     },
     plugins: [tailwindcss()],

eslint.config.ts

@@ -0,0 +1,38 @@
+import js from "@eslint/js";
+import astroParser from "astro-eslint-parser";
+import prettierConfig from "eslint-config-prettier";
+import astro from "eslint-plugin-astro";
+import oxlint from "eslint-plugin-oxlint";
+import { defineConfig } from "eslint/config";
+import tseslint from "typescript-eslint";
+
+export default defineConfig([
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...astro.configs.recommended,
+  ...oxlint.configs["flat/recommended"],
+
+  prettierConfig,
+  {
+    ignores: ["dist/", ".astro/", "node_modules/", "pnpm-lock.yaml"],
+  },
+  {
+    files: ["**/*.{mjs,js,cjs}"],
+    languageOptions: {
+      globals: {
+        process: "readonly",
+      },
+    },
+  },
+  {
+    files: ["**/*.astro"],
+    languageOptions: {
+      parser: astroParser,
+      parserOptions: {
+        parser: tseslint.parser,
+        extraFileExtensions: [".astro"],
+        sourceType: "module",
+      },
+    },
+  },
+]);

package.json

@@ -8,23 +8,31 @@
   },
   "scripts": {
     "dev": "astro dev",
-    "build": "astro build",
+    "build": "astro check && astro build",
     "preview": "astro preview",
     "astro": "astro",
-    "lint": "eslint .",
+    "lint:eslint": "eslint . --fix",
+    "lint:oxlint": "oxlint . --fix",
+    "lint": "pnpm lint:eslint && pnpm lint:oxlint",
     "test": "vitest",
     "test:run": "vitest run",
-    "test:coverage": "vitest run --coverage"
+    "typecheck": "astro check",
+    "test:coverage": "vitest run --coverage",
+    "format": "prettier . --write",
+    "prepare": "husky"
   },
   "dependencies": {
+    "@astrojs/check": "^0.9.9",
     "@astrojs/react": "^5.0.7",
+    "@astrojs/ts-plugin": "^1.10.9",
     "@tailwindcss/vite": "^4.3.0",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "astro": "^6.4.4",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "tailwindcss": "^4.3.0",
+    "typescript": "^6.0.3",
     "zod": "^4.4.3"
   },
   "devDependencies": {
@@ -34,11 +42,30 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^25.9.3",
+    "astro-eslint-parser": "^1.4.0",
     "eslint": "^10.4.1",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-astro": "^1.7.0",
+    "eslint-plugin-oxlint": "^1.69.0",
+    "husky": "^9.1.7",
     "jsdom": "^29.1.1",
+    "lint-staged": "^17.0.7",
+    "oxlint": "^1.69.0",
+    "prettier": "^3.8.4",
+    "prettier-plugin-astro": "^0.14.1",
+    "prettier-plugin-tailwindcss": "^0.8.0",
     "sharp": "^0.34.5",
     "typescript-eslint": "^8.61.0",
     "vitest": "^4.1.8"
+  },
+  "lint-staged": {
+    "*.{js,ts,mjs,cjs}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{astro,json,md,yml,yaml}": [
+      "prettier --write"
+    ]
   }
-}
+}