parseFrontMatter
hook",id:"parsefrontmatter-hook",level:3},{value:"Other changes",id:"other-changes",level:2}];function d(e){let t={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["We are happy to announce ",(0,n.jsx)(t.strong,{children:"Docusaurus 3.1"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["The upgrade should be easy: as explained in our ",(0,n.jsx)(t.a,{href:"/community/release-process",children:"release process documentation"}),", minor versions respect ",(0,n.jsx)(t.a,{href:"https://semver.org/",children:"Semantic Versioning"}),"."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"Docusaurus blog post social card",src:r(65223).A+"",width:"1200",height:"600"})}),"\n","\n",(0,n.jsx)(t.h2,{id:"highlights",children:"Highlights"}),"\n",(0,n.jsx)(t.h3,{id:"broken-anchors-checker",children:"Broken anchors checker"}),"\n",(0,n.jsxs)(t.p,{children:["In ",(0,n.jsx)(t.a,{href:"https://github.com/facebook/docusaurus/pull/9528",children:"#9528"}),", we improved the built-in broken links checker to also detect broken anchors."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"Docusaurus blog post social card",src:r(32600).A+"",width:"1920",height:"896"})}),"\n",(0,n.jsxs)(t.admonition,{title:"Make it fail fast",type:"tip",children:[(0,n.jsxs)(t.p,{children:["The new ",(0,n.jsx)(t.a,{href:"/docs/api/docusaurus-config#onBrokenAnchors",children:(0,n.jsx)(t.code,{children:"onBrokenAnchors"})})," option has value ",(0,n.jsx)(t.code,{children:"warn"})," by default, for retro-compatibility reasons."]}),(0,n.jsxs)(t.p,{children:["We recommend to turn it to ",(0,n.jsx)(t.code,{children:"throw"})," and fail your CI builds instead of deploying broken anchors to productions."]})]}),"\n",(0,n.jsxs)(t.admonition,{type:"note",children:[(0,n.jsxs)(t.p,{children:["For users and plugin authors implementing custom ",(0,n.jsx)(t.code,{children:"parseFrontMatter
hook",id:"parsefrontmatter-hook",level:3},{value:"Other changes",id:"other-changes",level:2}];function d(e){let t={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["We are happy to announce ",(0,n.jsx)(t.strong,{children:"Docusaurus 3.1"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["The upgrade should be easy: as explained in our ",(0,n.jsx)(t.a,{href:"/community/release-process",children:"release process documentation"}),", minor versions respect ",(0,n.jsx)(t.a,{href:"https://semver.org/",children:"Semantic Versioning"}),"."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"Docusaurus blog post social card",src:r(65223).A+"",width:"1200",height:"600"})}),"\n","\n",(0,n.jsx)(t.h2,{id:"highlights",children:"Highlights"}),"\n",(0,n.jsx)(t.h3,{id:"broken-anchors-checker",children:"Broken anchors checker"}),"\n",(0,n.jsxs)(t.p,{children:["In ",(0,n.jsx)(t.a,{href:"https://github.com/facebook/docusaurus/pull/9528",children:"#9528"}),", we improved the built-in broken links checker to also detect broken anchors."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"Docusaurus blog post social card",src:r(32600).A+"",width:"1920",height:"896"})}),"\n",(0,n.jsxs)(t.admonition,{title:"Make it fail fast",type:"tip",children:[(0,n.jsxs)(t.p,{children:["The new ",(0,n.jsx)(t.a,{href:"/docs/api/docusaurus-config#onBrokenAnchors",children:(0,n.jsx)(t.code,{children:"onBrokenAnchors"})})," option has value ",(0,n.jsx)(t.code,{children:"warn"})," by default, for retro-compatibility reasons."]}),(0,n.jsxs)(t.p,{children:["We recommend to turn it to ",(0,n.jsx)(t.code,{children:"throw"})," and fail your CI builds instead of deploying broken anchors to productions."]})]}),"\n",(0,n.jsxs)(t.admonition,{type:"note",children:[(0,n.jsxs)(t.p,{children:["For users and plugin authors implementing custom ",(0,n.jsx)(t.code,{children:"useColorMode
",id:"use-color-mode",level:3},{value:"i18n",id:"i18n",level:2},{value:"Translation files location",id:"translation-files-location",level:3},{value:"Example file-system structure",id:"example-file-system-structure",level:3}];function a(e){let n={a:"a",admonition:"admonition",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"theme-configuration",children:"Theme configuration"})}),"\n","\n",(0,s.jsxs)(n.p,{children:["This configuration applies to all ",(0,s.jsx)(n.a,{href:"/docs/api/themes",children:"main themes"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"common",children:"Common"}),"\n",(0,s.jsx)(n.h3,{id:"color-mode---dark-mode",children:"Color mode"}),"\n",(0,s.jsx)(n.p,{children:"The classic theme provides by default light and dark mode support, with a navbar switch for the user."}),"\n",(0,s.jsxs)(n.p,{children:["It is possible to customize the color mode support within the ",(0,s.jsx)(n.code,{children:"colorMode"})," object."]}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"defaultMode"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"'light' | 'dark'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'light'"})}),(0,s.jsx)(n.td,{children:"The color mode when user first visits the site."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"disableSwitch"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsx)(n.td,{children:"Hides the switch in the navbar. Useful if you want to support a single color mode."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"respectPrefersColorScheme"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsxs)(n.td,{children:["Whether to use the ",(0,s.jsx)(n.code,{children:"prefers-color-scheme"})," media-query, using user system preferences, instead of the hardcoded ",(0,s.jsx)(n.code,{children:"defaultMode"}),"."]})]})]})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n // highlight-start\n colorMode: {\n defaultMode: 'light',\n disableSwitch: false,\n respectPrefersColorScheme: false,\n },\n // highlight-end\n },\n};\n"})}),"\n",(0,s.jsxs)(n.admonition,{type:"warning",children:[(0,s.jsxs)(n.p,{children:["With ",(0,s.jsx)(n.code,{children:"respectPrefersColorScheme: true"}),", the ",(0,s.jsx)(n.code,{children:"defaultMode"})," is overridden by user system preferences."]}),(0,s.jsx)(n.p,{children:"If you only want to support one color mode, you likely want to ignore user system preferences."})]}),"\n",(0,s.jsx)(n.h3,{id:"meta-image",children:"Meta image"}),"\n",(0,s.jsxs)(n.p,{children:["You can configure a default image that will be used for your meta tag, in particular ",(0,s.jsx)(n.code,{children:"og:image"})," and ",(0,s.jsx)(n.code,{children:"twitter:image"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsx)(n.tbody,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"image"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:'The meta image URL for the site. Relative to your site\'s "static" directory. Cannot be SVGs. Can be external URLs too.'})]})})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n // highlight-next-line\n image: 'img/docusaurus.png',\n },\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"metadata",children:"Metadata"}),"\n",(0,s.jsx)(n.p,{children:"You can configure additional HTML metadata (and override existing ones)."}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsx)(n.tbody,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"metadata"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"Metadata[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsxs)(n.td,{children:["Any field will be directly passed to the ",(0,s.jsx)(n.code,{children:""})," tag. Possible fields include ",(0,s.jsx)(n.code,{children:"id"}),", ",(0,s.jsx)(n.code,{children:"name"}),", ",(0,s.jsx)(n.code,{children:"property"}),", ",(0,s.jsx)(n.code,{children:"content"}),", ",(0,s.jsx)(n.code,{children:"itemprop"}),", etc."]})]})})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n // highlight-next-line\n metadata: [{name: 'twitter:card', content: 'summary'}],\n },\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"announcement-bar",children:"Announcement bar"}),"\n",(0,s.jsxs)(n.p,{children:["Sometimes you want to announce something in your website. Just for such a case, you can add an announcement bar. This is a non-fixed and optionally dismissible panel above the navbar. All configuration are in the ",(0,s.jsx)(n.code,{children:"announcementBar"})," object."]}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{name:"announcement-bar",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"id"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'announcement-bar'"})}),(0,s.jsx)(n.td,{children:"Any value that will identify this message."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"content"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"''"})}),(0,s.jsx)(n.td,{children:"The text content of the announcement. HTML will be interpolated."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"backgroundColor"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'#fff'"})}),(0,s.jsx)(n.td,{children:"Background color of the entire bar."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"textColor"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'#000'"})}),(0,s.jsx)(n.td,{children:"Announcement text color."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"isCloseable"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"true"})}),(0,s.jsx)(n.td,{children:"Whether this announcement can be dismissed with a '\xd7' button."})]})]})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n // highlight-start\n announcementBar: {\n id: 'support_us',\n content:\n 'We are looking to revamp our docs, please fill this survey',\n backgroundColor: '#fafbfc',\n textColor: '#091E42',\n isCloseable: false,\n },\n // highlight-end\n },\n};\n"})}),"\n",(0,s.jsx)(n.h2,{id:"plugins",children:"Plugins"}),"\n",(0,s.jsxs)(n.p,{children:["Our ",(0,s.jsx)(n.a,{href:"/docs/api/themes",children:"main themes"})," offer additional theme configuration options for Docusaurus core content plugins."]}),"\n",(0,s.jsx)(n.h3,{id:"docs",children:"Docs"}),"\n",(0,s.jsx)(r.A,{name:"navbar-overview",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"versionPersistence"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'localStorage' | 'none'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:"Defines the browser persistence of the preferred docs version."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"sidebar.hideable"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsx)(n.td,{children:"Show a hide button at the bottom of the sidebar."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"sidebar.autoCollapseCategories"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsx)(n.td,{children:"Automatically collapse all sibling categories of the one you navigate to."})]})]})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n docs: {\n // highlight-start\n versionPersistence: 'localStorage',\n sidebar: {\n hideable: false,\n autoCollapseCategories: false,\n },\n // highlight-end\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"blog",children:"Blog"}),"\n",(0,s.jsx)(r.A,{name:"navbar-overview",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsx)(n.tbody,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"sidebar.groupByYear"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"true"})}),(0,s.jsx)(n.td,{children:"Group sidebar blog posts by years."})]})})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n blog: {\n // highlight-start\n sidebar: {\n groupByYear: true,\n },\n // highlight-end\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h2,{id:"navbar",children:"Navbar"}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{name:"navbar-overview",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"title"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:"Title for the navbar."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"logo"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.em,{children:"See below"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:"Customization of the logo object."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"items"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"NavbarItem[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsx)(n.td,{children:"A list of navbar items. See specification below."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"hideOnScroll"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsx)(n.td,{children:"Whether the navbar is hidden when the user scrolls down."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"style"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"'primary' | 'dark'"})}),(0,s.jsx)(n.td,{children:"Same as theme"}),(0,s.jsx)(n.td,{children:"Sets the navbar style, ignoring the dark/light theme."})]})]})]})}),"\n",(0,s.jsx)(n.h3,{id:"navbar-logo",children:"Navbar logo"}),"\n",(0,s.jsxs)(n.p,{children:["The logo can be placed in ",(0,s.jsx)(n.a,{href:"/docs/static-assets",children:"static folder"}),". Logo URL is set to base URL of your site by default. Although you can specify your own URL for the logo, if it is an external link, it will open in a new tab. In addition, you can override a value for the target attribute of logo link, it can come in handy if you are hosting docs website in a subdirectory of your main website, and in which case you probably do not need a link in the logo to the main website will open in a new tab."]}),"\n",(0,s.jsx)(n.p,{children:"To improve dark mode support, you can also set a different logo for this mode."}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{name:"navbar-logo",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"alt"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:"Alt tag for the logo image."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"src"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"URL to the logo image. Base URL is appended by default."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"srcDark"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"logo.src"})}),(0,s.jsx)(n.td,{children:"An alternative image URL to use in dark mode."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"href"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"siteConfig.baseUrl"})}),(0,s.jsx)(n.td,{children:"Link to navigate to when the logo is clicked."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"width"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"string | number"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["Specifies the ",(0,s.jsx)(n.code,{children:"width"})," attribute."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"height"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"string | number"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["Specifies the ",(0,s.jsx)(n.code,{children:"height"})," attribute."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"target"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsxs)(n.td,{children:["Calculated based on ",(0,s.jsx)(n.code,{children:"href"})," (external links will open in a new tab, all others in the current one)."]}),(0,s.jsxs)(n.td,{children:["The ",(0,s.jsx)(n.code,{children:"target"})," attribute of the link; controls whether the link is opened in a new tab, the current one, or otherwise."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"className"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:"CSS class applied to the image."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"style"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"object"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:"CSS inline style object. React/JSX flavor, using camelCase properties."})]})]})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n title: 'Site Title',\n // highlight-start\n logo: {\n alt: 'Site Logo',\n src: 'img/logo.svg',\n srcDark: 'img/logo_dark.svg',\n href: 'https://docusaurus.io/',\n target: '_self',\n width: 32,\n height: 32,\n className: 'custom-navbar-logo-class',\n style: {border: 'solid red'},\n },\n // highlight-end\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"navbar-items",children:"Navbar items"}),"\n",(0,s.jsxs)(n.p,{children:["You can add items to the navbar via ",(0,s.jsx)(n.code,{children:"themeConfig.navbar.items"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n // highlight-start\n items: [\n {\n type: 'doc',\n position: 'left',\n docId: 'introduction',\n label: 'Docs',\n },\n {to: 'blog', label: 'Blog', position: 'left'},\n {\n type: 'docsVersionDropdown',\n position: 'right',\n },\n {\n type: 'localeDropdown',\n position: 'right',\n },\n {\n href: 'https://github.com/facebook/docusaurus',\n position: 'right',\n className: 'header-github-link',\n 'aria-label': 'GitHub repository',\n },\n ],\n // highlight-end\n },\n },\n};\n"})}),"\n",(0,s.jsxs)(n.p,{children:["The items can have different behaviors based on the ",(0,s.jsx)(n.code,{children:"type"})," field. The sections below will introduce you to all the types of navbar items available."]}),"\n",(0,s.jsx)(n.h4,{id:"navbar-link",children:"Navbar link"}),"\n",(0,s.jsx)(n.p,{children:"By default, Navbar items are regular links (internal or external)."}),"\n",(0,s.jsxs)(n.p,{children:["React Router should automatically apply active link styling to links, but you can use ",(0,s.jsx)(n.code,{children:"activeBasePath"})," in edge cases. For cases in which a link should be active on several different paths (such as when you have multiple doc folders under the same sidebar), you can use ",(0,s.jsx)(n.code,{children:"activeBaseRegex"}),". ",(0,s.jsx)(n.code,{children:"activeBaseRegex"})," is a more flexible alternative to ",(0,s.jsx)(n.code,{children:"activeBasePath"})," and takes precedence over it -- Docusaurus parses it into a regular expression that is tested against the current URL."]}),"\n",(0,s.jsxs)(n.p,{children:["Outbound (external) links automatically get ",(0,s.jsx)(n.code,{children:'target="_blank" rel="noopener noreferrer"'})," attributes."]}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{name:"navbar-link",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"type"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'default'"})}),(0,s.jsx)(n.td,{children:"Optional"}),(0,s.jsx)(n.td,{children:"Sets the type of this item to a link."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"label"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"The name to be shown for this item."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"html"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:"Optional"}),(0,s.jsxs)(n.td,{children:["Same as ",(0,s.jsx)(n.code,{children:"label"}),", but renders pure HTML instead of text content."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"to"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"Client-side routing, used for navigating within the website. The baseUrl will be automatically prepended to this value."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"href"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsxs)(n.td,{children:["A full-page navigation, used for navigating outside of the website. ",(0,s.jsxs)(n.strong,{children:["Only one of ",(0,s.jsx)(n.code,{children:"to"})," or ",(0,s.jsx)(n.code,{children:"href"})," should be used."]})]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"prependBaseUrlToHref"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsxs)(n.td,{children:["Prepends the baseUrl to ",(0,s.jsx)(n.code,{children:"href"})," values."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"position"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"'left' | 'right'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'left'"})}),(0,s.jsx)(n.td,{children:"The side of the navbar this item should appear on."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"activeBasePath"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsxs)(n.td,{children:[(0,s.jsx)(n.code,{children:"to"})," / ",(0,s.jsx)(n.code,{children:"href"})]}),(0,s.jsx)(n.td,{children:"To apply the active class styling on all routes starting with this path. This usually isn't necessary."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"activeBaseRegex"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["Alternative to ",(0,s.jsx)(n.code,{children:"activeBasePath"})," if required."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"className"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"''"})}),(0,s.jsx)(n.td,{children:"Custom CSS class (for styling any item)."})]})]})]})}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsx)(n.p,{children:"In addition to the fields above, you can specify other arbitrary attributes that can be applied to a HTML link."})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n items: [\n // highlight-start\n {\n to: 'docs/introduction',\n // Only one of \"to\" or \"href\" should be used\n // href: 'https://www.facebook.com',\n label: 'Introduction',\n // Only one of \"label\" or \"html\" should be used\n // html: 'Introduction'\n position: 'left',\n activeBaseRegex: 'docs/(next|v8)',\n target: '_blank',\n },\n // highlight-end\n ],\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h4,{id:"navbar-dropdown",children:"Navbar dropdown"}),"\n",(0,s.jsxs)(n.p,{children:["Navbar items of the type ",(0,s.jsx)(n.code,{children:"dropdown"})," has the additional ",(0,s.jsx)(n.code,{children:"items"})," field, an inner array of navbar items."]}),"\n",(0,s.jsxs)(n.p,{children:["Navbar dropdown items only accept the following ",(0,s.jsx)(n.strong,{children:'"link-like" item types'}),":"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#navbar-link",children:"Navbar link"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#navbar-doc-link",children:"Navbar doc link"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#navbar-docs-version",children:"Navbar docs version"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#navbar-doc-sidebar",children:"Navbar doc sidebar"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#navbar-with-custom-html",children:"Navbar with custom HTML"})}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Note that the dropdown base item is a clickable link as well, so this item can receive any of the props of a ",(0,s.jsx)(n.a,{href:"#navbar-link",children:"plain navbar link"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{name:"navbar-dropdown",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"type"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'dropdown'"})}),(0,s.jsx)(n.td,{children:"Optional"}),(0,s.jsx)(n.td,{children:"Sets the type of this item to a dropdown."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"label"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"The name to be shown for this item."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"items"})}),(0,s.jsx)(n.td,{children:(0,s.jsxs)("code",{children:[(0,s.jsx)(n.a,{href:"#navbar-dropdown",children:"LinkLikeItem"}),"[]"]})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"The items to be contained in the dropdown."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"position"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"'left' | 'right'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'left'"})}),(0,s.jsx)(n.td,{children:"The side of the navbar this item should appear on."})]})]})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n items: [\n // highlight-start\n {\n type: 'dropdown',\n label: 'Community',\n position: 'left',\n items: [\n {\n label: 'Facebook',\n href: 'https://www.facebook.com',\n },\n {\n type: 'doc',\n label: 'Social',\n docId: 'social',\n },\n // ... more items\n ],\n },\n // highlight-end\n ],\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h4,{id:"navbar-doc-link",children:"Navbar doc link"}),"\n",(0,s.jsxs)(n.p,{children:["If you want to link to a specific doc, this special navbar item type will render the link to the doc of the provided ",(0,s.jsx)(n.code,{children:"docId"}),". It will get the class ",(0,s.jsx)(n.code,{children:"navbar__link--active"})," as long as you browse a doc of the same sidebar."]}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{name:"navbar-doc-link",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"type"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'doc'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"Sets the type of this item to a doc link."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docId"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"The ID of the doc that this item links to."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"label"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docId"})}),(0,s.jsx)(n.td,{children:"The name to be shown for this item."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"position"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"'left' | 'right'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'left'"})}),(0,s.jsx)(n.td,{children:"The side of the navbar this item should appear on."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docsPluginId"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'default'"})}),(0,s.jsx)(n.td,{children:"The ID of the docs plugin that the doc belongs to."})]})]})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n items: [\n // highlight-start\n {\n type: 'doc',\n position: 'left',\n docId: 'introduction',\n label: 'Docs',\n },\n // highlight-end\n ],\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h4,{id:"navbar-doc-sidebar",children:"Navbar linked to a sidebar"}),"\n",(0,s.jsx)(n.p,{children:"You can link a navbar item to the first document link (which can be a doc link or a generated category index) of a given sidebar without having to hardcode a doc ID."}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{name:"navbar-doc-sidebar",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"type"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'docSidebar'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"Sets the type of this navbar item to a sidebar's first document."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"sidebarId"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"The ID of the sidebar that this item is linked to."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"label"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:"First document link's sidebar label"}),(0,s.jsx)(n.td,{children:"The name to be shown for this item."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"position"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"'left' | 'right'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'left'"})}),(0,s.jsx)(n.td,{children:"The side of the navbar this item should appear on."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docsPluginId"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'default'"})}),(0,s.jsx)(n.td,{children:"The ID of the docs plugin that the sidebar belongs to."})]})]})]})}),"\n",(0,s.jsx)(n.admonition,{type:"tip",children:(0,s.jsx)(n.p,{children:"Use this navbar item type if your sidebar is updated often and the order is not stable."})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n items: [\n // highlight-start\n {\n type: 'docSidebar',\n position: 'left',\n sidebarId: 'api',\n label: 'API',\n },\n // highlight-end\n ],\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="sidebars.js"',children:"export default {\n tutorial: [\n {\n type: 'autogenerated',\n dirName: 'guides',\n },\n ],\n api: [\n // highlight-next-line\n 'cli', // The navbar item will be linking to this doc\n 'docusaurus-core',\n {\n type: 'autogenerated',\n dirName: 'api',\n },\n ],\n};\n"})}),"\n",(0,s.jsx)(n.h4,{id:"navbar-docs-version-dropdown",children:"Navbar docs version dropdown"}),"\n",(0,s.jsx)(n.p,{children:"If you use docs with versioning, this special navbar item type that will render a dropdown with all your site's available versions."}),"\n",(0,s.jsx)(n.p,{children:"The user will be able to switch from one version to another, while staying on the same doc (as long as the doc ID is constant across versions)."}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{name:"navbar-docs-version-dropdown",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"type"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'docsVersionDropdown'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"Sets the type of this item to a docs version dropdown."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"position"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"'left' | 'right'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'left'"})}),(0,s.jsx)(n.td,{children:"The side of the navbar this item should appear on."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"dropdownItemsBefore"})}),(0,s.jsx)(n.td,{children:(0,s.jsxs)("code",{children:[(0,s.jsx)(n.a,{href:"#navbar-dropdown",children:"LinkLikeItem"}),"[]"]})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsx)(n.td,{children:"Add additional dropdown items at the beginning of the dropdown."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"dropdownItemsAfter"})}),(0,s.jsx)(n.td,{children:(0,s.jsxs)("code",{children:[(0,s.jsx)(n.a,{href:"#navbar-dropdown",children:"LinkLikeItem"}),"[]"]})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsx)(n.td,{children:"Add additional dropdown items at the end of the dropdown."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docsPluginId"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'default'"})}),(0,s.jsx)(n.td,{children:"The ID of the docs plugin that the doc versioning belongs to."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"dropdownActiveClassDisabled"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsx)(n.td,{children:"Do not add the link active class when browsing docs."})]})]})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n items: [\n // highlight-start\n {\n type: 'docsVersionDropdown',\n position: 'left',\n dropdownItemsAfter: [{to: '/versions', label: 'All versions'}],\n dropdownActiveClassDisabled: true,\n },\n // highlight-end\n ],\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h4,{id:"navbar-docs-version",children:"Navbar docs version"}),"\n",(0,s.jsx)(n.p,{children:"If you use docs with versioning, this special navbar item type will link to the active/browsed version of your doc (depends on the current URL), and fallback to the latest version."}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{name:"navbar-docs-version",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"type"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'docsVersion'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"Sets the type of this item to a doc version link."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"label"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:"The active/latest version label."}),(0,s.jsx)(n.td,{children:"The name to be shown for this item."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"to"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:"The active/latest version."}),(0,s.jsx)(n.td,{children:"The internal link that this item points to."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"position"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"'left' | 'right'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'left'"})}),(0,s.jsx)(n.td,{children:"The side of the navbar this item should appear on."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docsPluginId"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'default'"})}),(0,s.jsx)(n.td,{children:"The ID of the docs plugin that the doc versioning belongs to."})]})]})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n items: [\n // highlight-start\n {\n type: 'docsVersion',\n position: 'left',\n to: '/path',\n label: 'label',\n },\n // highlight-end\n ],\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h4,{id:"navbar-locale-dropdown",children:"Navbar locale dropdown"}),"\n",(0,s.jsxs)(n.p,{children:["If you use the ",(0,s.jsx)(n.a,{href:"/docs/i18n/introduction",children:"i18n feature"}),", this special navbar item type will render a dropdown with all your site's available locales."]}),"\n",(0,s.jsx)(n.p,{children:"The user will be able to switch from one locale to another, while staying on the same page."}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{name:"navbar-locale-dropdown",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"type"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'localeDropdown'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"Sets the type of this item to a locale dropdown."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"position"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"'left' | 'right'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'left'"})}),(0,s.jsx)(n.td,{children:"The side of the navbar this item should appear on."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"dropdownItemsBefore"})}),(0,s.jsx)(n.td,{children:(0,s.jsxs)("code",{children:[(0,s.jsx)(n.a,{href:"#navbar-dropdown",children:"LinkLikeItem"}),"[]"]})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsx)(n.td,{children:"Add additional dropdown items at the beginning of the dropdown."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"dropdownItemsAfter"})}),(0,s.jsx)(n.td,{children:(0,s.jsxs)("code",{children:[(0,s.jsx)(n.a,{href:"#navbar-dropdown",children:"LinkLikeItem"}),"[]"]})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsx)(n.td,{children:"Add additional dropdown items at the end of the dropdown."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"queryString"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:"The query string to be appended to the URL."})]})]})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n items: [\n // highlight-start\n {\n type: 'localeDropdown',\n position: 'left',\n dropdownItemsAfter: [\n {\n to: 'https://my-site.com/help-us-translate',\n label: 'Help us translate',\n },\n ],\n },\n // highlight-end\n ],\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h4,{id:"navbar-search",children:"Navbar search"}),"\n",(0,s.jsxs)(n.p,{children:["If you use the ",(0,s.jsx)(n.a,{href:"/docs/search",children:"search"}),", the search bar will be the rightmost element in the navbar."]}),"\n",(0,s.jsx)(n.p,{children:"However, with this special navbar item type, you can change the default location."}),"\n",(0,s.jsx)(r.A,{name:"navbar-search",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"type"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'search'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"Sets the type of this item to a search bar."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"position"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"'left' | 'right'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'left'"})}),(0,s.jsx)(n.td,{children:"The side of the navbar this item should appear on."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"className"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:"/"}),(0,s.jsx)(n.td,{children:"Custom CSS class for this navbar item."})]})]})]})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n items: [\n // highlight-start\n {\n type: 'search',\n position: 'right',\n },\n // highlight-end\n ],\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h4,{id:"navbar-with-custom-html",children:"Navbar with custom HTML"}),"\n",(0,s.jsx)(n.p,{children:"You can also render your own HTML markup inside a navbar item using this navbar item type."}),"\n",(0,s.jsx)(r.A,{name:"navbar-html",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"type"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'html'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"Sets the type of this item to a HTML element."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"position"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"'left' | 'right'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'left'"})}),(0,s.jsx)(n.td,{children:"The side of the navbar this item should appear on."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"className"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"''"})}),(0,s.jsx)(n.td,{children:"Custom CSS class for this navbar item."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"value"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"''"})}),(0,s.jsx)(n.td,{children:"Custom HTML to be rendered inside this navbar item."})]})]})]})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n items: [\n // highlight-start\n {\n type: 'html',\n position: 'right',\n value: '',\n },\n // highlight-end\n ],\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"auto-hide-sticky-navbar",children:"Auto-hide sticky navbar"}),"\n",(0,s.jsx)(n.p,{children:"You can enable this cool UI feature that automatically hides the navbar when a user starts scrolling down the page, and show it again when the user scrolls up."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n // highlight-next-line\n hideOnScroll: true,\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"navbar-style",children:"Navbar style"}),"\n",(0,s.jsx)(n.p,{children:"You can set the static Navbar style without disabling the theme switching ability. The selected style will always apply no matter which theme user have selected."}),"\n",(0,s.jsxs)(n.p,{children:["Currently, there are two possible style options: ",(0,s.jsx)(n.code,{children:"dark"})," and ",(0,s.jsx)(n.code,{children:"primary"})," (based on the ",(0,s.jsx)(n.code,{children:"--ifm-color-primary"})," color). You can see the styles preview in the ",(0,s.jsx)(n.a,{href:"https://infima.dev/docs/components/navbar/",children:"Infima documentation"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n // highlight-next-line\n style: 'primary',\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h2,{id:"codeblock",children:"CodeBlock"}),"\n",(0,s.jsxs)(n.p,{children:["Docusaurus uses ",(0,s.jsx)(n.a,{href:"https://github.com/FormidableLabs/prism-react-renderer",children:"Prism React Renderer"})," to highlight code blocks. All configuration are in the ",(0,s.jsx)(n.code,{children:"prism"})," object."]}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{name:"codeblock",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"theme"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"PrismTheme"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"palenight"})}),(0,s.jsx)(n.td,{children:"The Prism theme to use for light-theme code blocks."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"darkTheme"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"PrismTheme"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"palenight"})}),(0,s.jsx)(n.td,{children:"The Prism theme to use for dark-theme code blocks."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"defaultLanguage"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:"The default language to use for code blocks not declaring any explicit language."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"magicComments"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"MagicCommentConfig[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.em,{children:"see below"})}),(0,s.jsxs)(n.td,{children:["The list of ",(0,s.jsx)(n.a,{href:"/docs/markdown-features/code-blocks#custom-magic-comments",children:"magic comments"}),"."]})]})]})]})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"type MagicCommentConfig = {\n className: string;\n line?: string;\n block?: {start: string; end: string};\n};\n"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"const defaultMagicComments = [\n {\n className: 'theme-code-block-highlighted-line',\n line: 'highlight-next-line',\n block: {start: 'highlight-start', end: 'highlight-end'},\n },\n];\n"})}),"\n",(0,s.jsx)(n.h3,{id:"theme",children:"Theme"}),"\n",(0,s.jsxs)(n.p,{children:["By default, we use ",(0,s.jsx)(n.a,{href:"https://github.com/FormidableLabs/prism-react-renderer/blob/master/packages/prism-react-renderer/src/themes/palenight.ts",children:"Palenight"})," as syntax highlighting theme. You can specify a custom theme from the ",(0,s.jsx)(n.a,{href:"https://github.com/FormidableLabs/prism-react-renderer/tree/master/packages/prism-react-renderer/src/themes",children:"list of available themes"}),". You may also use a different syntax highlighting theme when the site is in dark mode."]}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"import {themes as prismThemes} from 'prism-react-renderer';\n\nexport default {\n themeConfig: {\n prism: {\n // highlight-start\n theme: prismThemes.github,\n darkTheme: prismThemes.dracula,\n // highlight-end\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsxs)(n.p,{children:["If you use the line highlighting Markdown syntax, you might need to specify a different highlight background color for the dark mode syntax highlighting theme. Refer to the ",(0,s.jsx)(n.a,{href:"/docs/markdown-features/code-blocks#line-highlighting",children:"docs for guidance"}),"."]})}),"\n",(0,s.jsx)(n.h3,{id:"default-language",children:"Default language"}),"\n",(0,s.jsxs)(n.p,{children:["You can set a default language for code blocks if no language is added after the opening triple backticks (i.e. ```). Note that a valid ",(0,s.jsx)(n.a,{href:"https://prismjs.com/#supported-languages",children:"language name"})," must be passed."]}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n prism: {\n // highlight-next-line\n defaultLanguage: 'javascript',\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h2,{id:"footer-1",children:"Footer"}),"\n",(0,s.jsxs)(n.p,{children:["You can add logo and a copyright to the footer via ",(0,s.jsx)(n.code,{children:"themeConfig.footer"}),". Logo can be placed in ",(0,s.jsx)(n.a,{href:"/docs/static-assets",children:"static folder"}),". Logo URL works in the same way of the navbar logo."]}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{name:"footer",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"logo"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"Logo"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["Customization of the logo object. See ",(0,s.jsx)(n.a,{href:"#navbar-logo",children:"Navbar logo"})," for details."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"copyright"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:"The copyright message to be displayed at the bottom, also supports custom HTML."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"style"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"'dark' | 'light'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'light'"})}),(0,s.jsx)(n.td,{children:"The color theme of the footer component."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"links"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"(Column | FooterLink)[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsx)(n.td,{children:"The link groups to be present."})]})]})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n // highlight-start\n footer: {\n logo: {\n alt: 'Meta Open Source Logo',\n src: 'img/meta_oss_logo.png',\n href: 'https://opensource.fb.com',\n width: 160,\n height: 51,\n },\n copyright: `Copyright \xa9 ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,\n },\n // highlight-end\n },\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"footer-links",children:"Footer Links"}),"\n",(0,s.jsxs)(n.p,{children:["You can add links to the footer via ",(0,s.jsx)(n.code,{children:"themeConfig.footer.links"}),". There are two types of footer configurations: ",(0,s.jsx)(n.strong,{children:"multi-column footers"})," and ",(0,s.jsx)(n.strong,{children:"simple footers"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["Multi-column footer links have a ",(0,s.jsx)(n.code,{children:"title"})," and a list of ",(0,s.jsx)(n.code,{children:"FooterItem"}),"s for each column."]}),"\n",(0,s.jsx)(r.A,{name:"footer-links",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"title"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:"Label of the section of these links."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"items"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"FooterItem[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsx)(n.td,{children:"Links in this section."})]})]})]})}),"\n",(0,s.jsxs)(n.p,{children:["Accepted fields of each ",(0,s.jsx)(n.code,{children:"FooterItem"}),":"]}),"\n",(0,s.jsx)(r.A,{name:"footer-items",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"label"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"Text to be displayed for this link."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"to"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"Client-side routing, used for navigating within the website. The baseUrl will be automatically prepended to this value."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"href"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsxs)(n.td,{children:["A full-page navigation, used for navigating outside of the website. ",(0,s.jsxs)(n.strong,{children:["Only one of ",(0,s.jsx)(n.code,{children:"to"})," or ",(0,s.jsx)(n.code,{children:"href"})," should be used."]})]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"html"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["Renders the HTML pass-through instead of a simple link. In case ",(0,s.jsx)(n.code,{children:"html"})," is used, no other options should be provided."]})]})]})]})}),"\n",(0,s.jsx)(n.p,{children:"Example multi-column configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n footer: {\n // highlight-start\n links: [\n {\n title: 'Docs',\n items: [\n {\n label: 'Style Guide',\n to: 'docs/',\n },\n {\n label: 'Second Doc',\n to: 'docs/doc2/',\n },\n ],\n },\n {\n title: 'Community',\n items: [\n {\n label: 'Stack Overflow',\n href: 'https://stackoverflow.com/questions/tagged/docusaurus',\n },\n {\n label: 'Discord',\n href: 'https://discordapp.com/invite/docusaurus',\n },\n {\n label: 'X',\n href: 'https://x.com/docusaurus',\n },\n {\n html: `\n \n useColorMode
",id:"use-color-mode",level:3},{value:"i18n",id:"i18n",level:2},{value:"Translation files location",id:"translation-files-location",level:3},{value:"Example file-system structure",id:"example-file-system-structure",level:3}];function a(e){let n={a:"a",admonition:"admonition",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"theme-configuration",children:"Theme configuration"})}),"\n","\n",(0,s.jsxs)(n.p,{children:["This configuration applies to all ",(0,s.jsx)(n.a,{href:"/docs/api/themes",children:"main themes"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"common",children:"Common"}),"\n",(0,s.jsx)(n.h3,{id:"color-mode---dark-mode",children:"Color mode"}),"\n",(0,s.jsx)(n.p,{children:"The classic theme provides by default light and dark mode support, with a navbar switch for the user."}),"\n",(0,s.jsxs)(n.p,{children:["It is possible to customize the color mode support within the ",(0,s.jsx)(n.code,{children:"colorMode"})," object."]}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"defaultMode"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"'light' | 'dark'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'light'"})}),(0,s.jsx)(n.td,{children:"The color mode when user first visits the site."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"disableSwitch"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsx)(n.td,{children:"Hides the switch in the navbar. Useful if you want to support a single color mode."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"respectPrefersColorScheme"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsxs)(n.td,{children:["Whether to use the ",(0,s.jsx)(n.code,{children:"prefers-color-scheme"})," media-query, using user system preferences, instead of the hardcoded ",(0,s.jsx)(n.code,{children:"defaultMode"}),"."]})]})]})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n // highlight-start\n colorMode: {\n defaultMode: 'light',\n disableSwitch: false,\n respectPrefersColorScheme: false,\n },\n // highlight-end\n },\n};\n"})}),"\n",(0,s.jsxs)(n.admonition,{type:"warning",children:[(0,s.jsxs)(n.p,{children:["With ",(0,s.jsx)(n.code,{children:"respectPrefersColorScheme: true"}),", the ",(0,s.jsx)(n.code,{children:"defaultMode"})," is overridden by user system preferences."]}),(0,s.jsx)(n.p,{children:"If you only want to support one color mode, you likely want to ignore user system preferences."})]}),"\n",(0,s.jsx)(n.h3,{id:"meta-image",children:"Meta image"}),"\n",(0,s.jsxs)(n.p,{children:["You can configure a default image that will be used for your meta tag, in particular ",(0,s.jsx)(n.code,{children:"og:image"})," and ",(0,s.jsx)(n.code,{children:"twitter:image"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsx)(n.tbody,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"image"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:'The meta image URL for the site. Relative to your site\'s "static" directory. Cannot be SVGs. Can be external URLs too.'})]})})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n // highlight-next-line\n image: 'img/docusaurus.png',\n },\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"metadata",children:"Metadata"}),"\n",(0,s.jsx)(n.p,{children:"You can configure additional HTML metadata (and override existing ones)."}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsx)(n.tbody,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"metadata"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"Metadata[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsxs)(n.td,{children:["Any field will be directly passed to the ",(0,s.jsx)(n.code,{children:""})," tag. Possible fields include ",(0,s.jsx)(n.code,{children:"id"}),", ",(0,s.jsx)(n.code,{children:"name"}),", ",(0,s.jsx)(n.code,{children:"property"}),", ",(0,s.jsx)(n.code,{children:"content"}),", ",(0,s.jsx)(n.code,{children:"itemprop"}),", etc."]})]})})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n // highlight-next-line\n metadata: [{name: 'twitter:card', content: 'summary'}],\n },\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"announcement-bar",children:"Announcement bar"}),"\n",(0,s.jsxs)(n.p,{children:["Sometimes you want to announce something in your website. Just for such a case, you can add an announcement bar. This is a non-fixed and optionally dismissible panel above the navbar. All configuration are in the ",(0,s.jsx)(n.code,{children:"announcementBar"})," object."]}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{name:"announcement-bar",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"id"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'announcement-bar'"})}),(0,s.jsx)(n.td,{children:"Any value that will identify this message."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"content"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"''"})}),(0,s.jsx)(n.td,{children:"The text content of the announcement. HTML will be interpolated."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"backgroundColor"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'#fff'"})}),(0,s.jsx)(n.td,{children:"Background color of the entire bar."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"textColor"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'#000'"})}),(0,s.jsx)(n.td,{children:"Announcement text color."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"isCloseable"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"true"})}),(0,s.jsx)(n.td,{children:"Whether this announcement can be dismissed with a '\xd7' button."})]})]})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n // highlight-start\n announcementBar: {\n id: 'support_us',\n content:\n 'We are looking to revamp our docs, please fill this survey',\n backgroundColor: '#fafbfc',\n textColor: '#091E42',\n isCloseable: false,\n },\n // highlight-end\n },\n};\n"})}),"\n",(0,s.jsx)(n.h2,{id:"plugins",children:"Plugins"}),"\n",(0,s.jsxs)(n.p,{children:["Our ",(0,s.jsx)(n.a,{href:"/docs/api/themes",children:"main themes"})," offer additional theme configuration options for Docusaurus core content plugins."]}),"\n",(0,s.jsx)(n.h3,{id:"docs",children:"Docs"}),"\n",(0,s.jsx)(r.A,{name:"navbar-overview",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"versionPersistence"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'localStorage' | 'none'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:"Defines the browser persistence of the preferred docs version."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"sidebar.hideable"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsx)(n.td,{children:"Show a hide button at the bottom of the sidebar."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"sidebar.autoCollapseCategories"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsx)(n.td,{children:"Automatically collapse all sibling categories of the one you navigate to."})]})]})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n docs: {\n // highlight-start\n versionPersistence: 'localStorage',\n sidebar: {\n hideable: false,\n autoCollapseCategories: false,\n },\n // highlight-end\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"blog",children:"Blog"}),"\n",(0,s.jsx)(r.A,{name:"navbar-overview",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsx)(n.tbody,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"sidebar.groupByYear"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"true"})}),(0,s.jsx)(n.td,{children:"Group sidebar blog posts by years."})]})})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n blog: {\n // highlight-start\n sidebar: {\n groupByYear: true,\n },\n // highlight-end\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h2,{id:"navbar",children:"Navbar"}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{name:"navbar-overview",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"title"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:"Title for the navbar."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"logo"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.em,{children:"See below"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:"Customization of the logo object."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"items"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"NavbarItem[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsx)(n.td,{children:"A list of navbar items. See specification below."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"hideOnScroll"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsx)(n.td,{children:"Whether the navbar is hidden when the user scrolls down."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"style"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"'primary' | 'dark'"})}),(0,s.jsx)(n.td,{children:"Same as theme"}),(0,s.jsx)(n.td,{children:"Sets the navbar style, ignoring the dark/light theme."})]})]})]})}),"\n",(0,s.jsx)(n.h3,{id:"navbar-logo",children:"Navbar logo"}),"\n",(0,s.jsxs)(n.p,{children:["The logo can be placed in ",(0,s.jsx)(n.a,{href:"/docs/static-assets",children:"static folder"}),". Logo URL is set to base URL of your site by default. Although you can specify your own URL for the logo, if it is an external link, it will open in a new tab. In addition, you can override a value for the target attribute of logo link, it can come in handy if you are hosting docs website in a subdirectory of your main website, and in which case you probably do not need a link in the logo to the main website will open in a new tab."]}),"\n",(0,s.jsx)(n.p,{children:"To improve dark mode support, you can also set a different logo for this mode."}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{name:"navbar-logo",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"alt"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:"Alt tag for the logo image."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"src"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"URL to the logo image. Base URL is appended by default."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"srcDark"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"logo.src"})}),(0,s.jsx)(n.td,{children:"An alternative image URL to use in dark mode."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"href"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"siteConfig.baseUrl"})}),(0,s.jsx)(n.td,{children:"Link to navigate to when the logo is clicked."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"width"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"string | number"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["Specifies the ",(0,s.jsx)(n.code,{children:"width"})," attribute."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"height"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"string | number"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["Specifies the ",(0,s.jsx)(n.code,{children:"height"})," attribute."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"target"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsxs)(n.td,{children:["Calculated based on ",(0,s.jsx)(n.code,{children:"href"})," (external links will open in a new tab, all others in the current one)."]}),(0,s.jsxs)(n.td,{children:["The ",(0,s.jsx)(n.code,{children:"target"})," attribute of the link; controls whether the link is opened in a new tab, the current one, or otherwise."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"className"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:"CSS class applied to the image."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"style"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"object"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:"CSS inline style object. React/JSX flavor, using camelCase properties."})]})]})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n title: 'Site Title',\n // highlight-start\n logo: {\n alt: 'Site Logo',\n src: 'img/logo.svg',\n srcDark: 'img/logo_dark.svg',\n href: 'https://docusaurus.io/',\n target: '_self',\n width: 32,\n height: 32,\n className: 'custom-navbar-logo-class',\n style: {border: 'solid red'},\n },\n // highlight-end\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"navbar-items",children:"Navbar items"}),"\n",(0,s.jsxs)(n.p,{children:["You can add items to the navbar via ",(0,s.jsx)(n.code,{children:"themeConfig.navbar.items"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n // highlight-start\n items: [\n {\n type: 'doc',\n position: 'left',\n docId: 'introduction',\n label: 'Docs',\n },\n {to: 'blog', label: 'Blog', position: 'left'},\n {\n type: 'docsVersionDropdown',\n position: 'right',\n },\n {\n type: 'localeDropdown',\n position: 'right',\n },\n {\n href: 'https://github.com/facebook/docusaurus',\n position: 'right',\n className: 'header-github-link',\n 'aria-label': 'GitHub repository',\n },\n ],\n // highlight-end\n },\n },\n};\n"})}),"\n",(0,s.jsxs)(n.p,{children:["The items can have different behaviors based on the ",(0,s.jsx)(n.code,{children:"type"})," field. The sections below will introduce you to all the types of navbar items available."]}),"\n",(0,s.jsx)(n.h4,{id:"navbar-link",children:"Navbar link"}),"\n",(0,s.jsx)(n.p,{children:"By default, Navbar items are regular links (internal or external)."}),"\n",(0,s.jsxs)(n.p,{children:["React Router should automatically apply active link styling to links, but you can use ",(0,s.jsx)(n.code,{children:"activeBasePath"})," in edge cases. For cases in which a link should be active on several different paths (such as when you have multiple doc folders under the same sidebar), you can use ",(0,s.jsx)(n.code,{children:"activeBaseRegex"}),". ",(0,s.jsx)(n.code,{children:"activeBaseRegex"})," is a more flexible alternative to ",(0,s.jsx)(n.code,{children:"activeBasePath"})," and takes precedence over it -- Docusaurus parses it into a regular expression that is tested against the current URL."]}),"\n",(0,s.jsxs)(n.p,{children:["Outbound (external) links automatically get ",(0,s.jsx)(n.code,{children:'target="_blank" rel="noopener noreferrer"'})," attributes."]}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{name:"navbar-link",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"type"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'default'"})}),(0,s.jsx)(n.td,{children:"Optional"}),(0,s.jsx)(n.td,{children:"Sets the type of this item to a link."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"label"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"The name to be shown for this item."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"html"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:"Optional"}),(0,s.jsxs)(n.td,{children:["Same as ",(0,s.jsx)(n.code,{children:"label"}),", but renders pure HTML instead of text content."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"to"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"Client-side routing, used for navigating within the website. The baseUrl will be automatically prepended to this value."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"href"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsxs)(n.td,{children:["A full-page navigation, used for navigating outside of the website. ",(0,s.jsxs)(n.strong,{children:["Only one of ",(0,s.jsx)(n.code,{children:"to"})," or ",(0,s.jsx)(n.code,{children:"href"})," should be used."]})]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"prependBaseUrlToHref"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsxs)(n.td,{children:["Prepends the baseUrl to ",(0,s.jsx)(n.code,{children:"href"})," values."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"position"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"'left' | 'right'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'left'"})}),(0,s.jsx)(n.td,{children:"The side of the navbar this item should appear on."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"activeBasePath"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsxs)(n.td,{children:[(0,s.jsx)(n.code,{children:"to"})," / ",(0,s.jsx)(n.code,{children:"href"})]}),(0,s.jsx)(n.td,{children:"To apply the active class styling on all routes starting with this path. This usually isn't necessary."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"activeBaseRegex"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["Alternative to ",(0,s.jsx)(n.code,{children:"activeBasePath"})," if required."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"className"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"''"})}),(0,s.jsx)(n.td,{children:"Custom CSS class (for styling any item)."})]})]})]})}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsx)(n.p,{children:"In addition to the fields above, you can specify other arbitrary attributes that can be applied to a HTML link."})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n items: [\n // highlight-start\n {\n to: 'docs/introduction',\n // Only one of \"to\" or \"href\" should be used\n // href: 'https://www.facebook.com',\n label: 'Introduction',\n // Only one of \"label\" or \"html\" should be used\n // html: 'Introduction'\n position: 'left',\n activeBaseRegex: 'docs/(next|v8)',\n target: '_blank',\n },\n // highlight-end\n ],\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h4,{id:"navbar-dropdown",children:"Navbar dropdown"}),"\n",(0,s.jsxs)(n.p,{children:["Navbar items of the type ",(0,s.jsx)(n.code,{children:"dropdown"})," has the additional ",(0,s.jsx)(n.code,{children:"items"})," field, an inner array of navbar items."]}),"\n",(0,s.jsxs)(n.p,{children:["Navbar dropdown items only accept the following ",(0,s.jsx)(n.strong,{children:'"link-like" item types'}),":"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#navbar-link",children:"Navbar link"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#navbar-doc-link",children:"Navbar doc link"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#navbar-docs-version",children:"Navbar docs version"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#navbar-doc-sidebar",children:"Navbar doc sidebar"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#navbar-with-custom-html",children:"Navbar with custom HTML"})}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Note that the dropdown base item is a clickable link as well, so this item can receive any of the props of a ",(0,s.jsx)(n.a,{href:"#navbar-link",children:"plain navbar link"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{name:"navbar-dropdown",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"type"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'dropdown'"})}),(0,s.jsx)(n.td,{children:"Optional"}),(0,s.jsx)(n.td,{children:"Sets the type of this item to a dropdown."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"label"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"The name to be shown for this item."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"items"})}),(0,s.jsx)(n.td,{children:(0,s.jsxs)("code",{children:[(0,s.jsx)(n.a,{href:"#navbar-dropdown",children:"LinkLikeItem"}),"[]"]})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"The items to be contained in the dropdown."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"position"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"'left' | 'right'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'left'"})}),(0,s.jsx)(n.td,{children:"The side of the navbar this item should appear on."})]})]})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n items: [\n // highlight-start\n {\n type: 'dropdown',\n label: 'Community',\n position: 'left',\n items: [\n {\n label: 'Facebook',\n href: 'https://www.facebook.com',\n },\n {\n type: 'doc',\n label: 'Social',\n docId: 'social',\n },\n // ... more items\n ],\n },\n // highlight-end\n ],\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h4,{id:"navbar-doc-link",children:"Navbar doc link"}),"\n",(0,s.jsxs)(n.p,{children:["If you want to link to a specific doc, this special navbar item type will render the link to the doc of the provided ",(0,s.jsx)(n.code,{children:"docId"}),". It will get the class ",(0,s.jsx)(n.code,{children:"navbar__link--active"})," as long as you browse a doc of the same sidebar."]}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{name:"navbar-doc-link",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"type"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'doc'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"Sets the type of this item to a doc link."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docId"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"The ID of the doc that this item links to."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"label"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docId"})}),(0,s.jsx)(n.td,{children:"The name to be shown for this item."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"position"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"'left' | 'right'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'left'"})}),(0,s.jsx)(n.td,{children:"The side of the navbar this item should appear on."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docsPluginId"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'default'"})}),(0,s.jsx)(n.td,{children:"The ID of the docs plugin that the doc belongs to."})]})]})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n items: [\n // highlight-start\n {\n type: 'doc',\n position: 'left',\n docId: 'introduction',\n label: 'Docs',\n },\n // highlight-end\n ],\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h4,{id:"navbar-doc-sidebar",children:"Navbar linked to a sidebar"}),"\n",(0,s.jsx)(n.p,{children:"You can link a navbar item to the first document link (which can be a doc link or a generated category index) of a given sidebar without having to hardcode a doc ID."}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{name:"navbar-doc-sidebar",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"type"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'docSidebar'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"Sets the type of this navbar item to a sidebar's first document."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"sidebarId"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"The ID of the sidebar that this item is linked to."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"label"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:"First document link's sidebar label"}),(0,s.jsx)(n.td,{children:"The name to be shown for this item."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"position"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"'left' | 'right'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'left'"})}),(0,s.jsx)(n.td,{children:"The side of the navbar this item should appear on."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docsPluginId"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'default'"})}),(0,s.jsx)(n.td,{children:"The ID of the docs plugin that the sidebar belongs to."})]})]})]})}),"\n",(0,s.jsx)(n.admonition,{type:"tip",children:(0,s.jsx)(n.p,{children:"Use this navbar item type if your sidebar is updated often and the order is not stable."})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n items: [\n // highlight-start\n {\n type: 'docSidebar',\n position: 'left',\n sidebarId: 'api',\n label: 'API',\n },\n // highlight-end\n ],\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="sidebars.js"',children:"export default {\n tutorial: [\n {\n type: 'autogenerated',\n dirName: 'guides',\n },\n ],\n api: [\n // highlight-next-line\n 'cli', // The navbar item will be linking to this doc\n 'docusaurus-core',\n {\n type: 'autogenerated',\n dirName: 'api',\n },\n ],\n};\n"})}),"\n",(0,s.jsx)(n.h4,{id:"navbar-docs-version-dropdown",children:"Navbar docs version dropdown"}),"\n",(0,s.jsx)(n.p,{children:"If you use docs with versioning, this special navbar item type that will render a dropdown with all your site's available versions."}),"\n",(0,s.jsx)(n.p,{children:"The user will be able to switch from one version to another, while staying on the same doc (as long as the doc ID is constant across versions)."}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{name:"navbar-docs-version-dropdown",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"type"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'docsVersionDropdown'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"Sets the type of this item to a docs version dropdown."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"position"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"'left' | 'right'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'left'"})}),(0,s.jsx)(n.td,{children:"The side of the navbar this item should appear on."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"dropdownItemsBefore"})}),(0,s.jsx)(n.td,{children:(0,s.jsxs)("code",{children:[(0,s.jsx)(n.a,{href:"#navbar-dropdown",children:"LinkLikeItem"}),"[]"]})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsx)(n.td,{children:"Add additional dropdown items at the beginning of the dropdown."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"dropdownItemsAfter"})}),(0,s.jsx)(n.td,{children:(0,s.jsxs)("code",{children:[(0,s.jsx)(n.a,{href:"#navbar-dropdown",children:"LinkLikeItem"}),"[]"]})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsx)(n.td,{children:"Add additional dropdown items at the end of the dropdown."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docsPluginId"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'default'"})}),(0,s.jsx)(n.td,{children:"The ID of the docs plugin that the doc versioning belongs to."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"dropdownActiveClassDisabled"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsx)(n.td,{children:"Do not add the link active class when browsing docs."})]})]})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n items: [\n // highlight-start\n {\n type: 'docsVersionDropdown',\n position: 'left',\n dropdownItemsAfter: [{to: '/versions', label: 'All versions'}],\n dropdownActiveClassDisabled: true,\n },\n // highlight-end\n ],\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h4,{id:"navbar-docs-version",children:"Navbar docs version"}),"\n",(0,s.jsx)(n.p,{children:"If you use docs with versioning, this special navbar item type will link to the active/browsed version of your doc (depends on the current URL), and fallback to the latest version."}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{name:"navbar-docs-version",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"type"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'docsVersion'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"Sets the type of this item to a doc version link."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"label"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:"The active/latest version label."}),(0,s.jsx)(n.td,{children:"The name to be shown for this item."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"to"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:"The active/latest version."}),(0,s.jsx)(n.td,{children:"The internal link that this item points to."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"position"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"'left' | 'right'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'left'"})}),(0,s.jsx)(n.td,{children:"The side of the navbar this item should appear on."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docsPluginId"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'default'"})}),(0,s.jsx)(n.td,{children:"The ID of the docs plugin that the doc versioning belongs to."})]})]})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n items: [\n // highlight-start\n {\n type: 'docsVersion',\n position: 'left',\n to: '/path',\n label: 'label',\n },\n // highlight-end\n ],\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h4,{id:"navbar-locale-dropdown",children:"Navbar locale dropdown"}),"\n",(0,s.jsxs)(n.p,{children:["If you use the ",(0,s.jsx)(n.a,{href:"/docs/i18n/introduction",children:"i18n feature"}),", this special navbar item type will render a dropdown with all your site's available locales."]}),"\n",(0,s.jsx)(n.p,{children:"The user will be able to switch from one locale to another, while staying on the same page."}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{name:"navbar-locale-dropdown",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"type"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'localeDropdown'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"Sets the type of this item to a locale dropdown."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"position"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"'left' | 'right'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'left'"})}),(0,s.jsx)(n.td,{children:"The side of the navbar this item should appear on."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"dropdownItemsBefore"})}),(0,s.jsx)(n.td,{children:(0,s.jsxs)("code",{children:[(0,s.jsx)(n.a,{href:"#navbar-dropdown",children:"LinkLikeItem"}),"[]"]})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsx)(n.td,{children:"Add additional dropdown items at the beginning of the dropdown."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"dropdownItemsAfter"})}),(0,s.jsx)(n.td,{children:(0,s.jsxs)("code",{children:[(0,s.jsx)(n.a,{href:"#navbar-dropdown",children:"LinkLikeItem"}),"[]"]})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsx)(n.td,{children:"Add additional dropdown items at the end of the dropdown."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"queryString"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:"The query string to be appended to the URL."})]})]})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n items: [\n // highlight-start\n {\n type: 'localeDropdown',\n position: 'left',\n dropdownItemsAfter: [\n {\n to: 'https://my-site.com/help-us-translate',\n label: 'Help us translate',\n },\n ],\n },\n // highlight-end\n ],\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h4,{id:"navbar-search",children:"Navbar search"}),"\n",(0,s.jsxs)(n.p,{children:["If you use the ",(0,s.jsx)(n.a,{href:"/docs/search",children:"search"}),", the search bar will be the rightmost element in the navbar."]}),"\n",(0,s.jsx)(n.p,{children:"However, with this special navbar item type, you can change the default location."}),"\n",(0,s.jsx)(r.A,{name:"navbar-search",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"type"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'search'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"Sets the type of this item to a search bar."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"position"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"'left' | 'right'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'left'"})}),(0,s.jsx)(n.td,{children:"The side of the navbar this item should appear on."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"className"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:"/"}),(0,s.jsx)(n.td,{children:"Custom CSS class for this navbar item."})]})]})]})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n items: [\n // highlight-start\n {\n type: 'search',\n position: 'right',\n },\n // highlight-end\n ],\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h4,{id:"navbar-with-custom-html",children:"Navbar with custom HTML"}),"\n",(0,s.jsx)(n.p,{children:"You can also render your own HTML markup inside a navbar item using this navbar item type."}),"\n",(0,s.jsx)(r.A,{name:"navbar-html",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"type"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'html'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"Sets the type of this item to a HTML element."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"position"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"'left' | 'right'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'left'"})}),(0,s.jsx)(n.td,{children:"The side of the navbar this item should appear on."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"className"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"''"})}),(0,s.jsx)(n.td,{children:"Custom CSS class for this navbar item."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"value"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"''"})}),(0,s.jsx)(n.td,{children:"Custom HTML to be rendered inside this navbar item."})]})]})]})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n items: [\n // highlight-start\n {\n type: 'html',\n position: 'right',\n value: '',\n },\n // highlight-end\n ],\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"auto-hide-sticky-navbar",children:"Auto-hide sticky navbar"}),"\n",(0,s.jsx)(n.p,{children:"You can enable this cool UI feature that automatically hides the navbar when a user starts scrolling down the page, and show it again when the user scrolls up."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n // highlight-next-line\n hideOnScroll: true,\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"navbar-style",children:"Navbar style"}),"\n",(0,s.jsx)(n.p,{children:"You can set the static Navbar style without disabling the theme switching ability. The selected style will always apply no matter which theme user have selected."}),"\n",(0,s.jsxs)(n.p,{children:["Currently, there are two possible style options: ",(0,s.jsx)(n.code,{children:"dark"})," and ",(0,s.jsx)(n.code,{children:"primary"})," (based on the ",(0,s.jsx)(n.code,{children:"--ifm-color-primary"})," color). You can see the styles preview in the ",(0,s.jsx)(n.a,{href:"https://infima.dev/docs/components/navbar/",children:"Infima documentation"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n navbar: {\n // highlight-next-line\n style: 'primary',\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h2,{id:"codeblock",children:"CodeBlock"}),"\n",(0,s.jsxs)(n.p,{children:["Docusaurus uses ",(0,s.jsx)(n.a,{href:"https://github.com/FormidableLabs/prism-react-renderer",children:"Prism React Renderer"})," to highlight code blocks. All configuration are in the ",(0,s.jsx)(n.code,{children:"prism"})," object."]}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{name:"codeblock",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"theme"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"PrismTheme"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"palenight"})}),(0,s.jsx)(n.td,{children:"The Prism theme to use for light-theme code blocks."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"darkTheme"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"PrismTheme"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"palenight"})}),(0,s.jsx)(n.td,{children:"The Prism theme to use for dark-theme code blocks."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"defaultLanguage"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:"The default language to use for code blocks not declaring any explicit language."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"magicComments"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"MagicCommentConfig[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.em,{children:"see below"})}),(0,s.jsxs)(n.td,{children:["The list of ",(0,s.jsx)(n.a,{href:"/docs/markdown-features/code-blocks#custom-magic-comments",children:"magic comments"}),"."]})]})]})]})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"type MagicCommentConfig = {\n className: string;\n line?: string;\n block?: {start: string; end: string};\n};\n"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"const defaultMagicComments = [\n {\n className: 'theme-code-block-highlighted-line',\n line: 'highlight-next-line',\n block: {start: 'highlight-start', end: 'highlight-end'},\n },\n];\n"})}),"\n",(0,s.jsx)(n.h3,{id:"theme",children:"Theme"}),"\n",(0,s.jsxs)(n.p,{children:["By default, we use ",(0,s.jsx)(n.a,{href:"https://github.com/FormidableLabs/prism-react-renderer/blob/master/packages/prism-react-renderer/src/themes/palenight.ts",children:"Palenight"})," as syntax highlighting theme. You can specify a custom theme from the ",(0,s.jsx)(n.a,{href:"https://github.com/FormidableLabs/prism-react-renderer/tree/master/packages/prism-react-renderer/src/themes",children:"list of available themes"}),". You may also use a different syntax highlighting theme when the site is in dark mode."]}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"import {themes as prismThemes} from 'prism-react-renderer';\n\nexport default {\n themeConfig: {\n prism: {\n // highlight-start\n theme: prismThemes.github,\n darkTheme: prismThemes.dracula,\n // highlight-end\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsxs)(n.p,{children:["If you use the line highlighting Markdown syntax, you might need to specify a different highlight background color for the dark mode syntax highlighting theme. Refer to the ",(0,s.jsx)(n.a,{href:"/docs/markdown-features/code-blocks#line-highlighting",children:"docs for guidance"}),"."]})}),"\n",(0,s.jsx)(n.h3,{id:"default-language",children:"Default language"}),"\n",(0,s.jsxs)(n.p,{children:["You can set a default language for code blocks if no language is added after the opening triple backticks (i.e. ```). Note that a valid ",(0,s.jsx)(n.a,{href:"https://prismjs.com/#supported-languages",children:"language name"})," must be passed."]}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n prism: {\n // highlight-next-line\n defaultLanguage: 'javascript',\n },\n },\n};\n"})}),"\n",(0,s.jsx)(n.h2,{id:"footer-1",children:"Footer"}),"\n",(0,s.jsxs)(n.p,{children:["You can add logo and a copyright to the footer via ",(0,s.jsx)(n.code,{children:"themeConfig.footer"}),". Logo can be placed in ",(0,s.jsx)(n.a,{href:"/docs/static-assets",children:"static folder"}),". Logo URL works in the same way of the navbar logo."]}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(r.A,{name:"footer",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"logo"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"Logo"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["Customization of the logo object. See ",(0,s.jsx)(n.a,{href:"#navbar-logo",children:"Navbar logo"})," for details."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"copyright"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:"The copyright message to be displayed at the bottom, also supports custom HTML."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"style"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"'dark' | 'light'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'light'"})}),(0,s.jsx)(n.td,{children:"The color theme of the footer component."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"links"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"(Column | FooterLink)[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsx)(n.td,{children:"The link groups to be present."})]})]})]})}),"\n",(0,s.jsx)(n.p,{children:"Example configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n // highlight-start\n footer: {\n logo: {\n alt: 'Meta Open Source Logo',\n src: 'img/meta_oss_logo.png',\n href: 'https://opensource.fb.com',\n width: 160,\n height: 51,\n },\n copyright: `Copyright \xa9 ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,\n },\n // highlight-end\n },\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"footer-links",children:"Footer Links"}),"\n",(0,s.jsxs)(n.p,{children:["You can add links to the footer via ",(0,s.jsx)(n.code,{children:"themeConfig.footer.links"}),". There are two types of footer configurations: ",(0,s.jsx)(n.strong,{children:"multi-column footers"})," and ",(0,s.jsx)(n.strong,{children:"simple footers"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["Multi-column footer links have a ",(0,s.jsx)(n.code,{children:"title"})," and a list of ",(0,s.jsx)(n.code,{children:"FooterItem"}),"s for each column."]}),"\n",(0,s.jsx)(r.A,{name:"footer-links",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"title"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:"Label of the section of these links."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"items"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"FooterItem[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsx)(n.td,{children:"Links in this section."})]})]})]})}),"\n",(0,s.jsxs)(n.p,{children:["Accepted fields of each ",(0,s.jsx)(n.code,{children:"FooterItem"}),":"]}),"\n",(0,s.jsx)(r.A,{name:"footer-items",children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"label"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"Text to be displayed for this link."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"to"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsx)(n.td,{children:"Client-side routing, used for navigating within the website. The baseUrl will be automatically prepended to this value."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"href"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Required"})}),(0,s.jsxs)(n.td,{children:["A full-page navigation, used for navigating outside of the website. ",(0,s.jsxs)(n.strong,{children:["Only one of ",(0,s.jsx)(n.code,{children:"to"})," or ",(0,s.jsx)(n.code,{children:"href"})," should be used."]})]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"html"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["Renders the HTML pass-through instead of a simple link. In case ",(0,s.jsx)(n.code,{children:"html"})," is used, no other options should be provided."]})]})]})]})}),"\n",(0,s.jsx)(n.p,{children:"Example multi-column configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n footer: {\n // highlight-start\n links: [\n {\n title: 'Docs',\n items: [\n {\n label: 'Style Guide',\n to: 'docs/',\n },\n {\n label: 'Second Doc',\n to: 'docs/doc2/',\n },\n ],\n },\n {\n title: 'Community',\n items: [\n {\n label: 'Stack Overflow',\n href: 'https://stackoverflow.com/questions/tagged/docusaurus',\n },\n {\n label: 'Discord',\n href: 'https://discordapp.com/invite/docusaurus',\n },\n {\n label: 'X',\n href: 'https://x.com/docusaurus',\n },\n {\n html: `\n \n docusaurus.config.js
settings",id:"docusaurusconfigjs-settings",level:3},{value:"Environment settings",id:"environment-settings",level:3},{value:"Deploy",id:"deploy",level:3},{value:"Triggering deployment with GitHub Actions",id:"triggering-deployment-with-github-actions",level:3},{value:"Triggering deployment with Travis CI",id:"triggering-deployment-with-travis-ci",level:3},{value:"Triggering deployment with Buddy",id:"triggering-deployment-with-buddy",level:3},{value:"Using Azure Pipelines",id:"using-azure-pipelines",level:3},{value:"Using Drone",id:"using-drone",level:3},{value:"Deploying to Flightcontrol",id:"deploying-to-flightcontrol",level:2},{value:"Deploying to Koyeb",id:"deploying-to-koyeb",level:2},{value:"Deploying to Render",id:"deploying-to-render",level:2},{value:"Deploying to Qovery",id:"deploying-to-qovery",level:2},{value:"Deploying to Hostman",id:"deploying-to-hostman",level:2},{value:"Deploying to Surge",id:"deploying-to-surge",level:2},{value:"Using your domain",id:"using-your-domain",level:3},{value:"Setting up CNAME file",id:"setting-up-cname-file",level:3},{value:"Deploying to Stormkit",id:"deploying-to-stormkit",level:2},{value:"Deploying to QuantCDN",id:"deploying-to-quantcdn",level:2},{value:"Deploying to Layer0",id:"deploying-to-layer0",level:2},{value:"Deploying to Cloudflare Pages",id:"deploying-to-cloudflare-pages",level:2},{value:"Deploying to Azure Static Web Apps",id:"deploying-to-azure-static-web-apps",level:2},{value:"Deploying to Kinsta",id:"deploying-to-kinsta",level:2}];function u(e){let n={a:"a",admonition:"admonition",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,o.R)(),...e.components},{Details:s}=n;return s||function(e,n){throw Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.header,{children:(0,t.jsx)(n.h1,{id:"deployment",children:"Deployment"})}),"\n",(0,t.jsx)(n.p,{children:"To build the static files of your website for production, run:"}),"\n",(0,t.jsxs)(r.A,{groupId:"npm2yarn",children:[(0,t.jsx)(l.A,{value:"npm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npm run build\n"})})}),(0,t.jsx)(l.A,{value:"yarn",label:"Yarn",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"yarn build\n"})})}),(0,t.jsx)(l.A,{value:"pnpm",label:"pnpm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"pnpm run build\n"})})})]}),"\n",(0,t.jsxs)(n.p,{children:["Once it finishes, the static files will be generated within the ",(0,t.jsx)(n.code,{children:"build"})," directory."]}),"\n",(0,t.jsxs)(n.admonition,{type:"note",children:[(0,t.jsxs)(n.p,{children:["The only responsibility of Docusaurus is to build your site and emit static files in ",(0,t.jsx)(n.code,{children:"build"}),"."]}),(0,t.jsx)(n.p,{children:"It is now up to you to choose how to host those static files."})]}),"\n",(0,t.jsxs)(n.p,{children:["You can deploy your site to static site hosting services such as ",(0,t.jsx)(n.a,{href:"https://vercel.com/",children:"Vercel"}),", ",(0,t.jsx)(n.a,{href:"https://pages.github.com/",children:"GitHub Pages"}),", ",(0,t.jsx)(n.a,{href:"https://www.netlify.com/",children:"Netlify"}),", ",(0,t.jsx)(n.a,{href:"https://render.com/docs/static-sites",children:"Render"}),", and ",(0,t.jsx)(n.a,{href:"https://surge.sh/help/getting-started-with-surge",children:"Surge"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"A Docusaurus site is statically rendered, and it can generally work without JavaScript!"}),"\n",(0,t.jsx)(n.h2,{id:"configuration",children:"Configuration"}),"\n",(0,t.jsxs)(n.p,{children:["The following parameters are required in ",(0,t.jsx)(n.code,{children:"docusaurus.config.js"})," to optimize routing and serve files from the correct location:"]}),"\n",(0,t.jsxs)(n.table,{children:[(0,t.jsx)(n.thead,{children:(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.th,{children:"Name"}),(0,t.jsx)(n.th,{children:"Description"})]})}),(0,t.jsxs)(n.tbody,{children:[(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"url"})}),(0,t.jsxs)(n.td,{children:["URL for your site. For a site deployed at ",(0,t.jsx)(n.code,{children:"https://my-org.com/my-project/"}),", ",(0,t.jsx)(n.code,{children:"url"})," is ",(0,t.jsx)(n.code,{children:"https://my-org.com/"}),"."]})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"baseUrl"})}),(0,t.jsxs)(n.td,{children:["Base URL for your project, with a trailing slash. For a site deployed at ",(0,t.jsx)(n.code,{children:"https://my-org.com/my-project/"}),", ",(0,t.jsx)(n.code,{children:"baseUrl"})," is ",(0,t.jsx)(n.code,{children:"/my-project/"}),"."]})]})]})]}),"\n",(0,t.jsx)(n.h2,{id:"testing-build-locally",children:"Testing your Build Locally"}),"\n",(0,t.jsxs)(n.p,{children:["It is important to test your build locally before deploying it for production. Docusaurus provides a ",(0,t.jsx)(n.a,{href:"/docs/cli#docusaurus-serve-sitedir",children:(0,t.jsx)(n.code,{children:"docusaurus serve"})})," command for that:"]}),"\n",(0,t.jsxs)(r.A,{groupId:"npm2yarn",children:[(0,t.jsx)(l.A,{value:"npm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npm run serve\n"})})}),(0,t.jsx)(l.A,{value:"yarn",label:"Yarn",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"yarn serve\n"})})}),(0,t.jsx)(l.A,{value:"pnpm",label:"pnpm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"pnpm run serve\n"})})})]}),"\n",(0,t.jsxs)(n.p,{children:["By default, this will load your site at ",(0,t.jsx)(n.a,{href:"http://localhost:3000/",children:(0,t.jsx)(n.code,{children:"http://localhost:3000/"})}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"trailing-slashes",children:"Trailing slash configuration"}),"\n",(0,t.jsxs)(n.p,{children:["Docusaurus has a ",(0,t.jsxs)(n.a,{href:"/docs/api/docusaurus-config#trailingSlash",children:[(0,t.jsx)(n.code,{children:"trailingSlash"})," config"]})," to allow customizing URLs/links and emitted filename patterns."]}),"\n",(0,t.jsxs)(n.p,{children:["The default value generally works fine. Unfortunately, each static hosting provider has a ",(0,t.jsx)(n.strong,{children:"different behavior"}),", and deploying the exact same site to various hosts can lead to distinct results. Depending on your host, it can be useful to change this config."]}),"\n",(0,t.jsx)(n.admonition,{type:"tip",children:(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.a,{href:"https://github.com/slorber/trailing-slash-guide",children:"slorber/trailing-slash-guide"})," to understand better the behavior of your host and configure ",(0,t.jsx)(n.code,{children:"trailingSlash"})," appropriately."]})}),"\n",(0,t.jsx)(n.h2,{id:"using-environment-variables",children:"Using environment variables"}),"\n",(0,t.jsxs)(n.p,{children:["Putting potentially sensitive information in the environment is common practice. However, in a typical Docusaurus website, the ",(0,t.jsx)(n.code,{children:"docusaurus.config.js"})," file is the only interface to the Node.js environment (see ",(0,t.jsx)(n.a,{href:"/docs/advanced/architecture",children:"our architecture overview"}),"), while everything else (MDX pages, React components, etc.) are client side and do not have direct access to the ",(0,t.jsx)(n.code,{children:"process"})," global variable. In this case, you can consider using ",(0,t.jsx)(n.a,{href:"/docs/api/docusaurus-config#customFields",children:(0,t.jsx)(n.code,{children:"customFields"})})," to pass environment variables to the client side."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"// If you are using dotenv (https://www.npmjs.com/package/dotenv)\nimport 'dotenv/config';\n\nexport default {\n title: '...',\n url: process.env.URL, // You can use environment variables to control site specifics as well\n // highlight-start\n customFields: {\n // Put your custom environment here\n teamEmail: process.env.EMAIL,\n },\n // highlight-end\n};\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",metastring:'title="home.jsx"',children:"import useDocusaurusContext from '@docusaurus/useDocusaurusContext';\n\nexport default function Home() {\n const {\n siteConfig: {customFields},\n } = useDocusaurusContext();\n return docusaurus.config.js
settings",id:"docusaurusconfigjs-settings",level:3},{value:"Environment settings",id:"environment-settings",level:3},{value:"Deploy",id:"deploy",level:3},{value:"Triggering deployment with GitHub Actions",id:"triggering-deployment-with-github-actions",level:3},{value:"Triggering deployment with Travis CI",id:"triggering-deployment-with-travis-ci",level:3},{value:"Triggering deployment with Buddy",id:"triggering-deployment-with-buddy",level:3},{value:"Using Azure Pipelines",id:"using-azure-pipelines",level:3},{value:"Using Drone",id:"using-drone",level:3},{value:"Deploying to Flightcontrol",id:"deploying-to-flightcontrol",level:2},{value:"Deploying to Koyeb",id:"deploying-to-koyeb",level:2},{value:"Deploying to Render",id:"deploying-to-render",level:2},{value:"Deploying to Qovery",id:"deploying-to-qovery",level:2},{value:"Deploying to Hostman",id:"deploying-to-hostman",level:2},{value:"Deploying to Surge",id:"deploying-to-surge",level:2},{value:"Using your domain",id:"using-your-domain",level:3},{value:"Setting up CNAME file",id:"setting-up-cname-file",level:3},{value:"Deploying to Stormkit",id:"deploying-to-stormkit",level:2},{value:"Deploying to QuantCDN",id:"deploying-to-quantcdn",level:2},{value:"Deploying to Layer0",id:"deploying-to-layer0",level:2},{value:"Deploying to Cloudflare Pages",id:"deploying-to-cloudflare-pages",level:2},{value:"Deploying to Azure Static Web Apps",id:"deploying-to-azure-static-web-apps",level:2},{value:"Deploying to Kinsta",id:"deploying-to-kinsta",level:2}];function u(e){let n={a:"a",admonition:"admonition",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,o.R)(),...e.components},{Details:s}=n;return s||function(e,n){throw Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.header,{children:(0,t.jsx)(n.h1,{id:"deployment",children:"Deployment"})}),"\n",(0,t.jsx)(n.p,{children:"To build the static files of your website for production, run:"}),"\n",(0,t.jsxs)(r.A,{groupId:"npm2yarn",children:[(0,t.jsx)(l.A,{value:"npm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npm run build\n"})})}),(0,t.jsx)(l.A,{value:"yarn",label:"Yarn",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"yarn build\n"})})}),(0,t.jsx)(l.A,{value:"pnpm",label:"pnpm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"pnpm run build\n"})})})]}),"\n",(0,t.jsxs)(n.p,{children:["Once it finishes, the static files will be generated within the ",(0,t.jsx)(n.code,{children:"build"})," directory."]}),"\n",(0,t.jsxs)(n.admonition,{type:"note",children:[(0,t.jsxs)(n.p,{children:["The only responsibility of Docusaurus is to build your site and emit static files in ",(0,t.jsx)(n.code,{children:"build"}),"."]}),(0,t.jsx)(n.p,{children:"It is now up to you to choose how to host those static files."})]}),"\n",(0,t.jsxs)(n.p,{children:["You can deploy your site to static site hosting services such as ",(0,t.jsx)(n.a,{href:"https://vercel.com/",children:"Vercel"}),", ",(0,t.jsx)(n.a,{href:"https://pages.github.com/",children:"GitHub Pages"}),", ",(0,t.jsx)(n.a,{href:"https://www.netlify.com/",children:"Netlify"}),", ",(0,t.jsx)(n.a,{href:"https://render.com/docs/static-sites",children:"Render"}),", and ",(0,t.jsx)(n.a,{href:"https://surge.sh/help/getting-started-with-surge",children:"Surge"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"A Docusaurus site is statically rendered, and it can generally work without JavaScript!"}),"\n",(0,t.jsx)(n.h2,{id:"configuration",children:"Configuration"}),"\n",(0,t.jsxs)(n.p,{children:["The following parameters are required in ",(0,t.jsx)(n.code,{children:"docusaurus.config.js"})," to optimize routing and serve files from the correct location:"]}),"\n",(0,t.jsxs)(n.table,{children:[(0,t.jsx)(n.thead,{children:(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.th,{children:"Name"}),(0,t.jsx)(n.th,{children:"Description"})]})}),(0,t.jsxs)(n.tbody,{children:[(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"url"})}),(0,t.jsxs)(n.td,{children:["URL for your site. For a site deployed at ",(0,t.jsx)(n.code,{children:"https://my-org.com/my-project/"}),", ",(0,t.jsx)(n.code,{children:"url"})," is ",(0,t.jsx)(n.code,{children:"https://my-org.com/"}),"."]})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"baseUrl"})}),(0,t.jsxs)(n.td,{children:["Base URL for your project, with a trailing slash. For a site deployed at ",(0,t.jsx)(n.code,{children:"https://my-org.com/my-project/"}),", ",(0,t.jsx)(n.code,{children:"baseUrl"})," is ",(0,t.jsx)(n.code,{children:"/my-project/"}),"."]})]})]})]}),"\n",(0,t.jsx)(n.h2,{id:"testing-build-locally",children:"Testing your Build Locally"}),"\n",(0,t.jsxs)(n.p,{children:["It is important to test your build locally before deploying it for production. Docusaurus provides a ",(0,t.jsx)(n.a,{href:"/docs/cli#docusaurus-serve-sitedir",children:(0,t.jsx)(n.code,{children:"docusaurus serve"})})," command for that:"]}),"\n",(0,t.jsxs)(r.A,{groupId:"npm2yarn",children:[(0,t.jsx)(l.A,{value:"npm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npm run serve\n"})})}),(0,t.jsx)(l.A,{value:"yarn",label:"Yarn",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"yarn serve\n"})})}),(0,t.jsx)(l.A,{value:"pnpm",label:"pnpm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"pnpm run serve\n"})})})]}),"\n",(0,t.jsxs)(n.p,{children:["By default, this will load your site at ",(0,t.jsx)(n.a,{href:"http://localhost:3000/",children:(0,t.jsx)(n.code,{children:"http://localhost:3000/"})}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"trailing-slashes",children:"Trailing slash configuration"}),"\n",(0,t.jsxs)(n.p,{children:["Docusaurus has a ",(0,t.jsxs)(n.a,{href:"/docs/api/docusaurus-config#trailingSlash",children:[(0,t.jsx)(n.code,{children:"trailingSlash"})," config"]})," to allow customizing URLs/links and emitted filename patterns."]}),"\n",(0,t.jsxs)(n.p,{children:["The default value generally works fine. Unfortunately, each static hosting provider has a ",(0,t.jsx)(n.strong,{children:"different behavior"}),", and deploying the exact same site to various hosts can lead to distinct results. Depending on your host, it can be useful to change this config."]}),"\n",(0,t.jsx)(n.admonition,{type:"tip",children:(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.a,{href:"https://github.com/slorber/trailing-slash-guide",children:"slorber/trailing-slash-guide"})," to understand better the behavior of your host and configure ",(0,t.jsx)(n.code,{children:"trailingSlash"})," appropriately."]})}),"\n",(0,t.jsx)(n.h2,{id:"using-environment-variables",children:"Using environment variables"}),"\n",(0,t.jsxs)(n.p,{children:["Putting potentially sensitive information in the environment is common practice. However, in a typical Docusaurus website, the ",(0,t.jsx)(n.code,{children:"docusaurus.config.js"})," file is the only interface to the Node.js environment (see ",(0,t.jsx)(n.a,{href:"/docs/advanced/architecture",children:"our architecture overview"}),"), while everything else (MDX pages, React components, etc.) are client side and do not have direct access to the ",(0,t.jsx)(n.code,{children:"process"})," global variable. In this case, you can consider using ",(0,t.jsx)(n.a,{href:"/docs/api/docusaurus-config#customFields",children:(0,t.jsx)(n.code,{children:"customFields"})})," to pass environment variables to the client side."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"// If you are using dotenv (https://www.npmjs.com/package/dotenv)\nimport 'dotenv/config';\n\nexport default {\n title: '...',\n url: process.env.URL, // You can use environment variables to control site specifics as well\n // highlight-start\n customFields: {\n // Put your custom environment here\n teamEmail: process.env.EMAIL,\n },\n // highlight-end\n};\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",metastring:'title="home.jsx"',children:"import useDocusaurusContext from '@docusaurus/useDocusaurusContext';\n\nexport default function Home() {\n const {\n siteConfig: {customFields},\n } = useDocusaurusContext();\n return -t, --typescript
",id:"typescript",level:3},{value:"-g, --git-strategy
",id:"git-strategy",level:3},{value:"-p, --package-manager
",id:"package-manager",level:3},{value:"-s, --skip-install
",id:"skip-install",level:3}];function d(e){let s={admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,c.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.header,{children:(0,t.jsx)(s.h1,{id:"-create-docusaurus",children:"\u{1F4E6} create-docusaurus"})}),"\n",(0,t.jsx)(s.p,{children:"A scaffolding utility to help you instantly set up a functional Docusaurus app."}),"\n",(0,t.jsx)(s.h2,{id:"usage",children:"Usage"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-bash",children:"npx create-docusaurus@latest [name] [template] [rootDir]\n"})}),"\n",(0,t.jsxs)(s.p,{children:["The ",(0,t.jsx)(s.code,{children:"name"})," argument will be used as the site's path as well as the ",(0,t.jsx)(s.code,{children:"name"})," field in the created app's package.json. It can be an absolute path, or a path relative to ",(0,t.jsx)(s.code,{children:"rootDir"}),"."]}),"\n",(0,t.jsxs)(s.p,{children:["The ",(0,t.jsx)(s.code,{children:"template"})," argument can be one of the following:"]}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:"classic"}),": Uses the classic template (recommended)"]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:"facebook"}),": Uses the Facebook/Meta template, which contains some Meta-specific setup"]}),"\n",(0,t.jsxs)(s.li,{children:["A git repo URL (beginning with ",(0,t.jsx)(s.code,{children:"https://"})," or ",(0,t.jsx)(s.code,{children:"git@"}),"), which can be cloned to the destination"]}),"\n",(0,t.jsx)(s.li,{children:"A local file path relative to CWD, which contains the files to be copied to destination"}),"\n"]}),"\n",(0,t.jsxs)(s.p,{children:["The ",(0,t.jsx)(s.code,{children:"rootDir"})," will be used to resolve the absolute path to the site directory. The default is CWD."]}),"\n",(0,t.jsx)(s.admonition,{type:"warning",children:(0,t.jsx)(s.p,{children:"This command should be preferably used in an interactive shell so all features are available."})}),"\n",(0,t.jsx)(s.h2,{id:"options",children:"Options"}),"\n",(0,t.jsx)(s.h3,{id:"typescript",children:(0,t.jsx)(s.code,{children:"-t, --typescript"})}),"\n",(0,t.jsxs)(s.p,{children:["Used when the template argument is a recognized name. Currently, only ",(0,t.jsx)(s.code,{children:"classic"})," provides a TypeScript variant."]}),"\n",(0,t.jsx)(s.h3,{id:"git-strategy",children:(0,t.jsx)(s.code,{children:"-g, --git-strategy"})}),"\n",(0,t.jsx)(s.p,{children:"Used when the template argument is a git repo. It needs to be one of:"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:"deep"}),": preserves full git history"]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:"shallow"}),": clones with ",(0,t.jsx)(s.code,{children:"--depth=1"})]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:"copy"}),": does a shallow clone, but does not create a git repo"]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:"custom"}),": enter your custom git clone command. We will prompt you for it. You can write something like ",(0,t.jsx)(s.code,{children:"git clone --depth 10"}),", and we will append the repository URL and destination directory."]}),"\n"]}),"\n",(0,t.jsx)(s.h3,{id:"package-manager",children:(0,t.jsx)(s.code,{children:"-p, --package-manager"})}),"\n",(0,t.jsxs)(s.p,{children:["Value should be one of ",(0,t.jsx)(s.code,{children:"npm"}),", ",(0,t.jsx)(s.code,{children:"yarn"}),", ",(0,t.jsx)(s.code,{children:"pnpm"}),", or ",(0,t.jsx)(s.code,{children:"bun"}),". If it's not explicitly provided, Docusaurus will infer one based on:"]}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsx)(s.li,{children:"The lockfile already present in the CWD (e.g. if you are setting up website in an existing project)"}),"\n",(0,t.jsxs)(s.li,{children:["The command used to invoke ",(0,t.jsx)(s.code,{children:"create-docusaurus"})," (e.g. ",(0,t.jsx)(s.code,{children:"npm init"}),", ",(0,t.jsx)(s.code,{children:"npx"}),", ",(0,t.jsx)(s.code,{children:"yarn create"}),", ",(0,t.jsx)(s.code,{children:"bunx"}),", etc.)"]}),"\n",(0,t.jsx)(s.li,{children:"Interactive prompting, in case all heuristics are not present"}),"\n"]}),"\n",(0,t.jsx)(s.h3,{id:"skip-install",children:(0,t.jsx)(s.code,{children:"-s, --skip-install"})}),"\n",(0,t.jsxs)(s.p,{children:["If provided, Docusaurus will not automatically install dependencies after creating the app. The ",(0,t.jsx)(s.code,{children:"--package-manager"})," option is only useful when you are actually installing dependencies."]})]})}function u(e={}){let{wrapper:s}={...(0,c.R)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},43023:(e,s,i)=>{i.d(s,{R:()=>a,x:()=>l});var n=i(63696);let t={},c=n.createContext(t);function a(e){let s=n.useContext(c);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:a(e.components),n.createElement(c.Provider,{value:s},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/07d8cde9.6a1aac0c.js b/assets/js/07d8cde9.6a1aac0c.js
new file mode 100644
index 0000000000..a7b1c1fbb3
--- /dev/null
+++ b/assets/js/07d8cde9.6a1aac0c.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[45811],{5862:(e,s,i)=>{i.r(s),i.d(s,{assets:()=>r,contentTitle:()=>l,default:()=>u,frontMatter:()=>a,metadata:()=>n,toc:()=>o});let n=JSON.parse('{"id":"api/misc/create-docusaurus","title":"\u{1F4E6} create-docusaurus","description":"A scaffolding utility to help you instantly set up a functional Docusaurus app.","source":"@site/docs/api/misc/create-docusaurus.mdx","sourceDirName":"api/misc","slug":"/api/misc/create-docusaurus","permalink":"/docs/api/misc/create-docusaurus","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/api/misc/create-docusaurus.mdx","tags":[],"version":"current","lastUpdatedBy":"Flix","lastUpdatedAt":1727958179000,"sidebarPosition":0,"frontMatter":{"sidebar_position":0,"slug":"/api/misc/create-docusaurus"},"sidebar":"api","previous":{"title":"\u{1F4E6} theme-mermaid","permalink":"/docs/api/themes/@docusaurus/theme-mermaid"},"next":{"title":"\u{1F4E6} eslint-plugin","permalink":"/docs/api/misc/@docusaurus/eslint-plugin"}}');var t=i(62540),c=i(43023);let a={sidebar_position:0,slug:"/api/misc/create-docusaurus"},l="\u{1F4E6} create-docusaurus",r={},o=[{value:"Usage",id:"usage",level:2},{value:"Options",id:"options",level:2},{value:"-t, --typescript
",id:"typescript",level:3},{value:"-g, --git-strategy
",id:"git-strategy",level:3},{value:"-p, --package-manager
",id:"package-manager",level:3},{value:"-s, --skip-install
",id:"skip-install",level:3}];function d(e){let s={admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,c.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.header,{children:(0,t.jsx)(s.h1,{id:"-create-docusaurus",children:"\u{1F4E6} create-docusaurus"})}),"\n",(0,t.jsx)(s.p,{children:"A scaffolding utility to help you instantly set up a functional Docusaurus app."}),"\n",(0,t.jsx)(s.h2,{id:"usage",children:"Usage"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-bash",children:"npx create-docusaurus@latest [name] [template] [rootDir]\n"})}),"\n",(0,t.jsxs)(s.p,{children:["The ",(0,t.jsx)(s.code,{children:"name"})," argument will be used as the site's path as well as the ",(0,t.jsx)(s.code,{children:"name"})," field in the created app's package.json. It can be an absolute path, or a path relative to ",(0,t.jsx)(s.code,{children:"rootDir"}),"."]}),"\n",(0,t.jsxs)(s.p,{children:["The ",(0,t.jsx)(s.code,{children:"template"})," argument can be one of the following:"]}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:"classic"}),": Uses the classic template (recommended)"]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:"facebook"}),": Uses the Facebook/Meta template, which contains some Meta-specific setup"]}),"\n",(0,t.jsxs)(s.li,{children:["A git repo URL (beginning with ",(0,t.jsx)(s.code,{children:"https://"})," or ",(0,t.jsx)(s.code,{children:"git@"}),"), which can be cloned to the destination"]}),"\n",(0,t.jsx)(s.li,{children:"A local file path relative to CWD, which contains the files to be copied to destination"}),"\n"]}),"\n",(0,t.jsxs)(s.p,{children:["The ",(0,t.jsx)(s.code,{children:"rootDir"})," will be used to resolve the absolute path to the site directory. The default is CWD."]}),"\n",(0,t.jsx)(s.admonition,{type:"warning",children:(0,t.jsx)(s.p,{children:"This command should be preferably used in an interactive shell so all features are available."})}),"\n",(0,t.jsx)(s.h2,{id:"options",children:"Options"}),"\n",(0,t.jsx)(s.h3,{id:"typescript",children:(0,t.jsx)(s.code,{children:"-t, --typescript"})}),"\n",(0,t.jsxs)(s.p,{children:["Used when the template argument is a recognized name. Currently, only ",(0,t.jsx)(s.code,{children:"classic"})," provides a TypeScript variant."]}),"\n",(0,t.jsx)(s.h3,{id:"git-strategy",children:(0,t.jsx)(s.code,{children:"-g, --git-strategy"})}),"\n",(0,t.jsx)(s.p,{children:"Used when the template argument is a git repo. It needs to be one of:"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:"deep"}),": preserves full git history"]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:"shallow"}),": clones with ",(0,t.jsx)(s.code,{children:"--depth=1"})]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:"copy"}),": does a shallow clone, but does not create a git repo"]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:"custom"}),": enter your custom git clone command. We will prompt you for it. You can write something like ",(0,t.jsx)(s.code,{children:"git clone --depth 10"}),", and we will append the repository URL and destination directory."]}),"\n"]}),"\n",(0,t.jsx)(s.h3,{id:"package-manager",children:(0,t.jsx)(s.code,{children:"-p, --package-manager"})}),"\n",(0,t.jsxs)(s.p,{children:["Value should be one of ",(0,t.jsx)(s.code,{children:"npm"}),", ",(0,t.jsx)(s.code,{children:"yarn"}),", ",(0,t.jsx)(s.code,{children:"pnpm"}),", or ",(0,t.jsx)(s.code,{children:"bun"}),". If it's not explicitly provided, Docusaurus will infer one based on:"]}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsx)(s.li,{children:"The lockfile already present in the CWD (e.g. if you are setting up website in an existing project)"}),"\n",(0,t.jsxs)(s.li,{children:["The command used to invoke ",(0,t.jsx)(s.code,{children:"create-docusaurus"})," (e.g. ",(0,t.jsx)(s.code,{children:"npm init"}),", ",(0,t.jsx)(s.code,{children:"npx"}),", ",(0,t.jsx)(s.code,{children:"yarn create"}),", ",(0,t.jsx)(s.code,{children:"bunx"}),", etc.)"]}),"\n",(0,t.jsx)(s.li,{children:"Interactive prompting, in case all heuristics are not present"}),"\n"]}),"\n",(0,t.jsx)(s.h3,{id:"skip-install",children:(0,t.jsx)(s.code,{children:"-s, --skip-install"})}),"\n",(0,t.jsxs)(s.p,{children:["If provided, Docusaurus will not automatically install dependencies after creating the app. The ",(0,t.jsx)(s.code,{children:"--package-manager"})," option is only useful when you are actually installing dependencies."]})]})}function u(e={}){let{wrapper:s}={...(0,c.R)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},43023:(e,s,i)=>{i.d(s,{R:()=>a,x:()=>l});var n=i(63696);let t={},c=n.createContext(t);function a(e){let s=n.useContext(c);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:a(e.components),n.createElement(c.Provider,{value:s},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/0938a5e1.7d09fc34.js b/assets/js/0938a5e1.158207ac.js
similarity index 98%
rename from assets/js/0938a5e1.7d09fc34.js
rename to assets/js/0938a5e1.158207ac.js
index 6c9f204882..899157e6ad 100644
--- a/assets/js/0938a5e1.7d09fc34.js
+++ b/assets/js/0938a5e1.158207ac.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[16631],{7036:(e,s,n)=>{n.d(s,{A:()=>r});let r=n.p+"assets/images/social-card-402517ac2205718a22585e627fe1351c.png"},70361:(e,s,n)=>{n.d(s,{A:()=>o});var r=n(62540);n(63696);var a=n(11750);let t="dot_giz1",i="bar_rrRL";function o({children:e,minHeight:s,url:n="http://localhost:3000",style:o,bodyStyle:l}){var c,h;return(0,r.jsxs)("div",{className:"browserWindow_my1Q",style:(c=function(e){for(var s=1;sheadTags
",id:"config-headtags",level:3},{value:"Accessibility",id:"accessibility",level:3},{value:"Developer Experience",id:"developer-experience",level:3},{value:"Translations",id:"translations",level:3},{value:"Other changes",id:"other-changes",level:2}];function d(e){let s={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",mermaid:"mermaid",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,t.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(s.p,{children:["We are happy to announce ",(0,a.jsx)(s.strong,{children:"Docusaurus 2.2"}),"."]}),"\n",(0,a.jsxs)(s.p,{children:["The upgrade should be easy: as explained in our ",(0,a.jsx)(s.a,{href:"/community/release-process",children:"release process documentation"}),", minor versions respect ",(0,a.jsx)(s.a,{href:"https://semver.org/",children:"Semantic Versioning"}),"."]}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.img,{alt:"Docusaurus 2.2 social card",src:n(42897).A+"",width:"1200",height:"600"})}),"\n","\n",(0,a.jsx)(s.h2,{id:"highlights",children:"Highlights"}),"\n",(0,a.jsx)(s.h3,{id:"mermaid-diagrams",children:"Mermaid diagrams"}),"\n",(0,a.jsxs)(s.p,{children:["In ",(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/7490",children:"#7490"}),", we added support for Mermaid diagrams. This fills the gap between GitHub Flavored Markdown which also ",(0,a.jsx)(s.a,{href:"https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/",children:"added support recently"}),". You can create Mermaid diagrams using Markdown code blocks:"]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-md",children:"```mermaid\nsequenceDiagram\n participant Alice\n participant Bob\n Alice->>John: Hello John, how are you?\n loop Health check\n John->>John: Fight against hypochondria\n end\n Note right of John: Rational thoughts headTags
",id:"config-headtags",level:3},{value:"Accessibility",id:"accessibility",level:3},{value:"Developer Experience",id:"developer-experience",level:3},{value:"Translations",id:"translations",level:3},{value:"Other changes",id:"other-changes",level:2}];function d(e){let s={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",mermaid:"mermaid",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,t.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(s.p,{children:["We are happy to announce ",(0,a.jsx)(s.strong,{children:"Docusaurus 2.2"}),"."]}),"\n",(0,a.jsxs)(s.p,{children:["The upgrade should be easy: as explained in our ",(0,a.jsx)(s.a,{href:"/community/release-process",children:"release process documentation"}),", minor versions respect ",(0,a.jsx)(s.a,{href:"https://semver.org/",children:"Semantic Versioning"}),"."]}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.img,{alt:"Docusaurus 2.2 social card",src:n(42897).A+"",width:"1200",height:"600"})}),"\n","\n",(0,a.jsx)(s.h2,{id:"highlights",children:"Highlights"}),"\n",(0,a.jsx)(s.h3,{id:"mermaid-diagrams",children:"Mermaid diagrams"}),"\n",(0,a.jsxs)(s.p,{children:["In ",(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/7490",children:"#7490"}),", we added support for Mermaid diagrams. This fills the gap between GitHub Flavored Markdown which also ",(0,a.jsx)(s.a,{href:"https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/",children:"added support recently"}),". You can create Mermaid diagrams using Markdown code blocks:"]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-md",children:"```mermaid\nsequenceDiagram\n participant Alice\n participant Bob\n Alice->>John: Hello John, how are you?\n loop Health check\n John->>John: Fight against hypochondria\n end\n Note right of John: Rational thoughts Hello {project}!
;\n\nrender(Hello {project}!
\n);\n\nrender(\n"})," tag, ",(0,i.jsx)(n.code,{children:""})," tag, or ",(0,i.jsx)(n.code,{children:""})," component."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"\n Input: 1 2 3 4{'\\n'}\n Output: \"366300745\"{'\\n'}\n
\n"})}),"\n",(0,i.jsx)(a.A,{children:(0,i.jsxs)("pre",{children:[(0,i.jsx)("b",{children:"Input: "}),"1 2 3 4\n",(0,i.jsx)("b",{children:"Output: "}),'"366300745"\n']})}),"\n",(0,i.jsx)(n.admonition,{title:"MDX is whitespace insensitive",type:"warning",children:(0,i.jsxs)(n.p,{children:["MDX is in line with JSX behavior: line break characters, even when inside ",(0,i.jsx)(n.code,{children:""}),", are turned into spaces. You have to explicitly write the new line character for it to be printed out."]})}),"\n",(0,i.jsx)(n.admonition,{type:"warning",children:(0,i.jsx)(n.p,{children:"Syntax highlighting only works on plain strings. Docusaurus will not attempt to parse code block content containing JSX children."})}),"\n",(0,i.jsx)(n.h2,{id:"multi-language-support-code-blocks",children:"Multi-language support code blocks"}),"\n",(0,i.jsx)(n.p,{children:"With MDX, you can easily create interactive components within your documentation, for example, to display code in multiple programming languages and switch between them using a tabs component."}),"\n",(0,i.jsxs)(n.p,{children:["Instead of implementing a dedicated component for multi-language support code blocks, we've implemented a general-purpose ",(0,i.jsx)(n.a,{href:"/docs/markdown-features/tabs",children:(0,i.jsx)(n.code,{children:""})})," component in the classic theme so that you can use it for other non-code scenarios as well."]}),"\n",(0,i.jsxs)(n.p,{children:["The following example is how you can have multi-language code tabs in your docs. Note that the empty lines above and below each language block are ",(0,i.jsx)(n.strong,{children:"intentional"}),". This is a ",(0,i.jsx)(n.a,{href:"/docs/markdown-features/react#markdown-and-jsx-interoperability",children:"current limitation of MDX"}),": you have to leave empty lines around Markdown syntax for the MDX parser to know that it's Markdown syntax and not JSX."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:'import Tabs from \'@theme/Tabs\';\nimport TabItem from \'@theme/TabItem\';\n\n\n\n\n```js\nfunction helloWorld() {\n console.log(\'Hello, world!\');\n}\n```\n\n \n\n\n```py\ndef hello_world():\n print("Hello, world!")\n```\n\n \n\n\n```java\nclass HelloWorld {\n public static void main(String args[]) {\n System.out.println("Hello, World");\n }\n}\n```\n\n \n \n'})}),"\n",(0,i.jsx)(n.p,{children:"And you will get the following:"}),"\n",(0,i.jsx)(a.A,{children:(0,i.jsxs)(o.A,{children:[(0,i.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"function helloWorld() {\n console.log('Hello, world!');\n}\n"})})}),(0,i.jsx)(l.A,{value:"py",label:"Python",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-py",children:'def hello_world():\n print("Hello, world!")\n'})})}),(0,i.jsx)(l.A,{value:"java",label:"Java",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-java",children:'class HelloWorld {\n public static void main(String args[]) {\n System.out.println("Hello, World");\n }\n}\n'})})})]})}),"\n",(0,i.jsxs)(n.p,{children:["If you have multiple of these multi-language code tabs, and you want to sync the selection across the tab instances, refer to the ",(0,i.jsx)(n.a,{href:"/docs/markdown-features/tabs#syncing-tab-choices",children:"Syncing tab choices section"}),"."]}),"\n",(0,i.jsx)(n.h3,{id:"npm2yarn-remark-plugin",children:"Docusaurus npm2yarn remark plugin"}),"\n",(0,i.jsx)(n.p,{children:"Displaying CLI commands in both npm and Yarn is a very common need, for example:"}),"\n",(0,i.jsxs)(o.A,{groupId:"npm2yarn",children:[(0,i.jsx)(l.A,{value:"npm",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"npm install @docusaurus/remark-plugin-npm2yarn\n"})})}),(0,i.jsx)(l.A,{value:"yarn",label:"Yarn",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"yarn add @docusaurus/remark-plugin-npm2yarn\n"})})}),(0,i.jsx)(l.A,{value:"pnpm",label:"pnpm",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"pnpm add @docusaurus/remark-plugin-npm2yarn\n"})})})]}),"\n",(0,i.jsxs)(n.p,{children:["Docusaurus provides such a utility out of the box, freeing you from using the ",(0,i.jsx)(n.code,{children:"Tabs"})," component every time. To enable this feature, first install the ",(0,i.jsx)(n.code,{children:"@docusaurus/remark-plugin-npm2yarn"})," package as above, and then in ",(0,i.jsx)(n.code,{children:"docusaurus.config.js"}),", for the plugins where you need this feature (doc, blog, pages, etc.), register it in the ",(0,i.jsx)(n.code,{children:"remarkPlugins"})," option. (See ",(0,i.jsx)(n.a,{href:"/docs/api/plugins/@docusaurus/plugin-content-docs#ex-config",children:"Docs configuration"})," for more details on configuration format)"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n // ...\n presets: [\n [\n '@docusaurus/preset-classic',\n {\n docs: {\n // highlight-start\n remarkPlugins: [\n [require('@docusaurus/remark-plugin-npm2yarn'), {sync: true}],\n ],\n // highlight-end\n },\n pages: {\n // highlight-next-line\n remarkPlugins: [require('@docusaurus/remark-plugin-npm2yarn')],\n },\n blog: {\n // highlight-start\n remarkPlugins: [\n [\n require('@docusaurus/remark-plugin-npm2yarn'),\n {converters: ['pnpm']},\n ],\n ],\n // highlight-end\n // ...\n },\n },\n ],\n ],\n};\n"})}),"\n",(0,i.jsxs)(n.p,{children:["And then use it by adding the ",(0,i.jsx)(n.code,{children:"npm2yarn"})," key to the code block:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-md",children:"```bash npm2yarn\nnpm install @docusaurus/remark-plugin-npm2yarn\n```\n"})}),"\n",(0,i.jsx)(n.h4,{id:"npm2yarn-remark-plugin-configuration",children:"Configuration"}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:"Option"}),(0,i.jsx)(n.th,{children:"Type"}),(0,i.jsx)(n.th,{children:"Default"}),(0,i.jsx)(n.th,{children:"Description"})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"sync"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"boolean"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"false"})}),(0,i.jsx)(n.td,{children:"Whether to sync the selected converter across all code blocks."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"converters"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"array"})}),(0,i.jsxs)(n.td,{children:[(0,i.jsx)(n.code,{children:"'yarn'"}),", ",(0,i.jsx)(n.code,{children:"'pnpm'"})]}),(0,i.jsx)(n.td,{children:"The list of converters to use. The order of the converters is important, as the first converter will be used as the default choice."})]})]})]}),"\n",(0,i.jsx)(n.h2,{id:"usage-in-jsx",children:"Usage in JSX"}),"\n",(0,i.jsxs)(n.p,{children:["Outside of Markdown, you can use the ",(0,i.jsx)(n.code,{children:"@theme/CodeBlock"})," component to get the same output."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:'import CodeBlock from \'@theme/CodeBlock\';\n\nexport default function MyReactPage() {\n return (\n \n {/* highlight-start */}\n \n {`function HelloCodeTitle(props) {\n return Hello, {props.name}
;\n}`}\n \n {/* highlight-end */}\n \n );\n}\n'})}),"\n",(0,i.jsx)(a.A,{children:(0,i.jsx)(c.A,{language:"jsx",title:"/src/components/HelloCodeTitle.js",showLineNumbers:!0,children:`function HelloCodeTitle(props) {
- return Hello, {props.name}
;
-}`})}),"\n",(0,i.jsxs)(n.p,{children:["The props accepted are ",(0,i.jsx)(n.code,{children:"language"}),", ",(0,i.jsx)(n.code,{children:"title"})," and ",(0,i.jsx)(n.code,{children:"showLineNumbers"}),", in the same way as you write Markdown code blocks."]}),"\n",(0,i.jsxs)(n.p,{children:["Although discouraged, you can also pass in a ",(0,i.jsx)(n.code,{children:"metastring"})," prop like ",(0,i.jsx)(n.code,{children:"metastring='{1-2} title=\"/src/components/HelloCodeTitle.js\" showLineNumbers'"}),", which is how Markdown code blocks are handled under the hood. However, we recommend you ",(0,i.jsx)(n.a,{href:"#highlighting-with-comments",children:"use comments for highlighting lines"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["As ",(0,i.jsx)(n.a,{href:"#using-jsx-markup",children:"previously stated"}),", syntax highlighting is only applied when the children is a simple string."]})]})}function m(e={}){let{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(g,{...e})}):g(e)}}}]);
\ No newline at end of file
diff --git a/assets/js/0a818389.c4e3f3c9.js b/assets/js/0a818389.c4e3f3c9.js
new file mode 100644
index 0000000000..9bc7d298a8
--- /dev/null
+++ b/assets/js/0a818389.c4e3f3c9.js
@@ -0,0 +1,3 @@
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[22029],{15995:(e,n,t)=>{t.d(n,{A:()=>s});var r=t(62540);t(63696);var i=t(11750);function s({children:e,hidden:n,className:t}){return(0,r.jsx)("div",{role:"tabpanel",className:(0,i.A)("tabItem_pnkT",t),hidden:n,children:e})}},27446:(e,n,t)=>{t.d(n,{A:()=>y});var r=t(62540),i=t(63696),s=t(11750),o=t(7846),l=t(49519),a=t(96439),c=t(19739),d=t(66904),u=t(79244);function h(e){var n,t;return null!==(t=null===(n=i.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||(0,i.isValidElement)(e)&&function(e){let{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))||void 0===n?void 0:n.filter(Boolean))&&void 0!==t?t:[]}function p({value:e,tabValues:n}){return n.some(n=>n.value===e)}var g=t(10709);function m(e){for(var n=1;n{let n=e.currentTarget,r=l[a.indexOf(n)].value;r!==t&&(c(n),i(r))},u=e=>{var n,t;let r=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{let t=a.indexOf(e.currentTarget)+1;r=null!==(n=a[t])&&void 0!==n?n:a[0];break}case"ArrowLeft":{let n=a.indexOf(e.currentTarget)-1;r=null!==(t=a[n])&&void 0!==t?t:a[a.length-1]}}null==r||r.focus()};return(0,r.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},e),children:l.map(({value:e,label:n,attributes:i})=>(0,r.jsx)("li",j(m({role:"tab",tabIndex:t===e?0:-1,"aria-selected":t===e,ref:e=>a.push(e),onKeyDown:u,onClick:d},i),{className:(0,s.A)("tabs__item","tabItem_AQgk",null==i?void 0:i.className,{"tabs__item--active":t===e}),children:null!=n?n:e}),e))})}function f({lazy:e,children:n,selectedValue:t}){let o=(Array.isArray(n)?n:[n]).filter(Boolean);if(e){let e=o.find(e=>e.props.value===t);return e?(0,i.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,r.jsx)("div",{className:"margin-top--md",children:o.map((e,n)=>(0,i.cloneElement)(e,{key:n,hidden:e.props.value!==t}))})}function x(e){let n=function(e){let{defaultValue:n,queryString:t=!1,groupId:r}=e,s=function(e){let{values:n,children:t}=e;return(0,i.useMemo)(()=>{let e=null!=n?n:h(t).map(({props:{value:e,label:n,attributes:t,default:r}})=>({value:e,label:n,attributes:t,default:r}));return!function(e){let n=(0,d.XI)(e,(e,n)=>e.value===n.value);if(n.length>0)throw Error(`Docusaurus error: Duplicate values "${n.map(e=>e.value).join(", ")}" found in . Every value needs to be unique.`)}(e),e},[n,t])}(e),[o,g]=(0,i.useState)(()=>(function({defaultValue:e,tabValues:n}){var t;if(0===n.length)throw Error("Docusaurus error: the component requires at least one children component");if(e){if(!p({value:e,tabValues:n}))throw Error(`Docusaurus error: The has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${n.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}let r=null!==(t=n.find(e=>e.default))&&void 0!==t?t:n[0];if(!r)throw Error("Unexpected error: 0 tabValues");return r.value})({defaultValue:n,tabValues:s})),[m,j]=function({queryString:e=!1,groupId:n}){let t=(0,l.W6)(),r=function({queryString:e=!1,groupId:n}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!n)throw Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=n?n:null}({queryString:e,groupId:n});return[(0,c.aZ)(r),(0,i.useCallback)(e=>{var n,i;if(!r)return;let s=new URLSearchParams(t.location.search);s.set(r,e),t.replace((n=function(e){for(var n=1;n{n&&r.set(e)},[n,r])]}({groupId:r}),x=(()=>{let e=null!=m?m:b;return p({value:e,tabValues:s})?e:null})();return(0,a.A)(()=>{x&&g(x)},[x]),{selectedValue:o,selectValue:(0,i.useCallback)(e=>{if(!p({value:e,tabValues:s}))throw Error(`Can't select invalid tab value=${e}`);g(e),j(e),f(e)},[j,f,s]),tabValues:s}}(e);return(0,r.jsxs)("div",{className:(0,s.A)("tabs-container","tabList_Qoir"),children:[(0,r.jsx)(b,m({},n,e)),(0,r.jsx)(f,m({},n,e))]})}function y(e){let n=(0,g.A)();return(0,r.jsx)(x,j(m({},e),{children:h(e.children)}),String(n))}},40576:(e,n,t)=>{t.d(n,{A:()=>s});var r=t(62540);t(63696);var i=t(10709);function s({children:e,fallback:n}){return(0,i.A)()?(0,r.jsx)(r.Fragment,{children:null==e?void 0:e()}):null!=n?n:null}},70361:(e,n,t)=>{t.d(n,{A:()=>l});var r=t(62540);t(63696);var i=t(11750);let s="dot_giz1",o="bar_rrRL";function l({children:e,minHeight:n,url:t="http://localhost:3000",style:l,bodyStyle:a}){var c,d;return(0,r.jsxs)("div",{className:"browserWindow_my1Q",style:(c=function(e){for(var n=1;n{t.d(n,{A:()=>el});var r,i,s,o={};t.r(o),t.d(o,{ButtonExample:()=>A});var l=t(62540),a=t(63696),c=t(11750),d=t(10709),u=t(55152),h=t(81912),p=t(99468),g=t(40576),m=t(1495),j=t(66659),b=t(25436);function f(){let{prism:e}=(0,b.p)(),{colorMode:n}=(0,j.G)(),t=e.theme,r=e.darkTheme||t;return"dark"===n?r:t}var x=t(43758);function y(e){for(var n=1;n(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(x.A,{fallback:e=>(0,l.jsx)(m.MN,y({},e)),children:(0,l.jsx)(u.pA,{})}),(0,l.jsx)(u.p1,{})]})})}function k(){return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(v,{children:(0,l.jsx)(h.A,{id:"theme.Playground.result",description:"The result label of the live codeblocks",children:"Result"})}),(0,l.jsx)("div",{className:"playgroundPreview_mApW",children:(0,l.jsx)(O,{})})]})}function P(){let e=(0,d.A)();return(0,l.jsx)(u.w,{className:"playgroundEditor_TySg"},String(e))}function S(){return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(v,{children:(0,l.jsx)(h.A,{id:"theme.Playground.liveEditor",description:"The live editor label of the live codeblocks",children:"Live Editor"})}),(0,l.jsx)(P,{})]})}let N=e=>`${e};`;function C(e){var n,t,r,i,{children:s,transformCode:o}=e,a=function(e,n){if(null==e)return{};var t,r,i=function(e,n){if(null==e)return{};var t,r,i={},s=Object.keys(e);for(r=0;r=0||(i[t]=e[t]);return i}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r=0)&&Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(e,["children","transformCode"]);let{siteConfig:{themeConfig:c}}=(0,p.A)(),{liveCodeBlock:{playgroundPosition:d}}=c,h=f(),g=null!==(i=null===(r=a.metastring)||void 0===r?void 0:r.includes("noInline"))&&void 0!==i&&i;return(0,l.jsx)("div",{className:"playgroundContainer_6Ior",children:(0,l.jsx)(u.Q,(n=y({code:null==s?void 0:s.replace(/\n$/,""),noInline:g,transformCode:null!=o?o:N,theme:h},a),t=t={children:"top"===d?(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(k,{}),(0,l.jsx)(S,{})]}):(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(S,{}),(0,l.jsx)(k,{})]})},Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):(function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t})(Object(t)).forEach(function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))}),n))})}function D(e){for(var n=1;n[\"'])(?.*?)\\1"),H=RegExp("\\{(?[\\d,-]+)\\}"),M={js:{start:"\\/\\/",end:""},jsBlock:{start:"\\/\\*",end:"\\*\\/"},jsx:{start:"\\{\\s*\\/\\*",end:"\\*\\/\\s*\\}"},bash:{start:"#",end:""},html:{start:""}},_=(r=function(e){for(var n=1;n",end:""}},Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(i)):(function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t})(Object(i)).forEach(function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(i,e))}),r),R=Object.keys(M);function z(e,n){let t=e.map(e=>{let{start:t,end:r}=_[e];return`(?:${t}\\s*(${n.flatMap(e=>{var n,t;return[e.line,null===(n=e.block)||void 0===n?void 0:n.start,null===(t=e.block)||void 0===t?void 0:t.end].filter(Boolean)}).join("|")})\\s*${r})`}).join("|");return RegExp(`^\\s*(?:${t})\\s*$`)}function W(e){var n,t,{as:r}=e,i=function(e,n){if(null==e)return{};var t,r,i=function(e,n){if(null==e)return{};var t,r,i={},s=Object.keys(e);for(r=0;r=0||(i[t]=e[t]);return i}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r=0)&&Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(e,["as"]);let s=function(e){let n={color:"--prism-color",backgroundColor:"--prism-background-color"},t={};return Object.entries(e.plain).forEach(([e,r])=>{let i=n[e];i&&"string"==typeof r&&(t[i]=r)}),t}(f());return(0,l.jsx)(r,(n=function(e){for(var n=1;n(0,l.jsx)("span",X({},i({token:e})),n));return(0,l.jsxs)("span",(s=X({},a),o=o={children:[t?(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)("span",{className:J.codeLineNumber}),(0,l.jsx)("span",{className:J.codeLineContent,children:d})]}):d,(0,l.jsx)("br",{})]},Object.getOwnPropertyDescriptors?Object.defineProperties(s,Object.getOwnPropertyDescriptors(o)):(function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t})(Object(o)).forEach(function(e){Object.defineProperty(s,e,Object.getOwnPropertyDescriptor(o,e))}),s))}var G=t(936);function Q(e){var n,t;return(0,l.jsx)("svg",(n=function(e){for(var n=1;n{(0,G.A)(e),r(!0),i.current=window.setTimeout(()=>{r(!1)},1e3)},[e]);return(0,a.useEffect)(()=>()=>window.clearTimeout(i.current),[]),(0,l.jsx)("button",{type:"button","aria-label":t?(0,h.T)({id:"theme.CodeBlock.copied",message:"Copied",description:"The copied button label on code blocks"}):(0,h.T)({id:"theme.CodeBlock.copyButtonAriaLabel",message:"Copy code to clipboard",description:"The ARIA label for copy code blocks button"}),title:(0,h.T)({id:"theme.CodeBlock.copy",message:"Copy",description:"The copy button label on code blocks"}),className:(0,c.A)("clean-btn",n,K.copyButton,t&&K.copyButtonCopied),onClick:s,children:(0,l.jsxs)("span",{className:K.copyButtonIcons,"aria-hidden":"true",children:[(0,l.jsx)(Q,{className:K.copyButtonIcon}),(0,l.jsx)(Z,{className:K.copyButtonSuccessIcon})]})})}function en(e){var n,t;return(0,l.jsx)("svg",(n=function(e){for(var n=1;ne.startsWith("language-"));return null==n?void 0:n.replace(/language-/,"")}(n))&&void 0!==o?o:p)?void 0:d.toLowerCase(),j=f(),x=function(){let[e,n]=(0,a.useState)(!1),[t,r]=(0,a.useState)(!1),i=(0,a.useRef)(null),s=(0,a.useCallback)(()=>{let t=i.current.querySelector("code");e?t.removeAttribute("style"):(t.style.whiteSpace="pre-wrap",t.style.overflowWrap="anywhere"),n(e=>!e)},[i,e]),o=(0,a.useCallback)(()=>{let{scrollWidth:e,clientWidth:n}=i.current;r(e>n||i.current.querySelector("code").hasAttribute("style"))},[i]);return!function(e,n){let[t,r]=(0,a.useState)(),i=(0,a.useCallback)(()=>{var n;r(null===(n=e.current)||void 0===n?void 0:n.closest("[role=tabpanel][hidden]"))},[e,r]);(0,a.useEffect)(()=>{i()},[i]),function(e,n,t=$){let r=(0,U._q)(n),i=(0,U.Be)(t);(0,a.useEffect)(()=>{let n=new MutationObserver(r);return e&&n.observe(e,i),()=>n.disconnect()},[e,r,i])}(t,e=>{e.forEach(e=>{"attributes"===e.type&&"hidden"===e.attributeName&&(n(),i())})},{attributes:!0,characterData:!1,childList:!1,subtree:!1})}(i,o),(0,a.useEffect)(()=>{o()},[e,o]),(0,a.useEffect)(()=>(window.addEventListener("resize",o,{passive:!0}),()=>{window.removeEventListener("resize",o)}),[o]),{codeBlockRef:i,isEnabled:e,isCodeScrollable:t,toggle:s}}(),y=(null!==(h=null==t?void 0:null===(u=t.match(L))||void 0===u?void 0:u.groups.title)&&void 0!==h?h:"")||r,{lineClassNames:v,code:w}=function(e,n){let t=e.replace(/\n$/,""),{language:r,magicComments:i,metastring:s}=n;if(s&&H.test(s)){let e=s.match(H).groups.range;if(0===i.length)throw Error(`A highlight range has been given in code block's metastring (\`\`\` ${s}), but no magic comment config is available. Docusaurus applies the first magic comment entry's className for metastring ranges.`);let n=i[0].className;return{lineClassNames:Object.fromEntries(I()(e).filter(e=>e>0).map(e=>[e-1,[n]])),code:t}}if(void 0===r)return{lineClassNames:{},code:t};let o=function(e,n){switch(e){case"js":case"javascript":case"ts":case"typescript":return z(["js","jsBlock"],n);case"jsx":case"tsx":return z(["js","jsBlock","jsx"],n);case"html":return z(["js","jsBlock","html"],n);case"python":case"py":case"bash":return z(["bash"],n);case"markdown":case"md":return z(["html","jsx","bash"],n);case"tex":case"latex":case"matlab":return z(["tex"],n);case"lua":case"haskell":case"sql":return z(["lua"],n);case"wasm":return z(["wasm"],n);case"vb":case"vba":case"visual-basic":return z(["vb","rem"],n);case"vbnet":return z(["vbnet","rem"],n);case"batch":return z(["rem"],n);case"basic":return z(["rem","f90"],n);case"fsharp":return z(["js","ml"],n);case"ocaml":case"sml":return z(["ml"],n);case"fortran":return z(["f90"],n);case"cobol":return z(["cobol"],n);default:return z(R,n)}}(r,i),l=t.split("\n"),a=Object.fromEntries(i.map(e=>[e.className,{start:0,range:""}])),c=Object.fromEntries(i.filter(e=>e.line).map(({className:e,line:n})=>[n,e])),d=Object.fromEntries(i.filter(e=>e.block).map(({className:e,block:n})=>[n.start,e])),u=Object.fromEntries(i.filter(e=>e.block).map(({className:e,block:n})=>[n.end,e]));for(let e=0;evoid 0!==e);c[t]?a[c[t]].range+=`${e},`:d[t]?a[d[t]].start=e:u[t]&&(a[u[t]].range+=`${a[u[t]].start}-${e-1},`),l.splice(e,1)}t=l.join("\n");let h={};return Object.entries(a).forEach(([e,{range:n}])=>{I()(n).forEach(n=>{var t;null!==(t=h[n])&&void 0!==t||(h[n]=[]),h[n].push(e)})}),{lineClassNames:h,code:t}}(e,{metastring:t,language:m,magicComments:g}),O=null!=i?i:!!(null==t?void 0:t.includes("showLineNumbers"));return(0,l.jsxs)(W,{as:"div",className:(0,c.A)(n,m&&!n.includes(`language-${m}`)&&`language-${m}`),children:[y&&(0,l.jsx)("div",{className:F.codeBlockTitle,children:y}),(0,l.jsxs)("div",{className:F.codeBlockContent,children:[(0,l.jsx)(q.f4,{theme:j,code:w,language:null!=m?m:"text",children:({className:e,style:n,tokens:t,getLineProps:r,getTokenProps:i})=>(0,l.jsx)("pre",{tabIndex:0,ref:x.codeBlockRef,className:(0,c.A)(e,F.codeBlock,"thin-scrollbar"),style:n,children:(0,l.jsx)("code",{className:(0,c.A)(F.codeBlockLines,O&&F.codeBlockLinesWithNumbering),children:t.map((e,n)=>(0,l.jsx)(V,{line:e,getLineProps:r,getTokenProps:i,classNames:v[n],showLineNumbers:O},n))})})}),(0,l.jsxs)("div",{className:F.buttonGroup,children:[(x.isEnabled||x.isCodeScrollable)&&(0,l.jsx)(er,{className:F.codeButton,onClick:()=>x.toggle(),isEnabled:x.isEnabled}),(0,l.jsx)(ee,{className:F.codeButton,code:w})]})]})]})}function es(e){for(var n=1;n=0||(i[t]=e[t]);return i}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r=0)&&Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(e,["children"]);let s=(0,d.A)(),o=a.Children.toArray(r).some(e=>(0,a.isValidElement)(e))?r:Array.isArray(r)?r.join(""):r,c="string"==typeof o?ei:Y;return(0,l.jsx)(c,(n=function(e){for(var n=1;n{t.r(n),t.d(n,{assets:()=>h,contentTitle:()=>u,default:()=>m,frontMatter:()=>d,metadata:()=>r,toc:()=>p});let r=JSON.parse('{"id":"guides/markdown-features/code-blocks","title":"Code blocks","description":"Handling code blocks in Docusaurus Markdown","source":"@site/docs/guides/markdown-features/markdown-features-code-blocks.mdx","sourceDirName":"guides/markdown-features","slug":"/markdown-features/code-blocks","permalink":"/docs/markdown-features/code-blocks","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx","tags":[],"version":"current","lastUpdatedBy":"Flix","lastUpdatedAt":1727958179000,"frontMatter":{"id":"code-blocks","description":"Handling code blocks in Docusaurus Markdown","slug":"/markdown-features/code-blocks"},"sidebar":"docs","previous":{"title":"Tabs","permalink":"/docs/markdown-features/tabs"},"next":{"title":"Admonitions","permalink":"/docs/markdown-features/admonitions"}}');var i=t(62540),s=t(43023),o=t(27446),l=t(15995),a=t(70361),c=t(55887);let d={id:"code-blocks",description:"Handling code blocks in Docusaurus Markdown",slug:"/markdown-features/code-blocks"},u="Code blocks",h={},p=[{value:"Code title",id:"code-title",level:2},{value:"Syntax highlighting",id:"syntax-highlighting",level:2},{value:"Theming",id:"theming",level:3},{value:"Supported Languages",id:"supported-languages",level:3},{value:"Line highlighting",id:"line-highlighting",level:2},{value:"Highlighting with comments",id:"highlighting-with-comments",level:3},{value:"Highlighting with metadata string",id:"highlighting-with-metadata-string",level:3},{value:"Custom magic comments",id:"custom-magic-comments",level:3},{value:"Line numbering",id:"line-numbering",level:2},{value:"Interactive code editor",id:"interactive-code-editor",level:2},{value:"Imports",id:"imports",level:3},{value:"Imperative Rendering (noInline)",id:"imperative-rendering-noinline",level:3},{value:"Using JSX markup in code blocks",id:"using-jsx-markup",level:2},{value:"Multi-language support code blocks",id:"multi-language-support-code-blocks",level:2},{value:"Docusaurus npm2yarn remark plugin",id:"npm2yarn-remark-plugin",level:3},{value:"Configuration",id:"npm2yarn-remark-plugin-configuration",level:4},{value:"Usage in JSX",id:"usage-in-jsx",level:2}];function g(e){let n={a:"a",admonition:"admonition",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"code-blocks",children:"Code blocks"})}),"\n","\n",(0,i.jsx)(n.p,{children:"Code blocks within documentation are super-powered \u{1F4AA}."}),"\n",(0,i.jsx)(n.h2,{id:"code-title",children:"Code title"}),"\n",(0,i.jsxs)(n.p,{children:["You can add a title to the code block by adding a ",(0,i.jsx)(n.code,{children:"title"})," key after the language (leave a space between them)."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-md",children:'```jsx title="/src/components/HelloCodeTitle.js"\nfunction HelloCodeTitle(props) {\n return Hello, {props.name}
;\n}\n```\n'})}),"\n",(0,i.jsx)(a.A,{children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",metastring:'title="/src/components/HelloCodeTitle.js"',children:"function HelloCodeTitle(props) {\n return Hello, {props.name}
;\n}\n"})})}),"\n",(0,i.jsx)(n.h2,{id:"syntax-highlighting",children:"Syntax highlighting"}),"\n",(0,i.jsxs)(n.p,{children:["Code blocks are text blocks wrapped around by strings of 3 backticks. You may check out ",(0,i.jsx)(n.a,{href:"https://github.com/mdx-js/specification",children:"this reference"})," for the specifications of MDX."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-md",children:"```js\nconsole.log('Every repo must come with a mascot.');\n```\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Use the matching language meta string for your code block, and Docusaurus will pick up syntax highlighting automatically, powered by ",(0,i.jsx)(n.a,{href:"https://github.com/FormidableLabs/prism-react-renderer",children:"Prism React Renderer"}),"."]}),"\n",(0,i.jsx)(a.A,{children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"console.log('Every repo must come with a mascot.');\n"})})}),"\n",(0,i.jsx)(n.h3,{id:"theming",children:"Theming"}),"\n",(0,i.jsxs)(n.p,{children:["By default, the Prism ",(0,i.jsx)(n.a,{href:"https://github.com/FormidableLabs/prism-react-renderer#theming",children:"syntax highlighting theme"})," we use is ",(0,i.jsx)(n.a,{href:"https://github.com/FormidableLabs/prism-react-renderer/blob/master/packages/prism-react-renderer/src/themes/palenight.ts",children:"Palenight"}),". You can change this to another theme by passing ",(0,i.jsx)(n.code,{children:"theme"})," field in ",(0,i.jsx)(n.code,{children:"prism"})," as ",(0,i.jsx)(n.code,{children:"themeConfig"})," in your docusaurus.config.js."]}),"\n",(0,i.jsxs)(n.p,{children:["For example, if you prefer to use the ",(0,i.jsx)(n.code,{children:"dracula"})," highlighting theme:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"import {themes as prismThemes} from 'prism-react-renderer';\n\nexport default {\n themeConfig: {\n prism: {\n // highlight-next-line\n theme: prismThemes.dracula,\n },\n },\n};\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Because a Prism theme is just a JS object, you can also write your own theme if you are not satisfied with the default. Docusaurus enhances the ",(0,i.jsx)(n.code,{children:"github"})," and ",(0,i.jsx)(n.code,{children:"vsDark"})," themes to provide richer highlight, and you can check our implementations for the ",(0,i.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/blob/main/website/src/utils/prismLight.ts",children:"light"})," and ",(0,i.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/blob/main/website/src/utils/prismDark.ts",children:"dark"})," code block themes."]}),"\n",(0,i.jsx)(n.h3,{id:"supported-languages",children:"Supported Languages"}),"\n",(0,i.jsxs)(n.p,{children:["By default, Docusaurus comes with a subset of ",(0,i.jsx)(n.a,{href:"https://github.com/FormidableLabs/prism-react-renderer/blob/master/packages/generate-prism-languages/index.ts#L9-L23",children:"commonly used languages"}),"."]}),"\n",(0,i.jsx)(n.admonition,{type:"warning",children:(0,i.jsx)(n.p,{children:"Some popular languages like Java, C#, or PHP are not enabled by default."})}),"\n",(0,i.jsxs)(n.p,{children:["To add syntax highlighting for any of the other ",(0,i.jsx)(n.a,{href:"https://prismjs.com/#supported-languages",children:"Prism-supported languages"}),", define it in an array of additional languages."]}),"\n",(0,i.jsx)(n.admonition,{type:"note",children:(0,i.jsxs)(n.p,{children:["Each additional language has to be a valid Prism component name. For example, Prism would map the ",(0,i.jsx)(n.em,{children:"language"})," ",(0,i.jsx)(n.code,{children:"cs"})," to ",(0,i.jsx)(n.code,{children:"csharp"}),", but only ",(0,i.jsx)(n.code,{children:"prism-csharp.js"})," exists as a ",(0,i.jsx)(n.em,{children:"component"}),", so you need to use ",(0,i.jsx)(n.code,{children:"additionalLanguages: ['csharp']"}),". You can look into ",(0,i.jsx)(n.code,{children:"node_modules/prismjs/components"})," to find all components (languages) available."]})}),"\n",(0,i.jsx)(n.p,{children:"For example, if you want to add highlighting for the PowerShell language:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n // ...\n themeConfig: {\n prism: {\n // highlight-next-line\n additionalLanguages: ['powershell'],\n },\n // ...\n },\n};\n"})}),"\n",(0,i.jsxs)(n.p,{children:["After adding ",(0,i.jsx)(n.code,{children:"additionalLanguages"}),", restart Docusaurus."]}),"\n",(0,i.jsxs)(n.p,{children:["If you want to add highlighting for languages not yet supported by Prism, you can swizzle ",(0,i.jsx)(n.code,{children:"prism-include-languages"}),":"]}),"\n",(0,i.jsxs)(o.A,{groupId:"npm2yarn",children:[(0,i.jsx)(l.A,{value:"npm",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"npm run swizzle @docusaurus/theme-classic prism-include-languages\n"})})}),(0,i.jsx)(l.A,{value:"yarn",label:"Yarn",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"yarn swizzle @docusaurus/theme-classic prism-include-languages\n"})})}),(0,i.jsx)(l.A,{value:"pnpm",label:"pnpm",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"pnpm run swizzle @docusaurus/theme-classic prism-include-languages\n"})})})]}),"\n",(0,i.jsxs)(n.p,{children:["It will produce ",(0,i.jsx)(n.code,{children:"prism-include-languages.js"})," in your ",(0,i.jsx)(n.code,{children:"src/theme"})," folder. You can add highlighting support for custom languages by editing ",(0,i.jsx)(n.code,{children:"prism-include-languages.js"}),":"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",metastring:'title="src/theme/prism-include-languages.js"',children:"const prismIncludeLanguages = (Prism) => {\n // ...\n\n additionalLanguages.forEach((lang) => {\n require(`prismjs/components/prism-${lang}`);\n });\n\n // highlight-next-line\n require('/path/to/your/prism-language-definition');\n\n // ...\n};\n"})}),"\n",(0,i.jsxs)(n.p,{children:["You can refer to ",(0,i.jsx)(n.a,{href:"https://github.com/PrismJS/prism/tree/master/components",children:"Prism's official language definitions"})," when you are writing your own language definitions."]}),"\n",(0,i.jsxs)(n.p,{children:["When adding a custom language definition, you do not need to add the language to the ",(0,i.jsx)(n.code,{children:"additionalLanguages"})," config array, since Docusaurus only looks up the ",(0,i.jsx)(n.code,{children:"additionalLanguages"})," strings in languages that Prism provides. Adding the language import in ",(0,i.jsx)(n.code,{children:"prism-include-languages.js"})," is sufficient."]}),"\n",(0,i.jsx)(n.h2,{id:"line-highlighting",children:"Line highlighting"}),"\n",(0,i.jsx)(n.h3,{id:"highlighting-with-comments",children:"Highlighting with comments"}),"\n",(0,i.jsxs)(n.p,{children:["You can use comments with ",(0,i.jsx)(n.code,{children:"highlight-next-line"}),", ",(0,i.jsx)(n.code,{children:"highlight-start"}),", and ",(0,i.jsx)(n.code,{children:"highlight-end"})," to select which lines are highlighted."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-md",children:"```js\nfunction HighlightSomeText(highlight) {\n if (highlight) {\n // highlight-next-line\n return 'This text is highlighted!';\n }\n\n return 'Nothing highlighted';\n}\n\nfunction HighlightMoreText(highlight) {\n // highlight-start\n if (highlight) {\n return 'This range is highlighted!';\n }\n // highlight-end\n\n return 'Nothing highlighted';\n}\n```\n"})}),"\n",(0,i.jsx)(a.A,{children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"function HighlightSomeText(highlight) {\n if (highlight) {\n // highlight-next-line\n return 'This text is highlighted!';\n }\n\n return 'Nothing highlighted';\n}\n\nfunction HighlightMoreText(highlight) {\n // highlight-start\n if (highlight) {\n return 'This range is highlighted!';\n }\n // highlight-end\n\n return 'Nothing highlighted';\n}\n"})})}),"\n",(0,i.jsx)(n.p,{children:"Supported commenting syntax:"}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:"Style"}),(0,i.jsx)(n.th,{children:"Syntax"})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"C-style"}),(0,i.jsxs)(n.td,{children:[(0,i.jsx)(n.code,{children:"/* ... */"})," and ",(0,i.jsx)(n.code,{children:"// ..."})]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"JSX-style"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"{/* ... */}"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"Bash-style"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"# ..."})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"HTML-style"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:""})})]})]})]}),"\n",(0,i.jsxs)(n.p,{children:["We will do our best to infer which set of comment styles to use based on the language, and default to allowing ",(0,i.jsx)(n.em,{children:"all"})," comment styles. If there's a comment style that is not currently supported, we are open to adding them! Pull requests welcome. Note that different comment styles have no semantic difference, only their content does."]}),"\n",(0,i.jsxs)(n.p,{children:["You can set your own background color for highlighted code line in your ",(0,i.jsx)(n.code,{children:"src/css/custom.css"})," which will better fit to your selected syntax highlighting theme. The color given below works for the default highlighting theme (Palenight), so if you are using another theme, you will have to tweak the color accordingly."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-css",metastring:'title="/src/css/custom.css"',children:":root {\n --docusaurus-highlighted-code-line-bg: rgb(72, 77, 91);\n}\n\n/* If you have a different syntax highlighting theme for dark mode. */\n[data-theme='dark'] {\n /* Color which works with dark mode syntax highlighting theme */\n --docusaurus-highlighted-code-line-bg: rgb(100, 100, 100);\n}\n"})}),"\n",(0,i.jsxs)(n.p,{children:["If you also need to style the highlighted code line in some other way, you can target on ",(0,i.jsx)(n.code,{children:"theme-code-block-highlighted-line"})," CSS class."]}),"\n",(0,i.jsx)(n.h3,{id:"highlighting-with-metadata-string",children:"Highlighting with metadata string"}),"\n",(0,i.jsxs)(n.p,{children:["You can also specify highlighted line ranges within the language meta string (leave a space after the language). To highlight multiple lines, separate the line numbers by commas or use the range syntax to select a chunk of lines. This feature uses the ",(0,i.jsx)(n.code,{children:"parse-number-range"})," library and you can find ",(0,i.jsx)(n.a,{href:"https://www.npmjs.com/package/parse-numeric-range",children:"more syntax"})," on their project details."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-md",children:"```jsx {1,4-6,11}\nimport React from 'react';\n\nfunction MyComponent(props) {\n if (props.isBar) {\n return Bar;\n }\n\n return Foo;\n}\n\nexport default MyComponent;\n```\n"})}),"\n",(0,i.jsx)(a.A,{children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",metastring:"{1,4-6,11}",children:"import React from 'react';\n\nfunction MyComponent(props) {\n if (props.isBar) {\n return Bar;\n }\n\n return Foo;\n}\n\nexport default MyComponent;\n"})})}),"\n",(0,i.jsxs)(n.admonition,{title:"prefer comments",type:"tip",children:[(0,i.jsx)(n.p,{children:"Prefer highlighting with comments where you can. By inlining highlight in the code, you don't have to manually count the lines if your code block becomes long. If you add/remove lines, you also don't have to offset your line ranges."}),(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-diff",children:"- ```jsx {3}\n+ ```jsx {4}\n function HighlightSomeText(highlight) {\n if (highlight) {\n+ console.log('Highlighted text found');\n return 'This text is highlighted!';\n }\n\n return 'Nothing highlighted';\n }\n ```\n"})}),(0,i.jsx)(n.p,{children:"Below, we will introduce how the magic comment system can be extended to define custom directives and their functionalities. The magic comments would only be parsed if a highlight metastring is not present."})]}),"\n",(0,i.jsx)(n.h3,{id:"custom-magic-comments",children:"Custom magic comments"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"// highlight-next-line"})," and ",(0,i.jsx)(n.code,{children:"// highlight-start"}),' etc. are called "magic comments", because they will be parsed and removed, and their purposes are to add metadata to the next line, or the section that the pair of start- and end-comments enclose.']}),"\n",(0,i.jsxs)(n.p,{children:["You can declare custom magic comments through theme config. For example, you can register another magic comment that adds a ",(0,i.jsx)(n.code,{children:"code-block-error-line"})," class name:"]}),"\n",(0,i.jsxs)(o.A,{children:[(0,i.jsx)(l.A,{value:"docusaurus.config.js",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"export default {\n themeConfig: {\n prism: {\n magicComments: [\n // Remember to extend the default highlight class name as well!\n {\n className: 'theme-code-block-highlighted-line',\n line: 'highlight-next-line',\n block: {start: 'highlight-start', end: 'highlight-end'},\n },\n // highlight-start\n {\n className: 'code-block-error-line',\n line: 'This will error',\n },\n // highlight-end\n ],\n },\n },\n};\n"})})}),(0,i.jsx)(l.A,{value:"src/css/custom.css",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-css",children:".code-block-error-line {\n background-color: #ff000020;\n display: block;\n margin: 0 calc(-1 * var(--ifm-pre-padding));\n padding: 0 var(--ifm-pre-padding);\n border-left: 3px solid #ff000080;\n}\n"})})}),(0,i.jsx)(l.A,{value:"myDoc.md",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-md",children:"In JavaScript, trying to access properties on `null` will error.\n\n```js\nconst name = null;\n// This will error\nconsole.log(name.toUpperCase());\n// Uncaught TypeError: Cannot read properties of null (reading 'toUpperCase')\n```\n"})})})]}),"\n",(0,i.jsxs)(a.A,{children:[(0,i.jsxs)(n.p,{children:["In JavaScript, trying to access properties on ",(0,i.jsx)(n.code,{children:"null"})," will error."]}),(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"const name = null;\n// This will error\nconsole.log(name.toUpperCase());\n// Uncaught TypeError: Cannot read properties of null (reading 'toUpperCase')\n"})})]}),"\n",(0,i.jsxs)(n.p,{children:["If you use number ranges in metastring (the ",(0,i.jsx)(n.code,{children:"{1,3-4}"})," syntax), Docusaurus will apply the ",(0,i.jsxs)(n.strong,{children:["first ",(0,i.jsx)(n.code,{children:"magicComments"})," entry"]}),"'s class name. This, by default, is ",(0,i.jsx)(n.code,{children:"theme-code-block-highlighted-line"}),", but if you change the ",(0,i.jsx)(n.code,{children:"magicComments"})," config and use a different entry as the first one, the meaning of the metastring range will change as well."]}),"\n",(0,i.jsxs)(n.p,{children:["You can disable the default line highlighting comments with ",(0,i.jsx)(n.code,{children:"magicComments: []"}),". If there's no magic comment config, but Docusaurus encounters a code block containing a metastring range, it will error because there will be no class name to apply\u2014the highlighting class name, after all, is just a magic comment entry."]}),"\n",(0,i.jsxs)(n.p,{children:["Every magic comment entry will contain three keys: ",(0,i.jsx)(n.code,{children:"className"})," (required), ",(0,i.jsx)(n.code,{children:"line"}),", which applies to the directly next line, or ",(0,i.jsx)(n.code,{children:"block"})," (containing ",(0,i.jsx)(n.code,{children:"start"})," and ",(0,i.jsx)(n.code,{children:"end"}),"), which applies to the entire block enclosed by the two comments."]}),"\n",(0,i.jsxs)(n.p,{children:["Using CSS to target the class can already do a lot, but you can unlock the full potential of this feature through ",(0,i.jsx)(n.a,{href:"/docs/swizzling",children:"swizzling"}),"."]}),"\n",(0,i.jsxs)(o.A,{groupId:"npm2yarn",children:[(0,i.jsx)(l.A,{value:"npm",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"npm run swizzle @docusaurus/theme-classic CodeBlock/Line\n"})})}),(0,i.jsx)(l.A,{value:"yarn",label:"Yarn",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"yarn swizzle @docusaurus/theme-classic CodeBlock/Line\n"})})}),(0,i.jsx)(l.A,{value:"pnpm",label:"pnpm",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"pnpm run swizzle @docusaurus/theme-classic CodeBlock/Line\n"})})})]}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"Line"})," component will receive the list of class names, based on which you can conditionally render different markup."]}),"\n",(0,i.jsx)(n.h2,{id:"line-numbering",children:"Line numbering"}),"\n",(0,i.jsxs)(n.p,{children:["You can enable line numbering for your code block by using ",(0,i.jsx)(n.code,{children:"showLineNumbers"})," key within the language meta string (don't forget to add space directly before the key)."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-md",children:"```jsx {1,4-6,11} showLineNumbers\nimport React from 'react';\n\nfunction MyComponent(props) {\n if (props.isBar) {\n return Bar;\n }\n\n return Foo;\n}\n\nexport default MyComponent;\n```\n"})}),"\n",(0,i.jsx)(a.A,{children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",metastring:"{1,4-6,11} showLineNumbers",children:"import React from 'react';\n\nfunction MyComponent(props) {\n if (props.isBar) {\n return Bar;\n }\n\n return Foo;\n}\n\nexport default MyComponent;\n"})})}),"\n",(0,i.jsx)(n.h2,{id:"interactive-code-editor",children:"Interactive code editor"}),"\n",(0,i.jsxs)(n.p,{children:["(Powered by ",(0,i.jsx)(n.a,{href:"https://github.com/FormidableLabs/react-live",children:"React Live"}),")"]}),"\n",(0,i.jsxs)(n.p,{children:["You can create an interactive coding editor with the ",(0,i.jsx)(n.code,{children:"@docusaurus/theme-live-codeblock"})," plugin. First, add the plugin to your package."]}),"\n",(0,i.jsxs)(o.A,{groupId:"npm2yarn",children:[(0,i.jsx)(l.A,{value:"npm",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"npm install --save @docusaurus/theme-live-codeblock\n"})})}),(0,i.jsx)(l.A,{value:"yarn",label:"Yarn",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"yarn add @docusaurus/theme-live-codeblock\n"})})}),(0,i.jsx)(l.A,{value:"pnpm",label:"pnpm",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"pnpm add @docusaurus/theme-live-codeblock\n"})})})]}),"\n",(0,i.jsxs)(n.p,{children:["You will also need to add the plugin to your ",(0,i.jsx)(n.code,{children:"docusaurus.config.js"}),"."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",metastring:"{3}",children:"export default {\n // ...\n themes: ['@docusaurus/theme-live-codeblock'],\n // ...\n};\n"})}),"\n",(0,i.jsxs)(n.p,{children:["To use the plugin, create a code block with ",(0,i.jsx)(n.code,{children:"live"})," attached to the language meta string."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-md",children:"```jsx live\nfunction Clock(props) {\n const [date, setDate] = useState(new Date());\n useEffect(() => {\n const timerID = setInterval(() => tick(), 1000);\n\n return function cleanup() {\n clearInterval(timerID);\n };\n });\n\n function tick() {\n setDate(new Date());\n }\n\n return (\n \n It is {date.toLocaleTimeString()}.
\n \n );\n}\n```\n"})}),"\n",(0,i.jsx)(n.p,{children:"The code block will be rendered as an interactive editor. Changes to the code will reflect on the result panel live."}),"\n",(0,i.jsx)(a.A,{children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",metastring:"live",live:!0,children:"function Clock(props) {\n const [date, setDate] = useState(new Date());\n useEffect(() => {\n const timerID = setInterval(() => tick(), 1000);\n\n return function cleanup() {\n clearInterval(timerID);\n };\n });\n\n function tick() {\n setDate(new Date());\n }\n\n return (\n \n It is {date.toLocaleTimeString()}.
\n \n );\n}\n"})})}),"\n",(0,i.jsx)(n.h3,{id:"imports",children:"Imports"}),"\n",(0,i.jsx)(n.admonition,{title:"react-live and imports",type:"warning",children:(0,i.jsx)(n.p,{children:"It is not possible to import components directly from the react-live code editor, you have to define available imports upfront."})}),"\n",(0,i.jsx)(n.p,{children:"By default, all React imports are available. If you need more imports available, swizzle the react-live scope:"}),"\n",(0,i.jsxs)(o.A,{groupId:"npm2yarn",children:[(0,i.jsx)(l.A,{value:"npm",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"npm run swizzle @docusaurus/theme-live-codeblock ReactLiveScope -- --eject\n"})})}),(0,i.jsx)(l.A,{value:"yarn",label:"Yarn",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"yarn swizzle @docusaurus/theme-live-codeblock ReactLiveScope --eject\n"})})}),(0,i.jsx)(l.A,{value:"pnpm",label:"pnpm",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"pnpm run swizzle @docusaurus/theme-live-codeblock ReactLiveScope --eject\n"})})})]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",metastring:'title="src/theme/ReactLiveScope/index.js"',children:"import React from 'react';\n\n// highlight-start\nconst ButtonExample = (props) => (\n \n);\n// highlight-end\n\n// Add react-live imports you need here\nconst ReactLiveScope = {\n React,\n ...React,\n // highlight-next-line\n ButtonExample,\n};\n\nexport default ReactLiveScope;\n"})}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"ButtonExample"})," component is now available to use:"]}),"\n",(0,i.jsx)(a.A,{children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",metastring:"live",live:!0,children:"function MyPlayground(props) {\n return (\n \n alert('hey!')}>Click me \n \n );\n}\n"})})}),"\n",(0,i.jsx)(n.h3,{id:"imperative-rendering-noinline",children:"Imperative Rendering (noInline)"}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"noInline"})," option should be used to avoid errors when your code spans multiple components or variables."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-md",children:"```jsx live noInline\nconst project = 'Docusaurus';\n\nconst Greeting = () => Hello {project}!
;\n\nrender( );\n```\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Unlike an ordinary interactive code block, when using ",(0,i.jsx)(n.code,{children:"noInline"})," React Live won't wrap your code in an inline function to render it."]}),"\n",(0,i.jsxs)(n.p,{children:["You will need to explicitly call ",(0,i.jsx)(n.code,{children:"render()"})," at the end of your code to display the output."]}),"\n",(0,i.jsx)(a.A,{children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",metastring:"live noInline",live:!0,children:'const project = "Docusaurus";\n\nconst Greeting = () => (\n Hello {project}!
\n);\n\nrender(\n \n);\n'})})}),"\n",(0,i.jsx)(n.h2,{id:"using-jsx-markup",children:"Using JSX markup in code blocks"}),"\n",(0,i.jsx)(n.p,{children:"Code block in Markdown always preserves its content as plain text, meaning you can't do something like:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:'type EditUrlFunction = (params: {\n // This doesn\'t turn into a link (for good reason!)\n version: Version;\n versionDocsDirPath: string;\n docPath: string;\n permalink: string;\n locale: string;\n}) => string | undefined;\n'})}),"\n",(0,i.jsxs)(n.p,{children:["If you want to embed HTML markup such as anchor links or bold type, you can use the ",(0,i.jsx)(n.code,{children:""})," tag, ",(0,i.jsx)(n.code,{children:""})," tag, or ",(0,i.jsx)(n.code,{children:""})," component."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"\n Input: 1 2 3 4{'\\n'}\n Output: \"366300745\"{'\\n'}\n
\n"})}),"\n",(0,i.jsx)(a.A,{children:(0,i.jsxs)("pre",{children:[(0,i.jsx)("b",{children:"Input: "}),"1 2 3 4\n",(0,i.jsx)("b",{children:"Output: "}),'"366300745"\n']})}),"\n",(0,i.jsx)(n.admonition,{title:"MDX is whitespace insensitive",type:"warning",children:(0,i.jsxs)(n.p,{children:["MDX is in line with JSX behavior: line break characters, even when inside ",(0,i.jsx)(n.code,{children:""}),", are turned into spaces. You have to explicitly write the new line character for it to be printed out."]})}),"\n",(0,i.jsx)(n.admonition,{type:"warning",children:(0,i.jsx)(n.p,{children:"Syntax highlighting only works on plain strings. Docusaurus will not attempt to parse code block content containing JSX children."})}),"\n",(0,i.jsx)(n.h2,{id:"multi-language-support-code-blocks",children:"Multi-language support code blocks"}),"\n",(0,i.jsx)(n.p,{children:"With MDX, you can easily create interactive components within your documentation, for example, to display code in multiple programming languages and switch between them using a tabs component."}),"\n",(0,i.jsxs)(n.p,{children:["Instead of implementing a dedicated component for multi-language support code blocks, we've implemented a general-purpose ",(0,i.jsx)(n.a,{href:"/docs/markdown-features/tabs",children:(0,i.jsx)(n.code,{children:""})})," component in the classic theme so that you can use it for other non-code scenarios as well."]}),"\n",(0,i.jsxs)(n.p,{children:["The following example is how you can have multi-language code tabs in your docs. Note that the empty lines above and below each language block are ",(0,i.jsx)(n.strong,{children:"intentional"}),". This is a ",(0,i.jsx)(n.a,{href:"/docs/markdown-features/react#markdown-and-jsx-interoperability",children:"current limitation of MDX"}),": you have to leave empty lines around Markdown syntax for the MDX parser to know that it's Markdown syntax and not JSX."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:'import Tabs from \'@theme/Tabs\';\nimport TabItem from \'@theme/TabItem\';\n\n\n\n\n```js\nfunction helloWorld() {\n console.log(\'Hello, world!\');\n}\n```\n\n \n\n\n```py\ndef hello_world():\n print("Hello, world!")\n```\n\n \n\n\n```java\nclass HelloWorld {\n public static void main(String args[]) {\n System.out.println("Hello, World");\n }\n}\n```\n\n \n \n'})}),"\n",(0,i.jsx)(n.p,{children:"And you will get the following:"}),"\n",(0,i.jsx)(a.A,{children:(0,i.jsxs)(o.A,{children:[(0,i.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"function helloWorld() {\n console.log('Hello, world!');\n}\n"})})}),(0,i.jsx)(l.A,{value:"py",label:"Python",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-py",children:'def hello_world():\n print("Hello, world!")\n'})})}),(0,i.jsx)(l.A,{value:"java",label:"Java",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-java",children:'class HelloWorld {\n public static void main(String args[]) {\n System.out.println("Hello, World");\n }\n}\n'})})})]})}),"\n",(0,i.jsxs)(n.p,{children:["If you have multiple of these multi-language code tabs, and you want to sync the selection across the tab instances, refer to the ",(0,i.jsx)(n.a,{href:"/docs/markdown-features/tabs#syncing-tab-choices",children:"Syncing tab choices section"}),"."]}),"\n",(0,i.jsx)(n.h3,{id:"npm2yarn-remark-plugin",children:"Docusaurus npm2yarn remark plugin"}),"\n",(0,i.jsx)(n.p,{children:"Displaying CLI commands in both npm and Yarn is a very common need, for example:"}),"\n",(0,i.jsxs)(o.A,{groupId:"npm2yarn",children:[(0,i.jsx)(l.A,{value:"npm",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"npm install @docusaurus/remark-plugin-npm2yarn\n"})})}),(0,i.jsx)(l.A,{value:"yarn",label:"Yarn",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"yarn add @docusaurus/remark-plugin-npm2yarn\n"})})}),(0,i.jsx)(l.A,{value:"pnpm",label:"pnpm",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"pnpm add @docusaurus/remark-plugin-npm2yarn\n"})})})]}),"\n",(0,i.jsxs)(n.p,{children:["Docusaurus provides such a utility out of the box, freeing you from using the ",(0,i.jsx)(n.code,{children:"Tabs"})," component every time. To enable this feature, first install the ",(0,i.jsx)(n.code,{children:"@docusaurus/remark-plugin-npm2yarn"})," package as above, and then in ",(0,i.jsx)(n.code,{children:"docusaurus.config.js"}),", for the plugins where you need this feature (doc, blog, pages, etc.), register it in the ",(0,i.jsx)(n.code,{children:"remarkPlugins"})," option. (See ",(0,i.jsx)(n.a,{href:"/docs/api/plugins/@docusaurus/plugin-content-docs#ex-config",children:"Docs configuration"})," for more details on configuration format)"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n // ...\n presets: [\n [\n '@docusaurus/preset-classic',\n {\n docs: {\n // highlight-start\n remarkPlugins: [\n [require('@docusaurus/remark-plugin-npm2yarn'), {sync: true}],\n ],\n // highlight-end\n },\n pages: {\n // highlight-next-line\n remarkPlugins: [require('@docusaurus/remark-plugin-npm2yarn')],\n },\n blog: {\n // highlight-start\n remarkPlugins: [\n [\n require('@docusaurus/remark-plugin-npm2yarn'),\n {converters: ['pnpm']},\n ],\n ],\n // highlight-end\n // ...\n },\n },\n ],\n ],\n};\n"})}),"\n",(0,i.jsxs)(n.p,{children:["And then use it by adding the ",(0,i.jsx)(n.code,{children:"npm2yarn"})," key to the code block:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-md",children:"```bash npm2yarn\nnpm install @docusaurus/remark-plugin-npm2yarn\n```\n"})}),"\n",(0,i.jsx)(n.h4,{id:"npm2yarn-remark-plugin-configuration",children:"Configuration"}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:"Option"}),(0,i.jsx)(n.th,{children:"Type"}),(0,i.jsx)(n.th,{children:"Default"}),(0,i.jsx)(n.th,{children:"Description"})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"sync"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"boolean"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"false"})}),(0,i.jsx)(n.td,{children:"Whether to sync the selected converter across all code blocks."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"converters"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"array"})}),(0,i.jsxs)(n.td,{children:[(0,i.jsx)(n.code,{children:"'yarn'"}),", ",(0,i.jsx)(n.code,{children:"'pnpm'"})]}),(0,i.jsx)(n.td,{children:"The list of converters to use. The order of the converters is important, as the first converter will be used as the default choice."})]})]})]}),"\n",(0,i.jsx)(n.h2,{id:"usage-in-jsx",children:"Usage in JSX"}),"\n",(0,i.jsxs)(n.p,{children:["Outside of Markdown, you can use the ",(0,i.jsx)(n.code,{children:"@theme/CodeBlock"})," component to get the same output."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:'import CodeBlock from \'@theme/CodeBlock\';\n\nexport default function MyReactPage() {\n return (\n \n {/* highlight-start */}\n \n {`function HelloCodeTitle(props) {\n return Hello, {props.name}
;\n}`}\n \n {/* highlight-end */}\n \n );\n}\n'})}),"\n",(0,i.jsx)(a.A,{children:(0,i.jsx)(c.A,{language:"jsx",title:"/src/components/HelloCodeTitle.js",showLineNumbers:!0,children:`function HelloCodeTitle(props) {
+ return Hello, {props.name}
;
+}`})}),"\n",(0,i.jsxs)(n.p,{children:["The props accepted are ",(0,i.jsx)(n.code,{children:"language"}),", ",(0,i.jsx)(n.code,{children:"title"})," and ",(0,i.jsx)(n.code,{children:"showLineNumbers"}),", in the same way as you write Markdown code blocks."]}),"\n",(0,i.jsxs)(n.p,{children:["Although discouraged, you can also pass in a ",(0,i.jsx)(n.code,{children:"metastring"})," prop like ",(0,i.jsx)(n.code,{children:"metastring='{1-2} title=\"/src/components/HelloCodeTitle.js\" showLineNumbers'"}),", which is how Markdown code blocks are handled under the hood. However, we recommend you ",(0,i.jsx)(n.a,{href:"#highlighting-with-comments",children:"use comments for highlighting lines"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["As ",(0,i.jsx)(n.a,{href:"#using-jsx-markup",children:"previously stated"}),", syntax highlighting is only applied when the children is a simple string."]})]})}function m(e={}){let{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(g,{...e})}):g(e)}}}]);
\ No newline at end of file
diff --git a/assets/js/0b6cd89a.d2e1ed16.js b/assets/js/0b6cd89a.d2e1ed16.js
new file mode 100644
index 0000000000..b9dc2ac119
--- /dev/null
+++ b/assets/js/0b6cd89a.d2e1ed16.js
@@ -0,0 +1,22 @@
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[41262],{15995:(e,n,t)=>{t.d(n,{A:()=>i});var r=t(62540);t(63696);var s=t(11750);function i({children:e,hidden:n,className:t}){return(0,r.jsx)("div",{role:"tabpanel",className:(0,s.A)("tabItem_pnkT",t),hidden:n,children:e})}},27446:(e,n,t)=>{t.d(n,{A:()=>y});var r=t(62540),s=t(63696),i=t(11750),o=t(7846),c=t(49519),d=t(96439),l=t(19739),a=t(66904),h=t(79244);function u(e){var n,t;return null!==(t=null===(n=s.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||(0,s.isValidElement)(e)&&function(e){let{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))||void 0===n?void 0:n.filter(Boolean))&&void 0!==t?t:[]}function j({value:e,tabValues:n}){return n.some(n=>n.value===e)}var p=t(10709);function x(e){for(var n=1;n{let n=e.currentTarget,r=c[d.indexOf(n)].value;r!==t&&(l(n),s(r))},h=e=>{var n,t;let r=null;switch(e.key){case"Enter":a(e);break;case"ArrowRight":{let t=d.indexOf(e.currentTarget)+1;r=null!==(n=d[t])&&void 0!==n?n:d[0];break}case"ArrowLeft":{let n=d.indexOf(e.currentTarget)-1;r=null!==(t=d[n])&&void 0!==t?t:d[d.length-1]}}null==r||r.focus()};return(0,r.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.A)("tabs",{"tabs--block":n},e),children:c.map(({value:e,label:n,attributes:s})=>(0,r.jsx)("li",f(x({role:"tab",tabIndex:t===e?0:-1,"aria-selected":t===e,ref:e=>d.push(e),onKeyDown:h,onClick:a},s),{className:(0,i.A)("tabs__item","tabItem_AQgk",null==s?void 0:s.className,{"tabs__item--active":t===e}),children:null!=n?n:e}),e))})}function g({lazy:e,children:n,selectedValue:t}){let o=(Array.isArray(n)?n:[n]).filter(Boolean);if(e){let e=o.find(e=>e.props.value===t);return e?(0,s.cloneElement)(e,{className:(0,i.A)("margin-top--md",e.props.className)}):null}return(0,r.jsx)("div",{className:"margin-top--md",children:o.map((e,n)=>(0,s.cloneElement)(e,{key:n,hidden:e.props.value!==t}))})}function m(e){let n=function(e){let{defaultValue:n,queryString:t=!1,groupId:r}=e,i=function(e){let{values:n,children:t}=e;return(0,s.useMemo)(()=>{let e=null!=n?n:u(t).map(({props:{value:e,label:n,attributes:t,default:r}})=>({value:e,label:n,attributes:t,default:r}));return!function(e){let n=(0,a.XI)(e,(e,n)=>e.value===n.value);if(n.length>0)throw Error(`Docusaurus error: Duplicate values "${n.map(e=>e.value).join(", ")}" found in . Every value needs to be unique.`)}(e),e},[n,t])}(e),[o,p]=(0,s.useState)(()=>(function({defaultValue:e,tabValues:n}){var t;if(0===n.length)throw Error("Docusaurus error: the component requires at least one children component");if(e){if(!j({value:e,tabValues:n}))throw Error(`Docusaurus error: The has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${n.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}let r=null!==(t=n.find(e=>e.default))&&void 0!==t?t:n[0];if(!r)throw Error("Unexpected error: 0 tabValues");return r.value})({defaultValue:n,tabValues:i})),[x,f]=function({queryString:e=!1,groupId:n}){let t=(0,c.W6)(),r=function({queryString:e=!1,groupId:n}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!n)throw Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=n?n:null}({queryString:e,groupId:n});return[(0,l.aZ)(r),(0,s.useCallback)(e=>{var n,s;if(!r)return;let i=new URLSearchParams(t.location.search);i.set(r,e),t.replace((n=function(e){for(var n=1;n{n&&r.set(e)},[n,r])]}({groupId:r}),m=(()=>{let e=null!=x?x:b;return j({value:e,tabValues:i})?e:null})();return(0,d.A)(()=>{m&&p(m)},[m]),{selectedValue:o,selectValue:(0,s.useCallback)(e=>{if(!j({value:e,tabValues:i}))throw Error(`Can't select invalid tab value=${e}`);p(e),f(e),g(e)},[f,g,i]),tabValues:i}}(e);return(0,r.jsxs)("div",{className:(0,i.A)("tabs-container","tabList_Qoir"),children:[(0,r.jsx)(b,x({},n,e)),(0,r.jsx)(g,x({},n,e))]})}function y(e){let n=(0,p.A)();return(0,r.jsx)(m,f(x({},e),{children:u(e.children)}),String(n))}},40576:(e,n,t)=>{t.d(n,{A:()=>i});var r=t(62540);t(63696);var s=t(10709);function i({children:e,fallback:n}){return(0,s.A)()?(0,r.jsx)(r.Fragment,{children:null==e?void 0:e()}):null!=n?n:null}},59273:(e,n,t)=>{t.d(n,{A:()=>d});var r=t(62540),s=t(63696),i=t(52711),o=t(49519);let c=s.forwardRef(function({name:e,children:n},t){let c=function(e){let n=e;for(;(0,s.isValidElement)(n);)[n]=s.Children.toArray(n.props.children);if("string"!=typeof n)throw Error(`Could not extract APITable row name from JSX tree:
+${JSON.stringify(e,null,2)}`);return n}(n),d=e?`${e}-${c}`:c,l=`#${d}`,a=(0,o.W6)();return(0,i.A)().collectAnchor(d),(0,r.jsx)("tr",{id:d,tabIndex:0,ref:a.location.hash===l?t:void 0,onClick:e=>{var n;let t="TD"===e.target.tagName.toUpperCase(),r=!!(null===(n=window.getSelection())||void 0===n?void 0:n.toString());t&&!r&&a.push(l)},onKeyDown:e=>{"Enter"===e.key&&a.push(l)},children:n.props.children})});function d({children:e,name:n}){if("table"!==e.type)throw Error("Bad usage of APITable component.\nIt is probably that your Markdown table is malformed.\nMake sure to double-check you have the appropriate number of columns for each table row.");let[t,i]=s.Children.toArray(e.props.children),o=(0,s.useRef)(null);(0,s.useEffect)(()=>{var e;null===(e=o.current)||void 0===e||e.focus()},[o]);let d=s.Children.map(i.props.children,e=>(0,r.jsx)(c,{name:n,ref:o,children:e}));return(0,r.jsxs)("table",{className:"apiTable_e8hp",children:[t,(0,r.jsx)("tbody",{children:d})]})}},59433:(e,n,t)=>{t.d(n,{A:()=>h});var r=t(62540);t(63696);var s=t(36372),i=t(69615),o=t(81912),c=t(27446),d=t(15995),l=t(55887);let a=void 0;function h({code:e,pluginName:n,presetOptionName:t}){let h=(0,i.ir)(a).path;return(0,r.jsxs)(c.A,{groupId:"api-config-ex",children:[(0,r.jsxs)(d.A,{value:"preset",label:(0,o.T)({message:"Preset options"}),children:[(0,r.jsx)("p",{children:(0,r.jsx)(o.A,{id:"apiDocs.configTabs.presetOptions.description",values:{presetLink:(0,r.jsx)(s.A,{to:`${h}/using-plugins#docusauruspreset-classic`,children:(0,r.jsx)(o.A,{children:"preset options"})})},children:"If you use a preset, configure this plugin through the {presetLink}:"})}),(0,r.jsx)(l.A,{language:"js",title:"docusaurus.config.js",children:`module.exports = {
+ presets: [
+ [
+ '@docusaurus/preset-classic',
+ {
+ // highlight-start
+ ${t}: ${e.replace(/\n/g,"\n ")},
+ // highlight-end
+ },
+ ],
+ ],
+};`})]}),(0,r.jsxs)(d.A,{value:"plugin",label:(0,o.T)({message:"Plugin options"}),children:[(0,r.jsx)("p",{children:(0,r.jsx)(o.A,{children:"If you are using a standalone plugin, provide options directly to the plugin:"})}),(0,r.jsx)(l.A,{language:"js",title:"docusaurus.config.js",children:`module.exports = {
+ plugins: [
+ [
+ '${n}',
+ // highlight-start
+ ${e.replace(/\n/g,"\n ")},
+ // highlight-end
+ ],
+ ],
+};`})]})]})}},55887:(e,n,t)=>{t.d(n,{A:()=>ec});var r,s,i,o={};t.r(o),t.d(o,{ButtonExample:()=>C});var c=t(62540),d=t(63696),l=t(11750),a=t(10709),h=t(55152),u=t(81912),j=t(99468),p=t(40576),x=t(1495),f=t(66659),b=t(25436);function g(){let{prism:e}=(0,b.p)(),{colorMode:n}=(0,f.G)(),t=e.theme,r=e.darkTheme||t;return"dark"===n?r:t}var m=t(43758);function y(e){for(var n=1;n(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(m.A,{fallback:e=>(0,c.jsx)(x.MN,y({},e)),children:(0,c.jsx)(h.pA,{})}),(0,c.jsx)(h.p1,{})]})})}function P(){return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(v,{children:(0,c.jsx)(u.A,{id:"theme.Playground.result",description:"The result label of the live codeblocks",children:"Result"})}),(0,c.jsx)("div",{className:"playgroundPreview_mApW",children:(0,c.jsx)(w,{})})]})}function k(){let e=(0,a.A)();return(0,c.jsx)(h.w,{className:"playgroundEditor_TySg"},String(e))}function D(){return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(v,{children:(0,c.jsx)(u.A,{id:"theme.Playground.liveEditor",description:"The live editor label of the live codeblocks",children:"Live Editor"})}),(0,c.jsx)(k,{})]})}let S=e=>`${e};`;function T(e){var n,t,r,s,{children:i,transformCode:o}=e,d=function(e,n){if(null==e)return{};var t,r,s=function(e,n){if(null==e)return{};var t,r,s={},i=Object.keys(e);for(r=0;r=0||(s[t]=e[t]);return s}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0)&&Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}(e,["children","transformCode"]);let{siteConfig:{themeConfig:l}}=(0,j.A)(),{liveCodeBlock:{playgroundPosition:a}}=l,u=g(),p=null!==(s=null===(r=d.metastring)||void 0===r?void 0:r.includes("noInline"))&&void 0!==s&&s;return(0,c.jsx)("div",{className:"playgroundContainer_6Ior",children:(0,c.jsx)(h.Q,(n=y({code:null==i?void 0:i.replace(/\n$/,""),noInline:p,transformCode:null!=o?o:S,theme:u},d),t=t={children:"top"===a?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(P,{}),(0,c.jsx)(D,{})]}):(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(D,{}),(0,c.jsx)(P,{})]})},Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):(function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t})(Object(t)).forEach(function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))}),n))})}function A(e){for(var n=1;n[\"'])(?.*?)\\1"),L=RegExp("\\{(?[\\d,-]+)\\}"),R={js:{start:"\\/\\/",end:""},jsBlock:{start:"\\/\\*",end:"\\*\\/"},jsx:{start:"\\{\\s*\\/\\*",end:"\\*\\/\\s*\\}"},bash:{start:"#",end:""},html:{start:""}},U=(r=function(e){for(var n=1;n",end:""}},Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(s)):(function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t})(Object(s)).forEach(function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(s,e))}),r),M=Object.keys(R);function V(e,n){let t=e.map(e=>{let{start:t,end:r}=U[e];return`(?:${t}\\s*(${n.flatMap(e=>{var n,t;return[e.line,null===(n=e.block)||void 0===n?void 0:n.start,null===(t=e.block)||void 0===t?void 0:t.end].filter(Boolean)}).join("|")})\\s*${r})`}).join("|");return RegExp(`^\\s*(?:${t})\\s*$`)}function F(e){var n,t,{as:r}=e,s=function(e,n){if(null==e)return{};var t,r,s=function(e,n){if(null==e)return{};var t,r,s={},i=Object.keys(e);for(r=0;r=0||(s[t]=e[t]);return s}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0)&&Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}(e,["as"]);let i=function(e){let n={color:"--prism-color",backgroundColor:"--prism-background-color"},t={};return Object.entries(e.plain).forEach(([e,r])=>{let s=n[e];s&&"string"==typeof r&&(t[s]=r)}),t}(g());return(0,c.jsx)(r,(n=function(e){for(var n=1;n(0,c.jsx)("span",X({},s({token:e})),n));return(0,c.jsxs)("span",(i=X({},d),o=o={children:[t?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)("span",{className:H.codeLineNumber}),(0,c.jsx)("span",{className:H.codeLineContent,children:a})]}):a,(0,c.jsx)("br",{})]},Object.getOwnPropertyDescriptors?Object.defineProperties(i,Object.getOwnPropertyDescriptors(o)):(function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t})(Object(o)).forEach(function(e){Object.defineProperty(i,e,Object.getOwnPropertyDescriptor(o,e))}),i))}var J=t(936);function K(e){var n,t;return(0,c.jsx)("svg",(n=function(e){for(var n=1;n{(0,J.A)(e),r(!0),s.current=window.setTimeout(()=>{r(!1)},1e3)},[e]);return(0,d.useEffect)(()=>()=>window.clearTimeout(s.current),[]),(0,c.jsx)("button",{type:"button","aria-label":t?(0,u.T)({id:"theme.CodeBlock.copied",message:"Copied",description:"The copied button label on code blocks"}):(0,u.T)({id:"theme.CodeBlock.copyButtonAriaLabel",message:"Copy code to clipboard",description:"The ARIA label for copy code blocks button"}),title:(0,u.T)({id:"theme.CodeBlock.copy",message:"Copy",description:"The copy button label on code blocks"}),className:(0,l.A)("clean-btn",n,Z.copyButton,t&&Z.copyButtonCopied),onClick:i,children:(0,c.jsxs)("span",{className:Z.copyButtonIcons,"aria-hidden":"true",children:[(0,c.jsx)(K,{className:Z.copyButtonIcon}),(0,c.jsx)(Q,{className:Z.copyButtonSuccessIcon})]})})}function en(e){var n,t;return(0,c.jsx)("svg",(n=function(e){for(var n=1;ne.startsWith("language-"));return null==n?void 0:n.replace(/language-/,"")}(n))&&void 0!==o?o:j)?void 0:a.toLowerCase(),f=g(),m=function(){let[e,n]=(0,d.useState)(!1),[t,r]=(0,d.useState)(!1),s=(0,d.useRef)(null),i=(0,d.useCallback)(()=>{let t=s.current.querySelector("code");e?t.removeAttribute("style"):(t.style.whiteSpace="pre-wrap",t.style.overflowWrap="anywhere"),n(e=>!e)},[s,e]),o=(0,d.useCallback)(()=>{let{scrollWidth:e,clientWidth:n}=s.current;r(e>n||s.current.querySelector("code").hasAttribute("style"))},[s]);return!function(e,n){let[t,r]=(0,d.useState)(),s=(0,d.useCallback)(()=>{var n;r(null===(n=e.current)||void 0===n?void 0:n.closest("[role=tabpanel][hidden]"))},[e,r]);(0,d.useEffect)(()=>{s()},[s]),function(e,n,t=q){let r=(0,G._q)(n),s=(0,G.Be)(t);(0,d.useEffect)(()=>{let n=new MutationObserver(r);return e&&n.observe(e,s),()=>n.disconnect()},[e,r,s])}(t,e=>{e.forEach(e=>{"attributes"===e.type&&"hidden"===e.attributeName&&(n(),s())})},{attributes:!0,characterData:!1,childList:!1,subtree:!1})}(s,o),(0,d.useEffect)(()=>{o()},[e,o]),(0,d.useEffect)(()=>(window.addEventListener("resize",o,{passive:!0}),()=>{window.removeEventListener("resize",o)}),[o]),{codeBlockRef:s,isEnabled:e,isCodeScrollable:t,toggle:i}}(),y=(null!==(u=null==t?void 0:null===(h=t.match(B))||void 0===h?void 0:h.groups.title)&&void 0!==u?u:"")||r,{lineClassNames:v,code:O}=function(e,n){let t=e.replace(/\n$/,""),{language:r,magicComments:s,metastring:i}=n;if(i&&L.test(i)){let e=i.match(L).groups.range;if(0===s.length)throw Error(`A highlight range has been given in code block's metastring (\`\`\` ${i}), but no magic comment config is available. Docusaurus applies the first magic comment entry's className for metastring ranges.`);let n=s[0].className;return{lineClassNames:Object.fromEntries(I()(e).filter(e=>e>0).map(e=>[e-1,[n]])),code:t}}if(void 0===r)return{lineClassNames:{},code:t};let o=function(e,n){switch(e){case"js":case"javascript":case"ts":case"typescript":return V(["js","jsBlock"],n);case"jsx":case"tsx":return V(["js","jsBlock","jsx"],n);case"html":return V(["js","jsBlock","html"],n);case"python":case"py":case"bash":return V(["bash"],n);case"markdown":case"md":return V(["html","jsx","bash"],n);case"tex":case"latex":case"matlab":return V(["tex"],n);case"lua":case"haskell":case"sql":return V(["lua"],n);case"wasm":return V(["wasm"],n);case"vb":case"vba":case"visual-basic":return V(["vb","rem"],n);case"vbnet":return V(["vbnet","rem"],n);case"batch":return V(["rem"],n);case"basic":return V(["rem","f90"],n);case"fsharp":return V(["js","ml"],n);case"ocaml":case"sml":return V(["ml"],n);case"fortran":return V(["f90"],n);case"cobol":return V(["cobol"],n);default:return V(M,n)}}(r,s),c=t.split("\n"),d=Object.fromEntries(s.map(e=>[e.className,{start:0,range:""}])),l=Object.fromEntries(s.filter(e=>e.line).map(({className:e,line:n})=>[n,e])),a=Object.fromEntries(s.filter(e=>e.block).map(({className:e,block:n})=>[n.start,e])),h=Object.fromEntries(s.filter(e=>e.block).map(({className:e,block:n})=>[n.end,e]));for(let e=0;evoid 0!==e);l[t]?d[l[t]].range+=`${e},`:a[t]?d[a[t]].start=e:h[t]&&(d[h[t]].range+=`${d[h[t]].start}-${e-1},`),c.splice(e,1)}t=c.join("\n");let u={};return Object.entries(d).forEach(([e,{range:n}])=>{I()(n).forEach(n=>{var t;null!==(t=u[n])&&void 0!==t||(u[n]=[]),u[n].push(e)})}),{lineClassNames:u,code:t}}(e,{metastring:t,language:x,magicComments:p}),w=null!=s?s:!!(null==t?void 0:t.includes("showLineNumbers"));return(0,c.jsxs)(F,{as:"div",className:(0,l.A)(n,x&&!n.includes(`language-${x}`)&&`language-${x}`),children:[y&&(0,c.jsx)("div",{className:$.codeBlockTitle,children:y}),(0,c.jsxs)("div",{className:$.codeBlockContent,children:[(0,c.jsx)(z.f4,{theme:f,code:O,language:null!=x?x:"text",children:({className:e,style:n,tokens:t,getLineProps:r,getTokenProps:s})=>(0,c.jsx)("pre",{tabIndex:0,ref:m.codeBlockRef,className:(0,l.A)(e,$.codeBlock,"thin-scrollbar"),style:n,children:(0,c.jsx)("code",{className:(0,l.A)($.codeBlockLines,w&&$.codeBlockLinesWithNumbering),children:t.map((e,n)=>(0,c.jsx)(Y,{line:e,getLineProps:r,getTokenProps:s,classNames:v[n],showLineNumbers:w},n))})})}),(0,c.jsxs)("div",{className:$.buttonGroup,children:[(m.isEnabled||m.isCodeScrollable)&&(0,c.jsx)(er,{className:$.codeButton,onClick:()=>m.toggle(),isEnabled:m.isEnabled}),(0,c.jsx)(ee,{className:$.codeButton,code:O})]})]})]})}function ei(e){for(var n=1;n=0||(s[t]=e[t]);return s}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0)&&Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}(e,["children"]);let i=(0,a.A)(),o=d.Children.toArray(r).some(e=>(0,d.isValidElement)(e))?r:Array.isArray(r)?r.join(""):r,l="string"==typeof o?es:W;return(0,c.jsx)(l,(n=function(e){for(var n=1;n{t.d(n,{Ay:()=>c,RM:()=>i});var r=t(62540),s=t(43023);let i=[{value:"Tags File",id:"tags-file",level:2},{value:"Types",id:"tags-file-types",level:3},{value:"Example",id:"tags-file-example",level:3}];function o(e){let n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,s.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h2,{id:"tags-file",children:"Tags File"}),"\n",(0,r.jsxs)(n.p,{children:["Use the ",(0,r.jsxs)(n.a,{href:"#tags",children:[(0,r.jsx)(n.code,{children:"tags"})," plugin option"]})," to configure the path of a YAML tags file."]}),"\n",(0,r.jsxs)(n.p,{children:["By convention, the plugin will look for a ",(0,r.jsx)(n.code,{children:"tags.yml"})," file at the root of your content folder(s)."]}),"\n",(0,r.jsxs)(n.p,{children:["This file can contain a list of predefined tags. You can reference these tags by their keys in Markdown files thanks to the ",(0,r.jsxs)(n.a,{href:"#markdown-front-matter",children:[(0,r.jsx)(n.code,{children:"tags"})," front matter"]}),"."]}),"\n",(0,r.jsx)(n.admonition,{title:"Keeping tags consistent",type:"tip",children:(0,r.jsxs)(n.p,{children:["Using a tags file, you can ensure that your tags usage is consistent across your plugin content set. Use the ",(0,r.jsx)(n.a,{href:"#onInlineTags",children:(0,r.jsx)(n.code,{children:"onInlineTags: 'throw'"})})," plugin option to enforce this consistency and prevent usage of inline tags declared on the fly."]})}),"\n",(0,r.jsx)(n.h3,{id:"tags-file-types",children:"Types"}),"\n",(0,r.jsx)(n.p,{children:"The YAML content of the provided tags file should respect the following shape:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"type Tag = {\n label?: string; // Tag display label\n permalink?: string; // Tag URL pathname segment\n description?: string; // Tag description displayed in the tag page\n};\n\ntype TagsFileInput = Record | null>;\n"})}),"\n",(0,r.jsx)(n.h3,{id:"tags-file-example",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yml",metastring:'title="tags.yml"',children:"releases:\n label: 'Product releases'\n permalink: '/product-releases'\n description: 'Content related to product releases.'\n\n# A partial tag definition is also valid\nannouncements:\n label: 'Announcements'\n\n# An empty tag definition is also valid\n# Other attributes will be inferred from the key\nemptyTag:\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",metastring:'title="content.md"',children:"---\ntags: [releases, announcements, emptyTag]\n---\n\n# Title\n\nContent\n"})})]})}function c(e={}){let{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}},14243:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>j,contentTitle:()=>u,default:()=>f,frontMatter:()=>h,metadata:()=>r,toc:()=>p});let r=JSON.parse('{"id":"api/plugins/plugin-content-docs","title":"\u{1F4E6} plugin-content-docs","description":"Provides the Docs functionality and is the default docs plugin for Docusaurus.","source":"@site/docs/api/plugins/plugin-content-docs.mdx","sourceDirName":"api/plugins","slug":"/api/plugins/@docusaurus/plugin-content-docs","permalink":"/docs/api/plugins/@docusaurus/plugin-content-docs","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/api/plugins/plugin-content-docs.mdx","tags":[],"version":"current","lastUpdatedBy":"Flix","lastUpdatedAt":1727958179000,"sidebarPosition":1,"frontMatter":{"sidebar_position":1,"slug":"/api/plugins/@docusaurus/plugin-content-docs"},"sidebar":"api","previous":{"title":"Plugins overview","permalink":"/docs/api/plugins"},"next":{"title":"\u{1F4E6} plugin-content-blog","permalink":"/docs/api/plugins/@docusaurus/plugin-content-blog"}}');var s=t(62540),i=t(43023),o=t(27446),c=t(15995),d=t(59273),l=t(59433),a=t(24583);let h={sidebar_position:1,slug:"/api/plugins/@docusaurus/plugin-content-docs"},u="\u{1F4E6} plugin-content-docs",j={},p=[{value:"Installation",id:"installation",level:2},{value:"Configuration",id:"configuration",level:2},{value:"Types",id:"types",level:3},{value:"EditUrlFunction
",id:"EditUrlFunction",level:4},{value:"PrefixParser
",id:"PrefixParser",level:4},{value:"SidebarGenerator
",id:"SidebarGenerator",level:4},{value:"VersionsConfig
",id:"VersionsConfig",level:4},{value:"Example configuration",id:"ex-config",level:3},{value:"Markdown front matter",id:"markdown-front-matter",level:2},...a.RM,{value:"i18n",id:"i18n",level:2},{value:"Translation files location",id:"translation-files-location",level:3},{value:"Example file-system structure",id:"example-file-system-structure",level:3}];function x(e){let n={a:"a",admonition:"admonition",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"-plugin-content-docs",children:"\u{1F4E6} plugin-content-docs"})}),"\n","\n",(0,s.jsxs)(n.p,{children:["Provides the ",(0,s.jsx)(n.a,{href:"/docs/docs-introduction",children:"Docs"})," functionality and is the default docs plugin for Docusaurus."]}),"\n",(0,s.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,s.jsxs)(o.A,{groupId:"npm2yarn",children:[(0,s.jsx)(c.A,{value:"npm",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"npm install --save @docusaurus/plugin-content-docs\n"})})}),(0,s.jsx)(c.A,{value:"yarn",label:"Yarn",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"yarn add @docusaurus/plugin-content-docs\n"})})}),(0,s.jsx)(c.A,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"pnpm add @docusaurus/plugin-content-docs\n"})})})]}),"\n",(0,s.jsxs)(n.admonition,{type:"tip",children:[(0,s.jsxs)(n.p,{children:["If you use the preset ",(0,s.jsx)(n.code,{children:"@docusaurus/preset-classic"}),", you don't need to install this plugin as a dependency."]}),(0,s.jsxs)(n.p,{children:["You can configure this plugin through the ",(0,s.jsx)(n.a,{href:"/docs/using-plugins#docusauruspreset-classic",children:"preset options"}),"."]})]}),"\n",(0,s.jsx)(n.h2,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(d.A,{children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"path"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'docs'"})}),(0,s.jsx)(n.td,{children:"Path to the docs content directory on the file system, relative to site directory."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"editUrl"})}),(0,s.jsx)(n.td,{children:(0,s.jsxs)("code",{children:["string | ",(0,s.jsx)(n.a,{href:"#EditUrlFunction",children:"EditUrlFunction"})]})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["Base URL to edit your site. The final URL is computed by ",(0,s.jsx)(n.code,{children:"editUrl + relativeDocPath"}),". Using a function allows more nuanced control for each file. Omitting this variable entirely will disable edit links."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"editLocalizedFiles"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsxs)(n.td,{children:["The edit URL will target the localized file, instead of the original unlocalized file. Ignored when ",(0,s.jsx)(n.code,{children:"editUrl"})," is a function."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"editCurrentVersion"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsxs)(n.td,{children:["The edit URL will always target the current version doc instead of older versions. Ignored when ",(0,s.jsx)(n.code,{children:"editUrl"})," is a function."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"routeBasePath"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'docs'"})}),(0,s.jsxs)(n.td,{children:["URL route for the docs section of your site. ",(0,s.jsx)(n.strong,{children:"DO NOT"})," include a trailing slash. Use ",(0,s.jsx)(n.code,{children:"/"})," for shipping docs without base path."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"tagsBasePath"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'tags'"})}),(0,s.jsxs)(n.td,{children:["URL route for the tags list page of your site. It is prepended to the ",(0,s.jsx)(n.code,{children:"routeBasePath"}),"."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"include"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"['**/*.{md,mdx}']"})}),(0,s.jsx)(n.td,{children:"Array of glob patterns matching Markdown files to be built, relative to the content path."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"exclude"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.em,{children:"See example configuration"})}),(0,s.jsxs)(n.td,{children:["Array of glob patterns matching Markdown files to be excluded. Serves as refinement based on the ",(0,s.jsx)(n.code,{children:"include"})," option."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"sidebarPath"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"false | string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["Path to sidebar configuration. Use ",(0,s.jsx)(n.code,{children:"false"})," to disable sidebars, or ",(0,s.jsx)(n.code,{children:"undefined"})," to create a fully autogenerated sidebar."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"sidebarCollapsible"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"true"})}),(0,s.jsxs)(n.td,{children:["Whether sidebar categories are collapsible by default. See also ",(0,s.jsx)(n.a,{href:"/docs/sidebar/items#collapsible-categories",children:"Collapsible categories"})]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"sidebarCollapsed"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"true"})}),(0,s.jsxs)(n.td,{children:["Whether sidebar categories are collapsed by default. See also ",(0,s.jsx)(n.a,{href:"/docs/sidebar/items#expanded-categories-by-default",children:"Expanded categories by default"})]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"sidebarItemsGenerator"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:(0,s.jsx)(n.a,{href:"#SidebarGenerator",children:"SidebarGenerator"})})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.em,{children:"Omitted"})}),(0,s.jsxs)(n.td,{children:["Function used to replace the sidebar items of type ",(0,s.jsx)(n.code,{children:"'autogenerated'"})," with real sidebar items (docs, categories, links...). See also ",(0,s.jsx)(n.a,{href:"/docs/sidebar/autogenerated#customize-the-sidebar-items-generator",children:"Customize the sidebar items generator"})]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"numberPrefixParser"})}),(0,s.jsx)(n.td,{children:(0,s.jsxs)("code",{children:["boolean | ",(0,s.jsx)(n.a,{href:"#PrefixParser",children:"PrefixParser"})]})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.em,{children:"Omitted"})}),(0,s.jsxs)(n.td,{children:["Custom parsing logic to extract number prefixes from file names. Use ",(0,s.jsx)(n.code,{children:"false"})," to disable this behavior and leave the docs untouched, and ",(0,s.jsx)(n.code,{children:"true"})," to use the default parser. See also ",(0,s.jsx)(n.a,{href:"/docs/sidebar/autogenerated#using-number-prefixes",children:"Using number prefixes"})]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docsRootComponent"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'@theme/DocsRoot'"})}),(0,s.jsx)(n.td,{children:"Parent component of all the docs plugin pages (including all versions). Stays mounted when navigation between docs pages and versions."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docVersionRootComponent"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'@theme/DocVersionLayout'"})}),(0,s.jsx)(n.td,{children:"Parent component of all docs pages of an individual version (doc pages with sidebars, tags pages). Stays mounted when navigation between pages of that specific version."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docRootComponent"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'@theme/DocRoot'"})}),(0,s.jsx)(n.td,{children:"Parent component of all doc pages with sidebars (regular docs pages, category generated index pages). Stays mounted when navigation between such pages."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docItemComponent"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'@theme/DocItem'"})}),(0,s.jsx)(n.td,{children:"Main doc container, with TOC, pagination, etc."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docTagsListComponent"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'@theme/DocTagsListPage'"})}),(0,s.jsx)(n.td,{children:"Root component of the tags list page"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docTagDocListComponent"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'@theme/DocTagDocListPage'"})}),(0,s.jsx)(n.td,{children:'Root component of the "docs containing tag X" page.'})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docCategoryGeneratedIndexComponent"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'@theme/DocCategoryGeneratedIndexPage'"})}),(0,s.jsx)(n.td,{children:"Root component of the generated category index page."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"remarkPlugins"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"any[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsx)(n.td,{children:"Remark plugins passed to MDX."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"rehypePlugins"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"any[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsx)(n.td,{children:"Rehype plugins passed to MDX."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"rehypePlugins"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"any[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsx)(n.td,{children:"Recma plugins passed to MDX."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"beforeDefaultRemarkPlugins"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"any[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsx)(n.td,{children:"Custom Remark plugins passed to MDX before the default Docusaurus Remark plugins."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"beforeDefaultRehypePlugins"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"any[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsx)(n.td,{children:"Custom Rehype plugins passed to MDX before the default Docusaurus Rehype plugins."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"showLastUpdateAuthor"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsx)(n.td,{children:"Whether to display the author who last updated the doc."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"showLastUpdateTime"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsxs)(n.td,{children:["Whether to display the last date the doc was updated. This requires access to git history during the build, so will not work correctly with shallow clones (a common default for CI systems). With GitHub ",(0,s.jsx)(n.code,{children:"actions/checkout"}),", use",(0,s.jsx)(n.code,{children:"fetch-depth: 0"}),"."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"breadcrumbs"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"true"})}),(0,s.jsx)(n.td,{children:"Enable or disable the breadcrumbs on doc pages."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"disableVersioning"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsxs)(n.td,{children:["Explicitly disable versioning even when multiple versions exist. This will make the site only include the current version. Will error if ",(0,s.jsx)(n.code,{children:"includeCurrentVersion: false"})," and ",(0,s.jsx)(n.code,{children:"disableVersioning: true"}),"."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"includeCurrentVersion"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"true"})}),(0,s.jsx)(n.td,{children:"Include the current version of your docs."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"lastVersion"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsxs)(n.td,{children:["First version in ",(0,s.jsx)(n.code,{children:"versions.json"})]}),(0,s.jsx)(n.td,{children:"The version navigated to in priority and displayed by default for docs navbar items."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"onlyIncludeVersions"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string[]"})}),(0,s.jsx)(n.td,{children:"All versions available"}),(0,s.jsx)(n.td,{children:"Only include a subset of all available versions."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"versions"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:(0,s.jsx)(n.a,{href:"#VersionsConfig",children:"VersionsConfig"})})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"{}"})}),(0,s.jsx)(n.td,{children:"Independent customization of each version's properties."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"tags"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string | false | null | undefined"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"tags.yml"})}),(0,s.jsx)(n.td,{children:"Path to a YAML file listing pre-defined tags. Relative to the docs version content directories."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"onInlineTags"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'ignore' | 'log' | 'warn' | 'throw'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"warn"})}),(0,s.jsxs)(n.td,{children:["The plugin behavior when docs contain inline tags (not appearing in the list of pre-defined tags, usually ",(0,s.jsx)(n.code,{children:"docs/tags.yml"}),")."]})]})]})]})}),"\n",(0,s.jsx)(n.h3,{id:"types",children:"Types"}),"\n",(0,s.jsx)(n.h4,{id:"EditUrlFunction",children:(0,s.jsx)(n.code,{children:"EditUrlFunction"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"type EditUrlFunction = (params: {\n version: string;\n versionDocsDirPath: string;\n docPath: string;\n permalink: string;\n locale: string;\n}) => string | undefined;\n"})}),"\n",(0,s.jsx)(n.h4,{id:"PrefixParser",children:(0,s.jsx)(n.code,{children:"PrefixParser"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"type PrefixParser = (filename: string) => {\n filename: string;\n numberPrefix?: number;\n};\n"})}),"\n",(0,s.jsx)(n.h4,{id:"SidebarGenerator",children:(0,s.jsx)(n.code,{children:"SidebarGenerator"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"type SidebarGenerator = (generatorArgs: {\n /** The sidebar item with type \"autogenerated\" to be transformed. */\n item: {type: 'autogenerated'; dirName: string};\n /** Useful metadata for the version this sidebar belongs to. */\n version: {contentPath: string; versionName: string};\n /** All the docs of that version (unfiltered). */\n docs: {\n id: string;\n title: string;\n frontMatter: DocFrontMatter & Record;\n source: string;\n sourceDirName: string;\n sidebarPosition?: number | undefined;\n }[];\n /** Number prefix parser configured for this plugin. */\n numberPrefixParser: PrefixParser;\n /** The default category index matcher which you can override. */\n isCategoryIndex: CategoryIndexMatcher;\n /**\n * key is the path relative to the doc content directory, value is the\n * category metadata file's content.\n */\n categoriesMetadata: {[filePath: string]: CategoryMetadata};\n /**\n * Useful to re-use/enhance the default sidebar generation logic from\n * Docusaurus.\n */\n defaultSidebarItemsGenerator: SidebarGenerator;\n // Returns an array of sidebar items \u2014 same as what you can declare in\n // sidebars.js, except for shorthands. See https://docusaurus.io/docs/sidebar/items\n}) => Promise;\n\ntype CategoryIndexMatcher = (param: {\n /** The file name, without extension */\n fileName: string;\n /**\n * The list of directories, from lowest level to highest.\n * If there's no dir name, directories is ['.']\n */\n directories: string[];\n /** The extension, with a leading dot */\n extension: string;\n}) => boolean;\n"})}),"\n",(0,s.jsx)(n.h4,{id:"VersionsConfig",children:(0,s.jsx)(n.code,{children:"VersionsConfig"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"type VersionConfig = {\n /**\n * The base path of the version, will be appended to `baseUrl` +\n * `routeBasePath`.\n */\n path?: string;\n /** The label of the version to be used in badges, dropdowns, etc. */\n label?: string;\n /** The banner to show at the top of a doc of that version. */\n banner?: 'none' | 'unreleased' | 'unmaintained';\n /** Show a badge with the version label at the top of each doc. */\n badge?: boolean;\n /** Prevents search engines from indexing this version */\n noIndex?: boolean;\n /** Add a custom class name to the element of each doc */\n className?: string;\n};\n\ntype VersionsConfig = {[versionName: string]: VersionConfig};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"ex-config",children:"Example configuration"}),"\n",(0,s.jsx)(n.p,{children:"You can configure this plugin through preset options or plugin options."}),"\n",(0,s.jsx)(n.admonition,{type:"tip",children:(0,s.jsx)(n.p,{children:"Most Docusaurus users configure this plugin through the preset options."})}),"\n","\n",(0,s.jsx)(l.A,{pluginName:"@docusaurus/plugin-content-docs",presetOptionName:"docs",code:"{\n path: 'docs',\n breadcrumbs: true,\n // Simple use-case: string editUrl\n // editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',\n // Advanced use-case: functional editUrl\n editUrl: ({versionDocsDirPath, docPath}) =>\n `https://github.com/facebook/docusaurus/edit/main/website/${versionDocsDirPath}/${docPath}`,\n editLocalizedFiles: false,\n editCurrentVersion: false,\n routeBasePath: 'docs',\n include: ['**/*.md', '**/*.mdx'],\n exclude: [\n '**/_*.{js,jsx,ts,tsx,md,mdx}',\n '**/_*/**',\n '**/*.test.{js,jsx,ts,tsx}',\n '**/__tests__/**',\n ],\n sidebarPath: 'sidebars.js',\n async sidebarItemsGenerator({\n defaultSidebarItemsGenerator,\n numberPrefixParser,\n item,\n version,\n docs,\n isCategoryIndex,\n }) {\n // Use the provided data to generate a custom sidebar slice\n return [\n {type: 'doc', id: 'intro'},\n {\n type: 'category',\n label: 'Tutorials',\n items: [\n {type: 'doc', id: 'tutorial1'},\n {type: 'doc', id: 'tutorial2'},\n ],\n },\n ];\n },\n numberPrefixParser(filename) {\n // Implement your own logic to extract a potential number prefix\n const numberPrefix = findNumberPrefix(filename);\n // Prefix found: return it with the cleaned filename\n if (numberPrefix) {\n return {\n numberPrefix,\n filename: filename.replace(prefix, ''),\n };\n }\n // No number prefix found\n return {numberPrefix: undefined, filename};\n },\n docsRootComponent: '@theme/DocsRoot',\n docVersionRootComponent: '@theme/DocVersionRoot',\n docRootComponent: '@theme/DocRoot',\n docItemComponent: '@theme/DocItem',\n remarkPlugins: [require('./my-remark-plugin')],\n rehypePlugins: [],\n beforeDefaultRemarkPlugins: [],\n beforeDefaultRehypePlugins: [],\n showLastUpdateAuthor: false,\n showLastUpdateTime: false,\n disableVersioning: false,\n includeCurrentVersion: true,\n lastVersion: undefined,\n versions: {\n current: {\n label: 'Android SDK v2.0.0 (WIP)',\n path: 'android-2.0.0',\n banner: 'none',\n },\n '1.0.0': {\n label: 'Android SDK v1.0.0',\n path: 'android-1.0.0',\n banner: 'unmaintained',\n },\n },\n onlyIncludeVersions: ['current', '1.0.0', '2.0.0'],\n}"}),"\n",(0,s.jsx)(n.h2,{id:"markdown-front-matter",children:"Markdown front matter"}),"\n",(0,s.jsxs)(n.p,{children:["Markdown documents can use the following Markdown ",(0,s.jsx)(n.a,{href:"/docs/markdown-features#front-matter",children:"front matter"})," metadata fields, enclosed by a line ",(0,s.jsx)(n.code,{children:"---"})," on either side."]}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(d.A,{children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"id"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:"file path (including folders, without the extension)"}),(0,s.jsx)(n.td,{children:"A unique document ID."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"title"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsxs)(n.td,{children:["Markdown title or ",(0,s.jsx)(n.code,{children:"id"})]}),(0,s.jsx)(n.td,{children:"The text title of your document. Used for the page metadata and as a fallback value in multiple places (sidebar, next/previous buttons...). Automatically added at the top of your doc if it does not contain any Markdown title."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"pagination_label"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsxs)(n.td,{children:[(0,s.jsx)(n.code,{children:"sidebar_label"})," or ",(0,s.jsx)(n.code,{children:"title"})]}),(0,s.jsx)(n.td,{children:"The text used in the document next/previous buttons for this document."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"sidebar_label"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"title"})}),(0,s.jsx)(n.td,{children:"The text shown in the document sidebar for this document."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"sidebar_position"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"number"})}),(0,s.jsx)(n.td,{children:"Default ordering"}),(0,s.jsxs)(n.td,{children:["Controls the position of a doc inside the generated sidebar slice when using ",(0,s.jsx)(n.code,{children:"autogenerated"})," sidebar items. See also ",(0,s.jsx)(n.a,{href:"/docs/sidebar/autogenerated#autogenerated-sidebar-metadata",children:"Autogenerated sidebar metadata"}),"."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"sidebar_class_name"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:"Gives the corresponding sidebar label a special class name when using autogenerated sidebars."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"sidebar_custom_props"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"object"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["Assign ",(0,s.jsx)(n.a,{href:"/docs/sidebar#passing-custom-props",children:"custom props"})," to the sidebar item referencing this doc"]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"displayed_sidebar"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["Force the display of a given sidebar when browsing the current document. Read the ",(0,s.jsx)(n.a,{href:"/docs/sidebar/multiple-sidebars",children:"multiple sidebars guide"})," for details."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"hide_title"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsx)(n.td,{children:"Whether to hide the title at the top of the doc. It only hides a title declared through the front matter, and have no effect on a Markdown title at the top of your document."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"hide_table_of_contents"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsx)(n.td,{children:"Whether to hide the table of contents to the right."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"toc_min_heading_level"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"number"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"2"})}),(0,s.jsx)(n.td,{children:"The minimum heading level shown in the table of contents. Must be between 2 and 6 and lower or equal to the max value."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"toc_max_heading_level"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"number"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"3"})}),(0,s.jsx)(n.td,{children:"The max heading level shown in the table of contents. Must be between 2 and 6."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"pagination_next"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"string | null"})}),(0,s.jsx)(n.td,{children:"Next doc in the sidebar"}),(0,s.jsxs)(n.td,{children:['The ID of the documentation you want the "Next" pagination to link to. Use ',(0,s.jsx)(n.code,{children:"null"}),' to disable showing "Next" for this page.']})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"pagination_prev"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"string | null"})}),(0,s.jsx)(n.td,{children:"Previous doc in the sidebar"}),(0,s.jsxs)(n.td,{children:['The ID of the documentation you want the "Previous" pagination to link to. Use ',(0,s.jsx)(n.code,{children:"null"}),' to disable showing "Previous" for this page.']})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"parse_number_prefixes"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsxs)(n.td,{children:[(0,s.jsx)(n.code,{children:"numberPrefixParser"})," plugin option"]}),(0,s.jsxs)(n.td,{children:["Whether number prefix parsing is disabled on this doc. See also ",(0,s.jsx)(n.a,{href:"/docs/sidebar/autogenerated#using-number-prefixes",children:"Using number prefixes"}),"."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"custom_edit_url"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"string | null"})}),(0,s.jsxs)(n.td,{children:["Computed using the ",(0,s.jsx)(n.code,{children:"editUrl"})," plugin option"]}),(0,s.jsxs)(n.td,{children:["The URL for editing this document. Use ",(0,s.jsx)(n.code,{children:"null"}),' to disable showing "Edit this page" for this page.']})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"keywords"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:"Keywords meta tag for the document page, for search engines."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"description"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:"The first line of Markdown content"}),(0,s.jsxs)(n.td,{children:["The description of your document, which will become the ",(0,s.jsx)(n.code,{children:''})," and ",(0,s.jsx)(n.code,{children:''})," in ",(0,s.jsx)(n.code,{children:""}),", used by search engines."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"image"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["Cover or thumbnail image that will be used as the ",(0,s.jsx)(n.code,{children:''})," in the ",(0,s.jsx)(n.code,{children:""}),", enhancing link previews on social media and messaging platforms."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"slug"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:"File path"}),(0,s.jsxs)(n.td,{children:["Allows to customize the document URL (",(0,s.jsx)(n.code,{children:"//"}),"). Support multiple patterns: ",(0,s.jsx)(n.code,{children:"slug: my-doc"}),", ",(0,s.jsx)(n.code,{children:"slug: /my/path/myDoc"}),", ",(0,s.jsx)(n.code,{children:"slug: /"}),"."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"tags"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"Tag[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["A list of strings or objects of two string fields ",(0,s.jsx)(n.code,{children:"label"})," and ",(0,s.jsx)(n.code,{children:"permalink"})," to tag to your docs. Strings can be a reference to keys of a ",(0,s.jsx)(n.a,{href:"#tags-file",children:"tags file"})," (usually ",(0,s.jsx)(n.code,{children:"tags.yml"}),")"]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"draft"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsx)(n.td,{children:"Draft documents will only be available during development."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"unlisted"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsx)(n.td,{children:'Unlisted documents will be available in both development and production. They will be "hidden" in production, not indexed, excluded from sitemaps, and can only be accessed by users having a direct link.'})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"last_update"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"FrontMatterLastUpdate"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["Allows overriding the last update author/date. Date can be any ",(0,s.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse",children:"parsable date string"}),"."]})]})]})]})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"type FrontMatterLastUpdate = {date?: string; author?: string};\n\ntype Tag = string | {label: string; permalink: string};\n"})}),"\n",(0,s.jsx)(n.p,{children:"Example:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-md",children:"---\nid: doc-markdown\ntitle: Docs Markdown Features\nhide_title: false\nhide_table_of_contents: false\nsidebar_label: Markdown\nsidebar_position: 3\npagination_label: Markdown features\ncustom_edit_url: https://github.com/facebook/docusaurus/edit/main/docs/api-doc-markdown.md\ndescription: How do I find you when I cannot solve this problem\nkeywords:\n - docs\n - docusaurus\ntags: [docusaurus]\nimage: https://i.imgur.com/mErPwqL.png\nslug: /myDoc\nlast_update:\n date: 1/1/2000\n author: custom author name\n---\n\n# Markdown Features\n\nMy Document Markdown content\n"})}),"\n","\n",(0,s.jsx)(a.Ay,{}),"\n",(0,s.jsx)(n.h2,{id:"i18n",children:"i18n"}),"\n",(0,s.jsxs)(n.p,{children:["Read the ",(0,s.jsx)(n.a,{href:"/docs/i18n/introduction",children:"i18n introduction"})," first."]}),"\n",(0,s.jsx)(n.h3,{id:"translation-files-location",children:"Translation files location"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Base path"}),": ",(0,s.jsx)(n.code,{children:"website/i18n/[locale]/docusaurus-plugin-content-docs"})]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Multi-instance path"}),": ",(0,s.jsx)(n.code,{children:"website/i18n/[locale]/docusaurus-plugin-content-docs-[pluginId]"})]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"JSON files"}),": extracted with ",(0,s.jsx)(n.a,{href:"/docs/cli#docusaurus-write-translations-sitedir",children:(0,s.jsx)(n.code,{children:"docusaurus write-translations"})})]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Markdown files"}),": ",(0,s.jsx)(n.code,{children:"website/i18n/[locale]/docusaurus-plugin-content-docs/[versionName]"})]}),"\n"]}),"\n",(0,s.jsx)(n.h3,{id:"example-file-system-structure",children:"Example file-system structure"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"website/i18n/[locale]/docusaurus-plugin-content-docs\n\u2502\n\u2502 # translations for website/docs\n\u251C\u2500\u2500 current\n\u2502 \u251C\u2500\u2500 api\n\u2502 \u2502 \u2514\u2500\u2500 config.md\n\u2502 \u2514\u2500\u2500 getting-started.md\n\u251C\u2500\u2500 current.json\n\u2502\n\u2502 # translations for website/versioned_docs/version-1.0.0\n\u251C\u2500\u2500 version-1.0.0\n\u2502 \u251C\u2500\u2500 api\n\u2502 \u2502 \u2514\u2500\u2500 config.md\n\u2502 \u2514\u2500\u2500 getting-started.md\n\u2514\u2500\u2500 version-1.0.0.json\n"})})]})}function f(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(x,{...e})}):x(e)}}}]);
\ No newline at end of file
diff --git a/assets/js/0b6cd89a.d4d70598.js b/assets/js/0b6cd89a.d4d70598.js
deleted file mode 100644
index d200adefd6..0000000000
--- a/assets/js/0b6cd89a.d4d70598.js
+++ /dev/null
@@ -1,22 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[41262],{15995:(e,n,t)=>{t.d(n,{A:()=>i});var r=t(62540);t(63696);var s=t(11750);function i({children:e,hidden:n,className:t}){return(0,r.jsx)("div",{role:"tabpanel",className:(0,s.A)("tabItem_pnkT",t),hidden:n,children:e})}},27446:(e,n,t)=>{t.d(n,{A:()=>y});var r=t(62540),s=t(63696),i=t(11750),o=t(7846),c=t(49519),d=t(96439),l=t(19739),a=t(66904),h=t(79244);function u(e){var n,t;return null!==(t=null===(n=s.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||(0,s.isValidElement)(e)&&function(e){let{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))||void 0===n?void 0:n.filter(Boolean))&&void 0!==t?t:[]}function j({value:e,tabValues:n}){return n.some(n=>n.value===e)}var p=t(10709);function x(e){for(var n=1;n{let n=e.currentTarget,r=c[d.indexOf(n)].value;r!==t&&(l(n),s(r))},h=e=>{var n,t;let r=null;switch(e.key){case"Enter":a(e);break;case"ArrowRight":{let t=d.indexOf(e.currentTarget)+1;r=null!==(n=d[t])&&void 0!==n?n:d[0];break}case"ArrowLeft":{let n=d.indexOf(e.currentTarget)-1;r=null!==(t=d[n])&&void 0!==t?t:d[d.length-1]}}null==r||r.focus()};return(0,r.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.A)("tabs",{"tabs--block":n},e),children:c.map(({value:e,label:n,attributes:s})=>(0,r.jsx)("li",f(x({role:"tab",tabIndex:t===e?0:-1,"aria-selected":t===e,ref:e=>d.push(e),onKeyDown:h,onClick:a},s),{className:(0,i.A)("tabs__item","tabItem_AQgk",null==s?void 0:s.className,{"tabs__item--active":t===e}),children:null!=n?n:e}),e))})}function g({lazy:e,children:n,selectedValue:t}){let o=(Array.isArray(n)?n:[n]).filter(Boolean);if(e){let e=o.find(e=>e.props.value===t);return e?(0,s.cloneElement)(e,{className:(0,i.A)("margin-top--md",e.props.className)}):null}return(0,r.jsx)("div",{className:"margin-top--md",children:o.map((e,n)=>(0,s.cloneElement)(e,{key:n,hidden:e.props.value!==t}))})}function m(e){let n=function(e){let{defaultValue:n,queryString:t=!1,groupId:r}=e,i=function(e){let{values:n,children:t}=e;return(0,s.useMemo)(()=>{let e=null!=n?n:u(t).map(({props:{value:e,label:n,attributes:t,default:r}})=>({value:e,label:n,attributes:t,default:r}));return!function(e){let n=(0,a.XI)(e,(e,n)=>e.value===n.value);if(n.length>0)throw Error(`Docusaurus error: Duplicate values "${n.map(e=>e.value).join(", ")}" found in . Every value needs to be unique.`)}(e),e},[n,t])}(e),[o,p]=(0,s.useState)(()=>(function({defaultValue:e,tabValues:n}){var t;if(0===n.length)throw Error("Docusaurus error: the component requires at least one children component");if(e){if(!j({value:e,tabValues:n}))throw Error(`Docusaurus error: The has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${n.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}let r=null!==(t=n.find(e=>e.default))&&void 0!==t?t:n[0];if(!r)throw Error("Unexpected error: 0 tabValues");return r.value})({defaultValue:n,tabValues:i})),[x,f]=function({queryString:e=!1,groupId:n}){let t=(0,c.W6)(),r=function({queryString:e=!1,groupId:n}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!n)throw Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=n?n:null}({queryString:e,groupId:n});return[(0,l.aZ)(r),(0,s.useCallback)(e=>{var n,s;if(!r)return;let i=new URLSearchParams(t.location.search);i.set(r,e),t.replace((n=function(e){for(var n=1;n{n&&r.set(e)},[n,r])]}({groupId:r}),m=(()=>{let e=null!=x?x:b;return j({value:e,tabValues:i})?e:null})();return(0,d.A)(()=>{m&&p(m)},[m]),{selectedValue:o,selectValue:(0,s.useCallback)(e=>{if(!j({value:e,tabValues:i}))throw Error(`Can't select invalid tab value=${e}`);p(e),f(e),g(e)},[f,g,i]),tabValues:i}}(e);return(0,r.jsxs)("div",{className:(0,i.A)("tabs-container","tabList_Qoir"),children:[(0,r.jsx)(b,x({},n,e)),(0,r.jsx)(g,x({},n,e))]})}function y(e){let n=(0,p.A)();return(0,r.jsx)(m,f(x({},e),{children:u(e.children)}),String(n))}},40576:(e,n,t)=>{t.d(n,{A:()=>i});var r=t(62540);t(63696);var s=t(10709);function i({children:e,fallback:n}){return(0,s.A)()?(0,r.jsx)(r.Fragment,{children:null==e?void 0:e()}):null!=n?n:null}},59273:(e,n,t)=>{t.d(n,{A:()=>d});var r=t(62540),s=t(63696),i=t(52711),o=t(49519);let c=s.forwardRef(function({name:e,children:n},t){let c=function(e){let n=e;for(;(0,s.isValidElement)(n);)[n]=s.Children.toArray(n.props.children);if("string"!=typeof n)throw Error(`Could not extract APITable row name from JSX tree:
-${JSON.stringify(e,null,2)}`);return n}(n),d=e?`${e}-${c}`:c,l=`#${d}`,a=(0,o.W6)();return(0,i.A)().collectAnchor(d),(0,r.jsx)("tr",{id:d,tabIndex:0,ref:a.location.hash===l?t:void 0,onClick:e=>{"A"!==e.target.tagName.toUpperCase()&&a.push(l)},onKeyDown:e=>{"Enter"===e.key&&a.push(l)},children:n.props.children})});function d({children:e,name:n}){if("table"!==e.type)throw Error("Bad usage of APITable component.\nIt is probably that your Markdown table is malformed.\nMake sure to double-check you have the appropriate number of columns for each table row.");let[t,i]=s.Children.toArray(e.props.children),o=(0,s.useRef)(null);(0,s.useEffect)(()=>{var e;null===(e=o.current)||void 0===e||e.focus()},[o]);let d=s.Children.map(i.props.children,e=>(0,r.jsx)(c,{name:n,ref:o,children:e}));return(0,r.jsxs)("table",{className:"apiTable_e8hp",children:[t,(0,r.jsx)("tbody",{children:d})]})}},59433:(e,n,t)=>{t.d(n,{A:()=>h});var r=t(62540);t(63696);var s=t(36372),i=t(69615),o=t(81912),c=t(27446),d=t(15995),l=t(55887);let a=void 0;function h({code:e,pluginName:n,presetOptionName:t}){let h=(0,i.ir)(a).path;return(0,r.jsxs)(c.A,{groupId:"api-config-ex",children:[(0,r.jsxs)(d.A,{value:"preset",label:(0,o.T)({message:"Preset options"}),children:[(0,r.jsx)("p",{children:(0,r.jsx)(o.A,{id:"apiDocs.configTabs.presetOptions.description",values:{presetLink:(0,r.jsx)(s.A,{to:`${h}/using-plugins#docusauruspreset-classic`,children:(0,r.jsx)(o.A,{children:"preset options"})})},children:"If you use a preset, configure this plugin through the {presetLink}:"})}),(0,r.jsx)(l.A,{language:"js",title:"docusaurus.config.js",children:`module.exports = {
- presets: [
- [
- '@docusaurus/preset-classic',
- {
- // highlight-start
- ${t}: ${e.replace(/\n/g,"\n ")},
- // highlight-end
- },
- ],
- ],
-};`})]}),(0,r.jsxs)(d.A,{value:"plugin",label:(0,o.T)({message:"Plugin options"}),children:[(0,r.jsx)("p",{children:(0,r.jsx)(o.A,{children:"If you are using a standalone plugin, provide options directly to the plugin:"})}),(0,r.jsx)(l.A,{language:"js",title:"docusaurus.config.js",children:`module.exports = {
- plugins: [
- [
- '${n}',
- // highlight-start
- ${e.replace(/\n/g,"\n ")},
- // highlight-end
- ],
- ],
-};`})]})]})}},55887:(e,n,t)=>{t.d(n,{A:()=>ec});var r,s,i,o={};t.r(o),t.d(o,{ButtonExample:()=>C});var c=t(62540),d=t(63696),l=t(11750),a=t(10709),h=t(55152),u=t(81912),j=t(99468),p=t(40576),x=t(1495),f=t(66659),b=t(25436);function g(){let{prism:e}=(0,b.p)(),{colorMode:n}=(0,f.G)(),t=e.theme,r=e.darkTheme||t;return"dark"===n?r:t}var m=t(43758);function y(e){for(var n=1;n(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(m.A,{fallback:e=>(0,c.jsx)(x.MN,y({},e)),children:(0,c.jsx)(h.pA,{})}),(0,c.jsx)(h.p1,{})]})})}function P(){return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(v,{children:(0,c.jsx)(u.A,{id:"theme.Playground.result",description:"The result label of the live codeblocks",children:"Result"})}),(0,c.jsx)("div",{className:"playgroundPreview_mApW",children:(0,c.jsx)(w,{})})]})}function k(){let e=(0,a.A)();return(0,c.jsx)(h.w,{className:"playgroundEditor_TySg"},String(e))}function D(){return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(v,{children:(0,c.jsx)(u.A,{id:"theme.Playground.liveEditor",description:"The live editor label of the live codeblocks",children:"Live Editor"})}),(0,c.jsx)(k,{})]})}let S=e=>`${e};`;function A(e){var n,t,r,s,{children:i,transformCode:o}=e,d=function(e,n){if(null==e)return{};var t,r,s=function(e,n){if(null==e)return{};var t,r,s={},i=Object.keys(e);for(r=0;r=0||(s[t]=e[t]);return s}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0)&&Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}(e,["children","transformCode"]);let{siteConfig:{themeConfig:l}}=(0,j.A)(),{liveCodeBlock:{playgroundPosition:a}}=l,u=g(),p=null!==(s=null===(r=d.metastring)||void 0===r?void 0:r.includes("noInline"))&&void 0!==s&&s;return(0,c.jsx)("div",{className:"playgroundContainer_6Ior",children:(0,c.jsx)(h.Q,(n=y({code:null==i?void 0:i.replace(/\n$/,""),noInline:p,transformCode:null!=o?o:S,theme:u},d),t=t={children:"top"===a?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(P,{}),(0,c.jsx)(D,{})]}):(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(D,{}),(0,c.jsx)(P,{})]})},Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):(function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t})(Object(t)).forEach(function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))}),n))})}function T(e){for(var n=1;n[\"'])(?.*?)\\1"),L=RegExp("\\{(?[\\d,-]+)\\}"),R={js:{start:"\\/\\/",end:""},jsBlock:{start:"\\/\\*",end:"\\*\\/"},jsx:{start:"\\{\\s*\\/\\*",end:"\\*\\/\\s*\\}"},bash:{start:"#",end:""},html:{start:""}},U=(r=function(e){for(var n=1;n",end:""}},Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(s)):(function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t})(Object(s)).forEach(function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(s,e))}),r),M=Object.keys(R);function V(e,n){let t=e.map(e=>{let{start:t,end:r}=U[e];return`(?:${t}\\s*(${n.flatMap(e=>{var n,t;return[e.line,null===(n=e.block)||void 0===n?void 0:n.start,null===(t=e.block)||void 0===t?void 0:t.end].filter(Boolean)}).join("|")})\\s*${r})`}).join("|");return RegExp(`^\\s*(?:${t})\\s*$`)}function F(e){var n,t,{as:r}=e,s=function(e,n){if(null==e)return{};var t,r,s=function(e,n){if(null==e)return{};var t,r,s={},i=Object.keys(e);for(r=0;r=0||(s[t]=e[t]);return s}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0)&&Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}(e,["as"]);let i=function(e){let n={color:"--prism-color",backgroundColor:"--prism-background-color"},t={};return Object.entries(e.plain).forEach(([e,r])=>{let s=n[e];s&&"string"==typeof r&&(t[s]=r)}),t}(g());return(0,c.jsx)(r,(n=function(e){for(var n=1;n(0,c.jsx)("span",X({},s({token:e})),n));return(0,c.jsxs)("span",(i=X({},d),o=o={children:[t?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)("span",{className:H.codeLineNumber}),(0,c.jsx)("span",{className:H.codeLineContent,children:a})]}):a,(0,c.jsx)("br",{})]},Object.getOwnPropertyDescriptors?Object.defineProperties(i,Object.getOwnPropertyDescriptors(o)):(function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t})(Object(o)).forEach(function(e){Object.defineProperty(i,e,Object.getOwnPropertyDescriptor(o,e))}),i))}var J=t(936);function K(e){var n,t;return(0,c.jsx)("svg",(n=function(e){for(var n=1;n{(0,J.A)(e),r(!0),s.current=window.setTimeout(()=>{r(!1)},1e3)},[e]);return(0,d.useEffect)(()=>()=>window.clearTimeout(s.current),[]),(0,c.jsx)("button",{type:"button","aria-label":t?(0,u.T)({id:"theme.CodeBlock.copied",message:"Copied",description:"The copied button label on code blocks"}):(0,u.T)({id:"theme.CodeBlock.copyButtonAriaLabel",message:"Copy code to clipboard",description:"The ARIA label for copy code blocks button"}),title:(0,u.T)({id:"theme.CodeBlock.copy",message:"Copy",description:"The copy button label on code blocks"}),className:(0,l.A)("clean-btn",n,Z.copyButton,t&&Z.copyButtonCopied),onClick:i,children:(0,c.jsxs)("span",{className:Z.copyButtonIcons,"aria-hidden":"true",children:[(0,c.jsx)(K,{className:Z.copyButtonIcon}),(0,c.jsx)(Q,{className:Z.copyButtonSuccessIcon})]})})}function en(e){var n,t;return(0,c.jsx)("svg",(n=function(e){for(var n=1;ne.startsWith("language-"));return null==n?void 0:n.replace(/language-/,"")}(n))&&void 0!==o?o:j)?void 0:a.toLowerCase(),f=g(),m=function(){let[e,n]=(0,d.useState)(!1),[t,r]=(0,d.useState)(!1),s=(0,d.useRef)(null),i=(0,d.useCallback)(()=>{let t=s.current.querySelector("code");e?t.removeAttribute("style"):(t.style.whiteSpace="pre-wrap",t.style.overflowWrap="anywhere"),n(e=>!e)},[s,e]),o=(0,d.useCallback)(()=>{let{scrollWidth:e,clientWidth:n}=s.current;r(e>n||s.current.querySelector("code").hasAttribute("style"))},[s]);return!function(e,n){let[t,r]=(0,d.useState)(),s=(0,d.useCallback)(()=>{var n;r(null===(n=e.current)||void 0===n?void 0:n.closest("[role=tabpanel][hidden]"))},[e,r]);(0,d.useEffect)(()=>{s()},[s]),function(e,n,t=q){let r=(0,G._q)(n),s=(0,G.Be)(t);(0,d.useEffect)(()=>{let n=new MutationObserver(r);return e&&n.observe(e,s),()=>n.disconnect()},[e,r,s])}(t,e=>{e.forEach(e=>{"attributes"===e.type&&"hidden"===e.attributeName&&(n(),s())})},{attributes:!0,characterData:!1,childList:!1,subtree:!1})}(s,o),(0,d.useEffect)(()=>{o()},[e,o]),(0,d.useEffect)(()=>(window.addEventListener("resize",o,{passive:!0}),()=>{window.removeEventListener("resize",o)}),[o]),{codeBlockRef:s,isEnabled:e,isCodeScrollable:t,toggle:i}}(),y=(null!==(u=null==t?void 0:null===(h=t.match(B))||void 0===h?void 0:h.groups.title)&&void 0!==u?u:"")||r,{lineClassNames:v,code:O}=function(e,n){let t=e.replace(/\n$/,""),{language:r,magicComments:s,metastring:i}=n;if(i&&L.test(i)){let e=i.match(L).groups.range;if(0===s.length)throw Error(`A highlight range has been given in code block's metastring (\`\`\` ${i}), but no magic comment config is available. Docusaurus applies the first magic comment entry's className for metastring ranges.`);let n=s[0].className;return{lineClassNames:Object.fromEntries(_()(e).filter(e=>e>0).map(e=>[e-1,[n]])),code:t}}if(void 0===r)return{lineClassNames:{},code:t};let o=function(e,n){switch(e){case"js":case"javascript":case"ts":case"typescript":return V(["js","jsBlock"],n);case"jsx":case"tsx":return V(["js","jsBlock","jsx"],n);case"html":return V(["js","jsBlock","html"],n);case"python":case"py":case"bash":return V(["bash"],n);case"markdown":case"md":return V(["html","jsx","bash"],n);case"tex":case"latex":case"matlab":return V(["tex"],n);case"lua":case"haskell":case"sql":return V(["lua"],n);case"wasm":return V(["wasm"],n);case"vb":case"vba":case"visual-basic":return V(["vb","rem"],n);case"vbnet":return V(["vbnet","rem"],n);case"batch":return V(["rem"],n);case"basic":return V(["rem","f90"],n);case"fsharp":return V(["js","ml"],n);case"ocaml":case"sml":return V(["ml"],n);case"fortran":return V(["f90"],n);case"cobol":return V(["cobol"],n);default:return V(M,n)}}(r,s),c=t.split("\n"),d=Object.fromEntries(s.map(e=>[e.className,{start:0,range:""}])),l=Object.fromEntries(s.filter(e=>e.line).map(({className:e,line:n})=>[n,e])),a=Object.fromEntries(s.filter(e=>e.block).map(({className:e,block:n})=>[n.start,e])),h=Object.fromEntries(s.filter(e=>e.block).map(({className:e,block:n})=>[n.end,e]));for(let e=0;evoid 0!==e);l[t]?d[l[t]].range+=`${e},`:a[t]?d[a[t]].start=e:h[t]&&(d[h[t]].range+=`${d[h[t]].start}-${e-1},`),c.splice(e,1)}t=c.join("\n");let u={};return Object.entries(d).forEach(([e,{range:n}])=>{_()(n).forEach(n=>{var t;null!==(t=u[n])&&void 0!==t||(u[n]=[]),u[n].push(e)})}),{lineClassNames:u,code:t}}(e,{metastring:t,language:x,magicComments:p}),w=null!=s?s:!!(null==t?void 0:t.includes("showLineNumbers"));return(0,c.jsxs)(F,{as:"div",className:(0,l.A)(n,x&&!n.includes(`language-${x}`)&&`language-${x}`),children:[y&&(0,c.jsx)("div",{className:$.codeBlockTitle,children:y}),(0,c.jsxs)("div",{className:$.codeBlockContent,children:[(0,c.jsx)(z.f4,{theme:f,code:O,language:null!=x?x:"text",children:({className:e,style:n,tokens:t,getLineProps:r,getTokenProps:s})=>(0,c.jsx)("pre",{tabIndex:0,ref:m.codeBlockRef,className:(0,l.A)(e,$.codeBlock,"thin-scrollbar"),style:n,children:(0,c.jsx)("code",{className:(0,l.A)($.codeBlockLines,w&&$.codeBlockLinesWithNumbering),children:t.map((e,n)=>(0,c.jsx)(Y,{line:e,getLineProps:r,getTokenProps:s,classNames:v[n],showLineNumbers:w},n))})})}),(0,c.jsxs)("div",{className:$.buttonGroup,children:[(m.isEnabled||m.isCodeScrollable)&&(0,c.jsx)(er,{className:$.codeButton,onClick:()=>m.toggle(),isEnabled:m.isEnabled}),(0,c.jsx)(ee,{className:$.codeButton,code:O})]})]})]})}function ei(e){for(var n=1;n=0||(s[t]=e[t]);return s}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0)&&Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}(e,["children"]);let i=(0,a.A)(),o=d.Children.toArray(r).some(e=>(0,d.isValidElement)(e))?r:Array.isArray(r)?r.join(""):r,l="string"==typeof o?es:W;return(0,c.jsx)(l,(n=function(e){for(var n=1;n{t.d(n,{Ay:()=>c,RM:()=>i});var r=t(62540),s=t(43023);let i=[{value:"Tags File",id:"tags-file",level:2},{value:"Types",id:"tags-file-types",level:3},{value:"Example",id:"tags-file-example",level:3}];function o(e){let n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,s.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h2,{id:"tags-file",children:"Tags File"}),"\n",(0,r.jsxs)(n.p,{children:["Use the ",(0,r.jsxs)(n.a,{href:"#tags",children:[(0,r.jsx)(n.code,{children:"tags"})," plugin option"]})," to configure the path of a YAML tags file."]}),"\n",(0,r.jsxs)(n.p,{children:["By convention, the plugin will look for a ",(0,r.jsx)(n.code,{children:"tags.yml"})," file at the root of your content folder(s)."]}),"\n",(0,r.jsxs)(n.p,{children:["This file can contain a list of predefined tags. You can reference these tags by their keys in Markdown files thanks to the ",(0,r.jsxs)(n.a,{href:"#markdown-front-matter",children:[(0,r.jsx)(n.code,{children:"tags"})," front matter"]}),"."]}),"\n",(0,r.jsx)(n.admonition,{title:"Keeping tags consistent",type:"tip",children:(0,r.jsxs)(n.p,{children:["Using a tags file, you can ensure that your tags usage is consistent across your plugin content set. Use the ",(0,r.jsx)(n.a,{href:"#onInlineTags",children:(0,r.jsx)(n.code,{children:"onInlineTags: 'throw'"})})," plugin option to enforce this consistency and prevent usage of inline tags declared on the fly."]})}),"\n",(0,r.jsx)(n.h3,{id:"tags-file-types",children:"Types"}),"\n",(0,r.jsx)(n.p,{children:"The YAML content of the provided tags file should respect the following shape:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"type Tag = {\n label?: string; // Tag display label\n permalink?: string; // Tag URL pathname segment\n description?: string; // Tag description displayed in the tag page\n};\n\ntype TagsFileInput = Record | null>;\n"})}),"\n",(0,r.jsx)(n.h3,{id:"tags-file-example",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yml",metastring:'title="tags.yml"',children:"releases:\n label: 'Product releases'\n permalink: '/product-releases'\n description: 'Content related to product releases.'\n\n# A partial tag definition is also valid\nannouncements:\n label: 'Announcements'\n\n# An empty tag definition is also valid\n# Other attributes will be inferred from the key\nemptyTag:\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",metastring:'title="content.md"',children:"---\ntags: [releases, announcements, emptyTag]\n---\n\n# Title\n\nContent\n"})})]})}function c(e={}){let{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}},14243:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>j,contentTitle:()=>u,default:()=>f,frontMatter:()=>h,metadata:()=>r,toc:()=>p});let r=JSON.parse('{"id":"api/plugins/plugin-content-docs","title":"\u{1F4E6} plugin-content-docs","description":"Provides the Docs functionality and is the default docs plugin for Docusaurus.","source":"@site/docs/api/plugins/plugin-content-docs.mdx","sourceDirName":"api/plugins","slug":"/api/plugins/@docusaurus/plugin-content-docs","permalink":"/docs/api/plugins/@docusaurus/plugin-content-docs","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/api/plugins/plugin-content-docs.mdx","tags":[],"version":"current","lastUpdatedBy":"Liviu Ionescu","lastUpdatedAt":1727954972000,"sidebarPosition":1,"frontMatter":{"sidebar_position":1,"slug":"/api/plugins/@docusaurus/plugin-content-docs"},"sidebar":"api","previous":{"title":"Plugins overview","permalink":"/docs/api/plugins"},"next":{"title":"\u{1F4E6} plugin-content-blog","permalink":"/docs/api/plugins/@docusaurus/plugin-content-blog"}}');var s=t(62540),i=t(43023),o=t(27446),c=t(15995),d=t(59273),l=t(59433),a=t(24583);let h={sidebar_position:1,slug:"/api/plugins/@docusaurus/plugin-content-docs"},u="\u{1F4E6} plugin-content-docs",j={},p=[{value:"Installation",id:"installation",level:2},{value:"Configuration",id:"configuration",level:2},{value:"Types",id:"types",level:3},{value:"EditUrlFunction
",id:"EditUrlFunction",level:4},{value:"PrefixParser
",id:"PrefixParser",level:4},{value:"SidebarGenerator
",id:"SidebarGenerator",level:4},{value:"VersionsConfig
",id:"VersionsConfig",level:4},{value:"Example configuration",id:"ex-config",level:3},{value:"Markdown front matter",id:"markdown-front-matter",level:2},...a.RM,{value:"i18n",id:"i18n",level:2},{value:"Translation files location",id:"translation-files-location",level:3},{value:"Example file-system structure",id:"example-file-system-structure",level:3}];function x(e){let n={a:"a",admonition:"admonition",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"-plugin-content-docs",children:"\u{1F4E6} plugin-content-docs"})}),"\n","\n",(0,s.jsxs)(n.p,{children:["Provides the ",(0,s.jsx)(n.a,{href:"/docs/docs-introduction",children:"Docs"})," functionality and is the default docs plugin for Docusaurus."]}),"\n",(0,s.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,s.jsxs)(o.A,{groupId:"npm2yarn",children:[(0,s.jsx)(c.A,{value:"npm",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"npm install --save @docusaurus/plugin-content-docs\n"})})}),(0,s.jsx)(c.A,{value:"yarn",label:"Yarn",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"yarn add @docusaurus/plugin-content-docs\n"})})}),(0,s.jsx)(c.A,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"pnpm add @docusaurus/plugin-content-docs\n"})})})]}),"\n",(0,s.jsxs)(n.admonition,{type:"tip",children:[(0,s.jsxs)(n.p,{children:["If you use the preset ",(0,s.jsx)(n.code,{children:"@docusaurus/preset-classic"}),", you don't need to install this plugin as a dependency."]}),(0,s.jsxs)(n.p,{children:["You can configure this plugin through the ",(0,s.jsx)(n.a,{href:"/docs/using-plugins#docusauruspreset-classic",children:"preset options"}),"."]})]}),"\n",(0,s.jsx)(n.h2,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(d.A,{children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"path"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'docs'"})}),(0,s.jsx)(n.td,{children:"Path to the docs content directory on the file system, relative to site directory."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"editUrl"})}),(0,s.jsx)(n.td,{children:(0,s.jsxs)("code",{children:["string | ",(0,s.jsx)(n.a,{href:"#EditUrlFunction",children:"EditUrlFunction"})]})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["Base URL to edit your site. The final URL is computed by ",(0,s.jsx)(n.code,{children:"editUrl + relativeDocPath"}),". Using a function allows more nuanced control for each file. Omitting this variable entirely will disable edit links."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"editLocalizedFiles"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsxs)(n.td,{children:["The edit URL will target the localized file, instead of the original unlocalized file. Ignored when ",(0,s.jsx)(n.code,{children:"editUrl"})," is a function."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"editCurrentVersion"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsxs)(n.td,{children:["The edit URL will always target the current version doc instead of older versions. Ignored when ",(0,s.jsx)(n.code,{children:"editUrl"})," is a function."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"routeBasePath"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'docs'"})}),(0,s.jsxs)(n.td,{children:["URL route for the docs section of your site. ",(0,s.jsx)(n.strong,{children:"DO NOT"})," include a trailing slash. Use ",(0,s.jsx)(n.code,{children:"/"})," for shipping docs without base path."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"tagsBasePath"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'tags'"})}),(0,s.jsxs)(n.td,{children:["URL route for the tags list page of your site. It is prepended to the ",(0,s.jsx)(n.code,{children:"routeBasePath"}),"."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"include"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"['**/*.{md,mdx}']"})}),(0,s.jsx)(n.td,{children:"Array of glob patterns matching Markdown files to be built, relative to the content path."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"exclude"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.em,{children:"See example configuration"})}),(0,s.jsxs)(n.td,{children:["Array of glob patterns matching Markdown files to be excluded. Serves as refinement based on the ",(0,s.jsx)(n.code,{children:"include"})," option."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"sidebarPath"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"false | string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["Path to sidebar configuration. Use ",(0,s.jsx)(n.code,{children:"false"})," to disable sidebars, or ",(0,s.jsx)(n.code,{children:"undefined"})," to create a fully autogenerated sidebar."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"sidebarCollapsible"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"true"})}),(0,s.jsxs)(n.td,{children:["Whether sidebar categories are collapsible by default. See also ",(0,s.jsx)(n.a,{href:"/docs/sidebar/items#collapsible-categories",children:"Collapsible categories"})]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"sidebarCollapsed"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"true"})}),(0,s.jsxs)(n.td,{children:["Whether sidebar categories are collapsed by default. See also ",(0,s.jsx)(n.a,{href:"/docs/sidebar/items#expanded-categories-by-default",children:"Expanded categories by default"})]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"sidebarItemsGenerator"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:(0,s.jsx)(n.a,{href:"#SidebarGenerator",children:"SidebarGenerator"})})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.em,{children:"Omitted"})}),(0,s.jsxs)(n.td,{children:["Function used to replace the sidebar items of type ",(0,s.jsx)(n.code,{children:"'autogenerated'"})," with real sidebar items (docs, categories, links...). See also ",(0,s.jsx)(n.a,{href:"/docs/sidebar/autogenerated#customize-the-sidebar-items-generator",children:"Customize the sidebar items generator"})]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"numberPrefixParser"})}),(0,s.jsx)(n.td,{children:(0,s.jsxs)("code",{children:["boolean | ",(0,s.jsx)(n.a,{href:"#PrefixParser",children:"PrefixParser"})]})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.em,{children:"Omitted"})}),(0,s.jsxs)(n.td,{children:["Custom parsing logic to extract number prefixes from file names. Use ",(0,s.jsx)(n.code,{children:"false"})," to disable this behavior and leave the docs untouched, and ",(0,s.jsx)(n.code,{children:"true"})," to use the default parser. See also ",(0,s.jsx)(n.a,{href:"/docs/sidebar/autogenerated#using-number-prefixes",children:"Using number prefixes"})]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docsRootComponent"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'@theme/DocsRoot'"})}),(0,s.jsx)(n.td,{children:"Parent component of all the docs plugin pages (including all versions). Stays mounted when navigation between docs pages and versions."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docVersionRootComponent"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'@theme/DocVersionLayout'"})}),(0,s.jsx)(n.td,{children:"Parent component of all docs pages of an individual version (doc pages with sidebars, tags pages). Stays mounted when navigation between pages of that specific version."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docRootComponent"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'@theme/DocRoot'"})}),(0,s.jsx)(n.td,{children:"Parent component of all doc pages with sidebars (regular docs pages, category generated index pages). Stays mounted when navigation between such pages."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docItemComponent"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'@theme/DocItem'"})}),(0,s.jsx)(n.td,{children:"Main doc container, with TOC, pagination, etc."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docTagsListComponent"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'@theme/DocTagsListPage'"})}),(0,s.jsx)(n.td,{children:"Root component of the tags list page"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docTagDocListComponent"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'@theme/DocTagDocListPage'"})}),(0,s.jsx)(n.td,{children:'Root component of the "docs containing tag X" page.'})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"docCategoryGeneratedIndexComponent"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'@theme/DocCategoryGeneratedIndexPage'"})}),(0,s.jsx)(n.td,{children:"Root component of the generated category index page."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"remarkPlugins"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"any[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsx)(n.td,{children:"Remark plugins passed to MDX."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"rehypePlugins"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"any[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsx)(n.td,{children:"Rehype plugins passed to MDX."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"rehypePlugins"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"any[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsx)(n.td,{children:"Recma plugins passed to MDX."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"beforeDefaultRemarkPlugins"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"any[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsx)(n.td,{children:"Custom Remark plugins passed to MDX before the default Docusaurus Remark plugins."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"beforeDefaultRehypePlugins"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"any[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"[]"})}),(0,s.jsx)(n.td,{children:"Custom Rehype plugins passed to MDX before the default Docusaurus Rehype plugins."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"showLastUpdateAuthor"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsx)(n.td,{children:"Whether to display the author who last updated the doc."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"showLastUpdateTime"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsxs)(n.td,{children:["Whether to display the last date the doc was updated. This requires access to git history during the build, so will not work correctly with shallow clones (a common default for CI systems). With GitHub ",(0,s.jsx)(n.code,{children:"actions/checkout"}),", use",(0,s.jsx)(n.code,{children:"fetch-depth: 0"}),"."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"breadcrumbs"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"true"})}),(0,s.jsx)(n.td,{children:"Enable or disable the breadcrumbs on doc pages."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"disableVersioning"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsxs)(n.td,{children:["Explicitly disable versioning even when multiple versions exist. This will make the site only include the current version. Will error if ",(0,s.jsx)(n.code,{children:"includeCurrentVersion: false"})," and ",(0,s.jsx)(n.code,{children:"disableVersioning: true"}),"."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"includeCurrentVersion"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"true"})}),(0,s.jsx)(n.td,{children:"Include the current version of your docs."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"lastVersion"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsxs)(n.td,{children:["First version in ",(0,s.jsx)(n.code,{children:"versions.json"})]}),(0,s.jsx)(n.td,{children:"The version navigated to in priority and displayed by default for docs navbar items."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"onlyIncludeVersions"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string[]"})}),(0,s.jsx)(n.td,{children:"All versions available"}),(0,s.jsx)(n.td,{children:"Only include a subset of all available versions."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"versions"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:(0,s.jsx)(n.a,{href:"#VersionsConfig",children:"VersionsConfig"})})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"{}"})}),(0,s.jsx)(n.td,{children:"Independent customization of each version's properties."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"tags"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string | false | null | undefined"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"tags.yml"})}),(0,s.jsx)(n.td,{children:"Path to a YAML file listing pre-defined tags. Relative to the docs version content directories."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"onInlineTags"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"'ignore' | 'log' | 'warn' | 'throw'"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"warn"})}),(0,s.jsxs)(n.td,{children:["The plugin behavior when docs contain inline tags (not appearing in the list of pre-defined tags, usually ",(0,s.jsx)(n.code,{children:"docs/tags.yml"}),")."]})]})]})]})}),"\n",(0,s.jsx)(n.h3,{id:"types",children:"Types"}),"\n",(0,s.jsx)(n.h4,{id:"EditUrlFunction",children:(0,s.jsx)(n.code,{children:"EditUrlFunction"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"type EditUrlFunction = (params: {\n version: string;\n versionDocsDirPath: string;\n docPath: string;\n permalink: string;\n locale: string;\n}) => string | undefined;\n"})}),"\n",(0,s.jsx)(n.h4,{id:"PrefixParser",children:(0,s.jsx)(n.code,{children:"PrefixParser"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"type PrefixParser = (filename: string) => {\n filename: string;\n numberPrefix?: number;\n};\n"})}),"\n",(0,s.jsx)(n.h4,{id:"SidebarGenerator",children:(0,s.jsx)(n.code,{children:"SidebarGenerator"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"type SidebarGenerator = (generatorArgs: {\n /** The sidebar item with type \"autogenerated\" to be transformed. */\n item: {type: 'autogenerated'; dirName: string};\n /** Useful metadata for the version this sidebar belongs to. */\n version: {contentPath: string; versionName: string};\n /** All the docs of that version (unfiltered). */\n docs: {\n id: string;\n title: string;\n frontMatter: DocFrontMatter & Record;\n source: string;\n sourceDirName: string;\n sidebarPosition?: number | undefined;\n }[];\n /** Number prefix parser configured for this plugin. */\n numberPrefixParser: PrefixParser;\n /** The default category index matcher which you can override. */\n isCategoryIndex: CategoryIndexMatcher;\n /**\n * key is the path relative to the doc content directory, value is the\n * category metadata file's content.\n */\n categoriesMetadata: {[filePath: string]: CategoryMetadata};\n /**\n * Useful to re-use/enhance the default sidebar generation logic from\n * Docusaurus.\n */\n defaultSidebarItemsGenerator: SidebarGenerator;\n // Returns an array of sidebar items \u2014 same as what you can declare in\n // sidebars.js, except for shorthands. See https://docusaurus.io/docs/sidebar/items\n}) => Promise;\n\ntype CategoryIndexMatcher = (param: {\n /** The file name, without extension */\n fileName: string;\n /**\n * The list of directories, from lowest level to highest.\n * If there's no dir name, directories is ['.']\n */\n directories: string[];\n /** The extension, with a leading dot */\n extension: string;\n}) => boolean;\n"})}),"\n",(0,s.jsx)(n.h4,{id:"VersionsConfig",children:(0,s.jsx)(n.code,{children:"VersionsConfig"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"type VersionConfig = {\n /**\n * The base path of the version, will be appended to `baseUrl` +\n * `routeBasePath`.\n */\n path?: string;\n /** The label of the version to be used in badges, dropdowns, etc. */\n label?: string;\n /** The banner to show at the top of a doc of that version. */\n banner?: 'none' | 'unreleased' | 'unmaintained';\n /** Show a badge with the version label at the top of each doc. */\n badge?: boolean;\n /** Prevents search engines from indexing this version */\n noIndex?: boolean;\n /** Add a custom class name to the element of each doc */\n className?: string;\n};\n\ntype VersionsConfig = {[versionName: string]: VersionConfig};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"ex-config",children:"Example configuration"}),"\n",(0,s.jsx)(n.p,{children:"You can configure this plugin through preset options or plugin options."}),"\n",(0,s.jsx)(n.admonition,{type:"tip",children:(0,s.jsx)(n.p,{children:"Most Docusaurus users configure this plugin through the preset options."})}),"\n","\n",(0,s.jsx)(l.A,{pluginName:"@docusaurus/plugin-content-docs",presetOptionName:"docs",code:"{\n path: 'docs',\n breadcrumbs: true,\n // Simple use-case: string editUrl\n // editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',\n // Advanced use-case: functional editUrl\n editUrl: ({versionDocsDirPath, docPath}) =>\n `https://github.com/facebook/docusaurus/edit/main/website/${versionDocsDirPath}/${docPath}`,\n editLocalizedFiles: false,\n editCurrentVersion: false,\n routeBasePath: 'docs',\n include: ['**/*.md', '**/*.mdx'],\n exclude: [\n '**/_*.{js,jsx,ts,tsx,md,mdx}',\n '**/_*/**',\n '**/*.test.{js,jsx,ts,tsx}',\n '**/__tests__/**',\n ],\n sidebarPath: 'sidebars.js',\n async sidebarItemsGenerator({\n defaultSidebarItemsGenerator,\n numberPrefixParser,\n item,\n version,\n docs,\n isCategoryIndex,\n }) {\n // Use the provided data to generate a custom sidebar slice\n return [\n {type: 'doc', id: 'intro'},\n {\n type: 'category',\n label: 'Tutorials',\n items: [\n {type: 'doc', id: 'tutorial1'},\n {type: 'doc', id: 'tutorial2'},\n ],\n },\n ];\n },\n numberPrefixParser(filename) {\n // Implement your own logic to extract a potential number prefix\n const numberPrefix = findNumberPrefix(filename);\n // Prefix found: return it with the cleaned filename\n if (numberPrefix) {\n return {\n numberPrefix,\n filename: filename.replace(prefix, ''),\n };\n }\n // No number prefix found\n return {numberPrefix: undefined, filename};\n },\n docsRootComponent: '@theme/DocsRoot',\n docVersionRootComponent: '@theme/DocVersionRoot',\n docRootComponent: '@theme/DocRoot',\n docItemComponent: '@theme/DocItem',\n remarkPlugins: [require('./my-remark-plugin')],\n rehypePlugins: [],\n beforeDefaultRemarkPlugins: [],\n beforeDefaultRehypePlugins: [],\n showLastUpdateAuthor: false,\n showLastUpdateTime: false,\n disableVersioning: false,\n includeCurrentVersion: true,\n lastVersion: undefined,\n versions: {\n current: {\n label: 'Android SDK v2.0.0 (WIP)',\n path: 'android-2.0.0',\n banner: 'none',\n },\n '1.0.0': {\n label: 'Android SDK v1.0.0',\n path: 'android-1.0.0',\n banner: 'unmaintained',\n },\n },\n onlyIncludeVersions: ['current', '1.0.0', '2.0.0'],\n}"}),"\n",(0,s.jsx)(n.h2,{id:"markdown-front-matter",children:"Markdown front matter"}),"\n",(0,s.jsxs)(n.p,{children:["Markdown documents can use the following Markdown ",(0,s.jsx)(n.a,{href:"/docs/markdown-features#front-matter",children:"front matter"})," metadata fields, enclosed by a line ",(0,s.jsx)(n.code,{children:"---"})," on either side."]}),"\n",(0,s.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(d.A,{children:(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Name"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"id"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:"file path (including folders, without the extension)"}),(0,s.jsx)(n.td,{children:"A unique document ID."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"title"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsxs)(n.td,{children:["Markdown title or ",(0,s.jsx)(n.code,{children:"id"})]}),(0,s.jsx)(n.td,{children:"The text title of your document. Used for the page metadata and as a fallback value in multiple places (sidebar, next/previous buttons...). Automatically added at the top of your doc if it does not contain any Markdown title."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"pagination_label"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsxs)(n.td,{children:[(0,s.jsx)(n.code,{children:"sidebar_label"})," or ",(0,s.jsx)(n.code,{children:"title"})]}),(0,s.jsx)(n.td,{children:"The text used in the document next/previous buttons for this document."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"sidebar_label"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"title"})}),(0,s.jsx)(n.td,{children:"The text shown in the document sidebar for this document."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"sidebar_position"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"number"})}),(0,s.jsx)(n.td,{children:"Default ordering"}),(0,s.jsxs)(n.td,{children:["Controls the position of a doc inside the generated sidebar slice when using ",(0,s.jsx)(n.code,{children:"autogenerated"})," sidebar items. See also ",(0,s.jsx)(n.a,{href:"/docs/sidebar/autogenerated#autogenerated-sidebar-metadata",children:"Autogenerated sidebar metadata"}),"."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"sidebar_class_name"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:"Gives the corresponding sidebar label a special class name when using autogenerated sidebars."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"sidebar_custom_props"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"object"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["Assign ",(0,s.jsx)(n.a,{href:"/docs/sidebar#passing-custom-props",children:"custom props"})," to the sidebar item referencing this doc"]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"displayed_sidebar"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["Force the display of a given sidebar when browsing the current document. Read the ",(0,s.jsx)(n.a,{href:"/docs/sidebar/multiple-sidebars",children:"multiple sidebars guide"})," for details."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"hide_title"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsx)(n.td,{children:"Whether to hide the title at the top of the doc. It only hides a title declared through the front matter, and have no effect on a Markdown title at the top of your document."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"hide_table_of_contents"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsx)(n.td,{children:"Whether to hide the table of contents to the right."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"toc_min_heading_level"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"number"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"2"})}),(0,s.jsx)(n.td,{children:"The minimum heading level shown in the table of contents. Must be between 2 and 6 and lower or equal to the max value."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"toc_max_heading_level"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"number"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"3"})}),(0,s.jsx)(n.td,{children:"The max heading level shown in the table of contents. Must be between 2 and 6."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"pagination_next"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"string | null"})}),(0,s.jsx)(n.td,{children:"Next doc in the sidebar"}),(0,s.jsxs)(n.td,{children:['The ID of the documentation you want the "Next" pagination to link to. Use ',(0,s.jsx)(n.code,{children:"null"}),' to disable showing "Next" for this page.']})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"pagination_prev"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"string | null"})}),(0,s.jsx)(n.td,{children:"Previous doc in the sidebar"}),(0,s.jsxs)(n.td,{children:['The ID of the documentation you want the "Previous" pagination to link to. Use ',(0,s.jsx)(n.code,{children:"null"}),' to disable showing "Previous" for this page.']})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"parse_number_prefixes"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsxs)(n.td,{children:[(0,s.jsx)(n.code,{children:"numberPrefixParser"})," plugin option"]}),(0,s.jsxs)(n.td,{children:["Whether number prefix parsing is disabled on this doc. See also ",(0,s.jsx)(n.a,{href:"/docs/sidebar/autogenerated#using-number-prefixes",children:"Using number prefixes"}),"."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"custom_edit_url"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)("code",{children:"string | null"})}),(0,s.jsxs)(n.td,{children:["Computed using the ",(0,s.jsx)(n.code,{children:"editUrl"})," plugin option"]}),(0,s.jsxs)(n.td,{children:["The URL for editing this document. Use ",(0,s.jsx)(n.code,{children:"null"}),' to disable showing "Edit this page" for this page.']})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"keywords"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsx)(n.td,{children:"Keywords meta tag for the document page, for search engines."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"description"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:"The first line of Markdown content"}),(0,s.jsxs)(n.td,{children:["The description of your document, which will become the ",(0,s.jsx)(n.code,{children:''})," and ",(0,s.jsx)(n.code,{children:''})," in ",(0,s.jsx)(n.code,{children:""}),", used by search engines."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"image"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["Cover or thumbnail image that will be used as the ",(0,s.jsx)(n.code,{children:''})," in the ",(0,s.jsx)(n.code,{children:""}),", enhancing link previews on social media and messaging platforms."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"slug"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:"File path"}),(0,s.jsxs)(n.td,{children:["Allows to customize the document URL (",(0,s.jsx)(n.code,{children:"//"}),"). Support multiple patterns: ",(0,s.jsx)(n.code,{children:"slug: my-doc"}),", ",(0,s.jsx)(n.code,{children:"slug: /my/path/myDoc"}),", ",(0,s.jsx)(n.code,{children:"slug: /"}),"."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"tags"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"Tag[]"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["A list of strings or objects of two string fields ",(0,s.jsx)(n.code,{children:"label"})," and ",(0,s.jsx)(n.code,{children:"permalink"})," to tag to your docs. Strings can be a reference to keys of a ",(0,s.jsx)(n.a,{href:"#tags-file",children:"tags file"})," (usually ",(0,s.jsx)(n.code,{children:"tags.yml"}),")"]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"draft"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsx)(n.td,{children:"Draft documents will only be available during development."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"unlisted"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsx)(n.td,{children:'Unlisted documents will be available in both development and production. They will be "hidden" in production, not indexed, excluded from sitemaps, and can only be accessed by users having a direct link.'})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"last_update"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"FrontMatterLastUpdate"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["Allows overriding the last update author/date. Date can be any ",(0,s.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse",children:"parsable date string"}),"."]})]})]})]})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"type FrontMatterLastUpdate = {date?: string; author?: string};\n\ntype Tag = string | {label: string; permalink: string};\n"})}),"\n",(0,s.jsx)(n.p,{children:"Example:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-md",children:"---\nid: doc-markdown\ntitle: Docs Markdown Features\nhide_title: false\nhide_table_of_contents: false\nsidebar_label: Markdown\nsidebar_position: 3\npagination_label: Markdown features\ncustom_edit_url: https://github.com/facebook/docusaurus/edit/main/docs/api-doc-markdown.md\ndescription: How do I find you when I cannot solve this problem\nkeywords:\n - docs\n - docusaurus\ntags: [docusaurus]\nimage: https://i.imgur.com/mErPwqL.png\nslug: /myDoc\nlast_update:\n date: 1/1/2000\n author: custom author name\n---\n\n# Markdown Features\n\nMy Document Markdown content\n"})}),"\n","\n",(0,s.jsx)(a.Ay,{}),"\n",(0,s.jsx)(n.h2,{id:"i18n",children:"i18n"}),"\n",(0,s.jsxs)(n.p,{children:["Read the ",(0,s.jsx)(n.a,{href:"/docs/i18n/introduction",children:"i18n introduction"})," first."]}),"\n",(0,s.jsx)(n.h3,{id:"translation-files-location",children:"Translation files location"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Base path"}),": ",(0,s.jsx)(n.code,{children:"website/i18n/[locale]/docusaurus-plugin-content-docs"})]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Multi-instance path"}),": ",(0,s.jsx)(n.code,{children:"website/i18n/[locale]/docusaurus-plugin-content-docs-[pluginId]"})]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"JSON files"}),": extracted with ",(0,s.jsx)(n.a,{href:"/docs/cli#docusaurus-write-translations-sitedir",children:(0,s.jsx)(n.code,{children:"docusaurus write-translations"})})]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Markdown files"}),": ",(0,s.jsx)(n.code,{children:"website/i18n/[locale]/docusaurus-plugin-content-docs/[versionName]"})]}),"\n"]}),"\n",(0,s.jsx)(n.h3,{id:"example-file-system-structure",children:"Example file-system structure"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"website/i18n/[locale]/docusaurus-plugin-content-docs\n\u2502\n\u2502 # translations for website/docs\n\u251C\u2500\u2500 current\n\u2502 \u251C\u2500\u2500 api\n\u2502 \u2502 \u2514\u2500\u2500 config.md\n\u2502 \u2514\u2500\u2500 getting-started.md\n\u251C\u2500\u2500 current.json\n\u2502\n\u2502 # translations for website/versioned_docs/version-1.0.0\n\u251C\u2500\u2500 version-1.0.0\n\u2502 \u251C\u2500\u2500 api\n\u2502 \u2502 \u2514\u2500\u2500 config.md\n\u2502 \u2514\u2500\u2500 getting-started.md\n\u2514\u2500\u2500 version-1.0.0.json\n"})})]})}function f(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(x,{...e})}):x(e)}}}]);
\ No newline at end of file
diff --git a/assets/js/0b7c2a4a.b3b62eec.js b/assets/js/0b7c2a4a.a83fa7a1.js
similarity index 98%
rename from assets/js/0b7c2a4a.b3b62eec.js
rename to assets/js/0b7c2a4a.a83fa7a1.js
index 63b60bc5e7..4267faef84 100644
--- a/assets/js/0b7c2a4a.b3b62eec.js
+++ b/assets/js/0b7c2a4a.a83fa7a1.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[46373],{94802:(e,r,n)=>{n.d(r,{A:()=>t});let t=n.p+"assets/images/social-card-3239a62bb56c9529ff255bc2c72e94f6.png"},15995:(e,r,n)=>{n.d(r,{A:()=>a});var t=n(62540);n(63696);var s=n(11750);function a({children:e,hidden:r,className:n}){return(0,t.jsx)("div",{role:"tabpanel",className:(0,s.A)("tabItem_pnkT",n),hidden:r,children:e})}},27446:(e,r,n)=>{n.d(r,{A:()=>y});var t=n(62540),s=n(63696),a=n(11750),i=n(7846),o=n(49519),l=n(96439),c=n(19739),u=n(66904),d=n(79244);function h(e){var r,n;return null!==(n=null===(r=s.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||(0,s.isValidElement)(e)&&function(e){let{props:r}=e;return!!r&&"object"==typeof r&&"value"in r}(e))return e;throw Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))||void 0===r?void 0:r.filter(Boolean))&&void 0!==n?n:[]}function p({value:e,tabValues:r}){return r.some(r=>r.value===e)}var g=n(10709);function m(e){for(var r=1;r{let r=e.currentTarget,t=o[l.indexOf(r)].value;t!==n&&(c(r),s(t))},d=e=>{var r,n;let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{let n=l.indexOf(e.currentTarget)+1;t=null!==(r=l[n])&&void 0!==r?r:l[0];break}case"ArrowLeft":{let r=l.indexOf(e.currentTarget)-1;t=null!==(n=l[r])&&void 0!==n?n:l[l.length-1]}}null==t||t.focus()};return(0,t.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.A)("tabs",{"tabs--block":r},e),children:o.map(({value:e,label:r,attributes:s})=>(0,t.jsx)("li",b(m({role:"tab",tabIndex:n===e?0:-1,"aria-selected":n===e,ref:e=>l.push(e),onKeyDown:d,onClick:u},s),{className:(0,a.A)("tabs__item","tabItem_AQgk",null==s?void 0:s.className,{"tabs__item--active":n===e}),children:null!=r?r:e}),e))})}function j({lazy:e,children:r,selectedValue:n}){let i=(Array.isArray(r)?r:[r]).filter(Boolean);if(e){let e=i.find(e=>e.props.value===n);return e?(0,s.cloneElement)(e,{className:(0,a.A)("margin-top--md",e.props.className)}):null}return(0,t.jsx)("div",{className:"margin-top--md",children:i.map((e,r)=>(0,s.cloneElement)(e,{key:r,hidden:e.props.value!==n}))})}function x(e){let r=function(e){let{defaultValue:r,queryString:n=!1,groupId:t}=e,a=function(e){let{values:r,children:n}=e;return(0,s.useMemo)(()=>{let e=null!=r?r:h(n).map(({props:{value:e,label:r,attributes:n,default:t}})=>({value:e,label:r,attributes:n,default:t}));return!function(e){let r=(0,u.XI)(e,(e,r)=>e.value===r.value);if(r.length>0)throw Error(`Docusaurus error: Duplicate values "${r.map(e=>e.value).join(", ")}" found in . Every value needs to be unique.`)}(e),e},[r,n])}(e),[i,g]=(0,s.useState)(()=>(function({defaultValue:e,tabValues:r}){var n;if(0===r.length)throw Error("Docusaurus error: the component requires at least one children component");if(e){if(!p({value:e,tabValues:r}))throw Error(`Docusaurus error: The