[{"data":1,"prerenderedAt":20},["ShallowReactive",2],{"clay-page:\u002Fguides\u002Fupgrading-to-clay-5":3},{"html":4,"toc":5,"description":16,"hero":17,"list":18,"socialImage":19},"\u003Ch1 id=\"upgrading-to-clay-5\">Upgrading to Clay 5 \u003Cspan class=\"badge badge-sm badge-soft badge-success clay-badge\">Latest\u003C\u002Fspan>\u003C\u002Fh1>\n\u003Cp>Clay 5 adds pages for APIs from their OpenAPI documents, and request cells to try them. For an existing site, little changes: four new component names are taken, Clay now writes some tags into the head of every page that you may have added yourself, and it sets arrows, dashes and quotes in your text. Your pages, folders, versions, translations and \u003Ccode>clay.yaml\u003C\u002Fcode> stay as they are.\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 4\u003C\u002Fth>\n\u003Cth>Clay 5\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Ccode>::: request\u003C\u002Fcode>, \u003Ccode>::: fields\u003C\u002Fcode>, \u003Ccode>::: endpoints\u003C\u002Fcode> and \u003Ccode>::: credentials\u003C\u002Fcode> are text\u003C\u002Ftd>\n\u003Ctd>They are \u003Ca href=\"\u002Fclay-example-repo\u002Ffeatures\u002Fopenapi\" data-route=\"\u002Ffeatures\u002Fopenapi\">components\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>og:locale\u003C\u002Fcode>, a \u003Ccode>favicon.ico\u003C\u002Fcode> and an \u003Ccode>apple-touch-icon\u003C\u002Fcode> come from \u003Ccode>head\u003C\u002Fcode> in \u003Ccode>clay.yaml\u003C\u002Fcode>, if at all\u003C\u002Ftd>\n\u003Ctd>Clay writes them, see \u003Ca href=\"\u002Fclay-example-repo\u002Ffeatures\u002Fseo\" data-route=\"\u002Ffeatures\u002Fseo\">SEO\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>->\u003C\u002Fcode>, \u003Ccode>--\u003C\u002Fcode>, \u003Ccode>...\u003C\u002Fcode> and \u003Ccode>\"quotes\"\u003C\u002Fcode> show as typed\u003C\u002Ftd>\n\u003Ctd>They show as → – … and the quotes of the page’s language, see \u003Ca href=\"\u002Fclay-example-repo\u002Fwriting\u002Fmarkdown#typography\" data-route=\"\u002Fwriting\u002Fmarkdown#typography\">typography\u003C\u002Fa>\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 5, following\nhttps:\u002F\u002Fclay-doc.github.io\u002Fclay-example-repo\u002Fguides\u002Fupgrading-to-clay-5.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@5\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@5\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@5\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>Look for the new component names.\u003C\u002Fstrong> A line that starts with \u003Ccode>::: request\u003C\u002Fcode>, \u003Ccode>::: fields\u003C\u002Fcode>, \u003Ccode>::: endpoints\u003C\u002Fcode> or \u003Ccode>::: credentials\u003C\u002Fcode> was text and is now a component. Outside code blocks, such lines are rare; 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\">grep\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\"> -rnE\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> \"^:{3,} *(request|fields|endpoints|credentials)\\b\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> docs\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>Put the ones that should stay text in a code block, or write \u003Ccode>\\:::\u003C\u002Fcode>.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Remove head tags Clay now writes.\u003C\u002Fstrong> Clay adds \u003Ccode>og:locale\u003C\u002Fcode>, a \u003Ccode>favicon.ico\u003C\u002Fcode> and an \u003Ccode>apple-touch-icon\u003C\u002Fcode> drawn from your \u003Ccode>favicon\u003C\u002Fcode> to every page. If \u003Ccode>head\u003C\u002Fcode> in \u003Ccode>clay.yaml\u003C\u002Fcode> adds them too, remove them there, so they are not in the page twice:\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\"> -nE\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> \"og:locale|apple-touch-icon|favicon\\.ico\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> clay.yaml\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> config\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">.yaml\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>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\u002Ffeatures\u002Fopenapi\" data-route=\"\u002Ffeatures\u002Fopenapi\">\u003Ci class=\"clay-card-icon fa-solid fa-plug\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">OpenAPI\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Pages for every operation and schema of an API, below the docs in the navigation, and request cells to try it on the page.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002Ffeatures\u002Fseo\" data-route=\"\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\">Icons for search results and home screens, the site's name in search results, and the language of every page for link previews.\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fdiv>\n\u003Cul>\n\u003Cli>Saved versions keep their APIs: \u003Ccode>clay version\u003C\u002Fcode> copies the OpenAPI documents into the version, so its pages stay as they were. See \u003Ca href=\"\u002Fclay-example-repo\u002Forganizing\u002Fversions\" data-route=\"\u002Forganizing\u002Fversions\">versions\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>\u003Ccode>footer\u003C\u002Fcode> in \u003Ccode>clay.yaml\u003C\u002Fcode> puts links and a line of text below every page, see \u003Ca href=\"\u002Fclay-example-repo\u002Fconfiguration\u002Fclay-yaml#footer\" data-route=\"\u002Fconfiguration\u002Fclay-yaml#footer\">clay.yaml\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>The sidebar can be made wider or narrower by dragging its edge, and long titles end in “…”.\u003C\u002Fli>\n\u003Cli>In the sidebar, the page you came from no longer stays marked after you follow a link in the text.\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 4 site to Clay 5 - four new component names, and head tags Clay now writes itself.",null,false,"\u002F_clay\u002Fsocial\u002Fguides\u002Fupgrading-to-clay-5.png",1792666370325]