refactor: update Next.js, React.js and Node.js (#815)

* refactor: update Next.js and React.js

* refactor: update Next.js images

* refactor: update ESLint rules and fix warnings/errors

* fix: remove old intl polyfill

* fix: add proper size to next/image components

* fix: adjust full-size for next/image components

* fix: temporary allow all domains for image optimization

* build: fixes an issue where dev env could lead to javascript heap out of memory

* fix: resolve webpack cache issue with country-flag-icons

* refactor: switch compiler from Babel to SWC

* fix: resize logo in sidebar

* fix: break word on long path to avoid text overflow

* chore: added sharp for production image optimisation

* fix: change extract script for i18n to a custom script

* fix: resolve GitHub CodeQL alert

* chore: temporarily remove builds for ARMv7

* fix: resize avatar images

* refactor: update Node.js to v20

* fix: resolve various UI issues

* build: migrate yarn to pnpm and restrict engine to node@^20.0.0

* ci: specify the pnpm version to use in workflow actions

* ci: fix typo in pnpm action-setup for cypress workflow

* test(cypress): use pnpm instead of yarn

* style: ran prettier on pnpm-lock

* ci(cypress): setup nodejs v20 in cypress workflow

* ci: pnpm cache to reduce install time

* ci: use sh shell to get pnpm store directory

* build(dockerfile): migrate to pnpm from yarn in docker builds

* build(dockerfile): copy the proper pnpm lockfile

* build: install pnpm for all platforms

* build(dockerfile): remove unnecessary `&&` on apk installation steps

* build: migrate pnpm 8 to 9

* build(dockerfile): add node-gyp back in

* build(dockerfile): install node-gyp through npm

* build(dockerfile): ignore scripts to not run husky install when devdependencies are pruned

* build: migrate to pnpm from yarn

* chore: remove a section that is no longer relevant

---------

Co-authored-by: fallenbagel <98979876+Fallenbagel@users.noreply.github.com>

src/components/PersonCard/index.tsx

@@ -21,71 +21,72 @@ const PersonCard = ({
   const [isHovered, setHovered] = useState(false);
 
   return (
-    <Link href={`/person/${personId}`}>
-      <a
-        className={canExpand ? 'w-full' : 'w-36 sm:w-36 md:w-44'}
-        onMouseEnter={() => {
+    <Link
+      href={`/person/${personId}`}
+      className={canExpand ? 'w-full' : 'w-36 sm:w-36 md:w-44'}
+      onMouseEnter={() => {
+        setHovered(true);
+      }}
+      onMouseLeave={() => setHovered(false)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
           setHovered(true);
-        }}
-        onMouseLeave={() => setHovered(false)}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') {
-            setHovered(true);
-          }
-        }}
-        role="link"
-        tabIndex={0}
+        }
+      }}
+      role="link"
+      tabIndex={0}
+    >
+      <div
+        className={`relative ${
+          canExpand ? 'w-full' : 'w-36 sm:w-36 md:w-44'
+        } transform-gpu cursor-pointer rounded-xl text-white shadow ring-1 transition duration-150 ease-in-out ${
+          isHovered
+            ? 'scale-105 bg-gray-700 ring-gray-500'
+            : 'scale-100 bg-gray-800 ring-gray-700'
+        }`}
       >
-        <div
-          className={`relative ${
-            canExpand ? 'w-full' : 'w-36 sm:w-36 md:w-44'
-          } transform-gpu cursor-pointer rounded-xl text-white shadow ring-1 transition duration-150 ease-in-out ${
-            isHovered
-              ? 'scale-105 bg-gray-700 ring-gray-500'
-              : 'scale-100 bg-gray-800 ring-gray-700'
-          }`}
-        >
-          <div style={{ paddingBottom: '150%' }}>
-            <div className="absolute inset-0 flex h-full w-full flex-col items-center p-2">
-              <div className="relative mt-2 mb-4 flex h-1/2 w-full justify-center">
-                {profilePath ? (
-                  <div className="relative h-full w-3/4 overflow-hidden rounded-full ring-1 ring-gray-700">
-                    <CachedImage
-                      src={`https://image.tmdb.org/t/p/w600_and_h900_bestv2${profilePath}`}
-                      alt=""
-                      layout="fill"
-                      objectFit="cover"
-                    />
-                  </div>
-                ) : (
-                  <UserCircleIcon className="h-full" />
-                )}
-              </div>
-              <div className="w-full truncate text-center font-bold">
-                {name}
-              </div>
-              {subName && (
-                <div
-                  className="overflow-hidden whitespace-normal text-center text-sm text-gray-300"
-                  style={{
-                    WebkitLineClamp: 2,
-                    display: '-webkit-box',
-                    overflow: 'hidden',
-                    WebkitBoxOrient: 'vertical',
-                  }}
-                >
-                  {subName}
+        <div style={{ paddingBottom: '150%' }}>
+          <div className="absolute inset-0 flex h-full w-full flex-col items-center p-2">
+            <div className="relative mt-2 mb-4 flex h-1/2 w-full justify-center">
+              {profilePath ? (
+                <div className="relative h-full w-3/4 overflow-hidden rounded-full ring-1 ring-gray-700">
+                  <CachedImage
+                    src={`https://image.tmdb.org/t/p/w600_and_h900_bestv2${profilePath}`}
+                    alt=""
+                    style={{
+                      width: '100%',
+                      height: '100%',
+                      objectFit: 'cover',
+                    }}
+                    fill
+                  />
                 </div>
+              ) : (
+                <UserCircleIcon className="h-full" />
               )}
-              <div
-                className={`absolute bottom-0 left-0 right-0 h-12 rounded-b-xl bg-gradient-to-t ${
-                  isHovered ? 'from-gray-800' : 'from-gray-900'
-                }`}
-              />
             </div>
+            <div className="w-full truncate text-center font-bold">{name}</div>
+            {subName && (
+              <div
+                className="overflow-hidden whitespace-normal text-center text-sm text-gray-300"
+                style={{
+                  WebkitLineClamp: 2,
+                  display: '-webkit-box',
+                  overflow: 'hidden',
+                  WebkitBoxOrient: 'vertical',
+                }}
+              >
+                {subName}
+              </div>
+            )}
+            <div
+              className={`absolute bottom-0 left-0 right-0 h-12 rounded-b-xl bg-gradient-to-t ${
+                isHovered ? 'from-gray-800' : 'from-gray-900'
+              }`}
+            />
           </div>
         </div>
-      </a>
+      </div>
     </Link>
   );
 };