[{"data":1,"prerenderedAt":20},["ShallowReactive",2],{"clay-page:\u002F4.x\u002Fguides\u002Fupgrading-to-clay-4":3},{"html":4,"toc":5,"description":16,"hero":17,"list":18,"socialImage":19},"\u003Ch1 id=\"upgrading-to-clay-4\">Upgrading to Clay 4 \u003Cspan class=\"badge badge-sm badge-soft badge-success clay-badge\">Latest\u003C\u002Fspan>\u003C\u002Fh1>\n\u003Cp>Clay 4 changes three things: the front matter field \u003Ccode>cards\u003C\u002Fcode> is now \u003Ccode>list\u003C\u002Fcode>, files and folders whose name starts with \u003Ccode>_\u003C\u002Fcode> are no longer pages: they hold \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fsnippets-and-variables\" data-route=\"\u002F4.x\u002Fwriting\u002Fsnippets-and-variables\">snippets\u003C\u002Fa>, and older versions move from \u003Ccode>docs-archive\u002F\u003C\u002Fcode> into \u003Ccode>docs\u002F\u003C\u002Fcode>. Everything else, your pages, folders, links, translations and \u003Ccode>clay.yaml\u003C\u002Fcode>, stays as it is. Until you have renamed it, \u003Ccode>clay build\u003C\u002Fcode> reports each file that still uses \u003Ccode>cards\u003C\u002Fcode> with a warning, and \u003Ccode>--strict\u003C\u002Fcode> fails.\u003C\u002Fp>\n\u003Ch2 id=\"at-a-glance\">\u003Ca class=\"heading-anchor\" href=\"#at-a-glance\" aria-label=\"Link to this section\" data-route=\"#at-a-glance\">#\u003C\u002Fa>At a glance\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Clay 3\u003C\u002Fth>\n\u003Cth>Clay 4\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Ccode>cards: true\u003C\u002Fcode> in an \u003Ccode>index.md\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>list: true\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>docs\u002F_drafts\u002Fidea.md\u003C\u002Fcode> is a page\u003C\u002Ftd>\n\u003Ctd>Files and folders starting with \u003Ccode>_\u003C\u002Fcode> are no pages\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>docs\u002F\u003C\u002Fcode> and \u003Ccode>docs-archive\u002F1.x\u002F\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>docs\u002Flatest\u002F\u003C\u002Fcode> and \u003Ccode>docs\u002F1.x\u002F\u003C\u002Fcode>, moved by \u003Ccode>npx clay version\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Cp>A coding agent can do the upgrade:\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\">Upgrade the Clay docs in this repository to Clay 4, following\nhttps:\u002F\u002Fclay-doc.github.io\u002Fclay-example-repo\u002Fguides\u002Fupgrading-to-clay-4.md.\nThe upgrade is done when `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=\"steps\">\u003Ca class=\"heading-anchor\" href=\"#steps\" aria-label=\"Link to this section\" data-route=\"#steps\">#\u003C\u002Fa>Steps\u003C\u002Fh2>\n\u003Cdiv class=\"clay-steps\">\u003Col>\n\u003Cli>\u003Cp>\u003Cstrong>Update Clay.\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cdiv class=\"clay-tabs clay-code-group is-terminal has-dots\" data-tabs=\"\">\u003Cdiv role=\"tablist\" class=\"tabs tabs-border not-prose\">\u003Cbutton type=\"button\" role=\"tab\" id=\"clay-tabs-1-0\" class=\"tab tab-active\" aria-controls=\"clay-tabs-1-0-panel\" aria-selected=\"true\" tabindex=\"0\">npm\u003C\u002Fbutton>\u003Cbutton type=\"button\" role=\"tab\" id=\"clay-tabs-1-1\" class=\"tab\" aria-controls=\"clay-tabs-1-1-panel\" aria-selected=\"false\" tabindex=\"-1\">pnpm\u003C\u002Fbutton>\u003Cbutton type=\"button\" role=\"tab\" id=\"clay-tabs-1-2\" class=\"tab\" aria-controls=\"clay-tabs-1-2-panel\" aria-selected=\"false\" tabindex=\"-1\">yarn\u003C\u002Fbutton>\u003C\u002Fdiv>\u003Cdiv role=\"tabpanel\" id=\"clay-tabs-1-0-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-1-0\" data-label=\"npm\">\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\">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@4\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\u002Fdiv>\u003Cdiv role=\"tabpanel\" id=\"clay-tabs-1-1-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-1-1\" data-label=\"pnpm\" hidden=\"\">\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\">pnpm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> add\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\"> --save-dev\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> clay-doc@4\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\u002Fdiv>\u003Cdiv role=\"tabpanel\" id=\"clay-tabs-1-2-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-1-2\" data-label=\"yarn\" hidden=\"\">\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\">yarn\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> add\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\"> --dev\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> clay-doc@4\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\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Rename \u003Ccode>cards\u003C\u002Fcode> to \u003Ccode>list\u003C\u002Fcode>.\u003C\u002Fstrong> In each \u003Ccode>index.md\u003C\u002Fcode> that has \u003Ccode>cards: true\u003C\u002Fcode>, write \u003Ccode>list: true\u003C\u002Fcode> instead:\u003C\u002Fp>\n\u003Cdiv class=\"clay-tabs\" data-tabs=\"\">\u003Cdiv role=\"tablist\" class=\"tabs tabs-border not-prose\">\u003Cbutton type=\"button\" role=\"tab\" id=\"clay-tabs-2-0\" class=\"tab tab-active\" aria-controls=\"clay-tabs-2-0-panel\" aria-selected=\"true\" tabindex=\"0\">Clay 3\u003C\u002Fbutton>\u003Cbutton type=\"button\" role=\"tab\" id=\"clay-tabs-2-1\" class=\"tab\" aria-controls=\"clay-tabs-2-1-panel\" aria-selected=\"false\" tabindex=\"-1\">Clay 4\u003C\u002Fbutton>\u003C\u002Fdiv>\u003Cdiv role=\"tabpanel\" id=\"clay-tabs-2-0-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-2-0\" data-label=\"Clay 3\">\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\">Guides\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">cards\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>\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\u002Fdiv>\u003Cdiv role=\"tabpanel\" id=\"clay-tabs-2-1-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-2-1\" data-label=\"Clay 4\" hidden=\"\">\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\">Guides\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>\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\u002Fdiv>\u003C\u002Fdiv>\n\u003Cp>Search your docs for it, or let the build list the files:\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\">grep\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\"> -rl\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> \"^cards:\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> docs\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> docs-archive\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>Rename pages that start with \u003Ccode>_\u003C\u002Fcode>\u003C\u002Fstrong>, if you have any, and the links to them. List them with:\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\">find\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> docs\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> docs-archive\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\"> -name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> \"_*\"\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>Move older versions\u003C\u002Fstrong>, if you have \u003Ccode>docs-archive\u002F\u003C\u002Fcode>:\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\"> version\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>It moves \u003Ccode>docs\u002F\u003C\u002Fcode> into \u003Ccode>docs\u002Flatest\u002F\u003C\u002Fcode> and each \u003Ccode>docs-archive\u002F<name>\u002F\u003C\u002Fcode> to \u003Ccode>docs\u002F<name>\u002F\u003C\u002Fcode>, so that all versions sit at the same depth, and gives paths that lead out of \u003Ccode>docs\u002F\u003C\u002Fcode> one more \u003Ccode>..\u002F\u003C\u002Fcode>. It shows every change and asks first; see \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Forganizing\u002Fversions#the-first-version\" data-route=\"\u002F4.x\u002Forganizing\u002Fversions#the-first-version\">the first version\u003C\u002Fa>. Commit the move on its own.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Check.\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>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\"> --strict\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>When the build passes, the upgrade is done.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003C\u002Fol>\n\u003C\u002Fdiv>\n\u003Ch2 id=\"what-else-is-new\">\u003Ca class=\"heading-anchor\" href=\"#what-else-is-new\" aria-label=\"Link to this section\" data-route=\"#what-else-is-new\">#\u003C\u002Fa>What else is new\u003C\u002Fh2>\n\u003Cdiv class=\"clay-cards not-prose\">\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Ffeatures\u002Fai-and-agents\" data-route=\"\u002F4.x\u002Ffeatures\u002Fai-and-agents\">\u003Ci class=\"clay-card-icon fa-solid fa-robot\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">AI & Agents\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Every Clay site is ready for language models - each page as Markdown, an llms.txt index - and clay edit and clay check let AI agents change and check the docs.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\" data-route=\"\u002F4.x\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>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fpublishing\u002Fbuild-checks\" data-route=\"\u002F4.x\u002Fpublishing\u002Fbuild-checks\">\u003Ci class=\"clay-card-icon fa-solid fa-list-check\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Build Checks\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Links to sections are checked too, and a page that fails to render says why.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fsnippets-and-variables\" data-route=\"\u002F4.x\u002Fwriting\u002Fsnippets-and-variables\">\u003Ci class=\"clay-card-icon fa-solid fa-paste\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Snippets & Variables\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Write a text once and use it on many pages, include code from your project, and fill in values like the current version.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Ffeatures\u002Fsearch\" data-route=\"\u002F4.x\u002Ffeatures\u002Fsearch\">\u003Ci class=\"clay-card-icon fa-solid fa-magnifying-glass\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Search\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Full-text search over every page and section, with typo tolerance, highlighted matches and keyboard shortcuts.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Ffeatures\u002Fseo\" data-route=\"\u002F4.x\u002Ffeatures\u002Fseo\">\u003Ci class=\"clay-card-icon fa-solid fa-chart-line\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">SEO\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Every page gets a picture for link previews, and sites under a path the address of their sitemap.\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fdiv>\n\u003Cul>\n\u003Cli>\u003Ccode>theme\u003C\u002Fcode> in \u003Ccode>clay.yaml\u003C\u002Fcode> sets your own colors and fonts, and \u003Ccode>analytics\u003C\u002Fcode> counts page views without cookies, see \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Ffeatures\u002Fthemes-and-icons#your-own-colors-and-fonts\" data-route=\"\u002F4.x\u002Ffeatures\u002Fthemes-and-icons#your-own-colors-and-fonts\">themes\u003C\u002Fa> and \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Ffeatures\u002Fanalytics\" data-route=\"\u002F4.x\u002Ffeatures\u002Fanalytics\">analytics\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>Settings can live in files of their own, like \u003Ccode>variables: config\u002Fvariables.yaml\u003C\u002Fcode>, see \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fconfiguration\u002Fclay-yaml#settings-in-files-of-their-own\" data-route=\"\u002F4.x\u002Fconfiguration\u002Fclay-yaml#settings-in-files-of-their-own\">clay.yaml\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>\u003Ccode>generate\u003C\u002Fcode> in \u003Ccode>clay.yaml\u003C\u002Fcode> runs tools that write pages before every build, like an API reference from code, see \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fgenerated-docs\" data-route=\"\u002F4.x\u002Fwriting\u002Fgenerated-docs\">generated docs\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>\u003Ccode>head\u003C\u002Fcode> in \u003Ccode>clay.yaml\u003C\u002Fcode> adds scripts and meta tags to every page, see \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fconfiguration\u002Fclay-yaml#head\" data-route=\"\u002F4.x\u002Fconfiguration\u002Fclay-yaml#head\">clay.yaml\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>Videos and embeds of YouTube, Vimeo, Figma and more, see \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fhtml#videos-and-embeds\" data-route=\"\u002F4.x\u002Fwriting\u002Fhtml#videos-and-embeds\">HTML\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>Old addresses of moved pages keep working with \u003Ccode>redirects\u003C\u002Fcode> in front matter, see \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Forganizing\u002Fredirects\" data-route=\"\u002F4.x\u002Forganizing\u002Fredirects\">redirects\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>Code blocks show the name of their file: \u003Ccode>```yaml [clay.yaml]\u003C\u002Fcode>, see \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcode-blocks#file-names\" data-route=\"\u002F4.x\u002Fwriting\u002Fcode-blocks#file-names\">code blocks\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>On narrower screens, the contents of a page fold up above it.\u003C\u002Fli>\n\u003Cli>A “Skip to content” link, clearer keyboard focus and stronger contrast make the site easier to use with a keyboard and easier to read.\u003C\u002Fli>\n\u003Cli>Moving around feels smoother: the sidebar mark follows you, new breadcrumbs slide in and pages fade in. With “reduce motion” turned on in the system, nothing moves.\u003C\u002Fli>\n\u003C\u002Ful>\n",[6,10,13],{"id":7,"text":8,"level":9},"at-a-glance","At a glance",2,{"id":11,"text":12,"level":9},"steps","Steps",{"id":14,"text":15,"level":9},"what-else-is-new","What else is new","Move a Clay 3 site to Clay 4 - the cards front matter field is now called list, files starting with _ are snippets, and older versions move into docs\u002F.",null,false,"\u002F_clay\u002Fsocial\u002F4.x\u002Fguides\u002Fupgrading-to-clay-4.png",1792666369636]