feat: add eslint plugin no-html-links (#8156)

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
Co-authored-by: Viktor Malmedal <viktor.malmedal@eniro.com>
Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>
Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>

website/src/components/HackerNewsIcon.tsx

@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import Link from '@docusaurus/Link';
 
 export default function HackerNewsIcon({
   size = 54,
@@ -13,10 +14,8 @@ export default function HackerNewsIcon({
   size?: number;
 }): JSX.Element {
   return (
-    <a
-      href="https://news.ycombinator.com/item?id=32303052"
-      target="_blank"
-      rel="noreferrer"
+    <Link
+      to="https://news.ycombinator.com/item?id=32303052"
       style={{display: 'block', width: size, height: size}}>
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -30,6 +29,6 @@ export default function HackerNewsIcon({
           d="M23 32h2v-6l5.5-10h-2.1L24 24.1 19.6 16h-2.1L23 26z"
         />
       </svg>
-    </a>
+    </Link>
   );
 }

website/src/components/ProductHuntCard.tsx

@@ -7,6 +7,7 @@
 
 import type {ComponentProps} from 'react';
 import React from 'react';
+import Link from '@docusaurus/Link';
 
 export default function ProductHuntCard({
   className,
@@ -16,10 +17,8 @@ export default function ProductHuntCard({
   style?: ComponentProps<'a'>['style'];
 }): JSX.Element {
   return (
-    <a
-      href="https://www.producthunt.com/posts/docusaurus-2-0?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-docusaurus-2-0"
-      target="_blank"
-      rel="noreferrer"
+    <Link
+      to="https://www.producthunt.com/posts/docusaurus-2-0?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-docusaurus-2-0"
       className={className}
       style={{display: 'block', width: 250, height: 54, ...style}}>
       <img
@@ -29,6 +28,6 @@ export default function ProductHuntCard({
         width={250}
         height={54}
       />
-    </a>
+    </Link>
   );
 }

website/src/components/TeamProfileCards/index.tsx

@@ -53,14 +53,14 @@ function TeamProfileCard({
         <div className="card__footer">
           <div className="button-group button-group--block">
             {githubUrl && (
-              <a className="button button--secondary" href={githubUrl}>
+              <Link className="button button--secondary" href={githubUrl}>
                 GitHub
-              </a>
+              </Link>
             )}
             {twitterUrl && (
-              <a className="button button--secondary" href={twitterUrl}>
+              <Link className="button button--secondary" href={twitterUrl}>
                 Twitter
-              </a>
+              </Link>
             )}
           </div>
         </div>

website/src/components/Tweet/index.tsx

@@ -9,6 +9,7 @@ import React, {type ReactNode} from 'react';
 
 import clsx from 'clsx';
 
+import Link from '@docusaurus/Link';
 import styles from './styles.module.css';
 
 export interface Props {
@@ -50,9 +51,9 @@ export default function Tweet({
       <div className={clsx('card__body', styles.tweet)}>{content}</div>
 
       <div className="card__footer">
-        <a className={clsx(styles.tweetMeta, styles.tweetDate)} href={url}>
+        <Link className={clsx(styles.tweetMeta, styles.tweetDate)} to={url}>
           {date}
-        </a>
+        </Link>
       </div>
     </div>
   );

website/src/components/TweetQuote/index.tsx

@@ -9,6 +9,7 @@ import React, {type ReactNode} from 'react';
 
 import clsx from 'clsx';
 
+import Link from '@docusaurus/Link';
 import styles from './styles.module.css';
 
 export interface Props {
@@ -31,12 +32,10 @@ export default function TweetQuote({
   return (
     <figure className={styles.tweetQuote}>
       <blockquote>
-        <a href={url} target="_blank" rel="noreferrer nofollow">
-          {children}
-        </a>
+        <Link to={url}>{children}</Link>
       </blockquote>
       <figcaption>
-        <a href={profileUrl} target="_blank" rel="noreferrer nofollow">
+        <Link to={profileUrl} rel="nofollow">
           <div className="avatar">
             <img
               alt={name}
@@ -53,7 +52,7 @@ export default function TweetQuote({
               </small>
             </div>
           </div>
-        </a>
+        </Link>
       </figcaption>
     </figure>
   );

website/src/components/Versions.tsx

@@ -15,6 +15,7 @@ import React, {
 import {useDocsPreferredVersion} from '@docusaurus/theme-common';
 import {useVersions} from '@docusaurus/plugin-content-docs/client';
 import Translate from '@docusaurus/Translate';
+import Link from '@docusaurus/Link';
 import CodeBlock from '@theme/CodeBlock';
 
 type ContextValue = {
@@ -113,9 +114,9 @@ export function StableMajorVersion(): JSX.Element {
 
 function GitBranchLink({branch}: {branch: string}): JSX.Element {
   return (
-    <a href={`https://github.com/facebook/docusaurus/tree/${branch}`}>
+    <Link to={`https://github.com/facebook/docusaurus/tree/${branch}`}>
       <code>{branch}</code>
-    </a>
+    </Link>
   );
 }
 

website/src/pages/showcase/index.tsx

@@ -12,6 +12,7 @@ import Translate, {translate} from '@docusaurus/Translate';
 import {useHistory, useLocation} from '@docusaurus/router';
 import {usePluralForm} from '@docusaurus/theme-common';
 
+import Link from '@docusaurus/Link';
 import Layout from '@theme/Layout';
 import FavoriteIcon from '@site/src/components/svgIcons/FavoriteIcon';
 import {
@@ -123,15 +124,11 @@ function ShowcaseHeader() {
     <section className="margin-top--lg margin-bottom--lg text--center">
       <h1>{TITLE}</h1>
       <p>{DESCRIPTION}</p>
-      <a
-        className="button button--primary"
-        href={SUBMIT_URL}
-        target="_blank"
-        rel="noreferrer">
+      <Link className="button button--primary" to={SUBMIT_URL}>
         <Translate id="showcase.header.button">
           🙏 Please add your site
         </Translate>
-      </a>
+      </Link>
     </section>
   );
 }

website/src/pages/versions.tsx

@@ -81,9 +81,9 @@ export default function Version(): JSX.Element {
                   </Link>
                 </td>
                 <td>
-                  <a href={`${repoUrl}/releases/tag/v${latestVersion.name}`}>
+                  <Link to={`${repoUrl}/releases/tag/v${latestVersion.name}`}>
                     <ReleaseNotesLabel />
-                  </a>
+                  </Link>
                 </td>
               </tr>
             </tbody>