update blog page

src/components/BlogFeed/index.jsx

@@ -2,15 +2,25 @@ import PropTypes from "prop-types";
 import clsx from "classnames";
 import { Col, Container, Row } from "react-bootstrap";
 import { BlogFeedCard } from "@/ui";
+import { blogHelper } from "@/helpers/blogHelper";
+import { getRoute } from "@/getters/getRoute";
+
+export default function BlogArticleFeed({ className }) {
+  const items = blogHelper.fetch();
 
-export default function BlogArticleFeed({ className, items }) {
   return (
     <div className={clsx(className)}>
       <Container className="mw-xl">
         <Row>
-          {items.map(({ title, description, img, published_at, href }, k) => (
+          {items.map(({ title, image, publish_date, url_slug }, k) => (
             <Col key={k} xs={12} md={4} className="mb-4">
-              <BlogFeedCard className="h-100" title={title} img={img} published_at={published_at} href={href} />
+              <BlogFeedCard
+                className="h-100"
+                title={title}
+                img={image}
+                published_at={publish_date}
+                href={getRoute("blogPost", { url_slug })}
+              />
             </Col>
           ))}
         </Row>

src/helpers/blogHelper.js

@@ -0,0 +1,4 @@
+import data from "../../.sourceflow/blog.json";
+import CollectionHelper from "@/helpers/CollectionHelper";
+
+export const blogHelper = new CollectionHelper(data);

src/pages/blog/index.page.js

@@ -1,5 +1,4 @@
 import { Content } from "@/ui";
-import { getArticles } from "@/getters/getArticles";
 import { getRoute } from "@/getters/getRoute";
 
 export default function BlogsPage({ content }) {
@@ -39,9 +38,7 @@ export async function getStaticProps() {
         },
         {
           component: "BlogFeed",
-          props: {
-            items: getArticles(),
-          },
+          props: {},
         },
       ],
     },

src/ui/BlogFeedCard/index.jsx

@@ -3,11 +3,17 @@ import classes from "./styles.module.scss";
 import PropTypes from "prop-types";
 import SourceFlowImage from "@sourceflow-uk/sourceflowimage";
 import { Time } from "@/ui";
+import { getAsset } from "@/getters/getAsset";
 
 export default function BlogFeedCard({ className, title, published_at, img, href }) {
   return (
     <a className={clsx(className, classes.card)} href={href}>
-      <SourceFlowImage className={classes.card__img} src={img} size="300x300" alt={title} />
+      <SourceFlowImage
+        className={classes.card__img}
+        src={img ?? getAsset("_theme.blog.card.img.fallback")}
+        size="300x300"
+        alt={title}
+      />
       <div className={classes.card__body}>
         <h4>{title}</h4>
         <Time date={published_at} icon={false} className="text-white" />
@@ -18,10 +24,10 @@ export default function BlogFeedCard({ className, title, published_at, img, href
 
 BlogFeedCard.defaultProps = {
   className: "",
-  title: "",
-  description: "",
-  img: "",
-  href: "#",
+  title: null,
+  published_at: null,
+  img: null,
+  href: null,
 };
 
 BlogFeedCard.propTypes = {

src/ui/Time/index.jsx

@@ -4,6 +4,10 @@ import PropTypes from "prop-types";
 import { Detail } from "@/ui";
 
 export default function Time({ className, icon, date, format }) {
+  if (!date) {
+    return null;
+  }
+
   return (
     <Detail
       className={className}