(feat): Added Latest Blogs Component (#169)

src/components/Adopters/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import data from '@site/static/adopters/data.js';
+import data from '@site/static/data/adopters/data.js';
 import ProjectCard from './project_card';
 import styles from './styles.module.css';
 

src/components/BlogsLatest/index.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import styles from './styles.module.css';
+import data from '@site/static/data/latestBlogs/data.js';
+
+const BlogGrid = () => {
+    return (
+        <div className={[styles.features, styles.section_padding].join(' ')}>
+            <h1>Read latest from Uptane</h1>
+            <ul className={styles.cards}>
+                {data.blogs.slice(0, 3).map((blog, index) => (
+                    <li key={index} className={styles.cards_item}>
+                        <div className={styles.card}>
+                            <div >
+                                <img className={styles.blog_img} src={blog.img} alt="Card Image" />
+                            </div>
+                            <div className={styles.card_content}>
+                                <h2 className={styles.card_title}>{blog.title}</h2>
+                                <p className={styles.card_text} onClick={() => (window.location.href = blog.link)}>
+                                    Read More
+                                </p>
+                            </div>
+                        </div>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};
+
+export default BlogGrid;

src/components/BlogsLatest/styles.module.css

@@ -0,0 +1,92 @@
+.blog_img {
+    width: 400px;
+    height: 230px;
+    margin: auto;
+    border-radius: 10px;
+    vertical-align: middle;
+}
+
+
+.cards {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.cards_item {
+    display: flex;
+    padding: 1rem;
+}
+
+@media (min-width: 40rem) {
+    .cards_item {
+        width: 50%;
+    }
+}
+
+@media (min-width: 56rem) {
+    .cards_item {
+        width: 33.3333%;
+    }
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+
+.card_title {
+    font-size: 1.3rem;
+    font-weight: 700;
+    letter-spacing: 1px;
+    padding: 5px;
+    padding-top: 20px;
+    text-transform: capitalize;
+    margin: 0px;
+}
+
+.card_text {
+    font-size: 1.1rem;
+    font-weight: 400;
+    letter-spacing: 1px;
+    text-transform: capitalize;
+    padding: 4px;
+    cursor: pointer;
+    padding-top: 10px;
+}
+
+.features {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 3rem;
+    justify-content: center;
+}
+
+.features h1 {
+    font-weight: 600;
+    font-size: 40px;
+    line-height: 55px;
+    color: var(--ifm-color-primary);
+}
+
+.section_padding {
+    padding: 4rem 6rem;
+}
+
+
+@media screen and (max-width: 650px) {
+    .section_padding {
+        padding: 4rem;
+    }
+
+}
+
+@media screen and (max-width: 490px) {
+    .section_padding {
+        padding: 3rem;
+    }
+}

src/components/PuttingUptane/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import data from '@site/static/puttingUptane/data.js';
+import data from '@site/static/data/puttingUptane/data.js';
 import ProjectCard from './project_card';
 import styles from './styles.module.css';
 

src/pages/index.jsx

@@ -3,8 +3,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import Header from '@site/src/components/Header';
 import WhatIsUptane from '@site/src/components/WhatIsUptane';
-// import Workflow from '@site/src/components/Workflow';
-import Contributors from '../components/Contributors';
+import BlogGrid from '../components/BlogsLatest';
 import Community from '../components/JoinCommunity';
 import Adopters from '../components/Adopters';
 import PuttingUptane from '../components/PuttingUptane';
@@ -23,7 +22,7 @@ export default function Home() {
         <Features/>
         <Adopters/>
         <PuttingUptane/>
-        {/* <Workflow /> */}
+        <BlogGrid/>
         <Community />
         <SupportedBySection/>
       </main>

static/data/latestBlogs/data.js

@@ -0,0 +1,29 @@
+const blogs = [
+    {
+        title: "Exciting Opportunities Await: Uptane Calls for GSoC 2024 Idea List Submissions!",
+        img: "/assets/images/callForIdeasBanner-6e9ca5b85ce48022d00dbeb5b9a4b105.png",
+        link: "/blog/2024/01/12/callForIdeas",
+    },
+    {
+        title: "Uptane GSoC'23: A Journey of Revamping and Enhancing User Experience 🚀",
+        img: "/assets/images/uptaneGsocBanner-6eb1eee2ee4001d96fc06f8a421c7206.png",
+        link: "/blog/2024/01/10/GSoC-blog",
+    },
+    {
+        title: "Uptane Joins 24 Pull Requests for a Season of Open Source Giving ❄️",
+        img: "/assets/images/bannerImage-b740c3a4d4c7aca63b59648725886c34.png",
+        link: "/blog/2023/12/01/24pullRequests",
+    },
+    {
+        title: "Uptane's Successful Venture with Hacktoberfest: Building Community and Polishing Our New Website ",
+        img: "",
+        link: "/blog/2024/01/12/callForIdeas",
+    },
+    {
+        title: "Uptane Joins the Open Source Celebration: Hacktoberfest 2023 🎉",
+        img: "/assets/images/hf10_banner_1032x600-326bf693bd048c6749e89fa40605e7ee.png",
+        link: "/blog/2024/01/10/GSoC-blog",
+    },
+];
+
+export default { blogs };