fix: article's display

valerymelou · Aug 2, 2024 · 30f5207 · 30f5207
1 parent e4990a3
commit 30f5207
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 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
@@ -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
@@ -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
@@ -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',