Merge pull request #279 from iodigital-com/chore/update-deps

Chore/update deps

Author: DaveBitter

.env.example

@@ -1,3 +1,6 @@
+# NodeJS
+NODE_ENV='development'
+
 # YouTube
 YOUTUBE_API_KEY=
 

.ncurc.major.cjs

@@ -0,0 +1,11 @@
+const minorConfig = require('./.ncurc.minor.cjs');
+
+module.exports = {
+    ...minorConfig,
+    reject: [
+        'mdx-bundler',
+        'rehype-*',
+        'remark-*',
+    ],
+    target: 'latest',
+};

.ncurc.minor.cjs

@@ -0,0 +1,6 @@
+const patchConfig = require('./.ncurc.patch.cjs');
+
+module.exports = {
+    ...patchConfig,
+    target: 'minor',
+};

.ncurc.patch.cjs

@@ -0,0 +1,9 @@
+module.exports = {
+    dep: ['dev', 'prod'],
+    install: 'always',
+    reject: [],
+    root: true,
+    target: 'patch',
+    upgrade: true,
+    workspaces: false,
+}

.nvmrc

@@ -1 +1 @@
-20.*
+22.*

.vscode/settings.json

@@ -0,0 +1 @@
+{}

README.md

@@ -34,6 +34,10 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 Check the guidelines in the [Wiki](https://github.com/iodigital-com/io-technology/wiki)
 
+### Updating Dependencies
+
+If you want to help by keeping our dependencies up te date, first read the [updating guide](./UPDATING.md).
+
 ## Contributors
 
 Thank you to all our [contributors](https://github.com/iodigital-com/io-technology/graphs/contributors) ❤️

UPDATING.md

@@ -0,0 +1,28 @@
+# Updating Dependencies
+
+> Thank you for keeping the iO Techhub dependencies up-to-date. You are helping us keep up with the latest developments and security updates.
+
+To keep the dependencies up-to-date we use `npm-check-updates`. Each version range (`major`.`minor`.`patch`) has its own script and configuration. Below are a few steps to take to make updating an easy task.
+
+## The steps
+
+1. Update Node to the latest stable version
+   1. Make sure to update both the `package.json`'s `engines` configuration and the `.nvmrc` file
+1. Open the [update patch versions config](./.ncurc.patch.cjs)
+   1. Review each dependency in the `reject` array, if available, and see if you can remove it
+   1. Run `npm run update:patch` in the project root
+   1. See if there are any issues with the new updates
+   1. Fix any issues you encounter
+      1. If you somehow can't fix it, upgrade the dependency to the highest version which doesn't have the issue
+         Sometimes you can resolve it by updating to the next version range (`patch` -> `minor` -> `major`), if available
+         - Add it to the `reject` array
+         - Add a comment on why you rejected it
+      1. Go back to step 2.2
+1. Repeat the above step for [minor version config](./.ncurc.minor.cjs)
+1. Before migrating the remaining packages to a newer `major` version, migrate [`next`](https://nextjs.org/docs/app/building-your-application/upgrading) and [`react`](https://react.dev/versions) manually first, if available. They provide convenient tools making the update easier for you
+1. Repeat the above step for [major version config](./.ncurc.major.cjs)
+1. Review this process and update when necessary
+
+### Please note
+
+Make sure to [comment why you didn't update](#step-reject-comment) a specific dependency so we can try again at a later time. Preferably add a link to a github issue (or similar).

components/Article.js

@@ -27,8 +27,7 @@ const Article = ({ slug, date, title, summary, tags, authors, border = true }) =
                       width={200}
                       height={200}
                       alt="avatar"
-                      objectFit="cover"
-                      className="rounded-full"
+                      className="rounded-full object-cover"
                     />
                   </div>
                 ))}

components/Contributor.js

@@ -11,8 +11,7 @@ const InnerContributor = ({ contributor }) => {
           width={200}
           height={200}
           alt={`Avatar of ${contributor.name}`}
-          objectFit="cover"
-          className="rounded-full"
+          className="rounded-full object-cover"
         />
       </div>
       <p>{contributor.name}</p>

components/EventCalendar.js

@@ -9,11 +9,11 @@ const EventCalendar = ({ events }) => {
           className={`relative m-0 bg-white p-4 ${
             isFutureEvent(event.dateTime) ? '' : ' opacity-50'
           }`}
-          key={event.id}
+          key={event.title}
         >
-          <h3 className="m-0 line-clamp-2 text-lg font-medium">{event.title}</h3>
-          <p className="m-0 line-clamp-2 text-sm">{event.description}</p>
-          <p className="m-0 mt-auto line-clamp-2 pt-6 text-xs">
+          <h3 className="line-clamp-2 m-0 text-lg font-medium">{event.title}</h3>
+          <p className="line-clamp-2 m-0 text-sm">{event.description}</p>
+          <p className="line-clamp-2 m-0 mt-auto pt-6 text-xs">
             <time
               className={`font-bold ${isFutureEvent(event.dateTime) ? 'text-io_blue-600' : ''}`}
               dateTime={new Intl.DateTimeFormat('en-US', {

components/EventCarousel.js

@@ -6,7 +6,7 @@ const EventCarousel = ({ events }) => {
     <ul className="my-12 mb-24 flex flex-col flex-wrap items-center md:snap-x md:flex-row md:flex-nowrap md:items-stretch md:gap-12 md:overflow-x-auto md:px-12">
       {events.map((event) => (
         <li
-          key={event.id}
+          key={event.title}
           className={`mb-8 shrink-0 md:mb-0 md:snap-center ${
             isFutureEvent(event.dateTime) ? '' : ' opacity-50'
           }`}

components/Experiment.js

@@ -17,7 +17,7 @@ const Experiment = ({ title, images, demo, code, authors, content, border = true
         <div className="hidden md:col-span-3 md:mr-8 md:block xl:col-span-5">
           {images.map((image) => (
             <div className="responsive-image-container mb-2" key={image}>
-              <Image src={image} alt="Image" layout="fill" />
+              <Image src={image} alt="Image" width={100} height={100} />
             </div>
           ))}
         </div>
@@ -35,8 +35,7 @@ const Experiment = ({ title, images, demo, code, authors, content, border = true
                   width={50}
                   height={50}
                   alt="avatar"
-                  objectFit="cover"
-                  className="rounded-full"
+                  className="rounded-full object-cover"
                 />
               </div>
               <div className="ml-2">

components/HubspotForm.js

@@ -17,7 +17,7 @@ const HubspotForm = ({ portalId, formId, className, style }) => {
         })
       }
     })
-  }, [])
+  }, [portalId, formId])
 
   return <div id="hubspotForm" className={`${className} hubspot`} style={style}></div>
 }

components/JobGrid.js

@@ -1,12 +1,13 @@
 import { useBrandingTheme } from '@/lib/hooks/useBrandingTheme'
+import Link from './Link'
 
 const JobGrid = ({ jobs }) => {
   const { theme } = useBrandingTheme()
 
   return (
     <div className="grid gap-4 gap-y-10 xl:grid-cols-5">
       {jobs.map((job) => (
-        <a
+        <Link
           key={job.id}
           href={job.careers_url}
           target="_blank"
@@ -28,9 +29,9 @@ const JobGrid = ({ jobs }) => {
               />
             </svg>
           </article>
-        </a>
+        </Link>
       ))}
-      <a
+      <Link
         href="https://www.iodigital.com/en/careers/jobs?expertise=Technology"
         target="_blank"
         rel="noreferrer"
@@ -45,7 +46,7 @@ const JobGrid = ({ jobs }) => {
             d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"
           />
         </svg>
-      </a>
+      </Link>
     </div>
   )
 }

components/LayoutWrapper.js

@@ -1,11 +1,13 @@
+'use client'
+
 import { useEffect, useRef, useState } from 'react'
 import siteMetadata from '@/data/siteMetadata'
 import headerNavLinks from '@/data/headerNavLinks'
 import Link from './Link'
 import Footer from './Footer'
 import MobileNav from './MobileNav'
+import { Player } from './LottiePlayer'
 import { useBrandingTheme } from '@/lib/hooks/useBrandingTheme'
-import { Player } from '@lottiefiles/react-lottie-player'
 
 const LayoutWrapper = ({ children }) => {
   const [navigationIsOpen, setNavigationIsOpen] = useState(false)

components/Link.js

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/anchor-has-content */
-import Link from 'next/link'
+import NextLink from 'next/link'
 import { useBrandingTheme } from '@/lib/hooks/useBrandingTheme'
 
 // TODO: add these classes to the safelist
@@ -8,34 +8,42 @@ import { useBrandingTheme } from '@/lib/hooks/useBrandingTheme'
 // !text-io_blue-600
 // !text-io_pink-600
 
-const CustomLink = ({ href, ...rest }) => {
+const Link = ({ href, ...rest }) => {
   const isInternalLink = href && href.startsWith('/')
   const isAnchorLink = href && href.startsWith('#')
 
   const { theme } = useBrandingTheme()
   const classNames = `!text-io_${theme}-600`
 
   if (isInternalLink) {
-    return (
-      <Link href={href} className={classNames}>
-        <a {...rest} />
-      </Link>
-    )
+    return <NextLink href={href} {...rest} />
   }
 
   if (isAnchorLink) {
     const isFootnoteRef = !!rest['data-footnote-ref']
 
     if (isFootnoteRef) {
-      return <a href={href} className={`${classNames} ml-1 font-semibold no-underline`} {...rest} />
+      return (
+        <NextLink
+          href={href}
+          className={`${classNames} ml-1 font-semibold no-underline`}
+          {...rest}
+        />
+      )
     }
 
-    return <a href={href} className={classNames} {...rest} />
+    return <NextLink href={href} className={classNames} {...rest} />
   }
 
   return (
-    <a target="_blank" rel="noopener noreferrer" href={href} className={classNames} {...rest} />
+    <NextLink
+      target="_blank"
+      rel="noopener noreferrer"
+      href={href}
+      className={classNames}
+      {...rest}
+    />
   )
 }
 
-export default CustomLink
+export default Link

components/LottiePlayer.js

@@ -0,0 +1,14 @@
+import dynamic from 'next/dynamic'
+
+/**
+ * Dynamically load the ReactLottiePlayer. It resolves an issue which was introduced when updating NodeJS to v22.
+ *
+ * @see https://github.com/LottieFiles/lottie-react/issues/149#issuecomment-2203978157
+ */
+export const Player = dynamic(
+  async () => {
+    const LottiePlayer = await import('@lottiefiles/react-lottie-player')
+    return LottiePlayer.Player
+  },
+  { ssr: false }
+)

components/MDXComponents.js

@@ -2,15 +2,15 @@
 import { useMemo } from 'react'
 import { getMDXComponent } from 'mdx-bundler/client'
 import Image from './Image'
-import CustomLink from './Link'
+import Link from './Link'
 import TOCInline from './TOCInline'
 import Pre from './Pre'
 import Heading from './Heading'
 
 export const MDXComponents = {
   Image,
   TOCInline,
-  a: CustomLink,
+  a: Link,
   pre: Pre,
   h1: Heading(1),
   h2: Heading(2),

components/Pagination.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from './Link'
 import Arrow from '@/data/arrow.svg'
 
 export default function Pagination({ totalPages, currentPage, subpath = 'articles' }) {
@@ -20,11 +20,11 @@ export default function Pagination({ totalPages, currentPage, subpath = 'article
         {prevPage && (
           <Link
             href={currentPage - 1 === 1 ? `/${subpath}/` : `/${subpath}/page/${currentPage - 1}`}
+            rel="previous"
+            className={btnClasses}
           >
-            <a rel="previous" className={btnClasses}>
-              <Arrow className="mr-4 w-6 rotate-180" />
-              <span>Previous</span>
-            </a>
+            <Arrow className="mr-4 w-6 rotate-180" />
+            <span>Previous</span>
           </Link>
         )}
         <span className="py-4 text-base font-bold leading-none">
@@ -37,11 +37,9 @@ export default function Pagination({ totalPages, currentPage, subpath = 'article
           </button>
         )}
         {nextPage && (
-          <Link href={`/${subpath}/page/${currentPage + 1}`}>
-            <a rel="next" className={btnClasses}>
-              <span>Next</span>
-              <Arrow className="ml-4 w-6" />
-            </a>
+          <Link href={`/${subpath}/page/${currentPage + 1}`} rel="next" className={btnClasses}>
+            <span>Next</span>
+            <Arrow className="ml-4 w-6" />
           </Link>
         )}
       </nav>

components/Serie.js

@@ -28,21 +28,18 @@ const Serie = ({ slug, date, title, tags, authors, border = true, subpath = 'art
                       width={200}
                       height={200}
                       alt="avatar"
-                      objectFit="cover"
-                      className="rounded-full"
+                      className="rounded-full object-cover"
                     />
                   </div>
                 ))}
               </div>
               <div className="text-body-xs">
                 <p className="mb-0">
-                  <Link>
-                    <a
-                      href={`/authors/${authors[0].slug[0]}`}
-                      className={`text-io_${theme}-600 hover:text-io_${theme}-700`}
-                    >
-                      {authors[0].name}
-                    </a>
+                  <Link
+                    href={`/authors/${authors[0].slug[0]}`}
+                    className={`text-io_${theme}-600 hover:text-io_${theme}-700`}
+                  >
+                    {authors[0].name}
                   </Link>
                 </p>
                 <p className="mb-0">{authors[0].occupation}</p>