Add accessible <FileTree> component to replace ASCII art

package.json

@@ -53,6 +53,7 @@
     "fast-glob": "^3.2.11",
     "github-slugger": "^1.5.0",
     "gray-matter": "^4.0.3",
+    "hast-util-from-html": "^1.0.0",
     "hast-util-to-string": "^2.0.0",
     "hastscript": "^7.0.2",
     "html-escaper": "^3.0.3",
@@ -70,6 +71,7 @@
     "prettier": "^2.8.1",
     "prettier-plugin-astro": "^0.7.0",
     "prompts": "^2.4.2",
+    "rehype": "^12.0.1",
     "remark": "^14.0.2",
     "remark-custom-heading-id": "^1.0.0",
     "remark-directive": "^2.0.1",

src/components/FileTree.astro

@@ -0,0 +1,135 @@
+---
+import { useTranslations } from '../i18n/util';
+import { fileTreeProcessor } from './internal/rehype-file-tree';
+
+const content = await Astro.slots.render('default');
+if (!/^\s*<ul>/.test(content)) {
+	throw new Error(
+		`<FileTree> component expects its content to be an unordered list but found HTML starting with “${content.slice(
+			0,
+			20
+		)}...”`
+	);
+}
+
+const t = useTranslations(Astro);
+
+const processedContent = await fileTreeProcessor.process({
+	value: content,
+	data: { directoryLabel: t('fileTree.directoryLabel') },
+});
+---
+
+<docs-file-tree set:html={processedContent} />
+
+<style is:global>
+	docs-file-tree {
+		--x-space: 1.75em;
+		--y-pad: 0.2em;
+
+		display: block;
+		border: 1px solid var(--theme-divider);
+		border-radius: 0.25rem;
+		padding: 1rem 0.5rem;
+		background-color: var(--theme-bg-offset);
+		font-size: var(--theme-text-xs);
+		overflow-x: auto;
+	}
+
+	docs-file-tree .directory > details,
+	docs-file-tree .directory > details:hover,
+	docs-file-tree .directory > details[open] {
+		border: 0;
+		padding: 0;
+		padding-inline-start: var(--x-space);
+		background: transparent;
+	}
+
+	docs-file-tree .directory > details > summary,
+	docs-file-tree .directory > details[open] > summary {
+		border: 0;
+		padding: var(--y-pad) 0.4em;
+		font-weight: normal;
+		color: var(--theme-text);
+		max-width: 100%;
+	}
+
+	docs-file-tree .directory > details > summary::marker,
+	docs-file-tree .directory > details > summary::-webkit-details-marker {
+		color: currentColor;
+	}
+
+	docs-file-tree .directory > details > summary:hover .tree-icon,
+	docs-file-tree .directory > details > summary:hover {
+		color: var(--theme-accent-secondary);
+	}
+
+	docs-file-tree ul:is(ul),
+	docs-file-tree .directory > details ul:is(ul) {
+		margin: 0;
+		margin-inline-start: 0.93em;
+		border-inline-start: 2px solid var(--theme-divider);
+		padding: 0;
+		list-style: none;
+	}
+
+	docs-file-tree > ul:is(ul) {
+		margin: 0;
+		border: 0;
+	}
+
+	docs-file-tree li:is(li) {
+		margin: 0;
+		padding: var(--y-pad) 0;
+	}
+
+	docs-file-tree .file {
+		margin-inline-start: var(--x-space);
+		color: var(--theme-text);
+	}
+
+	docs-file-tree .tree-entry {
+		display: inline-flex;
+		align-items: flex-start;
+		flex-wrap: wrap;
+		max-width: calc(100% - 1em);
+	}
+
+	@media (min-width: 30em) {
+		docs-file-tree .tree-entry {
+			flex-wrap: nowrap;
+		}
+	}
+
+	docs-file-tree .tree-entry > :first-child {
+		flex-shrink: 0;
+	}
+
+	docs-file-tree .empty {
+		color: var(--theme-text-lighter);
+		padding-inline-start: 0.5em;
+	}
+
+	docs-file-tree .comment {
+		color: var(--theme-text-lighter);
+		padding-inline-start: 2em;
+		max-width: 30em;
+		min-width: 15em;
+	}
+
+	docs-file-tree .highlight {
+		display: inline-block;
+		border-radius: 0.3em;
+		padding-inline-end: 0.5em;
+		background-color: var(--theme-bg-accent);
+		outline: 1px solid var(--theme-shade-subtle);
+	}
+
+	.tree-icon {
+		fill: currentColor;
+		vertical-align: middle;
+		margin: -0.75em 0.2em;
+		width: 1.5em;
+		height: 1.5em;
+	}
+</style>