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