From 228341d10c513ae0368dd0aa88850d494f8c3faa Mon Sep 17 00:00:00 2001
From: Patrick Murimi <kabugap02@gmail.com>
Date: Sun, 18 Feb 2024 13:46:55 +0300
Subject: [PATCH] fix: blog page descriptions

---
 .../latest-blog/latest-blog.component.html      | 17 +++++++++++++----
 .../latest-blog/latest-blog.component.ts        |  1 +
 .../latest-blogs/latest-blogs.component.html    |  6 +++++-
 src/app/services/blogs/blogs.service.ts         |  2 +-
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/app/modules/blogs/main-content/latest-blogs/latest-blog/latest-blog.component.html b/src/app/modules/blogs/main-content/latest-blogs/latest-blog/latest-blog.component.html
index 6d4cb54..c0472ea 100644
--- a/src/app/modules/blogs/main-content/latest-blogs/latest-blog/latest-blog.component.html
+++ b/src/app/modules/blogs/main-content/latest-blogs/latest-blog/latest-blog.component.html
@@ -2,6 +2,7 @@
   class="flex justify-around items-center w-full h-full bg-secondaryBlue text-white rounded-[35px] p-8"
   routerLink="{{ blog.route }}"
 >
+  <!-- First Column -->
   <div class="h-full p-3 space-y-6">
     <div
       class="h-3/5 bg-darkBlue rounded-[35px] flex justify-center items-center p-3 wrapper"
@@ -13,10 +14,12 @@
         class="w-3/4 h-3/4 object-contain"
       />
     </div>
-    <div class="h-2/5 bg-darkBlue rounded-[35px] p-8 text-2xl wrapper">
-      {{ blog.shortDescription }}
+    <div class="h-2/5 bg-darkBlue rounded-[35px] p-10 text-2xl wrapper">
+      {{ blog.shortDescription.split(" ").slice(0, 10).join(" ") + "..." }}
     </div>
   </div>
+  <!-- End of First Column -->
+  <!-- Second Column -->
   <div class="h-full p-3 space-y-6">
     <div
       class="h-2/5 bg-darkBlue rounded-[35px] font-bold flex justify-center items-center wrapper"
@@ -24,11 +27,17 @@
       {{ blog.title }}
     </div>
     <div
-      class="h-3/5 bg-darkBlue rounded-[35px] p-8 text-2xl text-center wrapper"
+      class="h-3/5 bg-darkBlue rounded-[35px] p-10 text-2xl text-center wrapper"
     >
-      {{ blog.longDescription }}
+      {{
+        blog.longDescription
+          ?.split(" ")
+          ?.slice(0, longDescriptionCutOff)
+          ?.join(" ") + "..."
+      }}
     </div>
   </div>
+  <!-- End of Second Column -->
   <div class="h-full flex flex-col justify-around items-center">
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/src/app/modules/blogs/main-content/latest-blogs/latest-blog/latest-blog.component.ts b/src/app/modules/blogs/main-content/latest-blogs/latest-blog/latest-blog.component.ts
index c7290ff..1c17f47 100644
--- a/src/app/modules/blogs/main-content/latest-blogs/latest-blog/latest-blog.component.ts
+++ b/src/app/modules/blogs/main-content/latest-blogs/latest-blog/latest-blog.component.ts
@@ -11,4 +11,5 @@ import { RouterLink } from '@angular/router';
 })
 export class LatestBlogComponent {
   @Input({ required: true }) blog!: BlogModel;
+  @Input() longDescriptionCutOff: number = 20;
 }
diff --git a/src/app/modules/blogs/main-content/latest-blogs/latest-blogs.component.html b/src/app/modules/blogs/main-content/latest-blogs/latest-blogs.component.html
index cf49633..edf995e 100644
--- a/src/app/modules/blogs/main-content/latest-blogs/latest-blogs.component.html
+++ b/src/app/modules/blogs/main-content/latest-blogs/latest-blogs.component.html
@@ -7,7 +7,11 @@ <h2 class="text-4xl text-white mb-2 pl-4">Latest Blogs</h2>
       class="w-full hidden md:block w-1/2"
     ></latest-blog>
     } @else {
-    <latest-blog [blog]="blog" class="w-full md:w-1/2"></latest-blog>
+    <latest-blog
+      [blog]="blog"
+      [longDescriptionCutOff]="10"
+      class="w-full md:w-1/2"
+    ></latest-blog>
     } }
   </div>
 </div>
diff --git a/src/app/services/blogs/blogs.service.ts b/src/app/services/blogs/blogs.service.ts
index 1486291..a36eab8 100644
--- a/src/app/services/blogs/blogs.service.ts
+++ b/src/app/services/blogs/blogs.service.ts
@@ -11,7 +11,7 @@ export class BlogsService {
     return [
       {
         title: 'Machine Learning',
-        shortDescription: 'Future Trends in Machine Learning. What’s Next?',
+        shortDescription: 'Future Trends in Machine Learning.',
         longDescription:
           'Machine learning is the study of computer algorithms that improve automatically through experience.',
         image: 'assets/svgs/ml.svg',