Fixes to the build

amrit110 · amrit110 · commit d814874e06b1 · 2025-10-01T20:57:12.000-04:00
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -39,6 +39,16 @@ repos:
       - id: typos
         args: []
 
+  - repo: local
+    hooks:
+      - id: nextjs-lint
+        name: Next.js Lint
+        entry: bash -c 'cd catalog && npm run lint'
+        language: system
+        files: '^catalog/'
+        types_or: [javascript, jsx, ts, tsx]
+        pass_filenames: false
+
 ci:
     autofix_commit_msg: |
         [pre-commit.ci] Add auto fixes from pre-commit.com hooks
diff --git a/catalog/app/layout.tsx b/catalog/app/layout.tsx
@@ -2,6 +2,8 @@ import type { Metadata } from "next";
 import Script from "next/script";
 import "./globals.css";
 
+const basePath = process.env.NEXT_PUBLIC_BASE_PATH === 'true' ? '/implementation-catalog' : '';
+
 export const metadata: Metadata = {
   title: "Vector Institute Implementation Catalog",
   description: "A curated collection of high-quality AI implementations developed by researchers and engineers at the Vector Institute",
@@ -12,6 +14,9 @@ export const metadata: Metadata = {
     description: "A curated collection of high-quality AI implementations",
     type: "website",
   },
+  icons: {
+    icon: `${basePath}/vector-logo.svg`,
+  },
 };
 
 export default function RootLayout({
@@ -21,13 +26,11 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <head>
-        <link rel="icon" href="/vector-logo.svg" type="image/svg+xml" />
-      </head>
+      <head />
       <body className="antialiased">
         {children}
         {/* Pagefind UI - loads after static build */}
-        <Script src="/_pagefind/pagefind-ui.js" strategy="afterInteractive" />
+        <Script src={`${basePath}/_pagefind/pagefind-ui.js`} strategy="afterInteractive" />
       </body>
     </html>
   );
diff --git a/catalog/app/page.tsx b/catalog/app/page.tsx
@@ -7,6 +7,7 @@ import FilterTabs from "@/components/filter-tabs";
 import RepositoryCard from "@/components/repository-card";
 import SearchBar from "@/components/search-bar";
 import type { RepositoryType, RepositoryData } from "@/types/repository";
+import { getAssetPath } from "@/lib/utils";
 
 // Import the data at build time
 import repositoryData from "@/public/data/repositories.json";
@@ -95,7 +96,7 @@ export default function Home() {
         <div className="max-w-7xl mx-auto px-4 text-center">
           <div className="mb-4 flex justify-center">
             <Image
-              src="/vector-logo.svg"
+              src={getAssetPath("vector-logo.svg")}
               alt="Vector Institute"
               width={120}
               height={48}
diff --git a/catalog/components/hero.tsx b/catalog/components/hero.tsx
@@ -3,6 +3,7 @@
 import { motion } from "framer-motion";
 import { ArrowDown, TrendingUp, Layers } from "lucide-react";
 import Image from "next/image";
+import { getAssetPath } from "@/lib/utils";
 
 interface HeroProps {
   totalImplementations: number;
@@ -127,7 +128,7 @@ export default function Hero({ totalImplementations, yearsOfResearch }: HeroProp
           className="mb-8 flex justify-center"
         >
           <Image
-            src="/vector-logo.svg"
+            src={getAssetPath("vector-logo.svg")}
             alt="Vector Institute"
             width={140}
             height={46}
diff --git a/catalog/components/search-bar.tsx b/catalog/components/search-bar.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect } from "react";
+import { getBasePath } from "@/lib/utils";
 
 declare global {
   interface Window {
@@ -10,6 +11,7 @@ declare global {
       showImages: boolean;
       excerptLength: number;
       placeholder: string;
+      basePath?: string;
     }) => void;
   }
 }
@@ -18,14 +20,15 @@ export default function SearchBar() {
   useEffect(() => {
     // Find the hero-search container and render Pagefind there
     const heroSearchContainer = document.getElementById("hero-search");
+    const basePath = getBasePath();
 
     if (typeof window !== "undefined" && heroSearchContainer) {
       // Load Pagefind CSS dynamically
       const loadPagefindCSS = () => {
         if (!document.querySelector('link[href*="pagefind-ui.css"]')) {
           const link = document.createElement("link");
           link.rel = "stylesheet";
-          link.href = "/_pagefind/pagefind-ui.css";
+          link.href = `${basePath}/_pagefind/pagefind-ui.css`;
           document.head.appendChild(link);
         }
       };
@@ -41,6 +44,7 @@ export default function SearchBar() {
             showImages: false,
             excerptLength: 15,
             placeholder: "Search implementations...",
+            basePath: basePath || undefined,
           });
         }
       }, 100);
diff --git a/catalog/lib/utils.ts b/catalog/lib/utils.ts
@@ -0,0 +1,20 @@
+/**
+ * Get the base path for the application
+ * Returns '/implementation-catalog' in production (GitHub Pages)
+ * Returns '' in development
+ */
+export function getBasePath(): string {
+  return process.env.NEXT_PUBLIC_BASE_PATH === 'true' ? '/implementation-catalog' : '';
+}
+
+/**
+ * Get the full path for an asset, accounting for base path
+ * @param path - The path to the asset (e.g., '/vector-logo.svg')
+ * @returns The full path with base path prepended if in production
+ */
+export function getAssetPath(path: string): string {
+  const basePath = getBasePath();
+  // Remove leading slash from path if present to avoid double slashes
+  const cleanPath = path.startsWith('/') ? path.slice(1) : path;
+  return basePath ? `${basePath}/${cleanPath}` : `/${cleanPath}`;
+}
diff --git a/catalog/scripts/generate-search-pages.js b/catalog/scripts/generate-search-pages.js
@@ -5,7 +5,9 @@
  * Each page includes all searchable content (implementations, datasets) and redirects to the main page.
  */
 
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const fs = require('fs');
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const path = require('path');
 
 // Read the repositories data
@@ -24,7 +26,7 @@ if (!fs.existsSync(outputDir)) {
 const basePath = process.env.NEXT_PUBLIC_BASE_PATH === 'true' ? '/implementation-catalog' : '';
 
 // Generate a page for each repository
-repositoryData.repositories.forEach((repo, index) => {
+repositoryData.repositories.forEach((repo) => {
   const repoSlug = repo.name.toLowerCase().replace(/[^a-z0-9]+/g, '-');
   const repoDir = path.join(outputDir, repoSlug);
 
