vs-branch-19

CLAUDE.md

@@ -20,6 +20,7 @@ This repository contains the CoMPhy Lab website, a static site built with Jekyll
   - Install Bundler if not present
   - Install all Ruby gems and npm packages
   - Build the site and generate search database
+  - Install Git hooks for pre-commit checks (via Husky)
   - Run validation tests
 
 - **Manual dependency installation (if setup.sh was already run):**
@@ -147,6 +148,25 @@ This repository contains the CoMPhy Lab website, a static site built with Jekyll
   - Load Fuse.js before any code that uses it
   - Run lint-check.sh to automatically fix order issues
 
+## Pre-commit Hooks
+
+This repository uses Husky and lint-staged for automatic code quality checks:
+
+- **Automatic Installation**: Hooks are installed automatically when you run `./scripts/setup.sh`
+- **What Gets Checked**: Only staged files are checked before commit
+- **JavaScript**: ESLint (with auto-fix) + Prettier formatting
+- **CSS**: Prettier formatting
+- **Markdown**: markdownlint-cli2 validation
+- **JSON/YAML**: Prettier formatting
+
+If a commit fails due to linting errors:
+1. Review the error messages
+2. Fix any issues that couldn't be auto-fixed
+3. Stage the fixes: `git add .`
+4. Retry the commit
+
+To bypass hooks in emergencies: `git commit --no-verify`
+
 ## Scripts Overview
 
 ### Core Scripts

README.md

@@ -83,6 +83,7 @@ A static website for the Computational Multiphase Physics Laboratory, built with
    - Install Bundler if not present
    - Install all Ruby gems and npm packages
    - Build the site and generate search database
+   - Install Git hooks for pre-commit checks (via Husky)
    - Run validation tests
 
 2. **Manual Setup (Alternative)**
@@ -764,13 +765,29 @@ The repository uses automated tools to ensure code quality and consistency:
 
 #### Setup
 
-1. Install Node.js dependencies:
+1. Install dependencies (automatically includes pre-commit hooks):
+
+   ```bash
+   ./scripts/setup.sh
+   ```
+
+   Or manually:
 
    ```bash
    npm install
+   npx husky install
    ```
 
-2. Git hooks will be automatically set up via Husky
+#### Pre-commit Hooks
+
+This repository uses Husky and lint-staged to automatically check and format code before commits:
+
+- **JavaScript files**: ESLint (with auto-fix) + Prettier
+- **CSS files**: Prettier formatting
+- **Markdown files**: markdownlint-cli2
+- **JSON/YAML files**: Prettier formatting
+
+When you commit, these checks run automatically on staged files only. If any issues are found that can't be auto-fixed, the commit will be blocked.
 
 #### Linters
 
@@ -785,12 +802,16 @@ The repository uses automated tools to ensure code quality and consistency:
 - **Tests**: Jest
   - Run manually: `npm test`
 
-#### Git Hooks
+#### How Pre-commit Works
 
-- **Pre-commit**: Automatically runs linters on staged files
-  - Only lints files that are staged for commit
-  - Prevents committing code with linting errors
-  - Automatically formats code when possible
+1. Stage your changes: `git add .`
+2. Commit: `git commit -m "your message"`
+3. Pre-commit hooks automatically:
+   - Run ESLint on JavaScript files (auto-fixes when possible)
+   - Format all files with Prettier
+   - Check Markdown files with markdownlint
+   - If all checks pass, the commit proceeds
+   - If any check fails, the commit is blocked with error details
 
 #### Skip Hooks
 

assets/js/main.js

@@ -303,14 +303,35 @@
 
   /* Smooth Scrolling
    * -------------------------------------------------- */
-  document.querySelectorAll("a[href^=\"#\"]").forEach((anchor) => {
+  document.querySelectorAll("a[href^=\"#\"], a[href^=\"/#\"]").forEach((anchor) => {
     anchor.addEventListener("click", function (e) {
-      e.preventDefault();
-      const target = document.querySelector(this.getAttribute("href"));
-      if (target) {
-        target.scrollIntoView({
-          behavior: "smooth",
-        });
+      const href = this.getAttribute("href");
+
+      // Handle both "#section" and "/#section" formats
+      if (href.startsWith("/#")) {
+        // Check if we're on the home page
+        if (window.location.pathname === "/" || 
+            window.location.pathname === "/index.html") {
+          e.preventDefault();
+          const targetId = href.substring(2); // Remove "/#"
+          const target = document.getElementById(targetId);
+          if (target) {
+            target.scrollIntoView({
+              behavior: "smooth",
+              block: "start"
+            });
+          }
+        }
+        // If not on home page, let the browser handle the navigation
+      } else if (href.startsWith("#")) {
+        e.preventDefault();
+        const target = document.querySelector(href);
+        if (target) {
+          target.scrollIntoView({
+            behavior: "smooth",
+            block: "start"
+          });
+        }
       }
     });
   });

scripts/setup.sh

@@ -179,6 +179,11 @@ echo ""
 echo "🔨 Building site and generating search database..."
 ./scripts/build.sh
 
+# Install husky hooks
+echo ""
+echo "🪝 Installing Git hooks (husky)..."
+npx husky install
+
 # Run simple validation tests
 echo ""
 echo "🧪 Running validation tests..."
@@ -202,6 +207,8 @@ echo "📚 Useful commands:"
 echo "   - Build site: ./scripts/build.sh"
 echo "   - Check code: ./scripts/lint-check.sh"
 echo "   - Fix code issues: ./scripts/lint-check.sh --fix"
-echo "   - Run tests: npm test (requires full npm install)"
+echo "   - Run tests: npm test"
 echo "   - Update dependencies: bundle update && npm update"
+echo ""
+echo "✅ Pre-commit hooks are now installed and will run automatically on git commit"
 echo ""