feat(template): add page links for pre and next page

docgeni · Sep 14, 2021 · f06a04c · f06a04c
1 parent 60403d4
commit f06a04c
Show file tree

Hide file tree

Showing 11 changed files with 206 additions and 11 deletions.
diff --git a/packages/template/src/pages/doc-viewer/doc-viewer.component.html b/packages/template/src/pages/doc-viewer/doc-viewer.component.html
@@ -12,6 +12,8 @@
           (contentRendered)="updateTableOfContents(docItem.title, $event)"
         >
         </dg-content-viewer>
+        <dg-doc-pages-links *ngIf="docPages$ | async as docPages" [docPages]="docPages"></dg-doc-pages-links>
+        <hr class="dg-divider" />
         <dg-doc-meta [meta]="docItem.meta"></dg-doc-meta>
       </div>
       <dg-toc #toc></dg-toc>

diff --git a/packages/template/src/pages/doc-viewer/doc-viewer.component.ts b/packages/template/src/pages/doc-viewer/doc-viewer.component.ts
@@ -25,6 +25,10 @@ export class DocViewerComponent implements OnInit, OnDestroy {
     exampleModuleFactory: NgModuleFactory<any> | null = null;
 
     docItem$: Observable<NavigationItem> = this.navigationService.docItem$.asObservable();
+    docPages$: Observable<{
+        pre: NavigationItem;
+        next: NavigationItem;
+    }> = this.navigationService.docPages$.asObservable();
 
     @ViewChild('toc') tableOfContents: TableOfContentsComponent;
 

diff --git a/packages/template/src/services/global-context.spec.ts b/packages/template/src/services/global-context.spec.ts
@@ -1,6 +1,7 @@
 import { DocgeniSiteConfig } from './../interfaces/config';
 import { CONFIG_TOKEN, GlobalContext } from './global-context';
 import { createServiceFactory, createHttpFactory, SpectatorHttp, HttpMethod } from '@ngneat/spectator';
+import { NavigationItem } from '../interfaces';
 
 describe('GlobalContext', () => {
     let spectator: SpectatorHttp<GlobalContext>;
@@ -163,4 +164,27 @@ describe('GlobalContext', () => {
         expect(spectator.service.navs).toEqual(data.navs);
         expect(spectator.service.docItems).toEqual(data.docs);
     });
+
+    it('should flatNavs by correct sort', () => {
+        const list: NavigationItem[] = [
+            {
+                id: '',
+                title: '',
+                path: '',
+                items: [{ id: '', title: '', path: '', items: [{ id: '1', title: '', path: '' }] }]
+            },
+            { id: '2', title: '', path: '' },
+            {
+                id: '',
+                title: '',
+                path: '',
+                items: [{ id: '3', title: '', path: '' }]
+            },
+            { id: '', title: '', path: '', items: [{ id: '4', title: '', path: '', hidden: true }] }
+        ];
+        const globalContext = new GlobalContext({} as DocgeniSiteConfig, undefined);
+        const result = globalContext.flatNavs(list);
+        expect(result.length).toBe(3);
+        expect(result.map(item => item.id)).toEqual(['1', '2', '3']);
+    });
 });
diff --git a/packages/template/src/services/global-context.ts b/packages/template/src/services/global-context.ts
@@ -58,7 +58,7 @@ export class GlobalContext {
                 next: (response: { navs: NavigationItem[]; docs: NavigationItem[]; homeMeta: HomeDocMeta }) => {
                     this.homeMeta = response.homeMeta;
                     this.navs = response.navs;
-                    this.docItems = response.docs;
+                    this.docItems = this.flatNavs(this.navs);
                     resolve(response);
                 },
                 error: error => {
@@ -71,4 +71,18 @@ export class GlobalContext {
     getAssetsContentPath(path: string) {
         return path.startsWith('/') ? `assets/content${path}` : `assets/content/${path}`;
     }
+
+    flatNavs(navs: NavigationItem[]) {
+        navs = navs.slice();
+        const list = [];
+        while (navs.length) {
+            const item = navs.shift();
+            if (item.items) {
+                navs.unshift(...item.items);
+            } else if (!item.hidden) {
+                list.push(item);
+            }
+        }
+        return list;
+    }
 }
diff --git a/packages/template/src/services/navigation.service.ts b/packages/template/src/services/navigation.service.ts
@@ -10,10 +10,9 @@ export class NavigationService {
     channel$ = new BehaviorSubject<ChannelItem>(null);
 
     docItem$ = new BehaviorSubject<NavigationItem>(null);
-
+    docPages$ = new BehaviorSubject<{ pre: NavigationItem; next: NavigationItem }>(null);
     /** Responsive layout, sidebar default is hide */
     showSidebar = false;
-
     get channel() {
         return this.channel$.value;
     }
@@ -43,22 +42,32 @@ export class NavigationService {
     }
 
     getDocItemByPath(path: string) {
+        let index: number;
         if (this.channel) {
             // 类库频道
             if (this.channel.lib) {
-                return this.docItems.find(docItem => {
+                index = this.docItems.findIndex(docItem => {
                     return docItem.path === path && !!docItem.importSpecifier;
                 });
             } else {
-                return this.docItems.find(docItem => {
+                index = this.docItems.findIndex(docItem => {
                     return docItem.path === path && docItem.channelPath === this.channel.path;
                 });
             }
         } else {
-            return this.docItems.find(docItem => {
+            index = this.docItems.findIndex(docItem => {
                 return docItem.path === path;
             });
         }
+        if (index > -1) {
+            const preDocItem = index ? this.docItems[index - 1] : undefined;
+            const nextDocItem = this.docItems.length - 1 === index ? undefined : this.docItems[index + 1];
+            this.docPages$.next({
+                pre: preDocItem,
+                next: nextDocItem
+            });
+        }
+        return this.docItems[index];
     }
 
     selectChannelByPath(path: string) {

diff --git a/packages/template/src/shared/doc-pages-links/doc-pages-links.component.html b/packages/template/src/shared/doc-pages-links/doc-pages-links.component.html
@@ -0,0 +1,32 @@
+<div class="dg-pages-link">
+  <div class="dg-page-link" *ngIf="docPages.pre && docPages.pre.channelPath">
+    <a [routerLink]="['/' + docPages.pre.channelPath + '/' + docPages.pre.path]">
+      <div class="dg-page-link-icon">
+        <dg-icon iconName="arrowLeft"></dg-icon>
+      </div>
+      <div>
+        <div class="dg-page-link-label">
+          {{ 'PRE_PAGE' | dgTranslate }}
+        </div>
+        <div class="dg-page-link-title">
+          {{ docPages.pre.title }}
+        </div>
+      </div>
+    </a>
+  </div>
+  <div class="dg-page-link" *ngIf="docPages.next && docPages.next.channelPath">
+    <a [routerLink]="['/' + docPages.next.channelPath + '/' + docPages.next.path]">
+      <div class="dg-page-link-icon">
+        <dg-icon iconName="arrowRight"></dg-icon>
+      </div>
+      <div>
+        <div class="dg-page-link-label">
+          {{ 'NEXT_PAGE' | dgTranslate }}
+        </div>
+        <div class="dg-page-link-title">
+          {{ docPages.next.title }}
+        </div>
+      </div>
+    </a>
+  </div>
+</div>
diff --git a/packages/template/src/shared/doc-pages-links/doc-pages-links.component.ts b/packages/template/src/shared/doc-pages-links/doc-pages-links.component.ts
@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+import { NavigationItem } from '@docgeni/template';
+
+@Component({
+    selector: 'dg-doc-pages-links',
+    templateUrl: './doc-pages-links.component.html'
+})
+export class DocPagesLinksComponent {
+    @Input() docPages: {
+        pre: NavigationItem;
+        next: NavigationItem;
+    };
+    constructor() {}
+}
diff --git a/packages/template/src/shared/icon/svgs.ts b/packages/template/src/shared/icon/svgs.ts
@@ -67,12 +67,29 @@ const list = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="al
   <path d="M0 1h16v1.2H0V1zm0 6.4h16v1.2H0V7.4zm0 6.4h16V15H0v-1.2z" id="ag合并形状"></path>
 </g>
 </svg>`;
-
+const arrowLeft = `<svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
+    <title>navigation/arrow-left</title>
+    <desc>Created with Sketch.</desc>
+    <g id="navigation/arrow-left" stroke="none" stroke-width="1"  fill-rule="evenodd">
+        <path d="M7.4,4.14955232 L4.4383,7.3151 C4.2123,7.5571 3.8323,7.5691 3.5903,7.3431 C3.3483,7.1161 3.3353,6.7371 3.5623,6.4951 L7.53151194,2.2516372 C7.55538364,2.21814642 7.58305703,2.18659454 7.6145,2.1576 C7.8585,1.9336 8.2375,1.9496 8.4615,2.1946 L12.4315,6.5176 C12.6565,6.7616 12.6395,7.1416 12.3955,7.3656 C12.1515,7.5896 11.7725,7.5736 11.5475,7.3296 L8.6,4.11846621 L8.6,13.2666667 C8.6,13.6712222 8.331,14 8,14 C7.668,14 7.4,13.6712222 7.4,13.2666667 L7.4,4.14955232 Z" id="形状结合"  transform="translate(7.995013, 7.999832) rotate(-90.000000) translate(-7.995013, -7.999832) "></path>
+    </g>
+</svg>`;
+const arrowRight = `<svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
+    <title>navigation/arrow-right</title>
+    <desc>Created with Sketch.</desc>
+    <g id="navigation/arrow-right" stroke="none" stroke-width="1"  fill-rule="evenodd">
+        <path d="M7.4,4.14955232 L4.4383,7.3151 C4.2123,7.5571 3.8323,7.5691 3.5903,7.3431 C3.3483,7.1161 3.3353,6.7371 3.5623,6.4951 L7.53151194,2.2516372 C7.55538364,2.21814642 7.58305703,2.18659454 7.6145,2.1576 C7.8585,1.9336 8.2375,1.9496 8.4615,2.1946 L12.4315,6.5176 C12.6565,6.7616 12.6395,7.1416 12.3955,7.3656 C12.1515,7.5896 11.7725,7.5736 11.5475,7.3296 L8.6,4.11846621 L8.6,13.2666667 C8.6,13.6712222 8.331,14 8,14 C7.668,14 7.4,13.6712222 7.4,13.2666667 L7.4,4.14955232 Z" id="形状结合"  transform="translate(7.995013, 7.999832) rotate(90.000000) translate(-7.995013, -7.999832) "></path>
+    </g>
+</svg>`;
 export const BUILTIN_SVGS = {
     github,
     code,
     external,
     copy,
     check,
-    list
+    list,
+    arrowLeft,
+    arrowRight
 };
diff --git a/packages/template/src/shared/pipes/translate.pipe.ts b/packages/template/src/shared/pipes/translate.pipe.ts
@@ -7,13 +7,17 @@ const TRANSLATES = {
         OVERVIEW: '概览',
         EXAMPLES: '示例',
         HOME: '首页',
-        LAST_UPDATED_TIME: '最后更新'
+        LAST_UPDATED_TIME: '最后更新',
+        PRE_PAGE: '上一篇',
+        NEXT_PAGE: '下一篇'
     },
     'en-us': {
         OVERVIEW: 'Overview',
         EXAMPLES: 'Examples',
         HOME: 'Home',
-        LAST_UPDATED_TIME: 'Last updated'
+        LAST_UPDATED_TIME: 'Last updated',
+        PRE_PAGE: 'Previous',
+        NEXT_PAGE: 'Next'
     }
 };
 @Pipe({ name: 'dgTranslate' })

diff --git a/packages/template/src/shared/shared.module.ts b/packages/template/src/shared/shared.module.ts
@@ -25,6 +25,7 @@ import { DocMetaComponent } from './doc-meta/doc-meta.component';
 import { CopyComponent } from './copy/copy.component';
 import { SourceCodeComponent } from './source-code/source-code.component';
 import { ExampleRendererComponent } from './example-renderer/example-renderer.component';
+import { DocPagesLinksComponent } from './doc-pages-links/doc-pages-links.component';
 
 const COMPONENTS = [
     NavbarComponent,
@@ -47,7 +48,8 @@ const COMPONENTS = [
     IsModeLitePipe,
     IsModeFullPipe,
     HeroActionClassPipe,
-    DocMetaComponent
+    DocMetaComponent,
+    DocPagesLinksComponent
 ];
 @NgModule({
     declarations: [...COMPONENTS],

diff --git a/packages/template/src/styles/doc.scss b/packages/template/src/styles/doc.scss
@@ -338,3 +338,76 @@ $dg-service-color: #8e24aa;
         align-items: center;
     }
 }
+.dg-pages-link {
+    display: flex;
+    .dg-page-link {
+        flex: 1 1 0;
+        width: 100%;
+        display: flex;
+        a {
+            padding: 16px;
+            border-radius: 3px;
+            color: $dg-gray-800;
+            border: 1px solid $dg-gray-200;
+            box-shadow: rgb(116 129 141 / 10%) 0px 3px 8px 0px;
+            width: 100%;
+            display: flex;
+            &:hover {
+                color: $dg-primary;
+                border-color: $dg-primary;
+                cursor: pointer;
+                .dg-page-link-icon {
+                    color: $dg-primary;
+                }
+            }
+            .dg-page-link-icon {
+                color: $dg-gray-500;
+                flex: 1 1 0;
+                align-self: center;
+                dg-icon {
+                    font-size: 24px;
+                }
+            }
+        }
+        &:first-child {
+            a {
+                text-align: right;
+            }
+            &:not(:last-child) {
+                margin-right: 24px;
+            }
+            .dg-page-link-icon {
+                text-align: left;
+            }
+        }
+
+        &:last-child {
+            a {
+                text-align: left;
+                flex-direction: row-reverse;
+            }
+            .dg-page-link-icon {
+                text-align: right;
+            }
+        }
+
+        .dg-page-link-label {
+            font-size: 12px;
+            color: $dg-gray-600;
+            font-weight: 400;
+            line-height: 1.625;
+        }
+        .dg-page-link-title {
+            font-size: 16px;
+            font-weight: 500;
+            line-height: 1.5;
+        }
+    }
+}
+.dg-divider {
+    border: 0;
+    border-top: 1px solid $dg-gray-200;
+    margin-top: 24px;
+    margin-bottom: 0;
+    border-bottom: 24px solid transparent;
+}