[{"data":1,"prerenderedAt":23},["ShallowReactive",2],{"clay-page:\u002F4.x\u002Fwriting\u002Fcomponents":3},{"html":4,"toc":5,"description":19,"hero":20,"list":21,"socialImage":22},"\u003Ch1 id=\"components\">Components\u003C\u002Fh1>\n\u003Cp>Markdown covers text, lists, tables and code. For the rest of what docs need, like the same command for three package managers, a guide in numbered steps or a diagram, Clay has components. They are plain text in your Markdown files: no HTML, nothing to install, and they stay readable in any editor and on GitHub.\u003C\u002Fp>\n\u003Cdiv class=\"clay-cards not-prose\">\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Ftabs\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Ftabs\">\u003Ci class=\"clay-card-icon fa-solid fa-table-columns\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Tabs and Code Groups\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Alternatives in one place, like instructions per system or the same command for npm, pnpm and yarn; the reader's choice is remembered.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Fsteps\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Fsteps\">\u003Ci class=\"clay-card-icon fa-solid fa-list-ol\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Steps\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">A numbered list as a guide, with a numbered circle for each step and a line that leads to the next.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Fcards\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Fcards\">\u003Ci class=\"clay-card-icon fa-solid fa-table-cells-large\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Cards\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Links as a grid of cards, with the icon and description of the pages they lead to, or ones of your own.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Fdetails\" data-route=\"\u002F4.x\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\">Folded sections that readers open when they need them, like FAQs, long logs and background.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Fprompts\" data-route=\"\u002F4.x\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\">A suggested prompt for AI assistants and coding agents, shown as written, with a button to copy it.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Fbadges\" data-route=\"\u002F4.x\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\">Small labels in text and headings, like \"New\", \"Beta\" or \"Deprecated\", in the colors of the alerts.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Fmath\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Fmath\">\u003Ci class=\"clay-card-icon fa-solid fa-square-root-variable\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Math\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Formulas in LaTeX, inline or on a line of their own, typeset with KaTeX when the site is built.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Fdiagrams\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Fdiagrams\">\u003Ci class=\"clay-card-icon fa-solid fa-diagram-project\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Diagrams\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Flowcharts, sequence diagrams, pie charts and more from text with Mermaid, in the colors of your site.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Ffile-trees\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Ffile-trees\">\u003Ci class=\"clay-card-icon fa-solid fa-folder-tree\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">File Trees\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Folders and files from an indented list, with icons by file type, comments and folders that fold.\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fdiv>\n\u003Ch2 id=\"three-ways-to-write-them\">\u003Ca class=\"heading-anchor\" href=\"#three-ways-to-write-them\" aria-label=\"Link to this section\" data-route=\"#three-ways-to-write-them\">#\u003C\u002Fa>Three ways to write them\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Kind\u003C\u002Fth>\n\u003Cth>Looks like\u003C\u002Fth>\n\u003Cth>Components\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>Containers\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>::: name\u003C\u002Fcode> … \u003Ccode>:::\u003C\u002Fcode> around Markdown\u003C\u002Ftd>\n\u003Ctd>\u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Ftabs\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Ftabs\">tabs, code groups\u003C\u002Fa>, \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Fsteps\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Fsteps\">steps\u003C\u002Fa>, \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Fcards\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Fcards\">cards\u003C\u002Fa>, \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Fdetails\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Fdetails\">details\u003C\u002Fa>, \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Fprompts\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Fprompts\">prompts\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Inline\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>:badge[New]\u003C\u002Fcode>, \u003Ccode>$E = mc^2$\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Fbadges\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Fbadges\">badges\u003C\u002Fa>, \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Fmath\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Fmath\">math\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Code blocks\u003C\u002Ftd>\n\u003Ctd>a code block in the language \u003Ccode>mermaid\u003C\u002Fcode> or \u003Ccode>tree\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Fdiagrams\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Fdiagrams\">diagrams\u003C\u002Fa>, \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Ffile-trees\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Ffile-trees\">file trees\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Ch2 id=\"containers\">\u003Ca class=\"heading-anchor\" href=\"#containers\" aria-label=\"Link to this section\" data-route=\"#containers\">#\u003C\u002Fa>Containers\u003C\u002Fh2>\n\u003Cp>A container starts with a line of three colons and the component’s name, and ends with a line of three colons on their own. Everything in between is normal 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 Why three colons?\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">They read well as plain text and are used by other documentation tools too, so your docs stay portable.\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\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\">Why three colons?\u003C\u002Fspan>\u003C\u002Fsummary>\u003Cdiv class=\"collapse-content\">\u003Cp>They read well as plain text and are used by other documentation tools too, so your docs stay portable.\u003C\u002Fp>\n\u003C\u002Fdiv>\u003C\u002Fdetails>\n\u003Cul>\n\u003Cli>\u003Cp>\u003Cstrong>The text after the name\u003C\u002Fstrong> is the component’s title, where it has one, like the title of \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Fdetails\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Fdetails\">details\u003C\u002Fa>.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Containers nest.\u003C\u002Fstrong> A container may hold another one, for example tabs inside a folded section. Give the outer one more colons to make clear which line closes which:\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 Install on your 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=\"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>Mistakes stay visible.\u003C\u002Fstrong> A container with a name Clay does not know, or without its closing line, is shown as the text you wrote, so a typo does not hide content.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Code blocks are code.\u003C\u002Fstrong> \u003Ccode>:::\u003C\u002Fcode> inside a code block is shown as is; that is how these pages show the syntax.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"search-links-and-the-contents\">\u003Ca class=\"heading-anchor\" href=\"#search-links-and-the-contents\" aria-label=\"Link to this section\" data-route=\"#search-links-and-the-contents\">#\u003C\u002Fa>Search, links and the contents\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>Everything is searchable\u003C\u002Fstrong>, including tabs that are not shown and folded sections. Opening a search result shows the tab or opens the section it is in.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Links are checked\u003C\u002Fstrong> like all others, also inside cards and tabs, see \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fpublishing\u002Fbuild-checks\" data-route=\"\u002F4.x\u002Fpublishing\u002Fbuild-checks\">build checks\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Headings inside containers\u003C\u002Fstrong> get their \u003Ccode>#\u003C\u002Fcode> links and appear under “On this page”.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"without-javascript-and-on-github\">\u003Ca class=\"heading-anchor\" href=\"#without-javascript-and-on-github\" aria-label=\"Link to this section\" data-route=\"#without-javascript-and-on-github\">#\u003C\u002Fa>Without JavaScript and on GitHub\u003C\u002Fh2>\n\u003Cp>Clay renders components when it builds the site, so pages show them before any JavaScript runs: tabs show their first tab, math is already typeset. Diagrams are the one exception; they are drawn in the browser and show their source until then.\u003C\u002Fp>\n\u003Cp>On GitHub, your Markdown files show the components as the text you wrote, which stays readable. GitHub draws \u003Ccode>mermaid\u003C\u002Fcode> diagrams and \u003Ccode>$\u003C\u002Fcode> math itself.\u003C\u002Fp>\n",[6,10,13,16],{"id":7,"text":8,"level":9},"three-ways-to-write-them","Three ways to write them",2,{"id":11,"text":12,"level":9},"containers","Containers",{"id":14,"text":15,"level":9},"search-links-and-the-contents","Search, links and the contents",{"id":17,"text":18,"level":9},"without-javascript-and-on-github","Without JavaScript and on GitHub","Tabs, steps, cards, folded sections, prompts, badges, math, diagrams and file trees, written in plain Markdown.",null,false,"\u002F_clay\u002Fsocial\u002F4.x\u002Fwriting\u002Fcomponents.png",1792666369323]