Upgrade from Nextra v2 to Nextra v3

.vscode/tasks.json

@@ -0,0 +1,16 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"label": "Run ESLint",
+			"type": "shell",
+			"command": "npm run lint",
+			"args": [],
+			"isBackground": false,
+			"problemMatcher": [
+				"$eslint-stylish"
+			],
+			"group": "build"
+		}
+	]
+}

components/affiliation-list.tsx

@@ -26,7 +26,7 @@ export function AffiliationList({
               .map((a) => (
                 <CommandItem
                   key={a.name}
-                  className="aria-selected:bg-inherit aria-selected:text-accent-inherit"
+                  className="aria-[selected=true]:bg-inherit aria-[selected=true]:text-accent-inherit"
                 >
                   {a.name}
                 </CommandItem>
@@ -38,7 +38,7 @@ export function AffiliationList({
               .filter((a) => a.is_legacy)
               .map((a) => (
                 <CommandItem
-                  className="aria-selected:bg-inherit aria-selected:text-accent-inherit"
+                  className="aria-[selected=true]:bg-inherit aria-[selected=true]:text-accent-inherit"
                   key={a.name}
                 >
                   {a.name}

components/assets.tsx

@@ -1,5 +1,6 @@
 import Uppy from '@uppy/core';
-import type { UppyFile, SuccessResponse } from '@uppy/core'
+import type { UppyFile, Meta, Body as UppyBody } from '@uppy/core'
+import SuccessResponse from '@uppy/core'
 import { Dashboard } from '@uppy/react';
 import AwsS3 from '@uppy/aws-s3';
 import { useEffect, useState } from 'react';
@@ -21,8 +22,8 @@ import {
     FormMessage,
 } from "@/components/ui/form";
 
-import '@uppy/core/dist/style.min.css';
-import '@uppy/dashboard/dist/style.min.css';
+import '@uppy/core/css/style.min.css';
+import '@uppy/dashboard/css/style.min.css';
 import { Textarea } from './ui/textarea';
 import { Separator } from "@/components/ui/separator";
 
@@ -158,21 +159,21 @@ export function AssetInspector() {
                     <div key={res.uri}>
                         {i !== 0 && (<Separator className="my-6" />)}
                         <span className="text-sm text-gray-500">URI</span>
-                        <Pre hasCopyCode className="-mt-5"><Code>{res.uri}</Code></Pre>
+                        <Pre  className="-mt-5"><Code>{res.uri}</Code></Pre>
                         {'result' in res && (
                             <>
                                 <span className="text-sm text-gray-500">Resolved</span>
-                                <Pre hasCopyCode className="-mt-5"><Code>{res.result.url}</Code></Pre>
+                                <Pre className="-mt-5"><Code>{res.result.url}</Code></Pre>
                                 {res.result.lastModified && (
                                     <>
                                         <span className="text-sm text-gray-500 block">Last Modified</span>
-                                        <Pre hasCopyCode className="-mt-5"><Code>{dayjs().to(res.result.lastModified)} ({res.result.lastModified.toISOString()})</Code></Pre>
+                                        <Pre className="-mt-5"><Code>{dayjs().to(res.result.lastModified)} ({res.result.lastModified.toISOString()})</Code></Pre>
                                     </>
 
                                 )}
                                 <>
                                     <span className="text-sm text-gray-500 block">Expires</span>
-                                    <Pre hasCopyCode className="-mt-5"><Code>{
+                                    <Pre className="-mt-5"><Code>{
                                         res.result.expiresAt ? 
                                             `${dayjs().to(res.result.expiresAt)} (${res.result.expiresAt.toISOString()})` :
                                             'Never'
@@ -181,7 +182,7 @@ export function AssetInspector() {
                                 {res.result.headers && (
                                     <>
                                         <span className="text-sm text-gray-500 block">Raw Headers</span>
-                                        <Pre hasCopyCode className="-mt-5"><Code>{JSON.stringify(Object.fromEntries(res.result.headers), null, 2)}</Code></Pre>
+                                        <Pre className="-mt-5"><Code>{JSON.stringify(Object.fromEntries(res.result.headers), null, 2)}</Code></Pre>
                                     </>
                                 )}
                             </>
@@ -242,21 +243,30 @@ export function AssetUploader() {
         function handleUpload() {
             setErrorMessages([]);
         }
-        async function handleUploadSuccess(file: UppyFile | undefined, response: SuccessResponse) {
-            if (!file) {
-                console.warn('Got upload success event without a file:', response)
-                return;
-            }
-            const hash = sha256Cache.get(file.id) || sha256(await file.data.arrayBuffer());
-            const watcloudURI = `watcloud://v1/sha256:${hash}?name=${encodeURIComponent(file.name)}`;
+    async function handleUploadSuccess(
+        file: UppyFile<Meta, UppyBody> | undefined,
+        response: { body?: Record<string, never>; status: number; bytesUploaded?: number; uploadURL?: string }
+    ) {
+        if (!file) {
+            console.warn('Got upload success event without a file:', response)
+            return;
+        }
+        // Since this function can't be async, use then/catch for async operations
+        const getHash = sha256Cache.get(file.id)
+            ? Promise.resolve(sha256Cache.get(file.id) as string)
+            : file.data.arrayBuffer().then((buf) => sha256(buf));
+        getHash.then((hash) => {
+            const fileName = file.name ?? 'unnamed';
+            const watcloudURI = `watcloud://v1/sha256:${hash}?name=${encodeURIComponent(fileName)}`;
             console.log('Uploaded file:', file, 'Response:', response, 'watcloud URI:', watcloudURI);
 
             setSuccessfulUploads((prev) => [{
-                name: file.name,
+                name: fileName,
                 uri: watcloudURI,
             }, ...prev]);
-        }
-        function handleUppyError(file: UppyFile | undefined, error: any) {
+        });
+    }
+    function handleUppyError(file: UppyFile<Meta, UppyBody> | undefined, error: any) {
             console.error('Failed upload:', file, "Error:", error, "Response status:", error.source?.status);
             setErrorMessages((prev) => [`Failed to upload ${file?.name}: "${error.message}", response status: "${error.source?.status}", response body: "${error.source?.responseText}"`, ...prev]);
         }
@@ -279,13 +289,13 @@ export function AssetUploader() {
             note={`Maximum file size: ${bytesToSize(UPLOADER_MAX_FILE_SIZE, 0)}`}
             width="100%"
             theme={uppyTheme}
-            showProgressDetails={true}
+            hideProgressDetails={false}
         />
         <h4 className="mt-8 mb-4 text-md">Successful Uploads</h4>
         {successfulUploads.map(({name, uri}) => (
             <div key={uri}>
                 <span className="text-sm text-gray-500">{name}</span>
-                <Pre hasCopyCode className="-mt-5"><Code>{uri}</Code></Pre>
+                <Pre className="-mt-5"><Code>{uri}</Code></Pre>
             </div>
         ))}
         {successfulUploads.length === 0 && (

components/blog.tsx

@@ -23,7 +23,7 @@ import { useRouter } from 'next/router';
 import { MdxFile } from "nextra";
 import { Link } from "nextra-theme-docs";
 import { getPagesUnderRoute } from "nextra/context";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo, useRef } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import Picture from "./picture";
@@ -48,25 +48,38 @@ export function BlogIndex() {
     const router = useRouter();
     const locale = router.locale || websiteConfig.default_locale;
     const activeTag = (router.query.tag as string | undefined)?.trim();
-    let tagCounts: Record<string, number> = {};
+    const hasRedirectedEmptyTag = useRef(false);
+    const hasRedirectedInvalidTag = useRef(false);
+    const lastActiveTag = useRef(activeTag);
 
-    // Get all posts from route
-    const allPosts = getPagesUnderRoute("/blog").filter((page) => {
-        const frontMatter = (page as MdxFile).frontMatter || {};
-        // Get tag counts for the tag bar
-        if (frontMatter.tags && Array.isArray(frontMatter.tags)) {
-            frontMatter.tags.forEach((tag: string) => {
-                tagCounts[tag] = (tagCounts[tag] || 0) + 1;
-            });
-        }
-        if (frontMatter.hidden) {return null}
-        return frontMatter;
-    });
+    // Get all posts from route and calculate tag counts
+    const { allPosts, tagCounts } = useMemo(() => {
+        const tagCounts: Record<string, number> = {};
+        const allPosts = getPagesUnderRoute("/blog").filter((page) => {
+            const frontMatter = (page as MdxFile).frontMatter || {};
+            // Get tag counts for the tag bar
+            if (frontMatter.tags && Array.isArray(frontMatter.tags)) {
+                frontMatter.tags.forEach((tag: string) => {
+                    tagCounts[tag] = (tagCounts[tag] || 0) + 1;
+                });
+            }
+            if (frontMatter.hidden) {return null}
+            return frontMatter;
+        });
+        return { allPosts, tagCounts };
+    }, []);
 
     // Redirect to main blog page if no tag specified or empty tag
     // (but only after router is ready and we've attempted to parse the tag)
     useEffect(() => {
+        // Reset redirect flag when activeTag changes
+        if (activeTag !== lastActiveTag.current) {
+            hasRedirectedEmptyTag.current = false;
+            lastActiveTag.current = activeTag;
+        }
+
         if (router.isReady && !activeTag &&
+            !hasRedirectedEmptyTag.current &&
             (
                 !router.query.tag ||
                 (typeof router.query.tag === 'string' && router.query.tag.trim() === '') ||
@@ -75,18 +88,23 @@ export function BlogIndex() {
                 router.asPath.endsWith('?tag=')
             )
         ) {
-            router.push('/blog')
-        } // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [router.isReady, activeTag, router.query.tag, router.asPath])
-    // excluding router object from deps to prevent infinite loop (it changes on every navigation)
+            hasRedirectedEmptyTag.current = true;
+            router.push('/blog');
+        }
+    }, [router, activeTag])
 
     // Redirect if tag has no posts
     useEffect(() => {
-        if (router.isReady && activeTag && (!tagCounts[activeTag] || tagCounts[activeTag] === 0)) {
-            router.push('/blog')
-        } // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [router.isReady, activeTag])
-    // excluding router object from deps to prevent infinite loop (it changes on every navigation)
+        // Reset redirect flag when activeTag changes to a valid tag
+        if (activeTag && tagCounts[activeTag] && tagCounts[activeTag] > 0) {
+            hasRedirectedInvalidTag.current = false;
+        }
+
+        if (router.isReady && activeTag && !hasRedirectedInvalidTag.current && (!tagCounts[activeTag] || tagCounts[activeTag] === 0)) {
+            hasRedirectedInvalidTag.current = true;
+            router.push('/blog');
+        }
+    }, [router, activeTag, tagCounts])
 
     // Filter blogs by tag
     const filteredPosts = allPosts.filter((page) => {
@@ -219,8 +237,8 @@ export function BlogIndex() {
 }
 
 const subscribeFormSchema = z.object({
-    email: z.string().email({
-        message: "Please enter a valid email.",
+    email: z.email({
+        error: "Please enter a valid email.",
     }),
 });
 

components/github.tsx

@@ -14,7 +14,7 @@ import { useState } from "react";
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { Input } from "./ui/input";
-import { useMDXComponents } from "nextra-theme-docs";
+import { useMDXComponents } from "nextra/mdx";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 import { Link } from "nextra-theme-docs"
@@ -217,7 +217,7 @@ export function UsernameToID() {
             {globalNodeID && (
                 <div className="mt-8">
                     <h2 className="text-xl font-bold">Global Node ID</h2>
-                    <Pre hasCopyCode><Code>{globalNodeID}</Code></Pre>
+                    <Pre><Code>{globalNodeID}</Code></Pre>
                 </div>
             )}
             {rawData && (
@@ -228,7 +228,7 @@ export function UsernameToID() {
                         <Details>
                             <Summary>Raw data</Summary>
                             <div className="mt-2">
-                                <Pre hasCopyCode><Code>{JSON.stringify(rawData, null, 2)}</Code></Pre>
+                                <Pre><Code>{JSON.stringify(rawData, null, 2)}</Code></Pre>
                             </div>
                         </Details>
                     </div>