From 30f520745c778061437fc9b1f49cf202336006b3 Mon Sep 17 00:00:00 2001
From: Valery Melou <me@valerymelou.com>
Date: Fri, 2 Aug 2024 22:40:03 +0100
Subject: [PATCH] fix: article's display

---
 .../src/lib/blog-article.component.html              | 12 ++++++++----
 libs/shared/ui/src/lib/code/code.component.html      |  2 +-
 libs/shared/ui/src/lib/code/code.component.ts        |  2 ++
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/libs/blog/feature-article/src/lib/blog-article.component.html b/libs/blog/feature-article/src/lib/blog-article.component.html
index 90632d4..86dc7eb 100644
--- a/libs/blog/feature-article/src/lib/blog-article.component.html
+++ b/libs/blog/feature-article/src/lib/blog-article.component.html
@@ -22,15 +22,19 @@
       <img
         class="h-96 w-full rounded-lg object-cover object-center"
         [src]="article.cover.url"
-        [alt]="article.cover.title"
+        [alt]="article.cover.description"
       />
       <figcaption class="italic text-slate-500 dark:text-slate-400">
-        {{ article.cover.title }}
+        {{ article.cover.description }}
       </figcaption>
     </figure>
   }
 
   <div class="my-10">
+    @if (article.abstract) {
+      <p class="my-5">{{ article.abstract }}</p>
+      <hr class="my-10 border-slate-200 dark:border-slate-700" />
+    }
     <div [cfRichTextDocument]="article.content" ngSkipHydration>
       <ng-container *cfRichTextNode="BLOCKS.HEADING_1; let node = node">
         <h1
@@ -118,11 +122,11 @@
           <img
             class="h-auto w-full"
             [src]="node.data.target.fields.file.url"
-            [alt]="node.data.target.fields.title"
+            [alt]="node.data.target.fields.description"
           />
           @if (node.data.target.fields.title) {
             <figcaption class="italic text-slate-500 dark:text-slate-400">
-              {{ node.data.target.fields.title }}
+              {{ node.data.target.fields.description }}
             </figcaption>
           }
         </figure>
diff --git a/libs/shared/ui/src/lib/code/code.component.html b/libs/shared/ui/src/lib/code/code.component.html
index aaf58a9..ea7a9bf 100644
--- a/libs/shared/ui/src/lib/code/code.component.html
+++ b/libs/shared/ui/src/lib/code/code.component.html
@@ -1,5 +1,5 @@
 @if (code) {
-  @if (code.split(' ').length === 1) {
+  @if (inline) {
     <div [innerHTML]="highlightedCode" class="code inline-flex"></div>
   } @else {
     <div class="group relative">
diff --git a/libs/shared/ui/src/lib/code/code.component.ts b/libs/shared/ui/src/lib/code/code.component.ts
index d5d409f..6964dc7 100644
--- a/libs/shared/ui/src/lib/code/code.component.ts
+++ b/libs/shared/ui/src/lib/code/code.component.ts
@@ -20,6 +20,7 @@ export class CodeComponent {
   @Input()
   set code(value: string) {
     this._code = value;
+    this.inline = !value.includes('\n');
     this.highlight();
   }
 
@@ -29,6 +30,7 @@ export class CodeComponent {
 
   @Input() language!: string;
   highlightedCode!: SafeHtml;
+  inline = false;
 
   private languages = [
     'javascript',