From ada51ee1500d07c1819059f57e97dc6e97b4d2ba Mon Sep 17 00:00:00 2001
From: "Ms. Boba"
Date: Tue, 23 Jul 2024 06:37:26 -0700
Subject: [PATCH] Allow asides titles to contain markdown formatting (#2126)
Co-authored-by: Chris Swithinbank
Co-authored-by: Essential Randomness
---
.changeset/mean-tigers-hunt.md | 5 +++
.../__tests__/remark-rehype/asides.test.ts | 33 +++++++++++++++++++
packages/starlight/integrations/asides.ts | 15 +++++----
packages/starlight/package.json | 1 +
pnpm-lock.yaml | 3 ++
5 files changed, 50 insertions(+), 7 deletions(-)
create mode 100644 .changeset/mean-tigers-hunt.md
diff --git a/.changeset/mean-tigers-hunt.md b/.changeset/mean-tigers-hunt.md
new file mode 100644
index 0000000000..c64abfa78b
--- /dev/null
+++ b/.changeset/mean-tigers-hunt.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Adds support for markdown formatting in aside titles
diff --git a/packages/starlight/__tests__/remark-rehype/asides.test.ts b/packages/starlight/__tests__/remark-rehype/asides.test.ts
index a46f8e0d73..327766e459 100644
--- a/packages/starlight/__tests__/remark-rehype/asides.test.ts
+++ b/packages/starlight/__tests__/remark-rehype/asides.test.ts
@@ -70,6 +70,39 @@ Some text
});
});
+describe('custom labels with nested markdown', () => {
+ test.each(['note', 'tip', 'caution', 'danger'])('%s with custom code label', async (type) => {
+ const label = 'Custom `code` Label';
+ const labelWithoutMarkdown = 'Custom code Label';
+ const labelHtml = 'Custom code
Label';
+ const res = await processor.render(`
+:::${type}[${label}]
+Some text
+:::
+ `);
+ expect(res.code).includes(`aria-label="${labelWithoutMarkdown}"`);
+ expect(res.code).includes(`${labelHtml}
`);
+ });
+});
+
+describe('custom labels with doubly-nested markdown', () => {
+ test.each(['note', 'tip', 'caution', 'danger'])(
+ '%s with custom doubly-nested label',
+ async (type) => {
+ const label = 'Custom **strong with _emphasis_** Label';
+ const labelWithoutMarkdown = 'Custom strong with emphasis Label';
+ const labelHtml = 'Custom strong with emphasis Label';
+ const res = await processor.render(`
+:::${type}[${label}]
+Some text
+:::
+ `);
+ expect(res.code).includes(`aria-label="${labelWithoutMarkdown}"`);
+ expect(res.code).includes(`${labelHtml}`);
+ }
+ );
+});
+
test('ignores unknown directive variants', async () => {
const res = await processor.render(`
:::unknown
diff --git a/packages/starlight/integrations/asides.ts b/packages/starlight/integrations/asides.ts
index 3218e509c4..f98cc09082 100644
--- a/packages/starlight/integrations/asides.ts
+++ b/packages/starlight/integrations/asides.ts
@@ -2,7 +2,7 @@
import type { AstroConfig, AstroIntegration, AstroUserConfig } from 'astro';
import { h as _h, s as _s, type Properties } from 'hastscript';
-import type { Node, Paragraph as P, Parent, Root } from 'mdast';
+import type { Node, Paragraph as P, Parent, PhrasingContent, Root } from 'mdast';
import {
type Directives,
directiveToMarkdown,
@@ -10,6 +10,7 @@ import {
type LeafDirective,
} from 'mdast-util-directive';
import { toMarkdown } from 'mdast-util-to-markdown';
+import { toString } from 'mdast-util-to-string';
import remarkDirective from 'remark-directive';
import type { Plugin, Transformer } from 'unified';
import { visit } from 'unist-util-visit';
@@ -156,16 +157,16 @@ function remarkAsides(options: AsidesOptions): Plugin<[], Root> {
// prop to