From 5fac0d1ffcfbabe5e1368caae6a281ad670675a0 Mon Sep 17 00:00:00 2001 From: obanijesuadufe8 Date: Fri, 19 Jul 2024 16:28:18 +0000 Subject: [PATCH 01/12] feat: develop the latest article card component --- app/components/article/LatestArticle.tsx | 58 ++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 app/components/article/LatestArticle.tsx diff --git a/app/components/article/LatestArticle.tsx b/app/components/article/LatestArticle.tsx new file mode 100644 index 00000000..902d5984 --- /dev/null +++ b/app/components/article/LatestArticle.tsx @@ -0,0 +1,58 @@ +interface props { + title: string; + description: string; + profileImage: string; + name: string; + time: string; + creationDate: string; + image: string; + link: string; + tag: string; +} + +export default function LatestArticle({ article }: { article: props }) { + return ( +
+
+
+ + +
+ {article.tag} +
+ + +

+ {article.title} +

+ +

+ {article.description} +

+ +
+
+ {article.name} +

+ {article.name} +

+
+

+ {article.time} + {" "} + Read +

+ +

+ {article.creationDate} +

+
+ +
+
+ {article.title} +
+
+
+ ) +} \ No newline at end of file From 3d55d6b4ede099cf0f19e86b7a4d6b38a7b719c5 Mon Sep 17 00:00:00 2001 From: obanijesuadufe8 Date: Fri, 19 Jul 2024 17:07:57 +0000 Subject: [PATCH 02/12] fix: fix the image overflow and make the article card into a link --- app/components/article/LatestArticle.tsx | 72 +++++++++++++----------- 1 file changed, 38 insertions(+), 34 deletions(-) diff --git a/app/components/article/LatestArticle.tsx b/app/components/article/LatestArticle.tsx index 902d5984..e36a023b 100644 --- a/app/components/article/LatestArticle.tsx +++ b/app/components/article/LatestArticle.tsx @@ -1,3 +1,5 @@ +import { Link } from "@remix-run/react"; + interface props { title: string; description: string; @@ -12,47 +14,49 @@ interface props { export default function LatestArticle({ article }: { article: props }) { return ( -
-
-
- - -
- {article.tag} -
- + +
+
+
+ + +
+ {article.tag} +
+ -

- {article.title} -

+

+ {article.title} +

-

- {article.description} -

+

+ {article.description} +

+ +
+
+ {article.name} +

+ {article.name} +

+
+

+ {article.time} + {" "} + Read +

-
-
- {article.name} -

- {article.name} +

+ {article.creationDate}

-

- {article.time} - {" "} - Read -

-

- {article.creationDate} -

- -
-
- {article.title} +
+ {article.title} +
-
-
+
+ ) } \ No newline at end of file From 620c12151c5de0d384ae4414ffa597a175beb0ea Mon Sep 17 00:00:00 2001 From: obanijesuadufe8 Date: Sat, 20 Jul 2024 11:21:35 +0000 Subject: [PATCH 03/12] fix: fix conflicts in pnpm-lock.yaml --- app/components/article/LatestArticle.tsx | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/app/components/article/LatestArticle.tsx b/app/components/article/LatestArticle.tsx index e36a023b..dd8d0fa2 100644 --- a/app/components/article/LatestArticle.tsx +++ b/app/components/article/LatestArticle.tsx @@ -15,10 +15,10 @@ interface props { export default function LatestArticle({ article }: { article: props }) { return ( -
-
-
- +
+
+
+
{article.tag} @@ -33,27 +33,27 @@ export default function LatestArticle({ article }: { article: props }) { {article.description}

-
-
- {article.name} -

+

+
+ {article.name} +

{article.name}

-

+

{article.time} {" "} Read

-

+

{article.creationDate}

-
- {article.title} +
+ {article.title}
From 8ae69b4903764b99a3611736ea67908829bb97bd Mon Sep 17 00:00:00 2001 From: obanijesuadufe8 Date: Sat, 20 Jul 2024 12:15:03 +0000 Subject: [PATCH 04/12] fix: fix the grid layout for desktop view --- app/components/article/LatestArticle.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/app/components/article/LatestArticle.tsx b/app/components/article/LatestArticle.tsx index dd8d0fa2..f8729559 100644 --- a/app/components/article/LatestArticle.tsx +++ b/app/components/article/LatestArticle.tsx @@ -15,9 +15,9 @@ interface props { export default function LatestArticle({ article }: { article: props }) { return ( -
-
-
+
+
+
@@ -25,7 +25,7 @@ export default function LatestArticle({ article }: { article: props }) {
-

+

{article.title}

@@ -52,7 +52,7 @@ export default function LatestArticle({ article }: { article: props }) {
-
+
{article.title}
From dc1af948c9330cc29a0c2d9cef594c03b5b233cd Mon Sep 17 00:00:00 2001 From: obanijesuadufe8 Date: Sat, 20 Jul 2024 14:05:34 +0000 Subject: [PATCH 05/12] fix: fix the letter spacing of description --- app/components/article/LatestArticle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/article/LatestArticle.tsx b/app/components/article/LatestArticle.tsx index f8729559..f4c94078 100644 --- a/app/components/article/LatestArticle.tsx +++ b/app/components/article/LatestArticle.tsx @@ -29,7 +29,7 @@ export default function LatestArticle({ article }: { article: props }) { {article.title} -

+

{article.description}

From bf1b2e3e3f9a056e441a7e977e4192c727278b8d Mon Sep 17 00:00:00 2001 From: obanijesuadufe8 Date: Sat, 20 Jul 2024 17:22:39 +0000 Subject: [PATCH 06/12] fix: fix lint errors --- app/components/article/LatestArticle.tsx | 109 ++++++++++++----------- 1 file changed, 55 insertions(+), 54 deletions(-) diff --git a/app/components/article/LatestArticle.tsx b/app/components/article/LatestArticle.tsx index f4c94078..e189f08b 100644 --- a/app/components/article/LatestArticle.tsx +++ b/app/components/article/LatestArticle.tsx @@ -1,62 +1,63 @@ import { Link } from "@remix-run/react"; -interface props { - title: string; - description: string; - profileImage: string; - name: string; - time: string; - creationDate: string; - image: string; - link: string; - tag: string; +interface articleProperties { + title: string; + description: string; + profileImage: string; + name: string; + time: string; + creationDate: string; + image: string; + link: string; + tag: string; } -export default function LatestArticle({ article }: { article: props }) { - return ( - -
-
-
- - -
- {article.tag} -
- +export default function LatestArticle({ + article, +}: { + article: articleProperties; +}) { + return ( + +
+
+
+ + +
{article.tag}
+ -

- {article.title} -

+

+ {article.title} +

-

- {article.description} -

+

+ {article.description} +

-
-
- {article.name} -

- {article.name} -

-
-

- {article.time} - {" "} - Read -

+
+
+ {article.name} +

{article.name}

+
+

{article.time} Read

-

- {article.creationDate} -

-
- -
-
- {article.title} -
-
-
- - ) -} \ No newline at end of file +

{article.creationDate}

+
+
+
+ {article.title} +
+
+
+ + ); +} From 9ffce5746883e788f05252e58ee97ed8dfd0d6f4 Mon Sep 17 00:00:00 2001 From: obanijesuadufe8 Date: Sat, 20 Jul 2024 17:29:26 +0000 Subject: [PATCH 07/12] fix: added id to the article interface --- app/components/article/LatestArticle.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/components/article/LatestArticle.tsx b/app/components/article/LatestArticle.tsx index e189f08b..1b202071 100644 --- a/app/components/article/LatestArticle.tsx +++ b/app/components/article/LatestArticle.tsx @@ -1,6 +1,7 @@ import { Link } from "@remix-run/react"; interface articleProperties { + id: string; title: string; description: string; profileImage: string; From b6b83a250f08dc5be37109aaea5d02bec0d772e3 Mon Sep 17 00:00:00 2001 From: obanijesuadufe8 Date: Sat, 20 Jul 2024 18:13:09 +0000 Subject: [PATCH 08/12] fix: added dot before the creation date --- app/components/article/LatestArticle.tsx | 113 ++++++++++++----------- 1 file changed, 57 insertions(+), 56 deletions(-) diff --git a/app/components/article/LatestArticle.tsx b/app/components/article/LatestArticle.tsx index 1b202071..2af25c00 100644 --- a/app/components/article/LatestArticle.tsx +++ b/app/components/article/LatestArticle.tsx @@ -1,64 +1,65 @@ import { Link } from "@remix-run/react"; -interface articleProperties { - id: string; - title: string; - description: string; - profileImage: string; - name: string; - time: string; - creationDate: string; - image: string; - link: string; - tag: string; +interface props { + title: string; + description: string; + profileImage: string; + name: string; + time: string; + creationDate: string; + image: string; + link: string; + tag: string; } -export default function LatestArticle({ - article, -}: { - article: articleProperties; -}) { - return ( - -
-
-
- - -
{article.tag}
- +export default function LatestArticle({ article }: { article: props }) { + return ( + +
+
+
+ + +
+ {article.tag} +
+ -

- {article.title} -

+

+ {article.title} +

-

- {article.description} -

+

+ {article.description} +

-
-
- {article.name} -

{article.name}

-
-

{article.time} Read

+
+
+ {article.name} +

+ {article.name} +

+
+

+ {article.time} + {" "} + Read +

-

{article.creationDate}

-
-
-
- {article.title} -
-
-
- - ); -} +

+ + + {article.creationDate} + +

+
+ +
+
+ {article.title} +
+
+
+ + ) +} \ No newline at end of file From ac20498b6ffdeec8d3dd7a8f5c9e16a778314387 Mon Sep 17 00:00:00 2001 From: obanijesuadufe8 Date: Sat, 20 Jul 2024 18:26:39 +0000 Subject: [PATCH 09/12] fix: fix lint error --- app/components/article/LatestArticle.tsx | 116 ++++++++++++----------- 1 file changed, 59 insertions(+), 57 deletions(-) diff --git a/app/components/article/LatestArticle.tsx b/app/components/article/LatestArticle.tsx index 2af25c00..a7bf83d6 100644 --- a/app/components/article/LatestArticle.tsx +++ b/app/components/article/LatestArticle.tsx @@ -1,65 +1,67 @@ import { Link } from "@remix-run/react"; -interface props { - title: string; - description: string; - profileImage: string; - name: string; - time: string; - creationDate: string; - image: string; - link: string; - tag: string; +interface articleProperties { + id: string; + title: string; + description: string; + profileImage: string; + name: string; + time: string; + creationDate: string; + image: string; + link: string; + tag: string; } -export default function LatestArticle({ article }: { article: props }) { - return ( - -
-
-
- - -
- {article.tag} -
- +export default function LatestArticle({ + article, +}: { + article: articleProperties; +}) { + return ( + +
+
+
+ + +
{article.tag}
+ -

- {article.title} -

+

+ {article.title} +

-

- {article.description} -

+

+ {article.description} +

-
-
- {article.name} -

- {article.name} -

-
-

- {article.time} - {" "} - Read -

+
+
+ {article.name} +

{article.name}

+
+

{article.time} Read

-

- - - {article.creationDate} - -

-
- -
-
- {article.title} -
-
-
- - ) -} \ No newline at end of file +

+ + {article.creationDate} +

+
+
+
+ {article.title} +
+ +
+ + ); +} From 43a47be72ce91697c7dbbf602cde6ccd40dd48d2 Mon Sep 17 00:00:00 2001 From: Adufe Obanijesu Date: Sat, 20 Jul 2024 21:39:19 +0000 Subject: [PATCH 10/12] fix: use global styles --- app/components/article/LatestArticle.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/app/components/article/LatestArticle.tsx b/app/components/article/LatestArticle.tsx index a7bf83d6..377e5b72 100644 --- a/app/components/article/LatestArticle.tsx +++ b/app/components/article/LatestArticle.tsx @@ -21,27 +21,27 @@ export default function LatestArticle({ return (
-
-
- - +
+
+ +
{article.tag}
 -

+

{article.title}

-

+

{article.description}

-
-
+
+
{article.name}

{article.name}

@@ -57,7 +57,7 @@ export default function LatestArticle({ {article.title}
From 721f2b98c3b458710a436351c81dfeb560cc3036 Mon Sep 17 00:00:00 2001 From: Adufe Obanijesu Date: Sat, 20 Jul 2024 21:46:26 +0000 Subject: [PATCH 11/12] fix: lint errors from BlogCards --- app/components/BlogCards.tsx | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/app/components/BlogCards.tsx b/app/components/BlogCards.tsx index 4189fef2..630a6f1a 100644 --- a/app/components/BlogCards.tsx +++ b/app/components/BlogCards.tsx @@ -1,6 +1,6 @@ import React from "react"; -interface BlogCardProps { +interface BlogCardProperties { title: string; description: string; date: string; @@ -12,7 +12,7 @@ interface BlogCardProps { link: string; } -const BlogCard: React.FC = ({ +const BlogCard: React.FC = ({ title, description, date, @@ -24,31 +24,31 @@ const BlogCard: React.FC = ({ link, }) => { return ( -
- {title} -
-
- +
+ {title} +
+
+ {tag}
-

{title}

+

{title}

 -

{description}

+

{description}

-
+
{date} {timeOfReading} mins Read
{authorName}
-

{authorName}

+

{authorName}

From afc937220df3c98f1c92e67821f6251bf7bc1885 Mon Sep 17 00:00:00 2001 From: Adufe Obanijesu Date: Sat, 20 Jul 2024 21:57:46 +0000 Subject: [PATCH 12/12] fix: use global styles --- app/components/article/LatestArticle.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/components/article/LatestArticle.tsx b/app/components/article/LatestArticle.tsx index 377e5b72..38f2e541 100644 --- a/app/components/article/LatestArticle.tsx +++ b/app/components/article/LatestArticle.tsx @@ -23,20 +23,20 @@ export default function LatestArticle({
- +
{article.tag}
 -

+

{article.title}

-

+

{article.description}

-
+