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