Fix search and warnings (#18)

* fix image warning

* fix "Hydration failed/mismatch"

* fix search

Author: AndrewThien

.github/workflows/deploy.yml

@@ -23,58 +23,40 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v5
 
-      - name: Detect package manager
-        id: detect-package-manager
-        run: |
-          if [ -f "./yarn.lock" ]; then
-            echo "manager=yarn" >> $GITHUB_OUTPUT
-            echo "command=install" >> $GITHUB_OUTPUT
-            echo "runner=yarn" >> $GITHUB_OUTPUT
-            exit 0
-          elif [ -f "./package.json" ]; then
-            echo "manager=npm" >> $GITHUB_OUTPUT
-            echo "command=ci" >> $GITHUB_OUTPUT
-            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
-            exit 0
-          else
-            echo "Unable to determine package manager"
-            exit 1
-          fi
-
       - name: Setup Node
         uses: actions/setup-node@v5
         with:
-          node-version: "26"
+          node-version: "22"
+          cache: npm
 
       - name: Setup Pages
         uses: actions/configure-pages@v6
 
-      - name: Restore cache
+      - name: Restore Next.js cache
         uses: actions/cache@v5
         with:
           path: |
             .next/cache
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
           restore-keys: |
-            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
 
       - name: Install dependencies
-        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
-        working-directory: .
+        run: npm ci
 
-      - name: Build with Next.js
-        run: ${{ steps.detect-package-manager.outputs.runner }} next build
-        working-directory: .
+      # Must use `npm run build` (not `npx next build`) so the postbuild
+      # Pagefind step runs and writes search assets into out/_pagefind.
+      - name: Build static site
+        run: npm run build
 
-      - name: Copy built files to docs
-        run: |
-          rm -rf docs/*
-          cp -r ./out docs/
+      - name: Verify Pagefind index
+        run: test -f out/_pagefind/pagefind.js
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v5
         with:
-          path: docs
+          path: out
+
   deploy:
     environment:
       name: github-pages

README.md

@@ -16,21 +16,16 @@ bun dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+**Enable Search on Dev**
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+To enable/test search functionality on development server, run the following command:
 
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
+```bash
+npm run build
+```
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+and then
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+```bash
+npm run start
+```

components/FooterLogo.tsx

@@ -9,17 +9,17 @@ export function FooterLogo() {
       <Image
         src="/logo-UoN-light.png"
         alt="University of Nottingham"
-        width={200}
-        height={200}
-        className="block dark:hidden"
+        width={100}
+        height={100}
+        className="block dark:hidden w-[200px] h-auto"
       />
 
       <Image
         src="/logo-UoN-dark.png"
         alt="University of Nottingham"
-        width={200}
-        height={200}
-        className="hidden dark:block"
+        width={100}
+        height={100}
+        className="hidden dark:block w-[200px] h-auto"
       />
     </>
   );

components/doc-metadata/TimeToRead.tsx

@@ -1,6 +1,6 @@
 import { LucideClock } from "lucide-react";
 import { FrontMatter } from "nextra";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 // conditionally polyfill Temporal for Safari :(
 const loadTemporal = async () => {
@@ -13,9 +13,16 @@ const loadTemporal = async () => {
 await loadTemporal();
 
 export function TimeToRead({ metadata }: { metadata?: FrontMatter }) {
-    if (metadata?.readingTime == null) return null;
+    const [text, setText] = useState<string | null>(null);
 
-    useEffect(() => { loadTemporal() }, [])
+    useEffect(() => {
+        loadTemporal().then(() => {
+            if (metadata?.readingTime == null) return;
+            setText(Temporal.Duration.from(metadata.readingTime).toLocaleString());
+        });
+    }, [metadata]);
+
+    if (!text) return null; // or a static fallback
 
     return (<dl className="flex w-full p-2 gap-2 items-center">
         <dt className="">
@@ -24,7 +31,7 @@ export function TimeToRead({ metadata }: { metadata?: FrontMatter }) {
             </div>
         </dt>
         <dd>
-            {Temporal.Duration.from(metadata.readingTime).toLocaleString()}
+            {text}
         </dd>
     </dl>)
 }

next.config.ts

@@ -6,18 +6,13 @@ const nextConfig: NextConfig = {
   images: {
     unoptimized: true,
   },
-  distDir: "out",
   output: "export",
   basePath: "",
   assetPrefix: "",
 };
 
-// Set up Nextra with its configuration
-const withNextra = nextra({
-  search: false,
-});
+const withNextra = nextra({});
 
-// Export the final Next.js config with Nextra included
 export default withNextra({
   ...nextConfig,
 });

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "next --turbopack",
     "build": "next build",
-    "start": "next start",
+    "start": "npx serve out",
     "lint": "eslint",
     "postbuild": "pagefind --site .next/server/app --output-path out/_pagefind"
   },