From 263d40746ca3bc87a4d8ea4b7298e69b2975b872 Mon Sep 17 00:00:00 2001
From: techmannih <manishchaudharyttt@gmail.com>
Date: Sun, 5 Jan 2025 09:50:44 +0530
Subject: [PATCH] format code

---
 components/StyledMarkdown.tsx    |   3 +-
 components/TOC.tsx               | 117 +++++++++++++++++++++++++------
 pages/blog/posts/[slug].page.tsx |   8 +--
 pages/learn/[slug].page.tsx      |  11 ++-
 pages/overview/[slug].page.tsx   |  11 ++-
 5 files changed, 109 insertions(+), 41 deletions(-)

diff --git a/components/StyledMarkdown.tsx b/components/StyledMarkdown.tsx
index 4ff79a73f..51eaf9446 100644
--- a/components/StyledMarkdown.tsx
+++ b/components/StyledMarkdown.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext } from 'react';
 import Markdown from 'markdown-to-jsx';
 import Link from 'next/link';
 import JsonEditor from '~/components/JsonEditor';
@@ -545,7 +545,6 @@ const StyledMarkdownBlock = ({ markdown }: { markdown: string }) => {
   );
 };
 
-
 const checkHasContent = (reactNode: React.ReactChild) => {
   if (!reactNode) return false;
   if (typeof reactNode === 'string' || typeof reactNode === 'number')
diff --git a/components/TOC.tsx b/components/TOC.tsx
index cc71c6277..378334a3f 100644
--- a/components/TOC.tsx
+++ b/components/TOC.tsx
@@ -24,7 +24,11 @@ const hiddenElements = (...elements: string[]) => {
 };
 
 // HeadingLink component to render each heading with a link
-const HeadingLink: React.FC<{ children: React.ReactNode; level: number; isActive: boolean }> = ({ children, level, isActive }) => {
+const HeadingLink: React.FC<{
+  level: number;
+  isActive: boolean;
+  children: React.ReactNode;
+}> = ({ level, isActive, children }) => {
   const text = getTextFromChildren(children); // Get the plain text for slug
   const slug = slugifyMarkdownHeadline(text); // Generate slug from text
   const paddingClass = `pl-${level * 2}`; // Adjust padding based on heading level
@@ -45,7 +49,10 @@ interface TableOfContentMarkdownProps {
   depth?: number;
 }
 
-export const TableOfContentMarkdown: React.FC<TableOfContentMarkdownProps> = ({ markdown, depth = 2 }) => {
+export const TableOfContentMarkdown: React.FC<TableOfContentMarkdownProps> = ({
+  markdown,
+  depth = 2,
+}) => {
   const [activeSlug, setActiveSlug] = useState<string | null>(null);
 
   useEffect(() => {
@@ -69,34 +76,98 @@ export const TableOfContentMarkdown: React.FC<TableOfContentMarkdownProps> = ({
   }, []);
 
   return (
-    <div className="w-2/5 lg:block mt-10 hidden sticky top-24 h-[calc(100vh-6rem)] overflow-hidden">
-      <div className="h-full overflow-y-auto scrollbar-hidden pl-5">
-        <div className="uppercase text-xs text-slate-400 mb-4">On this page</div>
+    <div className='w-2/5 lg:block mt-10 hidden sticky top-24 h-[calc(100vh-6rem)] overflow-hidden'>
+      <div className='h-full overflow-y-auto scrollbar-hidden pl-5'>
+        <div className='uppercase text-xs text-slate-400 mb-4'>
+          On this page
+        </div>
         <Markdown
           options={{
             overrides: {
               h1: {
                 component: ({ children }) => (
-                  <HeadingLink children={children} level={0} isActive={activeSlug === slugifyMarkdownHeadline(getTextFromChildren(children))} />
+                  <HeadingLink
+                    level={0}
+                    isActive={
+                      activeSlug ===
+                      slugifyMarkdownHeadline(getTextFromChildren(children))
+                    }
+                  >
+                    {children}
+                  </HeadingLink>
                 ),
               },
               h2: {
-                component: depth >= 3 ? ({ children }) => (
-                  <HeadingLink children={children} level={0} isActive={activeSlug === slugifyMarkdownHeadline(getTextFromChildren(children))} />
-                ) : () => null,
+                component:
+                  depth >= 3
+                    ? ({ children }) => (
+                        <HeadingLink
+                          level={0}
+                          isActive={
+                            activeSlug ===
+                            slugifyMarkdownHeadline(
+                              getTextFromChildren(children),
+                            )
+                          }
+                        >
+                          {children}
+                        </HeadingLink>
+                      )
+                    : () => null,
               },
               h3: {
-                component: depth >= 3 ? ({ children }) => (
-                  <HeadingLink children={children} level={1} isActive={activeSlug === slugifyMarkdownHeadline(getTextFromChildren(children))} />
-                ) : () => null,
+                component:
+                  depth >= 3
+                    ? ({ children }) => (
+                        <HeadingLink
+                          level={1}
+                          isActive={
+                            activeSlug ===
+                            slugifyMarkdownHeadline(
+                              getTextFromChildren(children),
+                            )
+                          }
+                        >
+                          {children}
+                        </HeadingLink>
+                      )
+                    : () => null,
               },
               h4: {
-                component: depth >= 3 ? ({ children }) => (
-                  <HeadingLink children={children} level={2} isActive={activeSlug === slugifyMarkdownHeadline(getTextFromChildren(children))} />
-                ) : () => null,
+                component:
+                  depth >= 3
+                    ? ({ children }) => (
+                        <HeadingLink
+                          level={2}
+                          isActive={
+                            activeSlug ===
+                            slugifyMarkdownHeadline(
+                              getTextFromChildren(children),
+                            )
+                          }
+                        >
+                          {children}
+                        </HeadingLink>
+                      )
+                    : () => null,
               },
-            
-              ...hiddenElements('strong', 'p', 'a', 'ul', 'li', 'table', 'code', 'pre', 'blockquote', 'span', 'div', 'figure', 'Bigquote', 'Regularquote', 'specialBox'),
+              ...hiddenElements(
+                'strong',
+                'p',
+                'a',
+                'ul',
+                'li',
+                'table',
+                'code',
+                'pre',
+                'blockquote',
+                'span',
+                'div',
+                'figure',
+                'Bigquote',
+                'Regularquote',
+                'specialBox',
+              ),
             },
           }}
         >
@@ -107,16 +178,18 @@ export const TableOfContentMarkdown: React.FC<TableOfContentMarkdownProps> = ({
   );
 };
 
-export const TableOfContentLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+export const TableOfContentLayout: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
   return (
-    <div className="max-w-[1400px] mx-auto flex flex-col items-center">
-      <section className="relative">
+    <div className='max-w-[1400px] mx-auto flex flex-col items-center'>
+      <section className='relative'>
         {/* TOC on the left */}
-        <div className="w-2/5 lg:block mt-10 sticky top-24 h-[calc(100vh-6rem)] overflow-hidden">
+        <div className='w-2/5 lg:block mt-10 sticky top-24 h-[calc(100vh-6rem)] overflow-hidden'>
           <TableOfContentMarkdown markdown={String(children)} depth={2} />
         </div>
         {/* Main content on the right */}
-        <div className="col-span-4 md:col-span-3 lg:mt-20 mx-4 md:mx-0">
+        <div className='col-span-4 md:col-span-3 lg:mt-20 mx-4 md:mx-0'>
           {children}
         </div>
       </section>
diff --git a/pages/blog/posts/[slug].page.tsx b/pages/blog/posts/[slug].page.tsx
index f52b2e430..21ad201f1 100644
--- a/pages/blog/posts/[slug].page.tsx
+++ b/pages/blog/posts/[slug].page.tsx
@@ -9,9 +9,7 @@ import readingTime from 'reading-time';
 import { Headline1 } from '~/components/Headlines';
 import { SectionContext } from '~/context';
 import CarbonAds from '~/components/CarbonsAds';
-import {
-  TableOfContentMarkdown,
-} from '~/components/TOC';
+import { TableOfContentMarkdown } from '~/components/TOC';
 export async function getStaticPaths() {
   return getStaticMarkdownPaths('pages/blog/posts');
 }
@@ -92,8 +90,8 @@ export default function StaticMarkdownPage({
                     },
                   )}
                 </div>
-                <div className="">
-                <TableOfContentMarkdown markdown={content} depth={3} />
+                <div className=''>
+                  <TableOfContentMarkdown markdown={content} depth={3} />
                 </div>
                 <CarbonAds variant='sidebar' />
               </div>
diff --git a/pages/learn/[slug].page.tsx b/pages/learn/[slug].page.tsx
index 22817b37d..3c460a256 100644
--- a/pages/learn/[slug].page.tsx
+++ b/pages/learn/[slug].page.tsx
@@ -28,7 +28,6 @@ export default function StaticMarkdownPage({
   const newTitle = 'JSON Schema - ' + frontmatter.title;
   return (
     <SectionContext.Provider value={frontmatter.section || null}>
-
       <div className='flex pt-4'>
         <div className='w-full pr-5'>
           <Head>
@@ -37,11 +36,11 @@ export default function StaticMarkdownPage({
           <Headline1>{frontmatter.title}</Headline1>
           <StyledMarkdown markdown={content} />
           <NextPrevButton
-           prevLabel={frontmatter?.prev?.label}
-           prevURL={frontmatter?.prev?.url}
-           nextLabel={frontmatter?.next?.label}
-           nextURL={frontmatter?.next?.url}
-           />
+            prevLabel={frontmatter?.prev?.label}
+            prevURL={frontmatter?.prev?.url}
+            nextLabel={frontmatter?.next?.label}
+            nextURL={frontmatter?.next?.url}
+          />
           <DocsHelp markdownFile={markdownFile} />
         </div>
         <TableOfContentMarkdown markdown={content} depth={3} />
diff --git a/pages/overview/[slug].page.tsx b/pages/overview/[slug].page.tsx
index 2970df438..ea891b7ab 100644
--- a/pages/overview/[slug].page.tsx
+++ b/pages/overview/[slug].page.tsx
@@ -30,7 +30,6 @@ export default function StaticMarkdownPage({
 
   return (
     <SectionContext.Provider value={frontmatter.section || null}>
-
       <div className='flex pt-4'>
         <div className='w-full pr-5'>
           <Head>
@@ -39,11 +38,11 @@ export default function StaticMarkdownPage({
           <Headline1>{frontmatter.title}</Headline1>
           <StyledMarkdown markdown={content} />
           <NextPrevButton
-           prevLabel={frontmatter.prev?.label}
-           prevURL={frontmatter.prev?.url}
-           nextLabel={frontmatter.next.label}
-           nextURL={frontmatter.next.url}
-            />
+            prevLabel={frontmatter.prev?.label}
+            prevURL={frontmatter.prev?.url}
+            nextLabel={frontmatter.next.label}
+            nextURL={frontmatter.next.url}
+          />
           <DocsHelp markdownFile={markdownFile} />
         </div>
         <TableOfContentMarkdown markdown={content} depth={0} />