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.

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