chore: fix site

.vscode/launch.json

@@ -17,9 +17,8 @@
       "request": "launch",
       "name": "site generate",
       "runtimeArgs": ["-r", "ts-node/register", "-r", "tsconfig-paths/register"],
-      "protocol": "inspector",
       "internalConsoleOptions": "openOnSessionStart",
-      "args": ["${workspaceFolder}/scripts/site/generate.ts", "getting-started"],
+      "args": ["${workspaceFolder}/scripts/site/generate.ts", "auto-focus"],
       "env": {
         "TS_NODE_PROJECT": "${workspaceFolder}/scripts/site/tsconfig.json",
         "TS_NODE_TRANSPILE_ONLY": "true"
@@ -31,7 +30,6 @@
       "name": "schematics test",
       "runtimeArgs": ["-r", "ts-node/register"],
       "cwd": "${workspaceRoot}",
-      "protocol": "inspector",
       "sourceMaps": true,
       "internalConsoleOptions": "openOnSessionStart",
       "env": {

packages/abc/auto-focus/index.en-US.md

@@ -10,7 +10,7 @@ Allows to focus HTML-element right after its appearance, By default, it will tak
 
 ## API
 
-### [auto-focus]
+### [auto-focus]:standalone
 
 | Property | Description | Type | Default |
 |----------|-------------|------|---------|

packages/abc/auto-focus/index.zh-CN.md

@@ -10,7 +10,7 @@ module: import { AutoFocusModule } from '@delon/abc/auto-focus';
 
 ## API
 
-### [auto-focus]
+### [auto-focus]:standalone
 
 | 成员 | 说明 | 类型 | 默认值 |
 |----|----|----|-----|

scripts/site/utils/generate-md.ts

@@ -20,15 +20,19 @@ const converters = [highlight()].concat([
     (node: any) => {
       const tagName = JsonML.getTagName(node) as string;
       const children = JsonML.getChildren(node);
-      const sluggedId = generateSluggedId(children).id;
+      const sluggedData = generateSluggedId(children);
       // <a href="#${sluggedId}" class="anchor">#</a>
-      const childrenHtml = children.map(toHtml).join('');
+      // const childrenHtml = children.map(toHtml).join('');
       // const goTo = tagName === 'h2' ? `<a onclick="window.location.hash = '${sluggedId}'" class="anchor">#</a>` : '';
+      const apiTypes = ['directive', 'standalone', 'service', 'class']
+        .filter(key => (sluggedData as any)[key] === true)
+        .map(w => `<label class="api-type-label ${w}">${w}</label>`)
+        .join('');
       const copy =
         /h[0-9]{1}/g.test(tagName) && +tagName.substring(1) > 1
-          ? `<a class="lake-link"><i data-anchor="${sluggedId}"></i></a>`
+          ? `<a class="lake-link"><i data-anchor="${sluggedData.id}"></i></a>`
           : ``;
-      return `<${tagName} id="${sluggedId}">${copy}${childrenHtml}</${tagName}>`;
+      return `<${tagName} id="${sluggedData.id}">${copy}${sluggedData.id}${apiTypes}</${tagName}>`;
     }
   ],
   [
@@ -54,7 +58,7 @@ const converters = [highlight()].concat([
   ],
   [
     (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'a',
-    (node: any, index: number) => {
+    (node: any, _: number) => {
       const attrs = { ...JsonML.getAttributes(node) };
       let target = attrs.href.startsWith('//') || attrs.href.startsWith('http') ? ' target="_blank"' : '';
       if (~attrs.href.indexOf('ng-alain.com')) target = '';
@@ -65,7 +69,7 @@ const converters = [highlight()].concat([
   ],
   [
     (node: any) => !Array.isArray(node),
-    (node: any, index: number) => {
+    (node: any, _: number) => {
       if (!node.url) return '';
       return `<!--${node.url}-->`;
     }

scripts/site/utils/utils.ts

@@ -41,7 +41,14 @@ export function genValidId(id: string): string {
   return id.replace(/[() `?]*/g, '');
 }
 
-export function generateSluggedId(children: any): { id: string; text: string } {
+export function generateSluggedId(children: any): {
+  id: string;
+  text: string;
+  directive: boolean;
+  standalone: boolean;
+  service: boolean;
+  class: boolean;
+} {
   const headingText = children
     .map((node: any) => {
       if (JsonML.isElement(node)) {
@@ -52,10 +59,15 @@ export function generateSluggedId(children: any): { id: string; text: string } {
       }
       return node;
     })
-    .join('');
+    .join('')
+    .trim();
   return {
-    id: genValidId(headingText.trim()),
-    text: headingText
+    id: genValidId(headingText).split(':')[0],
+    text: headingText,
+    directive: children.some((node: any) => JsonML.isElement(node)),
+    standalone: headingText.includes(':standalone'),
+    service: headingText.includes(':service'),
+    class: headingText.includes(':class')
   };
 }
 

src/app/shared/components/docs/docs.component.ts

@@ -18,14 +18,23 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 import { I18NService, MetaService } from '@core';
 
 import { EditButtonComponent } from '../edit-button/edit-button.component';
+import { RouteTransferDirective } from '../route-transfer/route-transfer.directive';
 
 declare var hljs: any;
 
 @Component({
   selector: 'app-docs',
   templateUrl: './docs.component.html',
   standalone: true,
-  imports: [I18nPipe, NzAffixModule, NzAnchorModule, NzAlertModule, NzToolTipModule, EditButtonComponent]
+  imports: [
+    I18nPipe,
+    RouteTransferDirective,
+    NzAffixModule,
+    NzAnchorModule,
+    NzAlertModule,
+    NzToolTipModule,
+    EditButtonComponent
+  ]
 })
 export class DocsComponent implements OnInit, OnDestroy {
   private i18NChange$: Subscription;

src/styles/_markdown.less

@@ -268,8 +268,6 @@
 }
 
 .markdown.api-container {
-  overflow-x: auto;
-
   table {
     table-layout: auto;
     min-width: 720px;
@@ -325,6 +323,10 @@
   hr {
     margin: 12px 0;
   }
+
+  @media (max-width: @site-mobile) {
+    overflow-x: auto;
+  }
 }
 
 @demo-grid-color: #0092ff;
@@ -497,3 +499,42 @@
     margin-top: 40px;
   }
 }
+
+label.api-type-label {
+  display: inline;
+  margin-left: 8px;
+  padding: 1px 10px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  color: #ffffffd9;
+  text-transform: uppercase;
+  vertical-align: middle;
+  border-radius: 2px;
+
+  &.component {
+    color: @primary-color;
+    border: 2px solid @primary-color
+  }
+
+  &.standalone {
+    color: @warning-color;
+    border: 2px solid @warning-color
+  }
+
+  &.directive {
+    color: @magenta-6;
+    border: 2px solid @magenta-6
+  }
+
+  &.service {
+    color: @success-color;
+    border: 2px solid @success-color
+  }
+
+  &.class {
+    color: @volcano-6;
+    border: 2px solid @volcano-6
+  }
+
+}