amend latest blogs

sourceflow-uk · Oct 17, 2023 · 8d17353 · 8d17353
1 parent 8a7ea81
commit 8d17353
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 21 deletions.
diff --git a/src/components/LatestBlogs/index.jsx b/src/components/LatestBlogs/index.jsx
@@ -5,22 +5,26 @@ import classes from "./styles.module.scss";
 import ChevronRight from "@/assets/ChevronRight.svg";
 import { LatestBlogCard, Title } from "@/ui";
 import { getRoute } from "@/getters/getRoute";
+import { blog_helper } from "@/helpers/blog_helper";
+import { trimText } from "@/functions/trimText";
+
+export default function LatestBlogs({ className, title, button }) {
+  const items = blog_helper.fetch({ limit: 3 });
 
-export default function LatestBlogs({ className, title, items, button }) {
   return (
     <div className={clsx(className, classes.blogs)}>
       <Container className="mw-xxl">
         <Title title={title} />
         <Row className="mb-4">
-          {items.map(({ title, description, img, published_at, tags }, k) => (
+          {items.map(({ title, body, image, publish_date, url_slug }, k) => (
             <Col key={k} xs={12} md={4}>
               <LatestBlogCard
                 className="h-100"
                 title={title}
-                description={description}
-                img={img}
-                published_at={published_at}
-                tags={tags}
+                description={trimText(body)}
+                img={image}
+                published_at={publish_date}
+                href={getRoute("blogPost", { url_slug })}
               />
             </Col>
           ))}
@@ -41,7 +45,6 @@ export default function LatestBlogs({ className, title, items, button }) {
 LatestBlogs.defaultProps = {
   className: "py-5",
   title: null,
-  items: [],
   button: {
     label: "View more blogs",
     href: getRoute("blog"),
@@ -51,15 +54,6 @@ LatestBlogs.defaultProps = {
 LatestBlogs.propTypes = {
   className: PropTypes.string,
   title: PropTypes.string,
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      className: PropTypes.string,
-      title: PropTypes.string,
-      description: PropTypes.string,
-      img: PropTypes.string,
-      published_at: PropTypes.string,
-    })
-  ),
   button: PropTypes.shape({
     label: PropTypes.string,
     href: PropTypes.string,

diff --git a/src/pages/career-advice/index.page.js b/src/pages/career-advice/index.page.js
@@ -2,7 +2,6 @@ import { Content } from "@/ui";
 import { getRoute } from "@/getters/getRoute";
 import { generateDescription } from "@/faker/generateDescription";
 import { generateArrayOf } from "@/faker/generateArrayOf";
-import { generatePromoItem } from "@/faker/generatePromoItem";
 import { generateNarrativePanel } from "@/faker/generateNarrativePanel";
 import { generateArticle } from "@/faker/generateArticle";
 import { career_advice_helper } from "@/helpers/career_advice_helper";
@@ -66,7 +65,6 @@ export async function getStaticProps() {
           component: "LatestBlogs",
           props: {
             title: { path: "page.careerAdvice.component.LatestBlogs.title", placeholder: "Latest Blogs" },
-            items: generateArrayOf(generateArticle, { count: 3 }),
           },
         },
       ],

diff --git a/src/ui/LatestBlogCard/index.jsx b/src/ui/LatestBlogCard/index.jsx
@@ -5,9 +5,9 @@ import clsx from "classnames";
 import { format } from "date-fns";
 import { trimText } from "@/functions/trimText";
 
-export default function LatestBlogCard({ className, title, description, img, published_at }) {
+export default function LatestBlogCard({ className, title, description, img, published_at, href }) {
   return (
-    <article className={clsx(className, classes.card)}>
+    <a href={href} className={clsx(className, classes.card)}>
       <figure className="ratio ratio-1x1">
         <SourceFlowImage src={img} size="373x220" alt={title} />
       </figure>
@@ -16,7 +16,7 @@ export default function LatestBlogCard({ className, title, description, img, pub
         <time>{format(new Date(published_at), "dd/MM/yyyy")}</time>
         <p>{trimText(description, 180)}</p>
       </div>
-    </article>
+    </a>
   );
 }
 

diff --git a/src/ui/LatestBlogCard/styles.module.scss b/src/ui/LatestBlogCard/styles.module.scss
@@ -7,6 +7,8 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  text-decoration: none;
+  color: inherit;
   @include card-hover-rise;
 
   figure {