[{"data":1,"prerenderedAt":23},["ShallowReactive",2],{"clay-page:\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents":3},{"html":4,"toc":5,"description":19,"hero":20,"list":21,"socialImage":22},"\u003Ch1 id=\"komponenten\">Komponenten\u003C\u002Fh1>\n\u003Cp>Markdown deckt Text, Listen, Tabellen und Code ab. Für den Rest dessen, was eine Dokumentation braucht, etwa denselben Befehl für drei Paketmanager, eine Anleitung in nummerierten Schritten oder ein Diagramm, hat Clay Komponenten. Sie sind schlichter Text in deinen Markdown-Dateien: kein HTML, nichts zu installieren, und sie bleiben in jedem Editor und auf GitHub lesbar.\u003C\u002Fp>\n\u003Cdiv class=\"clay-cards not-prose\">\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Ftabs\" data-route=\"\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Ftabs\">\u003Ci class=\"clay-card-icon fa-solid fa-table-columns\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Tabs und Codegruppen\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Alternativen an einer Stelle, etwa Anleitungen je System oder derselbe Befehl für npm, pnpm und yarn; die Wahl der Leser bleibt gespeichert.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fsteps\" data-route=\"\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fsteps\">\u003Ci class=\"clay-card-icon fa-solid fa-list-ol\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Schritte\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Eine nummerierte Liste als Anleitung, mit einem nummerierten Kreis je Schritt und einer Linie zum nächsten.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fcards\" data-route=\"\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fcards\">\u003Ci class=\"clay-card-icon fa-solid fa-table-cells-large\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Karten\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Links als Raster aus Karten, mit Icon und Beschreibung der Seiten, zu denen sie führen, oder eigenen.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fdetails\" data-route=\"\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fdetails\">\u003Ci class=\"clay-card-icon fa-solid fa-square-caret-down\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Details\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Eingeklappte Abschnitte, die Leser öffnen, wenn sie sie brauchen, etwa FAQs, lange Logs und Hintergründe.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fprompts\" data-route=\"\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fprompts\">\u003Ci class=\"clay-card-icon fa-solid fa-wand-magic-sparkles\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Prompts\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Ein vorgeschlagener Prompt für KI-Assistenten und Coding-Agenten, so gezeigt, wie er geschrieben ist, mit einem Knopf zum Kopieren.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fbadges\" data-route=\"\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fbadges\">\u003Ci class=\"clay-card-icon fa-solid fa-tag\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Badges\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Kleine Etiketten in Text und Überschriften, etwa „Neu“, „Beta“ oder „Veraltet“, in den Farben der Hinweise.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fmath\" data-route=\"\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fmath\">\u003Ci class=\"clay-card-icon fa-solid fa-square-root-variable\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Formeln\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Formeln in LaTeX, im Text oder in einer eigenen Zeile, gesetzt mit KaTeX beim Build der Seite.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fdiagrams\" data-route=\"\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fdiagrams\">\u003Ci class=\"clay-card-icon fa-solid fa-diagram-project\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Diagramme\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Flussdiagramme, Sequenzdiagramme, Kreisdiagramme und mehr aus Text mit Mermaid, in den Farben deiner Seite.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Ffile-trees\" data-route=\"\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Ffile-trees\">\u003Ci class=\"clay-card-icon fa-solid fa-folder-tree\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Dateibäume\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Ordner und Dateien aus einer eingerückten Liste, mit Icons je Dateityp, Kommentaren und einklappbaren Ordnern.\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fdiv>\n\u003Ch2 id=\"drei-schreibweisen\">\u003Ca class=\"heading-anchor\" href=\"#drei-schreibweisen\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#drei-schreibweisen\">#\u003C\u002Fa>Drei Schreibweisen\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Art\u003C\u002Fth>\n\u003Cth>Sieht aus wie\u003C\u002Fth>\n\u003Cth>Komponenten\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>Container\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>::: name\u003C\u002Fcode> … \u003Ccode>:::\u003C\u002Fcode> um Markdown herum\u003C\u002Ftd>\n\u003Ctd>\u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Ftabs\" data-route=\"\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Ftabs\">Tabs, Codegruppen\u003C\u002Fa>, \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fsteps\" data-route=\"\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fsteps\">Schritte\u003C\u002Fa>, \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fcards\" data-route=\"\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fcards\">Karten\u003C\u002Fa>, \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fdetails\" data-route=\"\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fdetails\">Details\u003C\u002Fa>, \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fprompts\" data-route=\"\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fprompts\">Prompts\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Im Text\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>:badge[Neu]\u003C\u002Fcode>, \u003Ccode>$E = mc^2$\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fbadges\" data-route=\"\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fbadges\">Badges\u003C\u002Fa>, \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fmath\" data-route=\"\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fmath\">Formeln\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Codeblöcke\u003C\u002Ftd>\n\u003Ctd>ein Codeblock in der Sprache \u003Ccode>mermaid\u003C\u002Fcode> oder \u003Ccode>tree\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fdiagrams\" data-route=\"\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fdiagrams\">Diagramme\u003C\u002Fa>, \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Ffile-trees\" data-route=\"\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Ffile-trees\">Dateibäume\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Ch2 id=\"container\">\u003Ca class=\"heading-anchor\" href=\"#container\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#container\">#\u003C\u002Fa>Container\u003C\u002Fh2>\n\u003Cp>Ein Container beginnt mit einer Zeile aus drei Doppelpunkten und dem Namen der Komponente und endet mit einer Zeile, die nur aus drei Doppelpunkten besteht. Alles dazwischen ist normales Markdown.\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\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\">::: details Warum drei Doppelpunkte?\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">Sie lesen sich gut als Text, und auch andere Dokumentationswerkzeuge nutzen sie; deine Dokumentation bleibt so übertragbar.\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=\"Code kopieren\" aria-label=\"Code kopieren\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cdetails class=\"clay-details collapse\">\u003Csummary class=\"collapse-title\">\u003Cspan class=\"clay-details-icon\" aria-hidden=\"true\">\u003Ci class=\"fa-solid fa-chevron-right\">\u003C\u002Fi>\u003C\u002Fspan>\u003Cspan class=\"clay-details-title\">Warum drei Doppelpunkte?\u003C\u002Fspan>\u003C\u002Fsummary>\u003Cdiv class=\"collapse-content\">\u003Cp>Sie lesen sich gut als Text, und auch andere Dokumentationswerkzeuge nutzen sie; deine Dokumentation bleibt so übertragbar.\u003C\u002Fp>\n\u003C\u002Fdiv>\u003C\u002Fdetails>\n\u003Cul>\n\u003Cli>\u003Cp>\u003Cstrong>Der Text nach dem Namen\u003C\u002Fstrong> ist der Titel der Komponente, wo sie einen hat, etwa bei \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fdetails\" data-route=\"\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fdetails\">Details\u003C\u002Fa>.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Container lassen sich verschachteln.\u003C\u002Fstrong> Ein Container kann einen anderen enthalten, zum Beispiel Tabs in einem eingeklappten Abschnitt. Gib dem äußeren mehr Doppelpunkte, damit klar ist, welche Zeile welchen schließt:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\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\">:::: details Installation auf deinem System\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">::: tabs\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">== macOS\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#CE9178\">`brew install node`\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">== Windows\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#CE9178\">`winget install OpenJS.NodeJS`\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">:::\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=\"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>Fehler bleiben sichtbar.\u003C\u002Fstrong> Ein Container mit einem Namen, den Clay nicht kennt, oder ohne schließende Zeile wird so gezeigt, wie du ihn geschrieben hast; ein Tippfehler versteckt also keinen Inhalt.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Codeblöcke sind Code.\u003C\u002Fstrong> \u003Ccode>:::\u003C\u002Fcode> in einem Codeblock bleibt, wie es ist; so zeigen diese Seiten die Schreibweise.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"suche-links-und-inhaltsverzeichnis\">\u003Ca class=\"heading-anchor\" href=\"#suche-links-und-inhaltsverzeichnis\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#suche-links-und-inhaltsverzeichnis\">#\u003C\u002Fa>Suche, Links und Inhaltsverzeichnis\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>Alles ist durchsuchbar\u003C\u002Fstrong>, auch Tabs, die gerade nicht gezeigt werden, und eingeklappte Abschnitte. Ein Suchergebnis darin zeigt den Tab oder öffnet den Abschnitt.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Links werden geprüft\u003C\u002Fstrong> wie alle anderen, auch in Karten und Tabs, siehe \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fpublishing\u002Fbuild-checks\" data-route=\"\u002F4.x\u002Fde\u002Fpublishing\u002Fbuild-checks\">Build-Prüfungen\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Überschriften in Containern\u003C\u002Fstrong> bekommen ihren \u003Ccode>#\u003C\u002Fcode>-Link und erscheinen unter „Auf dieser Seite“.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"ohne-javascript-und-auf-github\">\u003Ca class=\"heading-anchor\" href=\"#ohne-javascript-und-auf-github\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#ohne-javascript-und-auf-github\">#\u003C\u002Fa>Ohne JavaScript und auf GitHub\u003C\u002Fh2>\n\u003Cp>Clay rendert Komponenten beim Build, Seiten zeigen sie also, bevor JavaScript läuft: Tabs zeigen ihren ersten Tab, Formeln sind schon gesetzt. Nur Diagramme werden im Browser gezeichnet und zeigen bis dahin ihren Quelltext.\u003C\u002Fp>\n\u003Cp>Auf GitHub zeigen deine Markdown-Dateien die Komponenten so, wie du sie geschrieben hast, und bleiben lesbar. \u003Ccode>mermaid\u003C\u002Fcode>-Diagramme und \u003Ccode>$\u003C\u002Fcode>-Formeln zeichnet GitHub selbst.\u003C\u002Fp>\n",[6,10,13,16],{"id":7,"text":8,"level":9},"drei-schreibweisen","Drei Schreibweisen",2,{"id":11,"text":12,"level":9},"container","Container",{"id":14,"text":15,"level":9},"suche-links-und-inhaltsverzeichnis","Suche, Links und Inhaltsverzeichnis",{"id":17,"text":18,"level":9},"ohne-javascript-und-auf-github","Ohne JavaScript und auf GitHub","Tabs, Schritte, Karten, einklappbare Abschnitte, Prompts, Badges, Formeln, Diagramme und Dateibäume, geschrieben in schlichtem Markdown.",null,false,"\u002F_clay\u002Fsocial\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents.png",1792666372526]