docs: add jsdoc for all the components throughout the code-base(#300)

* docs: add JSDoc comments to BlogSidebar and RelatedPostItem

* docs(Calendar): add JSDoc for Calendar component with prop types and behavior description

* docs: add JSDoc to BlogDashboard component

* docs: add JSDoc to BlogIndex component with tag and blog layout info

* docs: add JSDoc to blog layout component

* docs: add JSDoc for DefaultLayoutNarrow layout component

* docs: add JSDoc for DefaultLayout component

* docs: add JSDoc to  people layout component

* docs: Add JSDoc for TagTemplate layout and byline helper

* docs: add JSDoc to TagProjectPage component

* docs: add JSDoc for UpdatesTagProjectPage component

* docs: add JSDoc for UpdatesTagProjectPage component

* docs: add JSDoc for SitemapLayout component

* docs: add JSDoc for DropDownMenu component

* docs: add JSDoc for LatestBlogsUpdates component

* docs: add JSDoc for LatestProductBlogsUpdates component

* docs: add JSDoc for LatestEntries component and helper functions

* docs: add JSDoc for CovidWhatsappTSNEMap component

* docs: add JSDoc for VaccineHesitancyClusterVisualization component

* docs: add JSDoc for AllBlogindexLayout component

* docs: add JSDoc for NarrowContentWrapper component

* docs: add JSDoc for NarrowSection component

* docs: add JSDoc for ContentpageLayout component

* docs: add JSDoc for BlogHeadercard component

* docs: add module-level JSDoc for corestyle component

* docs: add JSDoc for CustomCodeBlock component

* docs: add JSDoc for IconFeed SVG component

* docs: add JSDoc for InlineCodeBlock component

* docs: add JSDoc for MailchimpSubscribeForm component

* docs: add JSDoc for MasonryLayout component

* docs: add JSDoc for MasonryLayoutResponsive

* docs: add jSDoc for peopleCard component

* docs: add jSDoc for ResponsiveContributorGrid component

* docs: add JSDoc for ResponsiveImage component

* docs: add JSDoc for SEO component

* docs: add jSDoc for simpleheader component

* docs: add JSDoc for SmallFooter component

* docs: add JSDoc for Spinner component

* docs: add JSDoc for TagBubble component

* docs: add JSDoc for tagBubbleBlog component

* docs: add JSDoc for TattleLinks component

* docs: add JSDoc for TattleLogo component

* docs: add JSDoc for textstyle exports

* docs: add JSDoc for TattleTheme object

Author: Preetiaarya

src/components/BlogSidebar.jsx

@@ -3,6 +3,19 @@ import { Box, Heading, Text } from "grommet"
 import { GatsbyImage } from "gatsby-plugin-image"
 import { PlainLink } from "./atomic/TattleLinks"
 
+/**
+ * RelatedPostItem displays a related blog post with an optional cover image,
+ * the title (linked to the blog page), and an excerpt preview.
+ *
+ * @param {object} props - Component props
+ * @param {object} props.post - The related blog post data
+ * @param {string} props.post.title - Title of the blog post
+ * @param {string} props.post.slug - URL slug for the blog post
+ * @param {object} [props.post.coverImage] - Gatsby image object for the cover image
+ * @param {string} [props.post.excerpt] - Short excerpt or summary of the blog post
+ * @returns {JSX.Element} The rendered related post item
+ */
+
 const RelatedPostItem = ({ post }) => (
   <Box
     margin={{ bottom: "small" }}
@@ -37,6 +50,14 @@ const RelatedPostItem = ({ post }) => (
   </Box>
 )
 
+/**
+ * BlogSidebar displays a list of related blog posts in the sidebar.
+ *
+ * @param {object} props - Component props
+ * @param {Array<object>} props.relatedPosts - Array of related blog post objects
+ * @returns {JSX.Element} The rendered sidebar with related posts or a fallback message
+ */
+
 const BlogSidebar = ({ relatedPosts }) => {
   return (
     <Box

src/components/Calendar.js

@@ -1,6 +1,27 @@
 import React, { useEffect } from "react";
 import * as d3 from "d3";
 
+
+/**
+ * Calendar component renders a heatmap-style calendar using D3.js
+ * to visualize blog post frequency per day across multiple years.
+ *
+ * @component
+ *
+ * @param {Object} props - Component props.
+ * @param {Object[]} props.data - Array of blog post objects.
+ * @param {string} props.data[].date - ISO string of post date (e.g., "2025-01-17").
+ *
+ * @returns {JSX.Element} A responsive calendar heatmap of blog activity.
+ *
+ * @remarks
+ * Uses `d3.scaleLinear` to color days by post count.
+ * Clears previous SVGs before rendering new ones.
+ * Shows tooltip on hover with post details.
+ */
+
+
+
 const Calendar = ({ data }) => {
   const startYear = d3.min(data, (d) => new Date(d.date).getFullYear());
   const endYear = d3.max(data, (d) => new Date(d.date).getFullYear());

src/components/DropDownMenu.js

@@ -11,6 +11,18 @@ import {
  **/
 import { NavigationLabel, Theme } from "./atomic/core-style"
 
+/**
+ * DropDownMenu renders a tooltip-style dropdown with navigational links.
+ * It uses Grommet's Drop component, toggled by a button click, and closes on outside click or Escape key.
+ *
+ * @param {Object} props - Component props
+ * @param {Array<{ id: string, target: string }>} props.options - Menu items with unique ID and target URL.
+ * @param {string} props.title - Button label for triggering the dropdown.
+ *
+ * @returns {JSX.Element} The dropdown menu component.
+ */
+
+
 const DropDownMenu = ({ options, title }) => {
   const [fetching, setFetching] = useState(false)
   const [showToolTip, setShowToolTip] = useState(false)

src/components/LatestBlogsUpdates.jsx

@@ -4,6 +4,16 @@ import NarrowContentWrapper from "./atomic/layout/narrow-content-wrapper"
 import { Box, Heading } from "grommet"
 import { LatestEntries } from "./LatestEntries"
 
+/**
+ * LatestBlogsUpdates component fetches and displays the latest blog posts and updates.
+ *
+ * - Uses Gatsby's useStaticQuery to retrieve blog and update data.
+ * - Renders two sections: Latest Blogs and Latest Updates (if included later).
+ *
+ * @returns {JSX.Element} The rendered component showing the latest content.
+ */
+
+
 export default function LatestBlogsUpdates() {
   const data = useStaticQuery(graphql`
     {

src/components/LatestEntries.jsx

@@ -3,6 +3,13 @@ import { Box, ResponsiveContext, Text } from "grommet"
 import { PlainLink } from "./atomic/TattleLinks"
 import { ExternalLink } from "react-feather"
 
+/**
+ * Formats a date string to "MMM DD YYYY" format (e.g., "Jun 22 2025").
+ *
+ * @param {string|Date} date - The original date input.
+ * @returns {string} Formatted date string.
+ */
+
 function formatDateLatestEntries(date) {
   let dateString = new Date(date).toDateString("ind")
   return dateString.split(" ").slice(1).join(" ")
@@ -11,6 +18,14 @@ function formatDateLatestEntries(date) {
 /**
  * @param {string} author
  */
+
+/**
+ * Formats the author string to show abbreviated form (e.g., "John Doe et al.").
+ *
+ * @param {string} author - Full author name string, usually comma-separated.
+ * @returns {string} Abbreviated author string.
+ */
+
 function formatAuthor(author) {
   if (typeof author !== "string") return ""
   let firstDividerIndex = -1
@@ -31,6 +46,15 @@ function formatAuthor(author) {
   return author
 }
 
+/**
+ * Renders a list of blog or update entries based on the `isUpdate` flag.
+ *
+ * @param {Object} props
+ * @param {Object[]} props.entries - Array of entry objects (blog/update).
+ * @param {boolean} props.isUpdate - Determines if the list is for updates or blogs.
+ * @returns {JSX.Element} Rendered list of entries.
+ */
+
 // Component to Display latest entries of Blogs and Updates
 export function LatestEntries({ entries, isUpdate }) {
   const size = useContext(ResponsiveContext)

src/components/LatestProductBlogsUpdates.jsx

@@ -4,6 +4,18 @@ import { projectSlugMaker } from "../lib/project-slug-maker"
 import { Box, Heading } from "grommet"
 import { LatestEntries } from "./LatestEntries"
 
+/**
+ * `LatestProductBlogsUpdates` renders a list of the latest blog posts and updates
+ * related to the provided project names.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {string[]} props.projects - An array of project names as strings
+ * 
+ * @returns {JSX.Element|null} A list of latest blogs and updates filtered by projects,
+ * or `null` if no projects are provided.
+ */
+
 export function LatestProductBlogsUpdates({ projects }) {
   //projects is an array of string
   const data = useStaticQuery(graphql`

src/components/atomic/AppShell.js

@@ -15,6 +15,16 @@ import { PlainLink } from "./TattleLinks"
  * @function ContentPageLayout
  **/
 
+/**
+ * Renders the main layout shell for content pages, applying theme, layout width, and responsive design.
+ * Includes a modal banner for highlighting key content (e.g., case studies).
+ *
+ * @param {Object} props
+ * @param {React.ReactNode} props.children - The main content to render within the layout.
+ * @param {string} [props.contentWidth] - Optional maximum width for the content area.
+ * @returns {JSX.Element} Layout wrapper with modal and themed shell.
+ */
+
 const MODAL_TEXT =
   "Read our New Case Study of the Information Chaos During India's Second Covid-19 Wave"
 const MODAL_PATH = "/articles/covid-whatsapp-public-groups/"

src/components/atomic/BlogHeaderCard.js

@@ -2,6 +2,17 @@ import React from "react"
 import { Box, Heading, Text } from "grommet"
 import { byline } from "../default-blog-index-layout"
 
+/**
+ * Renders the header section of a blog post card with title, author, date, and project info.
+ *
+ * @param {Object} props
+ * @param {string} props.name - Blog post title.
+ * @param {string} props.author - Author name.
+ * @param {string} props.date - Publication date string.
+ * @param {string} [props.project] - Optional project associated with the blog.
+ * @returns {JSX.Element} Blog header card component.
+ */
+
 const BlogHeaderCard = ({ name, author, date, project }) => (
   <Box margin={{ bottom: "small" }}>
     <Box direction={"row"} align={"center"}>

src/components/atomic/IconFeed.jsx

@@ -1,5 +1,11 @@
 import React from "react"
 
+/**
+ * SVG icon component for the feed symbol.
+ *
+ * @returns {JSX.Element} SVG feed icon.
+ */
+
 export default function IconFeed() {
   return (
     <svg

src/components/atomic/MailchimpSubscribeForm.js

@@ -10,6 +10,14 @@ const MAILCHIMP_URL =
  * @function MailchimpSubscribeForm
  **/
 
+/**
+ * Renders a custom email subscription form using Mailchimp.
+ * Handles user input, form submission, and displays status messages.
+ *
+ * @returns {JSX.Element} Mailchimp subscribe form component.
+ */
+
+
 const SimpleForm = () => <MailchimpSubscribe url={MAILCHIMP_URL} />
 
 const MailchimpSubscribeForm = () => {