[{"data":1,"prerenderedAt":20},["ShallowReactive",2],{"clay-page:\u002F4.x\u002Fwriting":3},{"html":4,"toc":5,"description":16,"hero":17,"list":18,"socialImage":19},"\u003Ch1 id=\"writing\">Writing\u003C\u002Fh1>\n\u003Cp>Every page is a Markdown file in \u003Ccode>docs\u002F\u003C\u002Fcode>, written in \u003Cstrong>Clay Flavored Markdown\u003C\u002Fstrong> (CFM): the Markdown you know from GitHub, plus syntax highlighting, alerts and components. Clay checks your links on every build.\u003C\u002Fp>\n\u003Cdiv class=\"clay-cards not-prose\">\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fpages\" data-route=\"\u002F4.x\u002Fwriting\u002Fpages\">\u003Ci class=\"clay-card-icon fa-solid fa-file-lines\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Pages\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">How Markdown files become pages, how pages get their titles and which front matter fields Clay reads.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fmarkdown\" data-route=\"\u002F4.x\u002Fwriting\u002Fmarkdown\">\u003Ci class=\"clay-card-icon fa-brands fa-markdown\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Markdown\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Clay Flavored Markdown - GitHub's Markdown plus alerts, components, math and diagrams - from headings and lists to tables and task lists, with examples.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcode-blocks\" data-route=\"\u002F4.x\u002Fwriting\u002Fcode-blocks\">\u003Ci class=\"clay-card-icon fa-solid fa-code\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Code Blocks\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Syntax highlighting for over 200 languages, file names, highlighted lines, diffs, focus and a copy button.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Falerts\" data-route=\"\u002F4.x\u002Fwriting\u002Falerts\">\u003Ci class=\"clay-card-icon fa-solid fa-circle-exclamation\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Alerts\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Six kinds of callouts for notes, tips and warnings, written with GitHub's alert syntax.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\">\u003Ci class=\"clay-card-icon fa-solid fa-puzzle-piece\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Components\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Tabs, steps, cards, folded sections, prompts, badges, math, diagrams and file trees, written in plain Markdown.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Flinks-and-images\" data-route=\"\u002F4.x\u002Fwriting\u002Flinks-and-images\">\u003Ci class=\"clay-card-icon fa-solid fa-link\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Links & Images\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Linking between pages like on GitHub, linking to sections, adding images and offering downloads.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fhtml\" data-route=\"\u002F4.x\u002Fwriting\u002Fhtml\">\u003Ci class=\"clay-card-icon fa-brands fa-html5\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">HTML\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Using HTML inside Markdown, videos and embeds, and what Clay removes to keep your site safe.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fsnippets-and-variables\" data-route=\"\u002F4.x\u002Fwriting\u002Fsnippets-and-variables\">\u003Ci class=\"clay-card-icon fa-solid fa-paste\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Snippets & Variables\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Write a text once and use it on many pages, include code from your project, and fill in values like the current version.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fgenerated-docs\" data-route=\"\u002F4.x\u002Fwriting\u002Fgenerated-docs\">\u003Ci class=\"clay-card-icon fa-solid fa-gears\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Generated Docs\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">API reference from your code, and other pages that tools write, generated before every build.\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fdiv>\n\u003Ch2 id=\"a-page-at-a-glance\">\u003Ca class=\"heading-anchor\" href=\"#a-page-at-a-glance\" aria-label=\"Link to this section\" data-route=\"#a-page-at-a-glance\">#\u003C\u002Fa>A page at a glance\u003C\u002Fh2>\n\u003Cp>One file, from front matter to components:\u003C\u002Fp>\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\">Result\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\">Markdown\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=\"Result\">\u003Cp>\u003Cstrong>Setup\u003C\u002Fstrong> is the page’s title in the sidebar; its text starts like this:\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>Already installed? Skip to \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fconfiguration\u002Fclay-yaml\" data-route=\"\u002F4.x\u002Fconfiguration\u002Fclay-yaml\">the configuration\u003C\u002Fa>.\u003C\u002Fp>\n\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>\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\"> --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>\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=\"Markdown\" 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:#000000;--shiki-dark:#D4D4D4\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">Setup\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">icon\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">fa-solid fa-wrench\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">description\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">Install and configure the project in five minutes.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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:#800000;--shiki-light-font-weight:bold;--shiki-dark:#569CD6;--shiki-dark-font-weight:bold\"># Setting up the project\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0451A5;--shiki-dark:#6A9955\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">!TIP\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0451A5;--shiki-dark:#6A9955\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> Already installed? Skip to [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">the configuration\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\">..\u002Fconfiguration\u002Fclay-yaml.md\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\">::: 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\"> --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\">:::\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=\"what-to-use-when\">\u003Ca class=\"heading-anchor\" href=\"#what-to-use-when\" aria-label=\"Link to this section\" data-route=\"#what-to-use-when\">#\u003C\u002Fa>What to use when\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>You want to …\u003C\u002Fth>\n\u003Cth>Use\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>Show a command or a file\u003C\u002Ftd>\n\u003Ctd>a \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcode-blocks\" data-route=\"\u002F4.x\u002Fwriting\u002Fcode-blocks\">code block\u003C\u002Fa>, with its file name, highlighted lines or a diff\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Show the same thing for npm, pnpm and yarn, or for each system\u003C\u002Ftd>\n\u003Ctd>\u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Ftabs\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Ftabs\">tabs or a code group\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Walk readers through something in order\u003C\u002Ftd>\n\u003Ctd>\u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Fsteps\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Fsteps\">steps\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Point out a tip, a warning or a risk\u003C\u002Ftd>\n\u003Ctd>an \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Falerts\" data-route=\"\u002F4.x\u002Fwriting\u002Falerts\">alert\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Hide what only some readers need\u003C\u002Ftd>\n\u003Ctd>\u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Fdetails\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Fdetails\">details\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Lead readers to other pages\u003C\u002Ftd>\n\u003Ctd>\u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Fcards\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Fcards\">cards\u003C\u002Fa> or \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Flinks-and-images\" data-route=\"\u002F4.x\u002Fwriting\u002Flinks-and-images\">links\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Explain how parts fit together\u003C\u002Ftd>\n\u003Ctd>a \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Fdiagrams\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Fdiagrams\">diagram\u003C\u002Fa> or a \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Ffile-trees\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Ffile-trees\">file tree\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Suggest what to ask an AI assistant or agent\u003C\u002Ftd>\n\u003Ctd>a \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Fprompts\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Fprompts\">prompt\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Mark something as new or deprecated\u003C\u002Ftd>\n\u003Ctd>a \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Fbadges\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Fbadges\">badge\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Ch2 id=\"key-ideas\">\u003Ca class=\"heading-anchor\" href=\"#key-ideas\" aria-label=\"Link to this section\" data-route=\"#key-ideas\">#\u003C\u002Fa>Key ideas\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>One file, one page.\u003C\u002Fstrong> \u003Ccode>docs\u002Fguides\u002Fsetup.md\u003C\u002Fcode> becomes \u003Ccode>\u002Fguides\u002Fsetup\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Links work like on GitHub.\u003C\u002Fstrong> Link to the \u003Ccode>.md\u003C\u002Fcode> file; Clay turns it into the page’s URL and reports links that lead nowhere.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Files next to your pages are published.\u003C\u002Fstrong> Images and downloads in \u003Ccode>docs\u002F\u003C\u002Fcode> keep their relative paths.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Plain text stays plain.\u003C\u002Fstrong> Components are written as text too, so every page reads well in an editor and on GitHub.\u003C\u002Fli>\n\u003C\u002Ful>\n",[6,10,13],{"id":7,"text":8,"level":9},"a-page-at-a-glance","A page at a glance",2,{"id":11,"text":12,"level":9},"what-to-use-when","What to use when",{"id":14,"text":15,"level":9},"key-ideas","Key ideas","Everything about the content of a page, from Markdown and code blocks to components, links and images.",null,false,"\u002F_clay\u002Fsocial\u002F4.x\u002Fwriting.png",1792666369163]