chapter-three · backlineint · Feb 10, 2025 · Feb 10, 2025
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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"
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
   )