Validate in-page anchor links in deadLinkChecker and fix broken anchors

Author: ShakilUrRehman21

scripts/deadLinkChecker.js

@@ -47,29 +47,41 @@ function getMarkdownFiles() {
     path.posix.join(baseDir, '**/*.md'),
     path.posix.join(baseDir, '**/*.mdx'),
   ];
-  return globby.sync(patterns);
+  return globby.sync(patterns).map((file) => path.normalize(file));
 }
 
 function extractAnchorsFromContent(content) {
   const anchors = new Set();
 
   // MDX-style heading IDs: {/*anchor-id*/}
-  const mdxPattern = /\{\/\*([a-zA-Z0-9-_]+)\*\/\}/g;
+  const mdxPattern = /\{\/\*([^\*]+)\*\/\}/g;
   let match;
   while ((match = mdxPattern.exec(content)) !== null) {
-    anchors.add(match[1].toLowerCase());
+    anchors.add(match[1].trim().toLowerCase());
   }
 
-  // HTML id attributes
-  const htmlIdPattern = /\sid=["']([a-zA-Z0-9-_]+)["']/g;
+  // HTML or JSX id attributes
+  const htmlIdPattern = /\sid=["']([^"']+)["']/g;
   while ((match = htmlIdPattern.exec(content)) !== null) {
-    anchors.add(match[1].toLowerCase());
+    anchors.add(match[1].trim().toLowerCase());
+  }
+
+  // Component titleId attributes (e.g. <Recipes titleId="examples-connecting" />)
+  const titleIdPattern = /\stitleId=["']([^"']+)["']/g;
+  while ((match = titleIdPattern.exec(content)) !== null) {
+    anchors.add(match[1].trim().toLowerCase());
+  }
+
+  // TeamMember permalink attributes (e.g. <TeamMember permalink="dan-abramov" />)
+  const permalinkPattern = /\spermalink=["']([^"']+)["']/g;
+  while ((match = permalinkPattern.exec(content)) !== null) {
+    anchors.add(match[1].trim().toLowerCase());
   }
 
   // Markdown heading with explicit ID: ## Heading {#anchor-id}
-  const markdownHeadingPattern = /^#+\s+.*\{#([a-zA-Z0-9-_]+)\}/gm;
+  const markdownHeadingPattern = /^#+\s+.*\{#([^}]+)\}/gm;
   while ((match = markdownHeadingPattern.exec(content)) !== null) {
-    anchors.add(match[1].toLowerCase());
+    anchors.add(match[1].trim().toLowerCase());
   }
 
   return anchors;
@@ -92,7 +104,11 @@ function extractLinksFromContent(content) {
 
   while ((match = linkPattern.exec(content)) !== null) {
     const [, linkText, linkUrl] = match;
-    if (linkUrl.startsWith('/') && !linkUrl.startsWith('//')) {
+    const isInternalLink =
+      (linkUrl.startsWith('/') && !linkUrl.startsWith('//')) ||
+      linkUrl.startsWith('#');
+
+    if (isInternalLink) {
       const lines = content.substring(0, match.index).split('\n');
       const line = lines.length;
       const lastLineStart =
@@ -160,7 +176,39 @@ async function findTargetFile(urlPath) {
   return null;
 }
 
-async function validateLink(link) {
+async function validateLink(link, currentFilePath) {
+  if (link.url.startsWith('#')) {
+    if (link.url === '#' || link.url.length === 1) {
+      return {valid: false, reason: 'Empty anchor link'};
+    }
+    const rawAnchor = link.url.substring(1);
+    let anchorId;
+    try {
+      anchorId = decodeURIComponent(rawAnchor).toLowerCase();
+    } catch {
+      anchorId = rawAnchor.toLowerCase();
+    }
+
+    switch (anchorId) {
+      case 'challenges':
+      case 'recap': {
+        return {valid: true};
+      }
+    }
+
+    const fileAnchors = anchorMap.get(path.normalize(currentFilePath));
+    if (!fileAnchors || !fileAnchors.has(anchorId)) {
+      return {
+        valid: false,
+        reason: `Anchor #${rawAnchor} not found in ${path.relative(
+          CONTENT_DIR,
+          currentFilePath
+        )}`,
+      };
+    }
+    return {valid: true};
+  }
+
   const urlAnchorPattern = /#([a-zA-Z0-9-_]+)$/;
   const anchorMatch = link.url.match(urlAnchorPattern);
   const urlWithoutAnchor = link.url.replace(urlAnchorPattern, '');
@@ -182,7 +230,7 @@ async function validateLink(link) {
       ...link,
       url: redirectDestination + (anchorMatch ? anchorMatch[0] : ''),
     };
-    return validateLink(redirectedLink);
+    return validateLink(redirectedLink, currentFilePath);
   }
 
   // Check if it's an error code link
@@ -244,7 +292,7 @@ async function validateLink(link) {
       }
     }
 
-    const fileAnchors = anchorMap.get(targetFile);
+    const fileAnchors = anchorMap.get(path.normalize(targetFile));
 
     if (!fileAnchors || !fileAnchors.has(anchorId)) {
       return {
@@ -266,7 +314,7 @@ async function processFile(filePath) {
   const deadLinks = [];
 
   for (const link of links) {
-    const result = await validateLink(link);
+    const result = await validateLink(link, filePath);
     if (!result.valid) {
       deadLinks.push({
         file: path.relative(process.cwd(), filePath),

src/content/reference/react-dom/components/common.md

@@ -356,7 +356,7 @@ An event handler type for the [CSS animation](https://developer.mozilla.org/en-U
 
 ---
 
-### `ClipboardEvent` handler function {/*clipboadevent-handler*/}
+### `ClipboardEvent` handler function {/*clipboardevent-handler*/}
 
 An event handler type for the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) events.
 
@@ -368,7 +368,7 @@ An event handler type for the [Clipboard API](https://developer.mozilla.org/en-U
 />
 ```
 
-#### Parameters {/*clipboadevent-handler-parameters*/}
+#### Parameters {/*clipboardevent-handler-parameters*/}
 
 * `e`: A [React event object](#react-event-object) with these extra [`ClipboardEvent`](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent) properties:
 

src/content/reference/react-dom/components/textarea.md

@@ -52,7 +52,7 @@ These `<textarea>` props are relevant both for uncontrolled and controlled text
 * [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#form): A string. Specifies the `id` of the `<form>` this input belongs to. If omitted, it's the closest parent form.
 * [`maxLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#maxlength): A number. Specifies the maximum length of text.
 * [`minLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#minlength): A number. Specifies the minimum length of text.
-* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name): A string. Specifies the name for this input that's [submitted with the form.](#reading-the-textarea-value-when-submitting-a-form)
+* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name): A string. Specifies the name for this input that's [submitted with the form.](#reading-the-text-area-value-when-submitting-a-form)
 * `onChange`: An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Required for [controlled text areas.](#controlling-a-text-area-with-a-state-variable) Fires immediately when the input's value is changed by the user (for example, it fires on every keystroke). Behaves like the browser [`input` event.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
 * `onChangeCapture`: A version of `onChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
 * [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use `onChange` instead which works similarly.

src/content/reference/react-dom/server/resume.md

@@ -47,7 +47,7 @@ async function handler(request, writable) {
 * `postponedState`: The opaque `postpone` object returned from a [prerender API](/reference/react-dom/static/index), loaded from wherever you stored it (e.g. redis, a file, or S3).
 * **optional** `options`: An object with streaming options.
   * **optional** `nonce`: A [`nonce`](http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nonce) string to allow scripts for [`script-src` Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src).
-  * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](#aborting-server-rendering) and render the rest on the client.
+  * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](/reference/react-dom/server/renderToReadableStream#aborting-server-rendering) and render the rest on the client.
   * **optional** `onBrowserBailout`: A callback React calls when it recovers from [`browser()`](/reference/react-dom/browser) by leaving a Suspense fallback for the browser to replace. It receives an `Error` describing the browser-only render and an `errorInfo` object containing the `componentStack`. If a reason was passed to `browser`, it is available as `error.cause`. By default, React does nothing. [See how to report browser-only rendering.](/reference/react-dom/browser#reporting-browser-only-rendering-on-the-server)
   * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToReadableStream#logging-crashes-on-the-server) make sure that you still call `console.error`.
 

src/content/reference/react-dom/server/resumeToPipeableStream.md

@@ -53,16 +53,16 @@ async function handler(request, response) {
   * **optional** `onAllReady`: A callback that fires when all rendering is complete, including both the shell and all additional content. You can call `pipe` here instead of in `onShellReady` for crawlers and static generation. The stream will contain the final HTML.
   * **optional** `onBrowserBailout`: A callback React calls when it recovers from [`browser()`](/reference/react-dom/browser) by leaving a Suspense fallback for the browser to replace. It receives an `Error` describing the browser-only render and an `errorInfo` object containing the `componentStack`. If a reason was passed to `browser`, it is available as `error.cause`. By default, React does nothing. [See how to report browser-only rendering.](/reference/react-dom/browser#reporting-browser-only-rendering-on-the-server)
   * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToReadableStream#logging-crashes-on-the-server) make sure that you still call `console.error`.
-  * **optional** `onShellReady`: A callback that fires right after the [shell](#specifying-what-goes-into-the-shell) has finished. You can call `pipe` here to start streaming. React will [stream the additional content](#streaming-more-content-as-it-loads) after the shell along with the inline `<script>` tags that replace the HTML loading fallbacks with the content.
-  * **optional** `onShellError`: A callback that fires if there was an error rendering the shell. It receives the error as an argument. No bytes were emitted from the stream yet, and neither `onShellReady` nor `onAllReady` will get called, so you can [output a fallback HTML shell](#recovering-from-errors-inside-the-shell) or use the prelude.
+  * **optional** `onShellReady`: A callback that fires right after the [shell](/reference/react-dom/server/renderToPipeableStream#specifying-what-goes-into-the-shell) has finished. You can call `pipe` here to start streaming. React will [stream the additional content](/reference/react-dom/server/renderToPipeableStream#streaming-more-content-as-it-loads) after the shell along with the inline `<script>` tags that replace the HTML loading fallbacks with the content.
+  * **optional** `onShellError`: A callback that fires if there was an error rendering the shell. It receives the error as an argument. No bytes were emitted from the stream yet, and neither `onShellReady` nor `onAllReady` will get called, so you can [output a fallback HTML shell](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-inside-the-shell) or use the prelude.
 
 
 #### Returns {/*returns*/}
 
 `resumeToPipeableStream` returns an object with two methods:
 
 * `pipe` outputs the HTML into the provided [Writable Node.js Stream.](https://nodejs.org/api/stream.html#writable-streams) Call `pipe` in `onShellReady` if you want to enable streaming, or in `onAllReady` for crawlers and static generation.
-* `abort` lets you [abort server rendering](#aborting-server-rendering) and render the rest on the client.
+* `abort` lets you [abort server rendering](/reference/react-dom/server/renderToPipeableStream#aborting-server-rendering) and render the rest on the client.
 
 #### Caveats {/*caveats*/}
 

src/content/reference/react-dom/static/resumeAndPrerender.md

@@ -52,9 +52,9 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
 * `reactNode`: The React node you called `prerender` (or a previous `resumeAndPrerender`) with. For example, a JSX element like `<App />`. It is expected to represent the entire document, so the `App` component should render the `<html>` tag.
 * `postponedState`: The opaque `postpone` object returned from a [prerender API](/reference/react-dom/static/index), loaded from wherever you stored it (e.g. redis, a file, or S3).
 * **optional** `options`: An object with streaming options.
-  * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](#aborting-server-rendering) and render the rest on the client.
+  * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](/reference/react-dom/server/renderToReadableStream#aborting-server-rendering) and render the rest on the client.
   * **optional** `onBrowserBailout`: A callback React calls when it recovers from [`browser()`](/reference/react-dom/browser) by leaving a Suspense fallback for the browser to replace. It receives an `Error` describing the browser-only render and an `errorInfo` object containing the `componentStack`. If a reason was passed to `browser`, it is available as `error.cause`. By default, React does nothing. [See how to report browser-only rendering.](/reference/react-dom/browser#reporting-browser-only-rendering-on-the-server)
-  * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](#recovering-from-errors-outside-the-shell) or [not.](#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](#logging-crashes-on-the-server) make sure that you still call `console.error`.
+  * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToReadableStream#logging-crashes-on-the-server) make sure that you still call `console.error`.
 
 #### Returns {/*returns*/}
 

src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md

@@ -48,9 +48,9 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
 * `reactNode`: The React node you called `prerender` (or a previous `resumeAndPrerenderToNodeStream`) with. For example, a JSX element like `<App />`. It is expected to represent the entire document, so the `App` component should render the `<html>` tag.
 * `postponedState`: The opaque `postpone` object returned from a [prerender API](/reference/react-dom/static/index), loaded from wherever you stored it (e.g. redis, a file, or S3).
 * **optional** `options`: An object with streaming options.
-  * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](#aborting-server-rendering) and render the rest on the client.
+  * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](/reference/react-dom/server/renderToPipeableStream#aborting-server-rendering) and render the rest on the client.
   * **optional** `onBrowserBailout`: A callback React calls when it recovers from [`browser()`](/reference/react-dom/browser) by leaving a Suspense fallback for the browser to replace. It receives an `Error` describing the browser-only render and an `errorInfo` object containing the `componentStack`. If a reason was passed to `browser`, it is available as `error.cause`. By default, React does nothing. [See how to report browser-only rendering.](/reference/react-dom/browser#reporting-browser-only-rendering-on-the-server)
-  * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](#recovering-from-errors-outside-the-shell) or [not.](#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](#logging-crashes-on-the-server) make sure that you still call `console.error`.
+  * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToPipeableStream#logging-crashes-on-the-server) make sure that you still call `console.error`.
 
 #### Returns {/*returns*/}
 

src/content/reference/react/Component.md

@@ -856,7 +856,7 @@ There is no direct equivalent to `UNSAFE_componentWillUpdate` in function compon
 
 ### `static contextType` {/*static-contexttype*/}
 
-If you want to read [`this.context`](#context-instance-field) from your class component, you must specify which context it needs to read. The context you specify as the `static contextType` must be a value previously created by [`createContext`.](/reference/react/createContext)
+If you want to read [`this.context`](#context) from your class component, you must specify which context it needs to read. The context you specify as the `static contextType` must be a value previously created by [`createContext`.](/reference/react/createContext)
 
 ```js {2}
 class Button extends Component {

src/content/reference/react/ViewTransition.md

@@ -86,7 +86,7 @@ React automatically decides the type of View Transition animation to trigger:
 
 By default, `<ViewTransition>` animates with a smooth cross-fade (the browser default view transition).
 
-You can customize the animation by providing a [View Transition Class](#view-transition-class) to the `<ViewTransition>` component for each kind of trigger (see [Styling View Transitions](#styling-view-transitions)), or by using [ViewTransition Events](#view-transition-events) to control the animation with JavaScript using the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+You can customize the animation by providing a [View Transition Class](#view-transition-class) to the `<ViewTransition>` component for each kind of trigger (see [Styling View Transitions](#styling-view-transitions)), or by using [ViewTransition Events](#view-transition-event) to control the animation with JavaScript using the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
 
 <Note>