[{"data":1,"prerenderedAt":20},["ShallowReactive",2],{"clay-page:\u002Fde\u002Fguides\u002Fupgrading-to-clay-5":3},{"html":4,"toc":5,"description":16,"hero":17,"list":18,"socialImage":19},"\u003Ch1 id=\"umstieg-auf-clay-5\">Umstieg auf Clay 5 \u003Cspan class=\"badge badge-sm badge-soft badge-success clay-badge\">Aktuell\u003C\u002Fspan>\u003C\u002Fh1>\n\u003Cp>Clay 5 bringt Seiten für APIs aus ihren OpenAPI-Dokumenten, und Request-Zellen, um sie auszuprobieren. Für eine bestehende Seite ändert sich wenig: Vier neue Komponentennamen sind vergeben, Clay schreibt jetzt einige Tags in den Head jeder Seite, die du vielleicht selbst eingetragen hast, und es setzt Pfeile, Striche und Anführungszeichen in deinem Text. Deine Seiten, Ordner, Versionen, Übersetzungen und die \u003Ccode>clay.yaml\u003C\u002Fcode> bleiben, wie sie sind.\u003C\u002Fp>\n\u003Ch2 id=\"auf-einen-blick\">\u003Ca class=\"heading-anchor\" href=\"#auf-einen-blick\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#auf-einen-blick\">#\u003C\u002Fa>Auf einen Blick\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> und \u003Ccode>::: credentials\u003C\u002Fcode> sind Text\u003C\u002Ftd>\n\u003Ctd>Sie sind \u003Ca href=\"\u002Fclay-example-repo\u002Fde\u002Ffeatures\u002Fopenapi\" data-route=\"\u002Fde\u002Ffeatures\u002Fopenapi\">Komponenten\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>og:locale\u003C\u002Fcode>, ein \u003Ccode>favicon.ico\u003C\u002Fcode> und ein \u003Ccode>apple-touch-icon\u003C\u002Fcode> kommen, wenn überhaupt, aus \u003Ccode>head\u003C\u002Fcode> in der \u003Ccode>clay.yaml\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Clay schreibt sie, siehe \u003Ca href=\"\u002Fclay-example-repo\u002Fde\u002Ffeatures\u002Fseo\" data-route=\"\u002Fde\u002Ffeatures\u002Fseo\">SEO\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>->\u003C\u002Fcode>, \u003Ccode>--\u003C\u002Fcode>, \u003Ccode>...\u003C\u002Fcode> und \u003Ccode>\"Anführungszeichen\"\u003C\u002Fcode> erscheinen wie getippt\u003C\u002Ftd>\n\u003Ctd>Sie erscheinen als → – … und mit den Anführungszeichen der Sprache der Seite, siehe \u003Ca href=\"\u002Fclay-example-repo\u002Fde\u002Fwriting\u002Fmarkdown#typografie\" data-route=\"\u002Fde\u002Fwriting\u002Fmarkdown#typografie\">Typografie\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Cp>Ein Coding-Agent kann den Umstieg erledigen:\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>Vorgeschlagener 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=\"Prompt kopieren\" aria-label=\"Prompt kopieren\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Ch2 id=\"schritte\">\u003Ca class=\"heading-anchor\" href=\"#schritte\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#schritte\">#\u003C\u002Fa>Schritte\u003C\u002Fh2>\n\u003Cdiv class=\"clay-steps\">\u003Col>\n\u003Cli>\u003Cp>\u003Cstrong>Clay aktualisieren.\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=\"Code kopieren\" aria-label=\"Code kopieren\">\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=\"Code kopieren\" aria-label=\"Code kopieren\">\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=\"Code kopieren\" aria-label=\"Code kopieren\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Nach den neuen Komponentennamen suchen.\u003C\u002Fstrong> Eine Zeile, die mit \u003Ccode>::: request\u003C\u002Fcode>, \u003Ccode>::: fields\u003C\u002Fcode>, \u003Ccode>::: endpoints\u003C\u002Fcode> oder \u003Ccode>::: credentials\u003C\u002Fcode> beginnt, war Text und ist jetzt eine Komponente. Außerhalb von Codeblöcken sind solche Zeilen selten; liste sie mit:\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=\"Code kopieren\" aria-label=\"Code kopieren\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cp>Setz die, die Text bleiben sollen, in einen Codeblock, oder schreib \u003Ccode>\\:::\u003C\u002Fcode>.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Head-Tags entfernen, die Clay jetzt schreibt.\u003C\u002Fstrong> Clay fügt jeder Seite \u003Ccode>og:locale\u003C\u002Fcode>, ein \u003Ccode>favicon.ico\u003C\u002Fcode> und ein aus deinem \u003Ccode>favicon\u003C\u002Fcode> gezeichnetes \u003Ccode>apple-touch-icon\u003C\u002Fcode> hinzu. Wenn \u003Ccode>head\u003C\u002Fcode> in der \u003Ccode>clay.yaml\u003C\u002Fcode> sie auch einträgt, entferne sie dort, damit sie nicht doppelt in der Seite stehen:\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=\"Code kopieren\" aria-label=\"Code kopieren\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Prüfen.\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=\"Code kopieren\" aria-label=\"Code kopieren\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cp>Wenn der Build durchläuft, ist der Umstieg fertig.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003C\u002Fol>\n\u003C\u002Fdiv>\n\u003Ch2 id=\"was-noch-neu-ist\">\u003Ca class=\"heading-anchor\" href=\"#was-noch-neu-ist\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#was-noch-neu-ist\">#\u003C\u002Fa>Was noch neu ist\u003C\u002Fh2>\n\u003Cdiv class=\"clay-cards not-prose\">\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002Fde\u002Ffeatures\u002Fopenapi\" data-route=\"\u002Fde\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\">Seiten für jede Operation und jedes Schema einer API, unter der Dokumentation in der Navigation, und Request-Zellen, um sie auf der Seite auszuprobieren.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002Fde\u002Ffeatures\u002Fseo\" data-route=\"\u002Fde\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 für Suchergebnisse und Homescreens, der Name der Website in Suchergebnissen, und die Sprache jeder Seite für Linkvorschauen.\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fdiv>\n\u003Cul>\n\u003Cli>Gespeicherte Versionen behalten ihre APIs: \u003Ccode>clay version\u003C\u002Fcode> kopiert die OpenAPI-Dokumente in die Version, so bleiben ihre Seiten, wie sie waren. Siehe \u003Ca href=\"\u002Fclay-example-repo\u002Fde\u002Forganizing\u002Fversions\" data-route=\"\u002Fde\u002Forganizing\u002Fversions\">Versionen\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>\u003Ccode>footer\u003C\u002Fcode> in der \u003Ccode>clay.yaml\u003C\u002Fcode> setzt Links und eine Textzeile unter jede Seite, siehe \u003Ca href=\"\u002Fclay-example-repo\u002Fde\u002Fconfiguration\u002Fclay-yaml#fu%C3%9Fzeile\" data-route=\"\u002Fde\u002Fconfiguration\u002Fclay-yaml#fu%C3%9Fzeile\">clay.yaml\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>Die Seitenleiste lässt sich durch Ziehen ihres Rands breiter oder schmaler machen, und lange Titel enden mit „…“.\u003C\u002Fli>\n\u003Cli>In der Seitenleiste bleibt die Seite, von der du kommst, nicht mehr markiert, wenn du einem Link im Text folgst.\u003C\u002Fli>\n\u003C\u002Ful>\n",[6,10,13],{"id":7,"text":8,"level":9},"auf-einen-blick","Auf einen Blick",2,{"id":11,"text":12,"level":9},"schritte","Schritte",{"id":14,"text":15,"level":9},"was-noch-neu-ist","Was noch neu ist","Eine Clay-4-Seite auf Clay 5 bringen - vier neue Komponentennamen, und Head-Tags, die Clay jetzt selbst schreibt.",null,false,"\u002F_clay\u002Fsocial\u002Fde\u002Fguides\u002Fupgrading-to-clay-5.png",1792666371844]