feat(template): footer support custom (#222)

docgeni · Sep 10, 2021 · 652a8b1 · 652a8b1
1 parent a700170
commit 652a8b1
Show file tree

Hide file tree

Showing 15 changed files with 94 additions and 17 deletions.
diff --git a/.docgenirc.js b/.docgenirc.js
@@ -73,5 +73,7 @@ module.exports = {
             name: '中文'
         }
     ],
-    defaultLocale: 'zh-cn'
+    defaultLocale: 'zh-cn',
+    footer: `Open-source MIT Licensed | Copyright © 2020-present Powered by <a href="https://pingcode.com" target="_blank">PingCode</a><br />
+    <div class="beian"><a href="https://beian.miit.gov.cn/" target="_blank" class="beian-icp">京ICP备13017353号-13</a><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802034808" class="beian-public-security"><img src="assets/images/obtain-icp.png"> 京公网安备 11010802034808号 </a></div>`
 };
diff --git a/docs/index.md b/docs/index.md
@@ -27,8 +27,7 @@ features:
     description: 基于 TypeScript 类型定义和注释自动生成组件 API，维护代码和文档始终如一
   - icon: assets/images/home/feature6.png
     title: 多语言支持
-    description: 支持灵活的多语言配置   
-footer: Open-source MIT Licensed | Copyright © 2020-present<br />Powered by self
+    description: 支持灵活的多语言配置
 ---
 
 

diff --git a/packages/core/src/docgeni.ts b/packages/core/src/docgeni.ts
@@ -58,7 +58,8 @@ export class Docgeni implements DocgeniContext {
             locales: this.config.locales,
             defaultLocale: this.config.defaultLocale,
             logoUrl: this.config.logoUrl,
-            repoUrl: this.config.repoUrl
+            repoUrl: this.config.repoUrl,
+            footer: this.config.footer
         };
         this.paths = new DocgeniPaths(options.cwd || process.cwd(), this.config.docsDir, this.config.outputDir);
         this.watch = options.watch || false;

diff --git a/packages/core/src/interfaces/config.ts b/packages/core/src/interfaces/config.ts
@@ -22,7 +22,6 @@ export interface HomeDocMeta {
         title: string;
         description: string;
     }[];
-    footer: string;
     contentPath: string;
 }
 
@@ -80,6 +79,8 @@ export interface DocgeniConfig {
     locales?: Locale[];
     /** Default locale **/
     defaultLocale?: string;
+    /** footer content **/
+    footer?: string;
 }
 
 // For Angular Template
@@ -108,4 +109,6 @@ export interface DocgeniSiteConfig {
     locales?: Locale[];
     /** Default locale **/
     defaultLocale?: string;
+    /** footer content **/
+    footer?: string;
 }
diff --git a/packages/core/test/config.spec.ts b/packages/core/test/config.spec.ts
@@ -114,7 +114,8 @@ describe('#config', () => {
                         path: 'https://github.com/docgeni/docgeni',
                         isExternal: true
                     }
-                ]
+                ],
+                footer: 'Open-source MIT Licensed | Copyright © 2020-present Powered by PingCode'
             };
             const docgeni = new Docgeni({
                 config: customConfig

diff --git a/packages/template/src/interfaces/config.ts b/packages/template/src/interfaces/config.ts
@@ -64,8 +64,10 @@ export interface DocgeniConfig {
     repoUrl?: string;
     /** Docs dir, default is 'docs' **/
     docsDir?: string;
-    /** Site default dir .docgeni **/
+    /** Site default dir .docgeni/site **/
     siteDir?: string;
+    /** Site default dir .docgeni/components **/
+    componentsDir?: string;
     /** Site output dir, default is dist/docgeni-site **/
     outputDir?: string;
     /** Angular demo site name in angular.json **/
@@ -78,6 +80,8 @@ export interface DocgeniConfig {
     locales?: Locale[];
     /** Default locale **/
     defaultLocale?: string;
+    /** footer content **/
+    footer?: string;
 }
 
 // For Angular Template
@@ -106,4 +110,6 @@ export interface DocgeniSiteConfig {
     locales?: Locale[];
     /** Default locale **/
     defaultLocale?: string;
+    /** footer content **/
+    footer?: string;
 }
diff --git a/packages/template/src/interfaces/library.ts b/packages/template/src/interfaces/library.ts
@@ -30,4 +30,5 @@ export interface DocgeniLibrary {
     docDir?: string;
     apiDir?: string;
     examplesDir?: string;
+    labels?: { [id: string]: { text: string; color: string } } | { id: string; text: string; color: string }[];
 }
diff --git a/packages/template/src/interfaces/navigation-item.ts b/packages/template/src/interfaces/navigation-item.ts
@@ -25,6 +25,7 @@ export interface ComponentDocItem extends DocItem {
     overview?: boolean;
     api?: boolean;
     category?: string;
+    label?: { text: string; color: string };
 }
 
 export interface CategoryItem {

diff --git a/packages/template/src/pages/doc-viewer/doc-viewer.component.html b/packages/template/src/pages/doc-viewer/doc-viewer.component.html
@@ -16,6 +16,6 @@
       <dg-toc #toc></dg-toc>
     </div>
   </ng-template>
-  <!-- <dg-footer></dg-footer> -->
+  <dg-footer></dg-footer>
 </ng-container>
 <div class="dg-doc-viewer-backdrop" (click)="close()"></div>
diff --git a/packages/template/src/pages/home/home.component.html b/packages/template/src/pages/home/home.component.html
@@ -31,4 +31,4 @@ <h1 class="dg-launch-title">{{ global.homeMeta.hero.title }}</h1>
   <dg-content-viewer [url]="global.homeMeta.contentPath | dgAssetsContentPath"></dg-content-viewer>
 </div>
 
-<dg-footer>{{ global.homeMeta.footer }}</dg-footer>
+<dg-footer></dg-footer>
diff --git a/packages/template/src/shared/footer/footer.component.html b/packages/template/src/shared/footer/footer.component.html
@@ -1 +1 @@
-Copyright © 2020-present Powered by PingCode<br />
+<ng-content></ng-content>
diff --git a/packages/template/src/shared/footer/footer.component.scss b/packages/template/src/shared/footer/footer.component.scss
@@ -3,9 +3,14 @@
     padding: 20px;
     border-top: 1px solid $dg-gray-200;
     text-align: center;
-    color: $dg-gray-700;
+    color: $dg-gray-600;
     a {
-        color: $dg-gray-700;
+        color: $dg-gray-600;
+        text-decoration: none;
+        &:hover {
+            color: $dg-gray-700;
+            text-decoration: none;
+        }
     }
 
     .beian {

diff --git a/packages/template/src/shared/footer/footer.component.spec.ts b/packages/template/src/shared/footer/footer.component.spec.ts
@@ -0,0 +1,45 @@
+import { createComponentFactory, Spectator } from '@ngneat/spectator';
+import { GlobalContext } from '../../services/global-context';
+import { FooterComponent } from './footer.component';
+
+describe('#footer', () => {
+    let spectator: Spectator<FooterComponent>;
+    const createComponent = createComponentFactory({
+        component: FooterComponent,
+        providers: [
+            {
+                provide: GlobalContext,
+                useValue: {
+                    config: {
+                        footer: 'My Footer Content'
+                    }
+                }
+            }
+        ]
+    });
+
+    it('should get correct footer', () => {
+        spectator = createComponent();
+        expect(spectator.element.classList.contains('dg-footer')).toBeTruthy();
+        expect(spectator.element.classList.contains('dg-hidden')).toBeFalsy();
+        expect(spectator.element.textContent).toContain('My Footer Content');
+    });
+
+    it('should hidden footer when footer is empty', () => {
+        spectator = createComponent({
+            providers: [
+                {
+                    provide: GlobalContext,
+                    useValue: {
+                        config: {
+                            footer: undefined
+                        }
+                    }
+                }
+            ]
+        });
+        expect(spectator.element.classList.contains('dg-footer')).toBeTruthy();
+        expect(spectator.element.classList.contains('dg-hidden')).toBeTruthy();
+        expect(spectator.element.textContent).toBeFalsy();
+    });
+});
diff --git a/packages/template/src/shared/footer/footer.component.ts b/packages/template/src/shared/footer/footer.component.ts
@@ -1,13 +1,24 @@
-import { Component, OnInit, HostBinding } from '@angular/core';
+import { Component, OnInit, HostBinding, ElementRef } from '@angular/core';
+import { GlobalContext } from '../../services/global-context';
 
 @Component({
     selector: 'dg-footer',
-    templateUrl: './footer.component.html'
+    templateUrl: './footer.component.html',
+    host: {
+        class: 'dg-footer'
+    }
 })
 export class FooterComponent implements OnInit {
-    @HostBinding(`class.dg-footer`) isFooter = true;
+    @HostBinding(`class.dg-hidden`) isHide = true;
 
-    constructor() {}
+    constructor(private global: GlobalContext, private elementRef: ElementRef) {}
 
-    ngOnInit(): void {}
+    ngOnInit(): void {
+        if (this.global.config.footer) {
+            this.elementRef.nativeElement.innerHTML = this.global.config.footer;
+            this.isHide = false;
+        } else {
+            this.isHide = true;
+        }
+    }
 }
diff --git a/packages/template/src/styles/doc.scss b/packages/template/src/styles/doc.scss
@@ -52,6 +52,7 @@ $dg-service-color: #8e24aa;
         display: flex;
         flex: auto;
         align-items: flex-start;
+        min-height: 100%;
     }
 
     .dg-doc-viewer-inner-content {
@@ -63,6 +64,7 @@ $dg-service-color: #8e24aa;
     .dg-component-viewer {
         display: block;
         width: 100%;
+        min-height: 100%;
 
         .dg-component-empty {
             display: block;