---
title: Blogs
description: My technical blogs for insights on various tech topics and tutorials.
type: posts
---
import Link from 'next/link'
import { getPagesUnderRoute } from 'nextra/context'
import { format, parseISO } from 'date-fns'
import GhostLabel from "@/components/GhostLabel";
import BlogRow from "@/components/BlogRow";

export function ExtractBlogsByYear() {
  const allBlogs = getPagesUnderRoute('/blogs');
  const blogsByYear = {};

  allBlogs.forEach(blog => {
    if (blog.frontMatter?.date) {
      const year = parseISO(blog.frontMatter.date).getFullYear();
      if (!blogsByYear[year]) {
        blogsByYear[year] = [];
      }
      blogsByYear[year].push(blog);
    }
  });

  return blogsByYear;
}

export function BlogHeader() {
  return (
    <div className="max-w-screen-lg mx-auto pt-[66px] pb-4  border-gray-400 border-opacity-20">
      <div className="absolute inset-0 bg-[linear-gradient(to_bottom,rgba(0,0,0,0.1)_1px,transparent_1px),linear-gradient(to_right,rgba(0,0,0,0.1)_1px,transparent_1px)] dark:bg-[linear-gradient(to_bottom,rgba(255,255,255,0.1)_1px,transparent_1px),linear-gradient(to_right,rgba(255,255,255,0.1)_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:linear-gradient(to_bottom,white,transparent)]"></div>
      <p className="text-center font-space-grotesk font-roboto font-bold uppercase text-2xl">Blogs</p>
      <h1>
        <span className="font-bold font-serif leading-tight lg:text-5xl italic">Read my technical blogs for insights on various tech topics.</span>
      </h1>
    </div>
  )
}

export function BlogIndex() {
  const blogsByYear = ExtractBlogsByYear();
  const years = Object.keys(blogsByYear).sort((a, b) => b - a);

  return (
    <div className="-mt-0">
      {years.map(year => (
        <div key={year} className="relative mt-40">
          <GhostLabel text={year.toString()} />
          {blogsByYear[year].map((page, index) => (
            <BlogRow key={index} page={page} />
          ))}
        </div>
      ))}
    </div>
  );
}

<BlogHeader />
<BlogIndex />
