\n
\n\n {/* Thumbnail — grayscale at rest, color on hover */}\n {/* \n {blog.title}\n
\n\n {blog.excerpt}\n
\n {/* Meta row */}\n\n
\n \n
\n \n {blog.author.name}\n \n {blog.organization && (\n <>\n ·\n \n {blog.organization.name}\n \n \n )}\n ·\n \n {getFormattedDate(new Date(blog.publishedAt))}\n \n \n
*/}\n\n {/* Arrow */}\n \n
\n\n {/* Details */}\n \n {/* Author */}\n
\n \n \n {authorLine}\n
\n\n {/* Title */}\n\n {book.title}\n
\n\n {/* Spacer */}\n \n\n {/* Bottom meta */}\n\n {/* Ratings row — personal stars + community avg on one line */}\n {(hasMyRating || hasCommunityRating) && (\n
\n \n {hasMyRating && (\n \n \n \n
\n )}\n\n {/* Year · pages */}\n \n {book.releaseYear != null && {book.releaseYear}}\n {book.releaseYear != null && book.pages != null && (\n ·\n )}\n {book.pages != null && (\n {book.pages.toLocaleString()} pages\n )}\n
\n\n {/* Finished date */}\n {finishedDate && (\n \n \n
\n )}\n \n \n \n \n Send a Message\n \n \n \n\n {/* ── Two-column body ── */}\n
\n \n );\n}\n"
},
{
"path": "components/Contact/ContactForm.tsx",
"content": "import React, { useRef, useState } from \"react\";\nimport { ToastContainer, toast } from \"react-toastify\";\nimport { useDarkMode } from \"@context/darkModeContext\";\nimport emailjs from \"@emailjs/browser\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { FormInput } from \"@lib/types\";\nimport siteConfig from \"@content/siteConfig\";\nimport { FiSend } from \"react-icons/fi\";\n\nconst inputVariants = {\n hidden: { opacity: 0, x: -20 },\n visible: {\n opacity: 1,\n x: 0,\n transition: {\n duration: 0.5,\n ease: [0.22, 1, 0.36, 1],\n },\n },\n};\n\nexport default function Form() {\n const { isDarkMode } = useDarkMode();\n const sendButtonRef = useRef\n {/* Section number watermark */}\n \n 05\n
\n\n {/* ── Header ── */}\n \n \n \n Or reach me directly\n \n \n {siteConfig.person.email}\n \n \n
\n\n {/* ── Divider ── */}\n \n \n \n \n {contact.eyebrow}\n \n \n\n \n {contact.title}\n \n\n \n {contact.description}\n \n
\n\n {/* Email quick-link */}\n \n {/* Form — 3 cols */}\n \n \n {/* Status */}\n
\n \n \n Current Status\n \n
\n\n \n\n {/* Info rows */}\n \n \n \n \n \n \n Available for Work\n \n
\n \n {infoRows.map(({ label, value }, i) => (\n \n \n {label}\n \n \n {value}\n \n \n ))}\n
\n\n \n\n {/* Decorative type */}\n \n \n LET'S\n
\n BUILD\n
\n TOGETHER\n \n
\n \n \n BUILD\n
\n TOGETHER\n \n
\n {/* First Name */}\n \n \n First Name\n \n setFocusedField(\"first_name\")}\n onBlur={() => setFocusedField(null)}\n className={fieldCls(\"first_name\")}\n placeholder=\"John\"\n required\n />\n \n\n {/* Last Name */}\n \n \n Last Name\n \n setFocusedField(\"last_name\")}\n onBlur={() => setFocusedField(null)}\n className={fieldCls(\"last_name\")}\n placeholder=\"Doe\"\n required\n />\n \n
\n\n {/* Email */}\n \n
\n );\n}\n"
},
{
"path": "components/EpigraphCard.tsx",
"content": "import { useState } from \"react\";\nimport { IEpigraph, EpigraphSourceType } from \"@lib/interface/sanity\";\nimport { motion } from \"framer-motion\";\nimport ReactMarkdown from \"react-markdown\";\nimport { FiCopy, FiCheck, FiSearch } from \"react-icons/fi\";\n\nconst SOURCE_LABELS: Record\n Something went wrong. I know you don't know what's the problem. So Let\n me know by{\" \"}\n
\n {children}\n
\n ),\n strong: ({ children }: { children: React.ReactNode }) => (\n {children}\n ),\n em: ({ children }: { children: React.ReactNode }) => (\n {children}\n ),\n};\n\nexport default function EpigraphCard({\n epigraph,\n index,\n}: {\n epigraph: IEpigraph;\n index: number;\n}) {\n const [copied, setCopied] = useState(false);\n const sourceLabel = SOURCE_LABELS[epigraph.sourceType] ?? epigraph.sourceType;\n\n const handleCopy = () => {\n navigator.clipboard.writeText(epigraph.quote);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n };\n\n return (\n\n {/* Header: index left, meta right */}\n
\n\n {/* ── Desktop layout: three-column ledger ── */}\n \n \n {String(index + 1).padStart(3, \"0\")}\n \n
\n\n {/* Quote */}\n \n {epigraph.year && (\n \n {epigraph.year}\n \n )}\n \n {sourceLabel}\n \n
\n \n\n\n {/* Attribution */}\n\n {epigraph.quote}\n \n
\n {/* Left: index + rotated source + year */}\n
\n \n );\n}\n\nfunction Attribution({ epigraph }: { epigraph: IEpigraph }) {\n return (\n \n \n {String(index + 1).padStart(3, \"0\")}\n \n \n {sourceLabel}\n \n {epigraph.year && (\n \n {epigraph.year}\n \n )}\n
\n\n {/* Vertical rule */}\n \n\n {/* Right: quote + attribution + footer */}\n \n
\n \n\n\n {epigraph.quote}\n \n
\n \n —\n \n {epigraph.speaker && (\n <>\n \n {epigraph.speaker}\n \n {(epigraph.sourceTitle || epigraph.sourceMeta) && (\n \n ,\n \n )}\n \n )}\n
\n );\n}\n\nfunction Footer({\n tags,\n copied,\n onCopy,\n searchQuery,\n}: {\n tags?: string[];\n copied: boolean;\n onCopy: () => void;\n searchQuery: string;\n}) {\n return (\n \n {epigraph.sourceTitle}\n
\n {epigraph.sourceMeta && (\n <>\n \n /\n \n \n {epigraph.sourceMeta}\n \n \n )}\n\n {/* Copy button */}\n \n {copied ? \n
\n );\n}\n"
},
{
"path": "components/Footer.tsx",
"content": "import Link from \"next/link\";\nimport Image from \"next/image\";\nimport socialMedia from \"@content/socialMedia\";\nimport siteConfig from \"@content/siteConfig\";\nimport { navigationRoutes } from \"../utils/utils\";\nimport { motion } from \"framer-motion\";\nimport { SiSpotify } from \"react-icons/si\";\nimport useSWR from \"swr\";\nimport fetcher from \"../lib/fetcher\";\nimport { HiOutlineQrcode } from \"react-icons/hi\";\nimport { Song } from \"@lib/types\";\n\nexport default function Footer({\n setShowQR,\n showQR,\n}: {\n setShowQR: (value: boolean) => void;\n showQR: boolean;\n}) {\n const { data: currentSong } = useSWR(\"/api/now-playing\", fetcher);\n const { data: visitors } = useSWR(\"/api/ga\", fetcher);\n\n const navLinks = navigationRoutes.slice(0, 5);\n const moreLinks = navigationRoutes.slice(5);\n\n return (\n \n );\n}\n\nfunction FooterLink({\n href,\n text,\n isExternal,\n}: {\n href: string;\n text: string;\n isExternal: boolean;\n}) {\n return (\n \n {tags?.map((tag) => (\n \n #{tag}\n \n ))}\n
\n \n
\n );\n}\n\nfunction WhenPlaying({ song }: { song: Song }) {\n return (\n \n
\n \n Not Playing\n
\n\n Spotify\n
\n\n
\n \n
\n {/* Equaliser bars */}\n \n {song.title}\n
\n\n {song.artist}\n
\n\n {[3, 4, 2, 5].map((h, i) => (\n
\n \n );\n}\n"
},
{
"path": "components/FramerMotion/AnimatedDiv.tsx",
"content": "import { AnimatedTAGProps } from \"@lib/types\";\nimport { motion } from \"framer-motion\";\n\nexport default function AnimatedDiv({\n variants,\n className,\n children,\n infinity,\n}: AnimatedTAGProps) {\n return (\n \n \n \n \n Activity\n \n \n \n {title}\n \n \n {description}\n \n
\n );\n}\n\nexport default function GitHubActivityGraph() {\n const { isDarkMode } = useDarkMode();\n const { data: githubActivity } = useSWR(\n \"/api/stats/github-contribution\",\n fetcher,\n );\n\n return (\n \n
\n );\n}\n\nconst ContributionsToolTip = ({\n active,\n payload,\n}: TooltipProps\n \n {githubActivity?.contributions ? (\n \n \n \n \n \n \n
\n\n \n \n {githubActivity?.contributionCountByDayOfWeek ? (\n \n \n
\n \n
\n );\n }\n\n return null;\n};\n\nconst ContributionCountByDayOfWeekToolTip = ({\n active,\n payload,\n}: TooltipProps\n Date :{\" \"}\n {getFormattedDate(new Date(payload[0].payload.date))}\n
\n\n Commit Count : {payload[0].value}\n
\n\n
\n );\n }\n\n return null;\n};\n\nfunction LoadingBarChart() {\n const { isDarkMode } = useDarkMode();\n\n const barGraphLoadingData = [\n { day: \"Monday\", count: 3 },\n { day: \"Tuesday\", count: 5 },\n { day: \"Wednesday\", count: 7 },\n { day: \"Thursday\", count: 9 },\n { day: \"Friday\", count: 11 },\n { day: \"Saturday\", count: 13 },\n { day: \"Sunday\", count: 15 },\n ];\n\n return (\n \n Day : {payload[0].payload.day}\n
\n\n Commit Count : {payload[0].value}\n
\n\n \n
\n );\n}\n\nfunction LoadingAreaChart() {\n const { isDarkMode } = useDarkMode();\n\n const areaChartLoadingData = [\n { shortDate: \"09\", contributionCount: 3 },\n { shortDate: \"10\", contributionCount: 5 },\n { shortDate: \"11\", contributionCount: 15 },\n { shortDate: \"12\", contributionCount: 9 },\n { shortDate: \"13\", contributionCount: 4 },\n { shortDate: \"14\", contributionCount: 13 },\n { shortDate: \"15\", contributionCount: 5 },\n { shortDate: \"16\", contributionCount: 4 },\n { shortDate: \"17\", contributionCount: 9 },\n { shortDate: \"18\", contributionCount: 2 },\n { shortDate: \"19\", contributionCount: 5 },\n { shortDate: \"21\", contributionCount: 6 },\n { shortDate: \"22\", contributionCount: 7 },\n { shortDate: \"23\", contributionCount: 3 },\n { shortDate: \"24\", contributionCount: 21 },\n { shortDate: \"25\", contributionCount: 4 },\n { shortDate: \"26\", contributionCount: 9 },\n { shortDate: \"27\", contributionCount: 2 },\n ];\n\n return (\n \n Loading Data...\n
\n \n \n \n \n \n \n
\n );\n}\n"
},
{
"path": "components/Home/BlogsSection.tsx",
"content": "import Blog from \"../Blog\";\nimport { BlogPost } from \"@lib/interface/sanity\";\nimport Link from \"next/link\";\nimport { motion } from \"framer-motion\";\nimport { FiArrowRight } from \"react-icons/fi\";\nimport siteConfig from \"@content/siteConfig\";\n\nconst containerVariants = {\n hidden: {},\n visible: { transition: { staggerChildren: 0.1 } },\n};\n\nexport default function BlogsSection({\n blogs,\n totalBlogs,\n}: {\n blogs: BlogPost[];\n totalBlogs: number;\n}) {\n const { blogsSection } = siteConfig.home;\n\n return (\n \n Loading Data...\n
\n \n \n \n {blogsSection.ctaLabel}\n
\n\n {/* ── Blog list ── */}\n \n {/* Section label */}\n \n \n \n {blogsSection.eyebrow}\n \n \n\n \n {blogsSection.title}\n \n\n \n {blogsSection.description}\n \n
\n\n {/* Article count + CTA */}\n \n \n {totalBlogs}\n \n \n Articles\n \n
\n \n \n \n {epigraphsSection.ctaLabel}\n
\n\n {/* ── Epigraphs list ── */}\n \n {/* Section label */}\n \n \n \n {epigraphsSection.eyebrow}\n \n \n\n \n {epigraphsSection.title}\n \n\n \n {epigraphsSection.description}\n \n
\n\n {/* Count + CTA */}\n \n \n {totalEpigraphs}\n \n \n Epigraphs\n \n
\n \n {/* ── Corner cross-tick marks ── */}\n {(\n [\n \"top-0 left-0\",\n \"top-0 right-0\",\n \"bottom-8 left-0\",\n \"bottom-8 right-0\",\n ] as const\n ).map((pos) => (\n \n \n \n
\n ))}\n\n \n {/* ── Left content (3 cols) ── */}\n
\n\n {/* Scroll indicator */}\n \n {/* Availability badge — inverted */}\n \n \n \n {hero.availabilityBadge}\n \n \n\n {/* Name */}\n \n \n \n {hero.roleSuffix.replace(/^\\.\\s*/, \"\")}\n \n\n {/* CTAs */}\n \n {/* Primary — solid fill */}\n \n \n \n {hero.secondaryCta.label}\n \n \n {hero.socialLabel}\n \n \n {featuredSocialLinks.map((socialLink) => {\n const Icon =\n socialIconMap[socialLink.icon as keyof typeof socialIconMap];\n if (!Icon) return null;\n return (\n \n
\n\n {/* ── Right image (2 cols) ── */}\n \n \n {hero.greeting}\n \n \n \n Jatin\n \n
\n \n Sharma\n \n \n
\n\n {/* Role line */}\n \n \n Sharma\n \n \n
\n {hero.rolePrefix}{\" \"}\n
\n
\n \n {/* Diagonal stripe behind image */}\n \n \n {hero.experienceBadge.value}\n \n \n {hero.experienceBadge.title}\n \n \n {hero.experienceBadge.description}\n \n \n\n {/* Floating card — projects */}\n \n \n 100+\n \n \n Articles\n \n \n
\n \n
\n\n {/* Floating card — years */}\n \n \n
\n\n {/* ── Marquee divider ── */}\n \n {/* Section label */}\n \n \n \n {skillsSection.eyebrow}\n \n \n\n \n {skillsSection.title}\n \n\n \n {skillsSection.description}\n \n
\n\n {/* Tech count + category breakdown */}\n \n \n {skills.length}\n \n \n Technologies\n \n
\n \n {categories.slice(1).map((cat) => (\n setSelectedCategory(cat)}\n className=\"inline-flex items-center gap-1.5 text-[10px] font-mono uppercase tracking-[0.2em] text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-gray-200 transition-colors\"\n >\n
\n \n \n {[...skills, ...skills].map((skill, i) => {\n const Icon = skill.Icon;\n return (\n \n {/* @ts-ignore */}\n
\n );\n })}\n \n {/* Side fades */}\n \n \n \n\n {/* ── Category filter ── */}\n \n {/* @ts-ignore */}\n
\n\n {/* Name */}\n \n {skill.name}\n \n \n );\n })}\n \n \n {/* Icon */}\n
\n \n );\n })}\n \n \n
\n\n {/* Value */}\n \n {stat.value}\n
\n\n {/* Label */}\n \n
\n \n {stat.label}\n
\n \n {stat.description}\n
\n \n
\n\n {post.media_type !== MediaType.Image && (\n \n {post.caption}\n
\n \n item.title === \"Instagram\")?.url!}\n className=\"flex items-center justify-center gap-1 font-medium transition border-transparent font-inter active:scale-95 active:border-black w-fit group\"\n >\n View More on Instagram\n \n \n \n \n
\n \n {instaData === undefined ? (\n
\n\n \n {props.children}\n \n ) : (\n {props.children}\n )}\n \n );\n}\n"
},
{
"path": "components/MDXComponents/CodeSandbox.tsx",
"content": "export default function CodeSandbox({\n id,\n hideNavigation = true,\n}: {\n id: string;\n hideNavigation: boolean;\n}) {\n return (\n \n \n
\n );\n}\n"
},
{
"path": "components/MDXComponents/CodeTitle.tsx",
"content": "import { BsFileEarmarkCodeFill } from \"react-icons/bs\";\nimport {\n SiCss3,\n SiPython,\n SiGnubash,\n SiHtml5,\n SiReact,\n SiMarkdown,\n SiNextdotjs,\n SiVercel,\n SiTypescript,\n} from \"react-icons/si\";\nimport { VscJson } from \"react-icons/vsc\";\nimport { IoLogoJavascript } from \"react-icons/io5\";\nimport { AiOutlineFileText, AiOutlineFolderOpen } from \"react-icons/ai\";\n\ntype Props = {\n title?: string;\n lang: string;\n};\n\nexport default function CodeTitle({ title, lang }: Props) {\n let Icon;\n switch (lang) {\n case \"html\":\n Icon = SiHtml5;\n break;\n case \"css\":\n Icon = SiCss3;\n break;\n case \"js\":\n Icon = IoLogoJavascript;\n break;\n case \"bash\":\n Icon = SiGnubash;\n break;\n case \"py\":\n Icon = SiPython;\n break;\n case \"json\":\n Icon = VscJson;\n break;\n case \"jsx\":\n Icon = SiReact;\n break;\n case \"text\":\n Icon = AiOutlineFileText;\n break;\n case \"md\":\n Icon = SiMarkdown;\n break;\n case \"next\":\n Icon = SiNextdotjs;\n break;\n case \"directory\":\n Icon = AiOutlineFolderOpen;\n break;\n case \"vercel\":\n Icon = SiVercel;\n break;\n case \"ts\":\n case \"tsx\":\n Icon = SiTypescript;\n break;\n default:\n Icon = BsFileEarmarkCodeFill;\n break;\n }\n\n return (\n Code Sandbox
\n\n \n
\n );\n}\n"
},
{
"path": "components/MDXComponents/Codepen.tsx",
"content": "export default function Codepen({ id }: { id: string }) {\n return (\n \n
\n \n \n
\n );\n}\n"
},
{
"path": "components/MDXComponents/Danger.tsx",
"content": "type Props = { title?: string; text: string };\n\nexport default function Danger({ title, text }: Props) {\n return (\n \n
\n );\n}\n"
},
{
"path": "components/MDXComponents/EmbedBlog.tsx",
"content": "import Image from \"next/image\";\nimport Link from \"next/link\";\n\nexport default function EmbedBlog({\n img,\n text,\n url,\n}: {\n img: string;\n text: string;\n url: string;\n}) {\n return (\n \n \n \n \n {title || \"Danger\"}\n
\n {text}
\n\n
\n {text}
\n \n );\n}\n" }, { "path": "components/MDXComponents/Figcaption.tsx", "content": "type Props = {\n src: string;\n caption?: string;\n alt?: string;\n};\n\nexport default function figcaption({ src, caption, alt }: Props) {\n if (caption !== undefined) {\n return (\n\n {prevHref && prevTitle && (\n
\n );\n}\n\nfunction BlogPageButton({\n href,\n title,\n type,\n}: {\n href: string;\n title: string;\n type: \"previous\" | \"next\";\n}) {\n return (\n \n {type} Article\n
\n\n {title}\n
\n \n\n {children}\n \n \n );\n};\n\nexport default Pre;\n"
},
{
"path": "components/MDXComponents/Step.tsx",
"content": "import React from \"react\";\n\nexport default function Step({\n id,\n children,\n}: {\n id: string;\n children?: JSX.Element;\n}) {\n return (\n \n {id}\n
\n \n {children}\n
\n \n );\n}\n"
},
{
"path": "components/MDXComponents/Tip.tsx",
"content": "export default function Tip({\n id,\n children,\n}: {\n id: string;\n children?: React.ReactNode;\n}) {\n return (\n \n
\n );\n}\n"
},
{
"path": "components/MDXComponents/UrlMetaInfo.tsx",
"content": "import React, { useEffect, useState } from \"react\";\n\nimport Image from \"next/image\";\nimport Link from \"next/link\";\n\ninterface MetaData {\n title: string;\n description: string;\n image: string;\n}\n\ninterface UrlMetaInfoProps {\n url: string;\n}\n\nfunction UrlMetaInfo({ url }: UrlMetaInfoProps) {\n const [metaData, setMetaData] = useState\n Tip {id && `#${id}`}\n
\n {children}\n Loading...
;\n }\n\n return (\n \n
\n \n );\n}\n\nexport default UrlMetaInfo;\n"
},
{
"path": "components/MDXComponents/Warning.tsx",
"content": "type Props = {\n text?: string;\n title?: string;\n children?: React.ReactNode;\n};\n\nexport default function Warning({ text, title, children }: Props) {\n return (\n \n
\n {metaData.title}
\n\n {metaData.description}\n
\n\n
\n \n
\n );\n}\n"
},
{
"path": "components/MDXComponents/YouTube.tsx",
"content": "export default function YouTube({ id }: { id: string }) {\n return (\n \n \n \n \n {title || \"Warning\"}\n
\n \n {text || children}\n
\n\n \n
\n );\n}\n"
},
{
"path": "components/MDXComponents/index.tsx",
"content": "import Code from \"./Code\";\nimport CodeSandbox from \"./CodeSandbox\";\nimport CodeTitle from \"./CodeTitle\";\nimport Codepen from \"./Codepen\";\nimport Danger from \"./Danger\";\nimport EmbedBlog from \"./EmbedBlog\";\nimport Figcaption from \"./Figcaption\";\nimport LinkedInEmbed from \"./LinkedInEmbed\";\nimport NextAndPreviousButton from \"./NextAndPreviousButton\";\nimport Pre from \"./Pre\";\nimport Step from \"./Step\";\nimport Tip from \"./Tip\";\nimport UrlMetaInfo from \"./UrlMetaInfo\";\nimport Warning from \"./Warning\";\nimport YouTube from \"./YouTube\";\n\nconst MDXComponents = {\n Codepen,\n Figcaption,\n Warning,\n Danger,\n CodeTitle,\n Tip,\n Step,\n CodeSandbox,\n NextAndPreviousButton,\n YouTube,\n EmbedBlog,\n UrlMetaInfo,\n LinkedInEmbed,\n pre: Pre,\n code: Code,\n};\n\nexport default MDXComponents;\n"
},
{
"path": "components/MetaData.tsx",
"content": "import { useEffect, useState } from \"react\";\n\nimport { NextSeo } from \"next-seo\";\nimport useWindowLocation from \"@hooks/useWindowLocation\";\n\n// import Head from \"next/head\";\n\ntype Props = {\n title: string;\n description: string;\n previewImage?: string;\n keywords?: string;\n suffix?: string;\n};\n\nconst getFaviconPath = (isDarkMode: boolean = true): string => {\n return `/favicon-${isDarkMode ? \"dark\" : \"light\"}.ico`;\n};\n\nexport default function MetaData({\n title,\n description,\n previewImage,\n keywords,\n suffix,\n}: Props) {\n const { currentURL } = useWindowLocation();\n const [faviconHref, setFaviconHref] = useState(\"/favicon-dark.ico\");\n\n useEffect(() => {\n // Get current color scheme.\n const matcher = window.matchMedia(\"(prefers-color-scheme: dark)\");\n // Set favicon initially.\n setFaviconHref(getFaviconPath(matcher.matches));\n // Change favicon if the color scheme changes.\n matcher.onchange = () => setFaviconHref(getFaviconPath(matcher.matches));\n }, [faviconHref]);\n\n return (\n \n {loading && (\n \n )}\n setLoading(false)}\n />\n
\n\n {/* Info */}\n \n \n {title}\n \n
\n \n );\n}\n\nfunction WatchStatus({ rating }: { rating?: number }) {\n return (\n \n {rating ? (\n <>\n \n Watched\n \n \n
\n );\n}\n"
},
{
"path": "components/Newsletter.tsx",
"content": "import { useState } from \"react\";\nimport { ToastContainer, toast } from \"react-toastify\";\nimport { CgSpinnerTwo } from \"react-icons/cg\";\nimport { useDarkMode } from \"@context/darkModeContext\";\n\nexport default function Newsletter() {\n const { isDarkMode } = useDarkMode();\n const [email, setEmail] = useState(\"\");\n const [validationLoading, setValidationLoading] = useState(false);\n\n async function subscribeNewsLetter(e: React.FormEvent\n {/* Header */}\n
\n\n \n \n Newsletter\n \n
\n\n {/* Form */}\n \n \n Monthly digest on web dev, tech, and productivity.\n
\n\n No spam. Unsubscribe any time.\n
\n\n
\n );\n}\n\nexport default OgImage;\n"
},
{
"path": "components/PageHeader.tsx",
"content": "import React from \"react\";\nimport { motion } from \"framer-motion\";\n\ninterface PageHeaderProps {\n /** Large background watermark text, e.g. \"about\" or \"/uses\" */\n watermark: string;\n /** Mono eyebrow label above the title, e.g. \"Profile — 001\" */\n eyebrow: string;\n /** Page title rendered as h1 */\n title: string;\n /** Description rendered with left-border accent below the title */\n description: string;\n /** Content rendered inside the max-w-7xl container below the header */\n children?: React.ReactNode;\n /** Extra classes on the outermost wrapper — use for padding overrides */\n className?: string;\n}\n\nexport default function PageHeader({\n watermark,\n eyebrow,\n title,\n description,\n children,\n className = \"\",\n}: PageHeaderProps) {\n return (\n \n {/* Header */}\n
\n \n );\n}\n"
},
{
"path": "components/PageNotFound.tsx",
"content": "import Link from \"next/link\";\nimport MetaData from \"@components/MetaData\";\nimport { motion } from \"framer-motion\";\n\nexport default function PageNotFound() {\n return (\n <>\n \n \n \n \n {eyebrow}\n \n \n\n \n {title}\n \n\n \n {description}\n \n
\n\n {children}\n \n {/* Watermark */}\n \n 404\n
\n\n \n \n \n \n Error — 404\n \n \n\n \n Page not found.\n \n\n \n You didn't break the internet, but I can't find what\n you're looking for. Visit the homepage to get back on track.\n \n\n \n \n Take me home\n \n \n
\n \n \n );\n}\n"
},
{
"path": "components/PageTop.tsx",
"content": "import {\n fromLeftVariant,\n opacityVariant,\n} from \"../content/FramerMotionVariants\";\nimport AnimatedHeading from \"./FramerMotion/AnimatedHeading\";\nimport AnimatedText from \"./FramerMotion/AnimatedText\";\n\nexport default function PageTop({\n pageTitle,\n headingClass,\n containerClass,\n children,\n}: {\n pageTitle: string;\n headingClass?: string;\n containerClass?: string;\n children?: React.ReactNode;\n}) {\n return (\n \n \n {project.name}\n \n \n {project.description}\n \n
\n\n {/* Tech tags */}\n {project.tools && project.tools.length > 0 && (\n \n {(featured ? project.tools : project.tools.slice(0, 4)).map(\n (tool, index) => (\n \n {tool}\n \n ),\n )}\n
\n )}\n\n {/* Links */}\n \n \n \n
\n \n \n );\n}\n"
},
{
"path": "components/QRCodeContainer.tsx",
"content": "import QRCode from \"react-qr-code\";\nimport useWindowLocation from \"@hooks/useWindowLocation\";\nimport { MdClose } from \"react-icons/md\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { useDarkMode } from \"@context/darkModeContext\";\n\nexport default function QRCodeContainer({\n showQR,\n setShowQR,\n}: {\n showQR: boolean;\n setShowQR: (value: boolean) => void;\n}) {\n const { currentURL } = useWindowLocation();\n const { isDarkMode } = useDarkMode();\n\n function downloadQRCode() {\n const svg = document.getElementById(\"QRCode\");\n const svgData = new XMLSerializer().serializeToString(svg!);\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n const img = new Image();\n img.onload = () => {\n canvas.width = img.width;\n canvas.height = img.height;\n ctx?.drawImage(img, 0, 0);\n const pngFile = canvas.toDataURL(\"image/png\");\n const downloadLink = document.createElement(\"a\");\n downloadLink.download = \"QRCode\";\n downloadLink.href = `${pngFile}`;\n downloadLink.click();\n };\n img.src = `data:image/svg+xml;base64,${btoa(svgData)}`;\n }\n\n return (\n \n {/* Header */}\n \n
\n \n \n )}\n \n setShowQR(false)}\n aria-label=\"Close\"\n className=\"w-8 h-8 flex items-center justify-center border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-900 dark:hover:border-white transition-colors\"\n >\n
\n\n {/* QR code */}\n \n \n Share\n \n \n Scan QR Code\n \n
\n \n
\n\n {/* URL + download */}\n \n \n Download PNG\n \n
\n \n {currentURL}\n
\n\n \n \n \n\n \n \n \n \n \n \n \n\n \n\n {isShareSupported && (\n \n )}\n\n {children}\n
\n );\n}\n"
},
{
"path": "components/SnippetCard.tsx",
"content": "import { motion } from \"framer-motion\";\nimport { ISnippet } from \"@lib/interface/sanity\";\nimport Image from \"next/image\";\nimport Link from \"next/link\";\n\nconst itemVariants = {\n hidden: { opacity: 0, y: 12 },\n visible: { opacity: 1, y: 0, transition: { duration: 0.35 } },\n};\n\nexport default function SnippetCard({ snippet }: { snippet: ISnippet }) {\n return (\n \n
\n\n {/* Language label */}\n \n {snippet.language.name}\n \n\n {/* Title */}\n \n {snippet.title}\n
\n\n {/* Excerpt */}\n\n {snippet.excerpt}\n
\n \n\n
\n \n \n );\n}\n"
},
{
"path": "components/Stats/Artist.tsx",
"content": "import Image from \"next/image\";\nimport Link from \"next/link\";\n\ntype ArtistProps = {\n name: string;\n url: string;\n coverImage: string;\n popularity: number;\n id: number;\n};\n\nexport default function Artist({\n name,\n url,\n coverImage,\n popularity,\n id,\n}: ArtistProps) {\n return (\n \n
\n \n
\n \n );\n}\n"
},
{
"path": "components/Stats/MonkeyTypeStats.tsx",
"content": "import {\n Area,\n AreaChart,\n Bar,\n BarChart,\n CartesianGrid,\n ResponsiveContainer,\n Tooltip,\n TooltipProps,\n XAxis,\n YAxis,\n} from \"recharts\";\nimport {\n NameType,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\n\nimport { motion } from \"framer-motion\";\nimport React from \"react\";\nimport fetcher from \"@lib/fetcher\";\nimport { useDarkMode } from \"@context/darkModeContext\";\nimport useSWR from \"swr\";\n\n/* ── Types ── */\ninterface PersonalBest {\n wpm: number;\n acc: number;\n consistency: number;\n raw: number;\n timestamp: number;\n language: string;\n difficulty: string;\n}\n\ninterface TrendPoint {\n index: number;\n wpm: number;\n raw: number;\n acc: number;\n mode: string;\n timestamp: number;\n}\n\ninterface MonkeyTypeData {\n personalBests: {\n time15: PersonalBest | null;\n time30: PersonalBest | null;\n time60: PersonalBest | null;\n };\n stats: {\n completedTests: number;\n startedTests: number;\n timeTyping: number;\n };\n streak: {\n length: number;\n maxLength: number;\n };\n lastResult: any | null;\n averages: {\n wpm: number;\n acc: number;\n consistency: number;\n } | null;\n trendResults: TrendPoint[];\n leaderboardRank: number | null;\n}\n\n/* ── Helpers ── */\nfunction formatTime(seconds: number): string {\n const hrs = Math.floor(seconds / 3600);\n const mins = Math.floor((seconds % 3600) / 60);\n if (hrs > 0) return `${hrs}h ${mins}m`;\n return `${mins}m`;\n}\n\nfunction formatDate(ts: number): string {\n return new Date(ts).toLocaleDateString(\"en-US\", {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n });\n}\n\n/* ── Animation variants ── */\nconst itemVariants = {\n hidden: { opacity: 0, y: 10 },\n visible: {\n opacity: 1,\n y: 0,\n transition: { type: \"spring\" as const, stiffness: 160, damping: 22 },\n },\n};\n\nconst containerVariants = {\n hidden: {},\n visible: { transition: { staggerChildren: 0.06 } },\n};\n\n/* ── Stat Card ── */\nfunction MonkeyStatsCard({\n title,\n value,\n}: {\n title: string;\n value: string | null | undefined;\n}) {\n return (\n \n {name}\n
\n\n Popularity: {popularity}\n
\n\n {title}\n
\n\n {value ?? (\n \n )}\n
\n \n );\n}\n\n/* ── Section heading ── */\nfunction SectionHeading({\n eyebrow,\n title,\n description,\n}: {\n eyebrow: string;\n title: string;\n description?: string;\n}) {\n return (\n \n \n \n \n {eyebrow}\n \n \n \n {title}\n \n {description && (\n \n {description}\n \n )}\n
\n );\n}\n\n/* ── Chart section heading ── */\nfunction ChartSectionHeading({\n title,\n description,\n}: {\n title: string;\n description: string;\n}) {\n return (\n \n \n \n \n Typing\n \n \n \n {title}\n \n \n {description}\n \n
\n );\n}\n\n/* ── Personal best detail card ── */\nfunction PersonalBestCard({\n mode,\n pb,\n}: {\n mode: string;\n pb: PersonalBest | null | undefined;\n}) {\n if (!pb) {\n return (\n \n
\n );\n }\n\n const rows = [\n { label: \"Raw WPM\", value: Math.round(pb.raw) },\n { label: \"Accuracy\", value: `${Math.round(pb.acc * 100) / 100}%` },\n {\n label: \"Consistency\",\n value: `${Math.round(pb.consistency * 100) / 100}%`,\n },\n { label: \"Language\", value: pb.language },\n { label: \"Date\", value: formatDate(pb.timestamp) },\n ];\n\n return (\n \n {mode}\n
\n\n {Array.from({ length: 4 }, (_, i) => (\n
\n \n
\n \n {mode}\n
\n\n {Math.round(pb.wpm)}\n \n wpm\n \n
\n\n {rows.map((row) => (\n \n \n {row.label}\n \n \n {row.value}\n \n
\n ))}\n \n \n );\n}\n\n/* ── Tooltips ── */\nconst WpmTooltip = ({ active, payload }: TooltipProps\n
\n );\n }\n return null;\n};\n\nconst AccuracyTooltip = ({\n active,\n payload,\n}: TooltipProps\n Mode : {payload[0].payload.mode}\n
\n\n WPM : {payload[0].value}\n
\n\n Raw : {payload[0].payload.raw}\n
\n\n
\n );\n }\n return null;\n};\n\nconst TrendTooltip = ({\n active,\n payload,\n}: TooltipProps\n Mode : {payload[0].payload.mode}\n
\n\n Accuracy :{\" \"}\n {payload[0].payload.acc}%\n
\n\n Consistency :{\" \"}\n {payload[0].payload.consistency}%\n
\n\n
\n );\n }\n return null;\n};\n\n/* ── Loading charts ── */\nfunction LoadingBarChart({\n data,\n}: {\n data: { mode: string; value: number }[];\n}) {\n const { isDarkMode } = useDarkMode();\n return (\n \n Test : #\n {payload[0].payload.index}\n
\n\n WPM : {payload[0].payload.wpm}\n
\n\n Raw : {payload[0].payload.raw}\n
\n\n Acc : {payload[0].payload.acc}%\n
\n\n Mode : {payload[0].payload.mode}\n
\n\n \n
\n );\n}\n\nfunction LoadingAreaChart() {\n const { isDarkMode } = useDarkMode();\n const placeholderData = Array.from({ length: 10 }, (_, i) => ({\n index: i + 1,\n wpm: 60 + Math.sin(i) * 20,\n }));\n return (\n \n Loading Data...\n
\n \n \n
\n );\n}\n\n/* ── Main Component ── */\nexport default function MonkeyTypeStats() {\n const { isDarkMode } = useDarkMode();\n const { data } = useSWR\n Loading Data...\n
\n \n \n {overviewStats.map((stat, index) => (\n
\n\n {/* ══════════════════════════════════════════════ */}\n {/* Section 2 — Personal Bests Detail Cards */}\n {/* ══════════════════════════════════════════════ */}\n \n
\n\n {/* ══════════════════════════════════════════════ */}\n {/* Section 3 — WPM Trend (full-width area chart) */}\n {/* ══════════════════════════════════════════════ */}\n \n
\n \n \n {trendResults && trendResults.length > 0 ? (\n \n \n \n \n \n \n
\n\n {/* ══════════════════════════════════════════════ */}\n {/* Section 4 — PB Charts (2-col grid) */}\n {/* ══════════════════════════════════════════════ */}\n \n
\n \n );\n}\n"
},
{
"path": "components/Stats/StatsCard.tsx",
"content": "import { motion } from \"framer-motion\";\n\nconst itemVariants = {\n hidden: { opacity: 0, y: 10 },\n visible: {\n opacity: 1,\n y: 0,\n transition: { type: \"spring\" as const, stiffness: 160, damping: 22 },\n },\n};\n\nexport default function StatsCard({\n title,\n value,\n}: {\n title: string;\n value: string;\n}) {\n return (\n \n \n {wpmChartData ? (\n \n \n
\n\n \n \n {accChartData ? (\n \n \n
\n \n {title}\n
\n\n {value ?? (\n \n )}\n
\n \n );\n}\n"
},
{
"path": "components/Stats/Track.tsx",
"content": "import Image from \"next/image\";\nimport Link from \"next/link\";\n\ntype TrackProps = {\n url: string;\n title: string;\n artist: string;\n coverImage: string;\n id: number;\n};\n\nexport default function Track({\n url,\n title,\n artist,\n coverImage,\n id,\n}: TrackProps) {\n return (\n \n {coverImage ? (\n
\n \n
\n \n );\n}\n"
},
{
"path": "components/Support.tsx",
"content": "import UPI from \"@components/SVG/UPI\";\nimport {\n FadeContainer,\n fromTopVariant,\n popUp,\n} from \"@content/FramerMotionVariants\";\nimport support from \"@content/support\";\nimport Link from \"next/link\";\nimport React, { FormEvent, useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { useDarkMode } from \"@context/darkModeContext\";\nimport QRCode from \"react-qr-code\";\nimport { BiRupee } from \"react-icons/bi\";\nimport { IoMdArrowRoundBack } from \"react-icons/io\";\nimport { FiInfo } from \"react-icons/fi\";\nimport { lockScroll, removeScrollLock } from \"@utils/functions\";\nimport AnimatedDiv from \"@components/FramerMotion/AnimatedDiv\";\n\nexport default function Support() {\n const [showUPIForm, setShowUPIForm] = useState(false);\n\n return (\n \n {title}\n
\n\n {artist}\n
\nSupport me 💪
\n\n\n
\n \n \n );\n })}\n {paymentMethod.name}
\n\n
\n \n \n UPI
\n\n ) => {\n if (e.target.value.length === 0)\n return (e.target.style.width = \"3ch\");\n if ((e.target as HTMLInputElement).value.length > 7) return;\n e.target.style.width = e.target.value.length + \"ch\";\n }}\n title=\"Enter amount\"\n id=\"amount\"\n className=\"bg-transparent rounded-lg dark:placeholder-gray-400 text-gray-600 dark:text-gray-200 outline-none font-bold text-2xl w-[3ch]\"\n type=\"number\"\n name=\"amount\"\n placeholder=\"500\"\n min=\"100\"\n max=\"10000\"\n required\n value={amount}\n onChange={(e) => setAmount(parseInt(e.target.value))}\n />\n
\n \n \n\n {amount >= 100 && (\n \n
\n \n )}\n \n \n );\n}\n"
},
{
"path": "components/TableOfContents.tsx",
"content": "import { AnimatePresence, motion } from \"framer-motion\";\nimport { useState } from \"react\";\n\nimport Link from \"next/link\";\nimport { BsListUl } from \"react-icons/bs\";\nimport { MdClose } from \"react-icons/md\";\nimport { CgSearch } from \"react-icons/cg\";\nimport { TableOfContents as TableOfContentType } from \"@lib/types\";\nimport { stringToSlug } from \"@lib/toc\";\n\nexport default function TableOfContents({\n tableOfContents,\n}: {\n tableOfContents: TableOfContentType[];\n}) {\n const [open, setOpen] = useState(false);\n const [search, setSearch] = useState(\"\");\n\n if (!tableOfContents.length) return null;\n\n const filtered = search.trim()\n ? tableOfContents.filter((t) =>\n t.heading.toLowerCase().includes(search.trim().toLowerCase()),\n )\n : tableOfContents;\n\n return (\n <>\n {/* FAB — flat, no shadow */}\n Scan the QR code via any UPI app
\n\n setOpen(false)}\n aria-label=\"Close\"\n className=\"w-8 h-8 flex items-center justify-center border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-900 dark:hover:border-white transition-colors\"\n >\n
\n\n {/* Search */}\n \n \n Navigation\n \n \n Table of Contents\n \n
\n \n
\n\n {/* TOC items */}\n \n\n {/* Footer */}\n \n setSearch(e.target.value)}\n placeholder=\"Filter sections…\"\n className=\"w-full pl-8 pr-3 py-2 text-sm bg-transparent border border-gray-200 dark:border-gray-700 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 outline-none focus:border-gray-900 dark:focus:border-white transition-colors\"\n />\n
\n \n \n {filtered.length} section{filtered.length !== 1 ? \"s\" : \"\"}\n \n {search && (\n setSearch(\"\")}\n className=\"font-mono text-[10px] tracking-[0.3em] uppercase text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors\"\n >\n Clear\n \n )}\n
\n \n )}\n \n {/* Logo / name */}\n \n \n Jatin Sharma\n \n \n\n {/* Desktop nav */}\n \n {navigationRoutes.slice(0, 8).map((link, i) => (\n
\n \n\n {/* Mobile menu — rendered outside navRef to avoid backdrop-filter\n creating a new fixed containing block that clips the overlay */}\n \n \n
\n \n
\n );\n}\n"
},
{
"path": "layout/Layout.tsx",
"content": "import React, { useState } from \"react\";\n\nimport Footer from \"../components/Footer\";\nimport QRCodeContainer from \"@components/QRCodeContainer\";\nimport ScrollToTopButton from \"../components/ScrollToTopButton\";\nimport SnowfallCanvas from \"@components/SnowfallCanvas\";\nimport TopNavbar from \"../components/TopNavbar\";\nimport { useDarkMode } from \"@context/darkModeContext\";\n\nexport default function Layout({ children }: { children: React.ReactNode }) {\n const { isDarkMode } = useDarkMode();\n const [showQR, setShowQR] = useState(false);\n\n return (\n <>\n {(new Date().getMonth() >= 11 || new Date().getMonth() <= 1) &&\n isDarkMode && \n {/* Article header */}\n \n {/* Tags / org badge */}\n {post.organization && (\n \n \n {post.title}\n \n\n \n {post.excerpt}\n \n\n {/* Meta */}\n \n {/* Author */}\n \n\n {/* MDX body */}\n
\n \n \n {post.organization.name}\n \n
\n \n )}\n\n \n
\n \n
\n\n {/* Reading stats + print */}\n \n
\n \n \n {post.author.name}\n \n
\n \n {getFormattedDate(new Date(post.publishedAt))}\n
\n\n \n {post.readingTime.text}\n \n ·\n \n {post.readingTime.words} words\n \n window.print()}\n className=\"ml-1 w-7 h-7 flex items-center justify-center border border-gray-200 dark:border-gray-700 text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-400 dark:hover:border-gray-500 transition-colors print:hidden\"\n >\n
\n \n \n {children}\n
\n \n
\n );\n}\n"
},
{
"path": "lib/MDXContent.ts",
"content": "import { FrontMatter } from \"./types\";\nimport matter from \"gray-matter\";\nimport path from \"path\";\nimport { readFileSync } from \"fs\";\nimport readTime from \"reading-time\";\nimport rehypeAutolinkHeadings from \"rehype-autolink-headings\";\nimport rehypePrettyCode from \"rehype-pretty-code\";\nimport rehypeSlug from \"rehype-slug\";\nimport { serialize } from \"next-mdx-remote/serialize\";\nimport { sync } from \"glob\";\n\nconst rehypePlugins = [\n rehypeSlug,\n [rehypeAutolinkHeadings, { behaviour: \"wrap\" }],\n [\n rehypePrettyCode,\n {\n theme: {\n dark: \"andromeeda\",\n light: \"catppuccin-latte\",\n },\n onVisitLine(node: any) {\n if (node.children.length === 0) {\n node.children = [{ type: \"text\", value: \" \" }];\n }\n },\n onVisitHighlightedLine(node: any) {\n node.properties.className.push(\"highlighted\");\n },\n onVisitHighlightedWord(node: any) {\n node.properties.className = [\"word\"];\n },\n },\n ],\n] as any;\n\nexport default class MDXContent {\n private POST_PATH: string;\n constructor(folderName: string) {\n this.POST_PATH = path.join(process.cwd(), folderName);\n }\n\n getSlugs() {\n const paths = sync(`${this.POST_PATH}/*.mdx`);\n return paths.map((path) => {\n const parts = path.split(\"/\");\n const fileName = parts[parts.length - 1];\n const [slug, _ext] = fileName.split(\".\");\n return slug;\n });\n }\n\n getFrontMatter(slug: string): FrontMatter | null {\n const postPath = path.join(this.POST_PATH, `${slug}.mdx`);\n const source = readFileSync(postPath);\n const { content, data } = matter(source);\n const readingTime = readTime(content);\n\n if (!data.published) return null;\n\n return {\n slug,\n readingTime,\n excerpt: data.excerpt ?? \"\",\n title: data.title ?? slug,\n date: (data.date ?? new Date()).toString(),\n keywords: data.keywords ?? \"\",\n image: data.image ?? \"https://imgur.com/aNqa9cE.png\",\n org: data.org ?? null,\n };\n }\n\n async getPostFromSlug(slug: string, force: boolean = false) {\n const postPath = path.join(this.POST_PATH, `${slug}.mdx`);\n const source = readFileSync(postPath);\n const { content, data } = matter(source);\n if (!data.published && !force) return { post: null };\n\n const frontMatter = this.getFrontMatter(slug);\n\n const mdxSource = await serialize(content, {\n mdxOptions: {\n rehypePlugins,\n },\n });\n return {\n post: {\n source: mdxSource,\n tableOfContents: this.getTableOfContents(content),\n meta: frontMatter,\n },\n };\n }\n\n getAllPosts(length?: number | undefined) {\n const allPosts = this.getSlugs()\n .map((slug) => {\n return this.getFrontMatter(slug);\n })\n .filter((post) => post !== null) // Filter post if it is not published\n .sort((a, b) => {\n if (new Date(a!.date) > new Date(b!.date)) return -1;\n if (new Date(a!.date) < new Date(b!.date)) return 1;\n return 0;\n });\n\n return length === undefined ? allPosts : allPosts.slice(0, length);\n }\n\n getTableOfContents(markdown: string) {\n const regXHeader = /#{2,6}.+/g;\n const headingArray = markdown.match(regXHeader)\n ? markdown.match(regXHeader)\n : [];\n return headingArray?.map((heading) => {\n return {\n level: heading.split(\"#\").length - 1 - 2, // we starts from the 2nd heading that's why we subtract 2 and 1 is extra heading text\n heading: heading.replace(/#{2,6}/, \"\").trim(),\n };\n });\n }\n}\n"
},
{
"path": "lib/devto.ts",
"content": "const PER_PAGE: number = 1000;\nconst DEV_API = process.env.NEXT_PUBLIC_BLOGS_API;\n\n/**\n * Makes a request to the DEV API to retrieve a specific page of followers for the user.\n */\nconst getPageOfFollowers = async (page: number) => {\n // Make a request to the DEV API to retrieve a specific page of followers\n const perPageFollowers = await fetch(\n `https://dev.to/api/followers/users?per_page=${PER_PAGE}&page=${page}`,\n {\n headers: {\n api_key: DEV_API!,\n },\n },\n )\n .then((response) => response.json())\n .catch((err) => console.error(err));\n\n return perPageFollowers.length;\n};\n\n/**\n * Makes multiple requests to the DEV API to retrieve all of the user's followers.\n */\nexport const allFollowers = async () => {\n let numReturned = PER_PAGE;\n let page = 1;\n var totalFollowers = 0;\n\n // Continue making requests to the DEV API until all followers have been retrieved\n while (numReturned === PER_PAGE) {\n const followers = await getPageOfFollowers(page);\n totalFollowers += followers;\n numReturned = followers;\n page++;\n }\n return totalFollowers;\n};\n\n/**\n * Makes a request to the DEV API to retrieve a specific page of posts for the user.\n */\nconst getPageOfPosts = async (page: number) => {\n // Make a request to the DEV API to retrieve a specific page of posts\n const perPagePosts = await fetch(\n `https://dev.to/api/articles/me?per_page=${PER_PAGE}&page=${page}`,\n {\n headers: {\n api_key: DEV_API!,\n },\n },\n )\n .then((response) => response.json())\n .catch((err) => console.error(err));\n return perPagePosts;\n};\n\n/**\n * Makes multiple requests to the DEV API to retrieve all of the user's posts.\n */\nexport const allPosts = async () => {\n let numReturned = PER_PAGE;\n let page = 1;\n var totalPosts = [];\n\n // Continue making requests to the DEV API until all posts have been retrieved\n while (numReturned === PER_PAGE) {\n const posts = await getPageOfPosts(page);\n totalPosts.push(...posts);\n numReturned = posts.length;\n page++;\n }\n return totalPosts;\n};\n"
},
{
"path": "lib/fetcher.ts",
"content": "/**\n * Makes a request to the specified URL and returns the response as JSON.\n */\nexport default async function fetcher(url: string) {\n return fetch(url).then((r) => r.json());\n}\n"
},
{
"path": "lib/generateRSS.ts",
"content": "import RSS from \"rss\";\nimport { getAllPostsMeta } from \"./sanityContent\";\nimport { writeFileSync } from \"fs\";\n\nexport default async function getRSS() {\n const siteURL = \"https://j471n.in\";\n const allBlogs = await getAllPostsMeta();\n\n // Create a new RSS object\n const feed = new RSS({\n title: \"Jatin Sharma\",\n description: `I've been writing online since 2021, mostly about web development\n and tech careers. In total, I've written ${allBlogs.length} articles\n till now.`,\n site_url: siteURL,\n feed_url: `${siteURL}/feed.xml`,\n language: \"en\",\n pubDate: new Date(),\n copyright: `All rights reserved ${new Date().getFullYear()}, Jatin Sharma`,\n });\n\n // Add all blog posts to the RSS feed\n allBlogs?.map((post) => {\n feed.item({\n title: post.title,\n url: `${siteURL}/blogs/${post.slug.current}`,\n date: post.publishedAt,\n description: post!.excerpt,\n });\n });\n\n // Write the RSS feed to a file\n writeFileSync(\"./public/feed.xml\", feed.xml({ indent: true }));\n}\n"
},
{
"path": "lib/github.ts",
"content": "import {\n IContributionCalendar,\n IContributionCountByDay,\n IContributionDay,\n IGitHubProfileResponse,\n IGitHubRepositoriesAPIResponse,\n IUserContributionDetails,\n IWeek,\n} from \"./interface\";\n\nimport { GithubRepo } from \"./types\";\nimport moment from \"moment\";\n\nconst headers = new Headers({\n Authorization: `token ${process.env.GITHUB_TOKEN}`,\n});\n\n// its for /api/stats/github\nexport async function fetchGithub(): Promise\n {/* Header */}\n \n {/* Language badge */}\n \n \n {snippet.title}\n \n\n {/* Excerpt */}\n \n {snippet.excerpt}\n \n\n {/* Meta row */}\n \n \n {getFormattedDate(new Date(snippet.publishedAt))}\n \n ·\n \n {snippet.readingTime.text}\n \n \n \n\n {/* MDX Content */}\n
\n \n
\n \n\n {/* Title */}\n \n
\n \n {snippet.language.name}\n \n \n {children}\n
\n \n
\n \n\n {/* ── Movies & TV ── */}\n \n {/* Section header */}\n \n {parsedLinkedIn.experiences.map((experience) => (\n \n {/* Logo */}\n 1 ? \"ml-8\" : \"\"\n }`}\n >\n {experience.job_titles.length > 1 && (\n
\n \n ))}\n \n \n \n \n \n Career\n \n \n \n Recent Experience\n \n \n
\n\n {/* Experience cards */}\n \n
\n\n {/* Content */}\n \n {experience.company}\n
\n )}\n\n {experience.job_titles.map((job, i) => (\n\n {experience.job_titles.length > 1 && (\n
\n ))}\n \n
\n\n {job.description && (\n \n
\n \n {job.title}\n
\n {experience.job_titles.length === 1 && (\n\n {experience.company}\n
\n )}\n {job.location && (\n\n {job.location}\n
\n )}\n\n {months[job.starts_at.month - 1]} {job.starts_at.year}\n {\" — \"}\n {!job.ends_at\n ? \"Present\"\n : `${months[job.ends_at.month - 1]} ${job.ends_at.year}`}\n
\n\n {job.description}\n
\n )}\n\n
\n \n );\n}\n\nexport async function getStaticProps() {\n const about = await getStaticPageFromSlug(\"about\");\n\n const movies = await fetchTMDBData();\n const { data: linkedin } = await getUserDataValue(\"linkedin\");\n\n return {\n props: {\n about,\n movies,\n linkedin,\n },\n revalidate: TIME_IN_SECONDS.ONE_DAY, // Revalidate every 24 hours\n };\n}\n"
},
{
"path": "pages/api/books.ts",
"content": "import { NextApiRequest, NextApiResponse } from \"next\";\nimport { getMyBooks } from \"../../lib/hardcover\";\nimport { HardcoverBook } from \"../../lib/types\";\n\nexport default async function handler(\n _req: NextApiRequest,\n res: NextApiResponse<{ books: HardcoverBook[] } | { error: string }>,\n) {\n try {\n const books = await getMyBooks();\n\n // Revalidate once per day (86 400 s), serve stale for up to 12 h while revalidating\n res.setHeader(\n \"Cache-Control\",\n \"public, s-maxage=86400, stale-while-revalidate=43200\",\n );\n\n return res.status(200).json({ books });\n } catch (error) {\n const message =\n error instanceof Error ? error.message : \"Failed to fetch books\";\n return res.status(500).json({ error: message });\n }\n}\n"
},
{
"path": "pages/api/ga.ts",
"content": "import { NextApiRequest, NextApiResponse } from \"next\";\nimport { BetaAnalyticsDataClient } from \"@google-analytics/data\";\n\nconst propertyId = process.env.GA_PROPERTY_ID;\nconst DAYS = 7;\n\nconst analyticsDataClient = new BetaAnalyticsDataClient({\n credentials: {\n client_email: process.env.GA_CLIENT_EMAIL,\n private_key: process.env.GA_PRIVATE_KEY?.replace(/\\n/gm, '\\n'),\n },\n});\n\nexport default async function handler(\n _req: NextApiRequest,\n res: NextApiResponse\n) {\n const [response] = await analyticsDataClient.runReport({\n property: `properties/${propertyId}`,\n dateRanges: [\n {\n startDate: `${DAYS}daysAgo`,\n endDate: \"today\",\n },\n ],\n dimensions: [\n {\n name: \"year\",\n },\n ],\n metrics: [\n {\n name: \"activeUsers\",\n },\n ],\n });\n\n let totalVisitors = 0;\n response.rows?.forEach((row: any) => {\n totalVisitors += parseInt(row.metricValues[0].value);\n });\n\n res.setHeader(\n \"Cache-Control\",\n \"public, s-maxage=43200, stale-while-revalidate=21600\"\n );\n\n return res.status(200).json({\n totalVisitors,\n days: 7,\n });\n}\n"
},
{
"path": "pages/api/now-playing.ts",
"content": "import { NextApiRequest, NextApiResponse } from \"next\";\nimport { currentlyPlayingSong } from \"../../lib/spotify\";\n\nexport default async function handler(\n _req: NextApiRequest,\n res: NextApiResponse\n) {\n const response = await currentlyPlayingSong();\n\n if (response.status === 204 || response.status > 400) {\n return res.status(200).json({ isPlaying: false });\n }\n\n const song = await response.json();\n\n if (song.item === null) {\n return res.status(200).json({ isPlaying: false });\n }\n\n const isPlaying = song.is_playing;\n const title = song.item.name;\n const artist = song.item.artists.map((artist: any) => artist.name).join(\", \");\n const album = song.item.album.name;\n const albumImageUrl = song.item.album.images[0].url;\n const songUrl = song.item.external_urls.spotify;\n\n // res.setHeader(\n // \"Cache-Control\",\n // \"public, s-maxage=60, stale-while-revalidate=10\"\n // );\n\n return res.status(200).json({\n album,\n albumImageUrl,\n artist,\n isPlaying,\n songUrl,\n title,\n });\n}\n"
},
{
"path": "pages/api/posts/insta.ts",
"content": "import { NextApiRequest, NextApiResponse } from \"next\";\n\nimport { getInstagramPosts } from \"@lib/instaposts\";\n\nexport default async function handler(\n req: NextApiRequest,\n res: NextApiResponse\n) {\n const paginationCode = req.query?.code ?? null;\n const mode = req.query?.mode ?? null;\n\n const additionalParams = mode\n ? mode === \"before\"\n ? { before: paginationCode }\n : { after: paginationCode }\n : {};\n\n const outputData = await getInstagramPosts(additionalParams);\n\n res.setHeader(\n \"Cache-Control\",\n \"public, s-maxage=3600, stale-while-revalidate=1800\"\n );\n\n return res.status(200).json(outputData);\n}\n"
},
{
"path": "pages/api/revalidate.ts",
"content": "import type { NextApiRequest, NextApiResponse } from \"next\";\n\ninterface ExtendedNextApiRequest extends NextApiRequest {\n query: {\n revalidateUrl: string;\n secret: string;\n };\n}\nexport default async function handler(\n req: ExtendedNextApiRequest,\n res: NextApiResponse,\n) {\n // Check for secret to confirm this is a valid request\n if (req.query.secret !== process.env.REVALIDATE_SECRET) {\n return res.status(401).json({\n message:\n \"Invalid token alert! It looks like you're trying to sneak in without proper authorization. Please present a valid token or face rejection\",\n });\n }\n\n try {\n // Regenerate the projects page\n await res.revalidate(req.query.revalidateUrl);\n return res.json({ revalidated: true });\n } catch (err) {\n // If there was an error, Next.js will continue\n // to show the last successfully generated page\n return res.status(500).send(\"Error revalidating\");\n }\n}\n"
},
{
"path": "pages/api/stats/artists.ts",
"content": "import { NextApiRequest, NextApiResponse } from \"next\";\nimport { topArtists } from \"../../../lib/spotify\";\n\nexport default async function handler(\n _req: NextApiRequest,\n res: NextApiResponse\n) {\n const items = await topArtists();\n\n const artists = items.map((artist) => ({\n id: artist.id,\n name: artist.name,\n url: artist.external_urls.spotify,\n popularity: artist.popularity,\n coverImage: artist.images ? artist.images[1] : null,\n }));\n\n res.setHeader(\n \"Cache-Control\",\n \"public, s-maxage=86400, stale-while-revalidate=43200\"\n );\n\n return res.status(200).json(artists);\n}\n"
},
{
"path": "pages/api/stats/devto.ts",
"content": "import { NextRequest, NextResponse } from \"next/server\";\n\nimport { getUserDataValue } from \"@lib/supabase\";\n\nexport const config = {\n runtime: \"edge\", // this is a pre-requisite\n};\n\nexport default async function handler(_req: NextRequest) {\n const { data } = await getUserDataValue(\"devto_stats\");\n\n return NextResponse.json(JSON.parse(data), {\n headers: {\n \"Cache-Control\": \"public, s-maxage=86400, stale-while-revalidate=43200\",\n },\n status: 200,\n });\n}\n\n/* \nResponse of this API request is: \n{\"followers\":18034,\"likes\":13603,\"views\":754641,\"comments\":958,\"posts\":119}\n*/\n"
},
{
"path": "pages/api/stats/github-contribution.ts",
"content": "import { NextApiRequest, NextApiResponse } from \"next\";\nimport { getGithubContribution } from \"../../../lib/github\";\n\nexport default async function handler(\n _req: NextApiRequest,\n res: NextApiResponse\n) {\n const data = await getGithubContribution();\n\n res.setHeader(\n \"Cache-Control\",\n \"public, s-maxage=86400, stale-while-revalidate=43200\"\n );\n\n return res.status(200).json(data);\n}\n"
},
{
"path": "pages/api/stats/github.ts",
"content": "import { NextApiRequest, NextApiResponse } from \"next\";\nimport { fetchGithub, getGithubStarsAndForks } from \"../../../lib/github\";\n\nexport default async function handler(\n _req: NextApiRequest,\n res: NextApiResponse\n) {\n const {\n public_repos: repos,\n public_gists: gists,\n followers,\n } = await fetchGithub();\n const { githubStars, forks } = await getGithubStarsAndForks();\n\n res.setHeader(\n \"Cache-Control\",\n \"public, s-maxage=86400, stale-while-revalidate=43200\"\n );\n\n return res.status(200).json({\n repos,\n gists,\n followers,\n githubStars,\n forks,\n });\n}\n"
},
{
"path": "pages/api/stats/monkeytype.ts",
"content": "import { NextApiRequest, NextApiResponse } from \"next\";\n\nconst BASE_URL = \"https://api.monkeytype.com\";\n\nasync function monkeyFetch(endpoint: string) {\n const res = await fetch(`${BASE_URL}${endpoint}`, {\n headers: {\n Authorization: `ApeKey ${process.env.MONKEYTYPE_APE_KEY}`,\n Accept: \"application/json\",\n },\n });\n if (!res.ok) return null;\n const json = await res.json();\n return json.data;\n}\n\nexport default async function handler(\n _req: NextApiRequest,\n res: NextApiResponse,\n) {\n try {\n const [pb15, pb30, pb60, stats, streak, results, rankData] =\n await Promise.all([\n monkeyFetch(\"/users/personalBests?mode=time&mode2=15\"),\n monkeyFetch(\"/users/personalBests?mode=time&mode2=30\"),\n monkeyFetch(\"/users/personalBests?mode=time&mode2=60\"),\n monkeyFetch(\"/users/stats\"),\n monkeyFetch(\"/users/streak\"),\n monkeyFetch(\"/results?limit=50\"),\n monkeyFetch(\"/leaderboards/rank?language=english&mode=time&mode2=60\"),\n ]);\n\n // personal bests come as arrays – pick the top entry (highest wpm)\n const best = (arr: any[] | null) => {\n if (!arr || arr.length === 0) return null;\n return arr.reduce((a: any, b: any) => (a.wpm > b.wpm ? a : b));\n };\n\n const personalBests = {\n time15: best(pb15),\n time30: best(pb30),\n time60: best(pb60),\n };\n\n // Process recent results\n const recentResults: any[] = Array.isArray(results) ? results : [];\n\n // WPM trend: last 30 results in chronological order\n const trendResults = recentResults\n .slice(0, 30)\n .reverse()\n .map((r: any, i: number) => ({\n index: i + 1,\n wpm: Math.round(r.wpm),\n raw: Math.round(r.rawWpm ?? r.wpm),\n acc: Math.round(r.acc * 100) / 100,\n mode: r.mode2 ? `${r.mode} ${r.mode2}s` : r.mode,\n timestamp: r.timestamp,\n }));\n\n const leaderboardRank: number | null = rankData?.rank ?? null;\n\n res.setHeader(\n \"Cache-Control\",\n \"public, s-maxage=86400, stale-while-revalidate=43200\",\n );\n\n return res.status(200).json({\n personalBests,\n stats: stats ?? { completedTests: 0, startedTests: 0, timeTyping: 0 },\n streak: streak ?? { length: 0, maxLength: 0 },\n trendResults,\n leaderboardRank,\n });\n } catch (error) {\n console.error(\"MonkeyType API error:\", error);\n return res.status(500).json({ error: \"Failed to fetch MonkeyType data\" });\n }\n}\n"
},
{
"path": "pages/api/stats/tracks.ts",
"content": "import { NextApiRequest, NextApiResponse } from \"next\";\nimport { topTracks } from \"../../../lib/spotify\";\n\nexport default async function handler(\n _req: NextApiRequest,\n res: NextApiResponse\n) {\n const items = await topTracks();\n\n const tracks = items.map((track) => ({\n title: track.name,\n artist: track.artists.map((artist: any) => artist.name).join(\", \"),\n url: track.external_urls.spotify,\n coverImage: track.album.images[1],\n }));\n\n res.setHeader(\n \"Cache-Control\",\n \"public, s-maxage=86400, stale-while-revalidate=43200\"\n );\n\n return res.status(200).json(tracks);\n}\n"
},
{
"path": "pages/api/validate/email.ts",
"content": "import { IEmailValidation } from \"@lib/interface\";\nimport { NextApiRequest, NextApiResponse } from \"next\";\n\n// Function to check if the host is valid\nconst isValidHost = (host: string) => {\n if (process.env.NODE_ENV === \"production\")\n return host.toLowerCase() === \"j471n.in\";\n return true;\n};\n\nexport default async function handler(\n req: NextApiRequest,\n res: NextApiResponse,\n) {\n const origin = req.headers.origin;\n const host = req.headers.host;\n\n console.log({\n origin,\n host,\n });\n\n if (!isValidHost(host!)) {\n return res.status(400).json({\n status: \"error\",\n message: \"You are unauthorize to access this route.\",\n });\n }\n\n if (req.method !== \"POST\") {\n return res.status(400).json({\n status: \"error\",\n message: \"Invalid Method, use POST\",\n });\n }\n\n const { email } = JSON.parse(req.body);\n\n const url = \"https://mailcheck.p.rapidapi.com/?domain=\" + email;\n const options = {\n method: \"GET\",\n headers: {\n \"X-RapidAPI-Key\": process.env.EMAIL_VALIDATION_API!,\n \"X-RapidAPI-Host\": \"mailcheck.p.rapidapi.com\",\n },\n };\n\n const response = await fetch(url, options);\n\n if (response.status !== 200) {\n return res.status(400).json({\n status: \"error\",\n message:\n \"Unable to process your request right now. Please try again later.\",\n });\n }\n\n const { valid, disposable } = (await response.json()) as IEmailValidation;\n\n return res.status(200).json({\n status: \"success\",\n message: \"Email is deliverable.\",\n valid: valid && !disposable,\n });\n}\n"
},
{
"path": "pages/api/views/[slug].ts",
"content": "import { addView, getViewBySlug } from \"@lib/supabase\";\nimport { NextApiRequest, NextApiResponse } from \"next\";\n\n/* Extending API request because by default quey.slug return string | string[] and I only want string */\ninterface ExtendedNextApiRequest extends NextApiRequest {\n query: {\n slug: string;\n };\n}\n\n/**\n * This function handles HTTP requests made to a specific route. It takes in a \"slug\" parameter from the request query.\n *\n * If the request method is GET, it calls the getViewBySlug(slug) function, which retrieves the view count of the specified blog post by its slug value.\n * If the view count is not found, it sends a response with a status code of 404 and a JSON object with a message of \"Slug not found\"\n * If the view count is found, it sends a response with a status code of 200 and the data in JSON format.\n *\n * If the request method is POST and the app is running in production environment, it calls the addView(slug) function,\n * which adds a view to the specified blog post. It sends a response with the status code and data returned from the addView function.\n *\n * If the request method is POST and the app is running in development environment, it sends a response with a status code of 401 and a JSON object with a message of \"In Development, Can't add views\"\n */\n\nexport default async function viewsSlug(\n req: ExtendedNextApiRequest,\n res: NextApiResponse\n) {\n const slug = req.query.slug;\n if (req.method === \"GET\") {\n const data = await getViewBySlug(slug);\n if (data === undefined) {\n return res\n .status(404)\n .json({\n message:\n \"Sorry, the slug you're looking for has gone for a coffee break. Please try again later or make a cup of tea while you wait.\",\n });\n } else {\n return res.status(200).json(data);\n }\n }\n // check if the app in the production and req method is post only then add the view to the database\n if (req.method === \"POST\" && process.env.NODE_ENV === \"production\") {\n const supabaseResponse = await addView(slug);\n res.status(supabaseResponse?.status!).json(supabaseResponse);\n } else {\n return res.status(401).json({\n message: \"In Development, Can't add views\",\n });\n }\n}\n"
},
{
"path": "pages/api/views/index.ts",
"content": "import { NextRequest, NextResponse } from \"next/server\";\n\nimport { getAllViews } from \"@lib/supabase\";\n\nexport const config = {\n runtime: \"edge\", // this is a pre-requisite\n};\n\n/**\n * This function handles HTTP requests made to a specific route.\n * If the request method is GET, it calls the getAllViews() function, which retrieves all views count and all blog post from the database\n * and sends the result as a JSON object in the response with a status code of 200.\n * If the request method is not GET, it sends a response with a status code of 405 and a JSON object with a message of \"Invalid method use GET\"\n */\nexport default async function views(req: NextRequest) {\n if (req.method === \"GET\") {\n return NextResponse.json(await getAllViews(), {\n status: 200,\n });\n } else {\n return NextResponse.json(\n {\n error:\n \"Invalid method detected! Please switch to GET before proceeding. Trust me, it's the way to go\",\n },\n {\n status: 405,\n }\n );\n }\n}\n"
},
{
"path": "pages/blogs/[slug].tsx",
"content": "import { getAllSlugs, getPostFromSlug } from \"@lib/sanityContent\";\n\nimport BlogLayout from \"@layout/BlogLayout\";\nimport { BlogPost } from \"@lib/interface/sanity\";\nimport { GetStaticPropsContext } from \"next\";\nimport MDXComponents from \"@components/MDXComponents\";\nimport { MDXRemote } from \"next-mdx-remote\";\nimport Metadata from \"@components/MetaData\";\nimport PageNotFound from \"@components/PageNotFound\";\nimport { useEffect } from \"react\";\nimport { TIME_IN_SECONDS } from \"@utils/utils\";\n\nexport default function Post({\n post,\n error,\n}: {\n post: BlogPost;\n error: boolean;\n}) {\n // Adding Views to the supabase database\n useEffect(() => {\n const registerView = () =>\n fetch(`/api/views/${post.slug.current}`, {\n method: \"POST\",\n });\n\n post != null && registerView();\n }, [post]);\n\n if (error) return \n {/* Section header */}\n \n {movies.length !== 0 ? (\n movies.map((movie) =>
\n \n \n \n \n Watching\n \n \n \n Movies & TV Series\n \n \n
\n\n {/* Horizontal scroll strip */}\n \n
\n )}\n \n \n No recent activity.\n
\n\n No bookmarks yet\n
\n )}\n \n \n );\n}\n"
},
{
"path": "pages/blogs/index.tsx",
"content": "import { AnimatePresence, motion } from \"framer-motion\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { BiRss } from \"react-icons/bi\";\nimport Blog from \"@components/Blog\";\nimport { BlogPost } from \"@lib/interface/sanity\";\nimport { CgSearch } from \"react-icons/cg\";\nimport Link from \"next/link\";\nimport Metadata from \"@components/MetaData\";\nimport PageHeader from \"@components/PageHeader\";\nimport { debounce } from \"@utils/functions\";\nimport { getAllPostsMeta } from \"@lib/sanityContent\";\nimport pageMeta from \"@content/meta\";\nimport { TIME_IN_SECONDS } from \"@utils/utils\";\n\nconst containerVariants = {\n hidden: {},\n visible: { transition: { staggerChildren: 0.04 } },\n};\n\nexport default function Blogs({ blogs }: { blogs: BlogPost[] }) {\n const [filteredBlogs, setFilteredBlogs] = useState([...blogs]);\n const [query, setQuery] = useState(\"\");\n const searchRef = useRef\n handleSearch(e.target.value)}\n placeholder=\"Search articles… (Ctrl + /)\"\n className=\"w-full pl-9 pr-4 py-2.5 text-sm bg-white dark:bg-darkSecondary border border-gray-200 dark:border-neutral-700 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-600 outline-none focus:border-gray-400 dark:focus:border-gray-600 transition-colors font-mono\"\n />\n
\n\n {/* Results header */}\n \n \n {query\n ? `${filteredBlogs.length} result${filteredBlogs.length !== 1 ? \"s\" : \"\"} for \"${query}\"`\n : `${blogs.length} articles`}\n \n \n
\n\n {/* Blog list */}\n \n {/* Eyebrow */}\n \n \n \n Reading Stats\n \n \n\n {/* Stat cards */}\n \n {stats.map((s) => (\n \n \n
\n );\n}\n\nconst STATUS_LABEL: Record\n {s.label}\n
\n\n {s.value}\n
\n \n ))}\n \n\n {/* Reading goal */}\n {goal && (\n\n \n {goalPct}%\n \n
\n\n {/* Progress bar */}\n \n
\n \n {goal.year} Reading Goal\n
\n\n {goal.progress}{\" \"}\n \n / {goal.target} books\n \n
\n\n
\n \n )}\n \n \n \n Bookshelf\n \n
\n\n {/* Search */}\n \n handleSearch(e.target.value)}\n placeholder=\"Search books by title or author…\"\n className=\"w-full pl-9 pr-4 py-2.5 text-sm bg-white dark:bg-darkSecondary border border-gray-200 dark:border-neutral-700 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-neutral-600 outline-none focus:border-gray-400 dark:focus:border-neutral-600 transition-colors font-mono\"\n />\n
\n\n {/* Tab bar — hidden while searching */}\n {!isSearching && (\n \n {TABS.map((tab) => {\n const isActive = activeTab === tab.id;\n const count = countFor(tab.id);\n return (\n setActiveTab(tab.id)}\n className={`relative px-4 py-2.5 text-sm font-medium transition-colors ${\n isActive\n ? \"text-gray-900 dark:text-white\"\n : \"text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200\"\n }`}\n >\n {tab.label}\n \n {count}\n \n {isActive && (\n
\n )}\n\n {/* Books grid — search results or tabbed view */}\n {isSearching ? (\n <>\n \n {searchResults.length} result\n {searchResults.length !== 1 ? \"s\" : \"\"} for “{query}”\n
\n {searchResults.length === 0 ? (\n\n No books found.\n
\n ) : (\n\n Nothing here yet.\n
\n ) : (\n\n
\n\n {/* Title + meta */}\n \n \n {cer.title}\n \n
\n\n {/* Issued date */}\n \n {getFormattedDate(new Date(cer.issuedDate))}\n \n \n ))}\n \n \n \n );\n}\n\nexport async function getStaticProps() {\n const { certificates, error } = await getCertificates();\n return {\n props: {\n certificates,\n error,\n },\n revalidate: TIME_IN_SECONDS.ONE_DAY, // Revalidate every 24 hours\n };\n}\n"
},
{
"path": "pages/epigraphs.tsx",
"content": "import { useState, useMemo } from \"react\";\nimport { useDebounce } from \"@hooks/useDebounce\";\nimport { IEpigraph, EpigraphSourceType } from \"@lib/interface/sanity\";\nimport Metadata from \"@components/MetaData\";\nimport PageHeader from \"@components/PageHeader\";\nimport EpigraphCard from \"@components/EpigraphCard\";\nimport { getAllEpigraphs } from \"@lib/sanityContent\";\nimport pageMeta from \"@content/meta\";\nimport { motion } from \"framer-motion\";\nimport { TIME_IN_SECONDS } from \"@utils/utils\";\n\nconst SOURCE_TYPE_LABELS: Record\n {cer.orgName}\n
\n\n {/* Search */}\n
\n\n {/* Result count */}\n {(debouncedSearch || activeType !== \"all\") && (\n \n setSearch(e.target.value)}\n className=\"w-full bg-white dark:bg-darkSecondary border border-gray-200 dark:border-neutral-700 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-600 px-4 py-2 focus:outline-none focus:border-gray-400 dark:focus:border-gray-500 transition-colors\"\n />\n
\n\n {/* Source type filter pills */}\n \n {availableTypes.map((type) => (\n setActiveType(type)}\n className={`font-mono text-[10px] tracking-[0.3em] uppercase px-3 py-1.5 border transition-colors ${\n activeType === type\n ? \"bg-gray-900 dark:bg-white text-white dark:text-gray-900 border-gray-900 dark:border-white\"\n : \"bg-transparent text-gray-500 dark:text-gray-500 border-gray-200 dark:border-neutral-700 hover:border-gray-400 dark:hover:border-gray-500\"\n }`}\n >\n {SOURCE_TYPE_LABELS[type]}\n \n ))}\n
\n \n \n “\n \n {\n setSearch(\"\");\n setActiveType(\"all\");\n }}\n className=\"mt-4 font-mono text-[10px] tracking-widest uppercase text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors\"\n >\n Clear filters\n \n
\n )}\n \n \n );\n}\n\nexport async function getStaticProps() {\n const epigraphs = await getAllEpigraphs();\n\n return {\n props: { epigraphs },\n revalidate: TIME_IN_SECONDS.ONE_DAY, // revalidate every 5 minutes\n };\n}\n"
},
{
"path": "pages/index.tsx",
"content": "// Page Components START----------\n\nimport { headingFromLeft } from \"@content/FramerMotionVariants\";\n\nimport AnimatedHeading from \"@components/FramerMotion/AnimatedHeading\";\nimport { BlogPost } from \"@lib/interface/sanity\";\nimport { IEpigraph } from \"@lib/interface/sanity\";\nimport BlogsSection from \"@components/Home/BlogsSection\";\nimport EpigraphsSection from \"@components/Home/EpigraphsSection\";\nimport Contact from \"@components/Contact\";\nimport HeroSection from \"@components/Home/HeroSection\";\nimport Metadata from \"@components/MetaData\";\nimport React from \"react\";\nimport SkillSection from \"@components/Home/SkillSection\";\nimport generateSitemap from \"@lib/sitemap\";\nimport {\n getAllPostsMeta,\n getPostCount,\n getAllEpigraphs,\n getEpigraphCount,\n} from \"@lib/sanityContent\";\nimport getRSS from \"@lib/generateRSS\";\nimport pageMeta from \"@content/meta\";\nimport { TIME_IN_SECONDS } from \"@utils/utils\";\n\nexport default function Home({\n blogs,\n totalBlogs,\n epigraphs,\n totalEpigraphs,\n}: {\n blogs: BlogPost[];\n totalBlogs: number;\n epigraphs: IEpigraph[];\n totalEpigraphs: number;\n}) {\n return (\n <>\n \n No epigraphs match your filters.\n
\n\n
\n \n );\n}\n\nexport function HomeHeading({ title }: { title: React.ReactNode | string }) {\n return (\n \n
\n \n
\n \n \n \n \n {eyebrow}\n \n \n \n {title}\n \n {description && (\n \n {description}\n \n )}\n
\n );\n}\n\nexport default function Stats() {\n const { isDarkMode } = useDarkMode();\n\n // const { data: topTracks } = useSWR(\"/api/stats/tracks\", fetcher);\n // const { data: artists } = useSWR(\"/api/stats/artists\", fetcher);\n const { data: devto } = useSWR(\"/api/stats/devto\", fetcher);\n const { data: github } = useSWR(\"/api/stats/github\", fetcher);\n\n const devtoStats: Stats[] = [\n { title: \"Total Posts\", value: devto?.posts.toLocaleString() },\n { title: \"Followers\", value: devto?.followers.toLocaleString() },\n { title: \"Reactions\", value: devto?.likes.toLocaleString() },\n { title: \"Views\", value: devto?.views.toLocaleString() },\n { title: \"Comments\", value: devto?.comments.toLocaleString() },\n ];\n\n const githubStats: Stats[] = [\n { title: \"Repos\", value: github?.repos },\n { title: \"Gists\", value: github?.gists },\n { title: \"Followers\", value: github?.followers },\n { title: \"Stars\", value: github?.githubStars },\n { title: \"Forked\", value: github?.forks },\n ];\n\n return (\n <>\n \n \n {devtoStats.map((stat, index) => (\n
\n\n {/* ═══════════════════════════════════════════ */}\n {/* GitHub Section */}\n {/* ═══════════════════════════════════════════ */}\n \n \n {githubStats.map((stat, index) => (\n
\n\n {/* ═══════════════════════════════════════════ */}\n {/* MonkeyType Section */}\n {/* ═══════════════════════════════════════════ */}\n \n
\n\n {/* GitHub charts — 2 col grid */}\n \n
\n \n \n {topTracks ? (\n <>\n \n {topTracks?.[0]?.title}\n \n {\" is my most streamed track in the last 4 weeks.\"}\n \n ) : (\n \"My top tracks on Spotify, updated daily.\"\n )}\n \n }\n />\n
*/}\n\n {/* ── Top Artists ── */}\n {/* \n {topTracks ? (\n topTracks.map((track: SpotifyTrack, index: number) => (\n
\n \n \n {artists ? (\n <>\n {\"My most listened artist is \"}\n \n {artists?.[0]?.name}\n \n {\" in the last 4 weeks.\"}\n \n ) : (\n \"My most listened artists on Spotify in the last 4 weeks.\"\n )}\n \n }\n />\n
*/}\n \n \n );\n}\n\n// function LoadingSongs() {\n// return (\n// <>\n// {Array.from({ length: 10 }, (_, i) => (\n// \n {artists ? (\n artists.length === 0 ? (\n
\n \n Not enough data to show.\n
\n ) : (\n artists.map((artist: SpotifyArtist, index: number) => (\n\n// \n// \n//
\n// \n// ))}\n// \n// );\n// }\n\n// function LoadingArtists() {\n// return (\n// <>\n// {Array.from({ length: 5 }, (_, i) => (\n// \n// \n// \n//
\n// \n// ))}\n// \n// );\n// }\n"
},
{
"path": "pages/tet.json",
"content": "{\n \"public_identifier\": \"j471n\",\n \"profile_pic_url\": \"https://i.imgur.com/RF2bEls.jpg\",\n \"background_cover_image_url\": null,\n \"first_name\": \"Jatin\",\n \"last_name\": \"Sharma\",\n \"full_name\": \"Jatin Sharma\",\n \"follower_count\": 843,\n \"occupation\": \"Trusted Member at Forem\",\n \"headline\": \"React Developer | Next.js | Blogger @DEV Community\",\n \"summary\": \"A front-end developer who specializes in React.js and Next.js. I have experience building and maintaining web applications. I build web applications using React, Next.js and TailwindCSS. I am always looking for new challenges and ways to work more efficiently. I am also familiar with Python & C++.\\n\\nThe one things I like the most is blogging. I post blogs on dev.to and share my experience and skills with others. \\n\\nWhen I am not working, you can find me exploring the frictional world through movies and web series.\",\n \"country\": \"IN\",\n \"country_full_name\": \"India\",\n \"city\": \"Bareilly\",\n \"state\": \"Uttar Pradesh\",\n \"experiences\": [\n {\n \"company\": \"Forem\",\n \"company_linkedin_profile_url\": \"https://www.linkedin.com/company/thepracticaldev/\",\n \"logo_url\": \"https://i.imgur.com/ONNBTJH.jpg\",\n \"job_titles\": [\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 10,\n \"year\": 2021\n },\n \"ends_at\": null,\n \"title\": \"Blogger @DEV Community\",\n \"description\": \"I research and study a subject, and then I compose an article about it. I introduce new and different topics and provide an in-depth explanation that is accessible to those who have no prior technical understanding of the subject matter. I ensure that the information is presented in a clear and in very simple language, making it accessible to readers of all skill levels even for those who may not have a strong command of the English language.\\n\\n\\u2605 7.5K+ Followers\\n\\u2605 520K+ Post Views\\n\\u2605 Top 7 Author\\n\\u2605 100+ Posts\\n\\u2605 12K+ Reactions\",\n \"location\": \"India\"\n },\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 5,\n \"year\": 2023\n },\n \"location\": \"Remote\",\n \"ends_at\": null,\n \"title\": \"Trusted Member\",\n \"description\": \"As a Trusted Member, I have been granted basic moderation abilities to help \\ud835\\uddd7\\ud835\\uddf2\\ud835\\ude03 \\ud835\\uddd6\\ud835\\uddfc\\ud835\\uddfa\\ud835\\uddfa\\ud835\\ude02\\ud835\\uddfb\\ud835\\uddf6\\ud835\\ude01\\ud835\\ude06 by moderate discussions and ensure positive interactions among community members. This includes assisting with reporting problematic content and potentially harmful behavior. Being designated as a Trusted Member is an honor and a great responsibility, and it reinforces the importance of maintaining a respectful and inclusive community.\"\n },\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 9,\n \"year\": 2022\n },\n \"ends_at\": {\n \"day\": 1,\n \"month\": 9,\n \"year\": 2022\n },\n \"title\": \"Featured in Top 7 authors of the week\",\n \"description\": \"I have been featured in Top 7 authors of the week twice.\",\n \"location\": null\n }\n ]\n },\n {\n \"company\": \"KonnectNXT\",\n \"company_linkedin_profile_url\": \"https://www.linkedin.com/company/konnectnxt/\",\n \"logo_url\": \"https://i.imgur.com/TaEWZcc.jpg\",\n \"job_titles\": [\n {\n \"title\": \"Software Developer\",\n \"description\": null,\n \"location\": \"Hyderabad, Telangana, India\",\n \"starts_at\": {\n \"day\": 1,\n \"month\": 2,\n \"year\": 2023\n },\n \"ends_at\": null\n }\n ]\n },\n {\n \"company\": \"Documatic\",\n \"company_linkedin_profile_url\": \"https://www.linkedin.com/company/trydocumatic/\",\n \"logo_url\": \"https://i.imgur.com/4ogaHWS.jpg\",\n \"job_titles\": [\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 2,\n \"year\": 2023\n },\n \"ends_at\": null,\n \"title\": \"Technical Writer\",\n \"description\": null,\n \"location\": \"United Kingdom\"\n }\n ]\n },\n {\n \"company\": \"Substack\",\n \"company_linkedin_profile_url\": \"https://www.linkedin.com/company/substack/\",\n \"logo_url\": \"https://i.imgur.com/HgVfweU.jpg\",\n \"job_titles\": [\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 5,\n \"year\": 2022\n },\n \"ends_at\": null,\n \"title\": \"Writer\",\n \"description\": \"As a writer, my focus is primarily on the topics of web development and productivity chrome extensions. Through my writing, I aim to provide detailed and comprehensive coverage of the latest developments and trends in the field of web development, as well as share tips and tricks for using productivity chrome extensions to increase efficiency and productivity. I also ensure that they never miss any of my blog article. If they do then this is the reminder for them.\",\n \"location\": \"India\"\n }\n ]\n },\n {\n \"company\": \"Hashnode\",\n \"company_linkedin_profile_url\": \"https://www.linkedin.com/company/hashnode/\",\n \"logo_url\": \"https://i.imgur.com/vwegEfc.jpg\",\n \"job_titles\": [\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 11,\n \"year\": 2021\n },\n \"ends_at\": null,\n \"title\": \"Blogger\",\n \"description\": \"I am keeping a record of my programming journey to monitor my growth and evaluate the difficulties and successes I encounter.\",\n \"location\": \"India\"\n }\n ]\n },\n {\n \"company\": \"Medium\",\n \"company_linkedin_profile_url\": \"https://www.linkedin.com/company/medium-com/\",\n \"logo_url\": \"https://i.imgur.com/hT7ajHV.jpg\",\n \"job_titles\": [\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 10,\n \"year\": 2020\n },\n \"ends_at\": null,\n \"title\": \"Blogger\",\n \"description\": \"I am an author who focuses on web development and offers a wide variety of beginner-friendly tutorials. Through my writings, I aim to pass on my knowledge and experience to others who share my interest in all aspects of programming.\",\n \"location\": \"India\"\n }\n ]\n }\n ],\n \"education\": [\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 1,\n \"year\": 2019\n },\n \"ends_at\": {\n \"day\": 1,\n \"month\": 1,\n \"year\": 2023\n },\n \"field_of_study\": \"Computer Science\",\n \"degree_name\": \"Bachelor of Technology - B.Tech\",\n \"school\": \"Dr. A.P.J. Abdul Kalam Technical University\",\n \"school_linkedin_profile_url\": null,\n \"description\": null,\n \"logo_url\": \"https://i.imgur.com/faTfpD7.jpg\",\n \"grade\": null,\n \"activities_and_societies\": null\n }\n ],\n \"languages\": [\n \"English\",\n \"Hindi\"\n ],\n \"accomplishment_organisations\": [],\n \"accomplishment_publications\": [],\n \"accomplishment_honors_awards\": [],\n \"accomplishment_patents\": [],\n \"accomplishment_courses\": [],\n \"accomplishment_projects\": [],\n \"accomplishment_test_scores\": [],\n \"volunteer_work\": [\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 1,\n \"year\": 2023\n },\n \"ends_at\": null,\n \"title\": \"Member\",\n \"cause\": \"EDUCATION\",\n \"company\": \"Google Developer Student Clubs\",\n \"company_linkedin_profile_url\": \"https://www.linkedin.com/company/dscjscoe/\",\n \"description\": null,\n \"logo_url\": \"https://media.licdn.com/dms/image/C4E0BAQE_1tNZKj3sNQ/company-logo_400_400/0/1617607397103?e=1695254400&v=beta&t=mRveYFhesakeGFzPNIgcgszUrPZ_oo_f-Sl4Kh8VcE0\"\n },\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 12,\n \"year\": 2022\n },\n \"ends_at\": null,\n \"title\": \"Say Yes to Life, No to Drugs\",\n \"cause\": \"HEALTH\",\n \"company\": \"Ministry Of Home Affairs (mha), GOI\",\n \"company_linkedin_profile_url\": \"https://www.linkedin.com/company/ministry-of-home-affairs-mha-/\",\n \"description\": \"\\ud835\\uddd6\\ud835\\uddf2\\ud835\\uddff\\ud835\\ude01\\ud835\\uddf6\\ud835\\uddf3\\ud835\\uddf6\\ud835\\uddf0\\ud835\\uddee\\ud835\\ude01\\ud835\\uddf6\\ud835\\uddfc\\ud835\\uddfb: https://bit.ly/PledgeJatin\",\n \"logo_url\": \"https://media.licdn.com/dms/image/C4D0BAQE7EcnynUNfOg/company-logo_400_400/0/1659293307400?e=1695254400&v=beta&t=Amf-ZxlrbOJLRO76l0YbenhVzusXhgd6FU0fb-no0FQ\"\n },\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 10,\n \"year\": 2021\n },\n \"ends_at\": null,\n \"title\": \"Member\",\n \"cause\": \"EDUCATION\",\n \"company\": \"daily.dev\",\n \"company_linkedin_profile_url\": \"https://www.linkedin.com/company/dailydotdev/\",\n \"description\": null,\n \"logo_url\": \"https://media.licdn.com/dms/image/C4E0BAQHPne7VGe_P3A/company-logo_400_400/0/1603704711534?e=1695254400&v=beta&t=e5Gp0lxkjTugd0WkELbkdJmW9VtluwrsnuFZ0EX15Ts\"\n }\n ],\n \"certifications\": [\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 1,\n \"year\": 2023\n },\n \"ends_at\": null,\n \"name\": \"API Fundamentals Student Expert\",\n \"license_number\": \"63c1c78cdf42054887f80410\",\n \"display_source\": \"badgr.io\",\n \"authority\": \"Postman\",\n \"url\": \"https://api.badgr.io/public/assertions/ORpisSFbRQWJvkAKJEr8vA\"\n },\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 1,\n \"year\": 2023\n },\n \"ends_at\": null,\n \"name\": \"Back End Development and APIs\",\n \"license_number\": null,\n \"display_source\": \"freecodecamp.org\",\n \"authority\": \"freeCodeCamp\",\n \"url\": \"https://freecodecamp.org/certification/j471n/back-end-development-and-apis\"\n },\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 1,\n \"year\": 2023\n },\n \"ends_at\": null,\n \"name\": \"Digital Skills: Artificial Intelligence\",\n \"license_number\": null,\n \"display_source\": \"futurelearn.com\",\n \"authority\": \"Accenture\",\n \"url\": \"https://www.futurelearn.com/certificates/07o1i90\"\n },\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 8,\n \"year\": 2022\n },\n \"ends_at\": null,\n \"name\": \"Developer & Technology Accenture Developer Program\",\n \"license_number\": \"GXL4zXeSS3kzy7TQR\",\n \"display_source\": \"google.com\",\n \"authority\": \"Accenture\",\n \"url\": \"https://drive.google.com/file/d/1RvReVd4YmRpT2LsnHIX5MWIqxlFTj4bl/view?usp=share_link\"\n },\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 4,\n \"year\": 2022\n },\n \"ends_at\": null,\n \"name\": \"JavaScript (Intermediate)\",\n \"license_number\": \"fde0087a00a7\",\n \"display_source\": \"hackerrank.com\",\n \"authority\": \"HackerRank\",\n \"url\": \"https://www.hackerrank.com/certificates/fde0087a00a7\"\n },\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 12,\n \"year\": 2021\n },\n \"ends_at\": null,\n \"name\": \"JavaScript Algorithms and Data Structures\",\n \"license_number\": null,\n \"display_source\": \"freecodecamp.org\",\n \"authority\": \"freeCodeCamp\",\n \"url\": \"https://freecodecamp.org/certification/j471n/javascript-algorithms-and-data-structures\"\n },\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 4,\n \"year\": 2021\n },\n \"ends_at\": null,\n \"name\": \"Python 3 Master Course for 2021\",\n \"license_number\": \"UC-44d68c58-0203-4835-813a-50b893e01630\",\n \"display_source\": \"udemy.com\",\n \"authority\": \"Udemy\",\n \"url\": \"https://www.udemy.com/certificate/UC-44d68c58-0203-4835-813a-50b893e01630/\"\n },\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 4,\n \"year\": 2021\n },\n \"ends_at\": null,\n \"name\": \"Scientific Computing with Python\",\n \"license_number\": null,\n \"display_source\": \"freecodecamp.org\",\n \"authority\": \"freeCodeCamp\",\n \"url\": \"https://freecodecamp.org/certification/j471n/scientific-computing-with-python-v7\"\n },\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 12,\n \"year\": 2020\n },\n \"ends_at\": null,\n \"name\": \"JavaScript (Basic)\",\n \"license_number\": \"18FF8A46B713\",\n \"display_source\": \"hackerrank.com\",\n \"authority\": \"HackerRank\",\n \"url\": \"https://www.hackerrank.com/certificates/18ff8a46b713\"\n },\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 11,\n \"year\": 2020\n },\n \"ends_at\": null,\n \"name\": \"AWSOME DAY Online Conference\",\n \"license_number\": null,\n \"display_source\": \"google.com\",\n \"authority\": \"Amazon Web Services (AWS)\",\n \"url\": \"https://drive.google.com/file/d/1ApnzbHVMQbLVDZfjZP5u05xjHDw4NDZA/view?usp=shari\"\n },\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 11,\n \"year\": 2020\n },\n \"ends_at\": null,\n \"name\": \"Microsoft Al Classroom Series\",\n \"license_number\": null,\n \"display_source\": \"google.com\",\n \"authority\": \"Microsoft\",\n \"url\": \"https://drive.google.com/file/d/1A8-2thKHG4xenkJzu5Uia6kVPnE0HiAa/view?usp=drivesdk\"\n },\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 10,\n \"year\": 2020\n },\n \"ends_at\": null,\n \"name\": \"Become a Software Developer - Learning Path\",\n \"license_number\": \"AbxzbR6VbLGjkllLsxi8knM-Ypaq\",\n \"display_source\": \"google.com\",\n \"authority\": \"LinkedIn\",\n \"url\": \"https://drive.google.com/file/d/1MXTze2mXB7b8Kod7Pk6Q1BTNb1l0OYn3/view?usp=drivesdk\"\n },\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 10,\n \"year\": 2020\n },\n \"ends_at\": null,\n \"name\": \"Learn React Course\",\n \"license_number\": null,\n \"display_source\": \"google.com\",\n \"authority\": \"Codecademy\",\n \"url\": \"https://drive.google.com/file/d/1TAxq-5pQLUxyW1W9V4ovK53JQL7wtQFf/view?usp=share_link\"\n },\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 10,\n \"year\": 2020\n },\n \"ends_at\": null,\n \"name\": \"Web Development\",\n \"license_number\": null,\n \"display_source\": \"google.com\",\n \"authority\": \"Mimo\",\n \"url\": \"https://drive.google.com/file/d/1HziWP3mLgDozfzXjXcs-qLvTzajU1x4j/view?usp=drivesdk\"\n },\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 9,\n \"year\": 2020\n },\n \"ends_at\": null,\n \"name\": \"Learn Python 3 Course\",\n \"license_number\": null,\n \"display_source\": \"google.com\",\n \"authority\": \"Codecademy\",\n \"url\": \"https://drive.google.com/file/d/1H2znARDQD91Mt8IAC3RPIuuv9oMGkAyB/view?usp=share_link\"\n },\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 9,\n \"year\": 2020\n },\n \"ends_at\": null,\n \"name\": \"Learn SQL Course\",\n \"license_number\": null,\n \"display_source\": \"google.com\",\n \"authority\": \"Codecademy\",\n \"url\": \"https://drive.google.com/file/d/18Eh2IGzdlOJJCAmqaOABAMzzTM8Q3z7F/view?usp=share_link\"\n },\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 8,\n \"year\": 2020\n },\n \"ends_at\": null,\n \"name\": \"Learning SQL Programming\",\n \"license_number\": \"AUu5AHwuiRCKambPS4TfA2L24X0b\",\n \"display_source\": \"google.com\",\n \"authority\": \"LinkedIn\",\n \"url\": \"https://drive.google.com/file/d/1lRinmNHufEOdJc5nJrzyDyrrTJYTKIC4/view?usp=sharing\"\n },\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 8,\n \"year\": 2020\n },\n \"ends_at\": null,\n \"name\": \"Python (Basic) \",\n \"license_number\": \"830BC394DFCA\",\n \"display_source\": \"hackerrank.com\",\n \"authority\": \"HackerRank\",\n \"url\": \"https://www.hackerrank.com/certificates/830bc394dfca\"\n },\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 7,\n \"year\": 2020\n },\n \"ends_at\": null,\n \"name\": \"Complete Responsive Web Development: 4 courses in 1\\n\",\n \"license_number\": null,\n \"display_source\": \"udemy.com\",\n \"authority\": \"Udemy\",\n \"url\": \"https://www.udemy.com/certificate/UC-8e18f7bf-1da1-4e29-b61c-2e75ed88aa29/\"\n },\n {\n \"starts_at\": {\n \"day\": 1,\n \"month\": 9,\n \"year\": 2019\n },\n \"ends_at\": null,\n \"name\": \"C Programming Made Easy\",\n \"license_number\": null,\n \"display_source\": \"udemy.com\",\n \"authority\": \"Udemy\",\n \"url\": \"https://www.udemy.com/certificate/UC-S7KXIVWQ/\"\n }\n ],\n \"connections\": null,\n \"people_also_viewed\": [\n {\n \"link\": \"https://www.linkedin.com/in/aayushi-rai-2580351a8\",\n \"name\": \"Aayushi Rai\",\n \"summary\": null,\n \"location\": null\n },\n {\n \"link\": \"https://www.linkedin.com/in/iamshadmirza\",\n \"name\": \"Shad Mirza\",\n \"summary\": null,\n \"location\": null\n },\n {\n \"link\": \"https://www.linkedin.com/in/ebenezhar-selvakumar-059559136\",\n \"name\": \"Ebenezhar Selvakumar\",\n \"summary\": null,\n \"location\": null\n },\n {\n \"link\": \"https://www.linkedin.com/in/fazlerocks\",\n \"name\": \"Syed Fazle Rahman\",\n \"summary\": null,\n \"location\": null\n },\n {\n \"link\": \"https://www.linkedin.com/in/radha-dadhich-9284b322a\",\n \"name\": \"Radha Dadhich\",\n \"summary\": null,\n \"location\": null\n },\n {\n \"link\": \"https://www.linkedin.com/in/savitasri\",\n \"name\": \"Savita S.\",\n \"summary\": null,\n \"location\": null\n },\n {\n \"link\": \"https://www.linkedin.com/in/kush-munot\",\n \"name\": \"Kush Munot\",\n \"summary\": null,\n \"location\": null\n },\n {\n \"link\": \"https://www.linkedin.com/in/prasad-karri-005257210\",\n \"name\": \"Prasad Karri\",\n \"summary\": null,\n \"location\": null\n },\n {\n \"link\": \"https://www.linkedin.com/in/vani-m-kokila-53462315\",\n \"name\": \"Vani M Kokila\",\n \"summary\": null,\n \"location\": null\n },\n {\n \"link\": \"https://www.linkedin.com/in/vaibhav-pansambal-66545a57\",\n \"name\": \"Vaibhav Pansambal\",\n \"summary\": null,\n \"location\": null\n }\n ],\n \"recommendations\": [],\n \"activities\": [],\n \"similarly_named_profiles\": [\n {\n \"name\": \"Jatin Sharma\",\n \"link\": \"https://in.linkedin.com/in/jatin-sharma-6aa64445\",\n \"summary\": \"Lead Operation & Process design safety\",\n \"location\": \"Ahmedabad\"\n },\n {\n \"name\": \"jatin sharma\",\n \"link\": \"https://in.linkedin.com/in/jatin-sharma-420318100\",\n \"summary\": \"Technical Lead\",\n \"location\": \"West Delhi\"\n },\n {\n \"name\": \"Jatin Sharma\",\n \"link\": \"https://in.linkedin.com/in/jatin-sharma-a6b59267\",\n \"summary\": \"Application Development Team Lead at Accenture\",\n \"location\": \"Shimla\"\n },\n {\n \"name\": \"Jatin Sharma\",\n \"link\": \"https://in.linkedin.com/in/jatsharma\",\n \"summary\": \"Software Engineer III @ Stackera | Python | Blockchain | DeFi\",\n \"location\": \"Greater Delhi Area\"\n },\n {\n \"name\": \"Jatin Sharma\",\n \"link\": \"https://jp.linkedin.com/in/jatin-sharma-91162090\",\n \"summary\": \"Data Engineer at Rakuten | Azure Certified DP-203 | (Azure Data Engineer | Azure Data Factory | Databricks | Synapse | Informatica | ETL | Python | Data Engineer | Pyspark | Spark | Hive | Tableau ) | ETL developer\",\n \"location\": \"Tokyo, Japan\"\n }\n ],\n \"articles\": [],\n \"groups\": [],\n \"phone_numbers\": [],\n \"social_networking_services\": [],\n \"skills\": [\n \"Django\",\n \"Technical Writing\",\n \"Next.js\",\n \"Python (Programming Language)\",\n \"Firebase\",\n \"React.js\",\n \"Email Marketing\",\n \"E-newsletter\",\n \"Web Content Writing\",\n \"API Development\",\n \"API Management\",\n \"Postman API\",\n \"Content Writting\",\n \"Copywriting\",\n \"SEO Copywriting\",\n \"JavaScript\",\n \"TypeScript\",\n \"Cloud Firestore\",\n \"C (Programming Language)\",\n \"Front-End Development\"\n ],\n \"inferred_salary\": {\n \"min\": null,\n \"max\": null\n },\n \"gender\": null,\n \"birth_date\": null,\n \"industry\": null,\n \"extra\": {\n \"github_profile_id\": null,\n \"twitter_profile_id\": null,\n \"facebook_profile_id\": null\n },\n \"interests\": [],\n \"personal_emails\": [],\n \"personal_numbers\": []\n}"
},
{
"path": "pages/utilities.tsx",
"content": "import React from \"react\";\nimport Link from \"next/link\";\nimport { motion } from \"framer-motion\";\nimport { FiExternalLink } from \"react-icons/fi\";\nimport MetaData from \"@components/MetaData\";\nimport PageHeader from \"@components/PageHeader\";\nimport utilities from \"@content/utilitiesData\";\nimport pageMeta from \"@content/meta\";\nimport { UtilityType } from \"@lib/types\";\n\nconst containerVariants = {\n hidden: {},\n visible: { transition: { staggerChildren: 0.05 } },\n};\n\nconst itemVariants = {\n hidden: { opacity: 0, y: 10 },\n visible: {\n opacity: 1,\n y: 0,\n transition: { type: \"spring\" as const, stiffness: 160, damping: 22 },\n },\n};\n\nexport default function Utilities() {\n return (\n <>\n \n {utilities.data.map((utility, index) => (\n
\n\n {/* ── Last updated ── */}\n \n {/* Category header */}\n \n \n {num}\n \n \n \n {utility.data.map((item) => {\n const Icon = item.Icon;\n return (\n \n \n
\n );\n}\n"
},
{
"path": "postcss.config.js",
"content": "module.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n"
},
{
"path": "public/manifest.json",
"content": "{\n \"theme_color\": \"#000\",\n \"background_color\": \"#fff\",\n \"display\": \"standalone\",\n \"scope\": \"/\",\n \"start_url\": \"/\",\n \"name\": \"Jatin Sharma\",\n \"short_name\": \"Jatin Sharma\",\n \"description\": \"I am currently perusing my Bachelor Degree in Computer Science. I can code in Python, C, C++, etc. I also work on React & Next.js. This is my portfolio which you can install as Progressive Web app.\",\n \"icons\": [\n {\n \"src\": \"icons/maskable_icon_x192.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image/x-icon\",\n \"purpose\": \"maskable\"\n },\n {\n \"src\": \"icons/icon-48x48.png\",\n \"sizes\": \"48x48\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"icons/icon-72x72.png\",\n \"sizes\": \"72x72\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"icons/icon-96x96.png\",\n \"sizes\": \"96x96\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"icons/icon-128x128.png\",\n \"sizes\": \"128x128\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"icons/icon-144x144.png\",\n \"sizes\": \"144x144\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"icons/icon-152x152.png\",\n \"sizes\": \"152x152\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"icons/icon-192x192.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"icons/icon-512x512.png\",\n \"sizes\": \"512x512\",\n \"type\": \"image/png\"\n }\n ],\n \"screenshots\": [\n {\n \"src\": \"screenshots/home.png\",\n \"sizes\": \"411x821\",\n \"type\": \"image/gif\"\n },\n {\n \"src\": \"screenshots/blogs.png\",\n \"sizes\": \"411x821\",\n \"type\": \"image/gif\"\n },\n {\n \"src\": \"screenshots/projects.png\",\n \"sizes\": \"411x821\",\n \"type\": \"image/gif\"\n },\n {\n \"src\": \"screenshots/stats.png\",\n \"sizes\": \"411x821\",\n \"type\": \"image/gif\"\n },\n {\n \"src\": \"screenshots/utilities.png\",\n \"sizes\": \"411x821\",\n \"type\": \"image/gif\"\n },\n {\n \"src\": \"screenshots/contact.png\",\n \"sizes\": \"411x821\",\n \"type\": \"image/gif\"\n }\n ],\n \"shortcuts\": [\n {\n \"name\": \"Blogs\",\n \"url\": \"/blogs\",\n \"icons\": [\n {\n \"src\": \"shortcuts/blog.png\",\n \"sizes\": \"202x202\",\n \"type\": \"image/png\",\n \"purpose\": \"any\"\n }\n ]\n },\n {\n \"name\": \"About me\",\n \"url\": \"/about\",\n \"icons\": [\n {\n \"src\": \"shortcuts/about.png\",\n \"sizes\": \"202x202\",\n \"type\": \"image/png\",\n \"purpose\": \"any\"\n }\n ]\n },\n {\n \"name\": \"Newsletter\",\n \"url\": \"/newsletter\",\n \"icons\": [\n {\n \"src\": \"shortcuts/newsletter.png\",\n \"sizes\": \"202x202\",\n \"type\": \"image/png\",\n \"purpose\": \"any\"\n }\n ]\n }\n ]\n}"
},
{
"path": "public/robots.txt",
"content": "User-agent: *\nSitemap: https://jatin.vercel.app/sitemap.xml"
},
{
"path": "sanity/.eslintrc",
"content": "{\n \"extends\": \"@sanity/eslint-config-studio\"\n}\n"
},
{
"path": "sanity/.gitignore",
"content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# Dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# Compiled Sanity Studio\n/dist\n\n# Temporary Sanity runtime, generated by the CLI on every dev server start\n/.sanity\n\n# Logs\n/logs\n*.log\n\n# Coverage directory used by testing tools\n/coverage\n\n# Misc\n.DS_Store\n*.pem\n\n# Typescript\n*.tsbuildinfo\n\n# Dotenv and similar local-only files\n*.local\n"
},
{
"path": "sanity/README.md",
"content": "# Sanity Blogging Content Studio\n\nCongratulations, you have now installed the Sanity Content Studio, an open source real-time content editing environment connected to the Sanity backend.\n\nNow you can do the following things:\n\n- [Read “getting started” in the docs](https://www.sanity.io/docs/introduction/getting-started?utm_source=readme)\n- Check out the example frontend: [React/Next.js](https://github.com/sanity-io/tutorial-sanity-blog-react-next)\n- [Read the blog post about this template](https://www.sanity.io/blog/build-your-own-blog-with-sanity-and-next-js?utm_source=readme)\n- [Join the community Slack](https://slack.sanity.io/?utm_source=readme)\n- [Extend and build plugins](https://www.sanity.io/docs/content-studio/extending?utm_source=readme)\n"
},
{
"path": "sanity/gist.md.ndjson",
"content": "{\"_type\":\"post\", \"title\":\"ruby rails\",\"_createdAt\":\"2023-05-26T21:06:53Z\",\"publishedAt\":\"2023-05-26T21:06:53Z\",\"body\":[{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Ruby is a programming language that is often praised for its simplicity, elegance, and expressiveness. Just like any other programming language, it's important to focus on writing good quality code to ensure that the applications we build are reliable, scalable, and easy to maintain. Writing high-quality, maintainable Ruby code is essential for developing applications. Performing regular code reviews and using code quality tools can help catch problems early and improve your code over time. This article explores some of the best options for Ruby code reviews and quality analysis.\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"h2\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Introduction to Ruby on Rails\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"image\",\"asset\":{\"src\":\"https://aldibs.com/wp-content/uploads/2020/01/ruby-on-rails-development.jpg\",\"alt\":\"Differences between Ruby and Ruby on Rails - Aldibs Software Solutions\"}}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Ruby on Rails, or simply Rails, is an open-source web application framework written in Ruby. It is designed to make programming web applications easier and faster.\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"The main benefits of using Rails for building web applications are:\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[\"strong\"],\"text\":\"Productivity\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Rails make developers very productive through conventions, generators, migrations and other tools. Features can be built quickly.\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[\"strong\"],\"text\":\"Convention over configuration\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Rails has opinions about the best way to do things and configure itself by default. This means less time spent configuring and more time writing code.\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[\"strong\"],\"text\":\"Elegant design\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Rails enforces an elegant object-oriented design that minimizes repetition and coupling through the use of DRY principles.\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[\"strong\"],\"text\":\"Simple syntax\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Ruby's syntax is clean and straightforward, making Rails code readable and enjoyable to write.\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[\"strong\"],\"text\":\"MVC architecture\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Rails embraces and implements the MVC pattern cleanly, separating application concerns into models, views and controllers.\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[\"strong\"],\"text\":\"Support for testing\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Rails makes it easy to write automated tests, allowing developers to refactor code quickly and safely.\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"h2\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Importance of Code Review in Ruby on Rails Development\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Code reviews are an important practice in software development that can:\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"h3\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Maintain code quality\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"By having another set of eyes review the code, issues like inefficient algorithms, poor variable names, unnecessary complexity, and bad practices can be caught and corrected before the code is merged. This helps maintain a consistent code style and quality standard.\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"h3\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Improve collaboration\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"The code review process involves a discussion between reviewers and authors, sharing knowledge and best practices. This fosters communication and collaboration between team members.\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"image\",\"asset\":{\"src\":\"https://mobisoftinfotech.com/resources/wp-content/uploads/2022/01/og-code-quality.png\",\"alt\":\"Best Practices to Ensure Better Code Quality of Your Software in 2023\"}}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"h3\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Reduce bugs\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Catching bugs early during code reviews is much cheaper and faster than fixing them later after the code has been merged and released. This significantly improves software reliability.\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"image\",\"asset\":{\"src\":\"https://www.bigscal.com/wp-content/uploads/2022/08/6-Proven-Tips-To-Prevent-Software-Bugs-For-Developers.png\",\"alt\":\"6 Proven Tips To Prevent Software Bugs For Developers\"}}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"h3\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Opportunities for refactoring\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Reviewers may spot opportunities to refactor or restructure code in a more maintainable way. This can improve the design and architecture of the codebase over time.\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"image\",\"asset\":{\"src\":\"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200922214720/Red-Green-Refactoring.png\",\"alt\":\"7 Code Refactoring Techniques in Software Engineering - GeeksforGeeks\"}}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"h3\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Share knowledge\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Junior developers can learn good coding practices and design patterns by reviewing the code of more experienced developers, and vice versa.\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"image\",\"asset\":{\"src\":\"https://asphn.org/wp-content/uploads/2019/12/encouraging-teamwork-through-knowledge-sharing.jpg\",\"alt\":\"Encouraging Teamwork Through Knowledge Sharing - ASPHN\"}}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"h3\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Performance issues are identified\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Reviewers may spot performance bottlenecks, inefficient algorithms or resource usage issues that impact performance. These can be addressed before the code is merged.\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"image\",\"asset\":{\"src\":\"https://www.searchenginejournal.com/wp-content/uploads/2022/10/website-performance-and-health-monitoring-635945792a855-sej.png\",\"alt\":\"Website Performance & Health Monitoring: Tips & Best Practices\"}}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"h2\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Common Challenges in Ruby on Rails Code\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"When working with Ruby on Rails code, developers often face various challenges that can impact the overall quality of their applications. These challenges can range from performance bottlenecks and scalability concerns to security vulnerabilities. Addressing these common challenges is crucial.\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Here are some common challenges developers face when working with Ruby on Rails code:\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"h3\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Performance bottlenecks\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Performance bottlenecks in Ruby on Rails occur when certain parts of the code or system architecture significantly slow down the application's performance. Let's consider an example to illustrate this:\"}]},{\"_type\":\"code\",\"code\":\"# Slow query due to inefficient use of ActiveRecord @users = User.all @users.each do |user| user.orders.each do |order| # Perform some calculations or operations on each order end end # Optimized query @users = User.includes(:orders) @users.each do |user| user.orders.each do |order| # Perform some calculations or operations on each order end end \",\"language\":\"ruby\"},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"The above-unoptimized code, makes a separate database query to fetch each user's orders, resulting in N + 1 queries total where N is the number of users.\"}]},{\"_type\":\"block\",\"markDefs\":[{\"_key\":\"6629c84eb71f\",\"_type\":\"link\",\"href\":\"https://www.allerin.com/blog/eager-loading-inwith-rails\"}],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"The optimized code uses \"},{\"_type\":\"span\",\"marks\":[\"6629c84eb71f\"],\"text\":\"eager loading\"},{\"_type\":\"span\",\"marks\":[],\"text\":\" to fetch all user data and all order data in 2 queries. This reduces the number of queries from N + 1 to a constant number, improving performance.\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"h3\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Scalability concerns\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"As traffic and data volumes increase, Rails applications can struggle to scale vertically on a single server. Scaling horizontally across multiple servers and databases requires additional configuration and tooling.\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"h3\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Security vulnerabilities\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Like any framework, Rails has had security vulnerabilities over the years that require patching. Developers must keep dependencies up to date and follow secure coding practices.\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"h3\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Code readability problems\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Rails aims for convention over configuration, but this can result in \\\"magic\\\" that makes the code less readable for new developers. Over time, the codebase can become cluttered and difficult to navigate.\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"h3\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Dependency management\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Rails has a large number of dependencies that must be managed and kept up to date. Outdated dependencies can introduce security vulnerabilities or cause compatibility issues.\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"h3\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Database migration issues\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Rails uses Migrations to manage database schema changes, but over time these can become complex and difficult to maintain. Schema refactoring may be required.\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"h2\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Tools for Ruby on Rails Code Review\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"h3\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"RuboCop\"}]},{\"_type\":\"block\",\"markDefs\":[{\"_key\":\"74f88b388894\",\"_type\":\"link\",\"href\":\"https://docs.rubocop.org/\"},{\"_key\":\"54532bf690d6\",\"_type\":\"link\",\"href\":\"https://rubystyle.guide/\"}],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[\"74f88b388894\"],\"text\":\"RuboCop\"},{\"_type\":\"span\",\"marks\":[],\"text\":\" is a Ruby static code analyzer (a.k.a. \"},{\"_type\":\"span\",\"marks\":[\"code\"],\"text\":\"linter\"},{\"_type\":\"span\",\"marks\":[],\"text\":\") and code formatter. Out of the box it will enforce many of the guidelines outlined in the community \"},{\"_type\":\"span\",\"marks\":[\"54532bf690d6\"],\"text\":\"Ruby Style Guide\"},{\"_type\":\"span\",\"marks\":[],\"text\":\". Apart from reporting the problems discovered in your code, RuboCop can also automatically fix many of them for you.\"}]},{\"_type\":\"code\",\"code\":\"rubocop # Check entire project rubocop --auto-correct # Automatically correct offenses rubocop --only Rails/ActionFilter # Check specific cop \",\"language\":\"bash\"},{\"_type\":\"block\",\"markDefs\":[{\"_key\":\"89af21b60def\",\"_type\":\"link\",\"href\":\"https://www.youtube.com/watch?v=sfOGjcMVQ9U\"}],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"{% youtube \"},{\"_type\":\"span\",\"marks\":[\"89af21b60def\"],\"text\":\"https://www.youtube.com/watch?v=sfOGjcMVQ9U\"},{\"_type\":\"span\",\"marks\":[],\"text\":\" %}\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"h3\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Reek\"}]},{\"_type\":\"block\",\"markDefs\":[{\"_key\":\"4263f2a002fc\",\"_type\":\"link\",\"href\":\"https://github.com/troessner/reek\"}],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[\"4263f2a002fc\"],\"text\":\"Reek\"},{\"_type\":\"span\",\"marks\":[],\"text\":\" is a code smell detection tool for Ruby that helps identify potential design issues. It analyzes your codebase and provides feedback on areas that might benefit from refactoring or improvement. Here's an overview of what Reek is and how to use it:\"}]},{\"_type\":\"code\",\"code\":\"reek app/ # Check whole app directory reek -c reek.yml app/models/*.rb # Check models with config \",\"language\":\"bash\"},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"image\",\"asset\":{\"src\":\"https://opengraph.githubassets.com/187baac8e516274a2e32a4628ec25f8c7dc2a032e5148d702dfb3032f15fb15e/troessner/reek\",\"alt\":\"GitHub - troessner/reek: Code smell detector for Ruby\"}}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"h3\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Brakeman\"}]},{\"_type\":\"block\",\"markDefs\":[{\"_key\":\"e991fa49d846\",\"_type\":\"link\",\"href\":\"https://brakemanscanner.org/\"}],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[\"e991fa49d846\"],\"text\":\"Brakeman\"},{\"_type\":\"span\",\"marks\":[],\"text\":\" is a static analysis security vulnerability scanner for Ruby on Rails applications. It finds potential security issues in Rails applications by examining the Ruby code. Brakeman helps find and fix security holes before deploying your Rails app.\"}]},{\"_type\":\"code\",\"code\":\"brakeman # To run brakeman brakeman your_rails_app # Add path of the folder brakeman -A # To run all the checks brakeman -q # To suppress informational warning \",\"language\":\"bash\"},{\"_type\":\"block\",\"markDefs\":[{\"_key\":\"7687fc3fab29\",\"_type\":\"link\",\"href\":\"https://youtu.be/DHHHnPwSY5I\"}],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"{% youtube \"},{\"_type\":\"span\",\"marks\":[\"7687fc3fab29\"],\"text\":\"https://youtu.be/DHHHnPwSY5I\"},{\"_type\":\"span\",\"marks\":[],\"text\":\" %}\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"h3\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"RSpec\"}]},{\"_type\":\"block\",\"markDefs\":[{\"_key\":\"73d2397ddd27\",\"_type\":\"link\",\"href\":\"https://rspec.info/\"},{\"_key\":\"2da17a72c7d0\",\"_type\":\"link\",\"href\":\"https://en.wikipedia.org/wiki/Behavior-driven_development\"}],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[\"73d2397ddd27\"],\"text\":\"RSpec\"},{\"_type\":\"span\",\"marks\":[],\"text\":\" is a testing framework for Ruby that is widely used in the Ruby on Rails community. It allows developers to write and execute automated tests. RSpec promotes \"},{\"_type\":\"span\",\"marks\":[\"2da17a72c7d0\"],\"text\":\"behavior-driven development\"},{\"_type\":\"span\",\"marks\":[],\"text\":\" (BDD) by providing a readable syntax for describing the expected behavior of the application.\"}]},{\"_type\":\"code\",\"code\":\"bundle exec rspec # Run all spec files bundle exec rspec -fd # Run specs with failures/pending bundle exec rspec path/to/spec.rb # Run specific spec \",\"language\":\"bash\"},{\"_type\":\"block\",\"markDefs\":[{\"_key\":\"cfa7efa76f0d\",\"_type\":\"link\",\"href\":\"https://www.youtube.com/watch?v=-uhFA74eBG0\"}],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"{% youtube \"},{\"_type\":\"span\",\"marks\":[\"cfa7efa76f0d\"],\"text\":\"https://www.youtube.com/watch?v=-uhFA74eBG0\"},{\"_type\":\"span\",\"marks\":[],\"text\":\" %}\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"h3\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Flay\"}]},{\"_type\":\"block\",\"markDefs\":[{\"_key\":\"5cd38947563e\",\"_type\":\"link\",\"href\":\"https://github.com/seattlerb/flay\"}],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[\"5cd38947563e\"],\"text\":\"Flay\"},{\"_type\":\"span\",\"marks\":[],\"text\":\" analyzes ruby code for structural similarities. Differences in literal values, names, whitespace, and programming style are all ignored. Flay helps reduce code duplication and keep your code DRY (Don't Repeat Yourself).\"}]},{\"_type\":\"code\",\"code\":\"flay . # Analyzes the code within the current directory flay --diff . # Shows a side-by-side diff of the duplicated code \",\"language\":\"bash\"},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"image\",\"asset\":{\"src\":\"https://ik.imagekit.io/analysistools/flay_https_3A_2F_2Fruby.sadi.st_2FFlay.html_rS3Inq4vnl.jpg\",\"alt\":\"flay, a linter for Ruby - Rating And 47 Alternatives | Analysis Tools\"}}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"h3\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"Wrapping up\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"In conclusion, code reviews are essential for high-quality Ruby on Rails applications. They catch issues early, improve consistency and transfer knowledge between developers. Though time-consuming initially, code reviews save much more time by reducing bugs and improving maintainability. Start small with partial code reviews and expand coverage over time as the team adapts. The benefits to code quality, productivity and sustainability make code reviews a best practice for any Rails development process. Implementing regular code reviews should be a top priority for any team-building.\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"If you want more articles on similar topics just let me know in the comments section. And don't forget to ❤️ the article. I'll see you in the next one. In the meantime you can follow me here:\"}]},{\"_type\":\"block\",\"markDefs\":[],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"{% user j471n %}\"}]},{\"_type\":\"block\",\"markDefs\":[{\"_key\":\"ce4c547cffd6\",\"_type\":\"link\",\"href\":\"https://res.cloudinary.com/practicaldev/image/fetch/s--haJKPmN9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media0.giphy.com/media/65ODDoEMHM5wbGDHWT/giphy.gif%3Fcid%3Decf05e472rut0ytp29eznos4focko84kmq33u4btpu74cw1w%26rid%3Dgiphy.gif\"}],\"style\":\"normal\",\"children\":[{\"_type\":\"span\",\"marks\":[],\"text\":\"![](\"},{\"_type\":\"span\",\"marks\":[\"ce4c547cffd6\"],\"text\":\"https://res.cloudinary.com/practicaldev/image/fetch/s--haJKPmN9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media0.giphy.com/media/65ODDoEMHM5wbGDHWT/giphy.gif%3Fcid%3Decf05e472rut0ytp29eznos4focko84kmq33u4btpu74cw1w%26rid%3Dgiphy.gif\"},{\"_type\":\"span\",\"marks\":[],\"text\":\" align=\\\"center\\\")\"}]}]}\n"
},
{
"path": "sanity/package.json",
"content": "{\n \"name\": \"j471n-blog\",\n \"private\": true,\n \"version\": \"1.0.0\",\n \"main\": \"package.json\",\n \"license\": \"UNLICENSED\",\n \"scripts\": {\n \"dev\": \"sanity dev\",\n \"start\": \"sanity start\",\n \"build\": \"sanity build\",\n \"deploy\": \"sanity deploy\",\n \"deploy-graphql\": \"sanity graphql deploy\"\n },\n \"keywords\": [\n \"sanity\"\n ],\n \"dependencies\": {\n \"@dnd-kit/sortable\": \"^7.0.2\",\n \"@sanity/vision\": \"^3.12.2\",\n \"dotenv\": \"^16.3.1\",\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\",\n \"react-is\": \"^18.2.0\",\n \"sanity\": \"^3.12.2\",\n \"styled-components\": \"^5.3.9\"\n },\n \"devDependencies\": {\n \"@sanity/eslint-config-studio\": \"^2.0.1\",\n \"@types/react\": \"^18.0.25\",\n \"@types/styled-components\": \"^5.1.26\",\n \"eslint\": \"^8.6.0\",\n \"prettier\": \"^2.8.8\",\n \"typescript\": \"^4.9.5\"\n },\n \"prettier\": {\n \"semi\": false,\n \"printWidth\": 100,\n \"bracketSpacing\": false,\n \"singleQuote\": true\n }\n}\n"
},
{
"path": "sanity/sanity.cli.ts",
"content": "import {defineCliConfig} from '@sanity/cli'\n\nexport default defineCliConfig({\n api: {\n projectId: '5ec749u0',\n dataset: 'production',\n },\n})\n"
},
{
"path": "sanity/sanity.config.ts",
"content": "// import {defineConfig} from 'sanity/lib/exports' // ONLY USE WHILE BUILDING THE APP\n\nimport {defineConfig} from 'sanity' // <==== USE THIS FOR LOCAL\nimport {deskTool} from 'sanity/desk'\nimport {schemaTypes} from './schemas'\nimport {visionTool} from '@sanity/vision'\n\nexport default defineConfig({\n name: 'default',\n title: 'j471n-blog',\n\n projectId: '5ec749u0',\n dataset: 'production',\n\n plugins: [deskTool(), visionTool()],\n\n schema: {\n types: schemaTypes,\n },\n})\n"
},
{
"path": "sanity/schemas/author.ts",
"content": "import {defineField, defineType} from 'sanity'\n\nexport default defineType({\n name: 'author',\n title: 'Author',\n type: 'document',\n fields: [\n defineField({\n name: 'name',\n title: 'Name',\n type: 'string',\n }),\n defineField({\n name: 'slug',\n title: 'Slug',\n type: 'slug',\n options: {\n source: 'name',\n maxLength: 96,\n },\n }),\n defineField({\n name: 'image',\n title: 'Image',\n type: 'image',\n options: {\n hotspot: true,\n },\n }),\n defineField({\n name: 'bio',\n title: 'Bio',\n type: 'array',\n of: [\n {\n title: 'Block',\n type: 'block',\n styles: [{title: 'Normal', value: 'normal'}],\n lists: [],\n },\n ],\n }),\n ],\n preview: {\n select: {\n title: 'name',\n media: 'image',\n },\n },\n})\n"
},
{
"path": "sanity/schemas/blockContent.ts",
"content": "import {defineType, defineArrayMember} from 'sanity'\n\n/**\n * This is the schema definition for the rich text fields used for\n * for this blog studio. When you import it in schemas.js it can be\n * reused in other parts of the studio with:\n * {\n * name: 'someName',\n * title: 'Some title',\n * type: 'blockContent'\n * }\n */\nexport default defineType({\n title: 'Block Content',\n name: 'blockContent',\n type: 'array',\n of: [\n defineArrayMember({\n title: 'Block',\n type: 'block',\n // Styles let you set what your user can mark up blocks with. These\n // correspond with HTML tags, but you can set any title or value\n // you want and decide how you want to deal with it where you want to\n // use your content.\n styles: [\n {title: 'Normal', value: 'normal'},\n {title: 'H1', value: 'h1'},\n {title: 'H2', value: 'h2'},\n {title: 'H3', value: 'h3'},\n {title: 'H4', value: 'h4'},\n {title: 'Quote', value: 'blockquote'},\n ],\n lists: [{title: 'Bullet', value: 'bullet'}],\n // Marks let you mark up inline text in the block editor.\n marks: {\n // Decorators usually describe a single property – e.g. a typographic\n // preference or highlighting by editors.\n decorators: [\n {title: 'Strong', value: 'strong'},\n {title: 'Emphasis', value: 'em'},\n ],\n // Annotations can be any object structure – e.g. a link or a footnote.\n annotations: [\n {\n title: 'URL',\n name: 'link',\n type: 'object',\n fields: [\n {\n title: 'URL',\n name: 'href',\n type: 'url',\n },\n ],\n },\n ],\n },\n }),\n // You can add additional types here. Note that you can't use\n // primitive types such as 'string' and 'number' in the same array\n // as a block type.\n defineArrayMember({\n type: 'image',\n options: {hotspot: true},\n }),\n ],\n})\n"
},
{
"path": "sanity/schemas/category.ts",
"content": "import {defineField, defineType} from 'sanity'\n\nexport default defineType({\n name: 'category',\n title: 'Category',\n type: 'document',\n fields: [\n defineField({\n name: 'title',\n title: 'Title',\n type: 'string',\n }),\n defineField({\n name: 'description',\n title: 'Description',\n type: 'text',\n }),\n ],\n})\n"
},
{
"path": "sanity/schemas/epigraph.ts",
"content": "import {defineField, defineType, defineArrayMember} from 'sanity'\n\nconst SOURCE_TYPES = [\n {title: 'Book', value: 'book'},\n {title: 'Movie', value: 'movie'},\n {title: 'TV Show', value: 'tvShow'},\n {title: 'Person', value: 'person'},\n {title: 'Song / Lyrics', value: 'song'},\n {title: 'Podcast', value: 'podcast'},\n {title: 'Other', value: 'other'},\n]\n\nexport default defineType({\n name: 'epigraph',\n title: 'Epigraph',\n type: 'document',\n fields: [\n defineField({\n name: 'quote',\n title: 'Quote / Passage',\n type: 'text',\n description: 'The quote, stanza, or passage you want to preserve.',\n validation: (Rule) => Rule.required(),\n }),\n defineField({\n name: 'sourceType',\n title: 'Source Type',\n type: 'string',\n options: {\n list: SOURCE_TYPES,\n layout: 'radio',\n },\n validation: (Rule) => Rule.required(),\n }),\n defineField({\n name: 'sourceTitle',\n title: 'Source Title',\n type: 'string',\n description: 'Book name, movie title, show name, song name, podcast name, or person name.',\n validation: (Rule) => Rule.required(),\n }),\n defineField({\n name: 'sourceMeta',\n title: 'Source Meta',\n type: 'string',\n description:\n 'Author (book), artist (song), director (movie), host (podcast), context (person), etc.',\n }),\n defineField({\n name: 'speaker',\n title: 'Speaker / Character',\n type: 'string',\n description:\n 'Character or person who said it (e.g. character in a book/movie, the person themselves).',\n }),\n defineField({\n name: 'year',\n title: 'Year',\n type: 'number',\n description: 'Release or publication year (optional).',\n }),\n {\n name: 'tags',\n title: 'Tags',\n type: 'array' as const,\n of: [{type: 'string' as const}],\n options: {\n layout: 'tags',\n },\n description: 'e.g. \"life\", \"motivation\", \"love\", \"philosophy\"',\n },\n defineField({\n name: 'addedAt',\n title: 'Added At',\n type: 'datetime',\n initialValue: () => new Date().toISOString(),\n }),\n ],\n\n preview: {\n select: {\n title: 'quote',\n subtitle: 'sourceTitle',\n sourceType: 'sourceType',\n },\n prepare({title, subtitle, sourceType}) {\n const label = SOURCE_TYPES.find((s) => s.value === sourceType)?.title ?? sourceType\n return {\n title: title ? (title.length > 80 ? title.slice(0, 80) + '…' : title) : 'Untitled',\n subtitle: subtitle ? `${label} — ${subtitle}` : label,\n }\n },\n },\n})\n"
},
{
"path": "sanity/schemas/index.ts",
"content": "import author from './author'\nimport blockContent from './blockContent'\nimport category from './category'\nimport language from './language'\nimport epigraph from './epigraph'\nimport organization from './organization'\nimport post from './post'\nimport snippet from './snippet'\nimport static_page from './static_page'\n\nexport const schemaTypes = [\n post,\n author,\n category,\n blockContent,\n organization,\n snippet,\n language,\n static_page,\n epigraph,\n]\n"
},
{
"path": "sanity/schemas/language.ts",
"content": "import {defineField, defineType} from 'sanity'\n\nexport default defineType({\n name: 'language',\n title: 'Language',\n type: 'document',\n fields: [\n defineField({\n name: 'name',\n title: 'Name',\n type: 'string',\n }),\n defineField({\n name: 'slug',\n title: 'Slug',\n type: 'slug',\n options: {\n source: 'name',\n maxLength: 96,\n },\n }),\n defineField({\n name: 'image',\n title: 'Image',\n type: 'image',\n options: {\n hotspot: true,\n },\n }),\n ],\n preview: {\n select: {\n title: 'name',\n media: 'image',\n },\n },\n})\n"
},
{
"path": "sanity/schemas/organization.ts",
"content": "import {defineField, defineType} from 'sanity'\n\nexport default defineType({\n name: 'organization',\n title: 'Organization',\n type: 'document',\n fields: [\n defineField({\n name: 'name',\n title: 'Name',\n type: 'string',\n }),\n defineField({\n name: 'slug',\n title: 'Slug',\n type: 'slug',\n options: {\n source: 'name',\n maxLength: 96,\n },\n }),\n defineField({\n name: 'website',\n title: 'Website',\n type: 'string',\n }),\n defineField({\n name: 'image',\n title: 'Image',\n type: 'image',\n options: {\n hotspot: true,\n },\n }),\n defineField({\n name: 'bio',\n title: 'Bio',\n type: 'array',\n of: [\n {\n title: 'Block',\n type: 'block',\n styles: [{title: 'Normal', value: 'normal'}],\n lists: [],\n },\n ],\n }),\n ],\n preview: {\n select: {\n title: 'name',\n media: 'image',\n },\n },\n})\n"
},
{
"path": "sanity/schemas/post.ts",
"content": "import {defineField, defineType} from 'sanity'\n\nexport default defineType({\n name: 'post',\n title: 'Post',\n type: 'document',\n fields: [\n defineField({\n name: 'title',\n title: 'Title',\n type: 'string',\n }),\n defineField({\n name: 'slug',\n title: 'Slug',\n type: 'slug',\n options: {\n source: 'title',\n maxLength: 96,\n },\n }),\n defineField({\n name: 'keywords',\n title: 'Keywords',\n type: 'string',\n }),\n defineField({\n name: 'excerpt',\n title: 'Excerpt',\n type: 'text',\n }),\n\n defineField({\n name: 'author',\n title: 'Author',\n type: 'reference',\n to: {type: 'author'},\n }),\n defineField({\n name: 'organization',\n title: 'Organization',\n type: 'reference',\n to: {type: 'organization'},\n }),\n defineField({\n name: 'mainImage',\n title: 'Main image',\n type: 'image',\n options: {\n hotspot: true,\n },\n }),\n defineField({\n name: 'categories',\n title: 'Categories',\n type: 'array',\n of: [{type: 'reference', to: {type: 'category'}}],\n }),\n defineField({\n name: 'publishedAt',\n title: 'Published at',\n type: 'datetime',\n }),\n defineField({\n name: 'content',\n title: 'Content',\n type: 'text',\n }),\n ],\n\n preview: {\n select: {\n title: 'title',\n author: 'author.name',\n media: 'mainImage',\n },\n prepare(selection) {\n const {author} = selection\n return {...selection, subtitle: author && `by ${author}`}\n },\n },\n})\n"
},
{
"path": "sanity/schemas/snippet.ts",
"content": "import {defineField, defineType} from 'sanity'\n\nexport default defineType({\n name: 'snippet',\n title: 'Snippet',\n type: 'document',\n fields: [\n defineField({\n name: 'title',\n title: 'Title',\n type: 'string',\n }),\n defineField({\n name: 'slug',\n title: 'Slug',\n type: 'slug',\n options: {\n source: 'title',\n maxLength: 96,\n },\n }),\n defineField({\n name: 'excerpt',\n title: 'Excerpt',\n type: 'text',\n }),\n\n defineField({\n name: 'language',\n title: 'Language',\n type: 'reference',\n to: {type: 'language'},\n }),\n defineField({\n name: 'publishedAt',\n title: 'Published at',\n type: 'datetime',\n }),\n defineField({\n name: 'content',\n title: 'Content',\n type: 'text',\n }),\n ],\n\n preview: {\n select: {\n title: 'title',\n language: 'language.name',\n media: 'language.image',\n },\n prepare(selection) {\n const {language} = selection\n return {...selection, subtitle: language}\n },\n },\n})\n"
},
{
"path": "sanity/schemas/static_page.ts",
"content": "import {defineField, defineType} from 'sanity'\n\nexport default defineType({\n name: 'static_page',\n title: 'Static Page',\n type: 'document',\n fields: [\n defineField({\n name: 'title',\n title: 'Title',\n type: 'string',\n }),\n defineField({\n name: 'slug',\n title: 'Slug',\n type: 'slug',\n options: {\n source: 'title',\n maxLength: 96,\n },\n }),\n defineField({\n name: 'keywords',\n title: 'Keywords',\n type: 'string',\n }),\n defineField({\n name: 'excerpt',\n title: 'Excerpt',\n type: 'text',\n }),\n defineField({\n name: 'mainImage',\n title: 'Main image',\n type: 'image',\n options: {\n hotspot: true,\n },\n }),\n defineField({\n name: 'publishedAt',\n title: 'Published at',\n type: 'datetime',\n }),\n defineField({\n name: 'content',\n title: 'Content',\n type: 'text',\n }),\n ],\n\n preview: {\n select: {\n title: 'title',\n media: 'mainImage',\n },\n prepare(selection) {\n return {...selection}\n },\n },\n})\n"
},
{
"path": "sanity/static/.gitkeep",
"content": "Files placed here will be served by the Sanity server under the `/static`-prefix\n"
},
{
"path": "sanity/tailwind.config.js",
"content": "module.exports = {\n content: [\n'./pages/**/*.{js,ts,jsx,tsx}',\n'./components/**/*.{js,ts,jsx,tsx}',\n'./app/**/*.{js,ts,jsx,tsx}',\n],\n theme: {\n extend: {},\n },\n plugins: [],\n}"
},
{
"path": "sanity/tsconfig.json",
"content": "{\n \"compilerOptions\": {\n \"target\": \"ES2017\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noEmit\": true,\n \"esModuleInterop\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"jsx\": \"preserve\",\n \"incremental\": true\n },\n \"include\": [\"**/*.ts\", \"**/*.tsx\"],\n \"exclude\": [\"node_modules\"]\n}\n"
},
{
"path": "sanity.cli.ts",
"content": "import { defineCliConfig } from \"@sanity/cli\";\n\nexport default defineCliConfig({\n api: {\n projectId: \"5ec749u0\",\n dataset: \"production\",\n },\n});\n"
},
{
"path": "styles/globals.css",
"content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@font-face {\n font-family: \"Barlow\";\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(/fonts/Barlow/Barlow-400.woff2) format(\"woff2\");\n}\n@font-face {\n font-family: \"Barlow\";\n font-style: normal;\n font-weight: 500;\n font-display: swap;\n src: url(/fonts/Barlow/Barlow-500.woff2) format(\"woff2\");\n}\n@font-face {\n font-family: \"Barlow\";\n font-style: normal;\n font-weight: 600;\n font-display: swap;\n src: url(/fonts/Barlow/Barlow-600.woff2) format(\"woff2\");\n}\n@font-face {\n font-family: \"Barlow\";\n font-style: normal;\n font-weight: 700;\n font-display: swap;\n src: url(/fonts/Barlow/Barlow-700.woff2) format(\"woff2\");\n}\n@font-face {\n font-family: \"Barlow\";\n font-style: normal;\n font-weight: 800;\n font-display: swap;\n src: url(/fonts/Barlow/Barlow-800.woff2) format(\"woff2\");\n}\n@font-face {\n font-family: \"Inter\";\n font-style: normal;\n font-weight: 100 900;\n font-display: swap;\n src: url(/fonts/Inter-var.woff2) format(\"woff2\");\n}\n@font-face {\n font-family: \"Sarina\";\n font-style: normal;\n font-weight: normal;\n font-display: swap;\n src: url(/fonts/Sarina/Sarina-400.woff2) format(\"woff2\");\n}\n\nbody,\nhtml {\n overflow-x: hidden;\n scroll-behavior: auto;\n}\nbody::-webkit-scrollbar {\n width: 6px;\n}\n\n/* Adding Scroll Margin for top */\n* {\n scroll-margin-top: 80px;\n}\n@media screen and (max-width: 640px) {\n * {\n scroll-margin-top: 60px;\n }\n body::-webkit-scrollbar {\n width: 2px;\n }\n}\n\npre::-webkit-scrollbar {\n display: none;\n}\n\nbody.dark {\n background-color: #181a1b;\n}\n\n::-webkit-scrollbar {\n width: 6px;\n}\n\n::-webkit-scrollbar-track {\n background: transparent;\n}\n::-webkit-scrollbar-thumb {\n background-color: #b3b3b3;\n}\n\n.dark::-webkit-scrollbar-thumb {\n background-color: #393e41;\n}\n\n.no-scrollbar::-webkit-scrollbar {\n display: none;\n}\n\n.lock-scroll {\n overflow: hidden !important;\n}\n\n.horizontal-scrollbar::-webkit-scrollbar {\n height: 3px;\n border-redius: 999px;\n}\n\n/* For preventing the blue highlight color box on tap(click) */\n* {\n -webkit-tap-highlight-color: transparent;\n}\n\n.auto-row {\n -webkit-margin-before: auto;\n margin-block-start: auto;\n}\n\n/* Code Line Highlighting START */\ncode {\n counter-reset: line;\n}\n\ncode span.line {\n padding: 0px 12px;\n border-left: 4px solid transparent;\n}\n\nspan.line > span {\n padding: 2px 0;\n width: 100%;\n}\n\nspan.line > span:last-child {\n padding-right: 50px;\n}\ncode > .line::before {\n counter-increment: line;\n content: counter(line);\n\n /* Other styling */\n display: inline-block;\n width: 1rem;\n margin-right: 1rem;\n text-align: right;\n color: gray;\n font-weight: 500;\n border-right: 4px solid transparent;\n}\n\n.highlighted {\n background: rgba(200, 200, 255, 0.1);\n border-left: 4px solid #3777de !important;\n filter: saturate(1.5);\n}\n/* Code Line Highlighting ENDS */\n\n/* Nprogress bar Custom Styling (force) : STARTS */\n#nprogress .bar {\n background-color: rgba(0, 89, 255, 0.7) !important;\n height: 3px !important;\n}\n.dark #nprogress .bar {\n background: #fff !important;\n}\n#nprogress .peg {\n box-shadow: none !important;\n}\n/* Nprogress bar Custom Styling (force) : ENDS */\n\n.blogGrid {\n display: grid;\n grid-template-columns: 300px 1fr;\n grid-template-rows: 1fr;\n}\n\n.blog-pre {\n border-radius: 0;\n}\n\n.blog-pre > code {\n width: 100%;\n display: flex;\n flex-direction: column;\n}\n\n/* Dual-theme switching: show light by default, dark when body.dark is set */\ndiv[data-theme=\"dark\"] {\n display: none;\n}\ndiv[data-theme=\"light\"] {\n display: block;\n}\n.dark div[data-theme=\"dark\"] {\n display: block;\n}\n.dark div[data-theme=\"light\"] {\n display: none;\n}\n.react-activity-calendar__calendar {\n width: 100%;\n height: 100%;\n}\n.react-activity-calendar {\n max-width: 100% !important;\n}\n\n@keyframes loadingAnimation {\n 0% {\n left: -100%; /* Move the bar to the left of the container */\n }\n 100% {\n left: 100%; /* Move the bar to the right of the container */\n }\n}\n\n@keyframes pulse-slow {\n 0%,\n 100% {\n opacity: 0.2;\n transform: scale(1);\n }\n 50% {\n opacity: 0.3;\n transform: scale(1.05);\n }\n}\n\n.animate-pulse-slow {\n animation: pulse-slow 4s ease-in-out infinite;\n}\n\n/* Skills marquee scroll */\n@keyframes marquee {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-50%);\n }\n}\n.animate-marquee {\n animation: marquee 40s linear infinite;\n will-change: transform;\n}\n\n/* Hero section diagonal stripe decorator */\n.hero-stripe {\n background-image: repeating-linear-gradient(\n -45deg,\n transparent,\n transparent 16px,\n rgba(0, 0, 0, 0.03) 16px,\n rgba(0, 0, 0, 0.03) 17px\n );\n}\n.dark .hero-stripe {\n background-image: repeating-linear-gradient(\n -45deg,\n transparent,\n transparent 16px,\n rgba(255, 255, 255, 0.03) 16px,\n rgba(255, 255, 255, 0.03) 17px\n );\n}\n\n/* Layers Components or the custom class extends with tailwind */\n@layer components {\n .bottom_nav_icon {\n @apply mb-[2px] text-2xl cursor-pointer;\n }\n .top-nav-link {\n @apply list-none mx-1 px-3 py-1 border-black dark:border-white transition-all duration-200 hover:rounded-md hover:bg-gray-100 dark:hover:bg-darkSecondary cursor-pointer text-lg font-semibold select-none sm:text-sm md:text-base;\n }\n .contact_field {\n @apply text-sm font-medium text-black dark:text-white w-full px-4 py-2 m-2 rounded-md border-none outline-none shadow-inner shadow-slate-200 dark:shadow-zinc-800 focus:ring-1 focus:ring-purple-500 dark:bg-darkPrimary dark:placeholder-gray-500;\n }\n .title_of_page {\n @apply text-center text-xl font-bold dark:bg-darkPrimary dark:text-gray-100;\n }\n .icon {\n @apply text-2xl sm:text-3xl m-1 transform duration-200 lg:hover:scale-150 text-zinc-500 hover:text-zinc-800 dark:hover:text-white cursor-pointer;\n }\n\n .page_container {\n @apply p-5 md:px-24 pb-10 dark:bg-darkPrimary dark:text-gray-200 grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-5;\n }\n\n .blog_bottom_icon {\n @apply text-3xl p-1 bg-gray-100 dark:bg-darkSecondary sm:bg-transparent ring-1 dark:ring-gray-500 ring-gray-300 sm:hover:bg-gray-100 rounded-md cursor-pointer ml-1;\n }\n .blog_bottom_button {\n @apply block sm:hidden py-1 w-full lg:hover:bg-gray-300 cursor-pointer bg-gray-200 rounded-md transform duration-100 active:scale-90 select-none;\n }\n .user_reaction {\n @apply flex font-semibold items-center cursor-pointer w-full justify-center sm:justify-start sm:w-auto space-x-1 text-base;\n }\n .project_link {\n @apply text-center bg-gray-200 p-2 my-1 rounded-full dark:bg-darkSecondary dark:text-white cursor-pointer shadow dark:shadow-gray-500;\n }\n .clickable_button {\n @apply transform duration-100 active:scale-90 lg:hover:scale-105;\n }\n\n .home-section-container {\n @apply flex gap-2 overflow-x-scroll p-5 md:px-24 w-full min-h-[200px] select-none snap-x lg:snap-none;\n }\n .home-content-section {\n @apply relative min-w-[250px] xl:min-w-[300px] break-words shadow shadow-black/20 dark:shadow-white/20 dark:bg-darkSecondary ring-gray-400 rounded-xl p-3 cursor-pointer select-none lg:hover:scale-105 scale-95 transition bg-white snap-center lg:snap-align-none md:first:ml-24 md:last:mr-24;\n }\n .blog-hover-button {\n @apply flex items-center space-x-2 border-2 border-white dark:border-zinc-600 px-3 py-1 font-semibold w-min text-white dark:text-white hover:bg-white dark:hover:bg-zinc-600 hover:text-black;\n }\n .hover-slide-animation {\n @apply relative overflow-hidden before:absolute before:h-full before:w-40 before:bg-stone-900 dark:before:bg-gray-50 before:opacity-10 dark:before:opacity-5 before:-right-10 before:-z-10 before:rotate-[20deg] before:scale-y-150 before:top-4 hover:before:scale-[7] before:duration-700;\n }\n .pageTop {\n @apply mt-[44px] md:mt-[60px] max-w-4xl 2xl:max-w-5xl 3xl:max-w-7xl relative mx-auto p-4 mb-10 text-neutral-900 dark:text-neutral-200;\n }\n .utilities-svg {\n @apply !pointer-events-none mb-0 w-8 h-8;\n }\n .card {\n @apply bg-white dark:bg-darkSecondary p-5 sm:p-10 flex flex-col sm:flex-row gap-8 items-center max-w-2xl shadow-md rounded-lg mt-[30%] sm:mt-8 transition-all;\n }\n .blog-container {\n @apply !w-full dark:text-neutral-400 my-5 font-medium;\n }\n .prose-typography {\n @apply prose dark:prose-invert sm:prose-lg blog-container prose-pre:bg-white dark:prose-pre:bg-darkSecondary prose-pre:saturate-150 dark:prose-pre:saturate-100 marker:text-black dark:marker:text-white prose-img:mx-auto prose-img:rounded-md prose-headings:text-gray-900 dark:prose-headings:text-white prose-p:text-gray-700 dark:prose-p:text-gray-300 prose-a:text-gray-900 dark:prose-a:text-white prose-strong:text-gray-900 dark:prose-strong:text-white prose-code:text-black dark:prose-code:text-gray-200 prose-blockquote:border-gray-300 dark:prose-blockquote:border-gray-700 prose-blockquote:text-gray-600 dark:prose-blockquote:text-gray-400;\n }\n}\n\n@layer base {\n body {\n @apply font-inter bg-darkWhite;\n }\n button {\n @apply outline-none;\n }\n hr {\n @apply !mx-auto !w-1/2 h-0.5 !bg-gray-700 dark:!bg-gray-300 border-0 !rounded-full;\n }\n\n table {\n @apply !border-collapse text-left;\n }\n\n table thead tr > th,\n table tbody tr > td {\n @apply !p-2 border border-gray-400 align-middle;\n }\n\n table thead tr > th {\n @apply text-black dark:text-white;\n }\n\n table thead tr {\n @apply align-text-top;\n }\n table th {\n @apply font-bold;\n }\n table a {\n @apply !text-blue-500 dark:!text-blue-400;\n }\n\n strong {\n @apply !text-black dark:!text-white !font-bold;\n }\n\n /* For Blog page to remove the underline */\n h2 > a,\n h3 > a,\n h4 > a,\n h5 > a,\n h6 > a {\n @apply !text-black dark:!text-white !font-bold !no-underline;\n }\n}\n\n@layer utilities {\n /* Hiding the arrows in the input number */\n input[type=\"number\"]::-webkit-inner-spin-button,\n input[type=\"number\"]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n}\n"
},
{
"path": "tailwind.config.js",
"content": "module.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n \"./layout/*.{js,jsx,ts,tsx}\",\n ],\n darkMode: \"class\", // or 'media' or 'class'\n theme: {\n fontFamily: {\n inter: [\"Inter\", \"sans-serif\"],\n sarina: [\"Sarina\", \"cursive\"],\n barlow: [\"Barlow\", \"sans-serif\"],\n mono: [\"monospace\"],\n },\n extend: {\n colors: {\n darkPrimary: \"#181A1B\",\n darkSecondary: \"#25282A\",\n darkWhite: \"#f2f5fa\",\n \"dark-3\": \"#b8b8b8\",\n },\n listStyleType: {\n square: \"square\",\n roman: \"upper-roman\",\n },\n animation: {\n wiggle: \"wiggle 1s ease-in-out infinite\",\n \"photo-spin\": \"photo-spin 2s 1 linear forwards\",\n },\n keyframes: {\n wiggle: {\n \"0%, 100%\": { transform: \"rotate(-3deg)\" },\n \"50%\": { transform: \"rotate(3deg)\" },\n },\n \"photo-spin\": {\n \"0%\": { transform: \"rotate(0deg)\" },\n \"100%\": { transform: \"rotate(360deg)\" },\n },\n },\n screens: {\n \"3xl\": \"2000px\",\n xs: \"480px\",\n },\n },\n },\n plugins: [\n require(\"@tailwindcss/line-clamp\"),\n require(\"@tailwindcss/typography\"),\n ],\n};\n"
},
{
"path": "tsconfig.json",
"content": "{\n \"compilerOptions\": {\n \"target\": \"ES5\", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ // \"lib\": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */\n \"module\": \"commonjs\", /* Specify what module code is generated. */ // \"rootDir\": \"./\", /* Specify the root folder within your source files. */\n \"baseUrl\": \".\", /* Specify the base directory to resolve non-relative module names. */\n \"paths\": {\n \"@components/*\": [\n \"components/*\"\n ],\n \"@lib/*\": [\n \"lib/*\"\n ],\n \"@utils/*\": [\n \"utils/*\"\n ],\n \"@content/*\": [\n \"content/*\"\n ],\n \"@styles/*\": [\n \"styles/*\"\n ],\n \"@context/*\": [\n \"context/*\"\n ],\n \"@layout/*\": [\n \"layout/*\"\n ],\n \"@hooks/*\": [\n \"hooks/*\"\n ]\n }, /* Specify a set of entries that re-map imports to additional lookup locations. */\n \"checkJs\": true, /* Enable error reporting in type-checked JavaScript files. */\n \"esModuleInterop\": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ // \"preserveSymlinks\": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */\n \"forceConsistentCasingInFileNames\": true, /* Ensure that casing is correct in imports. */ /* Type Checking */\n \"strict\": true, /* Enable all strict type-checking options. */ // \"noImplicitAny\": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */\n \"noUnusedLocals\": true, /* Enable error reporting when local variables aren't read. */\n \"noUnusedParameters\": true, /* Raise an error when a function parameter isn't read. */\n \"skipLibCheck\": true /* Skip type checking all .d.ts files. */,\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"esnext\"\n ],\n \"allowJs\": true,\n \"noEmit\": true,\n \"incremental\": true,\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"jsx\": \"preserve\"\n },\n \"include\": [\n \"next-env.d.ts\",\n \"**/*.ts\",\n \"**/*.tsx\",\n \"pages/sitemap.xml.jsx\"\n ],\n \"exclude\": [\n \"node_modules\",\n \"sanity/**/*\"\n ]\n}"
},
{
"path": "utils/date.ts",
"content": "/* Formats a date as a string in the format 'Month day, year'. */\n\nexport const months = [\n \"Jan\",\n \"Feb\",\n \"Mar\",\n \"Apr\",\n \"May\",\n \"Jun\",\n \"Jul\",\n \"Aug\",\n \"Sep\",\n \"Oct\",\n \"Nov\",\n \"Dec\",\n];\nexport function getFormattedDate(date: Date): string {\n return `${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;\n}\n"
},
{
"path": "utils/functions.ts",
"content": "/**\n * Locks the scroll of the document by adding a 'lock-scroll' class to the html element.\n * The 'lock-scroll' class should be defined in a global stylesheet and contain styles for disabling scrolling.\n */\nexport function lockScroll() {\n const root = document.getElementsByTagName(\"html\")[0];\n root.classList.toggle(\"lock-scroll\"); // class is define in the global.css\n}\n\n/**\n * Removes the scroll lock from the document by removing the 'lock-scroll' class from the html element.\n */\nexport function removeScrollLock() {\n const root = document.getElementsByTagName(\"html\")[0];\n root.classList.remove(\"lock-scroll\"); // class is define in the global.css\n}\n\n/**\n * Debounces a function by delaying its execution until a certain amount of time has passed\n * since the last time it was invoked. Only the last invocation within the delay period will be executed.\n */\nexport function debounce(fn: Function, time: number = 300): Function {\n let timeoutId: ReturnType\n {utility.title}\n
\n \n \n\n {/* Tool cards grid */}\n\n {/* @ts-ignore */}\n
\n \n
\n \n \n );\n })}\n \n \n \n {item.name}\n \n
\n \n {item.description}\n
\n