feat(module:affix): support standalone component (#8037)

* build: support standalone label generation

* feat(module:affix): support standalone component

Author: HyperLife1119

components/affix/affix.component.ts

@@ -3,8 +3,8 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { Direction, Directionality } from '@angular/cdk/bidi';
-import { Platform } from '@angular/cdk/platform';
+import { BidiModule, Direction, Directionality } from '@angular/cdk/bidi';
+import { Platform, PlatformModule } from '@angular/cdk/platform';
 import { DOCUMENT } from '@angular/common';
 import {
   AfterViewInit,
@@ -45,6 +45,8 @@ const NZ_AFFIX_DEFAULT_SCROLL_TIME = 20;
 @Component({
   selector: 'nz-affix',
   exportAs: 'nzAffix',
+  standalone: true,
+  imports: [BidiModule, PlatformModule],
   template: `
     <div #fixedEl>
       <ng-content></ng-content>

components/affix/affix.module.ts

@@ -3,16 +3,12 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { BidiModule } from '@angular/cdk/bidi';
-import { PlatformModule } from '@angular/cdk/platform';
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { NzAffixComponent } from './affix.component';
 
 @NgModule({
-  declarations: [NzAffixComponent],
   exports: [NzAffixComponent],
-  imports: [BidiModule, CommonModule, PlatformModule]
+  imports: [NzAffixComponent]
 })
 export class NzAffixModule {}

components/affix/doc/index.en-US.md

@@ -19,7 +19,7 @@ import { NzAffixModule } from 'ng-zorro-antd/affix';
 
 ## API
 
-### nz-affix
+### nz-affix:standalone
 
 | Property | Description | Type | Default | Global Config |
 | -------- | ----------- | ---- | ------- | ------------- |

components/affix/doc/index.zh-CN.md

@@ -21,7 +21,7 @@ import { NzAffixModule } from 'ng-zorro-antd/affix';
 ## API
 
 
-### nz-affix
+### nz-affix:standalone
 
 | 成员 | 说明 | 类型 | 默认值 | 全局配置 |
 | --- | --- | --- | --- | --- |

scripts/site/_site/doc/style/patch.less

@@ -1,14 +1,15 @@
-@media screen and (max-width:767px){
+@media screen and (max-width:767px) {
   .pic-plus img {
     width: 120px;
     height: auto;
   }
 }
 
-.pic-plus > * {
+.pic-plus>* {
   display: inline-block !important;
   vertical-align: middle;
 }
+
 .pic-plus span {
   font-size: 30px;
   color: #aaa;
@@ -82,7 +83,8 @@
   padding: 24px;
 }
 
-body[data-theme='dark'], [data-theme='dark'] * {
+body[data-theme='dark'],
+[data-theme='dark'] * {
   scrollbar-color: #434343 #262626;
 
   &::-webkit-scrollbar {
@@ -94,9 +96,10 @@ body[data-theme='dark'], [data-theme='dark'] * {
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color:  #434343;
+    background-color: #434343;
     border-radius: 6px;
     border: 2px solid #262626;
+
     :hover {
       background-color: #262626;
     }
@@ -116,6 +119,11 @@ label {
     font-weight: normal;
     text-transform: uppercase;
 
+    &.standalone {
+      color: @gold-6;
+      border: 2px solid @gold-6;
+    }
+
     &.directive {
       color: @magenta-6;
       border: 2px solid @magenta-6;
@@ -142,7 +150,7 @@ label {
   }
 
   .head-example {
-    background: rgba(255,255,255,.12) !important;
+    background: rgba(255, 255, 255, .12) !important;
   }
 
   .popover-menu .ant-popover-inner-content #nav a {
@@ -158,7 +166,7 @@ label {
   }
 
   .site-page-header-ghost-wrapper {
-    background-color: rgba(255,255,255,0.08);
+    background-color: rgba(255, 255, 255, 0.08);
   }
 
   .drawer-content-wrapper {
@@ -197,6 +205,7 @@ label {
       font-size: 20px;
       line-height: 28px;
     }
+
     .resource-card-description {
       margin: 0 20px 20px 20px;
       color: #697b8c;

scripts/site/utils/marked.js

@@ -109,23 +109,62 @@ renderer.link = function (href, title, text) {
   return str;
 };
 
+/**
+ * @param {'component' | 'directive' | 'standalone' | 'service'} label
+ * @returns {string}
+ */
+function createLabel(label) {
+  return `<label class="api-type-label ${label}">${label}</label>`;
+}
+
+const STANDALONE_SUFFIX_REGEX = /:standalone$/;
+
+/**
+ * Clean up special tags such as suffixes.
+ *
+ * Currently we have the following tags:
+ *
+ * Suffix:
+ * - `:standalone`: Indicates that the target is a standalone component, directive or pipe.
+ *
+ * @param {string} text
+ */
+function normalizeHead(text) {
+  return text.replace(STANDALONE_SUFFIX_REGEX, '');
+}
+
+/**
+ * @param {string} text
+ * @param {number} level
+ * @returns {string}
+ */
 renderer.heading = function (text, level) {
   const lowerText = text.toLowerCase().replace(/ /g, '-').replace(/\./g, '-').replace(/\?/g, '');
   const isMarkedLabel = level === 3 && text.indexOf('nz-') === 0;
   const isDirective = text[0] === '[' && text[text.length - 1] === ']';
   const isComponent = isMarkedLabel && !isDirective;
+  const isStandalone = STANDALONE_SUFFIX_REGEX.test(text);
   const isService = text.indexOf('Nz') === 0 && text.indexOf('Service') > -1;
-  const head = `<h${level} id="${lowerText}"><span>${text}</span>`;
+  const head = `<h${level} id="${lowerText}"><span>${normalizeHead(text)}</span>`;
   const link = `<a onclick="window.location.hash = '${lowerText}'" class="anchor">#</a></h${level}>`;
+
+  let heading = head;
+
   if (isComponent) {
-    return head + `<label class="api-type-label component">component</label>` + link;
+    heading += createLabel('component');
   } else if (isDirective) {
-    return head + `<label class="api-type-label directive">directive</label>` + link;
+    heading += createLabel('directive');
   } else if (isService) {
-    return head + `<label class="api-type-label service">service</label>` + link;
-  } else {
-    return head + link;
+    heading += createLabel('service');
   }
+
+  if (isStandalone) {
+    heading += createLabel('standalone');
+  }
+
+  heading += link;
+
+  return heading;
 };
 
 renderer.code = function (code, infostring, escaped) {