[{"data":1,"prerenderedAt":20},["ShallowReactive",2],{"clay-page:\u002Fwriting\u002Fcomponents\u002Ffile-trees":3},{"html":4,"toc":5,"description":16,"hero":17,"list":18,"socialImage":19},"\u003Ch1 id=\"file-trees\">File Trees\u003C\u002Fh1>\n\u003Cp>A file tree shows how a project is laid out. Write a code block in the language \u003Ccode>tree\u003C\u002Fcode> with one name per line, indented under its folder:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">```tree\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">my-project\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  docs\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">    index.md       # the start page\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">    guides\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">      setup.md\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">      img\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">        screen.png\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">    ...\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  clay.yaml        # settings\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  package.json\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">```\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cdiv class=\"file-tree not-prose\">\u003Cul>\u003Cli>\u003Cdetails open=\"\">\u003Csummary class=\"file-tree-entry file-tree-folder\">\u003Ci class=\"fa-solid fa-chevron-right file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder-open file-tree-open\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder file-tree-closed\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">my-project\u003C\u002Fspan>\u003C\u002Fsummary>\u003Cul>\u003Cli>\u003Cdetails open=\"\">\u003Csummary class=\"file-tree-entry file-tree-folder\">\u003Ci class=\"fa-solid fa-chevron-right file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder-open file-tree-open\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder file-tree-closed\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">docs\u003C\u002Fspan>\u003C\u002Fsummary>\u003Cul>\u003Cli>\u003Cspan class=\"file-tree-entry\">\u003Cspan class=\"file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fspan>\u003Ci class=\"fa-brands fa-markdown\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">index.md\u003C\u002Fspan>\u003Cspan class=\"file-tree-comment\">the start page\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\u003Cli>\u003Cdetails open=\"\">\u003Csummary class=\"file-tree-entry file-tree-folder\">\u003Ci class=\"fa-solid fa-chevron-right file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder-open file-tree-open\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder file-tree-closed\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">guides\u003C\u002Fspan>\u003C\u002Fsummary>\u003Cul>\u003Cli>\u003Cspan class=\"file-tree-entry\">\u003Cspan class=\"file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fspan>\u003Ci class=\"fa-brands fa-markdown\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">setup.md\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\u003Cli>\u003Cdetails open=\"\">\u003Csummary class=\"file-tree-entry file-tree-folder\">\u003Ci class=\"fa-solid fa-chevron-right file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder-open file-tree-open\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder file-tree-closed\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">img\u003C\u002Fspan>\u003C\u002Fsummary>\u003Cul>\u003Cli>\u003Cspan class=\"file-tree-entry\">\u003Cspan class=\"file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fspan>\u003Ci class=\"fa-regular fa-file-image\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">screen.png\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fdetails>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fdetails>\u003C\u002Fli>\u003Cli>\u003Cspan class=\"file-tree-entry file-tree-more\">\u003Cspan class=\"file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fspan>\u003Cspan class=\"file-tree-icon\" aria-hidden=\"true\">\u003C\u002Fspan>\u003Cspan class=\"file-tree-name\">...\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fdetails>\u003C\u002Fli>\u003Cli>\u003Cspan class=\"file-tree-entry\">\u003Cspan class=\"file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fspan>\u003Ci class=\"fa-regular fa-file-code\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">clay.yaml\u003C\u002Fspan>\u003Cspan class=\"file-tree-comment\">settings\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\u003Cli>\u003Cspan class=\"file-tree-entry\">\u003Cspan class=\"file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fspan>\u003Ci class=\"fa-regular fa-file-code\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">package.json\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fdetails>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fdiv>\n\u003Ch2 id=\"writing-a-tree\">\u003Ca class=\"heading-anchor\" href=\"#writing-a-tree\" aria-label=\"Link to this section\" data-route=\"#writing-a-tree\">#\u003C\u002Fa>Writing a tree\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>Indent\u003C\u002Fstrong> each entry under its folder. Any indentation works, as long as entries of the same folder line up.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Folders\u003C\u002Fstrong> end with \u003Ccode>\u002F\u003C\u002Fcode>, or have entries below them.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Comments\u003C\u002Fstrong> follow \u003Ccode>#\u003C\u002Fcode> and show next to the name.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ccode>...\u003C\u002Fcode>\u003C\u002Fstrong> on its own line stands for more entries.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Folders with entries fold\u003C\u002Fstrong> with a click on their arrow, like in an editor.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"icons\">\u003Ca class=\"heading-anchor\" href=\"#icons\" aria-label=\"Link to this section\" data-route=\"#icons\">#\u003C\u002Fa>Icons\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Files\u003C\u002Fth>\n\u003Cth>Icon\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Ccode>.md\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Markdown\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Images (\u003Ccode>.png\u003C\u002Fcode>, \u003Ccode>.jpg\u003C\u002Fcode>, \u003Ccode>.svg\u003C\u002Fcode>, …)\u003C\u002Ftd>\n\u003Ctd>Image\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Code and settings (\u003Ccode>.yaml\u003C\u002Fcode>, \u003Ccode>.json\u003C\u002Fcode>, \u003Ccode>.ts\u003C\u002Fcode>, \u003Ccode>.js\u003C\u002Fcode>, \u003Ccode>.vue\u003C\u002Fcode>, \u003Ccode>.css\u003C\u002Fcode>, …)\u003C\u002Ftd>\n\u003Ctd>Code\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>.pdf\u003C\u002Fcode>, archives\u003C\u002Ftd>\n\u003Ctd>PDF, archive\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Anything else\u003C\u002Ftd>\n\u003Ctd>Text\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Ch2 id=\"from-the-tree-command\">\u003Ca class=\"heading-anchor\" href=\"#from-the-tree-command\" aria-label=\"Link to this section\" data-route=\"#from-the-tree-command\">#\u003C\u002Fa>From the \u003Ccode>tree\u003C\u002Fcode> command\u003C\u002Fh2>\n\u003Cp>The output of the \u003Ccode>tree\u003C\u002Fcode> command works as it is: its lines count as indentation.\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">```tree\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">docs\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">├── guides\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">│   └── setup.md\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">└── index.md\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">```\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cdiv class=\"file-tree not-prose\">\u003Cul>\u003Cli>\u003Cdetails open=\"\">\u003Csummary class=\"file-tree-entry file-tree-folder\">\u003Ci class=\"fa-solid fa-chevron-right file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder-open file-tree-open\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder file-tree-closed\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">docs\u003C\u002Fspan>\u003C\u002Fsummary>\u003Cul>\u003Cli>\u003Cdetails open=\"\">\u003Csummary class=\"file-tree-entry file-tree-folder\">\u003Ci class=\"fa-solid fa-chevron-right file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder-open file-tree-open\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder file-tree-closed\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">guides\u003C\u002Fspan>\u003C\u002Fsummary>\u003Cul>\u003Cli>\u003Cspan class=\"file-tree-entry\">\u003Cspan class=\"file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fspan>\u003Ci class=\"fa-brands fa-markdown\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">setup.md\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fdetails>\u003C\u002Fli>\u003Cli>\u003Cspan class=\"file-tree-entry\">\u003Cspan class=\"file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fspan>\u003Ci class=\"fa-brands fa-markdown\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">index.md\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fdetails>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fdiv>\n",[6,10,13],{"id":7,"text":8,"level":9},"writing-a-tree","Writing a tree",2,{"id":11,"text":12,"level":9},"icons","Icons",{"id":14,"text":15,"level":9},"from-the-tree-command","From the tree command","Folders and files from an indented list, with icons by file type, comments and folders that fold.",null,false,"\u002F_clay\u002Fsocial\u002Fwriting\u002Fcomponents\u002Ffile-trees.png",1792666370570]