[{"data":1,"prerenderedAt":36},["ShallowReactive",2],{"clay-page:\u002Fwriting\u002Fcomponents\u002Ftabs":3},{"html":4,"toc":5,"description":32,"hero":33,"list":34,"socialImage":35},"\u003Ch1 id=\"tabs-and-code-groups\">Tabs and Code Groups\u003C\u002Fh1>\n\u003Cp>Tabs show alternatives in one place: instructions for each operating system, or the same setting in two formats. Readers see the one they pick, and the others stay out of their way.\u003C\u002Fp>\n\u003Ch2 id=\"tabs\">\u003Ca class=\"heading-anchor\" href=\"#tabs\" aria-label=\"Link to this section\" data-route=\"#tabs\">#\u003C\u002Fa>Tabs\u003C\u002Fh2>\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\">::: 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:#000000;--shiki-dark:#D4D4D4\">Install Node.js with [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">Homebrew\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">](\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-light-text-decoration:underline;--shiki-dark:#D4D4D4;--shiki-dark-text-decoration:underline\">https:\u002F\u002Fbrew.sh\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">):\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">```bash\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">brew\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> install\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> node\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\">== Windows\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">Download the installer from [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">nodejs.org\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">](\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-light-text-decoration:underline;--shiki-dark:#D4D4D4;--shiki-dark-text-decoration:underline\">https:\u002F\u002Fnodejs.org\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">) and run it.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">== Linux\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">Use your distribution's package manager, for example \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#CE9178\">`sudo apt install nodejs`\u003C\u002Fspan>\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=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cdiv class=\"clay-tabs\" 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\">macOS\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\">Windows\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\">Linux\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=\"macOS\">\u003Cp>Install Node.js with \u003Ca href=\"https:\u002F\u002Fbrew.sh\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>Homebrew\u003C\u002Fa>:\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\">brew\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> install\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> node\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=\"Windows\" hidden=\"\">\u003Cp>Download the installer from \u003Ca href=\"https:\u002F\u002Fnodejs.org\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>nodejs.org\u003C\u002Fa> and run it.\u003C\u002Fp>\n\u003C\u002Fdiv>\u003Cdiv role=\"tabpanel\" id=\"clay-tabs-1-2-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-1-2\" data-label=\"Linux\" hidden=\"\">\u003Cp>Use your distribution’s package manager, for example \u003Ccode>sudo apt install nodejs\u003C\u002Fcode>.\u003C\u002Fp>\n\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cul>\n\u003Cli>\u003Cstrong>Each \u003Ccode>== Label\u003C\u002Fcode> line starts a tab.\u003C\u002Fstrong> The label is plain text.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>A tab holds any Markdown:\u003C\u002Fstrong> paragraphs, lists, code blocks, alerts and other components.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>The first tab shows first.\u003C\u002Fstrong>\u003C\u002Fli>\n\u003Cli>Text before the first label is left out. A \u003Ccode>tabs\u003C\u002Fcode> container without any label is shown as text.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"code-groups\">\u003Ca class=\"heading-anchor\" href=\"#code-groups\" aria-label=\"Link to this section\" data-route=\"#code-groups\">#\u003C\u002Fa>Code groups\u003C\u002Fh2>\n\u003Cp>For the same code in several variants, a code group is shorter: each code block becomes a tab, named in square brackets after its language.\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\">::: code-group\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">```bash [npm]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\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\">```bash [pnpm]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\"> -D\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> clay-doc\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\">```bash [yarn]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\"> -D\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> clay-doc\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=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\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-2-0\" class=\"tab tab-active\" aria-controls=\"clay-tabs-2-0-panel\" aria-selected=\"true\" tabindex=\"0\">npm\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\">pnpm\u003C\u002Fbutton>\u003Cbutton type=\"button\" role=\"tab\" id=\"clay-tabs-2-2\" class=\"tab\" aria-controls=\"clay-tabs-2-2-panel\" aria-selected=\"false\" tabindex=\"-1\">yarn\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=\"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\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=\"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\"> -D\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> clay-doc\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-2-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-2-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\"> -D\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> clay-doc\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>The tabs sit in a bar on top of the code. With shell code in a tab, the bar is a \u003Ca href=\"\u002Fclay-example-repo\u002Fwriting\u002Fcode-blocks#terminal\" data-route=\"\u002Fwriting\u002Fcode-blocks#terminal\">terminal\u003C\u002Fa>’s: a window’s three buttons come before the tabs, and each command gets its \u003Ccode>$\u003C\u002Fcode>. \u003Ccode>windowDots: false\u003C\u002Fcode> in the \u003Ca href=\"\u002Fclay-example-repo\u002Ffeatures\u002Fthemes-and-icons\" data-route=\"\u002Ffeatures\u002Fthemes-and-icons\">theme\u003C\u002Fa> leaves out the buttons.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Without a name in brackets\u003C\u002Fstrong>, a tab is named after the language, like \u003Ccode>yaml\u003C\u002Fcode> or \u003Ccode>json\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Everything else of \u003Ca href=\"\u002Fclay-example-repo\u002Fwriting\u002Fcode-blocks\" data-route=\"\u002Fwriting\u002Fcode-blocks\">code blocks\u003C\u002Fa> works\u003C\u002Fstrong>, like highlighted lines: \u003Ccode>```ts [clay.config.ts] {2}\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>Text between the code blocks of a group is left out.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3 id=\"other-languages\">\u003Ca class=\"heading-anchor\" href=\"#other-languages\" aria-label=\"Link to this section\" data-route=\"#other-languages\">#\u003C\u002Fa>Other languages\u003C\u002Fh3>\n\u003Cp>Code in other languages has the same bar, without the buttons. Without names in brackets, the tabs are named after the languages:\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\">::: code-group\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">```ts\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005797;--shiki-dark:#4FC1FF\"> pages\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1b5b6e;--shiki-dark:#4EC9B0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">[] \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#8f00b4;--shiki-dark:#C586C0\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\"> loadPages\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"docs\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#001080;--shiki-dark:#9CDCFE\">console\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">log\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#001080;--shiki-dark:#9CDCFE\">pages\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#001080;--shiki-dark:#9CDCFE\">length\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> pages`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">);\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\">```js\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005797;--shiki-dark:#4FC1FF\"> pages\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#8f00b4;--shiki-dark:#C586C0\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\"> loadPages\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"docs\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#001080;--shiki-dark:#9CDCFE\">console\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">log\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#001080;--shiki-dark:#9CDCFE\">pages\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#001080;--shiki-dark:#9CDCFE\">length\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> pages`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">);\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=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cdiv class=\"clay-tabs clay-code-group\" data-tabs=\"\">\u003Cdiv role=\"tablist\" class=\"tabs tabs-border not-prose\">\u003Cbutton type=\"button\" role=\"tab\" id=\"clay-tabs-3-0\" class=\"tab tab-active\" aria-controls=\"clay-tabs-3-0-panel\" aria-selected=\"true\" tabindex=\"0\">ts\u003C\u002Fbutton>\u003Cbutton type=\"button\" role=\"tab\" id=\"clay-tabs-3-1\" class=\"tab\" aria-controls=\"clay-tabs-3-1-panel\" aria-selected=\"false\" tabindex=\"-1\">js\u003C\u002Fbutton>\u003C\u002Fdiv>\u003Cdiv role=\"tabpanel\" id=\"clay-tabs-3-0-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-3-0\" data-label=\"ts\">\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:#0000FF;--shiki-dark:#569CD6\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005797;--shiki-dark:#4FC1FF\"> pages\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1b5b6e;--shiki-dark:#4EC9B0\">string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">[] = \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#8f00b4;--shiki-dark:#C586C0\">await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\"> loadPages\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"docs\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#001080;--shiki-dark:#9CDCFE\">console\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">log\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#001080;--shiki-dark:#9CDCFE\">pages\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#001080;--shiki-dark:#9CDCFE\">length\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> pages`\u003C\u002Fspan>\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-3-1-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-3-1\" data-label=\"js\" hidden=\"\">\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:#0000FF;--shiki-dark:#569CD6\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005797;--shiki-dark:#4FC1FF\"> pages\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> = \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#8f00b4;--shiki-dark:#C586C0\">await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\"> loadPages\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"docs\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#001080;--shiki-dark:#9CDCFE\">console\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">log\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#001080;--shiki-dark:#9CDCFE\">pages\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#001080;--shiki-dark:#9CDCFE\">length\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> pages`\u003C\u002Fspan>\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\u003Ch3 id=\"shell-code-and-other-code\">\u003Ca class=\"heading-anchor\" href=\"#shell-code-and-other-code\" aria-label=\"Link to this section\" data-route=\"#shell-code-and-other-code\">#\u003C\u002Fa>Shell code and other code\u003C\u002Fh3>\n\u003Cp>One tab of shell code is enough for the buttons, like bash next to PowerShell:\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\">::: code-group\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">```bash [macOS and Linux]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#001080;--shiki-dark:#9CDCFE\"> CLAY_BASE_URL\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"\u002Fpreview\u002F\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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>\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\">```powershell [Windows]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#001080;--shiki-dark:#9CDCFE\">$env:CLAY_BASE_URL\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> \"\u002Fpreview\u002F\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">npx clay build\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=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\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-4-0\" class=\"tab tab-active\" aria-controls=\"clay-tabs-4-0-panel\" aria-selected=\"true\" tabindex=\"0\">macOS and Linux\u003C\u002Fbutton>\u003Cbutton type=\"button\" role=\"tab\" id=\"clay-tabs-4-1\" class=\"tab\" aria-controls=\"clay-tabs-4-1-panel\" aria-selected=\"false\" tabindex=\"-1\">Windows\u003C\u002Fbutton>\u003C\u002Fdiv>\u003Cdiv role=\"tabpanel\" id=\"clay-tabs-4-0-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-4-0\" data-label=\"macOS and Linux\">\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:#0000FF;--shiki-dark:#569CD6\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#001080;--shiki-dark:#9CDCFE\"> CLAY_BASE_URL\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"\u002Fpreview\u002F\"\u003C\u002Fspan>\u003C\u002Fspan>\n\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>\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-4-1-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-4-1\" data-label=\"Windows\" hidden=\"\">\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:#001080;--shiki-dark:#9CDCFE\">$env:CLAY_BASE_URL\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> = \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"\u002Fpreview\u002F\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">npx clay build\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\u003Ch3 id=\"text-and-file-names\">\u003Ca class=\"heading-anchor\" href=\"#text-and-file-names\" aria-label=\"Link to this section\" data-route=\"#text-and-file-names\">#\u003C\u002Fa>Text and file names\u003C\u002Fh3>\n\u003Cp>A code group holds only code. For text next to the code, or a \u003Ca href=\"\u002Fclay-example-repo\u002Fwriting\u002Fcode-blocks#file-names\" data-route=\"\u002Fwriting\u002Fcode-blocks#file-names\">file name\u003C\u002Fa> above it, use tabs with code blocks inside:\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\">::: tabs\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">== GitHub Pages\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">Build in the workflow and upload \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#CE9178\">`publish\u002Fpublic`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">```yaml [.github\u002Fworkflows\u002Fdeploy.yaml]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">- \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">run\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">npm ci\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">- \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">run\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">npx clay build --strict\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">- \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">uses\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">actions\u002Fupload-pages-artifact@v3\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">  with\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">    path\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">publish\u002Fpublic\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\">== Netlify\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">Netlify reads its settings from a file in the repository:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">```toml [netlify.toml]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">[build]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  command = \"npx clay build --strict\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  publish = \"publish\u002Fpublic\"\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=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cdiv class=\"clay-tabs\" data-tabs=\"\">\u003Cdiv role=\"tablist\" class=\"tabs tabs-border not-prose\">\u003Cbutton type=\"button\" role=\"tab\" id=\"clay-tabs-5-0\" class=\"tab tab-active\" aria-controls=\"clay-tabs-5-0-panel\" aria-selected=\"true\" tabindex=\"0\">GitHub Pages\u003C\u002Fbutton>\u003Cbutton type=\"button\" role=\"tab\" id=\"clay-tabs-5-1\" class=\"tab\" aria-controls=\"clay-tabs-5-1-panel\" aria-selected=\"false\" tabindex=\"-1\">Netlify\u003C\u002Fbutton>\u003C\u002Fdiv>\u003Cdiv role=\"tabpanel\" id=\"clay-tabs-5-0-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-5-0\" data-label=\"GitHub Pages\">\u003Cp>Build in the workflow and upload \u003Ccode>publish\u002Fpublic\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cdiv class=\"code-block has-title\">\u003Cdiv class=\"code-title\">\u003Ci class=\"fa-regular fa-file-lines\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan>.github\u002Fworkflows\u002Fdeploy.yaml\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>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">run\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">npm ci\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">- \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">run\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">npx clay build --strict\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">- \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">uses\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">actions\u002Fupload-pages-artifact@v3\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">  with\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">    path\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">publish\u002Fpublic\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-5-1-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-5-1\" data-label=\"Netlify\" hidden=\"\">\u003Cp>Netlify reads its settings from a file in the repository:\u003C\u002Fp>\n\u003Cdiv class=\"code-block has-title\">\u003Cdiv class=\"code-title\">\u003Ci class=\"fa-regular fa-file-lines\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan>netlify.toml\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\">[build]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#001080;--shiki-dark:#9CDCFE\">  command\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> = \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"npx clay build --strict\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#001080;--shiki-dark:#9CDCFE\">  publish\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> = \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"publish\u002Fpublic\"\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\u003Ch2 id=\"the-readers-choice-is-remembered\">\u003Ca class=\"heading-anchor\" href=\"#the-readers-choice-is-remembered\" aria-label=\"Link to this section\" data-route=\"#the-readers-choice-is-remembered\">#\u003C\u002Fa>The reader’s choice is remembered\u003C\u002Fh2>\n\u003Cp>Picking a tab picks the tab of the same name in every group on the page, and Clay remembers it: a reader who chose \u003Cstrong>pnpm\u003C\u002Fstrong> once sees pnpm in every group on every page, also on their next visit. The choice is kept in the reader’s browser only.\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>Name the same thing the same way across your docs, always “pnpm” and never “PNPM” on one page and “pnpm” on another, so the choice carries over.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Ch2 id=\"keyboard\">\u003Ca class=\"heading-anchor\" href=\"#keyboard\" aria-label=\"Link to this section\" data-route=\"#keyboard\">#\u003C\u002Fa>Keyboard\u003C\u002Fh2>\n\u003Cp>\u003Ckbd>Tab\u003C\u002Fkbd> moves to the tabs, \u003Ckbd>←\u003C\u002Fkbd> and \u003Ckbd>→\u003C\u002Fkbd> switch between them, \u003Ckbd>Home\u003C\u002Fkbd> and \u003Ckbd>End\u003C\u002Fkbd> jump to the first and the last tab.\u003C\u002Fp>\n\u003Ch2 id=\"search\">\u003Ca class=\"heading-anchor\" href=\"#search\" aria-label=\"Link to this section\" data-route=\"#search\">#\u003C\u002Fa>Search\u003C\u002Fh2>\n\u003Cp>The \u003Ca href=\"\u002Fclay-example-repo\u002Ffeatures\u002Fsearch\" data-route=\"\u002Ffeatures\u002Fsearch\">search\u003C\u002Fa> finds the text of every tab. Opening a result that is in a hidden tab shows that tab.\u003C\u002Fp>\n",[6,10,13,17,20,23,26,29],{"id":7,"text":8,"level":9},"tabs","Tabs",2,{"id":11,"text":12,"level":9},"code-groups","Code groups",{"id":14,"text":15,"level":16},"other-languages","Other languages",3,{"id":18,"text":19,"level":16},"shell-code-and-other-code","Shell code and other code",{"id":21,"text":22,"level":16},"text-and-file-names","Text and file names",{"id":24,"text":25,"level":9},"the-readers-choice-is-remembered","The reader’s choice is remembered",{"id":27,"text":28,"level":9},"keyboard","Keyboard",{"id":30,"text":31,"level":9},"search","Search","Alternatives in one place, like instructions per system or the same command for npm, pnpm and yarn; the reader's choice is remembered.",null,false,"\u002F_clay\u002Fsocial\u002Fwriting\u002Fcomponents\u002Ftabs.png",1792666370458]