feat: add carousel to home page

.prettierignore

@@ -26,3 +26,4 @@ sonar-project.properties
 
 # others
 src/images
+src/posts/**/*.jpg

gatsby-config.ts

@@ -83,12 +83,6 @@ const config: GatsbyConfig = {
         ],
       },
     },
-    // {
-    //   resolve: `gatsby-plugin-purgecss`,
-    //   options: {
-    //     printRejected: true,
-    //   },
-    // },
     {
       resolve: "gatsby-plugin-mdx",
       options: {

package.json

@@ -50,7 +50,6 @@
     "gatsby-plugin-manifest": "5.13.1",
     "gatsby-plugin-mdx": "5.13.1",
     "gatsby-plugin-postcss": "6.13.1",
-    "gatsby-plugin-purgecss": "6.2.1",
     "gatsby-plugin-robots-txt": "1.8.0",
     "gatsby-plugin-sharp": "5.13.1",
     "gatsby-plugin-sitemap": "6.13.1",
@@ -64,6 +63,7 @@
     "react-helmet": "6.1.0",
     "react-infinite-scroll-component": "6.1.0",
     "react-instantsearch": "7.13.1",
+    "swiper": "11.1.10",
     "tailwindcss": "3.4.10"
   },
   "devDependencies": {

src/components/LatestPosts/index.tsx

@@ -1,11 +1,24 @@
 import * as React from "react";
+import SwiperCore from "swiper";
+import { Navigation } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { graphql, Link, useStaticQuery } from "gatsby";
+import {
+  faArrowLeftLong,
+  faArrowRightLong,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import "swiper/css";
+
 import ArticleCard from "../ArticleCard";
-import { graphql, useStaticQuery } from "gatsby";
+
+SwiperCore.use([Navigation]);
 
 export default function LatestPosts() {
   const data = useStaticQuery<IPageData<IPost>>(graphql`
     query {
-      allMdx(sort: { frontmatter: { date: DESC } }, limit: 3) {
+      allMdx(sort: { frontmatter: { date: DESC } }, limit: 6) {
         edges {
           node {
             frontmatter {
@@ -28,22 +41,56 @@ export default function LatestPosts() {
   return (
     <section>
       <hr />
-      <h3 className="text-4xl font-extralight mt-16 leading-[3.2rem] tracking-wide">
-        See what I’ve <br />
-        <strong>written lately</strong>
-      </h3>
+      <div className="mt-16 flex justify-between container m-auto">
+        <h3 className="text-4xl font-extralight  leading-[3.2rem] tracking-wide">
+          See what I’ve <br />
+          <strong>written lately</strong>
+        </h3>
+        <div className="flex gap-4 justify-start items-start">
+          <button type="button" className="post-highlight-prev cursor-pointer">
+            <FontAwesomeIcon icon={faArrowLeftLong} size="xl" />
+          </button>
+          <button type="button" className="post-highlight-next cursor-pointer">
+            <FontAwesomeIcon icon={faArrowRightLong} size="xl" />
+          </button>
+        </div>
+      </div>
+
+      <div className="mt-10">
+        <Swiper
+          slidesPerView="auto"
+          spaceBetween={30}
+          navigation={{
+            nextEl: ".post-highlight-next",
+            prevEl: ".post-highlight-prev",
+          }}
+          centeredSlides={true}
+        >
+          {data.allMdx.edges.map(({ node }, index) => (
+            <SwiperSlide
+              key={node.frontmatter.slug}
+              className={[!index ? "" : ""].join(" ")}
+              style={{ width: 450, background: "transparent" }}
+            >
+              <ArticleCard
+                title={node.frontmatter.title}
+                slug={node.frontmatter.slug}
+                cover={node.frontmatter.cover}
+                tags={node.frontmatter.tags}
+                date={node.frontmatter.date}
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
 
-      <div className="grid grid-cols-3 gap-12 pt-10">
-        {data.allMdx.edges.map(({ node }) => (
-          <ArticleCard
-            key={node.frontmatter.slug}
-            title={node.frontmatter.title}
-            slug={node.frontmatter.slug}
-            cover={node.frontmatter.cover}
-            tags={node.frontmatter.tags}
-            date={node.frontmatter.date}
-          />
-        ))}
+      <div className="container m-auto mt-16 text-center flex justify-center">
+        <Link
+          to="/blog"
+          className="text-lg block bg-zinc-950 text-white w-max text-center rounded-full px-6 py-2"
+        >
+          See all posts
+        </Link>
       </div>
     </section>
   );

src/components/Layout/index.tsx

@@ -7,7 +7,7 @@ export default function Layout({ children }: React.PropsWithChildren) {
   return (
     <div>
       <Navbar />
-      <div className="mt-20 mb-40 container m-auto">{children}</div>
+      <div className="mt-20 mb-40">{children}</div>
       <Footer />
     </div>
   );

src/pages/about.tsx

@@ -5,7 +5,7 @@ import Layout from "../components/Layout";
 export default function AboutPage(_: PageProps) {
   return (
     <Layout>
-      <div>
+      <div className="container m-auto">
         <h2>About me</h2>
       </div>
     </Layout>

src/pages/blog.tsx

@@ -36,7 +36,7 @@ const BlogPage = ({ data }: PageProps<IPageData<IPost>>) => {
 
   return (
     <Layout>
-      <div>
+      <div className="container m-auto">
         <h2 className="text-4xl mb-8 font-extralight">
           <strong className="font-normal">Looking for</strong> something
           specific? <br /> Search through my{" "}

src/pages/index.tsx

@@ -16,9 +16,9 @@ export default function IndexPage(_: PageProps) {
   return (
     <Layout>
       <main>
-        <SiteDescription className="leading-[4rem] text-5xl font-extralight" />
+        <SiteDescription className="leading-[4rem] text-5xl font-extralight container m-auto" />
 
-        <section className="mt-16 grid grid-cols-[500px_300px] items-center gap-6">
+        <section className="mt-16 grid grid-cols-[500px_300px] items-center gap-6 container m-auto">
           <Subscribe />
           <p className="">
             Subscribe to my newsletter for updates, tips, and exclusive content.

src/posts/how-to-start-your-journey-as-a-web-developer-a-beginners-roadmap/index.mdx

@@ -0,0 +1,17 @@
+---
+slug: "/how-to-start-your-journey-as-a-web-developer-a-beginners-roadmap"
+date: "2024-10-10"
+cover: "./cover.jpg"
+title: "How to Start Your Journey as a Web Developer: A Beginner’s Roadmap"
+tags: ["typescript", "next.js"]
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et tincidunt ante, et sagittis quam. Praesent mollis metus sit amet nulla tempor, at tristique neque porta. Aenean aliquam vulputate dignissim. Proin luctus libero eget erat sagittis tempor. Vivamus in nunc pellentesque, hendrerit nibh sed, placerat tortor. Pellentesque viverra, turpis vel molestie aliquam, lectus dolor rutrum leo, elementum pellentesque lectus orci ut ipsum. Quisque pretium eu ligula a vestibulum. Proin non blandit est. Nulla ultricies, mi a gravida rutrum, sem lorem vestibulum mauris, id mollis dolor dolor ut nibh. Donec lorem enim, consectetur a tincidunt in, euismod ornare eros. Quisque lobortis ipsum quis mi tristique, at molestie est ullamcorper.
+
+Integer et odio placerat, rhoncus purus non, luctus nibh. Nulla aliquet tincidunt risus vitae porttitor. Ut posuere velit quis tortor aliquam, eu maximus ante tempor. Donec bibendum lobortis arcu, et blandit mauris tempus elementum. Nunc elit lectus, posuere nec pretium eu, auctor eu metus. Nam venenatis vitae nisi sit amet luctus. Quisque in diam elit. Phasellus laoreet lacus a libero imperdiet, condimentum dapibus ligula fringilla. Maecenas sed metus dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum facilisis luctus nisl id dapibus. Duis tempus turpis eget quam volutpat, sed laoreet nisl lobortis. Donec id est neque.
+
+Vestibulum imperdiet tincidunt magna. Fusce scelerisque mi viverra, eleifend mi ut, condimentum arcu. Nunc ut dui nec magna ullamcorper mollis. In hac habitasse platea dictumst. Mauris placerat magna ante, a molestie sapien porta id. Suspendisse malesuada maximus molestie. Donec blandit nulla eleifend ullamcorper volutpat. Vestibulum nec volutpat elit, consectetur tincidunt sapien. Aliquam placerat elit efficitur urna rhoncus aliquam sed nec arcu. Phasellus non mauris efficitur nisi cursus varius nec nec lacus. Ut efficitur ultrices finibus. Morbi eu tincidunt arcu, et sollicitudin metus. Nulla dignissim varius mollis.
+
+Donec ac arcu sollicitudin, feugiat ex eu, eleifend odio. Nulla facilisi. Vivamus lobortis, justo non elementum consequat, velit nunc malesuada nisl, id bibendum metus sapien at tellus. Vestibulum tempus sagittis enim, sit amet euismod mauris dapibus vitae. Pellentesque vitae velit ut tortor tempus finibus quis sed ex. Nunc tristique risus risus, sed ornare ante mattis eget. Cras ut scelerisque augue. Maecenas mauris nulla, mollis eget eros eget, eleifend lacinia enim. Aliquam non augue vitae felis interdum maximus. Curabitur eros mi, dapibus ut ligula vitae, varius malesuada sem.
+
+Phasellus ac nulla vel magna feugiat pharetra. Nulla dignissim enim eu ligula feugiat pulvinar. Nam elementum sodales sollicitudin. Proin dapibus dui tellus, dapibus congue lorem cursus vel. Nulla eu lobortis nisl. Aenean maximus tristique risus, vel efficitur urna rutrum quis. Praesent eget ultrices lacus, ut vestibulum erat. Ut pulvinar lectus ac est posuere finibus. Vestibulum dapibus fringilla molestie.

src/posts/how-var-let-and-const-impact-your-javascript-code/index.mdx

@@ -0,0 +1,17 @@
+---
+slug: "/avoiding-scope-confusion-understanding-var-let-and-const-in-javascript"
+date: "2024-10-14"
+cover: "./cover.jpg"
+title: "Avoiding Scope Confusion: Understanding var, let, and const in JavaScript"
+tags: ["javascript"]
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et tincidunt ante, et sagittis quam. Praesent mollis metus sit amet nulla tempor, at tristique neque porta. Aenean aliquam vulputate dignissim. Proin luctus libero eget erat sagittis tempor. Vivamus in nunc pellentesque, hendrerit nibh sed, placerat tortor. Pellentesque viverra, turpis vel molestie aliquam, lectus dolor rutrum leo, elementum pellentesque lectus orci ut ipsum. Quisque pretium eu ligula a vestibulum. Proin non blandit est. Nulla ultricies, mi a gravida rutrum, sem lorem vestibulum mauris, id mollis dolor dolor ut nibh. Donec lorem enim, consectetur a tincidunt in, euismod ornare eros. Quisque lobortis ipsum quis mi tristique, at molestie est ullamcorper.
+
+Integer et odio placerat, rhoncus purus non, luctus nibh. Nulla aliquet tincidunt risus vitae porttitor. Ut posuere velit quis tortor aliquam, eu maximus ante tempor. Donec bibendum lobortis arcu, et blandit mauris tempus elementum. Nunc elit lectus, posuere nec pretium eu, auctor eu metus. Nam venenatis vitae nisi sit amet luctus. Quisque in diam elit. Phasellus laoreet lacus a libero imperdiet, condimentum dapibus ligula fringilla. Maecenas sed metus dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum facilisis luctus nisl id dapibus. Duis tempus turpis eget quam volutpat, sed laoreet nisl lobortis. Donec id est neque.
+
+Vestibulum imperdiet tincidunt magna. Fusce scelerisque mi viverra, eleifend mi ut, condimentum arcu. Nunc ut dui nec magna ullamcorper mollis. In hac habitasse platea dictumst. Mauris placerat magna ante, a molestie sapien porta id. Suspendisse malesuada maximus molestie. Donec blandit nulla eleifend ullamcorper volutpat. Vestibulum nec volutpat elit, consectetur tincidunt sapien. Aliquam placerat elit efficitur urna rhoncus aliquam sed nec arcu. Phasellus non mauris efficitur nisi cursus varius nec nec lacus. Ut efficitur ultrices finibus. Morbi eu tincidunt arcu, et sollicitudin metus. Nulla dignissim varius mollis.
+
+Donec ac arcu sollicitudin, feugiat ex eu, eleifend odio. Nulla facilisi. Vivamus lobortis, justo non elementum consequat, velit nunc malesuada nisl, id bibendum metus sapien at tellus. Vestibulum tempus sagittis enim, sit amet euismod mauris dapibus vitae. Pellentesque vitae velit ut tortor tempus finibus quis sed ex. Nunc tristique risus risus, sed ornare ante mattis eget. Cras ut scelerisque augue. Maecenas mauris nulla, mollis eget eros eget, eleifend lacinia enim. Aliquam non augue vitae felis interdum maximus. Curabitur eros mi, dapibus ut ligula vitae, varius malesuada sem.
+
+Phasellus ac nulla vel magna feugiat pharetra. Nulla dignissim enim eu ligula feugiat pulvinar. Nam elementum sodales sollicitudin. Proin dapibus dui tellus, dapibus congue lorem cursus vel. Nulla eu lobortis nisl. Aenean maximus tristique risus, vel efficitur urna rutrum quis. Praesent eget ultrices lacus, ut vestibulum erat. Ut pulvinar lectus ac est posuere finibus. Vestibulum dapibus fringilla molestie.

src/styles/global.css

@@ -20,3 +20,9 @@
   margin-top: 0 !important;
   margin-left: 10px !important;
 }
+
+@screen 2xl {
+  .swiper {
+    margin-left: -1080px !important;
+  }
+}

src/templates/BlogPostTemplate.tsx

@@ -33,7 +33,7 @@ export default function BlogPostTemplate({ data }: BlogPostProps) {
 
   return (
     <Layout>
-      <main>
+      <main className="container m-auto">
         <div>
           <button
             className="flex items-center gap-3"
@@ -54,7 +54,7 @@ export default function BlogPostTemplate({ data }: BlogPostProps) {
           </button>
         </div>
 
-        <div className="grid grid-cols-2 mt-20 gap-12 bg-white rounded-r-2xl">
+        <div className="grid grid-cols-2 mt-20 gap-12 bg-white rounded-r-2xl ">
           <GatsbyImage
             image={cover as IGatsbyImageData}
             alt={post.frontmatter.title}

yarn.lock

@@ -14743,6 +14743,11 @@ swap-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
+[email protected]:
+  version "11.1.10"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-11.1.10.tgz#4d3df50ff8afc4960e9644ed6e5828d35ab38853"
+  integrity sha512-pAVM6vCb6bumj2B9aSh67l3wP1j5YR8dPQM1YhQKMpnBc33vs+RpyVz6NZYZl/ZopCBSYbbWK5nvESwbmU0QXQ==
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"