diff --git a/docs/src/content/docs/components/file-tree.mdx b/docs/src/content/docs/components/file-tree.mdx index bede1bb1732..652fdb32b29 100644 --- a/docs/src/content/docs/components/file-tree.mdx +++ b/docs/src/content/docs/components/file-tree.mdx @@ -218,6 +218,49 @@ import { FileTree } from '@astrojs/starlight/components'; +### Escape white-space in file names + +To include white-space in a file or directory name, escape it with double quotes. + + + +```mdx {5,6} +import { FileTree } from '@astrojs/starlight/components'; + + + +- "main folder/" file container +- "main folder/" file container + - "The Header.astro" main file + - … + + +``` + + + +```markdoc {2,3} +{% filetree %} +- "main folder/" file container +- "main folder/" file container + - "The Header.astro" main file + - … +{% /filetree %} +``` + + + + + +- "main folder/" file container +- "main folder/" file container + - "The Header.astro" main file + - … + + + + + ## `` Props **Implementation:** [`FileTree.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/FileTree.astro) diff --git a/packages/starlight/__tests__/remark-rehype/rehype-file-tree.test.ts b/packages/starlight/__tests__/remark-rehype/rehype-file-tree.test.ts index dcbe62f59ab..c1c31f07aa2 100644 --- a/packages/starlight/__tests__/remark-rehype/rehype-file-tree.test.ts +++ b/packages/starlight/__tests__/remark-rehype/rehype-file-tree.test.ts @@ -84,6 +84,78 @@ describe('processor', () => { expect(extractFileTree(html)).toMatchFileSnapshot('./snapshots/file-tree-comment-nodes.html'); }); + test('double quotes allows to add white-space to file names', () => { + const html = processTestFileTree(``); + + expect(extractFileTree(html)).toMatchFileSnapshot('./snapshots/file-tree-double-quotes-file.html'); + }); + + test('double quotes file name with text comments', () => { + const html = processTestFileTree(``); + + expect(extractFileTree(html)).toMatchFileSnapshot('./snapshots/file-tree-double-quotes-file-text.html'); + }); + + test('double quotes file name with node comments', () => { + const html = processTestFileTree(``); + + expect(extractFileTree(html)).toMatchFileSnapshot('./snapshots/file-tree-double-quotes-file-node.html'); + }); + + test('double quotes allows to add white-space to folder names', () => { + const html = processTestFileTree(``); + + expect(extractFileTree(html)).toMatchFileSnapshot('./snapshots/file-tree-double-quotes-folder.html'); + }); + + test('double quotes folder name with text comments', () => { + const html = processTestFileTree(``); + + expect(extractFileTree(html)).toMatchFileSnapshot('./snapshots/file-tree-double-quotes-folder-text.html'); + }); + + test('double quotes folder name with node comments', () => { + const html = processTestFileTree(``); + + expect(extractFileTree(html)).toMatchFileSnapshot('./snapshots/file-tree-double-quotes-folder-node.html'); + }); + + test('special quotes allows to add white-space to file names', () => { + const html = processTestFileTree(``); + + expect(extractFileTree(html)).toMatchFileSnapshot('./snapshots/file-tree-double-quotes-file.html'); + }); + + test('special quotes file name with text comments', () => { + const html = processTestFileTree(``); + + expect(extractFileTree(html)).toMatchFileSnapshot('./snapshots/file-tree-double-quotes-file-text.html'); + }); + + test('special quotes file name with node comments', () => { + const html = processTestFileTree(``); + + expect(extractFileTree(html)).toMatchFileSnapshot('./snapshots/file-tree-double-quotes-file-node.html'); + }); + + test('special quotes allows to add white-space to folder names', () => { + const html = processTestFileTree(``); + + expect(extractFileTree(html)).toMatchFileSnapshot('./snapshots/file-tree-double-quotes-folder.html'); + }); + + test('special quotes folder name with text comments', () => { + const html = processTestFileTree(``); + + expect(extractFileTree(html)).toMatchFileSnapshot('./snapshots/file-tree-double-quotes-folder-text.html'); + }); + + test('special quotes folder name with node comments', () => { + const html = processTestFileTree(``); + + expect(extractFileTree(html)).toMatchFileSnapshot('./snapshots/file-tree-double-quotes-folder-node.html'); + }); + test('identifies directory with either a file name ending with a slash or a nested list', () => { const html = processTestFileTree(`