buildAuditCard() — astro Function Reference

Architecture documentation for the buildAuditCard() function in audit-ui.ts from the astro codebase.

Function typescript DevToolbar ToolbarClient calls 2 called by 1

Entity Profile

DevToolbar→ ToolbarClient→ buildAuditCard() — astro Function Reference

Dependency Diagram

graph TD
  67b8a6c1_a7f3_4950_fcf5_b8cd52e8a7e1["buildAuditCard()"]
  d8edbadc_4bcf_95cc_05c1_73dd76db87a8["audit-ui.ts"]
  67b8a6c1_a7f3_4950_fcf5_b8cd52e8a7e1 -->|defined in| d8edbadc_4bcf_95cc_05c1_73dd76db87a8
  9f3390ee_a97d_3811_33c2_635c8f65c91b["createAuditUI()"]
  9f3390ee_a97d_3811_33c2_635c8f65c91b -->|calls| 67b8a6c1_a7f3_4950_fcf5_b8cd52e8a7e1
  d0e59486_d266_5fae_9fe6_c95248bcda66["truncate()"]
  67b8a6c1_a7f3_4950_fcf5_b8cd52e8a7e1 -->|calls| d0e59486_d266_5fae_9fe6_c95248bcda66
  ddfe1348_dc60_b84e_eff6_0b61e2a821b0["simpleRenderMarkdown()"]
  67b8a6c1_a7f3_4950_fcf5_b8cd52e8a7e1 -->|calls| ddfe1348_dc60_b84e_eff6_0b61e2a821b0
  style 67b8a6c1_a7f3_4950_fcf5_b8cd52e8a7e1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/client/dev-toolbar/apps/audit/ui/audit-ui.ts lines 96–164

function buildAuditCard(
	rule: ResolvedAuditRule,
	highlightElement: HTMLElement,
	auditedElement: Element,
	audits: Audit[],
) {
	const card = document.createElement(
		'astro-dev-toolbar-audit-list-item',
	) as DevToolbarAuditListItem;

	card.clickAction = () => {
		if (card.hasAttribute('active')) return;

		audits.forEach((audit) => {
			audit.card?.toggleAttribute('active', false);
		});
		highlightElement.scrollIntoView();
		card.isManualFocus = true;
		highlightElement.focus();
		card.isManualFocus = false;
	};

	const selectorTitleContainer = document.createElement('section');
	selectorTitleContainer.classList.add('selector-title-container');
	const selector = document.createElement('span');
	const selectorName = truncate(auditedElement.tagName.toLowerCase(), 8);
	selector.classList.add('audit-selector');
	selector.innerHTML = escapeHTML(selectorName);

	const title = document.createElement('h3');
	title.classList.add('audit-title');
	title.innerText = rule.title;

	selectorTitleContainer.append(selector, title);
	card.append(selectorTitleContainer);

	const extendedInfo = document.createElement('div');
	extendedInfo.classList.add('extended-info');

	const selectorButton = document.createElement('button');
	selectorButton.className = 'audit-selector reset-button';
	selectorButton.innerHTML = `${selectorName} <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M128,136v64a8,8,0,0,1-16,0V155.32L45.66,221.66a8,8,0,0,1-11.32-11.32L100.68,144H56a8,8,0,0,1,0-16h64A8,8,0,0,1,128,136ZM208,32H80A16,16,0,0,0,64,48V96a8,8,0,0,0,16,0V48H208V176H160a8,8,0,0,0,0,16h48a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Z"></path></svg>`;

	selectorButton.addEventListener('click', () => {
		highlightElement.scrollIntoView();
		highlightElement.focus();
	});

	extendedInfo.append(title.cloneNode(true));
	extendedInfo.append(selectorButton);
	extendedInfo.append(document.createElement('hr'));

	const message = document.createElement('p');
	message.classList.add('audit-message');
	message.innerHTML = simpleRenderMarkdown(rule.message);
	extendedInfo.appendChild(message);

	const description = rule.description;
	if (description) {
		const descriptionElement = document.createElement('p');
		descriptionElement.classList.add('audit-description');
		descriptionElement.innerHTML = simpleRenderMarkdown(description);
		extendedInfo.appendChild(descriptionElement);
	}

	card.shadowRoot.appendChild(extendedInfo);

	return card;
}