What version of starlight are you using? <p dir

Thanks for the issue and the clear reproduction <a class="user-mention notranslate" da

Bug: Nested Asides about starlight HOT 1 CLOSED

Faf4a commented on June 9, 2024

Bug: Nested Asides

from starlight.

Comments (1)

delucis commented on June 9, 2024

Thanks for the issue and the clear reproduction @Faf4a — I can confirm this is a bug. I’m not sure we ever considered nested asides when writing this code, but we should try to fix this.

For anyone interested in trying to fix this, the ::: directive asides are powered by a custom remark plugin.

My guess is this logic is what is buggy:

starlight/packages/starlight/integrations/asides.ts

Lines 156 to 172 in 8a066ff

 // remark-directive converts a container’s “label” to a paragraph in 

 // its children, but we want to pass it as the title prop to <Aside>, so 

 // we iterate over the children, find a directive label, store it for the 

 // title prop, and remove the paragraph from children. 

 let title = t(`aside.${variant}`); 

 remove(node, (child): boolean | void => { 

 if (child.data && 'directiveLabel' in child.data && child.data.directiveLabel) { 

 if ( 

 'children' in child && 

 Array.isArray(child.children) && 

 'value' in child.children[0] 

 ) { 

 title = child.children[0].value; 

 } 

 return true; 

 } 

 });

We also have tests for the remark plugin, so writing a new test for this case would be a good way to check a solution is working.

from starlight.

Bug: Nested Asides about starlight HOT 1 CLOSED

Comments (1)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	// remark-directive converts a container’s “label” to a paragraph in
	// its children, but we want to pass it as the title prop to <Aside>, so
	// we iterate over the children, find a directive label, store it for the
	// title prop, and remove the paragraph from children.
	let title = t(`aside.${variant}`);
	remove(node, (child): boolean \| void => {
	if (child.data && 'directiveLabel' in child.data && child.data.directiveLabel) {
	if (
	'children' in child &&
	Array.isArray(child.children) &&
	'value' in child.children[0]
	) {
	title = child.children[0].value;
	}
	return true;
	}
	});