From f88f91d2c8f56426401ef18bf4d9eff8f5fa77fc Mon Sep 17 00:00:00 2001
From: Gabriel Dinant <gdevxy@gmail.com>
Date: Fri, 29 Nov 2024 22:01:15 +0100
Subject: [PATCH] Fixed blog-post ordering (by desc)

---
 .../resources/graphql/find-blog-posts.graphql |  2 +-
 .../contentful/ContentfulClientTest.java      |  2 +-
 .../PreviewContentfulClientTest.java          |  2 +-
 .../resources/templates/blog/blog-header.html |  2 +-
 .../resources/templates/blog/blog-image.html  |  2 +-
 .../templates/blog/blog-paragraph.html        |  2 +-
 component/src/main/resources/web/app/app.css  | 21 +++++++++++++++++++
 7 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/client/src/main/resources/graphql/find-blog-posts.graphql b/client/src/main/resources/graphql/find-blog-posts.graphql
index bd2f854..f2afb2c 100644
--- a/client/src/main/resources/graphql/find-blog-posts.graphql
+++ b/client/src/main/resources/graphql/find-blog-posts.graphql
@@ -1,5 +1,5 @@
 query findBlogPosts($limit: Int = 100, $skip: Int = 0, $locale: String = "en", $preview: Boolean = false) {
-    pageBlogPostCollection(limit: $limit, skip: $skip, locale: $locale, preview: $preview) {
+    pageBlogPostCollection(limit: $limit, skip: $skip, locale: $locale, preview: $preview, order: publishedDate_DESC) {
         total
         limit
         items {
diff --git a/client/src/test/java/com/gdevxy/blog/client/contentful/ContentfulClientTest.java b/client/src/test/java/com/gdevxy/blog/client/contentful/ContentfulClientTest.java
index 5ef6960..9646de2 100644
--- a/client/src/test/java/com/gdevxy/blog/client/contentful/ContentfulClientTest.java
+++ b/client/src/test/java/com/gdevxy/blog/client/contentful/ContentfulClientTest.java
@@ -53,7 +53,7 @@ void findBlogPost_NotFound() {
 	void findBlogPosts() {
 		// given
 		wiremock.register(post(urlPathEqualTo("/")).withHeader(HttpHeaders.AUTHORIZATION, equalTo("Bearer PUBLISHED"))
-				.withRequestBody(containing("query findBlogPosts($limit: Int = 100, $skip: Int = 0, $locale: String = \\\"en\\\", $preview: Boolean = false)"))
+				.withRequestBody(containing("query findBlogPosts($limit: Int = 100, $skip: Int = 0, $locale: String = \\\"en\\\", $preview: Boolean = false, order: publishedDate_DESC)"))
 				.willReturn(ok().withBodyFile("find-blog-posts.json")));
 
 		// when
diff --git a/client/src/test/java/com/gdevxy/blog/client/contentful/PreviewContentfulClientTest.java b/client/src/test/java/com/gdevxy/blog/client/contentful/PreviewContentfulClientTest.java
index 6f4f6d7..e89c98f 100644
--- a/client/src/test/java/com/gdevxy/blog/client/contentful/PreviewContentfulClientTest.java
+++ b/client/src/test/java/com/gdevxy/blog/client/contentful/PreviewContentfulClientTest.java
@@ -53,7 +53,7 @@ void findBlogPost_NotFound() {
 	void findBlogPosts() {
 		// given
 		wiremock.register(post(urlPathEqualTo("/")).withHeader(HttpHeaders.AUTHORIZATION, equalTo("Bearer PREVIEW"))
-				.withRequestBody(containing("query findBlogPosts($limit: Int = 100, $skip: Int = 0, $locale: String = \\\"en\\\", $preview: Boolean = false)"))
+				.withRequestBody(containing("query findBlogPosts($limit: Int = 100, $skip: Int = 0, $locale: String = \\\"en\\\", $preview: Boolean = false, order: publishedDate_DESC)"))
 				.willReturn(ok().withBodyFile("find-blog-posts.json")));
 
 		// when
diff --git a/component/src/main/resources/templates/blog/blog-header.html b/component/src/main/resources/templates/blog/blog-header.html
index aefaa07..d872a88 100644
--- a/component/src/main/resources/templates/blog/blog-header.html
+++ b/component/src/main/resources/templates/blog/blog-header.html
@@ -1 +1 @@
-<p class="h{heading} px-5">{value}</p>
+<p class="h{heading} blog-header">{value}</p>
diff --git a/component/src/main/resources/templates/blog/blog-image.html b/component/src/main/resources/templates/blog/blog-image.html
index 0d7f01a..3bd1c78 100644
--- a/component/src/main/resources/templates/blog/blog-image.html
+++ b/component/src/main/resources/templates/blog/blog-image.html
@@ -2,6 +2,6 @@
     {#if image.fullWidth}
         <img src="{image.url}" style="width: 100%; object-fit: cover; object-position: 50% 50%;" alt="{image.title}">
     {#else}
-        <img src="{image.url}" style="width: {image.width}px; height: {image.height};" alt="{image.title}">
+        <img src="{image.url}" style="width: {image.width}; height: {image.height};" alt="{image.title}" class="img-fluid">
     {/if}
 </div>
diff --git a/component/src/main/resources/templates/blog/blog-paragraph.html b/component/src/main/resources/templates/blog/blog-paragraph.html
index 3e11816..1876b0d 100644
--- a/component/src/main/resources/templates/blog/blog-paragraph.html
+++ b/component/src/main/resources/templates/blog/blog-paragraph.html
@@ -1,3 +1,3 @@
-<div class="py-3 px-5 fs-5">
+<div class="blog-paragraph">
     {#include blog/blog-text blocks=blocks}{/include}
 </div>
diff --git a/component/src/main/resources/web/app/app.css b/component/src/main/resources/web/app/app.css
index d1716e3..eb7e8dc 100644
--- a/component/src/main/resources/web/app/app.css
+++ b/component/src/main/resources/web/app/app.css
@@ -2,6 +2,27 @@
     background-color: #23123B
 }
 
+.blog-header{
+    padding-right: 3rem !important;
+    padding-left: 3rem !important;
+}
+
+.blog-paragraph {
+    padding: 1rem 3rem !important;
+    font-size:1.25rem !important;
+}
+
+@media only screen and (max-width: 767px) {
+    .blog-paragraph {
+        padding: 1rem 1rem !important;
+        font-size: 1.25rem !important;
+    }
+    .blog-header{
+        padding-right: 1rem !important;
+        padding-left: 1rem !important;
+    }
+}
+
 .card-with-effect {
     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
     background: #fff;