use sections for manual pages

CentreForDigitalHumanities · Jun 5, 2024 · f1b4c9b · f1b4c9b
1 parent 417d277
commit f1b4c9b
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 48 deletions.
diff --git a/frontend/src/app/manual/manual-navigation.component.html b/frontend/src/app/manual/manual-navigation.component.html
@@ -1,12 +1,15 @@
 <nav class="menu" aria-labelledby="topics-header">
     <h2 class="title is-5" id="topics-header">Manual topics</h2>
-    <ul class="menu-list">
-        <li *ngFor="let page of manifest | async">
-            <a [routerLink]="['/manual', page.id]"
-                routerLinkActive="is-active"
-                ariaCurrentWhenActive="page">
-                {{page.title}}
-            </a>
-        </li>
-    </ul>
+    <ng-container *ngFor="let section of (manifest | async)">
+        <h3 class="menu-label">{{section.title}}</h3>
+        <ul class="menu-list">
+            <li *ngFor="let page of section.pages">
+                <a [routerLink]="['/manual', page.id]"
+                    routerLinkActive="is-active"
+                    ariaCurrentWhenActive="page">
+                    {{page.title}}
+                </a>
+            </li>
+        </ul>
+    </ng-container>
 </nav>
diff --git a/frontend/src/app/manual/manual-navigation.component.ts b/frontend/src/app/manual/manual-navigation.component.ts
@@ -3,7 +3,7 @@ import { Subject } from 'rxjs';
 import { Component, OnInit } from '@angular/core';
 import {
     DialogService,
-    ManualPageMetaData,
+    ManualSection,
 } from '../services';
 import { actionIcons, navIcons } from '../shared/icons';
 
@@ -16,7 +16,7 @@ export class ManualNavigationComponent implements OnInit {
     navIcons = navIcons;
     actionIcons = actionIcons;
 
-    manifest = new Subject<ManualPageMetaData[]>();
+    manifest = new Subject<ManualSection[]>();
 
     constructor(
         private dialogService: DialogService

diff --git a/frontend/src/app/services/dialog.service.ts b/frontend/src/app/services/dialog.service.ts
@@ -2,13 +2,14 @@ import { Injectable } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { BehaviorSubject } from 'rxjs';
 import { marked } from 'marked';
+import * as _ from 'lodash';
 
 @Injectable({
     providedIn: 'root'
 })
 export class DialogService {
     private behavior = new BehaviorSubject<DialogPageEvent>({ status: 'hide' });
-    private manifest: Promise<ManualPageMetaData[]> | undefined;
+    private manifest: Promise<ManualSection[]> | undefined;
 
     // eslint-disable-next-line @typescript-eslint/member-ordering
     public pageEvent = this.behavior.asObservable();
@@ -33,12 +34,13 @@ export class DialogService {
 
         const html = await pagePromise;
         const manifest = await this.getManifest();
-        const title = manifest.find(page => page.id === identifier).title;
+        const pages = _.flatMap(manifest, 'pages');
+        const title = pages.find(page => page.id === identifier).title;
 
         return { html, title };
     }
 
-    public getManifest(): Promise<ManualPageMetaData[]> {
+    public getManifest(): Promise<ManualSection[]> {
         if (this.manifest) {
             return this.manifest;
         }
@@ -120,7 +122,12 @@ export type DialogPageEvent =
   };
 
 
-export interface ManualPageMetaData {
+export interface ManualSection {
     title: string;
     id: string;
 }
+
+export interface ManualSection {
+    title: string;
+    pages: ManualSection[];
+};
diff --git a/frontend/src/assets/manual/en-GB/manifest.json b/frontend/src/assets/manual/en-GB/manifest.json
@@ -1,41 +1,56 @@
 [
     {
-        "id": "main",
-        "title": "I-Analyzer User Manual"
-    },
-    {   "id": "privacy",
-        "title": "Terms of use and privacy"
-    },
-    {
-        "id": "query",
-        "title": "Search Query"
-    },
-    {   "id": "numberofresults",
-        "title": "Number of results visualisation"
-    },
-    {   "id": "termfrequency",
-        "title": "Search term frequency visualisation"
-    },
-    {   "id": "wordcloud",
-        "title": "Word cloud visualisation"
-    },
-    {   "id": "ngrams",
-        "title": "Common n-grams visualisation"
-    },
-    {
-        "id": "relatedwords",
-        "title": "Related words visualisation"
-    },
-    {
-        "id": "comparesimilarity",
-        "title": "Compare similarity visualisation"
+        "title": "Using I-analyzer",
+        "pages": [
+            {
+                "id": "main",
+                "title": "I-Analyzer user manual"
+            },
+            {   "id": "privacy",
+                "title": "Terms of use and privacy"
+            },
+            {
+                "id": "query",
+                "title": "Search query"
+            },
+            {
+                "id": "download",
+                "title": "Downloading data"
+            },
+            {
+                "id": "citation",
+                "title": "Citing I-analyzer"
+            }
+        ]
     },
     {
-        "id": "download",
-        "title": "Downloading data"
+        "title": "Visualising documents",
+        "pages": [
+            {   "id": "numberofresults",
+                "title": "Number of results"
+            },
+            {   "id": "termfrequency",
+                "title": "Frequency of the search term"
+            },
+            {   "id": "wordcloud",
+                "title": "Most frequent words"
+            },
+            {   "id": "ngrams",
+                "title": "Neighbouring words"
+            }
+        ]
     },
     {
-        "id": "citation",
-        "title": "Citing I-analyzer"
+        "title": "Word models",
+        "pages": [
+            {
+                "id": "relatedwords",
+                "title": "Related words"
+            },
+            {
+                "id": "comparesimilarity",
+                "title": "Compare similarity"
+            }
+        ]
     }
 ]