[{"data":1,"prerenderedAt":20},["ShallowReactive",2],{"clay-page:\u002F3.x\u002Fintroduction":3},{"html":4,"toc":5,"description":16,"hero":17,"list":18,"socialImage":19},"\u003Ch1 id=\"introduction\">Introduction\u003C\u002Fh1>\n\u003Cp>Clay turns a folder of Markdown files into a fast, searchable documentation website. You write pages in Markdown, describe your site in one small configuration file, and Clay builds a static site that you can host anywhere: GitHub Pages, Netlify, Cloudflare Pages or any web server.\u003C\u002Fp>\n\u003Cp>This website is itself a Clay site. Every page you read here is a Markdown file in the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fclay-doc\u002Fclay-example-repo\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>example repository\u003C\u002Fa>, and the repository doubles as a reference you can copy from.\u003C\u002Fp>\n\u003Ch2 id=\"what-you-get\">\u003Ca class=\"heading-anchor\" href=\"#what-you-get\" aria-label=\"Link to this section\" data-route=\"#what-you-get\">#\u003C\u002Fa>What you get\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Feature\u003C\u002Fth>\n\u003Cth>What it means for your readers\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>Navigation\u003C\u002Ftd>\n\u003Ctd>A sidebar built from your folders, breadcrumbs, and previous\u002Fnext links on every page\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Search\u003C\u002Ftd>\n\u003Ctd>Full-text search over every page and section, with typo tolerance and highlighted matches\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Code\u003C\u002Ftd>\n\u003Ctd>Syntax highlighting for over 200 languages, line highlights, diffs and a copy button\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Fast pages\u003C\u002Ftd>\n\u003Ctd>Every page is pre-rendered to HTML, so it loads instantly and works without JavaScript\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Search engines\u003C\u002Ftd>\n\u003Ctd>Titles, descriptions, canonical links, a sitemap and structured data, out of the box\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Light and dark\u003C\u002Ftd>\n\u003Ctd>Follows the reader’s system setting, with a toggle that remembers their choice\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Versions\u003C\u002Ftd>\n\u003Ctd>Keep the docs of older releases online, with a version switcher\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Languages\u003C\u002Ftd>\n\u003Ctd>Translate pages one by one; untranslated pages fall back to the original\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Phones\u003C\u002Ftd>\n\u003Ctd>A layout that works on small screens, with a navigation drawer\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Ch2 id=\"how-it-works\">\u003Ca class=\"heading-anchor\" href=\"#how-it-works\" aria-label=\"Link to this section\" data-route=\"#how-it-works\">#\u003C\u002Fa>How it works\u003C\u002Fh2>\n\u003Cp>A Clay project is a folder with a configuration file and your docs:\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>my-project\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>├── clay.yaml        # site title and links\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>└── docs\u002F            # your Markdown pages, images and files\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>    └── index.md     # optional: the start page\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\u003Cp>You work with three commands:\u003C\u002Fp>\n\u003Cdiv class=\"code-block is-terminal has-bar\">\u003Cdiv class=\"code-terminal\" aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line command\">\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">npx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> clay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> dev\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#006400;--shiki-dark:#6A9955\">       # live preview while you write\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>\u003Cspan style=\"--shiki-light:#006400;--shiki-dark:#6A9955\">     # build the static site into publish\u002Fpublic\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\"> preview\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#006400;--shiki-dark:#6A9955\">   # check the build the way a web host serves it\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\u003Cp>Clay is a single npm package, \u003Ccode>clay-doc\u003C\u002Fcode>. It builds on \u003Ca href=\"https:\u002F\u002Fnuxt.com\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>Nuxt\u003C\u002Fa> and \u003Ca href=\"https:\u002F\u002Fvuejs.org\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>Vue\u003C\u002Fa>, but you never have to touch either: there is no theme to set up and no code to write.\u003C\u002Fp>\n\u003Ch2 id=\"where-to-go-next\">\u003Ca class=\"heading-anchor\" href=\"#where-to-go-next\" aria-label=\"Link to this section\" data-route=\"#where-to-go-next\">#\u003C\u002Fa>Where to go next\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>New to Clay? Start with the \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fgetting-started\u002Finstallation\" data-route=\"\u002F3.x\u002Fgetting-started\u002Finstallation\">installation\u003C\u002Fa> and the \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fgetting-started\u002Fquick-start\" data-route=\"\u002F3.x\u002Fgetting-started\u002Fquick-start\">quick start\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>Writing pages? See \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fwriting\u002Fpages\" data-route=\"\u002F3.x\u002Fwriting\u002Fpages\">pages\u003C\u002Fa>, \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fwriting\u002Fmarkdown\" data-route=\"\u002F3.x\u002Fwriting\u002Fmarkdown\">Markdown\u003C\u002Fa> and \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fwriting\u002Fcode-blocks\" data-route=\"\u002F3.x\u002Fwriting\u002Fcode-blocks\">code blocks\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>Setting up a site? The \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fconfiguration\u002Fclay-yaml\" data-route=\"\u002F3.x\u002Fconfiguration\u002Fclay-yaml\">clay.yaml reference\u003C\u002Fa> lists every option.\u003C\u002Fli>\n\u003Cli>Publishing? Follow \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fdeployment\u002Fgithub-pages\" data-route=\"\u002F3.x\u002Fdeployment\u002Fgithub-pages\">GitHub Pages\u003C\u002Fa> or \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fdeployment\u002Fother-hosts\" data-route=\"\u002F3.x\u002Fdeployment\u002Fother-hosts\">other hosts\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>Coming from Clay 1 and Clay Oven? Read \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fguides\u002Fmigrating-from-clay-1\" data-route=\"\u002F3.x\u002Fguides\u002Fmigrating-from-clay-1\">migrating from Clay 1\u003C\u002Fa>.\u003C\u002Fli>\n\u003C\u002Ful>\n",[6,10,13],{"id":7,"text":8,"level":9},"what-you-get","What you get",2,{"id":11,"text":12,"level":9},"how-it-works","How it works",{"id":14,"text":15,"level":9},"where-to-go-next","Where to go next","What Clay is, what it does for you and how a Clay site comes together.",null,false,"\u002F_clay\u002Fsocial\u002F3.x\u002Fintroduction.png",1792666368755]