@commercetools/nimbus-mcp 0.1.0 → 2.11.0

package/data/docs/routes/components-typography-code.json

@@ -0,0 +1,39 @@
+{
+  "meta": {
+    "id": "Components-Code",
+    "title": "Code",
+    "exportName": "Code",
+    "description": "renders code blocks",
+    "lifecycleState": "Stable",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/components/code/code.mdx",
+    "menu": [
+      "Components",
+      "Typography",
+      "Code"
+    ],
+    "route": "components/typography/code",
+    "tags": [
+      "component",
+      "code",
+      "syntax",
+      "monospace"
+    ],
+    "toc": [],
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\nAdd description later.\n",
+  "views": {
+    "overview": {
+      "mdx": "\nAdd description later.\n",
+      "toc": []
+    }
+  }
+}

package/data/docs/routes/components-typography-heading.json

@@ -0,0 +1,402 @@
+{
+  "meta": {
+    "id": "Components-Heading",
+    "title": "Heading",
+    "exportName": "Heading",
+    "description": "The heading component establishes typographic hierarchy throughout the product experience. It is crucial for organizing content, defining page structure, and improving content scan ability.",
+    "lifecycleState": "Stable",
+    "order": 2,
+    "repoPath": "packages/nimbus/src/components/heading/heading.mdx",
+    "menu": [
+      "Components",
+      "Typography",
+      "Heading"
+    ],
+    "route": "components/typography/heading",
+    "tags": [
+      "component",
+      "typography",
+      "heading"
+    ],
+    "toc": [
+      {
+        "value": "Overview",
+        "href": "#overview",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Resources",
+        "href": "#resources",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Variables",
+        "href": "#variables",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Typographic scale and hierarchy",
+        "href": "#typographic-scale-and-hierarchy",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          1,
+          1
+        ],
+        "parent": "root"
+      }
+    ],
+    "figmaLink": "https://www.figma.com/design/gHbAJGfcrCv7f2bgzUQgHq/NIMBUS-Guidelines?node-id=5373-117&focus-id=5373-92&m=dev",
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      },
+      {
+        "key": "guidelines",
+        "title": "Guidelines",
+        "order": 2
+      },
+      {
+        "key": "dev",
+        "title": "Implementation",
+        "order": 3
+      },
+      {
+        "key": "a11y",
+        "title": "Accessibility",
+        "order": 4
+      }
+    ]
+  },
+  "mdx": "\n## Overview\n\nGood headings are essential for organizing information and engaging users. They\nclearly communicate the content's topic, making the page scannable and easier to\nnavigate. Effective headlines also improve accessibility for screen readers and\naid search engine optimization (SEO) by defining content relevance.\n\n### Resources\n\nDeep dive on details and access design library.\n\n[Figma library](https://www.figma.com/design/gHbAJGfcrCv7f2bgzUQgHq/NIMBUS-Guidelines?node-id=5373-117&focus-id=5373-92&m=dev)\n\n## Variables\n\nGet familiar with the features.\n\n#### Typographic scale and hierarchy\n\nThese text styles are the recommended styles for headings.\n\n| **Category**   | **Description**                                               |\n| -------------- | ------------------------------------------------------------- |\n| **Heading H1** | Primary page titles and largest headers.                      |\n| **Heading H2** | Used for secondary headlines.                                 |\n| **Heading H3** | Used for tertiary headlines.                                  |\n| **Heading H4** | Commonly used for section headers and large accordion titles. |\n",
+  "views": {
+    "overview": {
+      "mdx": "\n## Overview\n\nGood headings are essential for organizing information and engaging users. They\nclearly communicate the content's topic, making the page scannable and easier to\nnavigate. Effective headlines also improve accessibility for screen readers and\naid search engine optimization (SEO) by defining content relevance.\n\n### Resources\n\nDeep dive on details and access design library.\n\n[Figma library](https://www.figma.com/design/gHbAJGfcrCv7f2bgzUQgHq/NIMBUS-Guidelines?node-id=5373-117&focus-id=5373-92&m=dev)\n\n## Variables\n\nGet familiar with the features.\n\n#### Typographic scale and hierarchy\n\nThese text styles are the recommended styles for headings.\n\n| **Category**   | **Description**                                               |\n| -------------- | ------------------------------------------------------------- |\n| **Heading H1** | Primary page titles and largest headers.                      |\n| **Heading H2** | Used for secondary headlines.                                 |\n| **Heading H3** | Used for tertiary headlines.                                  |\n| **Heading H4** | Commonly used for section headers and large accordion titles. |\n",
+      "toc": [
+        {
+          "value": "Overview",
+          "href": "#overview",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Variables",
+          "href": "#variables",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Typographic scale and hierarchy",
+          "href": "#typographic-scale-and-hierarchy",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            1,
+            1
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "a11y": {
+      "mdx": "\n## Accessibility\n\nAccessibility ensures that digital content and functionality are usable by\neveryone, including people with disabilities, by addressing visual, auditory,\ncognitive, and physical limitations.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Heading as=\"h1\" size=\"4xl\">Heading H1</Heading>\n    <Heading as=\"h2\" size=\"3xl\">Heading H2</Heading>\n    <Heading as=\"h3\" size=\"2xl\">Heading H3</Heading>\n    <Heading as=\"h4\" size=\"xl\">Heading H4</Heading>\n  </Stack>\n)\n```\n\n### Accessibility standards\n\n- **Semantic markup:** Use the correct HTML heading tags (`<h1>` to `<h6>`) to\n  establish a document outline, rather than relying on font styling alone.\n- **Logical order:** Maintain the correct hierarchical order (e.g., `<h2>`\n  follows `<h1>`, not `<h4>`).\n- **Informative text:** Ensure the headline clearly describes the content that\n  immediately follows it for easy scanning.\n- **Contrast:** Maintain a high contrast ratio (`3:1` for large text, `4.5:1`\n  for smaller/regular text) between the text and background.\n- **Visual distinction:** Ensure the headline is visually distinct (size,\n  weight) from body text to aid quick visual scanning.\n- **Language attribute:** Use the lang attribute if the headline is in a\n  language different from the rest of the page.\n",
+      "toc": [
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility standards",
+          "href": "#accessibility-standards",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "dev": {
+      "mdx": "\n## Getting started\n\n### Import\n\n```tsx\nimport { Heading, type HeadingProps } from '@commercetools/nimbus';\n```\n\n### Basic usage\n\nThe simplest implementation renders a heading with the default xl size:\n\n```jsx live-dev\nconst App = () => (\n  <Heading>Welcome to Nimbus</Heading>\n)\n```\n\n## Usage examples\n\n### Size options\n\nThe Heading component provides 11 size variants (xs through 7xl) to establish clear typographic hierarchy:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Heading size=\"xs\">Extra Small Heading (xs)</Heading>\n    <Heading size=\"sm\">Small Heading (sm)</Heading>\n    <Heading size=\"md\">Medium Heading (md)</Heading>\n    <Heading size=\"lg\">Large Heading (lg)</Heading>\n    <Heading size=\"xl\">Extra Large Heading (xl - default)</Heading>\n    <Heading size=\"2xl\">2XL Heading</Heading>\n    <Heading size=\"3xl\">3XL Heading</Heading>\n    <Heading size=\"4xl\">4XL Heading</Heading>\n    <Heading size=\"5xl\">5XL Heading</Heading>\n    <Heading size=\"6xl\">6XL Heading</Heading>\n    <Heading size=\"7xl\">7XL Heading</Heading>\n  </Stack>\n)\n```\n\n### Semantic HTML levels\n\nUse the `as` prop to render the appropriate semantic HTML heading element (h1-h6):\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Heading as=\"h1\" size=\"4xl\">Page Title (h1)</Heading>\n    <Heading as=\"h2\" size=\"2xl\">Section Heading (h2)</Heading>\n    <Heading as=\"h3\" size=\"xl\">Subsection Heading (h3)</Heading>\n    <Heading as=\"h4\" size=\"lg\">Card Title (h4)</Heading>\n    <Heading as=\"h5\" size=\"md\">Minor Heading (h5)</Heading>\n    <Heading as=\"h6\" size=\"sm\">Smallest Heading (h6)</Heading>\n  </Stack>\n)\n```\n\n**Best practice:** Match visual hierarchy (size) with semantic hierarchy (h1-h6) for optimal accessibility. Use h1 for main page titles, h2 for major sections, and so on.\n\n### Custom styling\n\nThe Heading component supports Chakra UI style props for additional customization:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Heading size=\"2xl\" color=\"primary.11\">\n      Primary Color Heading\n    </Heading>\n    <Heading size=\"xl\" marginTop=\"600\" marginBottom=\"400\">\n      Heading with Custom Margins\n    </Heading>\n    <Heading size=\"lg\" fontWeight=\"400\">\n      Lighter Weight Heading\n    </Heading>\n    <Heading size=\"md\" textAlign=\"center\">\n      Center-Aligned Heading\n    </Heading>\n  </Stack>\n)\n```\n\n## Component requirements\n\n## Accessibility\n\nThe Heading component provides semantic HTML heading elements for proper document structure. Screen readers use heading levels to navigate content and understand page hierarchy.\n\n**Heading level best practices:**\n- Use heading levels sequentially (don't skip levels)\n- Typically one h1 per page (the main title)\n- Use h2-h6 to create logical content hierarchy\n- Visual size (size prop) can differ from semantic level (as prop)\n\nIf your use case requires tracking and analytics for this component, it is good practice to add a **persistent**, **unique** id to the component:\n\n```tsx\nconst PERSISTENT_ID = \"example-heading-id\";\n\nexport const Example = () => (\n  <Heading id={PERSISTENT_ID}>Analytics-Tracked Heading</Heading>\n);\n```\n\n#### Keyboard navigation\n\nAs a non-interactive display component, Heading does not require keyboard interaction. However, screen reader users can navigate between headings using keyboard shortcuts (typically H key) to quickly scan page structure.\n\n## API reference\n\n<PropsTable id=\"Heading\" />\n\nThe Heading component extends Chakra UI's Heading component and accepts all style props including:\n\n- Typography: `size`, `fontSize`, `fontWeight`, `lineHeight`, `letterSpacing`\n- Color: `color`, `colorPalette`\n- Layout: `display`, `width`, `maxWidth`\n- Spacing: `margin`, `padding`, `gap`\n- Text formatting: `textAlign`, `textTransform`, `textDecoration`\n\n## Testing your implementation\n\nThese examples demonstrate how to test your implementation when using Heading within your application. As the component's internal functionality is already tested by Nimbus, these patterns help you verify your integration and application-specific logic.\n\n### Basic Rendering Tests\n\nVerify the heading component renders with expected content\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport { Heading, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Heading - Basic rendering\", () => {\n  it(\"renders heading with text content\", () => {\n    render(\n      <NimbusProvider>\n        <Heading>Welcome to Dashboard</Heading>\n      </NimbusProvider>\n    );\n\n    expect(\n      screen.getByRole(\"heading\", { name: \"Welcome to Dashboard\" })\n    ).toBeInTheDocument();\n  });\n\n  it(\"renders with default h2 semantic level\", () => {\n    render(\n      <NimbusProvider>\n        <Heading>Default Heading</Heading>\n      </NimbusProvider>\n    );\n\n    const heading = screen.getByRole(\"heading\", { name: \"Default Heading\" });\n    expect(heading.tagName).toBe(\"H2\");\n  });\n});\n```\n\n### Size Variant Tests\n\nTest different size variants to ensure proper rendering\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport { Heading, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Heading - Size variants\", () => {\n  it(\"renders with small size\", () => {\n    render(\n      <NimbusProvider>\n        <Heading size=\"sm\">Small Heading</Heading>\n      </NimbusProvider>\n    );\n\n    expect(\n      screen.getByRole(\"heading\", { name: \"Small Heading\" })\n    ).toBeInTheDocument();\n  });\n\n  it(\"renders with extra large size\", () => {\n    render(\n      <NimbusProvider>\n        <Heading size=\"xl\">Extra Large Heading</Heading>\n      </NimbusProvider>\n    );\n\n    expect(\n      screen.getByRole(\"heading\", { name: \"Extra Large Heading\" })\n    ).toBeInTheDocument();\n  });\n\n  it(\"renders with 5xl size\", () => {\n    render(\n      <NimbusProvider>\n        <Heading size=\"5xl\">Massive Heading</Heading>\n      </NimbusProvider>\n    );\n\n    expect(\n      screen.getByRole(\"heading\", { name: \"Massive Heading\" })\n    ).toBeInTheDocument();\n  });\n});\n```\n\n### Semantic HTML Level Tests\n\nTest heading semantic levels for proper document structure\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport { Heading, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Heading - Semantic levels\", () => {\n  it(\"renders as h1 when specified\", () => {\n    render(\n      <NimbusProvider>\n        <Heading as=\"h1\">Page Title</Heading>\n      </NimbusProvider>\n    );\n\n    const heading = screen.getByRole(\"heading\", {\n      level: 1,\n      name: \"Page Title\",\n    });\n    expect(heading).toBeInTheDocument();\n    expect(heading.tagName).toBe(\"H1\");\n  });\n\n  it(\"renders as h3 when specified\", () => {\n    render(\n      <NimbusProvider>\n        <Heading as=\"h3\">Subsection Title</Heading>\n      </NimbusProvider>\n    );\n\n    const heading = screen.getByRole(\"heading\", {\n      level: 3,\n      name: \"Subsection Title\",\n    });\n    expect(heading).toBeInTheDocument();\n    expect(heading.tagName).toBe(\"H3\");\n  });\n\n  it(\"renders as h6 when specified\", () => {\n    render(\n      <NimbusProvider>\n        <Heading as=\"h6\">Minor Heading</Heading>\n      </NimbusProvider>\n    );\n\n    const heading = screen.getByRole(\"heading\", {\n      level: 6,\n      name: \"Minor Heading\",\n    });\n    expect(heading).toBeInTheDocument();\n    expect(heading.tagName).toBe(\"H6\");\n  });\n});\n```\n\n### Style Props Tests\n\nTest that style props are properly applied\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport { Heading, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Heading - Style props\", () => {\n  it(\"applies custom id for analytics tracking\", () => {\n    const PERSISTENT_ID = \"dashboard-title\";\n\n    render(\n      <NimbusProvider>\n        <Heading id={PERSISTENT_ID}>Dashboard</Heading>\n      </NimbusProvider>\n    );\n\n    const heading = screen.getByRole(\"heading\", { name: \"Dashboard\" });\n    expect(heading).toHaveAttribute(\"id\", PERSISTENT_ID);\n  });\n\n  it(\"applies className for custom styling\", () => {\n    render(\n      <NimbusProvider>\n        <Heading className=\"custom-heading\">Styled Heading</Heading>\n      </NimbusProvider>\n    );\n\n    const heading = screen.getByRole(\"heading\", { name: \"Styled Heading\" });\n    expect(heading).toHaveClass(\"custom-heading\");\n  });\n});\n```\n\n### Accessibility Tests\n\nVerify heading accessibility features\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport { Heading, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Heading - Accessibility\", () => {\n  it(\"provides accessible heading role\", () => {\n    render(\n      <NimbusProvider>\n        <Heading>Accessible Heading</Heading>\n      </NimbusProvider>\n    );\n\n    const heading = screen.getByRole(\"heading\");\n    expect(heading).toBeInTheDocument();\n    expect(heading).toHaveAccessibleName(\"Accessible Heading\");\n  });\n\n  it(\"supports aria-label for screen readers\", () => {\n    render(\n      <NimbusProvider>\n        <Heading aria-label=\"Dashboard Overview\">Dashboard</Heading>\n      </NimbusProvider>\n    );\n\n    const heading = screen.getByRole(\"heading\", { name: \"Dashboard Overview\" });\n    expect(heading).toBeInTheDocument();\n  });\n\n  it(\"maintains proper heading hierarchy\", () => {\n    render(\n      <NimbusProvider>\n        <div>\n          <Heading as=\"h1\">Main Title</Heading>\n          <Heading as=\"h2\">Section Title</Heading>\n          <Heading as=\"h3\">Subsection Title</Heading>\n        </div>\n      </NimbusProvider>\n    );\n\n    const h1 = screen.getByRole(\"heading\", { level: 1 });\n    const h2 = screen.getByRole(\"heading\", { level: 2 });\n    const h3 = screen.getByRole(\"heading\", { level: 3 });\n\n    expect(h1).toBeInTheDocument();\n    expect(h2).toBeInTheDocument();\n    expect(h3).toBeInTheDocument();\n  });\n});\n```\n\n\n## Resources\n\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/components-heading--docs)\n- [Text Component](../components/typography/text) - Related typography component\n",
+      "toc": [
+        {
+          "value": "Getting started",
+          "href": "#getting-started",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Import",
+          "href": "#import",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic usage",
+          "href": "#basic-usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage examples",
+          "href": "#usage-examples",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Size options",
+          "href": "#size-options",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Semantic HTML levels",
+          "href": "#semantic-html-levels",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Custom styling",
+          "href": "#custom-styling",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Component requirements",
+          "href": "#component-requirements",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Keyboard navigation",
+          "href": "#keyboard-navigation",
+          "depth": 4,
+          "numbering": [
+            1,
+            4,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "API reference",
+          "href": "#api-reference",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Testing your implementation",
+          "href": "#testing-your-implementation",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic Rendering Tests",
+          "href": "#basic-rendering-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Size Variant Tests",
+          "href": "#size-variant-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Semantic HTML Level Tests",
+          "href": "#semantic-html-level-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Style Props Tests",
+          "href": "#style-props-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility Tests",
+          "href": "#accessibility-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "guidelines": {
+      "mdx": "\n## Guidelines\n\nUsing headings is a good way to keep content accessible and formatted for those\nwho use screen readers but also helps visual users understand the format of the\npage and easily scan to find the needed sections efficiently.\n\n### Best practices\n\n- **Keep hierarchy consistent**: Use a limited, predefined set of text styles to\n  maintain visual consistency across all products. Add custom styles with\n  caution.\n- **Prioritize line length**: Use optimal line lengths (typically 50 to 75\n  characters per line) to prevent eye strain and facilitate reading.\n- **Use concise language**: Write clearly, avoiding unnecessary jargon or overly\n  long sentences to reduce cognitive load.\n- **Break up content**: Use short paragraphs, lists, and headings to break up\n  large blocks of text, making content easier to scan.\n- **Maintain consistent tone**: The language, style, and formality should be\n  consistent throughout the application, reflecting the brand's voice.\n- **Handle truncation gracefully**: When necessary, truncate long text with\n  ellipses and provide a tooltip or interaction element to reveal the full\n  content.\n- **Keep length in mind for translation**: When supporting text localization,\n  length can expand more than 20%. Design experiences that can be flexible to\n  shortening and lengthening of content.\n\n### Header Do's and Don'ts\n\n> [!TIP]\\\n> **Do**\n>\n> - Use predefined headings, body sizes, and weights to clearly signal the\n>   importance of content.\n> - Always maintain sufficient contrast between text and its background to meet\n>   WCAG AA standards (4.5:1 minimum).\n> - Headings should be short and aid users when scanning sections.\n> - Ensure adequate vertical spacing (line-height) to prevent text lines from\n>   colliding and improve readability.\n> - Write clearly, avoiding unnecessary jargon and overly long sentences.\n\n> [!CAUTION]\\\n> **Don't**\n>\n> - Avoid introducing too many different font sizes, weights, or families, which\n>   destroys visual consistency.\n> - Never use color as the only method to convey meaning (e.g., indicating an\n>   error solely with red text).\n> - Avoid excessively long lines of text (over 80 characters), which makes\n>   tracking difficult and causes fatigue.\n> - Avoid line heights that are too small, which makes text visually dense and\n>   difficult to read.\n> - Never truncate text without providing a clear way (like a tooltip) to view\n>   the full content.\n> - Avoid pairing text colors that barely distinguish themselves from the\n>   background, even if they look \"stylish.\"\n",
+      "toc": [
+        {
+          "value": "Guidelines",
+          "href": "#guidelines",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Best practices",
+          "href": "#best-practices",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Header Do's and Don'ts",
+          "href": "#header-dos-and-donts",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}