feat: integrate starlight-heading-badges (#85)

CONTRIBUTING.md

@@ -134,6 +134,14 @@ import { Tabs, TabItem } from '@astrojs/starlight/components';
 Common content
 ```
 
+## Badges
+
+You can use badges in the documentation in a several ways:
+
+- [`Badge`](https://starlight.astro.build/guides/components/) component from Starlight to use in the markdown files.
+- Sidebar item by specifying the `sidebar.badge` in the [document frontmatter](https://starlight.astro.build/reference/frontmatter/#sidebar).
+- Add a badge to the heading in the markdown file: `### Example :badge[New]`. [More examples](https://starlight-heading-badges.vercel.app/usage/).
+
 ## API Documentation
 
 The yml specification for the API documentation is located in the `src/assets/api` directory.

astro.config.mjs

@@ -4,6 +4,7 @@ import tailwind from '@astrojs/tailwind';
 import sitemap from '@astrojs/sitemap';
 import starlightUtils from '@lorenzo_lewis/starlight-utils';
 import starlightLinksValidator from 'starlight-links-validator';
+import starlightHeadingBadges from 'starlight-heading-badges';
 import { rehypeHeadingIds } from '@astrojs/markdown-remark';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypeExternalLinks from 'rehype-external-links';
@@ -107,6 +108,7 @@ const config = defineConfig({
             '/developer/enterprise/api/v2/string-based/**',
           ],
         }),
+        starlightHeadingBadges(),
       ],
       social: {
         'x.com': 'https://x.com/crowdin',

package.json

@@ -37,6 +37,7 @@
     "rehype-external-links": "^3.0.0",
     "remark-custom-heading-id": "^2.0.0",
     "sharp": "^0.33.5",
+    "starlight-heading-badges": "^0.1.0",
     "starlight-links-validator": "^0.10.1",
     "tailwindcss": "^3.4.10",
     "typescript": "^5.5.4"