From b403667c8d526b5330c5cd95d315b1f5edfb228e Mon Sep 17 00:00:00 2001
From: Brian Perry <contact.brianperry@gmail.com>
Date: Mon, 10 Feb 2025 14:10:54 -0600
Subject: [PATCH 1/2] fix: minor umami compatibility updates

---
 examples/example-umami/components/formatted-text.tsx | 2 +-
 examples/example-umami/lib/drupal.ts                 | 5 ++++-
 examples/example-umami/next-env.d.ts                 | 2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/examples/example-umami/components/formatted-text.tsx b/examples/example-umami/components/formatted-text.tsx
index a3330b7af..94a039391 100644
--- a/examples/example-umami/components/formatted-text.tsx
+++ b/examples/example-umami/components/formatted-text.tsx
@@ -1,5 +1,5 @@
 import { HTMLReactParserOptions, domToReact } from "html-react-parser"
-import { Element } from "domhandler/lib/node"
+import { Element } from "domhandler"
 import parse from "html-react-parser"
 import Image from "next/image"
 import Link from "next/link"
diff --git a/examples/example-umami/lib/drupal.ts b/examples/example-umami/lib/drupal.ts
index 1bfe99fcf..c28055dce 100644
--- a/examples/example-umami/lib/drupal.ts
+++ b/examples/example-umami/lib/drupal.ts
@@ -1,3 +1,6 @@
 import { DrupalClient } from "next-drupal"
 
-export const drupal = new DrupalClient(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL)
+export const drupal = new DrupalClient(
+  process.env.NEXT_PUBLIC_DRUPAL_BASE_URL,
+  { useDefaultEndpoints: true }
+)
diff --git a/examples/example-umami/next-env.d.ts b/examples/example-umami/next-env.d.ts
index 4f11a03dc..a4a7b3f5c 100644
--- a/examples/example-umami/next-env.d.ts
+++ b/examples/example-umami/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

From ec0bd64d6d0597c772c2cd5af3d8f513477c6f37 Mon Sep 17 00:00:00 2001
From: Brian Perry <contact.brianperry@gmail.com>
Date: Mon, 10 Feb 2025 17:07:15 -0600
Subject: [PATCH 2/2] fix: next compatibility fixes for umami example

* update domhandler import
* run link codemod
---
 .../components/block--banner.tsx              |  5 ++-
 .../example-umami/components/breadcrumbs.tsx  |  4 +--
 examples/example-umami/components/footer.tsx  | 14 +++++---
 .../example-umami/components/form--search.tsx |  8 ++---
 .../components/formatted-text.tsx             |  4 +--
 examples/example-umami/components/header.tsx  |  8 ++---
 .../components/locale-switcher.tsx            | 19 +++++------
 .../example-umami/components/menu-footer.tsx  | 10 +++---
 .../example-umami/components/menu-link.tsx    |  6 ++--
 .../example-umami/components/menu-main.tsx    | 22 ++++++-------
 .../example-umami/components/menu-user.tsx    |  4 +--
 .../components/node--article--card-alt.tsx    | 32 ++++++++++---------
 .../components/node--article--card.tsx        | 32 ++++++++++---------
 .../components/node--article.tsx              | 11 ++++---
 .../components/node--recipe--card.tsx         | 32 ++++++++++---------
 .../components/node--recipe--teaser.tsx       | 32 ++++++++++---------
 .../example-umami/components/node--recipe.tsx | 22 ++++++++-----
 examples/example-umami/pages/account.tsx      | 10 +++---
 examples/example-umami/pages/search.tsx       | 18 ++++++-----
 19 files changed, 157 insertions(+), 136 deletions(-)

diff --git a/examples/example-umami/components/block--banner.tsx b/examples/example-umami/components/block--banner.tsx
index 7fff1da95..2558da61c 100644
--- a/examples/example-umami/components/block--banner.tsx
+++ b/examples/example-umami/components/block--banner.tsx
@@ -22,10 +22,9 @@ export function BlockBanner({ block }: BlockBannerProps) {
             <Link
               href={block.field_content_link.uri.replace("internal:", "")}
               passHref
+              className="px-6 py-3 font-serif text-xl text-white transition-colors border-2 rounded-md bg-secondary hover:bg-white hover:text-black border-secondary"
             >
-              <a className="px-6 py-3 font-serif text-xl text-white transition-colors border-2 rounded-md bg-secondary hover:bg-white hover:text-black border-secondary">
-                {block.field_content_link.title}
-              </a>
+              {block.field_content_link.title}
             </Link>
           )}
         </div>
diff --git a/examples/example-umami/components/breadcrumbs.tsx b/examples/example-umami/components/breadcrumbs.tsx
index cb331c8e1..a9b0dc200 100644
--- a/examples/example-umami/components/breadcrumbs.tsx
+++ b/examples/example-umami/components/breadcrumbs.tsx
@@ -25,8 +25,8 @@ export function Breadcrumbs({ items, ...props }: BreadcrumbsProps) {
         {items.map((item, index) => (
           <li key={index} className="flex items-center leading-none truncate">
             {item.url ? (
-              <Link href={item.url} passHref>
-                <a className="underline text-link">{item.title}</a>
+              <Link href={item.url} passHref className="underline text-link">
+                {item.title}
               </Link>
             ) : (
               item.title
diff --git a/examples/example-umami/components/footer.tsx b/examples/example-umami/components/footer.tsx
index 1dd462a30..96fd316e9 100644
--- a/examples/example-umami/components/footer.tsx
+++ b/examples/example-umami/components/footer.tsx
@@ -34,8 +34,13 @@ export function Footer({ menus, blocks }: FooterProps) {
             </h2>
             <div className="grid max-w-4xl mx-auto mt-4 text-sm text-center md:text-left md:grid-cols-4 gap-y-3 gap-x-4">
               {blocks.recipeCollections.map((tag) => (
-                <Link key={tag.id} href={tag.path.alias} passHref>
-                  <a className="font-semibold hover:underline">{tag.name}</a>
+                <Link
+                  key={tag.id}
+                  href={tag.path.alias}
+                  passHref
+                  className="font-semibold hover:underline"
+                >
+                  {tag.name}
                 </Link>
               ))}
             </div>
@@ -70,10 +75,9 @@ export function Footer({ menus, blocks }: FooterProps) {
                       ""
                     )}
                     passHref
+                    className="text-sm underline transition-colors hover:bg-black"
                   >
-                    <a className="text-sm underline transition-colors hover:bg-black">
-                      {blocks.footerPromo.field_content_link.title}
-                    </a>
+                    {blocks.footerPromo.field_content_link.title}
                   </Link>
                 )}
               </div>
diff --git a/examples/example-umami/components/form--search.tsx b/examples/example-umami/components/form--search.tsx
index 59e1ebdb1..c0edbe963 100644
--- a/examples/example-umami/components/form--search.tsx
+++ b/examples/example-umami/components/form--search.tsx
@@ -20,11 +20,9 @@ export function FormSearch({ className, ...props }: FormSearchProps) {
 
   return (
     <>
-      <Link href="/search" passHref>
-        <a className="md:hidden">
-          <span className="sr-only">{t("search")}</span>
-          <SearchIcon />
-        </a>
+      <Link href="/search" passHref className="md:hidden">
+        <span className="sr-only">{t("search")}</span>
+        <SearchIcon />
       </Link>
       <form
         className={classNames("text-sm hidden md:flex items-center", className)}
diff --git a/examples/example-umami/components/formatted-text.tsx b/examples/example-umami/components/formatted-text.tsx
index 94a039391..468b61bea 100644
--- a/examples/example-umami/components/formatted-text.tsx
+++ b/examples/example-umami/components/formatted-text.tsx
@@ -39,8 +39,8 @@ const options: HTMLReactParserOptions = {
 
         if (href && isRelative(href)) {
           return (
-            <Link href={href} passHref>
-              <a className={className}>{domToReact(domNode.children)}</a>
+            <Link href={href} passHref className={className}>
+              {domToReact(domNode.children)}
             </Link>
           )
         }
diff --git a/examples/example-umami/components/header.tsx b/examples/example-umami/components/header.tsx
index 0db9dc331..33d95700f 100644
--- a/examples/example-umami/components/header.tsx
+++ b/examples/example-umami/components/header.tsx
@@ -35,11 +35,9 @@ export function Header({ menus }: HeaderProps) {
         </div>
       </div>
       <div className="container relative flex-wrap items-center justify-between py-6 md:flex lg:py-10">
-        <Link href="/" passHref>
-          <a className="flex justify-start">
-            <Logo className="w-48 h-12 text-primary lg:h-16 lg:w-52" />
-            <span className="sr-only">{siteConfig.name}</span>
-          </a>
+        <Link href="/" passHref className="flex justify-start">
+          <Logo className="w-48 h-12 text-primary lg:h-16 lg:w-52" />
+          <span className="sr-only">{siteConfig.name}</span>
         </Link>
         <button
           className="absolute transition-all border border-transparent md:hidden right-4 top-8 hover:border-link"
diff --git a/examples/example-umami/components/locale-switcher.tsx b/examples/example-umami/components/locale-switcher.tsx
index 960ece57c..c43273208 100644
--- a/examples/example-umami/components/locale-switcher.tsx
+++ b/examples/example-umami/components/locale-switcher.tsx
@@ -16,15 +16,16 @@ export function LocaleSwitcher({ ...props }) {
       <ul className="flex space-x-4">
         {locales.map((locale) => (
           <li key={locale}>
-            <Link href={asPath} locale={locale} passHref>
-              <a
-                data-cy={`local-switcher-${locale}`}
-                className={classNames(
-                  locale === currentLocale ? "font-semibold" : "font-normal"
-                )}
-              >
-                {config.locales[locale]}
-              </a>
+            <Link
+              href={asPath}
+              locale={locale}
+              passHref
+              data-cy={`local-switcher-${locale}`}
+              className={classNames(
+                locale === currentLocale ? "font-semibold" : "font-normal"
+              )}
+            >
+              {config.locales[locale]}
             </Link>
           </li>
         ))}
diff --git a/examples/example-umami/components/menu-footer.tsx b/examples/example-umami/components/menu-footer.tsx
index b17404a49..fe4156035 100644
--- a/examples/example-umami/components/menu-footer.tsx
+++ b/examples/example-umami/components/menu-footer.tsx
@@ -11,10 +11,12 @@ export function MenuFooter({ items, ...props }: MenuFooterProps) {
       <ul className="flex flex-col space-y-2">
         {items.map((item) => (
           <li key={item.id}>
-            <Link href={item.url} passHref>
-              <a className="text-sm font-semibold transition-colors hover:bg-black hover:underline">
-                {item.title}
-              </a>
+            <Link
+              href={item.url}
+              passHref
+              className="text-sm font-semibold transition-colors hover:bg-black hover:underline"
+            >
+              {item.title}
             </Link>
           </li>
         ))}
diff --git a/examples/example-umami/components/menu-link.tsx b/examples/example-umami/components/menu-link.tsx
index bb69e4177..3f49025fd 100644
--- a/examples/example-umami/components/menu-link.tsx
+++ b/examples/example-umami/components/menu-link.tsx
@@ -10,10 +10,8 @@ export type MenuLinkProps = Omit<
 function CustomLink(props, ref) {
   let { href, children, ...rest } = props
   return (
-    <NextLink href={href} passHref>
-      <a ref={ref} {...rest}>
-        {children}
-      </a>
+    <NextLink href={href} passHref ref={ref} {...rest}>
+      {children}
     </NextLink>
   )
 }
diff --git a/examples/example-umami/components/menu-main.tsx b/examples/example-umami/components/menu-main.tsx
index 7327f7385..8ee8f0090 100644
--- a/examples/example-umami/components/menu-main.tsx
+++ b/examples/example-umami/components/menu-main.tsx
@@ -22,17 +22,17 @@ export function MenuMain({ items, ...props }: MenuMainProps) {
 
           return (
             <li key={item.id}>
-              <Link href={item.url} passHref>
-                <a
-                  className={classNames(
-                    "text-xl border-b-[3px] flex border-b-transparent font-serif transition-colors hover:text-primary",
-                    {
-                      "border-b-primary": isActive,
-                    }
-                  )}
-                >
-                  {item.title}
-                </a>
+              <Link
+                href={item.url}
+                passHref
+                className={classNames(
+                  "text-xl border-b-[3px] flex border-b-transparent font-serif transition-colors hover:text-primary",
+                  {
+                    "border-b-primary": isActive,
+                  }
+                )}
+              >
+                {item.title}
               </Link>
             </li>
           )
diff --git a/examples/example-umami/components/menu-user.tsx b/examples/example-umami/components/menu-user.tsx
index 57573c597..48684c3da 100644
--- a/examples/example-umami/components/menu-user.tsx
+++ b/examples/example-umami/components/menu-user.tsx
@@ -16,8 +16,8 @@ export function MenuUser() {
 
   if (status === "unauthenticated") {
     return (
-      <Link href="/login" passHref>
-        <a className="text-text hover:underline">{t("login")}</a>
+      <Link href="/login" passHref className="text-text hover:underline">
+        {t("login")}
       </Link>
     )
   }
diff --git a/examples/example-umami/components/node--article--card-alt.tsx b/examples/example-umami/components/node--article--card-alt.tsx
index 7a62c5cb2..4d82d17c0 100644
--- a/examples/example-umami/components/node--article--card-alt.tsx
+++ b/examples/example-umami/components/node--article--card-alt.tsx
@@ -26,21 +26,23 @@ export function NodeArticleCardAlt({
     >
       <div className="flex flex-col flex-1 space-y-4">
         <h2 className="flex-1 font-serif text-2xl">{node.title}</h2>
-        <Link href={node.path.alias} passHref>
-          <a className="inline-flex items-center uppercase hover:underline text-link">
-            {t("view-article")}
-            <svg
-              className="w-5 h-5 ml-1"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <path d="m9 18 6-6-6-6" />
-            </svg>
-          </a>
+        <Link
+          href={node.path.alias}
+          passHref
+          className="inline-flex items-center uppercase hover:underline text-link"
+        >
+          {t("view-article")}
+          <svg
+            className="w-5 h-5 ml-1"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="m9 18 6-6-6-6" />
+          </svg>
         </Link>
       </div>
       <MediaImage media={node.field_media_image} width={335} height={225} />
diff --git a/examples/example-umami/components/node--article--card.tsx b/examples/example-umami/components/node--article--card.tsx
index f43ad7b14..13c8e5f4e 100644
--- a/examples/example-umami/components/node--article--card.tsx
+++ b/examples/example-umami/components/node--article--card.tsx
@@ -18,21 +18,23 @@ export function NodeArticleCard({ node, ...props }: NodeArticleCardProps) {
     >
       <h2 className="flex-1 font-serif text-2xl">{node.title}</h2>
       <MediaImage media={node.field_media_image} width={335} height={225} />
-      <Link href={node.path.alias} passHref>
-        <a className="inline-flex items-center uppercase hover:underline text-link">
-          {t("view-article")}
-          <svg
-            className="w-5 h-5 ml-1"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <path d="m9 18 6-6-6-6" />
-          </svg>
-        </a>
+      <Link
+        href={node.path.alias}
+        passHref
+        className="inline-flex items-center uppercase hover:underline text-link"
+      >
+        {t("view-article")}
+        <svg
+          className="w-5 h-5 ml-1"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="m9 18 6-6-6-6" />
+        </svg>
       </Link>
     </article>
   )
diff --git a/examples/example-umami/components/node--article.tsx b/examples/example-umami/components/node--article.tsx
index 1bdd8c234..45504494d 100644
--- a/examples/example-umami/components/node--article.tsx
+++ b/examples/example-umami/components/node--article.tsx
@@ -52,10 +52,13 @@ export function NodeArticle({ node, additionalContent }: NodeArticleProps) {
             <div className="flex mb-6 space-x-2">
               <span className="font-semibold">{t("tags")}: </span>
               {node.field_tags.map((tag) => (
-                <Link key={tag.id} href={tag.path.alias} passHref>
-                  <a className="underline transition-colors text-link hover:text-primary hover:bg-border">
-                    {tag.name}
-                  </a>
+                <Link
+                  key={tag.id}
+                  href={tag.path.alias}
+                  passHref
+                  className="underline transition-colors text-link hover:text-primary hover:bg-border"
+                >
+                  {tag.name}
                 </Link>
               ))}
             </div>
diff --git a/examples/example-umami/components/node--recipe--card.tsx b/examples/example-umami/components/node--recipe--card.tsx
index fffe543ed..7743a6216 100644
--- a/examples/example-umami/components/node--recipe--card.tsx
+++ b/examples/example-umami/components/node--recipe--card.tsx
@@ -17,21 +17,23 @@ export function NodeRecipeCard({ node, ...props }: NodeRecipeCardProps) {
       {...props}
     >
       <h2 className="flex-1 font-serif text-[22px]">{node.title}</h2>
-      <Link href={node.path.alias} passHref>
-        <a className="inline-flex items-center uppercase hover:underline text-link">
-          {t("view-recipe")}
-          <svg
-            className="w-5 h-5 ml-1"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <path d="m9 18 6-6-6-6" />
-          </svg>
-        </a>
+      <Link
+        href={node.path.alias}
+        passHref
+        className="inline-flex items-center uppercase hover:underline text-link"
+      >
+        {t("view-recipe")}
+        <svg
+          className="w-5 h-5 ml-1"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="m9 18 6-6-6-6" />
+        </svg>
       </Link>
       <MediaImage media={node.field_media_image} width={335} height={225} />
     </article>
diff --git a/examples/example-umami/components/node--recipe--teaser.tsx b/examples/example-umami/components/node--recipe--teaser.tsx
index 416c008c9..570ee4e34 100644
--- a/examples/example-umami/components/node--recipe--teaser.tsx
+++ b/examples/example-umami/components/node--recipe--teaser.tsx
@@ -24,21 +24,23 @@ export function NodeRecipeTeaser({ node, ...props }: NodeRecipeTeaserProps) {
         </p>
       )}
       <MediaImage media={node.field_media_image} width={335} height={225} />
-      <Link href={node.path.alias} passHref>
-        <a className="inline-flex items-center uppercase hover:underline text-link">
-          {t("view-recipe")}
-          <svg
-            className="w-5 h-5 ml-1"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <path d="m9 18 6-6-6-6" />
-          </svg>
-        </a>
+      <Link
+        href={node.path.alias}
+        passHref
+        className="inline-flex items-center uppercase hover:underline text-link"
+      >
+        {t("view-recipe")}
+        <svg
+          className="w-5 h-5 ml-1"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="m9 18 6-6-6-6" />
+        </svg>
       </Link>
     </article>
   )
diff --git a/examples/example-umami/components/node--recipe.tsx b/examples/example-umami/components/node--recipe.tsx
index cf35fe8c2..7656bd875 100644
--- a/examples/example-umami/components/node--recipe.tsx
+++ b/examples/example-umami/components/node--recipe.tsx
@@ -33,10 +33,13 @@ export function NodeRecipe({ node, ...props }: NodeRecipeProps) {
             <div className="flex space-x-2">
               <span className="font-semibold">{t("recipe-category")}: </span>
               {node.field_recipe_category.map((tag) => (
-                <Link key={tag.id} href={tag.path.alias} passHref>
-                  <a className="underline transition-colors text-link hover:text-primary hover:bg-border">
-                    {tag.name}
-                  </a>
+                <Link
+                  key={tag.id}
+                  href={tag.path.alias}
+                  passHref
+                  className="underline transition-colors text-link hover:text-primary hover:bg-border"
+                >
+                  {tag.name}
                 </Link>
               ))}
             </div>
@@ -45,10 +48,13 @@ export function NodeRecipe({ node, ...props }: NodeRecipeProps) {
             <div className="flex space-x-2">
               <span className="font-semibold">{t("tags")}: </span>
               {node.field_tags.map((tag) => (
-                <Link key={tag.id} href={tag.path.alias} passHref>
-                  <a className="underline transition-colors text-link hover:text-primary hover:bg-border">
-                    {tag.name}
-                  </a>
+                <Link
+                  key={tag.id}
+                  href={tag.path.alias}
+                  passHref
+                  className="underline transition-colors text-link hover:text-primary hover:bg-border"
+                >
+                  {tag.name}
                 </Link>
               ))}
             </div>
diff --git a/examples/example-umami/pages/account.tsx b/examples/example-umami/pages/account.tsx
index 22b11adb1..0d222161f 100644
--- a/examples/example-umami/pages/account.tsx
+++ b/examples/example-umami/pages/account.tsx
@@ -38,10 +38,12 @@ export default function AccountsPage({
           },
         ]}
       >
-        <Link href="/articles/new" passHref>
-          <a className="px-3 py-1 font-serif text-lg text-white transition-colors border-2 rounded-md lg:text-xl lg:px-4 lg:py-2 bg-secondary hover:bg-white hover:text-black border-secondary">
-            New Article
-          </a>
+        <Link
+          href="/articles/new"
+          passHref
+          className="px-3 py-1 font-serif text-lg text-white transition-colors border-2 rounded-md lg:text-xl lg:px-4 lg:py-2 bg-secondary hover:bg-white hover:text-black border-secondary"
+        >
+          New Article
         </Link>
       </PageHeader>
       <div className="container">
diff --git a/examples/example-umami/pages/search.tsx b/examples/example-umami/pages/search.tsx
index 5343300c7..05326f749 100644
--- a/examples/example-umami/pages/search.tsx
+++ b/examples/example-umami/pages/search.tsx
@@ -52,14 +52,16 @@ export default function SearchPage({ menus, blocks }: SearchPageProps) {
                 key={result.id}
                 className="grid gap-2 p-4 bg-white border border-border"
               >
-                <Link href={result.path.alias} passHref>
-                  <a className="font-serif text-2xl underline text-link">
-                    <Highlighter
-                      textToHighlight={result.title}
-                      searchWords={[keys]}
-                      highlightClassName="font-semibold bg-transparent"
-                    />
-                  </a>
+                <Link
+                  href={result.path.alias}
+                  passHref
+                  className="font-serif text-2xl underline text-link"
+                >
+                  <Highlighter
+                    textToHighlight={result.title}
+                    searchWords={[keys]}
+                    highlightClassName="font-semibold bg-transparent"
+                  />
                 </Link>
                 <p className="text-text">
                   <span className="capitalize">