[{"data":1,"prerenderedAt":17},["ShallowReactive",2],{"clay-page:\u002Fgetting-started\u002Fquick-start":3},{"html":4,"toc":5,"description":13,"hero":14,"list":15,"socialImage":16},"\u003Ch1 id=\"quick-start\">Quick Start\u003C\u002Fh1>\n\u003Cp>From an empty folder to a finished documentation site in about five minutes.\u003C\u002Fp>\n\u003Cdiv class=\"clay-steps\">\u003Col>\n\u003Cli>\u003Cp>\u003Cstrong>Create the project.\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cdiv class=\"code-block is-terminal has-bar\">\u003Cdiv class=\"code-terminal\" aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\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 command\">\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">mkdir\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> my-docs\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> && \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">cd\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> my-docs\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line command\">\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">npm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> init\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\"> -y\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line command\">\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">npm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> install\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\"> --save-dev\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> clay-doc\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\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Configure the site.\u003C\u002Fstrong> Create \u003Ccode>clay.yaml\u003C\u002Fcode> in the project folder. Only the title is required:\u003C\u002Fp>\n\u003Cdiv class=\"code-block has-title\">\u003Cdiv class=\"code-title\">\u003Ci class=\"fa-regular fa-file-lines\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan>clay.yaml\u003C\u002Fspan>\u003C\u002Fdiv>\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:#800000;--shiki-dark:#569CD6\">title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"My Project\"\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\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Write the first page.\u003C\u002Fstrong> Create \u003Ccode>docs\u002Fintroduction.md\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cdiv class=\"code-block has-title\">\u003Cdiv class=\"code-title\">\u003Ci class=\"fa-regular fa-file-lines\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan>docs\u002Fintroduction.md\u003C\u002Fspan>\u003C\u002Fdiv>\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\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">Introduction\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">icon\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">fa-solid fa-door-open\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-light-font-weight:bold;--shiki-dark:#569CD6;--shiki-dark-font-weight:bold\"># Introduction\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">Welcome to \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000080;--shiki-light-font-weight:bold;--shiki-dark:#569CD6;--shiki-dark-font-weight:bold\">**My Project**\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">. This is the first page of its documentation.\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\u003Cp>The part between the \u003Ccode>---\u003C\u002Fcode> lines is front matter. It is optional; without it, Clay takes the title from the first heading. See \u003Ca href=\"\u002Fclay-example-repo\u002Fwriting\u002Fpages\" data-route=\"\u002Fwriting\u002Fpages\">pages\u003C\u002Fa>.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Preview while you write.\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cdiv class=\"code-block is-terminal has-bar\">\u003Cdiv class=\"code-terminal\" aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\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 command\">\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">npx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> clay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> dev\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\u003Cp>Open \u003Ca href=\"http:\u002F\u002Flocalhost:3000\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>http:\u002F\u002Flocalhost:3000\u003C\u002Fa> and click your page. Edit the Markdown file and save: the browser shows your change right away.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Add a section.\u003C\u002Fstrong> Pages in a folder become a section of the navigation. Create \u003Ccode>docs\u002Fguides\u002Fsetup.md\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cdiv class=\"code-block has-title\">\u003Cdiv class=\"code-title\">\u003Ci class=\"fa-regular fa-file-lines\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan>docs\u002Fguides\u002Fsetup.md\u003C\u002Fspan>\u003C\u002Fdiv>\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:#800000;--shiki-light-font-weight:bold;--shiki-dark:#569CD6;--shiki-dark-font-weight:bold\"># Setup\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">How to set up My Project.\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\u003Cp>The sidebar now shows \u003Cstrong>Guides\u003C\u002Fstrong>. To give the folder another title, an icon and a page of its own, add \u003Ccode>docs\u002Fguides\u002Findex.md\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cdiv class=\"code-block has-title\">\u003Cdiv class=\"code-title\">\u003Ci class=\"fa-regular fa-file-lines\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan>docs\u002Fguides\u002Findex.md\u003C\u002Fspan>\u003C\u002Fdiv>\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\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">User Guides\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">icon\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">fa-solid fa-book\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">list\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\">true\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-light-font-weight:bold;--shiki-dark:#569CD6;--shiki-dark-font-weight:bold\"># User Guides\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">Everything you need to use My Project, step by step.\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\u003Cp>See \u003Ca href=\"\u002Fclay-example-repo\u002Forganizing\u002Findex-pages\" data-route=\"\u002Forganizing\u002Findex-pages\">index pages\u003C\u002Fa>.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Build the site.\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cdiv class=\"code-block is-terminal has-bar\">\u003Cdiv class=\"code-terminal\" aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\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 command\">\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">npx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> clay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> build\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\u003Cp>Clay checks your docs, renders every page and writes a static site to \u003Ccode>publish\u002Fpublic\u003C\u002Fcode>. Check it the way a web host would serve it with \u003Ccode>npx clay preview\u003C\u002Fcode>.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003C\u002Fol>\n\u003C\u002Fdiv>\n\u003Cp>Your project now looks like this:\u003C\u002Fp>\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-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-regular fa-file-code\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">clay.yaml\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\">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\">introduction.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\">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\">index.md\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-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>\u003C\u002Ful>\u003C\u002Fdetails>\u003C\u002Fli>\u003Cli>\u003Cspan class=\"file-tree-entry file-tree-folder\">\u003Cspan class=\"file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fspan>\u003Ci class=\"fa-solid fa-folder\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">node_modules\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>\u003Cli>\u003Cspan class=\"file-tree-entry file-tree-folder\">\u003Cspan class=\"file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fspan>\u003Ci class=\"fa-solid fa-folder\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">publish\u003C\u002Fspan>\u003Cspan class=\"file-tree-comment\">the built site, ready to upload\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fdetails>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fdiv>\n\u003Cdiv class=\"markdown-alert markdown-alert-note\">\n\u003Cp class=\"markdown-alert-title text-base-content\">\u003Ci class=\"fa-solid fa-sticky-note mr-2\">\u003C\u002Fi>Note\u003C\u002Fp>\n\u003Cp>Add \u003Ccode>publish\u002F\u003C\u002Fcode> and \u003Ccode>node_modules\u002F\u003C\u002Fcode> to your \u003Ccode>.gitignore\u003C\u002Fcode>. The build output is created fresh on every build and does not belong in the repository.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Ch2 id=\"coming-from-another-tool\">\u003Ca class=\"heading-anchor\" href=\"#coming-from-another-tool\" aria-label=\"Link to this section\" data-route=\"#coming-from-another-tool\">#\u003C\u002Fa>Coming from another tool\u003C\u002Fh2>\n\u003Cp>Docs written for MkDocs, Docusaurus, VitePress or another tool are Markdown too. A coding agent can move them to Clay:\u003C\u002Fp>\n\u003Cdiv class=\"clay-prompt-aura aura not-prose\">\u003Cdiv class=\"clay-prompt code-block\">\u003Cdiv class=\"clay-prompt-title\">\u003Ci class=\"fa-solid fa-wand-magic-sparkles\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan>Suggested prompt\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cpre class=\"clay-prompt-text\">Read https:\u002F\u002Fclay-doc.github.io\u002Fclay-example-repo\u002Fllms-full.txt to learn how Clay\nworks. Then move the documentation in this repository to Clay: its settings to\nclay.yaml, its navigation to folders, index.md files and `order`, and the old\ntool's own syntax, like admonitions and tabs, to Clay Flavored Markdown.\nRemove the old tool's files once `npx clay build --strict` passes.\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy prompt\" aria-label=\"Copy prompt\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Ch2 id=\"where-to-go-from-here\">\u003Ca class=\"heading-anchor\" href=\"#where-to-go-from-here\" aria-label=\"Link to this section\" data-route=\"#where-to-go-from-here\">#\u003C\u002Fa>Where to go from here\u003C\u002Fh2>\n\u003Cdiv class=\"clay-cards not-prose\">\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002Fpublishing\u002Fgithub-pages\" data-route=\"\u002Fpublishing\u002Fgithub-pages\">\u003Ci class=\"clay-card-icon fa-brands fa-github\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">GitHub Pages\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Publish a Clay site on GitHub Pages with a workflow that checks and deploys the docs on every push.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002Forganizing\u002Findex-pages\" data-route=\"\u002Forganizing\u002Findex-pages\">\u003Ci class=\"clay-card-icon fa-solid fa-flag-checkered\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Index Pages\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">The start page and the page of every folder are Markdown files named index.md, with an optional list of pages and a large header.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002Forganizing\u002Fnavigation\" data-route=\"\u002Forganizing\u002Fnavigation\">\u003Ci class=\"clay-card-icon fa-solid fa-compass\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Navigation\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">How Clay builds the sidebar, breadcrumbs and previous\u002Fnext links, and how to put pages in order.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002Fwriting\u002Fcomponents\" data-route=\"\u002Fwriting\u002Fcomponents\">\u003Ci class=\"clay-card-icon fa-solid fa-puzzle-piece\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Components\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Tabs, steps, cards, folded sections, prompts, badges, math, diagrams and file trees, written in plain Markdown.\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fdiv>\n",[6,10],{"id":7,"text":8,"level":9},"coming-from-another-tool","Coming from another tool",2,{"id":11,"text":12,"level":9},"where-to-go-from-here","Where to go from here","Build your first Clay site from an empty folder in five minutes.",null,false,"\u002F_clay\u002Fsocial\u002Fgetting-started\u002Fquick-start.png",1792666369912]