From 9d13cff002842d6a6f0000816b30c36b3e7be889 Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Fri, 8 Sep 2023 00:04:24 +0200
Subject: [PATCH] Improve blog UI and fix missing short text #587

---
 .../gallery/blog/blog.gallery.component.html  | 46 +++++++++----------
 .../app/ui/gallery/blog/blog.service.ts       | 36 ++++++++-------
 2 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/src/frontend/app/ui/gallery/blog/blog.gallery.component.html b/src/frontend/app/ui/gallery/blog/blog.gallery.component.html
index 5a209f83..a99d99bb 100644
--- a/src/frontend/app/ui/gallery/blog/blog.gallery.component.html
+++ b/src/frontend/app/ui/gallery/blog/blog.gallery.component.html
@@ -1,29 +1,29 @@
 <ng-container *ngIf="mkObservable | async as markdowns">
-    <div class="blog" *ngIf="markdowns.length > 0">
-        <div class="card">
-            <div class="card-body" style="min-height: 77px" [style.height]="!open ? '77px':''">
-                <ng-container *ngFor="let md of markdowns; let last = last; let first = first">
-                    <ng-container *ngIf="open">
-                        <div *ngIf="markdowns.length > 1" class="row">
-                            <hr class="col">
-                            <div class="col-auto">{{md.file | toRelativePath}}</div>
-                        </div>
-                        <markdown
-                                [data]="md.text">
-                        </markdown>
-                    </ng-container>
-                    <span *ngIf="!open && first" class="text-preview">
+  <div class="blog" *ngIf="markdowns.length > 0">
+    <div class="card">
+      <div class="card-body" style="min-height: 77px" [style.height]="!open ? '77px':''">
+        <ng-container *ngFor="let md of markdowns; let last = last; let first = first">
+          <ng-container *ngIf="open">
+            <div *ngIf="markdowns.length > 1" class="row">
+              <hr class="col">
+              <div class="col-auto small fst-italic">{{md.file | toRelativePath}}</div>
+            </div>
             <markdown
-                    [inline]="true"
-                    [data]="md.textShort">
+              [data]="md.text">
+            </markdown>
+          </ng-container>
+          <span *ngIf="!open && first" class="text-preview">
+            <markdown
+              [inline]="true"
+              [data]="md.textShort">
             </markdown>
           </span>
-                </ng-container>
-            </div>
-        </div>
-
-        <button class="btn btn-blog-details text-body" (click)="toggleCollapsed()">
-            <ng-icon [name]="open ? 'ionChevronUpOutline' : 'ionChevronDownOutline'"></ng-icon>
-        </button>
+        </ng-container>
+      </div>
     </div>
+
+    <button class="btn btn-blog-details text-body" (click)="toggleCollapsed()">
+      <ng-icon [name]="open ? 'ionChevronUpOutline' : 'ionChevronDownOutline'"></ng-icon>
+    </button>
+  </div>
 </ng-container>
diff --git a/src/frontend/app/ui/gallery/blog/blog.service.ts b/src/frontend/app/ui/gallery/blog/blog.service.ts
index 3691a929..ff2c95fe 100644
--- a/src/frontend/app/ui/gallery/blog/blog.service.ts
+++ b/src/frontend/app/ui/gallery/blog/blog.service.ts
@@ -16,18 +16,18 @@ export class BlogService {
               private mdFilesFilterPipe: MDFilesFilterPipe) {
 
     this.groupedMarkdowns = this.galleryService.sortedFilteredContent.pipe(
-        mergeMap(async content => {
-          if (!content) {
-            return [];
-          }
-          const dates = content.mediaGroups.map(g => g.date)
-              .filter(d => !!d).map(d => d.getTime());
+      mergeMap(async content => {
+        if (!content) {
+          return [];
+        }
+        const dates = content.mediaGroups.map(g => g.date)
+          .filter(d => !!d).map(d => d.getTime());
 
-          const files = this.mdFilesFilterPipe.transform(content.metaFile)
-              .map(f => this.splitMarkDown(f, dates));
+        const files = this.mdFilesFilterPipe.transform(content.metaFile)
+          .map(f => this.splitMarkDown(f, dates));
 
-          return (await Promise.all(files)).flat();
-        }), shareReplay(1));
+        return (await Promise.all(files)).flat();
+      }), shareReplay(1));
   }
 
   private async splitMarkDown(file: FileDTO, dates: number[]): Promise<GroupedMarkdown[]> {
@@ -40,7 +40,8 @@ export class BlogService {
     if (dates.length == 0) {
       return [{
         text: markdown,
-        file: file
+        file: file,
+        textShort: markdown.substring(0, 200)
       }];
     }
 
@@ -55,7 +56,8 @@ export class BlogService {
     if (matches.length == 0) {
       return [{
         text: markdown,
-        file: file
+        file: file,
+        textShort: markdown.substring(0, 200)
       }];
     }
 
@@ -99,19 +101,19 @@ export class BlogService {
     }
 
     ret.forEach(md => md.textShort = md.text.substring(0, 200));
-
+    console.log(ret);
     return ret;
   }
 
   public getMarkDown(file: FileDTO): Promise<string> {
     const filePath = Utils.concatUrls(
-        file.directory.path,
-        file.directory.name,
-        file.name
+      file.directory.path,
+      file.directory.name,
+      file.name
     );
     if (!this.cache[filePath]) {
       this.cache[filePath] = this.networkService.getText(
-          '/gallery/content/' + filePath
+        '/gallery/content/' + filePath
       );
       (this.cache[filePath] as Promise<string>).then((val: string) => {
         this.cache[filePath] = val;