build: link directly to drag&drop on adev (#32473)

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.

(cherry picked from commit c4fa201)

Author: crisbeto

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>

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

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>

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-',
       },