starlight-heading-badges 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # starlight-heading-badges
 
+## 0.6.0
+
+### Minor Changes
+
+- [#18](https://github.com/HiDeoo/starlight-heading-badges/pull/18) [`261fda4`](https://github.com/HiDeoo/starlight-heading-badges/commit/261fda465d560146c55a2f148f36a28de384fdc8) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Adds support for rendering multiple badges to the same heading.
+
+### Patch Changes
+
+- [#16](https://github.com/HiDeoo/starlight-heading-badges/pull/16) [`3a590c7`](https://github.com/HiDeoo/starlight-heading-badges/commit/3a590c7332c0bdaacd6109b5597b84cd5a415daf) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fixes an issue for heading badges with multiple spaces.
+
 ## 0.5.0
 
 ### Minor Changes

package/components/HeadingBadgesMobileTableOfContents.astro

@@ -113,7 +113,7 @@ const { toc } = Astro.locals.starlightRoute
 </style>
 
 <script>
-  import { deserializeBadge } from '../libs/badge'
+  import { deserializeBadges } from '../libs/badge'
   import { StarlightTOC } from '../libs/starlight-toc'
 
   class MobileStarlightTOC extends StarlightTOC {
@@ -123,15 +123,18 @@ const { toc } = Astro.locals.starlightRoute
       if (display) {
         const heading = link.dataset['shbHeading']
         if (heading) {
-          const badge = deserializeBadge(heading)
-          if (badge) {
+          const badges = deserializeBadges(heading)
+          if (badges.length > 0) {
             display.textContent = ''
-            display.append(document.createTextNode(`${badge.heading} `))
-            const span = document.createElement('span')
-            span.textContent = badge.text
-            span.dataset['shbBadge'] = ''
-            span.dataset['shbBadgeVariant'] = badge.variant
-            display.append(span)
+            display.append(document.createTextNode(`${badges[0]?.heading} `))
+
+            for (const badge of badges) {
+              const span = document.createElement('span')
+              span.textContent = badge.text
+              span.dataset['shbBadge'] = ''
+              span.dataset['shbBadgeVariant'] = badge.variant
+              display.append(span)
+            }
 
             return
           }

package/components/TableOfContentHeading.astro

@@ -1,7 +1,7 @@
 ---
 import { Badge } from '@astrojs/starlight/components'
 
-import { deserializeBadge } from '../libs/badge'
+import { deserializeBadges } from '../libs/badge'
 
 interface Props {
   text: string
@@ -9,14 +9,16 @@ interface Props {
 
 const { text } = Astro.props
 
-const badge = deserializeBadge(text)
+const badges = deserializeBadges(text)
 ---
 
 {
-  badge ? (
+  badges.length > 0 ? (
     <span class="shb-heading">
-      {badge.heading.trim()}&nbsp;
-      <Badge size="small" text={badge.text} variant={badge.variant} />
+      {badges[0]?.heading.trim()}&nbsp;
+      {badges.map((badge) => (
+        <Badge size="small" text={badge.text} variant={badge.variant} />
+      ))}
     </span>
   ) : (
     <span>{text}</span>

package/libs/badge.ts

@@ -14,23 +14,34 @@ export function serializeBadge(variant: Variant, text: string) {
     serializedBadgeDelimiter,
     variant,
     serializedBadgeDelimiter,
-    text.replace(' ', serializedBadgeSpaceDelimiter),
+    text.replaceAll(' ', serializedBadgeSpaceDelimiter),
     serializedBadgeDelimiter,
   ].join('')
 }
 
-export function deserializeBadge(value: string): Badge | undefined {
-  const serializeBadge = value.split(' ').pop()
-  if (!serializeBadge) return
+export function deserializeBadges(value: string): Badge[] {
+  const badges: Badge[] = []
 
-  const parts = serializeBadge.split(serializedBadgeDelimiter)
+  const parts = value.split(' ').reverse()
+
+  for (const part of parts) {
+    const badge = deserializeBadge(value, part)
+    if (!badge) break
+    badges.unshift(badge)
+  }
+
+  return badges
+}
+
+function deserializeBadge(heading: string, value: string): Badge | undefined {
+  const parts = value.split(serializedBadgeDelimiter)
   const [, variant, text] = parts
 
   if (!variant || !isBadgeVariant(variant) || !text) return undefined
 
   return {
-    heading: value.replace(new RegExp(`${serializedBadgeDelimiter}.*${serializedBadgeDelimiter}`), ''),
-    text: text.replace(serializedBadgeSpaceDelimiter, ' '),
+    heading: heading.replace(new RegExp(`${serializedBadgeDelimiter}.*${serializedBadgeDelimiter}`), ''),
+    text: text.replaceAll(serializedBadgeSpaceDelimiter, ' '),
     variant,
   }
 }

package/libs/rehype.ts

@@ -3,7 +3,7 @@ import 'mdast-util-directive'
 import type { ElementContent, Root } from 'hast'
 import { CONTINUE, SKIP, visit } from 'unist-util-visit'
 
-import { deserializeBadge, type Badge } from './badge'
+import { deserializeBadges, type Badge } from './badge'
 
 export function rehypeStarlightHeadingBadges() {
   return function transformer(tree: Root) {
@@ -11,14 +11,16 @@ export function rehypeStarlightHeadingBadges() {
       if (node.type === 'text') {
         if (index === undefined || !parent) return CONTINUE
 
-        const badge = deserializeBadge(node.value)
-        if (!badge) return SKIP
+        const badges = deserializeBadges(node.value)
+        if (badges.length === 0) return SKIP
 
-        if (badge.heading) {
-          node.value = badge.heading
-          parent.children.splice(index + 1, 0, createBadgeNode(badge))
-        } else {
-          parent.children.splice(index, 1, createBadgeNode(badge))
+        for (const badge of badges.reverse()) {
+          if (badge.heading) {
+            node.value = badge.heading
+            parent.children.splice(index + 1, 0, ...createBadgeNode(badge))
+          } else {
+            parent.children.splice(index, 1, ...createBadgeNode(badge))
+          }
         }
 
         return SKIP
@@ -29,14 +31,20 @@ export function rehypeStarlightHeadingBadges() {
   }
 }
 
-function createBadgeNode(badge: Badge): ElementContent {
-  return {
-    type: 'element',
-    tagName: 'span',
-    properties: {
-      'data-shb-badge': '',
-      'data-shb-badge-variant': badge.variant,
+function createBadgeNode(badge: Badge): ElementContent[] {
+  return [
+    {
+      type: 'element',
+      tagName: 'span',
+      properties: {
+        'data-shb-badge': '',
+        'data-shb-badge-variant': badge.variant,
+      },
+      children: [{ type: 'text', value: badge.text }],
     },
-    children: [{ type: 'text', value: badge.text }],
-  }
+    {
+      type: 'text',
+      value: ' ',
+    },
+  ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "starlight-heading-badges",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "license": "MIT",
   "description": "Starlight plugin to add badges to your Markdown and MDX headings.",
   "author": "HiDeoo <github@hideoo.dev> (https://hideoo.dev)",