Add GitHub Pages preview action

.github/workflows/ci.yml

@@ -2,10 +2,31 @@ name: CI
 
 on:
   pull_request:
+    types: [opened, synchronize, reopened, closed]
     branches: [main]
 
+permissions:
+  contents: write
+  pull-requests: write
+
 jobs:
+  lint:
+    if: github.event.action != 'closed'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - run: npm ci
+
+      - run: npm run lint
+
   test:
+    if: github.event.action != 'closed'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -17,8 +38,48 @@ jobs:
 
       - run: npm ci
 
-      - run: npm test
+      - run: npx vitest run --coverage
 
-      - run: npm run build
+  preview:
+    if: always() && (github.event.action == 'closed' || (needs.lint.result == 'success' && needs.test.result == 'success'))
+    needs: [lint, test]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - if: github.event.action != 'closed'
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - if: github.event.action != 'closed'
+        run: npm ci
+
+      - if: github.event.action != 'closed'
+        name: Build
         env:
-          NEXT_PUBLIC_BASE_PATH: /leetcode-patterns
+          NEXT_PUBLIC_BASE_PATH: /leetcode-patterns/pr-preview/pr-${{ github.event.number }}
+        run: npx next build
+
+      - if: github.event.action != 'closed'
+        name: Remove service worker from preview
+        run: rm -f out/sw.js
+
+      - name: Ensure .nojekyll exists at gh-pages root
+        run: |
+          git fetch origin gh-pages:gh-pages || true
+          if git rev-parse --verify gh-pages >/dev/null 2>&1; then
+            if ! git show gh-pages:.nojekyll >/dev/null 2>&1; then
+              git checkout gh-pages
+              touch .nojekyll
+              git add .nojekyll
+              git -c user.name="github-actions[bot]" -c user.email="github-actions[bot]@users.noreply.github.com" commit -m "Add .nojekyll for Next.js _next/ assets"
+              git push origin gh-pages
+              git checkout -
+            fi
+          fi
+
+      - uses: rossjrw/pr-preview-action@v1
+        with:
+          source-dir: out

.github/workflows/deploy.yml

@@ -12,16 +12,10 @@ on:
   workflow_dispatch:
 
 permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-concurrency:
-  group: pages
-  cancel-in-progress: false
+  contents: write
 
 jobs:
-  build:
+  deploy:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -36,18 +30,11 @@ jobs:
       - name: Build
         env:
           NEXT_PUBLIC_BASE_PATH: /leetcode-patterns
-        run: npx next build
+        run: npm run build
 
-      - uses: actions/upload-pages-artifact@v3
+      - uses: JamesIves/github-pages-deploy-action@v4
         with:
-          path: out
-
-  deploy:
-    needs: build
-    runs-on: ubuntu-latest
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    steps:
-      - id: deployment
-        uses: actions/deploy-pages@v4
+          folder: out
+          branch: gh-pages
+          clean-exclude: pr-preview
+          force: false

package.json

@@ -29,6 +29,7 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^5.1.4",
+    "@vitest/coverage-v8": "^4.0.18",
     "eslint": "^9",
     "eslint-config-next": "16.1.6",
     "happy-dom": "^20.8.3",

src/components/panels/AboutPanel.tsx

@@ -71,7 +71,7 @@ export default function AboutPanel() {
             </p>
             <p>
               I believe <span className="font-semibold text-zinc-900 dark:text-zinc-100">everyone</span> deserves
-              access to high-quality interview prep - regardless of their financial situation. It's why I chose to make this website{" "}
+              access to high-quality interview prep - regardless of their financial situation. It&apos;s why I chose to make this website{" "}
               <span className="font-semibold text-zinc-900 dark:text-zinc-100">free and open source</span>.
             </p>
             <p>

src/components/questions/FilterToolbar.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect, useRef, useCallback } from "react";
+import { useState, useMemo, useEffect, useRef } from "react";
 import { type Table } from "@tanstack/react-table";
 import { Question } from "@/types/question";
 import { RotateCcw, Shuffle, Download, Upload, Trash2, StarOff, Dices, ListOrdered } from "lucide-react";
@@ -63,13 +63,15 @@ export default function FilterToolbar({
 }: FilterToolbarProps) {
   const difficultyFilter = useMemo(
     () => (table.getColumn("difficulty")?.getFilterValue() as string[]) ?? [],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [table, columnFilters]
   );
   const [difficultyDropdownOpen, setDifficultyDropdownOpen] = useState(false);
   const difficultyDropdownRef = useRef<HTMLDivElement>(null);
 
   const patternFilter = useMemo(
     () => (table.getColumn("pattern")?.getFilterValue() as string[]) ?? [],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [table, columnFilters]
   );
   const [patternDropdownOpen, setPatternDropdownOpen] = useState(false);
@@ -92,6 +94,7 @@ export default function FilterToolbar({
 
   const companyFilter = useMemo(
     () => (table.getColumn("companies")?.getFilterValue() as string[]) ?? [],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [table, columnFilters]
   );
   const [companyDropdownOpen, setCompanyDropdownOpen] = useState(false);

src/components/questions/QuestionsTable.tsx

@@ -457,7 +457,6 @@ export default function QuestionsTable({ data, updatedDate }: { data: Question[]
     return vis;
   }, [isMobile, columns]);
 
-  // eslint-disable-next-line react-hooks/incompatible-library
   const table = useReactTable({
     data: filteredData,
     columns,
@@ -784,6 +783,7 @@ export default function QuestionsTable({ data, updatedDate }: { data: Question[]
   const tableBodyRef = useRef<HTMLTableSectionElement>(null);
   const [scrollMargin, setScrollMargin] = useState(0);
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => {
     if (tableBodyRef.current) {
       setScrollMargin(tableBodyRef.current.offsetTop);

src/components/roadmaps/RoadmapView.tsx

@@ -64,7 +64,7 @@ export default function RoadmapView({ roadmap, questions }: Props) {
   const [completed, setCompleted] = useState<Set<number>>(new Set());
   const [starred, setStarred] = useState<Set<number>>(new Set());
   const [notes, setNotes] = useState<Record<number, string>>({});
-  const [solvedDates, setSolvedDates] = useState<Record<number, string>>({});
+  const [, setSolvedDates] = useState<Record<number, string>>({});
   const [collapsedPhases, setCollapsedPhases] = useState<Set<string | number>>(
     new Set()
   );