[{"data":1,"prerenderedAt":17},["ShallowReactive",2],{"clay-page:\u002Fguides":3},{"html":4,"toc":5,"description":13,"hero":14,"list":15,"socialImage":16},"\u003Ch1 id=\"guides\">Guides\u003C\u002Fh1>\n\u003Cp>Upgrading from earlier versions of Clay, and solutions for common problems.\u003C\u002Fp>\n\u003Ch2 id=\"which-guide-do-i-need\">\u003Ca class=\"heading-anchor\" href=\"#which-guide-do-i-need\" aria-label=\"Link to this section\" data-route=\"#which-guide-do-i-need\">#\u003C\u002Fa>Which guide do I need?\u003C\u002Fh2>\n\u003Cdiv class=\"mermaid-diagram\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" viewBox=\"0 0 1305.5880000000002 133.8\" width=\"1305.5880000000002\" height=\"133.8\">\n\n\u003Cdefs>\n  \u003Cmarker id=\"diagram-1-arrowhead\" markerWidth=\"8\" markerHeight=\"5\" refX=\"7\" refY=\"2.5\" orient=\"auto\">\n    \u003Cpolygon points=\"0 0, 8 2.5, 0 5\" fill=\"var(--_arrow)\" stroke=\"var(--_arrow)\" stroke-width=\"0.75\" stroke-linejoin=\"round\">\u003C\u002Fpolygon>\n  \u003C\u002Fmarker>\n  \u003Cmarker id=\"diagram-1-arrowhead-start\" markerWidth=\"8\" markerHeight=\"5\" refX=\"1\" refY=\"2.5\" orient=\"auto-start-reverse\">\n    \u003Cpolygon points=\"8 0, 0 2.5, 8 5\" fill=\"var(--_arrow)\" stroke=\"var(--_arrow)\" stroke-width=\"0.75\" stroke-linejoin=\"round\">\u003C\u002Fpolygon>\n  \u003C\u002Fmarker>\n\u003C\u002Fdefs>\n\u003Cpolyline class=\"edge\" data-from=\"A\" data-to=\"B\" data-style=\"solid\" data-arrow-start=\"false\" data-arrow-end=\"true\" data-label=\"Upgrading to Clay 2\" points=\"166.424,66.9 362.956,66.9\" fill=\"none\" stroke=\"var(--_line)\" stroke-width=\"1\" marker-end=\"url(#diagram-1-arrowhead)\">\u003C\u002Fpolyline>\n\u003Cpolyline class=\"edge\" data-from=\"B\" data-to=\"C\" data-style=\"solid\" data-arrow-start=\"false\" data-arrow-end=\"true\" data-label=\"Upgrading to Clay 3\" points=\"441.21500000000003,66.9 637.7470000000001,66.9\" fill=\"none\" stroke=\"var(--_line)\" stroke-width=\"1\" marker-end=\"url(#diagram-1-arrowhead)\">\u003C\u002Fpolyline>\n\u003Cpolyline class=\"edge\" data-from=\"C\" data-to=\"D\" data-style=\"solid\" data-arrow-start=\"false\" data-arrow-end=\"true\" data-label=\"Upgrading to Clay 4\" points=\"716.0060000000001,66.9 912.5380000000001,66.9\" fill=\"none\" stroke=\"var(--_line)\" stroke-width=\"1\" marker-end=\"url(#diagram-1-arrowhead)\">\u003C\u002Fpolyline>\n\u003Cpolyline class=\"edge\" data-from=\"D\" data-to=\"E\" data-style=\"solid\" data-arrow-start=\"false\" data-arrow-end=\"true\" data-label=\"Upgrading to Clay 5\" points=\"990.7970000000001,66.9 1187.3290000000002,66.9\" fill=\"none\" stroke=\"var(--_line)\" stroke-width=\"1\" marker-end=\"url(#diagram-1-arrowhead)\">\u003C\u002Fpolyline>\n\u003Cg class=\"edge-label\" data-from=\"A\" data-to=\"B\" data-label=\"Upgrading to Clay 2\">\n  \u003Crect x=\"210.42400000000004\" y=\"50.90000000000001\" width=\"108.53200000000004\" height=\"30.3\" rx=\"2\" ry=\"2\" fill=\"var(--bg)\" stroke=\"var(--_inner-stroke)\" stroke-width=\"1\">\u003C\u002Frect>\n  \u003Ctext x=\"264.69000000000005\" y=\"66.05000000000001\" text-anchor=\"middle\" font-size=\"11\" font-weight=\"400\" fill=\"var(--_text-sec)\" dy=\"3.8499999999999996\">Upgrading to Clay 2\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"edge-label\" data-from=\"B\" data-to=\"C\" data-label=\"Upgrading to Clay 3\">\n  \u003Crect x=\"485.215\" y=\"50.90000000000001\" width=\"108.53200000000004\" height=\"30.3\" rx=\"2\" ry=\"2\" fill=\"var(--bg)\" stroke=\"var(--_inner-stroke)\" stroke-width=\"1\">\u003C\u002Frect>\n  \u003Ctext x=\"539.481\" y=\"66.05000000000001\" text-anchor=\"middle\" font-size=\"11\" font-weight=\"400\" fill=\"var(--_text-sec)\" dy=\"3.8499999999999996\">Upgrading to Clay 3\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"edge-label\" data-from=\"C\" data-to=\"D\" data-label=\"Upgrading to Clay 4\">\n  \u003Crect x=\"760.0060000000001\" y=\"50.90000000000001\" width=\"108.53200000000004\" height=\"30.3\" rx=\"2\" ry=\"2\" fill=\"var(--bg)\" stroke=\"var(--_inner-stroke)\" stroke-width=\"1\">\u003C\u002Frect>\n  \u003Ctext x=\"814.2720000000002\" y=\"66.05000000000001\" text-anchor=\"middle\" font-size=\"11\" font-weight=\"400\" fill=\"var(--_text-sec)\" dy=\"3.8499999999999996\">Upgrading to Clay 4\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"edge-label\" data-from=\"D\" data-to=\"E\" data-label=\"Upgrading to Clay 5\">\n  \u003Crect x=\"1034.7970000000003\" y=\"50.90000000000001\" width=\"108.53200000000004\" height=\"30.3\" rx=\"2\" ry=\"2\" fill=\"var(--bg)\" stroke=\"var(--_inner-stroke)\" stroke-width=\"1\">\u003C\u002Frect>\n  \u003Ctext x=\"1089.0630000000003\" y=\"66.05000000000001\" text-anchor=\"middle\" font-size=\"11\" font-weight=\"400\" fill=\"var(--_text-sec)\" dy=\"3.8499999999999996\">Upgrading to Clay 5\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"node\" data-id=\"A\" data-label=\"Clay 1\nwith Clay Oven\" data-shape=\"rectangle\">\n  \u003Crect x=\"40\" y=\"40\" width=\"126.424\" height=\"53.800000000000004\" rx=\"0\" ry=\"0\" fill=\"var(--_node-fill)\" stroke=\"var(--_node-stroke)\" stroke-width=\"0.75\">\u003C\u002Frect>\n  \u003Ctext x=\"103.212\" y=\"66.9\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"500\" fill=\"var(--_text)\">\u003Ctspan x=\"103.212\" dy=\"-3.9000000000000012\">Clay 1\u003C\u002Ftspan>\u003Ctspan x=\"103.212\" dy=\"16.900000000000002\">with Clay Oven\u003C\u002Ftspan>\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"node\" data-id=\"B\" data-label=\"Clay 2\" data-shape=\"rectangle\">\n  \u003Crect x=\"362.956\" y=\"48.45\" width=\"78.259\" height=\"36.900000000000006\" rx=\"0\" ry=\"0\" fill=\"var(--_node-fill)\" stroke=\"var(--_node-stroke)\" stroke-width=\"0.75\">\u003C\u002Frect>\n  \u003Ctext x=\"402.0855\" y=\"66.9\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"500\" fill=\"var(--_text)\" dy=\"4.55\">Clay 2\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"node\" data-id=\"C\" data-label=\"Clay 3\" data-shape=\"rectangle\">\n  \u003Crect x=\"637.7470000000001\" y=\"48.45\" width=\"78.259\" height=\"36.900000000000006\" rx=\"0\" ry=\"0\" fill=\"var(--_node-fill)\" stroke=\"var(--_node-stroke)\" stroke-width=\"0.75\">\u003C\u002Frect>\n  \u003Ctext x=\"676.8765000000001\" y=\"66.9\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"500\" fill=\"var(--_text)\" dy=\"4.55\">Clay 3\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"node\" data-id=\"D\" data-label=\"Clay 4\" data-shape=\"rectangle\">\n  \u003Crect x=\"912.5380000000001\" y=\"48.45\" width=\"78.259\" height=\"36.900000000000006\" rx=\"0\" ry=\"0\" fill=\"var(--_node-fill)\" stroke=\"var(--_node-stroke)\" stroke-width=\"0.75\">\u003C\u002Frect>\n  \u003Ctext x=\"951.6675000000001\" y=\"66.9\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"500\" fill=\"var(--_text)\" dy=\"4.55\">Clay 4\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"node\" data-id=\"E\" data-label=\"Clay 5\" data-shape=\"rectangle\">\n  \u003Crect x=\"1187.3290000000002\" y=\"48.45\" width=\"78.259\" height=\"36.900000000000006\" rx=\"0\" ry=\"0\" fill=\"var(--_node-fill)\" stroke=\"var(--_node-stroke)\" stroke-width=\"0.75\">\u003C\u002Frect>\n  \u003Ctext x=\"1226.4585000000002\" y=\"66.9\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"500\" fill=\"var(--_text)\" dy=\"4.55\">Clay 5\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003C\u002Fsvg>\u003C\u002Fdiv>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Your site runs on\u003C\u002Fth>\n\u003Cth>Follow, in this order\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>Clay 4\u003C\u002Ftd>\n\u003Ctd>\u003Ca href=\"\u002Fclay-example-repo\u002Fguides\u002Fupgrading-to-clay-5\" data-route=\"\u002Fguides\u002Fupgrading-to-clay-5\">Clay 5\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Clay 3\u003C\u002Ftd>\n\u003Ctd>\u003Ca href=\"\u002Fclay-example-repo\u002Fguides\u002Fupgrading-to-clay-4\" data-route=\"\u002Fguides\u002Fupgrading-to-clay-4\">Clay 4\u003C\u002Fa>, then \u003Ca href=\"\u002Fclay-example-repo\u002Fguides\u002Fupgrading-to-clay-5\" data-route=\"\u002Fguides\u002Fupgrading-to-clay-5\">Clay 5\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Clay 2\u003C\u002Ftd>\n\u003Ctd>\u003Ca href=\"\u002Fclay-example-repo\u002Fguides\u002Fupgrading-to-clay-3\" data-route=\"\u002Fguides\u002Fupgrading-to-clay-3\">Clay 3\u003C\u002Fa>, then \u003Ca href=\"\u002Fclay-example-repo\u002Fguides\u002Fupgrading-to-clay-4\" data-route=\"\u002Fguides\u002Fupgrading-to-clay-4\">Clay 4\u003C\u002Fa>, then \u003Ca href=\"\u002Fclay-example-repo\u002Fguides\u002Fupgrading-to-clay-5\" data-route=\"\u002Fguides\u002Fupgrading-to-clay-5\">Clay 5\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Clay 1 with Clay Oven\u003C\u002Ftd>\n\u003Ctd>\u003Ca href=\"\u002Fclay-example-repo\u002Fguides\u002Fupgrading-to-clay-2\" data-route=\"\u002Fguides\u002Fupgrading-to-clay-2\">Clay 2\u003C\u002Fa>, then \u003Ca href=\"\u002Fclay-example-repo\u002Fguides\u002Fupgrading-to-clay-3\" data-route=\"\u002Fguides\u002Fupgrading-to-clay-3\">Clay 3\u003C\u002Fa>, then \u003Ca href=\"\u002Fclay-example-repo\u002Fguides\u002Fupgrading-to-clay-4\" data-route=\"\u002Fguides\u002Fupgrading-to-clay-4\">Clay 4\u003C\u002Fa>, then \u003Ca href=\"\u002Fclay-example-repo\u002Fguides\u002Fupgrading-to-clay-5\" data-route=\"\u002Fguides\u002Fupgrading-to-clay-5\">Clay 5\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Cp>Not sure which version you run? \u003Ccode>npx clay --version\u003C\u002Fcode> tells you.\u003C\u002Fp>\n\u003Ch2 id=\"before-you-upgrade\">\u003Ca class=\"heading-anchor\" href=\"#before-you-upgrade\" aria-label=\"Link to this section\" data-route=\"#before-you-upgrade\">#\u003C\u002Fa>Before you upgrade\u003C\u002Fh2>\n\u003Cdiv class=\"clay-steps\">\u003Col>\n\u003Cli>\u003Cstrong>Commit your work\u003C\u002Fstrong>, so the upgrade is one change you can review and undo.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Read the guide\u003C\u002Fstrong> for the next version, and its “At a glance” table.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Upgrade one major version at a time\u003C\u002Fstrong>, and finish each guide with \u003Ccode>npx clay build --strict\u003C\u002Fcode>: when it passes, that step is done.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003C\u002Fdiv>\n\u003Cp>The \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fclay-doc\u002Fclay\u002Fblob\u002Fmain\u002FCHANGELOG.md\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>changelog\u003C\u002Fa> lists every change of every release, including the small ones that need no guide.\u003C\u002Fp>\n\u003Cdiv class=\"markdown-alert markdown-alert-tip\">\n\u003Cp class=\"markdown-alert-title text-primary\">\u003Ci class=\"fa-solid fa-lightbulb mr-2\">\u003C\u002Fi>Tip\u003C\u002Fp>\n\u003Cp>Stuck? \u003Ca href=\"\u002Fclay-example-repo\u002Fguides\u002Ftroubleshooting\" data-route=\"\u002Fguides\u002Ftroubleshooting\">Troubleshooting\u003C\u002Fa> covers missing styles, images, icons and dates, and failing builds.\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[6,10],{"id":7,"text":8,"level":9},"which-guide-do-i-need","Which guide do I need?",2,{"id":11,"text":12,"level":9},"before-you-upgrade","Before you upgrade","Upgrading from earlier versions of Clay, and solutions for common problems.",null,true,"\u002F_clay\u002Fsocial\u002Fguides.png",1792666369862]