From adc5e9d18e67e5c9f9a302bf9a5c3df0f7d56d0d Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Thu, 4 Dec 2025 11:15:58 +0100
Subject: [PATCH] build: link directly to drag&drop on adev

Currently we have an internal router link that gets redirected to adev. This is likely bad for SEO since the bot may not follow the link. These changes use a link pointing directly to adev.

Note that we have to keep the routing config in case users land on the page directly.
---
 .../component-category-list.html              | 40 ++++++++++++-------
 .../component-category-list.ts                |  3 +-
 .../component-sidenav/component-nav.html      | 18 +++++----
 .../documentation-items.ts                    |  3 ++
 4 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/docs/src/app/pages/component-category-list/component-category-list.html b/docs/src/app/pages/component-category-list/component-category-list.html
index 3c0ea17085c0..5e3ec2b9efae 100644
--- a/docs/src/app/pages/component-category-list/component-category-list.html
+++ b/docs/src/app/pages/component-category-list/component-category-list.html
@@ -6,21 +6,31 @@
 @if (items.length > 0) {
   <div class="docs-component-category-list">
     @for (component of items; track component) {
-      <a class="docs-component-category-list-item"
-         [routerLink]="'/' + section + '/' + component.id">
-        <div class="docs-component-category-list-card" matRipple>
-          @if (section === 'components') {
-            <img class="docs-component-category-list-card-image-wrapper"
-                [src]="'../../../assets/screenshots/' + component.id + '.scene.png'"
-                loading="lazy"
-                alt=""
-                role="presentation"
-                aria-hidden="true">
-          }
-          <div class="docs-component-category-list-card-title">{{component.name}}</div>
-          <div class="docs-component-category-list-card-summary">{{component.summary}}</div>
-        </div>
-      </a>
+      @if (component.externalRedirect) {
+        <a class="docs-component-category-list-item" [href]="component.externalRedirect">
+          <ng-container [ngTemplateOutlet]="card" [ngTemplateOutletContext]="{component}"/>
+        </a>
+      } @else {
+        <a class="docs-component-category-list-item"
+          [routerLink]="'/' + section + '/' + component.id">
+          <ng-container [ngTemplateOutlet]="card" [ngTemplateOutletContext]="{component}"/>
+        </a>
+      }
     }
   </div>
 }
+
+<ng-template #card let-component="component">
+  <div class="docs-component-category-list-card" matRipple>
+    @if (section === 'components') {
+      <img class="docs-component-category-list-card-image-wrapper"
+          [src]="'../../../assets/screenshots/' + component.id + '.scene.png'"
+          loading="lazy"
+          alt=""
+          role="presentation"
+          aria-hidden="true">
+    }
+    <div class="docs-component-category-list-card-title">{{component.name}}</div>
+    <div class="docs-component-category-list-card-summary">{{component.summary}}</div>
+  </div>
+</ng-template>
diff --git a/docs/src/app/pages/component-category-list/component-category-list.ts b/docs/src/app/pages/component-category-list/component-category-list.ts
index 9f0588459e0e..7501dc3ab3ab 100644
--- a/docs/src/app/pages/component-category-list/component-category-list.ts
+++ b/docs/src/app/pages/component-category-list/component-category-list.ts
@@ -9,6 +9,7 @@
 import {Component, OnDestroy, OnInit, inject} from '@angular/core';
 import {ActivatedRoute, RouterLink} from '@angular/router';
 import {MatRipple} from '@angular/material/core';
+import {NgTemplateOutlet} from '@angular/common';
 import {combineLatest, Subscription} from 'rxjs';
 
 import {
@@ -24,7 +25,7 @@ import {ComponentPageTitle} from '../page-title/page-title';
   selector: 'app-component-category-list',
   templateUrl: './component-category-list.html',
   styleUrls: ['./component-category-list.scss'],
-  imports: [NavigationFocus, RouterLink, MatRipple],
+  imports: [NavigationFocus, RouterLink, MatRipple, NgTemplateOutlet],
 })
 export class ComponentCategoryList implements OnInit, OnDestroy {
   private readonly _docItems = inject(DocumentationItems);
diff --git a/docs/src/app/pages/component-sidenav/component-nav.html b/docs/src/app/pages/component-sidenav/component-nav.html
index 4e9b0a3c7d2e..c08350c3cb97 100644
--- a/docs/src/app/pages/component-sidenav/component-nav.html
+++ b/docs/src/app/pages/component-sidenav/component-nav.html
@@ -6,13 +6,17 @@
     <div class="docs-component-viewer-nav-content">
       <mat-nav-list>
         @for (component of items; track component) {
-          <a mat-list-item #link="routerLinkActive"
-              [routerLink]="'/' + params?.section + '/' + component.id"
-              [activated]="link.isActive"
-              routerLinkActive="docs-component-viewer-sidenav-item-selected"
-              [attr.aria-current]="link.isActive ? 'page': 'false'">
-            {{component.name}}
-          </a>
+          @if (component.externalRedirect) {
+            <a mat-list-item [href]="component.externalRedirect">{{component.name}}</a>
+          } @else {
+            <a mat-list-item #link="routerLinkActive"
+                [routerLink]="'/' + params?.section + '/' + component.id"
+                [activated]="link.isActive"
+                routerLinkActive="docs-component-viewer-sidenav-item-selected"
+                [attr.aria-current]="link.isActive ? 'page': 'false'">
+              {{component.name}}
+            </a>
+          }
         }
       </mat-nav-list>
     </div>
diff --git a/docs/src/app/shared/documentation-items/documentation-items.ts b/docs/src/app/shared/documentation-items/documentation-items.ts
index d73c2ab4c510..26cb3d2b7dee 100644
--- a/docs/src/app/shared/documentation-items/documentation-items.ts
+++ b/docs/src/app/shared/documentation-items/documentation-items.ts
@@ -40,6 +40,8 @@ export interface DocItem {
   additionalApiDocs?: AdditionalApiDoc[];
   /** Whether the doc item can display styling information. */
   hasStyling?: boolean;
+  /** External URL to the item's docs. */
+  externalRedirect?: string;
 }
 
 export interface DocSection {
@@ -462,6 +464,7 @@ const DOCS: {[key: string]: DocItem[]} = {
       id: 'drag-drop',
       name: 'Drag and Drop',
       summary: 'Directives enabling drag-and-drop interactions',
+      externalRedirect: 'https://angular.dev/guide/drag-drop',
       exampleSpecs: {
         prefix: 'cdk-drag-drop-',
       },