Improve blog UI #711

src/frontend/app/app.module.ts

@@ -184,6 +184,7 @@ import {
   SortingMethodSettingsEntryComponent
 } from './ui/settings/template/settings-entry/sorting-method/sorting-method.settings-entry.component';
 import {ContentLoaderService} from './ui/gallery/contentLoader.service';
+import {FileDTOToRelativePathPipe} from './pipes/FileDTOToRelativePathPipe';
 
 @Injectable()
 export class MyHammerConfig extends HammerGestureConfig {
@@ -197,7 +198,7 @@ export class MyHammerConfig extends HammerGestureConfig {
 
 export class CustomUrlSerializer implements UrlSerializer {
   private defaultUrlSerializer: DefaultUrlSerializer =
-    new DefaultUrlSerializer();
+      new DefaultUrlSerializer();
 
   parse(url: string): UrlTree {
     // Encode parentheses
@@ -208,9 +209,9 @@ export class CustomUrlSerializer implements UrlSerializer {
 
   serialize(tree: UrlTree): string {
     return this.defaultUrlSerializer
-      .serialize(tree)
-      .replace(/%28/g, '(')
-      .replace(/%29/g, ')');
+        .serialize(tree)
+        .replace(/%28/g, '(')
+        .replace(/%29/g, ')');
   }
 }
 
@@ -325,6 +326,7 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
     StringifyEnum,
     StringifySearchType,
     FileDTOToPathPipe,
+    FileDTOToRelativePathPipe,
     PhotoFilterPipe,
     ParseIntPipe,
     UsersComponent,

src/frontend/app/pipes/FileDTOToRelativePathPipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { FileDTO } from '../../../common/entities/FileDTO';
+import { Utils } from '../../../common/Utils';
+
+@Pipe({ name: 'toRelativePath' })
+export class FileDTOToRelativePathPipe implements PipeTransform {
+  transform(metaFile: FileDTO): string | null {
+    if (!metaFile) {
+      return null;
+    }
+    return Utils.concatUrls(
+      metaFile.directory.path,
+      metaFile.directory.name,
+      metaFile.name
+    );
+  }
+}

src/frontend/app/ui/gallery/blog/blog.gallery.component.css

@@ -1,30 +1,34 @@
 .btn-blog-details {
-  position: absolute;
-  bottom: 0;
-  border: 0;
-  width: 100%;
+    position: absolute;
+    bottom: 0;
+    border: 0;
+    width: 100%;
 }
 
 .btn-blog-details:hover {
-  background-image: linear-gradient(transparent, rgba(var(--bs-body-color-rgb), 0.5));
+    background-image: linear-gradient(transparent, rgba(var(--bs-body-color-rgb), 0.5));
 }
 
 .blog {
-  opacity: 0.8;
-  position: relative;
+    opacity: 0.8;
+    position: relative;
 }
 
 .blog:hover {
-  opacity: 1;
+    opacity: 1;
 }
 
 .card-body {
-  overflow: hidden;
+    overflow: hidden;
 }
 
 .text-preview {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: block;
-  overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+    overflow: hidden;
+}
+
+hr {
+    margin: auto 0;
 }

src/frontend/app/ui/gallery/blog/blog.gallery.component.html

@@ -1,25 +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">
-          <markdown
-            *ngIf="open"
-            [data]="md.text">
-          </markdown>
-          <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">{{md.file | toRelativePath}}</div>
+                        </div>
+                        <markdown
+                                [data]="md.text">
+                        </markdown>
+                    </ng-container>
+                    <span *ngIf="!open && first" class="text-preview">
             <markdown
-              [inline]="true"
-              [data]="md.textShort">
+                    [inline]="true"
+                    [data]="md.textShort">
             </markdown>
           </span>
-          <hr *ngIf="open && !last">
-        </ng-container>
-      </div>
-    </div>
+                </ng-container>
+            </div>
+        </div>
 
-    <button class="btn btn-blog-details text-body" (click)="toggleCollapsed()">
-      <ng-icon [name]="open ? 'ionChevronUpOutline' : 'ionChevronDownOutline'"></ng-icon>
-    </button>
-  </div>
+        <button class="btn btn-blog-details text-body" (click)="toggleCollapsed()">
+            <ng-icon [name]="open ? 'ionChevronUpOutline' : 'ionChevronDownOutline'"></ng-icon>
+        </button>
+    </div>
 </ng-container>

src/frontend/app/ui/gallery/blog/blog.service.ts

@@ -16,22 +16,26 @@ 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[]> {
-    const markdown = await this.getMarkDown(file);
+    const markdown = (await this.getMarkDown(file)).trim();
+
+    if (!markdown) {
+      return [];
+    }
 
     if (dates.length == 0) {
       return [{
@@ -101,13 +105,13 @@ export class BlogService {
 
   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;