From be74c3cb9e58625c15b03a4a82739009f7ccb7be Mon Sep 17 00:00:00 2001
From: Valery Melou <me@valerymelou.com>
Date: Sat, 27 Jul 2024 08:29:00 +0100
Subject: [PATCH] feat: sort articles by published at desc

---
 libs/blog/data-access/src/lib/article.ts                  | 7 +++++--
 libs/blog/data-access/src/lib/articles.resolver.ts        | 4 +++-
 .../feature-article/src/lib/blog-article.component.html   | 4 ++--
 libs/blog/feature-home/src/lib/blog-home.component.html   | 8 ++++----
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/libs/blog/data-access/src/lib/article.ts b/libs/blog/data-access/src/lib/article.ts
index aa39607..9a6eea3 100644
--- a/libs/blog/data-access/src/lib/article.ts
+++ b/libs/blog/data-access/src/lib/article.ts
@@ -4,6 +4,7 @@ import {
   EntrySkeletonType,
   TagLink,
 } from 'contentful';
+import { Document } from '@contentful/rich-text-types';
 import { Asset } from './asset';
 import { Tag } from './tag';
 
@@ -14,8 +15,9 @@ export class Article {
   cover?: Asset;
   createdAt = '';
   updatedAt = '';
+  publishedAt = '';
   tags: Tag[] = [];
-  content: any;
+  content!: Document;
 
   static fromEntry(
     entry: Entry<EntrySkeletonType, undefined, string>,
@@ -25,6 +27,7 @@ export class Article {
     article.title = entry.fields['title'] as string;
     article.slug = entry.fields['slug'] as string;
     article.abstract = entry.fields['abstract'] as string;
+    article.publishedAt = entry.fields['publishedAt'] as string;
     article.createdAt = entry.sys.createdAt;
     article.updatedAt = entry.sys.updatedAt;
     if (entry.fields['cover'] && assets) {
@@ -46,7 +49,7 @@ export class Article {
           .join(),
       });
     });
-    article.content = entry.fields['content'];
+    article.content = entry.fields['content'] as Document;
     return article;
   }
 }
diff --git a/libs/blog/data-access/src/lib/articles.resolver.ts b/libs/blog/data-access/src/lib/articles.resolver.ts
index b1d3f4d..4ed284c 100644
--- a/libs/blog/data-access/src/lib/articles.resolver.ts
+++ b/libs/blog/data-access/src/lib/articles.resolver.ts
@@ -8,5 +8,7 @@ import { ArticleService } from './article.service';
 export const articlesResolver: ResolveFn<Results<Article>> = () => {
   const articleService = inject(ArticleService);
 
-  return articleService.get({});
+  return articleService.get({
+    order: '-fields.publishedAt',
+  });
 };
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 6528c24..6b770c1 100644
--- a/libs/blog/feature-article/src/lib/blog-article.component.html
+++ b/libs/blog/feature-article/src/lib/blog-article.component.html
@@ -6,8 +6,8 @@
   <dl>
     <dt class="sr-only">Date</dt>
     <dd class="top-0 whitespace-nowrap text-sm leading-6">
-      <time [attr.datetime]="article.createdAt">{{
-        article.createdAt | date: 'mediumDate'
+      <time [attr.datetime]="article.publishedAt">{{
+        article.publishedAt | date: 'mediumDate'
       }}</time>
     </dd>
   </dl>
diff --git a/libs/blog/feature-home/src/lib/blog-home.component.html b/libs/blog/feature-home/src/lib/blog-home.component.html
index f754a97..7273072 100644
--- a/libs/blog/feature-home/src/lib/blog-home.component.html
+++ b/libs/blog/feature-home/src/lib/blog-home.component.html
@@ -50,8 +50,8 @@ <h2 class="text-xl lg:max-w-2xl">
             >
               <dt class="sr-only">Date</dt>
               <dd class="whitespace-nowrap text-sm leading-6">
-                <time [attr.datetime]="article.createdAt">{{
-                  article.createdAt | date: 'mediumDate'
+                <time [attr.datetime]="article.publishedAt">{{
+                  article.publishedAt | date: 'mediumDate'
                 }}</time>
               </dd>
             </dl>
@@ -60,14 +60,14 @@ <h2 class="text-xl lg:max-w-2xl">
             ui-link
             [routerLink]="[
               '/blog',
-              (article.createdAt | date: 'YYYY-MM-dd') + '-' + article.slug,
+              (article.publishedAt | date: 'YYYY-MM-dd') + '-' + article.slug,
             ]"
           >
             <span
               class="absolute -inset-x-4 -inset-y-2.5 sm:rounded-2xl md:-inset-x-6 md:-inset-y-4"
             >
             </span>
-            <span class="relative">Read the article</span>
+            <span class="relative text-sm">Read the article</span>
           </a>
         </article>
       }