feat: Add reading time to blog listing cards (#1766)

docusaurus.config.ts

@@ -301,4 +301,4 @@ const config: Config = {
   },
 };
 
-export default config;
+export default config;

src/components/blogCarousel/blogCard.tsx

@@ -2,6 +2,7 @@
 import React from "react";
 import Link from "@docusaurus/Link";
 import { getAuthorProfiles } from "../../utils/authors";
+import { usePluginData } from "@docusaurus/useGlobalData";
 
 interface BlogCardProps {
   type: string;
@@ -13,6 +14,7 @@
   authors?: string[];
   tags?: string[];
   category?: string;
+  readingTime?: number;
 }
 
 const TAG_COLORS = [
@@ -48,13 +50,16 @@
   type,
   date,
   title,
+  content,
   imageUrl,
   id,
   authors,
   tags,
   category,
+  readingTime,
 }: BlogCardProps) => {
   const authorProfiles = getAuthorProfiles(authors || []);
+  const computedReadTime = readingTime ?? 1;
 
   if (!id || !type) {
     return <div>data not fetched properly, imageId and entryId not found</div>;
@@ -167,6 +172,24 @@
                 </div>
               )}
               {date && <span className="card-date">{formatDate(date)}</span>}
+              <span className="card-reading-time">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  width="11"
+                  height="11"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <polyline points="12 6 12 12 16 14" />
+                </svg>
+                {computedReadTime} min read
+              </span>
             </div>
           </div>
 

src/components/blogCarousel/blogCarousel.css

@@ -634,4 +634,13 @@
   opacity: 0;
   transform: translateY(-20px);
   transition: opacity 0.4s ease-in, transform 0.4s ease-in;
+}
+/* ── Reading time ── */
+.card-reading-time {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 0.75rem;
+  color: var(--ifm-color-emphasis-600);
+  margin-top: 2px;
 }

src/components/blogCarousel/blogCarousel.tsx

@@ -82,7 +82,7 @@
             >
               <BlogCard
                 type={blog.category}
                 date={(blog as any).date}
                 title={blog.title}
                 content={blog.description}
                 imageUrl={blog.image}
@@ -90,6 +90,7 @@
                 authors={blog.authors}
                 tags={blog.tags}
                 category={blog.category}
+                readingTime={blog.readingTime}
               />
             </CarouselItem>
           ))}

src/database/blogs/index.tsx

@@ -7,6 +7,7 @@ interface Blog {
   authors: string[];
   category: string;
   tags?: string[];
+  readingTime?: number;
 }
 
 const blogs: Blog[] = [
@@ -18,6 +19,7 @@ const blogs: Blog[] = [
     description:
       " Are you passionate about design and dreaming of a career in it? Or maybe you are already in the design space and looking to pivot into UI/UX? ",
     slug: "ux-ui-design-job",
+    readingTime: 9,
     authors: ["sowmiya-v", "sanjay-kv"],
     category: "Design",
     tags: ["UX", "UI", "design", "Job"],
@@ -30,6 +32,7 @@ const blogs: Blog[] = [
     description:
       "The GitHub Copilot Coding Agent is an asynchronous software engineering agent that assists developers by suggesting code snippets",
     slug: "git-coding-agent",
+    readingTime: 5,
     authors: ["sanjay-kv"],
     category: "Development",
     tags: ["GitHub", "AI", "Coding", "Tools"],
@@ -41,6 +44,7 @@ const blogs: Blog[] = [
     description:
       "Apache Spark is a fast, open-source big data framework that leverages in-memory computing for high performance. Its architecture powers scalable distributed processing across clusters, making it essential for analytics and machine learning.",
     slug: "spark-architecture",
+    readingTime: 10,
     authors: ["Aditya-Singh-Rathore", "sanjay-kv"],
     category: "Development",
     tags: ["Apache Spark", "Big Data", "Data Engineering", "Architecture"],
@@ -52,6 +56,7 @@ const blogs: Blog[] = [
     description:
       "N8N is an open-source workflow automation tool that enables users to connect various apps and services to automate tasks without extensive coding knowledge.",
     slug: "n8n-workflow-automation",
+    readingTime: 10,
     authors: ["Aditya-Singh-Rathore"],
     category: "Development",
     tags: ["Automation", "Workflow", "N8N", "Tools"],
@@ -63,6 +68,7 @@ const blogs: Blog[] = [
     description:
       "OpenAI AgentKit is a framework that simplifies the process of building AI agents, allowing developers to create intelligent applications without getting bogged down in the underlying complexities.",
     slug: "open-ai-agent-builder",
+    readingTime: 14,
     authors: ["Aditya-Singh-Rathore"],
     category: "AI & Tech",
     tags: ["AI", "OpenAI", "Development", "Agents"],
@@ -74,6 +80,7 @@ const blogs: Blog[] = [
     description:
       "Delta Lake is an open-source storage layer that brings ACID transactions to Apache Spark and big data workloads.",
     slug: "deltalake-data-storage",
+    readingTime: 7,
     authors: ["Aditya-Singh-Rathore"],
     category: "data engineering",
     tags: ["Delta Lake", "Big Data", "Data Engineering", "Storage"],
@@ -85,6 +92,7 @@ const blogs: Blog[] = [
     description:
       "The Microsoft Certified: Azure Data Engineer Associate certification validates your skills in designing and implementing data solutions on the Azure platform.",
     slug: "fabric-data-engineer",
+    readingTime: 7,
     authors: ["Aditya-Singh-Rathore"],
     category: "data engineering",
     tags: ["Microsoft", "Azure", "Data Engineering", "Certification"],
@@ -96,6 +104,7 @@ const blogs: Blog[] = [
     description:
       "Microsoft Fabric is a unified analytics platform that integrates various data services and tools to provide a seamless experience for data professionals, enabling them to manage and analyze data across the entire data lifecycle.",
     slug: "microsoft-fabric-explained",
+    readingTime: 10,
     authors: ["Aditya-Singh-Rathore"],
     category: "data engineering",
     tags: ["Microsoft", "Azure", "Data Engineering", "Certification", "Fabric", "OneLake", "Data Workloads", "Unified Analytics"],
@@ -107,6 +116,7 @@ const blogs: Blog[] = [
     description:
       "SSO lets you log into dozens of apps with a single set of credentials. But how does it actually work under the hood? A beginner-friendly walkthrough of the full flow — from clicking 'Sign in with Google' to getting access — step by step.",
     slug: "single-sign-on",
+    readingTime: 6,
     authors: ["Aditya-Singh-Rathore", "sanjay-kv"],
     category: "security",
     tags: ["SSO", "Authentication", "Security", "OAuth", "OpenID Connect", "SAML"],
@@ -118,6 +128,7 @@ const blogs: Blog[] = [
     description:
       "Lakehouse and Data Warehouse are two different data storage architectures. A Data Warehouse is a centralized repository for structured data, optimized for reporting and analysis. A Lakehouse combines the best of both worlds, allowing for the storage of both structured and unstructured data, providing flexibility and scalability.",
     slug: "lakehouse-vs-warehouse",
+    readingTime: 7,
     authors: ["Aditya-Singh-Rathore"],
     category: "data engineering",
     tags: ["Lakehouse", "Data Warehouse", "Data Storage", "Big Data", "Architecture", "Comparison"],
@@ -129,6 +140,7 @@ const blogs: Blog[] = [
     description:
       "Netflix processes an enormous amount of data every day, handling over 2 trillion events. This article explores how they manage this massive scale and the technologies they use to ensure smooth operations.",
     slug: "netflix-data-engineering",
+    readingTime: 15,
     authors: ["Aditya-Singh-Rathore"],
     category: "data engineering",
     tags: ["Netflix", "Data Processing", "Big Data", "Scalability", "Event Handling", "Technology", "Architecture", "Data Engineering"],
@@ -140,6 +152,7 @@ const blogs: Blog[] = [
     description:
       "Azure Storage and Azure Data Lake Storage Gen2 (ADLS Gen2) are two different storage solutions offered by Microsoft Azure. Azure Storage is a general-purpose storage service that provides various types of storage, including blobs, files, queues, and tables. ADLS Gen2, on the other hand, is a specialized storage solution designed for big data analytics workloads, offering features like hierarchical namespace and optimized performance for analytics.",
     slug: "azure-storage-options",
+    readingTime: 14,
     authors: ["Aditya-Singh-Rathore"],
     category: "data engineering",
     tags: ["Azure", "Storage", "Data Lake", "ADLS Gen2", "Big Data", "Scalability", "Event Handling", "Technology", "Architecture", "Data Engineering"],
@@ -151,6 +164,7 @@ const blogs: Blog[] = [
     description:
       "Azure Data Factory Pipeline is a cloud-based data integration service that allows you to create data-driven workflows for orchestrating and automating data movement and transformation tasks. This article will guide you through the process of building your first ETL pipeline in Azure Data Factory.",
     slug: "ETL-pipeline-tutorial",
+    readingTime: 11,
     authors: ["Aditya-Singh-Rathore"],
     category: "data engineering",
     tags: ["Azure", "Storage", "Data Lake", "ADLS Gen2", "Big Data", "Scalability", "Event Handling", "Technology", "Architecture", "Data Engineering"],
@@ -162,6 +176,7 @@ const blogs: Blog[] = [
     description:
       "The Medallion Architecture is a data management approach that organizes data into different layers (Bronze, Silver, Gold) to improve data quality, governance, and scalability in data pipelines. It helps prevent data pipelines from becoming unmanageable by providing a structured framework for data processing and storage.",
     slug: "medallion-architecture",
+    readingTime: 9,
     authors: ["Aditya-Singh-Rathore"],
     category: "data engineering",
     tags: ["Medallion Architecture", "Data Pipeline", "Data Management", "Data Quality", "Data Governance", "Scalability", "Data Engineering"],
@@ -173,6 +188,7 @@ const blogs: Blog[] = [
     description:
       "Azure Synapse Analytics is a unified analytics service that combines big data and data warehousing capabilities. This article explores when to use Azure Synapse Analytics and when to choose Fabric instead.",
     slug: "azure-synapse-analytics",
+    readingTime: 13,
     authors: ["Aditya-Singh-Rathore"],
     category: "data engineering",
     tags: ["Azure", "Synapse Analytics", "Data Warehousing", "Big Data", "Unified Analytics", "Fabric", "Data Engineering"],
@@ -184,6 +200,7 @@ const blogs: Blog[] = [
     description:
       "Streaming pipelines are powerful for real-time data processing, but they come with hidden costs that are often overlooked. These costs include increased complexity, higher resource consumption, and potential challenges in maintaining data consistency and reliability. This article explores these hidden costs and provides insights on how to mitigate them.",
     slug: "batch-vs-stream-processing",
+    readingTime: 10,
     authors: ["Aditya-Singh-Rathore"],
     category: "data engineering",
     tags: ["Streaming Pipelines", "Real-Time Data Processing", "Data Consistency", "Data Reliability", "Resource Consumption", "Complexity", "Data Engineering"],
@@ -196,6 +213,7 @@ const blogs: Blog[] = [
     description:
       "Azure Data Pipeline can be a powerful tool for data processing and analytics, but it can also lead to unexpectedly high costs if not managed properly. In this article, we share our experience of optimizing our Azure Data Pipeline costs, which resulted in a 73% reduction in our monthly bill, saving us $3,066. We discuss the strategies we implemented to achieve this significant cost reduction while maintaining the performance and reliability of our data pipeline.",
     slug: "azure-cost-optimization",
+    readingTime: 19,
     authors: ["Aditya-Singh-Rathore"],
     category: "data engineering",
     tags: ["Azure", "Data Pipeline", "Cost Optimization", "Data Engineering"],
@@ -207,6 +225,7 @@ const blogs: Blog[] = [
     description:
       "PySpark is a powerful tool for big data processing, but it can be challenging to optimize for performance. In this article, we discuss six common mistakes that beginners make when optimizing their PySpark pipelines, which can lead to slow performance and increased costs. We provide practical tips and techniques to help you avoid these pitfalls and improve the efficiency of your PySpark applications.",
     slug: "spark-performance-optimizations",
+    readingTime: 27,
     authors: ["Aditya-Singh-Rathore"],
     category: "data engineering",
     tags: ["PySpark", "Optimization", "Big Data", "Performance", "Data Engineering"],
@@ -218,6 +237,7 @@ const blogs: Blog[] = [
     description:
       "Microsoft Purview Data Catalog is a powerful tool for managing and organizing data assets within an organization. In this article, we share our experience of using Purview Data Catalog to streamline the onboarding process for new data engineers, reducing the time it takes from 2 weeks to just 3 days. We discuss the features of Purview that enabled us to achieve this improvement and provide insights on how other organizations can leverage this tool to enhance their data management practices.",
     slug: "microsoft-data-purview",
+    readingTime: 19,
     authors: ["Aditya-Singh-Rathore"],
     category: "data engineering",
     tags: ["Purview", "Data Catalog", "Onboarding", "Data Management", "Data Engineering"],
@@ -229,6 +249,7 @@ const blogs: Blog[] = [
     description:
       "Data engineers often have a deeper understanding of data and its implications for business decisions than MBAs, who may focus more on theory and strategy. This article explores why data engineers can make better business analysts than MBAs, highlighting their technical expertise, problem-solving skills, and ability to derive insights from data to drive informed business decisions.",
     slug: "data-engineers-vs-mbas",
+    readingTime: 18,
     authors: ["Aditya-Singh-Rathore"],
     category: "data engineering",
     tags: ["Data Engineers", "Business Analysts", "MBAs", "Data Understanding", "Business Decisions"],
@@ -240,6 +261,7 @@ const blogs: Blog[] = [
     description:
       " Google has unveiled a new icon design that reflects its commitment to simplicity and accessibility. The updated icon features a more modern ",
     slug: "google-icon-update",
+    readingTime: 8,
     authors: ["sanjay-kv"],
     category: "Design",
     tags: ["UX", "UI", "design", "Job"],
@@ -249,4 +271,4 @@ const blogs: Blog[] = [
 
 ];
 
-export default blogs;
+export default blogs;

src/pages/blogs/blogs-new.css

@@ -1304,4 +1304,13 @@
     padding: 0 18px;
     font-size: 13px;
   }
+}
+/* ── Reading time ── */
+.card-reading-time {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 0.75rem;
+  color: var(--ifm-color-emphasis-600);
+  margin-top: 2px;
 }

src/pages/blogs/index.tsx

@@ -232,6 +232,7 @@ export default function Blogs() {
 // ─── BlogCard ────────────────────────────────────────────────────────────────
 
 const BlogCard = ({ blog }: { blog: (typeof blogs)[number] }) => {
+  const readingTime = blog.readingTime ?? 1;
   const authors = getAuthorProfiles(blog.authors || []);
 
   // Tags — use blog.tags if present, fallback to blog.category as single tag
@@ -350,6 +351,15 @@ const BlogCard = ({ blog }: { blog: (typeof blogs)[number] }) => {
               {(blog as any).date && (
                 <span className="card-date">{formatDate((blog as any).date)}</span>
               )}
+              <span className="card-reading-time">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="11" height="11"
+                  fill="none" stroke="currentColor" strokeWidth="2"
+                  strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <circle cx="12" cy="12" r="10" />
+                  <polyline points="12 6 12 12 16 14" />
+                </svg>
+                {readingTime} min read
+              </span>
             </div>
           </div>