fix: resolve React hydration mismatches and unrecognized tag warnings

[sarcaxticlarka]

What kind of change does this PR introduce?

A bugfix.
Issue Number:

• Closes 🐛 Bug: React Hydration Mismatch & Unrecognized <tableofcontent> tag warnings #2355
  Screenshots/videos:

If relevant, did you update the documentation?

No, but I did update the internal markdown styling files (md-style-guide.md, specification-links.md, getting-started-step-by-step.md) to reflect the capitalized component name.

Summary

This PR resolves two major console warning/error flows occurring on the Homepage and Documentation pages:

1. Hydration Mismatches & src Warnings: The Sidebar icons (/icons/eye.svg, etc.) were defaulting to an empty string on the initial server render, triggering a missing src warning and a subsequent hydration mismatch. This PR updates the conditionally rendered icon paths in components/Sidebar.tsx to utilize a mounted state check, defaulting to the light SVGs during SSR so it perfectly matches the initial client render. Additionally, an invalid <button> wrapping an <a> tag and an accidental newline in an image alt text on the Homepage were fixed, removing all layout shift hydration console errors.
2. Unrecognized HTML Tag: A persistent console warning was triggered by <tableofcontent> existing as an uncapitalized HTML tag rather than a custom React component. This PR renames all instances of the tag to properly capitalized <TableOfContents /> across the site's .md files and intercepts it correctly in the parser overrides in components/StyledMarkdownBlock.tsx.
   The Developer console is now fully clean of Hydration and React Unrecognized Tag warnings during hard-reloads.

Does this PR introduce a breaking change?

No.

Checklist

Please ensure the following tasks are completed before submitting this pull request.

• Read, understood, and followed the contributing guidelines.

[Copilot]

Pull request overview

This PR addresses React console warnings on the homepage and docs pages by aligning SSR/client renders (to prevent hydration mismatches) and by properly mapping a custom Table of Contents tag in markdown so React doesn’t treat it as an unknown HTML element.

Changes:

• Update markdown usage from <tableofcontent /> to <TableOfContents /> and adjust the markdown renderer overrides accordingly.
• Fix invalid DOM nesting on the homepage (anchor inside button) and normalize an image alt text to avoid hydration mismatches.
• Ensure sidebar icon src values are stable during SSR by deferring theme-dependent icon selection until after mount.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
pages/specification-links.md	Switch TOC tag to capitalized custom component usage.
pages/md-style-guide.md	Update internal docs to reflect the new TOC tag name.
pages/learn/getting-started-step-by-step/getting-started-step-by-step.md	Switch TOC tag to capitalized custom component usage.
pages/index.page.tsx	Remove invalid <button><a/></button> nesting and fix alt text newline to reduce hydration mismatches.
components/StyledMarkdownBlock.tsx	Update markdown-to-jsx override key to match the new TOC tag name.
components/Sidebar.tsx	Prevent SSR icon src empties/mismatches by using a mounted gate for theme-dependent icons.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[Siddhartha20242]

Hi, @sarcaxticlarka Please make sure that your issue is accepted and you are assigned to make a PR before raising the PR. Also, our maintainers are busy most of the time so it helps them. Here is a message by one of the organization lead and maintainer - " We don't require issues before PRs just for the sake of process. We require issues because we can discuss the need and different approaches to fulfilling that need in issues before any significant work is done". Thank you :)