json-schema-org · sarcaxticlarka · Mar 18, 2026
@@ -334,26 +334,16 @@
   }, [router.asPath]);
 
   const { resolvedTheme } = useTheme();
-  const [learn_icon, setLearn_icon] = useState('');
-  const [reference_icon, setReference_icon] = useState('');
-  const [spec_icon, setSpec_icon] = useState('');
-  const [overview_icon, setOverview_icon] = useState('');
-  const [guides_icon, setGuides_icon] = useState('');
+  const [mounted, setMounted] = useState(false);
   useEffect(() => {
-    if (resolvedTheme === 'dark') {
-      setOverview_icon('/icons/eye-dark.svg');
-      setLearn_icon('/icons/compass-dark.svg');
-      setReference_icon('/icons/book-dark.svg');
-      setSpec_icon('/icons/clipboard-dark.svg');
-      setGuides_icon('/icons/grad-cap-dark.svg');
-    } else {
-      setOverview_icon('/icons/eye.svg');
-      setLearn_icon('/icons/compass.svg');
-      setReference_icon('/icons/book.svg');
-      setSpec_icon('/icons/clipboard.svg');
-      setGuides_icon('/icons/grad-cap.svg');
-    }
-  }, [resolvedTheme]);
+    setMounted(true);
+  }, []);
+
+  const overview_icon = mounted && resolvedTheme === 'dark' ? '/icons/eye-dark.svg' : '/icons/eye.svg';
+  const learn_icon = mounted && resolvedTheme === 'dark' ? '/icons/compass-dark.svg' : '/icons/compass.svg';
+  const reference_icon = mounted && resolvedTheme === 'dark' ? '/icons/book-dark.svg' : '/icons/book.svg';
+  const spec_icon = mounted && resolvedTheme === 'dark' ? '/icons/clipboard-dark.svg' : '/icons/clipboard.svg';
+  const guides_icon = mounted && resolvedTheme === 'dark' ? '/icons/grad-cap-dark.svg' : '/icons/grad-cap.svg';
 
   return (
     <div id='sidebar' className='lg:mt-8 w-4/5 mx-auto lg:ml-4'>

@@ -381,7 +381,7 @@ export const StyledMarkdownBlock = ({ markdown }: StyledMarkdownBlockProps) => {
                 );
               },
             },
-            tableofcontent: {
+            TableOfContents: {
               component: ({ depth }) => {
                 return <TableOfContent depth={depth} />;
               },

@@ -408,14 +408,13 @@
                   projects, and connect with +5000 practitioners and experts.
                 </p>
               </Link>
-              <button className='w-full lg:w-1/2 rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white h-[40px] flex items-center justify-center mx-auto dark:border-none'>
-                <a
-                  href='https://json-schema.org/slack'
-                  className='flex items-center '
-                >
+              <a
+                href='https://json-schema.org/slack'
+                className='w-full lg:w-1/2 rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white h-[40px] flex items-center justify-center mx-auto dark:border-none'
+              >
                   {isClient && (
                     <>
                       <Image
                        src='/img/logos/slack_logo_small-white.svg'
                        className='w-4 h-4 mr-2'
                        width={16}
@@ -425,8 +424,7 @@
                     </>
                   )}
                   Join Slack
-                </a>
-              </button>
+              </a>
             </div>
             {/* BlogPost Data */}
             <div className='p-4 w-full mb-6 dark:shadow-2xl'>
@@ -862,8 +860,7 @@
                 <img
                   src={logos.apideck}
                   className='w-44 transition-transform duration-300 hover:scale-105'
-                  alt='The Realtime Unified API
-for Accounting integrations'
+                  alt='The Realtime Unified API for Accounting integrations'
                 />
               </a>
               <a

@@ -15,7 +15,7 @@ After creating your JSON Schema, you can then validate example data against your
 
 If you already know how to create JSON Schemas and you are looking for different JSON Schema use cases like schema generation, code generation, documentation, UI generation or JSON Schema processing or conversion, please visit [Tools](https://json-schema.org/tools) and explore the amazing tooling available in the JSON Schema Ecosystem.
 
-<tableofcontent depth={2} />
+<TableOfContents depth={2} />
 
 <span id="overview"></span>
 

@@ -62,7 +62,7 @@ Use the following tags to give readers relevant information that is not part of
 To help readers find the information they are looking for within the document, add a table of contents at the beginning. 
 
 ```markdown
-<tableofcontent content= {content} depth= {depth}/>
+<TableOfContents content= {content} depth= {depth}/>
 ```
 
 ### Blockquote

@@ -13,7 +13,7 @@ next:
 
 You can find the latest released draft on the [Specification](../../specification) page.  The complex numbering and naming system for drafts and meta-schemas is fully explained here as well.
 
-<tableofcontent depth={4} />
+<TableOfContents depth={4} />
 
 ## Understanding draft names and numbers