fix: next compatibility fixes for umami example

* update domhandler import
* run link codemod

Author: backlineint

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>

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

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>

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)}

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>
           )
         }

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"

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>
         ))}

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>
         ))}

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>
   )
 }

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>
           )