Add ESLint, compose-builder, YAML utils & tests

.github/workflows/docker-build-push.yml

@@ -24,27 +24,29 @@ jobs:
 
         steps:
             - name: Checkout repository
-              uses: actions/checkout@v4
+              uses: actions/checkout@v5
 
             - name: dock-dploy
               id: image
               run: |
-                  IMAGE_NAME=$(echo "${{ github.repository }}" | cut -d'/' -f2)
+                  IMAGE_NAME=$(echo "${{ github.repository }}" | cut -d'/' -f2 | tr '[:upper:]' '[:lower:]')
+                  REPO_LOWER=$(echo "${{ github.repository }}" | tr '[:upper:]' '[:lower:]')
                   echo "name=${IMAGE_NAME}" >> $GITHUB_OUTPUT
+                  echo "repo=${REPO_LOWER}" >> $GITHUB_OUTPUT
 
             - name: Set up Docker Buildx
-              uses: docker/setup-buildx-action@v3
+              uses: docker/setup-buildx-action@v4
 
             - name: Log in to Docker Hub
               if: github.event_name != 'pull_request'
-              uses: docker/login-action@v3
+              uses: docker/login-action@v4
               with:
                   username: ${{ secrets.dockerhub_username }}
                   password: ${{ secrets.dockerhub_token }}
 
             - name: Log in to GitHub Container Registry
               if: github.event_name != 'pull_request'
-              uses: docker/login-action@v3
+              uses: docker/login-action@v4
               with:
                   registry: ${{ env.REGISTRY_GHCR }}
                   username: ${{ github.actor }}
@@ -56,7 +58,7 @@ jobs:
               with:
                   images: |
                       ${{ env.REGISTRY_DOCKERHUB }}/${{ secrets.dockerhub_username }}/${{ steps.image.outputs.name }}
-                      ${{ env.REGISTRY_GHCR }}/${{ github.repository }}
+                      ${{ env.REGISTRY_GHCR }}/${{ steps.image.outputs.repo }}
                   tags: |
                       type=ref,event=branch
                       type=ref,event=pr

Dockerfile

@@ -1,5 +1,5 @@
 # Build stage
-FROM node:18-alpine AS builder
+FROM node:22-alpine AS builder
 
 WORKDIR /app
 

eslint.config.js

@@ -0,0 +1,132 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+const NO_USE_EFFECT_MESSAGE =
+  "Direct use of useEffect is banned. Use derived state, event handlers, key-resets, or useMountEffect() instead. See docs/no-useeffect.md.";
+
+const NO_INLINE_STYLE_MESSAGE =
+  "Inline style={{...}} object literals are banned. Use design tokens via classes or var(--token) in src/styles.css.";
+
+export default tseslint.config(
+  {
+    ignores: [
+      "dist/**",
+      "node_modules/**",
+      "src/routeTree.gen.ts",
+      "scripts/**",
+      ".claude/**",
+      ".cursor/**",
+      "**/*.cjs",
+    ],
+  },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2022,
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+      },
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+
+      // Catch direct named imports of useEffect specifically. We don't
+      // include this rule in `no-restricted-imports` because namespace imports
+      // (`import * as React from "react"`) reach `useEffect` through the
+      // namespace and produce false positives — the call-expression rule below
+      // catches the real offence.
+      "no-restricted-syntax": [
+        "error",
+        {
+          selector:
+            "ImportDeclaration[source.value='react'] > ImportSpecifier[imported.name='useEffect']",
+          message: NO_USE_EFFECT_MESSAGE,
+        },
+        {
+          selector: "CallExpression[callee.name='useEffect']",
+          message: NO_USE_EFFECT_MESSAGE,
+        },
+        {
+          selector:
+            "CallExpression[callee.object.name='React'][callee.property.name='useEffect']",
+          message: NO_USE_EFFECT_MESSAGE,
+        },
+        {
+          selector:
+            "JSXAttribute[name.name='style'] > JSXExpressionContainer > ObjectExpression",
+          message: NO_INLINE_STYLE_MESSAGE,
+        },
+      ],
+
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
+      ],
+      "@typescript-eslint/no-explicit-any": "warn",
+    },
+  },
+  {
+    files: ["src/hooks/useMountEffect.ts"],
+    rules: {
+      "no-restricted-imports": "off",
+      "no-restricted-syntax": "off",
+    },
+  },
+  {
+    // shadcn/ui primitives are vendored from upstream templates that use a
+    // small set of idiomatic inline styles. We accept them rather than
+    // diverging from the upstream output.
+    files: ["src/components/ui/**/*.{ts,tsx}"],
+    rules: {
+      "no-restricted-syntax": "off",
+      "@typescript-eslint/no-empty-object-type": "off",
+    },
+  },
+  {
+    // The CodeMirror runtime + lazy wrapper deliberately use style={{}} for
+    // dynamically-computed editor sizing.
+    files: [
+      "src/components/CodeEditor.tsx",
+      "src/components/CodeMirrorRuntime.tsx",
+    ],
+    rules: {
+      "no-restricted-syntax": "off",
+    },
+  },
+  {
+    // Marketplace card + VPN provider tiles apply token-valued backgrounds
+    // (CSS variables) via inline style — the value is data-driven per tile.
+    files: [
+      "src/components/templates/TemplateCard.tsx",
+      "src/components/compose-builder/VpnTab/VpnProviderTiles.tsx",
+    ],
+    rules: {
+      "no-restricted-syntax": "off",
+    },
+  },
+  {
+    files: [
+      "**/*.test.{ts,tsx}",
+      "**/*.spec.{ts,tsx}",
+      "src/__tests__/**/*.{ts,tsx}",
+    ],
+    rules: {
+      "@typescript-eslint/no-explicit-any": "off",
+    },
+  },
+);

index.html

@@ -4,10 +4,22 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="/favicon.ico" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#faf9f5" media="(prefers-color-scheme: light)" />
+    <meta name="theme-color" content="#181715" media="(prefers-color-scheme: dark)" />
     <link rel="apple-touch-icon" href="/logo.png" />
     <link rel="manifest" href="/manifest.json" />
-
+
+    <!-- Editorial typography: Instrument Serif (display) + Inter (body) + JetBrains Mono (code) -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <!-- DNS prefetch is a no-op when preconnect is honored, but covers older browsers -->
+    <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
+    <link rel="dns-prefetch" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+
     <!-- Primary Meta Tags -->
     <title>Dock-Dploy - Build Docker Compose Files Without the Hassle</title>
     <meta name="title" content="Dock-Dploy - Build Docker Compose Files Without the Hassle" />