From c06b861e1c7dd0f2b0cde8dde38d1d88c70d2d06 Mon Sep 17 00:00:00 2001
From: Brian Perry <contact.brianperry@gmail.com>
Date: Wed, 26 Jun 2024 17:23:09 -0500
Subject: [PATCH] docs(www): run codemod to resolve Invalid `<Link>` with `<a>`
 child (#782)

---
 www/components/card.tsx        | 17 +++---
 www/components/layout.tsx      | 97 ++++++++++++++++++----------------
 www/components/pager.tsx       | 64 +++++++++++-----------
 www/components/sidebar-nav.tsx | 61 ++++++++++-----------
 www/pages/blog/index.tsx       | 12 +++--
 www/pages/guides/index.tsx     | 56 ++++++++++----------
 www/pages/index.tsx            | 38 ++++++-------
 www/pages/learn/[...slug].tsx  | 31 +++++------
 www/pages/learn/index.tsx      | 12 +++--
 9 files changed, 203 insertions(+), 185 deletions(-)

diff --git a/www/components/card.tsx b/www/components/card.tsx
index 5936f664..273e8cce 100644
--- a/www/components/card.tsx
+++ b/www/components/card.tsx
@@ -8,14 +8,15 @@ interface CardProps extends LinkProps {
 
 export function Card({ children, href, ...props }: CardProps) {
   return (
-    <Link href={href} passHref {...props}>
-      <a
-        className={classNames(
-          "block p-6 bg-white group border border-gray-200 rounded-lg shadow-md card"
-        )}
-      >
-        {children}
-      </a>
+    <Link
+      href={href}
+      passHref
+      {...props}
+      className={classNames(
+        "block p-6 bg-white group border border-gray-200 rounded-lg shadow-md card"
+      )}
+    >
+      {children}
     </Link>
   )
 }
diff --git a/www/components/layout.tsx b/www/components/layout.tsx
index 7728f58e..253ef78d 100644
--- a/www/components/layout.tsx
+++ b/www/components/layout.tsx
@@ -86,15 +86,15 @@ export function Layout({
       >
         <ul className="grid grid-flow-row gap-2 mb-8 auto-rows-max">
           <li>
-            <Link href="/" passHref>
-              <a
-                className={classNames(
-                  "text-sm font-medium hover:underline",
-                  pathname === "/" ? "text-blue-700" : "text-gray-700"
-                )}
-              >
-                Home
-              </a>
+            <Link
+              href="/"
+              passHref
+              className={classNames(
+                "text-sm font-medium hover:underline",
+                pathname === "/" ? "text-blue-700" : "text-gray-700"
+              )}
+            >
+              Home
             </Link>
           </li>
           {site.links.map((link, index) => {
@@ -102,17 +102,17 @@ export function Layout({
               pathname === link.href || link.activePathNames?.includes(pathname)
             return (
               <li key={index}>
-                <Link href={link.href} passHref>
-                  <a
-                    className={classNames(
-                      "text-sm font-medium hover:underline",
-                      isActive ? "text-blue-700" : "text-gray-900"
-                    )}
-                    target={link.external ? "_blank" : "_self"}
-                    rel={link.external ? "noreferrer" : ""}
-                  >
-                    {link.title}
-                  </a>
+                <Link
+                  href={link.href}
+                  passHref
+                  className={classNames(
+                    "text-sm font-medium hover:underline",
+                    isActive ? "text-blue-700" : "text-gray-900"
+                  )}
+                  target={link.external ? "_blank" : "_self"}
+                  rel={link.external ? "noreferrer" : ""}
+                >
+                  {link.title}
                 </Link>
               </li>
             )
@@ -170,10 +170,12 @@ export function Layout({
                 <span className="sr-only">Toggle Menu</span>
               </button>
               <div className="flex items-center space-x-8">
-                <Link href="/" passHref>
-                  <a className="items-center flex-shrink hidden font-semibold sm:flex sm:text-lg lg:text-base xl:text-lg">
-                    {site.name}
-                  </a>
+                <Link
+                  href="/"
+                  passHref
+                  className="items-center flex-shrink hidden font-semibold sm:flex sm:text-lg lg:text-base xl:text-lg"
+                >
+                  {site.name}
                 </Link>
                 <div className="flex-grow hidden grid-flow-col gap-6 mr-4 lg:grid lg:mr-4 lg:gap-4 xl:gap-6 auto-cols-max">
                   {site.links.map((link) => {
@@ -181,18 +183,19 @@ export function Layout({
                       pathname === link.href ||
                       link.activePathNames?.includes(pathname)
                     return (
-                      <Link key={link.href} href={link.href} passHref>
-                        <a
-                          className={classNames(
-                            "hover:underline",
-                            mode === "dark" ? "text-white" : "hover:text-black",
-                            isActive ? "text-black" : "text-gray-600"
-                          )}
-                          target={link.external ? "_blank" : "_self"}
-                          rel={link.external ? "noreferrer" : ""}
-                        >
-                          {link.title}
-                        </a>
+                      <Link
+                        key={link.href}
+                        href={link.href}
+                        passHref
+                        className={classNames(
+                          "hover:underline",
+                          mode === "dark" ? "text-white" : "hover:text-black",
+                          isActive ? "text-black" : "text-gray-600"
+                        )}
+                        target={link.external ? "_blank" : "_self"}
+                        rel={link.external ? "noreferrer" : ""}
+                      >
+                        {link.title}
                       </Link>
                     )
                   })}
@@ -276,17 +279,17 @@ export function Layout({
                       <Menu.Item key={version.version}>
                         {({ active }) =>
                           version.url ? (
-                            <Link href={version.url} passHref>
-                              <a
-                                className={classNames(
-                                  "text-sm px-3 py-1 hover:bg-blue-50",
-                                  {
-                                    "bg-blue-50": active,
-                                  }
-                                )}
-                              >
-                                {version.version}
-                              </a>
+                            <Link
+                              href={version.url}
+                              passHref
+                              className={classNames(
+                                "text-sm px-3 py-1 hover:bg-blue-50",
+                                {
+                                  "bg-blue-50": active,
+                                }
+                              )}
+                            >
+                              {version.version}
                             </Link>
                           ) : (
                             <span
diff --git a/www/components/pager.tsx b/www/components/pager.tsx
index df59061c..614aece3 100644
--- a/www/components/pager.tsx
+++ b/www/components/pager.tsx
@@ -13,39 +13,43 @@ export function Pager({ links }: PagerProps) {
   return (
     <div className="flex items-center justify-between mt-10 md:mt-14">
       {prev ? (
-        <Link href={prev.href} passHref>
-          <a className="flex items-center px-4 py-3 leading-none text-gray-600 border rounded-md hover:text-black">
-            <svg
-              className="w-4 h-4 mr-2"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <path d="M19 12H5M12 19l-7-7 7-7" />
-            </svg>
-            {prev.title}
-          </a>
+        <Link
+          href={prev.href}
+          passHref
+          className="flex items-center px-4 py-3 leading-none text-gray-600 border rounded-md hover:text-black"
+        >
+          <svg
+            className="w-4 h-4 mr-2"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M19 12H5M12 19l-7-7 7-7" />
+          </svg>
+          {prev.title}
         </Link>
       ) : null}
       {next ? (
-        <Link href={next.href} passHref>
-          <a className="flex items-center px-4 py-3 ml-auto leading-none text-gray-600 border rounded-md hover:text-black">
-            {next.title}
-            <svg
-              className="w-4 h-4 ml-2"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <path d="M5 12h14M12 5l7 7-7 7" />
-            </svg>
-          </a>
+        <Link
+          href={next.href}
+          passHref
+          className="flex items-center px-4 py-3 ml-auto leading-none text-gray-600 border rounded-md hover:text-black"
+        >
+          {next.title}
+          <svg
+            className="w-4 h-4 ml-2"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M5 12h14M12 5l7 7-7 7" />
+          </svg>
         </Link>
       ) : null}
     </div>
diff --git a/www/components/sidebar-nav.tsx b/www/components/sidebar-nav.tsx
index 86c04d99..20cf8f2c 100644
--- a/www/components/sidebar-nav.tsx
+++ b/www/components/sidebar-nav.tsx
@@ -35,36 +35,37 @@ export function SidebarNavItem({ items, onLinkClick }: SidebarNavProps) {
   return items?.length ? (
     <div className="grid grid-flow-row text-sm auto-rows-max">
       {items.map((item, index) => (
-        <Link key={index} href={item.href} passHref>
-          <a
-            className={classNames(
-              "px-2 py-2 flex items-center w-full rounded-md hover:underline text-black",
-              {
-                "bg-blue-50": asPath === item.href,
-              }
-            )}
-            onClick={onLinkClick}
-            target={item.external && "_blank"}
-            rel={item.external ? "noreferrer" : ""}
-          >
-            {item.title}{" "}
-            {item.external && (
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="w-3 h-3 ml-1"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                strokeWidth="2"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                />
-              </svg>
-            )}
-          </a>
+        <Link
+          key={index}
+          href={item.href}
+          passHref
+          className={classNames(
+            "px-2 py-2 flex items-center w-full rounded-md hover:underline text-black",
+            {
+              "bg-blue-50": asPath === item.href,
+            }
+          )}
+          onClick={onLinkClick}
+          target={item.external && "_blank"}
+          rel={item.external ? "noreferrer" : ""}
+        >
+          {item.title}{" "}
+          {item.external && (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="w-3 h-3 ml-1"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth="2"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+              />
+            </svg>
+          )}
         </Link>
       ))}
     </div>
diff --git a/www/pages/blog/index.tsx b/www/pages/blog/index.tsx
index 08ada650..d3ddcdfc 100644
--- a/www/pages/blog/index.tsx
+++ b/www/pages/blog/index.tsx
@@ -24,7 +24,7 @@ export default function BlogsPage({ blogs }: BlogsPageProps) {
           <article key={blog.slug}>
             <h2 className="text-2xl font-bold leading-tight sm:text-3xl md:text-3xl">
               <Link href={blog.url} passHref>
-                <a>{blog.frontMatter.title}</a>
+                {blog.frontMatter.title}
               </Link>
             </h2>
             <p className="mt-2 text-gray-700">
@@ -34,10 +34,12 @@ export default function BlogsPage({ blogs }: BlogsPageProps) {
               <p className="my-4 text-gray-700">{blog.frontMatter.excerpt}</p>
             ) : null}
 
-            <Link href={blog.url} passHref>
-              <a className="text-sm text-blue-500 hover:text-black">
-                Read More →
-              </a>
+            <Link
+              href={blog.url}
+              passHref
+              className="text-sm text-blue-500 hover:text-black"
+            >
+              Read More →
             </Link>
             <hr className="py-6 mt-6" />
           </article>
diff --git a/www/pages/guides/index.tsx b/www/pages/guides/index.tsx
index 56c7d596..c98aa10a 100644
--- a/www/pages/guides/index.tsx
+++ b/www/pages/guides/index.tsx
@@ -40,35 +40,37 @@ export default function GuidesPage({ guides }: GuidesPageProps) {
                 ) : null}
               </div>
               {guide.frontMatter.externalUrl ? (
-                <Link href={guide.frontMatter.externalUrl} passHref>
-                  <a
-                    className="text-sm text-blue-500 transition-colors"
-                    target="_blank"
-                    rel="nofollow"
-                  >
-                    <span className="absolute inset-0" />
-                    <div className="flex items-center">
-                      Read More{" "}
-                      <svg
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        className="w-3 h-3 ml-2"
-                      >
-                        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3" />
-                      </svg>
-                    </div>
-                  </a>
+                <Link
+                  href={guide.frontMatter.externalUrl}
+                  passHref
+                  className="text-sm text-blue-500 transition-colors"
+                  target="_blank"
+                  rel="nofollow"
+                >
+                  <span className="absolute inset-0" />
+                  <div className="flex items-center">
+                    Read More{" "}
+                    <svg
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      className="w-3 h-3 ml-2"
+                    >
+                      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3" />
+                    </svg>
+                  </div>
                 </Link>
               ) : (
-                <Link href={guide.url} passHref>
-                  <a className="text-sm text-blue-500 transition-colors">
-                    <span className="absolute inset-0" />
-                    Read More →
-                  </a>
+                <Link
+                  href={guide.url}
+                  passHref
+                  className="text-sm text-blue-500 transition-colors"
+                >
+                  <span className="absolute inset-0" />
+                  Read More →
                 </Link>
               )}
             </article>
diff --git a/www/pages/index.tsx b/www/pages/index.tsx
index 4a30e206..584c4901 100644
--- a/www/pages/index.tsx
+++ b/www/pages/index.tsx
@@ -35,12 +35,12 @@ export default function IndexPage({ features }: IndexPageProps) {
     <Layout title={site.name} description={site.description}>
       <section className="relative px-6 pt-12 pb-8 md:py-12 md:pb-8">
         <div className="container max-w-4xl mx-auto text-center">
-          <Link href="/blog/next-drupal-1-6" passHref>
-            <a className="inline-flex space-x-1 mx-auto mb-4 bg-[#111] text-white hover:underline text-sm items-center rounded-full px-4 py-1 font-medium">
-              <span>
-                Next.js 13, Drupal 10 and Stable On-demand Revalidation
-              </span>
-            </a>
+          <Link
+            href="/blog/next-drupal-1-6"
+            passHref
+            className="inline-flex space-x-1 mx-auto mb-4 bg-[#111] text-white hover:underline text-sm items-center rounded-full px-4 py-1 font-medium"
+          >
+            <span>Next.js 13, Drupal 10 and Stable On-demand Revalidation</span>
           </Link>
           <h1 className="text-4xl font-black tracking-tight text-center md:text-6xl lg:tracking-tighter lg:text-8xl">
             The future of Drupal is headless
@@ -50,19 +50,21 @@ export default function IndexPage({ features }: IndexPageProps) {
             next-generation front-end for your Drupal site.
           </p>
           <div className="flex flex-col items-center justify-center py-4 sm:flex-row md:py-8 lg:py-10">
-            <Link href="/learn/quick-start" passHref>
-              <a className="w-2/3 px-8 py-2 font-semibold text-center text-white transition-all border-2 rounded-md bg-primary border-primary sm:w-auto hover:bg-primary hover:border-primary">
-                Get Started
-              </a>
+            <Link
+              href="/learn/quick-start"
+              passHref
+              className="w-2/3 px-8 py-2 font-semibold text-center text-white transition-all border-2 rounded-md bg-primary border-primary sm:w-auto hover:bg-primary hover:border-primary"
+            >
+              Get Started
             </Link>
-            <Link href="https://demo.next-drupal.org" passHref>
-              <a
-                className="w-2/3 px-8 py-2 mt-4 font-semibold text-center text-black transition-all bg-white border-2 border-black rounded-md sm:w-auto sm:mt-0 sm:ml-4 hover:bg-gray-100 hover:text-black"
-                target="_blank"
-                rel="nofollow noreferrer"
-              >
-                See a demo
-              </a>
+            <Link
+              href="https://demo.next-drupal.org"
+              passHref
+              className="w-2/3 px-8 py-2 mt-4 font-semibold text-center text-black transition-all bg-white border-2 border-black rounded-md sm:w-auto sm:mt-0 sm:ml-4 hover:bg-gray-100 hover:text-black"
+              target="_blank"
+              rel="nofollow noreferrer"
+            >
+              See a demo
             </Link>
           </div>
           <div className="overflow-hidden border-2 border-black rounded-md shadow-2xl aspect-w-16 aspect-h-9">
diff --git a/www/pages/learn/[...slug].tsx b/www/pages/learn/[...slug].tsx
index 5697cfa4..cfa90dbd 100644
--- a/www/pages/learn/[...slug].tsx
+++ b/www/pages/learn/[...slug].tsx
@@ -53,21 +53,22 @@ export default function TutorialPage({
               </h4>
               <div className="grid grid-flow-row text-sm auto-rows-max">
                 {group.items.map((wiz) => (
-                  <Link key={wiz.hash} href={wiz.url} passHref>
-                    <a
-                      className={classNames(
-                        "px-2 py-2 flex items-center w-full rounded-md hover:underline text-black",
-                        tutorial.frontMatter.weight > wiz.frontMatter.weight &&
-                          tutorial.frontMatter.group === wiz.frontMatter.group
-                          ? "line-through opacity-50"
-                          : "opacity-100",
-                        {
-                          "bg-blue-50": wiz.hash === tutorial.hash,
-                        }
-                      )}
-                    >
-                      {wiz.frontMatter.title}
-                    </a>
+                  <Link
+                    key={wiz.hash}
+                    href={wiz.url}
+                    passHref
+                    className={classNames(
+                      "px-2 py-2 flex items-center w-full rounded-md hover:underline text-black",
+                      tutorial.frontMatter.weight > wiz.frontMatter.weight &&
+                        tutorial.frontMatter.group === wiz.frontMatter.group
+                        ? "line-through opacity-50"
+                        : "opacity-100",
+                      {
+                        "bg-blue-50": wiz.hash === tutorial.hash,
+                      }
+                    )}
+                  >
+                    {wiz.frontMatter.title}
                   </Link>
                 ))}
               </div>
diff --git a/www/pages/learn/index.tsx b/www/pages/learn/index.tsx
index dade53d7..dac95334 100644
--- a/www/pages/learn/index.tsx
+++ b/www/pages/learn/index.tsx
@@ -38,11 +38,13 @@ export default function LearnPage({ tutorials }: LearnPageProps) {
                   <p className="my-4 text-gray-700">{tutorial.excerpt}</p>
                 ) : null}
               </div>
-              <Link href={tutorial.url} passHref>
-                <a className="text-sm text-blue-500 transition-colors">
-                  <span className="absolute inset-0" />
-                  Learn More →
-                </a>
+              <Link
+                href={tutorial.url}
+                passHref
+                className="text-sm text-blue-500 transition-colors"
+              >
+                <span className="absolute inset-0" />
+                Learn More →
               </Link>
             </article>
           ))}