upgrate documentation website to next 14 (#1975)

* upgrate to next 12 * next 13 * migrate links * next 14 * deactivate eslint for documentation once again * Fix title warning. See vercel/next.js#38256
immutable-js · Jan 27, 2024 · b118ffb · b118ffb
1 parent 7f9ba58
commit b118ffb
Show file tree

Hide file tree

Showing 11 changed files with 676 additions and 3,726 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -73,7 +73,7 @@
     "build:prepare": "./resources/prepare-dist.sh",
     "build:stats": "node ./resources/dist-stats.mjs",
     "unit-test": "jest",
-    "website:build": "cd website && next build && next-sitemap && next export",
+    "website:build": "cd website && next build && next-sitemap",
     "website:dev": "cd website && next dev",
     "check-git-clean": "./resources/check-git-clean.sh",
     "benchmark": "node ./resources/benchmark.js",
@@ -94,7 +94,7 @@
     "dtslint": "^4.2.1",
     "eslint": "^8.56.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-next": "^14.0.0",
+    "eslint-config-next": "^14.1.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
@@ -107,12 +107,12 @@
     "make-synchronous": "0.1.1",
     "marked": "2.1.2",
     "microtime": "3.0.0",
-    "next": "11.0.1",
+    "next": "^14.1.0",
     "next-sitemap": "1.6.124",
     "npm-run-all": "4.1.5",
     "prettier": "2.3.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "2.7.1",
     "rollup": "2.52.3",
     "rollup-plugin-buble": "0.19.8",

diff --git a/website/next-env.d.ts b/website/next-env.d.ts
@@ -1,3 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/website/next.config.js b/website/next.config.js
@@ -1,9 +1,11 @@
 module.exports = {
   reactStrictMode: true,
   trailingSlash: true,
+  output: 'export',
 
-  // as next eslint config does not work with eslint 8.
-  // TODO Waiting for nextjs upgrade to reactive this
+  // Issues while upgrading from next 11 to 12.
+  // Possibly related to typescript parser missing ?
+  // TODO Waiting the migration from tslint to eslint to reactivate this
   eslint: {
     ignoreDuringBuilds: true,
   },

diff --git a/website/src/Defs.tsx b/website/src/Defs.tsx
@@ -214,8 +214,8 @@ export function TypeDef({ type, prefix }: { type: Type; prefix?: number }) {
         'type',
         <>
           {type.url ? (
-            <Link href={type.url}>
-              <a className="t typeName">{type.name}</a>
+            <Link href={type.url} className="t typeName">
+              {type.name}
             </Link>
           ) : (
             <span className="t typeName">{type.name}</span>

diff --git a/website/src/Header.tsx b/website/src/Header.tsx
@@ -88,13 +88,11 @@ export function Header({
 
 export function HeaderLogoLink() {
   return (
-    <Link href="/">
-      <a className="miniLogo">
-        <SVGSet>
-          <Logo color="#FC4349" />
-          <Logo color="#2C3E50" inline />
-        </SVGSet>
-      </a>
+    <Link href="/" className="miniLogo">
+      <SVGSet>
+        <Logo color="#FC4349" />
+        <Logo color="#2C3E50" inline />
+      </SVGSet>
     </Link>
   );
 }
@@ -166,7 +164,7 @@ function DocsDropdown({
       `}</style>
       <div>
         <Link href={`/docs/${currentVersion || versions[0]}`}>
-          <a>Docs{currentVersion && ` (${currentVersion})`}</a>
+          Docs{currentVersion && ` (${currentVersion})`}
         </Link>
       </div>
       <ul>

diff --git a/website/src/MemberDoc.tsx b/website/src/MemberDoc.tsx
@@ -36,9 +36,7 @@ export function MemberDoc({ member }: { member: MemberDefinition }) {
             <h4 className="infoHeader">Inherited from</h4>
             <code>
               <Link href={member.inherited.url}>
-                <a>
-                  {member.inherited.interface}#{member.inherited.label}
-                </a>
+                {member.inherited.interface}#{member.inherited.label}
               </Link>
             </code>
           </section>
@@ -48,9 +46,7 @@ export function MemberDoc({ member }: { member: MemberDefinition }) {
             <h4 className="infoHeader">Overrides</h4>
             <code>
               <Link href={member.overrides.url}>
-                <a>
-                  {member.overrides.interface}#{member.overrides.label}
-                </a>
+                {member.overrides.interface}#{member.overrides.label}
               </Link>
             </code>
           </section>

diff --git a/website/src/Sidebar.tsx b/website/src/Sidebar.tsx
@@ -40,24 +40,24 @@ function Links({
                 isActive ? 'sideBar__Link--active' : ''
               }`}
             >
-              <Link href={link.url}>
+              <Link
+                href={link.url}
+                onClick={e => {
+                  if (isCurrent) {
+                    e.preventDefault();
+                    setIsForcedClosed(!isForcedClosed);
+                  }
+                }}
+              >
                 {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/anchor-is-valid */}
-                <a
-                  onClick={e => {
-                    if (isCurrent) {
-                      e.preventDefault();
-                      setIsForcedClosed(!isForcedClosed);
-                    }
-                  }}
-                >
-                  {link.label}
-                  {isActive && (focus?.interface || focus?.functions) && (
-                    <>
-                      {' '}
-                      <ArrowDown isActive={isActive} />
-                    </>
-                  )}
-                </a>
+
+                {link.label}
+                {isActive && (focus?.interface || focus?.functions) && (
+                  <>
+                    {' '}
+                    <ArrowDown isActive={isActive} />
+                  </>
+                )}
               </Link>
             </div>
 

diff --git a/website/src/pages/docs/[version]/[type].tsx b/website/src/pages/docs/[version]/[type].tsx
@@ -60,7 +60,7 @@ export default function TypeDocPage({
   return (
     <div>
       <Head>
-        <title>{def.qualifiedName} — Immutable.js</title>
+        <title>{`${def.qualifiedName} — Immutable.js`}</title>
         <link rel="icon" type="image/png" href="/favicon.png" />
       </Head>
       <ImmutableConsole version={version} />

diff --git a/website/src/pages/docs/[version]/index.tsx b/website/src/pages/docs/[version]/index.tsx
@@ -60,7 +60,7 @@ export default function OverviewDocPage({
   return (
     <div>
       <Head>
-        <title>Documentation {version} — Immutable.js</title>
+        <title>{`Documentation ${version} — Immutable.js`}</title>
       </Head>
       <ImmutableConsole version={version} />
       <DocHeader versions={versions} currentVersion={version} />

diff --git a/website/tsconfig.json b/website/tsconfig.json
@@ -12,7 +12,8 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "incremental": true
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src/**/*.js"],
   "exclude": ["node_modules"]