docs(www): run codemod to resolve Invalid <Link> with <a> child (#…

…782)
chapter-three · Jun 26, 2024 · c06b861 · c06b861
1 parent f56c243
commit c06b861
Show file tree

Hide file tree

Showing 9 changed files with 203 additions and 185 deletions.
diff --git 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
@@ -86,33 +86,33 @@ 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) => {
  const isActive =
  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,29 +170,32 @@ 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) => {
  const isActive =
  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
@@ -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
@@ -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
@@ -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
@@ -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>