chore(pre-commit) / refactor(templates): add ESLint pre-commit hook + refactor result.jinja (coderamp-labs#379)

filipchristiansen · ix-56h · commit 6ebadca504e2 · 2025-07-07T23:49:03.000+02:00
* chore(pre-commit) / refactor(templates): add ESLint hook + refactor `result.jinja`

* Add `eslint` to `pre-commit` hooks
* `getFileName` + `toggleFile` moved to `utils.js`
* Run linter
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -2,65 +2,82 @@ repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
     rev: v5.0.0
     hooks:
-      # Files
       - id: check-added-large-files
-        description: "Prevent large files from being committed."
-        args: ["--maxkb=10000"]
+        description: 'Prevent large files from being committed.'
+        args: ['--maxkb=10000']
+
       - id: check-case-conflict
-        description: "Check for files that would conflict in case-insensitive filesystems."
+        description: 'Check for files that would conflict in case-insensitive filesystems.'
+
       - id: fix-byte-order-marker
-        description: "Remove utf-8 byte order marker."
+        description: 'Remove utf-8 byte order marker.'
+
       - id: mixed-line-ending
-        description: "Replace mixed line ending."
+        description: 'Replace mixed line ending.'
 
-      # Links
       - id: destroyed-symlinks
-        description: "Detect symlinks which are changed to regular files with a content of a path which that symlink was pointing to."
+        description: 'Detect symlinks which are changed to regular files with a content of a path which that symlink was pointing to.'
 
-      # File files for parseable syntax: python
       - id: check-ast
+        description: 'Check for parseable syntax.'
 
-      # File and line endings
       - id: end-of-file-fixer
-        description: "Ensure that a file is either empty, or ends with one newline."
+        description: 'Ensure that a file is either empty, or ends with one newline.'
+
       - id: trailing-whitespace
-        description: "Trim trailing whitespace."
+        description: 'Trim trailing whitespace.'
 
-      # Python
       - id: check-docstring-first
-        description: "Check a common error of defining a docstring after code."
+        description: 'Check a common error of defining a docstring after code.'
+
       - id: requirements-txt-fixer
-        description: "Sort entries in requirements.txt."
+        description: 'Sort entries in requirements.txt.'
 
   - repo: https://github.com/MarcoGorelli/absolufy-imports
     rev: v0.3.1
     hooks:
       - id: absolufy-imports
-        description: "Automatically convert relative imports to absolute. (Use `args: [--never]` to revert.)"
+        description: 'Automatically convert relative imports to absolute. (Use `args: [--never]` to revert.)'
 
   - repo: https://github.com/asottile/pyupgrade
     rev: v3.20.0
     hooks:
       - id: pyupgrade
-        description: "Automatically upgrade syntax for newer versions."
+        description: 'Automatically upgrade syntax for newer versions.'
         args: [--py3-plus, --py36-plus]
 
   - repo: https://github.com/pre-commit/pygrep-hooks
     rev: v1.10.0
     hooks:
       - id: python-check-blanket-noqa
-        description: "Enforce that `noqa` annotations always occur with specific codes. Sample annotations: `# noqa: F401`, `# noqa: F401,W203`."
+        description: 'Enforce that `# noqa` annotations always occur with specific codes.'
+
       - id: python-check-blanket-type-ignore
-        description: "Enforce that `# type: ignore` annotations always occur with specific codes. Sample annotations: `# type: ignore[attr-defined]`, `# type: ignore[attr-defined, name-defined]`."
+        description: 'Enforce that `# type: ignore` annotations always occur with specific codes.'
+
       - id: python-use-type-annotations
-        description: "Enforce that python3.6+ type annotations are used instead of type comments."
+        description: 'Enforce that python3.6+ type annotations are used instead of type comments.'
 
   - repo: https://github.com/PyCQA/isort
     rev: 6.0.1
     hooks:
       - id: isort
-        description: "Sort imports alphabetically, and automatically separated into sections and by type."
+        description: 'Sort imports alphabetically, and automatically separated into sections and by type.'
 
+  - repo: https://github.com/pre-commit/mirrors-eslint
+    rev: v9.30.1
+    hooks:
+      - id: eslint
+        description: 'Lint javascript files.'
+        files: \.js$
+        args: [--max-warnings=0, --fix]
+        additional_dependencies:
+          [
+            'eslint@9.30.1',
+            '@eslint/js@9.30.1',
+            'eslint-plugin-import@2.32.0',
+            'globals@16.3.0',
+          ]
 
   - repo: https://github.com/djlint/djLint
     rev: v1.36.4
@@ -71,11 +88,11 @@ repos:
     rev: v0.45.0
     hooks:
       - id: markdownlint
-        description: "Lint markdown files."
-        args: ["--disable=line-length"]
+        description: 'Lint markdown files.'
+        args: ['--disable=line-length']
 
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.12.1
+    rev: v0.12.2
     hooks:
       - id: ruff-check
       - id: ruff-format
@@ -97,17 +114,19 @@ repos:
         additional_dependencies:
           [
             click>=8.0.0,
-            "fastapi[standard]>=0.109.1",
+            'fastapi[standard]>=0.109.1',
+            httpx,
+            pathspec>=0.12.1,
             pydantic,
             pytest-asyncio,
             pytest-mock,
             python-dotenv,
             slowapi,
             starlette>=0.40.0,
-            tiktoken,
-            pathspec,
+            tiktoken>=0.7.0,
             uvicorn>=0.11.7,
           ]
+
       - id: pylint
         name: pylint for tests
         files: ^tests/
@@ -116,15 +135,16 @@ repos:
         additional_dependencies:
           [
             click>=8.0.0,
-            "fastapi[standard]>=0.109.1",
+            'fastapi[standard]>=0.109.1',
+            httpx,
+            pathspec>=0.12.1,
             pydantic,
             pytest-asyncio,
             pytest-mock,
             python-dotenv,
             slowapi,
             starlette>=0.40.0,
-            tiktoken,
-            pathspec,
+            tiktoken>=0.7.0,
             uvicorn>=0.11.7,
           ]
 
diff --git a/eslint.config.cjs b/eslint.config.cjs
@@ -0,0 +1,74 @@
+const js = require('@eslint/js');
+const globals = require('globals');
+const importPlugin = require('eslint-plugin-import');
+
+module.exports = [
+  js.configs.recommended,
+
+  {
+    files: ['src/static/js/**/*.js'],
+
+    languageOptions: {
+      parserOptions: { ecmaVersion: 2021, sourceType: 'module' },
+      globals: {
+        ...globals.browser,
+        changePattern: 'readonly',
+        copyFullDigest: 'readonly',
+        copyText: 'readonly',
+        downloadFullDigest: 'readonly',
+        handleSubmit: 'readonly',
+        posthog: 'readonly',
+        submitExample: 'readonly',
+        toggleAccessSettings: 'readonly',
+        toggleFile: 'readonly',
+      },
+    },
+
+    plugins: { import: importPlugin },
+
+    rules: {
+      // Import hygiene (eslint-plugin-import)
+      'import/no-extraneous-dependencies': 'error',
+      'import/no-unresolved': 'error',
+      'import/order': ['warn', { alphabetize: { order: 'asc' } }],
+
+      // Safety & bug-catchers
+      'consistent-return': 'error',
+      'default-case': 'error',
+      'no-implicit-globals': 'error',
+      'no-shadow': 'error',
+
+      // Maintainability / complexity
+      complexity: ['warn', 10],
+      'max-depth': ['warn', 4],
+      'max-lines': ['warn', 500],
+      'max-params': ['warn', 5],
+
+      // Stylistic consistency (auto-fixable)
+      'arrow-parens': ['error', 'always'],
+      curly: ['error', 'all'],
+      indent: ['error', 4, { SwitchCase: 2 }],
+      'newline-per-chained-call': ['warn', { ignoreChainWithDepth: 2 }],
+      'no-multi-spaces': 'error',
+      'object-shorthand': ['error', 'always'],
+      'padding-line-between-statements': [
+        'warn',
+        { blankLine: 'always', prev: '*', next: 'return' },
+        { blankLine: 'always', prev: ['const', 'let', 'var'], next: '*' },
+        { blankLine: 'any', prev: ['const', 'let', 'var'], next: ['const', 'let', 'var'] },
+      ],
+      'quote-props': ['error', 'consistent-as-needed'],
+      quotes: ['error', 'single', { avoidEscape: true }],
+      semi: 'error',
+
+      // Modern / performance tips
+      'arrow-body-style': ['warn', 'as-needed'],
+      'prefer-arrow-callback': 'error',
+      'prefer-exponentiation-operator': 'error',
+      'prefer-numeric-literals': 'error',
+      'prefer-object-has-own': 'warn',
+      'prefer-object-spread': 'error',
+      'prefer-template': 'error',
+    },
+  },
+];
diff --git a/src/server/templates/components/tailwind_components.html b/src/server/templates/components/tailwind_components.html
@@ -1,15 +1,32 @@
 <style type="text/tailwindcss">
-    @layer components {
-        .badge-new { @apply inline-block -rotate-6 -translate-y-1 mx-1 px-1 bg-[#FE4A60] border border-gray-900 text-white text-[10px] font-bold shadow-[2px_2px_0_0_rgba(0,0,0,1)]; }
-        .landing-page-title { @apply inline-block w-full relative text-center text-4xl sm:text-5xl md:text-6xl lg:text-7xl sm:pt-20 lg:pt-5 font-bold tracking-tighter; }
-        .intro-text { @apply text-center text-gray-600 text-lg max-w-2xl mx-auto; }
-        .sparkle-red { @apply absolute flex-shrink-0 h-auto w-14 sm:w-20 md:w-24 p-2 left-0 lg:ml-32 -translate-x-2 md:translate-x-10 lg:-translate-x-full -translate-y-4 sm:-translate-y-8 md:-translate-y-0 lg:-translate-y-10; }
-        .sparkle-green { @apply absolute flex-shrink-0 right-0 bottom-0 w-10 sm:w-16 lg:w-20 -translate-x-10 lg:-translate-x-12 translate-y-4 sm:translate-y-10 md:translate-y-2 lg:translate-y-4; }
-        .pattern-select { @apply min-w-max appearance-none pr-6 pl-2 py-2 bg-[#e6e8eb] border-r-[3px] border-gray-900 cursor-pointer focus:outline-none; }
+  @layer components {
+    .badge-new {
+      @apply inline-block -rotate-6 -translate-y-1 mx-1 px-1 bg-[#FE4A60] border border-gray-900 text-white text-[10px] font-bold shadow-[2px_2px_0_0_rgba(0,0,0,1)];
     }
+    .landing-page-title {
+      @apply inline-block w-full relative text-center text-4xl sm:text-5xl md:text-6xl lg:text-7xl sm:pt-20 lg:pt-5 font-bold tracking-tighter;
+    }
+    .intro-text {
+      @apply text-center text-gray-600 text-lg max-w-2xl mx-auto;
+    }
+    .sparkle-red {
+      @apply absolute flex-shrink-0 h-auto w-14 sm:w-20 md:w-24 p-2 left-0 lg:ml-32 -translate-x-2 md:translate-x-10 lg:-translate-x-full -translate-y-4 sm:-translate-y-8 md:-translate-y-0 lg:-translate-y-10;
+    }
+    .sparkle-green {
+      @apply absolute flex-shrink-0 right-0 bottom-0 w-10 sm:w-16 lg:w-20 -translate-x-10 lg:-translate-x-12 translate-y-4 sm:translate-y-10 md:translate-y-2 lg:translate-y-4;
+    }
+    .pattern-select {
+      @apply min-w-max appearance-none pr-6 pl-2 py-2 bg-[#e6e8eb] border-r-[3px] border-gray-900 cursor-pointer focus:outline-none;
+    }
+  }
 
-    @layer utilities {
-        .no-drag { @apply pointer-events-none select-none; -webkit-user-drag: none; }
-        .link-bounce { @apply transition-transform hover:-translate-y-0.5; }
+  @layer utilities {
+    .no-drag {
+      @apply pointer-events-none select-none;
+      -webkit-user-drag: none;
+    }
+    .link-bounce {
+      @apply transition-transform hover:-translate-y-0.5;
     }
+  }
 </style>
diff --git a/src/static/js/git.js b/src/static/js/git.js
@@ -1,26 +1,29 @@
 function waitForStars() {
     return new Promise((resolve) => {
         const check = () => {
-            const stars = document.getElementById("github-stars");
-            if (stars && stars.textContent !== "0") resolve();
-            else setTimeout(check, 10);
+            const stars = document.getElementById('github-stars');
+
+            if (stars && stars.textContent !== '0') {resolve();}
+            else {setTimeout(check, 10);}
         };
+
         check();
     });
 }
 
-document.addEventListener("DOMContentLoaded", () => {
-    const urlInput = document.getElementById("input_text");
-    const form     = document.getElementById("ingestForm");
+document.addEventListener('DOMContentLoaded', () => {
+    const urlInput = document.getElementById('input_text');
+    const form = document.getElementById('ingestForm');
 
     if (urlInput && urlInput.value.trim() && form) {
-        // Wait for stars to be loaded before submitting
+    // Wait for stars to be loaded before submitting
         waitForStars().then(() => {
-            const submitEvent = new SubmitEvent("submit", {
+            const submitEvent = new SubmitEvent('submit', {
                 cancelable: true,
                 bubbles: true
             });
-            Object.defineProperty(submitEvent, "target", {
+
+            Object.defineProperty(submitEvent, 'target', {
                 value: form,
                 enumerable: true
             });
diff --git a/src/static/js/git_form.js b/src/static/js/git_form.js
@@ -14,19 +14,20 @@ function changePattern() {
 
 // Show/hide the Personal-Access-Token section when the "Private repository" checkbox is toggled.
 function toggleAccessSettings() {
-    const container = document.getElementById("accessSettingsContainer");
-    const examples  = document.getElementById("exampleRepositories");
-    const show      = document.getElementById('showAccessSettings')?.checked;
-    container?.classList.toggle("hidden", !show);
-    examples?.classList.toggle("lg:mt-0", show);
+    const container = document.getElementById('accessSettingsContainer');
+    const examples = document.getElementById('exampleRepositories');
+    const show = document.getElementById('showAccessSettings')?.checked;
+
+    container?.classList.toggle('hidden', !show);
+    examples?.classList.toggle('lg:mt-0', show);
 }
 
 
 
 document.addEventListener("DOMContentLoaded", () => {
     toggleAccessSettings();
     changePattern();
-  });
+});
 
 
 // Make them available to existing inline attributes
diff --git a/src/static/js/index.js b/src/static/js/index.js
@@ -1,5 +1,6 @@
 function submitExample(repoName) {
-    const input = document.getElementById("input_text");
+    const input = document.getElementById('input_text');
+
     if (input) {
         input.value = repoName;
         input.focus();
diff --git a/src/static/js/navbar.js b/src/static/js/navbar.js
@@ -1,22 +1,26 @@
 // Fetch GitHub stars
 function formatStarCount(count) {
-    if (count >= 1000) return (count / 1000).toFixed(1) + 'k';
+    if (count >= 1000) {return `${ (count / 1000).toFixed(1) }k`;}
+
     return count.toString();
-  }
+}
 
-    async function fetchGitHubStars() {
+async function fetchGitHubStars() {
     try {
-      const res  = await fetch('https://api.github.com/repos/cyclotruc/gitingest');
-      if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
-      const data = await res.json();
-      document.getElementById('github-stars').textContent =
+        const res = await fetch('https://api.github.com/repos/cyclotruc/gitingest');
+
+        if (!res.ok) {throw new Error(`${res.status} ${res.statusText}`);}
+        const data = await res.json();
+
+        document.getElementById('github-stars').textContent =
         formatStarCount(data.stargazers_count);
     } catch (err) {
-      console.error('Error fetching GitHub stars:', err);
-      const el = document.getElementById('github-stars').parentElement;
-      if (el) el.style.display = 'none';
+        console.error('Error fetching GitHub stars:', err);
+        const el = document.getElementById('github-stars').parentElement;
+
+        if (el) {el.style.display = 'none';}
     }
-  }
+}
 
-    // auto-run when script loads
-    fetchGitHubStars();
+// auto-run when script loads
+fetchGitHubStars();
diff --git a/src/static/js/posthog.js b/src/static/js/posthog.js
diff --git a/src/static/js/utils.js b/src/static/js/utils.js
