fix: blog page descriptions

dev-dreal · Feb 18, 2024 · 228341d · 228341d
1 parent 7678282
commit 228341d
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 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
@@ -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,22 +14,30 @@
         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"
     >
       {{ 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
@@ -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
@@ -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
@@ -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',