diff --git a/assets/js/01657c2b.f5c070ce.js b/assets/js/01657c2b.c217a61e.js
similarity index 99%
rename from assets/js/01657c2b.f5c070ce.js
rename to assets/js/01657c2b.c217a61e.js
index 28f2cc0f8a..ad5e364211 100644
--- a/assets/js/01657c2b.f5c070ce.js
+++ b/assets/js/01657c2b.c217a61e.js
@@ -1 +1 @@
-(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["8623"],{64027:function(e,s,t){"use strict";t.d(s,{Z:()=>a});let a=t.p+"assets/images/oss_logo-25c7e8934a28d0f23722c77adb6e7da4.png"},65945:function(e,s,t){"use strict";t.d(s,{Z:()=>a});let a="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABSCAYAAAC7QwouAAAACXBIWXMAAAsSAAALEgHS3X78AAASKklEQVR42u1dPXbbuhL+mJPeuisQswJTKzDdPhVWSlVmiqfWzApMr8BKqyZy81RGLlSHXoGkFYRewZVXwFdoEI0hAARJ/VHGdw5Prq+IHwKYDzODAeDleY5jozuYtADEAO4BPAOIZ6N+BgcHh73COzYBdAeTCMAQwIX00wOA4WzUX7lucnA4MwLoDiYhCf6l4bU30gbGrqscHM6AALqDiU+Cf1Mi2QuAZDbqp67LHBwaSADMzo8V6r7AM4DQ8PsTEYHzDzg47ACfDmjnL7B28l1oZvgvs1G/B8AnQVfhFsCiO5gkruscHE5cAyA7PwFwpXnlFUCkUu27g0lApoIpbTwb9aeuGx0cTogASN0f0oytwhvWHv7EIq8e5dU2+Afi2ai/cN3p4HBkAiD1PC6w4+Oyy3v7ytfBwRHAbgR/7zM1rSAkBZpFMhv1h65rHRwOQADHsNXr+BYcHBx2QABk5ycA7kx2PvYYzUerC0mB1hG5ZUMHhx0SQHcwiUnwjr5eL+0j0OEH1cf5BxwcqhIAqd5jw4y7JHX/4Kq3RYShCys+LoYAAvrvGOu4kKYhogckB+MPQQBNEi6LPQZHIykNfDaobJA0dKyl2PhsrunvpiFhmuZDg/vCjgAs1euT3LVn2GUocCrbjkMAv8v0mSMARwC7wqcCAcoMwv+MdfjuSdrWpI34ZP+rcAMKKyaic3BwPgALFXpnS2zeHAGpvwHeL+ktyUac5h3UXj4kE2YM87JhciQThmsAL/T3OcJpAKdMAIcMsvHmKBLILcLJO/UHjIUT8xjbjh0BOAI4Gj5bbtPdyTKaN0dR7IAKbQC/vfnaZs87qGyzk2D7hrDiKwC/u4NJ08KKAwCyGZPRYwOfHllgy6QpUx7PI6B/F/TYtnkLm1UF2zqryJejTPlngU+w26Yb70D4hU/hrmIWNwD+eHMkRCR1/AMJircdZxTleMoYA8gBzEmL4M8fEoigQAAW9K6cPtfMcLo0NuVxwkopzS8Aj5THv2R+tgoEf0zvynVeWc7KCb0rp/+X8q46vhJqt5zy95tAAG2N2v11NuqHdb3k3hyhN8cCwE8NySwBfAPwT96Bl3fgAfhK5KPCPYCMCKUOCaxmo34EoKMp66LGQDgUigbYFQma6jt6NOgvS5RXlObKkgQeDebfnWEmb9FvOjP1gsbHuIA07w3a7q2hzYrahjvMowoa0VEIQMbDbNT368bue3P43hxTw4B5A/At7yDIOxjnnY3qlXcwzTsIyVZ81XT0T2+O1JvXs5lno/5iNuqHRDpvDdPgplivxjxQ/a/p+cG+5QLbcQYtSUieKd0/RIgij9SQ5oHe9+jfJ1aezdh5pjr/A+AL5SdwCXVsxJiNpVeaOL5Qnb+xb77VaAIxI483KrNDeXylyUiUX2b8+4q2acQ5Fd5//vu/XBIIr6bgW4fmcqEvyNMq9LiOfwAAuoNJKs1M1wdwCIbYjxMwpplWlW9EGlmZMnl+TxoB5e33VRIC/tt3UvVNZbxKGk5Apo4QXl9hrxe9s2JjSOWIbJF509a8k0DtBFwwYmqUI3enR4KRWr4wCP8LgC95B7Gt8JNGMIR5Tf8WwGIX/oETcOalhqeMT2JRoK4K2K7q2KQZGhxsNnUbslm8LRFAJL230uT7zDSRnlT/C6Z9qIh9JX1Dz6Jd+JL5m2Wa8yIAb47AmyOlWUXnU7jOOwirztJ5B6u8g7jAZr8nIug1lAAuaJbUPbsiN9+SKGRyKkqTad5HReLyNfmZtLJUkyaw/Oa0xDf08N6pHaJhqwifdyD8PbJ/LjR2fkIz+E6Qd7AAEFK5qgNI2gB+eXN8yzuN26zxVjA4VwqVNVQM7iKhvtQIbRE51dE6bMFNhZAJpC0BLDQCHFZIf1VAojH7+zsauMHpc03hDwzC/wSUU/VLEsEUwNSbI4F6Tf+nNwcaRgKLEvZjBPNeh9c91vMYt8lcnFhf3UpjvZGnUNU1AaaKjnkB0Mk7iPYl/BIRJNCv6Q8p6vDc4GN7WfUFGy82oI92dHCorwHQzCsPsh9kpx8URDQR80PwWSMB6sUMnCB4Gz/T960k1Vdel94lHizeyc5cdp6wcSyK2IHxhyEAhVA9H0P4JSIY0yrAI1fVvHn9JcITA7dtVR7xBfkH7g3mQZv5EcpqasmetRuVPf7CbPLAYG/7GhJaSOlTi/TLAoKLsI5kBE08Nv6X5psAFHzTNsxKthAxA1NquJwaNqVB5lcggaHC/u3hfFFlwGUaMjHhpUKauuSWVahzqGmbRc30OhOYL02nQLOWoav6AELF7J+VFPyEOvUR6zj/S2a7XtHs9QfVYrOHBfU9J1QRxqlBk7NJE++pzgHer6kvNOUnhnHV06SZShOCb2FepZbm2JKZnNOPQAB1ZiERz22Kx+a4JaKoEwRzbgd+LAqEMSqwR6dS+8ZSG7UUQqJKoxPAIlv4kd7xJeEfa8oTfy/ZJDFVpE/ZmHqStIYVm62FoIaS6j/F+1BjW5s+xCaA6QoNWhH4dODyhPBflkx3gfKRcOcMPsBumNmUkhmlC8ji6vSDJJD/MjPsX7JtIynNNylNzspdsXS3FubbLWl4K3rm0uyvI7Y39t1/qF5y+qUmfYL38f5iB2FGed2w8suYjSvp/Ts0xPF8aAIYK4RfbMq4xnpjSQfroIpXBQlMz3A2rwJZGIXZdMVmrweYnVgJvcM3QMl94yv675uURpTLtbnXgn7im7wuFGlD6EN9Q2wvd8rLobr0K/rtRRpXbUX5ZX0rqUSqwyZMWJ8PWFaI7VOFl4rOEp7UIQ24W6mzY5zBSSzS916zAVqGTFOaeVrSQEyZ2mzy8ifUziqbONXYwGN6eooBnkHvCedmRkrlyXksLGzoBaUJFb6dqYXgChIQebRKlD9mbZJp2jOVynIEoLFVTUzPVb6WRBzRmRHACtWPx8oK7M2FZfnjCmVPUc7htdhBHjYEVaY+iwrtnVnUqzE4pAlwoxBuG4aUbam28wU4ODSLAELF7G/LlCtstnjq8nNwcDhxDUBWpcqqaxzOEejg0GACcHBw+MAE4Jd8P1CYBQ4ODg0hANneb5ew4+VVAJVJ4ODgcOIagOzIKzr/XWAs/f2GZt4q4+DwoQlAXq++RPHuqbFi9h+ecX/49H0ZNhdMiCfDOv7BOUDX2uOYTMFc8aTY3t/gcGQCSBVawCUb2AETgoj+v3wBxOsZE0BEps0d1HH8bdClKDjv7c027fSbxoZuM9kV1nsVfCfiZnw+QueleB9zLk7zLTq9RmzQOEcHYA/vTzJ6xTpCTnxri9pOxM3/wnrPxEfzhYSKdhpjs6zs0xMSYTpf0YkRgIjDlkkAFsIfnmmHyjfu6C7dSEj7EVrR9APOcLxdngs0ITf7H9AECCqQwA/L959hPgLKpj6rEx/UQpV9gX4b6Yp+43viow82XrlQF5mCmRPv/WkAU0llv/Hm8EucCrTC2kkjdqKJ3WhtbE6CETsCq3RkrPA/NGFWs/FvDJkarDp8Q1wVvsLmbMBQIkWbXXNCO5F3ChbtmJPLB1PLeT7jCn17JdVjFyZFKI3LaUG9Qotx5bNvVV05HjKS4uZLwPqnqK6ifNOV5vJuy4zSZLUIIO9g4c3fHSwJJsxlkFG6nTn26B7BtoKwTlX9vyxZzykjgBsNQVyRfSzMBtlZdk/ahsmnksB8qGisqa8of0l5xFBfsHGP9dkC4xptV1WzC6juKmfrI5lhsSb/33y4GUhdtJ3qDkKRh7hENGF9+YLt48uGmrreY/sORUEWY+gPhfkhJsk6JoDccTfe/LjHItPdhI/S/3464ROBOTu/lNCelhbmVxv6K9nFbJoatAwu/Euq3yvL+xfMwVyX9I7pdp2fJc3HF81MXLbNU5hPTKp6RXgVTXUuEbkvfeMvFJ/uJAv/b5bmFdt3RtyJSbcyAdCFHPKJM7d0ZXdwYMH3iXx+Sj+94bTPDvAr+ilW0kxowgPW11979Fxjc6LPpcJcCrC57+4N69WGgKnw3w2TgApLbE58usb2NexltMZUIqkqPhB+mc2zom1eDW2za8gnIT1J43Us+cJ4XUV9E8PE/J2ZX4HU93cAwrpOwEjqTDGzzL353zP69yn4LbqgZIHtmAFgfTVZ1hACWFQkABPZfsXm9GUuRJHGByH7T2JFvYZsJm4XCPBXql+CzQEeU2nQlpnJ+e3BF0T44kbfwHK8tpk20VO0TU/6/n1rAU8kmD7eH+YaSLN4TzHbpxIp9qTvGyre5/0b1SIAcVGnggSEGpWRgO5D+HvYXEWuUnObeDmoLRaWGsDKMAtyLaClEciphfkXVCi/qgNPrCAtpVn0jlTpDOZoSZsrzuUrxsM992WkMcV6JTUtuS/Ghr7/29e1lwEZCWiv7PbmyHZ1ZTe7ilxnG4mryM9V+PdBIoHkOxDtuLKwO4Mj1DvA2oG4VPg9RLRkVCAgaYW2OZZ2mFqmCQ2+AU6igvzbOwkEYld2R8TAuiu7XwBEVdRyMieGGlVf2KtD8k2cO/w95RsoZtui944Vbz/G5m6BHgn8pWQeyDNh29LnkmLjBA0a2sememeirXYaCUh3803JzlBd2X0F4I83xw8Aie3twYYrwLkdFR/iNuI9olVxcKQVy+N35anqIM7NP3Vk2Cwlh/TvJVPzp6gXCNbUDUWPNi9tmQDdwSSpSQIrmoUDqK/sBtlsGa3ZmwQ/9ObIDHb+C6n7ta8i7w4mvSOwfXpEVfMcd8qleO+TusDH3jhVCJUGcN8dTCIA8WzUn9YgggzrK7vHEitz/8AjkUACIM07yEjVD6EPIBH2abILO787mATYBK8cY/aqovLtIiLOL6iP7nYdlU15ShDHnN/VUKVbJ/x9tvhuMzY+A1sRfX9t9u5g8gIgmo36WQ0iSAEE5B9QRaWJgBV488Ls3oS6t4MZ38ansDoAAYj2b9NgLWrrQBLS1Z4I6RLNPXhlZZg42owYMos2PtYGtIwRfRVtbWHTf5/oY+Urot7Z7N3BZEgCU8s/QI3+UDGLZwBB3rH3HRiEP4H6vAHuU/Bno/4hOt/m1luOWJO27Ax3pTFFlhW1kib4U/h3hob0vR34WOpiYVnXKt+3IYDZqL+ajfpWNnt3MIlrkoDwD3zB9uEgOizJzu/VDerpDiZhdzAp9CnMRv1oNuofSvXj69G3MEe3RYy03lC8h6JlQSLPhkEUN0Sw5XciDUmOJbJV5Rfi/SWlqUIzNAlZa0f+nFQiJJtvl699L0zj5Xm+JSQam52rUdFs1K/NjBQyHFGDXUlCvwAwzTv1N/J0BxOfOt/oU5iN+uMjDewE72Pvn6i+C6aSRpLG8l1DACn7zjdslssW2ESb8bLkzSo+vcuv2R7i/c4+ERocQL1D7UqTNxec34x0bWc44S+aYrOrLWX1CvF+GfqloH5iw1KKzc7HhH27qo15enFC1YqVL48xVRtwofMKSEBVVzEmAmqDaUGaqUROYjxFWwTAhEZns/OZI67jH9g3yGxJmENIhQcAwwPO+DqMDSaJykSJLAZN1XwibO+r0OEfyebeJwGUaSPdITIywe2jbd5Y/nUIQGxcMtVVbj/b7wOAb9pIQJoNTTb7DfkHkrr+gT0Jf0TseGcgsC+zUT85AeEXA+sbtq9FlzWVr7DfBPOs8e0A6y2hkUHQrmG+XvyNhOSQfT+F3a7JJyYIKueabzB3xXX1prb5Yeif79jd0qMpylZgVfL7OHFkWg1AoUIPod5/LhotPqIKXcaEWVJdU5wuhJrms4GQwc4jrZqBhbreQvEhElDMmOJZsefYx7OFkr0t6lTm21qsncV3pRXaJYPdzcF1wMuDZZkt1u+cEFOtD8BCuMbQ708+mnA1iaT2DBsV3MGhPAEwYYslZ4lKBUsO4R8g8yOG+VThH1Sfj3ClmCMAh/0SABO8xGBj/w3a2ZfgkZ2fGDSS2oFMjgAcHAGYhbAolPYVNcOKNaZIUlBmdOJ2viMAh+YTABNK0+GFYjaO60TXkZ2fwBy+m8xG/eEH7lNHAA6HJwAmpAkstu6WNQv2la+DgyOA3dvmVod3UAjy0TULBwdHAHtAHVv9GL4FBwdHAPshggiW3vpdag8ODg4nQADMLIgL7PhnrCO8jh5f4ODgCGA/RODDHLGn0xCSD7qs5+BwPgQg+QdMMftC3f8I4bsODh+LACT/gGrb8als03VwcARwIP/APRpwzoCDw7ng/++z7FyTnp4xAAAAAElFTkSuQmCC"},9939:function(e,s,t){"use strict";t.r(s),t.d(s,{default:()=>u,frontMatter:()=>l,metadata:()=>a,assets:()=>g,docusaurusRequire:()=>c,toc:()=>m,contentTitle:()=>d});var a=JSON.parse('{"id":"tests/images/index","title":"Image Tests","description":"URL encoded image","source":"@site/_dogfooding/_docs tests/tests/images/index.mdx","sourceDirName":"tests/images","slug":"/tests/images/","permalink":"/tests/docs/tests/images/","draft":false,"unlisted":false,"tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739456991000,"frontMatter":{"image":"./img/oss_logo.png"},"sidebar":"sidebar","previous":{"title":"Sample doc","permalink":"/tests/docs/tests/category-links/with-readme-doc/sample-doc"},"next":{"title":"Import Bad Package","permalink":"/tests/docs/tests/import-bad-package"}}'),i=t(85893),n=t(80980),r=t(21811),o=t(41949),A=t.n(o);let l={image:"./img/oss_logo.png"},d="Image Tests",g={image:t(64027).Z},c=t(41949),m=[{value:"Regular images",id:"regular-images",level:2},{value:"Ideal images",id:"ideal-images",level:2},{value:"CSS Image",id:"css-image",level:2}];function h(e){let s={h1:"h1",h2:"h2",header:"header",img:"img",p:"p",...(0,n.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(s.header,{children:(0,i.jsx)(s.h1,{id:"image-tests",children:"Image Tests"})}),"\n","\n","\n","\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.img,{alt:"URL encoded image",src:t(65945).Z+"",width:"256",height:"82"})}),"\n",(0,i.jsx)(s.h2,{id:"regular-images",children:"Regular images"}),"\n",(0,i.jsx)(s.p,{children:"Those only render in DEV when IdealImage plugin is disabled."}),"\n",(0,i.jsx)("img",{src:A()}),"\n",(0,i.jsx)("img",{src:c.default}),"\n",(0,i.jsx)(s.h2,{id:"ideal-images",children:"Ideal images"}),"\n",(0,i.jsx)(r.Z,{img:A()}),"\n",(0,i.jsx)(r.Z,{img:c}),"\n",(0,i.jsx)(s.h2,{id:"css-image",children:"CSS Image"}),"\n","\n",(0,i.jsx)(s.p,{children:"This should display a div with have a background image"}),"\n",(0,i.jsx)("div",{className:"dogfood-image-test-css",style:{border:"solid",height:"10rem"}})]})}function u(e={}){let{wrapper:s}={...(0,n.a)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}u.displayName="MDXContent(_dogfooding/_docs tests/tests/images/index.mdx)"},41949:function(e,s,t){e.exports={src:{srcSet:t.p+"assets/ideal-img/docusaurus.30c6ff4.200.png 200w",images:[{path:t.p+"assets/ideal-img/docusaurus.30c6ff4.200.png",width:200,height:200}],src:t.p+"assets/ideal-img/docusaurus.30c6ff4.200.png",toString:function(){return t.p+"assets/ideal-img/docusaurus.30c6ff4.200.png"},placeholder:void 0,width:200,height:200},preSrc:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAABm0lEQVR4nEXNP0hbQQDH8aM0RQoudlNwdZLg00IaffdCCDpoqlhSGzV3xxOz6FRq5w6BQkcVJIJYCFg6CILQQqGkgkjiu5fEf0QjBlETmyJaEKSm5n7yunT4bh9+P0IIIe2y73GgFG3u3h1rMJLGw6iMu6KIu+KQLgAPHENCu6FHdJOtepPhGz0VOaa2kB5rJNORemW3/RjcaV3rX27JP68ngfxEI7X5b/d8D559G1K+/BjC+28xeRBTbw4+4N3x7N/3p3NuErDNRn2TXfm2TOgWq1HJ1VLxq5KHhZp1WMB2oVgtnlbcxOtAya6MjIAhmfJaHHzPxMzZuFqoTCJx/vouUZrSiCfLmv7BrAC1uNItjhd7EXwsD+Ki5K9d3/Uh9nN4+v9iVkC3uPLbHJ/LIXzJdSO1ruOs0oscwj2ky+KdVPJLI2dCl0L5MgIjBYbh/VGspAO1i8texH5FZgmV7BOV3Lm9pZJVnbp2RDV4JKr2efBP+bof4ydskTxNR55402aHviE0J/+G0DxSaDOllxow0P79dtRNkrzuHtwg5HIaPwQEAAAAAElFTkSuQmCC"}},21811:function(e,s,t){"use strict";t.d(s,{Z:()=>o});var a=t(85893);t(67294);var i=t(66222),n=t(77827);function r(e,s){switch(e){case"noicon":case"loaded":return null;case"loading":return(0,n.I)({id:"theme.IdealImageMessage.loading",message:"Loading...",description:"When the full-scale image is loading"});case"load":{let{pickedSrc:e}=s,{size:t}=e,a=t?` (${function(e){let s=["B","KB","MB","GB","TB"];if(0===e)return"n/a";let t=Math.floor(Math.log(e)/Math.log(1024));return 0===t?`${e} ${s[t]}`:`${(e/1024**t).toFixed(1)} ${s[t]}`}(t)})`:"";return(0,n.I)({id:"theme.IdealImageMessage.load",message:"Click to load{sizeMessage}",description:"To prompt users to load the full image. sizeMessage is a parenthesized size figure."},{sizeMessage:a})}case"offline":return(0,n.I)({id:"theme.IdealImageMessage.offline",message:"Your browser is offline. Image not loaded",description:"When the user is viewing an offline document"});case"error":{let{loadInfo:e}=s;if(404===e)return(0,n.I)({id:"theme.IdealImageMessage.404error",message:"404. Image not found",description:"When the image is not found"});return(0,n.I)({id:"theme.IdealImageMessage.error",message:"Error. Click to reload",description:"When the image fails to load for unknown error"})}default:throw Error(`Wrong icon: ${e}`)}}function o(e){let{img:s,...t}=e;return"string"==typeof s||"default"in s?(0,a.jsx)("img",{src:"string"==typeof s?s:s.default,...t}):(0,a.jsx)(i.default,{...t,height:s.src.height??100,width:s.src.width??100,placeholder:{lqip:s.preSrc},src:s.src.src,srcSet:s.src.images.map(e=>({...e,src:e.path})),getMessage:r})}},80980:function(e,s,t){"use strict";t.d(s,{Z:()=>o,a:()=>r});var a=t(67294);let i={},n=a.createContext(i);function r(e){let s=a.useContext(n);return a.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function o(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),a.createElement(n.Provider,{value:s},e.children)}}}]);
\ No newline at end of file
+(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["8623"],{64027:function(e,s,t){"use strict";t.d(s,{Z:()=>a});let a=t.p+"assets/images/oss_logo-25c7e8934a28d0f23722c77adb6e7da4.png"},65945:function(e,s,t){"use strict";t.d(s,{Z:()=>a});let a="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABSCAYAAAC7QwouAAAACXBIWXMAAAsSAAALEgHS3X78AAASKklEQVR42u1dPXbbuhL+mJPeuisQswJTKzDdPhVWSlVmiqfWzApMr8BKqyZy81RGLlSHXoGkFYRewZVXwFdoEI0hAARJ/VHGdw5Prq+IHwKYDzODAeDleY5jozuYtADEAO4BPAOIZ6N+BgcHh73COzYBdAeTCMAQwIX00wOA4WzUX7lucnA4MwLoDiYhCf6l4bU30gbGrqscHM6AALqDiU+Cf1Mi2QuAZDbqp67LHBwaSADMzo8V6r7AM4DQ8PsTEYHzDzg47ACfDmjnL7B28l1oZvgvs1G/B8AnQVfhFsCiO5gkruscHE5cAyA7PwFwpXnlFUCkUu27g0lApoIpbTwb9aeuGx0cTogASN0f0oytwhvWHv7EIq8e5dU2+Afi2ai/cN3p4HBkAiD1PC6w4+Oyy3v7ytfBwRHAbgR/7zM1rSAkBZpFMhv1h65rHRwOQADHsNXr+BYcHBx2QABk5ycA7kx2PvYYzUerC0mB1hG5ZUMHhx0SQHcwiUnwjr5eL+0j0OEH1cf5BxwcqhIAqd5jw4y7JHX/4Kq3RYShCys+LoYAAvrvGOu4kKYhogckB+MPQQBNEi6LPQZHIykNfDaobJA0dKyl2PhsrunvpiFhmuZDg/vCjgAs1euT3LVn2GUocCrbjkMAv8v0mSMARwC7wqcCAcoMwv+MdfjuSdrWpI34ZP+rcAMKKyaic3BwPgALFXpnS2zeHAGpvwHeL+ktyUac5h3UXj4kE2YM87JhciQThmsAL/T3OcJpAKdMAIcMsvHmKBLILcLJO/UHjIUT8xjbjh0BOAI4Gj5bbtPdyTKaN0dR7IAKbQC/vfnaZs87qGyzk2D7hrDiKwC/u4NJ08KKAwCyGZPRYwOfHllgy6QpUx7PI6B/F/TYtnkLm1UF2zqryJejTPlngU+w26Yb70D4hU/hrmIWNwD+eHMkRCR1/AMJircdZxTleMoYA8gBzEmL4M8fEoigQAAW9K6cPtfMcLo0NuVxwkopzS8Aj5THv2R+tgoEf0zvynVeWc7KCb0rp/+X8q46vhJqt5zy95tAAG2N2v11NuqHdb3k3hyhN8cCwE8NySwBfAPwT96Bl3fgAfhK5KPCPYCMCKUOCaxmo34EoKMp66LGQDgUigbYFQma6jt6NOgvS5RXlObKkgQeDebfnWEmb9FvOjP1gsbHuIA07w3a7q2hzYrahjvMowoa0VEIQMbDbNT368bue3P43hxTw4B5A/At7yDIOxjnnY3qlXcwzTsIyVZ81XT0T2+O1JvXs5lno/5iNuqHRDpvDdPgplivxjxQ/a/p+cG+5QLbcQYtSUieKd0/RIgij9SQ5oHe9+jfJ1aezdh5pjr/A+AL5SdwCXVsxJiNpVeaOL5Qnb+xb77VaAIxI483KrNDeXylyUiUX2b8+4q2acQ5Fd5//vu/XBIIr6bgW4fmcqEvyNMq9LiOfwAAuoNJKs1M1wdwCIbYjxMwpplWlW9EGlmZMnl+TxoB5e33VRIC/tt3UvVNZbxKGk5Apo4QXl9hrxe9s2JjSOWIbJF509a8k0DtBFwwYmqUI3enR4KRWr4wCP8LgC95B7Gt8JNGMIR5Tf8WwGIX/oETcOalhqeMT2JRoK4K2K7q2KQZGhxsNnUbslm8LRFAJL230uT7zDSRnlT/C6Z9qIh9JX1Dz6Jd+JL5m2Wa8yIAb47AmyOlWUXnU7jOOwirztJ5B6u8g7jAZr8nIug1lAAuaJbUPbsiN9+SKGRyKkqTad5HReLyNfmZtLJUkyaw/Oa0xDf08N6pHaJhqwifdyD8PbJ/LjR2fkIz+E6Qd7AAEFK5qgNI2gB+eXN8yzuN26zxVjA4VwqVNVQM7iKhvtQIbRE51dE6bMFNhZAJpC0BLDQCHFZIf1VAojH7+zsauMHpc03hDwzC/wSUU/VLEsEUwNSbI4F6Tf+nNwcaRgKLEvZjBPNeh9c91vMYt8lcnFhf3UpjvZGnUNU1AaaKjnkB0Mk7iPYl/BIRJNCv6Q8p6vDc4GN7WfUFGy82oI92dHCorwHQzCsPsh9kpx8URDQR80PwWSMB6sUMnCB4Gz/T960k1Vdel94lHizeyc5cdp6wcSyK2IHxhyEAhVA9H0P4JSIY0yrAI1fVvHn9JcITA7dtVR7xBfkH7g3mQZv5EcpqasmetRuVPf7CbPLAYG/7GhJaSOlTi/TLAoKLsI5kBE08Nv6X5psAFHzTNsxKthAxA1NquJwaNqVB5lcggaHC/u3hfFFlwGUaMjHhpUKauuSWVahzqGmbRc30OhOYL02nQLOWoav6AELF7J+VFPyEOvUR6zj/S2a7XtHs9QfVYrOHBfU9J1QRxqlBk7NJE++pzgHer6kvNOUnhnHV06SZShOCb2FepZbm2JKZnNOPQAB1ZiERz22Kx+a4JaKoEwRzbgd+LAqEMSqwR6dS+8ZSG7UUQqJKoxPAIlv4kd7xJeEfa8oTfy/ZJDFVpE/ZmHqStIYVm62FoIaS6j/F+1BjW5s+xCaA6QoNWhH4dODyhPBflkx3gfKRcOcMPsBumNmUkhmlC8ji6vSDJJD/MjPsX7JtIynNNylNzspdsXS3FubbLWl4K3rm0uyvI7Y39t1/qF5y+qUmfYL38f5iB2FGed2w8suYjSvp/Ts0xPF8aAIYK4RfbMq4xnpjSQfroIpXBQlMz3A2rwJZGIXZdMVmrweYnVgJvcM3QMl94yv675uURpTLtbnXgn7im7wuFGlD6EN9Q2wvd8rLobr0K/rtRRpXbUX5ZX0rqUSqwyZMWJ8PWFaI7VOFl4rOEp7UIQ24W6mzY5zBSSzS916zAVqGTFOaeVrSQEyZ2mzy8ifUziqbONXYwGN6eooBnkHvCedmRkrlyXksLGzoBaUJFb6dqYXgChIQebRKlD9mbZJp2jOVynIEoLFVTUzPVb6WRBzRmRHACtWPx8oK7M2FZfnjCmVPUc7htdhBHjYEVaY+iwrtnVnUqzE4pAlwoxBuG4aUbam28wU4ODSLAELF7G/LlCtstnjq8nNwcDhxDUBWpcqqaxzOEejg0GACcHBw+MAE4Jd8P1CYBQ4ODg0hANneb5ew4+VVAJVJ4ODgcOIagOzIKzr/XWAs/f2GZt4q4+DwoQlAXq++RPHuqbFi9h+ecX/49H0ZNhdMiCfDOv7BOUDX2uOYTMFc8aTY3t/gcGQCSBVawCUb2AETgoj+v3wBxOsZE0BEps0d1HH8bdClKDjv7c027fSbxoZuM9kV1nsVfCfiZnw+QueleB9zLk7zLTq9RmzQOEcHYA/vTzJ6xTpCTnxri9pOxM3/wnrPxEfzhYSKdhpjs6zs0xMSYTpf0YkRgIjDlkkAFsIfnmmHyjfu6C7dSEj7EVrR9APOcLxdngs0ITf7H9AECCqQwA/L959hPgLKpj6rEx/UQpV9gX4b6Yp+43viow82XrlQF5mCmRPv/WkAU0llv/Hm8EucCrTC2kkjdqKJ3WhtbE6CETsCq3RkrPA/NGFWs/FvDJkarDp8Q1wVvsLmbMBQIkWbXXNCO5F3ChbtmJPLB1PLeT7jCn17JdVjFyZFKI3LaUG9Qotx5bNvVV05HjKS4uZLwPqnqK6ifNOV5vJuy4zSZLUIIO9g4c3fHSwJJsxlkFG6nTn26B7BtoKwTlX9vyxZzykjgBsNQVyRfSzMBtlZdk/ahsmnksB8qGisqa8of0l5xFBfsHGP9dkC4xptV1WzC6juKmfrI5lhsSb/33y4GUhdtJ3qDkKRh7hENGF9+YLt48uGmrreY/sORUEWY+gPhfkhJsk6JoDccTfe/LjHItPdhI/S/3464ROBOTu/lNCelhbmVxv6K9nFbJoatAwu/Euq3yvL+xfMwVyX9I7pdp2fJc3HF81MXLbNU5hPTKp6RXgVTXUuEbkvfeMvFJ/uJAv/b5bmFdt3RtyJSbcyAdCFHPKJM7d0ZXdwYMH3iXx+Sj+94bTPDvAr+ilW0kxowgPW11979Fxjc6LPpcJcCrC57+4N69WGgKnw3w2TgApLbE58usb2NexltMZUIqkqPhB+mc2zom1eDW2za8gnIT1J43Us+cJ4XUV9E8PE/J2ZX4HU93cAwrpOwEjqTDGzzL353zP69yn4LbqgZIHtmAFgfTVZ1hACWFQkABPZfsXm9GUuRJHGByH7T2JFvYZsJm4XCPBXql+CzQEeU2nQlpnJ+e3BF0T44kbfwHK8tpk20VO0TU/6/n1rAU8kmD7eH+YaSLN4TzHbpxIp9qTvGyre5/0b1SIAcVGnggSEGpWRgO5D+HvYXEWuUnObeDmoLRaWGsDKMAtyLaClEciphfkXVCi/qgNPrCAtpVn0jlTpDOZoSZsrzuUrxsM992WkMcV6JTUtuS/Ghr7/29e1lwEZCWiv7PbmyHZ1ZTe7ilxnG4mryM9V+PdBIoHkOxDtuLKwO4Mj1DvA2oG4VPg9RLRkVCAgaYW2OZZ2mFqmCQ2+AU6igvzbOwkEYld2R8TAuiu7XwBEVdRyMieGGlVf2KtD8k2cO/w95RsoZtui944Vbz/G5m6BHgn8pWQeyDNh29LnkmLjBA0a2sememeirXYaCUh3803JzlBd2X0F4I83xw8Aie3twYYrwLkdFR/iNuI9olVxcKQVy+N35anqIM7NP3Vk2Cwlh/TvJVPzp6gXCNbUDUWPNi9tmQDdwSSpSQIrmoUDqK/sBtlsGa3ZmwQ/9ObIDHb+C6n7ta8i7w4mvSOwfXpEVfMcd8qleO+TusDH3jhVCJUGcN8dTCIA8WzUn9YgggzrK7vHEitz/8AjkUACIM07yEjVD6EPIBH2abILO787mATYBK8cY/aqovLtIiLOL6iP7nYdlU15ShDHnN/VUKVbJ/x9tvhuMzY+A1sRfX9t9u5g8gIgmo36WQ0iSAEE5B9QRaWJgBV488Ls3oS6t4MZ38ansDoAAYj2b9NgLWrrQBLS1Z4I6RLNPXhlZZg42owYMos2PtYGtIwRfRVtbWHTf5/oY+Urot7Z7N3BZEgCU8s/QI3+UDGLZwBB3rH3HRiEP4H6vAHuU/Bno/4hOt/m1luOWJO27Ax3pTFFlhW1kib4U/h3hob0vR34WOpiYVnXKt+3IYDZqL+ajfpWNnt3MIlrkoDwD3zB9uEgOizJzu/VDerpDiZhdzAp9CnMRv1oNuofSvXj69G3MEe3RYy03lC8h6JlQSLPhkEUN0Sw5XciDUmOJbJV5Rfi/SWlqUIzNAlZa0f+nFQiJJtvl699L0zj5Xm+JSQam52rUdFs1K/NjBQyHFGDXUlCvwAwzTv1N/J0BxOfOt/oU5iN+uMjDewE72Pvn6i+C6aSRpLG8l1DACn7zjdslssW2ESb8bLkzSo+vcuv2R7i/c4+ERocQL1D7UqTNxec34x0bWc44S+aYrOrLWX1CvF+GfqloH5iw1KKzc7HhH27qo15enFC1YqVL48xVRtwofMKSEBVVzEmAmqDaUGaqUROYjxFWwTAhEZns/OZI67jH9g3yGxJmENIhQcAwwPO+DqMDSaJykSJLAZN1XwibO+r0OEfyebeJwGUaSPdITIywe2jbd5Y/nUIQGxcMtVVbj/b7wOAb9pIQJoNTTb7DfkHkrr+gT0Jf0TseGcgsC+zUT85AeEXA+sbtq9FlzWVr7DfBPOs8e0A6y2hkUHQrmG+XvyNhOSQfT+F3a7JJyYIKueabzB3xXX1prb5Yeif79jd0qMpylZgVfL7OHFkWg1AoUIPod5/LhotPqIKXcaEWVJdU5wuhJrms4GQwc4jrZqBhbreQvEhElDMmOJZsefYx7OFkr0t6lTm21qsncV3pRXaJYPdzcF1wMuDZZkt1u+cEFOtD8BCuMbQ708+mnA1iaT2DBsV3MGhPAEwYYslZ4lKBUsO4R8g8yOG+VThH1Sfj3ClmCMAh/0SABO8xGBj/w3a2ZfgkZ2fGDSS2oFMjgAcHAGYhbAolPYVNcOKNaZIUlBmdOJ2viMAh+YTABNK0+GFYjaO60TXkZ2fwBy+m8xG/eEH7lNHAA6HJwAmpAkstu6WNQv2la+DgyOA3dvmVod3UAjy0TULBwdHAHtAHVv9GL4FBwdHAPshggiW3vpdag8ODg4nQADMLIgL7PhnrCO8jh5f4ODgCGA/RODDHLGn0xCSD7qs5+BwPgQg+QdMMftC3f8I4bsODh+LACT/gGrb8als03VwcARwIP/APRpwzoCDw7ng/++z7FyTnp4xAAAAAElFTkSuQmCC"},9939:function(e,s,t){"use strict";t.r(s),t.d(s,{default:()=>u,frontMatter:()=>l,metadata:()=>a,assets:()=>g,docusaurusRequire:()=>c,toc:()=>m,contentTitle:()=>d});var a=JSON.parse('{"id":"tests/images/index","title":"Image Tests","description":"URL encoded image","source":"@site/_dogfooding/_docs tests/tests/images/index.mdx","sourceDirName":"tests/images","slug":"/tests/images/","permalink":"/tests/docs/tests/images/","draft":false,"unlisted":false,"tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739551601000,"frontMatter":{"image":"./img/oss_logo.png"},"sidebar":"sidebar","previous":{"title":"Sample doc","permalink":"/tests/docs/tests/category-links/with-readme-doc/sample-doc"},"next":{"title":"Import Bad Package","permalink":"/tests/docs/tests/import-bad-package"}}'),i=t(85893),n=t(80980),r=t(21811),o=t(41949),A=t.n(o);let l={image:"./img/oss_logo.png"},d="Image Tests",g={image:t(64027).Z},c=t(41949),m=[{value:"Regular images",id:"regular-images",level:2},{value:"Ideal images",id:"ideal-images",level:2},{value:"CSS Image",id:"css-image",level:2}];function h(e){let s={h1:"h1",h2:"h2",header:"header",img:"img",p:"p",...(0,n.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(s.header,{children:(0,i.jsx)(s.h1,{id:"image-tests",children:"Image Tests"})}),"\n","\n","\n","\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.img,{alt:"URL encoded image",src:t(65945).Z+"",width:"256",height:"82"})}),"\n",(0,i.jsx)(s.h2,{id:"regular-images",children:"Regular images"}),"\n",(0,i.jsx)(s.p,{children:"Those only render in DEV when IdealImage plugin is disabled."}),"\n",(0,i.jsx)("img",{src:A()}),"\n",(0,i.jsx)("img",{src:c.default}),"\n",(0,i.jsx)(s.h2,{id:"ideal-images",children:"Ideal images"}),"\n",(0,i.jsx)(r.Z,{img:A()}),"\n",(0,i.jsx)(r.Z,{img:c}),"\n",(0,i.jsx)(s.h2,{id:"css-image",children:"CSS Image"}),"\n","\n",(0,i.jsx)(s.p,{children:"This should display a div with have a background image"}),"\n",(0,i.jsx)("div",{className:"dogfood-image-test-css",style:{border:"solid",height:"10rem"}})]})}function u(e={}){let{wrapper:s}={...(0,n.a)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}u.displayName="MDXContent(_dogfooding/_docs tests/tests/images/index.mdx)"},41949:function(e,s,t){e.exports={src:{srcSet:t.p+"assets/ideal-img/docusaurus.30c6ff4.200.png 200w",images:[{path:t.p+"assets/ideal-img/docusaurus.30c6ff4.200.png",width:200,height:200}],src:t.p+"assets/ideal-img/docusaurus.30c6ff4.200.png",toString:function(){return t.p+"assets/ideal-img/docusaurus.30c6ff4.200.png"},placeholder:void 0,width:200,height:200},preSrc:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAABm0lEQVR4nEXNP0hbQQDH8aM0RQoudlNwdZLg00IaffdCCDpoqlhSGzV3xxOz6FRq5w6BQkcVJIJYCFg6CILQQqGkgkjiu5fEf0QjBlETmyJaEKSm5n7yunT4bh9+P0IIIe2y73GgFG3u3h1rMJLGw6iMu6KIu+KQLgAPHENCu6FHdJOtepPhGz0VOaa2kB5rJNORemW3/RjcaV3rX27JP68ngfxEI7X5b/d8D559G1K+/BjC+28xeRBTbw4+4N3x7N/3p3NuErDNRn2TXfm2TOgWq1HJ1VLxq5KHhZp1WMB2oVgtnlbcxOtAya6MjIAhmfJaHHzPxMzZuFqoTCJx/vouUZrSiCfLmv7BrAC1uNItjhd7EXwsD+Ki5K9d3/Uh9nN4+v9iVkC3uPLbHJ/LIXzJdSO1ruOs0oscwj2ky+KdVPJLI2dCl0L5MgIjBYbh/VGspAO1i8texH5FZgmV7BOV3Lm9pZJVnbp2RDV4JKr2efBP+bof4ydskTxNR55402aHviE0J/+G0DxSaDOllxow0P79dtRNkrzuHtwg5HIaPwQEAAAAAElFTkSuQmCC"}},21811:function(e,s,t){"use strict";t.d(s,{Z:()=>o});var a=t(85893);t(67294);var i=t(66222),n=t(77827);function r(e,s){switch(e){case"noicon":case"loaded":return null;case"loading":return(0,n.I)({id:"theme.IdealImageMessage.loading",message:"Loading...",description:"When the full-scale image is loading"});case"load":{let{pickedSrc:e}=s,{size:t}=e,a=t?` (${function(e){let s=["B","KB","MB","GB","TB"];if(0===e)return"n/a";let t=Math.floor(Math.log(e)/Math.log(1024));return 0===t?`${e} ${s[t]}`:`${(e/1024**t).toFixed(1)} ${s[t]}`}(t)})`:"";return(0,n.I)({id:"theme.IdealImageMessage.load",message:"Click to load{sizeMessage}",description:"To prompt users to load the full image. sizeMessage is a parenthesized size figure."},{sizeMessage:a})}case"offline":return(0,n.I)({id:"theme.IdealImageMessage.offline",message:"Your browser is offline. Image not loaded",description:"When the user is viewing an offline document"});case"error":{let{loadInfo:e}=s;if(404===e)return(0,n.I)({id:"theme.IdealImageMessage.404error",message:"404. Image not found",description:"When the image is not found"});return(0,n.I)({id:"theme.IdealImageMessage.error",message:"Error. Click to reload",description:"When the image fails to load for unknown error"})}default:throw Error(`Wrong icon: ${e}`)}}function o(e){let{img:s,...t}=e;return"string"==typeof s||"default"in s?(0,a.jsx)("img",{src:"string"==typeof s?s:s.default,...t}):(0,a.jsx)(i.default,{...t,height:s.src.height??100,width:s.src.width??100,placeholder:{lqip:s.preSrc},src:s.src.src,srcSet:s.src.images.map(e=>({...e,src:e.path})),getMessage:r})}},80980:function(e,s,t){"use strict";t.d(s,{Z:()=>o,a:()=>r});var a=t(67294);let i={},n=a.createContext(i);function r(e){let s=a.useContext(n);return a.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function o(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),a.createElement(n.Provider,{value:s},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/028951d7.93570328.js b/assets/js/028951d7.9cf8118c.js
similarity index 99%
rename from assets/js/028951d7.93570328.js
rename to assets/js/028951d7.9cf8118c.js
index 3dd1825022..65ca7d501a 100644
--- a/assets/js/028951d7.93570328.js
+++ b/assets/js/028951d7.9cf8118c.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["23008"],{23491:function(e,s,t){t.d(s,{Z:()=>n});let n=t.p+"assets/images/social-card-e1b6e0c51be29d4ab2d4c966d220410c.png"},99203:function(e,s,t){t.d(s,{Z:()=>n});let n=t.p+"assets/images/broken-anchor-4191e5dd94aef9e8c5e3524880670f0f.jpg"},34873:function(e,s,t){t.d(s,{Z:()=>n});let n=t.p+"assets/images/social-card-e1b6e0c51be29d4ab2d4c966d220410c.png"},93e3:function(e,s,t){t.r(s),t.d(s,{assets:()=>c,contentTitle:()=>i,default:()=>u,frontMatter:()=>a,metadata:()=>n,toc:()=>l});var n=t(70694),r=t(85893),o=t(80980);t(14522),t(51118),t(39468);let a={title:"Docusaurus 3.1",authors:["slorber"],tags:["release"],image:"./img/social-card.png",date:new Date("2024-01-05T00:00:00.000Z")},i=void 0,c={image:t(23491).Z,authorsImageUrls:[void 0]},l=[{value:"Highlights",id:"highlights",level:2},{value:"Broken anchors checker",id:"broken-anchors-checker",level:3},{value:"parseFrontMatter hook",id:"parsefrontmatter-hook",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",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.p,{children:["We are happy to announce ",(0,r.jsx)(s.strong,{children:"Docusaurus 3.1"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["The upgrade should be easy: as explained in our ",(0,r.jsx)(s.a,{href:"/community/release-process",children:"release process documentation"}),", minor versions respect ",(0,r.jsx)(s.a,{href:"https://semver.org/",children:"Semantic Versioning"}),"."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.img,{alt:"Docusaurus blog post social card",src:t(34873).Z+"",width:"1200",height:"600"})}),"\n","\n",(0,r.jsx)(s.h2,{id:"highlights",children:"Highlights"}),"\n",(0,r.jsx)(s.h3,{id:"broken-anchors-checker",children:"Broken anchors checker"}),"\n",(0,r.jsxs)(s.p,{children:["In ",(0,r.jsx)(s.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,r.jsx)(s.p,{children:(0,r.jsx)(s.img,{alt:"Docusaurus blog post social card",src:t(99203).Z+"",width:"1920",height:"896"})}),"\n",(0,r.jsxs)(s.admonition,{title:"Make it fail fast",type:"tip",children:[(0,r.jsxs)(s.p,{children:["The new ",(0,r.jsx)(s.a,{href:"/docs/api/docusaurus-config#onBrokenAnchors",children:(0,r.jsx)(s.code,{children:"onBrokenAnchors"})})," option has value ",(0,r.jsx)(s.code,{children:"warn"})," by default, for retro-compatibility reasons."]}),(0,r.jsxs)(s.p,{children:["We recommend to turn it to ",(0,r.jsx)(s.code,{children:"throw"})," and fail your CI builds instead of deploying broken anchors to productions."]})]}),"\n",(0,r.jsxs)(s.admonition,{type:"note",children:[(0,r.jsxs)(s.p,{children:["For users and plugin authors implementing custom ",(0,r.jsx)(s.code,{children:""})," and ",(0,r.jsx)(s.code,{children:""})," components, we provide a new ",(0,r.jsx)(s.a,{href:"/docs/docusaurus-core#useBrokenLinks",children:(0,r.jsx)(s.code,{children:"useBrokenLinks"})})," React hook API."]}),(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Most Docusaurus users don't need to care about it"}),", built-in components (",(0,r.jsx)(s.code,{children:"docusaurus/Link"})," and ",(0,r.jsx)(s.code,{children:"@theme/Heading"}),") already use it internally."]})]}),"\n",(0,r.jsxs)(s.h3,{id:"parsefrontmatter-hook",children:[(0,r.jsx)(s.code,{children:"parseFrontMatter"})," hook"]}),"\n",(0,r.jsxs)(s.p,{children:["In ",(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9624",children:"#9624"}),", we added a new ",(0,r.jsxs)(s.a,{href:"/docs/api/docusaurus-config#markdown",children:[(0,r.jsx)(s.code,{children:"siteConfig.markdown.parseFrontMatter"})," function hook"]}),"."]}),"\n",(0,r.jsx)(s.p,{children:"This makes it possible to implement convenient front matter transformations, shortcuts, or to integrate with external systems using front matter that Docusaurus plugins do not support."}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n markdown: {\n // highlight-start\n parseFrontMatter: async (params) => {\n // Reuse the default parser\n const result = await params.defaultParseFrontMatter(params);\n\n // Process front matter description placeholders\n result.frontMatter.description =\n result.frontMatter.description?.replaceAll('{{MY_VAR}}', 'MY_VALUE');\n\n // Create your own front matter shortcut\n if (result.frontMatter.i_do_not_want_docs_pagination) {\n result.frontMatter.pagination_prev = null;\n result.frontMatter.pagination_next = null;\n }\n\n // Rename an unsupported front matter coming from another system\n if (result.frontMatter.cms_seo_summary) {\n result.frontMatter.description = result.frontMatter.cms_seo_summary;\n delete result.frontMatter.cms_seo_summary;\n }\n\n return result;\n },\n // highlight-end\n },\n};\n"})}),"\n",(0,r.jsxs)(s.p,{children:["Read the ",(0,r.jsx)(s.a,{href:"/docs/markdown-features#front-matter",children:"front matter guide"})," and the ",(0,r.jsxs)(s.a,{href:"/docs/api/docusaurus-config#markdown",children:[(0,r.jsx)(s.code,{children:"parseFrontMatter"})," API ref"]})," for details."]}),"\n",(0,r.jsx)(s.h2,{id:"other-changes",children:"Other changes"}),"\n",(0,r.jsx)(s.p,{children:"Other notable changes include:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9674",children:"#9674"}),": add ",(0,r.jsx)(s.code,{children:"siteConfig.markdown.remarkRehypeOptions"})," to pass options to ",(0,r.jsx)(s.code,{children:"remark-rehype"}),", letting you customize things such as MDX footnote label"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9671",children:"#9671"}),": add code block MagicComments support for (Visual) Basic/Batch/Fortran/COBOL/ML"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9610",children:"#9610"}),": enable CLI port configuration via ",(0,r.jsx)(s.code,{children:"PORT"})," environment variable"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9477",children:"#9477"}),": complete Brazilian Portuguese (pt-BR) translations"]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["Check the ",(0,r.jsx)(s.strong,{children:(0,r.jsx)(s.a,{href:"/changelog/3.1.0",children:"3.1.0 changelog entry"})})," for an exhaustive list of changes."]})]})}function u(e={}){let{wrapper:s}={...(0,o.a)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},51118:function(e,s,t){t.d(s,{Z:()=>o});var n=t(85893);t(67294);var r=t(14522);function o(e){let{url:s}=e;return(0,n.jsx)("div",{style:{padding:10},children:(0,n.jsx)(r.Z,{url:s,style:{minWidth:"min(100%,45vw)",width:800,maxWidth:"100%",overflow:"hidden"},bodyStyle:{padding:0},children:(0,n.jsx)("iframe",{src:s,title:s,style:{display:"block",width:"100%",height:300}})})})}},14522:function(e,s,t){t.d(s,{Z:()=>i});var n=t(85893);t(67294);var r=t(90496);let o="dot_giz1",a="bar_rrRL";function i(e){let{children:s,minHeight:t,url:i="http://localhost:3000",style:c,bodyStyle:l}=e;return(0,n.jsxs)("div",{className:"browserWindow_my1Q",style:{...c,minHeight:t},children:[(0,n.jsxs)("div",{className:"browserWindowHeader_jXSR",children:[(0,n.jsxs)("div",{className:"buttons_uHc7",children:[(0,n.jsx)("span",{className:o,style:{background:"#f25f58"}}),(0,n.jsx)("span",{className:o,style:{background:"#fbbe3c"}}),(0,n.jsx)("span",{className:o,style:{background:"#58cb42"}})]}),(0,n.jsx)("div",{className:(0,r.Z)("browserWindowAddressBar_Pd8y","text--truncate"),children:i}),(0,n.jsx)("div",{className:"browserWindowMenuIcon_Vhuh",children:(0,n.jsxs)("div",{children:[(0,n.jsx)("span",{className:a}),(0,n.jsx)("span",{className:a}),(0,n.jsx)("span",{className:a})]})})]}),(0,n.jsx)("div",{className:"browserWindowBody_Idgs",style:l,children:s})]})}},39468:function(e,s,t){t.d(s,{Z:()=>o});var n=t(85893),r=t(67294);function o(e){let{children:s="Boom!",message:t="Boom!\nSomething bad happened, but you can try again!",cause:o}=e,[a,i]=(0,r.useState)(!1);if(a)throw Error(t,{cause:o?Error(o):void 0});return(0,n.jsx)("button",{className:"button button--danger",type:"button",onClick:()=>i(!0),children:s})}},80980:function(e,s,t){t.d(s,{Z:()=>i,a:()=>a});var n=t(67294);let r={},o=n.createContext(r);function a(e){let s=n.useContext(o);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function i(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),n.createElement(o.Provider,{value:s},e.children)}},70694:function(e){e.exports=JSON.parse('{"permalink":"/blog/releases/3.1","editUrl":"https://github.com/facebook/docusaurus/edit/main/website/blog/releases/3.1/index.mdx","source":"@site/blog/releases/3.1/index.mdx","title":"Docusaurus 3.1","description":"We are happy to announce Docusaurus 3.1.","date":"2024-01-05T00:00:00.000Z","tags":[{"inline":false,"label":"Release","permalink":"/blog/tags/release","description":"Blog posts about Docusaurus\' new releases"}],"readingTime":1.665,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer, This Week In React editor","url":"https://thisweekinreact.com","page":{"permalink":"/blog/authors/slorber"},"description":"A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.","socials":{"bluesky":"https://bsky.app/profile/sebastienlorber.com","x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","instagram":"https://www.instagram.com/thisweekinreact","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"}],"frontMatter":{"title":"Docusaurus 3.1","authors":["slorber"],"tags":["release"],"image":"./img/social-card.png","date":"2024-01-05T00:00:00.000Z"},"unlisted":false,"lastUpdatedAt":1739456991000,"lastUpdatedBy":"S\xe9bastien Lorber","prevItem":{"title":"Docusaurus 3.2","permalink":"/blog/releases/3.2"},"nextItem":{"title":"Announcing Docusaurus 3.0","permalink":"/blog/releases/3.0"}}')}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["23008"],{23491:function(e,s,t){t.d(s,{Z:()=>n});let n=t.p+"assets/images/social-card-e1b6e0c51be29d4ab2d4c966d220410c.png"},99203:function(e,s,t){t.d(s,{Z:()=>n});let n=t.p+"assets/images/broken-anchor-4191e5dd94aef9e8c5e3524880670f0f.jpg"},34873:function(e,s,t){t.d(s,{Z:()=>n});let n=t.p+"assets/images/social-card-e1b6e0c51be29d4ab2d4c966d220410c.png"},93e3:function(e,s,t){t.r(s),t.d(s,{assets:()=>c,contentTitle:()=>i,default:()=>u,frontMatter:()=>a,metadata:()=>n,toc:()=>l});var n=t(70694),r=t(85893),o=t(80980);t(14522),t(51118),t(39468);let a={title:"Docusaurus 3.1",authors:["slorber"],tags:["release"],image:"./img/social-card.png",date:new Date("2024-01-05T00:00:00.000Z")},i=void 0,c={image:t(23491).Z,authorsImageUrls:[void 0]},l=[{value:"Highlights",id:"highlights",level:2},{value:"Broken anchors checker",id:"broken-anchors-checker",level:3},{value:"parseFrontMatter hook",id:"parsefrontmatter-hook",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",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.p,{children:["We are happy to announce ",(0,r.jsx)(s.strong,{children:"Docusaurus 3.1"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["The upgrade should be easy: as explained in our ",(0,r.jsx)(s.a,{href:"/community/release-process",children:"release process documentation"}),", minor versions respect ",(0,r.jsx)(s.a,{href:"https://semver.org/",children:"Semantic Versioning"}),"."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.img,{alt:"Docusaurus blog post social card",src:t(34873).Z+"",width:"1200",height:"600"})}),"\n","\n",(0,r.jsx)(s.h2,{id:"highlights",children:"Highlights"}),"\n",(0,r.jsx)(s.h3,{id:"broken-anchors-checker",children:"Broken anchors checker"}),"\n",(0,r.jsxs)(s.p,{children:["In ",(0,r.jsx)(s.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,r.jsx)(s.p,{children:(0,r.jsx)(s.img,{alt:"Docusaurus blog post social card",src:t(99203).Z+"",width:"1920",height:"896"})}),"\n",(0,r.jsxs)(s.admonition,{title:"Make it fail fast",type:"tip",children:[(0,r.jsxs)(s.p,{children:["The new ",(0,r.jsx)(s.a,{href:"/docs/api/docusaurus-config#onBrokenAnchors",children:(0,r.jsx)(s.code,{children:"onBrokenAnchors"})})," option has value ",(0,r.jsx)(s.code,{children:"warn"})," by default, for retro-compatibility reasons."]}),(0,r.jsxs)(s.p,{children:["We recommend to turn it to ",(0,r.jsx)(s.code,{children:"throw"})," and fail your CI builds instead of deploying broken anchors to productions."]})]}),"\n",(0,r.jsxs)(s.admonition,{type:"note",children:[(0,r.jsxs)(s.p,{children:["For users and plugin authors implementing custom ",(0,r.jsx)(s.code,{children:""})," and ",(0,r.jsx)(s.code,{children:""})," components, we provide a new ",(0,r.jsx)(s.a,{href:"/docs/docusaurus-core#useBrokenLinks",children:(0,r.jsx)(s.code,{children:"useBrokenLinks"})})," React hook API."]}),(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Most Docusaurus users don't need to care about it"}),", built-in components (",(0,r.jsx)(s.code,{children:"docusaurus/Link"})," and ",(0,r.jsx)(s.code,{children:"@theme/Heading"}),") already use it internally."]})]}),"\n",(0,r.jsxs)(s.h3,{id:"parsefrontmatter-hook",children:[(0,r.jsx)(s.code,{children:"parseFrontMatter"})," hook"]}),"\n",(0,r.jsxs)(s.p,{children:["In ",(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9624",children:"#9624"}),", we added a new ",(0,r.jsxs)(s.a,{href:"/docs/api/docusaurus-config#markdown",children:[(0,r.jsx)(s.code,{children:"siteConfig.markdown.parseFrontMatter"})," function hook"]}),"."]}),"\n",(0,r.jsx)(s.p,{children:"This makes it possible to implement convenient front matter transformations, shortcuts, or to integrate with external systems using front matter that Docusaurus plugins do not support."}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n markdown: {\n // highlight-start\n parseFrontMatter: async (params) => {\n // Reuse the default parser\n const result = await params.defaultParseFrontMatter(params);\n\n // Process front matter description placeholders\n result.frontMatter.description =\n result.frontMatter.description?.replaceAll('{{MY_VAR}}', 'MY_VALUE');\n\n // Create your own front matter shortcut\n if (result.frontMatter.i_do_not_want_docs_pagination) {\n result.frontMatter.pagination_prev = null;\n result.frontMatter.pagination_next = null;\n }\n\n // Rename an unsupported front matter coming from another system\n if (result.frontMatter.cms_seo_summary) {\n result.frontMatter.description = result.frontMatter.cms_seo_summary;\n delete result.frontMatter.cms_seo_summary;\n }\n\n return result;\n },\n // highlight-end\n },\n};\n"})}),"\n",(0,r.jsxs)(s.p,{children:["Read the ",(0,r.jsx)(s.a,{href:"/docs/markdown-features#front-matter",children:"front matter guide"})," and the ",(0,r.jsxs)(s.a,{href:"/docs/api/docusaurus-config#markdown",children:[(0,r.jsx)(s.code,{children:"parseFrontMatter"})," API ref"]})," for details."]}),"\n",(0,r.jsx)(s.h2,{id:"other-changes",children:"Other changes"}),"\n",(0,r.jsx)(s.p,{children:"Other notable changes include:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9674",children:"#9674"}),": add ",(0,r.jsx)(s.code,{children:"siteConfig.markdown.remarkRehypeOptions"})," to pass options to ",(0,r.jsx)(s.code,{children:"remark-rehype"}),", letting you customize things such as MDX footnote label"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9671",children:"#9671"}),": add code block MagicComments support for (Visual) Basic/Batch/Fortran/COBOL/ML"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9610",children:"#9610"}),": enable CLI port configuration via ",(0,r.jsx)(s.code,{children:"PORT"})," environment variable"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9477",children:"#9477"}),": complete Brazilian Portuguese (pt-BR) translations"]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["Check the ",(0,r.jsx)(s.strong,{children:(0,r.jsx)(s.a,{href:"/changelog/3.1.0",children:"3.1.0 changelog entry"})})," for an exhaustive list of changes."]})]})}function u(e={}){let{wrapper:s}={...(0,o.a)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},51118:function(e,s,t){t.d(s,{Z:()=>o});var n=t(85893);t(67294);var r=t(14522);function o(e){let{url:s}=e;return(0,n.jsx)("div",{style:{padding:10},children:(0,n.jsx)(r.Z,{url:s,style:{minWidth:"min(100%,45vw)",width:800,maxWidth:"100%",overflow:"hidden"},bodyStyle:{padding:0},children:(0,n.jsx)("iframe",{src:s,title:s,style:{display:"block",width:"100%",height:300}})})})}},14522:function(e,s,t){t.d(s,{Z:()=>i});var n=t(85893);t(67294);var r=t(90496);let o="dot_giz1",a="bar_rrRL";function i(e){let{children:s,minHeight:t,url:i="http://localhost:3000",style:c,bodyStyle:l}=e;return(0,n.jsxs)("div",{className:"browserWindow_my1Q",style:{...c,minHeight:t},children:[(0,n.jsxs)("div",{className:"browserWindowHeader_jXSR",children:[(0,n.jsxs)("div",{className:"buttons_uHc7",children:[(0,n.jsx)("span",{className:o,style:{background:"#f25f58"}}),(0,n.jsx)("span",{className:o,style:{background:"#fbbe3c"}}),(0,n.jsx)("span",{className:o,style:{background:"#58cb42"}})]}),(0,n.jsx)("div",{className:(0,r.Z)("browserWindowAddressBar_Pd8y","text--truncate"),children:i}),(0,n.jsx)("div",{className:"browserWindowMenuIcon_Vhuh",children:(0,n.jsxs)("div",{children:[(0,n.jsx)("span",{className:a}),(0,n.jsx)("span",{className:a}),(0,n.jsx)("span",{className:a})]})})]}),(0,n.jsx)("div",{className:"browserWindowBody_Idgs",style:l,children:s})]})}},39468:function(e,s,t){t.d(s,{Z:()=>o});var n=t(85893),r=t(67294);function o(e){let{children:s="Boom!",message:t="Boom!\nSomething bad happened, but you can try again!",cause:o}=e,[a,i]=(0,r.useState)(!1);if(a)throw Error(t,{cause:o?Error(o):void 0});return(0,n.jsx)("button",{className:"button button--danger",type:"button",onClick:()=>i(!0),children:s})}},80980:function(e,s,t){t.d(s,{Z:()=>i,a:()=>a});var n=t(67294);let r={},o=n.createContext(r);function a(e){let s=n.useContext(o);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function i(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),n.createElement(o.Provider,{value:s},e.children)}},70694:function(e){e.exports=JSON.parse('{"permalink":"/blog/releases/3.1","editUrl":"https://github.com/facebook/docusaurus/edit/main/website/blog/releases/3.1/index.mdx","source":"@site/blog/releases/3.1/index.mdx","title":"Docusaurus 3.1","description":"We are happy to announce Docusaurus 3.1.","date":"2024-01-05T00:00:00.000Z","tags":[{"inline":false,"label":"Release","permalink":"/blog/tags/release","description":"Blog posts about Docusaurus\' new releases"}],"readingTime":1.665,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer, This Week In React editor","url":"https://thisweekinreact.com","page":{"permalink":"/blog/authors/slorber"},"description":"A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.","socials":{"bluesky":"https://bsky.app/profile/sebastienlorber.com","x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","instagram":"https://www.instagram.com/thisweekinreact","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"}],"frontMatter":{"title":"Docusaurus 3.1","authors":["slorber"],"tags":["release"],"image":"./img/social-card.png","date":"2024-01-05T00:00:00.000Z"},"unlisted":false,"lastUpdatedAt":1739551601000,"lastUpdatedBy":"S\xe9bastien Lorber","prevItem":{"title":"Docusaurus 3.2","permalink":"/blog/releases/3.2"},"nextItem":{"title":"Announcing Docusaurus 3.0","permalink":"/blog/releases/3.0"}}')}}]);
\ No newline at end of file
diff --git a/assets/js/03a06760.ebf62930.js b/assets/js/03a06760.235041f2.js
similarity index 99%
rename from assets/js/03a06760.ebf62930.js
rename to assets/js/03a06760.235041f2.js
index 76e3573c60..8a869cfe7e 100644
--- a/assets/js/03a06760.ebf62930.js
+++ b/assets/js/03a06760.235041f2.js
@@ -1,4 +1,4 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["37874"],{97199:function(e,t,n){n.r(t),n.d(t,{default:()=>m,frontMatter:()=>u,metadata:()=>r,assets:()=>h,toc:()=>p,contentTitle:()=>d});var r=JSON.parse('{"id":"api/plugins/plugin-google-analytics","title":"\uD83D\uDCE6 plugin-google-analytics","description":"The default Google Analytics plugin. It is a JavaScript library for measuring how users interact with your website in the production build. If you are using Google Analytics 4 you might need to consider using plugin-google-gtag instead.","source":"@site/docs/api/plugins/plugin-google-analytics.mdx","sourceDirName":"api/plugins","slug":"/api/plugins/@docusaurus/plugin-google-analytics","permalink":"/docs/api/plugins/@docusaurus/plugin-google-analytics","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/api/plugins/plugin-google-analytics.mdx","tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739456991000,"sidebarPosition":6,"frontMatter":{"sidebar_position":6,"slug":"/api/plugins/@docusaurus/plugin-google-analytics"},"sidebar":"api","previous":{"title":"\uD83D\uDCE6 plugin-debug","permalink":"/docs/api/plugins/@docusaurus/plugin-debug"},"next":{"title":"\uD83D\uDCE6 plugin-google-gtag","permalink":"/docs/api/plugins/@docusaurus/plugin-google-gtag"}}'),s=n(85893),l=n(80980),o=n(15398),a=n(58636),i=n(32240),c=n(66359);let u={sidebar_position:6,slug:"/api/plugins/@docusaurus/plugin-google-analytics"},d="\uD83D\uDCE6 plugin-google-analytics",h={},p=[{value:"Installation",id:"installation",level:2},{value:"Configuration",id:"configuration",level:2},{value:"Example configuration",id:"ex-config",level:3}];function g(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,l.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"-plugin-google-analytics",children:"\uD83D\uDCE6 plugin-google-analytics"})}),"\n","\n",(0,s.jsxs)(t.p,{children:["The default ",(0,s.jsx)(t.a,{href:"https://developers.google.com/analytics/devguides/collection/analyticsjs/",children:"Google Analytics"})," plugin. It is a JavaScript library for measuring how users interact with your website ",(0,s.jsx)(t.strong,{children:"in the production build"}),". If you are using Google Analytics 4 you might need to consider using ",(0,s.jsx)(t.a,{href:"/docs/api/plugins/@docusaurus/plugin-google-gtag",children:"plugin-google-gtag"})," instead."]}),"\n",(0,s.jsxs)(t.admonition,{title:"Deprecated",type:"danger",children:[(0,s.jsxs)(t.p,{children:["This plugin is ",(0,s.jsx)(t.strong,{children:"deprecated"})," and became useless on July 1, 2023."]}),(0,s.jsxs)(t.p,{children:["Google is ",(0,s.jsx)(t.a,{href:"https://blog.google/products/marketingplatform/analytics/prepare-for-future-with-google-analytics-4/",children:"moving away from Universal Analytics"}),"."]}),(0,s.jsxs)(t.p,{children:["If you are still using this plugin with a ",(0,s.jsx)(t.code,{children:"UA-*"})," tracking id, you should create a Google Analytics 4 account as soon as possible, and use ",(0,s.jsx)(t.a,{href:"/docs/api/plugins/@docusaurus/plugin-google-gtag",children:(0,s.jsx)(t.code,{children:"@docusaurus/plugin-google-gtag"})})," instead of this plugin. More details ",(0,s.jsx)(t.a,{href:"https://github.com/facebook/docusaurus/issues/7221",children:"here"}),"."]})]}),"\n",(0,s.jsx)(t.admonition,{title:"production only",type:"warning",children:(0,s.jsxs)(t.p,{children:["This plugin is always inactive in development and ",(0,s.jsx)(t.strong,{children:"only active in production"})," to avoid polluting the analytics statistics."]})}),"\n",(0,s.jsx)(t.h2,{id:"installation",children:"Installation"}),"\n",(0,s.jsxs)(o.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(a.Z,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install --save @docusaurus/plugin-google-analytics\n"})})}),(0,s.jsx)(a.Z,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add @docusaurus/plugin-google-analytics\n"})})}),(0,s.jsx)(a.Z,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add @docusaurus/plugin-google-analytics\n"})})})]}),"\n",(0,s.jsxs)(t.admonition,{type:"tip",children:[(0,s.jsxs)(t.p,{children:["If you use the preset ",(0,s.jsx)(t.code,{children:"@docusaurus/preset-classic"}),", you don't need to install this plugin as a dependency."]}),(0,s.jsxs)(t.p,{children:["You can configure this plugin through the ",(0,s.jsx)(t.a,{href:"/docs/using-plugins#docusauruspreset-classic",children:"preset options"}),"."]})]}),"\n",(0,s.jsx)(t.h2,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsx)(t.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(i.Z,{children:(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Default"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"trackingID"})}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"string"})}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.strong,{children:"Required"})}),(0,s.jsx)(t.td,{children:"The tracking ID of your analytics service."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"anonymizeIP"})}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"boolean"})}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"false"})}),(0,s.jsx)(t.td,{children:"Whether the IP should be anonymized when sending requests."})]})]})]})}),"\n",(0,s.jsx)(t.h3,{id:"ex-config",children:"Example configuration"}),"\n",(0,s.jsx)(t.p,{children:"You can configure this plugin through preset options or plugin options."}),"\n",(0,s.jsx)(t.admonition,{type:"tip",children:(0,s.jsx)(t.p,{children:"Most Docusaurus users configure this plugin through the preset options."})}),"\n","\n",(0,s.jsx)(c.Z,{pluginName:"@docusaurus/plugin-google-analytics",presetOptionName:"googleAnalytics",code:"{\n trackingID: 'UA-141789564-1',\n anonymizeIP: true,\n}"})]})}function m(e={}){let{wrapper:t}={...(0,l.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(g,{...e})}):g(e)}},58636:function(e,t,n){n.d(t,{Z:()=>l});var r=n(85893);n(67294);var s=n(90496);function l(e){let{children:t,hidden:n,className:l}=e;return(0,r.jsx)("div",{role:"tabpanel",className:(0,s.Z)("tabItem_pnkT",l),hidden:n,children:t})}},15398:function(e,t,n){n.d(t,{Z:()=>j});var r=n(85893),s=n(67294),l=n(90496),o=n(54947),a=n(3620),i=n(844),c=n(97486),u=n(32263),d=n(16971);function h(e){return s.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||s.isValidElement(e)&&function(e){let{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(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.`)})?.filter(Boolean)??[]}function p(e){let{value:t,tabValues:n}=e;return n.some(e=>e.value===t)}var g=n(71607);function m(e){let{className:t,block:n,selectedValue:s,selectValue:a,tabValues:i}=e,c=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.o5)(),d=e=>{let t=e.currentTarget,n=i[c.indexOf(t)].value;n!==s&&(u(t),a(n))},h=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{let n=c.indexOf(e.currentTarget)+1;t=c[n]??c[0];break}case"ArrowLeft":{let n=c.indexOf(e.currentTarget)-1;t=c[n]??c[c.length-1]}}t?.focus()};return(0,r.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,l.Z)("tabs",{"tabs--block":n},t),children:i.map(e=>{let{value:t,label:n,attributes:o}=e;return(0,r.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{c.push(e)},onKeyDown:h,onClick:d,...o,className:(0,l.Z)("tabs__item","tabItem_AQgk",o?.className,{"tabs__item--active":s===t}),children:n??t},t)})})}function f(e){let{lazy:t,children:n,selectedValue:o}=e,a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){let e=a.find(e=>e.props.value===o);return e?(0,s.cloneElement)(e,{className:(0,l.Z)("margin-top--md",e.props.className)}):null}return(0,r.jsx)("div",{className:"margin-top--md",children:a.map((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==o}))})}function b(e){let t=function(e){let{defaultValue:t,queryString:n=!1,groupId:r}=e,l=function(e){let{values:t,children:n}=e;return(0,s.useMemo)(()=>{let e=t??h(n).map(e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}});return!function(e){let t=(0,u.lx)(e,(e,t)=>e.value===t.value);if(t.length>0)throw Error(`Docusaurus error: Duplicate values "${t.map(e=>e.value).join(", ")}" found in . Every value needs to be unique.`)}(e),e},[t,n])}(e),[o,g]=(0,s.useState)(()=>(function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw Error("Docusaurus error: the component requires at least one children component");if(t){if(!p({value:t,tabValues:n}))throw Error(`Docusaurus error: The has a defaultValue "${t}" 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 t}let r=n.find(e=>e.default)??n[0];if(!r)throw Error("Unexpected error: 0 tabValues");return r.value})({defaultValue:t,tabValues:l})),[m,f]=function(e){let{queryString:t=!1,groupId:n}=e,r=(0,a.k6)(),l=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!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 n??null}({queryString:t,groupId:n});return[(0,c._X)(l),(0,s.useCallback)(e=>{if(!l)return;let t=new URLSearchParams(r.location.search);t.set(l,e),r.replace({...r.location,search:t.toString()})},[l,r])]}({queryString:n,groupId:r}),[b,j]=function(e){let{groupId:t}=e,n=t?`docusaurus.tab.${t}`:null,[r,l]=(0,d.Nk)(n);return[r,(0,s.useCallback)(e=>{n&&l.set(e)},[n,l])]}({groupId:r}),x=(()=>{let e=m??b;return p({value:e,tabValues:l})?e:null})();return(0,i.Z)(()=>{x&&g(x)},[x]),{selectedValue:o,selectValue:(0,s.useCallback)(e=>{if(!p({value:e,tabValues:l}))throw Error(`Can't select invalid tab value=${e}`);g(e),f(e),j(e)},[f,j,l]),tabValues:l}}(e);return(0,r.jsxs)("div",{className:(0,l.Z)("tabs-container","tabList_Qoir"),children:[(0,r.jsx)(m,{...t,...e}),(0,r.jsx)(f,{...t,...e})]})}function j(e){let t=(0,g.Z)();return(0,r.jsx)(b,{...e,children:h(e.children)},String(t))}},56497:function(e,t,n){n.d(t,{Z:()=>l});var r=n(85893);n(67294);var s=n(71607);function l(e){let{children:t,fallback:n}=e;return(0,s.Z)()?(0,r.jsx)(r.Fragment,{children:t?.()}):n??null}},32240:function(e,t,n){n.d(t,{Z:()=>i});var r=n(85893),s=n(67294),l=n(96700),o=n(3620);let a=s.forwardRef(function(e,t){let{name:n,children:a}=e,i=function(e){let t=e;for(;(0,s.isValidElement)(t);)[t]=s.Children.toArray(t.props.children);if("string"!=typeof t)throw Error(`Could not extract APITable row name from JSX tree:
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["37874"],{97199:function(e,t,n){n.r(t),n.d(t,{default:()=>m,frontMatter:()=>u,metadata:()=>r,assets:()=>h,toc:()=>p,contentTitle:()=>d});var r=JSON.parse('{"id":"api/plugins/plugin-google-analytics","title":"\uD83D\uDCE6 plugin-google-analytics","description":"The default Google Analytics plugin. It is a JavaScript library for measuring how users interact with your website in the production build. If you are using Google Analytics 4 you might need to consider using plugin-google-gtag instead.","source":"@site/docs/api/plugins/plugin-google-analytics.mdx","sourceDirName":"api/plugins","slug":"/api/plugins/@docusaurus/plugin-google-analytics","permalink":"/docs/api/plugins/@docusaurus/plugin-google-analytics","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/api/plugins/plugin-google-analytics.mdx","tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739551601000,"sidebarPosition":6,"frontMatter":{"sidebar_position":6,"slug":"/api/plugins/@docusaurus/plugin-google-analytics"},"sidebar":"api","previous":{"title":"\uD83D\uDCE6 plugin-debug","permalink":"/docs/api/plugins/@docusaurus/plugin-debug"},"next":{"title":"\uD83D\uDCE6 plugin-google-gtag","permalink":"/docs/api/plugins/@docusaurus/plugin-google-gtag"}}'),s=n(85893),l=n(80980),o=n(15398),a=n(58636),i=n(32240),c=n(66359);let u={sidebar_position:6,slug:"/api/plugins/@docusaurus/plugin-google-analytics"},d="\uD83D\uDCE6 plugin-google-analytics",h={},p=[{value:"Installation",id:"installation",level:2},{value:"Configuration",id:"configuration",level:2},{value:"Example configuration",id:"ex-config",level:3}];function g(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,l.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"-plugin-google-analytics",children:"\uD83D\uDCE6 plugin-google-analytics"})}),"\n","\n",(0,s.jsxs)(t.p,{children:["The default ",(0,s.jsx)(t.a,{href:"https://developers.google.com/analytics/devguides/collection/analyticsjs/",children:"Google Analytics"})," plugin. It is a JavaScript library for measuring how users interact with your website ",(0,s.jsx)(t.strong,{children:"in the production build"}),". If you are using Google Analytics 4 you might need to consider using ",(0,s.jsx)(t.a,{href:"/docs/api/plugins/@docusaurus/plugin-google-gtag",children:"plugin-google-gtag"})," instead."]}),"\n",(0,s.jsxs)(t.admonition,{title:"Deprecated",type:"danger",children:[(0,s.jsxs)(t.p,{children:["This plugin is ",(0,s.jsx)(t.strong,{children:"deprecated"})," and became useless on July 1, 2023."]}),(0,s.jsxs)(t.p,{children:["Google is ",(0,s.jsx)(t.a,{href:"https://blog.google/products/marketingplatform/analytics/prepare-for-future-with-google-analytics-4/",children:"moving away from Universal Analytics"}),"."]}),(0,s.jsxs)(t.p,{children:["If you are still using this plugin with a ",(0,s.jsx)(t.code,{children:"UA-*"})," tracking id, you should create a Google Analytics 4 account as soon as possible, and use ",(0,s.jsx)(t.a,{href:"/docs/api/plugins/@docusaurus/plugin-google-gtag",children:(0,s.jsx)(t.code,{children:"@docusaurus/plugin-google-gtag"})})," instead of this plugin. More details ",(0,s.jsx)(t.a,{href:"https://github.com/facebook/docusaurus/issues/7221",children:"here"}),"."]})]}),"\n",(0,s.jsx)(t.admonition,{title:"production only",type:"warning",children:(0,s.jsxs)(t.p,{children:["This plugin is always inactive in development and ",(0,s.jsx)(t.strong,{children:"only active in production"})," to avoid polluting the analytics statistics."]})}),"\n",(0,s.jsx)(t.h2,{id:"installation",children:"Installation"}),"\n",(0,s.jsxs)(o.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(a.Z,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install --save @docusaurus/plugin-google-analytics\n"})})}),(0,s.jsx)(a.Z,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add @docusaurus/plugin-google-analytics\n"})})}),(0,s.jsx)(a.Z,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add @docusaurus/plugin-google-analytics\n"})})})]}),"\n",(0,s.jsxs)(t.admonition,{type:"tip",children:[(0,s.jsxs)(t.p,{children:["If you use the preset ",(0,s.jsx)(t.code,{children:"@docusaurus/preset-classic"}),", you don't need to install this plugin as a dependency."]}),(0,s.jsxs)(t.p,{children:["You can configure this plugin through the ",(0,s.jsx)(t.a,{href:"/docs/using-plugins#docusauruspreset-classic",children:"preset options"}),"."]})]}),"\n",(0,s.jsx)(t.h2,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsx)(t.p,{children:"Accepted fields:"}),"\n",(0,s.jsx)(i.Z,{children:(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Default"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"trackingID"})}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"string"})}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.strong,{children:"Required"})}),(0,s.jsx)(t.td,{children:"The tracking ID of your analytics service."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"anonymizeIP"})}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"boolean"})}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"false"})}),(0,s.jsx)(t.td,{children:"Whether the IP should be anonymized when sending requests."})]})]})]})}),"\n",(0,s.jsx)(t.h3,{id:"ex-config",children:"Example configuration"}),"\n",(0,s.jsx)(t.p,{children:"You can configure this plugin through preset options or plugin options."}),"\n",(0,s.jsx)(t.admonition,{type:"tip",children:(0,s.jsx)(t.p,{children:"Most Docusaurus users configure this plugin through the preset options."})}),"\n","\n",(0,s.jsx)(c.Z,{pluginName:"@docusaurus/plugin-google-analytics",presetOptionName:"googleAnalytics",code:"{\n trackingID: 'UA-141789564-1',\n anonymizeIP: true,\n}"})]})}function m(e={}){let{wrapper:t}={...(0,l.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(g,{...e})}):g(e)}},58636:function(e,t,n){n.d(t,{Z:()=>l});var r=n(85893);n(67294);var s=n(90496);function l(e){let{children:t,hidden:n,className:l}=e;return(0,r.jsx)("div",{role:"tabpanel",className:(0,s.Z)("tabItem_pnkT",l),hidden:n,children:t})}},15398:function(e,t,n){n.d(t,{Z:()=>j});var r=n(85893),s=n(67294),l=n(90496),o=n(54947),a=n(3620),i=n(844),c=n(97486),u=n(32263),d=n(16971);function h(e){return s.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||s.isValidElement(e)&&function(e){let{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(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.`)})?.filter(Boolean)??[]}function p(e){let{value:t,tabValues:n}=e;return n.some(e=>e.value===t)}var g=n(71607);function m(e){let{className:t,block:n,selectedValue:s,selectValue:a,tabValues:i}=e,c=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.o5)(),d=e=>{let t=e.currentTarget,n=i[c.indexOf(t)].value;n!==s&&(u(t),a(n))},h=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{let n=c.indexOf(e.currentTarget)+1;t=c[n]??c[0];break}case"ArrowLeft":{let n=c.indexOf(e.currentTarget)-1;t=c[n]??c[c.length-1]}}t?.focus()};return(0,r.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,l.Z)("tabs",{"tabs--block":n},t),children:i.map(e=>{let{value:t,label:n,attributes:o}=e;return(0,r.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{c.push(e)},onKeyDown:h,onClick:d,...o,className:(0,l.Z)("tabs__item","tabItem_AQgk",o?.className,{"tabs__item--active":s===t}),children:n??t},t)})})}function f(e){let{lazy:t,children:n,selectedValue:o}=e,a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){let e=a.find(e=>e.props.value===o);return e?(0,s.cloneElement)(e,{className:(0,l.Z)("margin-top--md",e.props.className)}):null}return(0,r.jsx)("div",{className:"margin-top--md",children:a.map((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==o}))})}function b(e){let t=function(e){let{defaultValue:t,queryString:n=!1,groupId:r}=e,l=function(e){let{values:t,children:n}=e;return(0,s.useMemo)(()=>{let e=t??h(n).map(e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}});return!function(e){let t=(0,u.lx)(e,(e,t)=>e.value===t.value);if(t.length>0)throw Error(`Docusaurus error: Duplicate values "${t.map(e=>e.value).join(", ")}" found in . Every value needs to be unique.`)}(e),e},[t,n])}(e),[o,g]=(0,s.useState)(()=>(function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw Error("Docusaurus error: the component requires at least one children component");if(t){if(!p({value:t,tabValues:n}))throw Error(`Docusaurus error: The has a defaultValue "${t}" 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 t}let r=n.find(e=>e.default)??n[0];if(!r)throw Error("Unexpected error: 0 tabValues");return r.value})({defaultValue:t,tabValues:l})),[m,f]=function(e){let{queryString:t=!1,groupId:n}=e,r=(0,a.k6)(),l=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!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 n??null}({queryString:t,groupId:n});return[(0,c._X)(l),(0,s.useCallback)(e=>{if(!l)return;let t=new URLSearchParams(r.location.search);t.set(l,e),r.replace({...r.location,search:t.toString()})},[l,r])]}({queryString:n,groupId:r}),[b,j]=function(e){let{groupId:t}=e,n=t?`docusaurus.tab.${t}`:null,[r,l]=(0,d.Nk)(n);return[r,(0,s.useCallback)(e=>{n&&l.set(e)},[n,l])]}({groupId:r}),x=(()=>{let e=m??b;return p({value:e,tabValues:l})?e:null})();return(0,i.Z)(()=>{x&&g(x)},[x]),{selectedValue:o,selectValue:(0,s.useCallback)(e=>{if(!p({value:e,tabValues:l}))throw Error(`Can't select invalid tab value=${e}`);g(e),f(e),j(e)},[f,j,l]),tabValues:l}}(e);return(0,r.jsxs)("div",{className:(0,l.Z)("tabs-container","tabList_Qoir"),children:[(0,r.jsx)(m,{...t,...e}),(0,r.jsx)(f,{...t,...e})]})}function j(e){let t=(0,g.Z)();return(0,r.jsx)(b,{...e,children:h(e.children)},String(t))}},56497:function(e,t,n){n.d(t,{Z:()=>l});var r=n(85893);n(67294);var s=n(71607);function l(e){let{children:t,fallback:n}=e;return(0,s.Z)()?(0,r.jsx)(r.Fragment,{children:t?.()}):n??null}},32240:function(e,t,n){n.d(t,{Z:()=>i});var r=n(85893),s=n(67294),l=n(96700),o=n(3620);let a=s.forwardRef(function(e,t){let{name:n,children:a}=e,i=function(e){let t=e;for(;(0,s.isValidElement)(t);)[t]=s.Children.toArray(t.props.children);if("string"!=typeof t)throw Error(`Could not extract APITable row name from JSX tree:
${JSON.stringify(e,null,2)}`);return t}(a),c=n?`${n}-${i}`:i,u=`#${c}`,d=(0,o.k6)();return(0,l.Z)().collectAnchor(c),(0,r.jsx)("tr",{id:c,tabIndex:0,ref:d.location.hash===u?t:void 0,onClick:e=>{let t="TD"===e.target.tagName.toUpperCase(),n=!!window.getSelection()?.toString();t&&!n&&d.push(u)},onKeyDown:e=>{"Enter"===e.key&&d.push(u)},children:a.props.children})});function i(e){let{children:t,name:n}=e;if("table"!==t.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[l,o]=s.Children.toArray(t.props.children),i=(0,s.useRef)(null);(0,s.useEffect)(()=>{i.current?.focus()},[i]);let c=s.Children.map(o.props.children,e=>(0,r.jsx)(a,{name:n,ref:i,children:e}));return(0,r.jsxs)("table",{className:"apiTable_e8hp",children:[l,(0,r.jsx)("tbody",{children:c})]})}},66359:function(e,t,n){n.d(t,{Z:()=>d});var r=n(85893);n(67294);var s=n(35363),l=n(90158),o=n(77827),a=n(15398),i=n(58636),c=n(95998);let u=void 0;function d(e){let{code:t,pluginName:n,presetOptionName:d}=e,h=(0,l.zu)(u).path;return(0,r.jsxs)(a.Z,{groupId:"api-config-ex",children:[(0,r.jsxs)(i.Z,{value:"preset",label:(0,o.I)({message:"Preset options"}),children:[(0,r.jsx)("p",{children:(0,r.jsx)(o.Z,{id:"apiDocs.configTabs.presetOptions.description",values:{presetLink:(0,r.jsx)(s.Z,{to:`${h}/using-plugins#docusauruspreset-classic`,children:(0,r.jsx)(o.Z,{children:"preset options"})})},children:"If you use a preset, configure this plugin through the {presetLink}:"})}),(0,r.jsx)(c.Z,{language:"js",title:"docusaurus.config.js",children:`module.exports = {
presets: [
[
diff --git a/assets/js/03f86864.c91ace50.js b/assets/js/03f86864.6aefdeeb.js
similarity index 99%
rename from assets/js/03f86864.c91ace50.js
rename to assets/js/03f86864.6aefdeeb.js
index 12d696d3f6..a8d5cf11c6 100644
--- a/assets/js/03f86864.c91ace50.js
+++ b/assets/js/03f86864.6aefdeeb.js
@@ -1,2 +1,2 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["99131"],{63029:function(e,n,i){i.r(n),i.d(n,{default:()=>x,frontMatter:()=>l,metadata:()=>d,assets:()=>h,toc:()=>o,contentTitle:()=>c});var d=JSON.parse('{"id":"api/themes/theme-configuration","title":"Theme configuration","description":"This configuration applies to all main themes.","source":"@site/docs/api/themes/theme-configuration.mdx","sourceDirName":"api/themes","slug":"/api/themes/configuration","permalink":"/docs/api/themes/configuration","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/api/themes/theme-configuration.mdx","tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739456991000,"sidebarPosition":1,"frontMatter":{"sidebar_position":1,"sidebar_label":"Configuration","slug":"/api/themes/configuration","toc_max_heading_level":4},"sidebar":"api","previous":{"title":"Themes overview","permalink":"/docs/api/themes"},"next":{"title":"\uD83D\uDCE6 theme-classic","permalink":"/docs/api/themes/@docusaurus/theme-classic"}}'),s=i(85893),t=i(80980),r=i(32240);let l={sidebar_position:1,sidebar_label:"Configuration",slug:"/api/themes/configuration",toc_max_heading_level:4},c="Theme configuration",h={},o=[{value:"Common",id:"common",level:2},{value:"Color mode",id:"color-mode---dark-mode",level:3},{value:"Meta image",id:"meta-image",level:3},{value:"Metadata",id:"metadata",level:3},{value:"Announcement bar",id:"announcement-bar",level:3},{value:"Plugins",id:"plugins",level:2},{value:"Docs",id:"docs",level:3},{value:"Blog",id:"blog",level:3},{value:"Navbar",id:"navbar",level:2},{value:"Navbar logo",id:"navbar-logo",level:3},{value:"Navbar items",id:"navbar-items",level:3},{value:"Navbar link",id:"navbar-link",level:4},{value:"Navbar dropdown",id:"navbar-dropdown",level:4},{value:"Navbar doc link",id:"navbar-doc-link",level:4},{value:"Navbar linked to a sidebar",id:"navbar-doc-sidebar",level:4},{value:"Navbar docs version dropdown",id:"navbar-docs-version-dropdown",level:4},{value:"Navbar docs version",id:"navbar-docs-version",level:4},{value:"Navbar locale dropdown",id:"navbar-locale-dropdown",level:4},{value:"Navbar search",id:"navbar-search",level:4},{value:"Navbar with custom HTML",id:"navbar-with-custom-html",level:4},{value:"Auto-hide sticky navbar",id:"auto-hide-sticky-navbar",level:3},{value:"Navbar style",id:"navbar-style",level:3},{value:"CodeBlock",id:"codeblock",level:2},{value:"Theme",id:"theme",level:3},{value:"Default language",id:"default-language",level:3},{value:"Footer",id:"footer-1",level:2},{value:"Footer Links",id:"footer-links",level:3},{value:"Table of Contents",id:"table-of-contents",level:2},{value:"Hooks",id:"hooks",level:2},{value:"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.a)(),...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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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."})]}),(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)(n.code,{children:"DropdownVersions"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["Specify a custom list of versions to include in the dropdown. See ",(0,s.jsx)(n.a,{href:"/docs/versioning#docsVersionDropdown",children:"the versioning guide"})," for details."]})]})]})]})}),"\n",(0,s.jsx)(n.p,{children:"Types:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"type DropdownVersion = {\n /** Allows you to provide a custom display label for each version. */\n label?: string;\n};\n\ntype DropdownVersions = string[] | {[versionName: string]: DropdownVersion};\n"})}),"\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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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 \n \n `,\n },\n ],\n },\n ],\n // highlight-end\n },\n};\n"})}),"\n",(0,s.jsxs)(n.p,{children:["A simple footer just has a list of ",(0,s.jsx)(n.code,{children:"FooterItem"}),"s displayed in a row."]}),"\n",(0,s.jsx)(n.p,{children:"Example simple 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 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 \n \n `,\n },\n ],\n // highlight-end\n },\n};\n'})}),"\n",(0,s.jsx)(n.h2,{id:"table-of-contents",children:"Table of Contents"}),"\n",(0,s.jsxs)(n.p,{children:["You can adjust the default table of contents via ",(0,s.jsx)(n.code,{children:"themeConfig.tableOfContents"}),"."]}),"\n",(0,s.jsx)(r.Z,{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:"minHeadingLevel"})}),(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:"maxHeadingLevel"})}),(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:"Max heading level displayed in the TOC. Should be an integer between 2 and 6."})]})]})]})}),"\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 tableOfContents: {\n minHeadingLevel: 2,\n maxHeadingLevel: 5,\n },\n // highlight-end\n },\n};\n"})}),"\n",(0,s.jsx)(n.h2,{id:"hooks",children:"Hooks"}),"\n",(0,s.jsx)(n.h3,{id:"use-color-mode",children:(0,s.jsx)(n.code,{children:"useColorMode"})}),"\n",(0,s.jsx)(n.p,{children:"A React hook to access the color context. This context contains functions for setting light and dark mode and exposes boolean variable, indicating which mode is currently in use."}),"\n",(0,s.jsx)(n.p,{children:"Usage example:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-jsx",children:"import React from 'react';\n// highlight-next-line\nimport {useColorMode} from '@docusaurus/theme-common';\n\nconst Example = () => {\n // highlight-next-line\n const {colorMode, setColorMode} = useColorMode();\n\n return
Dark mode is now {colorMode === 'dark' ? 'on' : 'off'}
;\n};\n"})}),"\n",(0,s.jsxs)(n.admonition,{type:"note",children:[(0,s.jsxs)(n.p,{children:["The component calling ",(0,s.jsx)(n.code,{children:"useColorMode"})," must be a child of the ",(0,s.jsx)(n.code,{children:"Layout"})," component."]}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-jsx",children:"function ExamplePage() {\n return (\n \n \n \n );\n}\n"})})]}),"\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-theme-[themeName]"})]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Multi-instance path"}),": N/A"]}),"\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"}),": N/A"]}),"\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-theme-classic\n\u2502\n\u2502 # translations for the theme\n\u251C\u2500\u2500 navbar.json\n\u2514\u2500\u2500 footer.json\n"})})]})}function x(e={}){let{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},32240:function(e,n,i){i.d(n,{Z:()=>c});var d=i(85893),s=i(67294),t=i(96700),r=i(3620);let l=s.forwardRef(function(e,n){let{name:i,children:l}=e,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:
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["99131"],{63029:function(e,n,i){i.r(n),i.d(n,{default:()=>x,frontMatter:()=>l,metadata:()=>d,assets:()=>h,toc:()=>o,contentTitle:()=>c});var d=JSON.parse('{"id":"api/themes/theme-configuration","title":"Theme configuration","description":"This configuration applies to all main themes.","source":"@site/docs/api/themes/theme-configuration.mdx","sourceDirName":"api/themes","slug":"/api/themes/configuration","permalink":"/docs/api/themes/configuration","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/api/themes/theme-configuration.mdx","tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739551601000,"sidebarPosition":1,"frontMatter":{"sidebar_position":1,"sidebar_label":"Configuration","slug":"/api/themes/configuration","toc_max_heading_level":4},"sidebar":"api","previous":{"title":"Themes overview","permalink":"/docs/api/themes"},"next":{"title":"\uD83D\uDCE6 theme-classic","permalink":"/docs/api/themes/@docusaurus/theme-classic"}}'),s=i(85893),t=i(80980),r=i(32240);let l={sidebar_position:1,sidebar_label:"Configuration",slug:"/api/themes/configuration",toc_max_heading_level:4},c="Theme configuration",h={},o=[{value:"Common",id:"common",level:2},{value:"Color mode",id:"color-mode---dark-mode",level:3},{value:"Meta image",id:"meta-image",level:3},{value:"Metadata",id:"metadata",level:3},{value:"Announcement bar",id:"announcement-bar",level:3},{value:"Plugins",id:"plugins",level:2},{value:"Docs",id:"docs",level:3},{value:"Blog",id:"blog",level:3},{value:"Navbar",id:"navbar",level:2},{value:"Navbar logo",id:"navbar-logo",level:3},{value:"Navbar items",id:"navbar-items",level:3},{value:"Navbar link",id:"navbar-link",level:4},{value:"Navbar dropdown",id:"navbar-dropdown",level:4},{value:"Navbar doc link",id:"navbar-doc-link",level:4},{value:"Navbar linked to a sidebar",id:"navbar-doc-sidebar",level:4},{value:"Navbar docs version dropdown",id:"navbar-docs-version-dropdown",level:4},{value:"Navbar docs version",id:"navbar-docs-version",level:4},{value:"Navbar locale dropdown",id:"navbar-locale-dropdown",level:4},{value:"Navbar search",id:"navbar-search",level:4},{value:"Navbar with custom HTML",id:"navbar-with-custom-html",level:4},{value:"Auto-hide sticky navbar",id:"auto-hide-sticky-navbar",level:3},{value:"Navbar style",id:"navbar-style",level:3},{value:"CodeBlock",id:"codeblock",level:2},{value:"Theme",id:"theme",level:3},{value:"Default language",id:"default-language",level:3},{value:"Footer",id:"footer-1",level:2},{value:"Footer Links",id:"footer-links",level:3},{value:"Table of Contents",id:"table-of-contents",level:2},{value:"Hooks",id:"hooks",level:2},{value:"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.a)(),...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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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."})]}),(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)(n.code,{children:"DropdownVersions"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"undefined"})}),(0,s.jsxs)(n.td,{children:["Specify a custom list of versions to include in the dropdown. See ",(0,s.jsx)(n.a,{href:"/docs/versioning#docsVersionDropdown",children:"the versioning guide"})," for details."]})]})]})]})}),"\n",(0,s.jsx)(n.p,{children:"Types:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"type DropdownVersion = {\n /** Allows you to provide a custom display label for each version. */\n label?: string;\n};\n\ntype DropdownVersions = string[] | {[versionName: string]: DropdownVersion};\n"})}),"\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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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.Z,{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 \n \n `,\n },\n ],\n },\n ],\n // highlight-end\n },\n};\n"})}),"\n",(0,s.jsxs)(n.p,{children:["A simple footer just has a list of ",(0,s.jsx)(n.code,{children:"FooterItem"}),"s displayed in a row."]}),"\n",(0,s.jsx)(n.p,{children:"Example simple 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 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 \n \n `,\n },\n ],\n // highlight-end\n },\n};\n'})}),"\n",(0,s.jsx)(n.h2,{id:"table-of-contents",children:"Table of Contents"}),"\n",(0,s.jsxs)(n.p,{children:["You can adjust the default table of contents via ",(0,s.jsx)(n.code,{children:"themeConfig.tableOfContents"}),"."]}),"\n",(0,s.jsx)(r.Z,{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:"minHeadingLevel"})}),(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:"maxHeadingLevel"})}),(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:"Max heading level displayed in the TOC. Should be an integer between 2 and 6."})]})]})]})}),"\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 tableOfContents: {\n minHeadingLevel: 2,\n maxHeadingLevel: 5,\n },\n // highlight-end\n },\n};\n"})}),"\n",(0,s.jsx)(n.h2,{id:"hooks",children:"Hooks"}),"\n",(0,s.jsx)(n.h3,{id:"use-color-mode",children:(0,s.jsx)(n.code,{children:"useColorMode"})}),"\n",(0,s.jsx)(n.p,{children:"A React hook to access the color context. This context contains functions for setting light and dark mode and exposes boolean variable, indicating which mode is currently in use."}),"\n",(0,s.jsx)(n.p,{children:"Usage example:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-jsx",children:"import React from 'react';\n// highlight-next-line\nimport {useColorMode} from '@docusaurus/theme-common';\n\nconst Example = () => {\n // highlight-next-line\n const {colorMode, setColorMode} = useColorMode();\n\n return
Dark mode is now {colorMode === 'dark' ? 'on' : 'off'}
;\n};\n"})}),"\n",(0,s.jsxs)(n.admonition,{type:"note",children:[(0,s.jsxs)(n.p,{children:["The component calling ",(0,s.jsx)(n.code,{children:"useColorMode"})," must be a child of the ",(0,s.jsx)(n.code,{children:"Layout"})," component."]}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-jsx",children:"function ExamplePage() {\n return (\n \n \n \n );\n}\n"})})]}),"\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-theme-[themeName]"})]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Multi-instance path"}),": N/A"]}),"\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"}),": N/A"]}),"\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-theme-classic\n\u2502\n\u2502 # translations for the theme\n\u251C\u2500\u2500 navbar.json\n\u2514\u2500\u2500 footer.json\n"})})]})}function x(e={}){let{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},32240:function(e,n,i){i.d(n,{Z:()=>c});var d=i(85893),s=i(67294),t=i(96700),r=i(3620);let l=s.forwardRef(function(e,n){let{name:i,children:l}=e,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}(l),h=i?`${i}-${c}`:c,o=`#${h}`,a=(0,r.k6)();return(0,t.Z)().collectAnchor(h),(0,d.jsx)("tr",{id:h,tabIndex:0,ref:a.location.hash===o?n:void 0,onClick:e=>{let n="TD"===e.target.tagName.toUpperCase(),i=!!window.getSelection()?.toString();n&&!i&&a.push(o)},onKeyDown:e=>{"Enter"===e.key&&a.push(o)},children:l.props.children})});function c(e){let{children:n,name:i}=e;if("table"!==n.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,r]=s.Children.toArray(n.props.children),c=(0,s.useRef)(null);(0,s.useEffect)(()=>{c.current?.focus()},[c]);let h=s.Children.map(r.props.children,e=>(0,d.jsx)(l,{name:i,ref:c,children:e}));return(0,d.jsxs)("table",{className:"apiTable_e8hp",children:[t,(0,d.jsx)("tbody",{children:h})]})}},80980:function(e,n,i){i.d(n,{Z:()=>l,a:()=>r});var d=i(67294);let s={},t=d.createContext(s);function r(e){let n=d.useContext(t);return d.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),d.createElement(t.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/048b0d50.82f2e5c8.js b/assets/js/048b0d50.b45a48eb.js
similarity index 99%
rename from assets/js/048b0d50.82f2e5c8.js
rename to assets/js/048b0d50.b45a48eb.js
index 9906a3c381..002382700f 100644
--- a/assets/js/048b0d50.82f2e5c8.js
+++ b/assets/js/048b0d50.b45a48eb.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["30992"],{83119:function(e,n,t){t.r(n),t.d(n,{default:()=>h,frontMatter:()=>l,metadata:()=>a,assets:()=>d,toc:()=>u,contentTitle:()=>c});var a=JSON.parse('{"type":"mdx","permalink":"/tests/pages/diagrams","source":"@site/_dogfooding/_pages tests/diagrams.mdx","title":"Diagram Examples","description":"Invalid Diagrams","frontMatter":{},"lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739456991000,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/_dogfooding/_pages tests/diagrams.mdx","unlisted":false}'),i=t(85893),r=t(80980),s=t(15398),o=t(58636);let l={},c="Diagram Examples",d={},u=[{value:"Invalid Diagrams",id:"invalid-diagrams",level:2},{value:"Invalid type",id:"invalid-type",level:3},{value:"Invalid content",id:"invalid-content",level:3},{value:"Sequence Diagram",id:"sequence-diagram",level:2},{value:"Sequence Diagram (forest theme directive)",id:"sequence-diagram-forest-theme-directive",level:2},{value:"Gantt Chart",id:"gantt-chart",level:2},{value:"Flow Chart",id:"flow-chart",level:2},{value:"With Markdown:",id:"with-markdown",level:3},{value:"Class Diagram",id:"class-diagram",level:2},{value:"State Diagram",id:"state-diagram",level:2},{value:"Entity Relationship Diagram",id:"entity-relationship-diagram",level:2},{value:"User Journey",id:"user-journey",level:2},{value:"Pie Chart",id:"pie-chart",level:2},{value:"Requirement Diagram",id:"requirement-diagram",level:2},{value:"Gitgraph (Git) Diagram",id:"gitgraph-git-diagram",level:2},{value:"Mermaid in tabs",id:"mermaid-in-tabs",level:2},{value:"Mindmap",id:"mindmap",level:2},{value:"Quadrant Chart",id:"quadrant-chart",level:2},{value:"Architecture Diagram",id:"architecture-diagram",level:2}];function m(e){let n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",mermaid:"mermaid",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"diagram-examples",children:"Diagram Examples"})}),"\n",(0,i.jsx)(n.h2,{id:"invalid-diagrams",children:"Invalid Diagrams"}),"\n",(0,i.jsx)(n.p,{children:"Those errors should not crash the whole page"}),"\n",(0,i.jsx)(n.h3,{id:"invalid-type",children:"Invalid type"}),"\n",(0,i.jsx)(n.mermaid,{value:"badType\n participant Alice\n participant Bob"}),"\n",(0,i.jsx)(n.h3,{id:"invalid-content",children:"Invalid content"}),"\n",(0,i.jsx)(n.mermaid,{value:"sequenceDiagram\n badInstruction Alice\n participant Bob"}),"\n",(0,i.jsx)(n.h2,{id:"sequence-diagram",children:"Sequence Diagram"}),"\n",(0,i.jsx)(n.mermaid,{value:"sequenceDiagram\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 prevail!\n John--\x3e>Alice: Great!\n John->>Bob: How about you?\n Bob--\x3e>John: Jolly good!"}),"\n",(0,i.jsx)(n.h2,{id:"sequence-diagram-forest-theme-directive",children:"Sequence Diagram (forest theme directive)"}),"\n",(0,i.jsx)(n.p,{children:"It is possible to override default config locally with Mermaid text directives such as:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{children:'%%{init: { "theme": "forest" } }%%\n'})}),"\n",(0,i.jsx)(n.mermaid,{value:'%%{init: { "theme": "forest" } }%%\n\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 prevail!\n John--\x3e>Alice: Great!\n John->>Bob: How about you?\n Bob--\x3e>John: Jolly good!'}),"\n",(0,i.jsx)(n.h2,{id:"gantt-chart",children:"Gantt Chart"}),"\n",(0,i.jsx)(n.mermaid,{value:"gantt\ndateFormat YYYY-MM-DD\ntitle Adding GANTT diagram to mermaid\nexcludes weekdays 2014-01-10\n\nsection A section\nCompleted task :done, des1, 2014-01-06,2014-01-08\nActive task :active, des2, 2014-01-09, 3d\nFuture task : des3, after des2, 5d\nFuture task2 : des4, after des3, 5d"}),"\n",(0,i.jsx)(n.h2,{id:"flow-chart",children:"Flow Chart"}),"\n",(0,i.jsx)(n.mermaid,{value:"flowchart TD\n A[Start] --\x3e B{Is it?}\n B --\x3e|Yes| C[OK]\n C --\x3e D[Rethink]\n D --\x3e B\n B ----\x3e|No| E[End]"}),"\n",(0,i.jsx)(n.h3,{id:"with-markdown",children:"With Markdown:"}),"\n",(0,i.jsx)(n.mermaid,{value:'flowchart LR\n markdown["`This **is** _Markdown_`"]\n newLines["`Line1\n Line 2\n Line 3`"]\n markdown --\x3e newLines'}),"\n",(0,i.jsx)(n.h2,{id:"class-diagram",children:"Class Diagram"}),"\n",(0,i.jsx)(n.mermaid,{value:" classDiagram\n Animal <|-- Duck\n Animal <|-- Fish\n Animal <|-- Zebra\n Animal : +int age\n Animal : +String gender\n Animal: +isMammal()\n Animal: +mate()\n class Duck{\n +String beakColor\n +swim()\n +quack()\n }\n class Fish{\n -int sizeInFeet\n -canEat()\n }\n class Zebra{\n +bool is_wild\n +run()\n }"}),"\n",(0,i.jsx)(n.h2,{id:"state-diagram",children:"State Diagram"}),"\n",(0,i.jsx)(n.mermaid,{value:"stateDiagram-v2\n [*] --\x3e Active\n\n state Active {\n [*] --\x3e NumLockOff\n NumLockOff --\x3e NumLockOn : EvNumLockPressed\n NumLockOn --\x3e NumLockOff : EvNumLockPressed\n --\n [*] --\x3e CapsLockOff\n CapsLockOff --\x3e CapsLockOn : EvCapsLockPressed\n CapsLockOn --\x3e CapsLockOff : EvCapsLockPressed\n --\n [*] --\x3e ScrollLockOff\n ScrollLockOff --\x3e ScrollLockOn : EvScrollLockPressed\n ScrollLockOn --\x3e ScrollLockOff : EvScrollLockPressed\n }"}),"\n",(0,i.jsx)(n.h2,{id:"entity-relationship-diagram",children:"Entity Relationship Diagram"}),"\n",(0,i.jsx)(n.mermaid,{value:"erDiagram\n CAR ||--o{ NAMED-DRIVER : allows\n CAR {\n string registrationNumber\n string make\n string model\n }\n PERSON ||--o{ NAMED-DRIVER : is\n PERSON {\n string firstName\n string lastName\n int age\n }"}),"\n",(0,i.jsx)(n.h2,{id:"user-journey",children:"User Journey"}),"\n",(0,i.jsx)(n.mermaid,{value:"journey\n title My working day\n section Go to work\n Make tea: 5: Me\n Go upstairs: 3: Me\n Do work: 1: Me, Cat\n section Go home\n Go downstairs: 5: Me\n Sit down: 5: Me"}),"\n",(0,i.jsx)(n.admonition,{type:"note",children:(0,i.jsxs)(n.p,{children:["If there's too much space above it's due to a ",(0,i.jsx)(n.a,{href:"https://github.com/mermaid-js/mermaid/issues/3501",children:"Mermaid bug"})]})}),"\n",(0,i.jsx)(n.h2,{id:"pie-chart",children:"Pie Chart"}),"\n",(0,i.jsx)(n.mermaid,{value:'pie showData\n title Key elements in Product X\n "Calcium" : 42.96\n "Potassium" : 50.05\n "Magnesium" : 10.01\n "Iron" : 5'}),"\n",(0,i.jsx)(n.h2,{id:"requirement-diagram",children:"Requirement Diagram"}),"\n",(0,i.jsx)(n.mermaid,{value:' requirementDiagram\n\n requirement test_req {\n id: 1\n text: the test text.\n risk: high\n verifymethod: test\n }\n\n functionalRequirement test_req2 {\n id: 1.1\n text: the second test text.\n risk: low\n verifymethod: inspection\n }\n\n performanceRequirement test_req3 {\n id: 1.2\n text: the third test text.\n risk: medium\n verifymethod: demonstration\n }\n\n interfaceRequirement test_req4 {\n id: 1.2.1\n text: the fourth test text.\n risk: medium\n verifymethod: analysis\n }\n\n physicalRequirement test_req5 {\n id: 1.2.2\n text: the fifth test text.\n risk: medium\n verifymethod: analysis\n }\n\n designConstraint test_req6 {\n id: 1.2.3\n text: the sixth test text.\n risk: medium\n verifymethod: analysis\n }\n\n element test_entity {\n type: simulation\n }\n\n element test_entity2 {\n type: word doc\n docRef: reqs/test_entity\n }\n\n element test_entity3 {\n type: "test suite"\n docRef: github.com/all_the_tests\n }\n\n\n test_entity - satisfies -> test_req2\n test_req - traces -> test_req2\n test_req - contains -> test_req3\n test_req3 - contains -> test_req4\n test_req4 - derives -> test_req5\n test_req5 - refines -> test_req6\n test_entity3 - verifies -> test_req5\n test_req <- copies - test_entity2'}),"\n",(0,i.jsx)(n.h2,{id:"gitgraph-git-diagram",children:"Gitgraph (Git) Diagram"}),"\n",(0,i.jsx)(n.mermaid,{value:"%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%\n gitGraph\n commit\n branch hotfix\n checkout hotfix\n commit\n branch develop\n checkout develop\n commit id:\"ash\" tag:\"abc\"\n branch featureB\n checkout featureB\n commit type:HIGHLIGHT\n checkout main\n checkout hotfix\n commit type:NORMAL\n checkout develop\n commit type:REVERSE\n checkout featureB\n commit\n checkout main\n merge hotfix\n checkout featureB\n commit\n checkout develop\n branch featureA\n commit\n checkout develop\n merge hotfix\n checkout featureA\n commit\n checkout featureB\n commit\n checkout develop\n merge featureA\n branch release\n checkout release\n commit\n checkout main\n commit\n checkout release\n merge main\n checkout develop\n merge release"}),"\n",(0,i.jsx)(n.h2,{id:"mermaid-in-tabs",children:"Mermaid in tabs"}),"\n","\n",(0,i.jsxs)(s.Z,{children:[(0,i.jsxs)(o.Z,{value:"tab-a",children:[(0,i.jsx)(n.p,{children:"The following mermaid diagram is shown:"}),(0,i.jsx)(n.mermaid,{value:"graph LR\n a ---\x3e c(10)\n b ---\x3e c(10)"})]}),(0,i.jsxs)(o.Z,{value:"tab-b",children:[(0,i.jsx)(n.p,{children:"This mermaid diagram is not displayed:"}),(0,i.jsx)(n.mermaid,{value:"graph LR\n d ---\x3e z(42)\n e ---\x3e z(42)"})]})]}),"\n",(0,i.jsx)(n.h2,{id:"mindmap",children:"Mindmap"}),"\n",(0,i.jsx)(n.mermaid,{value:"mindmap\n root((conda-forge))\n (Repos)\n (Package building)\n [*-feedstock]\n [staged-recipes]\n [cdt-builds]\n [msys2-recipes]\n (Maintenance)\n [admin-requests]\n [repodata-patches]\n (Configuration)\n [.github]\n [.cirun]\n [conda-forge-pinning]\n [conda-forge-ci-setup]\n [docker-images]\n [conda-smithy]\n (Automations)\n [admin-migrations]\n [artifact-validation]\n [regro/cf-scripts]\n [conda-forge-webservices]\n [regro/cf-graph-countyfair]\n [regro/libcfgraph + regro/libcflib]\n [feedstock-outputs]\n (Communications)\n [conda-forge.github.io]\n [blog]\n [status]\n [by-the-numbers]\n [conda-forge-status-monitor]\n [feedstocks]\n (Bots & apps)\n [conda-forge-admin]\n [conda-forge-bot]\n [conda-forge-coordinator]\n [conda-forge-daemon]\n [conda-forge-linter]\n [conda-forge-manager]\n [conda-forge-status]\n [regro-cf-autotick-bot]\n [conda-forge-curator]\n [conda-forge-webservices]\n (Delivery)\n [anaconda.org]\n [ghcr.io]\n [quay.io]\n (Installers)\n Miniforge\n Mambaforge\n (CI for builds)\n Azure Pipelines\n Travis CI\n cirun.io\n (Infra)\n Heroku\n Github Actions\n Circle CI"}),"\n",(0,i.jsx)(n.h2,{id:"quadrant-chart",children:"Quadrant Chart"}),"\n",(0,i.jsx)(n.mermaid,{value:"quadrantChart\n title Reach and engagement of campaigns\n x-axis Low Reach --\x3e High Reach\n y-axis Low Engagement --\x3e High Engagement\n quadrant-1 We should expand\n quadrant-2 Need to promote\n quadrant-3 Re-evaluate\n quadrant-4 May be improved\n Campaign A: [0.3, 0.6]\n Campaign B: [0.45, 0.23]\n Campaign C: [0.57, 0.69]\n Campaign D: [0.78, 0.34]\n Campaign E: [0.40, 0.34]\n Campaign F: [0.35, 0.78]"}),"\n",(0,i.jsx)(n.h2,{id:"architecture-diagram",children:"Architecture Diagram"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["See ",(0,i.jsx)(n.a,{href:"https://mermaid.js.org/syntax/architecture",children:"https://mermaid.js.org/syntax/architecture"})]}),"\n",(0,i.jsxs)(n.li,{children:["See ",(0,i.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/10508",children:"https://github.com/facebook/docusaurus/discussions/10508"})]}),"\n"]}),"\n",(0,i.jsx)(n.mermaid,{value:"architecture-beta\n group api(cloud)[API]\n\n service db(database)[Database] in api\n service disk1(disk)[Storage] in api\n service disk2(disk)[Storage] in api\n service server(server)[Server] in api\n\n db:L -- R:server\n disk1:T -- B:server\n disk2:T -- B:db"})]})}function h(e={}){let{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(m,{...e})}):m(e)}},58636:function(e,n,t){t.d(n,{Z:()=>r});var a=t(85893);t(67294);var i=t(90496);function r(e){let{children:n,hidden:t,className:r}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,i.Z)("tabItem_pnkT",r),hidden:t,children:n})}},15398:function(e,n,t){t.d(n,{Z:()=>b});var a=t(85893),i=t(67294),r=t(90496),s=t(54947),o=t(3620),l=t(844),c=t(97486),d=t(32263),u=t(16971);function m(e){return i.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||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.`)})?.filter(Boolean)??[]}function h(e){let{value:n,tabValues:t}=e;return t.some(e=>e.value===n)}var g=t(71607);function p(e){let{className:n,block:t,selectedValue:i,selectValue:o,tabValues:l}=e,c=[],{blockElementScrollPositionUntilNextRender:d}=(0,s.o5)(),u=e=>{let n=e.currentTarget,t=l[c.indexOf(n)].value;t!==i&&(d(n),o(t))},m=e=>{let n=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{let t=c.indexOf(e.currentTarget)+1;n=c[t]??c[0];break}case"ArrowLeft":{let t=c.indexOf(e.currentTarget)-1;n=c[t]??c[c.length-1]}}n?.focus()};return(0,a.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.Z)("tabs",{"tabs--block":t},n),children:l.map(e=>{let{value:n,label:t,attributes:s}=e;return(0,a.jsx)("li",{role:"tab",tabIndex:i===n?0:-1,"aria-selected":i===n,ref:e=>{c.push(e)},onKeyDown:m,onClick:u,...s,className:(0,r.Z)("tabs__item","tabItem_AQgk",s?.className,{"tabs__item--active":i===n}),children:t??n},n)})})}function f(e){let{lazy:n,children:t,selectedValue:s}=e,o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){let e=o.find(e=>e.props.value===s);return e?(0,i.cloneElement)(e,{className:(0,r.Z)("margin-top--md",e.props.className)}):null}return(0,a.jsx)("div",{className:"margin-top--md",children:o.map((e,n)=>(0,i.cloneElement)(e,{key:n,hidden:e.props.value!==s}))})}function v(e){let n=function(e){let{defaultValue:n,queryString:t=!1,groupId:a}=e,r=function(e){let{values:n,children:t}=e;return(0,i.useMemo)(()=>{let e=n??m(t).map(e=>{let{props:{value:n,label:t,attributes:a,default:i}}=e;return{value:n,label:t,attributes:a,default:i}});return!function(e){let n=(0,d.lx)(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),[s,g]=(0,i.useState)(()=>(function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw Error("Docusaurus error: the component requires at least one children component");if(n){if(!h({value:n,tabValues:t}))throw Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}let a=t.find(e=>e.default)??t[0];if(!a)throw Error("Unexpected error: 0 tabValues");return a.value})({defaultValue:n,tabValues:r})),[p,f]=function(e){let{queryString:n=!1,groupId:t}=e,a=(0,o.k6)(),r=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)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 t??null}({queryString:n,groupId:t});return[(0,c._X)(r),(0,i.useCallback)(e=>{if(!r)return;let n=new URLSearchParams(a.location.search);n.set(r,e),a.replace({...a.location,search:n.toString()})},[r,a])]}({queryString:t,groupId:a}),[v,b]=function(e){let{groupId:n}=e,t=n?`docusaurus.tab.${n}`:null,[a,r]=(0,u.Nk)(t);return[a,(0,i.useCallback)(e=>{t&&r.set(e)},[t,r])]}({groupId:a}),x=(()=>{let e=p??v;return h({value:e,tabValues:r})?e:null})();return(0,l.Z)(()=>{x&&g(x)},[x]),{selectedValue:s,selectValue:(0,i.useCallback)(e=>{if(!h({value:e,tabValues:r}))throw Error(`Can't select invalid tab value=${e}`);g(e),f(e),b(e)},[f,b,r]),tabValues:r}}(e);return(0,a.jsxs)("div",{className:(0,r.Z)("tabs-container","tabList_Qoir"),children:[(0,a.jsx)(p,{...n,...e}),(0,a.jsx)(f,{...n,...e})]})}function b(e){let n=(0,g.Z)();return(0,a.jsx)(v,{...e,children:m(e.children)},String(n))}},80980:function(e,n,t){t.d(n,{Z:()=>o,a:()=>s});var a=t(67294);let i={},r=a.createContext(i);function s(e){let n=a.useContext(r);return a.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:s(e.components),a.createElement(r.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["30992"],{83119:function(e,n,t){t.r(n),t.d(n,{default:()=>h,frontMatter:()=>l,metadata:()=>a,assets:()=>d,toc:()=>u,contentTitle:()=>c});var a=JSON.parse('{"type":"mdx","permalink":"/tests/pages/diagrams","source":"@site/_dogfooding/_pages tests/diagrams.mdx","title":"Diagram Examples","description":"Invalid Diagrams","frontMatter":{},"lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739551601000,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/_dogfooding/_pages tests/diagrams.mdx","unlisted":false}'),i=t(85893),r=t(80980),s=t(15398),o=t(58636);let l={},c="Diagram Examples",d={},u=[{value:"Invalid Diagrams",id:"invalid-diagrams",level:2},{value:"Invalid type",id:"invalid-type",level:3},{value:"Invalid content",id:"invalid-content",level:3},{value:"Sequence Diagram",id:"sequence-diagram",level:2},{value:"Sequence Diagram (forest theme directive)",id:"sequence-diagram-forest-theme-directive",level:2},{value:"Gantt Chart",id:"gantt-chart",level:2},{value:"Flow Chart",id:"flow-chart",level:2},{value:"With Markdown:",id:"with-markdown",level:3},{value:"Class Diagram",id:"class-diagram",level:2},{value:"State Diagram",id:"state-diagram",level:2},{value:"Entity Relationship Diagram",id:"entity-relationship-diagram",level:2},{value:"User Journey",id:"user-journey",level:2},{value:"Pie Chart",id:"pie-chart",level:2},{value:"Requirement Diagram",id:"requirement-diagram",level:2},{value:"Gitgraph (Git) Diagram",id:"gitgraph-git-diagram",level:2},{value:"Mermaid in tabs",id:"mermaid-in-tabs",level:2},{value:"Mindmap",id:"mindmap",level:2},{value:"Quadrant Chart",id:"quadrant-chart",level:2},{value:"Architecture Diagram",id:"architecture-diagram",level:2}];function m(e){let n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",mermaid:"mermaid",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"diagram-examples",children:"Diagram Examples"})}),"\n",(0,i.jsx)(n.h2,{id:"invalid-diagrams",children:"Invalid Diagrams"}),"\n",(0,i.jsx)(n.p,{children:"Those errors should not crash the whole page"}),"\n",(0,i.jsx)(n.h3,{id:"invalid-type",children:"Invalid type"}),"\n",(0,i.jsx)(n.mermaid,{value:"badType\n participant Alice\n participant Bob"}),"\n",(0,i.jsx)(n.h3,{id:"invalid-content",children:"Invalid content"}),"\n",(0,i.jsx)(n.mermaid,{value:"sequenceDiagram\n badInstruction Alice\n participant Bob"}),"\n",(0,i.jsx)(n.h2,{id:"sequence-diagram",children:"Sequence Diagram"}),"\n",(0,i.jsx)(n.mermaid,{value:"sequenceDiagram\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 prevail!\n John--\x3e>Alice: Great!\n John->>Bob: How about you?\n Bob--\x3e>John: Jolly good!"}),"\n",(0,i.jsx)(n.h2,{id:"sequence-diagram-forest-theme-directive",children:"Sequence Diagram (forest theme directive)"}),"\n",(0,i.jsx)(n.p,{children:"It is possible to override default config locally with Mermaid text directives such as:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{children:'%%{init: { "theme": "forest" } }%%\n'})}),"\n",(0,i.jsx)(n.mermaid,{value:'%%{init: { "theme": "forest" } }%%\n\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 prevail!\n John--\x3e>Alice: Great!\n John->>Bob: How about you?\n Bob--\x3e>John: Jolly good!'}),"\n",(0,i.jsx)(n.h2,{id:"gantt-chart",children:"Gantt Chart"}),"\n",(0,i.jsx)(n.mermaid,{value:"gantt\ndateFormat YYYY-MM-DD\ntitle Adding GANTT diagram to mermaid\nexcludes weekdays 2014-01-10\n\nsection A section\nCompleted task :done, des1, 2014-01-06,2014-01-08\nActive task :active, des2, 2014-01-09, 3d\nFuture task : des3, after des2, 5d\nFuture task2 : des4, after des3, 5d"}),"\n",(0,i.jsx)(n.h2,{id:"flow-chart",children:"Flow Chart"}),"\n",(0,i.jsx)(n.mermaid,{value:"flowchart TD\n A[Start] --\x3e B{Is it?}\n B --\x3e|Yes| C[OK]\n C --\x3e D[Rethink]\n D --\x3e B\n B ----\x3e|No| E[End]"}),"\n",(0,i.jsx)(n.h3,{id:"with-markdown",children:"With Markdown:"}),"\n",(0,i.jsx)(n.mermaid,{value:'flowchart LR\n markdown["`This **is** _Markdown_`"]\n newLines["`Line1\n Line 2\n Line 3`"]\n markdown --\x3e newLines'}),"\n",(0,i.jsx)(n.h2,{id:"class-diagram",children:"Class Diagram"}),"\n",(0,i.jsx)(n.mermaid,{value:" classDiagram\n Animal <|-- Duck\n Animal <|-- Fish\n Animal <|-- Zebra\n Animal : +int age\n Animal : +String gender\n Animal: +isMammal()\n Animal: +mate()\n class Duck{\n +String beakColor\n +swim()\n +quack()\n }\n class Fish{\n -int sizeInFeet\n -canEat()\n }\n class Zebra{\n +bool is_wild\n +run()\n }"}),"\n",(0,i.jsx)(n.h2,{id:"state-diagram",children:"State Diagram"}),"\n",(0,i.jsx)(n.mermaid,{value:"stateDiagram-v2\n [*] --\x3e Active\n\n state Active {\n [*] --\x3e NumLockOff\n NumLockOff --\x3e NumLockOn : EvNumLockPressed\n NumLockOn --\x3e NumLockOff : EvNumLockPressed\n --\n [*] --\x3e CapsLockOff\n CapsLockOff --\x3e CapsLockOn : EvCapsLockPressed\n CapsLockOn --\x3e CapsLockOff : EvCapsLockPressed\n --\n [*] --\x3e ScrollLockOff\n ScrollLockOff --\x3e ScrollLockOn : EvScrollLockPressed\n ScrollLockOn --\x3e ScrollLockOff : EvScrollLockPressed\n }"}),"\n",(0,i.jsx)(n.h2,{id:"entity-relationship-diagram",children:"Entity Relationship Diagram"}),"\n",(0,i.jsx)(n.mermaid,{value:"erDiagram\n CAR ||--o{ NAMED-DRIVER : allows\n CAR {\n string registrationNumber\n string make\n string model\n }\n PERSON ||--o{ NAMED-DRIVER : is\n PERSON {\n string firstName\n string lastName\n int age\n }"}),"\n",(0,i.jsx)(n.h2,{id:"user-journey",children:"User Journey"}),"\n",(0,i.jsx)(n.mermaid,{value:"journey\n title My working day\n section Go to work\n Make tea: 5: Me\n Go upstairs: 3: Me\n Do work: 1: Me, Cat\n section Go home\n Go downstairs: 5: Me\n Sit down: 5: Me"}),"\n",(0,i.jsx)(n.admonition,{type:"note",children:(0,i.jsxs)(n.p,{children:["If there's too much space above it's due to a ",(0,i.jsx)(n.a,{href:"https://github.com/mermaid-js/mermaid/issues/3501",children:"Mermaid bug"})]})}),"\n",(0,i.jsx)(n.h2,{id:"pie-chart",children:"Pie Chart"}),"\n",(0,i.jsx)(n.mermaid,{value:'pie showData\n title Key elements in Product X\n "Calcium" : 42.96\n "Potassium" : 50.05\n "Magnesium" : 10.01\n "Iron" : 5'}),"\n",(0,i.jsx)(n.h2,{id:"requirement-diagram",children:"Requirement Diagram"}),"\n",(0,i.jsx)(n.mermaid,{value:' requirementDiagram\n\n requirement test_req {\n id: 1\n text: the test text.\n risk: high\n verifymethod: test\n }\n\n functionalRequirement test_req2 {\n id: 1.1\n text: the second test text.\n risk: low\n verifymethod: inspection\n }\n\n performanceRequirement test_req3 {\n id: 1.2\n text: the third test text.\n risk: medium\n verifymethod: demonstration\n }\n\n interfaceRequirement test_req4 {\n id: 1.2.1\n text: the fourth test text.\n risk: medium\n verifymethod: analysis\n }\n\n physicalRequirement test_req5 {\n id: 1.2.2\n text: the fifth test text.\n risk: medium\n verifymethod: analysis\n }\n\n designConstraint test_req6 {\n id: 1.2.3\n text: the sixth test text.\n risk: medium\n verifymethod: analysis\n }\n\n element test_entity {\n type: simulation\n }\n\n element test_entity2 {\n type: word doc\n docRef: reqs/test_entity\n }\n\n element test_entity3 {\n type: "test suite"\n docRef: github.com/all_the_tests\n }\n\n\n test_entity - satisfies -> test_req2\n test_req - traces -> test_req2\n test_req - contains -> test_req3\n test_req3 - contains -> test_req4\n test_req4 - derives -> test_req5\n test_req5 - refines -> test_req6\n test_entity3 - verifies -> test_req5\n test_req <- copies - test_entity2'}),"\n",(0,i.jsx)(n.h2,{id:"gitgraph-git-diagram",children:"Gitgraph (Git) Diagram"}),"\n",(0,i.jsx)(n.mermaid,{value:"%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%\n gitGraph\n commit\n branch hotfix\n checkout hotfix\n commit\n branch develop\n checkout develop\n commit id:\"ash\" tag:\"abc\"\n branch featureB\n checkout featureB\n commit type:HIGHLIGHT\n checkout main\n checkout hotfix\n commit type:NORMAL\n checkout develop\n commit type:REVERSE\n checkout featureB\n commit\n checkout main\n merge hotfix\n checkout featureB\n commit\n checkout develop\n branch featureA\n commit\n checkout develop\n merge hotfix\n checkout featureA\n commit\n checkout featureB\n commit\n checkout develop\n merge featureA\n branch release\n checkout release\n commit\n checkout main\n commit\n checkout release\n merge main\n checkout develop\n merge release"}),"\n",(0,i.jsx)(n.h2,{id:"mermaid-in-tabs",children:"Mermaid in tabs"}),"\n","\n",(0,i.jsxs)(s.Z,{children:[(0,i.jsxs)(o.Z,{value:"tab-a",children:[(0,i.jsx)(n.p,{children:"The following mermaid diagram is shown:"}),(0,i.jsx)(n.mermaid,{value:"graph LR\n a ---\x3e c(10)\n b ---\x3e c(10)"})]}),(0,i.jsxs)(o.Z,{value:"tab-b",children:[(0,i.jsx)(n.p,{children:"This mermaid diagram is not displayed:"}),(0,i.jsx)(n.mermaid,{value:"graph LR\n d ---\x3e z(42)\n e ---\x3e z(42)"})]})]}),"\n",(0,i.jsx)(n.h2,{id:"mindmap",children:"Mindmap"}),"\n",(0,i.jsx)(n.mermaid,{value:"mindmap\n root((conda-forge))\n (Repos)\n (Package building)\n [*-feedstock]\n [staged-recipes]\n [cdt-builds]\n [msys2-recipes]\n (Maintenance)\n [admin-requests]\n [repodata-patches]\n (Configuration)\n [.github]\n [.cirun]\n [conda-forge-pinning]\n [conda-forge-ci-setup]\n [docker-images]\n [conda-smithy]\n (Automations)\n [admin-migrations]\n [artifact-validation]\n [regro/cf-scripts]\n [conda-forge-webservices]\n [regro/cf-graph-countyfair]\n [regro/libcfgraph + regro/libcflib]\n [feedstock-outputs]\n (Communications)\n [conda-forge.github.io]\n [blog]\n [status]\n [by-the-numbers]\n [conda-forge-status-monitor]\n [feedstocks]\n (Bots & apps)\n [conda-forge-admin]\n [conda-forge-bot]\n [conda-forge-coordinator]\n [conda-forge-daemon]\n [conda-forge-linter]\n [conda-forge-manager]\n [conda-forge-status]\n [regro-cf-autotick-bot]\n [conda-forge-curator]\n [conda-forge-webservices]\n (Delivery)\n [anaconda.org]\n [ghcr.io]\n [quay.io]\n (Installers)\n Miniforge\n Mambaforge\n (CI for builds)\n Azure Pipelines\n Travis CI\n cirun.io\n (Infra)\n Heroku\n Github Actions\n Circle CI"}),"\n",(0,i.jsx)(n.h2,{id:"quadrant-chart",children:"Quadrant Chart"}),"\n",(0,i.jsx)(n.mermaid,{value:"quadrantChart\n title Reach and engagement of campaigns\n x-axis Low Reach --\x3e High Reach\n y-axis Low Engagement --\x3e High Engagement\n quadrant-1 We should expand\n quadrant-2 Need to promote\n quadrant-3 Re-evaluate\n quadrant-4 May be improved\n Campaign A: [0.3, 0.6]\n Campaign B: [0.45, 0.23]\n Campaign C: [0.57, 0.69]\n Campaign D: [0.78, 0.34]\n Campaign E: [0.40, 0.34]\n Campaign F: [0.35, 0.78]"}),"\n",(0,i.jsx)(n.h2,{id:"architecture-diagram",children:"Architecture Diagram"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["See ",(0,i.jsx)(n.a,{href:"https://mermaid.js.org/syntax/architecture",children:"https://mermaid.js.org/syntax/architecture"})]}),"\n",(0,i.jsxs)(n.li,{children:["See ",(0,i.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/10508",children:"https://github.com/facebook/docusaurus/discussions/10508"})]}),"\n"]}),"\n",(0,i.jsx)(n.mermaid,{value:"architecture-beta\n group api(cloud)[API]\n\n service db(database)[Database] in api\n service disk1(disk)[Storage] in api\n service disk2(disk)[Storage] in api\n service server(server)[Server] in api\n\n db:L -- R:server\n disk1:T -- B:server\n disk2:T -- B:db"})]})}function h(e={}){let{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(m,{...e})}):m(e)}},58636:function(e,n,t){t.d(n,{Z:()=>r});var a=t(85893);t(67294);var i=t(90496);function r(e){let{children:n,hidden:t,className:r}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,i.Z)("tabItem_pnkT",r),hidden:t,children:n})}},15398:function(e,n,t){t.d(n,{Z:()=>b});var a=t(85893),i=t(67294),r=t(90496),s=t(54947),o=t(3620),l=t(844),c=t(97486),d=t(32263),u=t(16971);function m(e){return i.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||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.`)})?.filter(Boolean)??[]}function h(e){let{value:n,tabValues:t}=e;return t.some(e=>e.value===n)}var g=t(71607);function p(e){let{className:n,block:t,selectedValue:i,selectValue:o,tabValues:l}=e,c=[],{blockElementScrollPositionUntilNextRender:d}=(0,s.o5)(),u=e=>{let n=e.currentTarget,t=l[c.indexOf(n)].value;t!==i&&(d(n),o(t))},m=e=>{let n=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{let t=c.indexOf(e.currentTarget)+1;n=c[t]??c[0];break}case"ArrowLeft":{let t=c.indexOf(e.currentTarget)-1;n=c[t]??c[c.length-1]}}n?.focus()};return(0,a.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.Z)("tabs",{"tabs--block":t},n),children:l.map(e=>{let{value:n,label:t,attributes:s}=e;return(0,a.jsx)("li",{role:"tab",tabIndex:i===n?0:-1,"aria-selected":i===n,ref:e=>{c.push(e)},onKeyDown:m,onClick:u,...s,className:(0,r.Z)("tabs__item","tabItem_AQgk",s?.className,{"tabs__item--active":i===n}),children:t??n},n)})})}function f(e){let{lazy:n,children:t,selectedValue:s}=e,o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){let e=o.find(e=>e.props.value===s);return e?(0,i.cloneElement)(e,{className:(0,r.Z)("margin-top--md",e.props.className)}):null}return(0,a.jsx)("div",{className:"margin-top--md",children:o.map((e,n)=>(0,i.cloneElement)(e,{key:n,hidden:e.props.value!==s}))})}function v(e){let n=function(e){let{defaultValue:n,queryString:t=!1,groupId:a}=e,r=function(e){let{values:n,children:t}=e;return(0,i.useMemo)(()=>{let e=n??m(t).map(e=>{let{props:{value:n,label:t,attributes:a,default:i}}=e;return{value:n,label:t,attributes:a,default:i}});return!function(e){let n=(0,d.lx)(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),[s,g]=(0,i.useState)(()=>(function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw Error("Docusaurus error: the component requires at least one children component");if(n){if(!h({value:n,tabValues:t}))throw Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}let a=t.find(e=>e.default)??t[0];if(!a)throw Error("Unexpected error: 0 tabValues");return a.value})({defaultValue:n,tabValues:r})),[p,f]=function(e){let{queryString:n=!1,groupId:t}=e,a=(0,o.k6)(),r=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)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 t??null}({queryString:n,groupId:t});return[(0,c._X)(r),(0,i.useCallback)(e=>{if(!r)return;let n=new URLSearchParams(a.location.search);n.set(r,e),a.replace({...a.location,search:n.toString()})},[r,a])]}({queryString:t,groupId:a}),[v,b]=function(e){let{groupId:n}=e,t=n?`docusaurus.tab.${n}`:null,[a,r]=(0,u.Nk)(t);return[a,(0,i.useCallback)(e=>{t&&r.set(e)},[t,r])]}({groupId:a}),x=(()=>{let e=p??v;return h({value:e,tabValues:r})?e:null})();return(0,l.Z)(()=>{x&&g(x)},[x]),{selectedValue:s,selectValue:(0,i.useCallback)(e=>{if(!h({value:e,tabValues:r}))throw Error(`Can't select invalid tab value=${e}`);g(e),f(e),b(e)},[f,b,r]),tabValues:r}}(e);return(0,a.jsxs)("div",{className:(0,r.Z)("tabs-container","tabList_Qoir"),children:[(0,a.jsx)(p,{...n,...e}),(0,a.jsx)(f,{...n,...e})]})}function b(e){let n=(0,g.Z)();return(0,a.jsx)(v,{...e,children:m(e.children)},String(n))}},80980:function(e,n,t){t.d(n,{Z:()=>o,a:()=>s});var a=t(67294);let i={},r=a.createContext(i);function s(e){let n=a.useContext(r);return a.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:s(e.components),a.createElement(r.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/060daea9.d219020a.js b/assets/js/060daea9.1700898d.js
similarity index 98%
rename from assets/js/060daea9.d219020a.js
rename to assets/js/060daea9.1700898d.js
index bed78efa1c..4f6d1eab21 100644
--- a/assets/js/060daea9.d219020a.js
+++ b/assets/js/060daea9.1700898d.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["12371"],{98171:function(e,t,s){s.d(t,{Z:()=>a});let a=s.p+"assets/images/social-card-8ca15c1adaeb77ca302178575136a0b6.png"},93837:function(e,t,s){s.d(t,{Z:()=>a});let a=s.p+"assets/images/social-card-8ca15c1adaeb77ca302178575136a0b6.png"},10517:function(e,t,s){s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>p,frontMatter:()=>o,metadata:()=>a,toc:()=>l});var a=s(3813),r=s(85893),n=s(80980);let o={title:"Docusaurus 3.2",authors:["slorber"],tags:["release"],image:"./img/social-card.png",date:new Date("2024-03-29T00:00:00.000Z")},i=void 0,c={image:s(98171).Z,authorsImageUrls:[void 0]},l=[];function u(e){let t={a:"a",img:"img",p:"p",strong:"strong",...(0,n.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["We are happy to announce ",(0,r.jsx)(t.strong,{children:"Docusaurus 3.2"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["The upgrade should be easy: as explained in our ",(0,r.jsx)(t.a,{href:"/community/release-process",children:"release process documentation"}),", minor versions respect ",(0,r.jsx)(t.a,{href:"https://semver.org/",children:"Semantic Versioning"}),"."]}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"Docusaurus blog post social card",src:s(93837).Z+"",width:"1200",height:"600"})})]})}function p(e={}){let{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},80980:function(e,t,s){s.d(t,{Z:()=>i,a:()=>o});var a=s(67294);let r={},n=a.createContext(r);function o(e){let t=a.useContext(n);return a.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),a.createElement(n.Provider,{value:t},e.children)}},3813:function(e){e.exports=JSON.parse('{"permalink":"/blog/releases/3.2","editUrl":"https://github.com/facebook/docusaurus/edit/main/website/blog/releases/3.2/index.mdx","source":"@site/blog/releases/3.2/index.mdx","title":"Docusaurus 3.2","description":"We are happy to announce Docusaurus 3.2.","date":"2024-03-29T00:00:00.000Z","tags":[{"inline":false,"label":"Release","permalink":"/blog/tags/release","description":"Blog posts about Docusaurus\' new releases"}],"readingTime":3.475,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer, This Week In React editor","url":"https://thisweekinreact.com","page":{"permalink":"/blog/authors/slorber"},"description":"A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.","socials":{"bluesky":"https://bsky.app/profile/sebastienlorber.com","x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","instagram":"https://www.instagram.com/thisweekinreact","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"}],"frontMatter":{"title":"Docusaurus 3.2","authors":["slorber"],"tags":["release"],"image":"./img/social-card.png","date":"2024-03-29T00:00:00.000Z"},"unlisted":false,"lastUpdatedAt":1739456991000,"lastUpdatedBy":"S\xe9bastien Lorber","prevItem":{"title":"Docusaurus 3.3","permalink":"/blog/releases/3.3"},"nextItem":{"title":"Docusaurus 3.1","permalink":"/blog/releases/3.1"}}')}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["12371"],{98171:function(e,t,s){s.d(t,{Z:()=>a});let a=s.p+"assets/images/social-card-8ca15c1adaeb77ca302178575136a0b6.png"},93837:function(e,t,s){s.d(t,{Z:()=>a});let a=s.p+"assets/images/social-card-8ca15c1adaeb77ca302178575136a0b6.png"},10517:function(e,t,s){s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>p,frontMatter:()=>o,metadata:()=>a,toc:()=>l});var a=s(3813),r=s(85893),n=s(80980);let o={title:"Docusaurus 3.2",authors:["slorber"],tags:["release"],image:"./img/social-card.png",date:new Date("2024-03-29T00:00:00.000Z")},i=void 0,c={image:s(98171).Z,authorsImageUrls:[void 0]},l=[];function u(e){let t={a:"a",img:"img",p:"p",strong:"strong",...(0,n.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["We are happy to announce ",(0,r.jsx)(t.strong,{children:"Docusaurus 3.2"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["The upgrade should be easy: as explained in our ",(0,r.jsx)(t.a,{href:"/community/release-process",children:"release process documentation"}),", minor versions respect ",(0,r.jsx)(t.a,{href:"https://semver.org/",children:"Semantic Versioning"}),"."]}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"Docusaurus blog post social card",src:s(93837).Z+"",width:"1200",height:"600"})})]})}function p(e={}){let{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},80980:function(e,t,s){s.d(t,{Z:()=>i,a:()=>o});var a=s(67294);let r={},n=a.createContext(r);function o(e){let t=a.useContext(n);return a.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),a.createElement(n.Provider,{value:t},e.children)}},3813:function(e){e.exports=JSON.parse('{"permalink":"/blog/releases/3.2","editUrl":"https://github.com/facebook/docusaurus/edit/main/website/blog/releases/3.2/index.mdx","source":"@site/blog/releases/3.2/index.mdx","title":"Docusaurus 3.2","description":"We are happy to announce Docusaurus 3.2.","date":"2024-03-29T00:00:00.000Z","tags":[{"inline":false,"label":"Release","permalink":"/blog/tags/release","description":"Blog posts about Docusaurus\' new releases"}],"readingTime":3.475,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer, This Week In React editor","url":"https://thisweekinreact.com","page":{"permalink":"/blog/authors/slorber"},"description":"A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.","socials":{"bluesky":"https://bsky.app/profile/sebastienlorber.com","x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","instagram":"https://www.instagram.com/thisweekinreact","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"}],"frontMatter":{"title":"Docusaurus 3.2","authors":["slorber"],"tags":["release"],"image":"./img/social-card.png","date":"2024-03-29T00:00:00.000Z"},"unlisted":false,"lastUpdatedAt":1739551601000,"lastUpdatedBy":"S\xe9bastien Lorber","prevItem":{"title":"Docusaurus 3.3","permalink":"/blog/releases/3.3"},"nextItem":{"title":"Docusaurus 3.1","permalink":"/blog/releases/3.1"}}')}}]);
\ No newline at end of file
diff --git a/assets/js/06c6ffc3.fef85b34.js b/assets/js/06c6ffc3.ad9fe30b.js
similarity index 99%
rename from assets/js/06c6ffc3.fef85b34.js
rename to assets/js/06c6ffc3.ad9fe30b.js
index 62e2931d39..8e891c5475 100644
--- a/assets/js/06c6ffc3.fef85b34.js
+++ b/assets/js/06c6ffc3.ad9fe30b.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["79557"],{26933:function(e,n,s){s.r(n),s.d(n,{default:()=>p,frontMatter:()=>a,metadata:()=>i,assets:()=>d,toc:()=>h,contentTitle:()=>c});var i=JSON.parse('{"id":"deployment","title":"Deployment","description":"Deploy your Docusaurus app for production on a range of static site hosting services.","source":"@site/docs/deployment.mdx","sourceDirName":".","slug":"/deployment","permalink":"/docs/deployment","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/deployment.mdx","tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739456991000,"frontMatter":{"description":"Deploy your Docusaurus app for production on a range of static site hosting services."},"sidebar":"docs","previous":{"title":"Using Plugins","permalink":"/docs/using-plugins"},"next":{"title":"i18n - Introduction","permalink":"/docs/i18n/introduction"}}'),t=s(85893),o=s(80980),r=s(15398),l=s(58636);let a={description:"Deploy your Docusaurus app for production on a range of static site hosting services."},c="Deployment",d={},h=[{value:"Configuration",id:"configuration",level:2},{value:"Testing your Build Locally",id:"testing-build-locally",level:2},{value:"Trailing slash configuration",id:"trailing-slashes",level:2},{value:"Using environment variables",id:"using-environment-variables",level:2},{value:"Choosing a hosting provider",id:"choosing-a-hosting-provider",level:2},{value:"Self-Hosting",id:"self-hosting",level:2},{value:"Deploying to Netlify",id:"deploying-to-netlify",level:2},{value:"Deploying to Vercel",id:"deploying-to-vercel",level:2},{value:"Deploying to GitHub Pages",id:"deploying-to-github-pages",level:2},{value:"Overview",id:"github-pages-overview",level:3},{value:"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.a)(),...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.Z,{groupId:"npm2yarn",children:[(0,t.jsx)(l.Z,{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.Z,{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.Z,{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.Z,{groupId:"npm2yarn",children:[(0,t.jsx)(l.Z,{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.Z,{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.Z,{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
Contact us through {customFields.teamEmail}!
;\n}\n"})}),"\n",(0,t.jsx)(n.h2,{id:"choosing-a-hosting-provider",children:"Choosing a hosting provider"}),"\n",(0,t.jsx)(n.p,{children:"There are a few common hosting options:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"#self-hosting",children:"Self hosting"})," with an HTTP server like Apache2 or Nginx."]}),"\n",(0,t.jsxs)(n.li,{children:["Jamstack providers (e.g. ",(0,t.jsx)(n.a,{href:"#deploying-to-netlify",children:"Netlify"})," and ",(0,t.jsx)(n.a,{href:"#deploying-to-vercel",children:"Vercel"}),"). We will use them as references, but the same reasoning can apply to other providers."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"#deploying-to-github-pages",children:"GitHub Pages"})," (by definition, it is also Jamstack, but we compare it separately)."]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"If you are unsure of which one to choose, ask the following questions:"}),"\n",(0,t.jsxs)(s,{children:[(0,t.jsx)("summary",{children:(0,t.jsx)(n.p,{children:"How many resources (money, person-hours, etc.) am I willing to invest in this?"})}),(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"\uD83D\uDD34 Self-hosting requires experience in networking as well as Linux and web server administration. It's the most difficult option, and would require the most time to manage successfully. Expense-wise, cloud services are almost never free, and purchasing/deploying an onsite server can be even more costly."}),"\n",(0,t.jsx)(n.li,{children:"\uD83D\uDFE2 Jamstack providers can help you set up a working website in almost no time and offer features like server-side redirects that are easily configurable. Many providers offer generous build-time quotas even for free plans that you would almost never exceed. However, free plans have limits, and you would need to pay once you hit those limits. Check the pricing page of your provider for details."}),"\n",(0,t.jsxs)(n.li,{children:["\uD83D\uDFE1 The GitHub Pages deployment workflow can be tedious to set up. (Evidence: see the length of ",(0,t.jsx)(n.a,{href:"#deploying-to-github-pages",children:"Deploying to GitHub Pages"}),"!) However, this service (including build and deployment) is always free for public repositories, and we have detailed instructions to help you make it work."]}),"\n"]})]}),"\n",(0,t.jsxs)(s,{children:[(0,t.jsx)("summary",{children:"How much server-side customization do I need?"}),(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"\uD83D\uDFE2 With self-hosting, you have access to the entire server's configuration. You can configure the virtual host to serve different content based on the request URL, you can do complicated server-side redirects, you can implement authentication, and so on. If you need a lot of server-side features, self-host your website."}),"\n",(0,t.jsx)(n.li,{children:"\uD83D\uDFE1 Jamstack usually offers some server-side configuration (e.g. URL formatting (trailing slashes), server-side redirects, etc.)."}),"\n",(0,t.jsx)(n.li,{children:"\uD83D\uDD34 GitHub Pages doesn't expose server-side configuration besides enforcing HTTPS and setting CNAME records."}),"\n"]})]}),"\n",(0,t.jsxs)(s,{children:[(0,t.jsx)("summary",{children:"Do I need collaboration-friendly deployment workflows?"}),(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"\uD83D\uDFE1 Self-hosted services can leverage continuous deployment functionality like Netlify, but more heavy-lifting is involved. Usually, you would designate a specific person to manage the deployment, and the workflow wouldn't be very git-based as opposed to the other two options."}),"\n",(0,t.jsx)(n.li,{children:"\uD83D\uDFE2 Netlify and Vercel have deploy previews for every pull request, which is useful for a team to review work before merging to production. You can also manage a team with different member access to the deployment."}),"\n",(0,t.jsx)(n.li,{children:"\uD83D\uDFE1 GitHub Pages cannot do deploy previews in a non-convoluted way. One repo can only be associated with one site deployment. On the other hand, you can control who has write access to the site's deployment."}),"\n"]})]}),"\n",(0,t.jsx)(n.p,{children:"There isn't a silver bullet. You need to weigh your needs and resources before making a choice."}),"\n",(0,t.jsx)(n.h2,{id:"self-hosting",children:"Self-Hosting"}),"\n",(0,t.jsxs)(n.p,{children:["Docusaurus can be self-hosted using ",(0,t.jsx)(n.a,{href:"/docs/cli#docusaurus-serve-sitedir",children:(0,t.jsx)(n.code,{children:"docusaurus serve"})}),". Change port using ",(0,t.jsx)(n.code,{children:"--port"})," and ",(0,t.jsx)(n.code,{children:"--host"})," to change host."]}),"\n",(0,t.jsxs)(r.Z,{groupId:"npm2yarn",children:[(0,t.jsx)(l.Z,{value:"npm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npm run serve -- --build --port 80 --host 0.0.0.0\n"})})}),(0,t.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"yarn serve --build --port 80 --host 0.0.0.0\n"})})}),(0,t.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"pnpm run serve --build --port 80 --host 0.0.0.0\n"})})})]}),"\n",(0,t.jsx)(n.admonition,{type:"warning",children:(0,t.jsx)(n.p,{children:"It is not the best option, compared to a static hosting provider / CDN."})}),"\n",(0,t.jsxs)(n.admonition,{type:"warning",children:[(0,t.jsx)(n.p,{children:"In the following sections, we will introduce a few common hosting providers and how they should be configured to deploy Docusaurus sites most efficiently. Docusaurus is not affiliated with any of these services, and this information is provided for convenience only. Some of the write-ups are provided by third-parties, and recent API changes may not be reflected on our side. If you see outdated content, PRs are welcome."}),(0,t.jsx)(n.p,{children:"Because we can only provide this content on a best-effort basis only, we have stopped accepting PRs adding new hosting options. You can, however, publish your writeup on a separate site (e.g. your blog, or the provider's official website), and ask us to include a link to your writeup."})]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-netlify",children:"Deploying to Netlify"}),"\n",(0,t.jsxs)(n.p,{children:["To deploy your Docusaurus sites to ",(0,t.jsx)(n.a,{href:"https://www.netlify.com/",children:"Netlify"}),", first make sure the following options are properly configured:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n // highlight-start\n url: 'https://docusaurus-2.netlify.app', // Url to your site with no trailing slash\n baseUrl: '/', // Base directory of your site relative to your repo\n // highlight-end\n // ...\n};\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Then, ",(0,t.jsx)(n.a,{href:"https://app.netlify.com/start",children:"create your site with Netlify"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"While you set up the site, specify the build commands and directories as follows:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["build command: ",(0,t.jsx)(n.code,{children:"npm run build"})]}),"\n",(0,t.jsxs)(n.li,{children:["publish directory: ",(0,t.jsx)(n.code,{children:"build"})]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:'If you did not configure these build options, you may still go to "Site settings" -> "Build & deploy" after your site is created.'}),"\n",(0,t.jsxs)(n.p,{children:["Once properly configured with the above options, your site should deploy and automatically redeploy upon merging to your deploy branch, which defaults to ",(0,t.jsx)(n.code,{children:"main"}),"."]}),"\n",(0,t.jsxs)(n.admonition,{type:"warning",children:[(0,t.jsxs)(n.p,{children:["Some Docusaurus sites put the ",(0,t.jsx)(n.code,{children:"docs"})," folder outside of ",(0,t.jsx)(n.code,{children:"website"})," (most likely former Docusaurus v1 sites):"]}),(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"repo # git root\n\u251C\u2500\u2500 docs # MD files\n\u2514\u2500\u2500 website # Docusaurus root\n"})}),(0,t.jsxs)(n.p,{children:["If you decide to use the ",(0,t.jsx)(n.code,{children:"website"})," folder as Netlify's base directory, Netlify will not trigger builds when you update the ",(0,t.jsx)(n.code,{children:"docs"})," folder, and you need to configure a ",(0,t.jsxs)(n.a,{href:"https://docs.netlify.com/configure-builds/common-configurations/ignore-builds/",children:["custom ",(0,t.jsx)(n.code,{children:"ignore"})," command"]}),":"]}),(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-toml",metastring:'title="website/netlify.toml"',children:'[build]\n ignore = "git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF . ../docs/"\n'})})]}),"\n",(0,t.jsxs)(n.admonition,{type:"warning",children:[(0,t.jsx)(n.p,{children:"By default, Netlify adds trailing slashes to Docusaurus URLs."}),(0,t.jsxs)(n.p,{children:["It is recommended to disable the Netlify setting ",(0,t.jsx)(n.code,{children:"Post Processing > Asset Optimization > Pretty Urls"})," to prevent lowercase URLs, unnecessary redirects, and 404 errors."]}),(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Be very careful"}),": the ",(0,t.jsx)(n.code,{children:"Disable asset optimization"})," global checkbox is broken and does not really disable the ",(0,t.jsx)(n.code,{children:"Pretty URLs"})," setting in practice. Please make sure to ",(0,t.jsx)(n.strong,{children:"uncheck it independently"}),"."]}),(0,t.jsxs)(n.p,{children:["If you want to keep the ",(0,t.jsx)(n.code,{children:"Pretty Urls"})," Netlify setting on, adjust the ",(0,t.jsx)(n.code,{children:"trailingSlash"})," Docusaurus config appropriately."]}),(0,t.jsxs)(n.p,{children:["Refer to ",(0,t.jsx)(n.a,{href:"https://github.com/slorber/trailing-slash-guide",children:"slorber/trailing-slash-guide"})," for more information."]})]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-vercel",children:"Deploying to Vercel"}),"\n",(0,t.jsxs)(n.p,{children:["Deploying your Docusaurus project to ",(0,t.jsx)(n.a,{href:"https://vercel.com/",children:"Vercel"})," will provide you with ",(0,t.jsx)(n.a,{href:"https://vercel.com/",children:"various benefits"})," in the areas of performance and ease of use."]}),"\n",(0,t.jsxs)(n.p,{children:["To deploy your Docusaurus project with a ",(0,t.jsx)(n.a,{href:"https://vercel.com/docs/concepts/git",children:"Vercel for Git Integration"}),", make sure it has been pushed to a Git repository."]}),"\n",(0,t.jsxs)(n.p,{children:["Import the project into Vercel using the ",(0,t.jsx)(n.a,{href:"https://vercel.com/import/git",children:"Import Flow"}),". During the import, you will find all relevant options preconfigured for you; however, you can choose to change any of these ",(0,t.jsx)(n.a,{href:"https://vercel.com/docs/build-step#build-&-development-settings",children:"options"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["After your project has been imported, all subsequent pushes to branches will generate ",(0,t.jsx)(n.a,{href:"https://vercel.com/docs/platform/deployments#preview",children:"Preview Deployments"}),", and all changes made to the ",(0,t.jsx)(n.a,{href:"https://vercel.com/docs/git-integrations#production-branch",children:"Production Branch"}),' (usually "main" or "master") will result in a ',(0,t.jsx)(n.a,{href:"https://vercel.com/docs/platform/deployments#production",children:"Production Deployment"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-github-pages",children:"Deploying to GitHub Pages"}),"\n",(0,t.jsxs)(n.p,{children:["Docusaurus provides an easy way to publish to ",(0,t.jsx)(n.a,{href:"https://pages.github.com/",children:"GitHub Pages"}),", which comes free with every GitHub repository."]}),"\n",(0,t.jsx)(n.h3,{id:"github-pages-overview",children:"Overview"}),"\n",(0,t.jsxs)(n.p,{children:["Usually, there are two repositories (at least two branches) involved in a publishing process: the branch containing the source files, and the branch containing the build output to be served with GitHub Pages. In the following tutorial, they will be referred to as ",(0,t.jsx)(n.strong,{children:'"source"'})," and ",(0,t.jsx)(n.strong,{children:'"deployment"'}),", respectively."]}),"\n",(0,t.jsxs)(n.p,{children:["Each GitHub repository is associated with a GitHub Pages service. If the deployment repository is called ",(0,t.jsx)(n.code,{children:"my-org/my-project"})," (where ",(0,t.jsx)(n.code,{children:"my-org"})," is the organization name or username), the deployed site will appear at ",(0,t.jsx)(n.code,{children:"https://my-org.github.io/my-project/"}),". If the deployment repository is called ",(0,t.jsx)(n.code,{children:"my-org/my-org.github.io"})," (the ",(0,t.jsx)(n.em,{children:"organization GitHub Pages repo"}),"), the site will appear at ",(0,t.jsx)(n.code,{children:"https://my-org.github.io/"}),"."]}),"\n",(0,t.jsxs)(n.admonition,{type:"info",children:[(0,t.jsxs)(n.p,{children:["In case you want to use your custom domain for GitHub Pages, create a ",(0,t.jsx)(n.code,{children:"CNAME"})," file in the ",(0,t.jsx)(n.code,{children:"static"})," directory. Anything within the ",(0,t.jsx)(n.code,{children:"static"})," directory will be copied to the root of the ",(0,t.jsx)(n.code,{children:"build"})," directory for deployment. When using a custom domain, you should be able to move back from ",(0,t.jsx)(n.code,{children:"baseUrl: '/projectName/'"})," to ",(0,t.jsx)(n.code,{children:"baseUrl: '/'"}),", and also set your ",(0,t.jsx)(n.code,{children:"url"})," to your custom domain."]}),(0,t.jsxs)(n.p,{children:["You may refer to GitHub Pages' documentation ",(0,t.jsx)(n.a,{href:"https://help.github.com/en/articles/user-organization-and-project-pages",children:"User, Organization, and Project Pages"})," for more details."]})]}),"\n",(0,t.jsxs)(n.p,{children:["GitHub Pages picks up deploy-ready files (the output from ",(0,t.jsx)(n.code,{children:"docusaurus build"}),") from the default branch (",(0,t.jsx)(n.code,{children:"master"})," / ",(0,t.jsx)(n.code,{children:"main"}),", usually) or the ",(0,t.jsx)(n.code,{children:"gh-pages"})," branch, and either from the root or the ",(0,t.jsx)(n.code,{children:"/docs"})," folder. You can configure that through ",(0,t.jsx)(n.code,{children:"Settings > Pages"}),' in your repository. This branch will be called the "deployment branch".']}),"\n",(0,t.jsxs)(n.p,{children:["We provide a ",(0,t.jsx)(n.code,{children:"docusaurus deploy"})," command that helps you deploy your site from the source branch to the deployment branch in one command: clone, build, and commit."]}),"\n",(0,t.jsxs)(n.h3,{id:"docusaurusconfigjs-settings",children:[(0,t.jsx)(n.code,{children:"docusaurus.config.js"})," settings"]}),"\n",(0,t.jsxs)(n.p,{children:["First, modify your ",(0,t.jsx)(n.code,{children:"docusaurus.config.js"})," and add the following params:"]}),"\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:"organizationName"})}),(0,t.jsx)(n.td,{children:"The GitHub user or organization that owns the deployment repository."})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"projectName"})}),(0,t.jsx)(n.td,{children:"The name of the deployment repository."})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"deploymentBranch"})}),(0,t.jsxs)(n.td,{children:["The name of the deployment branch. It defaults to ",(0,t.jsx)(n.code,{children:"'gh-pages'"})," for non-organization GitHub Pages repos (",(0,t.jsx)(n.code,{children:"projectName"})," not ending in ",(0,t.jsx)(n.code,{children:".github.io"}),"). Otherwise, it needs to be explicit as a config field or environment variable."]})]})]})]}),"\n",(0,t.jsxs)(n.p,{children:["These fields also have their environment variable counterparts which have a higher priority: ",(0,t.jsx)(n.code,{children:"ORGANIZATION_NAME"}),", ",(0,t.jsx)(n.code,{children:"PROJECT_NAME"}),", and ",(0,t.jsx)(n.code,{children:"DEPLOYMENT_BRANCH"}),"."]}),"\n",(0,t.jsx)(n.admonition,{type:"warning",children:(0,t.jsxs)(n.p,{children:["GitHub Pages adds a trailing slash to Docusaurus URLs by default. It is recommended to set a ",(0,t.jsx)(n.code,{children:"trailingSlash"})," config (",(0,t.jsx)(n.code,{children:"true"})," or ",(0,t.jsx)(n.code,{children:"false"}),", not ",(0,t.jsx)(n.code,{children:"undefined"}),")."]})}),"\n",(0,t.jsx)(n.p,{children:"Example:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n // ...\n url: 'https://endiliey.github.io', // Your website URL\n baseUrl: '/',\n // highlight-start\n projectName: 'endiliey.github.io',\n organizationName: 'endiliey',\n trailingSlash: false,\n // highlight-end\n // ...\n};\n"})}),"\n",(0,t.jsx)(n.admonition,{type:"warning",children:(0,t.jsxs)(n.p,{children:["By default, GitHub Pages runs published files through ",(0,t.jsx)(n.a,{href:"https://jekyllrb.com/",children:"Jekyll"}),". Since Jekyll will discard any files that begin with ",(0,t.jsx)(n.code,{children:"_"}),", it is recommended that you disable Jekyll by adding an empty file named ",(0,t.jsx)(n.code,{children:".nojekyll"})," file to your ",(0,t.jsx)(n.code,{children:"static"})," directory."]})}),"\n",(0,t.jsx)(n.h3,{id:"environment-settings",children:"Environment settings"}),"\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:"USE_SSH"})}),(0,t.jsxs)(n.td,{children:["Set to ",(0,t.jsx)(n.code,{children:"true"})," to use SSH instead of the default HTTPS for the connection to the GitHub repo. If the source repo URL is an SSH URL (e.g. ",(0,t.jsx)(n.code,{children:"git@github.com:facebook/docusaurus.git"}),"), ",(0,t.jsx)(n.code,{children:"USE_SSH"})," is inferred to be ",(0,t.jsx)(n.code,{children:"true"}),"."]})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"GIT_USER"})}),(0,t.jsxs)(n.td,{children:["The username for a GitHub account that ",(0,t.jsx)(n.strong,{children:"has push access to the deployment repo"}),". For your own repositories, this will usually be your GitHub username. Required if not using SSH, and ignored otherwise."]})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"GIT_PASS"})}),(0,t.jsxs)(n.td,{children:["Personal access token of the git user (specified by ",(0,t.jsx)(n.code,{children:"GIT_USER"}),"), to facilitate non-interactive deployment (e.g. continuous deployment)"]})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"CURRENT_BRANCH"})}),(0,t.jsxs)(n.td,{children:["The source branch. Usually, the branch will be ",(0,t.jsx)(n.code,{children:"main"})," or ",(0,t.jsx)(n.code,{children:"master"}),", but it could be any branch except for ",(0,t.jsx)(n.code,{children:"gh-pages"}),". If nothing is set for this variable, then the current branch from which ",(0,t.jsx)(n.code,{children:"docusaurus deploy"})," is invoked will be used."]})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"GIT_USER_NAME"})}),(0,t.jsxs)(n.td,{children:["The ",(0,t.jsx)(n.code,{children:"git config user.name"})," value to use when pushing to the deployment repo"]})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"GIT_USER_EMAIL"})}),(0,t.jsxs)(n.td,{children:["The ",(0,t.jsx)(n.code,{children:"git config user.email"})," value to use when pushing to the deployment repo"]})]})]})]}),"\n",(0,t.jsx)(n.p,{children:"GitHub enterprise installations should work in the same manner as github.com; you only need to set the organization's GitHub Enterprise host as an environment variable:"}),"\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:"GITHUB_HOST"})}),(0,t.jsx)(n.td,{children:"The domain name of your GitHub enterprise site."})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"GITHUB_PORT"})}),(0,t.jsx)(n.td,{children:"The port of your GitHub enterprise site."})]})]})]}),"\n",(0,t.jsx)(n.h3,{id:"deploy",children:"Deploy"}),"\n",(0,t.jsx)(n.p,{children:"Finally, to deploy your site to GitHub Pages, run:"}),"\n",(0,t.jsxs)(r.Z,{children:[(0,t.jsx)(l.Z,{value:"bash",label:"Bash",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"GIT_USER= yarn deploy\n"})})}),(0,t.jsx)(l.Z,{value:"windows",label:"Windows",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-batch",children:'cmd /C "set "GIT_USER=" && yarn deploy"\n'})})}),(0,t.jsx)(l.Z,{value:"powershell",label:"PowerShell",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-powershell",children:"cmd /C 'set \"GIT_USER=\" && yarn deploy'\n"})})})]}),"\n",(0,t.jsxs)(n.admonition,{type:"warning",children:[(0,t.jsxs)(n.p,{children:["Beginning in August 2021, GitHub requires every command-line sign-in to use the ",(0,t.jsx)(n.strong,{children:"personal access token"})," instead of the password. When GitHub prompts for your password, enter the PAT instead. See the ",(0,t.jsx)(n.a,{href:"https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token",children:"GitHub documentation"})," for more information."]}),(0,t.jsxs)(n.p,{children:["Alternatively, you can use SSH (",(0,t.jsx)(n.code,{children:"USE_SSH=true"}),") to log in."]})]}),"\n",(0,t.jsx)(n.h3,{id:"triggering-deployment-with-github-actions",children:"Triggering deployment with GitHub Actions"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://help.github.com/en/actions",children:"GitHub Actions"})," allow you to automate, customize, and execute your software development workflows right in your repository."]}),"\n",(0,t.jsxs)(n.p,{children:["The workflow examples below assume your website source resides in the ",(0,t.jsx)(n.code,{children:"main"})," branch of your repository (the ",(0,t.jsx)(n.em,{children:"source branch"})," is ",(0,t.jsx)(n.code,{children:"main"}),"), and your ",(0,t.jsx)(n.a,{href:"https://help.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site",children:"publishing source"})," is configured for ",(0,t.jsx)(n.a,{href:"https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow",children:"publishing with a custom GitHub Actions Workflow"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Our goal is that:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["When a new pull request is made to ",(0,t.jsx)(n.code,{children:"main"}),", there's an action that ensures the site builds successfully, without actually deploying. This job will be called ",(0,t.jsx)(n.code,{children:"test-deploy"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:["When a pull request is merged to the ",(0,t.jsx)(n.code,{children:"main"})," branch or someone pushes to the ",(0,t.jsx)(n.code,{children:"main"})," branch directly, it will be built and deployed to GitHub Pages. This job will be called ",(0,t.jsx)(n.code,{children:"deploy"}),"."]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Here are two approaches to deploying your docs with GitHub Actions. Based on the location of your deployment repository, choose the relevant tab below:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Source repo and deployment repo are the ",(0,t.jsx)(n.strong,{children:"same"})," repository."]}),"\n",(0,t.jsxs)(n.li,{children:["The deployment repo is a ",(0,t.jsx)(n.strong,{children:"remote"})," repository, different from the source. Instructions for this scenario assume ",(0,t.jsx)(n.a,{href:"https://help.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site",children:"publishing source"})," is the ",(0,t.jsx)(n.code,{children:"gh-pages"})," branch."]}),"\n"]}),"\n",(0,t.jsxs)(r.Z,{children:[(0,t.jsxs)(l.Z,{value:"same",label:"Same",children:[(0,t.jsxs)(n.p,{children:["While you can have both jobs defined in the same workflow file, the original ",(0,t.jsx)(n.code,{children:"deploy"})," workflow will always be listed as skipped in the PR check suite status, which is not indicative of the actual status and provides no value to the review process. We therefore propose to manage them as separate workflows instead."]}),(0,t.jsxs)(s,{children:[(0,t.jsx)("summary",{children:"GitHub action files"}),(0,t.jsx)(n.p,{children:"Add these two workflow files:"}),(0,t.jsxs)(n.admonition,{title:"Tweak the parameters for your setup",type:"warning",children:[(0,t.jsxs)(n.p,{children:["These files assume you are using Yarn. If you use npm, change ",(0,t.jsx)(n.code,{children:"cache: yarn"}),", ",(0,t.jsx)(n.code,{children:"yarn install --frozen-lockfile"}),", ",(0,t.jsx)(n.code,{children:"yarn build"})," to ",(0,t.jsx)(n.code,{children:"cache: npm"}),", ",(0,t.jsx)(n.code,{children:"npm ci"}),", ",(0,t.jsx)(n.code,{children:"npm run build"})," accordingly."]}),(0,t.jsxs)(n.p,{children:["If your Docusaurus project is not at the root of your repo, you may need to configure a ",(0,t.jsx)(n.a,{href:"https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#example-set-the-default-shell-and-working-directory",children:"default working directory"}),", and adjust the paths accordingly."]})]}),(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-yml",metastring:'title=".github/workflows/deploy.yml"',children:"name: Deploy to GitHub Pages\n\non:\n push:\n branches:\n - main\n # Review gh actions docs if you want to further define triggers, paths, etc\n # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on\n\njobs:\n build:\n name: Build Docusaurus\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n with:\n fetch-depth: 0\n - uses: actions/setup-node@v4\n with:\n node-version: 18\n cache: yarn\n\n - name: Install dependencies\n run: yarn install --frozen-lockfile\n - name: Build website\n run: yarn build\n\n - name: Upload Build Artifact\n uses: actions/upload-pages-artifact@v3\n with:\n path: build\n\n deploy:\n name: Deploy to GitHub Pages\n needs: build\n\n # Grant GITHUB_TOKEN the permissions required to make a Pages deployment\n permissions:\n pages: write # to deploy to Pages\n id-token: write # to verify the deployment originates from an appropriate source\n\n # Deploy to the github-pages environment\n environment:\n name: github-pages\n url: ${{ steps.deployment.outputs.page_url }}\n\n runs-on: ubuntu-latest\n steps:\n - name: Deploy to GitHub Pages\n id: deployment\n uses: actions/deploy-pages@v4\n"})}),(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-yml",metastring:'title=".github/workflows/test-deploy.yml"',children:"name: Test deployment\n\non:\n pull_request:\n branches:\n - main\n # Review gh actions docs if you want to further define triggers, paths, etc\n # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on\n\njobs:\n test-deploy:\n name: Test deployment\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n with:\n fetch-depth: 0\n - uses: actions/setup-node@v4\n with:\n node-version: 18\n cache: yarn\n\n - name: Install dependencies\n run: yarn install --frozen-lockfile\n - name: Test build website\n run: yarn build\n"})})]})]}),(0,t.jsxs)(l.Z,{value:"remote",label:"Remote",children:[(0,t.jsx)(n.p,{children:"A cross-repo publish is more difficult to set up because you need to push to another repo with permission checks. We will be using SSH to do the authentication."}),(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["Generate a new ",(0,t.jsx)(n.a,{href:"https://help.github.com/en/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent",children:"SSH key"}),". Since this SSH key will be used in CI, make sure to not enter any passphrase."]}),"\n",(0,t.jsxs)(n.li,{children:["By default, your public key should have been created in ",(0,t.jsx)(n.code,{children:"~/.ssh/id_rsa.pub"}),"; otherwise, use the name you've provided in the previous step to add your key to ",(0,t.jsx)(n.a,{href:"https://developer.github.com/v3/guides/managing-deploy-keys/",children:"GitHub deploy keys"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:["Copy the key to clipboard with ",(0,t.jsx)(n.code,{children:"pbcopy < ~/.ssh/id_rsa.pub"})," and paste it as a ",(0,t.jsx)(n.a,{href:"https://developer.github.com/v3/guides/managing-deploy-keys/#deploy-keys",children:"deploy key"})," in the deployment repository. Copy the file content if the command line doesn't work for you. Check the box for ",(0,t.jsx)(n.code,{children:"Allow write access"})," before saving your deployment key."]}),"\n",(0,t.jsxs)(n.li,{children:["You'll need your private key as a ",(0,t.jsx)(n.a,{href:"https://help.github.com/en/actions/configuring-and-managing-workflows/creating-and-storing-encrypted-secrets",children:"GitHub secret"})," to allow Docusaurus to run the deployment for you."]}),"\n",(0,t.jsxs)(n.li,{children:["Copy your private key with ",(0,t.jsx)(n.code,{children:"pbcopy < ~/.ssh/id_rsa"})," and paste a GitHub secret with the name ",(0,t.jsx)(n.code,{children:"GH_PAGES_DEPLOY"})," on your source repository. Copy the file content if the command line doesn't work for you. Save your secret."]}),"\n",(0,t.jsxs)(n.li,{children:["Create your ",(0,t.jsx)(n.a,{href:"https://docs.github.com/en/actions/use-cases-and-examples/creating-an-example-workflow",children:"documentation workflow"})," in the ",(0,t.jsx)(n.code,{children:".github/workflows/"})," directory. In this example it's the ",(0,t.jsx)(n.code,{children:"deploy.yml"})," file."]}),"\n"]}),(0,t.jsx)(n.p,{children:"At this point, you should have:"}),(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"the source repo with the GitHub workflow set with the private SSH key as the GitHub Secret, and"}),"\n",(0,t.jsx)(n.li,{children:"your deployment repo set with the public SSH key in GitHub Deploy Keys."}),"\n"]}),(0,t.jsxs)(s,{children:[(0,t.jsx)("summary",{children:"GitHub action file"}),(0,t.jsxs)(n.admonition,{type:"warning",children:[(0,t.jsxs)(n.p,{children:["Please make sure that you replace ",(0,t.jsx)(n.code,{children:"actions@github.com"})," with your GitHub email and ",(0,t.jsx)(n.code,{children:"gh-actions"})," with your name."]}),(0,t.jsxs)(n.p,{children:["This file assumes you are using Yarn. If you use npm, change ",(0,t.jsx)(n.code,{children:"cache: yarn"}),", ",(0,t.jsx)(n.code,{children:"yarn install --frozen-lockfile"}),", ",(0,t.jsx)(n.code,{children:"yarn build"})," to ",(0,t.jsx)(n.code,{children:"cache: npm"}),", ",(0,t.jsx)(n.code,{children:"npm ci"}),", ",(0,t.jsx)(n.code,{children:"npm run build"})," accordingly."]})]}),(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-yml",metastring:'title=".github/workflows/deploy.yml"',children:"name: Deploy to GitHub Pages\n\non:\n pull_request:\n branches: [main]\n push:\n branches: [main]\n\npermissions:\n contents: write\n\njobs:\n test-deploy:\n if: github.event_name != 'push'\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n with:\n fetch-depth: 0\n - uses: actions/setup-node@v4\n with:\n node-version: 18\n cache: yarn\n - name: Install dependencies\n run: yarn install --frozen-lockfile\n - name: Test build website\n run: yarn build\n deploy:\n if: github.event_name != 'pull_request'\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n with:\n fetch-depth: 0\n - uses: actions/setup-node@v4\n with:\n node-version: 18\n cache: yarn\n - uses: webfactory/ssh-agent@v0.5.0\n with:\n ssh-private-key: ${{ secrets.GH_PAGES_DEPLOY }}\n - name: Deploy to GitHub Pages\n env:\n USE_SSH: true\n run: |\n git config --global user.email \"actions@github.com\"\n git config --global user.name \"gh-actions\"\n yarn install --frozen-lockfile\n yarn deploy\n"})})]})]})]}),"\n",(0,t.jsxs)(s,{children:[(0,t.jsx)("summary",{children:"Site not deployed properly?"}),(0,t.jsx)(n.p,{children:"After pushing to main, if you don't see your site published at the desired location (for example, it says \"There isn't a GitHub Pages site here\", or it's showing your repo's README.md file), try the following:"}),(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Wait about three minutes and refresh. It may take a few minutes for GitHub pages to pick up the new files."}),"\n",(0,t.jsx)(n.li,{children:"Check your repo's landing page for a little green tick next to the last commit's title, indicating the CI has passed. If you see a cross, it means the build or deployment failed, and you should check the log for more debugging information."}),"\n",(0,t.jsxs)(n.li,{children:['Click on the tick and make sure you see a "Deploy to GitHub Pages" workflow. Names like "pages build and deployment / deploy" are GitHub\'s default workflows, indicating your custom deployment workflow failed to be triggered at all. Make sure the YAML files are placed under the ',(0,t.jsx)(n.code,{children:".github/workflows"}),' folder, and that the trigger condition is set correctly (e.g., if your default branch is "master" instead of "main", you need to change the ',(0,t.jsx)(n.code,{children:"on.push"})," property)."]}),"\n",(0,t.jsxs)(n.li,{children:['Under your repo\'s Settings > Pages, make sure the "Source" (which is the source for the ',(0,t.jsx)(n.em,{children:"deployment"}),' files, not "source" as in our terminology) is set to "gh-pages" + "/ (root)", since we are using ',(0,t.jsx)(n.code,{children:"gh-pages"})," as the deployment branch."]}),"\n"]}),(0,t.jsx)(n.p,{children:"If you are using a custom domain:"}),(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Verify that you have the correct DNS records set up if you're using a custom domain. See ",(0,t.jsx)(n.a,{href:"https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/about-custom-domains-and-github-pages",children:"GitHub pages documentation on configuring custom domains"}),". Also, please be aware that it may take up to 24 hours for DNS changes to propagate through the internet."]}),"\n"]})]}),"\n",(0,t.jsx)(n.h3,{id:"triggering-deployment-with-travis-ci",children:"Triggering deployment with Travis CI"}),"\n",(0,t.jsxs)(n.p,{children:["Continuous integration (CI) services are typically used to perform routine tasks whenever new commits are checked in to source control. These tasks can be any combination of running unit tests and integration tests, automating builds, publishing packages to npm, and deploying changes to your website. All you need to do to automate the deployment of your website is to invoke the ",(0,t.jsx)(n.code,{children:"yarn deploy"})," script whenever your website is updated. The following section covers how to do just that using ",(0,t.jsx)(n.a,{href:"https://travis-ci.com/",children:"Travis CI"}),", a popular continuous integration service provider."]}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["Go to ",(0,t.jsx)(n.a,{href:"https://github.com/settings/tokens",children:"https://github.com/settings/tokens"})," and generate a new ",(0,t.jsx)(n.a,{href:"https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/",children:"personal access token"}),". When creating the token, grant it the ",(0,t.jsx)(n.code,{children:"repo"})," scope so that it has the permissions it needs."]}),"\n",(0,t.jsxs)(n.li,{children:["Using your GitHub account, ",(0,t.jsx)(n.a,{href:"https://github.com/marketplace/travis-ci",children:"add the Travis CI app"})," to the repository you want to activate."]}),"\n",(0,t.jsxs)(n.li,{children:["Open your Travis CI dashboard. The URL looks like ",(0,t.jsx)(n.code,{children:"https://travis-ci.com/USERNAME/REPO"}),", and navigate to the ",(0,t.jsx)(n.code,{children:"More options > Setting > Environment Variables"})," section of your repository."]}),"\n",(0,t.jsxs)(n.li,{children:["Create a new environment variable named ",(0,t.jsx)(n.code,{children:"GH_TOKEN"})," with your newly generated token as its value, then ",(0,t.jsx)(n.code,{children:"GH_EMAIL"})," (your email address) and ",(0,t.jsx)(n.code,{children:"GH_NAME"})," (your GitHub username)."]}),"\n",(0,t.jsxs)(n.li,{children:["Create a ",(0,t.jsx)(n.code,{children:".travis.yml"})," on the root of your repository with the following:"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-yml",metastring:'title=".travis.yml"',children:'language: node_js\nnode_js:\n - 18\nbranches:\n only:\n - main\ncache:\n yarn: true\nscript:\n - git config --global user.name "${GH_NAME}"\n - git config --global user.email "${GH_EMAIL}"\n - echo "machine github.com login ${GH_NAME} password ${GH_TOKEN}" > ~/.netrc\n - yarn install\n - GIT_USER="${GH_NAME}" yarn deploy\n'})}),"\n",(0,t.jsxs)(n.p,{children:["Now, whenever a new commit lands in ",(0,t.jsx)(n.code,{children:"main"}),", Travis CI will run your suite of tests and if everything passes, your website will be deployed via the ",(0,t.jsx)(n.code,{children:"yarn deploy"})," script."]}),"\n",(0,t.jsx)(n.h3,{id:"triggering-deployment-with-buddy",children:"Triggering deployment with Buddy"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://buddy.works/",children:"Buddy"})," is an easy-to-use CI/CD tool that allows you to automate the deployment of your portal to different environments, including GitHub Pages."]}),"\n",(0,t.jsx)(n.p,{children:"Follow these steps to create a pipeline that automatically deploys a new version of your website whenever you push changes to the selected branch of your project:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["Go to ",(0,t.jsx)(n.a,{href:"https://github.com/settings/tokens",children:"https://github.com/settings/tokens"})," and generate a new ",(0,t.jsx)(n.a,{href:"https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/",children:"personal access token"}),". When creating the token, grant it the ",(0,t.jsx)(n.code,{children:"repo"})," scope so that it has the permissions it needs."]}),"\n",(0,t.jsx)(n.li,{children:"Sign in to your Buddy account and create a new project."}),"\n",(0,t.jsx)(n.li,{children:"Choose GitHub as your git hosting provider and select the repository with the code of your website."}),"\n",(0,t.jsxs)(n.li,{children:["Using the left navigation panel, switch to the ",(0,t.jsx)(n.code,{children:"Pipelines"})," view."]}),"\n",(0,t.jsxs)(n.li,{children:["Create a new pipeline. Define its name, set the trigger mode to ",(0,t.jsx)(n.code,{children:"On push"}),", and select the branch that triggers the pipeline execution."]}),"\n",(0,t.jsxs)(n.li,{children:["Add a ",(0,t.jsx)(n.code,{children:"Node.js"})," action."]}),"\n",(0,t.jsx)(n.li,{children:"Add these commands in the action's terminal:"}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:'GIT_USER=\ngit config --global user.email ""\ngit config --global user.name ""\nyarn deploy\n'})}),"\n",(0,t.jsxs)(n.p,{children:["After creating this simple pipeline, each new commit pushed to the branch you selected deploys your website to GitHub Pages using ",(0,t.jsx)(n.code,{children:"yarn deploy"}),". Read ",(0,t.jsx)(n.a,{href:"https://buddy.works/guides/react-docusaurus",children:"this guide"})," to learn more about setting up a CI/CD pipeline for Docusaurus."]}),"\n",(0,t.jsx)(n.h3,{id:"using-azure-pipelines",children:"Using Azure Pipelines"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["Sign Up at ",(0,t.jsx)(n.a,{href:"https://azure.microsoft.com/en-us/services/devops/pipelines/",children:"Azure Pipelines"})," if you haven't already."]}),"\n",(0,t.jsx)(n.li,{children:"Create an organization. Within the organization, create a project and connect your repository from GitHub."}),"\n",(0,t.jsxs)(n.li,{children:["Go to ",(0,t.jsx)(n.a,{href:"https://github.com/settings/tokens",children:"https://github.com/settings/tokens"})," and generate a new ",(0,t.jsx)(n.a,{href:"https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/",children:"personal access token"})," with the ",(0,t.jsx)(n.code,{children:"repo"})," scope."]}),"\n",(0,t.jsxs)(n.li,{children:["In the project page (which looks like ",(0,t.jsx)(n.code,{children:"https://dev.azure.com/ORG_NAME/REPO_NAME/_build"}),"), create a new pipeline with the following text. Also, click on edit and add a new environment variable named ",(0,t.jsx)(n.code,{children:"GH_TOKEN"})," with your newly generated token as its value, then ",(0,t.jsx)(n.code,{children:"GH_EMAIL"})," (your email address) and ",(0,t.jsx)(n.code,{children:"GH_NAME"})," (your GitHub username). Make sure to mark them as secret. Alternatively, you can also add a file named ",(0,t.jsx)(n.code,{children:"azure-pipelines.yml"})," at your repository root."]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-yml",metastring:'title="azure-pipelines.yml"',children:'trigger:\n - main\n\npool:\n vmImage: ubuntu-latest\n\nsteps:\n - checkout: self\n persistCredentials: true\n\n - task: NodeTool@0\n inputs:\n versionSpec: \'18\'\n displayName: Install Node.js\n\n - script: |\n git config --global user.name "${GH_NAME}"\n git config --global user.email "${GH_EMAIL}"\n git checkout -b main\n echo "machine github.com login ${GH_NAME} password ${GH_TOKEN}" > ~/.netrc\n yarn install\n GIT_USER="${GH_NAME}" yarn deploy\n env:\n GH_NAME: $(GH_NAME)\n GH_EMAIL: $(GH_EMAIL)\n GH_TOKEN: $(GH_TOKEN)\n displayName: Install and build\n'})}),"\n",(0,t.jsx)(n.h3,{id:"using-drone",children:"Using Drone"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["Create a new SSH key that will be the ",(0,t.jsx)(n.a,{href:"https://docs.github.com/en/free-pro-team@latest/developers/overview/managing-deploy-keys#deploy-keys",children:"deploy key"})," for your project."]}),"\n",(0,t.jsxs)(n.li,{children:["Name your private and public keys to be specific and so that it does not overwrite your other ",(0,t.jsx)(n.a,{href:"https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent",children:"SSH keys"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:["Go to ",(0,t.jsx)(n.code,{children:"https://github.com/USERNAME/REPO/settings/keys"})," and add a new deploy key by pasting in the public key you just generated."]}),"\n",(0,t.jsxs)(n.li,{children:["Open your Drone.io dashboard and log in. The URL looks like ",(0,t.jsx)(n.code,{children:"https://cloud.drone.io/USERNAME/REPO"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:["Click on the repository, click on activate repository, and add a secret called ",(0,t.jsx)(n.code,{children:"git_deploy_private_key"})," with your private key value that you just generated."]}),"\n",(0,t.jsxs)(n.li,{children:["Create a ",(0,t.jsx)(n.code,{children:".drone.yml"})," on the root of your repository with the below text."]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-yml",metastring:'title=".drone.yml"',children:'kind: pipeline\ntype: docker\ntrigger:\n event:\n - tag\n- name: Website\n image: node\n commands:\n - mkdir -p $HOME/.ssh\n - ssh-keyscan -t rsa github.com >> $HOME/.ssh/known_hosts\n - echo "$GITHUB_PRIVATE_KEY" > "$HOME/.ssh/id_rsa"\n - chmod 0600 $HOME/.ssh/id_rsa\n - cd website\n - yarn install\n - yarn deploy\n environment:\n USE_SSH: true\n GITHUB_PRIVATE_KEY:\n from_secret: git_deploy_private_key\n'})}),"\n",(0,t.jsx)(n.p,{children:"Now, whenever you push a new tag to GitHub, this trigger will start the drone CI job to publish your website."}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-flightcontrol",children:"Deploying to Flightcontrol"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://www.flightcontrol.dev/?ref=docusaurus",children:"Flightcontrol"})," is a service that automatically builds and deploys your web apps to AWS Fargate directly from your Git repository. It gives you full access to inspect and make infrastructure changes without the limitations of a traditional PaaS."]}),"\n",(0,t.jsxs)(n.p,{children:["Get started by following ",(0,t.jsx)(n.a,{href:"https://www.flightcontrol.dev/docs/reference/examples/docusaurus/?ref=docusaurus",children:"Flightcontrol's step-by-step Docusaurus guide"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-koyeb",children:"Deploying to Koyeb"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://www.koyeb.com",children:"Koyeb"})," is a developer-friendly serverless platform to deploy apps globally. The platform lets you seamlessly run Docker containers, web apps, and APIs with git-based deployment, native autoscaling, a global edge network, and built-in service mesh and discovery. Check out the ",(0,t.jsx)(n.a,{href:"https://www.koyeb.com/tutorials/deploy-docusaurus-on-koyeb",children:"Koyeb's Docusaurus deployment guide"})," to get started."]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-render",children:"Deploying to Render"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://render.com",children:"Render"})," offers ",(0,t.jsx)(n.a,{href:"https://render.com/docs/static-sites",children:"free static site hosting"})," with fully managed SSL, custom domains, a global CDN, and continuous auto-deploy from your Git repo. Get started in just a few minutes by following ",(0,t.jsx)(n.a,{href:"https://render.com/docs/deploy-docusaurus",children:"Render's guide to deploying Docusaurus"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-qovery",children:"Deploying to Qovery"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://www.qovery.com",children:"Qovery"})," is a fully-managed cloud platform that runs on your AWS, Digital Ocean, and Scaleway account where you can host static sites, backend APIs, databases, cron jobs, and all your other apps in one place."]}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["Create a Qovery account. Visit the ",(0,t.jsx)(n.a,{href:"https://console.qovery.com",children:"Qovery dashboard"})," to create an account if you don't already have one."]}),"\n",(0,t.jsxs)(n.li,{children:["Create a project.","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Click on ",(0,t.jsx)(n.strong,{children:"Create project"})," and give a name to your project."]}),"\n",(0,t.jsxs)(n.li,{children:["Click on ",(0,t.jsx)(n.strong,{children:"Next"}),"."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["Create a new environment.","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Click on ",(0,t.jsx)(n.strong,{children:"Create environment"})," and give a name (e.g. staging, production)."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["Add an application.","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Click on ",(0,t.jsx)(n.strong,{children:"Create an application"}),", give a name and select your GitHub or GitLab repository where your Docusaurus app is located."]}),"\n",(0,t.jsx)(n.li,{children:"Define the main branch name and the root application path."}),"\n",(0,t.jsxs)(n.li,{children:["Click on ",(0,t.jsx)(n.strong,{children:"Create"}),". After the application is created:"]}),"\n",(0,t.jsxs)(n.li,{children:["Navigate to your application ",(0,t.jsx)(n.strong,{children:"Settings"})]}),"\n",(0,t.jsxs)(n.li,{children:["Select ",(0,t.jsx)(n.strong,{children:"Port"})]}),"\n",(0,t.jsx)(n.li,{children:"Add port used by your Docusaurus application"}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["Deploy","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["All you have to do now is to navigate to your application and click on ",(0,t.jsx)(n.strong,{children:"Deploy"}),"."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://hub.qovery.com/img/heroku/heroku-1.png",alt:"Deploy the app"})}),"\n",(0,t.jsxs)(n.p,{children:["That's it. Watch the status and wait till the app is deployed. To open the application in your browser, click on ",(0,t.jsx)(n.strong,{children:"Action"})," and ",(0,t.jsx)(n.strong,{children:"Open"})," in your application overview."]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-hostman",children:"Deploying to Hostman"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://hostman.com/",children:"Hostman"})," allows you to host static websites for free. Hostman automates everything, you just need to connect your repository and follow these easy steps:"]}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"Create a service."}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["To deploy a Docusaurus static website, click ",(0,t.jsx)(n.strong,{children:"Create"})," in the top-left corner of your ",(0,t.jsx)(n.a,{href:"https://dashboard.hostman.com/",children:"Dashboard"})," and choose ",(0,t.jsx)(n.strong,{children:"Front-end app or static website"}),"."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"Select the project to deploy."}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"If you are logged in to Hostman with your GitHub, GitLab, or Bitbucket account, you will see the repository with your projects, including the private ones."}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Choose the project you want to deploy. It must contain the directory with the project's files (e.g. ",(0,t.jsx)(n.code,{children:"website"}),")."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["To access a different repository, click ",(0,t.jsx)(n.strong,{children:"Connect another repository"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"If you didn't use your Git account credentials to log in, you'll be able to access the necessary account now, and then select the project."}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"Configure the build settings."}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Next, the ",(0,t.jsx)(n.strong,{children:"Website customization"})," window will appear. Choose the ",(0,t.jsx)(n.strong,{children:"Static website"})," option from the list of frameworks."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.strong,{children:"Directory with app"})," points at the directory that will contain the project's files after the build. If you selected the repository with the contents of the website (or ",(0,t.jsx)(n.code,{children:"my_website"}),") directory during Step 2, you can leave it empty."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"The standard build command for Docusaurus is:"}),"\n",(0,t.jsxs)(r.Z,{groupId:"npm2yarn",children:[(0,t.jsx)(l.Z,{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.Z,{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.Z,{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"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["You can modify the build command if needed. You can enter multiple commands separated by ",(0,t.jsx)(n.code,{children:"&&"}),"."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"Deploy."}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Click ",(0,t.jsx)(n.strong,{children:"Deploy"})," to start the build process."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"Once it starts, you will enter the deployment log. If there are any issues with the code, you will get warning or error messages in the log specifying the cause of the problem. Usually, the log contains all the debugging data you'll need."}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"When the deployment is complete, you will receive an email notification and also see a log entry. All done! Your project is up and ready."}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-surge",children:"Deploying to Surge"}),"\n",(0,t.jsxs)(n.p,{children:["Surge is a ",(0,t.jsx)(n.a,{href:"https://surge.sh/help/getting-started-with-surge",children:"static web hosting platform"})," that you can use to deploy your Docusaurus project from the command line in seconds. Deploying your project to Surge is easy and free (including custom domains and SSL certs)."]}),"\n",(0,t.jsx)(n.p,{children:"Deploy your app in a matter of seconds using Surge with the following steps:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["First, install Surge using npm by running the following command:","\n",(0,t.jsxs)(r.Z,{groupId:"npm2yarn",children:[(0,t.jsx)(l.Z,{value:"npm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npm install -g surge\n"})})}),(0,t.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"yarn global add surge\n"})})}),(0,t.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"pnpm add -g surge\n"})})})]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["To build the static files of your site for production in the root directory of your project, run:","\n",(0,t.jsxs)(r.Z,{groupId:"npm2yarn",children:[(0,t.jsx)(l.Z,{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.Z,{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.Z,{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"]}),"\n",(0,t.jsxs)(n.li,{children:["Then, run this command inside the root directory of your project:","\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"surge build/\n"})}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"First-time users of Surge would be prompted to create an account from the command line (which happens only once)."}),"\n",(0,t.jsxs)(n.p,{children:["Confirm that the site you want to publish is in the ",(0,t.jsx)(n.code,{children:"build"})," directory. A randomly generated subdomain ",(0,t.jsx)(n.code,{children:"*.surge.sh subdomain"})," is always given (which can be edited)."]}),"\n",(0,t.jsx)(n.h3,{id:"using-your-domain",children:"Using your domain"}),"\n",(0,t.jsx)(n.p,{children:"If you have a domain name you can deploy your site using the command:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"surge build/ your-domain.com\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Your site is now deployed for free at ",(0,t.jsx)(n.code,{children:"subdomain.surge.sh"})," or ",(0,t.jsx)(n.code,{children:"your-domain.com"})," depending on the method you chose."]}),"\n",(0,t.jsx)(n.h3,{id:"setting-up-cname-file",children:"Setting up CNAME file"}),"\n",(0,t.jsx)(n.p,{children:"Store your domain in a CNAME file for future deployments with the following command:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"echo subdomain.surge.sh > CNAME\n"})}),"\n",(0,t.jsxs)(n.p,{children:["You can deploy any other changes in the future with the command ",(0,t.jsx)(n.code,{children:"surge"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-stormkit",children:"Deploying to Stormkit"}),"\n",(0,t.jsxs)(n.p,{children:["You can deploy your Docusaurus project to ",(0,t.jsx)(n.a,{href:"https://www.stormkit.io",children:"Stormkit"}),", a deployment platform for static websites, single-page applications (SPAs), and serverless functions. For detailed instructions, refer to this ",(0,t.jsx)(n.a,{href:"https://www.stormkit.io/blog/how-to-deploy-docusarous",children:"guide"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-quantcdn",children:"Deploying to QuantCDN"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["Install ",(0,t.jsx)(n.a,{href:"https://docs.quantcdn.io/docs/cli/get-started",children:"Quant CLI"})]}),"\n",(0,t.jsxs)(n.li,{children:["Create a QuantCDN account by ",(0,t.jsx)(n.a,{href:"https://dashboard.quantcdn.io/register",children:"signing up"})]}),"\n",(0,t.jsxs)(n.li,{children:["Initialize your project with ",(0,t.jsx)(n.code,{children:"quant init"})," and fill in your credentials:","\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"quant init\n"})}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["Deploy your site.","\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"quant deploy\n"})}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["See ",(0,t.jsx)(n.a,{href:"https://docs.quantcdn.io/docs/cli/continuous-integration",children:"docs"})," and ",(0,t.jsx)(n.a,{href:"https://www.quantcdn.io/blog",children:"blog"})," for more examples and use cases for deploying to QuantCDN."]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-layer0",children:"Deploying to Layer0"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://www.layer0.co",children:"Layer0"})," is an all-in-one platform to develop, deploy, preview, experiment on, monitor, and run your headless frontend. It is focused on large, dynamic websites and best-in-class performance through EdgeJS (a JavaScript-based Content Delivery Network), predictive prefetching, and performance monitoring. Layer0 offers a free tier. Get started in just a few minutes by following ",(0,t.jsx)(n.a,{href:"https://docs.layer0.co/guides/docusaurus",children:"Layer0's guide to deploying Docusaurus"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-cloudflare-pages",children:"Deploying to Cloudflare Pages"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://pages.cloudflare.com/",children:"Cloudflare Pages"})," is a Jamstack platform for frontend developers to collaborate and deploy websites. Get started within a few minutes by following ",(0,t.jsx)(n.a,{href:"https://developers.cloudflare.com/pages/framework-guides/deploy-a-docusaurus-site/",children:"this page"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-azure-static-web-apps",children:"Deploying to Azure Static Web Apps"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://docs.microsoft.com/en-us/azure/static-web-apps/overview",children:"Azure Static Web Apps"})," is a service that automatically builds and deploys full-stack web apps to Azure directly from the code repository, simplifying the developer experience for CI/CD. Static Web Apps separates the web application's static assets from its dynamic (API) endpoints. Static assets are served from globally-distributed content servers, making it faster for clients to retrieve files using servers nearby. Dynamic APIs are scaled with serverless architectures using an event-driven functions-based approach that is more cost-effective and scales on demand. Get started in a few minutes by following ",(0,t.jsx)(n.a,{href:"https://dev.to/azure/11-share-content-with-docusaurus-azure-static-web-apps-30hc",children:"this step-by-step guide"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-kinsta",children:"Deploying to Kinsta"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://kinsta.com/static-site-hosting",children:"Kinsta Static Site Hosting"})," lets you deploy up to 100 static sites for free, custom domains with SSL, 100 GB monthly bandwidth, and 260+ Cloudflare CDN locations."]}),"\n",(0,t.jsxs)(n.p,{children:["Get started in just a few clicks by following our ",(0,t.jsx)(n.a,{href:"https://kinsta.com/docs/docusaurus-example/",children:"Docusaurus on Kinsta"})," article."]})]})}function p(e={}){let{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(u,{...e})}):u(e)}},58636:function(e,n,s){s.d(n,{Z:()=>o});var i=s(85893);s(67294);var t=s(90496);function o(e){let{children:n,hidden:s,className:o}=e;return(0,i.jsx)("div",{role:"tabpanel",className:(0,t.Z)("tabItem_pnkT",o),hidden:s,children:n})}},15398:function(e,n,s){s.d(n,{Z:()=>x});var i=s(85893),t=s(67294),o=s(90496),r=s(54947),l=s(3620),a=s(844),c=s(97486),d=s(32263),h=s(16971);function u(e){return t.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||t.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.`)})?.filter(Boolean)??[]}function p(e){let{value:n,tabValues:s}=e;return s.some(e=>e.value===n)}var g=s(71607);function y(e){let{className:n,block:s,selectedValue:t,selectValue:l,tabValues:a}=e,c=[],{blockElementScrollPositionUntilNextRender:d}=(0,r.o5)(),h=e=>{let n=e.currentTarget,s=a[c.indexOf(n)].value;s!==t&&(d(n),l(s))},u=e=>{let n=null;switch(e.key){case"Enter":h(e);break;case"ArrowRight":{let s=c.indexOf(e.currentTarget)+1;n=c[s]??c[0];break}case"ArrowLeft":{let s=c.indexOf(e.currentTarget)-1;n=c[s]??c[c.length-1]}}n?.focus()};return(0,i.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.Z)("tabs",{"tabs--block":s},n),children:a.map(e=>{let{value:n,label:s,attributes:r}=e;return(0,i.jsx)("li",{role:"tab",tabIndex:t===n?0:-1,"aria-selected":t===n,ref:e=>{c.push(e)},onKeyDown:u,onClick:h,...r,className:(0,o.Z)("tabs__item","tabItem_AQgk",r?.className,{"tabs__item--active":t===n}),children:s??n},n)})})}function m(e){let{lazy:n,children:s,selectedValue:r}=e,l=(Array.isArray(s)?s:[s]).filter(Boolean);if(n){let e=l.find(e=>e.props.value===r);return e?(0,t.cloneElement)(e,{className:(0,o.Z)("margin-top--md",e.props.className)}):null}return(0,i.jsx)("div",{className:"margin-top--md",children:l.map((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==r}))})}function j(e){let n=function(e){let{defaultValue:n,queryString:s=!1,groupId:i}=e,o=function(e){let{values:n,children:s}=e;return(0,t.useMemo)(()=>{let e=n??u(s).map(e=>{let{props:{value:n,label:s,attributes:i,default:t}}=e;return{value:n,label:s,attributes:i,default:t}});return!function(e){let n=(0,d.lx)(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,s])}(e),[r,g]=(0,t.useState)(()=>(function(e){let{defaultValue:n,tabValues:s}=e;if(0===s.length)throw Error("Docusaurus error: the component requires at least one children component");if(n){if(!p({value:n,tabValues:s}))throw Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${s.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}let i=s.find(e=>e.default)??s[0];if(!i)throw Error("Unexpected error: 0 tabValues");return i.value})({defaultValue:n,tabValues:o})),[y,m]=function(e){let{queryString:n=!1,groupId:s}=e,i=(0,l.k6)(),o=function(e){let{queryString:n=!1,groupId:s}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!s)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 s??null}({queryString:n,groupId:s});return[(0,c._X)(o),(0,t.useCallback)(e=>{if(!o)return;let n=new URLSearchParams(i.location.search);n.set(o,e),i.replace({...i.location,search:n.toString()})},[o,i])]}({queryString:s,groupId:i}),[j,x]=function(e){let{groupId:n}=e,s=n?`docusaurus.tab.${n}`:null,[i,o]=(0,h.Nk)(s);return[i,(0,t.useCallback)(e=>{s&&o.set(e)},[s,o])]}({groupId:i}),f=(()=>{let e=y??j;return p({value:e,tabValues:o})?e:null})();return(0,a.Z)(()=>{f&&g(f)},[f]),{selectedValue:r,selectValue:(0,t.useCallback)(e=>{if(!p({value:e,tabValues:o}))throw Error(`Can't select invalid tab value=${e}`);g(e),m(e),x(e)},[m,x,o]),tabValues:o}}(e);return(0,i.jsxs)("div",{className:(0,o.Z)("tabs-container","tabList_Qoir"),children:[(0,i.jsx)(y,{...n,...e}),(0,i.jsx)(m,{...n,...e})]})}function x(e){let n=(0,g.Z)();return(0,i.jsx)(j,{...e,children:u(e.children)},String(n))}},80980:function(e,n,s){s.d(n,{Z:()=>l,a:()=>r});var i=s(67294);let t={},o=i.createContext(t);function r(e){let n=i.useContext(o);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["79557"],{26933:function(e,n,s){s.r(n),s.d(n,{default:()=>p,frontMatter:()=>a,metadata:()=>i,assets:()=>d,toc:()=>h,contentTitle:()=>c});var i=JSON.parse('{"id":"deployment","title":"Deployment","description":"Deploy your Docusaurus app for production on a range of static site hosting services.","source":"@site/docs/deployment.mdx","sourceDirName":".","slug":"/deployment","permalink":"/docs/deployment","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/deployment.mdx","tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739551601000,"frontMatter":{"description":"Deploy your Docusaurus app for production on a range of static site hosting services."},"sidebar":"docs","previous":{"title":"Using Plugins","permalink":"/docs/using-plugins"},"next":{"title":"i18n - Introduction","permalink":"/docs/i18n/introduction"}}'),t=s(85893),o=s(80980),r=s(15398),l=s(58636);let a={description:"Deploy your Docusaurus app for production on a range of static site hosting services."},c="Deployment",d={},h=[{value:"Configuration",id:"configuration",level:2},{value:"Testing your Build Locally",id:"testing-build-locally",level:2},{value:"Trailing slash configuration",id:"trailing-slashes",level:2},{value:"Using environment variables",id:"using-environment-variables",level:2},{value:"Choosing a hosting provider",id:"choosing-a-hosting-provider",level:2},{value:"Self-Hosting",id:"self-hosting",level:2},{value:"Deploying to Netlify",id:"deploying-to-netlify",level:2},{value:"Deploying to Vercel",id:"deploying-to-vercel",level:2},{value:"Deploying to GitHub Pages",id:"deploying-to-github-pages",level:2},{value:"Overview",id:"github-pages-overview",level:3},{value:"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.a)(),...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.Z,{groupId:"npm2yarn",children:[(0,t.jsx)(l.Z,{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.Z,{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.Z,{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.Z,{groupId:"npm2yarn",children:[(0,t.jsx)(l.Z,{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.Z,{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.Z,{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
Contact us through {customFields.teamEmail}!
;\n}\n"})}),"\n",(0,t.jsx)(n.h2,{id:"choosing-a-hosting-provider",children:"Choosing a hosting provider"}),"\n",(0,t.jsx)(n.p,{children:"There are a few common hosting options:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"#self-hosting",children:"Self hosting"})," with an HTTP server like Apache2 or Nginx."]}),"\n",(0,t.jsxs)(n.li,{children:["Jamstack providers (e.g. ",(0,t.jsx)(n.a,{href:"#deploying-to-netlify",children:"Netlify"})," and ",(0,t.jsx)(n.a,{href:"#deploying-to-vercel",children:"Vercel"}),"). We will use them as references, but the same reasoning can apply to other providers."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"#deploying-to-github-pages",children:"GitHub Pages"})," (by definition, it is also Jamstack, but we compare it separately)."]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"If you are unsure of which one to choose, ask the following questions:"}),"\n",(0,t.jsxs)(s,{children:[(0,t.jsx)("summary",{children:(0,t.jsx)(n.p,{children:"How many resources (money, person-hours, etc.) am I willing to invest in this?"})}),(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"\uD83D\uDD34 Self-hosting requires experience in networking as well as Linux and web server administration. It's the most difficult option, and would require the most time to manage successfully. Expense-wise, cloud services are almost never free, and purchasing/deploying an onsite server can be even more costly."}),"\n",(0,t.jsx)(n.li,{children:"\uD83D\uDFE2 Jamstack providers can help you set up a working website in almost no time and offer features like server-side redirects that are easily configurable. Many providers offer generous build-time quotas even for free plans that you would almost never exceed. However, free plans have limits, and you would need to pay once you hit those limits. Check the pricing page of your provider for details."}),"\n",(0,t.jsxs)(n.li,{children:["\uD83D\uDFE1 The GitHub Pages deployment workflow can be tedious to set up. (Evidence: see the length of ",(0,t.jsx)(n.a,{href:"#deploying-to-github-pages",children:"Deploying to GitHub Pages"}),"!) However, this service (including build and deployment) is always free for public repositories, and we have detailed instructions to help you make it work."]}),"\n"]})]}),"\n",(0,t.jsxs)(s,{children:[(0,t.jsx)("summary",{children:"How much server-side customization do I need?"}),(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"\uD83D\uDFE2 With self-hosting, you have access to the entire server's configuration. You can configure the virtual host to serve different content based on the request URL, you can do complicated server-side redirects, you can implement authentication, and so on. If you need a lot of server-side features, self-host your website."}),"\n",(0,t.jsx)(n.li,{children:"\uD83D\uDFE1 Jamstack usually offers some server-side configuration (e.g. URL formatting (trailing slashes), server-side redirects, etc.)."}),"\n",(0,t.jsx)(n.li,{children:"\uD83D\uDD34 GitHub Pages doesn't expose server-side configuration besides enforcing HTTPS and setting CNAME records."}),"\n"]})]}),"\n",(0,t.jsxs)(s,{children:[(0,t.jsx)("summary",{children:"Do I need collaboration-friendly deployment workflows?"}),(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"\uD83D\uDFE1 Self-hosted services can leverage continuous deployment functionality like Netlify, but more heavy-lifting is involved. Usually, you would designate a specific person to manage the deployment, and the workflow wouldn't be very git-based as opposed to the other two options."}),"\n",(0,t.jsx)(n.li,{children:"\uD83D\uDFE2 Netlify and Vercel have deploy previews for every pull request, which is useful for a team to review work before merging to production. You can also manage a team with different member access to the deployment."}),"\n",(0,t.jsx)(n.li,{children:"\uD83D\uDFE1 GitHub Pages cannot do deploy previews in a non-convoluted way. One repo can only be associated with one site deployment. On the other hand, you can control who has write access to the site's deployment."}),"\n"]})]}),"\n",(0,t.jsx)(n.p,{children:"There isn't a silver bullet. You need to weigh your needs and resources before making a choice."}),"\n",(0,t.jsx)(n.h2,{id:"self-hosting",children:"Self-Hosting"}),"\n",(0,t.jsxs)(n.p,{children:["Docusaurus can be self-hosted using ",(0,t.jsx)(n.a,{href:"/docs/cli#docusaurus-serve-sitedir",children:(0,t.jsx)(n.code,{children:"docusaurus serve"})}),". Change port using ",(0,t.jsx)(n.code,{children:"--port"})," and ",(0,t.jsx)(n.code,{children:"--host"})," to change host."]}),"\n",(0,t.jsxs)(r.Z,{groupId:"npm2yarn",children:[(0,t.jsx)(l.Z,{value:"npm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npm run serve -- --build --port 80 --host 0.0.0.0\n"})})}),(0,t.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"yarn serve --build --port 80 --host 0.0.0.0\n"})})}),(0,t.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"pnpm run serve --build --port 80 --host 0.0.0.0\n"})})})]}),"\n",(0,t.jsx)(n.admonition,{type:"warning",children:(0,t.jsx)(n.p,{children:"It is not the best option, compared to a static hosting provider / CDN."})}),"\n",(0,t.jsxs)(n.admonition,{type:"warning",children:[(0,t.jsx)(n.p,{children:"In the following sections, we will introduce a few common hosting providers and how they should be configured to deploy Docusaurus sites most efficiently. Docusaurus is not affiliated with any of these services, and this information is provided for convenience only. Some of the write-ups are provided by third-parties, and recent API changes may not be reflected on our side. If you see outdated content, PRs are welcome."}),(0,t.jsx)(n.p,{children:"Because we can only provide this content on a best-effort basis only, we have stopped accepting PRs adding new hosting options. You can, however, publish your writeup on a separate site (e.g. your blog, or the provider's official website), and ask us to include a link to your writeup."})]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-netlify",children:"Deploying to Netlify"}),"\n",(0,t.jsxs)(n.p,{children:["To deploy your Docusaurus sites to ",(0,t.jsx)(n.a,{href:"https://www.netlify.com/",children:"Netlify"}),", first make sure the following options are properly configured:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n // highlight-start\n url: 'https://docusaurus-2.netlify.app', // Url to your site with no trailing slash\n baseUrl: '/', // Base directory of your site relative to your repo\n // highlight-end\n // ...\n};\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Then, ",(0,t.jsx)(n.a,{href:"https://app.netlify.com/start",children:"create your site with Netlify"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"While you set up the site, specify the build commands and directories as follows:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["build command: ",(0,t.jsx)(n.code,{children:"npm run build"})]}),"\n",(0,t.jsxs)(n.li,{children:["publish directory: ",(0,t.jsx)(n.code,{children:"build"})]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:'If you did not configure these build options, you may still go to "Site settings" -> "Build & deploy" after your site is created.'}),"\n",(0,t.jsxs)(n.p,{children:["Once properly configured with the above options, your site should deploy and automatically redeploy upon merging to your deploy branch, which defaults to ",(0,t.jsx)(n.code,{children:"main"}),"."]}),"\n",(0,t.jsxs)(n.admonition,{type:"warning",children:[(0,t.jsxs)(n.p,{children:["Some Docusaurus sites put the ",(0,t.jsx)(n.code,{children:"docs"})," folder outside of ",(0,t.jsx)(n.code,{children:"website"})," (most likely former Docusaurus v1 sites):"]}),(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"repo # git root\n\u251C\u2500\u2500 docs # MD files\n\u2514\u2500\u2500 website # Docusaurus root\n"})}),(0,t.jsxs)(n.p,{children:["If you decide to use the ",(0,t.jsx)(n.code,{children:"website"})," folder as Netlify's base directory, Netlify will not trigger builds when you update the ",(0,t.jsx)(n.code,{children:"docs"})," folder, and you need to configure a ",(0,t.jsxs)(n.a,{href:"https://docs.netlify.com/configure-builds/common-configurations/ignore-builds/",children:["custom ",(0,t.jsx)(n.code,{children:"ignore"})," command"]}),":"]}),(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-toml",metastring:'title="website/netlify.toml"',children:'[build]\n ignore = "git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF . ../docs/"\n'})})]}),"\n",(0,t.jsxs)(n.admonition,{type:"warning",children:[(0,t.jsx)(n.p,{children:"By default, Netlify adds trailing slashes to Docusaurus URLs."}),(0,t.jsxs)(n.p,{children:["It is recommended to disable the Netlify setting ",(0,t.jsx)(n.code,{children:"Post Processing > Asset Optimization > Pretty Urls"})," to prevent lowercase URLs, unnecessary redirects, and 404 errors."]}),(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Be very careful"}),": the ",(0,t.jsx)(n.code,{children:"Disable asset optimization"})," global checkbox is broken and does not really disable the ",(0,t.jsx)(n.code,{children:"Pretty URLs"})," setting in practice. Please make sure to ",(0,t.jsx)(n.strong,{children:"uncheck it independently"}),"."]}),(0,t.jsxs)(n.p,{children:["If you want to keep the ",(0,t.jsx)(n.code,{children:"Pretty Urls"})," Netlify setting on, adjust the ",(0,t.jsx)(n.code,{children:"trailingSlash"})," Docusaurus config appropriately."]}),(0,t.jsxs)(n.p,{children:["Refer to ",(0,t.jsx)(n.a,{href:"https://github.com/slorber/trailing-slash-guide",children:"slorber/trailing-slash-guide"})," for more information."]})]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-vercel",children:"Deploying to Vercel"}),"\n",(0,t.jsxs)(n.p,{children:["Deploying your Docusaurus project to ",(0,t.jsx)(n.a,{href:"https://vercel.com/",children:"Vercel"})," will provide you with ",(0,t.jsx)(n.a,{href:"https://vercel.com/",children:"various benefits"})," in the areas of performance and ease of use."]}),"\n",(0,t.jsxs)(n.p,{children:["To deploy your Docusaurus project with a ",(0,t.jsx)(n.a,{href:"https://vercel.com/docs/concepts/git",children:"Vercel for Git Integration"}),", make sure it has been pushed to a Git repository."]}),"\n",(0,t.jsxs)(n.p,{children:["Import the project into Vercel using the ",(0,t.jsx)(n.a,{href:"https://vercel.com/import/git",children:"Import Flow"}),". During the import, you will find all relevant options preconfigured for you; however, you can choose to change any of these ",(0,t.jsx)(n.a,{href:"https://vercel.com/docs/build-step#build-&-development-settings",children:"options"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["After your project has been imported, all subsequent pushes to branches will generate ",(0,t.jsx)(n.a,{href:"https://vercel.com/docs/platform/deployments#preview",children:"Preview Deployments"}),", and all changes made to the ",(0,t.jsx)(n.a,{href:"https://vercel.com/docs/git-integrations#production-branch",children:"Production Branch"}),' (usually "main" or "master") will result in a ',(0,t.jsx)(n.a,{href:"https://vercel.com/docs/platform/deployments#production",children:"Production Deployment"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-github-pages",children:"Deploying to GitHub Pages"}),"\n",(0,t.jsxs)(n.p,{children:["Docusaurus provides an easy way to publish to ",(0,t.jsx)(n.a,{href:"https://pages.github.com/",children:"GitHub Pages"}),", which comes free with every GitHub repository."]}),"\n",(0,t.jsx)(n.h3,{id:"github-pages-overview",children:"Overview"}),"\n",(0,t.jsxs)(n.p,{children:["Usually, there are two repositories (at least two branches) involved in a publishing process: the branch containing the source files, and the branch containing the build output to be served with GitHub Pages. In the following tutorial, they will be referred to as ",(0,t.jsx)(n.strong,{children:'"source"'})," and ",(0,t.jsx)(n.strong,{children:'"deployment"'}),", respectively."]}),"\n",(0,t.jsxs)(n.p,{children:["Each GitHub repository is associated with a GitHub Pages service. If the deployment repository is called ",(0,t.jsx)(n.code,{children:"my-org/my-project"})," (where ",(0,t.jsx)(n.code,{children:"my-org"})," is the organization name or username), the deployed site will appear at ",(0,t.jsx)(n.code,{children:"https://my-org.github.io/my-project/"}),". If the deployment repository is called ",(0,t.jsx)(n.code,{children:"my-org/my-org.github.io"})," (the ",(0,t.jsx)(n.em,{children:"organization GitHub Pages repo"}),"), the site will appear at ",(0,t.jsx)(n.code,{children:"https://my-org.github.io/"}),"."]}),"\n",(0,t.jsxs)(n.admonition,{type:"info",children:[(0,t.jsxs)(n.p,{children:["In case you want to use your custom domain for GitHub Pages, create a ",(0,t.jsx)(n.code,{children:"CNAME"})," file in the ",(0,t.jsx)(n.code,{children:"static"})," directory. Anything within the ",(0,t.jsx)(n.code,{children:"static"})," directory will be copied to the root of the ",(0,t.jsx)(n.code,{children:"build"})," directory for deployment. When using a custom domain, you should be able to move back from ",(0,t.jsx)(n.code,{children:"baseUrl: '/projectName/'"})," to ",(0,t.jsx)(n.code,{children:"baseUrl: '/'"}),", and also set your ",(0,t.jsx)(n.code,{children:"url"})," to your custom domain."]}),(0,t.jsxs)(n.p,{children:["You may refer to GitHub Pages' documentation ",(0,t.jsx)(n.a,{href:"https://help.github.com/en/articles/user-organization-and-project-pages",children:"User, Organization, and Project Pages"})," for more details."]})]}),"\n",(0,t.jsxs)(n.p,{children:["GitHub Pages picks up deploy-ready files (the output from ",(0,t.jsx)(n.code,{children:"docusaurus build"}),") from the default branch (",(0,t.jsx)(n.code,{children:"master"})," / ",(0,t.jsx)(n.code,{children:"main"}),", usually) or the ",(0,t.jsx)(n.code,{children:"gh-pages"})," branch, and either from the root or the ",(0,t.jsx)(n.code,{children:"/docs"})," folder. You can configure that through ",(0,t.jsx)(n.code,{children:"Settings > Pages"}),' in your repository. This branch will be called the "deployment branch".']}),"\n",(0,t.jsxs)(n.p,{children:["We provide a ",(0,t.jsx)(n.code,{children:"docusaurus deploy"})," command that helps you deploy your site from the source branch to the deployment branch in one command: clone, build, and commit."]}),"\n",(0,t.jsxs)(n.h3,{id:"docusaurusconfigjs-settings",children:[(0,t.jsx)(n.code,{children:"docusaurus.config.js"})," settings"]}),"\n",(0,t.jsxs)(n.p,{children:["First, modify your ",(0,t.jsx)(n.code,{children:"docusaurus.config.js"})," and add the following params:"]}),"\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:"organizationName"})}),(0,t.jsx)(n.td,{children:"The GitHub user or organization that owns the deployment repository."})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"projectName"})}),(0,t.jsx)(n.td,{children:"The name of the deployment repository."})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"deploymentBranch"})}),(0,t.jsxs)(n.td,{children:["The name of the deployment branch. It defaults to ",(0,t.jsx)(n.code,{children:"'gh-pages'"})," for non-organization GitHub Pages repos (",(0,t.jsx)(n.code,{children:"projectName"})," not ending in ",(0,t.jsx)(n.code,{children:".github.io"}),"). Otherwise, it needs to be explicit as a config field or environment variable."]})]})]})]}),"\n",(0,t.jsxs)(n.p,{children:["These fields also have their environment variable counterparts which have a higher priority: ",(0,t.jsx)(n.code,{children:"ORGANIZATION_NAME"}),", ",(0,t.jsx)(n.code,{children:"PROJECT_NAME"}),", and ",(0,t.jsx)(n.code,{children:"DEPLOYMENT_BRANCH"}),"."]}),"\n",(0,t.jsx)(n.admonition,{type:"warning",children:(0,t.jsxs)(n.p,{children:["GitHub Pages adds a trailing slash to Docusaurus URLs by default. It is recommended to set a ",(0,t.jsx)(n.code,{children:"trailingSlash"})," config (",(0,t.jsx)(n.code,{children:"true"})," or ",(0,t.jsx)(n.code,{children:"false"}),", not ",(0,t.jsx)(n.code,{children:"undefined"}),")."]})}),"\n",(0,t.jsx)(n.p,{children:"Example:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n // ...\n url: 'https://endiliey.github.io', // Your website URL\n baseUrl: '/',\n // highlight-start\n projectName: 'endiliey.github.io',\n organizationName: 'endiliey',\n trailingSlash: false,\n // highlight-end\n // ...\n};\n"})}),"\n",(0,t.jsx)(n.admonition,{type:"warning",children:(0,t.jsxs)(n.p,{children:["By default, GitHub Pages runs published files through ",(0,t.jsx)(n.a,{href:"https://jekyllrb.com/",children:"Jekyll"}),". Since Jekyll will discard any files that begin with ",(0,t.jsx)(n.code,{children:"_"}),", it is recommended that you disable Jekyll by adding an empty file named ",(0,t.jsx)(n.code,{children:".nojekyll"})," file to your ",(0,t.jsx)(n.code,{children:"static"})," directory."]})}),"\n",(0,t.jsx)(n.h3,{id:"environment-settings",children:"Environment settings"}),"\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:"USE_SSH"})}),(0,t.jsxs)(n.td,{children:["Set to ",(0,t.jsx)(n.code,{children:"true"})," to use SSH instead of the default HTTPS for the connection to the GitHub repo. If the source repo URL is an SSH URL (e.g. ",(0,t.jsx)(n.code,{children:"git@github.com:facebook/docusaurus.git"}),"), ",(0,t.jsx)(n.code,{children:"USE_SSH"})," is inferred to be ",(0,t.jsx)(n.code,{children:"true"}),"."]})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"GIT_USER"})}),(0,t.jsxs)(n.td,{children:["The username for a GitHub account that ",(0,t.jsx)(n.strong,{children:"has push access to the deployment repo"}),". For your own repositories, this will usually be your GitHub username. Required if not using SSH, and ignored otherwise."]})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"GIT_PASS"})}),(0,t.jsxs)(n.td,{children:["Personal access token of the git user (specified by ",(0,t.jsx)(n.code,{children:"GIT_USER"}),"), to facilitate non-interactive deployment (e.g. continuous deployment)"]})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"CURRENT_BRANCH"})}),(0,t.jsxs)(n.td,{children:["The source branch. Usually, the branch will be ",(0,t.jsx)(n.code,{children:"main"})," or ",(0,t.jsx)(n.code,{children:"master"}),", but it could be any branch except for ",(0,t.jsx)(n.code,{children:"gh-pages"}),". If nothing is set for this variable, then the current branch from which ",(0,t.jsx)(n.code,{children:"docusaurus deploy"})," is invoked will be used."]})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"GIT_USER_NAME"})}),(0,t.jsxs)(n.td,{children:["The ",(0,t.jsx)(n.code,{children:"git config user.name"})," value to use when pushing to the deployment repo"]})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"GIT_USER_EMAIL"})}),(0,t.jsxs)(n.td,{children:["The ",(0,t.jsx)(n.code,{children:"git config user.email"})," value to use when pushing to the deployment repo"]})]})]})]}),"\n",(0,t.jsx)(n.p,{children:"GitHub enterprise installations should work in the same manner as github.com; you only need to set the organization's GitHub Enterprise host as an environment variable:"}),"\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:"GITHUB_HOST"})}),(0,t.jsx)(n.td,{children:"The domain name of your GitHub enterprise site."})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"GITHUB_PORT"})}),(0,t.jsx)(n.td,{children:"The port of your GitHub enterprise site."})]})]})]}),"\n",(0,t.jsx)(n.h3,{id:"deploy",children:"Deploy"}),"\n",(0,t.jsx)(n.p,{children:"Finally, to deploy your site to GitHub Pages, run:"}),"\n",(0,t.jsxs)(r.Z,{children:[(0,t.jsx)(l.Z,{value:"bash",label:"Bash",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"GIT_USER= yarn deploy\n"})})}),(0,t.jsx)(l.Z,{value:"windows",label:"Windows",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-batch",children:'cmd /C "set "GIT_USER=" && yarn deploy"\n'})})}),(0,t.jsx)(l.Z,{value:"powershell",label:"PowerShell",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-powershell",children:"cmd /C 'set \"GIT_USER=\" && yarn deploy'\n"})})})]}),"\n",(0,t.jsxs)(n.admonition,{type:"warning",children:[(0,t.jsxs)(n.p,{children:["Beginning in August 2021, GitHub requires every command-line sign-in to use the ",(0,t.jsx)(n.strong,{children:"personal access token"})," instead of the password. When GitHub prompts for your password, enter the PAT instead. See the ",(0,t.jsx)(n.a,{href:"https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token",children:"GitHub documentation"})," for more information."]}),(0,t.jsxs)(n.p,{children:["Alternatively, you can use SSH (",(0,t.jsx)(n.code,{children:"USE_SSH=true"}),") to log in."]})]}),"\n",(0,t.jsx)(n.h3,{id:"triggering-deployment-with-github-actions",children:"Triggering deployment with GitHub Actions"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://help.github.com/en/actions",children:"GitHub Actions"})," allow you to automate, customize, and execute your software development workflows right in your repository."]}),"\n",(0,t.jsxs)(n.p,{children:["The workflow examples below assume your website source resides in the ",(0,t.jsx)(n.code,{children:"main"})," branch of your repository (the ",(0,t.jsx)(n.em,{children:"source branch"})," is ",(0,t.jsx)(n.code,{children:"main"}),"), and your ",(0,t.jsx)(n.a,{href:"https://help.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site",children:"publishing source"})," is configured for ",(0,t.jsx)(n.a,{href:"https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow",children:"publishing with a custom GitHub Actions Workflow"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Our goal is that:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["When a new pull request is made to ",(0,t.jsx)(n.code,{children:"main"}),", there's an action that ensures the site builds successfully, without actually deploying. This job will be called ",(0,t.jsx)(n.code,{children:"test-deploy"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:["When a pull request is merged to the ",(0,t.jsx)(n.code,{children:"main"})," branch or someone pushes to the ",(0,t.jsx)(n.code,{children:"main"})," branch directly, it will be built and deployed to GitHub Pages. This job will be called ",(0,t.jsx)(n.code,{children:"deploy"}),"."]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Here are two approaches to deploying your docs with GitHub Actions. Based on the location of your deployment repository, choose the relevant tab below:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Source repo and deployment repo are the ",(0,t.jsx)(n.strong,{children:"same"})," repository."]}),"\n",(0,t.jsxs)(n.li,{children:["The deployment repo is a ",(0,t.jsx)(n.strong,{children:"remote"})," repository, different from the source. Instructions for this scenario assume ",(0,t.jsx)(n.a,{href:"https://help.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site",children:"publishing source"})," is the ",(0,t.jsx)(n.code,{children:"gh-pages"})," branch."]}),"\n"]}),"\n",(0,t.jsxs)(r.Z,{children:[(0,t.jsxs)(l.Z,{value:"same",label:"Same",children:[(0,t.jsxs)(n.p,{children:["While you can have both jobs defined in the same workflow file, the original ",(0,t.jsx)(n.code,{children:"deploy"})," workflow will always be listed as skipped in the PR check suite status, which is not indicative of the actual status and provides no value to the review process. We therefore propose to manage them as separate workflows instead."]}),(0,t.jsxs)(s,{children:[(0,t.jsx)("summary",{children:"GitHub action files"}),(0,t.jsx)(n.p,{children:"Add these two workflow files:"}),(0,t.jsxs)(n.admonition,{title:"Tweak the parameters for your setup",type:"warning",children:[(0,t.jsxs)(n.p,{children:["These files assume you are using Yarn. If you use npm, change ",(0,t.jsx)(n.code,{children:"cache: yarn"}),", ",(0,t.jsx)(n.code,{children:"yarn install --frozen-lockfile"}),", ",(0,t.jsx)(n.code,{children:"yarn build"})," to ",(0,t.jsx)(n.code,{children:"cache: npm"}),", ",(0,t.jsx)(n.code,{children:"npm ci"}),", ",(0,t.jsx)(n.code,{children:"npm run build"})," accordingly."]}),(0,t.jsxs)(n.p,{children:["If your Docusaurus project is not at the root of your repo, you may need to configure a ",(0,t.jsx)(n.a,{href:"https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#example-set-the-default-shell-and-working-directory",children:"default working directory"}),", and adjust the paths accordingly."]})]}),(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-yml",metastring:'title=".github/workflows/deploy.yml"',children:"name: Deploy to GitHub Pages\n\non:\n push:\n branches:\n - main\n # Review gh actions docs if you want to further define triggers, paths, etc\n # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on\n\njobs:\n build:\n name: Build Docusaurus\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n with:\n fetch-depth: 0\n - uses: actions/setup-node@v4\n with:\n node-version: 18\n cache: yarn\n\n - name: Install dependencies\n run: yarn install --frozen-lockfile\n - name: Build website\n run: yarn build\n\n - name: Upload Build Artifact\n uses: actions/upload-pages-artifact@v3\n with:\n path: build\n\n deploy:\n name: Deploy to GitHub Pages\n needs: build\n\n # Grant GITHUB_TOKEN the permissions required to make a Pages deployment\n permissions:\n pages: write # to deploy to Pages\n id-token: write # to verify the deployment originates from an appropriate source\n\n # Deploy to the github-pages environment\n environment:\n name: github-pages\n url: ${{ steps.deployment.outputs.page_url }}\n\n runs-on: ubuntu-latest\n steps:\n - name: Deploy to GitHub Pages\n id: deployment\n uses: actions/deploy-pages@v4\n"})}),(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-yml",metastring:'title=".github/workflows/test-deploy.yml"',children:"name: Test deployment\n\non:\n pull_request:\n branches:\n - main\n # Review gh actions docs if you want to further define triggers, paths, etc\n # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on\n\njobs:\n test-deploy:\n name: Test deployment\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n with:\n fetch-depth: 0\n - uses: actions/setup-node@v4\n with:\n node-version: 18\n cache: yarn\n\n - name: Install dependencies\n run: yarn install --frozen-lockfile\n - name: Test build website\n run: yarn build\n"})})]})]}),(0,t.jsxs)(l.Z,{value:"remote",label:"Remote",children:[(0,t.jsx)(n.p,{children:"A cross-repo publish is more difficult to set up because you need to push to another repo with permission checks. We will be using SSH to do the authentication."}),(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["Generate a new ",(0,t.jsx)(n.a,{href:"https://help.github.com/en/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent",children:"SSH key"}),". Since this SSH key will be used in CI, make sure to not enter any passphrase."]}),"\n",(0,t.jsxs)(n.li,{children:["By default, your public key should have been created in ",(0,t.jsx)(n.code,{children:"~/.ssh/id_rsa.pub"}),"; otherwise, use the name you've provided in the previous step to add your key to ",(0,t.jsx)(n.a,{href:"https://developer.github.com/v3/guides/managing-deploy-keys/",children:"GitHub deploy keys"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:["Copy the key to clipboard with ",(0,t.jsx)(n.code,{children:"pbcopy < ~/.ssh/id_rsa.pub"})," and paste it as a ",(0,t.jsx)(n.a,{href:"https://developer.github.com/v3/guides/managing-deploy-keys/#deploy-keys",children:"deploy key"})," in the deployment repository. Copy the file content if the command line doesn't work for you. Check the box for ",(0,t.jsx)(n.code,{children:"Allow write access"})," before saving your deployment key."]}),"\n",(0,t.jsxs)(n.li,{children:["You'll need your private key as a ",(0,t.jsx)(n.a,{href:"https://help.github.com/en/actions/configuring-and-managing-workflows/creating-and-storing-encrypted-secrets",children:"GitHub secret"})," to allow Docusaurus to run the deployment for you."]}),"\n",(0,t.jsxs)(n.li,{children:["Copy your private key with ",(0,t.jsx)(n.code,{children:"pbcopy < ~/.ssh/id_rsa"})," and paste a GitHub secret with the name ",(0,t.jsx)(n.code,{children:"GH_PAGES_DEPLOY"})," on your source repository. Copy the file content if the command line doesn't work for you. Save your secret."]}),"\n",(0,t.jsxs)(n.li,{children:["Create your ",(0,t.jsx)(n.a,{href:"https://docs.github.com/en/actions/use-cases-and-examples/creating-an-example-workflow",children:"documentation workflow"})," in the ",(0,t.jsx)(n.code,{children:".github/workflows/"})," directory. In this example it's the ",(0,t.jsx)(n.code,{children:"deploy.yml"})," file."]}),"\n"]}),(0,t.jsx)(n.p,{children:"At this point, you should have:"}),(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"the source repo with the GitHub workflow set with the private SSH key as the GitHub Secret, and"}),"\n",(0,t.jsx)(n.li,{children:"your deployment repo set with the public SSH key in GitHub Deploy Keys."}),"\n"]}),(0,t.jsxs)(s,{children:[(0,t.jsx)("summary",{children:"GitHub action file"}),(0,t.jsxs)(n.admonition,{type:"warning",children:[(0,t.jsxs)(n.p,{children:["Please make sure that you replace ",(0,t.jsx)(n.code,{children:"actions@github.com"})," with your GitHub email and ",(0,t.jsx)(n.code,{children:"gh-actions"})," with your name."]}),(0,t.jsxs)(n.p,{children:["This file assumes you are using Yarn. If you use npm, change ",(0,t.jsx)(n.code,{children:"cache: yarn"}),", ",(0,t.jsx)(n.code,{children:"yarn install --frozen-lockfile"}),", ",(0,t.jsx)(n.code,{children:"yarn build"})," to ",(0,t.jsx)(n.code,{children:"cache: npm"}),", ",(0,t.jsx)(n.code,{children:"npm ci"}),", ",(0,t.jsx)(n.code,{children:"npm run build"})," accordingly."]})]}),(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-yml",metastring:'title=".github/workflows/deploy.yml"',children:"name: Deploy to GitHub Pages\n\non:\n pull_request:\n branches: [main]\n push:\n branches: [main]\n\npermissions:\n contents: write\n\njobs:\n test-deploy:\n if: github.event_name != 'push'\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n with:\n fetch-depth: 0\n - uses: actions/setup-node@v4\n with:\n node-version: 18\n cache: yarn\n - name: Install dependencies\n run: yarn install --frozen-lockfile\n - name: Test build website\n run: yarn build\n deploy:\n if: github.event_name != 'pull_request'\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n with:\n fetch-depth: 0\n - uses: actions/setup-node@v4\n with:\n node-version: 18\n cache: yarn\n - uses: webfactory/ssh-agent@v0.5.0\n with:\n ssh-private-key: ${{ secrets.GH_PAGES_DEPLOY }}\n - name: Deploy to GitHub Pages\n env:\n USE_SSH: true\n run: |\n git config --global user.email \"actions@github.com\"\n git config --global user.name \"gh-actions\"\n yarn install --frozen-lockfile\n yarn deploy\n"})})]})]})]}),"\n",(0,t.jsxs)(s,{children:[(0,t.jsx)("summary",{children:"Site not deployed properly?"}),(0,t.jsx)(n.p,{children:"After pushing to main, if you don't see your site published at the desired location (for example, it says \"There isn't a GitHub Pages site here\", or it's showing your repo's README.md file), try the following:"}),(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Wait about three minutes and refresh. It may take a few minutes for GitHub pages to pick up the new files."}),"\n",(0,t.jsx)(n.li,{children:"Check your repo's landing page for a little green tick next to the last commit's title, indicating the CI has passed. If you see a cross, it means the build or deployment failed, and you should check the log for more debugging information."}),"\n",(0,t.jsxs)(n.li,{children:['Click on the tick and make sure you see a "Deploy to GitHub Pages" workflow. Names like "pages build and deployment / deploy" are GitHub\'s default workflows, indicating your custom deployment workflow failed to be triggered at all. Make sure the YAML files are placed under the ',(0,t.jsx)(n.code,{children:".github/workflows"}),' folder, and that the trigger condition is set correctly (e.g., if your default branch is "master" instead of "main", you need to change the ',(0,t.jsx)(n.code,{children:"on.push"})," property)."]}),"\n",(0,t.jsxs)(n.li,{children:['Under your repo\'s Settings > Pages, make sure the "Source" (which is the source for the ',(0,t.jsx)(n.em,{children:"deployment"}),' files, not "source" as in our terminology) is set to "gh-pages" + "/ (root)", since we are using ',(0,t.jsx)(n.code,{children:"gh-pages"})," as the deployment branch."]}),"\n"]}),(0,t.jsx)(n.p,{children:"If you are using a custom domain:"}),(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Verify that you have the correct DNS records set up if you're using a custom domain. See ",(0,t.jsx)(n.a,{href:"https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/about-custom-domains-and-github-pages",children:"GitHub pages documentation on configuring custom domains"}),". Also, please be aware that it may take up to 24 hours for DNS changes to propagate through the internet."]}),"\n"]})]}),"\n",(0,t.jsx)(n.h3,{id:"triggering-deployment-with-travis-ci",children:"Triggering deployment with Travis CI"}),"\n",(0,t.jsxs)(n.p,{children:["Continuous integration (CI) services are typically used to perform routine tasks whenever new commits are checked in to source control. These tasks can be any combination of running unit tests and integration tests, automating builds, publishing packages to npm, and deploying changes to your website. All you need to do to automate the deployment of your website is to invoke the ",(0,t.jsx)(n.code,{children:"yarn deploy"})," script whenever your website is updated. The following section covers how to do just that using ",(0,t.jsx)(n.a,{href:"https://travis-ci.com/",children:"Travis CI"}),", a popular continuous integration service provider."]}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["Go to ",(0,t.jsx)(n.a,{href:"https://github.com/settings/tokens",children:"https://github.com/settings/tokens"})," and generate a new ",(0,t.jsx)(n.a,{href:"https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/",children:"personal access token"}),". When creating the token, grant it the ",(0,t.jsx)(n.code,{children:"repo"})," scope so that it has the permissions it needs."]}),"\n",(0,t.jsxs)(n.li,{children:["Using your GitHub account, ",(0,t.jsx)(n.a,{href:"https://github.com/marketplace/travis-ci",children:"add the Travis CI app"})," to the repository you want to activate."]}),"\n",(0,t.jsxs)(n.li,{children:["Open your Travis CI dashboard. The URL looks like ",(0,t.jsx)(n.code,{children:"https://travis-ci.com/USERNAME/REPO"}),", and navigate to the ",(0,t.jsx)(n.code,{children:"More options > Setting > Environment Variables"})," section of your repository."]}),"\n",(0,t.jsxs)(n.li,{children:["Create a new environment variable named ",(0,t.jsx)(n.code,{children:"GH_TOKEN"})," with your newly generated token as its value, then ",(0,t.jsx)(n.code,{children:"GH_EMAIL"})," (your email address) and ",(0,t.jsx)(n.code,{children:"GH_NAME"})," (your GitHub username)."]}),"\n",(0,t.jsxs)(n.li,{children:["Create a ",(0,t.jsx)(n.code,{children:".travis.yml"})," on the root of your repository with the following:"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-yml",metastring:'title=".travis.yml"',children:'language: node_js\nnode_js:\n - 18\nbranches:\n only:\n - main\ncache:\n yarn: true\nscript:\n - git config --global user.name "${GH_NAME}"\n - git config --global user.email "${GH_EMAIL}"\n - echo "machine github.com login ${GH_NAME} password ${GH_TOKEN}" > ~/.netrc\n - yarn install\n - GIT_USER="${GH_NAME}" yarn deploy\n'})}),"\n",(0,t.jsxs)(n.p,{children:["Now, whenever a new commit lands in ",(0,t.jsx)(n.code,{children:"main"}),", Travis CI will run your suite of tests and if everything passes, your website will be deployed via the ",(0,t.jsx)(n.code,{children:"yarn deploy"})," script."]}),"\n",(0,t.jsx)(n.h3,{id:"triggering-deployment-with-buddy",children:"Triggering deployment with Buddy"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://buddy.works/",children:"Buddy"})," is an easy-to-use CI/CD tool that allows you to automate the deployment of your portal to different environments, including GitHub Pages."]}),"\n",(0,t.jsx)(n.p,{children:"Follow these steps to create a pipeline that automatically deploys a new version of your website whenever you push changes to the selected branch of your project:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["Go to ",(0,t.jsx)(n.a,{href:"https://github.com/settings/tokens",children:"https://github.com/settings/tokens"})," and generate a new ",(0,t.jsx)(n.a,{href:"https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/",children:"personal access token"}),". When creating the token, grant it the ",(0,t.jsx)(n.code,{children:"repo"})," scope so that it has the permissions it needs."]}),"\n",(0,t.jsx)(n.li,{children:"Sign in to your Buddy account and create a new project."}),"\n",(0,t.jsx)(n.li,{children:"Choose GitHub as your git hosting provider and select the repository with the code of your website."}),"\n",(0,t.jsxs)(n.li,{children:["Using the left navigation panel, switch to the ",(0,t.jsx)(n.code,{children:"Pipelines"})," view."]}),"\n",(0,t.jsxs)(n.li,{children:["Create a new pipeline. Define its name, set the trigger mode to ",(0,t.jsx)(n.code,{children:"On push"}),", and select the branch that triggers the pipeline execution."]}),"\n",(0,t.jsxs)(n.li,{children:["Add a ",(0,t.jsx)(n.code,{children:"Node.js"})," action."]}),"\n",(0,t.jsx)(n.li,{children:"Add these commands in the action's terminal:"}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:'GIT_USER=\ngit config --global user.email ""\ngit config --global user.name ""\nyarn deploy\n'})}),"\n",(0,t.jsxs)(n.p,{children:["After creating this simple pipeline, each new commit pushed to the branch you selected deploys your website to GitHub Pages using ",(0,t.jsx)(n.code,{children:"yarn deploy"}),". Read ",(0,t.jsx)(n.a,{href:"https://buddy.works/guides/react-docusaurus",children:"this guide"})," to learn more about setting up a CI/CD pipeline for Docusaurus."]}),"\n",(0,t.jsx)(n.h3,{id:"using-azure-pipelines",children:"Using Azure Pipelines"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["Sign Up at ",(0,t.jsx)(n.a,{href:"https://azure.microsoft.com/en-us/services/devops/pipelines/",children:"Azure Pipelines"})," if you haven't already."]}),"\n",(0,t.jsx)(n.li,{children:"Create an organization. Within the organization, create a project and connect your repository from GitHub."}),"\n",(0,t.jsxs)(n.li,{children:["Go to ",(0,t.jsx)(n.a,{href:"https://github.com/settings/tokens",children:"https://github.com/settings/tokens"})," and generate a new ",(0,t.jsx)(n.a,{href:"https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/",children:"personal access token"})," with the ",(0,t.jsx)(n.code,{children:"repo"})," scope."]}),"\n",(0,t.jsxs)(n.li,{children:["In the project page (which looks like ",(0,t.jsx)(n.code,{children:"https://dev.azure.com/ORG_NAME/REPO_NAME/_build"}),"), create a new pipeline with the following text. Also, click on edit and add a new environment variable named ",(0,t.jsx)(n.code,{children:"GH_TOKEN"})," with your newly generated token as its value, then ",(0,t.jsx)(n.code,{children:"GH_EMAIL"})," (your email address) and ",(0,t.jsx)(n.code,{children:"GH_NAME"})," (your GitHub username). Make sure to mark them as secret. Alternatively, you can also add a file named ",(0,t.jsx)(n.code,{children:"azure-pipelines.yml"})," at your repository root."]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-yml",metastring:'title="azure-pipelines.yml"',children:'trigger:\n - main\n\npool:\n vmImage: ubuntu-latest\n\nsteps:\n - checkout: self\n persistCredentials: true\n\n - task: NodeTool@0\n inputs:\n versionSpec: \'18\'\n displayName: Install Node.js\n\n - script: |\n git config --global user.name "${GH_NAME}"\n git config --global user.email "${GH_EMAIL}"\n git checkout -b main\n echo "machine github.com login ${GH_NAME} password ${GH_TOKEN}" > ~/.netrc\n yarn install\n GIT_USER="${GH_NAME}" yarn deploy\n env:\n GH_NAME: $(GH_NAME)\n GH_EMAIL: $(GH_EMAIL)\n GH_TOKEN: $(GH_TOKEN)\n displayName: Install and build\n'})}),"\n",(0,t.jsx)(n.h3,{id:"using-drone",children:"Using Drone"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["Create a new SSH key that will be the ",(0,t.jsx)(n.a,{href:"https://docs.github.com/en/free-pro-team@latest/developers/overview/managing-deploy-keys#deploy-keys",children:"deploy key"})," for your project."]}),"\n",(0,t.jsxs)(n.li,{children:["Name your private and public keys to be specific and so that it does not overwrite your other ",(0,t.jsx)(n.a,{href:"https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent",children:"SSH keys"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:["Go to ",(0,t.jsx)(n.code,{children:"https://github.com/USERNAME/REPO/settings/keys"})," and add a new deploy key by pasting in the public key you just generated."]}),"\n",(0,t.jsxs)(n.li,{children:["Open your Drone.io dashboard and log in. The URL looks like ",(0,t.jsx)(n.code,{children:"https://cloud.drone.io/USERNAME/REPO"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:["Click on the repository, click on activate repository, and add a secret called ",(0,t.jsx)(n.code,{children:"git_deploy_private_key"})," with your private key value that you just generated."]}),"\n",(0,t.jsxs)(n.li,{children:["Create a ",(0,t.jsx)(n.code,{children:".drone.yml"})," on the root of your repository with the below text."]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-yml",metastring:'title=".drone.yml"',children:'kind: pipeline\ntype: docker\ntrigger:\n event:\n - tag\n- name: Website\n image: node\n commands:\n - mkdir -p $HOME/.ssh\n - ssh-keyscan -t rsa github.com >> $HOME/.ssh/known_hosts\n - echo "$GITHUB_PRIVATE_KEY" > "$HOME/.ssh/id_rsa"\n - chmod 0600 $HOME/.ssh/id_rsa\n - cd website\n - yarn install\n - yarn deploy\n environment:\n USE_SSH: true\n GITHUB_PRIVATE_KEY:\n from_secret: git_deploy_private_key\n'})}),"\n",(0,t.jsx)(n.p,{children:"Now, whenever you push a new tag to GitHub, this trigger will start the drone CI job to publish your website."}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-flightcontrol",children:"Deploying to Flightcontrol"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://www.flightcontrol.dev/?ref=docusaurus",children:"Flightcontrol"})," is a service that automatically builds and deploys your web apps to AWS Fargate directly from your Git repository. It gives you full access to inspect and make infrastructure changes without the limitations of a traditional PaaS."]}),"\n",(0,t.jsxs)(n.p,{children:["Get started by following ",(0,t.jsx)(n.a,{href:"https://www.flightcontrol.dev/docs/reference/examples/docusaurus/?ref=docusaurus",children:"Flightcontrol's step-by-step Docusaurus guide"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-koyeb",children:"Deploying to Koyeb"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://www.koyeb.com",children:"Koyeb"})," is a developer-friendly serverless platform to deploy apps globally. The platform lets you seamlessly run Docker containers, web apps, and APIs with git-based deployment, native autoscaling, a global edge network, and built-in service mesh and discovery. Check out the ",(0,t.jsx)(n.a,{href:"https://www.koyeb.com/tutorials/deploy-docusaurus-on-koyeb",children:"Koyeb's Docusaurus deployment guide"})," to get started."]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-render",children:"Deploying to Render"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://render.com",children:"Render"})," offers ",(0,t.jsx)(n.a,{href:"https://render.com/docs/static-sites",children:"free static site hosting"})," with fully managed SSL, custom domains, a global CDN, and continuous auto-deploy from your Git repo. Get started in just a few minutes by following ",(0,t.jsx)(n.a,{href:"https://render.com/docs/deploy-docusaurus",children:"Render's guide to deploying Docusaurus"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-qovery",children:"Deploying to Qovery"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://www.qovery.com",children:"Qovery"})," is a fully-managed cloud platform that runs on your AWS, Digital Ocean, and Scaleway account where you can host static sites, backend APIs, databases, cron jobs, and all your other apps in one place."]}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["Create a Qovery account. Visit the ",(0,t.jsx)(n.a,{href:"https://console.qovery.com",children:"Qovery dashboard"})," to create an account if you don't already have one."]}),"\n",(0,t.jsxs)(n.li,{children:["Create a project.","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Click on ",(0,t.jsx)(n.strong,{children:"Create project"})," and give a name to your project."]}),"\n",(0,t.jsxs)(n.li,{children:["Click on ",(0,t.jsx)(n.strong,{children:"Next"}),"."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["Create a new environment.","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Click on ",(0,t.jsx)(n.strong,{children:"Create environment"})," and give a name (e.g. staging, production)."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["Add an application.","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Click on ",(0,t.jsx)(n.strong,{children:"Create an application"}),", give a name and select your GitHub or GitLab repository where your Docusaurus app is located."]}),"\n",(0,t.jsx)(n.li,{children:"Define the main branch name and the root application path."}),"\n",(0,t.jsxs)(n.li,{children:["Click on ",(0,t.jsx)(n.strong,{children:"Create"}),". After the application is created:"]}),"\n",(0,t.jsxs)(n.li,{children:["Navigate to your application ",(0,t.jsx)(n.strong,{children:"Settings"})]}),"\n",(0,t.jsxs)(n.li,{children:["Select ",(0,t.jsx)(n.strong,{children:"Port"})]}),"\n",(0,t.jsx)(n.li,{children:"Add port used by your Docusaurus application"}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["Deploy","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["All you have to do now is to navigate to your application and click on ",(0,t.jsx)(n.strong,{children:"Deploy"}),"."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://hub.qovery.com/img/heroku/heroku-1.png",alt:"Deploy the app"})}),"\n",(0,t.jsxs)(n.p,{children:["That's it. Watch the status and wait till the app is deployed. To open the application in your browser, click on ",(0,t.jsx)(n.strong,{children:"Action"})," and ",(0,t.jsx)(n.strong,{children:"Open"})," in your application overview."]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-hostman",children:"Deploying to Hostman"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://hostman.com/",children:"Hostman"})," allows you to host static websites for free. Hostman automates everything, you just need to connect your repository and follow these easy steps:"]}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"Create a service."}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["To deploy a Docusaurus static website, click ",(0,t.jsx)(n.strong,{children:"Create"})," in the top-left corner of your ",(0,t.jsx)(n.a,{href:"https://dashboard.hostman.com/",children:"Dashboard"})," and choose ",(0,t.jsx)(n.strong,{children:"Front-end app or static website"}),"."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"Select the project to deploy."}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"If you are logged in to Hostman with your GitHub, GitLab, or Bitbucket account, you will see the repository with your projects, including the private ones."}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Choose the project you want to deploy. It must contain the directory with the project's files (e.g. ",(0,t.jsx)(n.code,{children:"website"}),")."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["To access a different repository, click ",(0,t.jsx)(n.strong,{children:"Connect another repository"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"If you didn't use your Git account credentials to log in, you'll be able to access the necessary account now, and then select the project."}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"Configure the build settings."}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Next, the ",(0,t.jsx)(n.strong,{children:"Website customization"})," window will appear. Choose the ",(0,t.jsx)(n.strong,{children:"Static website"})," option from the list of frameworks."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.strong,{children:"Directory with app"})," points at the directory that will contain the project's files after the build. If you selected the repository with the contents of the website (or ",(0,t.jsx)(n.code,{children:"my_website"}),") directory during Step 2, you can leave it empty."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"The standard build command for Docusaurus is:"}),"\n",(0,t.jsxs)(r.Z,{groupId:"npm2yarn",children:[(0,t.jsx)(l.Z,{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.Z,{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.Z,{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"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["You can modify the build command if needed. You can enter multiple commands separated by ",(0,t.jsx)(n.code,{children:"&&"}),"."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"Deploy."}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Click ",(0,t.jsx)(n.strong,{children:"Deploy"})," to start the build process."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"Once it starts, you will enter the deployment log. If there are any issues with the code, you will get warning or error messages in the log specifying the cause of the problem. Usually, the log contains all the debugging data you'll need."}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"When the deployment is complete, you will receive an email notification and also see a log entry. All done! Your project is up and ready."}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-surge",children:"Deploying to Surge"}),"\n",(0,t.jsxs)(n.p,{children:["Surge is a ",(0,t.jsx)(n.a,{href:"https://surge.sh/help/getting-started-with-surge",children:"static web hosting platform"})," that you can use to deploy your Docusaurus project from the command line in seconds. Deploying your project to Surge is easy and free (including custom domains and SSL certs)."]}),"\n",(0,t.jsx)(n.p,{children:"Deploy your app in a matter of seconds using Surge with the following steps:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["First, install Surge using npm by running the following command:","\n",(0,t.jsxs)(r.Z,{groupId:"npm2yarn",children:[(0,t.jsx)(l.Z,{value:"npm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npm install -g surge\n"})})}),(0,t.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"yarn global add surge\n"})})}),(0,t.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"pnpm add -g surge\n"})})})]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["To build the static files of your site for production in the root directory of your project, run:","\n",(0,t.jsxs)(r.Z,{groupId:"npm2yarn",children:[(0,t.jsx)(l.Z,{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.Z,{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.Z,{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"]}),"\n",(0,t.jsxs)(n.li,{children:["Then, run this command inside the root directory of your project:","\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"surge build/\n"})}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"First-time users of Surge would be prompted to create an account from the command line (which happens only once)."}),"\n",(0,t.jsxs)(n.p,{children:["Confirm that the site you want to publish is in the ",(0,t.jsx)(n.code,{children:"build"})," directory. A randomly generated subdomain ",(0,t.jsx)(n.code,{children:"*.surge.sh subdomain"})," is always given (which can be edited)."]}),"\n",(0,t.jsx)(n.h3,{id:"using-your-domain",children:"Using your domain"}),"\n",(0,t.jsx)(n.p,{children:"If you have a domain name you can deploy your site using the command:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"surge build/ your-domain.com\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Your site is now deployed for free at ",(0,t.jsx)(n.code,{children:"subdomain.surge.sh"})," or ",(0,t.jsx)(n.code,{children:"your-domain.com"})," depending on the method you chose."]}),"\n",(0,t.jsx)(n.h3,{id:"setting-up-cname-file",children:"Setting up CNAME file"}),"\n",(0,t.jsx)(n.p,{children:"Store your domain in a CNAME file for future deployments with the following command:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"echo subdomain.surge.sh > CNAME\n"})}),"\n",(0,t.jsxs)(n.p,{children:["You can deploy any other changes in the future with the command ",(0,t.jsx)(n.code,{children:"surge"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-stormkit",children:"Deploying to Stormkit"}),"\n",(0,t.jsxs)(n.p,{children:["You can deploy your Docusaurus project to ",(0,t.jsx)(n.a,{href:"https://www.stormkit.io",children:"Stormkit"}),", a deployment platform for static websites, single-page applications (SPAs), and serverless functions. For detailed instructions, refer to this ",(0,t.jsx)(n.a,{href:"https://www.stormkit.io/blog/how-to-deploy-docusarous",children:"guide"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-quantcdn",children:"Deploying to QuantCDN"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["Install ",(0,t.jsx)(n.a,{href:"https://docs.quantcdn.io/docs/cli/get-started",children:"Quant CLI"})]}),"\n",(0,t.jsxs)(n.li,{children:["Create a QuantCDN account by ",(0,t.jsx)(n.a,{href:"https://dashboard.quantcdn.io/register",children:"signing up"})]}),"\n",(0,t.jsxs)(n.li,{children:["Initialize your project with ",(0,t.jsx)(n.code,{children:"quant init"})," and fill in your credentials:","\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"quant init\n"})}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["Deploy your site.","\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"quant deploy\n"})}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["See ",(0,t.jsx)(n.a,{href:"https://docs.quantcdn.io/docs/cli/continuous-integration",children:"docs"})," and ",(0,t.jsx)(n.a,{href:"https://www.quantcdn.io/blog",children:"blog"})," for more examples and use cases for deploying to QuantCDN."]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-layer0",children:"Deploying to Layer0"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://www.layer0.co",children:"Layer0"})," is an all-in-one platform to develop, deploy, preview, experiment on, monitor, and run your headless frontend. It is focused on large, dynamic websites and best-in-class performance through EdgeJS (a JavaScript-based Content Delivery Network), predictive prefetching, and performance monitoring. Layer0 offers a free tier. Get started in just a few minutes by following ",(0,t.jsx)(n.a,{href:"https://docs.layer0.co/guides/docusaurus",children:"Layer0's guide to deploying Docusaurus"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-cloudflare-pages",children:"Deploying to Cloudflare Pages"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://pages.cloudflare.com/",children:"Cloudflare Pages"})," is a Jamstack platform for frontend developers to collaborate and deploy websites. Get started within a few minutes by following ",(0,t.jsx)(n.a,{href:"https://developers.cloudflare.com/pages/framework-guides/deploy-a-docusaurus-site/",children:"this page"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-azure-static-web-apps",children:"Deploying to Azure Static Web Apps"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://docs.microsoft.com/en-us/azure/static-web-apps/overview",children:"Azure Static Web Apps"})," is a service that automatically builds and deploys full-stack web apps to Azure directly from the code repository, simplifying the developer experience for CI/CD. Static Web Apps separates the web application's static assets from its dynamic (API) endpoints. Static assets are served from globally-distributed content servers, making it faster for clients to retrieve files using servers nearby. Dynamic APIs are scaled with serverless architectures using an event-driven functions-based approach that is more cost-effective and scales on demand. Get started in a few minutes by following ",(0,t.jsx)(n.a,{href:"https://dev.to/azure/11-share-content-with-docusaurus-azure-static-web-apps-30hc",children:"this step-by-step guide"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"deploying-to-kinsta",children:"Deploying to Kinsta"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://kinsta.com/static-site-hosting",children:"Kinsta Static Site Hosting"})," lets you deploy up to 100 static sites for free, custom domains with SSL, 100 GB monthly bandwidth, and 260+ Cloudflare CDN locations."]}),"\n",(0,t.jsxs)(n.p,{children:["Get started in just a few clicks by following our ",(0,t.jsx)(n.a,{href:"https://kinsta.com/docs/docusaurus-example/",children:"Docusaurus on Kinsta"})," article."]})]})}function p(e={}){let{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(u,{...e})}):u(e)}},58636:function(e,n,s){s.d(n,{Z:()=>o});var i=s(85893);s(67294);var t=s(90496);function o(e){let{children:n,hidden:s,className:o}=e;return(0,i.jsx)("div",{role:"tabpanel",className:(0,t.Z)("tabItem_pnkT",o),hidden:s,children:n})}},15398:function(e,n,s){s.d(n,{Z:()=>x});var i=s(85893),t=s(67294),o=s(90496),r=s(54947),l=s(3620),a=s(844),c=s(97486),d=s(32263),h=s(16971);function u(e){return t.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||t.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.`)})?.filter(Boolean)??[]}function p(e){let{value:n,tabValues:s}=e;return s.some(e=>e.value===n)}var g=s(71607);function y(e){let{className:n,block:s,selectedValue:t,selectValue:l,tabValues:a}=e,c=[],{blockElementScrollPositionUntilNextRender:d}=(0,r.o5)(),h=e=>{let n=e.currentTarget,s=a[c.indexOf(n)].value;s!==t&&(d(n),l(s))},u=e=>{let n=null;switch(e.key){case"Enter":h(e);break;case"ArrowRight":{let s=c.indexOf(e.currentTarget)+1;n=c[s]??c[0];break}case"ArrowLeft":{let s=c.indexOf(e.currentTarget)-1;n=c[s]??c[c.length-1]}}n?.focus()};return(0,i.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.Z)("tabs",{"tabs--block":s},n),children:a.map(e=>{let{value:n,label:s,attributes:r}=e;return(0,i.jsx)("li",{role:"tab",tabIndex:t===n?0:-1,"aria-selected":t===n,ref:e=>{c.push(e)},onKeyDown:u,onClick:h,...r,className:(0,o.Z)("tabs__item","tabItem_AQgk",r?.className,{"tabs__item--active":t===n}),children:s??n},n)})})}function m(e){let{lazy:n,children:s,selectedValue:r}=e,l=(Array.isArray(s)?s:[s]).filter(Boolean);if(n){let e=l.find(e=>e.props.value===r);return e?(0,t.cloneElement)(e,{className:(0,o.Z)("margin-top--md",e.props.className)}):null}return(0,i.jsx)("div",{className:"margin-top--md",children:l.map((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==r}))})}function j(e){let n=function(e){let{defaultValue:n,queryString:s=!1,groupId:i}=e,o=function(e){let{values:n,children:s}=e;return(0,t.useMemo)(()=>{let e=n??u(s).map(e=>{let{props:{value:n,label:s,attributes:i,default:t}}=e;return{value:n,label:s,attributes:i,default:t}});return!function(e){let n=(0,d.lx)(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,s])}(e),[r,g]=(0,t.useState)(()=>(function(e){let{defaultValue:n,tabValues:s}=e;if(0===s.length)throw Error("Docusaurus error: the component requires at least one children component");if(n){if(!p({value:n,tabValues:s}))throw Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${s.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}let i=s.find(e=>e.default)??s[0];if(!i)throw Error("Unexpected error: 0 tabValues");return i.value})({defaultValue:n,tabValues:o})),[y,m]=function(e){let{queryString:n=!1,groupId:s}=e,i=(0,l.k6)(),o=function(e){let{queryString:n=!1,groupId:s}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!s)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 s??null}({queryString:n,groupId:s});return[(0,c._X)(o),(0,t.useCallback)(e=>{if(!o)return;let n=new URLSearchParams(i.location.search);n.set(o,e),i.replace({...i.location,search:n.toString()})},[o,i])]}({queryString:s,groupId:i}),[j,x]=function(e){let{groupId:n}=e,s=n?`docusaurus.tab.${n}`:null,[i,o]=(0,h.Nk)(s);return[i,(0,t.useCallback)(e=>{s&&o.set(e)},[s,o])]}({groupId:i}),f=(()=>{let e=y??j;return p({value:e,tabValues:o})?e:null})();return(0,a.Z)(()=>{f&&g(f)},[f]),{selectedValue:r,selectValue:(0,t.useCallback)(e=>{if(!p({value:e,tabValues:o}))throw Error(`Can't select invalid tab value=${e}`);g(e),m(e),x(e)},[m,x,o]),tabValues:o}}(e);return(0,i.jsxs)("div",{className:(0,o.Z)("tabs-container","tabList_Qoir"),children:[(0,i.jsx)(y,{...n,...e}),(0,i.jsx)(m,{...n,...e})]})}function x(e){let n=(0,g.Z)();return(0,i.jsx)(j,{...e,children:u(e.children)},String(n))}},80980:function(e,n,s){s.d(n,{Z:()=>l,a:()=>r});var i=s(67294);let t={},o=i.createContext(t);function r(e){let n=i.useContext(o);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/072728dc.c8037313.js b/assets/js/072728dc.52753dd4.js
similarity index 98%
rename from assets/js/072728dc.c8037313.js
rename to assets/js/072728dc.52753dd4.js
index 81e7101492..5221120538 100644
--- a/assets/js/072728dc.c8037313.js
+++ b/assets/js/072728dc.52753dd4.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["99417"],{48497:function(e,s,t){t.r(s),t.d(s,{default:()=>x,frontMatter:()=>l,metadata:()=>n,assets:()=>u,toc:()=>r,contentTitle:()=>d});var n=JSON.parse('{"id":"toc/toc-3-_","title":"toc-3-_","description":"","source":"@site/_dogfooding/_docs tests/toc/toc-3-_.mdx","sourceDirName":"toc","slug":"/toc/toc-3-_","permalink":"/tests/docs/toc/toc-3-_","draft":false,"unlisted":false,"tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739456991000,"frontMatter":{"toc_min_heading_level":3},"sidebar":"sidebar","previous":{"title":"toc-3-5","permalink":"/tests/docs/toc/toc-3-5"},"next":{"title":"toc-4-5","permalink":"/tests/docs/toc/toc-4-5"}}'),i=t(85893),c=t(80980),o=t(2630);let l={toc_min_heading_level:3},d=void 0,u={},r=[...o.d$];function h(e){return(0,i.jsx)(o.ZP,{})}function x(e={}){let{wrapper:s}={...(0,c.a)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}x.displayName="MDXContent(_dogfooding/_docs tests/toc/toc-3-_.mdx)"},2630:function(e,s,t){t.d(s,{ZP:()=>l,d$:()=>c});var n=t(85893),i=t(80980);let c=[{value:"section 1",id:"section-1",level:2},{value:"subsection 1-1",id:"subsection-1-1",level:3},{value:"subsection 1-1-1",id:"subsection-1-1-1",level:4},{value:"subsection 1-1-1-1",id:"subsection-1-1-1-1",level:5},{value:"subsection 1-1-1-1-1",id:"subsection-1-1-1-1-1",level:6},{value:"subsection 1-1-1-1-2",id:"subsection-1-1-1-1-2",level:6},{value:"subsection 1-1-1-2",id:"subsection-1-1-1-2",level:5},{value:"subsection 1-1-2",id:"subsection-1-1-2",level:4},{value:"subsection 1-2",id:"subsection-1-2",level:3},{value:"subsection 1-3",id:"subsection-1-3",level:3},{value:"section 2",id:"section-2",level:2},{value:"subsection 2-1",id:"subsection-2-1",level:3},{value:"subsection 2-1",id:"subsection-2-1-1",level:3},{value:"section 3",id:"section-3",level:2},{value:"subsection 3-1",id:"subsection-3-1",level:3},{value:"subsection 3-2",id:"subsection-3-2",level:3}];function o(e){let s={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",header:"header",p:"p",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s.header,{children:(0,n.jsx)(s.h1,{id:"title",children:"title"})}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h2,{id:"section-1",children:"section 1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-1-1",children:"subsection 1-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h4,{id:"subsection-1-1-1",children:"subsection 1-1-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h5,{id:"subsection-1-1-1-1",children:"subsection 1-1-1-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h6,{id:"subsection-1-1-1-1-1",children:"subsection 1-1-1-1-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h6,{id:"subsection-1-1-1-1-2",children:"subsection 1-1-1-1-2"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h5,{id:"subsection-1-1-1-2",children:"subsection 1-1-1-2"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h4,{id:"subsection-1-1-2",children:"subsection 1-1-2"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-1-2",children:"subsection 1-2"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-1-3",children:"subsection 1-3"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h2,{id:"section-2",children:"section 2"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-2-1",children:"subsection 2-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-2-1-1",children:"subsection 2-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h2,{id:"section-3",children:"section 3"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-3-1",children:"subsection 3-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-3-2",children:"subsection 3-2"}),"\n",(0,n.jsx)(s.p,{children:"some text"})]})}function l(e={}){let{wrapper:s}={...(0,i.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(o,{...e})}):o(e)}},80980:function(e,s,t){t.d(s,{Z:()=>l,a:()=>o});var n=t(67294);let i={},c=n.createContext(i);function o(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(i):e.components||i:o(e.components),n.createElement(c.Provider,{value:s},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["99417"],{48497:function(e,s,t){t.r(s),t.d(s,{default:()=>x,frontMatter:()=>l,metadata:()=>n,assets:()=>u,toc:()=>r,contentTitle:()=>d});var n=JSON.parse('{"id":"toc/toc-3-_","title":"toc-3-_","description":"","source":"@site/_dogfooding/_docs tests/toc/toc-3-_.mdx","sourceDirName":"toc","slug":"/toc/toc-3-_","permalink":"/tests/docs/toc/toc-3-_","draft":false,"unlisted":false,"tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739551601000,"frontMatter":{"toc_min_heading_level":3},"sidebar":"sidebar","previous":{"title":"toc-3-5","permalink":"/tests/docs/toc/toc-3-5"},"next":{"title":"toc-4-5","permalink":"/tests/docs/toc/toc-4-5"}}'),i=t(85893),c=t(80980),o=t(2630);let l={toc_min_heading_level:3},d=void 0,u={},r=[...o.d$];function h(e){return(0,i.jsx)(o.ZP,{})}function x(e={}){let{wrapper:s}={...(0,c.a)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}x.displayName="MDXContent(_dogfooding/_docs tests/toc/toc-3-_.mdx)"},2630:function(e,s,t){t.d(s,{ZP:()=>l,d$:()=>c});var n=t(85893),i=t(80980);let c=[{value:"section 1",id:"section-1",level:2},{value:"subsection 1-1",id:"subsection-1-1",level:3},{value:"subsection 1-1-1",id:"subsection-1-1-1",level:4},{value:"subsection 1-1-1-1",id:"subsection-1-1-1-1",level:5},{value:"subsection 1-1-1-1-1",id:"subsection-1-1-1-1-1",level:6},{value:"subsection 1-1-1-1-2",id:"subsection-1-1-1-1-2",level:6},{value:"subsection 1-1-1-2",id:"subsection-1-1-1-2",level:5},{value:"subsection 1-1-2",id:"subsection-1-1-2",level:4},{value:"subsection 1-2",id:"subsection-1-2",level:3},{value:"subsection 1-3",id:"subsection-1-3",level:3},{value:"section 2",id:"section-2",level:2},{value:"subsection 2-1",id:"subsection-2-1",level:3},{value:"subsection 2-1",id:"subsection-2-1-1",level:3},{value:"section 3",id:"section-3",level:2},{value:"subsection 3-1",id:"subsection-3-1",level:3},{value:"subsection 3-2",id:"subsection-3-2",level:3}];function o(e){let s={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",header:"header",p:"p",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s.header,{children:(0,n.jsx)(s.h1,{id:"title",children:"title"})}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h2,{id:"section-1",children:"section 1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-1-1",children:"subsection 1-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h4,{id:"subsection-1-1-1",children:"subsection 1-1-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h5,{id:"subsection-1-1-1-1",children:"subsection 1-1-1-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h6,{id:"subsection-1-1-1-1-1",children:"subsection 1-1-1-1-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h6,{id:"subsection-1-1-1-1-2",children:"subsection 1-1-1-1-2"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h5,{id:"subsection-1-1-1-2",children:"subsection 1-1-1-2"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h4,{id:"subsection-1-1-2",children:"subsection 1-1-2"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-1-2",children:"subsection 1-2"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-1-3",children:"subsection 1-3"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h2,{id:"section-2",children:"section 2"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-2-1",children:"subsection 2-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-2-1-1",children:"subsection 2-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h2,{id:"section-3",children:"section 3"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-3-1",children:"subsection 3-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-3-2",children:"subsection 3-2"}),"\n",(0,n.jsx)(s.p,{children:"some text"})]})}function l(e={}){let{wrapper:s}={...(0,i.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(o,{...e})}):o(e)}},80980:function(e,s,t){t.d(s,{Z:()=>l,a:()=>o});var n=t(67294);let i={},c=n.createContext(i);function o(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(i):e.components||i:o(e.components),n.createElement(c.Provider,{value:s},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/07d8cde9.0f5445a0.js b/assets/js/07d8cde9.b44309c3.js
similarity index 99%
rename from assets/js/07d8cde9.0f5445a0.js
rename to assets/js/07d8cde9.b44309c3.js
index c5e4e3e65f..a60c292903 100644
--- a/assets/js/07d8cde9.0f5445a0.js
+++ b/assets/js/07d8cde9.b44309c3.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["80812"],{78929:function(e,s,i){i.r(s),i.d(s,{default:()=>u,frontMatter:()=>a,metadata:()=>n,assets:()=>r,toc:()=>o,contentTitle:()=>l});var n=JSON.parse('{"id":"api/misc/create-docusaurus","title":"\uD83D\uDCE6 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":"S\xe9bastien Lorber","lastUpdatedAt":1739456991000,"sidebarPosition":0,"frontMatter":{"sidebar_position":0,"slug":"/api/misc/create-docusaurus"},"sidebar":"api","previous":{"title":"\uD83D\uDCE6 theme-mermaid","permalink":"/docs/api/themes/@docusaurus/theme-mermaid"},"next":{"title":"\uD83D\uDCE6 eslint-plugin","permalink":"/docs/api/misc/@docusaurus/eslint-plugin"}}'),t=i(85893),c=i(80980);let a={sidebar_position:0,slug:"/api/misc/create-docusaurus"},l="\uD83D\uDCE6 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.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.header,{children:(0,t.jsx)(s.h1,{id:"-create-docusaurus",children:"\uD83D\uDCE6 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.a)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},80980:function(e,s,i){i.d(s,{Z:()=>l,a:()=>a});var n=i(67294);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
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["80812"],{78929:function(e,s,i){i.r(s),i.d(s,{default:()=>u,frontMatter:()=>a,metadata:()=>n,assets:()=>r,toc:()=>o,contentTitle:()=>l});var n=JSON.parse('{"id":"api/misc/create-docusaurus","title":"\uD83D\uDCE6 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":"S\xe9bastien Lorber","lastUpdatedAt":1739551601000,"sidebarPosition":0,"frontMatter":{"sidebar_position":0,"slug":"/api/misc/create-docusaurus"},"sidebar":"api","previous":{"title":"\uD83D\uDCE6 theme-mermaid","permalink":"/docs/api/themes/@docusaurus/theme-mermaid"},"next":{"title":"\uD83D\uDCE6 eslint-plugin","permalink":"/docs/api/misc/@docusaurus/eslint-plugin"}}'),t=i(85893),c=i(80980);let a={sidebar_position:0,slug:"/api/misc/create-docusaurus"},l="\uD83D\uDCE6 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.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.header,{children:(0,t.jsx)(s.h1,{id:"-create-docusaurus",children:"\uD83D\uDCE6 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.a)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},80980:function(e,s,i){i.d(s,{Z:()=>l,a:()=>a});var n=i(67294);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.d66aad61.js b/assets/js/0938a5e1.0232be33.js
similarity index 99%
rename from assets/js/0938a5e1.d66aad61.js
rename to assets/js/0938a5e1.0232be33.js
index 1e089a02a3..d3bdabf587 100644
--- a/assets/js/0938a5e1.d66aad61.js
+++ b/assets/js/0938a5e1.0232be33.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["13328"],{73042:function(e,s,n){n.d(s,{Z:()=>a});let a=n.p+"assets/images/social-card-402517ac2205718a22585e627fe1351c.png"},593:function(e,s,n){n.d(s,{Z:()=>a});let a=n.p+"assets/images/social-card-402517ac2205718a22585e627fe1351c.png"},28918:function(e,s,n){n.r(s),n.d(s,{assets:()=>c,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>a,toc:()=>h});var a=n(12232),r=n(85893),i=n(80980),t=n(14522);let o={title:"Docusaurus 2.2",authors:["slorber"],tags:["release"],image:"./img/social-card.png",date:new Date("2022-10-29T00:00:00.000Z")},l=void 0,c={image:n(73042).Z,authorsImageUrls:[void 0]},h=[{value:"Highlights",id:"highlights",level:2},{value:"Mermaid diagrams",id:"mermaid-diagrams",level:3},{value:"Config 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,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.p,{children:["We are happy to announce ",(0,r.jsx)(s.strong,{children:"Docusaurus 2.2"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["The upgrade should be easy: as explained in our ",(0,r.jsx)(s.a,{href:"/community/release-process",children:"release process documentation"}),", minor versions respect ",(0,r.jsx)(s.a,{href:"https://semver.org/",children:"Semantic Versioning"}),"."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.img,{alt:"Docusaurus 2.2 social card",src:n(593).Z+"",width:"1200",height:"600"})}),"\n","\n",(0,r.jsx)(s.h2,{id:"highlights",children:"Highlights"}),"\n",(0,r.jsx)(s.h3,{id:"mermaid-diagrams",children:"Mermaid diagrams"}),"\n",(0,r.jsxs)(s.p,{children:["In ",(0,r.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,r.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,r.jsx)(s.pre,{children:(0,r.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 prevail!\n John--\x3e>Alice: Great!\n John->>Bob: How about you?\n Bob--\x3e>John: Jolly good!\n```\n"})}),"\n","\n",(0,r.jsx)(t.Z,{children:(0,r.jsx)(s.mermaid,{value:"sequenceDiagram\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 prevail!\n John--\x3e>Alice: Great!\n John->>Bob: How about you?\n Bob--\x3e>John: Jolly good!"})}),"\n",(0,r.jsxs)(s.p,{children:["Make sure to check the ",(0,r.jsx)(s.a,{href:"/docs/markdown-features/diagrams",children:"documentation"}),", and the ",(0,r.jsx)(s.a,{href:"/tests/pages/diagrams",children:"more advanced examples"})]}),"\n",(0,r.jsxs)(s.h3,{id:"config-headtags",children:["Config ",(0,r.jsx)(s.code,{children:"headTags"})]}),"\n",(0,r.jsxs)(s.p,{children:["In ",(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8151",children:"#8151"}),", we added the ability to apply arbitrary HTML ",(0,r.jsx)(s.code,{children:""})," tags to all pages of your site."]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"module.exports = {\n headTags: [\n {\n tagName: 'link',\n attributes: {\n rel: 'icon',\n href: '/img/docusaurus.png',\n },\n },\n ],\n};\n"})}),"\n",(0,r.jsx)(s.h3,{id:"accessibility",children:"Accessibility"}),"\n",(0,r.jsx)(s.p,{children:"We did several accessibility improvements:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8207",children:"#8207"}),": improves keyboard navigation for mobile drawer hamburger button"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8161",children:"#8161"}),": improves keyboard navigation for tabs"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8204",children:"#8204"}),": makes the skip to content button support progressive enhancement"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8174",children:"#8174"}),": improves screen reader announcement when toggling between light/dark mode"]}),"\n"]}),"\n",(0,r.jsx)(s.h3,{id:"developer-experience",children:"Developer Experience"}),"\n",(0,r.jsx)(s.p,{children:"We made validation stricter and improved error messages:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8234",children:"#8234"}),": in case of doc processing failure, prints the problematic markdown file path in the error message"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8192",children:"#8192"})," and ",(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8159",children:"#8159"}),": validates ",(0,r.jsx)(s.code,{children:"siteConfig.url"})," more strictly and with better error message"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8066",children:"#8066"}),": makes config ",(0,r.jsx)(s.code,{children:"url"})," and ",(0,r.jsx)(s.code,{children:"baseUrl"})," fail-safe and less sensitive to the presence or absence of a leading or trailing slash"]}),"\n"]}),"\n",(0,r.jsx)(s.h3,{id:"translations",children:"Translations"}),"\n",(0,r.jsx)(s.p,{children:"We completed the default theme translation support for multiple languages:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\uD83C\uDDF9\uD83C\uDDF7 ",(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8105",children:"#8105"}),": completes Turkish translations"]}),"\n",(0,r.jsxs)(s.li,{children:["\uD83C\uDDF7\uD83C\uDDFA ",(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8253",children:"#8253"}),": completes Russian translations"]}),"\n",(0,r.jsxs)(s.li,{children:["\uD83C\uDDEB\uD83C\uDDF7 ",(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8243",children:"#8243"}),": completes French translations"]}),"\n",(0,r.jsxs)(s.li,{children:["\uD83C\uDDEF\uD83C\uDDF5 ",(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8075",children:"#8075"}),": completes Japanese translations"]}),"\n"]}),"\n",(0,r.jsx)(s.admonition,{type:"tip",children:(0,r.jsxs)(s.p,{children:["Completing theme translations is an ",(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/issues/3526",children:"ongoing effort"})," and an easy way to contribute to Docusaurus. We add new theme features regularly, for which we often ",(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/issues/3526",children:"need new translations"}),"."]})}),"\n",(0,r.jsx)(s.h2,{id:"other-changes",children:"Other changes"}),"\n",(0,r.jsx)(s.p,{children:"Other notable changes include:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8210",children:"#8210"}),": the ",(0,r.jsx)(s.code,{children:"docusaurus swizzle"})," CLI has a new ",(0,r.jsx)(s.code,{children:"--config"})," option"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8109",children:"#8109"}),": mobile navigation performance optimizations, prefetch resources earlier"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8059",children:"#8059"}),": versions/locales navbar dropdowns preserve hash and querystring on navigation"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8227",children:"#8227"}),": the client redirect plugin preserves hash and querystring on redirect"]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["Check the ",(0,r.jsx)(s.strong,{children:(0,r.jsx)(s.a,{href:"/changelog/2.2.0",children:"2.2.0 changelog entry"})})," for an exhaustive list of changes."]})]})}function u(e={}){let{wrapper:s}={...(0,i.a)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},14522:function(e,s,n){n.d(s,{Z:()=>o});var a=n(85893);n(67294);var r=n(90496);let i="dot_giz1",t="bar_rrRL";function o(e){let{children:s,minHeight:n,url:o="http://localhost:3000",style:l,bodyStyle:c}=e;return(0,a.jsxs)("div",{className:"browserWindow_my1Q",style:{...l,minHeight:n},children:[(0,a.jsxs)("div",{className:"browserWindowHeader_jXSR",children:[(0,a.jsxs)("div",{className:"buttons_uHc7",children:[(0,a.jsx)("span",{className:i,style:{background:"#f25f58"}}),(0,a.jsx)("span",{className:i,style:{background:"#fbbe3c"}}),(0,a.jsx)("span",{className:i,style:{background:"#58cb42"}})]}),(0,a.jsx)("div",{className:(0,r.Z)("browserWindowAddressBar_Pd8y","text--truncate"),children:o}),(0,a.jsx)("div",{className:"browserWindowMenuIcon_Vhuh",children:(0,a.jsxs)("div",{children:[(0,a.jsx)("span",{className:t}),(0,a.jsx)("span",{className:t}),(0,a.jsx)("span",{className:t})]})})]}),(0,a.jsx)("div",{className:"browserWindowBody_Idgs",style:c,children:s})]})}},80980:function(e,s,n){n.d(s,{Z:()=>o,a:()=>t});var a=n(67294);let r={},i=a.createContext(r);function t(e){let s=a.useContext(i);return a.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function o(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:t(e.components),a.createElement(i.Provider,{value:s},e.children)}},12232:function(e){e.exports=JSON.parse('{"permalink":"/blog/releases/2.2","editUrl":"https://github.com/facebook/docusaurus/edit/main/website/blog/releases/2.2/index.mdx","source":"@site/blog/releases/2.2/index.mdx","title":"Docusaurus 2.2","description":"We are happy to announce Docusaurus 2.2.","date":"2022-10-29T00:00:00.000Z","tags":[{"inline":false,"label":"Release","permalink":"/blog/tags/release","description":"Blog posts about Docusaurus\' new releases"}],"readingTime":2.2,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer, This Week In React editor","url":"https://thisweekinreact.com","page":{"permalink":"/blog/authors/slorber"},"description":"A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.","socials":{"bluesky":"https://bsky.app/profile/sebastienlorber.com","x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","instagram":"https://www.instagram.com/thisweekinreact","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"}],"frontMatter":{"title":"Docusaurus 2.2","authors":["slorber"],"tags":["release"],"image":"./img/social-card.png","date":"2022-10-29T00:00:00.000Z"},"unlisted":false,"lastUpdatedAt":1739456991000,"lastUpdatedBy":"S\xe9bastien Lorber","prevItem":{"title":"Docusaurus 2.3","permalink":"/blog/releases/2.3"},"nextItem":{"title":"Docusaurus 2.1","permalink":"/blog/2022/09/01/docusaurus-2.1"}}')}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["13328"],{73042:function(e,s,n){n.d(s,{Z:()=>a});let a=n.p+"assets/images/social-card-402517ac2205718a22585e627fe1351c.png"},593:function(e,s,n){n.d(s,{Z:()=>a});let a=n.p+"assets/images/social-card-402517ac2205718a22585e627fe1351c.png"},28918:function(e,s,n){n.r(s),n.d(s,{assets:()=>c,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>a,toc:()=>h});var a=n(12232),r=n(85893),i=n(80980),t=n(14522);let o={title:"Docusaurus 2.2",authors:["slorber"],tags:["release"],image:"./img/social-card.png",date:new Date("2022-10-29T00:00:00.000Z")},l=void 0,c={image:n(73042).Z,authorsImageUrls:[void 0]},h=[{value:"Highlights",id:"highlights",level:2},{value:"Mermaid diagrams",id:"mermaid-diagrams",level:3},{value:"Config 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,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.p,{children:["We are happy to announce ",(0,r.jsx)(s.strong,{children:"Docusaurus 2.2"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["The upgrade should be easy: as explained in our ",(0,r.jsx)(s.a,{href:"/community/release-process",children:"release process documentation"}),", minor versions respect ",(0,r.jsx)(s.a,{href:"https://semver.org/",children:"Semantic Versioning"}),"."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.img,{alt:"Docusaurus 2.2 social card",src:n(593).Z+"",width:"1200",height:"600"})}),"\n","\n",(0,r.jsx)(s.h2,{id:"highlights",children:"Highlights"}),"\n",(0,r.jsx)(s.h3,{id:"mermaid-diagrams",children:"Mermaid diagrams"}),"\n",(0,r.jsxs)(s.p,{children:["In ",(0,r.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,r.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,r.jsx)(s.pre,{children:(0,r.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 prevail!\n John--\x3e>Alice: Great!\n John->>Bob: How about you?\n Bob--\x3e>John: Jolly good!\n```\n"})}),"\n","\n",(0,r.jsx)(t.Z,{children:(0,r.jsx)(s.mermaid,{value:"sequenceDiagram\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 prevail!\n John--\x3e>Alice: Great!\n John->>Bob: How about you?\n Bob--\x3e>John: Jolly good!"})}),"\n",(0,r.jsxs)(s.p,{children:["Make sure to check the ",(0,r.jsx)(s.a,{href:"/docs/markdown-features/diagrams",children:"documentation"}),", and the ",(0,r.jsx)(s.a,{href:"/tests/pages/diagrams",children:"more advanced examples"})]}),"\n",(0,r.jsxs)(s.h3,{id:"config-headtags",children:["Config ",(0,r.jsx)(s.code,{children:"headTags"})]}),"\n",(0,r.jsxs)(s.p,{children:["In ",(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8151",children:"#8151"}),", we added the ability to apply arbitrary HTML ",(0,r.jsx)(s.code,{children:""})," tags to all pages of your site."]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"module.exports = {\n headTags: [\n {\n tagName: 'link',\n attributes: {\n rel: 'icon',\n href: '/img/docusaurus.png',\n },\n },\n ],\n};\n"})}),"\n",(0,r.jsx)(s.h3,{id:"accessibility",children:"Accessibility"}),"\n",(0,r.jsx)(s.p,{children:"We did several accessibility improvements:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8207",children:"#8207"}),": improves keyboard navigation for mobile drawer hamburger button"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8161",children:"#8161"}),": improves keyboard navigation for tabs"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8204",children:"#8204"}),": makes the skip to content button support progressive enhancement"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8174",children:"#8174"}),": improves screen reader announcement when toggling between light/dark mode"]}),"\n"]}),"\n",(0,r.jsx)(s.h3,{id:"developer-experience",children:"Developer Experience"}),"\n",(0,r.jsx)(s.p,{children:"We made validation stricter and improved error messages:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8234",children:"#8234"}),": in case of doc processing failure, prints the problematic markdown file path in the error message"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8192",children:"#8192"})," and ",(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8159",children:"#8159"}),": validates ",(0,r.jsx)(s.code,{children:"siteConfig.url"})," more strictly and with better error message"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8066",children:"#8066"}),": makes config ",(0,r.jsx)(s.code,{children:"url"})," and ",(0,r.jsx)(s.code,{children:"baseUrl"})," fail-safe and less sensitive to the presence or absence of a leading or trailing slash"]}),"\n"]}),"\n",(0,r.jsx)(s.h3,{id:"translations",children:"Translations"}),"\n",(0,r.jsx)(s.p,{children:"We completed the default theme translation support for multiple languages:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\uD83C\uDDF9\uD83C\uDDF7 ",(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8105",children:"#8105"}),": completes Turkish translations"]}),"\n",(0,r.jsxs)(s.li,{children:["\uD83C\uDDF7\uD83C\uDDFA ",(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8253",children:"#8253"}),": completes Russian translations"]}),"\n",(0,r.jsxs)(s.li,{children:["\uD83C\uDDEB\uD83C\uDDF7 ",(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8243",children:"#8243"}),": completes French translations"]}),"\n",(0,r.jsxs)(s.li,{children:["\uD83C\uDDEF\uD83C\uDDF5 ",(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8075",children:"#8075"}),": completes Japanese translations"]}),"\n"]}),"\n",(0,r.jsx)(s.admonition,{type:"tip",children:(0,r.jsxs)(s.p,{children:["Completing theme translations is an ",(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/issues/3526",children:"ongoing effort"})," and an easy way to contribute to Docusaurus. We add new theme features regularly, for which we often ",(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/issues/3526",children:"need new translations"}),"."]})}),"\n",(0,r.jsx)(s.h2,{id:"other-changes",children:"Other changes"}),"\n",(0,r.jsx)(s.p,{children:"Other notable changes include:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8210",children:"#8210"}),": the ",(0,r.jsx)(s.code,{children:"docusaurus swizzle"})," CLI has a new ",(0,r.jsx)(s.code,{children:"--config"})," option"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8109",children:"#8109"}),": mobile navigation performance optimizations, prefetch resources earlier"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8059",children:"#8059"}),": versions/locales navbar dropdowns preserve hash and querystring on navigation"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/8227",children:"#8227"}),": the client redirect plugin preserves hash and querystring on redirect"]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["Check the ",(0,r.jsx)(s.strong,{children:(0,r.jsx)(s.a,{href:"/changelog/2.2.0",children:"2.2.0 changelog entry"})})," for an exhaustive list of changes."]})]})}function u(e={}){let{wrapper:s}={...(0,i.a)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},14522:function(e,s,n){n.d(s,{Z:()=>o});var a=n(85893);n(67294);var r=n(90496);let i="dot_giz1",t="bar_rrRL";function o(e){let{children:s,minHeight:n,url:o="http://localhost:3000",style:l,bodyStyle:c}=e;return(0,a.jsxs)("div",{className:"browserWindow_my1Q",style:{...l,minHeight:n},children:[(0,a.jsxs)("div",{className:"browserWindowHeader_jXSR",children:[(0,a.jsxs)("div",{className:"buttons_uHc7",children:[(0,a.jsx)("span",{className:i,style:{background:"#f25f58"}}),(0,a.jsx)("span",{className:i,style:{background:"#fbbe3c"}}),(0,a.jsx)("span",{className:i,style:{background:"#58cb42"}})]}),(0,a.jsx)("div",{className:(0,r.Z)("browserWindowAddressBar_Pd8y","text--truncate"),children:o}),(0,a.jsx)("div",{className:"browserWindowMenuIcon_Vhuh",children:(0,a.jsxs)("div",{children:[(0,a.jsx)("span",{className:t}),(0,a.jsx)("span",{className:t}),(0,a.jsx)("span",{className:t})]})})]}),(0,a.jsx)("div",{className:"browserWindowBody_Idgs",style:c,children:s})]})}},80980:function(e,s,n){n.d(s,{Z:()=>o,a:()=>t});var a=n(67294);let r={},i=a.createContext(r);function t(e){let s=a.useContext(i);return a.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function o(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:t(e.components),a.createElement(i.Provider,{value:s},e.children)}},12232:function(e){e.exports=JSON.parse('{"permalink":"/blog/releases/2.2","editUrl":"https://github.com/facebook/docusaurus/edit/main/website/blog/releases/2.2/index.mdx","source":"@site/blog/releases/2.2/index.mdx","title":"Docusaurus 2.2","description":"We are happy to announce Docusaurus 2.2.","date":"2022-10-29T00:00:00.000Z","tags":[{"inline":false,"label":"Release","permalink":"/blog/tags/release","description":"Blog posts about Docusaurus\' new releases"}],"readingTime":2.2,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer, This Week In React editor","url":"https://thisweekinreact.com","page":{"permalink":"/blog/authors/slorber"},"description":"A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.","socials":{"bluesky":"https://bsky.app/profile/sebastienlorber.com","x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","instagram":"https://www.instagram.com/thisweekinreact","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"}],"frontMatter":{"title":"Docusaurus 2.2","authors":["slorber"],"tags":["release"],"image":"./img/social-card.png","date":"2022-10-29T00:00:00.000Z"},"unlisted":false,"lastUpdatedAt":1739551601000,"lastUpdatedBy":"S\xe9bastien Lorber","prevItem":{"title":"Docusaurus 2.3","permalink":"/blog/releases/2.3"},"nextItem":{"title":"Docusaurus 2.1","permalink":"/blog/2022/09/01/docusaurus-2.1"}}')}}]);
\ No newline at end of file
diff --git a/assets/js/0a818389.e51502ce.js b/assets/js/0a818389.83950281.js
similarity index 99%
rename from assets/js/0a818389.e51502ce.js
rename to assets/js/0a818389.83950281.js
index e975bc354e..78a17af70d 100644
--- a/assets/js/0a818389.e51502ce.js
+++ b/assets/js/0a818389.83950281.js
@@ -1,3 +1,3 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["51698"],{13244:function(e,n,s){s.r(n),s.d(n,{default:()=>p,frontMatter:()=>d,metadata:()=>t,assets:()=>u,toc:()=>g,contentTitle:()=>h});var t=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":"S\xe9bastien Lorber","lastUpdatedAt":1739456991000,"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"}}'),r=s(85893),i=s(80980),l=s(15398),a=s(58636),o=s(14522),c=s(95998);let d={id:"code-blocks",description:"Handling code blocks in Docusaurus Markdown",slug:"/markdown-features/code-blocks"},h="Code blocks",u={},g=[{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 m(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,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"code-blocks",children:"Code blocks"})}),"\n","\n",(0,r.jsx)(n.p,{children:"Code blocks within documentation are super-powered \uD83D\uDCAA."}),"\n",(0,r.jsx)(n.h2,{id:"code-title",children:"Code title"}),"\n",(0,r.jsxs)(n.p,{children:["You can add a title to the code block by adding a ",(0,r.jsx)(n.code,{children:"title"})," key after the language (leave a space between them)."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",children:'```jsx title="/src/components/HelloCodeTitle.js"\nfunction HelloCodeTitle(props) {\n return
;\n}\n"})})}),"\n",(0,r.jsx)(n.h2,{id:"syntax-highlighting",children:"Syntax highlighting"}),"\n",(0,r.jsxs)(n.p,{children:["Code blocks are text blocks wrapped around by strings of 3 backticks. You may check out ",(0,r.jsx)(n.a,{href:"https://github.com/mdx-js/specification",children:"this reference"})," for the specifications of MDX."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",children:"```js\nconsole.log('Every repo must come with a mascot.');\n```\n"})}),"\n",(0,r.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,r.jsx)(n.a,{href:"https://github.com/FormidableLabs/prism-react-renderer",children:"Prism React Renderer"}),"."]}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"console.log('Every repo must come with a mascot.');\n"})})}),"\n",(0,r.jsx)(n.h3,{id:"theming",children:"Theming"}),"\n",(0,r.jsxs)(n.p,{children:["By default, the Prism ",(0,r.jsx)(n.a,{href:"https://github.com/FormidableLabs/prism-react-renderer#theming",children:"syntax highlighting theme"})," we use is ",(0,r.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,r.jsx)(n.code,{children:"theme"})," field in ",(0,r.jsx)(n.code,{children:"prism"})," as ",(0,r.jsx)(n.code,{children:"themeConfig"})," in your docusaurus.config.js."]}),"\n",(0,r.jsxs)(n.p,{children:["For example, if you prefer to use the ",(0,r.jsx)(n.code,{children:"dracula"})," highlighting theme:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.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,r.jsx)(n.code,{children:"github"})," and ",(0,r.jsx)(n.code,{children:"vsDark"})," themes to provide richer highlight, and you can check our implementations for the ",(0,r.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/blob/main/website/src/utils/prismLight.ts",children:"light"})," and ",(0,r.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/blob/main/website/src/utils/prismDark.ts",children:"dark"})," code block themes."]}),"\n",(0,r.jsx)(n.h3,{id:"supported-languages",children:"Supported Languages"}),"\n",(0,r.jsxs)(n.p,{children:["By default, Docusaurus comes with a subset of ",(0,r.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,r.jsx)(n.admonition,{type:"warning",children:(0,r.jsx)(n.p,{children:"Some popular languages like Java, C#, or PHP are not enabled by default."})}),"\n",(0,r.jsxs)(n.p,{children:["To add syntax highlighting for any of the other ",(0,r.jsx)(n.a,{href:"https://prismjs.com/#supported-languages",children:"Prism-supported languages"}),", define it in an array of additional languages."]}),"\n",(0,r.jsx)(n.admonition,{type:"note",children:(0,r.jsxs)(n.p,{children:["Each additional language has to be a valid Prism component name. For example, Prism would map the ",(0,r.jsx)(n.em,{children:"language"})," ",(0,r.jsx)(n.code,{children:"cs"})," to ",(0,r.jsx)(n.code,{children:"csharp"}),", but only ",(0,r.jsx)(n.code,{children:"prism-csharp.js"})," exists as a ",(0,r.jsx)(n.em,{children:"component"}),", so you need to use ",(0,r.jsx)(n.code,{children:"additionalLanguages: ['csharp']"}),". You can look into ",(0,r.jsx)(n.code,{children:"node_modules/prismjs/components"})," to find all components (languages) available."]})}),"\n",(0,r.jsx)(n.p,{children:"For example, if you want to add highlighting for the PowerShell language:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.jsxs)(n.p,{children:["After adding ",(0,r.jsx)(n.code,{children:"additionalLanguages"}),", restart Docusaurus."]}),"\n",(0,r.jsxs)(n.p,{children:["If you want to add highlighting for languages not yet supported by Prism, you can swizzle ",(0,r.jsx)(n.code,{children:"prism-include-languages"}),":"]}),"\n",(0,r.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,r.jsx)(a.Z,{value:"npm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"npm run swizzle @docusaurus/theme-classic prism-include-languages\n"})})}),(0,r.jsx)(a.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"yarn swizzle @docusaurus/theme-classic prism-include-languages\n"})})}),(0,r.jsx)(a.Z,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"pnpm run swizzle @docusaurus/theme-classic prism-include-languages\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["It will produce ",(0,r.jsx)(n.code,{children:"prism-include-languages.js"})," in your ",(0,r.jsx)(n.code,{children:"src/theme"})," folder. You can add highlighting support for custom languages by editing ",(0,r.jsx)(n.code,{children:"prism-include-languages.js"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.jsxs)(n.p,{children:["You can refer to ",(0,r.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,r.jsxs)(n.p,{children:["When adding a custom language definition, you do not need to add the language to the ",(0,r.jsx)(n.code,{children:"additionalLanguages"})," config array, since Docusaurus only looks up the ",(0,r.jsx)(n.code,{children:"additionalLanguages"})," strings in languages that Prism provides. Adding the language import in ",(0,r.jsx)(n.code,{children:"prism-include-languages.js"})," is sufficient."]}),"\n",(0,r.jsx)(n.h2,{id:"line-highlighting",children:"Line highlighting"}),"\n",(0,r.jsx)(n.h3,{id:"highlighting-with-comments",children:"Highlighting with comments"}),"\n",(0,r.jsxs)(n.p,{children:["You can use comments with ",(0,r.jsx)(n.code,{children:"highlight-next-line"}),", ",(0,r.jsx)(n.code,{children:"highlight-start"}),", and ",(0,r.jsx)(n.code,{children:"highlight-end"})," to select which lines are highlighted."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(o.Z,{children:(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(n.p,{children:"Supported commenting syntax:"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Style"}),(0,r.jsx)(n.th,{children:"Syntax"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"C-style"}),(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.code,{children:"/* ... */"})," and ",(0,r.jsx)(n.code,{children:"// ..."})]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"JSX-style"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"{/* ... */}"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"Bash-style"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"# ..."})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"HTML-style"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"\x3c!-- ... --\x3e"})})]})]})]}),"\n",(0,r.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,r.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,r.jsxs)(n.p,{children:["You can set your own background color for highlighted code line in your ",(0,r.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,r.jsx)(n.pre,{children:(0,r.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,r.jsxs)(n.p,{children:["If you also need to style the highlighted code line in some other way, you can target on ",(0,r.jsx)(n.code,{children:"theme-code-block-highlighted-line"})," CSS class."]}),"\n",(0,r.jsx)(n.h3,{id:"highlighting-with-metadata-string",children:"Highlighting with metadata string"}),"\n",(0,r.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,r.jsx)(n.code,{children:"parse-number-range"})," library and you can find ",(0,r.jsx)(n.a,{href:"https://www.npmjs.com/package/parse-numeric-range",children:"more syntax"})," on their project details."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(o.Z,{children:(0,r.jsx)(n.pre,{children:(0,r.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,r.jsxs)(n.admonition,{title:"prefer comments",type:"tip",children:[(0,r.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,r.jsx)(n.pre,{children:(0,r.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,r.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,r.jsx)(n.h3,{id:"custom-magic-comments",children:"Custom magic comments"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"// highlight-next-line"})," and ",(0,r.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,r.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,r.jsx)(n.code,{children:"code-block-error-line"})," class name:"]}),"\n",(0,r.jsxs)(l.Z,{children:[(0,r.jsx)(a.Z,{value:"docusaurus.config.js",children:(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(a.Z,{value:"src/css/custom.css",children:(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(a.Z,{value:"myDoc.md",children:(0,r.jsx)(n.pre,{children:(0,r.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,r.jsxs)(o.Z,{children:[(0,r.jsxs)(n.p,{children:["In JavaScript, trying to access properties on ",(0,r.jsx)(n.code,{children:"null"})," will error."]}),(0,r.jsx)(n.pre,{children:(0,r.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,r.jsxs)(n.p,{children:["If you use number ranges in metastring (the ",(0,r.jsx)(n.code,{children:"{1,3-4}"})," syntax), Docusaurus will apply the ",(0,r.jsxs)(n.strong,{children:["first ",(0,r.jsx)(n.code,{children:"magicComments"})," entry"]}),"'s class name. This, by default, is ",(0,r.jsx)(n.code,{children:"theme-code-block-highlighted-line"}),", but if you change the ",(0,r.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,r.jsxs)(n.p,{children:["You can disable the default line highlighting comments with ",(0,r.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,r.jsxs)(n.p,{children:["Every magic comment entry will contain three keys: ",(0,r.jsx)(n.code,{children:"className"})," (required), ",(0,r.jsx)(n.code,{children:"line"}),", which applies to the directly next line, or ",(0,r.jsx)(n.code,{children:"block"})," (containing ",(0,r.jsx)(n.code,{children:"start"})," and ",(0,r.jsx)(n.code,{children:"end"}),"), which applies to the entire block enclosed by the two comments."]}),"\n",(0,r.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,r.jsx)(n.a,{href:"/docs/swizzling",children:"swizzling"}),"."]}),"\n",(0,r.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,r.jsx)(a.Z,{value:"npm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"npm run swizzle @docusaurus/theme-classic CodeBlock/Line\n"})})}),(0,r.jsx)(a.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"yarn swizzle @docusaurus/theme-classic CodeBlock/Line\n"})})}),(0,r.jsx)(a.Z,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"pnpm run swizzle @docusaurus/theme-classic CodeBlock/Line\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"Line"})," component will receive the list of class names, based on which you can conditionally render different markup."]}),"\n",(0,r.jsx)(n.h2,{id:"line-numbering",children:"Line numbering"}),"\n",(0,r.jsxs)(n.p,{children:["You can enable line numbering for your code block by using ",(0,r.jsx)(n.code,{children:"showLineNumbers"})," key within the language meta string (don't forget to add space directly before the key)."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",children:"```jsx showLineNumbers\nimport React from 'react';\n\nexport default function MyComponent(props) {\n return
Foo
;\n}\n```\n"})}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",metastring:"showLineNumbers",children:"import React from 'react';\n\nexport default function MyComponent(props) {\n return
Foo
;\n}\n"})})}),"\n",(0,r.jsx)(n.p,{children:"By default, the counter starts at line number 1. It's possible to pass a custom counter start value to split large code blocks for readability:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",children:"```jsx showLineNumbers=3\nexport default function MyComponent(props) {\n return
Foo
;\n}\n```\n"})}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",metastring:"showLineNumbers=3",children:"export default function MyComponent(props) {\n return
Foo
;\n}\n"})})}),"\n",(0,r.jsx)(n.h2,{id:"interactive-code-editor",children:"Interactive code editor"}),"\n",(0,r.jsxs)(n.p,{children:["(Powered by ",(0,r.jsx)(n.a,{href:"https://github.com/FormidableLabs/react-live",children:"React Live"}),")"]}),"\n",(0,r.jsxs)(n.p,{children:["You can create an interactive coding editor with the ",(0,r.jsx)(n.code,{children:"@docusaurus/theme-live-codeblock"})," plugin. First, add the plugin to your package."]}),"\n",(0,r.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,r.jsx)(a.Z,{value:"npm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"npm install --save @docusaurus/theme-live-codeblock\n"})})}),(0,r.jsx)(a.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"yarn add @docusaurus/theme-live-codeblock\n"})})}),(0,r.jsx)(a.Z,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"pnpm add @docusaurus/theme-live-codeblock\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["You will also need to add the plugin to your ",(0,r.jsx)(n.code,{children:"docusaurus.config.js"}),"."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"{3}",children:"export default {\n // ...\n themes: ['@docusaurus/theme-live-codeblock'],\n // ...\n};\n"})}),"\n",(0,r.jsxs)(n.p,{children:["To use the plugin, create a code block with ",(0,r.jsx)(n.code,{children:"live"})," attached to the language meta string."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.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,r.jsx)(o.Z,{children:(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(n.h3,{id:"imports",children:"Imports"}),"\n",(0,r.jsx)(n.admonition,{title:"react-live and imports",type:"warning",children:(0,r.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,r.jsx)(n.p,{children:"By default, all React imports are available. If you need more imports available, swizzle the react-live scope:"}),"\n",(0,r.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,r.jsx)(a.Z,{value:"npm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"npm run swizzle @docusaurus/theme-live-codeblock ReactLiveScope -- --eject\n"})})}),(0,r.jsx)(a.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"yarn swizzle @docusaurus/theme-live-codeblock ReactLiveScope --eject\n"})})}),(0,r.jsx)(a.Z,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"pnpm run swizzle @docusaurus/theme-live-codeblock ReactLiveScope --eject\n"})})})]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"ButtonExample"})," component is now available to use:"]}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(n.h3,{id:"imperative-rendering-noinline",children:"Imperative Rendering (noInline)"}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"noInline"})," option should be used to avoid errors when your code spans multiple components or variables."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",children:"```jsx live noInline\nconst project = 'Docusaurus';\n\nconst Greeting = () =>
Hello {project}!
;\n\nrender();\n```\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Unlike an ordinary interactive code block, when using ",(0,r.jsx)(n.code,{children:"noInline"})," React Live won't wrap your code in an inline function to render it."]}),"\n",(0,r.jsxs)(n.p,{children:["You will need to explicitly call ",(0,r.jsx)(n.code,{children:"render()"})," at the end of your code to display the output."]}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(n.h2,{id:"using-jsx-markup",children:"Using JSX markup in code blocks"}),"\n",(0,r.jsx)(n.p,{children:"Code block in Markdown always preserves its content as plain text, meaning you can't do something like:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.jsxs)(n.p,{children:["If you want to embed HTML markup such as anchor links or bold type, you can use the ",(0,r.jsx)(n.code,{children:"
"})," tag, ",(0,r.jsx)(n.code,{children:""})," tag, or ",(0,r.jsx)(n.code,{children:""})," component."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",children:"
\n"})}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsxs)("pre",{children:[(0,r.jsx)("b",{children:"Input: "}),"1 2 3 4\n",(0,r.jsx)("b",{children:"Output: "}),'"366300745"\n']})}),"\n",(0,r.jsx)(n.admonition,{title:"MDX is whitespace insensitive",type:"warning",children:(0,r.jsxs)(n.p,{children:["MDX is in line with JSX behavior: line break characters, even when inside ",(0,r.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,r.jsx)(n.admonition,{type:"warning",children:(0,r.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,r.jsx)(n.h2,{id:"multi-language-support-code-blocks",children:"Multi-language support code blocks"}),"\n",(0,r.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,r.jsxs)(n.p,{children:["Instead of implementing a dedicated component for multi-language support code blocks, we've implemented a general-purpose ",(0,r.jsx)(n.a,{href:"/docs/markdown-features/tabs",children:(0,r.jsx)(n.code,{children:""})})," component in the classic theme so that you can use it for other non-code scenarios as well."]}),"\n",(0,r.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,r.jsx)(n.strong,{children:"intentional"}),". This is a ",(0,r.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,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(n.p,{children:"And you will get the following:"}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsxs)(l.Z,{children:[(0,r.jsx)(a.Z,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"function helloWorld() {\n console.log('Hello, world!');\n}\n"})})}),(0,r.jsx)(a.Z,{value:"py",label:"Python",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-py",children:'def hello_world():\n print("Hello, world!")\n'})})}),(0,r.jsx)(a.Z,{value:"java",label:"Java",children:(0,r.jsx)(n.pre,{children:(0,r.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,r.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,r.jsx)(n.a,{href:"/docs/markdown-features/tabs#syncing-tab-choices",children:"Syncing tab choices section"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"npm2yarn-remark-plugin",children:"Docusaurus npm2yarn remark plugin"}),"\n",(0,r.jsx)(n.p,{children:"Displaying CLI commands in both npm and Yarn is a very common need, for example:"}),"\n",(0,r.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,r.jsx)(a.Z,{value:"npm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"npm install @docusaurus/remark-plugin-npm2yarn\n"})})}),(0,r.jsx)(a.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"yarn add @docusaurus/remark-plugin-npm2yarn\n"})})}),(0,r.jsx)(a.Z,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"pnpm add @docusaurus/remark-plugin-npm2yarn\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["Docusaurus provides such a utility out of the box, freeing you from using the ",(0,r.jsx)(n.code,{children:"Tabs"})," component every time. To enable this feature, first install the ",(0,r.jsx)(n.code,{children:"@docusaurus/remark-plugin-npm2yarn"})," package as above, and then in ",(0,r.jsx)(n.code,{children:"docusaurus.config.js"}),", for the plugins where you need this feature (doc, blog, pages, etc.), register it in the ",(0,r.jsx)(n.code,{children:"remarkPlugins"})," option. (See ",(0,r.jsx)(n.a,{href:"/docs/api/plugins/@docusaurus/plugin-content-docs#ex-config",children:"Docs configuration"})," for more details on configuration format)"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.jsxs)(n.p,{children:["And then use it by adding the ",(0,r.jsx)(n.code,{children:"npm2yarn"})," key to the code block:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",children:"```bash npm2yarn\nnpm install @docusaurus/remark-plugin-npm2yarn\n```\n"})}),"\n",(0,r.jsx)(n.h4,{id:"npm2yarn-remark-plugin-configuration",children:"Configuration"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Option"}),(0,r.jsx)(n.th,{children:"Type"}),(0,r.jsx)(n.th,{children:"Default"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"sync"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})}),(0,r.jsx)(n.td,{children:"Whether to sync the selected converter across all code blocks."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"converters"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"array"})}),(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.code,{children:"'yarn'"}),", ",(0,r.jsx)(n.code,{children:"'pnpm'"})]}),(0,r.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,r.jsx)(n.h2,{id:"usage-in-jsx",children:"Usage in JSX"}),"\n",(0,r.jsxs)(n.p,{children:["Outside of Markdown, you can use the ",(0,r.jsx)(n.code,{children:"@theme/CodeBlock"})," component to get the same output."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",children:'import CodeBlock from \'@theme/CodeBlock\';\n\nexport default function MyReactPage() {\n return (\n
\n );\n}\n'})}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsx)(c.Z,{language:"jsx",title:"/src/components/HelloCodeTitle.js",showLineNumbers:!0,children:`function HelloCodeTitle(props) {
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["51698"],{13244:function(e,n,s){s.r(n),s.d(n,{default:()=>p,frontMatter:()=>d,metadata:()=>t,assets:()=>u,toc:()=>g,contentTitle:()=>h});var t=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":"S\xe9bastien Lorber","lastUpdatedAt":1739551601000,"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"}}'),r=s(85893),i=s(80980),l=s(15398),a=s(58636),o=s(14522),c=s(95998);let d={id:"code-blocks",description:"Handling code blocks in Docusaurus Markdown",slug:"/markdown-features/code-blocks"},h="Code blocks",u={},g=[{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 m(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,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"code-blocks",children:"Code blocks"})}),"\n","\n",(0,r.jsx)(n.p,{children:"Code blocks within documentation are super-powered \uD83D\uDCAA."}),"\n",(0,r.jsx)(n.h2,{id:"code-title",children:"Code title"}),"\n",(0,r.jsxs)(n.p,{children:["You can add a title to the code block by adding a ",(0,r.jsx)(n.code,{children:"title"})," key after the language (leave a space between them)."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",children:'```jsx title="/src/components/HelloCodeTitle.js"\nfunction HelloCodeTitle(props) {\n return
;\n}\n"})})}),"\n",(0,r.jsx)(n.h2,{id:"syntax-highlighting",children:"Syntax highlighting"}),"\n",(0,r.jsxs)(n.p,{children:["Code blocks are text blocks wrapped around by strings of 3 backticks. You may check out ",(0,r.jsx)(n.a,{href:"https://github.com/mdx-js/specification",children:"this reference"})," for the specifications of MDX."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",children:"```js\nconsole.log('Every repo must come with a mascot.');\n```\n"})}),"\n",(0,r.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,r.jsx)(n.a,{href:"https://github.com/FormidableLabs/prism-react-renderer",children:"Prism React Renderer"}),"."]}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"console.log('Every repo must come with a mascot.');\n"})})}),"\n",(0,r.jsx)(n.h3,{id:"theming",children:"Theming"}),"\n",(0,r.jsxs)(n.p,{children:["By default, the Prism ",(0,r.jsx)(n.a,{href:"https://github.com/FormidableLabs/prism-react-renderer#theming",children:"syntax highlighting theme"})," we use is ",(0,r.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,r.jsx)(n.code,{children:"theme"})," field in ",(0,r.jsx)(n.code,{children:"prism"})," as ",(0,r.jsx)(n.code,{children:"themeConfig"})," in your docusaurus.config.js."]}),"\n",(0,r.jsxs)(n.p,{children:["For example, if you prefer to use the ",(0,r.jsx)(n.code,{children:"dracula"})," highlighting theme:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.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,r.jsx)(n.code,{children:"github"})," and ",(0,r.jsx)(n.code,{children:"vsDark"})," themes to provide richer highlight, and you can check our implementations for the ",(0,r.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/blob/main/website/src/utils/prismLight.ts",children:"light"})," and ",(0,r.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/blob/main/website/src/utils/prismDark.ts",children:"dark"})," code block themes."]}),"\n",(0,r.jsx)(n.h3,{id:"supported-languages",children:"Supported Languages"}),"\n",(0,r.jsxs)(n.p,{children:["By default, Docusaurus comes with a subset of ",(0,r.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,r.jsx)(n.admonition,{type:"warning",children:(0,r.jsx)(n.p,{children:"Some popular languages like Java, C#, or PHP are not enabled by default."})}),"\n",(0,r.jsxs)(n.p,{children:["To add syntax highlighting for any of the other ",(0,r.jsx)(n.a,{href:"https://prismjs.com/#supported-languages",children:"Prism-supported languages"}),", define it in an array of additional languages."]}),"\n",(0,r.jsx)(n.admonition,{type:"note",children:(0,r.jsxs)(n.p,{children:["Each additional language has to be a valid Prism component name. For example, Prism would map the ",(0,r.jsx)(n.em,{children:"language"})," ",(0,r.jsx)(n.code,{children:"cs"})," to ",(0,r.jsx)(n.code,{children:"csharp"}),", but only ",(0,r.jsx)(n.code,{children:"prism-csharp.js"})," exists as a ",(0,r.jsx)(n.em,{children:"component"}),", so you need to use ",(0,r.jsx)(n.code,{children:"additionalLanguages: ['csharp']"}),". You can look into ",(0,r.jsx)(n.code,{children:"node_modules/prismjs/components"})," to find all components (languages) available."]})}),"\n",(0,r.jsx)(n.p,{children:"For example, if you want to add highlighting for the PowerShell language:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.jsxs)(n.p,{children:["After adding ",(0,r.jsx)(n.code,{children:"additionalLanguages"}),", restart Docusaurus."]}),"\n",(0,r.jsxs)(n.p,{children:["If you want to add highlighting for languages not yet supported by Prism, you can swizzle ",(0,r.jsx)(n.code,{children:"prism-include-languages"}),":"]}),"\n",(0,r.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,r.jsx)(a.Z,{value:"npm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"npm run swizzle @docusaurus/theme-classic prism-include-languages\n"})})}),(0,r.jsx)(a.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"yarn swizzle @docusaurus/theme-classic prism-include-languages\n"})})}),(0,r.jsx)(a.Z,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"pnpm run swizzle @docusaurus/theme-classic prism-include-languages\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["It will produce ",(0,r.jsx)(n.code,{children:"prism-include-languages.js"})," in your ",(0,r.jsx)(n.code,{children:"src/theme"})," folder. You can add highlighting support for custom languages by editing ",(0,r.jsx)(n.code,{children:"prism-include-languages.js"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.jsxs)(n.p,{children:["You can refer to ",(0,r.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,r.jsxs)(n.p,{children:["When adding a custom language definition, you do not need to add the language to the ",(0,r.jsx)(n.code,{children:"additionalLanguages"})," config array, since Docusaurus only looks up the ",(0,r.jsx)(n.code,{children:"additionalLanguages"})," strings in languages that Prism provides. Adding the language import in ",(0,r.jsx)(n.code,{children:"prism-include-languages.js"})," is sufficient."]}),"\n",(0,r.jsx)(n.h2,{id:"line-highlighting",children:"Line highlighting"}),"\n",(0,r.jsx)(n.h3,{id:"highlighting-with-comments",children:"Highlighting with comments"}),"\n",(0,r.jsxs)(n.p,{children:["You can use comments with ",(0,r.jsx)(n.code,{children:"highlight-next-line"}),", ",(0,r.jsx)(n.code,{children:"highlight-start"}),", and ",(0,r.jsx)(n.code,{children:"highlight-end"})," to select which lines are highlighted."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(o.Z,{children:(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(n.p,{children:"Supported commenting syntax:"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Style"}),(0,r.jsx)(n.th,{children:"Syntax"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"C-style"}),(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.code,{children:"/* ... */"})," and ",(0,r.jsx)(n.code,{children:"// ..."})]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"JSX-style"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"{/* ... */}"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"Bash-style"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"# ..."})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"HTML-style"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"\x3c!-- ... --\x3e"})})]})]})]}),"\n",(0,r.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,r.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,r.jsxs)(n.p,{children:["You can set your own background color for highlighted code line in your ",(0,r.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,r.jsx)(n.pre,{children:(0,r.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,r.jsxs)(n.p,{children:["If you also need to style the highlighted code line in some other way, you can target on ",(0,r.jsx)(n.code,{children:"theme-code-block-highlighted-line"})," CSS class."]}),"\n",(0,r.jsx)(n.h3,{id:"highlighting-with-metadata-string",children:"Highlighting with metadata string"}),"\n",(0,r.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,r.jsx)(n.code,{children:"parse-number-range"})," library and you can find ",(0,r.jsx)(n.a,{href:"https://www.npmjs.com/package/parse-numeric-range",children:"more syntax"})," on their project details."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(o.Z,{children:(0,r.jsx)(n.pre,{children:(0,r.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,r.jsxs)(n.admonition,{title:"prefer comments",type:"tip",children:[(0,r.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,r.jsx)(n.pre,{children:(0,r.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,r.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,r.jsx)(n.h3,{id:"custom-magic-comments",children:"Custom magic comments"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"// highlight-next-line"})," and ",(0,r.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,r.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,r.jsx)(n.code,{children:"code-block-error-line"})," class name:"]}),"\n",(0,r.jsxs)(l.Z,{children:[(0,r.jsx)(a.Z,{value:"docusaurus.config.js",children:(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(a.Z,{value:"src/css/custom.css",children:(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(a.Z,{value:"myDoc.md",children:(0,r.jsx)(n.pre,{children:(0,r.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,r.jsxs)(o.Z,{children:[(0,r.jsxs)(n.p,{children:["In JavaScript, trying to access properties on ",(0,r.jsx)(n.code,{children:"null"})," will error."]}),(0,r.jsx)(n.pre,{children:(0,r.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,r.jsxs)(n.p,{children:["If you use number ranges in metastring (the ",(0,r.jsx)(n.code,{children:"{1,3-4}"})," syntax), Docusaurus will apply the ",(0,r.jsxs)(n.strong,{children:["first ",(0,r.jsx)(n.code,{children:"magicComments"})," entry"]}),"'s class name. This, by default, is ",(0,r.jsx)(n.code,{children:"theme-code-block-highlighted-line"}),", but if you change the ",(0,r.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,r.jsxs)(n.p,{children:["You can disable the default line highlighting comments with ",(0,r.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,r.jsxs)(n.p,{children:["Every magic comment entry will contain three keys: ",(0,r.jsx)(n.code,{children:"className"})," (required), ",(0,r.jsx)(n.code,{children:"line"}),", which applies to the directly next line, or ",(0,r.jsx)(n.code,{children:"block"})," (containing ",(0,r.jsx)(n.code,{children:"start"})," and ",(0,r.jsx)(n.code,{children:"end"}),"), which applies to the entire block enclosed by the two comments."]}),"\n",(0,r.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,r.jsx)(n.a,{href:"/docs/swizzling",children:"swizzling"}),"."]}),"\n",(0,r.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,r.jsx)(a.Z,{value:"npm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"npm run swizzle @docusaurus/theme-classic CodeBlock/Line\n"})})}),(0,r.jsx)(a.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"yarn swizzle @docusaurus/theme-classic CodeBlock/Line\n"})})}),(0,r.jsx)(a.Z,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"pnpm run swizzle @docusaurus/theme-classic CodeBlock/Line\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"Line"})," component will receive the list of class names, based on which you can conditionally render different markup."]}),"\n",(0,r.jsx)(n.h2,{id:"line-numbering",children:"Line numbering"}),"\n",(0,r.jsxs)(n.p,{children:["You can enable line numbering for your code block by using ",(0,r.jsx)(n.code,{children:"showLineNumbers"})," key within the language meta string (don't forget to add space directly before the key)."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",children:"```jsx showLineNumbers\nimport React from 'react';\n\nexport default function MyComponent(props) {\n return
Foo
;\n}\n```\n"})}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",metastring:"showLineNumbers",children:"import React from 'react';\n\nexport default function MyComponent(props) {\n return
Foo
;\n}\n"})})}),"\n",(0,r.jsx)(n.p,{children:"By default, the counter starts at line number 1. It's possible to pass a custom counter start value to split large code blocks for readability:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",children:"```jsx showLineNumbers=3\nexport default function MyComponent(props) {\n return
Foo
;\n}\n```\n"})}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",metastring:"showLineNumbers=3",children:"export default function MyComponent(props) {\n return
Foo
;\n}\n"})})}),"\n",(0,r.jsx)(n.h2,{id:"interactive-code-editor",children:"Interactive code editor"}),"\n",(0,r.jsxs)(n.p,{children:["(Powered by ",(0,r.jsx)(n.a,{href:"https://github.com/FormidableLabs/react-live",children:"React Live"}),")"]}),"\n",(0,r.jsxs)(n.p,{children:["You can create an interactive coding editor with the ",(0,r.jsx)(n.code,{children:"@docusaurus/theme-live-codeblock"})," plugin. First, add the plugin to your package."]}),"\n",(0,r.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,r.jsx)(a.Z,{value:"npm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"npm install --save @docusaurus/theme-live-codeblock\n"})})}),(0,r.jsx)(a.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"yarn add @docusaurus/theme-live-codeblock\n"})})}),(0,r.jsx)(a.Z,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"pnpm add @docusaurus/theme-live-codeblock\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["You will also need to add the plugin to your ",(0,r.jsx)(n.code,{children:"docusaurus.config.js"}),"."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"{3}",children:"export default {\n // ...\n themes: ['@docusaurus/theme-live-codeblock'],\n // ...\n};\n"})}),"\n",(0,r.jsxs)(n.p,{children:["To use the plugin, create a code block with ",(0,r.jsx)(n.code,{children:"live"})," attached to the language meta string."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.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,r.jsx)(o.Z,{children:(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(n.h3,{id:"imports",children:"Imports"}),"\n",(0,r.jsx)(n.admonition,{title:"react-live and imports",type:"warning",children:(0,r.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,r.jsx)(n.p,{children:"By default, all React imports are available. If you need more imports available, swizzle the react-live scope:"}),"\n",(0,r.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,r.jsx)(a.Z,{value:"npm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"npm run swizzle @docusaurus/theme-live-codeblock ReactLiveScope -- --eject\n"})})}),(0,r.jsx)(a.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"yarn swizzle @docusaurus/theme-live-codeblock ReactLiveScope --eject\n"})})}),(0,r.jsx)(a.Z,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"pnpm run swizzle @docusaurus/theme-live-codeblock ReactLiveScope --eject\n"})})})]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"ButtonExample"})," component is now available to use:"]}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(n.h3,{id:"imperative-rendering-noinline",children:"Imperative Rendering (noInline)"}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"noInline"})," option should be used to avoid errors when your code spans multiple components or variables."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",children:"```jsx live noInline\nconst project = 'Docusaurus';\n\nconst Greeting = () =>
Hello {project}!
;\n\nrender();\n```\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Unlike an ordinary interactive code block, when using ",(0,r.jsx)(n.code,{children:"noInline"})," React Live won't wrap your code in an inline function to render it."]}),"\n",(0,r.jsxs)(n.p,{children:["You will need to explicitly call ",(0,r.jsx)(n.code,{children:"render()"})," at the end of your code to display the output."]}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(n.h2,{id:"using-jsx-markup",children:"Using JSX markup in code blocks"}),"\n",(0,r.jsx)(n.p,{children:"Code block in Markdown always preserves its content as plain text, meaning you can't do something like:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.jsxs)(n.p,{children:["If you want to embed HTML markup such as anchor links or bold type, you can use the ",(0,r.jsx)(n.code,{children:"
"})," tag, ",(0,r.jsx)(n.code,{children:""})," tag, or ",(0,r.jsx)(n.code,{children:""})," component."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",children:"
\n"})}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsxs)("pre",{children:[(0,r.jsx)("b",{children:"Input: "}),"1 2 3 4\n",(0,r.jsx)("b",{children:"Output: "}),'"366300745"\n']})}),"\n",(0,r.jsx)(n.admonition,{title:"MDX is whitespace insensitive",type:"warning",children:(0,r.jsxs)(n.p,{children:["MDX is in line with JSX behavior: line break characters, even when inside ",(0,r.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,r.jsx)(n.admonition,{type:"warning",children:(0,r.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,r.jsx)(n.h2,{id:"multi-language-support-code-blocks",children:"Multi-language support code blocks"}),"\n",(0,r.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,r.jsxs)(n.p,{children:["Instead of implementing a dedicated component for multi-language support code blocks, we've implemented a general-purpose ",(0,r.jsx)(n.a,{href:"/docs/markdown-features/tabs",children:(0,r.jsx)(n.code,{children:""})})," component in the classic theme so that you can use it for other non-code scenarios as well."]}),"\n",(0,r.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,r.jsx)(n.strong,{children:"intentional"}),". This is a ",(0,r.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,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(n.p,{children:"And you will get the following:"}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsxs)(l.Z,{children:[(0,r.jsx)(a.Z,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"function helloWorld() {\n console.log('Hello, world!');\n}\n"})})}),(0,r.jsx)(a.Z,{value:"py",label:"Python",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-py",children:'def hello_world():\n print("Hello, world!")\n'})})}),(0,r.jsx)(a.Z,{value:"java",label:"Java",children:(0,r.jsx)(n.pre,{children:(0,r.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,r.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,r.jsx)(n.a,{href:"/docs/markdown-features/tabs#syncing-tab-choices",children:"Syncing tab choices section"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"npm2yarn-remark-plugin",children:"Docusaurus npm2yarn remark plugin"}),"\n",(0,r.jsx)(n.p,{children:"Displaying CLI commands in both npm and Yarn is a very common need, for example:"}),"\n",(0,r.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,r.jsx)(a.Z,{value:"npm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"npm install @docusaurus/remark-plugin-npm2yarn\n"})})}),(0,r.jsx)(a.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"yarn add @docusaurus/remark-plugin-npm2yarn\n"})})}),(0,r.jsx)(a.Z,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"pnpm add @docusaurus/remark-plugin-npm2yarn\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["Docusaurus provides such a utility out of the box, freeing you from using the ",(0,r.jsx)(n.code,{children:"Tabs"})," component every time. To enable this feature, first install the ",(0,r.jsx)(n.code,{children:"@docusaurus/remark-plugin-npm2yarn"})," package as above, and then in ",(0,r.jsx)(n.code,{children:"docusaurus.config.js"}),", for the plugins where you need this feature (doc, blog, pages, etc.), register it in the ",(0,r.jsx)(n.code,{children:"remarkPlugins"})," option. (See ",(0,r.jsx)(n.a,{href:"/docs/api/plugins/@docusaurus/plugin-content-docs#ex-config",children:"Docs configuration"})," for more details on configuration format)"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.jsxs)(n.p,{children:["And then use it by adding the ",(0,r.jsx)(n.code,{children:"npm2yarn"})," key to the code block:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",children:"```bash npm2yarn\nnpm install @docusaurus/remark-plugin-npm2yarn\n```\n"})}),"\n",(0,r.jsx)(n.h4,{id:"npm2yarn-remark-plugin-configuration",children:"Configuration"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Option"}),(0,r.jsx)(n.th,{children:"Type"}),(0,r.jsx)(n.th,{children:"Default"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"sync"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})}),(0,r.jsx)(n.td,{children:"Whether to sync the selected converter across all code blocks."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"converters"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"array"})}),(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.code,{children:"'yarn'"}),", ",(0,r.jsx)(n.code,{children:"'pnpm'"})]}),(0,r.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,r.jsx)(n.h2,{id:"usage-in-jsx",children:"Usage in JSX"}),"\n",(0,r.jsxs)(n.p,{children:["Outside of Markdown, you can use the ",(0,r.jsx)(n.code,{children:"@theme/CodeBlock"})," component to get the same output."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",children:'import CodeBlock from \'@theme/CodeBlock\';\n\nexport default function MyReactPage() {\n return (\n
;
}`})}),"\n",(0,r.jsxs)(n.p,{children:["The props accepted are ",(0,r.jsx)(n.code,{children:"language"}),", ",(0,r.jsx)(n.code,{children:"title"})," and ",(0,r.jsx)(n.code,{children:"showLineNumbers"}),", in the same way as you write Markdown code blocks."]}),"\n",(0,r.jsxs)(n.p,{children:["Although discouraged, you can also pass in a ",(0,r.jsx)(n.code,{children:"metastring"})," prop like ",(0,r.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,r.jsx)(n.a,{href:"#highlighting-with-comments",children:"use comments for highlighting lines"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["As ",(0,r.jsx)(n.a,{href:"#using-jsx-markup",children:"previously stated"}),", syntax highlighting is only applied when the children is a simple string."]})]})}function p(e={}){let{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},58636:function(e,n,s){s.d(n,{Z:()=>i});var t=s(85893);s(67294);var r=s(90496);function i(e){let{children:n,hidden:s,className:i}=e;return(0,t.jsx)("div",{role:"tabpanel",className:(0,r.Z)("tabItem_pnkT",i),hidden:s,children:n})}},15398:function(e,n,s){s.d(n,{Z:()=>b});var t=s(85893),r=s(67294),i=s(90496),l=s(54947),a=s(3620),o=s(844),c=s(97486),d=s(32263),h=s(16971);function u(e){return r.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||r.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.`)})?.filter(Boolean)??[]}function g(e){let{value:n,tabValues:s}=e;return s.some(e=>e.value===n)}var m=s(71607);function p(e){let{className:n,block:s,selectedValue:r,selectValue:a,tabValues:o}=e,c=[],{blockElementScrollPositionUntilNextRender:d}=(0,l.o5)(),h=e=>{let n=e.currentTarget,s=o[c.indexOf(n)].value;s!==r&&(d(n),a(s))},u=e=>{let n=null;switch(e.key){case"Enter":h(e);break;case"ArrowRight":{let s=c.indexOf(e.currentTarget)+1;n=c[s]??c[0];break}case"ArrowLeft":{let s=c.indexOf(e.currentTarget)-1;n=c[s]??c[c.length-1]}}n?.focus()};return(0,t.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":s},n),children:o.map(e=>{let{value:n,label:s,attributes:l}=e;return(0,t.jsx)("li",{role:"tab",tabIndex:r===n?0:-1,"aria-selected":r===n,ref:e=>{c.push(e)},onKeyDown:u,onClick:h,...l,className:(0,i.Z)("tabs__item","tabItem_AQgk",l?.className,{"tabs__item--active":r===n}),children:s??n},n)})})}function x(e){let{lazy:n,children:s,selectedValue:l}=e,a=(Array.isArray(s)?s:[s]).filter(Boolean);if(n){let e=a.find(e=>e.props.value===l);return e?(0,r.cloneElement)(e,{className:(0,i.Z)("margin-top--md",e.props.className)}):null}return(0,t.jsx)("div",{className:"margin-top--md",children:a.map((e,n)=>(0,r.cloneElement)(e,{key:n,hidden:e.props.value!==l}))})}function j(e){let n=function(e){let{defaultValue:n,queryString:s=!1,groupId:t}=e,i=function(e){let{values:n,children:s}=e;return(0,r.useMemo)(()=>{let e=n??u(s).map(e=>{let{props:{value:n,label:s,attributes:t,default:r}}=e;return{value:n,label:s,attributes:t,default:r}});return!function(e){let n=(0,d.lx)(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,s])}(e),[l,m]=(0,r.useState)(()=>(function(e){let{defaultValue:n,tabValues:s}=e;if(0===s.length)throw Error("Docusaurus error: the component requires at least one children component");if(n){if(!g({value:n,tabValues:s}))throw Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${s.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}let t=s.find(e=>e.default)??s[0];if(!t)throw Error("Unexpected error: 0 tabValues");return t.value})({defaultValue:n,tabValues:i})),[p,x]=function(e){let{queryString:n=!1,groupId:s}=e,t=(0,a.k6)(),i=function(e){let{queryString:n=!1,groupId:s}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!s)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 s??null}({queryString:n,groupId:s});return[(0,c._X)(i),(0,r.useCallback)(e=>{if(!i)return;let n=new URLSearchParams(t.location.search);n.set(i,e),t.replace({...t.location,search:n.toString()})},[i,t])]}({queryString:s,groupId:t}),[j,b]=function(e){let{groupId:n}=e,s=n?`docusaurus.tab.${n}`:null,[t,i]=(0,h.Nk)(s);return[t,(0,r.useCallback)(e=>{s&&i.set(e)},[s,i])]}({groupId:t}),f=(()=>{let e=p??j;return g({value:e,tabValues:i})?e:null})();return(0,o.Z)(()=>{f&&m(f)},[f]),{selectedValue:l,selectValue:(0,r.useCallback)(e=>{if(!g({value:e,tabValues:i}))throw Error(`Can't select invalid tab value=${e}`);m(e),x(e),b(e)},[x,b,i]),tabValues:i}}(e);return(0,t.jsxs)("div",{className:(0,i.Z)("tabs-container","tabList_Qoir"),children:[(0,t.jsx)(p,{...n,...e}),(0,t.jsx)(x,{...n,...e})]})}function b(e){let n=(0,m.Z)();return(0,t.jsx)(j,{...e,children:u(e.children)},String(n))}},56497:function(e,n,s){s.d(n,{Z:()=>i});var t=s(85893);s(67294);var r=s(71607);function i(e){let{children:n,fallback:s}=e;return(0,r.Z)()?(0,t.jsx)(t.Fragment,{children:n?.()}):s??null}},14522:function(e,n,s){s.d(n,{Z:()=>a});var t=s(85893);s(67294);var r=s(90496);let i="dot_giz1",l="bar_rrRL";function a(e){let{children:n,minHeight:s,url:a="http://localhost:3000",style:o,bodyStyle:c}=e;return(0,t.jsxs)("div",{className:"browserWindow_my1Q",style:{...o,minHeight:s},children:[(0,t.jsxs)("div",{className:"browserWindowHeader_jXSR",children:[(0,t.jsxs)("div",{className:"buttons_uHc7",children:[(0,t.jsx)("span",{className:i,style:{background:"#f25f58"}}),(0,t.jsx)("span",{className:i,style:{background:"#fbbe3c"}}),(0,t.jsx)("span",{className:i,style:{background:"#58cb42"}})]}),(0,t.jsx)("div",{className:(0,r.Z)("browserWindowAddressBar_Pd8y","text--truncate"),children:a}),(0,t.jsx)("div",{className:"browserWindowMenuIcon_Vhuh",children:(0,t.jsxs)("div",{children:[(0,t.jsx)("span",{className:l}),(0,t.jsx)("span",{className:l}),(0,t.jsx)("span",{className:l})]})})]}),(0,t.jsx)("div",{className:"browserWindowBody_Idgs",style:c,children:n})]})}},95998:function(e,n,s){s.d(n,{Z:()=>en});var t,r={};s.r(r),s.d(r,{ButtonExample:()=>T});var i=s(85893),l=s(67294),a=s(90496),o=s(71607),c=s(10075),d=s(77827),h=s(8156),u=s(56497),g=s(85108),m=s(45245),p=s(26378);function x(){let{prism:e}=(0,p.L)(),{colorMode:n}=(0,m.I)(),s=e.theme,t=e.darkTheme||s;return"dark"===n?t:s}var j=s(67490);function b(e){let{children:n}=e;return(0,i.jsx)("div",{className:(0,a.Z)("playgroundHeader_Tvsk"),children:n})}function f(){return(0,i.jsx)("div",{children:"Loading..."})}function y(){return(0,i.jsx)(u.Z,{fallback:(0,i.jsx)(f,{}),children:()=>(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(j.Z,{fallback:e=>(0,i.jsx)(g.Ac,{...e}),children:(0,i.jsx)(c.i5,{})}),(0,i.jsx)(c.IF,{})]})})}function v(){return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(b,{children:(0,i.jsx)(d.Z,{id:"theme.Playground.result",description:"The result label of the live codeblocks",children:"Result"})}),(0,i.jsx)("div",{className:"playgroundPreview_mApW",children:(0,i.jsx)(y,{})})]})}function k(){let e=(0,o.Z)();return(0,i.jsx)(c.uz,{className:"playgroundEditor_TySg"},String(e))}function w(){return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(b,{children:(0,i.jsx)(d.Z,{id:"theme.Playground.liveEditor",description:"The live editor label of the live codeblocks",children:"Live Editor"})}),(0,i.jsx)(k,{})]})}let N=e=>`${e};`;function C(e){let{children:n,transformCode:s,...t}=e,{siteConfig:{themeConfig:r}}=(0,h.Z)(),{liveCodeBlock:{playgroundPosition:l}}=r,a=x(),o=t.metastring?.includes("noInline")??!1;return(0,i.jsx)("div",{className:"playgroundContainer_6Ior",children:(0,i.jsx)(c.nu,{code:n?.replace(/\n$/,""),noInline:o,transformCode:s??N,theme:a,...t,children:"top"===l?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(v,{}),(0,i.jsx)(w,{})]}):(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(w,{}),(0,i.jsx)(v,{})]})})})}function T(e){return(0,i.jsx)("button",{type:"button",...e,style:{backgroundColor:"white",color:"black",border:"solid red",borderRadius:20,padding:10,cursor:"pointer",...e.style}})}let B={React:l,...l,...r};var I=s(55951),L=s(6324),S=s.n(L);let Z=/title=(?["'])(?.*?)\1/,E=/\{(?[\d,-]+)\}/,D={js:{start:"\\/\\/",end:""},jsBlock:{start:"\\/\\*",end:"\\*\\/"},jsx:{start:"\\{\\s*\\/\\*",end:"\\*\\/\\s*\\}"},bash:{start:"#",end:""},html:{start:"\x3c!--",end:"--\x3e"}},H={...D,lua:{start:"--",end:""},wasm:{start:"\\;\\;",end:""},tex:{start:"%",end:""},vb:{start:"['\u2018\u2019]",end:""},vbnet:{start:"(?:_\\s*)?['\u2018\u2019]",end:""},rem:{start:"[Rr][Ee][Mm]\\b",end:""},f90:{start:"!",end:""},ml:{start:"\\(\\*",end:"\\*\\)"},cobol:{start:"\\*>",end:""}},M=Object.keys(D);function _(e,n){let s=e.map(e=>{let{start:s,end:t}=H[e];return`(?:${s}\\s*(${n.flatMap(e=>[e.line,e.block?.start,e.block?.end].filter(Boolean)).join("|")})\\s*${t})`}).join("|");return RegExp(`^\\s*(?:${s})\\s*$`)}function R(e){let{as:n,...s}=e,t=function(e){let n={color:"--prism-color",backgroundColor:"--prism-background-color"},s={};return Object.entries(e.plain).forEach(e=>{let[t,r]=e,i=n[t];i&&"string"==typeof r&&(s[i]=r)}),s}(x());return(0,i.jsx)(n,{...s,style:t,className:(0,a.Z)(s.className,"codeBlockContainer_jDV4",I.k.common.codeBlock)})}let P={codeBlockContent:"codeBlockContent_vx7S",codeBlockTitle:"codeBlockTitle_bdru",codeBlock:"codeBlock_Gebt",codeBlockStandalone:"codeBlockStandalone_i_cY",codeBlockLines:"codeBlockLines_FJaf",codeBlockLinesWithNumbering:"codeBlockLinesWithNumbering_FU9Q",buttonGroup:"buttonGroup_cUGO"};function z(e){let{children:n,className:s}=e;return(0,i.jsx)(R,{as:"pre",tabIndex:0,className:(0,a.Z)(P.codeBlockStandalone,"thin-scrollbar",s),children:(0,i.jsx)("code",{className:P.codeBlockLines,children:n})})}var A=s(50923);let W={attributes:!0,characterData:!0,childList:!0,subtree:!0};var F=s(7316);let Y={codeLine:"codeLine_qRmp",codeLineNumber:"codeLineNumber_dS_J",codeLineContent:"codeLineContent_XF5l"};function $(e){let{line:n,classNames:s,showLineNumbers:t,getLineProps:r,getTokenProps:l}=e;1===n.length&&"\n"===n[0].content&&(n[0].content="");let o=r({line:n,className:(0,a.Z)(s,t&&Y.codeLine)}),c=n.map((e,n)=>(0,i.jsx)("span",{...l({token:e})},n));return(0,i.jsxs)("span",{...o,children:[t?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("span",{className:Y.codeLineNumber}),(0,i.jsx)("span",{className:Y.codeLineContent,children:c})]}):c,(0,i.jsx)("br",{})]})}var O=s(44771);function U(e){return(0,i.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,i.jsx)("path",{fill:"currentColor",d:"M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"})})}function J(e){return(0,i.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,i.jsx)("path",{fill:"currentColor",d:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"})})}let q={copyButtonCopied:"copyButtonCopied_OkN_",copyButtonIcons:"copyButtonIcons_OqsO",copyButtonIcon:"copyButtonIcon_PgCn",copyButtonSuccessIcon:"copyButtonSuccessIcon_bsQG"};function X(e){let{code:n,className:s}=e,[t,r]=(0,l.useState)(!1),o=(0,l.useRef)(void 0),c=(0,l.useCallback)(()=>{(0,O.Z)(n),r(!0),o.current=window.setTimeout(()=>{r(!1)},1e3)},[n]);return(0,l.useEffect)(()=>()=>window.clearTimeout(o.current),[]),(0,i.jsx)("button",{type:"button","aria-label":t?(0,d.I)({id:"theme.CodeBlock.copied",message:"Copied",description:"The copied button label on code blocks"}):(0,d.I)({id:"theme.CodeBlock.copyButtonAriaLabel",message:"Copy code to clipboard",description:"The ARIA label for copy code blocks button"}),title:(0,d.I)({id:"theme.CodeBlock.copy",message:"Copy",description:"The copy button label on code blocks"}),className:(0,a.Z)("clean-btn",s,q.copyButton,t&&q.copyButtonCopied),onClick:c,children:(0,i.jsxs)("span",{className:q.copyButtonIcons,"aria-hidden":"true",children:[(0,i.jsx)(U,{className:q.copyButtonIcon}),(0,i.jsx)(J,{className:q.copyButtonSuccessIcon})]})})}function V(e){return(0,i.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,i.jsx)("path",{fill:"currentColor",d:"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"})})}let G={wordWrapButtonIcon:"wordWrapButtonIcon_MQXS",wordWrapButtonEnabled:"wordWrapButtonEnabled_TBIH"};function Q(e){let{className:n,onClick:s,isEnabled:t}=e,r=(0,d.I)({id:"theme.CodeBlock.wordWrapToggle",message:"Toggle word wrap",description:"The title attribute for toggle word wrapping button of code block lines"});return(0,i.jsx)("button",{type:"button",onClick:s,className:(0,a.Z)("clean-btn",n,t&&G.wordWrapButtonEnabled),"aria-label":r,title:r,children:(0,i.jsx)(V,{className:G.wordWrapButtonIcon,"aria-hidden":"true"})})}function K(e){var n;let{children:s,className:t="",metastring:r,title:c,showLineNumbers:d,language:h}=e,{prism:{defaultLanguage:u,magicComments:g}}=(0,p.L)(),m=(n=h??function(e){let n=e.split(" ").find(e=>e.startsWith("language-"));return n?.replace(/language-/,"")}(t)??u,n?.toLowerCase()),j=x(),b=function(){let[e,n]=(0,l.useState)(!1),[s,t]=(0,l.useState)(!1),r=(0,l.useRef)(null),i=(0,l.useCallback)(()=>{let s=r.current.querySelector("code");e?s.removeAttribute("style"):(s.style.whiteSpace="pre-wrap",s.style.overflowWrap="anywhere"),n(e=>!e)},[r,e]),a=(0,l.useCallback)(()=>{let{scrollWidth:e,clientWidth:n}=r.current;t(e>n||r.current.querySelector("code").hasAttribute("style"))},[r]);return!function(e,n){let[s,t]=(0,l.useState)(),r=(0,l.useCallback)(()=>{t(e.current?.closest("[role=tabpanel][hidden]"))},[e,t]);(0,l.useEffect)(()=>{r()},[r]),function(e,n){let s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:W,t=(0,A.zX)(n),r=(0,A.Ql)(s);(0,l.useEffect)(()=>{let n=new MutationObserver(t);return e&&n.observe(e,r),()=>n.disconnect()},[e,t,r])}(s,e=>{e.forEach(e=>{"attributes"===e.type&&"hidden"===e.attributeName&&(n(),r())})},{attributes:!0,characterData:!1,childList:!1,subtree:!1})}(r,a),(0,l.useEffect)(()=>{a()},[e,a]),(0,l.useEffect)(()=>(window.addEventListener("resize",a,{passive:!0}),()=>{window.removeEventListener("resize",a)}),[a]),{codeBlockRef:r,isEnabled:e,isCodeScrollable:s,toggle:i}}(),f=(0,o.Z)(),y=(r?.match(Z)?.groups.title??"")||c,{lineClassNames:v,code:k}=function(e,n){let s=e.replace(/\n$/,""),{language:t,magicComments:r,metastring:i}=n;if(i&&E.test(i)){let e=i.match(E).groups.range;if(0===r.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=r[0].className;return{lineClassNames:Object.fromEntries(S()(e).filter(e=>e>0).map(e=>[e-1,[n]])),code:s}}if(void 0===t)return{lineClassNames:{},code:s};let l=function(e,n){switch(e){case"js":case"javascript":case"ts":case"typescript":return _(["js","jsBlock"],n);case"jsx":case"tsx":return _(["js","jsBlock","jsx"],n);case"html":return _(["js","jsBlock","html"],n);case"python":case"py":case"bash":return _(["bash"],n);case"markdown":case"md":return _(["html","jsx","bash"],n);case"tex":case"latex":case"matlab":return _(["tex"],n);case"lua":case"haskell":return _(["lua"],n);case"sql":return _(["lua","jsBlock"],n);case"wasm":return _(["wasm"],n);case"vb":case"vba":case"visual-basic":return _(["vb","rem"],n);case"vbnet":return _(["vbnet","rem"],n);case"batch":return _(["rem"],n);case"basic":return _(["rem","f90"],n);case"fsharp":return _(["js","ml"],n);case"ocaml":case"sml":return _(["ml"],n);case"fortran":return _(["f90"],n);case"cobol":return _(["cobol"],n);default:return _(M,n)}}(t,r),a=s.split("\n"),o=Object.fromEntries(r.map(e=>[e.className,{start:0,range:""}])),c=Object.fromEntries(r.filter(e=>e.line).map(e=>{let{className:n,line:s}=e;return[s,n]})),d=Object.fromEntries(r.filter(e=>e.block).map(e=>{let{className:n,block:s}=e;return[s.start,n]})),h=Object.fromEntries(r.filter(e=>e.block).map(e=>{let{className:n,block:s}=e;return[s.end,n]}));for(let e=0;evoid 0!==e);c[s]?o[c[s]].range+=`${e},`:d[s]?o[d[s]].start=e:h[s]&&(o[h[s]].range+=`${o[h[s]].start}-${e-1},`),a.splice(e,1)}s=a.join("\n");let u={};return Object.entries(o).forEach(e=>{let[n,{range:s}]=e;S()(s).forEach(e=>{u[e]??=[],u[e].push(n)})}),{lineClassNames:u,code:s}}(s,{metastring:r,language:m,magicComments:g}),w=function(e){let{showLineNumbers:n,metastring:s}=e;return"boolean"==typeof n?n?1:void 0:"number"==typeof n?n:function(e){let n=e?.split(" ").find(e=>e.startsWith("showLineNumbers"));if(n)return n.startsWith("showLineNumbers=")?parseInt(n.replace("showLineNumbers=",""),10):1}(s)}({showLineNumbers:d,metastring:r});return(0,i.jsxs)(R,{as:"div",className:(0,a.Z)(t,m&&!t.includes(`language-${m}`)&&`language-${m}`),children:[y&&(0,i.jsx)("div",{className:P.codeBlockTitle,children:y}),(0,i.jsxs)("div",{className:P.codeBlockContent,children:[(0,i.jsx)(F.y$,{theme:j,code:k,language:m??"text",children:e=>{let{className:n,style:s,tokens:t,getLineProps:r,getTokenProps:l}=e;return(0,i.jsx)("pre",{tabIndex:0,ref:b.codeBlockRef,className:(0,a.Z)(n,P.codeBlock,"thin-scrollbar"),style:s,children:(0,i.jsx)("code",{className:(0,a.Z)(P.codeBlockLines,void 0!==w&&P.codeBlockLinesWithNumbering),style:void 0===w?void 0:{counterReset:`line-count ${w-1}`},children:t.map((e,n)=>(0,i.jsx)($,{line:e,getLineProps:r,getTokenProps:l,classNames:v[n],showLineNumbers:void 0!==w},n))})})}}),f?(0,i.jsxs)("div",{className:P.buttonGroup,children:[(b.isEnabled||b.isCodeScrollable)&&(0,i.jsx)(Q,{className:P.codeButton,onClick:()=>b.toggle(),isEnabled:b.isEnabled}),(0,i.jsx)(X,{className:P.codeButton,code:k})]}):null]})]})}let ee=(t=function(e){let{children:n,...s}=e,t=(0,o.Z)(),r=l.Children.toArray(n).some(e=>(0,l.isValidElement)(e))?n:Array.isArray(n)?n.join(""):n;return(0,i.jsx)("string"==typeof r?K:z,{...s,children:r},String(t))},function(e){return e.live?(0,i.jsx)(C,{scope:B,...e}):(0,i.jsx)(t,{...e})});function en(e){return(0,i.jsx)(ee,{...e})}}}]);
\ No newline at end of file
diff --git a/assets/js/0b6cd89a.85450422.js b/assets/js/0b6cd89a.1f16041b.js
similarity index 99%
rename from assets/js/0b6cd89a.85450422.js
rename to assets/js/0b6cd89a.1f16041b.js
index 392ef27b5b..d1758b3e51 100644
--- a/assets/js/0b6cd89a.85450422.js
+++ b/assets/js/0b6cd89a.1f16041b.js
@@ -1,4 +1,4 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["25467"],{84645:function(e,n,t){t.d(n,{ZP:()=>l,d$:()=>i});var s=t(85893),r=t(80980);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 d(e){let n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h2,{id:"tags-file",children:"Tags File"}),"\n",(0,s.jsxs)(n.p,{children:["Use the ",(0,s.jsxs)(n.a,{href:"#tags",children:[(0,s.jsx)(n.code,{children:"tags"})," plugin option"]})," to configure the path of a YAML tags file."]}),"\n",(0,s.jsxs)(n.p,{children:["By convention, the plugin will look for a ",(0,s.jsx)(n.code,{children:"tags.yml"})," file at the root of your content folder(s)."]}),"\n",(0,s.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,s.jsxs)(n.a,{href:"#markdown-front-matter",children:[(0,s.jsx)(n.code,{children:"tags"})," front matter"]}),"."]}),"\n",(0,s.jsx)(n.admonition,{title:"Keeping tags consistent",type:"tip",children:(0,s.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,s.jsx)(n.a,{href:"#onInlineTags",children:(0,s.jsx)(n.code,{children:"onInlineTags: 'throw'"})})," plugin option to enforce this consistency and prevent usage of inline tags declared on the fly."]})}),"\n",(0,s.jsx)(n.h3,{id:"tags-file-types",children:"Types"}),"\n",(0,s.jsx)(n.p,{children:"The YAML content of the provided tags file should respect the following shape:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.h3,{id:"tags-file-example",children:"Example"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-md",metastring:'title="content.md"',children:"---\ntags: [releases, announcements, emptyTag]\n---\n\n# Title\n\nContent\n"})})]})}function l(e={}){let{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},17918:function(e,n,t){t.r(n),t.d(n,{default:()=>g,frontMatter:()=>h,metadata:()=>s,assets:()=>x,toc:()=>j,contentTitle:()=>u});var s=JSON.parse('{"id":"api/plugins/plugin-content-docs","title":"\uD83D\uDCE6 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":"S\xe9bastien Lorber","lastUpdatedAt":1739456991000,"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":"\uD83D\uDCE6 plugin-content-blog","permalink":"/docs/api/plugins/@docusaurus/plugin-content-blog"}}'),r=t(85893),i=t(80980),d=t(15398),l=t(58636),o=t(32240),c=t(66359),a=t(84645);let h={sidebar_position:1,slug:"/api/plugins/@docusaurus/plugin-content-docs"},u="\uD83D\uDCE6 plugin-content-docs",x={},j=[{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.d$,{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 p(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.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"-plugin-content-docs",children:"\uD83D\uDCE6 plugin-content-docs"})}),"\n","\n",(0,r.jsxs)(n.p,{children:["Provides the ",(0,r.jsx)(n.a,{href:"/docs/docs-introduction",children:"Docs"})," functionality and is the default docs plugin for Docusaurus."]}),"\n",(0,r.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,r.jsxs)(d.Z,{groupId:"npm2yarn",children:[(0,r.jsx)(l.Z,{value:"npm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"npm install --save @docusaurus/plugin-content-docs\n"})})}),(0,r.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"yarn add @docusaurus/plugin-content-docs\n"})})}),(0,r.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"pnpm add @docusaurus/plugin-content-docs\n"})})})]}),"\n",(0,r.jsxs)(n.admonition,{type:"tip",children:[(0,r.jsxs)(n.p,{children:["If you use the preset ",(0,r.jsx)(n.code,{children:"@docusaurus/preset-classic"}),", you don't need to install this plugin as a dependency."]}),(0,r.jsxs)(n.p,{children:["You can configure this plugin through the ",(0,r.jsx)(n.a,{href:"/docs/using-plugins#docusauruspreset-classic",children:"preset options"}),"."]})]}),"\n",(0,r.jsx)(n.h2,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Name"}),(0,r.jsx)(n.th,{children:"Type"}),(0,r.jsx)(n.th,{children:"Default"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"path"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'docs'"})}),(0,r.jsx)(n.td,{children:"Path to the docs content directory on the file system, relative to site directory."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"editUrl"})}),(0,r.jsx)(n.td,{children:(0,r.jsxs)("code",{children:["string | ",(0,r.jsx)(n.a,{href:"#EditUrlFunction",children:"EditUrlFunction"})]})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})}),(0,r.jsxs)(n.td,{children:["Base URL to edit your site. The final URL is computed by ",(0,r.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,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"editLocalizedFiles"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})}),(0,r.jsxs)(n.td,{children:["The edit URL will target the localized file, instead of the original unlocalized file. Ignored when ",(0,r.jsx)(n.code,{children:"editUrl"})," is a function."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"editCurrentVersion"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})}),(0,r.jsxs)(n.td,{children:["The edit URL will always target the current version doc instead of older versions. Ignored when ",(0,r.jsx)(n.code,{children:"editUrl"})," is a function."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"routeBasePath"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'docs'"})}),(0,r.jsxs)(n.td,{children:["URL route for the docs section of your site. ",(0,r.jsx)(n.strong,{children:"DO NOT"})," include a trailing slash. Use ",(0,r.jsx)(n.code,{children:"/"})," for shipping docs without base path."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"tagsBasePath"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'tags'"})}),(0,r.jsxs)(n.td,{children:["URL route for the tags list page of your site. It is prepended to the ",(0,r.jsx)(n.code,{children:"routeBasePath"}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"include"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string[]"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"['**/*.{md,mdx}']"})}),(0,r.jsx)(n.td,{children:"Array of glob patterns matching Markdown files to be built, relative to the content path."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"exclude"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string[]"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.em,{children:"See example configuration"})}),(0,r.jsxs)(n.td,{children:["Array of glob patterns matching Markdown files to be excluded. Serves as refinement based on the ",(0,r.jsx)(n.code,{children:"include"})," option."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"sidebarPath"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)("code",{children:"false | string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})}),(0,r.jsxs)(n.td,{children:["Path to a sidebars configuration file, loaded in a Node.js context. Use ",(0,r.jsx)(n.code,{children:"false"})," to disable sidebars, or ",(0,r.jsx)(n.code,{children:"undefined"})," to create a fully autogenerated sidebar."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"sidebarCollapsible"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"true"})}),(0,r.jsxs)(n.td,{children:["Whether sidebar categories are collapsible by default. See also ",(0,r.jsx)(n.a,{href:"/docs/sidebar/items#collapsible-categories",children:"Collapsible categories"})]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"sidebarCollapsed"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"true"})}),(0,r.jsxs)(n.td,{children:["Whether sidebar categories are collapsed by default. See also ",(0,r.jsx)(n.a,{href:"/docs/sidebar/items#expanded-categories-by-default",children:"Expanded categories by default"})]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"sidebarItemsGenerator"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)("code",{children:(0,r.jsx)(n.a,{href:"#SidebarGenerator",children:"SidebarGenerator"})})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.em,{children:"Omitted"})}),(0,r.jsxs)(n.td,{children:["Function used to replace the sidebar items of type ",(0,r.jsx)(n.code,{children:"'autogenerated'"})," with real sidebar items (docs, categories, links...). See also ",(0,r.jsx)(n.a,{href:"/docs/sidebar/autogenerated#customize-the-sidebar-items-generator",children:"Customize the sidebar items generator"})]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"numberPrefixParser"})}),(0,r.jsx)(n.td,{children:(0,r.jsxs)("code",{children:["boolean | ",(0,r.jsx)(n.a,{href:"#PrefixParser",children:"PrefixParser"})]})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.em,{children:"Omitted"})}),(0,r.jsxs)(n.td,{children:["Custom parsing logic to extract number prefixes from file names. Use ",(0,r.jsx)(n.code,{children:"false"})," to disable this behavior and leave the docs untouched, and ",(0,r.jsx)(n.code,{children:"true"})," to use the default parser. See also ",(0,r.jsx)(n.a,{href:"/docs/sidebar/autogenerated#using-number-prefixes",children:"Using number prefixes"})]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"docsRootComponent"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'@theme/DocsRoot'"})}),(0,r.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,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"docVersionRootComponent"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'@theme/DocVersionLayout'"})}),(0,r.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,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"docRootComponent"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'@theme/DocRoot'"})}),(0,r.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,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"docItemComponent"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'@theme/DocItem'"})}),(0,r.jsx)(n.td,{children:"Main doc container, with TOC, pagination, etc."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"docTagsListComponent"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'@theme/DocTagsListPage'"})}),(0,r.jsx)(n.td,{children:"Root component of the tags list page"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"docTagDocListComponent"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'@theme/DocTagDocListPage'"})}),(0,r.jsx)(n.td,{children:'Root component of the "docs containing tag X" page.'})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"docCategoryGeneratedIndexComponent"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'@theme/DocCategoryGeneratedIndexPage'"})}),(0,r.jsx)(n.td,{children:"Root component of the generated category index page."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"remarkPlugins"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"any[]"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"[]"})}),(0,r.jsx)(n.td,{children:"Remark plugins passed to MDX."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"rehypePlugins"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"any[]"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"[]"})}),(0,r.jsx)(n.td,{children:"Rehype plugins passed to MDX."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"rehypePlugins"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"any[]"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"[]"})}),(0,r.jsx)(n.td,{children:"Recma plugins passed to MDX."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"beforeDefaultRemarkPlugins"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"any[]"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"[]"})}),(0,r.jsx)(n.td,{children:"Custom Remark plugins passed to MDX before the default Docusaurus Remark plugins."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"beforeDefaultRehypePlugins"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"any[]"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"[]"})}),(0,r.jsx)(n.td,{children:"Custom Rehype plugins passed to MDX before the default Docusaurus Rehype plugins."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"showLastUpdateAuthor"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})}),(0,r.jsx)(n.td,{children:"Whether to display the author who last updated the doc."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"showLastUpdateTime"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})}),(0,r.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,r.jsx)(n.code,{children:"actions/checkout"}),", use",(0,r.jsx)(n.code,{children:"fetch-depth: 0"}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"breadcrumbs"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"true"})}),(0,r.jsx)(n.td,{children:"Enable or disable the breadcrumbs on doc pages."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"disableVersioning"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})}),(0,r.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,r.jsx)(n.code,{children:"includeCurrentVersion: false"})," and ",(0,r.jsx)(n.code,{children:"disableVersioning: true"}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"includeCurrentVersion"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"true"})}),(0,r.jsx)(n.td,{children:"Include the current version of your docs."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"lastVersion"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsxs)(n.td,{children:["First version in ",(0,r.jsx)(n.code,{children:"versions.json"})]}),(0,r.jsx)(n.td,{children:"The version navigated to in priority and displayed by default for docs navbar items."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"onlyIncludeVersions"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string[]"})}),(0,r.jsx)(n.td,{children:"All versions available"}),(0,r.jsx)(n.td,{children:"Only include a subset of all available versions."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"versions"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)("code",{children:(0,r.jsx)(n.a,{href:"#VersionsConfig",children:"VersionsConfig"})})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"{}"})}),(0,r.jsx)(n.td,{children:"Independent customization of each version's properties."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"tags"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string | false | null | undefined"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"tags.yml"})}),(0,r.jsx)(n.td,{children:"Path to a YAML file listing pre-defined tags. Relative to the docs version content directories."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"onInlineTags"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'ignore' | 'log' | 'warn' | 'throw'"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"warn"})}),(0,r.jsxs)(n.td,{children:["The plugin behavior when docs contain inline tags (not appearing in the list of pre-defined tags, usually ",(0,r.jsx)(n.code,{children:"docs/tags.yml"}),")."]})]})]})]})}),"\n",(0,r.jsx)(n.h3,{id:"types",children:"Types"}),"\n",(0,r.jsx)(n.h4,{id:"EditUrlFunction",children:(0,r.jsx)(n.code,{children:"EditUrlFunction"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(n.h4,{id:"PrefixParser",children:(0,r.jsx)(n.code,{children:"PrefixParser"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"type PrefixParser = (filename: string) => {\n filename: string;\n numberPrefix?: number;\n};\n"})}),"\n",(0,r.jsx)(n.h4,{id:"SidebarGenerator",children:(0,r.jsx)(n.code,{children:"SidebarGenerator"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(n.h4,{id:"VersionsConfig",children:(0,r.jsx)(n.code,{children:"VersionsConfig"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(n.h3,{id:"ex-config",children:"Example configuration"}),"\n",(0,r.jsx)(n.p,{children:"You can configure this plugin through preset options or plugin options."}),"\n",(0,r.jsx)(n.admonition,{type:"tip",children:(0,r.jsx)(n.p,{children:"Most Docusaurus users configure this plugin through the preset options."})}),"\n","\n",(0,r.jsx)(c.Z,{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,r.jsx)(n.h2,{id:"markdown-front-matter",children:"Markdown front matter"}),"\n",(0,r.jsxs)(n.p,{children:["Markdown documents can use the following Markdown ",(0,r.jsx)(n.a,{href:"/docs/markdown-features#front-matter",children:"front matter"})," metadata fields, enclosed by a line ",(0,r.jsx)(n.code,{children:"---"})," on either side."]}),"\n",(0,r.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Name"}),(0,r.jsx)(n.th,{children:"Type"}),(0,r.jsx)(n.th,{children:"Default"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"id"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:"file path (including folders, without the extension)"}),(0,r.jsx)(n.td,{children:"A unique document ID."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"title"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsxs)(n.td,{children:["Markdown title or ",(0,r.jsx)(n.code,{children:"id"})]}),(0,r.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,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"pagination_label"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.code,{children:"sidebar_label"})," or ",(0,r.jsx)(n.code,{children:"title"})]}),(0,r.jsx)(n.td,{children:"The text used in the document next/previous buttons for this document."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"sidebar_label"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"title"})}),(0,r.jsx)(n.td,{children:"The text shown in the document sidebar for this document."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"sidebar_position"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"number"})}),(0,r.jsx)(n.td,{children:"Default ordering"}),(0,r.jsxs)(n.td,{children:["Controls the position of a doc inside the generated sidebar slice when using ",(0,r.jsx)(n.code,{children:"autogenerated"})," sidebar items. See also ",(0,r.jsx)(n.a,{href:"/docs/sidebar/autogenerated#autogenerated-sidebar-metadata",children:"Autogenerated sidebar metadata"}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"sidebar_class_name"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})}),(0,r.jsx)(n.td,{children:"Gives the corresponding sidebar label a special class name when using autogenerated sidebars."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"sidebar_custom_props"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"object"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})}),(0,r.jsxs)(n.td,{children:["Assign ",(0,r.jsx)(n.a,{href:"/docs/sidebar#passing-custom-props",children:"custom props"})," to the sidebar item referencing this doc"]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"displayed_sidebar"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})}),(0,r.jsxs)(n.td,{children:["Force the display of a given sidebar when browsing the current document. Read the ",(0,r.jsx)(n.a,{href:"/docs/sidebar/multiple-sidebars",children:"multiple sidebars guide"})," for details."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"hide_title"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})}),(0,r.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,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"hide_table_of_contents"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})}),(0,r.jsx)(n.td,{children:"Whether to hide the table of contents to the right."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"toc_min_heading_level"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"number"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"2"})}),(0,r.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,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"toc_max_heading_level"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"number"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"3"})}),(0,r.jsx)(n.td,{children:"The max heading level shown in the table of contents. Must be between 2 and 6."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"pagination_next"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)("code",{children:"string | null"})}),(0,r.jsx)(n.td,{children:"Next doc in the sidebar"}),(0,r.jsxs)(n.td,{children:['The ID of the documentation you want the "Next" pagination to link to. Use ',(0,r.jsx)(n.code,{children:"null"}),' to disable showing "Next" for this page.']})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"pagination_prev"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)("code",{children:"string | null"})}),(0,r.jsx)(n.td,{children:"Previous doc in the sidebar"}),(0,r.jsxs)(n.td,{children:['The ID of the documentation you want the "Previous" pagination to link to. Use ',(0,r.jsx)(n.code,{children:"null"}),' to disable showing "Previous" for this page.']})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"parse_number_prefixes"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.code,{children:"numberPrefixParser"})," plugin option"]}),(0,r.jsxs)(n.td,{children:["Whether number prefix parsing is disabled on this doc. See also ",(0,r.jsx)(n.a,{href:"/docs/sidebar/autogenerated#using-number-prefixes",children:"Using number prefixes"}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"custom_edit_url"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)("code",{children:"string | null"})}),(0,r.jsxs)(n.td,{children:["Computed using the ",(0,r.jsx)(n.code,{children:"editUrl"})," plugin option"]}),(0,r.jsxs)(n.td,{children:["The URL for editing this document. Use ",(0,r.jsx)(n.code,{children:"null"}),' to disable showing "Edit this page" for this page.']})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"keywords"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string[]"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})}),(0,r.jsx)(n.td,{children:"Keywords meta tag for the document page, for search engines."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"description"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:"The first line of Markdown content"}),(0,r.jsxs)(n.td,{children:["The description of your document, which will become the ",(0,r.jsx)(n.code,{children:''})," and ",(0,r.jsx)(n.code,{children:''})," in ",(0,r.jsx)(n.code,{children:""}),", used by search engines."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"image"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})}),(0,r.jsxs)(n.td,{children:["Cover or thumbnail image that will be used as the ",(0,r.jsx)(n.code,{children:''})," in the ",(0,r.jsx)(n.code,{children:""}),", enhancing link previews on social media and messaging platforms."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"slug"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:"File path"}),(0,r.jsxs)(n.td,{children:["Allows to customize the document URL (",(0,r.jsx)(n.code,{children:"//"}),"). Support multiple patterns: ",(0,r.jsx)(n.code,{children:"slug: my-doc"}),", ",(0,r.jsx)(n.code,{children:"slug: /my/path/myDoc"}),", ",(0,r.jsx)(n.code,{children:"slug: /"}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"tags"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"Tag[]"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})}),(0,r.jsxs)(n.td,{children:["A list of strings or objects of two string fields ",(0,r.jsx)(n.code,{children:"label"})," and ",(0,r.jsx)(n.code,{children:"permalink"})," to tag to your docs. Strings can be a reference to keys of a ",(0,r.jsx)(n.a,{href:"#tags-file",children:"tags file"})," (usually ",(0,r.jsx)(n.code,{children:"tags.yml"}),")"]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"draft"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})}),(0,r.jsx)(n.td,{children:"Draft documents will only be available during development."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"unlisted"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})}),(0,r.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,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"last_update"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"FrontMatterLastUpdate"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})}),(0,r.jsxs)(n.td,{children:["Allows overriding the last update author/date. Date can be any ",(0,r.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse",children:"parsable date string"}),"."]})]})]})]})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"type FrontMatterLastUpdate = {date?: string; author?: string};\n\ntype Tag = string | {label: string; permalink: string};\n"})}),"\n",(0,r.jsx)(n.p,{children:"Example:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(a.ZP,{}),"\n",(0,r.jsx)(n.h2,{id:"i18n",children:"i18n"}),"\n",(0,r.jsxs)(n.p,{children:["Read the ",(0,r.jsx)(n.a,{href:"/docs/i18n/introduction",children:"i18n introduction"})," first."]}),"\n",(0,r.jsx)(n.h3,{id:"translation-files-location",children:"Translation files location"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Base path"}),": ",(0,r.jsx)(n.code,{children:"website/i18n/[locale]/docusaurus-plugin-content-docs"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Multi-instance path"}),": ",(0,r.jsx)(n.code,{children:"website/i18n/[locale]/docusaurus-plugin-content-docs-[pluginId]"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"JSON files"}),": extracted with ",(0,r.jsx)(n.a,{href:"/docs/cli#docusaurus-write-translations-sitedir",children:(0,r.jsx)(n.code,{children:"docusaurus write-translations"})})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Markdown files"}),": ",(0,r.jsx)(n.code,{children:"website/i18n/[locale]/docusaurus-plugin-content-docs/[versionName]"})]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"example-file-system-structure",children:"Example file-system structure"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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 g(e={}){let{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},58636:function(e,n,t){t.d(n,{Z:()=>i});var s=t(85893);t(67294);var r=t(90496);function i(e){let{children:n,hidden:t,className:i}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,r.Z)("tabItem_pnkT",i),hidden:t,children:n})}},15398:function(e,n,t){t.d(n,{Z:()=>m});var s=t(85893),r=t(67294),i=t(90496),d=t(54947),l=t(3620),o=t(844),c=t(97486),a=t(32263),h=t(16971);function u(e){return r.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||r.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.`)})?.filter(Boolean)??[]}function x(e){let{value:n,tabValues:t}=e;return t.some(e=>e.value===n)}var j=t(71607);function p(e){let{className:n,block:t,selectedValue:r,selectValue:l,tabValues:o}=e,c=[],{blockElementScrollPositionUntilNextRender:a}=(0,d.o5)(),h=e=>{let n=e.currentTarget,t=o[c.indexOf(n)].value;t!==r&&(a(n),l(t))},u=e=>{let n=null;switch(e.key){case"Enter":h(e);break;case"ArrowRight":{let t=c.indexOf(e.currentTarget)+1;n=c[t]??c[0];break}case"ArrowLeft":{let t=c.indexOf(e.currentTarget)-1;n=c[t]??c[c.length-1]}}n?.focus()};return(0,s.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":t},n),children:o.map(e=>{let{value:n,label:t,attributes:d}=e;return(0,s.jsx)("li",{role:"tab",tabIndex:r===n?0:-1,"aria-selected":r===n,ref:e=>{c.push(e)},onKeyDown:u,onClick:h,...d,className:(0,i.Z)("tabs__item","tabItem_AQgk",d?.className,{"tabs__item--active":r===n}),children:t??n},n)})})}function g(e){let{lazy:n,children:t,selectedValue:d}=e,l=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){let e=l.find(e=>e.props.value===d);return e?(0,r.cloneElement)(e,{className:(0,i.Z)("margin-top--md",e.props.className)}):null}return(0,s.jsx)("div",{className:"margin-top--md",children:l.map((e,n)=>(0,r.cloneElement)(e,{key:n,hidden:e.props.value!==d}))})}function f(e){let n=function(e){let{defaultValue:n,queryString:t=!1,groupId:s}=e,i=function(e){let{values:n,children:t}=e;return(0,r.useMemo)(()=>{let e=n??u(t).map(e=>{let{props:{value:n,label:t,attributes:s,default:r}}=e;return{value:n,label:t,attributes:s,default:r}});return!function(e){let n=(0,a.lx)(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),[d,j]=(0,r.useState)(()=>(function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw Error("Docusaurus error: the component requires at least one children component");if(n){if(!x({value:n,tabValues:t}))throw Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}let s=t.find(e=>e.default)??t[0];if(!s)throw Error("Unexpected error: 0 tabValues");return s.value})({defaultValue:n,tabValues:i})),[p,g]=function(e){let{queryString:n=!1,groupId:t}=e,s=(0,l.k6)(),i=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)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 t??null}({queryString:n,groupId:t});return[(0,c._X)(i),(0,r.useCallback)(e=>{if(!i)return;let n=new URLSearchParams(s.location.search);n.set(i,e),s.replace({...s.location,search:n.toString()})},[i,s])]}({queryString:t,groupId:s}),[f,m]=function(e){let{groupId:n}=e,t=n?`docusaurus.tab.${n}`:null,[s,i]=(0,h.Nk)(t);return[s,(0,r.useCallback)(e=>{t&&i.set(e)},[t,i])]}({groupId:s}),b=(()=>{let e=p??f;return x({value:e,tabValues:i})?e:null})();return(0,o.Z)(()=>{b&&j(b)},[b]),{selectedValue:d,selectValue:(0,r.useCallback)(e=>{if(!x({value:e,tabValues:i}))throw Error(`Can't select invalid tab value=${e}`);j(e),g(e),m(e)},[g,m,i]),tabValues:i}}(e);return(0,s.jsxs)("div",{className:(0,i.Z)("tabs-container","tabList_Qoir"),children:[(0,s.jsx)(p,{...n,...e}),(0,s.jsx)(g,{...n,...e})]})}function m(e){let n=(0,j.Z)();return(0,s.jsx)(f,{...e,children:u(e.children)},String(n))}},56497:function(e,n,t){t.d(n,{Z:()=>i});var s=t(85893);t(67294);var r=t(71607);function i(e){let{children:n,fallback:t}=e;return(0,r.Z)()?(0,s.jsx)(s.Fragment,{children:n?.()}):t??null}},32240:function(e,n,t){t.d(n,{Z:()=>o});var s=t(85893),r=t(67294),i=t(96700),d=t(3620);let l=r.forwardRef(function(e,n){let{name:t,children:l}=e,o=function(e){let n=e;for(;(0,r.isValidElement)(n);)[n]=r.Children.toArray(n.props.children);if("string"!=typeof n)throw Error(`Could not extract APITable row name from JSX tree:
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["25467"],{84645:function(e,n,t){t.d(n,{ZP:()=>l,d$:()=>i});var s=t(85893),r=t(80980);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 d(e){let n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h2,{id:"tags-file",children:"Tags File"}),"\n",(0,s.jsxs)(n.p,{children:["Use the ",(0,s.jsxs)(n.a,{href:"#tags",children:[(0,s.jsx)(n.code,{children:"tags"})," plugin option"]})," to configure the path of a YAML tags file."]}),"\n",(0,s.jsxs)(n.p,{children:["By convention, the plugin will look for a ",(0,s.jsx)(n.code,{children:"tags.yml"})," file at the root of your content folder(s)."]}),"\n",(0,s.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,s.jsxs)(n.a,{href:"#markdown-front-matter",children:[(0,s.jsx)(n.code,{children:"tags"})," front matter"]}),"."]}),"\n",(0,s.jsx)(n.admonition,{title:"Keeping tags consistent",type:"tip",children:(0,s.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,s.jsx)(n.a,{href:"#onInlineTags",children:(0,s.jsx)(n.code,{children:"onInlineTags: 'throw'"})})," plugin option to enforce this consistency and prevent usage of inline tags declared on the fly."]})}),"\n",(0,s.jsx)(n.h3,{id:"tags-file-types",children:"Types"}),"\n",(0,s.jsx)(n.p,{children:"The YAML content of the provided tags file should respect the following shape:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.h3,{id:"tags-file-example",children:"Example"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-md",metastring:'title="content.md"',children:"---\ntags: [releases, announcements, emptyTag]\n---\n\n# Title\n\nContent\n"})})]})}function l(e={}){let{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},17918:function(e,n,t){t.r(n),t.d(n,{default:()=>g,frontMatter:()=>h,metadata:()=>s,assets:()=>x,toc:()=>j,contentTitle:()=>u});var s=JSON.parse('{"id":"api/plugins/plugin-content-docs","title":"\uD83D\uDCE6 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":"S\xe9bastien Lorber","lastUpdatedAt":1739551601000,"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":"\uD83D\uDCE6 plugin-content-blog","permalink":"/docs/api/plugins/@docusaurus/plugin-content-blog"}}'),r=t(85893),i=t(80980),d=t(15398),l=t(58636),o=t(32240),c=t(66359),a=t(84645);let h={sidebar_position:1,slug:"/api/plugins/@docusaurus/plugin-content-docs"},u="\uD83D\uDCE6 plugin-content-docs",x={},j=[{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.d$,{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 p(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.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"-plugin-content-docs",children:"\uD83D\uDCE6 plugin-content-docs"})}),"\n","\n",(0,r.jsxs)(n.p,{children:["Provides the ",(0,r.jsx)(n.a,{href:"/docs/docs-introduction",children:"Docs"})," functionality and is the default docs plugin for Docusaurus."]}),"\n",(0,r.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,r.jsxs)(d.Z,{groupId:"npm2yarn",children:[(0,r.jsx)(l.Z,{value:"npm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"npm install --save @docusaurus/plugin-content-docs\n"})})}),(0,r.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"yarn add @docusaurus/plugin-content-docs\n"})})}),(0,r.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"pnpm add @docusaurus/plugin-content-docs\n"})})})]}),"\n",(0,r.jsxs)(n.admonition,{type:"tip",children:[(0,r.jsxs)(n.p,{children:["If you use the preset ",(0,r.jsx)(n.code,{children:"@docusaurus/preset-classic"}),", you don't need to install this plugin as a dependency."]}),(0,r.jsxs)(n.p,{children:["You can configure this plugin through the ",(0,r.jsx)(n.a,{href:"/docs/using-plugins#docusauruspreset-classic",children:"preset options"}),"."]})]}),"\n",(0,r.jsx)(n.h2,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Name"}),(0,r.jsx)(n.th,{children:"Type"}),(0,r.jsx)(n.th,{children:"Default"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"path"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'docs'"})}),(0,r.jsx)(n.td,{children:"Path to the docs content directory on the file system, relative to site directory."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"editUrl"})}),(0,r.jsx)(n.td,{children:(0,r.jsxs)("code",{children:["string | ",(0,r.jsx)(n.a,{href:"#EditUrlFunction",children:"EditUrlFunction"})]})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})}),(0,r.jsxs)(n.td,{children:["Base URL to edit your site. The final URL is computed by ",(0,r.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,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"editLocalizedFiles"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})}),(0,r.jsxs)(n.td,{children:["The edit URL will target the localized file, instead of the original unlocalized file. Ignored when ",(0,r.jsx)(n.code,{children:"editUrl"})," is a function."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"editCurrentVersion"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})}),(0,r.jsxs)(n.td,{children:["The edit URL will always target the current version doc instead of older versions. Ignored when ",(0,r.jsx)(n.code,{children:"editUrl"})," is a function."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"routeBasePath"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'docs'"})}),(0,r.jsxs)(n.td,{children:["URL route for the docs section of your site. ",(0,r.jsx)(n.strong,{children:"DO NOT"})," include a trailing slash. Use ",(0,r.jsx)(n.code,{children:"/"})," for shipping docs without base path."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"tagsBasePath"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'tags'"})}),(0,r.jsxs)(n.td,{children:["URL route for the tags list page of your site. It is prepended to the ",(0,r.jsx)(n.code,{children:"routeBasePath"}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"include"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string[]"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"['**/*.{md,mdx}']"})}),(0,r.jsx)(n.td,{children:"Array of glob patterns matching Markdown files to be built, relative to the content path."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"exclude"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string[]"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.em,{children:"See example configuration"})}),(0,r.jsxs)(n.td,{children:["Array of glob patterns matching Markdown files to be excluded. Serves as refinement based on the ",(0,r.jsx)(n.code,{children:"include"})," option."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"sidebarPath"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)("code",{children:"false | string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})}),(0,r.jsxs)(n.td,{children:["Path to a sidebars configuration file, loaded in a Node.js context. Use ",(0,r.jsx)(n.code,{children:"false"})," to disable sidebars, or ",(0,r.jsx)(n.code,{children:"undefined"})," to create a fully autogenerated sidebar."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"sidebarCollapsible"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"true"})}),(0,r.jsxs)(n.td,{children:["Whether sidebar categories are collapsible by default. See also ",(0,r.jsx)(n.a,{href:"/docs/sidebar/items#collapsible-categories",children:"Collapsible categories"})]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"sidebarCollapsed"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"true"})}),(0,r.jsxs)(n.td,{children:["Whether sidebar categories are collapsed by default. See also ",(0,r.jsx)(n.a,{href:"/docs/sidebar/items#expanded-categories-by-default",children:"Expanded categories by default"})]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"sidebarItemsGenerator"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)("code",{children:(0,r.jsx)(n.a,{href:"#SidebarGenerator",children:"SidebarGenerator"})})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.em,{children:"Omitted"})}),(0,r.jsxs)(n.td,{children:["Function used to replace the sidebar items of type ",(0,r.jsx)(n.code,{children:"'autogenerated'"})," with real sidebar items (docs, categories, links...). See also ",(0,r.jsx)(n.a,{href:"/docs/sidebar/autogenerated#customize-the-sidebar-items-generator",children:"Customize the sidebar items generator"})]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"numberPrefixParser"})}),(0,r.jsx)(n.td,{children:(0,r.jsxs)("code",{children:["boolean | ",(0,r.jsx)(n.a,{href:"#PrefixParser",children:"PrefixParser"})]})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.em,{children:"Omitted"})}),(0,r.jsxs)(n.td,{children:["Custom parsing logic to extract number prefixes from file names. Use ",(0,r.jsx)(n.code,{children:"false"})," to disable this behavior and leave the docs untouched, and ",(0,r.jsx)(n.code,{children:"true"})," to use the default parser. See also ",(0,r.jsx)(n.a,{href:"/docs/sidebar/autogenerated#using-number-prefixes",children:"Using number prefixes"})]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"docsRootComponent"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'@theme/DocsRoot'"})}),(0,r.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,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"docVersionRootComponent"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'@theme/DocVersionLayout'"})}),(0,r.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,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"docRootComponent"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'@theme/DocRoot'"})}),(0,r.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,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"docItemComponent"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'@theme/DocItem'"})}),(0,r.jsx)(n.td,{children:"Main doc container, with TOC, pagination, etc."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"docTagsListComponent"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'@theme/DocTagsListPage'"})}),(0,r.jsx)(n.td,{children:"Root component of the tags list page"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"docTagDocListComponent"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'@theme/DocTagDocListPage'"})}),(0,r.jsx)(n.td,{children:'Root component of the "docs containing tag X" page.'})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"docCategoryGeneratedIndexComponent"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'@theme/DocCategoryGeneratedIndexPage'"})}),(0,r.jsx)(n.td,{children:"Root component of the generated category index page."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"remarkPlugins"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"any[]"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"[]"})}),(0,r.jsx)(n.td,{children:"Remark plugins passed to MDX."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"rehypePlugins"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"any[]"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"[]"})}),(0,r.jsx)(n.td,{children:"Rehype plugins passed to MDX."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"rehypePlugins"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"any[]"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"[]"})}),(0,r.jsx)(n.td,{children:"Recma plugins passed to MDX."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"beforeDefaultRemarkPlugins"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"any[]"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"[]"})}),(0,r.jsx)(n.td,{children:"Custom Remark plugins passed to MDX before the default Docusaurus Remark plugins."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"beforeDefaultRehypePlugins"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"any[]"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"[]"})}),(0,r.jsx)(n.td,{children:"Custom Rehype plugins passed to MDX before the default Docusaurus Rehype plugins."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"showLastUpdateAuthor"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})}),(0,r.jsx)(n.td,{children:"Whether to display the author who last updated the doc."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"showLastUpdateTime"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})}),(0,r.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,r.jsx)(n.code,{children:"actions/checkout"}),", use",(0,r.jsx)(n.code,{children:"fetch-depth: 0"}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"breadcrumbs"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"true"})}),(0,r.jsx)(n.td,{children:"Enable or disable the breadcrumbs on doc pages."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"disableVersioning"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})}),(0,r.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,r.jsx)(n.code,{children:"includeCurrentVersion: false"})," and ",(0,r.jsx)(n.code,{children:"disableVersioning: true"}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"includeCurrentVersion"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"true"})}),(0,r.jsx)(n.td,{children:"Include the current version of your docs."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"lastVersion"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsxs)(n.td,{children:["First version in ",(0,r.jsx)(n.code,{children:"versions.json"})]}),(0,r.jsx)(n.td,{children:"The version navigated to in priority and displayed by default for docs navbar items."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"onlyIncludeVersions"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string[]"})}),(0,r.jsx)(n.td,{children:"All versions available"}),(0,r.jsx)(n.td,{children:"Only include a subset of all available versions."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"versions"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)("code",{children:(0,r.jsx)(n.a,{href:"#VersionsConfig",children:"VersionsConfig"})})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"{}"})}),(0,r.jsx)(n.td,{children:"Independent customization of each version's properties."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"tags"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string | false | null | undefined"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"tags.yml"})}),(0,r.jsx)(n.td,{children:"Path to a YAML file listing pre-defined tags. Relative to the docs version content directories."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"onInlineTags"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'ignore' | 'log' | 'warn' | 'throw'"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"warn"})}),(0,r.jsxs)(n.td,{children:["The plugin behavior when docs contain inline tags (not appearing in the list of pre-defined tags, usually ",(0,r.jsx)(n.code,{children:"docs/tags.yml"}),")."]})]})]})]})}),"\n",(0,r.jsx)(n.h3,{id:"types",children:"Types"}),"\n",(0,r.jsx)(n.h4,{id:"EditUrlFunction",children:(0,r.jsx)(n.code,{children:"EditUrlFunction"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(n.h4,{id:"PrefixParser",children:(0,r.jsx)(n.code,{children:"PrefixParser"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"type PrefixParser = (filename: string) => {\n filename: string;\n numberPrefix?: number;\n};\n"})}),"\n",(0,r.jsx)(n.h4,{id:"SidebarGenerator",children:(0,r.jsx)(n.code,{children:"SidebarGenerator"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(n.h4,{id:"VersionsConfig",children:(0,r.jsx)(n.code,{children:"VersionsConfig"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(n.h3,{id:"ex-config",children:"Example configuration"}),"\n",(0,r.jsx)(n.p,{children:"You can configure this plugin through preset options or plugin options."}),"\n",(0,r.jsx)(n.admonition,{type:"tip",children:(0,r.jsx)(n.p,{children:"Most Docusaurus users configure this plugin through the preset options."})}),"\n","\n",(0,r.jsx)(c.Z,{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,r.jsx)(n.h2,{id:"markdown-front-matter",children:"Markdown front matter"}),"\n",(0,r.jsxs)(n.p,{children:["Markdown documents can use the following Markdown ",(0,r.jsx)(n.a,{href:"/docs/markdown-features#front-matter",children:"front matter"})," metadata fields, enclosed by a line ",(0,r.jsx)(n.code,{children:"---"})," on either side."]}),"\n",(0,r.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Name"}),(0,r.jsx)(n.th,{children:"Type"}),(0,r.jsx)(n.th,{children:"Default"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"id"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:"file path (including folders, without the extension)"}),(0,r.jsx)(n.td,{children:"A unique document ID."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"title"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsxs)(n.td,{children:["Markdown title or ",(0,r.jsx)(n.code,{children:"id"})]}),(0,r.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,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"pagination_label"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.code,{children:"sidebar_label"})," or ",(0,r.jsx)(n.code,{children:"title"})]}),(0,r.jsx)(n.td,{children:"The text used in the document next/previous buttons for this document."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"sidebar_label"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"title"})}),(0,r.jsx)(n.td,{children:"The text shown in the document sidebar for this document."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"sidebar_position"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"number"})}),(0,r.jsx)(n.td,{children:"Default ordering"}),(0,r.jsxs)(n.td,{children:["Controls the position of a doc inside the generated sidebar slice when using ",(0,r.jsx)(n.code,{children:"autogenerated"})," sidebar items. See also ",(0,r.jsx)(n.a,{href:"/docs/sidebar/autogenerated#autogenerated-sidebar-metadata",children:"Autogenerated sidebar metadata"}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"sidebar_class_name"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})}),(0,r.jsx)(n.td,{children:"Gives the corresponding sidebar label a special class name when using autogenerated sidebars."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"sidebar_custom_props"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"object"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})}),(0,r.jsxs)(n.td,{children:["Assign ",(0,r.jsx)(n.a,{href:"/docs/sidebar#passing-custom-props",children:"custom props"})," to the sidebar item referencing this doc"]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"displayed_sidebar"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})}),(0,r.jsxs)(n.td,{children:["Force the display of a given sidebar when browsing the current document. Read the ",(0,r.jsx)(n.a,{href:"/docs/sidebar/multiple-sidebars",children:"multiple sidebars guide"})," for details."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"hide_title"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})}),(0,r.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,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"hide_table_of_contents"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})}),(0,r.jsx)(n.td,{children:"Whether to hide the table of contents to the right."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"toc_min_heading_level"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"number"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"2"})}),(0,r.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,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"toc_max_heading_level"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"number"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"3"})}),(0,r.jsx)(n.td,{children:"The max heading level shown in the table of contents. Must be between 2 and 6."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"pagination_next"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)("code",{children:"string | null"})}),(0,r.jsx)(n.td,{children:"Next doc in the sidebar"}),(0,r.jsxs)(n.td,{children:['The ID of the documentation you want the "Next" pagination to link to. Use ',(0,r.jsx)(n.code,{children:"null"}),' to disable showing "Next" for this page.']})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"pagination_prev"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)("code",{children:"string | null"})}),(0,r.jsx)(n.td,{children:"Previous doc in the sidebar"}),(0,r.jsxs)(n.td,{children:['The ID of the documentation you want the "Previous" pagination to link to. Use ',(0,r.jsx)(n.code,{children:"null"}),' to disable showing "Previous" for this page.']})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"parse_number_prefixes"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.code,{children:"numberPrefixParser"})," plugin option"]}),(0,r.jsxs)(n.td,{children:["Whether number prefix parsing is disabled on this doc. See also ",(0,r.jsx)(n.a,{href:"/docs/sidebar/autogenerated#using-number-prefixes",children:"Using number prefixes"}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"custom_edit_url"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)("code",{children:"string | null"})}),(0,r.jsxs)(n.td,{children:["Computed using the ",(0,r.jsx)(n.code,{children:"editUrl"})," plugin option"]}),(0,r.jsxs)(n.td,{children:["The URL for editing this document. Use ",(0,r.jsx)(n.code,{children:"null"}),' to disable showing "Edit this page" for this page.']})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"keywords"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string[]"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})}),(0,r.jsx)(n.td,{children:"Keywords meta tag for the document page, for search engines."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"description"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:"The first line of Markdown content"}),(0,r.jsxs)(n.td,{children:["The description of your document, which will become the ",(0,r.jsx)(n.code,{children:''})," and ",(0,r.jsx)(n.code,{children:''})," in ",(0,r.jsx)(n.code,{children:""}),", used by search engines."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"image"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})}),(0,r.jsxs)(n.td,{children:["Cover or thumbnail image that will be used as the ",(0,r.jsx)(n.code,{children:''})," in the ",(0,r.jsx)(n.code,{children:""}),", enhancing link previews on social media and messaging platforms."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"slug"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:"File path"}),(0,r.jsxs)(n.td,{children:["Allows to customize the document URL (",(0,r.jsx)(n.code,{children:"//"}),"). Support multiple patterns: ",(0,r.jsx)(n.code,{children:"slug: my-doc"}),", ",(0,r.jsx)(n.code,{children:"slug: /my/path/myDoc"}),", ",(0,r.jsx)(n.code,{children:"slug: /"}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"tags"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"Tag[]"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})}),(0,r.jsxs)(n.td,{children:["A list of strings or objects of two string fields ",(0,r.jsx)(n.code,{children:"label"})," and ",(0,r.jsx)(n.code,{children:"permalink"})," to tag to your docs. Strings can be a reference to keys of a ",(0,r.jsx)(n.a,{href:"#tags-file",children:"tags file"})," (usually ",(0,r.jsx)(n.code,{children:"tags.yml"}),")"]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"draft"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})}),(0,r.jsx)(n.td,{children:"Draft documents will only be available during development."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"unlisted"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})}),(0,r.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,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"last_update"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"FrontMatterLastUpdate"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})}),(0,r.jsxs)(n.td,{children:["Allows overriding the last update author/date. Date can be any ",(0,r.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse",children:"parsable date string"}),"."]})]})]})]})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"type FrontMatterLastUpdate = {date?: string; author?: string};\n\ntype Tag = string | {label: string; permalink: string};\n"})}),"\n",(0,r.jsx)(n.p,{children:"Example:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(a.ZP,{}),"\n",(0,r.jsx)(n.h2,{id:"i18n",children:"i18n"}),"\n",(0,r.jsxs)(n.p,{children:["Read the ",(0,r.jsx)(n.a,{href:"/docs/i18n/introduction",children:"i18n introduction"})," first."]}),"\n",(0,r.jsx)(n.h3,{id:"translation-files-location",children:"Translation files location"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Base path"}),": ",(0,r.jsx)(n.code,{children:"website/i18n/[locale]/docusaurus-plugin-content-docs"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Multi-instance path"}),": ",(0,r.jsx)(n.code,{children:"website/i18n/[locale]/docusaurus-plugin-content-docs-[pluginId]"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"JSON files"}),": extracted with ",(0,r.jsx)(n.a,{href:"/docs/cli#docusaurus-write-translations-sitedir",children:(0,r.jsx)(n.code,{children:"docusaurus write-translations"})})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Markdown files"}),": ",(0,r.jsx)(n.code,{children:"website/i18n/[locale]/docusaurus-plugin-content-docs/[versionName]"})]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"example-file-system-structure",children:"Example file-system structure"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.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 g(e={}){let{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},58636:function(e,n,t){t.d(n,{Z:()=>i});var s=t(85893);t(67294);var r=t(90496);function i(e){let{children:n,hidden:t,className:i}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,r.Z)("tabItem_pnkT",i),hidden:t,children:n})}},15398:function(e,n,t){t.d(n,{Z:()=>m});var s=t(85893),r=t(67294),i=t(90496),d=t(54947),l=t(3620),o=t(844),c=t(97486),a=t(32263),h=t(16971);function u(e){return r.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||r.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.`)})?.filter(Boolean)??[]}function x(e){let{value:n,tabValues:t}=e;return t.some(e=>e.value===n)}var j=t(71607);function p(e){let{className:n,block:t,selectedValue:r,selectValue:l,tabValues:o}=e,c=[],{blockElementScrollPositionUntilNextRender:a}=(0,d.o5)(),h=e=>{let n=e.currentTarget,t=o[c.indexOf(n)].value;t!==r&&(a(n),l(t))},u=e=>{let n=null;switch(e.key){case"Enter":h(e);break;case"ArrowRight":{let t=c.indexOf(e.currentTarget)+1;n=c[t]??c[0];break}case"ArrowLeft":{let t=c.indexOf(e.currentTarget)-1;n=c[t]??c[c.length-1]}}n?.focus()};return(0,s.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":t},n),children:o.map(e=>{let{value:n,label:t,attributes:d}=e;return(0,s.jsx)("li",{role:"tab",tabIndex:r===n?0:-1,"aria-selected":r===n,ref:e=>{c.push(e)},onKeyDown:u,onClick:h,...d,className:(0,i.Z)("tabs__item","tabItem_AQgk",d?.className,{"tabs__item--active":r===n}),children:t??n},n)})})}function g(e){let{lazy:n,children:t,selectedValue:d}=e,l=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){let e=l.find(e=>e.props.value===d);return e?(0,r.cloneElement)(e,{className:(0,i.Z)("margin-top--md",e.props.className)}):null}return(0,s.jsx)("div",{className:"margin-top--md",children:l.map((e,n)=>(0,r.cloneElement)(e,{key:n,hidden:e.props.value!==d}))})}function f(e){let n=function(e){let{defaultValue:n,queryString:t=!1,groupId:s}=e,i=function(e){let{values:n,children:t}=e;return(0,r.useMemo)(()=>{let e=n??u(t).map(e=>{let{props:{value:n,label:t,attributes:s,default:r}}=e;return{value:n,label:t,attributes:s,default:r}});return!function(e){let n=(0,a.lx)(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),[d,j]=(0,r.useState)(()=>(function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw Error("Docusaurus error: the component requires at least one children component");if(n){if(!x({value:n,tabValues:t}))throw Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}let s=t.find(e=>e.default)??t[0];if(!s)throw Error("Unexpected error: 0 tabValues");return s.value})({defaultValue:n,tabValues:i})),[p,g]=function(e){let{queryString:n=!1,groupId:t}=e,s=(0,l.k6)(),i=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)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 t??null}({queryString:n,groupId:t});return[(0,c._X)(i),(0,r.useCallback)(e=>{if(!i)return;let n=new URLSearchParams(s.location.search);n.set(i,e),s.replace({...s.location,search:n.toString()})},[i,s])]}({queryString:t,groupId:s}),[f,m]=function(e){let{groupId:n}=e,t=n?`docusaurus.tab.${n}`:null,[s,i]=(0,h.Nk)(t);return[s,(0,r.useCallback)(e=>{t&&i.set(e)},[t,i])]}({groupId:s}),b=(()=>{let e=p??f;return x({value:e,tabValues:i})?e:null})();return(0,o.Z)(()=>{b&&j(b)},[b]),{selectedValue:d,selectValue:(0,r.useCallback)(e=>{if(!x({value:e,tabValues:i}))throw Error(`Can't select invalid tab value=${e}`);j(e),g(e),m(e)},[g,m,i]),tabValues:i}}(e);return(0,s.jsxs)("div",{className:(0,i.Z)("tabs-container","tabList_Qoir"),children:[(0,s.jsx)(p,{...n,...e}),(0,s.jsx)(g,{...n,...e})]})}function m(e){let n=(0,j.Z)();return(0,s.jsx)(f,{...e,children:u(e.children)},String(n))}},56497:function(e,n,t){t.d(n,{Z:()=>i});var s=t(85893);t(67294);var r=t(71607);function i(e){let{children:n,fallback:t}=e;return(0,r.Z)()?(0,s.jsx)(s.Fragment,{children:n?.()}):t??null}},32240:function(e,n,t){t.d(n,{Z:()=>o});var s=t(85893),r=t(67294),i=t(96700),d=t(3620);let l=r.forwardRef(function(e,n){let{name:t,children:l}=e,o=function(e){let n=e;for(;(0,r.isValidElement)(n);)[n]=r.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}(l),c=t?`${t}-${o}`:o,a=`#${c}`,h=(0,d.k6)();return(0,i.Z)().collectAnchor(c),(0,s.jsx)("tr",{id:c,tabIndex:0,ref:h.location.hash===a?n:void 0,onClick:e=>{let n="TD"===e.target.tagName.toUpperCase(),t=!!window.getSelection()?.toString();n&&!t&&h.push(a)},onKeyDown:e=>{"Enter"===e.key&&h.push(a)},children:l.props.children})});function o(e){let{children:n,name:t}=e;if("table"!==n.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[i,d]=r.Children.toArray(n.props.children),o=(0,r.useRef)(null);(0,r.useEffect)(()=>{o.current?.focus()},[o]);let c=r.Children.map(d.props.children,e=>(0,s.jsx)(l,{name:t,ref:o,children:e}));return(0,s.jsxs)("table",{className:"apiTable_e8hp",children:[i,(0,s.jsx)("tbody",{children:c})]})}},66359:function(e,n,t){t.d(n,{Z:()=>h});var s=t(85893);t(67294);var r=t(35363),i=t(90158),d=t(77827),l=t(15398),o=t(58636),c=t(95998);let a=void 0;function h(e){let{code:n,pluginName:t,presetOptionName:h}=e,u=(0,i.zu)(a).path;return(0,s.jsxs)(l.Z,{groupId:"api-config-ex",children:[(0,s.jsxs)(o.Z,{value:"preset",label:(0,d.I)({message:"Preset options"}),children:[(0,s.jsx)("p",{children:(0,s.jsx)(d.Z,{id:"apiDocs.configTabs.presetOptions.description",values:{presetLink:(0,s.jsx)(r.Z,{to:`${u}/using-plugins#docusauruspreset-classic`,children:(0,s.jsx)(d.Z,{children:"preset options"})})},children:"If you use a preset, configure this plugin through the {presetLink}:"})}),(0,s.jsx)(c.Z,{language:"js",title:"docusaurus.config.js",children:`module.exports = {
presets: [
[
diff --git a/assets/js/0b7c2a4a.f31b5809.js b/assets/js/0b7c2a4a.6a0ff8a6.js
similarity index 99%
rename from assets/js/0b7c2a4a.f31b5809.js
rename to assets/js/0b7c2a4a.6a0ff8a6.js
index 16cd189407..7d3b4bb14a 100644
--- a/assets/js/0b7c2a4a.f31b5809.js
+++ b/assets/js/0b7c2a4a.6a0ff8a6.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["27591"],{72581:function(e,n,r){r.d(n,{Z:()=>s});let s=r.p+"assets/images/social-card-3239a62bb56c9529ff255bc2c72e94f6.png"},20788:function(e,n,r){r.d(n,{Z:()=>s});let s=r.p+"assets/images/navbar-error-15eefab8e8d77aa4d605939956987164.jpg"},92539:function(e,n,r){r.d(n,{Z:()=>s});let s=r.p+"assets/images/sidebar-item-description-f38981b17f486bc09fb811c6992ef668.jpg"},17414:function(e,n,r){r.d(n,{Z:()=>s});let s=r.p+"assets/images/social-card-3239a62bb56c9529ff255bc2c72e94f6.png"},77543:function(e,n,r){r.r(n),r.d(n,{assets:()=>p,contentTitle:()=>h,default:()=>b,frontMatter:()=>d,metadata:()=>s,toc:()=>g});var s=r(68707),t=r(85893),a=r(80980),i=r(15398),l=r(58636),o=r(14522),c=r(51118),u=r(39468);let d={title:"Docusaurus 2.4",authors:["slorber"],tags:["release"],image:"./img/social-card.png",date:new Date("2023-03-23T00:00:00.000Z")},h=void 0,p={image:r(72581).Z,authorsImageUrls:[void 0]},g=[{value:"Highlights",id:"highlights",level:2},{value:"Sidebar item description",id:"sidebar-item-description",level:3},{value:"Theme Query String",id:"theme-query-string",level:3},{value:"Remark plugin npm2yarn upgrade",id:"remark-plugin-npm2yarn-upgrade",level:3},{value:"gtag support for multiple tracking IDs",id:"gtag-support-for-multiple-tracking-ids",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 m(e){let n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["We are happy to announce ",(0,t.jsx)(n.strong,{children:"Docusaurus 2.4"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["The upgrade should be easy: as explained in our ",(0,t.jsx)(n.a,{href:"/community/release-process",children:"release process documentation"}),", minor versions respect ",(0,t.jsx)(n.a,{href:"https://semver.org/",children:"Semantic Versioning"}),"."]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"Docusaurus blog post social card",src:r(17414).Z+"",width:"1200",height:"600"})}),"\n","\n",(0,t.jsx)(n.h2,{id:"highlights",children:"Highlights"}),"\n",(0,t.jsx)(n.h3,{id:"sidebar-item-description",children:"Sidebar item description"}),"\n",(0,t.jsxs)(n.p,{children:["In ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8236",children:"#8236"}),", we made it possible to provide a new ",(0,t.jsx)(n.code,{children:"description"})," attribute for docs sidebar items of type ",(0,t.jsx)(n.code,{children:"link"})," and ",(0,t.jsx)(n.code,{children:"category"}),"."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",metastring:'title="sidebars.js"',children:"[\n {\n type: 'link',\n label: 'Link with description',\n href: 'https://docusaurus.io',\n // highlight-next-line\n description: 'Some link description',\n },\n {\n type: 'category',\n label: 'Category with description',\n // highlight-next-line\n description: 'Some category description',\n items: [],\n },\n];\n"})}),"\n",(0,t.jsx)(n.p,{children:"These descriptions will be used in category generated index pages."}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"Show sidebar category generated index with custom descriptions",src:r(92539).Z+"",width:"1400",height:"691"})}),"\n",(0,t.jsx)(n.h3,{id:"theme-query-string",children:"Theme Query String"}),"\n",(0,t.jsxs)(n.p,{children:["In ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8708",children:"#8708"}),", we added the possibility to force Docusaurus to initialize itself in ",(0,t.jsx)(n.code,{children:"light"})," or ",(0,t.jsx)(n.code,{children:"dark"})," mode through a new ",(0,t.jsx)(n.code,{children:"docusaurus-theme"})," query-string parameter."]}),"\n",(0,t.jsx)(n.p,{children:"This is useful to ensure a consistent theme when embedding an existing Docusaurus page into an iframe or WebView."}),"\n",(0,t.jsx)(c.Z,{url:"/docs/?docusaurus-theme=light"}),"\n",(0,t.jsx)(c.Z,{url:"/docs/?docusaurus-theme=dark"}),"\n",(0,t.jsx)(n.h3,{id:"remark-plugin-npm2yarn-upgrade",children:"Remark plugin npm2yarn upgrade"}),"\n",(0,t.jsxs)(n.p,{children:["In ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8690",children:"#8690"}),", we upgraded our Remark plugin ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-remark-plugin-npm2yarn",children:"@docusaurus/remark-plugin-npm2yarn"})," with many conversion bug fixes, first-class support for pnpm, and the ability to register custom converters producing new tabs."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-markdown",children:"Run these commands!\n\n```bash npm2yarn\nnpm install\nnpm run build\nnpm run myCustomScript -- --some-arg\n```\n"})}),"\n",(0,t.jsx)(o.Z,{children:(0,t.jsxs)(i.Z,{children:[(0,t.jsx)(l.Z,{value:"npm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npm install\nnpm run build\nnpm run myCustomScript -- --some-arg\n"})})}),(0,t.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"yarn install\nyarn build\nyarn myCustomScript --some-arg\n"})})}),(0,t.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"pnpm install\npnpm run build\npnpm run myCustomScript --some-arg\n"})})})]})}),"\n",(0,t.jsx)(n.h3,{id:"gtag-support-for-multiple-tracking-ids",children:"gtag support for multiple tracking IDs"}),"\n",(0,t.jsxs)(n.p,{children:["In ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8620",children:"#8620"})," we added support for the ",(0,t.jsx)(n.a,{href:"/docs/api/plugins/@docusaurus/plugin-google-gtag",children:"@docusaurus/plugin-google-gtag"})," plugin to declare multiple tracking IDs."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"module.exports = {\n presets: [\n [\n '@docusaurus/preset-classic',\n {\n gtag: {\n trackingID: [\n // highlight-next-line\n 'G-',\n // highlight-next-line\n 'UA-',\n ],\n },\n },\n ],\n ],\n};\n"})}),"\n",(0,t.jsxs)(n.admonition,{title:"Google is sunsetting Universal Analytics",type:"warning",children:[(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:(0,t.jsx)(n.a,{href:"https://blog.google/products/marketingplatform/analytics/prepare-for-future-with-google-analytics-4/",children:"Google will sunset its Universal Analytics"})})," on ",(0,t.jsx)(n.strong,{children:"July 1, 2023"}),"."]}),(0,t.jsxs)(n.p,{children:["Docusaurus users should migrate to Google Analytics 4. Google ",(0,t.jsx)(n.strong,{children:"does not permit to migrate your existing Universal Analytics data"})," to your new Google Analytics 4 property."]}),(0,t.jsxs)(n.p,{children:["To preserve the continuity of your analytics, we temporarily recommend that you report events to 2 tracking IDs at the same time: the old one (",(0,t.jsx)(n.code,{children:"UA-*"}),") and new one (",(0,t.jsx)(n.code,{children:"G-*"}),"). Refer to the ",(0,t.jsx)(n.strong,{children:(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/issues/7221",children:"dedicated issue"})})," for details."]})]}),"\n",(0,t.jsx)(n.h3,{id:"developer-experience",children:"Developer Experience"}),"\n",(0,t.jsxs)(n.p,{children:["In ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8736",children:"#8736"}),", we improved how we render error messages and added initial support to render the full causal chain of an error (see ",(0,t.jsx)(n.a,{href:"https://h3manth.com/ES2022/#error-cause",children:"ES2022 Error Cause"}),")."]}),"\n",(0,t.jsx)(n.admonition,{type:"tip",children:(0,t.jsxs)(n.p,{children:["To see it in action, click here: ",(0,t.jsx)(u.Z,{cause:"Probably undefined is not a function \uD83D\uDE04"})]})}),"\n",(0,t.jsxs)(n.p,{children:["In ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8735",children:"#8735"})," we also made navbar-related error messages clearer to help users understand what they did wrong."]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"Docusaurus navbar error message screenshot",src:r(20788).Z+"",width:"1676",height:"1614"})}),"\n",(0,t.jsx)(n.h3,{id:"translations",children:"Translations"}),"\n",(0,t.jsx)(n.p,{children:"We made it possible to translate some new elements:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8677",children:"#8677"})," introduces a new ",(0,t.jsx)(n.code,{children:"process.env.DOCUSAURUS_CURRENT_LOCALE"})," (experimental) allowing you to localize your config file, including site title, tagline, announcement bar, baseUrl..."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8616",children:"#8616"})," allows to translate the navbar and footer logo alt text"]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"We added default theme translation support for multiple languages:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\uD83C\uDDED\uD83C\uDDFA ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8668",children:"#8668"}),": Hungarian"]}),"\n",(0,t.jsxs)(n.li,{children:["\uD83C\uDDF3\uD83C\uDDF4 ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8631",children:"#8631"}),": Norwegian (Bokm\xe5l)"]}),"\n"]}),"\n",(0,t.jsx)(n.admonition,{type:"tip",children:(0,t.jsxs)(n.p,{children:["Completing theme translations is an ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/issues/3526",children:"ongoing effort"})," and an easy way to contribute to Docusaurus. We add new theme features regularly, for which we often ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/issues/3526",children:"need new translations"}),"."]})}),"\n",(0,t.jsx)(n.h2,{id:"other-changes",children:"Other changes"}),"\n",(0,t.jsx)(n.p,{children:"Other notable changes include:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8674",children:"#8674"}),": respect ",(0,t.jsx)(n.code,{children:"prefers-reduced-motion: reduce"})," media query"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8712",children:"#8712"}),": use a navbar item of type ",(0,t.jsx)(n.code,{children:"docSidebar"})," in template"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8801",children:"#8801"}),": allow tabs children to be falsy"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8757",children:"#8757"}),": make search page react to external query-string changes"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8803",children:"#8803"}),": fix code block buttons position in RTL"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8615",children:"#8615"}),": fix color mode toggle when using dark navbar"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8699",children:"#8699"}),": fix navbar dropdown tab focus bug"]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["Check the ",(0,t.jsx)(n.strong,{children:(0,t.jsx)(n.a,{href:"/changelog/2.4.0",children:"2.4.0 changelog entry"})})," for an exhaustive list of changes."]})]})}function b(e={}){let{wrapper:n}={...(0,a.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(m,{...e})}):m(e)}},58636:function(e,n,r){r.d(n,{Z:()=>a});var s=r(85893);r(67294);var t=r(90496);function a(e){let{children:n,hidden:r,className:a}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,t.Z)("tabItem_pnkT",a),hidden:r,children:n})}},15398:function(e,n,r){r.d(n,{Z:()=>x});var s=r(85893),t=r(67294),a=r(90496),i=r(54947),l=r(3620),o=r(844),c=r(97486),u=r(32263),d=r(16971);function h(e){return t.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||t.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.`)})?.filter(Boolean)??[]}function p(e){let{value:n,tabValues:r}=e;return r.some(e=>e.value===n)}var g=r(71607);function m(e){let{className:n,block:r,selectedValue:t,selectValue:l,tabValues:o}=e,c=[],{blockElementScrollPositionUntilNextRender:u}=(0,i.o5)(),d=e=>{let n=e.currentTarget,r=o[c.indexOf(n)].value;r!==t&&(u(n),l(r))},h=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{let r=c.indexOf(e.currentTarget)+1;n=c[r]??c[0];break}case"ArrowLeft":{let r=c.indexOf(e.currentTarget)-1;n=c[r]??c[c.length-1]}}n?.focus()};return(0,s.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.Z)("tabs",{"tabs--block":r},n),children:o.map(e=>{let{value:n,label:r,attributes:i}=e;return(0,s.jsx)("li",{role:"tab",tabIndex:t===n?0:-1,"aria-selected":t===n,ref:e=>{c.push(e)},onKeyDown:h,onClick:d,...i,className:(0,a.Z)("tabs__item","tabItem_AQgk",i?.className,{"tabs__item--active":t===n}),children:r??n},n)})})}function b(e){let{lazy:n,children:r,selectedValue:i}=e,l=(Array.isArray(r)?r:[r]).filter(Boolean);if(n){let e=l.find(e=>e.props.value===i);return e?(0,t.cloneElement)(e,{className:(0,a.Z)("margin-top--md",e.props.className)}):null}return(0,s.jsx)("div",{className:"margin-top--md",children:l.map((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==i}))})}function f(e){let n=function(e){let{defaultValue:n,queryString:r=!1,groupId:s}=e,a=function(e){let{values:n,children:r}=e;return(0,t.useMemo)(()=>{let e=n??h(r).map(e=>{let{props:{value:n,label:r,attributes:s,default:t}}=e;return{value:n,label:r,attributes:s,default:t}});return!function(e){let n=(0,u.lx)(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,r])}(e),[i,g]=(0,t.useState)(()=>(function(e){let{defaultValue:n,tabValues:r}=e;if(0===r.length)throw Error("Docusaurus error: the component requires at least one children component");if(n){if(!p({value:n,tabValues:r}))throw Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${r.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}let s=r.find(e=>e.default)??r[0];if(!s)throw Error("Unexpected error: 0 tabValues");return s.value})({defaultValue:n,tabValues:a})),[m,b]=function(e){let{queryString:n=!1,groupId:r}=e,s=(0,l.k6)(),a=function(e){let{queryString:n=!1,groupId:r}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!r)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 r??null}({queryString:n,groupId:r});return[(0,c._X)(a),(0,t.useCallback)(e=>{if(!a)return;let n=new URLSearchParams(s.location.search);n.set(a,e),s.replace({...s.location,search:n.toString()})},[a,s])]}({queryString:r,groupId:s}),[f,x]=function(e){let{groupId:n}=e,r=n?`docusaurus.tab.${n}`:null,[s,a]=(0,d.Nk)(r);return[s,(0,t.useCallback)(e=>{r&&a.set(e)},[r,a])]}({groupId:s}),j=(()=>{let e=m??f;return p({value:e,tabValues:a})?e:null})();return(0,o.Z)(()=>{j&&g(j)},[j]),{selectedValue:i,selectValue:(0,t.useCallback)(e=>{if(!p({value:e,tabValues:a}))throw Error(`Can't select invalid tab value=${e}`);g(e),b(e),x(e)},[b,x,a]),tabValues:a}}(e);return(0,s.jsxs)("div",{className:(0,a.Z)("tabs-container","tabList_Qoir"),children:[(0,s.jsx)(m,{...n,...e}),(0,s.jsx)(b,{...n,...e})]})}function x(e){let n=(0,g.Z)();return(0,s.jsx)(f,{...e,children:h(e.children)},String(n))}},51118:function(e,n,r){r.d(n,{Z:()=>a});var s=r(85893);r(67294);var t=r(14522);function a(e){let{url:n}=e;return(0,s.jsx)("div",{style:{padding:10},children:(0,s.jsx)(t.Z,{url:n,style:{minWidth:"min(100%,45vw)",width:800,maxWidth:"100%",overflow:"hidden"},bodyStyle:{padding:0},children:(0,s.jsx)("iframe",{src:n,title:n,style:{display:"block",width:"100%",height:300}})})})}},14522:function(e,n,r){r.d(n,{Z:()=>l});var s=r(85893);r(67294);var t=r(90496);let a="dot_giz1",i="bar_rrRL";function l(e){let{children:n,minHeight:r,url:l="http://localhost:3000",style:o,bodyStyle:c}=e;return(0,s.jsxs)("div",{className:"browserWindow_my1Q",style:{...o,minHeight:r},children:[(0,s.jsxs)("div",{className:"browserWindowHeader_jXSR",children:[(0,s.jsxs)("div",{className:"buttons_uHc7",children:[(0,s.jsx)("span",{className:a,style:{background:"#f25f58"}}),(0,s.jsx)("span",{className:a,style:{background:"#fbbe3c"}}),(0,s.jsx)("span",{className:a,style:{background:"#58cb42"}})]}),(0,s.jsx)("div",{className:(0,t.Z)("browserWindowAddressBar_Pd8y","text--truncate"),children:l}),(0,s.jsx)("div",{className:"browserWindowMenuIcon_Vhuh",children:(0,s.jsxs)("div",{children:[(0,s.jsx)("span",{className:i}),(0,s.jsx)("span",{className:i}),(0,s.jsx)("span",{className:i})]})})]}),(0,s.jsx)("div",{className:"browserWindowBody_Idgs",style:c,children:n})]})}},39468:function(e,n,r){r.d(n,{Z:()=>a});var s=r(85893),t=r(67294);function a(e){let{children:n="Boom!",message:r="Boom!\nSomething bad happened, but you can try again!",cause:a}=e,[i,l]=(0,t.useState)(!1);if(i)throw Error(r,{cause:a?Error(a):void 0});return(0,s.jsx)("button",{className:"button button--danger",type:"button",onClick:()=>l(!0),children:n})}},80980:function(e,n,r){r.d(n,{Z:()=>l,a:()=>i});var s=r(67294);let t={},a=s.createContext(t);function i(e){let n=s.useContext(a);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),s.createElement(a.Provider,{value:n},e.children)}},68707:function(e){e.exports=JSON.parse('{"permalink":"/blog/releases/2.4","editUrl":"https://github.com/facebook/docusaurus/edit/main/website/blog/releases/2.4/index.mdx","source":"@site/blog/releases/2.4/index.mdx","title":"Docusaurus 2.4","description":"We are happy to announce Docusaurus 2.4.","date":"2023-03-23T00:00:00.000Z","tags":[{"inline":false,"label":"Release","permalink":"/blog/tags/release","description":"Blog posts about Docusaurus\' new releases"}],"readingTime":3.05,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer, This Week In React editor","url":"https://thisweekinreact.com","page":{"permalink":"/blog/authors/slorber"},"description":"A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.","socials":{"bluesky":"https://bsky.app/profile/sebastienlorber.com","x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","instagram":"https://www.instagram.com/thisweekinreact","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"}],"frontMatter":{"title":"Docusaurus 2.4","authors":["slorber"],"tags":["release"],"image":"./img/social-card.png","date":"2023-03-23T00:00:00.000Z"},"unlisted":false,"lastUpdatedAt":1739456991000,"lastUpdatedBy":"S\xe9bastien Lorber","prevItem":{"title":"Upgrading frontend dependencies with confidence","permalink":"/blog/upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing"},"nextItem":{"title":"Docusaurus 2.3","permalink":"/blog/releases/2.3"}}')}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["27591"],{72581:function(e,n,r){r.d(n,{Z:()=>s});let s=r.p+"assets/images/social-card-3239a62bb56c9529ff255bc2c72e94f6.png"},20788:function(e,n,r){r.d(n,{Z:()=>s});let s=r.p+"assets/images/navbar-error-15eefab8e8d77aa4d605939956987164.jpg"},92539:function(e,n,r){r.d(n,{Z:()=>s});let s=r.p+"assets/images/sidebar-item-description-f38981b17f486bc09fb811c6992ef668.jpg"},17414:function(e,n,r){r.d(n,{Z:()=>s});let s=r.p+"assets/images/social-card-3239a62bb56c9529ff255bc2c72e94f6.png"},77543:function(e,n,r){r.r(n),r.d(n,{assets:()=>p,contentTitle:()=>h,default:()=>b,frontMatter:()=>d,metadata:()=>s,toc:()=>g});var s=r(68707),t=r(85893),a=r(80980),i=r(15398),l=r(58636),o=r(14522),c=r(51118),u=r(39468);let d={title:"Docusaurus 2.4",authors:["slorber"],tags:["release"],image:"./img/social-card.png",date:new Date("2023-03-23T00:00:00.000Z")},h=void 0,p={image:r(72581).Z,authorsImageUrls:[void 0]},g=[{value:"Highlights",id:"highlights",level:2},{value:"Sidebar item description",id:"sidebar-item-description",level:3},{value:"Theme Query String",id:"theme-query-string",level:3},{value:"Remark plugin npm2yarn upgrade",id:"remark-plugin-npm2yarn-upgrade",level:3},{value:"gtag support for multiple tracking IDs",id:"gtag-support-for-multiple-tracking-ids",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 m(e){let n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["We are happy to announce ",(0,t.jsx)(n.strong,{children:"Docusaurus 2.4"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["The upgrade should be easy: as explained in our ",(0,t.jsx)(n.a,{href:"/community/release-process",children:"release process documentation"}),", minor versions respect ",(0,t.jsx)(n.a,{href:"https://semver.org/",children:"Semantic Versioning"}),"."]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"Docusaurus blog post social card",src:r(17414).Z+"",width:"1200",height:"600"})}),"\n","\n",(0,t.jsx)(n.h2,{id:"highlights",children:"Highlights"}),"\n",(0,t.jsx)(n.h3,{id:"sidebar-item-description",children:"Sidebar item description"}),"\n",(0,t.jsxs)(n.p,{children:["In ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8236",children:"#8236"}),", we made it possible to provide a new ",(0,t.jsx)(n.code,{children:"description"})," attribute for docs sidebar items of type ",(0,t.jsx)(n.code,{children:"link"})," and ",(0,t.jsx)(n.code,{children:"category"}),"."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",metastring:'title="sidebars.js"',children:"[\n {\n type: 'link',\n label: 'Link with description',\n href: 'https://docusaurus.io',\n // highlight-next-line\n description: 'Some link description',\n },\n {\n type: 'category',\n label: 'Category with description',\n // highlight-next-line\n description: 'Some category description',\n items: [],\n },\n];\n"})}),"\n",(0,t.jsx)(n.p,{children:"These descriptions will be used in category generated index pages."}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"Show sidebar category generated index with custom descriptions",src:r(92539).Z+"",width:"1400",height:"691"})}),"\n",(0,t.jsx)(n.h3,{id:"theme-query-string",children:"Theme Query String"}),"\n",(0,t.jsxs)(n.p,{children:["In ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8708",children:"#8708"}),", we added the possibility to force Docusaurus to initialize itself in ",(0,t.jsx)(n.code,{children:"light"})," or ",(0,t.jsx)(n.code,{children:"dark"})," mode through a new ",(0,t.jsx)(n.code,{children:"docusaurus-theme"})," query-string parameter."]}),"\n",(0,t.jsx)(n.p,{children:"This is useful to ensure a consistent theme when embedding an existing Docusaurus page into an iframe or WebView."}),"\n",(0,t.jsx)(c.Z,{url:"/docs/?docusaurus-theme=light"}),"\n",(0,t.jsx)(c.Z,{url:"/docs/?docusaurus-theme=dark"}),"\n",(0,t.jsx)(n.h3,{id:"remark-plugin-npm2yarn-upgrade",children:"Remark plugin npm2yarn upgrade"}),"\n",(0,t.jsxs)(n.p,{children:["In ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8690",children:"#8690"}),", we upgraded our Remark plugin ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-remark-plugin-npm2yarn",children:"@docusaurus/remark-plugin-npm2yarn"})," with many conversion bug fixes, first-class support for pnpm, and the ability to register custom converters producing new tabs."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-markdown",children:"Run these commands!\n\n```bash npm2yarn\nnpm install\nnpm run build\nnpm run myCustomScript -- --some-arg\n```\n"})}),"\n",(0,t.jsx)(o.Z,{children:(0,t.jsxs)(i.Z,{children:[(0,t.jsx)(l.Z,{value:"npm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npm install\nnpm run build\nnpm run myCustomScript -- --some-arg\n"})})}),(0,t.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"yarn install\nyarn build\nyarn myCustomScript --some-arg\n"})})}),(0,t.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"pnpm install\npnpm run build\npnpm run myCustomScript --some-arg\n"})})})]})}),"\n",(0,t.jsx)(n.h3,{id:"gtag-support-for-multiple-tracking-ids",children:"gtag support for multiple tracking IDs"}),"\n",(0,t.jsxs)(n.p,{children:["In ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8620",children:"#8620"})," we added support for the ",(0,t.jsx)(n.a,{href:"/docs/api/plugins/@docusaurus/plugin-google-gtag",children:"@docusaurus/plugin-google-gtag"})," plugin to declare multiple tracking IDs."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"module.exports = {\n presets: [\n [\n '@docusaurus/preset-classic',\n {\n gtag: {\n trackingID: [\n // highlight-next-line\n 'G-',\n // highlight-next-line\n 'UA-',\n ],\n },\n },\n ],\n ],\n};\n"})}),"\n",(0,t.jsxs)(n.admonition,{title:"Google is sunsetting Universal Analytics",type:"warning",children:[(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:(0,t.jsx)(n.a,{href:"https://blog.google/products/marketingplatform/analytics/prepare-for-future-with-google-analytics-4/",children:"Google will sunset its Universal Analytics"})})," on ",(0,t.jsx)(n.strong,{children:"July 1, 2023"}),"."]}),(0,t.jsxs)(n.p,{children:["Docusaurus users should migrate to Google Analytics 4. Google ",(0,t.jsx)(n.strong,{children:"does not permit to migrate your existing Universal Analytics data"})," to your new Google Analytics 4 property."]}),(0,t.jsxs)(n.p,{children:["To preserve the continuity of your analytics, we temporarily recommend that you report events to 2 tracking IDs at the same time: the old one (",(0,t.jsx)(n.code,{children:"UA-*"}),") and new one (",(0,t.jsx)(n.code,{children:"G-*"}),"). Refer to the ",(0,t.jsx)(n.strong,{children:(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/issues/7221",children:"dedicated issue"})})," for details."]})]}),"\n",(0,t.jsx)(n.h3,{id:"developer-experience",children:"Developer Experience"}),"\n",(0,t.jsxs)(n.p,{children:["In ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8736",children:"#8736"}),", we improved how we render error messages and added initial support to render the full causal chain of an error (see ",(0,t.jsx)(n.a,{href:"https://h3manth.com/ES2022/#error-cause",children:"ES2022 Error Cause"}),")."]}),"\n",(0,t.jsx)(n.admonition,{type:"tip",children:(0,t.jsxs)(n.p,{children:["To see it in action, click here: ",(0,t.jsx)(u.Z,{cause:"Probably undefined is not a function \uD83D\uDE04"})]})}),"\n",(0,t.jsxs)(n.p,{children:["In ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8735",children:"#8735"})," we also made navbar-related error messages clearer to help users understand what they did wrong."]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"Docusaurus navbar error message screenshot",src:r(20788).Z+"",width:"1676",height:"1614"})}),"\n",(0,t.jsx)(n.h3,{id:"translations",children:"Translations"}),"\n",(0,t.jsx)(n.p,{children:"We made it possible to translate some new elements:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8677",children:"#8677"})," introduces a new ",(0,t.jsx)(n.code,{children:"process.env.DOCUSAURUS_CURRENT_LOCALE"})," (experimental) allowing you to localize your config file, including site title, tagline, announcement bar, baseUrl..."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8616",children:"#8616"})," allows to translate the navbar and footer logo alt text"]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"We added default theme translation support for multiple languages:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\uD83C\uDDED\uD83C\uDDFA ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8668",children:"#8668"}),": Hungarian"]}),"\n",(0,t.jsxs)(n.li,{children:["\uD83C\uDDF3\uD83C\uDDF4 ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8631",children:"#8631"}),": Norwegian (Bokm\xe5l)"]}),"\n"]}),"\n",(0,t.jsx)(n.admonition,{type:"tip",children:(0,t.jsxs)(n.p,{children:["Completing theme translations is an ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/issues/3526",children:"ongoing effort"})," and an easy way to contribute to Docusaurus. We add new theme features regularly, for which we often ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/issues/3526",children:"need new translations"}),"."]})}),"\n",(0,t.jsx)(n.h2,{id:"other-changes",children:"Other changes"}),"\n",(0,t.jsx)(n.p,{children:"Other notable changes include:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8674",children:"#8674"}),": respect ",(0,t.jsx)(n.code,{children:"prefers-reduced-motion: reduce"})," media query"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8712",children:"#8712"}),": use a navbar item of type ",(0,t.jsx)(n.code,{children:"docSidebar"})," in template"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8801",children:"#8801"}),": allow tabs children to be falsy"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8757",children:"#8757"}),": make search page react to external query-string changes"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8803",children:"#8803"}),": fix code block buttons position in RTL"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8615",children:"#8615"}),": fix color mode toggle when using dark navbar"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8699",children:"#8699"}),": fix navbar dropdown tab focus bug"]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["Check the ",(0,t.jsx)(n.strong,{children:(0,t.jsx)(n.a,{href:"/changelog/2.4.0",children:"2.4.0 changelog entry"})})," for an exhaustive list of changes."]})]})}function b(e={}){let{wrapper:n}={...(0,a.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(m,{...e})}):m(e)}},58636:function(e,n,r){r.d(n,{Z:()=>a});var s=r(85893);r(67294);var t=r(90496);function a(e){let{children:n,hidden:r,className:a}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,t.Z)("tabItem_pnkT",a),hidden:r,children:n})}},15398:function(e,n,r){r.d(n,{Z:()=>x});var s=r(85893),t=r(67294),a=r(90496),i=r(54947),l=r(3620),o=r(844),c=r(97486),u=r(32263),d=r(16971);function h(e){return t.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||t.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.`)})?.filter(Boolean)??[]}function p(e){let{value:n,tabValues:r}=e;return r.some(e=>e.value===n)}var g=r(71607);function m(e){let{className:n,block:r,selectedValue:t,selectValue:l,tabValues:o}=e,c=[],{blockElementScrollPositionUntilNextRender:u}=(0,i.o5)(),d=e=>{let n=e.currentTarget,r=o[c.indexOf(n)].value;r!==t&&(u(n),l(r))},h=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{let r=c.indexOf(e.currentTarget)+1;n=c[r]??c[0];break}case"ArrowLeft":{let r=c.indexOf(e.currentTarget)-1;n=c[r]??c[c.length-1]}}n?.focus()};return(0,s.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.Z)("tabs",{"tabs--block":r},n),children:o.map(e=>{let{value:n,label:r,attributes:i}=e;return(0,s.jsx)("li",{role:"tab",tabIndex:t===n?0:-1,"aria-selected":t===n,ref:e=>{c.push(e)},onKeyDown:h,onClick:d,...i,className:(0,a.Z)("tabs__item","tabItem_AQgk",i?.className,{"tabs__item--active":t===n}),children:r??n},n)})})}function b(e){let{lazy:n,children:r,selectedValue:i}=e,l=(Array.isArray(r)?r:[r]).filter(Boolean);if(n){let e=l.find(e=>e.props.value===i);return e?(0,t.cloneElement)(e,{className:(0,a.Z)("margin-top--md",e.props.className)}):null}return(0,s.jsx)("div",{className:"margin-top--md",children:l.map((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==i}))})}function f(e){let n=function(e){let{defaultValue:n,queryString:r=!1,groupId:s}=e,a=function(e){let{values:n,children:r}=e;return(0,t.useMemo)(()=>{let e=n??h(r).map(e=>{let{props:{value:n,label:r,attributes:s,default:t}}=e;return{value:n,label:r,attributes:s,default:t}});return!function(e){let n=(0,u.lx)(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,r])}(e),[i,g]=(0,t.useState)(()=>(function(e){let{defaultValue:n,tabValues:r}=e;if(0===r.length)throw Error("Docusaurus error: the component requires at least one children component");if(n){if(!p({value:n,tabValues:r}))throw Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${r.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}let s=r.find(e=>e.default)??r[0];if(!s)throw Error("Unexpected error: 0 tabValues");return s.value})({defaultValue:n,tabValues:a})),[m,b]=function(e){let{queryString:n=!1,groupId:r}=e,s=(0,l.k6)(),a=function(e){let{queryString:n=!1,groupId:r}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!r)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 r??null}({queryString:n,groupId:r});return[(0,c._X)(a),(0,t.useCallback)(e=>{if(!a)return;let n=new URLSearchParams(s.location.search);n.set(a,e),s.replace({...s.location,search:n.toString()})},[a,s])]}({queryString:r,groupId:s}),[f,x]=function(e){let{groupId:n}=e,r=n?`docusaurus.tab.${n}`:null,[s,a]=(0,d.Nk)(r);return[s,(0,t.useCallback)(e=>{r&&a.set(e)},[r,a])]}({groupId:s}),j=(()=>{let e=m??f;return p({value:e,tabValues:a})?e:null})();return(0,o.Z)(()=>{j&&g(j)},[j]),{selectedValue:i,selectValue:(0,t.useCallback)(e=>{if(!p({value:e,tabValues:a}))throw Error(`Can't select invalid tab value=${e}`);g(e),b(e),x(e)},[b,x,a]),tabValues:a}}(e);return(0,s.jsxs)("div",{className:(0,a.Z)("tabs-container","tabList_Qoir"),children:[(0,s.jsx)(m,{...n,...e}),(0,s.jsx)(b,{...n,...e})]})}function x(e){let n=(0,g.Z)();return(0,s.jsx)(f,{...e,children:h(e.children)},String(n))}},51118:function(e,n,r){r.d(n,{Z:()=>a});var s=r(85893);r(67294);var t=r(14522);function a(e){let{url:n}=e;return(0,s.jsx)("div",{style:{padding:10},children:(0,s.jsx)(t.Z,{url:n,style:{minWidth:"min(100%,45vw)",width:800,maxWidth:"100%",overflow:"hidden"},bodyStyle:{padding:0},children:(0,s.jsx)("iframe",{src:n,title:n,style:{display:"block",width:"100%",height:300}})})})}},14522:function(e,n,r){r.d(n,{Z:()=>l});var s=r(85893);r(67294);var t=r(90496);let a="dot_giz1",i="bar_rrRL";function l(e){let{children:n,minHeight:r,url:l="http://localhost:3000",style:o,bodyStyle:c}=e;return(0,s.jsxs)("div",{className:"browserWindow_my1Q",style:{...o,minHeight:r},children:[(0,s.jsxs)("div",{className:"browserWindowHeader_jXSR",children:[(0,s.jsxs)("div",{className:"buttons_uHc7",children:[(0,s.jsx)("span",{className:a,style:{background:"#f25f58"}}),(0,s.jsx)("span",{className:a,style:{background:"#fbbe3c"}}),(0,s.jsx)("span",{className:a,style:{background:"#58cb42"}})]}),(0,s.jsx)("div",{className:(0,t.Z)("browserWindowAddressBar_Pd8y","text--truncate"),children:l}),(0,s.jsx)("div",{className:"browserWindowMenuIcon_Vhuh",children:(0,s.jsxs)("div",{children:[(0,s.jsx)("span",{className:i}),(0,s.jsx)("span",{className:i}),(0,s.jsx)("span",{className:i})]})})]}),(0,s.jsx)("div",{className:"browserWindowBody_Idgs",style:c,children:n})]})}},39468:function(e,n,r){r.d(n,{Z:()=>a});var s=r(85893),t=r(67294);function a(e){let{children:n="Boom!",message:r="Boom!\nSomething bad happened, but you can try again!",cause:a}=e,[i,l]=(0,t.useState)(!1);if(i)throw Error(r,{cause:a?Error(a):void 0});return(0,s.jsx)("button",{className:"button button--danger",type:"button",onClick:()=>l(!0),children:n})}},80980:function(e,n,r){r.d(n,{Z:()=>l,a:()=>i});var s=r(67294);let t={},a=s.createContext(t);function i(e){let n=s.useContext(a);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),s.createElement(a.Provider,{value:n},e.children)}},68707:function(e){e.exports=JSON.parse('{"permalink":"/blog/releases/2.4","editUrl":"https://github.com/facebook/docusaurus/edit/main/website/blog/releases/2.4/index.mdx","source":"@site/blog/releases/2.4/index.mdx","title":"Docusaurus 2.4","description":"We are happy to announce Docusaurus 2.4.","date":"2023-03-23T00:00:00.000Z","tags":[{"inline":false,"label":"Release","permalink":"/blog/tags/release","description":"Blog posts about Docusaurus\' new releases"}],"readingTime":3.05,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer, This Week In React editor","url":"https://thisweekinreact.com","page":{"permalink":"/blog/authors/slorber"},"description":"A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.","socials":{"bluesky":"https://bsky.app/profile/sebastienlorber.com","x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","instagram":"https://www.instagram.com/thisweekinreact","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"}],"frontMatter":{"title":"Docusaurus 2.4","authors":["slorber"],"tags":["release"],"image":"./img/social-card.png","date":"2023-03-23T00:00:00.000Z"},"unlisted":false,"lastUpdatedAt":1739551601000,"lastUpdatedBy":"S\xe9bastien Lorber","prevItem":{"title":"Upgrading frontend dependencies with confidence","permalink":"/blog/upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing"},"nextItem":{"title":"Docusaurus 2.3","permalink":"/blog/releases/2.3"}}')}}]);
\ No newline at end of file
diff --git a/assets/js/0bc851e0.3760342e.js b/assets/js/0bc851e0.87421f81.js
similarity index 98%
rename from assets/js/0bc851e0.3760342e.js
rename to assets/js/0bc851e0.87421f81.js
index 06685cda2b..a29ee5c38b 100644
--- a/assets/js/0bc851e0.3760342e.js
+++ b/assets/js/0bc851e0.87421f81.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["55900"],{23141:function(e,s,t){t.d(s,{Z:()=>r});let r=t.p+"assets/images/social-card-8dc2413b4f9e86328bf77575e91171d7.png"},56594:function(e,s,t){t.d(s,{Z:()=>r});let r=t.p+"assets/images/social-card-8dc2413b4f9e86328bf77575e91171d7.png"},71694:function(e,s,t){t.r(s),t.d(s,{assets:()=>u,contentTitle:()=>i,default:()=>p,frontMatter:()=>o,metadata:()=>r,toc:()=>c});var r=t(46689),a=t(85893),n=t(80980);let o={title:"Docusaurus 2.1",authors:["slorber"],tags:["release"],image:"./img/social-card.png"},i=void 0,u={image:t(23141).Z,authorsImageUrls:[void 0]},c=[];function l(e){let s={a:"a",img:"img",p:"p",strong:"strong",...(0,n.a)(),...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.1"}),", our very first minor version release."]}),"\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.1 social card",src:t(56594).Z+"",width:"1200",height:"600"})})]})}function p(e={}){let{wrapper:s}={...(0,n.a)(),...e.components};return s?(0,a.jsx)(s,{...e,children:(0,a.jsx)(l,{...e})}):l(e)}},80980:function(e,s,t){t.d(s,{Z:()=>i,a:()=>o});var r=t(67294);let a={},n=r.createContext(a);function o(e){let s=r.useContext(n);return r.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function i(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:o(e.components),r.createElement(n.Provider,{value:s},e.children)}},46689:function(e){e.exports=JSON.parse('{"permalink":"/blog/2022/09/01/docusaurus-2.1","editUrl":"https://github.com/facebook/docusaurus/edit/main/website/blog/2022/09-01-docusaurus-2.1/index.mdx","source":"@site/blog/2022/09-01-docusaurus-2.1/index.mdx","title":"Docusaurus 2.1","description":"We are happy to announce Docusaurus 2.1, our very first minor version release.","date":"2022-09-01T00:00:00.000Z","tags":[{"inline":false,"label":"Release","permalink":"/blog/tags/release","description":"Blog posts about Docusaurus\' new releases"}],"readingTime":1.725,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer, This Week In React editor","url":"https://thisweekinreact.com","page":{"permalink":"/blog/authors/slorber"},"description":"A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.","socials":{"bluesky":"https://bsky.app/profile/sebastienlorber.com","x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","instagram":"https://www.instagram.com/thisweekinreact","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"}],"frontMatter":{"title":"Docusaurus 2.1","authors":["slorber"],"tags":["release"],"image":"./img/social-card.png"},"unlisted":false,"lastUpdatedAt":1739456991000,"lastUpdatedBy":"S\xe9bastien Lorber","prevItem":{"title":"Docusaurus 2.2","permalink":"/blog/releases/2.2"},"nextItem":{"title":"Announcing Docusaurus 2.0","permalink":"/blog/2022/08/01/announcing-docusaurus-2.0"}}')}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["55900"],{23141:function(e,s,t){t.d(s,{Z:()=>r});let r=t.p+"assets/images/social-card-8dc2413b4f9e86328bf77575e91171d7.png"},56594:function(e,s,t){t.d(s,{Z:()=>r});let r=t.p+"assets/images/social-card-8dc2413b4f9e86328bf77575e91171d7.png"},71694:function(e,s,t){t.r(s),t.d(s,{assets:()=>u,contentTitle:()=>i,default:()=>p,frontMatter:()=>o,metadata:()=>r,toc:()=>c});var r=t(46689),a=t(85893),n=t(80980);let o={title:"Docusaurus 2.1",authors:["slorber"],tags:["release"],image:"./img/social-card.png"},i=void 0,u={image:t(23141).Z,authorsImageUrls:[void 0]},c=[];function l(e){let s={a:"a",img:"img",p:"p",strong:"strong",...(0,n.a)(),...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.1"}),", our very first minor version release."]}),"\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.1 social card",src:t(56594).Z+"",width:"1200",height:"600"})})]})}function p(e={}){let{wrapper:s}={...(0,n.a)(),...e.components};return s?(0,a.jsx)(s,{...e,children:(0,a.jsx)(l,{...e})}):l(e)}},80980:function(e,s,t){t.d(s,{Z:()=>i,a:()=>o});var r=t(67294);let a={},n=r.createContext(a);function o(e){let s=r.useContext(n);return r.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function i(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:o(e.components),r.createElement(n.Provider,{value:s},e.children)}},46689:function(e){e.exports=JSON.parse('{"permalink":"/blog/2022/09/01/docusaurus-2.1","editUrl":"https://github.com/facebook/docusaurus/edit/main/website/blog/2022/09-01-docusaurus-2.1/index.mdx","source":"@site/blog/2022/09-01-docusaurus-2.1/index.mdx","title":"Docusaurus 2.1","description":"We are happy to announce Docusaurus 2.1, our very first minor version release.","date":"2022-09-01T00:00:00.000Z","tags":[{"inline":false,"label":"Release","permalink":"/blog/tags/release","description":"Blog posts about Docusaurus\' new releases"}],"readingTime":1.725,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer, This Week In React editor","url":"https://thisweekinreact.com","page":{"permalink":"/blog/authors/slorber"},"description":"A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.","socials":{"bluesky":"https://bsky.app/profile/sebastienlorber.com","x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","instagram":"https://www.instagram.com/thisweekinreact","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"}],"frontMatter":{"title":"Docusaurus 2.1","authors":["slorber"],"tags":["release"],"image":"./img/social-card.png"},"unlisted":false,"lastUpdatedAt":1739551601000,"lastUpdatedBy":"S\xe9bastien Lorber","prevItem":{"title":"Docusaurus 2.2","permalink":"/blog/releases/2.2"},"nextItem":{"title":"Announcing Docusaurus 2.0","permalink":"/blog/2022/08/01/announcing-docusaurus-2.0"}}')}}]);
\ No newline at end of file
diff --git a/assets/js/0c7845dd.95b094dd.js b/assets/js/0c7845dd.f48178aa.js
similarity index 98%
rename from assets/js/0c7845dd.95b094dd.js
rename to assets/js/0c7845dd.f48178aa.js
index 89e44ab4d3..170a38777a 100644
--- a/assets/js/0c7845dd.95b094dd.js
+++ b/assets/js/0c7845dd.f48178aa.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["64840"],{86251:function(e,s,t){t.r(s),t.d(s,{default:()=>x,frontMatter:()=>l,metadata:()=>n,assets:()=>u,toc:()=>r,contentTitle:()=>d});var n=JSON.parse('{"id":"toc/toc-_-5","title":"toc-_-5","description":"","source":"@site/_dogfooding/_docs tests/toc/toc-_-5.mdx","sourceDirName":"toc","slug":"/toc/toc-_-5","permalink":"/tests/docs/toc/toc-_-5","draft":false,"unlisted":false,"tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739456991000,"frontMatter":{"toc_max_heading_level":5},"sidebar":"sidebar","previous":{"title":"toc-5-5","permalink":"/tests/docs/toc/toc-5-5"},"next":{"title":"toc-_-_","permalink":"/tests/docs/toc/toc-_-_"}}'),i=t(85893),c=t(80980),o=t(2630);let l={toc_max_heading_level:5},d=void 0,u={},r=[...o.d$];function h(e){return(0,i.jsx)(o.ZP,{})}function x(e={}){let{wrapper:s}={...(0,c.a)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}x.displayName="MDXContent(_dogfooding/_docs tests/toc/toc-_-5.mdx)"},2630:function(e,s,t){t.d(s,{ZP:()=>l,d$:()=>c});var n=t(85893),i=t(80980);let c=[{value:"section 1",id:"section-1",level:2},{value:"subsection 1-1",id:"subsection-1-1",level:3},{value:"subsection 1-1-1",id:"subsection-1-1-1",level:4},{value:"subsection 1-1-1-1",id:"subsection-1-1-1-1",level:5},{value:"subsection 1-1-1-1-1",id:"subsection-1-1-1-1-1",level:6},{value:"subsection 1-1-1-1-2",id:"subsection-1-1-1-1-2",level:6},{value:"subsection 1-1-1-2",id:"subsection-1-1-1-2",level:5},{value:"subsection 1-1-2",id:"subsection-1-1-2",level:4},{value:"subsection 1-2",id:"subsection-1-2",level:3},{value:"subsection 1-3",id:"subsection-1-3",level:3},{value:"section 2",id:"section-2",level:2},{value:"subsection 2-1",id:"subsection-2-1",level:3},{value:"subsection 2-1",id:"subsection-2-1-1",level:3},{value:"section 3",id:"section-3",level:2},{value:"subsection 3-1",id:"subsection-3-1",level:3},{value:"subsection 3-2",id:"subsection-3-2",level:3}];function o(e){let s={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",header:"header",p:"p",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s.header,{children:(0,n.jsx)(s.h1,{id:"title",children:"title"})}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h2,{id:"section-1",children:"section 1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-1-1",children:"subsection 1-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h4,{id:"subsection-1-1-1",children:"subsection 1-1-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h5,{id:"subsection-1-1-1-1",children:"subsection 1-1-1-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h6,{id:"subsection-1-1-1-1-1",children:"subsection 1-1-1-1-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h6,{id:"subsection-1-1-1-1-2",children:"subsection 1-1-1-1-2"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h5,{id:"subsection-1-1-1-2",children:"subsection 1-1-1-2"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h4,{id:"subsection-1-1-2",children:"subsection 1-1-2"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-1-2",children:"subsection 1-2"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-1-3",children:"subsection 1-3"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h2,{id:"section-2",children:"section 2"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-2-1",children:"subsection 2-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-2-1-1",children:"subsection 2-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h2,{id:"section-3",children:"section 3"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-3-1",children:"subsection 3-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-3-2",children:"subsection 3-2"}),"\n",(0,n.jsx)(s.p,{children:"some text"})]})}function l(e={}){let{wrapper:s}={...(0,i.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(o,{...e})}):o(e)}},80980:function(e,s,t){t.d(s,{Z:()=>l,a:()=>o});var n=t(67294);let i={},c=n.createContext(i);function o(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(i):e.components||i:o(e.components),n.createElement(c.Provider,{value:s},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["64840"],{86251:function(e,s,t){t.r(s),t.d(s,{default:()=>x,frontMatter:()=>l,metadata:()=>n,assets:()=>u,toc:()=>r,contentTitle:()=>d});var n=JSON.parse('{"id":"toc/toc-_-5","title":"toc-_-5","description":"","source":"@site/_dogfooding/_docs tests/toc/toc-_-5.mdx","sourceDirName":"toc","slug":"/toc/toc-_-5","permalink":"/tests/docs/toc/toc-_-5","draft":false,"unlisted":false,"tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739551601000,"frontMatter":{"toc_max_heading_level":5},"sidebar":"sidebar","previous":{"title":"toc-5-5","permalink":"/tests/docs/toc/toc-5-5"},"next":{"title":"toc-_-_","permalink":"/tests/docs/toc/toc-_-_"}}'),i=t(85893),c=t(80980),o=t(2630);let l={toc_max_heading_level:5},d=void 0,u={},r=[...o.d$];function h(e){return(0,i.jsx)(o.ZP,{})}function x(e={}){let{wrapper:s}={...(0,c.a)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}x.displayName="MDXContent(_dogfooding/_docs tests/toc/toc-_-5.mdx)"},2630:function(e,s,t){t.d(s,{ZP:()=>l,d$:()=>c});var n=t(85893),i=t(80980);let c=[{value:"section 1",id:"section-1",level:2},{value:"subsection 1-1",id:"subsection-1-1",level:3},{value:"subsection 1-1-1",id:"subsection-1-1-1",level:4},{value:"subsection 1-1-1-1",id:"subsection-1-1-1-1",level:5},{value:"subsection 1-1-1-1-1",id:"subsection-1-1-1-1-1",level:6},{value:"subsection 1-1-1-1-2",id:"subsection-1-1-1-1-2",level:6},{value:"subsection 1-1-1-2",id:"subsection-1-1-1-2",level:5},{value:"subsection 1-1-2",id:"subsection-1-1-2",level:4},{value:"subsection 1-2",id:"subsection-1-2",level:3},{value:"subsection 1-3",id:"subsection-1-3",level:3},{value:"section 2",id:"section-2",level:2},{value:"subsection 2-1",id:"subsection-2-1",level:3},{value:"subsection 2-1",id:"subsection-2-1-1",level:3},{value:"section 3",id:"section-3",level:2},{value:"subsection 3-1",id:"subsection-3-1",level:3},{value:"subsection 3-2",id:"subsection-3-2",level:3}];function o(e){let s={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",header:"header",p:"p",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s.header,{children:(0,n.jsx)(s.h1,{id:"title",children:"title"})}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h2,{id:"section-1",children:"section 1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-1-1",children:"subsection 1-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h4,{id:"subsection-1-1-1",children:"subsection 1-1-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h5,{id:"subsection-1-1-1-1",children:"subsection 1-1-1-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h6,{id:"subsection-1-1-1-1-1",children:"subsection 1-1-1-1-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h6,{id:"subsection-1-1-1-1-2",children:"subsection 1-1-1-1-2"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h5,{id:"subsection-1-1-1-2",children:"subsection 1-1-1-2"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h4,{id:"subsection-1-1-2",children:"subsection 1-1-2"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-1-2",children:"subsection 1-2"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-1-3",children:"subsection 1-3"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h2,{id:"section-2",children:"section 2"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-2-1",children:"subsection 2-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-2-1-1",children:"subsection 2-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h2,{id:"section-3",children:"section 3"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-3-1",children:"subsection 3-1"}),"\n",(0,n.jsx)(s.p,{children:"some text"}),"\n",(0,n.jsx)(s.h3,{id:"subsection-3-2",children:"subsection 3-2"}),"\n",(0,n.jsx)(s.p,{children:"some text"})]})}function l(e={}){let{wrapper:s}={...(0,i.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(o,{...e})}):o(e)}},80980:function(e,s,t){t.d(s,{Z:()=>l,a:()=>o});var n=t(67294);let i={},c=n.createContext(i);function o(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(i):e.components||i:o(e.components),n.createElement(c.Provider,{value:s},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/0e4d8110.4c5b80f1.js b/assets/js/0e4d8110.9a317155.js
similarity index 99%
rename from assets/js/0e4d8110.4c5b80f1.js
rename to assets/js/0e4d8110.9a317155.js
index 897320f4d6..946d876a89 100644
--- a/assets/js/0e4d8110.4c5b80f1.js
+++ b/assets/js/0e4d8110.9a317155.js
@@ -1,4 +1,4 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["6940"],{72188:function(e,t,n){n.r(t),n.d(t,{default:()=>f,frontMatter:()=>d,metadata:()=>s,assets:()=>h,toc:()=>p,contentTitle:()=>u});var s=JSON.parse('{"id":"api/plugins/plugin-sitemap","title":"\uD83D\uDCE6 plugin-sitemap","description":"This plugin creates sitemaps for your site so that search engine crawlers can crawl your site more accurately.","source":"@site/docs/api/plugins/plugin-sitemap.mdx","sourceDirName":"api/plugins","slug":"/api/plugins/@docusaurus/plugin-sitemap","permalink":"/docs/api/plugins/@docusaurus/plugin-sitemap","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/api/plugins/plugin-sitemap.mdx","tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739456991000,"sidebarPosition":10,"frontMatter":{"sidebar_position":10,"slug":"/api/plugins/@docusaurus/plugin-sitemap"},"sidebar":"api","previous":{"title":"\uD83D\uDCE6 plugin-pwa","permalink":"/docs/api/plugins/@docusaurus/plugin-pwa"},"next":{"title":"\uD83D\uDCE6 plugin-vercel-analytics","permalink":"/docs/api/plugins/@docusaurus/plugin-vercel-analytics"}}'),r=n(85893),i=n(80980),l=n(15398),a=n(58636),o=n(32240),c=n(66359);let d={sidebar_position:10,slug:"/api/plugins/@docusaurus/plugin-sitemap"},u="\uD83D\uDCE6 plugin-sitemap",h={},p=[{value:"Installation",id:"installation",level:2},{value:"Configuration",id:"configuration",level:2},{value:"Types",id:"types",level:3},{value:"CreateSitemapItemsFn",id:"CreateSitemapItemsFn",level:4},{value:"Example configuration",id:"ex-config",level:3}];function m(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",li:"li",mdxAdmonitionTitle:"mdxAdmonitionTitle",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"-plugin-sitemap",children:"\uD83D\uDCE6 plugin-sitemap"})}),"\n","\n",(0,r.jsx)(t.p,{children:"This plugin creates sitemaps for your site so that search engine crawlers can crawl your site more accurately."}),"\n",(0,r.jsx)(t.admonition,{title:"production only",type:"warning",children:(0,r.jsxs)(t.p,{children:["This plugin is always inactive in development and ",(0,r.jsx)(t.strong,{children:"only active in production"})," because it works on the build output."]})}),"\n",(0,r.jsx)(t.h2,{id:"installation",children:"Installation"}),"\n",(0,r.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,r.jsx)(a.Z,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install --save @docusaurus/plugin-sitemap\n"})})}),(0,r.jsx)(a.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add @docusaurus/plugin-sitemap\n"})})}),(0,r.jsx)(a.Z,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add @docusaurus/plugin-sitemap\n"})})})]}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["If you use the preset ",(0,r.jsx)(t.code,{children:"@docusaurus/preset-classic"}),", you don't need to install this plugin as a dependency."]}),(0,r.jsxs)(t.p,{children:["You can configure this plugin through the ",(0,r.jsx)(t.a,{href:"/docs/using-plugins#docusauruspreset-classic",children:"preset options"}),"."]})]}),"\n",(0,r.jsx)(t.h2,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.p,{children:"Accepted fields:"}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Name"}),(0,r.jsx)(t.th,{children:"Type"}),(0,r.jsx)(t.th,{children:"Default"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"lastmod"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"'date' | 'datetime' | null"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"null"})}),(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"date"})," is YYYY-MM-DD. ",(0,r.jsx)(t.code,{children:"datetime"})," is a ISO 8601 datetime. ",(0,r.jsx)(t.code,{children:"null"})," is disabled. See ",(0,r.jsx)(t.a,{href:"https://www.sitemaps.org/protocol.html#xmlTagDefinitions",children:"sitemap docs"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"changefreq"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"string | null"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"'weekly'"})}),(0,r.jsxs)(t.td,{children:["See ",(0,r.jsx)(t.a,{href:"https://www.sitemaps.org/protocol.html#xmlTagDefinitions",children:"sitemap docs"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"priority"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"number | null"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"0.5"})}),(0,r.jsxs)(t.td,{children:["See ",(0,r.jsx)(t.a,{href:"https://www.sitemaps.org/protocol.html#xmlTagDefinitions",children:"sitemap docs"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"ignorePatterns"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"string[]"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"[]"})}),(0,r.jsx)(t.td,{children:"A list of glob patterns; matching route paths will be filtered from the sitemap. Note that you may need to include the base URL in here."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"filename"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"string"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"sitemap.xml"})}),(0,r.jsx)(t.td,{children:"The path to the created sitemap file, relative to the output directory. Useful if you have two plugin instances outputting two files."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"createSitemapItems"})}),(0,r.jsx)(t.td,{children:(0,r.jsxs)("code",{children:[(0,r.jsx)(t.a,{href:"#CreateSitemapItemsFn",children:"CreateSitemapItemsFn"})," | undefined"]})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"undefined"})}),(0,r.jsx)(t.td,{children:"An optional function which can be used to transform and / or filter the items in the sitemap."})]})]})]})}),"\n",(0,r.jsx)(t.h3,{id:"types",children:"Types"}),"\n",(0,r.jsx)(t.h4,{id:"CreateSitemapItemsFn",children:(0,r.jsx)(t.code,{children:"CreateSitemapItemsFn"})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"type CreateSitemapItemsFn = (params: {\n siteConfig: DocusaurusConfig;\n routes: RouteConfig[];\n defaultCreateSitemapItems: CreateSitemapItemsFn;\n}) => Promise;\n"})}),"\n",(0,r.jsxs)(t.admonition,{type:"info",children:[(0,r.jsx)(t.p,{children:"This plugin also respects some site config:"}),(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/docs/api/docusaurus-config#noIndex",children:(0,r.jsx)(t.code,{children:"noIndex"})}),": results in no sitemap generated"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/docs/api/docusaurus-config#trailingSlash",children:(0,r.jsx)(t.code,{children:"trailingSlash"})}),": determines if the URLs in the sitemap have trailing slashes"]}),"\n"]})]}),"\n",(0,r.jsxs)(t.admonition,{type:"note",children:[(0,r.jsxs)(t.mdxAdmonitionTitle,{children:["About ",(0,r.jsx)(t.code,{children:"lastmod"})]}),(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.code,{children:"lastmod"})," option will only output a sitemap ",(0,r.jsx)(t.code,{children:""})," tag if plugins provide ",(0,r.jsx)(t.a,{href:"/docs/api/plugin-methods/lifecycle-apis#addRoute",children:"route metadata"})," attributes ",(0,r.jsx)(t.code,{children:"sourceFilePath"})," and/or ",(0,r.jsx)(t.code,{children:"lastUpdatedAt"}),"."]}),(0,r.jsxs)(t.p,{children:["All the official content plugins provide the metadata for routes backed by a content file (Markdown, MDX or React page components), but it is possible third-party plugin authors do not provide this information, and the plugin will not be able to output a ",(0,r.jsx)(t.code,{children:""})," tag for their routes."]})]}),"\n",(0,r.jsx)(t.h3,{id:"ex-config",children:"Example configuration"}),"\n",(0,r.jsx)(t.p,{children:"You can configure this plugin through preset options or plugin options."}),"\n",(0,r.jsx)(t.admonition,{type:"tip",children:(0,r.jsx)(t.p,{children:"Most Docusaurus users configure this plugin through the preset options."})}),"\n","\n",(0,r.jsx)(c.Z,{pluginName:"@docusaurus/plugin-sitemap",presetOptionName:"sitemap",code:"{\n lastmod: 'date',\n changefreq: 'weekly',\n priority: 0.5,\n ignorePatterns: ['/tags/**'],\n filename: 'sitemap.xml',\n createSitemapItems: async (params) => {\n const {defaultCreateSitemapItems, ...rest} = params;\n const items = await defaultCreateSitemapItems(rest);\n return items.filter((item) => !item.url.includes('/page/'));\n },\n}"}),"\n",(0,r.jsxs)(t.p,{children:["You can find your sitemap at ",(0,r.jsx)(t.code,{children:"/sitemap.xml"}),"."]})]})}function f(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},58636:function(e,t,n){n.d(t,{Z:()=>i});var s=n(85893);n(67294);var r=n(90496);function i(e){let{children:t,hidden:n,className:i}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,r.Z)("tabItem_pnkT",i),hidden:n,children:t})}},15398:function(e,t,n){n.d(t,{Z:()=>j});var s=n(85893),r=n(67294),i=n(90496),l=n(54947),a=n(3620),o=n(844),c=n(97486),d=n(32263),u=n(16971);function h(e){return r.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||r.isValidElement(e)&&function(e){let{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(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.`)})?.filter(Boolean)??[]}function p(e){let{value:t,tabValues:n}=e;return n.some(e=>e.value===t)}var m=n(71607);function f(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:o}=e,c=[],{blockElementScrollPositionUntilNextRender:d}=(0,l.o5)(),u=e=>{let t=e.currentTarget,n=o[c.indexOf(t)].value;n!==r&&(d(t),a(n))},h=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{let n=c.indexOf(e.currentTarget)+1;t=c[n]??c[0];break}case"ArrowLeft":{let n=c.indexOf(e.currentTarget)-1;t=c[n]??c[c.length-1]}}t?.focus()};return(0,s.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":n},t),children:o.map(e=>{let{value:t,label:n,attributes:l}=e;return(0,s.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{c.push(e)},onKeyDown:h,onClick:u,...l,className:(0,i.Z)("tabs__item","tabItem_AQgk",l?.className,{"tabs__item--active":r===t}),children:n??t},t)})})}function x(e){let{lazy:t,children:n,selectedValue:l}=e,a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){let e=a.find(e=>e.props.value===l);return e?(0,r.cloneElement)(e,{className:(0,i.Z)("margin-top--md",e.props.className)}):null}return(0,s.jsx)("div",{className:"margin-top--md",children:a.map((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==l}))})}function g(e){let t=function(e){let{defaultValue:t,queryString:n=!1,groupId:s}=e,i=function(e){let{values:t,children:n}=e;return(0,r.useMemo)(()=>{let e=t??h(n).map(e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}});return!function(e){let t=(0,d.lx)(e,(e,t)=>e.value===t.value);if(t.length>0)throw Error(`Docusaurus error: Duplicate values "${t.map(e=>e.value).join(", ")}" found in . Every value needs to be unique.`)}(e),e},[t,n])}(e),[l,m]=(0,r.useState)(()=>(function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw Error("Docusaurus error: the component requires at least one children component");if(t){if(!p({value:t,tabValues:n}))throw Error(`Docusaurus error: The has a defaultValue "${t}" 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 t}let s=n.find(e=>e.default)??n[0];if(!s)throw Error("Unexpected error: 0 tabValues");return s.value})({defaultValue:t,tabValues:i})),[f,x]=function(e){let{queryString:t=!1,groupId:n}=e,s=(0,a.k6)(),i=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!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 n??null}({queryString:t,groupId:n});return[(0,c._X)(i),(0,r.useCallback)(e=>{if(!i)return;let t=new URLSearchParams(s.location.search);t.set(i,e),s.replace({...s.location,search:t.toString()})},[i,s])]}({queryString:n,groupId:s}),[g,j]=function(e){let{groupId:t}=e,n=t?`docusaurus.tab.${t}`:null,[s,i]=(0,u.Nk)(n);return[s,(0,r.useCallback)(e=>{n&&i.set(e)},[n,i])]}({groupId:s}),b=(()=>{let e=f??g;return p({value:e,tabValues:i})?e:null})();return(0,o.Z)(()=>{b&&m(b)},[b]),{selectedValue:l,selectValue:(0,r.useCallback)(e=>{if(!p({value:e,tabValues:i}))throw Error(`Can't select invalid tab value=${e}`);m(e),x(e),j(e)},[x,j,i]),tabValues:i}}(e);return(0,s.jsxs)("div",{className:(0,i.Z)("tabs-container","tabList_Qoir"),children:[(0,s.jsx)(f,{...t,...e}),(0,s.jsx)(x,{...t,...e})]})}function j(e){let t=(0,m.Z)();return(0,s.jsx)(g,{...e,children:h(e.children)},String(t))}},56497:function(e,t,n){n.d(t,{Z:()=>i});var s=n(85893);n(67294);var r=n(71607);function i(e){let{children:t,fallback:n}=e;return(0,r.Z)()?(0,s.jsx)(s.Fragment,{children:t?.()}):n??null}},32240:function(e,t,n){n.d(t,{Z:()=>o});var s=n(85893),r=n(67294),i=n(96700),l=n(3620);let a=r.forwardRef(function(e,t){let{name:n,children:a}=e,o=function(e){let t=e;for(;(0,r.isValidElement)(t);)[t]=r.Children.toArray(t.props.children);if("string"!=typeof t)throw Error(`Could not extract APITable row name from JSX tree:
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["6940"],{72188:function(e,t,n){n.r(t),n.d(t,{default:()=>f,frontMatter:()=>d,metadata:()=>s,assets:()=>h,toc:()=>p,contentTitle:()=>u});var s=JSON.parse('{"id":"api/plugins/plugin-sitemap","title":"\uD83D\uDCE6 plugin-sitemap","description":"This plugin creates sitemaps for your site so that search engine crawlers can crawl your site more accurately.","source":"@site/docs/api/plugins/plugin-sitemap.mdx","sourceDirName":"api/plugins","slug":"/api/plugins/@docusaurus/plugin-sitemap","permalink":"/docs/api/plugins/@docusaurus/plugin-sitemap","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/api/plugins/plugin-sitemap.mdx","tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739551601000,"sidebarPosition":10,"frontMatter":{"sidebar_position":10,"slug":"/api/plugins/@docusaurus/plugin-sitemap"},"sidebar":"api","previous":{"title":"\uD83D\uDCE6 plugin-pwa","permalink":"/docs/api/plugins/@docusaurus/plugin-pwa"},"next":{"title":"\uD83D\uDCE6 plugin-vercel-analytics","permalink":"/docs/api/plugins/@docusaurus/plugin-vercel-analytics"}}'),r=n(85893),i=n(80980),l=n(15398),a=n(58636),o=n(32240),c=n(66359);let d={sidebar_position:10,slug:"/api/plugins/@docusaurus/plugin-sitemap"},u="\uD83D\uDCE6 plugin-sitemap",h={},p=[{value:"Installation",id:"installation",level:2},{value:"Configuration",id:"configuration",level:2},{value:"Types",id:"types",level:3},{value:"CreateSitemapItemsFn",id:"CreateSitemapItemsFn",level:4},{value:"Example configuration",id:"ex-config",level:3}];function m(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",li:"li",mdxAdmonitionTitle:"mdxAdmonitionTitle",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"-plugin-sitemap",children:"\uD83D\uDCE6 plugin-sitemap"})}),"\n","\n",(0,r.jsx)(t.p,{children:"This plugin creates sitemaps for your site so that search engine crawlers can crawl your site more accurately."}),"\n",(0,r.jsx)(t.admonition,{title:"production only",type:"warning",children:(0,r.jsxs)(t.p,{children:["This plugin is always inactive in development and ",(0,r.jsx)(t.strong,{children:"only active in production"})," because it works on the build output."]})}),"\n",(0,r.jsx)(t.h2,{id:"installation",children:"Installation"}),"\n",(0,r.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,r.jsx)(a.Z,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install --save @docusaurus/plugin-sitemap\n"})})}),(0,r.jsx)(a.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add @docusaurus/plugin-sitemap\n"})})}),(0,r.jsx)(a.Z,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add @docusaurus/plugin-sitemap\n"})})})]}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["If you use the preset ",(0,r.jsx)(t.code,{children:"@docusaurus/preset-classic"}),", you don't need to install this plugin as a dependency."]}),(0,r.jsxs)(t.p,{children:["You can configure this plugin through the ",(0,r.jsx)(t.a,{href:"/docs/using-plugins#docusauruspreset-classic",children:"preset options"}),"."]})]}),"\n",(0,r.jsx)(t.h2,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.p,{children:"Accepted fields:"}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Name"}),(0,r.jsx)(t.th,{children:"Type"}),(0,r.jsx)(t.th,{children:"Default"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"lastmod"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"'date' | 'datetime' | null"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"null"})}),(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"date"})," is YYYY-MM-DD. ",(0,r.jsx)(t.code,{children:"datetime"})," is a ISO 8601 datetime. ",(0,r.jsx)(t.code,{children:"null"})," is disabled. See ",(0,r.jsx)(t.a,{href:"https://www.sitemaps.org/protocol.html#xmlTagDefinitions",children:"sitemap docs"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"changefreq"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"string | null"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"'weekly'"})}),(0,r.jsxs)(t.td,{children:["See ",(0,r.jsx)(t.a,{href:"https://www.sitemaps.org/protocol.html#xmlTagDefinitions",children:"sitemap docs"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"priority"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"number | null"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"0.5"})}),(0,r.jsxs)(t.td,{children:["See ",(0,r.jsx)(t.a,{href:"https://www.sitemaps.org/protocol.html#xmlTagDefinitions",children:"sitemap docs"})]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"ignorePatterns"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"string[]"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"[]"})}),(0,r.jsx)(t.td,{children:"A list of glob patterns; matching route paths will be filtered from the sitemap. Note that you may need to include the base URL in here."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"filename"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"string"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"sitemap.xml"})}),(0,r.jsx)(t.td,{children:"The path to the created sitemap file, relative to the output directory. Useful if you have two plugin instances outputting two files."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"createSitemapItems"})}),(0,r.jsx)(t.td,{children:(0,r.jsxs)("code",{children:[(0,r.jsx)(t.a,{href:"#CreateSitemapItemsFn",children:"CreateSitemapItemsFn"})," | undefined"]})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"undefined"})}),(0,r.jsx)(t.td,{children:"An optional function which can be used to transform and / or filter the items in the sitemap."})]})]})]})}),"\n",(0,r.jsx)(t.h3,{id:"types",children:"Types"}),"\n",(0,r.jsx)(t.h4,{id:"CreateSitemapItemsFn",children:(0,r.jsx)(t.code,{children:"CreateSitemapItemsFn"})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"type CreateSitemapItemsFn = (params: {\n siteConfig: DocusaurusConfig;\n routes: RouteConfig[];\n defaultCreateSitemapItems: CreateSitemapItemsFn;\n}) => Promise;\n"})}),"\n",(0,r.jsxs)(t.admonition,{type:"info",children:[(0,r.jsx)(t.p,{children:"This plugin also respects some site config:"}),(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/docs/api/docusaurus-config#noIndex",children:(0,r.jsx)(t.code,{children:"noIndex"})}),": results in no sitemap generated"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/docs/api/docusaurus-config#trailingSlash",children:(0,r.jsx)(t.code,{children:"trailingSlash"})}),": determines if the URLs in the sitemap have trailing slashes"]}),"\n"]})]}),"\n",(0,r.jsxs)(t.admonition,{type:"note",children:[(0,r.jsxs)(t.mdxAdmonitionTitle,{children:["About ",(0,r.jsx)(t.code,{children:"lastmod"})]}),(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.code,{children:"lastmod"})," option will only output a sitemap ",(0,r.jsx)(t.code,{children:""})," tag if plugins provide ",(0,r.jsx)(t.a,{href:"/docs/api/plugin-methods/lifecycle-apis#addRoute",children:"route metadata"})," attributes ",(0,r.jsx)(t.code,{children:"sourceFilePath"})," and/or ",(0,r.jsx)(t.code,{children:"lastUpdatedAt"}),"."]}),(0,r.jsxs)(t.p,{children:["All the official content plugins provide the metadata for routes backed by a content file (Markdown, MDX or React page components), but it is possible third-party plugin authors do not provide this information, and the plugin will not be able to output a ",(0,r.jsx)(t.code,{children:""})," tag for their routes."]})]}),"\n",(0,r.jsx)(t.h3,{id:"ex-config",children:"Example configuration"}),"\n",(0,r.jsx)(t.p,{children:"You can configure this plugin through preset options or plugin options."}),"\n",(0,r.jsx)(t.admonition,{type:"tip",children:(0,r.jsx)(t.p,{children:"Most Docusaurus users configure this plugin through the preset options."})}),"\n","\n",(0,r.jsx)(c.Z,{pluginName:"@docusaurus/plugin-sitemap",presetOptionName:"sitemap",code:"{\n lastmod: 'date',\n changefreq: 'weekly',\n priority: 0.5,\n ignorePatterns: ['/tags/**'],\n filename: 'sitemap.xml',\n createSitemapItems: async (params) => {\n const {defaultCreateSitemapItems, ...rest} = params;\n const items = await defaultCreateSitemapItems(rest);\n return items.filter((item) => !item.url.includes('/page/'));\n },\n}"}),"\n",(0,r.jsxs)(t.p,{children:["You can find your sitemap at ",(0,r.jsx)(t.code,{children:"/sitemap.xml"}),"."]})]})}function f(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},58636:function(e,t,n){n.d(t,{Z:()=>i});var s=n(85893);n(67294);var r=n(90496);function i(e){let{children:t,hidden:n,className:i}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,r.Z)("tabItem_pnkT",i),hidden:n,children:t})}},15398:function(e,t,n){n.d(t,{Z:()=>j});var s=n(85893),r=n(67294),i=n(90496),l=n(54947),a=n(3620),o=n(844),c=n(97486),d=n(32263),u=n(16971);function h(e){return r.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||r.isValidElement(e)&&function(e){let{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(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.`)})?.filter(Boolean)??[]}function p(e){let{value:t,tabValues:n}=e;return n.some(e=>e.value===t)}var m=n(71607);function f(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:o}=e,c=[],{blockElementScrollPositionUntilNextRender:d}=(0,l.o5)(),u=e=>{let t=e.currentTarget,n=o[c.indexOf(t)].value;n!==r&&(d(t),a(n))},h=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{let n=c.indexOf(e.currentTarget)+1;t=c[n]??c[0];break}case"ArrowLeft":{let n=c.indexOf(e.currentTarget)-1;t=c[n]??c[c.length-1]}}t?.focus()};return(0,s.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":n},t),children:o.map(e=>{let{value:t,label:n,attributes:l}=e;return(0,s.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{c.push(e)},onKeyDown:h,onClick:u,...l,className:(0,i.Z)("tabs__item","tabItem_AQgk",l?.className,{"tabs__item--active":r===t}),children:n??t},t)})})}function x(e){let{lazy:t,children:n,selectedValue:l}=e,a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){let e=a.find(e=>e.props.value===l);return e?(0,r.cloneElement)(e,{className:(0,i.Z)("margin-top--md",e.props.className)}):null}return(0,s.jsx)("div",{className:"margin-top--md",children:a.map((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==l}))})}function g(e){let t=function(e){let{defaultValue:t,queryString:n=!1,groupId:s}=e,i=function(e){let{values:t,children:n}=e;return(0,r.useMemo)(()=>{let e=t??h(n).map(e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}});return!function(e){let t=(0,d.lx)(e,(e,t)=>e.value===t.value);if(t.length>0)throw Error(`Docusaurus error: Duplicate values "${t.map(e=>e.value).join(", ")}" found in . Every value needs to be unique.`)}(e),e},[t,n])}(e),[l,m]=(0,r.useState)(()=>(function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw Error("Docusaurus error: the component requires at least one children component");if(t){if(!p({value:t,tabValues:n}))throw Error(`Docusaurus error: The has a defaultValue "${t}" 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 t}let s=n.find(e=>e.default)??n[0];if(!s)throw Error("Unexpected error: 0 tabValues");return s.value})({defaultValue:t,tabValues:i})),[f,x]=function(e){let{queryString:t=!1,groupId:n}=e,s=(0,a.k6)(),i=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!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 n??null}({queryString:t,groupId:n});return[(0,c._X)(i),(0,r.useCallback)(e=>{if(!i)return;let t=new URLSearchParams(s.location.search);t.set(i,e),s.replace({...s.location,search:t.toString()})},[i,s])]}({queryString:n,groupId:s}),[g,j]=function(e){let{groupId:t}=e,n=t?`docusaurus.tab.${t}`:null,[s,i]=(0,u.Nk)(n);return[s,(0,r.useCallback)(e=>{n&&i.set(e)},[n,i])]}({groupId:s}),b=(()=>{let e=f??g;return p({value:e,tabValues:i})?e:null})();return(0,o.Z)(()=>{b&&m(b)},[b]),{selectedValue:l,selectValue:(0,r.useCallback)(e=>{if(!p({value:e,tabValues:i}))throw Error(`Can't select invalid tab value=${e}`);m(e),x(e),j(e)},[x,j,i]),tabValues:i}}(e);return(0,s.jsxs)("div",{className:(0,i.Z)("tabs-container","tabList_Qoir"),children:[(0,s.jsx)(f,{...t,...e}),(0,s.jsx)(x,{...t,...e})]})}function j(e){let t=(0,m.Z)();return(0,s.jsx)(g,{...e,children:h(e.children)},String(t))}},56497:function(e,t,n){n.d(t,{Z:()=>i});var s=n(85893);n(67294);var r=n(71607);function i(e){let{children:t,fallback:n}=e;return(0,r.Z)()?(0,s.jsx)(s.Fragment,{children:t?.()}):n??null}},32240:function(e,t,n){n.d(t,{Z:()=>o});var s=n(85893),r=n(67294),i=n(96700),l=n(3620);let a=r.forwardRef(function(e,t){let{name:n,children:a}=e,o=function(e){let t=e;for(;(0,r.isValidElement)(t);)[t]=r.Children.toArray(t.props.children);if("string"!=typeof t)throw Error(`Could not extract APITable row name from JSX tree:
${JSON.stringify(e,null,2)}`);return t}(a),c=n?`${n}-${o}`:o,d=`#${c}`,u=(0,l.k6)();return(0,i.Z)().collectAnchor(c),(0,s.jsx)("tr",{id:c,tabIndex:0,ref:u.location.hash===d?t:void 0,onClick:e=>{let t="TD"===e.target.tagName.toUpperCase(),n=!!window.getSelection()?.toString();t&&!n&&u.push(d)},onKeyDown:e=>{"Enter"===e.key&&u.push(d)},children:a.props.children})});function o(e){let{children:t,name:n}=e;if("table"!==t.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[i,l]=r.Children.toArray(t.props.children),o=(0,r.useRef)(null);(0,r.useEffect)(()=>{o.current?.focus()},[o]);let c=r.Children.map(l.props.children,e=>(0,s.jsx)(a,{name:n,ref:o,children:e}));return(0,s.jsxs)("table",{className:"apiTable_e8hp",children:[i,(0,s.jsx)("tbody",{children:c})]})}},66359:function(e,t,n){n.d(t,{Z:()=>u});var s=n(85893);n(67294);var r=n(35363),i=n(90158),l=n(77827),a=n(15398),o=n(58636),c=n(95998);let d=void 0;function u(e){let{code:t,pluginName:n,presetOptionName:u}=e,h=(0,i.zu)(d).path;return(0,s.jsxs)(a.Z,{groupId:"api-config-ex",children:[(0,s.jsxs)(o.Z,{value:"preset",label:(0,l.I)({message:"Preset options"}),children:[(0,s.jsx)("p",{children:(0,s.jsx)(l.Z,{id:"apiDocs.configTabs.presetOptions.description",values:{presetLink:(0,s.jsx)(r.Z,{to:`${h}/using-plugins#docusauruspreset-classic`,children:(0,s.jsx)(l.Z,{children:"preset options"})})},children:"If you use a preset, configure this plugin through the {presetLink}:"})}),(0,s.jsx)(c.Z,{language:"js",title:"docusaurus.config.js",children:`module.exports = {
presets: [
[
diff --git a/assets/js/0e9c6edc.cba75bfc.js b/assets/js/0e9c6edc.5ba66958.js
similarity index 99%
rename from assets/js/0e9c6edc.cba75bfc.js
rename to assets/js/0e9c6edc.5ba66958.js
index d23e811598..c63fe5fc27 100644
--- a/assets/js/0e9c6edc.cba75bfc.js
+++ b/assets/js/0e9c6edc.5ba66958.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["59587"],{23141:function(e,n,s){s.d(n,{Z:()=>t});let t=s.p+"assets/images/social-card-8dc2413b4f9e86328bf77575e91171d7.png"},6789:function(e,n,s){s.d(n,{Z:()=>t});let t=s.p+"assets/images/doc-card-list-e52d727eadceb3d21cfc0f851f09aa93.png"},56594:function(e,n,s){s.d(n,{Z:()=>t});let t=s.p+"assets/images/social-card-8dc2413b4f9e86328bf77575e91171d7.png"},30959:function(e,n,s){s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>a,default:()=>h,frontMatter:()=>r,metadata:()=>t,toc:()=>l});var t=s(46689),i=s(85893),o=s(80980);let r={title:"Docusaurus 2.1",authors:["slorber"],tags:["release"],image:"./img/social-card.png"},a=void 0,c={image:s(23141).Z,authorsImageUrls:[void 0]},l=[{value:"Highlights",id:"highlights",level:2},{value:"DocCardList improvements",id:"doccardlist-improvements",level:3},{value:"noindex improvements",id:"noindex-improvements",level:3},{value:"Overriding default meta tags",id:"overriding-default-meta-tags",level:3},{value:"Ukrainian translations",id:"ukrainian-translations",level:3},{value:"Other changes",id:"other-changes",level:2}];function d(e){let n={a:"a",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.p,{children:["We are happy to announce ",(0,i.jsx)(n.strong,{children:"Docusaurus 2.1"}),", our very first minor version release."]}),"\n",(0,i.jsxs)(n.p,{children:["The upgrade should be easy: as explained in our ",(0,i.jsx)(n.a,{href:"/community/release-process",children:"release process documentation"}),", minor versions respect ",(0,i.jsx)(n.a,{href:"https://semver.org/",children:"Semantic Versioning"}),"."]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"Docusaurus 2.1 social card",src:s(56594).Z+"",width:"1200",height:"600"})}),"\n",(0,i.jsx)(n.h2,{id:"highlights",children:"Highlights"}),"\n",(0,i.jsx)(n.h3,{id:"doccardlist-improvements",children:"DocCardList improvements"}),"\n",(0,i.jsxs)(n.p,{children:["In ",(0,i.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8008",children:"#8008"}),", we simplified the usage of the",(0,i.jsx)(n.code,{children:""})," component, that is notably used on sidebar category generated index pages."]}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"items"})," prop is now optional, and will be automatically inferred from the content of the parent sidebar category:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-diff",children:"import DocCardList from '@theme/DocCardList';\n- import {useCurrentSidebarCategory} from '@docusaurus/theme-common';\n\n- \n+ \n"})}),"\n",(0,i.jsx)(n.p,{children:"Also, we made it possible to use it on any document, including regular docs not linked to any sidebar category."}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"simplified DocCardList component",src:s(6789).Z+"",width:"1062",height:"489"})}),"\n",(0,i.jsxs)(n.h3,{id:"noindex-improvements",children:[(0,i.jsx)(n.code,{children:"noindex"})," improvements"]}),"\n",(0,i.jsxs)(n.p,{children:["We improved the support of the ",(0,i.jsxs)(n.a,{href:"https://developers.google.com/search/docs/advanced/crawling/block-indexing",children:[(0,i.jsx)(n.code,{children:"noindex"})," meta ",(0,i.jsx)(n.code,{children:"robots"})," directive"]}),", a way to signal search engines you don't want a specific page to be indexed."]}),"\n",(0,i.jsxs)(n.p,{children:["In ",(0,i.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/7963",children:"#7963"}),", we allow ",(0,i.jsx)(n.code,{children:"noindex"})," to be configured on a per-docs-version basis."]}),"\n",(0,i.jsxs)(n.p,{children:["Use the following plugin options to tell crawlers you don't want the ",(0,i.jsx)(n.code,{children:"1.0.0"})," version to be indexed:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"const options = {\n versions: {\n '1.0.0': {\n noIndex: true,\n },\n },\n};\n"})}),"\n",(0,i.jsx)(n.p,{children:"In practice, Docusaurus will add the following meta to each page of that version:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-html",children:'\n'})}),"\n",(0,i.jsxs)(n.p,{children:["In ",(0,i.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/7964",children:"#7964"}),", we also fixed a bug where the sitemap plugin would still contain pages that have a ",(0,i.jsx)(n.code,{children:"noindex"})," directive. Now the sitemap plugin will reliably filter out all the pages containing ",(0,i.jsx)(n.code,{children:"noindex"})," directives."]}),"\n",(0,i.jsx)(n.h3,{id:"overriding-default-meta-tags",children:"Overriding default meta tags"}),"\n",(0,i.jsxs)(n.p,{children:["In ",(0,i.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/7952",children:"#7952"}),", it becomes possible to override default html meta tags you couldn't before:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:'<>\n {siteConfig.noIndex && }\n \n>\n'})}),"\n",(0,i.jsxs)(n.p,{children:["It is now possible to use ",(0,i.jsx)(n.code,{children:""})," or ",(0,i.jsx)(n.code,{children:"themeConfig.metadata"}),":"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["to override the ",(0,i.jsx)(n.code,{children:"viewport"})," meta"]}),"\n",(0,i.jsxs)(n.li,{children:["to override the ",(0,i.jsx)(n.code,{children:"robots"})," meta: you could mark your site as ",(0,i.jsx)(n.code,{children:"noIndex"}),", but except for specific pages that should be indexed"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"ukrainian-translations",children:"Ukrainian translations"}),"\n",(0,i.jsxs)(n.p,{children:["In ",(0,i.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/7953",children:"#7953"}),", we added default classic theme translations for the Ukrainian language."]}),"\n",(0,i.jsx)(n.h2,{id:"other-changes",children:"Other changes"}),"\n",(0,i.jsxs)(n.p,{children:["Check the ",(0,i.jsx)(n.a,{href:"/changelog/2.1.0",children:"2.1.0 changelog entry"})," for an exhaustive list of changes."]})]})}function h(e={}){let{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},80980:function(e,n,s){s.d(n,{Z:()=>a,a:()=>r});var t=s(67294);let i={},o=t.createContext(i);function r(e){let n=t.useContext(o);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),t.createElement(o.Provider,{value:n},e.children)}},46689:function(e){e.exports=JSON.parse('{"permalink":"/blog/2022/09/01/docusaurus-2.1","editUrl":"https://github.com/facebook/docusaurus/edit/main/website/blog/2022/09-01-docusaurus-2.1/index.mdx","source":"@site/blog/2022/09-01-docusaurus-2.1/index.mdx","title":"Docusaurus 2.1","description":"We are happy to announce Docusaurus 2.1, our very first minor version release.","date":"2022-09-01T00:00:00.000Z","tags":[{"inline":false,"label":"Release","permalink":"/blog/tags/release","description":"Blog posts about Docusaurus\' new releases"}],"readingTime":1.725,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer, This Week In React editor","url":"https://thisweekinreact.com","page":{"permalink":"/blog/authors/slorber"},"description":"A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.","socials":{"bluesky":"https://bsky.app/profile/sebastienlorber.com","x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","instagram":"https://www.instagram.com/thisweekinreact","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"}],"frontMatter":{"title":"Docusaurus 2.1","authors":["slorber"],"tags":["release"],"image":"./img/social-card.png"},"unlisted":false,"lastUpdatedAt":1739456991000,"lastUpdatedBy":"S\xe9bastien Lorber","prevItem":{"title":"Docusaurus 2.2","permalink":"/blog/releases/2.2"},"nextItem":{"title":"Announcing Docusaurus 2.0","permalink":"/blog/2022/08/01/announcing-docusaurus-2.0"}}')}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["59587"],{23141:function(e,n,s){s.d(n,{Z:()=>t});let t=s.p+"assets/images/social-card-8dc2413b4f9e86328bf77575e91171d7.png"},6789:function(e,n,s){s.d(n,{Z:()=>t});let t=s.p+"assets/images/doc-card-list-e52d727eadceb3d21cfc0f851f09aa93.png"},56594:function(e,n,s){s.d(n,{Z:()=>t});let t=s.p+"assets/images/social-card-8dc2413b4f9e86328bf77575e91171d7.png"},30959:function(e,n,s){s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>a,default:()=>h,frontMatter:()=>r,metadata:()=>t,toc:()=>l});var t=s(46689),i=s(85893),o=s(80980);let r={title:"Docusaurus 2.1",authors:["slorber"],tags:["release"],image:"./img/social-card.png"},a=void 0,c={image:s(23141).Z,authorsImageUrls:[void 0]},l=[{value:"Highlights",id:"highlights",level:2},{value:"DocCardList improvements",id:"doccardlist-improvements",level:3},{value:"noindex improvements",id:"noindex-improvements",level:3},{value:"Overriding default meta tags",id:"overriding-default-meta-tags",level:3},{value:"Ukrainian translations",id:"ukrainian-translations",level:3},{value:"Other changes",id:"other-changes",level:2}];function d(e){let n={a:"a",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.p,{children:["We are happy to announce ",(0,i.jsx)(n.strong,{children:"Docusaurus 2.1"}),", our very first minor version release."]}),"\n",(0,i.jsxs)(n.p,{children:["The upgrade should be easy: as explained in our ",(0,i.jsx)(n.a,{href:"/community/release-process",children:"release process documentation"}),", minor versions respect ",(0,i.jsx)(n.a,{href:"https://semver.org/",children:"Semantic Versioning"}),"."]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"Docusaurus 2.1 social card",src:s(56594).Z+"",width:"1200",height:"600"})}),"\n",(0,i.jsx)(n.h2,{id:"highlights",children:"Highlights"}),"\n",(0,i.jsx)(n.h3,{id:"doccardlist-improvements",children:"DocCardList improvements"}),"\n",(0,i.jsxs)(n.p,{children:["In ",(0,i.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8008",children:"#8008"}),", we simplified the usage of the",(0,i.jsx)(n.code,{children:""})," component, that is notably used on sidebar category generated index pages."]}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"items"})," prop is now optional, and will be automatically inferred from the content of the parent sidebar category:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-diff",children:"import DocCardList from '@theme/DocCardList';\n- import {useCurrentSidebarCategory} from '@docusaurus/theme-common';\n\n- \n+ \n"})}),"\n",(0,i.jsx)(n.p,{children:"Also, we made it possible to use it on any document, including regular docs not linked to any sidebar category."}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"simplified DocCardList component",src:s(6789).Z+"",width:"1062",height:"489"})}),"\n",(0,i.jsxs)(n.h3,{id:"noindex-improvements",children:[(0,i.jsx)(n.code,{children:"noindex"})," improvements"]}),"\n",(0,i.jsxs)(n.p,{children:["We improved the support of the ",(0,i.jsxs)(n.a,{href:"https://developers.google.com/search/docs/advanced/crawling/block-indexing",children:[(0,i.jsx)(n.code,{children:"noindex"})," meta ",(0,i.jsx)(n.code,{children:"robots"})," directive"]}),", a way to signal search engines you don't want a specific page to be indexed."]}),"\n",(0,i.jsxs)(n.p,{children:["In ",(0,i.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/7963",children:"#7963"}),", we allow ",(0,i.jsx)(n.code,{children:"noindex"})," to be configured on a per-docs-version basis."]}),"\n",(0,i.jsxs)(n.p,{children:["Use the following plugin options to tell crawlers you don't want the ",(0,i.jsx)(n.code,{children:"1.0.0"})," version to be indexed:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"const options = {\n versions: {\n '1.0.0': {\n noIndex: true,\n },\n },\n};\n"})}),"\n",(0,i.jsx)(n.p,{children:"In practice, Docusaurus will add the following meta to each page of that version:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-html",children:'\n'})}),"\n",(0,i.jsxs)(n.p,{children:["In ",(0,i.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/7964",children:"#7964"}),", we also fixed a bug where the sitemap plugin would still contain pages that have a ",(0,i.jsx)(n.code,{children:"noindex"})," directive. Now the sitemap plugin will reliably filter out all the pages containing ",(0,i.jsx)(n.code,{children:"noindex"})," directives."]}),"\n",(0,i.jsx)(n.h3,{id:"overriding-default-meta-tags",children:"Overriding default meta tags"}),"\n",(0,i.jsxs)(n.p,{children:["In ",(0,i.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/7952",children:"#7952"}),", it becomes possible to override default html meta tags you couldn't before:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:'<>\n {siteConfig.noIndex && }\n \n>\n'})}),"\n",(0,i.jsxs)(n.p,{children:["It is now possible to use ",(0,i.jsx)(n.code,{children:""})," or ",(0,i.jsx)(n.code,{children:"themeConfig.metadata"}),":"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["to override the ",(0,i.jsx)(n.code,{children:"viewport"})," meta"]}),"\n",(0,i.jsxs)(n.li,{children:["to override the ",(0,i.jsx)(n.code,{children:"robots"})," meta: you could mark your site as ",(0,i.jsx)(n.code,{children:"noIndex"}),", but except for specific pages that should be indexed"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"ukrainian-translations",children:"Ukrainian translations"}),"\n",(0,i.jsxs)(n.p,{children:["In ",(0,i.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/7953",children:"#7953"}),", we added default classic theme translations for the Ukrainian language."]}),"\n",(0,i.jsx)(n.h2,{id:"other-changes",children:"Other changes"}),"\n",(0,i.jsxs)(n.p,{children:["Check the ",(0,i.jsx)(n.a,{href:"/changelog/2.1.0",children:"2.1.0 changelog entry"})," for an exhaustive list of changes."]})]})}function h(e={}){let{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},80980:function(e,n,s){s.d(n,{Z:()=>a,a:()=>r});var t=s(67294);let i={},o=t.createContext(i);function r(e){let n=t.useContext(o);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),t.createElement(o.Provider,{value:n},e.children)}},46689:function(e){e.exports=JSON.parse('{"permalink":"/blog/2022/09/01/docusaurus-2.1","editUrl":"https://github.com/facebook/docusaurus/edit/main/website/blog/2022/09-01-docusaurus-2.1/index.mdx","source":"@site/blog/2022/09-01-docusaurus-2.1/index.mdx","title":"Docusaurus 2.1","description":"We are happy to announce Docusaurus 2.1, our very first minor version release.","date":"2022-09-01T00:00:00.000Z","tags":[{"inline":false,"label":"Release","permalink":"/blog/tags/release","description":"Blog posts about Docusaurus\' new releases"}],"readingTime":1.725,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer, This Week In React editor","url":"https://thisweekinreact.com","page":{"permalink":"/blog/authors/slorber"},"description":"A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.","socials":{"bluesky":"https://bsky.app/profile/sebastienlorber.com","x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","instagram":"https://www.instagram.com/thisweekinreact","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"}],"frontMatter":{"title":"Docusaurus 2.1","authors":["slorber"],"tags":["release"],"image":"./img/social-card.png"},"unlisted":false,"lastUpdatedAt":1739551601000,"lastUpdatedBy":"S\xe9bastien Lorber","prevItem":{"title":"Docusaurus 2.2","permalink":"/blog/releases/2.2"},"nextItem":{"title":"Announcing Docusaurus 2.0","permalink":"/blog/2022/08/01/announcing-docusaurus-2.0"}}')}}]);
\ No newline at end of file
diff --git a/assets/js/0ec69376.b6955cc0.js b/assets/js/0ec69376.ef470935.js
similarity index 98%
rename from assets/js/0ec69376.b6955cc0.js
rename to assets/js/0ec69376.ef470935.js
index d9bbb4ff2c..636c097add 100644
--- a/assets/js/0ec69376.b6955cc0.js
+++ b/assets/js/0ec69376.ef470935.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["60263"],{9676:function(e,t,s){s.d(t,{Z:()=>a});let a=s.p+"assets/images/social-card-7b2ed059f27fc8b64f3f20025ebb382f.png"},24506:function(e,t,s){s.d(t,{Z:()=>a});let a=s.p+"assets/images/social-card-7b2ed059f27fc8b64f3f20025ebb382f.png"},72345:function(e,t,s){s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>p,frontMatter:()=>o,metadata:()=>a,toc:()=>l});var a=s(23970),r=s(85893),n=s(80980);let o={title:"Docusaurus 3.5",authors:["slorber"],tags:["release"],image:"./img/social-card.png",date:new Date("2024-08-09T00:00:00.000Z")},i=void 0,c={image:s(9676).Z,authorsImageUrls:[void 0]},l=[];function u(e){let t={a:"a",img:"img",p:"p",strong:"strong",...(0,n.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["We are happy to announce ",(0,r.jsx)(t.strong,{children:"Docusaurus 3.5"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["This release contains many ",(0,r.jsx)(t.strong,{children:"new exciting blog features"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Upgrading should be easy. Our ",(0,r.jsx)(t.a,{href:"/community/release-process",children:"release process"})," respects ",(0,r.jsx)(t.a,{href:"https://semver.org/",children:"Semantic Versioning"}),". Minor versions do not include any breaking changes."]}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"Docusaurus blog post social card",src:s(24506).Z+"",width:"1200",height:"600"})})]})}function p(e={}){let{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},80980:function(e,t,s){s.d(t,{Z:()=>i,a:()=>o});var a=s(67294);let r={},n=a.createContext(r);function o(e){let t=a.useContext(n);return a.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),a.createElement(n.Provider,{value:t},e.children)}},23970:function(e){e.exports=JSON.parse('{"permalink":"/blog/releases/3.5","editUrl":"https://github.com/facebook/docusaurus/edit/main/website/blog/releases/3.5/index.mdx","source":"@site/blog/releases/3.5/index.mdx","title":"Docusaurus 3.5","description":"We are happy to announce Docusaurus 3.5.","date":"2024-08-09T00:00:00.000Z","tags":[{"inline":false,"label":"Release","permalink":"/blog/tags/release","description":"Blog posts about Docusaurus\' new releases"}],"readingTime":3.91,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer, This Week In React editor","url":"https://thisweekinreact.com","page":{"permalink":"/blog/authors/slorber"},"description":"A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.","socials":{"bluesky":"https://bsky.app/profile/sebastienlorber.com","x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","instagram":"https://www.instagram.com/thisweekinreact","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"}],"frontMatter":{"title":"Docusaurus 3.5","authors":["slorber"],"tags":["release"],"image":"./img/social-card.png","date":"2024-08-09T00:00:00.000Z"},"unlisted":false,"lastUpdatedAt":1739456991000,"lastUpdatedBy":"S\xe9bastien Lorber","prevItem":{"title":"Docusaurus 3.6","permalink":"/blog/releases/3.6"},"nextItem":{"title":"Docusaurus 3.4","permalink":"/blog/releases/3.4"}}')}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["60263"],{9676:function(e,t,s){s.d(t,{Z:()=>a});let a=s.p+"assets/images/social-card-7b2ed059f27fc8b64f3f20025ebb382f.png"},24506:function(e,t,s){s.d(t,{Z:()=>a});let a=s.p+"assets/images/social-card-7b2ed059f27fc8b64f3f20025ebb382f.png"},72345:function(e,t,s){s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>p,frontMatter:()=>o,metadata:()=>a,toc:()=>l});var a=s(23970),r=s(85893),n=s(80980);let o={title:"Docusaurus 3.5",authors:["slorber"],tags:["release"],image:"./img/social-card.png",date:new Date("2024-08-09T00:00:00.000Z")},i=void 0,c={image:s(9676).Z,authorsImageUrls:[void 0]},l=[];function u(e){let t={a:"a",img:"img",p:"p",strong:"strong",...(0,n.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["We are happy to announce ",(0,r.jsx)(t.strong,{children:"Docusaurus 3.5"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["This release contains many ",(0,r.jsx)(t.strong,{children:"new exciting blog features"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Upgrading should be easy. Our ",(0,r.jsx)(t.a,{href:"/community/release-process",children:"release process"})," respects ",(0,r.jsx)(t.a,{href:"https://semver.org/",children:"Semantic Versioning"}),". Minor versions do not include any breaking changes."]}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"Docusaurus blog post social card",src:s(24506).Z+"",width:"1200",height:"600"})})]})}function p(e={}){let{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},80980:function(e,t,s){s.d(t,{Z:()=>i,a:()=>o});var a=s(67294);let r={},n=a.createContext(r);function o(e){let t=a.useContext(n);return a.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),a.createElement(n.Provider,{value:t},e.children)}},23970:function(e){e.exports=JSON.parse('{"permalink":"/blog/releases/3.5","editUrl":"https://github.com/facebook/docusaurus/edit/main/website/blog/releases/3.5/index.mdx","source":"@site/blog/releases/3.5/index.mdx","title":"Docusaurus 3.5","description":"We are happy to announce Docusaurus 3.5.","date":"2024-08-09T00:00:00.000Z","tags":[{"inline":false,"label":"Release","permalink":"/blog/tags/release","description":"Blog posts about Docusaurus\' new releases"}],"readingTime":3.91,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer, This Week In React editor","url":"https://thisweekinreact.com","page":{"permalink":"/blog/authors/slorber"},"description":"A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.","socials":{"bluesky":"https://bsky.app/profile/sebastienlorber.com","x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","instagram":"https://www.instagram.com/thisweekinreact","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"}],"frontMatter":{"title":"Docusaurus 3.5","authors":["slorber"],"tags":["release"],"image":"./img/social-card.png","date":"2024-08-09T00:00:00.000Z"},"unlisted":false,"lastUpdatedAt":1739551601000,"lastUpdatedBy":"S\xe9bastien Lorber","prevItem":{"title":"Docusaurus 3.6","permalink":"/blog/releases/3.6"},"nextItem":{"title":"Docusaurus 3.4","permalink":"/blog/releases/3.4"}}')}}]);
\ No newline at end of file
diff --git a/assets/js/1267474e.1f8ae8bb.js b/assets/js/1267474e.f2c40aec.js
similarity index 99%
rename from assets/js/1267474e.1f8ae8bb.js
rename to assets/js/1267474e.f2c40aec.js
index aab5726087..e7a113d64d 100644
--- a/assets/js/1267474e.1f8ae8bb.js
+++ b/assets/js/1267474e.f2c40aec.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["7390"],{46597:function(e,t,n){n.r(t),n.d(t,{default:()=>m,frontMatter:()=>l,metadata:()=>r,assets:()=>c,toc:()=>u,contentTitle:()=>d});var r=JSON.parse('{"id":"migration/v2/migration-automated","title":"Automated migration","description":"The migration CLI automatically migrates your v1 website to a v2 website.","source":"@site/docs/migration/v2/migration-automated.mdx","sourceDirName":"migration/v2","slug":"/migration/v2/automated","permalink":"/docs/migration/v2/automated","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/migration/v2/migration-automated.mdx","tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739456991000,"frontMatter":{"slug":"/migration/v2/automated"},"sidebar":"docs","previous":{"title":"Overview","permalink":"/docs/migration/v2"},"next":{"title":"Manual migration","permalink":"/docs/migration/v2/manual"}}'),i=n(85893),a=n(80980),s=n(15398),o=n(58636);let l={slug:"/migration/v2/automated"},d="Automated migration",c={},u=[{value:"Options",id:"options",level:4}];function h(e){let t={admonition:"admonition",code:"code",h1:"h1",h4:"h4",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,a.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"automated-migration",children:"Automated migration"})}),"\n",(0,i.jsx)(t.p,{children:"The migration CLI automatically migrates your v1 website to a v2 website."}),"\n",(0,i.jsx)(t.admonition,{type:"info",children:(0,i.jsx)(t.p,{children:"Manual work is still required after using the migration CLI, as we can't automate a full migration"})}),"\n",(0,i.jsx)(t.p,{children:"The migration CLI migrates:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["Site configurations (from ",(0,i.jsx)(t.code,{children:"siteConfig.js"})," to ",(0,i.jsx)(t.code,{children:"docusaurus.config.js"}),")"]}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.code,{children:"package.json"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.code,{children:"sidebars.json"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.code,{children:"/docs"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.code,{children:"/blog"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.code,{children:"/static"})}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"versioned_sidebar.json"})," and ",(0,i.jsx)(t.code,{children:"/versioned_docs"})," if your site uses versioning"]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"To use the migration CLI, follow these steps:"}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:["Before using the migration CLI, ensure that ",(0,i.jsx)(t.code,{children:"/docs"}),", ",(0,i.jsx)(t.code,{children:"/blog"}),", ",(0,i.jsx)(t.code,{children:"/static"}),", ",(0,i.jsx)(t.code,{children:"sidebars.json"}),", ",(0,i.jsx)(t.code,{children:"siteConfig.js"}),", ",(0,i.jsx)(t.code,{children:"package.json"})," follow the expected structure."]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsx)(t.p,{children:"To migrate your v1 website, run the migration CLI with the appropriate filesystem paths:"}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-bash",children:"# migration command format\nnpx @docusaurus/migrate migrate \n\n# example\nnpx @docusaurus/migrate migrate ./v1-website ./v2-website\n"})}),"\n",(0,i.jsxs)(t.ol,{start:"3",children:["\n",(0,i.jsx)(t.li,{children:"To view your new website locally, go into your v2 website's directory and start your development server."}),"\n"]}),"\n",(0,i.jsxs)(s.Z,{groupId:"npm2yarn",children:[(0,i.jsx)(o.Z,{value:"npm",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-bash",children:"cd ./v2-website\nnpm install\nnpm start\n"})})}),(0,i.jsx)(o.Z,{value:"yarn",label:"Yarn",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-bash",children:"cd ./v2-website\nyarn install\nyarn start\n"})})}),(0,i.jsx)(o.Z,{value:"pnpm",label:"pnpm",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-bash",children:"cd ./v2-website\npnpm install\npnpm start\n"})})})]}),"\n",(0,i.jsx)(t.admonition,{type:"danger",children:(0,i.jsx)(t.p,{children:"The migration CLI updates existing files. Be sure to have committed them first!"})}),"\n",(0,i.jsx)(t.h4,{id:"options",children:"Options"}),"\n",(0,i.jsx)(t.p,{children:"You can add option flags to the migration CLI to automatically migrate Markdown content and pages to v2. It is likely that you will still need to make some manual changes to achieve your desired result."}),"\n",(0,i.jsxs)(t.table,{children:[(0,i.jsx)(t.thead,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.th,{children:"Name"}),(0,i.jsx)(t.th,{children:"Description"})]})}),(0,i.jsxs)(t.tbody,{children:[(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"--mdx"})}),(0,i.jsx)(t.td,{children:"Add this flag to convert Markdown to MDX automatically"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"--page"})}),(0,i.jsx)(t.td,{children:"Add this flag to migrate pages automatically"})]})]})]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-bash",children:"# example using options\nnpx @docusaurus/migrate migrate --mdx --page ./v1-website ./v2-website\n"})}),"\n",(0,i.jsxs)(t.admonition,{type:"danger",children:[(0,i.jsx)(t.p,{children:"The migration of pages and MDX is still a work in progress."}),(0,i.jsxs)(t.p,{children:["We recommend you to try to run the pages without these options, commit, and then try to run the migration again with the ",(0,i.jsx)(t.code,{children:"--page"})," and ",(0,i.jsx)(t.code,{children:"--mdx"})," options."]}),(0,i.jsx)(t.p,{children:"This way, you'd be able to easily inspect and fix the diff."})]})]})}function m(e={}){let{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},58636:function(e,t,n){n.d(t,{Z:()=>a});var r=n(85893);n(67294);var i=n(90496);function a(e){let{children:t,hidden:n,className:a}=e;return(0,r.jsx)("div",{role:"tabpanel",className:(0,i.Z)("tabItem_pnkT",a),hidden:n,children:t})}},15398:function(e,t,n){n.d(t,{Z:()=>j});var r=n(85893),i=n(67294),a=n(90496),s=n(54947),o=n(3620),l=n(844),d=n(97486),c=n(32263),u=n(16971);function h(e){return i.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||i.isValidElement(e)&&function(e){let{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(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.`)})?.filter(Boolean)??[]}function m(e){let{value:t,tabValues:n}=e;return n.some(e=>e.value===t)}var p=n(71607);function x(e){let{className:t,block:n,selectedValue:i,selectValue:o,tabValues:l}=e,d=[],{blockElementScrollPositionUntilNextRender:c}=(0,s.o5)(),u=e=>{let t=e.currentTarget,n=l[d.indexOf(t)].value;n!==i&&(c(t),o(n))},h=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{let n=d.indexOf(e.currentTarget)+1;t=d[n]??d[0];break}case"ArrowLeft":{let n=d.indexOf(e.currentTarget)-1;t=d[n]??d[d.length-1]}}t?.focus()};return(0,r.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.Z)("tabs",{"tabs--block":n},t),children:l.map(e=>{let{value:t,label:n,attributes:s}=e;return(0,r.jsx)("li",{role:"tab",tabIndex:i===t?0:-1,"aria-selected":i===t,ref:e=>{d.push(e)},onKeyDown:h,onClick:u,...s,className:(0,a.Z)("tabs__item","tabItem_AQgk",s?.className,{"tabs__item--active":i===t}),children:n??t},t)})})}function g(e){let{lazy:t,children:n,selectedValue:s}=e,o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){let e=o.find(e=>e.props.value===s);return e?(0,i.cloneElement)(e,{className:(0,a.Z)("margin-top--md",e.props.className)}):null}return(0,r.jsx)("div",{className:"margin-top--md",children:o.map((e,t)=>(0,i.cloneElement)(e,{key:t,hidden:e.props.value!==s}))})}function f(e){let t=function(e){let{defaultValue:t,queryString:n=!1,groupId:r}=e,a=function(e){let{values:t,children:n}=e;return(0,i.useMemo)(()=>{let e=t??h(n).map(e=>{let{props:{value:t,label:n,attributes:r,default:i}}=e;return{value:t,label:n,attributes:r,default:i}});return!function(e){let t=(0,c.lx)(e,(e,t)=>e.value===t.value);if(t.length>0)throw Error(`Docusaurus error: Duplicate values "${t.map(e=>e.value).join(", ")}" found in . Every value needs to be unique.`)}(e),e},[t,n])}(e),[s,p]=(0,i.useState)(()=>(function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw Error(`Docusaurus error: The has a defaultValue "${t}" 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 t}let r=n.find(e=>e.default)??n[0];if(!r)throw Error("Unexpected error: 0 tabValues");return r.value})({defaultValue:t,tabValues:a})),[x,g]=function(e){let{queryString:t=!1,groupId:n}=e,r=(0,o.k6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!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 n??null}({queryString:t,groupId:n});return[(0,d._X)(a),(0,i.useCallback)(e=>{if(!a)return;let t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})},[a,r])]}({queryString:n,groupId:r}),[f,j]=function(e){let{groupId:t}=e,n=t?`docusaurus.tab.${t}`:null,[r,a]=(0,u.Nk)(n);return[r,(0,i.useCallback)(e=>{n&&a.set(e)},[n,a])]}({groupId:r}),b=(()=>{let e=x??f;return m({value:e,tabValues:a})?e:null})();return(0,l.Z)(()=>{b&&p(b)},[b]),{selectedValue:s,selectValue:(0,i.useCallback)(e=>{if(!m({value:e,tabValues:a}))throw Error(`Can't select invalid tab value=${e}`);p(e),g(e),j(e)},[g,j,a]),tabValues:a}}(e);return(0,r.jsxs)("div",{className:(0,a.Z)("tabs-container","tabList_Qoir"),children:[(0,r.jsx)(x,{...t,...e}),(0,r.jsx)(g,{...t,...e})]})}function j(e){let t=(0,p.Z)();return(0,r.jsx)(f,{...e,children:h(e.children)},String(t))}},80980:function(e,t,n){n.d(t,{Z:()=>o,a:()=>s});var r=n(67294);let i={},a=r.createContext(i);function s(e){let t=r.useContext(a);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:s(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["7390"],{46597:function(e,t,n){n.r(t),n.d(t,{default:()=>m,frontMatter:()=>l,metadata:()=>r,assets:()=>c,toc:()=>u,contentTitle:()=>d});var r=JSON.parse('{"id":"migration/v2/migration-automated","title":"Automated migration","description":"The migration CLI automatically migrates your v1 website to a v2 website.","source":"@site/docs/migration/v2/migration-automated.mdx","sourceDirName":"migration/v2","slug":"/migration/v2/automated","permalink":"/docs/migration/v2/automated","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/migration/v2/migration-automated.mdx","tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739551601000,"frontMatter":{"slug":"/migration/v2/automated"},"sidebar":"docs","previous":{"title":"Overview","permalink":"/docs/migration/v2"},"next":{"title":"Manual migration","permalink":"/docs/migration/v2/manual"}}'),i=n(85893),a=n(80980),s=n(15398),o=n(58636);let l={slug:"/migration/v2/automated"},d="Automated migration",c={},u=[{value:"Options",id:"options",level:4}];function h(e){let t={admonition:"admonition",code:"code",h1:"h1",h4:"h4",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,a.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"automated-migration",children:"Automated migration"})}),"\n",(0,i.jsx)(t.p,{children:"The migration CLI automatically migrates your v1 website to a v2 website."}),"\n",(0,i.jsx)(t.admonition,{type:"info",children:(0,i.jsx)(t.p,{children:"Manual work is still required after using the migration CLI, as we can't automate a full migration"})}),"\n",(0,i.jsx)(t.p,{children:"The migration CLI migrates:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["Site configurations (from ",(0,i.jsx)(t.code,{children:"siteConfig.js"})," to ",(0,i.jsx)(t.code,{children:"docusaurus.config.js"}),")"]}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.code,{children:"package.json"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.code,{children:"sidebars.json"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.code,{children:"/docs"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.code,{children:"/blog"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.code,{children:"/static"})}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"versioned_sidebar.json"})," and ",(0,i.jsx)(t.code,{children:"/versioned_docs"})," if your site uses versioning"]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"To use the migration CLI, follow these steps:"}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:["Before using the migration CLI, ensure that ",(0,i.jsx)(t.code,{children:"/docs"}),", ",(0,i.jsx)(t.code,{children:"/blog"}),", ",(0,i.jsx)(t.code,{children:"/static"}),", ",(0,i.jsx)(t.code,{children:"sidebars.json"}),", ",(0,i.jsx)(t.code,{children:"siteConfig.js"}),", ",(0,i.jsx)(t.code,{children:"package.json"})," follow the expected structure."]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsx)(t.p,{children:"To migrate your v1 website, run the migration CLI with the appropriate filesystem paths:"}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-bash",children:"# migration command format\nnpx @docusaurus/migrate migrate \n\n# example\nnpx @docusaurus/migrate migrate ./v1-website ./v2-website\n"})}),"\n",(0,i.jsxs)(t.ol,{start:"3",children:["\n",(0,i.jsx)(t.li,{children:"To view your new website locally, go into your v2 website's directory and start your development server."}),"\n"]}),"\n",(0,i.jsxs)(s.Z,{groupId:"npm2yarn",children:[(0,i.jsx)(o.Z,{value:"npm",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-bash",children:"cd ./v2-website\nnpm install\nnpm start\n"})})}),(0,i.jsx)(o.Z,{value:"yarn",label:"Yarn",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-bash",children:"cd ./v2-website\nyarn install\nyarn start\n"})})}),(0,i.jsx)(o.Z,{value:"pnpm",label:"pnpm",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-bash",children:"cd ./v2-website\npnpm install\npnpm start\n"})})})]}),"\n",(0,i.jsx)(t.admonition,{type:"danger",children:(0,i.jsx)(t.p,{children:"The migration CLI updates existing files. Be sure to have committed them first!"})}),"\n",(0,i.jsx)(t.h4,{id:"options",children:"Options"}),"\n",(0,i.jsx)(t.p,{children:"You can add option flags to the migration CLI to automatically migrate Markdown content and pages to v2. It is likely that you will still need to make some manual changes to achieve your desired result."}),"\n",(0,i.jsxs)(t.table,{children:[(0,i.jsx)(t.thead,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.th,{children:"Name"}),(0,i.jsx)(t.th,{children:"Description"})]})}),(0,i.jsxs)(t.tbody,{children:[(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"--mdx"})}),(0,i.jsx)(t.td,{children:"Add this flag to convert Markdown to MDX automatically"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"--page"})}),(0,i.jsx)(t.td,{children:"Add this flag to migrate pages automatically"})]})]})]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-bash",children:"# example using options\nnpx @docusaurus/migrate migrate --mdx --page ./v1-website ./v2-website\n"})}),"\n",(0,i.jsxs)(t.admonition,{type:"danger",children:[(0,i.jsx)(t.p,{children:"The migration of pages and MDX is still a work in progress."}),(0,i.jsxs)(t.p,{children:["We recommend you to try to run the pages without these options, commit, and then try to run the migration again with the ",(0,i.jsx)(t.code,{children:"--page"})," and ",(0,i.jsx)(t.code,{children:"--mdx"})," options."]}),(0,i.jsx)(t.p,{children:"This way, you'd be able to easily inspect and fix the diff."})]})]})}function m(e={}){let{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},58636:function(e,t,n){n.d(t,{Z:()=>a});var r=n(85893);n(67294);var i=n(90496);function a(e){let{children:t,hidden:n,className:a}=e;return(0,r.jsx)("div",{role:"tabpanel",className:(0,i.Z)("tabItem_pnkT",a),hidden:n,children:t})}},15398:function(e,t,n){n.d(t,{Z:()=>j});var r=n(85893),i=n(67294),a=n(90496),s=n(54947),o=n(3620),l=n(844),d=n(97486),c=n(32263),u=n(16971);function h(e){return i.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||i.isValidElement(e)&&function(e){let{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(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.`)})?.filter(Boolean)??[]}function m(e){let{value:t,tabValues:n}=e;return n.some(e=>e.value===t)}var p=n(71607);function x(e){let{className:t,block:n,selectedValue:i,selectValue:o,tabValues:l}=e,d=[],{blockElementScrollPositionUntilNextRender:c}=(0,s.o5)(),u=e=>{let t=e.currentTarget,n=l[d.indexOf(t)].value;n!==i&&(c(t),o(n))},h=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{let n=d.indexOf(e.currentTarget)+1;t=d[n]??d[0];break}case"ArrowLeft":{let n=d.indexOf(e.currentTarget)-1;t=d[n]??d[d.length-1]}}t?.focus()};return(0,r.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.Z)("tabs",{"tabs--block":n},t),children:l.map(e=>{let{value:t,label:n,attributes:s}=e;return(0,r.jsx)("li",{role:"tab",tabIndex:i===t?0:-1,"aria-selected":i===t,ref:e=>{d.push(e)},onKeyDown:h,onClick:u,...s,className:(0,a.Z)("tabs__item","tabItem_AQgk",s?.className,{"tabs__item--active":i===t}),children:n??t},t)})})}function g(e){let{lazy:t,children:n,selectedValue:s}=e,o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){let e=o.find(e=>e.props.value===s);return e?(0,i.cloneElement)(e,{className:(0,a.Z)("margin-top--md",e.props.className)}):null}return(0,r.jsx)("div",{className:"margin-top--md",children:o.map((e,t)=>(0,i.cloneElement)(e,{key:t,hidden:e.props.value!==s}))})}function f(e){let t=function(e){let{defaultValue:t,queryString:n=!1,groupId:r}=e,a=function(e){let{values:t,children:n}=e;return(0,i.useMemo)(()=>{let e=t??h(n).map(e=>{let{props:{value:t,label:n,attributes:r,default:i}}=e;return{value:t,label:n,attributes:r,default:i}});return!function(e){let t=(0,c.lx)(e,(e,t)=>e.value===t.value);if(t.length>0)throw Error(`Docusaurus error: Duplicate values "${t.map(e=>e.value).join(", ")}" found in . Every value needs to be unique.`)}(e),e},[t,n])}(e),[s,p]=(0,i.useState)(()=>(function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw Error(`Docusaurus error: The has a defaultValue "${t}" 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 t}let r=n.find(e=>e.default)??n[0];if(!r)throw Error("Unexpected error: 0 tabValues");return r.value})({defaultValue:t,tabValues:a})),[x,g]=function(e){let{queryString:t=!1,groupId:n}=e,r=(0,o.k6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!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 n??null}({queryString:t,groupId:n});return[(0,d._X)(a),(0,i.useCallback)(e=>{if(!a)return;let t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})},[a,r])]}({queryString:n,groupId:r}),[f,j]=function(e){let{groupId:t}=e,n=t?`docusaurus.tab.${t}`:null,[r,a]=(0,u.Nk)(n);return[r,(0,i.useCallback)(e=>{n&&a.set(e)},[n,a])]}({groupId:r}),b=(()=>{let e=x??f;return m({value:e,tabValues:a})?e:null})();return(0,l.Z)(()=>{b&&p(b)},[b]),{selectedValue:s,selectValue:(0,i.useCallback)(e=>{if(!m({value:e,tabValues:a}))throw Error(`Can't select invalid tab value=${e}`);p(e),g(e),j(e)},[g,j,a]),tabValues:a}}(e);return(0,r.jsxs)("div",{className:(0,a.Z)("tabs-container","tabList_Qoir"),children:[(0,r.jsx)(x,{...t,...e}),(0,r.jsx)(g,{...t,...e})]})}function j(e){let t=(0,p.Z)();return(0,r.jsx)(f,{...e,children:h(e.children)},String(t))}},80980:function(e,t,n){n.d(t,{Z:()=>o,a:()=>s});var r=n(67294);let i={},a=r.createContext(i);function s(e){let t=r.useContext(a);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:s(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/138ea42e.583b0c59.js b/assets/js/138ea42e.18deb2ad.js
similarity index 98%
rename from assets/js/138ea42e.583b0c59.js
rename to assets/js/138ea42e.18deb2ad.js
index 71e2bbc350..46dda17712 100644
--- a/assets/js/138ea42e.583b0c59.js
+++ b/assets/js/138ea42e.18deb2ad.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["18796"],{54941:function(e,t,a){a.r(t),a.d(t,{assets:()=>u,contentTitle:()=>r,default:()=>d,frontMatter:()=>i,metadata:()=>s,toc:()=>l});var s=a(50457),n=a(85893),o=a(80980);let i={title:"Towards Docusaurus 2",authors:"endiliey",tags:["new","adoption"]},r=void 0,u={authorsImageUrls:[void 0]},l=[];function c(e){let t={a:"a",p:"p",...(0,o.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["Docusaurus was ",(0,n.jsx)(t.a,{href:"https://v1.docusaurus.io/blog/2017/12/14/introducing-docusaurus",children:"officially announced"})," over nine months ago as a way to easily build open source documentation websites. Since then, it has amassed over 8,600 GitHub Stars, and is used by many popular open source projects such as ",(0,n.jsx)(t.a,{href:"https://facebook.github.io/react-native/",children:"React Native"}),", ",(0,n.jsx)(t.a,{href:"https://babeljs.io/",children:"Babel"}),", ",(0,n.jsx)(t.a,{href:"https://jestjs.io/",children:"Jest"}),", ",(0,n.jsx)(t.a,{href:"https://reasonml.github.io/",children:"Reason"})," and ",(0,n.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,n.jsx)(t.p,{children:"There is a saying that the very best software is constantly evolving, and the very worst is not. In case you are not aware, we have been planning and working on the next version of Docusaurus \uD83C\uDF89."})]})}function d(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},80980:function(e,t,a){a.d(t,{Z:()=>r,a:()=>i});var s=a(67294);let n={},o=s.createContext(n);function i(e){let t=s.useContext(o);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),s.createElement(o.Provider,{value:t},e.children)}},50457:function(e){e.exports=JSON.parse('{"permalink":"/blog/2018/09/11/Towards-Docusaurus-2","editUrl":"https://github.com/facebook/docusaurus/edit/main/website/blog/2018/09-11-Towards-Docusaurus-2.mdx","source":"@site/blog/2018/09-11-Towards-Docusaurus-2.mdx","title":"Towards Docusaurus 2","description":"Docusaurus was officially announced over nine months ago as a way to easily build open source documentation websites. Since then, it has amassed over 8,600 GitHub Stars, and is used by many popular open source projects such as React Native, Babel, Jest, Reason and Prettier.","date":"2018-09-11T00:00:00.000Z","tags":[{"inline":false,"label":"New","permalink":"/blog/tags/new"},{"inline":false,"label":"Adoption","permalink":"/blog/tags/adoption"}],"readingTime":9.25,"hasTruncateMarker":true,"authors":[{"name":"Endilie Yacop Sucipto","title":"Maintainer of Docusaurus","url":"https://github.com/endiliey","imageURL":"https://github.com/endiliey.png","key":"endiliey","page":null}],"frontMatter":{"title":"Towards Docusaurus 2","authors":"endiliey","tags":["new","adoption"]},"unlisted":false,"lastUpdatedAt":1739456991000,"lastUpdatedBy":"S\xe9bastien Lorber","prevItem":{"title":"Happy 1st Birthday Slash!","permalink":"/blog/2018/12/14/Happy-First-Birthday-Slash"},"nextItem":{"title":"How I Converted Profilo to Docusaurus in Under 2 Hours","permalink":"/blog/2018/04/30/How-I-Converted-Profilo-To-Docusaurus"}}')}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["18796"],{54941:function(e,t,a){a.r(t),a.d(t,{assets:()=>u,contentTitle:()=>r,default:()=>d,frontMatter:()=>i,metadata:()=>s,toc:()=>l});var s=a(50457),n=a(85893),o=a(80980);let i={title:"Towards Docusaurus 2",authors:"endiliey",tags:["new","adoption"]},r=void 0,u={authorsImageUrls:[void 0]},l=[];function c(e){let t={a:"a",p:"p",...(0,o.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["Docusaurus was ",(0,n.jsx)(t.a,{href:"https://v1.docusaurus.io/blog/2017/12/14/introducing-docusaurus",children:"officially announced"})," over nine months ago as a way to easily build open source documentation websites. Since then, it has amassed over 8,600 GitHub Stars, and is used by many popular open source projects such as ",(0,n.jsx)(t.a,{href:"https://facebook.github.io/react-native/",children:"React Native"}),", ",(0,n.jsx)(t.a,{href:"https://babeljs.io/",children:"Babel"}),", ",(0,n.jsx)(t.a,{href:"https://jestjs.io/",children:"Jest"}),", ",(0,n.jsx)(t.a,{href:"https://reasonml.github.io/",children:"Reason"})," and ",(0,n.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,n.jsx)(t.p,{children:"There is a saying that the very best software is constantly evolving, and the very worst is not. In case you are not aware, we have been planning and working on the next version of Docusaurus \uD83C\uDF89."})]})}function d(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},80980:function(e,t,a){a.d(t,{Z:()=>r,a:()=>i});var s=a(67294);let n={},o=s.createContext(n);function i(e){let t=s.useContext(o);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),s.createElement(o.Provider,{value:t},e.children)}},50457:function(e){e.exports=JSON.parse('{"permalink":"/blog/2018/09/11/Towards-Docusaurus-2","editUrl":"https://github.com/facebook/docusaurus/edit/main/website/blog/2018/09-11-Towards-Docusaurus-2.mdx","source":"@site/blog/2018/09-11-Towards-Docusaurus-2.mdx","title":"Towards Docusaurus 2","description":"Docusaurus was officially announced over nine months ago as a way to easily build open source documentation websites. Since then, it has amassed over 8,600 GitHub Stars, and is used by many popular open source projects such as React Native, Babel, Jest, Reason and Prettier.","date":"2018-09-11T00:00:00.000Z","tags":[{"inline":false,"label":"New","permalink":"/blog/tags/new"},{"inline":false,"label":"Adoption","permalink":"/blog/tags/adoption"}],"readingTime":9.25,"hasTruncateMarker":true,"authors":[{"name":"Endilie Yacop Sucipto","title":"Maintainer of Docusaurus","url":"https://github.com/endiliey","imageURL":"https://github.com/endiliey.png","key":"endiliey","page":null}],"frontMatter":{"title":"Towards Docusaurus 2","authors":"endiliey","tags":["new","adoption"]},"unlisted":false,"lastUpdatedAt":1739551601000,"lastUpdatedBy":"S\xe9bastien Lorber","prevItem":{"title":"Happy 1st Birthday Slash!","permalink":"/blog/2018/12/14/Happy-First-Birthday-Slash"},"nextItem":{"title":"How I Converted Profilo to Docusaurus in Under 2 Hours","permalink":"/blog/2018/04/30/How-I-Converted-Profilo-To-Docusaurus"}}')}}]);
\ No newline at end of file
diff --git a/assets/js/141512d1.b3b18081.js b/assets/js/141512d1.e14139e9.js
similarity index 99%
rename from assets/js/141512d1.b3b18081.js
rename to assets/js/141512d1.e14139e9.js
index 86f4640f40..68ccfdf6d0 100644
--- a/assets/js/141512d1.b3b18081.js
+++ b/assets/js/141512d1.e14139e9.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["80261"],{55732:function(e,n,s){s.d(n,{Z:()=>r});let r=s.p+"assets/images/social-card-1c688c53b51bdaa6e15ae532bf756276.png"},85345:function(e,n,s){s.d(n,{Z:()=>r});let r=s.p+"assets/images/mdx-checker-output-0f96cc19fd3ed4d55901ca90ad657c14.png"},51476:function(e,n,s){s.d(n,{Z:()=>r});let r=s.p+"assets/images/mdx2-playground-options-eab88e8328a6902759c4236ffc93d9c6.png"},32007:function(e,n,s){s.d(n,{Z:()=>r});let r=s.p+"assets/images/social-card-1c688c53b51bdaa6e15ae532bf756276.png"},27753:function(e,n,s){s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>a,default:()=>h,frontMatter:()=>t,metadata:()=>r,toc:()=>d});var r=s(24174),o=s(85893),i=s(80980);let t={title:"Preparing your site for Docusaurus v3",authors:["slorber"],tags:["maintenance"],slug:"/preparing-your-site-for-docusaurus-v3",image:"./img/social-card.png"},a=void 0,c={image:s(55732).Z,authorsImageUrls:[void 0]},d=[{value:"Preparatory work",id:"preparatory-work",level:2},{value:"Preparing content for MDX v3",id:"preparing-content-for-mdx-v3",level:2},{value:"Using the MDX playground",id:"using-the-mdx-playground",level:3},{value:"Using the MDX checker CLI",id:"using-the-mdx-checker-cli",level:3},{value:"Common MDX problems",id:"common-mdx-problems",level:3},{value:"Bad usage of {",id:"bad-usage-of-",level:4},{value:"Bad usage of <",id:"bad-usage-of--1",level:4},{value:"Bad usage of GFM Autolink",id:"bad-usage-of-gfm-autolink",level:4},{value:"Lower-case MDXComponent mapping",id:"lower-case-mdxcomponent-mapping",level:4},{value:"Unintended extra paragraphs",id:"unintended-extra-paragraphs",level:4},{value:"Unintended usage of directives",id:"unintended-usage-of-directives",level:4},{value:"Unsupported indented code blocks",id:"unsupported-indented-code-blocks",level:4},{value:"MDX plugins",id:"mdx-plugins",level:3},{value:"Other breaking changes",id:"other-breaking-changes",level:2},{value:"Node.js 18.0",id:"nodejs-180",level:3},{value:"React 18.0",id:"react-180",level:3},{value:"TypeScript 5.0",id:"typescript-50",level:3},{value:"TypeScript base config",id:"typescript-base-config",level:3},{value:"Admonition warning",id:"admonition-warning",level:3},{value:"Versioned sidebars",id:"versioned-sidebars",level:3},{value:"Try Docusaurus v3 today",id:"try-docusaurus-v3-today",level:2},{value:"Ask for help",id:"ask-for-help",level:2},{value:"Conclusion",id:"conclusion",level:2}];function l(e){let n={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",h2:"h2",h3:"h3",h4:"h4",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components},{Details:r}=n;return r||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,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.admonition,{type:"warning",children:(0,o.jsxs)(n.p,{children:["This blog post was written when Docusaurus v3 was in beta. There are some changes in dependency versions and upgrade steps you should be aware of if upgrading to Docusaurus v3 current stable releases. Use the ",(0,o.jsx)(n.a,{href:"https://docusaurus.io/docs/next/migration/v3",children:"upgrade guide"})," for the most up-to-date migration steps."]})}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.strong,{children:"Docusaurus v3"})," is now ",(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/9312",children:(0,o.jsx)(n.strong,{children:"in beta"})})," and the official release is around the corner. This is the perfect time to start ",(0,o.jsx)(n.strong,{children:"preparing your site"})," for this new major version."]}),"\n",(0,o.jsxs)(n.p,{children:["Docusaurus v3 comes with a few ",(0,o.jsx)(n.strong,{children:"breaking changes"}),", many of which can be ",(0,o.jsx)(n.strong,{children:"handled today under Docusaurus v2"}),". Preparing your site ahead of time can be done incrementally, and will make it easier to upgrade to v3."]}),"\n",(0,o.jsxs)(n.p,{children:["The main breaking change is the upgrade from MDX v1 to MDX v3. Read the ",(0,o.jsx)(n.a,{href:"https://mdxjs.com/blog/v2/",children:(0,o.jsx)(n.strong,{children:"MDX v2"})})," and ",(0,o.jsx)(n.a,{href:"https://mdxjs.com/blog/v3/",children:(0,o.jsx)(n.strong,{children:"MDX v3"})})," release notes for details. MDX will now compile your Markdown content ",(0,o.jsx)(n.strong,{children:"more strictly"})," and with ",(0,o.jsx)(n.strong,{children:"subtle differences"}),"."]}),"\n",(0,o.jsx)(n.p,{children:"This article will mostly focus on how to prepare your content for this new MDX version, and will also list a few other breaking changes that you can handle today."}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"Preparing your site for Docusaurus v3 - social card",src:s(32007).Z+"",width:"1040",height:"546"})}),"\n",(0,o.jsx)(n.admonition,{type:"warning",children:(0,o.jsxs)(n.p,{children:["This article mentions most Docusaurus v3 breaking changes, but is not exhaustive. Read the ",(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/9312",children:"v3.0.0-beta.0 release notes"})," for an exhaustive list."]})}),"\n",(0,o.jsxs)(n.admonition,{title:"Don't be afraid",type:"tip",children:[(0,o.jsx)(n.p,{children:"There's a lot of content in this blog post, but many Docusaurus v2 sites can upgrade with very few changes."}),(0,o.jsxs)(n.p,{children:["If your site is relatively small, with only a few customizations, you can probably ",(0,o.jsx)(n.a,{href:"#try-docusaurus-v3-today",children:"upgrade to Docusaurus v3"})," immediately."]})]}),"\n",(0,o.jsx)(n.h2,{id:"preparatory-work",children:"Preparatory work"}),"\n",(0,o.jsxs)(n.p,{children:["Before preparing for the Docusaurus v3 upgrade, we recommend upgrading to the latest ",(0,o.jsx)(n.a,{href:"/versions",children:"Docusaurus v2 version"}),"."]}),"\n",(0,o.jsxs)(n.p,{children:["Depending on the complexity of your site, it may be a good idea to adopt the ",(0,o.jsx)(n.a,{href:"/blog/upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing",children:"visual regression testing workflow"})," that we recently presented. It could help you catch unexpected visual side effects occurring during the Docusaurus v3 upgrade."]}),"\n",(0,o.jsxs)(n.p,{children:["We also recommend using the ",(0,o.jsx)(n.code,{children:".mdx"})," extension whenever you use JSX, ",(0,o.jsx)(n.code,{children:"import"}),", or ",(0,o.jsx)(n.code,{children:"export"})," (i.e. MDX features) inside a Markdown file. It is semantically more correct and improves compatibility with external tools (IDEs, formatters, linters, etc.). In future versions of Docusaurus, ",(0,o.jsx)(n.code,{children:".md"})," files will be parsed as standard ",(0,o.jsx)(n.a,{href:"https://commonmark.org/",children:"CommonMark"}),", which does not support these features. In Docusaurus v3, ",(0,o.jsx)(n.code,{children:".md"})," files keep being compiled as MDX files, but it will be possible to ",(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/issues/3018",children:"opt-in for CommonMark"}),"."]}),"\n",(0,o.jsx)(n.h2,{id:"preparing-content-for-mdx-v3",children:"Preparing content for MDX v3"}),"\n",(0,o.jsxs)(n.p,{children:["MDX is a major dependency of Docusaurus responsible for compiling your ",(0,o.jsx)(n.code,{children:".md"})," and ",(0,o.jsx)(n.code,{children:".mdx"})," files to React components."]}),"\n",(0,o.jsxs)(n.p,{children:["MDX v3 is much better, but also comes with changes that probably require you to refactor your content a bit. MDX v3 is stricter, and some components that compiled fine under v1 might now fail to compile under v3, most likely because of ",(0,o.jsx)(n.code,{children:"{"})," and ",(0,o.jsx)(n.code,{children:"<"})," characters."]}),"\n",(0,o.jsxs)(n.p,{children:["Upgrading MDX comes with all the breaking changes documented on the ",(0,o.jsx)(n.a,{href:"https://mdxjs.com/blog/v2/",children:"MDX v2"})," and ",(0,o.jsx)(n.a,{href:"https://mdxjs.com/blog/v3/",children:"MDX v3"})," release blog posts. Most breaking changes come from MDX v2. The ",(0,o.jsx)(n.a,{href:"https://mdxjs.com/migrating/v2/",children:"MDX v2 migration guide"})," has a section on how to ",(0,o.jsx)(n.a,{href:"https://mdxjs.com/migrating/v2/#update-mdx-files",children:"update MDX files"})," that will be particularly relevant to us. Also make sure to read the ",(0,o.jsx)(n.a,{href:"https://mdxjs.com/docs/troubleshooting-mdx/",children:"Troubleshooting MDX"})," page that can help you interpret common MDX error messages."]}),"\n",(0,o.jsxs)(n.p,{children:["Make sure to also read our updated ",(0,o.jsx)(n.a,{href:"/docs/markdown-features/react",children:(0,o.jsx)(n.strong,{children:"MDX and React"})})," documentation page."]}),"\n",(0,o.jsx)(n.admonition,{title:"Ask for help",type:"tip",children:(0,o.jsxs)(n.p,{children:["We have a dedicated ",(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/9053",children:"MDX v3 - Upgrade Support"})," discussion."]})}),"\n",(0,o.jsx)(n.h3,{id:"using-the-mdx-playground",children:"Using the MDX playground"}),"\n",(0,o.jsxs)(n.p,{children:["The MDX playground is your new best friend. It permits to understand how your content is ",(0,o.jsx)(n.strong,{children:"compiled to React components"}),", and troubleshoot compilation or rendering issues in isolation."]}),"\n",(0,o.jsx)(n.p,{children:"Each MDX version comes with its own playground:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://mdxjs.com/playground/",children:"MDX playground - current version"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://mdx-git-renovate-babel-monorepo-mdx.vercel.app/playground/",children:"MDX playground - v1"})}),"\n"]}),"\n",(0,o.jsxs)(r,{children:[(0,o.jsx)("summary",{children:"Configuring the MDX playground options for Docusaurus"}),(0,o.jsxs)(n.p,{children:["To obtain a compilation behavior similar to what Docusaurus v2 uses, please turn on these options on the ",(0,o.jsx)(n.a,{href:"https://mdxjs.com/playground/",children:"MDX playground"}),":"]}),(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["Use ",(0,o.jsx)(n.code,{children:"MDX"})]}),"\n",(0,o.jsxs)(n.li,{children:["Use ",(0,o.jsx)(n.code,{children:"remark-gfm"})]}),"\n",(0,o.jsxs)(n.li,{children:["Use ",(0,o.jsx)(n.code,{children:"remark-directive"})]}),"\n"]}),(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"Screenshot of the MDX playground's options panel, with only the "Use MDX", "Use remark-gfm", and "Use remark-directive" options checked",src:s(51476).Z+"",width:"1968",height:"1316"})})]}),"\n",(0,o.jsx)(n.p,{children:"Using the two MDX playgrounds side-by-side, you will soon notice that some content is compiled differently or fails to compile in v3."}),"\n",(0,o.jsx)(n.admonition,{title:"Making your content future-proof",type:"tip",children:(0,o.jsxs)(n.p,{children:["The goal will be to refactor your problematic content so that it ",(0,o.jsx)(n.strong,{children:"works fine with both versions of MDX"}),". This way, when you upgrade to Docusaurus v3, this content will already work out-of-the-box."]})}),"\n",(0,o.jsx)(n.h3,{id:"using-the-mdx-checker-cli",children:"Using the MDX checker CLI"}),"\n",(0,o.jsxs)(n.p,{children:["We provide a ",(0,o.jsx)(n.a,{href:"https://github.com/slorber/docusaurus-mdx-checker",children:"docusaurus-mdx-checker"})," CLI that permits to easily spot problematic content. Run this command today on your Docusaurus v2 site to obtain a list of files that will fail to compile under MDX v3."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-bash",children:"npx docusaurus-mdx-checker\n"})}),"\n",(0,o.jsx)(n.p,{children:"For each compilation issue, the CLI will log the file path and a line number to look at."}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"Screenshot of the terminal showing an example MDX checker CLI output, with a few error messages",src:s(85345).Z+"",width:"1161",height:"417"})}),"\n",(0,o.jsx)(n.admonition,{type:"tip",children:(0,o.jsx)(n.p,{children:"Use this CLI to estimate of how much work will be required to make your content compatible with MDX v3."})}),"\n",(0,o.jsxs)(n.admonition,{type:"warning",children:[(0,o.jsx)(n.p,{children:"This CLI is a best effort, and will only report compilation errors."}),(0,o.jsxs)(n.p,{children:["It will not report subtle compilation changes that do not produce errors but can affect how your content is displayed. To catch these problems, we recommend using ",(0,o.jsx)(n.a,{href:"/blog/upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing",children:"visual regression tests"}),"."]})]}),"\n",(0,o.jsx)(n.h3,{id:"common-mdx-problems",children:"Common MDX problems"}),"\n",(0,o.jsx)(n.p,{children:"We upgraded a few Docusaurus sites to Docusaurus v3 and MDX v3:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8288",children:"Docusaurus PR"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://github.com/facebook/react-native-website/pull/3780",children:"React-Native PR"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://github.com/jestjs/jest/pull/14463",children:"Jest PR"})}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:"These upgrades permitted us to aggregate the most common content problems, and document how to best handle them."}),"\n",(0,o.jsxs)(n.h4,{id:"bad-usage-of-",children:["Bad usage of ",(0,o.jsx)(n.code,{children:"{"})]}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"{"})," character is used for opening ",(0,o.jsx)(n.a,{href:"https://mdxjs.com/docs/what-is-mdx/#expressions",children:"JavaScript expressions"}),". MDX will now fail if what you put inside ",(0,o.jsx)(n.code,{children:"{expression}"})," is not a valid expression."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-md",metastring:'title="example.md"',children:"The object shape looks like {username: string, age: number}\n"})}),"\n",(0,o.jsx)(n.admonition,{title:"Error message",type:"danger",children:(0,o.jsxs)(n.blockquote,{children:["\n",(0,o.jsx)(n.p,{children:"Could not parse expression with acorn: Unexpected content after expression"}),"\n"]})}),"\n",(0,o.jsxs)(n.admonition,{title:"How to prepare",type:"tip",children:[(0,o.jsx)(n.p,{children:"Available options to fix this error:"}),(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["Use inline code: ",(0,o.jsx)(n.code,{children:"{username: string, age: number}"})]}),"\n",(0,o.jsxs)(n.li,{children:["Use the HTML code: ",(0,o.jsx)(n.code,{children:"{"})]}),"\n",(0,o.jsxs)(n.li,{children:["Escape it: ",(0,o.jsx)(n.code,{children:"\\{"})]}),"\n"]})]}),"\n",(0,o.jsxs)(n.h4,{id:"bad-usage-of--1",children:["Bad usage of ",(0,o.jsx)(n.code,{children:"<"})]}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"<"})," character is used for opening ",(0,o.jsx)(n.a,{href:"https://mdxjs.com/docs/what-is-mdx/#jsx",children:"JSX tags"}),". MDX will now fail if it thinks your JSX is invalid."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-md",metastring:'title="example.md"',children:'Use Android version <5\n\nYou can use a generic type like Array\n\nFollow the template "Road to "\n'})}),"\n",(0,o.jsxs)(n.admonition,{title:"Error messages",type:"danger",children:[(0,o.jsxs)(n.blockquote,{children:["\n",(0,o.jsxs)(n.p,{children:["Unexpected character ",(0,o.jsx)(n.code,{children:"5"})," (U+0035) before name, expected a character that can start a name, such as a letter, ",(0,o.jsx)(n.code,{children:"$"}),", or ",(0,o.jsx)(n.code,{children:"_"})]}),"\n"]}),(0,o.jsxs)(n.blockquote,{children:["\n",(0,o.jsxs)(n.p,{children:["Expected a closing tag for ",(0,o.jsx)(n.code,{children:""})," (1:6-1:9) before the end of ",(0,o.jsx)(n.code,{children:"paragraph"})," end-tag-mismatch mdast-util-mdx-jsx"]}),"\n"]}),(0,o.jsxs)(n.blockquote,{children:["\n",(0,o.jsxs)(n.p,{children:["Expected a closing tag for ",(0,o.jsx)(n.code,{children:""})," (134:19-134:39) before the end of ",(0,o.jsx)(n.code,{children:"paragraph"})]}),"\n"]})]}),"\n",(0,o.jsxs)(n.admonition,{title:"How to prepare",type:"tip",children:[(0,o.jsx)(n.p,{children:"Available options to fix this error:"}),(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["Use inline code: ",(0,o.jsx)(n.code,{children:"Array"})]}),"\n",(0,o.jsxs)(n.li,{children:["Use the HTML code: ",(0,o.jsx)(n.code,{children:"<"})," or ",(0,o.jsx)(n.code,{children:"<"})]}),"\n",(0,o.jsxs)(n.li,{children:["Escape it: ",(0,o.jsx)(n.code,{children:"\\<"})," (unfortunately the ",(0,o.jsx)(n.code,{children:"\\"})," will be displayed under MDX v1)"]}),"\n"]})]}),"\n",(0,o.jsx)(n.h4,{id:"bad-usage-of-gfm-autolink",children:"Bad usage of GFM Autolink"}),"\n",(0,o.jsxs)(n.p,{children:["Docusaurus supports ",(0,o.jsx)(n.a,{href:"https://github.github.com/gfm/",children:"GitHub Flavored Markdown (GFM)"}),", but ",(0,o.jsx)(n.a,{href:"https://github.github.com/gfm/#autolinks",children:"autolink"})," using the ",(0,o.jsx)(n.code,{children:""})," syntax is not supported anymore by MDX."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-md",metastring:'title="example.md"',children:"\n\n\n"})}),"\n",(0,o.jsxs)(n.admonition,{title:"Error messages",type:"danger",children:[(0,o.jsxs)(n.blockquote,{children:["\n",(0,o.jsxs)(n.p,{children:["Unexpected character ",(0,o.jsx)(n.code,{children:"@"})," (U+0040) in name, expected a name character such as letters, digits, ",(0,o.jsx)(n.code,{children:"$"}),", or ",(0,o.jsx)(n.code,{children:"_"}),"; whitespace before attributes; or the end of the tag (note: to create a link in MDX, use ",(0,o.jsx)(n.code,{children:"[text](url)"}),")"]}),"\n"]}),(0,o.jsxs)(n.blockquote,{children:["\n",(0,o.jsxs)(n.p,{children:["Unexpected character ",(0,o.jsx)(n.code,{children:"/"})," (U+002F) before local name, expected a character that can start a name, such as a letter, ",(0,o.jsx)(n.code,{children:"$"}),", or ",(0,o.jsx)(n.code,{children:"_"})," (note: to create a link in MDX, use ",(0,o.jsx)(n.code,{children:"[text](url)"}),")"]}),"\n"]})]}),"\n",(0,o.jsxs)(n.admonition,{title:"How to prepare",type:"tip",children:[(0,o.jsxs)(n.p,{children:["Use regular Markdown links, or remove the ",(0,o.jsx)(n.code,{children:"<"})," and ",(0,o.jsx)(n.code,{children:">"}),". MDX and GFM are able to autolink literals already."]}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-md",metastring:'title="example.md"',children:"sebastien@thisweekinreact.com\n[sebastien@thisweekinreact.com](mailto:sebastien@thisweekinreact.com)\n\nhttp://localhost:3000\n[http://localhost:3000](http://localhost:3000)\n"})})]}),"\n",(0,o.jsx)(n.h4,{id:"lower-case-mdxcomponent-mapping",children:"Lower-case MDXComponent mapping"}),"\n",(0,o.jsxs)(n.p,{children:["For users providing a ",(0,o.jsxs)(n.a,{href:"/docs/markdown-features/react#mdx-component-scope",children:["custom ",(0,o.jsx)(n.code,{children:"MDXComponent"}),"mapping"]}),', components are now "sandboxed":']}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["a ",(0,o.jsx)(n.code,{children:"MDXComponent"})," mapping for ",(0,o.jsx)(n.code,{children:"h1"})," only gets used for ",(0,o.jsx)(n.code,{children:"# hi"})," but not for ",(0,o.jsx)(n.code,{children:"
hi
"})]}),"\n",(0,o.jsxs)(n.li,{children:["a ",(0,o.jsx)(n.strong,{children:"lower-cased"})," custom element name will not be substituted by its respective ",(0,o.jsx)(n.code,{children:"MDXComponent"})," component anymore"]}),"\n"]}),"\n",(0,o.jsx)(n.admonition,{title:"visual difference",type:"danger",children:(0,o.jsxs)(n.p,{children:["Your ",(0,o.jsxs)(n.a,{href:"/docs/markdown-features/react#mdx-component-scope",children:[(0,o.jsx)(n.code,{children:"MDXComponent"})," component mapping"]})," might not be applied as before, and your custom components might no longer be used."]})}),"\n",(0,o.jsxs)(n.admonition,{title:"How to prepare",type:"tip",children:[(0,o.jsxs)(n.p,{children:["For native Markdown elements, you can keep using ",(0,o.jsx)(n.strong,{children:"lower-case"}),": ",(0,o.jsx)(n.code,{children:"p"}),", ",(0,o.jsx)(n.code,{children:"h1"}),", ",(0,o.jsx)(n.code,{children:"img"}),", ",(0,o.jsx)(n.code,{children:"a"}),"..."]}),(0,o.jsxs)(n.p,{children:["For any other element, ",(0,o.jsx)(n.strong,{children:"use upper-case names"}),"."]}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-diff",metastring:'title="src/theme/MDXComponents.js"',children:' import MDXComponents from \'@theme-original/MDXComponents\';\n\n export default {\n ...MDXComponents,\n p: (props) => \n- myElement: (props) => ,\n+ MyElement: (props) => ,\n };\n'})})]}),"\n",(0,o.jsx)(n.h4,{id:"unintended-extra-paragraphs",children:"Unintended extra paragraphs"}),"\n",(0,o.jsxs)(n.p,{children:["In MDX, it is now possible to interleave JSX and Markdown more easily without requiring extra line breaks. Writing content on multiple lines can also produce new expected ",(0,o.jsx)(n.code,{children:"
"})," tags."]}),"\n",(0,o.jsxs)(n.admonition,{title:"visual difference",type:"danger",children:[(0,o.jsx)(n.p,{children:"See how this content is rendered differently by MDX v1 and v3."}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-md",metastring:'title="example.md"',children:"
\n"})})]}),"\n",(0,o.jsxs)(n.admonition,{title:"How to prepare",type:"tip",children:[(0,o.jsxs)(n.p,{children:["If you don't want an extra ",(0,o.jsx)(n.code,{children:"
"})," tag, refactor content on a case by case basis to use a single-line JSX tag."]}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-diff",children:' \n \n- \n- My image caption\n- \n+ My image caption\n \n'})}),(0,o.jsxs)(n.p,{children:['If your content contains "Markdown inlines" (',(0,o.jsx)(n.code,{children:"**"}),", ",(0,o.jsx)(n.code,{children:"*"}),", ",(0,o.jsx)(n.code,{children:"_"}),", ",(0,o.jsx)(n.code,{children:"[link](/path)"}),"), you might not be able to refactor it ahead of time, and will have to do it alongside the Docusaurus v3 upgrade."]})]}),"\n",(0,o.jsx)(n.h4,{id:"unintended-usage-of-directives",children:"Unintended usage of directives"}),"\n",(0,o.jsxs)(n.p,{children:["Docusaurus v3 now uses ",(0,o.jsx)(n.a,{href:"https://talk.commonmark.org/t/generic-directives-plugins-syntax/444",children:"Markdown Directives"})," (implemented with ",(0,o.jsx)(n.a,{href:"https://github.com/remarkjs/remark-directive",children:"remark-directive"}),") as a generic way to provide support for admonitions, and other upcoming Docusaurus features."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-md",metastring:'title="example.md"',children:"This is a :textDirective\n\n::leafDirective\n\n:::containerDirective\n\nContainer directive content\n\n:::\n"})}),"\n",(0,o.jsxs)(n.admonition,{title:"Visual change",type:"danger",children:[(0,o.jsx)(n.p,{children:"Directives are parsed with the purpose of being handled by other Remark plugins. Unhandled directives will be ignored, and won't be rendered back in their original form."}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-md",metastring:'title="example.md"',children:"The AWS re:Invent conf is great\n"})}),(0,o.jsxs)(n.p,{children:["Due to ",(0,o.jsx)(n.code,{children:":Invent"})," being parsed as a text directive, this will now be rendered as:"]}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{children:"The AWS re\nconf is great\n"})})]}),"\n",(0,o.jsx)(n.admonition,{title:"How to prepare",type:"tip",children:(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["Use the HTML code: ",(0,o.jsx)(n.code,{children:":"})]}),"\n",(0,o.jsxs)(n.li,{children:["Add a space after ",(0,o.jsx)(n.code,{children:":"})," (if it makes sense): ",(0,o.jsx)(n.code,{children:": text"})]}),"\n",(0,o.jsxs)(n.li,{children:["Escape it: ",(0,o.jsx)(n.code,{children:"\\:"})," (unfortunately the ",(0,o.jsx)(n.code,{children:"\\"})," will be displayed under MDX v1)"]}),"\n"]})}),"\n",(0,o.jsx)(n.h4,{id:"unsupported-indented-code-blocks",children:"Unsupported indented code blocks"}),"\n",(0,o.jsx)(n.p,{children:"MDX does not transform indented text as code blocks anymore."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-md",metastring:'title="example.md"',children:' console.log("hello");\n'})}),"\n",(0,o.jsx)(n.admonition,{title:"Visual change",type:"danger",children:(0,o.jsx)(n.p,{children:"The upgrade does not generally produce new MDX compilation errors, but can lead to content being rendered in an unexpected way because there isn't a code block anymore."})}),"\n",(0,o.jsxs)(n.admonition,{title:"How to prepare",type:"tip",children:[(0,o.jsx)(n.p,{children:"Use the regular code block syntax instead of indentation:"}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-md",metastring:'title="example.md"',children:"```js\nconsole.log('hello');\n```\n"})})]}),"\n",(0,o.jsx)(n.h3,{id:"mdx-plugins",children:"MDX plugins"}),"\n",(0,o.jsxs)(n.p,{children:["All the official packages (Unified, Remark, Rehype...) in the MDX ecosystem are now ",(0,o.jsx)(n.a,{href:"https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c",children:(0,o.jsx)(n.strong,{children:"ES Modules only"})})," and do not support ",(0,o.jsx)(n.a,{href:"https://nodejs.org/api/modules.html#modules-commonjs-modules",children:"CommonJS"})," anymore."]}),"\n",(0,o.jsxs)(n.p,{children:["In practice this means that you can't do ",(0,o.jsx)(n.code,{children:'require("remark-plugin")'})," anymore."]}),"\n",(0,o.jsxs)(n.admonition,{title:"How to prepare",type:"tip",children:[(0,o.jsxs)(n.p,{children:["Docusaurus v3 now supports ",(0,o.jsx)(n.a,{href:"https://flaviocopes.com/es-modules/",children:(0,o.jsx)(n.strong,{children:"ES Modules"})})," configuration files. We recommend that you migrate your config file to ES module, that enables you to import the Remark plugins easily:"]}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"import remarkPlugin from 'remark-plugin';\n\nexport default {\n title: 'Docusaurus',\n /* site config using remark plugins here */\n};\n"})}),(0,o.jsxs)(n.p,{children:["If you want to keep using CommonJS modules, you can use dynamic imports as a workaround that enables you to import ES modules inside a CommonJS module. Fortunately, the ",(0,o.jsx)(n.a,{href:"/docs/configuration#syntax-to-declare-docusaurus-config",children:"Docusaurus config supports the usage of an async function"})," to let you do so."]}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"module.exports = async function () {\n const myPlugin = (await import('remark-plugin')).default;\n return {\n // site config...\n };\n};\n"})})]}),"\n",(0,o.jsx)(n.admonition,{title:"For plugin authors",type:"info",children:(0,o.jsxs)(n.p,{children:["If you created custom Remark or Rehype plugins, you may need to refactor those, or eventually rewrite them completely, due to how the new AST is structured. We have created a ",(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/9337",children:"dedicated support discussion"})," to help plugin authors upgrade their code."]})}),"\n",(0,o.jsx)(n.h2,{id:"other-breaking-changes",children:"Other breaking changes"}),"\n",(0,o.jsx)(n.p,{children:"Apart from MDX, there are other breaking changes that you can already prepare your site for, notably major version upgrades of important dependencies."}),"\n",(0,o.jsx)(n.h3,{id:"nodejs-180",children:"Node.js 18.0"}),"\n",(0,o.jsxs)(n.p,{children:["Node.js 16 ",(0,o.jsx)(n.a,{href:"https://nodejs.org/en/blog/announcements/nodejs16-eol",children:"reached End-of-Life"}),", and Docusaurus v3 now requires ",(0,o.jsx)(n.strong,{children:"Node.js >= 18.0"}),"."]}),"\n",(0,o.jsx)(n.admonition,{title:"How to prepare",type:"tip",children:(0,o.jsx)(n.p,{children:"Upgrade your Docusaurus v2 site to Node.js 18 before upgrading to Docusaurus v3."})}),"\n",(0,o.jsx)(n.h3,{id:"react-180",children:"React 18.0"}),"\n",(0,o.jsxs)(n.p,{children:["Docusaurus v3 now requires ",(0,o.jsx)(n.strong,{children:"React >= 18.0"}),"."]}),"\n",(0,o.jsx)(n.p,{children:"React 18 comes with its own breaking changes that should be relatively easy to handle, depending on the amount of custom React code you created for your site."}),"\n",(0,o.jsx)(n.p,{children:"Simple Docusaurus sites that only use our official theme code without swizzling do not have anything to do."}),"\n",(0,o.jsxs)(n.admonition,{title:"How to prepare",type:"tip",children:[(0,o.jsxs)(n.p,{children:["Read the official ",(0,o.jsx)(n.a,{href:"https://react.dev/blog/2022/03/29/react-v18",children:"React v18.0"})," and ",(0,o.jsx)(n.a,{href:"https://react.dev/blog/2022/03/08/react-18-upgrade-guide",children:"How to Upgrade to React 18"}),", and look at your first-party React code to figure out which components might be affected this React 18 upgrade."]}),(0,o.jsx)(n.p,{children:"We recommend to particularly look for:"}),(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"Automatic batching for stateful components"}),"\n",(0,o.jsx)(n.li,{children:"New React hydration errors reported to the console"}),"\n"]})]}),"\n",(0,o.jsx)(n.h3,{id:"typescript-50",children:"TypeScript 5.0"}),"\n",(0,o.jsxs)(n.p,{children:["Docusaurus v3 now requires ",(0,o.jsx)(n.strong,{children:"TypeScript >= 5.0"}),"."]}),"\n",(0,o.jsx)(n.admonition,{title:"How to prepare",type:"tip",children:(0,o.jsx)(n.p,{children:"Upgrade your Docusaurus v2 site to TypeScript 5 before upgrading to Docusaurus v3."})}),"\n",(0,o.jsx)(n.h3,{id:"typescript-base-config",children:"TypeScript base config"}),"\n",(0,o.jsxs)(n.p,{children:["The official Docusaurus TypeScript config has been re-internalized from the external package ",(0,o.jsx)(n.a,{href:"https://www.npmjs.com/package/@tsconfig/docusaurus",children:(0,o.jsx)(n.code,{children:"@tsconfig/docusaurus"})})," to our new monorepo package ",(0,o.jsx)(n.a,{href:"https://www.npmjs.com/package/@docusaurus/tsconfig",children:(0,o.jsx)(n.code,{children:"@docusaurus/tsconfig"})}),"."]}),"\n",(0,o.jsx)(n.p,{children:"This new package is versioned alongside all the other Docusaurus core packages, and will be used to ensure TypeScript retro-compatibility and breaking changes on major version upgrades."}),"\n",(0,o.jsxs)(n.admonition,{title:"How to prepare",type:"tip",children:[(0,o.jsx)(n.p,{children:"The new Docusaurus v3 TypeScript config is sensibly the same as the former Docusaurus v2 TypeScript config. If you upgraded to TypeScript 5, using the Docusaurus v3 config on a v2 site is already possible:"}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-diff",metastring:'title="package.json"',children:' {\n "devDependencies": {\n- "@tsconfig/docusaurus": "^1.0.7",\n+ "@docusaurus/tsconfig": "^3.0.0-beta.0",\n }\n }\n'})}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-diff",metastring:'title="tsconfig.json"',children:' {\n- "extends": "@tsconfig/docusaurus/tsconfig.json",\n+ "extends": "@docusaurus/tsconfig",\n "compilerOptions": {\n "baseUrl": "."\n }\n }\n'})})]}),"\n",(0,o.jsx)(n.h3,{id:"admonition-warning",children:"Admonition warning"}),"\n",(0,o.jsxs)(n.p,{children:["For historical reasons, we support an undocumented admonition ",(0,o.jsx)(n.code,{children:":::warning"})," that renders with a red color."]}),"\n",(0,o.jsx)(n.admonition,{title:"Warning",type:"danger",children:(0,o.jsxs)(n.p,{children:["This is a Docusaurus v2 ",(0,o.jsx)(n.code,{children:":::warning"})," admonition."]})}),"\n",(0,o.jsxs)(n.p,{children:["However, the color and icon is historically wrong. Docusaurus v3 re-introduces ",(0,o.jsx)(n.code,{children:":::warning"})," admonition officially, documents it, and fix the color and icon."]}),"\n",(0,o.jsx)(n.admonition,{type:"warning",children:(0,o.jsxs)(n.p,{children:["This is a Docusaurus v3 ",(0,o.jsx)(n.code,{children:":::warning"})," admonition."]})}),"\n",(0,o.jsxs)(n.admonition,{title:"How to prepare",type:"tip",children:[(0,o.jsxs)(n.p,{children:["If you previously used the undocumented ",(0,o.jsx)(n.code,{children:":::warning"})," admonition, make sure to verify for each usage if yellow is now an appropriate color. If you want to keep the red color, use ",(0,o.jsx)(n.code,{children:":::danger"})," instead."]}),(0,o.jsxs)(n.p,{children:["Docusaurus v3 also ",(0,o.jsxs)(n.a,{href:"https://github.com/facebook/docusaurus/pull/9308",children:["deprecated the ",(0,o.jsx)(n.code,{children:":::caution"})]})," admonition. Please refactor ",(0,o.jsx)(n.code,{children:":::caution"})," (yellow) to either ",(0,o.jsx)(n.code,{children:":::warning"})," (yellow) or ",(0,o.jsx)(n.code,{children:":::danger"})," (red)."]})]}),"\n",(0,o.jsx)(n.h3,{id:"versioned-sidebars",children:"Versioned sidebars"}),"\n",(0,o.jsxs)(n.p,{children:["This breaking change will only affect ",(0,o.jsx)(n.strong,{children:"Docusaurus v2 early adopters"})," who versioned their docs before ",(0,o.jsx)(n.code,{children:"v2.0.0-beta.10"})," (December 2021)."]}),"\n",(0,o.jsxs)(n.p,{children:["When creating version ",(0,o.jsx)(n.code,{children:"v1.0.0"}),", the sidebar file contained a prefix ",(0,o.jsx)(n.code,{children:"version-v1.0.0/"})," that ",(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/9310",children:"Docusaurus v3 does not support anymore"}),"."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-json",metastring:'title="versioned_sidebars/version-v1.0.0-sidebars.json"',children:'{\n "version-v1.0.0/docs": [\n "version-v1.0.0/introduction",\n "version-v1.0.0/prerequisites"\n ]\n}\n'})}),"\n",(0,o.jsxs)(n.admonition,{title:"How to prepare",type:"tip",children:[(0,o.jsx)(n.p,{children:"Your Docusaurus v2 site is able to handle the 2 sidebar formats similarly."}),(0,o.jsx)(n.p,{children:"You can remove the useless versioned prefix from your versioned sidebars."}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-json",metastring:'title="versioned_sidebars/version-v1.0.0-sidebars.json"',children:'{\n "docs": ["introduction", "prerequisites"]\n}\n'})})]}),"\n",(0,o.jsx)(n.h2,{id:"try-docusaurus-v3-today",children:"Try Docusaurus v3 today"}),"\n",(0,o.jsxs)(n.p,{children:["Docusaurus v3 is now ",(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/9312",children:"in beta"}),", and already used in production by ",(0,o.jsx)(n.a,{href:"https://reactnative.dev",children:"React-Native"}),", ",(0,o.jsx)(n.a,{href:"https://jestjs.io",children:"Jest"}),", and ",(0,o.jsx)(n.a,{href:"https://docusaurus.io/",children:"our own website"}),"."]}),"\n",(0,o.jsxs)(n.p,{children:["We think this new Docusaurus version is ",(0,o.jsx)(n.strong,{children:"robust and ready to be deployed in production"}),". It should be released officially soon, after receiving a positive feedback from early adopters of our community."]}),"\n",(0,o.jsxs)(n.p,{children:["We would really appreciate it if you try upgrading and report issues on the ",(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/9312",children:"3.0.0-beta.0 release discussion thread"}),"."]}),"\n",(0,o.jsx)(n.p,{children:"For most sites, the upgrade should be easy. If you prepared your site ahead of time as documented here, upgrading the following dependencies should be enough:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-diff",metastring:'title="package.json"',children:' {\n "dependencies": {\n- "@docusaurus/core": "2.4.3",\n- "@docusaurus/preset-classic": "2.4.3",\n- "@mdx-js/react": "^1.6.22",\n+ "@docusaurus/core": "3.0.0-beta.0",\n+ "@docusaurus/preset-classic": "3.0.0-beta.0",\n+ "@mdx-js/react": "^3.0.0",\n "clsx": "^2.0.0",\n "prism-react-renderer": "^1.3.5",\n- "react": "^17.0.2",\n- "react-dom": "^17.0.2"\n+ "react": "^18.2.0",\n+ "react-dom": "^18.2.0"\n },\n "devDependencies": {\n- "@docusaurus/module-type-aliases": "2.4.3"\n+ "@docusaurus/module-type-aliases": "3.0.0-beta.0"\n }\n }\n'})}),"\n",(0,o.jsx)(n.h2,{id:"ask-for-help",children:"Ask for help"}),"\n",(0,o.jsx)(n.p,{children:"We will be there to help you upgrade through the following support channels:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/9336",children:"Docusaurus v3 - Upgrade Support"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://discord.com/channels/398180168688074762/1154771869094912090",children:"Docusaurus v3 - Discord channel #migration-v2-to-v3"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/9053",children:"MDX v3 - Upgrade Support"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/9337",children:"MDX v3 - Remark/Rehype Plugins Support"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://discord.com/channels/398180168688074762/1116724556976111616",children:"MDX v3 - Discord channel #migration-mdx-v3"})}),"\n"]}),"\n",(0,o.jsxs)(n.p,{children:["Alternatively, you can look for a paid ",(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/9281",children:"Docusaurus Service Provider"})," to execute this upgrade for you. If your site is open source, you can also ask our community for ",(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/9283",children:"free, benevolent help"}),"."]}),"\n",(0,o.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,o.jsx)(n.p,{children:"Docusaurus v3 is ready to try, and will be released soon. This article already gives you a good idea of all the major changes required to upgrade."}),"\n",(0,o.jsx)(n.p,{children:"The initial 3.0 release is focusing on dependency and infrastructure upgrades that will permit us to implement new exciting features. It also comes with a few useful features that we will detail in the final release notes."})]})}function h(e={}){let{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},80980:function(e,n,s){s.d(n,{Z:()=>a,a:()=>t});var r=s(67294);let o={},i=r.createContext(o);function t(e){let n=r.useContext(i);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:t(e.components),r.createElement(i.Provider,{value:n},e.children)}},24174:function(e){e.exports=JSON.parse('{"permalink":"/blog/preparing-your-site-for-docusaurus-v3","editUrl":"https://github.com/facebook/docusaurus/edit/main/website/blog/2023/09-29-preparing-your-site-for-docusaurus-v3/index.mdx","source":"@site/blog/2023/09-29-preparing-your-site-for-docusaurus-v3/index.mdx","title":"Preparing your site for Docusaurus v3","description":"This blog post was written when Docusaurus v3 was in beta. There are some changes in dependency versions and upgrade steps you should be aware of if upgrading to Docusaurus v3 current stable releases. Use the upgrade guide for the most up-to-date migration steps.","date":"2023-09-29T00:00:00.000Z","tags":[{"inline":false,"label":"Maintenance","permalink":"/blog/tags/maintenance"}],"readingTime":13.975,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer, This Week In React editor","url":"https://thisweekinreact.com","page":{"permalink":"/blog/authors/slorber"},"description":"A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.","socials":{"bluesky":"https://bsky.app/profile/sebastienlorber.com","x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","instagram":"https://www.instagram.com/thisweekinreact","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"}],"frontMatter":{"title":"Preparing your site for Docusaurus v3","authors":["slorber"],"tags":["maintenance"],"slug":"/preparing-your-site-for-docusaurus-v3","image":"./img/social-card.png"},"unlisted":false,"lastUpdatedAt":1739456991000,"lastUpdatedBy":"S\xe9bastien Lorber","prevItem":{"title":"Announcing Docusaurus 3.0","permalink":"/blog/releases/3.0"},"nextItem":{"title":"Upgrading frontend dependencies with confidence","permalink":"/blog/upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing"}}')}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["80261"],{55732:function(e,n,s){s.d(n,{Z:()=>r});let r=s.p+"assets/images/social-card-1c688c53b51bdaa6e15ae532bf756276.png"},85345:function(e,n,s){s.d(n,{Z:()=>r});let r=s.p+"assets/images/mdx-checker-output-0f96cc19fd3ed4d55901ca90ad657c14.png"},51476:function(e,n,s){s.d(n,{Z:()=>r});let r=s.p+"assets/images/mdx2-playground-options-eab88e8328a6902759c4236ffc93d9c6.png"},32007:function(e,n,s){s.d(n,{Z:()=>r});let r=s.p+"assets/images/social-card-1c688c53b51bdaa6e15ae532bf756276.png"},27753:function(e,n,s){s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>a,default:()=>h,frontMatter:()=>t,metadata:()=>r,toc:()=>d});var r=s(24174),o=s(85893),i=s(80980);let t={title:"Preparing your site for Docusaurus v3",authors:["slorber"],tags:["maintenance"],slug:"/preparing-your-site-for-docusaurus-v3",image:"./img/social-card.png"},a=void 0,c={image:s(55732).Z,authorsImageUrls:[void 0]},d=[{value:"Preparatory work",id:"preparatory-work",level:2},{value:"Preparing content for MDX v3",id:"preparing-content-for-mdx-v3",level:2},{value:"Using the MDX playground",id:"using-the-mdx-playground",level:3},{value:"Using the MDX checker CLI",id:"using-the-mdx-checker-cli",level:3},{value:"Common MDX problems",id:"common-mdx-problems",level:3},{value:"Bad usage of {",id:"bad-usage-of-",level:4},{value:"Bad usage of <",id:"bad-usage-of--1",level:4},{value:"Bad usage of GFM Autolink",id:"bad-usage-of-gfm-autolink",level:4},{value:"Lower-case MDXComponent mapping",id:"lower-case-mdxcomponent-mapping",level:4},{value:"Unintended extra paragraphs",id:"unintended-extra-paragraphs",level:4},{value:"Unintended usage of directives",id:"unintended-usage-of-directives",level:4},{value:"Unsupported indented code blocks",id:"unsupported-indented-code-blocks",level:4},{value:"MDX plugins",id:"mdx-plugins",level:3},{value:"Other breaking changes",id:"other-breaking-changes",level:2},{value:"Node.js 18.0",id:"nodejs-180",level:3},{value:"React 18.0",id:"react-180",level:3},{value:"TypeScript 5.0",id:"typescript-50",level:3},{value:"TypeScript base config",id:"typescript-base-config",level:3},{value:"Admonition warning",id:"admonition-warning",level:3},{value:"Versioned sidebars",id:"versioned-sidebars",level:3},{value:"Try Docusaurus v3 today",id:"try-docusaurus-v3-today",level:2},{value:"Ask for help",id:"ask-for-help",level:2},{value:"Conclusion",id:"conclusion",level:2}];function l(e){let n={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",h2:"h2",h3:"h3",h4:"h4",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components},{Details:r}=n;return r||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,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.admonition,{type:"warning",children:(0,o.jsxs)(n.p,{children:["This blog post was written when Docusaurus v3 was in beta. There are some changes in dependency versions and upgrade steps you should be aware of if upgrading to Docusaurus v3 current stable releases. Use the ",(0,o.jsx)(n.a,{href:"https://docusaurus.io/docs/next/migration/v3",children:"upgrade guide"})," for the most up-to-date migration steps."]})}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.strong,{children:"Docusaurus v3"})," is now ",(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/9312",children:(0,o.jsx)(n.strong,{children:"in beta"})})," and the official release is around the corner. This is the perfect time to start ",(0,o.jsx)(n.strong,{children:"preparing your site"})," for this new major version."]}),"\n",(0,o.jsxs)(n.p,{children:["Docusaurus v3 comes with a few ",(0,o.jsx)(n.strong,{children:"breaking changes"}),", many of which can be ",(0,o.jsx)(n.strong,{children:"handled today under Docusaurus v2"}),". Preparing your site ahead of time can be done incrementally, and will make it easier to upgrade to v3."]}),"\n",(0,o.jsxs)(n.p,{children:["The main breaking change is the upgrade from MDX v1 to MDX v3. Read the ",(0,o.jsx)(n.a,{href:"https://mdxjs.com/blog/v2/",children:(0,o.jsx)(n.strong,{children:"MDX v2"})})," and ",(0,o.jsx)(n.a,{href:"https://mdxjs.com/blog/v3/",children:(0,o.jsx)(n.strong,{children:"MDX v3"})})," release notes for details. MDX will now compile your Markdown content ",(0,o.jsx)(n.strong,{children:"more strictly"})," and with ",(0,o.jsx)(n.strong,{children:"subtle differences"}),"."]}),"\n",(0,o.jsx)(n.p,{children:"This article will mostly focus on how to prepare your content for this new MDX version, and will also list a few other breaking changes that you can handle today."}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"Preparing your site for Docusaurus v3 - social card",src:s(32007).Z+"",width:"1040",height:"546"})}),"\n",(0,o.jsx)(n.admonition,{type:"warning",children:(0,o.jsxs)(n.p,{children:["This article mentions most Docusaurus v3 breaking changes, but is not exhaustive. Read the ",(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/9312",children:"v3.0.0-beta.0 release notes"})," for an exhaustive list."]})}),"\n",(0,o.jsxs)(n.admonition,{title:"Don't be afraid",type:"tip",children:[(0,o.jsx)(n.p,{children:"There's a lot of content in this blog post, but many Docusaurus v2 sites can upgrade with very few changes."}),(0,o.jsxs)(n.p,{children:["If your site is relatively small, with only a few customizations, you can probably ",(0,o.jsx)(n.a,{href:"#try-docusaurus-v3-today",children:"upgrade to Docusaurus v3"})," immediately."]})]}),"\n",(0,o.jsx)(n.h2,{id:"preparatory-work",children:"Preparatory work"}),"\n",(0,o.jsxs)(n.p,{children:["Before preparing for the Docusaurus v3 upgrade, we recommend upgrading to the latest ",(0,o.jsx)(n.a,{href:"/versions",children:"Docusaurus v2 version"}),"."]}),"\n",(0,o.jsxs)(n.p,{children:["Depending on the complexity of your site, it may be a good idea to adopt the ",(0,o.jsx)(n.a,{href:"/blog/upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing",children:"visual regression testing workflow"})," that we recently presented. It could help you catch unexpected visual side effects occurring during the Docusaurus v3 upgrade."]}),"\n",(0,o.jsxs)(n.p,{children:["We also recommend using the ",(0,o.jsx)(n.code,{children:".mdx"})," extension whenever you use JSX, ",(0,o.jsx)(n.code,{children:"import"}),", or ",(0,o.jsx)(n.code,{children:"export"})," (i.e. MDX features) inside a Markdown file. It is semantically more correct and improves compatibility with external tools (IDEs, formatters, linters, etc.). In future versions of Docusaurus, ",(0,o.jsx)(n.code,{children:".md"})," files will be parsed as standard ",(0,o.jsx)(n.a,{href:"https://commonmark.org/",children:"CommonMark"}),", which does not support these features. In Docusaurus v3, ",(0,o.jsx)(n.code,{children:".md"})," files keep being compiled as MDX files, but it will be possible to ",(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/issues/3018",children:"opt-in for CommonMark"}),"."]}),"\n",(0,o.jsx)(n.h2,{id:"preparing-content-for-mdx-v3",children:"Preparing content for MDX v3"}),"\n",(0,o.jsxs)(n.p,{children:["MDX is a major dependency of Docusaurus responsible for compiling your ",(0,o.jsx)(n.code,{children:".md"})," and ",(0,o.jsx)(n.code,{children:".mdx"})," files to React components."]}),"\n",(0,o.jsxs)(n.p,{children:["MDX v3 is much better, but also comes with changes that probably require you to refactor your content a bit. MDX v3 is stricter, and some components that compiled fine under v1 might now fail to compile under v3, most likely because of ",(0,o.jsx)(n.code,{children:"{"})," and ",(0,o.jsx)(n.code,{children:"<"})," characters."]}),"\n",(0,o.jsxs)(n.p,{children:["Upgrading MDX comes with all the breaking changes documented on the ",(0,o.jsx)(n.a,{href:"https://mdxjs.com/blog/v2/",children:"MDX v2"})," and ",(0,o.jsx)(n.a,{href:"https://mdxjs.com/blog/v3/",children:"MDX v3"})," release blog posts. Most breaking changes come from MDX v2. The ",(0,o.jsx)(n.a,{href:"https://mdxjs.com/migrating/v2/",children:"MDX v2 migration guide"})," has a section on how to ",(0,o.jsx)(n.a,{href:"https://mdxjs.com/migrating/v2/#update-mdx-files",children:"update MDX files"})," that will be particularly relevant to us. Also make sure to read the ",(0,o.jsx)(n.a,{href:"https://mdxjs.com/docs/troubleshooting-mdx/",children:"Troubleshooting MDX"})," page that can help you interpret common MDX error messages."]}),"\n",(0,o.jsxs)(n.p,{children:["Make sure to also read our updated ",(0,o.jsx)(n.a,{href:"/docs/markdown-features/react",children:(0,o.jsx)(n.strong,{children:"MDX and React"})})," documentation page."]}),"\n",(0,o.jsx)(n.admonition,{title:"Ask for help",type:"tip",children:(0,o.jsxs)(n.p,{children:["We have a dedicated ",(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/9053",children:"MDX v3 - Upgrade Support"})," discussion."]})}),"\n",(0,o.jsx)(n.h3,{id:"using-the-mdx-playground",children:"Using the MDX playground"}),"\n",(0,o.jsxs)(n.p,{children:["The MDX playground is your new best friend. It permits to understand how your content is ",(0,o.jsx)(n.strong,{children:"compiled to React components"}),", and troubleshoot compilation or rendering issues in isolation."]}),"\n",(0,o.jsx)(n.p,{children:"Each MDX version comes with its own playground:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://mdxjs.com/playground/",children:"MDX playground - current version"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://mdx-git-renovate-babel-monorepo-mdx.vercel.app/playground/",children:"MDX playground - v1"})}),"\n"]}),"\n",(0,o.jsxs)(r,{children:[(0,o.jsx)("summary",{children:"Configuring the MDX playground options for Docusaurus"}),(0,o.jsxs)(n.p,{children:["To obtain a compilation behavior similar to what Docusaurus v2 uses, please turn on these options on the ",(0,o.jsx)(n.a,{href:"https://mdxjs.com/playground/",children:"MDX playground"}),":"]}),(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["Use ",(0,o.jsx)(n.code,{children:"MDX"})]}),"\n",(0,o.jsxs)(n.li,{children:["Use ",(0,o.jsx)(n.code,{children:"remark-gfm"})]}),"\n",(0,o.jsxs)(n.li,{children:["Use ",(0,o.jsx)(n.code,{children:"remark-directive"})]}),"\n"]}),(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"Screenshot of the MDX playground's options panel, with only the "Use MDX", "Use remark-gfm", and "Use remark-directive" options checked",src:s(51476).Z+"",width:"1968",height:"1316"})})]}),"\n",(0,o.jsx)(n.p,{children:"Using the two MDX playgrounds side-by-side, you will soon notice that some content is compiled differently or fails to compile in v3."}),"\n",(0,o.jsx)(n.admonition,{title:"Making your content future-proof",type:"tip",children:(0,o.jsxs)(n.p,{children:["The goal will be to refactor your problematic content so that it ",(0,o.jsx)(n.strong,{children:"works fine with both versions of MDX"}),". This way, when you upgrade to Docusaurus v3, this content will already work out-of-the-box."]})}),"\n",(0,o.jsx)(n.h3,{id:"using-the-mdx-checker-cli",children:"Using the MDX checker CLI"}),"\n",(0,o.jsxs)(n.p,{children:["We provide a ",(0,o.jsx)(n.a,{href:"https://github.com/slorber/docusaurus-mdx-checker",children:"docusaurus-mdx-checker"})," CLI that permits to easily spot problematic content. Run this command today on your Docusaurus v2 site to obtain a list of files that will fail to compile under MDX v3."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-bash",children:"npx docusaurus-mdx-checker\n"})}),"\n",(0,o.jsx)(n.p,{children:"For each compilation issue, the CLI will log the file path and a line number to look at."}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"Screenshot of the terminal showing an example MDX checker CLI output, with a few error messages",src:s(85345).Z+"",width:"1161",height:"417"})}),"\n",(0,o.jsx)(n.admonition,{type:"tip",children:(0,o.jsx)(n.p,{children:"Use this CLI to estimate of how much work will be required to make your content compatible with MDX v3."})}),"\n",(0,o.jsxs)(n.admonition,{type:"warning",children:[(0,o.jsx)(n.p,{children:"This CLI is a best effort, and will only report compilation errors."}),(0,o.jsxs)(n.p,{children:["It will not report subtle compilation changes that do not produce errors but can affect how your content is displayed. To catch these problems, we recommend using ",(0,o.jsx)(n.a,{href:"/blog/upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing",children:"visual regression tests"}),"."]})]}),"\n",(0,o.jsx)(n.h3,{id:"common-mdx-problems",children:"Common MDX problems"}),"\n",(0,o.jsx)(n.p,{children:"We upgraded a few Docusaurus sites to Docusaurus v3 and MDX v3:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/8288",children:"Docusaurus PR"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://github.com/facebook/react-native-website/pull/3780",children:"React-Native PR"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://github.com/jestjs/jest/pull/14463",children:"Jest PR"})}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:"These upgrades permitted us to aggregate the most common content problems, and document how to best handle them."}),"\n",(0,o.jsxs)(n.h4,{id:"bad-usage-of-",children:["Bad usage of ",(0,o.jsx)(n.code,{children:"{"})]}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"{"})," character is used for opening ",(0,o.jsx)(n.a,{href:"https://mdxjs.com/docs/what-is-mdx/#expressions",children:"JavaScript expressions"}),". MDX will now fail if what you put inside ",(0,o.jsx)(n.code,{children:"{expression}"})," is not a valid expression."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-md",metastring:'title="example.md"',children:"The object shape looks like {username: string, age: number}\n"})}),"\n",(0,o.jsx)(n.admonition,{title:"Error message",type:"danger",children:(0,o.jsxs)(n.blockquote,{children:["\n",(0,o.jsx)(n.p,{children:"Could not parse expression with acorn: Unexpected content after expression"}),"\n"]})}),"\n",(0,o.jsxs)(n.admonition,{title:"How to prepare",type:"tip",children:[(0,o.jsx)(n.p,{children:"Available options to fix this error:"}),(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["Use inline code: ",(0,o.jsx)(n.code,{children:"{username: string, age: number}"})]}),"\n",(0,o.jsxs)(n.li,{children:["Use the HTML code: ",(0,o.jsx)(n.code,{children:"{"})]}),"\n",(0,o.jsxs)(n.li,{children:["Escape it: ",(0,o.jsx)(n.code,{children:"\\{"})]}),"\n"]})]}),"\n",(0,o.jsxs)(n.h4,{id:"bad-usage-of--1",children:["Bad usage of ",(0,o.jsx)(n.code,{children:"<"})]}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"<"})," character is used for opening ",(0,o.jsx)(n.a,{href:"https://mdxjs.com/docs/what-is-mdx/#jsx",children:"JSX tags"}),". MDX will now fail if it thinks your JSX is invalid."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-md",metastring:'title="example.md"',children:'Use Android version <5\n\nYou can use a generic type like Array\n\nFollow the template "Road to "\n'})}),"\n",(0,o.jsxs)(n.admonition,{title:"Error messages",type:"danger",children:[(0,o.jsxs)(n.blockquote,{children:["\n",(0,o.jsxs)(n.p,{children:["Unexpected character ",(0,o.jsx)(n.code,{children:"5"})," (U+0035) before name, expected a character that can start a name, such as a letter, ",(0,o.jsx)(n.code,{children:"$"}),", or ",(0,o.jsx)(n.code,{children:"_"})]}),"\n"]}),(0,o.jsxs)(n.blockquote,{children:["\n",(0,o.jsxs)(n.p,{children:["Expected a closing tag for ",(0,o.jsx)(n.code,{children:""})," (1:6-1:9) before the end of ",(0,o.jsx)(n.code,{children:"paragraph"})," end-tag-mismatch mdast-util-mdx-jsx"]}),"\n"]}),(0,o.jsxs)(n.blockquote,{children:["\n",(0,o.jsxs)(n.p,{children:["Expected a closing tag for ",(0,o.jsx)(n.code,{children:""})," (134:19-134:39) before the end of ",(0,o.jsx)(n.code,{children:"paragraph"})]}),"\n"]})]}),"\n",(0,o.jsxs)(n.admonition,{title:"How to prepare",type:"tip",children:[(0,o.jsx)(n.p,{children:"Available options to fix this error:"}),(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["Use inline code: ",(0,o.jsx)(n.code,{children:"Array"})]}),"\n",(0,o.jsxs)(n.li,{children:["Use the HTML code: ",(0,o.jsx)(n.code,{children:"<"})," or ",(0,o.jsx)(n.code,{children:"<"})]}),"\n",(0,o.jsxs)(n.li,{children:["Escape it: ",(0,o.jsx)(n.code,{children:"\\<"})," (unfortunately the ",(0,o.jsx)(n.code,{children:"\\"})," will be displayed under MDX v1)"]}),"\n"]})]}),"\n",(0,o.jsx)(n.h4,{id:"bad-usage-of-gfm-autolink",children:"Bad usage of GFM Autolink"}),"\n",(0,o.jsxs)(n.p,{children:["Docusaurus supports ",(0,o.jsx)(n.a,{href:"https://github.github.com/gfm/",children:"GitHub Flavored Markdown (GFM)"}),", but ",(0,o.jsx)(n.a,{href:"https://github.github.com/gfm/#autolinks",children:"autolink"})," using the ",(0,o.jsx)(n.code,{children:""})," syntax is not supported anymore by MDX."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-md",metastring:'title="example.md"',children:"\n\n\n"})}),"\n",(0,o.jsxs)(n.admonition,{title:"Error messages",type:"danger",children:[(0,o.jsxs)(n.blockquote,{children:["\n",(0,o.jsxs)(n.p,{children:["Unexpected character ",(0,o.jsx)(n.code,{children:"@"})," (U+0040) in name, expected a name character such as letters, digits, ",(0,o.jsx)(n.code,{children:"$"}),", or ",(0,o.jsx)(n.code,{children:"_"}),"; whitespace before attributes; or the end of the tag (note: to create a link in MDX, use ",(0,o.jsx)(n.code,{children:"[text](url)"}),")"]}),"\n"]}),(0,o.jsxs)(n.blockquote,{children:["\n",(0,o.jsxs)(n.p,{children:["Unexpected character ",(0,o.jsx)(n.code,{children:"/"})," (U+002F) before local name, expected a character that can start a name, such as a letter, ",(0,o.jsx)(n.code,{children:"$"}),", or ",(0,o.jsx)(n.code,{children:"_"})," (note: to create a link in MDX, use ",(0,o.jsx)(n.code,{children:"[text](url)"}),")"]}),"\n"]})]}),"\n",(0,o.jsxs)(n.admonition,{title:"How to prepare",type:"tip",children:[(0,o.jsxs)(n.p,{children:["Use regular Markdown links, or remove the ",(0,o.jsx)(n.code,{children:"<"})," and ",(0,o.jsx)(n.code,{children:">"}),". MDX and GFM are able to autolink literals already."]}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-md",metastring:'title="example.md"',children:"sebastien@thisweekinreact.com\n[sebastien@thisweekinreact.com](mailto:sebastien@thisweekinreact.com)\n\nhttp://localhost:3000\n[http://localhost:3000](http://localhost:3000)\n"})})]}),"\n",(0,o.jsx)(n.h4,{id:"lower-case-mdxcomponent-mapping",children:"Lower-case MDXComponent mapping"}),"\n",(0,o.jsxs)(n.p,{children:["For users providing a ",(0,o.jsxs)(n.a,{href:"/docs/markdown-features/react#mdx-component-scope",children:["custom ",(0,o.jsx)(n.code,{children:"MDXComponent"}),"mapping"]}),', components are now "sandboxed":']}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["a ",(0,o.jsx)(n.code,{children:"MDXComponent"})," mapping for ",(0,o.jsx)(n.code,{children:"h1"})," only gets used for ",(0,o.jsx)(n.code,{children:"# hi"})," but not for ",(0,o.jsx)(n.code,{children:"
hi
"})]}),"\n",(0,o.jsxs)(n.li,{children:["a ",(0,o.jsx)(n.strong,{children:"lower-cased"})," custom element name will not be substituted by its respective ",(0,o.jsx)(n.code,{children:"MDXComponent"})," component anymore"]}),"\n"]}),"\n",(0,o.jsx)(n.admonition,{title:"visual difference",type:"danger",children:(0,o.jsxs)(n.p,{children:["Your ",(0,o.jsxs)(n.a,{href:"/docs/markdown-features/react#mdx-component-scope",children:[(0,o.jsx)(n.code,{children:"MDXComponent"})," component mapping"]})," might not be applied as before, and your custom components might no longer be used."]})}),"\n",(0,o.jsxs)(n.admonition,{title:"How to prepare",type:"tip",children:[(0,o.jsxs)(n.p,{children:["For native Markdown elements, you can keep using ",(0,o.jsx)(n.strong,{children:"lower-case"}),": ",(0,o.jsx)(n.code,{children:"p"}),", ",(0,o.jsx)(n.code,{children:"h1"}),", ",(0,o.jsx)(n.code,{children:"img"}),", ",(0,o.jsx)(n.code,{children:"a"}),"..."]}),(0,o.jsxs)(n.p,{children:["For any other element, ",(0,o.jsx)(n.strong,{children:"use upper-case names"}),"."]}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-diff",metastring:'title="src/theme/MDXComponents.js"',children:' import MDXComponents from \'@theme-original/MDXComponents\';\n\n export default {\n ...MDXComponents,\n p: (props) => \n- myElement: (props) => ,\n+ MyElement: (props) => ,\n };\n'})})]}),"\n",(0,o.jsx)(n.h4,{id:"unintended-extra-paragraphs",children:"Unintended extra paragraphs"}),"\n",(0,o.jsxs)(n.p,{children:["In MDX, it is now possible to interleave JSX and Markdown more easily without requiring extra line breaks. Writing content on multiple lines can also produce new expected ",(0,o.jsx)(n.code,{children:"
"})," tags."]}),"\n",(0,o.jsxs)(n.admonition,{title:"visual difference",type:"danger",children:[(0,o.jsx)(n.p,{children:"See how this content is rendered differently by MDX v1 and v3."}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-md",metastring:'title="example.md"',children:"
\n"})})]}),"\n",(0,o.jsxs)(n.admonition,{title:"How to prepare",type:"tip",children:[(0,o.jsxs)(n.p,{children:["If you don't want an extra ",(0,o.jsx)(n.code,{children:"
"})," tag, refactor content on a case by case basis to use a single-line JSX tag."]}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-diff",children:' \n \n- \n- My image caption\n- \n+ My image caption\n \n'})}),(0,o.jsxs)(n.p,{children:['If your content contains "Markdown inlines" (',(0,o.jsx)(n.code,{children:"**"}),", ",(0,o.jsx)(n.code,{children:"*"}),", ",(0,o.jsx)(n.code,{children:"_"}),", ",(0,o.jsx)(n.code,{children:"[link](/path)"}),"), you might not be able to refactor it ahead of time, and will have to do it alongside the Docusaurus v3 upgrade."]})]}),"\n",(0,o.jsx)(n.h4,{id:"unintended-usage-of-directives",children:"Unintended usage of directives"}),"\n",(0,o.jsxs)(n.p,{children:["Docusaurus v3 now uses ",(0,o.jsx)(n.a,{href:"https://talk.commonmark.org/t/generic-directives-plugins-syntax/444",children:"Markdown Directives"})," (implemented with ",(0,o.jsx)(n.a,{href:"https://github.com/remarkjs/remark-directive",children:"remark-directive"}),") as a generic way to provide support for admonitions, and other upcoming Docusaurus features."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-md",metastring:'title="example.md"',children:"This is a :textDirective\n\n::leafDirective\n\n:::containerDirective\n\nContainer directive content\n\n:::\n"})}),"\n",(0,o.jsxs)(n.admonition,{title:"Visual change",type:"danger",children:[(0,o.jsx)(n.p,{children:"Directives are parsed with the purpose of being handled by other Remark plugins. Unhandled directives will be ignored, and won't be rendered back in their original form."}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-md",metastring:'title="example.md"',children:"The AWS re:Invent conf is great\n"})}),(0,o.jsxs)(n.p,{children:["Due to ",(0,o.jsx)(n.code,{children:":Invent"})," being parsed as a text directive, this will now be rendered as:"]}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{children:"The AWS re\nconf is great\n"})})]}),"\n",(0,o.jsx)(n.admonition,{title:"How to prepare",type:"tip",children:(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["Use the HTML code: ",(0,o.jsx)(n.code,{children:":"})]}),"\n",(0,o.jsxs)(n.li,{children:["Add a space after ",(0,o.jsx)(n.code,{children:":"})," (if it makes sense): ",(0,o.jsx)(n.code,{children:": text"})]}),"\n",(0,o.jsxs)(n.li,{children:["Escape it: ",(0,o.jsx)(n.code,{children:"\\:"})," (unfortunately the ",(0,o.jsx)(n.code,{children:"\\"})," will be displayed under MDX v1)"]}),"\n"]})}),"\n",(0,o.jsx)(n.h4,{id:"unsupported-indented-code-blocks",children:"Unsupported indented code blocks"}),"\n",(0,o.jsx)(n.p,{children:"MDX does not transform indented text as code blocks anymore."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-md",metastring:'title="example.md"',children:' console.log("hello");\n'})}),"\n",(0,o.jsx)(n.admonition,{title:"Visual change",type:"danger",children:(0,o.jsx)(n.p,{children:"The upgrade does not generally produce new MDX compilation errors, but can lead to content being rendered in an unexpected way because there isn't a code block anymore."})}),"\n",(0,o.jsxs)(n.admonition,{title:"How to prepare",type:"tip",children:[(0,o.jsx)(n.p,{children:"Use the regular code block syntax instead of indentation:"}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-md",metastring:'title="example.md"',children:"```js\nconsole.log('hello');\n```\n"})})]}),"\n",(0,o.jsx)(n.h3,{id:"mdx-plugins",children:"MDX plugins"}),"\n",(0,o.jsxs)(n.p,{children:["All the official packages (Unified, Remark, Rehype...) in the MDX ecosystem are now ",(0,o.jsx)(n.a,{href:"https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c",children:(0,o.jsx)(n.strong,{children:"ES Modules only"})})," and do not support ",(0,o.jsx)(n.a,{href:"https://nodejs.org/api/modules.html#modules-commonjs-modules",children:"CommonJS"})," anymore."]}),"\n",(0,o.jsxs)(n.p,{children:["In practice this means that you can't do ",(0,o.jsx)(n.code,{children:'require("remark-plugin")'})," anymore."]}),"\n",(0,o.jsxs)(n.admonition,{title:"How to prepare",type:"tip",children:[(0,o.jsxs)(n.p,{children:["Docusaurus v3 now supports ",(0,o.jsx)(n.a,{href:"https://flaviocopes.com/es-modules/",children:(0,o.jsx)(n.strong,{children:"ES Modules"})})," configuration files. We recommend that you migrate your config file to ES module, that enables you to import the Remark plugins easily:"]}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"import remarkPlugin from 'remark-plugin';\n\nexport default {\n title: 'Docusaurus',\n /* site config using remark plugins here */\n};\n"})}),(0,o.jsxs)(n.p,{children:["If you want to keep using CommonJS modules, you can use dynamic imports as a workaround that enables you to import ES modules inside a CommonJS module. Fortunately, the ",(0,o.jsx)(n.a,{href:"/docs/configuration#syntax-to-declare-docusaurus-config",children:"Docusaurus config supports the usage of an async function"})," to let you do so."]}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"module.exports = async function () {\n const myPlugin = (await import('remark-plugin')).default;\n return {\n // site config...\n };\n};\n"})})]}),"\n",(0,o.jsx)(n.admonition,{title:"For plugin authors",type:"info",children:(0,o.jsxs)(n.p,{children:["If you created custom Remark or Rehype plugins, you may need to refactor those, or eventually rewrite them completely, due to how the new AST is structured. We have created a ",(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/9337",children:"dedicated support discussion"})," to help plugin authors upgrade their code."]})}),"\n",(0,o.jsx)(n.h2,{id:"other-breaking-changes",children:"Other breaking changes"}),"\n",(0,o.jsx)(n.p,{children:"Apart from MDX, there are other breaking changes that you can already prepare your site for, notably major version upgrades of important dependencies."}),"\n",(0,o.jsx)(n.h3,{id:"nodejs-180",children:"Node.js 18.0"}),"\n",(0,o.jsxs)(n.p,{children:["Node.js 16 ",(0,o.jsx)(n.a,{href:"https://nodejs.org/en/blog/announcements/nodejs16-eol",children:"reached End-of-Life"}),", and Docusaurus v3 now requires ",(0,o.jsx)(n.strong,{children:"Node.js >= 18.0"}),"."]}),"\n",(0,o.jsx)(n.admonition,{title:"How to prepare",type:"tip",children:(0,o.jsx)(n.p,{children:"Upgrade your Docusaurus v2 site to Node.js 18 before upgrading to Docusaurus v3."})}),"\n",(0,o.jsx)(n.h3,{id:"react-180",children:"React 18.0"}),"\n",(0,o.jsxs)(n.p,{children:["Docusaurus v3 now requires ",(0,o.jsx)(n.strong,{children:"React >= 18.0"}),"."]}),"\n",(0,o.jsx)(n.p,{children:"React 18 comes with its own breaking changes that should be relatively easy to handle, depending on the amount of custom React code you created for your site."}),"\n",(0,o.jsx)(n.p,{children:"Simple Docusaurus sites that only use our official theme code without swizzling do not have anything to do."}),"\n",(0,o.jsxs)(n.admonition,{title:"How to prepare",type:"tip",children:[(0,o.jsxs)(n.p,{children:["Read the official ",(0,o.jsx)(n.a,{href:"https://react.dev/blog/2022/03/29/react-v18",children:"React v18.0"})," and ",(0,o.jsx)(n.a,{href:"https://react.dev/blog/2022/03/08/react-18-upgrade-guide",children:"How to Upgrade to React 18"}),", and look at your first-party React code to figure out which components might be affected this React 18 upgrade."]}),(0,o.jsx)(n.p,{children:"We recommend to particularly look for:"}),(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"Automatic batching for stateful components"}),"\n",(0,o.jsx)(n.li,{children:"New React hydration errors reported to the console"}),"\n"]})]}),"\n",(0,o.jsx)(n.h3,{id:"typescript-50",children:"TypeScript 5.0"}),"\n",(0,o.jsxs)(n.p,{children:["Docusaurus v3 now requires ",(0,o.jsx)(n.strong,{children:"TypeScript >= 5.0"}),"."]}),"\n",(0,o.jsx)(n.admonition,{title:"How to prepare",type:"tip",children:(0,o.jsx)(n.p,{children:"Upgrade your Docusaurus v2 site to TypeScript 5 before upgrading to Docusaurus v3."})}),"\n",(0,o.jsx)(n.h3,{id:"typescript-base-config",children:"TypeScript base config"}),"\n",(0,o.jsxs)(n.p,{children:["The official Docusaurus TypeScript config has been re-internalized from the external package ",(0,o.jsx)(n.a,{href:"https://www.npmjs.com/package/@tsconfig/docusaurus",children:(0,o.jsx)(n.code,{children:"@tsconfig/docusaurus"})})," to our new monorepo package ",(0,o.jsx)(n.a,{href:"https://www.npmjs.com/package/@docusaurus/tsconfig",children:(0,o.jsx)(n.code,{children:"@docusaurus/tsconfig"})}),"."]}),"\n",(0,o.jsx)(n.p,{children:"This new package is versioned alongside all the other Docusaurus core packages, and will be used to ensure TypeScript retro-compatibility and breaking changes on major version upgrades."}),"\n",(0,o.jsxs)(n.admonition,{title:"How to prepare",type:"tip",children:[(0,o.jsx)(n.p,{children:"The new Docusaurus v3 TypeScript config is sensibly the same as the former Docusaurus v2 TypeScript config. If you upgraded to TypeScript 5, using the Docusaurus v3 config on a v2 site is already possible:"}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-diff",metastring:'title="package.json"',children:' {\n "devDependencies": {\n- "@tsconfig/docusaurus": "^1.0.7",\n+ "@docusaurus/tsconfig": "^3.0.0-beta.0",\n }\n }\n'})}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-diff",metastring:'title="tsconfig.json"',children:' {\n- "extends": "@tsconfig/docusaurus/tsconfig.json",\n+ "extends": "@docusaurus/tsconfig",\n "compilerOptions": {\n "baseUrl": "."\n }\n }\n'})})]}),"\n",(0,o.jsx)(n.h3,{id:"admonition-warning",children:"Admonition warning"}),"\n",(0,o.jsxs)(n.p,{children:["For historical reasons, we support an undocumented admonition ",(0,o.jsx)(n.code,{children:":::warning"})," that renders with a red color."]}),"\n",(0,o.jsx)(n.admonition,{title:"Warning",type:"danger",children:(0,o.jsxs)(n.p,{children:["This is a Docusaurus v2 ",(0,o.jsx)(n.code,{children:":::warning"})," admonition."]})}),"\n",(0,o.jsxs)(n.p,{children:["However, the color and icon is historically wrong. Docusaurus v3 re-introduces ",(0,o.jsx)(n.code,{children:":::warning"})," admonition officially, documents it, and fix the color and icon."]}),"\n",(0,o.jsx)(n.admonition,{type:"warning",children:(0,o.jsxs)(n.p,{children:["This is a Docusaurus v3 ",(0,o.jsx)(n.code,{children:":::warning"})," admonition."]})}),"\n",(0,o.jsxs)(n.admonition,{title:"How to prepare",type:"tip",children:[(0,o.jsxs)(n.p,{children:["If you previously used the undocumented ",(0,o.jsx)(n.code,{children:":::warning"})," admonition, make sure to verify for each usage if yellow is now an appropriate color. If you want to keep the red color, use ",(0,o.jsx)(n.code,{children:":::danger"})," instead."]}),(0,o.jsxs)(n.p,{children:["Docusaurus v3 also ",(0,o.jsxs)(n.a,{href:"https://github.com/facebook/docusaurus/pull/9308",children:["deprecated the ",(0,o.jsx)(n.code,{children:":::caution"})]})," admonition. Please refactor ",(0,o.jsx)(n.code,{children:":::caution"})," (yellow) to either ",(0,o.jsx)(n.code,{children:":::warning"})," (yellow) or ",(0,o.jsx)(n.code,{children:":::danger"})," (red)."]})]}),"\n",(0,o.jsx)(n.h3,{id:"versioned-sidebars",children:"Versioned sidebars"}),"\n",(0,o.jsxs)(n.p,{children:["This breaking change will only affect ",(0,o.jsx)(n.strong,{children:"Docusaurus v2 early adopters"})," who versioned their docs before ",(0,o.jsx)(n.code,{children:"v2.0.0-beta.10"})," (December 2021)."]}),"\n",(0,o.jsxs)(n.p,{children:["When creating version ",(0,o.jsx)(n.code,{children:"v1.0.0"}),", the sidebar file contained a prefix ",(0,o.jsx)(n.code,{children:"version-v1.0.0/"})," that ",(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/pull/9310",children:"Docusaurus v3 does not support anymore"}),"."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-json",metastring:'title="versioned_sidebars/version-v1.0.0-sidebars.json"',children:'{\n "version-v1.0.0/docs": [\n "version-v1.0.0/introduction",\n "version-v1.0.0/prerequisites"\n ]\n}\n'})}),"\n",(0,o.jsxs)(n.admonition,{title:"How to prepare",type:"tip",children:[(0,o.jsx)(n.p,{children:"Your Docusaurus v2 site is able to handle the 2 sidebar formats similarly."}),(0,o.jsx)(n.p,{children:"You can remove the useless versioned prefix from your versioned sidebars."}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-json",metastring:'title="versioned_sidebars/version-v1.0.0-sidebars.json"',children:'{\n "docs": ["introduction", "prerequisites"]\n}\n'})})]}),"\n",(0,o.jsx)(n.h2,{id:"try-docusaurus-v3-today",children:"Try Docusaurus v3 today"}),"\n",(0,o.jsxs)(n.p,{children:["Docusaurus v3 is now ",(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/9312",children:"in beta"}),", and already used in production by ",(0,o.jsx)(n.a,{href:"https://reactnative.dev",children:"React-Native"}),", ",(0,o.jsx)(n.a,{href:"https://jestjs.io",children:"Jest"}),", and ",(0,o.jsx)(n.a,{href:"https://docusaurus.io/",children:"our own website"}),"."]}),"\n",(0,o.jsxs)(n.p,{children:["We think this new Docusaurus version is ",(0,o.jsx)(n.strong,{children:"robust and ready to be deployed in production"}),". It should be released officially soon, after receiving a positive feedback from early adopters of our community."]}),"\n",(0,o.jsxs)(n.p,{children:["We would really appreciate it if you try upgrading and report issues on the ",(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/9312",children:"3.0.0-beta.0 release discussion thread"}),"."]}),"\n",(0,o.jsx)(n.p,{children:"For most sites, the upgrade should be easy. If you prepared your site ahead of time as documented here, upgrading the following dependencies should be enough:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-diff",metastring:'title="package.json"',children:' {\n "dependencies": {\n- "@docusaurus/core": "2.4.3",\n- "@docusaurus/preset-classic": "2.4.3",\n- "@mdx-js/react": "^1.6.22",\n+ "@docusaurus/core": "3.0.0-beta.0",\n+ "@docusaurus/preset-classic": "3.0.0-beta.0",\n+ "@mdx-js/react": "^3.0.0",\n "clsx": "^2.0.0",\n "prism-react-renderer": "^1.3.5",\n- "react": "^17.0.2",\n- "react-dom": "^17.0.2"\n+ "react": "^18.2.0",\n+ "react-dom": "^18.2.0"\n },\n "devDependencies": {\n- "@docusaurus/module-type-aliases": "2.4.3"\n+ "@docusaurus/module-type-aliases": "3.0.0-beta.0"\n }\n }\n'})}),"\n",(0,o.jsx)(n.h2,{id:"ask-for-help",children:"Ask for help"}),"\n",(0,o.jsx)(n.p,{children:"We will be there to help you upgrade through the following support channels:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/9336",children:"Docusaurus v3 - Upgrade Support"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://discord.com/channels/398180168688074762/1154771869094912090",children:"Docusaurus v3 - Discord channel #migration-v2-to-v3"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/9053",children:"MDX v3 - Upgrade Support"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/9337",children:"MDX v3 - Remark/Rehype Plugins Support"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://discord.com/channels/398180168688074762/1116724556976111616",children:"MDX v3 - Discord channel #migration-mdx-v3"})}),"\n"]}),"\n",(0,o.jsxs)(n.p,{children:["Alternatively, you can look for a paid ",(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/9281",children:"Docusaurus Service Provider"})," to execute this upgrade for you. If your site is open source, you can also ask our community for ",(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/9283",children:"free, benevolent help"}),"."]}),"\n",(0,o.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,o.jsx)(n.p,{children:"Docusaurus v3 is ready to try, and will be released soon. This article already gives you a good idea of all the major changes required to upgrade."}),"\n",(0,o.jsx)(n.p,{children:"The initial 3.0 release is focusing on dependency and infrastructure upgrades that will permit us to implement new exciting features. It also comes with a few useful features that we will detail in the final release notes."})]})}function h(e={}){let{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},80980:function(e,n,s){s.d(n,{Z:()=>a,a:()=>t});var r=s(67294);let o={},i=r.createContext(o);function t(e){let n=r.useContext(i);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:t(e.components),r.createElement(i.Provider,{value:n},e.children)}},24174:function(e){e.exports=JSON.parse('{"permalink":"/blog/preparing-your-site-for-docusaurus-v3","editUrl":"https://github.com/facebook/docusaurus/edit/main/website/blog/2023/09-29-preparing-your-site-for-docusaurus-v3/index.mdx","source":"@site/blog/2023/09-29-preparing-your-site-for-docusaurus-v3/index.mdx","title":"Preparing your site for Docusaurus v3","description":"This blog post was written when Docusaurus v3 was in beta. There are some changes in dependency versions and upgrade steps you should be aware of if upgrading to Docusaurus v3 current stable releases. Use the upgrade guide for the most up-to-date migration steps.","date":"2023-09-29T00:00:00.000Z","tags":[{"inline":false,"label":"Maintenance","permalink":"/blog/tags/maintenance"}],"readingTime":13.975,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer, This Week In React editor","url":"https://thisweekinreact.com","page":{"permalink":"/blog/authors/slorber"},"description":"A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.","socials":{"bluesky":"https://bsky.app/profile/sebastienlorber.com","x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","instagram":"https://www.instagram.com/thisweekinreact","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"}],"frontMatter":{"title":"Preparing your site for Docusaurus v3","authors":["slorber"],"tags":["maintenance"],"slug":"/preparing-your-site-for-docusaurus-v3","image":"./img/social-card.png"},"unlisted":false,"lastUpdatedAt":1739551601000,"lastUpdatedBy":"S\xe9bastien Lorber","prevItem":{"title":"Announcing Docusaurus 3.0","permalink":"/blog/releases/3.0"},"nextItem":{"title":"Upgrading frontend dependencies with confidence","permalink":"/blog/upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing"}}')}}]);
\ No newline at end of file
diff --git a/assets/js/1582a4a4.33ae43a0.js b/assets/js/1582a4a4.936bd88b.js
similarity index 98%
rename from assets/js/1582a4a4.33ae43a0.js
rename to assets/js/1582a4a4.936bd88b.js
index e6cec0a32b..1fff060268 100644
--- a/assets/js/1582a4a4.33ae43a0.js
+++ b/assets/js/1582a4a4.936bd88b.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["99850"],{84422:function(e,s,t){t.d(s,{Z:()=>n});let n=t.p+"assets/images/social-card-66116702bb73f0bf68a095ddaecc0fe4.png"},56254:function(e,s,t){t.d(s,{Z:()=>n});let n=t.p+"assets/images/hash-96c9ef1044dc1febfe3eefdc9350e2a0.png"},86386:function(e,s,t){t.d(s,{Z:()=>n});let n=t.p+"assets/images/social-card-66116702bb73f0bf68a095ddaecc0fe4.png"},23132:function(e,s,t){t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>o,default:()=>d,frontMatter:()=>a,metadata:()=>n,toc:()=>c});var n=t(62625),i=t(85893),r=t(80980);let a={title:"Docusaurus 3.4",authors:["slorber"],tags:["release"],image:"./img/social-card.png",date:new Date("2024-05-31T00:00:00.000Z")},o=void 0,l={image:t(84422).Z,authorsImageUrls:[void 0]},c=[{value:"Highlights",id:"highlights",level:2},{value:"Tags files",id:"tags-files",level:3},{value:"Hash Router - Experimental",id:"hash-router---experimental",level:3},{value:"Site Storage - Experimental",id:"site-storage---experimental",level:3},{value:"Other changes",id:"other-changes",level:2}];function h(e){let s={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(s.p,{children:["We are happy to announce ",(0,i.jsx)(s.strong,{children:"Docusaurus 3.4"}),"."]}),"\n",(0,i.jsxs)(s.p,{children:["Upgrading should be easy. Our ",(0,i.jsx)(s.a,{href:"/community/release-process",children:"release process"})," respects ",(0,i.jsx)(s.a,{href:"https://semver.org/",children:"Semantic Versioning"}),". Minor versions do not include any breaking changes."]}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.img,{alt:"Docusaurus blog post social card",src:t(86386).Z+"",width:"1200",height:"600"})}),"\n",(0,i.jsx)(s.h2,{id:"highlights",children:"Highlights"}),"\n",(0,i.jsx)(s.h3,{id:"tags-files",children:"Tags files"}),"\n",(0,i.jsxs)(s.p,{children:["The docs and blog plugins both already supported a ",(0,i.jsx)(s.code,{children:"tags"})," front matter attribute, enabling you to group related content. But tags declared inline in the front matter are not always ideal."]}),"\n",(0,i.jsxs)(s.p,{children:["With ",(0,i.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10137",children:"#10137"}),", you can now declare a list of pre-defined tags in a ",(0,i.jsx)(s.code,{children:"tags.yml"})," file:"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-yml",metastring:'title="blog/tags.yml"',children:"tag1:\n label: 'Tag 1'\n description: 'Tag 1 description'\n permalink: /tag-1-permalink\n\ntag2:\n label: 'Tag 2'\n description: 'Tag 2 description'\n permalink: /tag-2-permalink\n"})}),"\n",(0,i.jsx)(s.p,{children:"These predefined tags can be used in the front matter of your blog or docs files:"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-md",metastring:'title="blog/2024-05-31-my-blog-post.md"',children:"---\ntags: [tag1, tag2]\n---\n\n# Title\n\nContent\n"})}),"\n",(0,i.jsx)(s.admonition,{title:"Keeping tags usage consistent",type:"tip",children:(0,i.jsxs)(s.p,{children:["Use the new ",(0,i.jsx)(s.code,{children:"onInlineTags: 'throw'"})," plugin option to enforce the usage of predefined tags and prevent contributors from creating new unwanted tags."]})}),"\n",(0,i.jsx)(s.h3,{id:"hash-router---experimental",children:"Hash Router - Experimental"}),"\n",(0,i.jsxs)(s.p,{children:["With ",(0,i.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9859",children:"9859"}),", we added a new ",(0,i.jsx)(s.strong,{children:"experimental"})," hash router config option, useful for ",(0,i.jsx)(s.strong,{children:"offline browsing"})," by opening your site locally through the ",(0,i.jsx)(s.code,{children:"file://"})," protocol."]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-tsx",metastring:'title="docusaurus.config.js"',children:"export default {\n future: {\n experimental_router: 'hash',\n },\n};\n"})}),"\n",(0,i.jsx)(s.admonition,{type:"warning",children:(0,i.jsxs)(s.p,{children:["This mode is ",(0,i.jsx)(s.strong,{children:"not recommended for sites deployed through a web server"}),"."]})}),"\n",(0,i.jsxs)(s.p,{children:["When this mode is turned on, Docusaurus will opt out of static site rendering, and build a client-side single page application where all routes are prefixed with ",(0,i.jsx)(s.code,{children:"/#/"}),". A single ",(0,i.jsx)(s.code,{children:"index.html"})," file is generated. This file can be opened locally in your browser by simply clicking it, using the browser ",(0,i.jsx)(s.code,{children:"file://"})," protocol. This makes it possible to distribute a Docusaurus site as a ",(0,i.jsx)(s.code,{children:".zip"})," file so that readers can browse it offline, without having to install anything complex on their computer apart a web browser."]}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.img,{alt:"Docusaurus hash router - local browsing using the file:// protocol",src:t(56254).Z+"",width:"1203",height:"601"})}),"\n",(0,i.jsx)(s.p,{children:"Try browsing our own Docusaurus site built with the hash router:"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"https://facebook.github.io/docusaurus/#/",children:"Docusaurus website - Hash Router web deployment"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/actions/workflows/build-hash-router.yml",children:"Docusaurus website - Hash Router downloadable GitHub artifacts"})}),"\n"]}),"\n",(0,i.jsx)(s.admonition,{title:"Experimental",type:"caution",children:(0,i.jsxs)(s.p,{children:["This feature is ",(0,i.jsx)(s.strong,{children:"experimental"}),". If you try it out, please let us know how it works for you ",(0,i.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/issues/3825",children:"here"}),"."]})}),"\n",(0,i.jsx)(s.h3,{id:"site-storage---experimental",children:"Site Storage - Experimental"}),"\n",(0,i.jsxs)(s.p,{children:["Docusaurus uses the browser ",(0,i.jsx)(s.code,{children:"localStorage"})," API to persist UI state."]}),"\n",(0,i.jsxs)(s.p,{children:['But sometimes the storage space is "shared" between multiple sites using the same domain, leading to ',(0,i.jsx)(s.strong,{children:"storage key conflicts"}),". This generally happens in two cases"]}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:["when working on multiple ",(0,i.jsx)(s.code,{children:"http://localhost:3000"})," sites"]}),"\n",(0,i.jsxs)(s.li,{children:["when hosting multiple sites under the same domain: ",(0,i.jsx)(s.code,{children:"https://example.com/site1/"})," and ",(0,i.jsx)(s.code,{children:"https://example.com/site2/"})]}),"\n"]}),"\n",(0,i.jsxs)(s.p,{children:["For this reason, we introduced a new ",(0,i.jsx)(s.strong,{children:"experimental"})," ",(0,i.jsx)(s.code,{children:"siteStorage"})," configuration option:"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-tsx",children:"export default {\n future: {\n experimental_storage: {\n type: 'localStorage',\n namespace: true,\n },\n },\n};\n"})}),"\n",(0,i.jsxs)(s.p,{children:["When ",(0,i.jsx)(s.code,{children:"namespace: true"})," is set, we apply a hash suffix to all the storage keys, making them unique to the current site (based on ",(0,i.jsx)(s.code,{children:"config.url"})," and ",(0,i.jsx)(s.code,{children:"config.baseUrl"}),". For example, the ",(0,i.jsx)(s.code,{children:"theme"})," storage key becomes ",(0,i.jsx)(s.code,{children:"theme-x6f"}),". It is also possible to provide your own custom suffix ",(0,i.jsx)(s.code,{children:"namespace: 'suffix'"}),". We also made it possible to use ",(0,i.jsx)(s.code,{children:"type: 'sessionStorage'"})," instead of the default ",(0,i.jsx)(s.code,{children:"localStorage"}),"."]}),"\n",(0,i.jsx)(s.admonition,{title:"Experimental",type:"caution",children:(0,i.jsxs)(s.p,{children:["This feature is ",(0,i.jsx)(s.strong,{children:"experimental"}),". If you try it out, please let us know how it works for you ",(0,i.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10121",children:"here"}),"."]})}),"\n",(0,i.jsx)(s.h2,{id:"other-changes",children:"Other changes"}),"\n",(0,i.jsx)(s.p,{children:"Other notable changes include:"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10151",children:"#10151"}),": add Turkmen (tk) theme translations"]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10111",children:"#10111"}),": add Bulgarian (bg) theme translations"]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10168",children:"#10168"}),": fix many long overdue Markdown link resolution bugs"]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10178",children:"#10178"}),": the ",(0,i.jsx)(s.code,{children:"/search"})," page now respects the ",(0,i.jsx)(s.code,{children:"contextualSearch: false"})," setting"]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10118",children:"#10118"}),": fix bad pluralization on docs generated index category card description"]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10130",children:"#10130"}),": fix false positives reported by the broken anchor checker due to trailing slashes"]}),"\n"]}),"\n",(0,i.jsxs)(s.p,{children:["Check the ",(0,i.jsx)(s.strong,{children:(0,i.jsx)(s.a,{href:"/changelog/3.4.0",children:"3.4.0 changelog entry"})})," for an exhaustive list of changes."]})]})}function d(e={}){let{wrapper:s}={...(0,r.a)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},80980:function(e,s,t){t.d(s,{Z:()=>o,a:()=>a});var n=t(67294);let i={},r=n.createContext(i);function a(e){let s=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function o(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),n.createElement(r.Provider,{value:s},e.children)}},62625:function(e){e.exports=JSON.parse('{"permalink":"/blog/releases/3.4","editUrl":"https://github.com/facebook/docusaurus/edit/main/website/blog/releases/3.4/index.mdx","source":"@site/blog/releases/3.4/index.mdx","title":"Docusaurus 3.4","description":"We are happy to announce Docusaurus 3.4.","date":"2024-05-31T00:00:00.000Z","tags":[{"inline":false,"label":"Release","permalink":"/blog/tags/release","description":"Blog posts about Docusaurus\' new releases"}],"readingTime":3.045,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer, This Week In React editor","url":"https://thisweekinreact.com","page":{"permalink":"/blog/authors/slorber"},"description":"A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.","socials":{"bluesky":"https://bsky.app/profile/sebastienlorber.com","x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","instagram":"https://www.instagram.com/thisweekinreact","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"}],"frontMatter":{"title":"Docusaurus 3.4","authors":["slorber"],"tags":["release"],"image":"./img/social-card.png","date":"2024-05-31T00:00:00.000Z"},"unlisted":false,"lastUpdatedAt":1739456991000,"lastUpdatedBy":"S\xe9bastien Lorber","prevItem":{"title":"Docusaurus 3.5","permalink":"/blog/releases/3.5"},"nextItem":{"title":"Docusaurus 3.3","permalink":"/blog/releases/3.3"}}')}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["99850"],{84422:function(e,s,t){t.d(s,{Z:()=>n});let n=t.p+"assets/images/social-card-66116702bb73f0bf68a095ddaecc0fe4.png"},56254:function(e,s,t){t.d(s,{Z:()=>n});let n=t.p+"assets/images/hash-96c9ef1044dc1febfe3eefdc9350e2a0.png"},86386:function(e,s,t){t.d(s,{Z:()=>n});let n=t.p+"assets/images/social-card-66116702bb73f0bf68a095ddaecc0fe4.png"},23132:function(e,s,t){t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>o,default:()=>d,frontMatter:()=>a,metadata:()=>n,toc:()=>c});var n=t(62625),i=t(85893),r=t(80980);let a={title:"Docusaurus 3.4",authors:["slorber"],tags:["release"],image:"./img/social-card.png",date:new Date("2024-05-31T00:00:00.000Z")},o=void 0,l={image:t(84422).Z,authorsImageUrls:[void 0]},c=[{value:"Highlights",id:"highlights",level:2},{value:"Tags files",id:"tags-files",level:3},{value:"Hash Router - Experimental",id:"hash-router---experimental",level:3},{value:"Site Storage - Experimental",id:"site-storage---experimental",level:3},{value:"Other changes",id:"other-changes",level:2}];function h(e){let s={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(s.p,{children:["We are happy to announce ",(0,i.jsx)(s.strong,{children:"Docusaurus 3.4"}),"."]}),"\n",(0,i.jsxs)(s.p,{children:["Upgrading should be easy. Our ",(0,i.jsx)(s.a,{href:"/community/release-process",children:"release process"})," respects ",(0,i.jsx)(s.a,{href:"https://semver.org/",children:"Semantic Versioning"}),". Minor versions do not include any breaking changes."]}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.img,{alt:"Docusaurus blog post social card",src:t(86386).Z+"",width:"1200",height:"600"})}),"\n",(0,i.jsx)(s.h2,{id:"highlights",children:"Highlights"}),"\n",(0,i.jsx)(s.h3,{id:"tags-files",children:"Tags files"}),"\n",(0,i.jsxs)(s.p,{children:["The docs and blog plugins both already supported a ",(0,i.jsx)(s.code,{children:"tags"})," front matter attribute, enabling you to group related content. But tags declared inline in the front matter are not always ideal."]}),"\n",(0,i.jsxs)(s.p,{children:["With ",(0,i.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10137",children:"#10137"}),", you can now declare a list of pre-defined tags in a ",(0,i.jsx)(s.code,{children:"tags.yml"})," file:"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-yml",metastring:'title="blog/tags.yml"',children:"tag1:\n label: 'Tag 1'\n description: 'Tag 1 description'\n permalink: /tag-1-permalink\n\ntag2:\n label: 'Tag 2'\n description: 'Tag 2 description'\n permalink: /tag-2-permalink\n"})}),"\n",(0,i.jsx)(s.p,{children:"These predefined tags can be used in the front matter of your blog or docs files:"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-md",metastring:'title="blog/2024-05-31-my-blog-post.md"',children:"---\ntags: [tag1, tag2]\n---\n\n# Title\n\nContent\n"})}),"\n",(0,i.jsx)(s.admonition,{title:"Keeping tags usage consistent",type:"tip",children:(0,i.jsxs)(s.p,{children:["Use the new ",(0,i.jsx)(s.code,{children:"onInlineTags: 'throw'"})," plugin option to enforce the usage of predefined tags and prevent contributors from creating new unwanted tags."]})}),"\n",(0,i.jsx)(s.h3,{id:"hash-router---experimental",children:"Hash Router - Experimental"}),"\n",(0,i.jsxs)(s.p,{children:["With ",(0,i.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9859",children:"9859"}),", we added a new ",(0,i.jsx)(s.strong,{children:"experimental"})," hash router config option, useful for ",(0,i.jsx)(s.strong,{children:"offline browsing"})," by opening your site locally through the ",(0,i.jsx)(s.code,{children:"file://"})," protocol."]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-tsx",metastring:'title="docusaurus.config.js"',children:"export default {\n future: {\n experimental_router: 'hash',\n },\n};\n"})}),"\n",(0,i.jsx)(s.admonition,{type:"warning",children:(0,i.jsxs)(s.p,{children:["This mode is ",(0,i.jsx)(s.strong,{children:"not recommended for sites deployed through a web server"}),"."]})}),"\n",(0,i.jsxs)(s.p,{children:["When this mode is turned on, Docusaurus will opt out of static site rendering, and build a client-side single page application where all routes are prefixed with ",(0,i.jsx)(s.code,{children:"/#/"}),". A single ",(0,i.jsx)(s.code,{children:"index.html"})," file is generated. This file can be opened locally in your browser by simply clicking it, using the browser ",(0,i.jsx)(s.code,{children:"file://"})," protocol. This makes it possible to distribute a Docusaurus site as a ",(0,i.jsx)(s.code,{children:".zip"})," file so that readers can browse it offline, without having to install anything complex on their computer apart a web browser."]}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.img,{alt:"Docusaurus hash router - local browsing using the file:// protocol",src:t(56254).Z+"",width:"1203",height:"601"})}),"\n",(0,i.jsx)(s.p,{children:"Try browsing our own Docusaurus site built with the hash router:"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"https://facebook.github.io/docusaurus/#/",children:"Docusaurus website - Hash Router web deployment"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/actions/workflows/build-hash-router.yml",children:"Docusaurus website - Hash Router downloadable GitHub artifacts"})}),"\n"]}),"\n",(0,i.jsx)(s.admonition,{title:"Experimental",type:"caution",children:(0,i.jsxs)(s.p,{children:["This feature is ",(0,i.jsx)(s.strong,{children:"experimental"}),". If you try it out, please let us know how it works for you ",(0,i.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/issues/3825",children:"here"}),"."]})}),"\n",(0,i.jsx)(s.h3,{id:"site-storage---experimental",children:"Site Storage - Experimental"}),"\n",(0,i.jsxs)(s.p,{children:["Docusaurus uses the browser ",(0,i.jsx)(s.code,{children:"localStorage"})," API to persist UI state."]}),"\n",(0,i.jsxs)(s.p,{children:['But sometimes the storage space is "shared" between multiple sites using the same domain, leading to ',(0,i.jsx)(s.strong,{children:"storage key conflicts"}),". This generally happens in two cases"]}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:["when working on multiple ",(0,i.jsx)(s.code,{children:"http://localhost:3000"})," sites"]}),"\n",(0,i.jsxs)(s.li,{children:["when hosting multiple sites under the same domain: ",(0,i.jsx)(s.code,{children:"https://example.com/site1/"})," and ",(0,i.jsx)(s.code,{children:"https://example.com/site2/"})]}),"\n"]}),"\n",(0,i.jsxs)(s.p,{children:["For this reason, we introduced a new ",(0,i.jsx)(s.strong,{children:"experimental"})," ",(0,i.jsx)(s.code,{children:"siteStorage"})," configuration option:"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-tsx",children:"export default {\n future: {\n experimental_storage: {\n type: 'localStorage',\n namespace: true,\n },\n },\n};\n"})}),"\n",(0,i.jsxs)(s.p,{children:["When ",(0,i.jsx)(s.code,{children:"namespace: true"})," is set, we apply a hash suffix to all the storage keys, making them unique to the current site (based on ",(0,i.jsx)(s.code,{children:"config.url"})," and ",(0,i.jsx)(s.code,{children:"config.baseUrl"}),". For example, the ",(0,i.jsx)(s.code,{children:"theme"})," storage key becomes ",(0,i.jsx)(s.code,{children:"theme-x6f"}),". It is also possible to provide your own custom suffix ",(0,i.jsx)(s.code,{children:"namespace: 'suffix'"}),". We also made it possible to use ",(0,i.jsx)(s.code,{children:"type: 'sessionStorage'"})," instead of the default ",(0,i.jsx)(s.code,{children:"localStorage"}),"."]}),"\n",(0,i.jsx)(s.admonition,{title:"Experimental",type:"caution",children:(0,i.jsxs)(s.p,{children:["This feature is ",(0,i.jsx)(s.strong,{children:"experimental"}),". If you try it out, please let us know how it works for you ",(0,i.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10121",children:"here"}),"."]})}),"\n",(0,i.jsx)(s.h2,{id:"other-changes",children:"Other changes"}),"\n",(0,i.jsx)(s.p,{children:"Other notable changes include:"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10151",children:"#10151"}),": add Turkmen (tk) theme translations"]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10111",children:"#10111"}),": add Bulgarian (bg) theme translations"]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10168",children:"#10168"}),": fix many long overdue Markdown link resolution bugs"]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10178",children:"#10178"}),": the ",(0,i.jsx)(s.code,{children:"/search"})," page now respects the ",(0,i.jsx)(s.code,{children:"contextualSearch: false"})," setting"]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10118",children:"#10118"}),": fix bad pluralization on docs generated index category card description"]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10130",children:"#10130"}),": fix false positives reported by the broken anchor checker due to trailing slashes"]}),"\n"]}),"\n",(0,i.jsxs)(s.p,{children:["Check the ",(0,i.jsx)(s.strong,{children:(0,i.jsx)(s.a,{href:"/changelog/3.4.0",children:"3.4.0 changelog entry"})})," for an exhaustive list of changes."]})]})}function d(e={}){let{wrapper:s}={...(0,r.a)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},80980:function(e,s,t){t.d(s,{Z:()=>o,a:()=>a});var n=t(67294);let i={},r=n.createContext(i);function a(e){let s=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function o(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),n.createElement(r.Provider,{value:s},e.children)}},62625:function(e){e.exports=JSON.parse('{"permalink":"/blog/releases/3.4","editUrl":"https://github.com/facebook/docusaurus/edit/main/website/blog/releases/3.4/index.mdx","source":"@site/blog/releases/3.4/index.mdx","title":"Docusaurus 3.4","description":"We are happy to announce Docusaurus 3.4.","date":"2024-05-31T00:00:00.000Z","tags":[{"inline":false,"label":"Release","permalink":"/blog/tags/release","description":"Blog posts about Docusaurus\' new releases"}],"readingTime":3.045,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer, This Week In React editor","url":"https://thisweekinreact.com","page":{"permalink":"/blog/authors/slorber"},"description":"A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.","socials":{"bluesky":"https://bsky.app/profile/sebastienlorber.com","x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","instagram":"https://www.instagram.com/thisweekinreact","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"}],"frontMatter":{"title":"Docusaurus 3.4","authors":["slorber"],"tags":["release"],"image":"./img/social-card.png","date":"2024-05-31T00:00:00.000Z"},"unlisted":false,"lastUpdatedAt":1739551601000,"lastUpdatedBy":"S\xe9bastien Lorber","prevItem":{"title":"Docusaurus 3.5","permalink":"/blog/releases/3.5"},"nextItem":{"title":"Docusaurus 3.3","permalink":"/blog/releases/3.3"}}')}}]);
\ No newline at end of file
diff --git a/assets/js/16f6cad8.17b8a4b4.js b/assets/js/16f6cad8.925617a8.js
similarity index 99%
rename from assets/js/16f6cad8.17b8a4b4.js
rename to assets/js/16f6cad8.925617a8.js
index 29a1168c27..3627781aff 100644
--- a/assets/js/16f6cad8.17b8a4b4.js
+++ b/assets/js/16f6cad8.925617a8.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["38674"],{94616:function(e,n,s){s.r(n),s.d(n,{default:()=>b,frontMatter:()=>c,metadata:()=>i,assets:()=>u,toc:()=>r,contentTitle:()=>d});var i=JSON.parse('{"id":"guides/markdown-features/toc","title":"Headings and Table of contents","description":"Customizing headings and table-of-contents in Markdown","source":"@site/docs/guides/markdown-features/markdown-features-toc.mdx","sourceDirName":"guides/markdown-features","slug":"/markdown-features/toc","permalink":"/docs/markdown-features/toc","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/guides/markdown-features/markdown-features-toc.mdx","tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739456991000,"frontMatter":{"id":"toc","description":"Customizing headings and table-of-contents in Markdown","slug":"/markdown-features/toc"},"sidebar":"docs","previous":{"title":"Admonitions","permalink":"/docs/markdown-features/admonitions"},"next":{"title":"Assets","permalink":"/docs/markdown-features/assets"}}'),l=s(85893),a=s(80980),t=s(14522),o=s(78596);let c={id:"toc",description:"Customizing headings and table-of-contents in Markdown",slug:"/markdown-features/toc"},d="Headings and Table of contents",u={},r=[{value:"Markdown headings",id:"markdown-headings",level:2},{value:"Heading IDs",id:"heading-ids",level:3},{value:"Table of contents heading level",id:"table-of-contents-heading-level",level:2},{value:"Inline table of contents",id:"inline-table-of-contents",level:2},{value:"Customizing table of contents generation",id:"customizing-table-of-contents-generation",level:2},{value:"Example Section 1",id:"example-section-1",level:2},{value:"Example Subsection 1 a",id:"example-subsection-1-a",level:3},{value:"Example subsubsection 1 a I",id:"example-subsubsection-1-a-i",level:4},{value:"Example subsubsection 1 a II",id:"example-subsubsection-1-a-ii",level:4},{value:"Example subsubsection 1 a III",id:"example-subsubsection-1-a-iii",level:4},{value:"Example Subsection 1 b",id:"example-subsection-1-b",level:3},{value:"Example subsubsection 1 b I",id:"example-subsubsection-1-b-i",level:4},{value:"Example subsubsection 1 b II",id:"example-subsubsection-1-b-ii",level:4},{value:"Example subsubsection 1 b III",id:"example-subsubsection-1-b-iii",level:4},{value:"Example Subsection 1 c",id:"example-subsection-1-c",level:3},{value:"Example subsubsection 1 c I",id:"example-subsubsection-1-c-i",level:4},{value:"Example subsubsection 1 c II",id:"example-subsubsection-1-c-ii",level:4},{value:"Example subsubsection 1 c III",id:"example-subsubsection-1-c-iii",level:4},{value:"Example Section 2",id:"example-section-2",level:2},{value:"Example Subsection 2 a",id:"example-subsection-2-a",level:3},{value:"Example subsubsection 2 a I",id:"example-subsubsection-2-a-i",level:4},{value:"Example subsubsection 2 a II",id:"example-subsubsection-2-a-ii",level:4},{value:"Example subsubsection 2 a III",id:"example-subsubsection-2-a-iii",level:4},{value:"Example Subsection 2 b",id:"example-subsection-2-b",level:3},{value:"Example subsubsection 2 b I",id:"example-subsubsection-2-b-i",level:4},{value:"Example subsubsection 2 b II",id:"example-subsubsection-2-b-ii",level:4},{value:"Example subsubsection 2 b III",id:"example-subsubsection-2-b-iii",level:4},{value:"Example Subsection 2 c",id:"example-subsection-2-c",level:3},{value:"Example subsubsection 2 c I",id:"example-subsubsection-2-c-i",level:4},{value:"Example subsubsection 2 c II",id:"example-subsubsection-2-c-ii",level:4},{value:"Example subsubsection 2 c III",id:"example-subsubsection-2-c-iii",level:4},{value:"Example Section 3",id:"example-section-3",level:2},{value:"Example Subsection 3 a",id:"example-subsection-3-a",level:3},{value:"Example subsubsection 3 a I",id:"example-subsubsection-3-a-i",level:4},{value:"Example subsubsection 3 a II",id:"example-subsubsection-3-a-ii",level:4},{value:"Example subsubsection 3 a III",id:"example-subsubsection-3-a-iii",level:4},{value:"Example Subsection 3 b",id:"example-subsection-3-b",level:3},{value:"Example subsubsection 3 b I",id:"example-subsubsection-3-b-i",level:4},{value:"Example subsubsection 3 b II",id:"example-subsubsection-3-b-ii",level:4},{value:"Example subsubsection 3 b III",id:"example-subsubsection-3-b-iii",level:4},{value:"Example Subsection 3 c",id:"example-subsection-3-c",level:3},{value:"Example subsubsection 3 c I",id:"example-subsubsection-3-c-i",level:4},{value:"Example subsubsection 3 c II",id:"example-subsubsection-3-c-ii",level:4},{value:"Example subsubsection 3 c III",id:"example-subsubsection-3-c-iii",level:4}];function h(e){let n={a:"a",admonition:"admonition",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.a)(),...e.components},{Code: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.")}("Code",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.header,{children:(0,l.jsx)(n.h1,{id:"headings-and-table-of-contents",children:"Headings and Table of contents"})}),"\n",(0,l.jsx)(n.h2,{id:"markdown-headings",children:"Markdown headings"}),"\n",(0,l.jsx)(n.p,{children:"You can use regular Markdown headings."}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-md",children:"## Level 2 title\n\n### Level 3 title\n\n#### Level 4 title\n"})}),"\n",(0,l.jsx)(n.p,{children:"Each Markdown heading will appear as a table of contents entry."}),"\n",(0,l.jsx)(n.h3,{id:"heading-ids",children:"Heading IDs"}),"\n",(0,l.jsx)(n.p,{children:"Each heading has an ID that can be automatically generated or explicitly specified. Heading IDs allow you to link to a specific document heading in Markdown or JSX:"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-md",children:"[link](#heading-id)\n"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-jsx",children:'link\n'})}),"\n",(0,l.jsxs)(n.p,{children:["By default, Docusaurus will generate heading IDs for you, based on the heading text. For example, ",(0,l.jsx)(n.code,{children:"### Hello World"})," will have ID ",(0,l.jsx)(n.code,{children:"hello-world"}),"."]}),"\n",(0,l.jsxs)(n.p,{children:["Generated IDs have ",(0,l.jsx)(n.strong,{children:"some limitations"}),":"]}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"The ID might not look good"}),"\n",(0,l.jsxs)(n.li,{children:["You might want to ",(0,l.jsx)(n.strong,{children:"change or translate"})," the text without updating the existing ID"]}),"\n"]}),"\n",(0,l.jsxs)(n.p,{children:["A special Markdown syntax lets you set an ",(0,l.jsx)(n.strong,{children:"explicit heading id"}),":"]}),"\n",(0,l.jsx)(s,{language:"md",children:"### Hello World {#my-explicit-id}\n"}),"\n",(0,l.jsx)(n.admonition,{type:"tip",children:(0,l.jsxs)(n.p,{children:["Use the ",(0,l.jsx)(n.strong,{children:(0,l.jsx)(n.a,{href:"/docs/cli#docusaurus-write-heading-ids-sitedir",children:(0,l.jsx)(n.code,{children:"write-heading-ids"})})})," CLI command to add explicit IDs to all your Markdown documents."]})}),"\n",(0,l.jsx)(n.admonition,{title:"Avoid colliding IDs",type:"warning",children:(0,l.jsx)(n.p,{children:"Generated heading IDs will be guaranteed to be unique on each page, but if you use custom IDs, make sure each one appears exactly once on each page, or there will be two DOM elements with the same ID, which is invalid HTML semantics, and will lead to one heading being unlinkable."})}),"\n",(0,l.jsx)(n.h2,{id:"table-of-contents-heading-level",children:"Table of contents heading level"}),"\n",(0,l.jsx)(n.p,{children:"Each Markdown document displays a table of contents on the top-right corner. By default, this table only shows h2 and h3 headings, which should be sufficient for an overview of the page structure. In case you need to change the range of headings displayed, you can customize the minimum and maximum heading level \u2014 either per page or globally."}),"\n",(0,l.jsxs)(n.p,{children:["To set the heading level for a particular page, use the ",(0,l.jsx)(n.code,{children:"toc_min_heading_level"})," and ",(0,l.jsx)(n.code,{children:"toc_max_heading_level"})," front matter."]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-md",metastring:'title="myDoc.md"',children:"---\n# Display h2 to h5 headings\ntoc_min_heading_level: 2\ntoc_max_heading_level: 5\n---\n"})}),"\n",(0,l.jsxs)(n.p,{children:["To set the heading level for ",(0,l.jsx)(n.em,{children:"all"})," pages, use the ",(0,l.jsx)(n.a,{href:"/docs/api/themes/configuration#table-of-contents",children:(0,l.jsx)(n.code,{children:"themeConfig.tableOfContents"})})," option."]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n tableOfContents: {\n // highlight-start\n minHeadingLevel: 2,\n maxHeadingLevel: 5,\n // highlight-end\n },\n },\n};\n"})}),"\n",(0,l.jsx)(n.p,{children:"If you've set the options globally, you can still override them locally via front matter."}),"\n",(0,l.jsx)(n.admonition,{type:"note",children:(0,l.jsxs)(n.p,{children:["The ",(0,l.jsx)(n.code,{children:"themeConfig"})," option would apply to all TOC on the site, including ",(0,l.jsx)(n.a,{href:"#inline-table-of-contents",children:"inline TOC"}),", but front matter options only affect the top-right TOC. You need to use the ",(0,l.jsx)(n.code,{children:"minHeadingLevel"})," and ",(0,l.jsx)(n.code,{children:"maxHeadingLevel"})," props to customize each ",(0,l.jsx)(n.code,{children:""})," component."]})}),"\n",(0,l.jsx)(n.h2,{id:"inline-table-of-contents",children:"Inline table of contents"}),"\n",(0,l.jsx)(n.p,{children:"It is also possible to display an inline table of contents directly inside a Markdown document, thanks to MDX."}),"\n",(0,l.jsxs)(n.p,{children:["The ",(0,l.jsx)(n.code,{children:"toc"})," variable is available in any MDX document and contains all the headings of an MDX document. By default, only ",(0,l.jsx)(n.code,{children:"h2"})," and ",(0,l.jsx)(n.code,{children:"h3"})," headings are displayed in the TOC. You can change which heading levels are visible by setting ",(0,l.jsx)(n.code,{children:"minHeadingLevel"})," or ",(0,l.jsx)(n.code,{children:"maxHeadingLevel"})," for individual ",(0,l.jsx)(n.code,{children:"TOCInline"})," components."]}),"\n","\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-jsx",children:"import TOCInline from '@theme/TOCInline';\n\n\n"})}),"\n","\n",(0,l.jsx)(t.Z,{children:(0,l.jsx)(o.Z,{toc:r})}),"\n",(0,l.jsxs)(n.p,{children:["The ",(0,l.jsx)(n.code,{children:"toc"})," global is just a list of heading items:"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-ts",children:"declare const toc: {\n value: string;\n id: string;\n level: number;\n}[];\n"})}),"\n",(0,l.jsxs)(n.p,{children:["Note that the ",(0,l.jsx)(n.code,{children:"toc"})," global is a flat array, so you can easily cut out unwanted nodes or insert extra nodes, and create a new TOC tree."]}),"\n","\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-jsx",children:"import TOCInline from '@theme/TOCInline';\n\n node.level === 2 || node.level === 4)}\n minHeadingLevel={2}\n // Show h4 headings in addition to the default h2 and h3 headings\n maxHeadingLevel={4}\n/>\n"})}),"\n",(0,l.jsx)(t.Z,{children:(0,l.jsx)(o.Z,{toc:r.filter(e=>2===e.level||4===e.level),minHeadingLevel:2,maxHeadingLevel:4})}),"\n",(0,l.jsx)(n.h2,{id:"customizing-table-of-contents-generation",children:"Customizing table of contents generation"}),"\n",(0,l.jsxs)(n.p,{children:["The table-of-contents is generated by parsing the Markdown source with a ",(0,l.jsx)(n.a,{href:"/docs/markdown-features/plugins",children:"Remark plugin"}),". There are known edge-cases where it generates false-positives and false-negatives."]}),"\n",(0,l.jsxs)(n.p,{children:["Markdown headings within hideable areas will still show up in the TOC. For example, headings within ",(0,l.jsx)(n.a,{href:"/docs/markdown-features/tabs",children:(0,l.jsx)(n.code,{children:"Tabs"})})," and ",(0,l.jsx)(n.a,{href:"/docs/markdown-features#details",children:(0,l.jsx)(n.code,{children:"details"})})," will not be excluded."]}),"\n",(0,l.jsx)(n.p,{children:"Non-Markdown headings will not show up in the TOC. This can be used to your advantage to tackle the aforementioned issue."}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-md",children:'\nSome details containing headings\n
I\'m a heading that will not show up in the TOC
\n\nSome content...\n\n\n'})}),"\n",(0,l.jsxs)(n.p,{children:["The ability to ergonomically insert extra headings or ignore certain headings is a work-in-progress. If this feature is important to you, please report your use-case in ",(0,l.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/issues/6201",children:"this issue"}),"."]}),"\n",(0,l.jsx)(n.hr,{}),"\n",(0,l.jsx)(n.admonition,{type:"warning",children:(0,l.jsx)(n.p,{children:"Below is just some dummy content to have more table of contents items available on the current page."})}),"\n",(0,l.jsx)(n.h2,{id:"example-section-1",children:"Example Section 1"}),"\n",(0,l.jsx)(n.p,{children:"Lorem ipsum"}),"\n",(0,l.jsx)(n.h3,{id:"example-subsection-1-a",children:"Example Subsection 1 a"}),"\n",(0,l.jsx)(n.p,{children:"Lorem ipsum"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-1-a-i",children:"Example subsubsection 1 a I"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-1-a-ii",children:"Example subsubsection 1 a II"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-1-a-iii",children:"Example subsubsection 1 a III"}),"\n",(0,l.jsx)(n.h3,{id:"example-subsection-1-b",children:"Example Subsection 1 b"}),"\n",(0,l.jsx)(n.p,{children:"Lorem ipsum"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-1-b-i",children:"Example subsubsection 1 b I"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-1-b-ii",children:"Example subsubsection 1 b II"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-1-b-iii",children:"Example subsubsection 1 b III"}),"\n",(0,l.jsx)(n.h3,{id:"example-subsection-1-c",children:"Example Subsection 1 c"}),"\n",(0,l.jsx)(n.p,{children:"Lorem ipsum"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-1-c-i",children:"Example subsubsection 1 c I"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-1-c-ii",children:"Example subsubsection 1 c II"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-1-c-iii",children:"Example subsubsection 1 c III"}),"\n",(0,l.jsx)(n.h2,{id:"example-section-2",children:"Example Section 2"}),"\n",(0,l.jsx)(n.p,{children:"Lorem ipsum"}),"\n",(0,l.jsx)(n.h3,{id:"example-subsection-2-a",children:"Example Subsection 2 a"}),"\n",(0,l.jsx)(n.p,{children:"Lorem ipsum"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-2-a-i",children:"Example subsubsection 2 a I"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-2-a-ii",children:"Example subsubsection 2 a II"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-2-a-iii",children:"Example subsubsection 2 a III"}),"\n",(0,l.jsx)(n.h3,{id:"example-subsection-2-b",children:"Example Subsection 2 b"}),"\n",(0,l.jsx)(n.p,{children:"Lorem ipsum"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-2-b-i",children:"Example subsubsection 2 b I"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-2-b-ii",children:"Example subsubsection 2 b II"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-2-b-iii",children:"Example subsubsection 2 b III"}),"\n",(0,l.jsx)(n.h3,{id:"example-subsection-2-c",children:"Example Subsection 2 c"}),"\n",(0,l.jsx)(n.p,{children:"Lorem ipsum"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-2-c-i",children:"Example subsubsection 2 c I"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-2-c-ii",children:"Example subsubsection 2 c II"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-2-c-iii",children:"Example subsubsection 2 c III"}),"\n",(0,l.jsx)(n.h2,{id:"example-section-3",children:"Example Section 3"}),"\n",(0,l.jsx)(n.p,{children:"Lorem ipsum"}),"\n",(0,l.jsx)(n.h3,{id:"example-subsection-3-a",children:"Example Subsection 3 a"}),"\n",(0,l.jsx)(n.p,{children:"Lorem ipsum"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-3-a-i",children:"Example subsubsection 3 a I"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-3-a-ii",children:"Example subsubsection 3 a II"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-3-a-iii",children:"Example subsubsection 3 a III"}),"\n",(0,l.jsx)(n.h3,{id:"example-subsection-3-b",children:"Example Subsection 3 b"}),"\n",(0,l.jsx)(n.p,{children:"Lorem ipsum"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-3-b-i",children:"Example subsubsection 3 b I"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-3-b-ii",children:"Example subsubsection 3 b II"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-3-b-iii",children:"Example subsubsection 3 b III"}),"\n",(0,l.jsx)(n.h3,{id:"example-subsection-3-c",children:"Example Subsection 3 c"}),"\n",(0,l.jsx)(n.p,{children:"Lorem ipsum"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-3-c-i",children:"Example subsubsection 3 c I"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-3-c-ii",children:"Example subsubsection 3 c II"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-3-c-iii",children:"Example subsubsection 3 c III"})]})}function b(e={}){let{wrapper:n}={...(0,a.a)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(h,{...e})}):h(e)}},78596:function(e,n,s){s.d(n,{Z:()=>a});var i=s(85893);s(67294);var l=s(89477);function a(e){let{toc:n,minHeadingLevel:s,maxHeadingLevel:a}=e;return(0,i.jsx)("div",{className:"tableOfContentsInline_2sru",children:(0,i.jsx)(l.Z,{toc:n,minHeadingLevel:s,maxHeadingLevel:a,className:"table-of-contents",linkClassName:null})})}},89477:function(e,n,s){s.d(n,{Z:()=>d});var i=s(85893),l=s(67294),a=s(26378);function t(e){let n=e.getBoundingClientRect();return n.top===n.bottom?t(e.parentNode):n}var o=s(35363);let c=l.memo(function e(n){let{toc:s,className:l,linkClassName:a,isChild:t}=n;return s.length?(0,i.jsx)("ul",{className:t?void 0:l,children:s.map(n=>(0,i.jsxs)("li",{children:[(0,i.jsx)(o.Z,{to:`#${n.id}`,className:a??void 0,dangerouslySetInnerHTML:{__html:n.value}}),(0,i.jsx)(e,{isChild:!0,toc:n.children,className:l,linkClassName:a})]},n.id))}):null});function d(e){let{toc:n,className:s="table-of-contents table-of-contents__left-border",linkClassName:o="table-of-contents__link",linkActiveClassName:d,minHeadingLevel:u,maxHeadingLevel:r,...h}=e,b=(0,a.L)(),m=u??b.tableOfContents.minHeadingLevel,x=r??b.tableOfContents.maxHeadingLevel,p=function(e){let{toc:n,minHeadingLevel:s,maxHeadingLevel:i}=e;return(0,l.useMemo)(()=>(function e(n){let{toc:s,minHeadingLevel:i,maxHeadingLevel:l}=n;return s.flatMap(n=>{let s=e({toc:n.children,minHeadingLevel:i,maxHeadingLevel:l});return n.level>=i&&n.level<=l?[{...n,children:s}]:s})})({toc:function(e){let n=e.map(e=>({...e,parentIndex:-1,children:[]})),s=Array(7).fill(-1);n.forEach((e,n)=>{let i=s.slice(2,e.level);e.parentIndex=Math.max(...i),s[e.level]=n});let i=[];return n.forEach(e=>{let{parentIndex:s,...l}=e;s>=0?n[s].children.push(l):i.push(l)}),i}(n),minHeadingLevel:s,maxHeadingLevel:i}),[n,s,i])}({toc:n,minHeadingLevel:m,maxHeadingLevel:x});return!function(e){let n=(0,l.useRef)(void 0),s=function(){let e=(0,l.useRef)(0),{navbar:{hideOnScroll:n}}=(0,a.L)();return(0,l.useEffect)(()=>{e.current=n?0:document.querySelector(".navbar").clientHeight},[n]),e}();(0,l.useEffect)(()=>{if(!e)return()=>{};let{linkClassName:i,linkActiveClassName:l,minHeadingLevel:a,maxHeadingLevel:o}=e;function c(){let e=Array.from(document.getElementsByClassName(i)),c=function(e,n){let{anchorTopOffset:s}=n,i=e.find(e=>t(e).top>=s);if(i){var l;return(l=t(i)).top>0&&l.bottomc&&c.id===decodeURIComponent(e.href.substring(e.href.indexOf("#")+1)));e.forEach(e=>{e===d?(n.current&&n.current!==e&&n.current.classList.remove(l),e.classList.add(l),n.current=e):e.classList.remove(l)})}return document.addEventListener("scroll",c),document.addEventListener("resize",c),c(),()=>{document.removeEventListener("scroll",c),document.removeEventListener("resize",c)}},[e,s])}((0,l.useMemo)(()=>{if(o&&d)return{linkClassName:o,linkActiveClassName:d,minHeadingLevel:m,maxHeadingLevel:x}},[o,d,m,x])),(0,i.jsx)(c,{toc:p,className:s,linkClassName:o,...h})}},14522:function(e,n,s){s.d(n,{Z:()=>o});var i=s(85893);s(67294);var l=s(90496);let a="dot_giz1",t="bar_rrRL";function o(e){let{children:n,minHeight:s,url:o="http://localhost:3000",style:c,bodyStyle:d}=e;return(0,i.jsxs)("div",{className:"browserWindow_my1Q",style:{...c,minHeight:s},children:[(0,i.jsxs)("div",{className:"browserWindowHeader_jXSR",children:[(0,i.jsxs)("div",{className:"buttons_uHc7",children:[(0,i.jsx)("span",{className:a,style:{background:"#f25f58"}}),(0,i.jsx)("span",{className:a,style:{background:"#fbbe3c"}}),(0,i.jsx)("span",{className:a,style:{background:"#58cb42"}})]}),(0,i.jsx)("div",{className:(0,l.Z)("browserWindowAddressBar_Pd8y","text--truncate"),children:o}),(0,i.jsx)("div",{className:"browserWindowMenuIcon_Vhuh",children:(0,i.jsxs)("div",{children:[(0,i.jsx)("span",{className:t}),(0,i.jsx)("span",{className:t}),(0,i.jsx)("span",{className:t})]})})]}),(0,i.jsx)("div",{className:"browserWindowBody_Idgs",style:d,children:n})]})}},80980:function(e,n,s){s.d(n,{Z:()=>o,a:()=>t});var i=s(67294);let l={},a=i.createContext(l);function t(e){let n=i.useContext(a);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:t(e.components),i.createElement(a.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["38674"],{94616:function(e,n,s){s.r(n),s.d(n,{default:()=>b,frontMatter:()=>c,metadata:()=>i,assets:()=>u,toc:()=>r,contentTitle:()=>d});var i=JSON.parse('{"id":"guides/markdown-features/toc","title":"Headings and Table of contents","description":"Customizing headings and table-of-contents in Markdown","source":"@site/docs/guides/markdown-features/markdown-features-toc.mdx","sourceDirName":"guides/markdown-features","slug":"/markdown-features/toc","permalink":"/docs/markdown-features/toc","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/guides/markdown-features/markdown-features-toc.mdx","tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739551601000,"frontMatter":{"id":"toc","description":"Customizing headings and table-of-contents in Markdown","slug":"/markdown-features/toc"},"sidebar":"docs","previous":{"title":"Admonitions","permalink":"/docs/markdown-features/admonitions"},"next":{"title":"Assets","permalink":"/docs/markdown-features/assets"}}'),l=s(85893),a=s(80980),t=s(14522),o=s(78596);let c={id:"toc",description:"Customizing headings and table-of-contents in Markdown",slug:"/markdown-features/toc"},d="Headings and Table of contents",u={},r=[{value:"Markdown headings",id:"markdown-headings",level:2},{value:"Heading IDs",id:"heading-ids",level:3},{value:"Table of contents heading level",id:"table-of-contents-heading-level",level:2},{value:"Inline table of contents",id:"inline-table-of-contents",level:2},{value:"Customizing table of contents generation",id:"customizing-table-of-contents-generation",level:2},{value:"Example Section 1",id:"example-section-1",level:2},{value:"Example Subsection 1 a",id:"example-subsection-1-a",level:3},{value:"Example subsubsection 1 a I",id:"example-subsubsection-1-a-i",level:4},{value:"Example subsubsection 1 a II",id:"example-subsubsection-1-a-ii",level:4},{value:"Example subsubsection 1 a III",id:"example-subsubsection-1-a-iii",level:4},{value:"Example Subsection 1 b",id:"example-subsection-1-b",level:3},{value:"Example subsubsection 1 b I",id:"example-subsubsection-1-b-i",level:4},{value:"Example subsubsection 1 b II",id:"example-subsubsection-1-b-ii",level:4},{value:"Example subsubsection 1 b III",id:"example-subsubsection-1-b-iii",level:4},{value:"Example Subsection 1 c",id:"example-subsection-1-c",level:3},{value:"Example subsubsection 1 c I",id:"example-subsubsection-1-c-i",level:4},{value:"Example subsubsection 1 c II",id:"example-subsubsection-1-c-ii",level:4},{value:"Example subsubsection 1 c III",id:"example-subsubsection-1-c-iii",level:4},{value:"Example Section 2",id:"example-section-2",level:2},{value:"Example Subsection 2 a",id:"example-subsection-2-a",level:3},{value:"Example subsubsection 2 a I",id:"example-subsubsection-2-a-i",level:4},{value:"Example subsubsection 2 a II",id:"example-subsubsection-2-a-ii",level:4},{value:"Example subsubsection 2 a III",id:"example-subsubsection-2-a-iii",level:4},{value:"Example Subsection 2 b",id:"example-subsection-2-b",level:3},{value:"Example subsubsection 2 b I",id:"example-subsubsection-2-b-i",level:4},{value:"Example subsubsection 2 b II",id:"example-subsubsection-2-b-ii",level:4},{value:"Example subsubsection 2 b III",id:"example-subsubsection-2-b-iii",level:4},{value:"Example Subsection 2 c",id:"example-subsection-2-c",level:3},{value:"Example subsubsection 2 c I",id:"example-subsubsection-2-c-i",level:4},{value:"Example subsubsection 2 c II",id:"example-subsubsection-2-c-ii",level:4},{value:"Example subsubsection 2 c III",id:"example-subsubsection-2-c-iii",level:4},{value:"Example Section 3",id:"example-section-3",level:2},{value:"Example Subsection 3 a",id:"example-subsection-3-a",level:3},{value:"Example subsubsection 3 a I",id:"example-subsubsection-3-a-i",level:4},{value:"Example subsubsection 3 a II",id:"example-subsubsection-3-a-ii",level:4},{value:"Example subsubsection 3 a III",id:"example-subsubsection-3-a-iii",level:4},{value:"Example Subsection 3 b",id:"example-subsection-3-b",level:3},{value:"Example subsubsection 3 b I",id:"example-subsubsection-3-b-i",level:4},{value:"Example subsubsection 3 b II",id:"example-subsubsection-3-b-ii",level:4},{value:"Example subsubsection 3 b III",id:"example-subsubsection-3-b-iii",level:4},{value:"Example Subsection 3 c",id:"example-subsection-3-c",level:3},{value:"Example subsubsection 3 c I",id:"example-subsubsection-3-c-i",level:4},{value:"Example subsubsection 3 c II",id:"example-subsubsection-3-c-ii",level:4},{value:"Example subsubsection 3 c III",id:"example-subsubsection-3-c-iii",level:4}];function h(e){let n={a:"a",admonition:"admonition",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.a)(),...e.components},{Code: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.")}("Code",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.header,{children:(0,l.jsx)(n.h1,{id:"headings-and-table-of-contents",children:"Headings and Table of contents"})}),"\n",(0,l.jsx)(n.h2,{id:"markdown-headings",children:"Markdown headings"}),"\n",(0,l.jsx)(n.p,{children:"You can use regular Markdown headings."}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-md",children:"## Level 2 title\n\n### Level 3 title\n\n#### Level 4 title\n"})}),"\n",(0,l.jsx)(n.p,{children:"Each Markdown heading will appear as a table of contents entry."}),"\n",(0,l.jsx)(n.h3,{id:"heading-ids",children:"Heading IDs"}),"\n",(0,l.jsx)(n.p,{children:"Each heading has an ID that can be automatically generated or explicitly specified. Heading IDs allow you to link to a specific document heading in Markdown or JSX:"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-md",children:"[link](#heading-id)\n"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-jsx",children:'link\n'})}),"\n",(0,l.jsxs)(n.p,{children:["By default, Docusaurus will generate heading IDs for you, based on the heading text. For example, ",(0,l.jsx)(n.code,{children:"### Hello World"})," will have ID ",(0,l.jsx)(n.code,{children:"hello-world"}),"."]}),"\n",(0,l.jsxs)(n.p,{children:["Generated IDs have ",(0,l.jsx)(n.strong,{children:"some limitations"}),":"]}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"The ID might not look good"}),"\n",(0,l.jsxs)(n.li,{children:["You might want to ",(0,l.jsx)(n.strong,{children:"change or translate"})," the text without updating the existing ID"]}),"\n"]}),"\n",(0,l.jsxs)(n.p,{children:["A special Markdown syntax lets you set an ",(0,l.jsx)(n.strong,{children:"explicit heading id"}),":"]}),"\n",(0,l.jsx)(s,{language:"md",children:"### Hello World {#my-explicit-id}\n"}),"\n",(0,l.jsx)(n.admonition,{type:"tip",children:(0,l.jsxs)(n.p,{children:["Use the ",(0,l.jsx)(n.strong,{children:(0,l.jsx)(n.a,{href:"/docs/cli#docusaurus-write-heading-ids-sitedir",children:(0,l.jsx)(n.code,{children:"write-heading-ids"})})})," CLI command to add explicit IDs to all your Markdown documents."]})}),"\n",(0,l.jsx)(n.admonition,{title:"Avoid colliding IDs",type:"warning",children:(0,l.jsx)(n.p,{children:"Generated heading IDs will be guaranteed to be unique on each page, but if you use custom IDs, make sure each one appears exactly once on each page, or there will be two DOM elements with the same ID, which is invalid HTML semantics, and will lead to one heading being unlinkable."})}),"\n",(0,l.jsx)(n.h2,{id:"table-of-contents-heading-level",children:"Table of contents heading level"}),"\n",(0,l.jsx)(n.p,{children:"Each Markdown document displays a table of contents on the top-right corner. By default, this table only shows h2 and h3 headings, which should be sufficient for an overview of the page structure. In case you need to change the range of headings displayed, you can customize the minimum and maximum heading level \u2014 either per page or globally."}),"\n",(0,l.jsxs)(n.p,{children:["To set the heading level for a particular page, use the ",(0,l.jsx)(n.code,{children:"toc_min_heading_level"})," and ",(0,l.jsx)(n.code,{children:"toc_max_heading_level"})," front matter."]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-md",metastring:'title="myDoc.md"',children:"---\n# Display h2 to h5 headings\ntoc_min_heading_level: 2\ntoc_max_heading_level: 5\n---\n"})}),"\n",(0,l.jsxs)(n.p,{children:["To set the heading level for ",(0,l.jsx)(n.em,{children:"all"})," pages, use the ",(0,l.jsx)(n.a,{href:"/docs/api/themes/configuration#table-of-contents",children:(0,l.jsx)(n.code,{children:"themeConfig.tableOfContents"})})," option."]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n tableOfContents: {\n // highlight-start\n minHeadingLevel: 2,\n maxHeadingLevel: 5,\n // highlight-end\n },\n },\n};\n"})}),"\n",(0,l.jsx)(n.p,{children:"If you've set the options globally, you can still override them locally via front matter."}),"\n",(0,l.jsx)(n.admonition,{type:"note",children:(0,l.jsxs)(n.p,{children:["The ",(0,l.jsx)(n.code,{children:"themeConfig"})," option would apply to all TOC on the site, including ",(0,l.jsx)(n.a,{href:"#inline-table-of-contents",children:"inline TOC"}),", but front matter options only affect the top-right TOC. You need to use the ",(0,l.jsx)(n.code,{children:"minHeadingLevel"})," and ",(0,l.jsx)(n.code,{children:"maxHeadingLevel"})," props to customize each ",(0,l.jsx)(n.code,{children:""})," component."]})}),"\n",(0,l.jsx)(n.h2,{id:"inline-table-of-contents",children:"Inline table of contents"}),"\n",(0,l.jsx)(n.p,{children:"It is also possible to display an inline table of contents directly inside a Markdown document, thanks to MDX."}),"\n",(0,l.jsxs)(n.p,{children:["The ",(0,l.jsx)(n.code,{children:"toc"})," variable is available in any MDX document and contains all the headings of an MDX document. By default, only ",(0,l.jsx)(n.code,{children:"h2"})," and ",(0,l.jsx)(n.code,{children:"h3"})," headings are displayed in the TOC. You can change which heading levels are visible by setting ",(0,l.jsx)(n.code,{children:"minHeadingLevel"})," or ",(0,l.jsx)(n.code,{children:"maxHeadingLevel"})," for individual ",(0,l.jsx)(n.code,{children:"TOCInline"})," components."]}),"\n","\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-jsx",children:"import TOCInline from '@theme/TOCInline';\n\n\n"})}),"\n","\n",(0,l.jsx)(t.Z,{children:(0,l.jsx)(o.Z,{toc:r})}),"\n",(0,l.jsxs)(n.p,{children:["The ",(0,l.jsx)(n.code,{children:"toc"})," global is just a list of heading items:"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-ts",children:"declare const toc: {\n value: string;\n id: string;\n level: number;\n}[];\n"})}),"\n",(0,l.jsxs)(n.p,{children:["Note that the ",(0,l.jsx)(n.code,{children:"toc"})," global is a flat array, so you can easily cut out unwanted nodes or insert extra nodes, and create a new TOC tree."]}),"\n","\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-jsx",children:"import TOCInline from '@theme/TOCInline';\n\n node.level === 2 || node.level === 4)}\n minHeadingLevel={2}\n // Show h4 headings in addition to the default h2 and h3 headings\n maxHeadingLevel={4}\n/>\n"})}),"\n",(0,l.jsx)(t.Z,{children:(0,l.jsx)(o.Z,{toc:r.filter(e=>2===e.level||4===e.level),minHeadingLevel:2,maxHeadingLevel:4})}),"\n",(0,l.jsx)(n.h2,{id:"customizing-table-of-contents-generation",children:"Customizing table of contents generation"}),"\n",(0,l.jsxs)(n.p,{children:["The table-of-contents is generated by parsing the Markdown source with a ",(0,l.jsx)(n.a,{href:"/docs/markdown-features/plugins",children:"Remark plugin"}),". There are known edge-cases where it generates false-positives and false-negatives."]}),"\n",(0,l.jsxs)(n.p,{children:["Markdown headings within hideable areas will still show up in the TOC. For example, headings within ",(0,l.jsx)(n.a,{href:"/docs/markdown-features/tabs",children:(0,l.jsx)(n.code,{children:"Tabs"})})," and ",(0,l.jsx)(n.a,{href:"/docs/markdown-features#details",children:(0,l.jsx)(n.code,{children:"details"})})," will not be excluded."]}),"\n",(0,l.jsx)(n.p,{children:"Non-Markdown headings will not show up in the TOC. This can be used to your advantage to tackle the aforementioned issue."}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-md",children:'\nSome details containing headings\n
I\'m a heading that will not show up in the TOC
\n\nSome content...\n\n\n'})}),"\n",(0,l.jsxs)(n.p,{children:["The ability to ergonomically insert extra headings or ignore certain headings is a work-in-progress. If this feature is important to you, please report your use-case in ",(0,l.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/issues/6201",children:"this issue"}),"."]}),"\n",(0,l.jsx)(n.hr,{}),"\n",(0,l.jsx)(n.admonition,{type:"warning",children:(0,l.jsx)(n.p,{children:"Below is just some dummy content to have more table of contents items available on the current page."})}),"\n",(0,l.jsx)(n.h2,{id:"example-section-1",children:"Example Section 1"}),"\n",(0,l.jsx)(n.p,{children:"Lorem ipsum"}),"\n",(0,l.jsx)(n.h3,{id:"example-subsection-1-a",children:"Example Subsection 1 a"}),"\n",(0,l.jsx)(n.p,{children:"Lorem ipsum"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-1-a-i",children:"Example subsubsection 1 a I"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-1-a-ii",children:"Example subsubsection 1 a II"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-1-a-iii",children:"Example subsubsection 1 a III"}),"\n",(0,l.jsx)(n.h3,{id:"example-subsection-1-b",children:"Example Subsection 1 b"}),"\n",(0,l.jsx)(n.p,{children:"Lorem ipsum"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-1-b-i",children:"Example subsubsection 1 b I"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-1-b-ii",children:"Example subsubsection 1 b II"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-1-b-iii",children:"Example subsubsection 1 b III"}),"\n",(0,l.jsx)(n.h3,{id:"example-subsection-1-c",children:"Example Subsection 1 c"}),"\n",(0,l.jsx)(n.p,{children:"Lorem ipsum"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-1-c-i",children:"Example subsubsection 1 c I"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-1-c-ii",children:"Example subsubsection 1 c II"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-1-c-iii",children:"Example subsubsection 1 c III"}),"\n",(0,l.jsx)(n.h2,{id:"example-section-2",children:"Example Section 2"}),"\n",(0,l.jsx)(n.p,{children:"Lorem ipsum"}),"\n",(0,l.jsx)(n.h3,{id:"example-subsection-2-a",children:"Example Subsection 2 a"}),"\n",(0,l.jsx)(n.p,{children:"Lorem ipsum"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-2-a-i",children:"Example subsubsection 2 a I"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-2-a-ii",children:"Example subsubsection 2 a II"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-2-a-iii",children:"Example subsubsection 2 a III"}),"\n",(0,l.jsx)(n.h3,{id:"example-subsection-2-b",children:"Example Subsection 2 b"}),"\n",(0,l.jsx)(n.p,{children:"Lorem ipsum"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-2-b-i",children:"Example subsubsection 2 b I"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-2-b-ii",children:"Example subsubsection 2 b II"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-2-b-iii",children:"Example subsubsection 2 b III"}),"\n",(0,l.jsx)(n.h3,{id:"example-subsection-2-c",children:"Example Subsection 2 c"}),"\n",(0,l.jsx)(n.p,{children:"Lorem ipsum"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-2-c-i",children:"Example subsubsection 2 c I"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-2-c-ii",children:"Example subsubsection 2 c II"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-2-c-iii",children:"Example subsubsection 2 c III"}),"\n",(0,l.jsx)(n.h2,{id:"example-section-3",children:"Example Section 3"}),"\n",(0,l.jsx)(n.p,{children:"Lorem ipsum"}),"\n",(0,l.jsx)(n.h3,{id:"example-subsection-3-a",children:"Example Subsection 3 a"}),"\n",(0,l.jsx)(n.p,{children:"Lorem ipsum"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-3-a-i",children:"Example subsubsection 3 a I"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-3-a-ii",children:"Example subsubsection 3 a II"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-3-a-iii",children:"Example subsubsection 3 a III"}),"\n",(0,l.jsx)(n.h3,{id:"example-subsection-3-b",children:"Example Subsection 3 b"}),"\n",(0,l.jsx)(n.p,{children:"Lorem ipsum"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-3-b-i",children:"Example subsubsection 3 b I"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-3-b-ii",children:"Example subsubsection 3 b II"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-3-b-iii",children:"Example subsubsection 3 b III"}),"\n",(0,l.jsx)(n.h3,{id:"example-subsection-3-c",children:"Example Subsection 3 c"}),"\n",(0,l.jsx)(n.p,{children:"Lorem ipsum"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-3-c-i",children:"Example subsubsection 3 c I"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-3-c-ii",children:"Example subsubsection 3 c II"}),"\n",(0,l.jsx)(n.h4,{id:"example-subsubsection-3-c-iii",children:"Example subsubsection 3 c III"})]})}function b(e={}){let{wrapper:n}={...(0,a.a)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(h,{...e})}):h(e)}},78596:function(e,n,s){s.d(n,{Z:()=>a});var i=s(85893);s(67294);var l=s(89477);function a(e){let{toc:n,minHeadingLevel:s,maxHeadingLevel:a}=e;return(0,i.jsx)("div",{className:"tableOfContentsInline_2sru",children:(0,i.jsx)(l.Z,{toc:n,minHeadingLevel:s,maxHeadingLevel:a,className:"table-of-contents",linkClassName:null})})}},89477:function(e,n,s){s.d(n,{Z:()=>d});var i=s(85893),l=s(67294),a=s(26378);function t(e){let n=e.getBoundingClientRect();return n.top===n.bottom?t(e.parentNode):n}var o=s(35363);let c=l.memo(function e(n){let{toc:s,className:l,linkClassName:a,isChild:t}=n;return s.length?(0,i.jsx)("ul",{className:t?void 0:l,children:s.map(n=>(0,i.jsxs)("li",{children:[(0,i.jsx)(o.Z,{to:`#${n.id}`,className:a??void 0,dangerouslySetInnerHTML:{__html:n.value}}),(0,i.jsx)(e,{isChild:!0,toc:n.children,className:l,linkClassName:a})]},n.id))}):null});function d(e){let{toc:n,className:s="table-of-contents table-of-contents__left-border",linkClassName:o="table-of-contents__link",linkActiveClassName:d,minHeadingLevel:u,maxHeadingLevel:r,...h}=e,b=(0,a.L)(),m=u??b.tableOfContents.minHeadingLevel,x=r??b.tableOfContents.maxHeadingLevel,p=function(e){let{toc:n,minHeadingLevel:s,maxHeadingLevel:i}=e;return(0,l.useMemo)(()=>(function e(n){let{toc:s,minHeadingLevel:i,maxHeadingLevel:l}=n;return s.flatMap(n=>{let s=e({toc:n.children,minHeadingLevel:i,maxHeadingLevel:l});return n.level>=i&&n.level<=l?[{...n,children:s}]:s})})({toc:function(e){let n=e.map(e=>({...e,parentIndex:-1,children:[]})),s=Array(7).fill(-1);n.forEach((e,n)=>{let i=s.slice(2,e.level);e.parentIndex=Math.max(...i),s[e.level]=n});let i=[];return n.forEach(e=>{let{parentIndex:s,...l}=e;s>=0?n[s].children.push(l):i.push(l)}),i}(n),minHeadingLevel:s,maxHeadingLevel:i}),[n,s,i])}({toc:n,minHeadingLevel:m,maxHeadingLevel:x});return!function(e){let n=(0,l.useRef)(void 0),s=function(){let e=(0,l.useRef)(0),{navbar:{hideOnScroll:n}}=(0,a.L)();return(0,l.useEffect)(()=>{e.current=n?0:document.querySelector(".navbar").clientHeight},[n]),e}();(0,l.useEffect)(()=>{if(!e)return()=>{};let{linkClassName:i,linkActiveClassName:l,minHeadingLevel:a,maxHeadingLevel:o}=e;function c(){let e=Array.from(document.getElementsByClassName(i)),c=function(e,n){let{anchorTopOffset:s}=n,i=e.find(e=>t(e).top>=s);if(i){var l;return(l=t(i)).top>0&&l.bottomc&&c.id===decodeURIComponent(e.href.substring(e.href.indexOf("#")+1)));e.forEach(e=>{e===d?(n.current&&n.current!==e&&n.current.classList.remove(l),e.classList.add(l),n.current=e):e.classList.remove(l)})}return document.addEventListener("scroll",c),document.addEventListener("resize",c),c(),()=>{document.removeEventListener("scroll",c),document.removeEventListener("resize",c)}},[e,s])}((0,l.useMemo)(()=>{if(o&&d)return{linkClassName:o,linkActiveClassName:d,minHeadingLevel:m,maxHeadingLevel:x}},[o,d,m,x])),(0,i.jsx)(c,{toc:p,className:s,linkClassName:o,...h})}},14522:function(e,n,s){s.d(n,{Z:()=>o});var i=s(85893);s(67294);var l=s(90496);let a="dot_giz1",t="bar_rrRL";function o(e){let{children:n,minHeight:s,url:o="http://localhost:3000",style:c,bodyStyle:d}=e;return(0,i.jsxs)("div",{className:"browserWindow_my1Q",style:{...c,minHeight:s},children:[(0,i.jsxs)("div",{className:"browserWindowHeader_jXSR",children:[(0,i.jsxs)("div",{className:"buttons_uHc7",children:[(0,i.jsx)("span",{className:a,style:{background:"#f25f58"}}),(0,i.jsx)("span",{className:a,style:{background:"#fbbe3c"}}),(0,i.jsx)("span",{className:a,style:{background:"#58cb42"}})]}),(0,i.jsx)("div",{className:(0,l.Z)("browserWindowAddressBar_Pd8y","text--truncate"),children:o}),(0,i.jsx)("div",{className:"browserWindowMenuIcon_Vhuh",children:(0,i.jsxs)("div",{children:[(0,i.jsx)("span",{className:t}),(0,i.jsx)("span",{className:t}),(0,i.jsx)("span",{className:t})]})})]}),(0,i.jsx)("div",{className:"browserWindowBody_Idgs",style:d,children:n})]})}},80980:function(e,n,s){s.d(n,{Z:()=>o,a:()=>t});var i=s(67294);let l={},a=i.createContext(l);function t(e){let n=i.useContext(a);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:t(e.components),i.createElement(a.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/16f8f4fb.a2c4bdbf.js b/assets/js/16f8f4fb.cb3c9e0e.js
similarity index 99%
rename from assets/js/16f8f4fb.a2c4bdbf.js
rename to assets/js/16f8f4fb.cb3c9e0e.js
index 3db8f0bbb2..be33d8b106 100644
--- a/assets/js/16f8f4fb.a2c4bdbf.js
+++ b/assets/js/16f8f4fb.cb3c9e0e.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["12837"],{98171:function(e,s,t){t.d(s,{Z:()=>n});let n=t.p+"assets/images/social-card-8ca15c1adaeb77ca302178575136a0b6.png"},93837:function(e,s,t){t.d(s,{Z:()=>n});let n=t.p+"assets/images/social-card-8ca15c1adaeb77ca302178575136a0b6.png"},55665:function(e,s,t){t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>n,toc:()=>c});var n=t(3813),a=t(85893),r=t(80980);t(14522),t(51118),t(39468);let i={title:"Docusaurus 3.2",authors:["slorber"],tags:["release"],image:"./img/social-card.png",date:new Date("2024-03-29T00:00:00.000Z")},o=void 0,l={image:t(98171).Z,authorsImageUrls:[void 0]},c=[{value:"Highlights",id:"highlights",level:2},{value:"Faster builds",id:"faster-builds",level:3},{value:"Faster Dev Server",id:"faster-dev-server",level:3},{value:"MDX partials table-of-contents",id:"mdx-partials-table-of-contents",level:3},{value:"Blog improvements",id:"blog-improvements",level:3},{value:"Sitemap lastmod",id:"sitemap-lastmod",level:3},{value:"Other changes",id:"other-changes",level:2}];function d(e){let s={a:"a",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components},{Details:n}=s;return n||function(e,s){throw Error("Expected "+(s?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(s.p,{children:["We are happy to announce ",(0,a.jsx)(s.strong,{children:"Docusaurus 3.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 blog post social card",src:t(93837).Z+"",width:"1200",height:"600"})}),"\n","\n",(0,a.jsx)(s.h2,{id:"highlights",children:"Highlights"}),"\n",(0,a.jsx)(s.h3,{id:"faster-builds",children:"Faster builds"}),"\n",(0,a.jsx)(s.p,{children:"We worked hard to reduce the time it takes to build a Docusaurus site in production mode."}),"\n",(0,a.jsx)(s.p,{children:"Between v3.1.0 and v3.2.0, several changes have been made, leading to significantly faster production builds for many sites."}),"\n",(0,a.jsxs)(s.p,{children:["Let's take an example. Our benchmark on the ",(0,a.jsx)(s.a,{href:"https://github.com/facebook/react-native-website/pull/4072",children:"React Native website upgrading to v3.2"})," reports the following results:"]}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsx)(s.li,{children:"\uD83D\uDD25 Cold builds: 95s \u27A1\uFE0F 66s (~30% faster)"}),"\n",(0,a.jsx)(s.li,{children:"\uD83D\uDD25 Incremental builds: 55s \u27A1\uFE0F 22s (~60% faster)"}),"\n"]}),"\n",(0,a.jsx)(s.p,{children:"The results will vary depending on your site's topology and the options you turned on, but we expect the largest sites will see the most significant improvements."}),"\n",(0,a.jsxs)(s.p,{children:["Note that this is only the beginning, and Docusaurus performance can still be significantly improved, notably the bundling time and the memory consumption. Track our ",(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/issues/4765",children:"performance issue"})," for upcoming improvements."]}),"\n",(0,a.jsxs)(n,{children:[(0,a.jsx)("summary",{children:"What is the difference between a cold build and an incremental build?"}),(0,a.jsxs)(s.p,{children:["A cold build is when the Docusaurus caches are empty, generally after running ",(0,a.jsx)(s.code,{children:"docusaurus clear"}),"."]}),(0,a.jsxs)(s.p,{children:["An incremental build happens when you run another time the ",(0,a.jsx)(s.code,{children:"docusaurus build"}),' command. Docusaurus automatically tries to "re-use" computations from former builds to make subsequent builds faster. In practice it\'s based on ',(0,a.jsx)(s.a,{href:"https://webpack.js.org/guides/build-performance/#persistent-cache",children:"Webpack persistent caching"}),". To enable incremental builds on your CI server, you can persist the ",(0,a.jsx)(s.code,{children:"node_modules/.cache"})," folder across builds."]})]}),"\n",(0,a.jsx)(s.h3,{id:"faster-dev-server",children:"Faster Dev Server"}),"\n",(0,a.jsx)(s.p,{children:"We also worked on improving the performance of the dev server, so that you can get a faster feedback when editing Markdown/MDX files."}),"\n",(0,a.jsx)(s.p,{children:"The way we initially implemented content reloading wasn't great. For example, editing a blog post file would also trigger a useless reload of the unrelated docs plugin. From now on, when editing a plugin's content, only that plugin will reload. It's hard to measure precisely the impact of this change, but I estimate edits should appear in your browser at least 50% faster \uD83D\uDD25."}),"\n",(0,a.jsx)(s.p,{children:"We plan to keep improving the speed of our dev server, with even more granular hot reloads, ensuring we don't run useless computations that would always keep giving the same result."}),"\n",(0,a.jsx)(s.h3,{id:"mdx-partials-table-of-contents",children:"MDX partials table-of-contents"}),"\n",(0,a.jsxs)(s.p,{children:["With ",(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9684",children:"#9684"}),", Docusaurus is now able to render headings coming from an imported partial into the table-of-contents."]}),"\n",(0,a.jsxs)(s.p,{children:["Docusaurus and MDX allows you to ",(0,a.jsx)(s.a,{href:"/docs/markdown-features/react#importing-markdown",children:"import one Markdown file into another"}),'. We usually call the imported Markdown file a "partial", and use the ',(0,a.jsx)(s.code,{children:"_"})," prefix so that this file does not lead to the creation of a new page."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-md",metastring:'title="myDoc.mdx"',children:"# My Doc\n\n## Doc heading\n\nContent is imported from another MDX file:\n\nimport ImportedDoc from './\\_importedDoc.mdx';\n\n\n"})}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-md",metastring:'title="_myPartial.mdx"',children:"## Partial heading\n\nSome paragraph\n"})}),"\n",(0,a.jsxs)(s.p,{children:["Previously, the heading ",(0,a.jsx)(s.code,{children:"Partial heading"})," did not appear in the table-of-contents, but now it will!"]}),"\n",(0,a.jsx)(s.h3,{id:"blog-improvements",children:"Blog improvements"}),"\n",(0,a.jsx)(s.p,{children:"We improved the blog plugin with several new options to make it even more powerful and flexible:"}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9912",children:"#9912"}),": you can now display the last update time and author of a blog post, a feature the docs plugin already had."]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9886",children:"#9886"}),": a new ",(0,a.jsx)(s.code,{children:"processBlogPosts"})," option allow you to filter/transform/sort blog posts."]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9838",children:"#9838"}),": a new ",(0,a.jsx)(s.code,{children:"pageBasePath"})," option allows you to customize the blog pagination URL segment (",(0,a.jsx)(s.code,{children:"/blog/page/2"}),")"]}),"\n"]}),"\n",(0,a.jsx)(s.h3,{id:"sitemap-lastmod",children:"Sitemap lastmod"}),"\n",(0,a.jsxs)(s.p,{children:["With ",(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9954",children:"#9954"}),", the sitemap plugin has a new ",(0,a.jsx)(s.code,{children:"lastmod"})," option that can now emit a ",(0,a.jsx)(s.code,{children:""})," tag on the XML. The value is read from the Git history by default, but can be overridden with docs and blog ",(0,a.jsx)(s.code,{children:"last_update"})," front matter."]}),"\n",(0,a.jsxs)(s.p,{children:["We also made it possible to opt-out of emitting ",(0,a.jsx)(s.code,{children:""})," and ",(0,a.jsx)(s.code,{children:""})," tags, which are generally ignored by crawlers (notably ",(0,a.jsx)(s.a,{href:"https://developers.google.com/search/blog/2023/06/sitemaps-lastmod-ping",children:"Google"}),")."]}),"\n",(0,a.jsx)(s.p,{children:"We recommend using the following sitemap plugin config, that will become the default in Docusaurus V4:"}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",children:"{\n lastmod: 'date',\n priority: null,\n changefreq: null,\n}\n"})}),"\n",(0,a.jsx)(s.h2,{id:"other-changes",children:"Other changes"}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9687",children:"#9687"}),": new Vercel Analytics plugin"]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9681",children:"#9681"})," and ",(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9442",children:"#9442"}),": ",(0,a.jsx)(s.code,{children:"docusaurus swizzle"})," and ",(0,a.jsx)(s.code,{children:"create-docusaurus"})," CLIs now ask users if they prefer to use TypeScript"]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9928",children:"#9928"}),": new Icelandic translation"]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9931",children:"#9928"}),": new ",(0,a.jsx)(s.code,{children:"allContentLoaded"})," plugin lifecycle (experimental)"]}),"\n"]}),"\n",(0,a.jsxs)(s.p,{children:["Check the ",(0,a.jsx)(s.strong,{children:(0,a.jsx)(s.a,{href:"/changelog/3.2.0",children:"3.2.0 changelog entry"})})," for an exhaustive list of changes."]})]})}function u(e={}){let{wrapper:s}={...(0,r.a)(),...e.components};return s?(0,a.jsx)(s,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},51118:function(e,s,t){t.d(s,{Z:()=>r});var n=t(85893);t(67294);var a=t(14522);function r(e){let{url:s}=e;return(0,n.jsx)("div",{style:{padding:10},children:(0,n.jsx)(a.Z,{url:s,style:{minWidth:"min(100%,45vw)",width:800,maxWidth:"100%",overflow:"hidden"},bodyStyle:{padding:0},children:(0,n.jsx)("iframe",{src:s,title:s,style:{display:"block",width:"100%",height:300}})})})}},14522:function(e,s,t){t.d(s,{Z:()=>o});var n=t(85893);t(67294);var a=t(90496);let r="dot_giz1",i="bar_rrRL";function o(e){let{children:s,minHeight:t,url:o="http://localhost:3000",style:l,bodyStyle:c}=e;return(0,n.jsxs)("div",{className:"browserWindow_my1Q",style:{...l,minHeight:t},children:[(0,n.jsxs)("div",{className:"browserWindowHeader_jXSR",children:[(0,n.jsxs)("div",{className:"buttons_uHc7",children:[(0,n.jsx)("span",{className:r,style:{background:"#f25f58"}}),(0,n.jsx)("span",{className:r,style:{background:"#fbbe3c"}}),(0,n.jsx)("span",{className:r,style:{background:"#58cb42"}})]}),(0,n.jsx)("div",{className:(0,a.Z)("browserWindowAddressBar_Pd8y","text--truncate"),children:o}),(0,n.jsx)("div",{className:"browserWindowMenuIcon_Vhuh",children:(0,n.jsxs)("div",{children:[(0,n.jsx)("span",{className:i}),(0,n.jsx)("span",{className:i}),(0,n.jsx)("span",{className:i})]})})]}),(0,n.jsx)("div",{className:"browserWindowBody_Idgs",style:c,children:s})]})}},39468:function(e,s,t){t.d(s,{Z:()=>r});var n=t(85893),a=t(67294);function r(e){let{children:s="Boom!",message:t="Boom!\nSomething bad happened, but you can try again!",cause:r}=e,[i,o]=(0,a.useState)(!1);if(i)throw Error(t,{cause:r?Error(r):void 0});return(0,n.jsx)("button",{className:"button button--danger",type:"button",onClick:()=>o(!0),children:s})}},80980:function(e,s,t){t.d(s,{Z:()=>o,a:()=>i});var n=t(67294);let a={},r=n.createContext(a);function i(e){let s=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function o(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),n.createElement(r.Provider,{value:s},e.children)}},3813:function(e){e.exports=JSON.parse('{"permalink":"/blog/releases/3.2","editUrl":"https://github.com/facebook/docusaurus/edit/main/website/blog/releases/3.2/index.mdx","source":"@site/blog/releases/3.2/index.mdx","title":"Docusaurus 3.2","description":"We are happy to announce Docusaurus 3.2.","date":"2024-03-29T00:00:00.000Z","tags":[{"inline":false,"label":"Release","permalink":"/blog/tags/release","description":"Blog posts about Docusaurus\' new releases"}],"readingTime":3.475,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer, This Week In React editor","url":"https://thisweekinreact.com","page":{"permalink":"/blog/authors/slorber"},"description":"A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.","socials":{"bluesky":"https://bsky.app/profile/sebastienlorber.com","x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","instagram":"https://www.instagram.com/thisweekinreact","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"}],"frontMatter":{"title":"Docusaurus 3.2","authors":["slorber"],"tags":["release"],"image":"./img/social-card.png","date":"2024-03-29T00:00:00.000Z"},"unlisted":false,"lastUpdatedAt":1739456991000,"lastUpdatedBy":"S\xe9bastien Lorber","prevItem":{"title":"Docusaurus 3.3","permalink":"/blog/releases/3.3"},"nextItem":{"title":"Docusaurus 3.1","permalink":"/blog/releases/3.1"}}')}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["12837"],{98171:function(e,s,t){t.d(s,{Z:()=>n});let n=t.p+"assets/images/social-card-8ca15c1adaeb77ca302178575136a0b6.png"},93837:function(e,s,t){t.d(s,{Z:()=>n});let n=t.p+"assets/images/social-card-8ca15c1adaeb77ca302178575136a0b6.png"},55665:function(e,s,t){t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>n,toc:()=>c});var n=t(3813),a=t(85893),r=t(80980);t(14522),t(51118),t(39468);let i={title:"Docusaurus 3.2",authors:["slorber"],tags:["release"],image:"./img/social-card.png",date:new Date("2024-03-29T00:00:00.000Z")},o=void 0,l={image:t(98171).Z,authorsImageUrls:[void 0]},c=[{value:"Highlights",id:"highlights",level:2},{value:"Faster builds",id:"faster-builds",level:3},{value:"Faster Dev Server",id:"faster-dev-server",level:3},{value:"MDX partials table-of-contents",id:"mdx-partials-table-of-contents",level:3},{value:"Blog improvements",id:"blog-improvements",level:3},{value:"Sitemap lastmod",id:"sitemap-lastmod",level:3},{value:"Other changes",id:"other-changes",level:2}];function d(e){let s={a:"a",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components},{Details:n}=s;return n||function(e,s){throw Error("Expected "+(s?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(s.p,{children:["We are happy to announce ",(0,a.jsx)(s.strong,{children:"Docusaurus 3.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 blog post social card",src:t(93837).Z+"",width:"1200",height:"600"})}),"\n","\n",(0,a.jsx)(s.h2,{id:"highlights",children:"Highlights"}),"\n",(0,a.jsx)(s.h3,{id:"faster-builds",children:"Faster builds"}),"\n",(0,a.jsx)(s.p,{children:"We worked hard to reduce the time it takes to build a Docusaurus site in production mode."}),"\n",(0,a.jsx)(s.p,{children:"Between v3.1.0 and v3.2.0, several changes have been made, leading to significantly faster production builds for many sites."}),"\n",(0,a.jsxs)(s.p,{children:["Let's take an example. Our benchmark on the ",(0,a.jsx)(s.a,{href:"https://github.com/facebook/react-native-website/pull/4072",children:"React Native website upgrading to v3.2"})," reports the following results:"]}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsx)(s.li,{children:"\uD83D\uDD25 Cold builds: 95s \u27A1\uFE0F 66s (~30% faster)"}),"\n",(0,a.jsx)(s.li,{children:"\uD83D\uDD25 Incremental builds: 55s \u27A1\uFE0F 22s (~60% faster)"}),"\n"]}),"\n",(0,a.jsx)(s.p,{children:"The results will vary depending on your site's topology and the options you turned on, but we expect the largest sites will see the most significant improvements."}),"\n",(0,a.jsxs)(s.p,{children:["Note that this is only the beginning, and Docusaurus performance can still be significantly improved, notably the bundling time and the memory consumption. Track our ",(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/issues/4765",children:"performance issue"})," for upcoming improvements."]}),"\n",(0,a.jsxs)(n,{children:[(0,a.jsx)("summary",{children:"What is the difference between a cold build and an incremental build?"}),(0,a.jsxs)(s.p,{children:["A cold build is when the Docusaurus caches are empty, generally after running ",(0,a.jsx)(s.code,{children:"docusaurus clear"}),"."]}),(0,a.jsxs)(s.p,{children:["An incremental build happens when you run another time the ",(0,a.jsx)(s.code,{children:"docusaurus build"}),' command. Docusaurus automatically tries to "re-use" computations from former builds to make subsequent builds faster. In practice it\'s based on ',(0,a.jsx)(s.a,{href:"https://webpack.js.org/guides/build-performance/#persistent-cache",children:"Webpack persistent caching"}),". To enable incremental builds on your CI server, you can persist the ",(0,a.jsx)(s.code,{children:"node_modules/.cache"})," folder across builds."]})]}),"\n",(0,a.jsx)(s.h3,{id:"faster-dev-server",children:"Faster Dev Server"}),"\n",(0,a.jsx)(s.p,{children:"We also worked on improving the performance of the dev server, so that you can get a faster feedback when editing Markdown/MDX files."}),"\n",(0,a.jsx)(s.p,{children:"The way we initially implemented content reloading wasn't great. For example, editing a blog post file would also trigger a useless reload of the unrelated docs plugin. From now on, when editing a plugin's content, only that plugin will reload. It's hard to measure precisely the impact of this change, but I estimate edits should appear in your browser at least 50% faster \uD83D\uDD25."}),"\n",(0,a.jsx)(s.p,{children:"We plan to keep improving the speed of our dev server, with even more granular hot reloads, ensuring we don't run useless computations that would always keep giving the same result."}),"\n",(0,a.jsx)(s.h3,{id:"mdx-partials-table-of-contents",children:"MDX partials table-of-contents"}),"\n",(0,a.jsxs)(s.p,{children:["With ",(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9684",children:"#9684"}),", Docusaurus is now able to render headings coming from an imported partial into the table-of-contents."]}),"\n",(0,a.jsxs)(s.p,{children:["Docusaurus and MDX allows you to ",(0,a.jsx)(s.a,{href:"/docs/markdown-features/react#importing-markdown",children:"import one Markdown file into another"}),'. We usually call the imported Markdown file a "partial", and use the ',(0,a.jsx)(s.code,{children:"_"})," prefix so that this file does not lead to the creation of a new page."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-md",metastring:'title="myDoc.mdx"',children:"# My Doc\n\n## Doc heading\n\nContent is imported from another MDX file:\n\nimport ImportedDoc from './\\_importedDoc.mdx';\n\n\n"})}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-md",metastring:'title="_myPartial.mdx"',children:"## Partial heading\n\nSome paragraph\n"})}),"\n",(0,a.jsxs)(s.p,{children:["Previously, the heading ",(0,a.jsx)(s.code,{children:"Partial heading"})," did not appear in the table-of-contents, but now it will!"]}),"\n",(0,a.jsx)(s.h3,{id:"blog-improvements",children:"Blog improvements"}),"\n",(0,a.jsx)(s.p,{children:"We improved the blog plugin with several new options to make it even more powerful and flexible:"}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9912",children:"#9912"}),": you can now display the last update time and author of a blog post, a feature the docs plugin already had."]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9886",children:"#9886"}),": a new ",(0,a.jsx)(s.code,{children:"processBlogPosts"})," option allow you to filter/transform/sort blog posts."]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9838",children:"#9838"}),": a new ",(0,a.jsx)(s.code,{children:"pageBasePath"})," option allows you to customize the blog pagination URL segment (",(0,a.jsx)(s.code,{children:"/blog/page/2"}),")"]}),"\n"]}),"\n",(0,a.jsx)(s.h3,{id:"sitemap-lastmod",children:"Sitemap lastmod"}),"\n",(0,a.jsxs)(s.p,{children:["With ",(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9954",children:"#9954"}),", the sitemap plugin has a new ",(0,a.jsx)(s.code,{children:"lastmod"})," option that can now emit a ",(0,a.jsx)(s.code,{children:""})," tag on the XML. The value is read from the Git history by default, but can be overridden with docs and blog ",(0,a.jsx)(s.code,{children:"last_update"})," front matter."]}),"\n",(0,a.jsxs)(s.p,{children:["We also made it possible to opt-out of emitting ",(0,a.jsx)(s.code,{children:""})," and ",(0,a.jsx)(s.code,{children:""})," tags, which are generally ignored by crawlers (notably ",(0,a.jsx)(s.a,{href:"https://developers.google.com/search/blog/2023/06/sitemaps-lastmod-ping",children:"Google"}),")."]}),"\n",(0,a.jsx)(s.p,{children:"We recommend using the following sitemap plugin config, that will become the default in Docusaurus V4:"}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",children:"{\n lastmod: 'date',\n priority: null,\n changefreq: null,\n}\n"})}),"\n",(0,a.jsx)(s.h2,{id:"other-changes",children:"Other changes"}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9687",children:"#9687"}),": new Vercel Analytics plugin"]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9681",children:"#9681"})," and ",(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9442",children:"#9442"}),": ",(0,a.jsx)(s.code,{children:"docusaurus swizzle"})," and ",(0,a.jsx)(s.code,{children:"create-docusaurus"})," CLIs now ask users if they prefer to use TypeScript"]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9928",children:"#9928"}),": new Icelandic translation"]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9931",children:"#9928"}),": new ",(0,a.jsx)(s.code,{children:"allContentLoaded"})," plugin lifecycle (experimental)"]}),"\n"]}),"\n",(0,a.jsxs)(s.p,{children:["Check the ",(0,a.jsx)(s.strong,{children:(0,a.jsx)(s.a,{href:"/changelog/3.2.0",children:"3.2.0 changelog entry"})})," for an exhaustive list of changes."]})]})}function u(e={}){let{wrapper:s}={...(0,r.a)(),...e.components};return s?(0,a.jsx)(s,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},51118:function(e,s,t){t.d(s,{Z:()=>r});var n=t(85893);t(67294);var a=t(14522);function r(e){let{url:s}=e;return(0,n.jsx)("div",{style:{padding:10},children:(0,n.jsx)(a.Z,{url:s,style:{minWidth:"min(100%,45vw)",width:800,maxWidth:"100%",overflow:"hidden"},bodyStyle:{padding:0},children:(0,n.jsx)("iframe",{src:s,title:s,style:{display:"block",width:"100%",height:300}})})})}},14522:function(e,s,t){t.d(s,{Z:()=>o});var n=t(85893);t(67294);var a=t(90496);let r="dot_giz1",i="bar_rrRL";function o(e){let{children:s,minHeight:t,url:o="http://localhost:3000",style:l,bodyStyle:c}=e;return(0,n.jsxs)("div",{className:"browserWindow_my1Q",style:{...l,minHeight:t},children:[(0,n.jsxs)("div",{className:"browserWindowHeader_jXSR",children:[(0,n.jsxs)("div",{className:"buttons_uHc7",children:[(0,n.jsx)("span",{className:r,style:{background:"#f25f58"}}),(0,n.jsx)("span",{className:r,style:{background:"#fbbe3c"}}),(0,n.jsx)("span",{className:r,style:{background:"#58cb42"}})]}),(0,n.jsx)("div",{className:(0,a.Z)("browserWindowAddressBar_Pd8y","text--truncate"),children:o}),(0,n.jsx)("div",{className:"browserWindowMenuIcon_Vhuh",children:(0,n.jsxs)("div",{children:[(0,n.jsx)("span",{className:i}),(0,n.jsx)("span",{className:i}),(0,n.jsx)("span",{className:i})]})})]}),(0,n.jsx)("div",{className:"browserWindowBody_Idgs",style:c,children:s})]})}},39468:function(e,s,t){t.d(s,{Z:()=>r});var n=t(85893),a=t(67294);function r(e){let{children:s="Boom!",message:t="Boom!\nSomething bad happened, but you can try again!",cause:r}=e,[i,o]=(0,a.useState)(!1);if(i)throw Error(t,{cause:r?Error(r):void 0});return(0,n.jsx)("button",{className:"button button--danger",type:"button",onClick:()=>o(!0),children:s})}},80980:function(e,s,t){t.d(s,{Z:()=>o,a:()=>i});var n=t(67294);let a={},r=n.createContext(a);function i(e){let s=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function o(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),n.createElement(r.Provider,{value:s},e.children)}},3813:function(e){e.exports=JSON.parse('{"permalink":"/blog/releases/3.2","editUrl":"https://github.com/facebook/docusaurus/edit/main/website/blog/releases/3.2/index.mdx","source":"@site/blog/releases/3.2/index.mdx","title":"Docusaurus 3.2","description":"We are happy to announce Docusaurus 3.2.","date":"2024-03-29T00:00:00.000Z","tags":[{"inline":false,"label":"Release","permalink":"/blog/tags/release","description":"Blog posts about Docusaurus\' new releases"}],"readingTime":3.475,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer, This Week In React editor","url":"https://thisweekinreact.com","page":{"permalink":"/blog/authors/slorber"},"description":"A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.","socials":{"bluesky":"https://bsky.app/profile/sebastienlorber.com","x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","instagram":"https://www.instagram.com/thisweekinreact","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"}],"frontMatter":{"title":"Docusaurus 3.2","authors":["slorber"],"tags":["release"],"image":"./img/social-card.png","date":"2024-03-29T00:00:00.000Z"},"unlisted":false,"lastUpdatedAt":1739551601000,"lastUpdatedBy":"S\xe9bastien Lorber","prevItem":{"title":"Docusaurus 3.3","permalink":"/blog/releases/3.3"},"nextItem":{"title":"Docusaurus 3.1","permalink":"/blog/releases/3.1"}}')}}]);
\ No newline at end of file
diff --git a/assets/js/17e8a747.8297bdb4.js b/assets/js/17e8a747.86b96c5b.js
similarity index 99%
rename from assets/js/17e8a747.8297bdb4.js
rename to assets/js/17e8a747.86b96c5b.js
index 0003a0a121..c99a6cdc1f 100644
--- a/assets/js/17e8a747.8297bdb4.js
+++ b/assets/js/17e8a747.86b96c5b.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["28721"],{40190:function(e,t,n){n.r(t),n.d(t,{default:()=>x,frontMatter:()=>i,metadata:()=>r,assets:()=>u,toc:()=>d,contentTitle:()=>c});var r=JSON.parse('{"type":"mdx","permalink":"/tests/pages/tabs-tests","source":"@site/_dogfooding/_pages tests/tabs-tests.mdx","title":"Tabs tests","description":"Tabs sync with different heights","frontMatter":{},"lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739456991000,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/_dogfooding/_pages tests/tabs-tests.mdx","unlisted":false}'),l=n(85893),a=n(80980);n(14522);var s=n(15398),o=n(58636);let i={},c="Tabs tests",u={},d=[{value:"Tabs sync with different heights",id:"tabs-sync-with-different-heights",level:2},{value:"Tabs with className and lazy loading",id:"tabs-with-classname-and-lazy-loading",level:2}];function v(e){let t={h1:"h1",h2:"h2",header:"header",p:"p",...(0,a.a)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(t.header,{children:(0,l.jsx)(t.h1,{id:"tabs-tests",children:"Tabs tests"})}),"\n","\n",(0,l.jsx)(t.h2,{id:"tabs-sync-with-different-heights",children:"Tabs sync with different heights"}),"\n",(0,l.jsxs)(s.Z,{groupId:"operating-systems",children:[(0,l.jsx)(o.Z,{value:"win",label:"Windows",children:(0,l.jsx)(t.p,{children:"Use Ctrl + C to copy."})}),(0,l.jsx)(o.Z,{value:"mac",label:"macOS",children:(0,l.jsx)(t.p,{children:"very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text"})})]}),"\n",(0,l.jsxs)(s.Z,{groupId:"operating-systems",children:[(0,l.jsx)(o.Z,{value:"win",label:"Windows",children:(0,l.jsx)(t.p,{children:"Use Ctrl + V to paste."})}),(0,l.jsx)(o.Z,{value:"mac",label:"macOS",children:(0,l.jsx)(t.p,{children:"Use Command + V to paste."})})]}),"\n",(0,l.jsx)(t.p,{children:"When clicking tabs above, they should stay under cursor and we should adjust the scroll position."}),"\n",(0,l.jsx)(t.h2,{id:"tabs-with-classname-and-lazy-loading",children:"Tabs with className and lazy loading"}),"\n",(0,l.jsxs)(s.Z,{lazy:!0,children:[(0,l.jsx)(o.Z,{value:"apple",label:"Apple",className:"alert alert--primary",default:!0,children:(0,l.jsx)(t.p,{children:"This is an apple \uD83C\uDF4E"})}),(0,l.jsx)(o.Z,{value:"orange",label:"Orange",className:"alert alert--secondary",children:(0,l.jsx)(t.p,{children:"This is an orange \uD83C\uDF4A"})}),(0,l.jsx)(o.Z,{value:"banana",label:"Banana",className:"alert alert--success",children:(0,l.jsx)(t.p,{children:"This is a banana \uD83C\uDF4C"})})]})]})}function x(e={}){let{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,l.jsx)(t,{...e,children:(0,l.jsx)(v,{...e})}):v(e)}},58636:function(e,t,n){n.d(t,{Z:()=>a});var r=n(85893);n(67294);var l=n(90496);function a(e){let{children:t,hidden:n,className:a}=e;return(0,r.jsx)("div",{role:"tabpanel",className:(0,l.Z)("tabItem_pnkT",a),hidden:n,children:t})}},15398:function(e,t,n){n.d(t,{Z:()=>f});var r=n(85893),l=n(67294),a=n(90496),s=n(54947),o=n(3620),i=n(844),c=n(97486),u=n(32263),d=n(16971);function v(e){return l.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||l.isValidElement(e)&&function(e){let{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(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.`)})?.filter(Boolean)??[]}function x(e){let{value:t,tabValues:n}=e;return n.some(e=>e.value===t)}var g=n(71607);function y(e){let{className:t,block:n,selectedValue:l,selectValue:o,tabValues:i}=e,c=[],{blockElementScrollPositionUntilNextRender:u}=(0,s.o5)(),d=e=>{let t=e.currentTarget,n=i[c.indexOf(t)].value;n!==l&&(u(t),o(n))},v=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{let n=c.indexOf(e.currentTarget)+1;t=c[n]??c[0];break}case"ArrowLeft":{let n=c.indexOf(e.currentTarget)-1;t=c[n]??c[c.length-1]}}t?.focus()};return(0,r.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.Z)("tabs",{"tabs--block":n},t),children:i.map(e=>{let{value:t,label:n,attributes:s}=e;return(0,r.jsx)("li",{role:"tab",tabIndex:l===t?0:-1,"aria-selected":l===t,ref:e=>{c.push(e)},onKeyDown:v,onClick:d,...s,className:(0,a.Z)("tabs__item","tabItem_AQgk",s?.className,{"tabs__item--active":l===t}),children:n??t},t)})})}function h(e){let{lazy:t,children:n,selectedValue:s}=e,o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){let e=o.find(e=>e.props.value===s);return e?(0,l.cloneElement)(e,{className:(0,a.Z)("margin-top--md",e.props.className)}):null}return(0,r.jsx)("div",{className:"margin-top--md",children:o.map((e,t)=>(0,l.cloneElement)(e,{key:t,hidden:e.props.value!==s}))})}function p(e){let t=function(e){let{defaultValue:t,queryString:n=!1,groupId:r}=e,a=function(e){let{values:t,children:n}=e;return(0,l.useMemo)(()=>{let e=t??v(n).map(e=>{let{props:{value:t,label:n,attributes:r,default:l}}=e;return{value:t,label:n,attributes:r,default:l}});return!function(e){let t=(0,u.lx)(e,(e,t)=>e.value===t.value);if(t.length>0)throw Error(`Docusaurus error: Duplicate values "${t.map(e=>e.value).join(", ")}" found in . Every value needs to be unique.`)}(e),e},[t,n])}(e),[s,g]=(0,l.useState)(()=>(function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw Error("Docusaurus error: the component requires at least one children component");if(t){if(!x({value:t,tabValues:n}))throw Error(`Docusaurus error: The has a defaultValue "${t}" 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 t}let r=n.find(e=>e.default)??n[0];if(!r)throw Error("Unexpected error: 0 tabValues");return r.value})({defaultValue:t,tabValues:a})),[y,h]=function(e){let{queryString:t=!1,groupId:n}=e,r=(0,o.k6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!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 n??null}({queryString:t,groupId:n});return[(0,c._X)(a),(0,l.useCallback)(e=>{if(!a)return;let t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})},[a,r])]}({queryString:n,groupId:r}),[p,f]=function(e){let{groupId:t}=e,n=t?`docusaurus.tab.${t}`:null,[r,a]=(0,d.Nk)(n);return[r,(0,l.useCallback)(e=>{n&&a.set(e)},[n,a])]}({groupId:r}),b=(()=>{let e=y??p;return x({value:e,tabValues:a})?e:null})();return(0,i.Z)(()=>{b&&g(b)},[b]),{selectedValue:s,selectValue:(0,l.useCallback)(e=>{if(!x({value:e,tabValues:a}))throw Error(`Can't select invalid tab value=${e}`);g(e),h(e),f(e)},[h,f,a]),tabValues:a}}(e);return(0,r.jsxs)("div",{className:(0,a.Z)("tabs-container","tabList_Qoir"),children:[(0,r.jsx)(y,{...t,...e}),(0,r.jsx)(h,{...t,...e})]})}function f(e){let t=(0,g.Z)();return(0,r.jsx)(p,{...e,children:v(e.children)},String(t))}},14522:function(e,t,n){n.d(t,{Z:()=>o});var r=n(85893);n(67294);var l=n(90496);let a="dot_giz1",s="bar_rrRL";function o(e){let{children:t,minHeight:n,url:o="http://localhost:3000",style:i,bodyStyle:c}=e;return(0,r.jsxs)("div",{className:"browserWindow_my1Q",style:{...i,minHeight:n},children:[(0,r.jsxs)("div",{className:"browserWindowHeader_jXSR",children:[(0,r.jsxs)("div",{className:"buttons_uHc7",children:[(0,r.jsx)("span",{className:a,style:{background:"#f25f58"}}),(0,r.jsx)("span",{className:a,style:{background:"#fbbe3c"}}),(0,r.jsx)("span",{className:a,style:{background:"#58cb42"}})]}),(0,r.jsx)("div",{className:(0,l.Z)("browserWindowAddressBar_Pd8y","text--truncate"),children:o}),(0,r.jsx)("div",{className:"browserWindowMenuIcon_Vhuh",children:(0,r.jsxs)("div",{children:[(0,r.jsx)("span",{className:s}),(0,r.jsx)("span",{className:s}),(0,r.jsx)("span",{className:s})]})})]}),(0,r.jsx)("div",{className:"browserWindowBody_Idgs",style:c,children:t})]})}},80980:function(e,t,n){n.d(t,{Z:()=>o,a:()=>s});var r=n(67294);let l={},a=r.createContext(l);function s(e){let t=r.useContext(a);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:s(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["28721"],{40190:function(e,t,n){n.r(t),n.d(t,{default:()=>x,frontMatter:()=>i,metadata:()=>r,assets:()=>u,toc:()=>d,contentTitle:()=>c});var r=JSON.parse('{"type":"mdx","permalink":"/tests/pages/tabs-tests","source":"@site/_dogfooding/_pages tests/tabs-tests.mdx","title":"Tabs tests","description":"Tabs sync with different heights","frontMatter":{},"lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739551601000,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/_dogfooding/_pages tests/tabs-tests.mdx","unlisted":false}'),l=n(85893),a=n(80980);n(14522);var s=n(15398),o=n(58636);let i={},c="Tabs tests",u={},d=[{value:"Tabs sync with different heights",id:"tabs-sync-with-different-heights",level:2},{value:"Tabs with className and lazy loading",id:"tabs-with-classname-and-lazy-loading",level:2}];function v(e){let t={h1:"h1",h2:"h2",header:"header",p:"p",...(0,a.a)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(t.header,{children:(0,l.jsx)(t.h1,{id:"tabs-tests",children:"Tabs tests"})}),"\n","\n",(0,l.jsx)(t.h2,{id:"tabs-sync-with-different-heights",children:"Tabs sync with different heights"}),"\n",(0,l.jsxs)(s.Z,{groupId:"operating-systems",children:[(0,l.jsx)(o.Z,{value:"win",label:"Windows",children:(0,l.jsx)(t.p,{children:"Use Ctrl + C to copy."})}),(0,l.jsx)(o.Z,{value:"mac",label:"macOS",children:(0,l.jsx)(t.p,{children:"very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text"})})]}),"\n",(0,l.jsxs)(s.Z,{groupId:"operating-systems",children:[(0,l.jsx)(o.Z,{value:"win",label:"Windows",children:(0,l.jsx)(t.p,{children:"Use Ctrl + V to paste."})}),(0,l.jsx)(o.Z,{value:"mac",label:"macOS",children:(0,l.jsx)(t.p,{children:"Use Command + V to paste."})})]}),"\n",(0,l.jsx)(t.p,{children:"When clicking tabs above, they should stay under cursor and we should adjust the scroll position."}),"\n",(0,l.jsx)(t.h2,{id:"tabs-with-classname-and-lazy-loading",children:"Tabs with className and lazy loading"}),"\n",(0,l.jsxs)(s.Z,{lazy:!0,children:[(0,l.jsx)(o.Z,{value:"apple",label:"Apple",className:"alert alert--primary",default:!0,children:(0,l.jsx)(t.p,{children:"This is an apple \uD83C\uDF4E"})}),(0,l.jsx)(o.Z,{value:"orange",label:"Orange",className:"alert alert--secondary",children:(0,l.jsx)(t.p,{children:"This is an orange \uD83C\uDF4A"})}),(0,l.jsx)(o.Z,{value:"banana",label:"Banana",className:"alert alert--success",children:(0,l.jsx)(t.p,{children:"This is a banana \uD83C\uDF4C"})})]})]})}function x(e={}){let{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,l.jsx)(t,{...e,children:(0,l.jsx)(v,{...e})}):v(e)}},58636:function(e,t,n){n.d(t,{Z:()=>a});var r=n(85893);n(67294);var l=n(90496);function a(e){let{children:t,hidden:n,className:a}=e;return(0,r.jsx)("div",{role:"tabpanel",className:(0,l.Z)("tabItem_pnkT",a),hidden:n,children:t})}},15398:function(e,t,n){n.d(t,{Z:()=>f});var r=n(85893),l=n(67294),a=n(90496),s=n(54947),o=n(3620),i=n(844),c=n(97486),u=n(32263),d=n(16971);function v(e){return l.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||l.isValidElement(e)&&function(e){let{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(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.`)})?.filter(Boolean)??[]}function x(e){let{value:t,tabValues:n}=e;return n.some(e=>e.value===t)}var g=n(71607);function y(e){let{className:t,block:n,selectedValue:l,selectValue:o,tabValues:i}=e,c=[],{blockElementScrollPositionUntilNextRender:u}=(0,s.o5)(),d=e=>{let t=e.currentTarget,n=i[c.indexOf(t)].value;n!==l&&(u(t),o(n))},v=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{let n=c.indexOf(e.currentTarget)+1;t=c[n]??c[0];break}case"ArrowLeft":{let n=c.indexOf(e.currentTarget)-1;t=c[n]??c[c.length-1]}}t?.focus()};return(0,r.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.Z)("tabs",{"tabs--block":n},t),children:i.map(e=>{let{value:t,label:n,attributes:s}=e;return(0,r.jsx)("li",{role:"tab",tabIndex:l===t?0:-1,"aria-selected":l===t,ref:e=>{c.push(e)},onKeyDown:v,onClick:d,...s,className:(0,a.Z)("tabs__item","tabItem_AQgk",s?.className,{"tabs__item--active":l===t}),children:n??t},t)})})}function h(e){let{lazy:t,children:n,selectedValue:s}=e,o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){let e=o.find(e=>e.props.value===s);return e?(0,l.cloneElement)(e,{className:(0,a.Z)("margin-top--md",e.props.className)}):null}return(0,r.jsx)("div",{className:"margin-top--md",children:o.map((e,t)=>(0,l.cloneElement)(e,{key:t,hidden:e.props.value!==s}))})}function p(e){let t=function(e){let{defaultValue:t,queryString:n=!1,groupId:r}=e,a=function(e){let{values:t,children:n}=e;return(0,l.useMemo)(()=>{let e=t??v(n).map(e=>{let{props:{value:t,label:n,attributes:r,default:l}}=e;return{value:t,label:n,attributes:r,default:l}});return!function(e){let t=(0,u.lx)(e,(e,t)=>e.value===t.value);if(t.length>0)throw Error(`Docusaurus error: Duplicate values "${t.map(e=>e.value).join(", ")}" found in . Every value needs to be unique.`)}(e),e},[t,n])}(e),[s,g]=(0,l.useState)(()=>(function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw Error("Docusaurus error: the component requires at least one children component");if(t){if(!x({value:t,tabValues:n}))throw Error(`Docusaurus error: The has a defaultValue "${t}" 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 t}let r=n.find(e=>e.default)??n[0];if(!r)throw Error("Unexpected error: 0 tabValues");return r.value})({defaultValue:t,tabValues:a})),[y,h]=function(e){let{queryString:t=!1,groupId:n}=e,r=(0,o.k6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!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 n??null}({queryString:t,groupId:n});return[(0,c._X)(a),(0,l.useCallback)(e=>{if(!a)return;let t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})},[a,r])]}({queryString:n,groupId:r}),[p,f]=function(e){let{groupId:t}=e,n=t?`docusaurus.tab.${t}`:null,[r,a]=(0,d.Nk)(n);return[r,(0,l.useCallback)(e=>{n&&a.set(e)},[n,a])]}({groupId:r}),b=(()=>{let e=y??p;return x({value:e,tabValues:a})?e:null})();return(0,i.Z)(()=>{b&&g(b)},[b]),{selectedValue:s,selectValue:(0,l.useCallback)(e=>{if(!x({value:e,tabValues:a}))throw Error(`Can't select invalid tab value=${e}`);g(e),h(e),f(e)},[h,f,a]),tabValues:a}}(e);return(0,r.jsxs)("div",{className:(0,a.Z)("tabs-container","tabList_Qoir"),children:[(0,r.jsx)(y,{...t,...e}),(0,r.jsx)(h,{...t,...e})]})}function f(e){let t=(0,g.Z)();return(0,r.jsx)(p,{...e,children:v(e.children)},String(t))}},14522:function(e,t,n){n.d(t,{Z:()=>o});var r=n(85893);n(67294);var l=n(90496);let a="dot_giz1",s="bar_rrRL";function o(e){let{children:t,minHeight:n,url:o="http://localhost:3000",style:i,bodyStyle:c}=e;return(0,r.jsxs)("div",{className:"browserWindow_my1Q",style:{...i,minHeight:n},children:[(0,r.jsxs)("div",{className:"browserWindowHeader_jXSR",children:[(0,r.jsxs)("div",{className:"buttons_uHc7",children:[(0,r.jsx)("span",{className:a,style:{background:"#f25f58"}}),(0,r.jsx)("span",{className:a,style:{background:"#fbbe3c"}}),(0,r.jsx)("span",{className:a,style:{background:"#58cb42"}})]}),(0,r.jsx)("div",{className:(0,l.Z)("browserWindowAddressBar_Pd8y","text--truncate"),children:o}),(0,r.jsx)("div",{className:"browserWindowMenuIcon_Vhuh",children:(0,r.jsxs)("div",{children:[(0,r.jsx)("span",{className:s}),(0,r.jsx)("span",{className:s}),(0,r.jsx)("span",{className:s})]})})]}),(0,r.jsx)("div",{className:"browserWindowBody_Idgs",style:c,children:t})]})}},80980:function(e,t,n){n.d(t,{Z:()=>o,a:()=>s});var r=n(67294);let l={},a=r.createContext(l);function s(e){let t=r.useContext(a);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:s(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/1864f992.4bee6583.js b/assets/js/1864f992.73bb4486.js
similarity index 98%
rename from assets/js/1864f992.4bee6583.js
rename to assets/js/1864f992.73bb4486.js
index d4ed9a9397..465bd5df5f 100644
--- a/assets/js/1864f992.4bee6583.js
+++ b/assets/js/1864f992.73bb4486.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["46202"],{16842:function(e,s,n){n.r(s),n.d(s,{default:()=>l,frontMatter:()=>t,metadata:()=>i,assets:()=>u,toc:()=>c,contentTitle:()=>d});var i=JSON.parse('{"id":"api/misc/eslint-plugin/prefer-docusaurus-heading","title":"prefer-docusaurus-heading","description":"Ensures that the @theme/Heading theme component provided by Docusaurus theme-classic is used instead of `` tags for headings.","source":"@site/docs/api/misc/eslint-plugin/prefer-docusaurus-heading.mdx","sourceDirName":"api/misc/eslint-plugin","slug":"/api/misc/@docusaurus/eslint-plugin/prefer-docusaurus-heading","permalink":"/docs/api/misc/@docusaurus/eslint-plugin/prefer-docusaurus-heading","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/api/misc/eslint-plugin/prefer-docusaurus-heading.mdx","tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739456991000,"frontMatter":{"slug":"/api/misc/@docusaurus/eslint-plugin/prefer-docusaurus-heading"},"sidebar":"api","previous":{"title":"no-untranslated-text","permalink":"/docs/api/misc/@docusaurus/eslint-plugin/no-untranslated-text"},"next":{"title":"string-literal-i18n-messages","permalink":"/docs/api/misc/@docusaurus/eslint-plugin/string-literal-i18n-messages"}}'),a=n(85893),r=n(80980);let t={slug:"/api/misc/@docusaurus/eslint-plugin/prefer-docusaurus-heading"},d="prefer-docusaurus-heading",u={},c=[{value:"Rule Details",id:"details",level:2}];function o(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,r.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(s.header,{children:(0,a.jsx)(s.h1,{id:"prefer-docusaurus-heading",children:"prefer-docusaurus-heading"})}),"\n",(0,a.jsxs)(s.p,{children:["Ensures that the ",(0,a.jsx)(s.code,{children:"@theme/Heading"})," theme component provided by Docusaurus ",(0,a.jsx)(s.a,{href:"/docs/api/themes/@docusaurus/theme-classic",children:(0,a.jsx)(s.code,{children:"theme-classic"})})," is used instead of ",(0,a.jsx)(s.code,{children:""})," tags for headings."]}),"\n",(0,a.jsx)(s.h2,{id:"details",children:"Rule Details"}),"\n",(0,a.jsxs)(s.p,{children:["Examples of ",(0,a.jsx)(s.strong,{children:"incorrect"})," code for this rule:"]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-html",children:"
This is heading 1
\n\n
This is heading 2
\n\n
This is heading 3
\n"})}),"\n",(0,a.jsxs)(s.p,{children:["Examples of ",(0,a.jsx)(s.strong,{children:"correct"})," code for this rule:"]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-javascript",children:"import Heading from '@theme/Heading'\n\nThis is heading 1\n\nThis is heading 2\n\nThis is heading 3\n"})})]})}function l(e={}){let{wrapper:s}={...(0,r.a)(),...e.components};return s?(0,a.jsx)(s,{...e,children:(0,a.jsx)(o,{...e})}):o(e)}},80980:function(e,s,n){n.d(s,{Z:()=>d,a:()=>t});var i=n(67294);let a={},r=i.createContext(a);function t(e){let s=i.useContext(r);return i.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function d(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:t(e.components),i.createElement(r.Provider,{value:s},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["46202"],{16842:function(e,s,n){n.r(s),n.d(s,{default:()=>l,frontMatter:()=>t,metadata:()=>i,assets:()=>u,toc:()=>c,contentTitle:()=>d});var i=JSON.parse('{"id":"api/misc/eslint-plugin/prefer-docusaurus-heading","title":"prefer-docusaurus-heading","description":"Ensures that the @theme/Heading theme component provided by Docusaurus theme-classic is used instead of `` tags for headings.","source":"@site/docs/api/misc/eslint-plugin/prefer-docusaurus-heading.mdx","sourceDirName":"api/misc/eslint-plugin","slug":"/api/misc/@docusaurus/eslint-plugin/prefer-docusaurus-heading","permalink":"/docs/api/misc/@docusaurus/eslint-plugin/prefer-docusaurus-heading","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/api/misc/eslint-plugin/prefer-docusaurus-heading.mdx","tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739551601000,"frontMatter":{"slug":"/api/misc/@docusaurus/eslint-plugin/prefer-docusaurus-heading"},"sidebar":"api","previous":{"title":"no-untranslated-text","permalink":"/docs/api/misc/@docusaurus/eslint-plugin/no-untranslated-text"},"next":{"title":"string-literal-i18n-messages","permalink":"/docs/api/misc/@docusaurus/eslint-plugin/string-literal-i18n-messages"}}'),a=n(85893),r=n(80980);let t={slug:"/api/misc/@docusaurus/eslint-plugin/prefer-docusaurus-heading"},d="prefer-docusaurus-heading",u={},c=[{value:"Rule Details",id:"details",level:2}];function o(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,r.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(s.header,{children:(0,a.jsx)(s.h1,{id:"prefer-docusaurus-heading",children:"prefer-docusaurus-heading"})}),"\n",(0,a.jsxs)(s.p,{children:["Ensures that the ",(0,a.jsx)(s.code,{children:"@theme/Heading"})," theme component provided by Docusaurus ",(0,a.jsx)(s.a,{href:"/docs/api/themes/@docusaurus/theme-classic",children:(0,a.jsx)(s.code,{children:"theme-classic"})})," is used instead of ",(0,a.jsx)(s.code,{children:""})," tags for headings."]}),"\n",(0,a.jsx)(s.h2,{id:"details",children:"Rule Details"}),"\n",(0,a.jsxs)(s.p,{children:["Examples of ",(0,a.jsx)(s.strong,{children:"incorrect"})," code for this rule:"]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-html",children:"
This is heading 1
\n\n
This is heading 2
\n\n
This is heading 3
\n"})}),"\n",(0,a.jsxs)(s.p,{children:["Examples of ",(0,a.jsx)(s.strong,{children:"correct"})," code for this rule:"]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-javascript",children:"import Heading from '@theme/Heading'\n\nThis is heading 1\n\nThis is heading 2\n\nThis is heading 3\n"})})]})}function l(e={}){let{wrapper:s}={...(0,r.a)(),...e.components};return s?(0,a.jsx)(s,{...e,children:(0,a.jsx)(o,{...e})}):o(e)}},80980:function(e,s,n){n.d(s,{Z:()=>d,a:()=>t});var i=n(67294);let a={},r=i.createContext(a);function t(e){let s=i.useContext(r);return i.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function d(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:t(e.components),i.createElement(r.Provider,{value:s},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/1d8d7b8d.5f89f395.js b/assets/js/1d8d7b8d.9b085a6e.js
similarity index 99%
rename from assets/js/1d8d7b8d.5f89f395.js
rename to assets/js/1d8d7b8d.9b085a6e.js
index ced3a3b5d6..143ac37297 100644
--- a/assets/js/1d8d7b8d.5f89f395.js
+++ b/assets/js/1d8d7b8d.9b085a6e.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["61597"],{46877:function(e,r,n){n.d(r,{Z:()=>s});let s=n.p+"assets/images/docsearch-troubleshoot-index-facets-4c0d9816a72c457e3e8352bc0fceccb6.jpg"},49379:function(e,r,n){n.r(r),n.d(r,{default:()=>g,frontMatter:()=>l,metadata:()=>s,assets:()=>h,toc:()=>d,contentTitle:()=>t});var s=JSON.parse('{"id":"search","title":"Search","description":"There are a few options you can use to add search to your website:","source":"@site/docs/search.mdx","sourceDirName":".","slug":"/search","permalink":"/docs/search","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/search.mdx","tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739456991000,"frontMatter":{"keywords":["algolia","search"]},"sidebar":"docs","previous":{"title":"Static Assets","permalink":"/docs/static-assets"},"next":{"title":"Browser support","permalink":"/docs/browser-support"}}'),a=n(85893),o=n(80980),i=n(15398),c=n(58636);let l={keywords:["algolia","search"]},t="Search",h={},d=[{value:"\uD83E\uDD47 Using Algolia DocSearch",id:"using-algolia-docsearch",level:2},{value:"Index Configuration",id:"algolia-index-configuration",level:3},{value:"Connecting Algolia",id:"connecting-algolia",level:3},{value:"Contextual search",id:"contextual-search",level:3},{value:"Styling your Algolia search",id:"styling-your-algolia-search",level:3},{value:"Customizing the Algolia search behavior",id:"customizing-the-algolia-search-behavior",level:3},{value:"Editing the Algolia search component",id:"editing-the-algolia-search-component",level:3},{value:"Troubleshooting",id:"algolia-troubleshooting",level:3},{value:"No Search Results",id:"algolia-no-search-results",level:4},{value:"Support",id:"algolia-support",level:3},{value:"\uD83D\uDC65 Using Typesense DocSearch",id:"using-typesense-docsearch",level:2},{value:"\uD83D\uDC65 Using Local Search",id:"using-local-search",level:2},{value:"\uD83D\uDC65 Using your own search",id:"using-your-own-search",level:2}];function u(e){let r={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components},{Details:s}=r;return s||function(e,r){throw Error("Expected "+(r?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(r.header,{children:(0,a.jsx)(r.h1,{id:"search",children:"Search"})}),"\n",(0,a.jsx)(r.p,{children:"There are a few options you can use to add search to your website:"}),"\n",(0,a.jsxs)(r.ul,{children:["\n",(0,a.jsxs)(r.li,{children:["\uD83E\uDD47 ",(0,a.jsx)(r.a,{href:"#using-algolia-docsearch",children:"Algolia DocSearch"})," (",(0,a.jsx)(r.strong,{children:"official"}),")"]}),"\n",(0,a.jsxs)(r.li,{children:["\uD83D\uDC65 ",(0,a.jsx)(r.a,{href:"#using-typesense-docsearch",children:"Typesense DocSearch"})]}),"\n",(0,a.jsxs)(r.li,{children:["\uD83D\uDC65 ",(0,a.jsx)(r.a,{href:"#using-local-search",children:"Local Search"})]}),"\n",(0,a.jsxs)(r.li,{children:["\uD83D\uDC65 ",(0,a.jsxs)(r.a,{href:"#using-your-own-search",children:["Your own ",(0,a.jsx)(r.code,{children:"SearchBar"})," component"]})]}),"\n"]}),"\n",(0,a.jsxs)(r.admonition,{type:"info",children:[(0,a.jsxs)(r.p,{children:["\uD83E\uDD47 Docusaurus provides ",(0,a.jsx)(r.strong,{children:"first-class support"})," for ",(0,a.jsx)(r.a,{href:"#using-algolia-docsearch",children:"Algolia DocSearch"}),"."]}),(0,a.jsxs)(r.p,{children:["\uD83D\uDC65 Other options are ",(0,a.jsx)(r.strong,{children:"maintained by the community"}),": please report bugs to their respective repositories."]})]}),"\n",(0,a.jsx)(r.h2,{id:"using-algolia-docsearch",children:"\uD83E\uDD47 Using Algolia DocSearch"}),"\n",(0,a.jsxs)(r.p,{children:["Docusaurus has ",(0,a.jsx)(r.strong,{children:"official support"})," for ",(0,a.jsx)(r.a,{href:"https://docsearch.algolia.com",children:"Algolia DocSearch"}),"."]}),"\n",(0,a.jsxs)(r.p,{children:["The service is ",(0,a.jsx)(r.strong,{children:"free"})," for any developer documentation or technical blog: just make sure to read the ",(0,a.jsx)(r.a,{href:"https://docsearch.algolia.com/docs/who-can-apply/",children:"checklist"})," and ",(0,a.jsx)(r.a,{href:"https://docsearch.algolia.com/apply",children:"apply to the DocSearch program"}),"."]}),"\n",(0,a.jsx)(r.p,{children:"DocSearch crawls your website once a week (the schedule is configurable from the web interface) and aggregates all the content in an Algolia index. This content is then queried directly from your front-end using the Algolia API."}),"\n",(0,a.jsxs)(r.p,{children:["If your website is ",(0,a.jsx)(r.a,{href:"https://docsearch.algolia.com/docs/who-can-apply",children:"not eligible"})," for the free, hosted version of DocSearch, or if your website sits behind a firewall and is not public, then you can ",(0,a.jsx)(r.a,{href:"https://docsearch.algolia.com/docs/run-your-own/",children:"run your own"})," DocSearch crawler."]}),"\n",(0,a.jsx)(r.admonition,{type:"note",children:(0,a.jsxs)(r.p,{children:["By default, the Docusaurus preset generates a ",(0,a.jsx)(r.a,{href:"https://docusaurus.io/sitemap.xml",children:"sitemap.xml"})," that the Algolia crawler can use."]})}),"\n",(0,a.jsx)(r.admonition,{title:"From the old docsearch?",type:"info",children:(0,a.jsxs)(r.p,{children:["You can read more about migration from the legacy DocSearch infra in ",(0,a.jsx)(r.a,{href:"/blog/2021/11/21/algolia-docsearch-migration",children:"our blog post"})," or ",(0,a.jsx)(r.a,{href:"https://docsearch.algolia.com/docs/migrating-from-legacy",children:"the DocSearch migration docs"}),"."]})}),"\n",(0,a.jsx)(r.h3,{id:"algolia-index-configuration",children:"Index Configuration"}),"\n",(0,a.jsxs)(r.p,{children:["After your application has been approved and deployed, you will receive an email with all the details for you to add DocSearch to your project. Editing and managing your crawls can be done via ",(0,a.jsx)(r.a,{href:"https://crawler.algolia.com/",children:"the web interface"}),". Indices are readily available after deployment, so manual configuration usually isn't necessary."]}),"\n",(0,a.jsx)(r.admonition,{title:"Use the recommended crawler config",type:"danger",children:(0,a.jsxs)(r.p,{children:["It is highly recommended to use our official ",(0,a.jsx)(r.a,{href:"https://docsearch.algolia.com/docs/templates/#docusaurus-v3-template",children:(0,a.jsx)(r.strong,{children:"Docusaurus v3 crawler configuration"})}),". We cannot support you if you choose a different crawler configuration."]})}),"\n",(0,a.jsxs)(r.admonition,{title:"When updating your crawler config",type:"warning",children:[(0,a.jsxs)(r.p,{children:["The crawler configuration contains a ",(0,a.jsx)(r.code,{children:"initialIndexSettings"}),", which will only be used to initialize your Algolia index if it does not exist yet."]}),(0,a.jsxs)(r.p,{children:["If you update your ",(0,a.jsx)(r.code,{children:"initialIndexSettings"})," crawler setting, it is possible to update the index manually through the interface, but ",(0,a.jsx)(r.a,{href:"https://github.com/facebook/docusaurus/issues/9200#issuecomment-1667338492",children:"the Algolia team recommends to delete your index and then restart a crawl"})," to fully reinitialize it with the new settings."]})]}),"\n",(0,a.jsx)(r.h3,{id:"connecting-algolia",children:"Connecting Algolia"}),"\n",(0,a.jsxs)(r.p,{children:["Docusaurus' own ",(0,a.jsx)(r.code,{children:"@docusaurus/preset-classic"})," supports Algolia DocSearch integration. If you use the classic preset, no additional installation is needed."]}),"\n",(0,a.jsxs)(s,{children:[(0,a.jsxs)("summary",{children:["Installation steps when not using ",(0,a.jsx)("code",{children:"@docusaurus/preset-classic"})]}),(0,a.jsxs)(r.ol,{children:["\n",(0,a.jsx)(r.li,{children:"Install the package:"}),"\n"]}),(0,a.jsxs)(i.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(c.Z,{value:"npm",children:(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-bash",children:"npm install --save @docusaurus/theme-search-algolia\n"})})}),(0,a.jsx)(c.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-bash",children:"yarn add @docusaurus/theme-search-algolia\n"})})}),(0,a.jsx)(c.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-bash",children:"pnpm add @docusaurus/theme-search-algolia\n"})})})]}),(0,a.jsxs)(r.ol,{start:"2",children:["\n",(0,a.jsxs)(r.li,{children:["Register the theme in ",(0,a.jsx)(r.code,{children:"docusaurus.config.js"}),":"]}),"\n"]}),(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n title: 'My site',\n // ...\n themes: ['@docusaurus/theme-search-algolia'],\n themeConfig: {\n // ...\n },\n};\n"})})]}),"\n",(0,a.jsxs)(r.p,{children:["Then, add an ",(0,a.jsx)(r.code,{children:"algolia"})," field in your ",(0,a.jsx)(r.code,{children:"themeConfig"}),". ",(0,a.jsx)(r.strong,{children:(0,a.jsx)(r.a,{href:"https://docsearch.algolia.com/apply/",children:"Apply for DocSearch"})})," to get your Algolia index and API key."]}),"\n",(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n // ...\n themeConfig: {\n // ...\n // highlight-start\n algolia: {\n // The application ID provided by Algolia\n appId: 'YOUR_APP_ID',\n\n // Public API key: it is safe to commit it\n apiKey: 'YOUR_SEARCH_API_KEY',\n\n indexName: 'YOUR_INDEX_NAME',\n\n // Optional: see doc section below\n contextualSearch: true,\n\n // Optional: Specify domains where the navigation should occur through window.location instead on history.push. Useful when our Algolia config crawls multiple documentation sites and we want to navigate with window.location.href to them.\n externalUrlRegex: 'external\\\\.com|domain\\\\.com',\n\n // Optional: Replace parts of the item URLs from Algolia. Useful when using the same search index for multiple deployments using a different baseUrl. You can use regexp or string in the `from` param. For example: localhost:3000 vs myCompany.com/docs\n replaceSearchResultPathname: {\n from: '/docs/', // or as RegExp: /\\/docs\\//\n to: '/',\n },\n\n // Optional: Algolia search parameters\n searchParameters: {},\n\n // Optional: path for search page that enabled by default (`false` to disable it)\n searchPagePath: 'search',\n\n // Optional: whether the insights feature is enabled or not on Docsearch (`false` by default)\n insights: false,\n\n //... other Algolia params\n },\n // highlight-end\n },\n};\n"})}),"\n",(0,a.jsxs)(r.admonition,{type:"info",children:[(0,a.jsxs)(r.p,{children:["The ",(0,a.jsx)(r.code,{children:"searchParameters"})," option used to be named ",(0,a.jsx)(r.code,{children:"algoliaOptions"})," in Docusaurus v1."]}),(0,a.jsxs)(r.p,{children:["Refer to its ",(0,a.jsx)(r.a,{href:"https://docsearch.algolia.com/docs/api#searchparameters",children:"official DocSearch documentation"})," for possible values."]})]}),"\n",(0,a.jsxs)(r.admonition,{type:"warning",children:[(0,a.jsx)(r.p,{children:"The search feature will not work reliably until Algolia crawls your site."}),(0,a.jsxs)(r.p,{children:["If search doesn't work after any significant change, please use the Algolia dashboard to ",(0,a.jsx)(r.strong,{children:"trigger a new crawl"}),"."]})]}),"\n",(0,a.jsx)(r.h3,{id:"contextual-search",children:"Contextual search"}),"\n",(0,a.jsxs)(r.p,{children:["Contextual search is ",(0,a.jsx)(r.strong,{children:"enabled by default"}),"."]}),"\n",(0,a.jsxs)(r.p,{children:["It ensures that search results are ",(0,a.jsx)(r.strong,{children:"relevant to the current language and version"}),"."]}),"\n",(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n // ...\n themeConfig: {\n // ...\n // highlight-start\n algolia: {\n contextualSearch: true,\n },\n // highlight-end\n },\n};\n"})}),"\n",(0,a.jsxs)(r.p,{children:["Let's consider you have 2 docs versions (",(0,a.jsx)(r.strong,{children:"v1"})," and ",(0,a.jsx)(r.strong,{children:"v2"}),") and 2 languages (",(0,a.jsx)(r.code,{children:"en"})," and ",(0,a.jsx)(r.code,{children:"fr"}),")."]}),"\n",(0,a.jsx)(r.p,{children:"When browsing v2 docs, it would be odd to return search results for the v1 documentation. Sometimes v1 and v2 docs are quite similar, and you would end up with duplicate search results for the same query (one result per version)."}),"\n",(0,a.jsx)(r.p,{children:"Similarly, when browsing the French site, it would be odd to return search results for the English docs."}),"\n",(0,a.jsx)(r.p,{children:"To solve this problem, the contextual search feature understands that you are browsing a specific docs version and language, and will create the search query filters dynamically."}),"\n",(0,a.jsxs)(r.ul,{children:["\n",(0,a.jsxs)(r.li,{children:["on ",(0,a.jsx)(r.code,{children:"/en/docs/v1/myDoc"}),", search results will only include ",(0,a.jsx)(r.strong,{children:"English"})," results for the ",(0,a.jsx)(r.strong,{children:"v1"})," docs (+ other unversioned pages)"]}),"\n",(0,a.jsxs)(r.li,{children:["on ",(0,a.jsx)(r.code,{children:"/fr/docs/v2/myDoc"}),", search results will only include ",(0,a.jsx)(r.strong,{children:"French"})," results for the ",(0,a.jsx)(r.strong,{children:"v2"})," docs (+ other unversioned pages)"]}),"\n"]}),"\n",(0,a.jsxs)(r.admonition,{type:"info",children:[(0,a.jsxs)(r.p,{children:["When using ",(0,a.jsx)(r.code,{children:"contextualSearch: true"})," (default), the contextual facet filters will be merged with the ones provided with ",(0,a.jsx)(r.code,{children:"algolia.searchParameters.facetFilters"})," ."]}),(0,a.jsxs)(r.p,{children:["For specific needs, you can disable ",(0,a.jsx)(r.code,{children:"contextualSearch"})," and define your own ",(0,a.jsx)(r.code,{children:"facetFilters"}),":"]}),(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n // ...\n themeConfig: {\n // ...\n // highlight-start\n algolia: {\n contextualSearch: false,\n searchParameters: {\n facetFilters: ['language:en', ['filter1', 'filter2'], 'filter3'],\n },\n },\n // highlight-end\n },\n};\n"})}),(0,a.jsxs)(r.p,{children:["Refer to the relevant ",(0,a.jsx)(r.a,{href:"https://www.algolia.com/doc/guides/managing-results/refine-results/faceting/",children:"Algolia faceting documentation"}),"."]})]}),"\n",(0,a.jsx)(r.admonition,{title:"Contextual search doesn't work?",type:"warning",children:(0,a.jsxs)(r.p,{children:["If you only get search results when Contextual Search is disabled, this is very likely because of an ",(0,a.jsx)(r.a,{href:"#algolia-no-search-results",children:"index configuration issue"}),"."]})}),"\n",(0,a.jsx)(r.h3,{id:"styling-your-algolia-search",children:"Styling your Algolia search"}),"\n",(0,a.jsx)(r.p,{children:"By default, DocSearch comes with a fine-tuned theme that was designed for accessibility, making sure that colors and contrasts respect standards."}),"\n",(0,a.jsxs)(r.p,{children:["Still, you can reuse the ",(0,a.jsx)(r.a,{href:"/docs/styling-layout#styling-your-site-with-infima",children:"Infima CSS variables"})," from Docusaurus to style DocSearch by editing the ",(0,a.jsx)(r.code,{children:"/src/css/custom.css"})," file."]}),"\n",(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-css",metastring:'title="/src/css/custom.css"',children:"[data-theme='light'] .DocSearch {\n /* --docsearch-primary-color: var(--ifm-color-primary); */\n /* --docsearch-text-color: var(--ifm-font-color-base); */\n --docsearch-muted-color: var(--ifm-color-secondary-darkest);\n --docsearch-container-background: rgba(94, 100, 112, 0.7);\n /* Modal */\n --docsearch-modal-background: var(--ifm-color-secondary-lighter);\n /* Search box */\n --docsearch-searchbox-background: var(--ifm-color-secondary);\n --docsearch-searchbox-focus-background: var(--ifm-color-white);\n /* Hit */\n --docsearch-hit-color: var(--ifm-font-color-base);\n --docsearch-hit-active-color: var(--ifm-color-white);\n --docsearch-hit-background: var(--ifm-color-white);\n /* Footer */\n --docsearch-footer-background: var(--ifm-color-white);\n}\n\n[data-theme='dark'] .DocSearch {\n --docsearch-text-color: var(--ifm-font-color-base);\n --docsearch-muted-color: var(--ifm-color-secondary-darkest);\n --docsearch-container-background: rgba(47, 55, 69, 0.7);\n /* Modal */\n --docsearch-modal-background: var(--ifm-background-color);\n /* Search box */\n --docsearch-searchbox-background: var(--ifm-background-color);\n --docsearch-searchbox-focus-background: var(--ifm-color-black);\n /* Hit */\n --docsearch-hit-color: var(--ifm-font-color-base);\n --docsearch-hit-active-color: var(--ifm-color-white);\n --docsearch-hit-background: var(--ifm-color-emphasis-100);\n /* Footer */\n --docsearch-footer-background: var(--ifm-background-surface-color);\n --docsearch-key-gradient: linear-gradient(\n -26.5deg,\n var(--ifm-color-emphasis-200) 0%,\n var(--ifm-color-emphasis-100) 100%\n );\n}\n"})}),"\n",(0,a.jsx)(r.h3,{id:"customizing-the-algolia-search-behavior",children:"Customizing the Algolia search behavior"}),"\n",(0,a.jsxs)(r.p,{children:["Algolia DocSearch supports a ",(0,a.jsx)(r.a,{href:"https://docsearch.algolia.com/docs/api/",children:"list of options"})," that you can pass to the ",(0,a.jsx)(r.code,{children:"algolia"})," field in the ",(0,a.jsx)(r.code,{children:"docusaurus.config.js"})," file."]}),"\n",(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n // ...\n algolia: {\n apiKey: 'YOUR_API_KEY',\n indexName: 'YOUR_INDEX_NAME',\n // Options...\n },\n },\n};\n"})}),"\n",(0,a.jsx)(r.h3,{id:"editing-the-algolia-search-component",children:"Editing the Algolia search component"}),"\n",(0,a.jsxs)(r.p,{children:["If you prefer to edit the Algolia search React component, ",(0,a.jsx)(r.a,{href:"/docs/swizzling",children:"swizzle"})," the ",(0,a.jsx)(r.code,{children:"SearchBar"})," component in ",(0,a.jsx)(r.code,{children:"@docusaurus/theme-search-algolia"}),":"]}),"\n",(0,a.jsxs)(i.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(c.Z,{value:"npm",children:(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-bash",children:"npm run swizzle @docusaurus/theme-search-algolia SearchBar\n"})})}),(0,a.jsx)(c.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-bash",children:"yarn swizzle @docusaurus/theme-search-algolia SearchBar\n"})})}),(0,a.jsx)(c.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-bash",children:"pnpm run swizzle @docusaurus/theme-search-algolia SearchBar\n"})})})]}),"\n",(0,a.jsx)(r.h3,{id:"algolia-troubleshooting",children:"Troubleshooting"}),"\n",(0,a.jsx)(r.p,{children:"Here are the most common issues Docusaurus users face when using Algolia DocSearch."}),"\n",(0,a.jsx)(r.h4,{id:"algolia-no-search-results",children:"No Search Results"}),"\n",(0,a.jsxs)(r.p,{children:["Seeing no search results is usually related to an ",(0,a.jsx)(r.strong,{children:"index configuration problem"}),"."]}),"\n",(0,a.jsxs)(s,{children:[(0,a.jsx)("summary",{children:"How to check if I have a config problem?"}),(0,a.jsxs)(r.p,{children:["Docusaurus uses ",(0,a.jsx)(r.a,{href:"https://www.algolia.com/doc/guides/managing-results/refine-results/faceting/",children:"Algolia faceting"})," for its ",(0,a.jsx)(r.a,{href:"#contextual-search",children:"Contextual Search"})," feature, to create dynamic queries such as:"]}),(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-json",children:'[\n "language:en",\n [\n "docusaurus_tag:default",\n "docusaurus_tag:docs-default-3.2.1",\n "docusaurus_tag:docs-community-current",\n "docusaurus_tag:docs-docs-tests-current"\n ]\n]\n'})}),(0,a.jsxs)(r.p,{children:["On the Algolia UI, your index should allow to create facet queries on fields ",(0,a.jsx)(r.code,{children:"docusaurus_tag"}),", ",(0,a.jsx)(r.code,{children:"language"}),", ",(0,a.jsx)(r.code,{children:"lang"}),", ",(0,a.jsx)(r.code,{children:"version"}),", ",(0,a.jsx)(r.code,{children:"type"}),", as shown in the screenshot below:"]}),(0,a.jsx)(r.p,{children:(0,a.jsx)(r.img,{alt:"Algolia index showing appropriate faceting fields",src:n(46877).Z+"",width:"1072",height:"1761"})}),(0,a.jsxs)(r.p,{children:["Alternatively, if you disable ",(0,a.jsx)(r.a,{href:"#contextual-search",children:"Contextual Search"})," with ",(0,a.jsx)(r.code,{children:"{contextualSearch: false}"})," (which we don't particularly recommend), Docusaurus will not use facet queries, and you should start seeing results."]})]}),"\n",(0,a.jsx)(r.admonition,{title:"Use the recommended configuration",type:"danger",children:(0,a.jsxs)(r.p,{children:["We ",(0,a.jsx)(r.a,{href:"#algolia-index-configuration",children:"recommend a specific crawler configuration"})," for a good reason. We cannot support you if you choose to use a different configuration."]})}),"\n",(0,a.jsx)(r.p,{children:"You can fix index configuration problems by following those steps:"}),"\n",(0,a.jsxs)(r.ol,{children:["\n",(0,a.jsxs)(r.li,{children:["Use the ",(0,a.jsx)(r.a,{href:"#algolia-index-configuration",children:"recommend crawler configuration"})]}),"\n",(0,a.jsx)(r.li,{children:"Delete your index through the UI"}),"\n",(0,a.jsx)(r.li,{children:"Trigger a new crawl through the UI"}),"\n",(0,a.jsxs)(r.li,{children:["Check your index is recreated with the appropriate faceting fields: ",(0,a.jsx)(r.code,{children:"docusaurus_tag"}),", ",(0,a.jsx)(r.code,{children:"language"}),", ",(0,a.jsx)(r.code,{children:"lang"}),", ",(0,a.jsx)(r.code,{children:"version"}),", ",(0,a.jsx)(r.code,{children:"type"})]}),"\n",(0,a.jsxs)(r.li,{children:["See that you now get search results, even with ",(0,a.jsx)(r.a,{href:"#contextual-search",children:"Contextual Search"})," enabled"]}),"\n"]}),"\n",(0,a.jsx)(r.h3,{id:"algolia-support",children:"Support"}),"\n",(0,a.jsx)(r.p,{children:"The Algolia DocSearch team can help you figure out search problems on your site."}),"\n",(0,a.jsxs)(r.p,{children:["You can reach out to Algolia via ",(0,a.jsx)(r.a,{href:"https://algolia.com/support",children:"their support page"})," or on ",(0,a.jsx)(r.a,{href:"https://discord.gg/wr2m5j948P",children:"Discord"}),"."]}),"\n",(0,a.jsxs)(r.p,{children:["Docusaurus also has an ",(0,a.jsx)(r.code,{children:"#algolia"})," channel on ",(0,a.jsx)(r.a,{href:"https://discordapp.com/invite/docusaurus",children:"Discord"}),"."]}),"\n",(0,a.jsx)(r.h2,{id:"using-typesense-docsearch",children:"\uD83D\uDC65 Using Typesense DocSearch"}),"\n",(0,a.jsxs)(r.p,{children:[(0,a.jsx)(r.a,{href:"https://typesense.org",children:"Typesense"})," DocSearch works similar to Algolia DocSearch, except that your website is indexed into a Typesense search cluster."]}),"\n",(0,a.jsxs)(r.p,{children:["Typesense is an ",(0,a.jsx)(r.a,{href:"https://github.com/typesense/typesense",children:"open source"})," instant-search engine that you can either:"]}),"\n",(0,a.jsxs)(r.ul,{children:["\n",(0,a.jsxs)(r.li,{children:[(0,a.jsx)(r.a,{href:"https://typesense.org/docs/guide/install-typesense.html#option-2-local-machine-self-hosting",children:"Self-Host"})," on your own servers or"]}),"\n",(0,a.jsxs)(r.li,{children:["Use the Managed ",(0,a.jsx)(r.a,{href:"https://cloud.typesense.org",children:"Typesense Cloud"})," service."]}),"\n"]}),"\n",(0,a.jsx)(r.p,{children:"Similar to Algolia DocSearch, there are two components:"}),"\n",(0,a.jsxs)(r.ul,{children:["\n",(0,a.jsxs)(r.li,{children:[(0,a.jsx)(r.a,{href:"https://github.com/typesense/typesense-docsearch-scraper",children:"typesense-docsearch-scraper"})," - which scrapes your website and indexes the data in your Typesense cluster."]}),"\n",(0,a.jsxs)(r.li,{children:[(0,a.jsx)(r.a,{href:"https://github.com/typesense/docusaurus-theme-search-typesense",children:"docusaurus-theme-search-typesense"})," - a search bar UI component to add to your website."]}),"\n"]}),"\n",(0,a.jsxs)(r.p,{children:["Read a step-by-step walk-through of how to ",(0,a.jsx)(r.a,{href:"https://typesense.org/docs/guide/docsearch.html#step-1-set-up-docsearch-scraper",children:"run typesense-docsearch-scraper here"})," and how to ",(0,a.jsx)(r.a,{href:"https://typesense.org/docs/guide/docsearch.html#option-a-docusaurus-powered-sites",children:"install the Search Bar in your Docusaurus Site here"}),"."]}),"\n",(0,a.jsx)(r.h2,{id:"using-local-search",children:"\uD83D\uDC65 Using Local Search"}),"\n",(0,a.jsx)(r.p,{children:"You can use a local search plugin for websites where the search index is small and can be downloaded to your users' browsers when they visit your website."}),"\n",(0,a.jsxs)(r.p,{children:["You'll find a list of community-supported ",(0,a.jsx)(r.a,{href:"https://docusaurus.io/community/resources#search",children:"local search plugins listed here"}),"."]}),"\n",(0,a.jsx)(r.h2,{id:"using-your-own-search",children:"\uD83D\uDC65 Using your own search"}),"\n",(0,a.jsxs)(r.p,{children:["To use your own search, swizzle the ",(0,a.jsx)(r.code,{children:"SearchBar"})," component in ",(0,a.jsx)(r.code,{children:"@docusaurus/theme-classic"})]}),"\n",(0,a.jsxs)(i.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(c.Z,{value:"npm",children:(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-bash",children:"npm run swizzle @docusaurus/theme-classic SearchBar\n"})})}),(0,a.jsx)(c.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-bash",children:"yarn swizzle @docusaurus/theme-classic SearchBar\n"})})}),(0,a.jsx)(c.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-bash",children:"pnpm run swizzle @docusaurus/theme-classic SearchBar\n"})})})]}),"\n",(0,a.jsxs)(r.p,{children:["This will create an ",(0,a.jsx)(r.code,{children:"src/theme/SearchBar"})," file in your project folder. Restart your dev server and edit the component, you will see that Docusaurus uses your own ",(0,a.jsx)(r.code,{children:"SearchBar"})," component now."]}),"\n",(0,a.jsxs)(r.p,{children:[(0,a.jsx)(r.strong,{children:"Notes"}),": You can alternatively ",(0,a.jsx)(r.a,{href:"#editing-the-algolia-search-component",children:"swizzle from Algolia SearchBar"})," and create your own search component from there."]})]})}function g(e={}){let{wrapper:r}={...(0,o.a)(),...e.components};return r?(0,a.jsx)(r,{...e,children:(0,a.jsx)(u,{...e})}):u(e)}},58636:function(e,r,n){n.d(r,{Z:()=>o});var s=n(85893);n(67294);var a=n(90496);function o(e){let{children:r,hidden:n,className:o}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,a.Z)("tabItem_pnkT",o),hidden:n,children:r})}},15398:function(e,r,n){n.d(r,{Z:()=>j});var s=n(85893),a=n(67294),o=n(90496),i=n(54947),c=n(3620),l=n(844),t=n(97486),h=n(32263),d=n(16971);function u(e){return a.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||a.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.`)})?.filter(Boolean)??[]}function g(e){let{value:r,tabValues:n}=e;return n.some(e=>e.value===r)}var p=n(71607);function x(e){let{className:r,block:n,selectedValue:a,selectValue:c,tabValues:l}=e,t=[],{blockElementScrollPositionUntilNextRender:h}=(0,i.o5)(),d=e=>{let r=e.currentTarget,n=l[t.indexOf(r)].value;n!==a&&(h(r),c(n))},u=e=>{let r=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{let n=t.indexOf(e.currentTarget)+1;r=t[n]??t[0];break}case"ArrowLeft":{let n=t.indexOf(e.currentTarget)-1;r=t[n]??t[t.length-1]}}r?.focus()};return(0,s.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.Z)("tabs",{"tabs--block":n},r),children:l.map(e=>{let{value:r,label:n,attributes:i}=e;return(0,s.jsx)("li",{role:"tab",tabIndex:a===r?0:-1,"aria-selected":a===r,ref:e=>{t.push(e)},onKeyDown:u,onClick:d,...i,className:(0,o.Z)("tabs__item","tabItem_AQgk",i?.className,{"tabs__item--active":a===r}),children:n??r},r)})})}function f(e){let{lazy:r,children:n,selectedValue:i}=e,c=(Array.isArray(n)?n:[n]).filter(Boolean);if(r){let e=c.find(e=>e.props.value===i);return e?(0,a.cloneElement)(e,{className:(0,o.Z)("margin-top--md",e.props.className)}):null}return(0,s.jsx)("div",{className:"margin-top--md",children:c.map((e,r)=>(0,a.cloneElement)(e,{key:r,hidden:e.props.value!==i}))})}function m(e){let r=function(e){let{defaultValue:r,queryString:n=!1,groupId:s}=e,o=function(e){let{values:r,children:n}=e;return(0,a.useMemo)(()=>{let e=r??u(n).map(e=>{let{props:{value:r,label:n,attributes:s,default:a}}=e;return{value:r,label:n,attributes:s,default:a}});return!function(e){let r=(0,h.lx)(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,p]=(0,a.useState)(()=>(function(e){let{defaultValue:r,tabValues:n}=e;if(0===n.length)throw Error("Docusaurus error: the component requires at least one children component");if(r){if(!g({value:r,tabValues:n}))throw Error(`Docusaurus error: The has a defaultValue "${r}" 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 r}let s=n.find(e=>e.default)??n[0];if(!s)throw Error("Unexpected error: 0 tabValues");return s.value})({defaultValue:r,tabValues:o})),[x,f]=function(e){let{queryString:r=!1,groupId:n}=e,s=(0,c.k6)(),o=function(e){let{queryString:r=!1,groupId:n}=e;if("string"==typeof r)return r;if(!1===r)return null;if(!0===r&&!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 n??null}({queryString:r,groupId:n});return[(0,t._X)(o),(0,a.useCallback)(e=>{if(!o)return;let r=new URLSearchParams(s.location.search);r.set(o,e),s.replace({...s.location,search:r.toString()})},[o,s])]}({queryString:n,groupId:s}),[m,j]=function(e){let{groupId:r}=e,n=r?`docusaurus.tab.${r}`:null,[s,o]=(0,d.Nk)(n);return[s,(0,a.useCallback)(e=>{n&&o.set(e)},[n,o])]}({groupId:s}),y=(()=>{let e=x??m;return g({value:e,tabValues:o})?e:null})();return(0,l.Z)(()=>{y&&p(y)},[y]),{selectedValue:i,selectValue:(0,a.useCallback)(e=>{if(!g({value:e,tabValues:o}))throw Error(`Can't select invalid tab value=${e}`);p(e),f(e),j(e)},[f,j,o]),tabValues:o}}(e);return(0,s.jsxs)("div",{className:(0,o.Z)("tabs-container","tabList_Qoir"),children:[(0,s.jsx)(x,{...r,...e}),(0,s.jsx)(f,{...r,...e})]})}function j(e){let r=(0,p.Z)();return(0,s.jsx)(m,{...e,children:u(e.children)},String(r))}},80980:function(e,r,n){n.d(r,{Z:()=>c,a:()=>i});var s=n(67294);let a={},o=s.createContext(a);function i(e){let r=s.useContext(o);return s.useMemo(function(){return"function"==typeof e?e(r):{...r,...e}},[r,e])}function c(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),s.createElement(o.Provider,{value:r},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["61597"],{46877:function(e,r,n){n.d(r,{Z:()=>s});let s=n.p+"assets/images/docsearch-troubleshoot-index-facets-4c0d9816a72c457e3e8352bc0fceccb6.jpg"},49379:function(e,r,n){n.r(r),n.d(r,{default:()=>g,frontMatter:()=>l,metadata:()=>s,assets:()=>h,toc:()=>d,contentTitle:()=>t});var s=JSON.parse('{"id":"search","title":"Search","description":"There are a few options you can use to add search to your website:","source":"@site/docs/search.mdx","sourceDirName":".","slug":"/search","permalink":"/docs/search","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/search.mdx","tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1739551601000,"frontMatter":{"keywords":["algolia","search"]},"sidebar":"docs","previous":{"title":"Static Assets","permalink":"/docs/static-assets"},"next":{"title":"Browser support","permalink":"/docs/browser-support"}}'),a=n(85893),o=n(80980),i=n(15398),c=n(58636);let l={keywords:["algolia","search"]},t="Search",h={},d=[{value:"\uD83E\uDD47 Using Algolia DocSearch",id:"using-algolia-docsearch",level:2},{value:"Index Configuration",id:"algolia-index-configuration",level:3},{value:"Connecting Algolia",id:"connecting-algolia",level:3},{value:"Contextual search",id:"contextual-search",level:3},{value:"Styling your Algolia search",id:"styling-your-algolia-search",level:3},{value:"Customizing the Algolia search behavior",id:"customizing-the-algolia-search-behavior",level:3},{value:"Editing the Algolia search component",id:"editing-the-algolia-search-component",level:3},{value:"Troubleshooting",id:"algolia-troubleshooting",level:3},{value:"No Search Results",id:"algolia-no-search-results",level:4},{value:"Support",id:"algolia-support",level:3},{value:"\uD83D\uDC65 Using Typesense DocSearch",id:"using-typesense-docsearch",level:2},{value:"\uD83D\uDC65 Using Local Search",id:"using-local-search",level:2},{value:"\uD83D\uDC65 Using your own search",id:"using-your-own-search",level:2}];function u(e){let r={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components},{Details:s}=r;return s||function(e,r){throw Error("Expected "+(r?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(r.header,{children:(0,a.jsx)(r.h1,{id:"search",children:"Search"})}),"\n",(0,a.jsx)(r.p,{children:"There are a few options you can use to add search to your website:"}),"\n",(0,a.jsxs)(r.ul,{children:["\n",(0,a.jsxs)(r.li,{children:["\uD83E\uDD47 ",(0,a.jsx)(r.a,{href:"#using-algolia-docsearch",children:"Algolia DocSearch"})," (",(0,a.jsx)(r.strong,{children:"official"}),")"]}),"\n",(0,a.jsxs)(r.li,{children:["\uD83D\uDC65 ",(0,a.jsx)(r.a,{href:"#using-typesense-docsearch",children:"Typesense DocSearch"})]}),"\n",(0,a.jsxs)(r.li,{children:["\uD83D\uDC65 ",(0,a.jsx)(r.a,{href:"#using-local-search",children:"Local Search"})]}),"\n",(0,a.jsxs)(r.li,{children:["\uD83D\uDC65 ",(0,a.jsxs)(r.a,{href:"#using-your-own-search",children:["Your own ",(0,a.jsx)(r.code,{children:"SearchBar"})," component"]})]}),"\n"]}),"\n",(0,a.jsxs)(r.admonition,{type:"info",children:[(0,a.jsxs)(r.p,{children:["\uD83E\uDD47 Docusaurus provides ",(0,a.jsx)(r.strong,{children:"first-class support"})," for ",(0,a.jsx)(r.a,{href:"#using-algolia-docsearch",children:"Algolia DocSearch"}),"."]}),(0,a.jsxs)(r.p,{children:["\uD83D\uDC65 Other options are ",(0,a.jsx)(r.strong,{children:"maintained by the community"}),": please report bugs to their respective repositories."]})]}),"\n",(0,a.jsx)(r.h2,{id:"using-algolia-docsearch",children:"\uD83E\uDD47 Using Algolia DocSearch"}),"\n",(0,a.jsxs)(r.p,{children:["Docusaurus has ",(0,a.jsx)(r.strong,{children:"official support"})," for ",(0,a.jsx)(r.a,{href:"https://docsearch.algolia.com",children:"Algolia DocSearch"}),"."]}),"\n",(0,a.jsxs)(r.p,{children:["The service is ",(0,a.jsx)(r.strong,{children:"free"})," for any developer documentation or technical blog: just make sure to read the ",(0,a.jsx)(r.a,{href:"https://docsearch.algolia.com/docs/who-can-apply/",children:"checklist"})," and ",(0,a.jsx)(r.a,{href:"https://docsearch.algolia.com/apply",children:"apply to the DocSearch program"}),"."]}),"\n",(0,a.jsx)(r.p,{children:"DocSearch crawls your website once a week (the schedule is configurable from the web interface) and aggregates all the content in an Algolia index. This content is then queried directly from your front-end using the Algolia API."}),"\n",(0,a.jsxs)(r.p,{children:["If your website is ",(0,a.jsx)(r.a,{href:"https://docsearch.algolia.com/docs/who-can-apply",children:"not eligible"})," for the free, hosted version of DocSearch, or if your website sits behind a firewall and is not public, then you can ",(0,a.jsx)(r.a,{href:"https://docsearch.algolia.com/docs/run-your-own/",children:"run your own"})," DocSearch crawler."]}),"\n",(0,a.jsx)(r.admonition,{type:"note",children:(0,a.jsxs)(r.p,{children:["By default, the Docusaurus preset generates a ",(0,a.jsx)(r.a,{href:"https://docusaurus.io/sitemap.xml",children:"sitemap.xml"})," that the Algolia crawler can use."]})}),"\n",(0,a.jsx)(r.admonition,{title:"From the old docsearch?",type:"info",children:(0,a.jsxs)(r.p,{children:["You can read more about migration from the legacy DocSearch infra in ",(0,a.jsx)(r.a,{href:"/blog/2021/11/21/algolia-docsearch-migration",children:"our blog post"})," or ",(0,a.jsx)(r.a,{href:"https://docsearch.algolia.com/docs/migrating-from-legacy",children:"the DocSearch migration docs"}),"."]})}),"\n",(0,a.jsx)(r.h3,{id:"algolia-index-configuration",children:"Index Configuration"}),"\n",(0,a.jsxs)(r.p,{children:["After your application has been approved and deployed, you will receive an email with all the details for you to add DocSearch to your project. Editing and managing your crawls can be done via ",(0,a.jsx)(r.a,{href:"https://crawler.algolia.com/",children:"the web interface"}),". Indices are readily available after deployment, so manual configuration usually isn't necessary."]}),"\n",(0,a.jsx)(r.admonition,{title:"Use the recommended crawler config",type:"danger",children:(0,a.jsxs)(r.p,{children:["It is highly recommended to use our official ",(0,a.jsx)(r.a,{href:"https://docsearch.algolia.com/docs/templates/#docusaurus-v3-template",children:(0,a.jsx)(r.strong,{children:"Docusaurus v3 crawler configuration"})}),". We cannot support you if you choose a different crawler configuration."]})}),"\n",(0,a.jsxs)(r.admonition,{title:"When updating your crawler config",type:"warning",children:[(0,a.jsxs)(r.p,{children:["The crawler configuration contains a ",(0,a.jsx)(r.code,{children:"initialIndexSettings"}),", which will only be used to initialize your Algolia index if it does not exist yet."]}),(0,a.jsxs)(r.p,{children:["If you update your ",(0,a.jsx)(r.code,{children:"initialIndexSettings"})," crawler setting, it is possible to update the index manually through the interface, but ",(0,a.jsx)(r.a,{href:"https://github.com/facebook/docusaurus/issues/9200#issuecomment-1667338492",children:"the Algolia team recommends to delete your index and then restart a crawl"})," to fully reinitialize it with the new settings."]})]}),"\n",(0,a.jsx)(r.h3,{id:"connecting-algolia",children:"Connecting Algolia"}),"\n",(0,a.jsxs)(r.p,{children:["Docusaurus' own ",(0,a.jsx)(r.code,{children:"@docusaurus/preset-classic"})," supports Algolia DocSearch integration. If you use the classic preset, no additional installation is needed."]}),"\n",(0,a.jsxs)(s,{children:[(0,a.jsxs)("summary",{children:["Installation steps when not using ",(0,a.jsx)("code",{children:"@docusaurus/preset-classic"})]}),(0,a.jsxs)(r.ol,{children:["\n",(0,a.jsx)(r.li,{children:"Install the package:"}),"\n"]}),(0,a.jsxs)(i.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(c.Z,{value:"npm",children:(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-bash",children:"npm install --save @docusaurus/theme-search-algolia\n"})})}),(0,a.jsx)(c.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-bash",children:"yarn add @docusaurus/theme-search-algolia\n"})})}),(0,a.jsx)(c.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-bash",children:"pnpm add @docusaurus/theme-search-algolia\n"})})})]}),(0,a.jsxs)(r.ol,{start:"2",children:["\n",(0,a.jsxs)(r.li,{children:["Register the theme in ",(0,a.jsx)(r.code,{children:"docusaurus.config.js"}),":"]}),"\n"]}),(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n title: 'My site',\n // ...\n themes: ['@docusaurus/theme-search-algolia'],\n themeConfig: {\n // ...\n },\n};\n"})})]}),"\n",(0,a.jsxs)(r.p,{children:["Then, add an ",(0,a.jsx)(r.code,{children:"algolia"})," field in your ",(0,a.jsx)(r.code,{children:"themeConfig"}),". ",(0,a.jsx)(r.strong,{children:(0,a.jsx)(r.a,{href:"https://docsearch.algolia.com/apply/",children:"Apply for DocSearch"})})," to get your Algolia index and API key."]}),"\n",(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n // ...\n themeConfig: {\n // ...\n // highlight-start\n algolia: {\n // The application ID provided by Algolia\n appId: 'YOUR_APP_ID',\n\n // Public API key: it is safe to commit it\n apiKey: 'YOUR_SEARCH_API_KEY',\n\n indexName: 'YOUR_INDEX_NAME',\n\n // Optional: see doc section below\n contextualSearch: true,\n\n // Optional: Specify domains where the navigation should occur through window.location instead on history.push. Useful when our Algolia config crawls multiple documentation sites and we want to navigate with window.location.href to them.\n externalUrlRegex: 'external\\\\.com|domain\\\\.com',\n\n // Optional: Replace parts of the item URLs from Algolia. Useful when using the same search index for multiple deployments using a different baseUrl. You can use regexp or string in the `from` param. For example: localhost:3000 vs myCompany.com/docs\n replaceSearchResultPathname: {\n from: '/docs/', // or as RegExp: /\\/docs\\//\n to: '/',\n },\n\n // Optional: Algolia search parameters\n searchParameters: {},\n\n // Optional: path for search page that enabled by default (`false` to disable it)\n searchPagePath: 'search',\n\n // Optional: whether the insights feature is enabled or not on Docsearch (`false` by default)\n insights: false,\n\n //... other Algolia params\n },\n // highlight-end\n },\n};\n"})}),"\n",(0,a.jsxs)(r.admonition,{type:"info",children:[(0,a.jsxs)(r.p,{children:["The ",(0,a.jsx)(r.code,{children:"searchParameters"})," option used to be named ",(0,a.jsx)(r.code,{children:"algoliaOptions"})," in Docusaurus v1."]}),(0,a.jsxs)(r.p,{children:["Refer to its ",(0,a.jsx)(r.a,{href:"https://docsearch.algolia.com/docs/api#searchparameters",children:"official DocSearch documentation"})," for possible values."]})]}),"\n",(0,a.jsxs)(r.admonition,{type:"warning",children:[(0,a.jsx)(r.p,{children:"The search feature will not work reliably until Algolia crawls your site."}),(0,a.jsxs)(r.p,{children:["If search doesn't work after any significant change, please use the Algolia dashboard to ",(0,a.jsx)(r.strong,{children:"trigger a new crawl"}),"."]})]}),"\n",(0,a.jsx)(r.h3,{id:"contextual-search",children:"Contextual search"}),"\n",(0,a.jsxs)(r.p,{children:["Contextual search is ",(0,a.jsx)(r.strong,{children:"enabled by default"}),"."]}),"\n",(0,a.jsxs)(r.p,{children:["It ensures that search results are ",(0,a.jsx)(r.strong,{children:"relevant to the current language and version"}),"."]}),"\n",(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n // ...\n themeConfig: {\n // ...\n // highlight-start\n algolia: {\n contextualSearch: true,\n },\n // highlight-end\n },\n};\n"})}),"\n",(0,a.jsxs)(r.p,{children:["Let's consider you have 2 docs versions (",(0,a.jsx)(r.strong,{children:"v1"})," and ",(0,a.jsx)(r.strong,{children:"v2"}),") and 2 languages (",(0,a.jsx)(r.code,{children:"en"})," and ",(0,a.jsx)(r.code,{children:"fr"}),")."]}),"\n",(0,a.jsx)(r.p,{children:"When browsing v2 docs, it would be odd to return search results for the v1 documentation. Sometimes v1 and v2 docs are quite similar, and you would end up with duplicate search results for the same query (one result per version)."}),"\n",(0,a.jsx)(r.p,{children:"Similarly, when browsing the French site, it would be odd to return search results for the English docs."}),"\n",(0,a.jsx)(r.p,{children:"To solve this problem, the contextual search feature understands that you are browsing a specific docs version and language, and will create the search query filters dynamically."}),"\n",(0,a.jsxs)(r.ul,{children:["\n",(0,a.jsxs)(r.li,{children:["on ",(0,a.jsx)(r.code,{children:"/en/docs/v1/myDoc"}),", search results will only include ",(0,a.jsx)(r.strong,{children:"English"})," results for the ",(0,a.jsx)(r.strong,{children:"v1"})," docs (+ other unversioned pages)"]}),"\n",(0,a.jsxs)(r.li,{children:["on ",(0,a.jsx)(r.code,{children:"/fr/docs/v2/myDoc"}),", search results will only include ",(0,a.jsx)(r.strong,{children:"French"})," results for the ",(0,a.jsx)(r.strong,{children:"v2"})," docs (+ other unversioned pages)"]}),"\n"]}),"\n",(0,a.jsxs)(r.admonition,{type:"info",children:[(0,a.jsxs)(r.p,{children:["When using ",(0,a.jsx)(r.code,{children:"contextualSearch: true"})," (default), the contextual facet filters will be merged with the ones provided with ",(0,a.jsx)(r.code,{children:"algolia.searchParameters.facetFilters"})," ."]}),(0,a.jsxs)(r.p,{children:["For specific needs, you can disable ",(0,a.jsx)(r.code,{children:"contextualSearch"})," and define your own ",(0,a.jsx)(r.code,{children:"facetFilters"}),":"]}),(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n // ...\n themeConfig: {\n // ...\n // highlight-start\n algolia: {\n contextualSearch: false,\n searchParameters: {\n facetFilters: ['language:en', ['filter1', 'filter2'], 'filter3'],\n },\n },\n // highlight-end\n },\n};\n"})}),(0,a.jsxs)(r.p,{children:["Refer to the relevant ",(0,a.jsx)(r.a,{href:"https://www.algolia.com/doc/guides/managing-results/refine-results/faceting/",children:"Algolia faceting documentation"}),"."]})]}),"\n",(0,a.jsx)(r.admonition,{title:"Contextual search doesn't work?",type:"warning",children:(0,a.jsxs)(r.p,{children:["If you only get search results when Contextual Search is disabled, this is very likely because of an ",(0,a.jsx)(r.a,{href:"#algolia-no-search-results",children:"index configuration issue"}),"."]})}),"\n",(0,a.jsx)(r.h3,{id:"styling-your-algolia-search",children:"Styling your Algolia search"}),"\n",(0,a.jsx)(r.p,{children:"By default, DocSearch comes with a fine-tuned theme that was designed for accessibility, making sure that colors and contrasts respect standards."}),"\n",(0,a.jsxs)(r.p,{children:["Still, you can reuse the ",(0,a.jsx)(r.a,{href:"/docs/styling-layout#styling-your-site-with-infima",children:"Infima CSS variables"})," from Docusaurus to style DocSearch by editing the ",(0,a.jsx)(r.code,{children:"/src/css/custom.css"})," file."]}),"\n",(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-css",metastring:'title="/src/css/custom.css"',children:"[data-theme='light'] .DocSearch {\n /* --docsearch-primary-color: var(--ifm-color-primary); */\n /* --docsearch-text-color: var(--ifm-font-color-base); */\n --docsearch-muted-color: var(--ifm-color-secondary-darkest);\n --docsearch-container-background: rgba(94, 100, 112, 0.7);\n /* Modal */\n --docsearch-modal-background: var(--ifm-color-secondary-lighter);\n /* Search box */\n --docsearch-searchbox-background: var(--ifm-color-secondary);\n --docsearch-searchbox-focus-background: var(--ifm-color-white);\n /* Hit */\n --docsearch-hit-color: var(--ifm-font-color-base);\n --docsearch-hit-active-color: var(--ifm-color-white);\n --docsearch-hit-background: var(--ifm-color-white);\n /* Footer */\n --docsearch-footer-background: var(--ifm-color-white);\n}\n\n[data-theme='dark'] .DocSearch {\n --docsearch-text-color: var(--ifm-font-color-base);\n --docsearch-muted-color: var(--ifm-color-secondary-darkest);\n --docsearch-container-background: rgba(47, 55, 69, 0.7);\n /* Modal */\n --docsearch-modal-background: var(--ifm-background-color);\n /* Search box */\n --docsearch-searchbox-background: var(--ifm-background-color);\n --docsearch-searchbox-focus-background: var(--ifm-color-black);\n /* Hit */\n --docsearch-hit-color: var(--ifm-font-color-base);\n --docsearch-hit-active-color: var(--ifm-color-white);\n --docsearch-hit-background: var(--ifm-color-emphasis-100);\n /* Footer */\n --docsearch-footer-background: var(--ifm-background-surface-color);\n --docsearch-key-gradient: linear-gradient(\n -26.5deg,\n var(--ifm-color-emphasis-200) 0%,\n var(--ifm-color-emphasis-100) 100%\n );\n}\n"})}),"\n",(0,a.jsx)(r.h3,{id:"customizing-the-algolia-search-behavior",children:"Customizing the Algolia search behavior"}),"\n",(0,a.jsxs)(r.p,{children:["Algolia DocSearch supports a ",(0,a.jsx)(r.a,{href:"https://docsearch.algolia.com/docs/api/",children:"list of options"})," that you can pass to the ",(0,a.jsx)(r.code,{children:"algolia"})," field in the ",(0,a.jsx)(r.code,{children:"docusaurus.config.js"})," file."]}),"\n",(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n themeConfig: {\n // ...\n algolia: {\n apiKey: 'YOUR_API_KEY',\n indexName: 'YOUR_INDEX_NAME',\n // Options...\n },\n },\n};\n"})}),"\n",(0,a.jsx)(r.h3,{id:"editing-the-algolia-search-component",children:"Editing the Algolia search component"}),"\n",(0,a.jsxs)(r.p,{children:["If you prefer to edit the Algolia search React component, ",(0,a.jsx)(r.a,{href:"/docs/swizzling",children:"swizzle"})," the ",(0,a.jsx)(r.code,{children:"SearchBar"})," component in ",(0,a.jsx)(r.code,{children:"@docusaurus/theme-search-algolia"}),":"]}),"\n",(0,a.jsxs)(i.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(c.Z,{value:"npm",children:(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-bash",children:"npm run swizzle @docusaurus/theme-search-algolia SearchBar\n"})})}),(0,a.jsx)(c.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-bash",children:"yarn swizzle @docusaurus/theme-search-algolia SearchBar\n"})})}),(0,a.jsx)(c.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-bash",children:"pnpm run swizzle @docusaurus/theme-search-algolia SearchBar\n"})})})]}),"\n",(0,a.jsx)(r.h3,{id:"algolia-troubleshooting",children:"Troubleshooting"}),"\n",(0,a.jsx)(r.p,{children:"Here are the most common issues Docusaurus users face when using Algolia DocSearch."}),"\n",(0,a.jsx)(r.h4,{id:"algolia-no-search-results",children:"No Search Results"}),"\n",(0,a.jsxs)(r.p,{children:["Seeing no search results is usually related to an ",(0,a.jsx)(r.strong,{children:"index configuration problem"}),"."]}),"\n",(0,a.jsxs)(s,{children:[(0,a.jsx)("summary",{children:"How to check if I have a config problem?"}),(0,a.jsxs)(r.p,{children:["Docusaurus uses ",(0,a.jsx)(r.a,{href:"https://www.algolia.com/doc/guides/managing-results/refine-results/faceting/",children:"Algolia faceting"})," for its ",(0,a.jsx)(r.a,{href:"#contextual-search",children:"Contextual Search"})," feature, to create dynamic queries such as:"]}),(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-json",children:'[\n "language:en",\n [\n "docusaurus_tag:default",\n "docusaurus_tag:docs-default-3.2.1",\n "docusaurus_tag:docs-community-current",\n "docusaurus_tag:docs-docs-tests-current"\n ]\n]\n'})}),(0,a.jsxs)(r.p,{children:["On the Algolia UI, your index should allow to create facet queries on fields ",(0,a.jsx)(r.code,{children:"docusaurus_tag"}),", ",(0,a.jsx)(r.code,{children:"language"}),", ",(0,a.jsx)(r.code,{children:"lang"}),", ",(0,a.jsx)(r.code,{children:"version"}),", ",(0,a.jsx)(r.code,{children:"type"}),", as shown in the screenshot below:"]}),(0,a.jsx)(r.p,{children:(0,a.jsx)(r.img,{alt:"Algolia index showing appropriate faceting fields",src:n(46877).Z+"",width:"1072",height:"1761"})}),(0,a.jsxs)(r.p,{children:["Alternatively, if you disable ",(0,a.jsx)(r.a,{href:"#contextual-search",children:"Contextual Search"})," with ",(0,a.jsx)(r.code,{children:"{contextualSearch: false}"})," (which we don't particularly recommend), Docusaurus will not use facet queries, and you should start seeing results."]})]}),"\n",(0,a.jsx)(r.admonition,{title:"Use the recommended configuration",type:"danger",children:(0,a.jsxs)(r.p,{children:["We ",(0,a.jsx)(r.a,{href:"#algolia-index-configuration",children:"recommend a specific crawler configuration"})," for a good reason. We cannot support you if you choose to use a different configuration."]})}),"\n",(0,a.jsx)(r.p,{children:"You can fix index configuration problems by following those steps:"}),"\n",(0,a.jsxs)(r.ol,{children:["\n",(0,a.jsxs)(r.li,{children:["Use the ",(0,a.jsx)(r.a,{href:"#algolia-index-configuration",children:"recommend crawler configuration"})]}),"\n",(0,a.jsx)(r.li,{children:"Delete your index through the UI"}),"\n",(0,a.jsx)(r.li,{children:"Trigger a new crawl through the UI"}),"\n",(0,a.jsxs)(r.li,{children:["Check your index is recreated with the appropriate faceting fields: ",(0,a.jsx)(r.code,{children:"docusaurus_tag"}),", ",(0,a.jsx)(r.code,{children:"language"}),", ",(0,a.jsx)(r.code,{children:"lang"}),", ",(0,a.jsx)(r.code,{children:"version"}),", ",(0,a.jsx)(r.code,{children:"type"})]}),"\n",(0,a.jsxs)(r.li,{children:["See that you now get search results, even with ",(0,a.jsx)(r.a,{href:"#contextual-search",children:"Contextual Search"})," enabled"]}),"\n"]}),"\n",(0,a.jsx)(r.h3,{id:"algolia-support",children:"Support"}),"\n",(0,a.jsx)(r.p,{children:"The Algolia DocSearch team can help you figure out search problems on your site."}),"\n",(0,a.jsxs)(r.p,{children:["You can reach out to Algolia via ",(0,a.jsx)(r.a,{href:"https://algolia.com/support",children:"their support page"})," or on ",(0,a.jsx)(r.a,{href:"https://discord.gg/wr2m5j948P",children:"Discord"}),"."]}),"\n",(0,a.jsxs)(r.p,{children:["Docusaurus also has an ",(0,a.jsx)(r.code,{children:"#algolia"})," channel on ",(0,a.jsx)(r.a,{href:"https://discordapp.com/invite/docusaurus",children:"Discord"}),"."]}),"\n",(0,a.jsx)(r.h2,{id:"using-typesense-docsearch",children:"\uD83D\uDC65 Using Typesense DocSearch"}),"\n",(0,a.jsxs)(r.p,{children:[(0,a.jsx)(r.a,{href:"https://typesense.org",children:"Typesense"})," DocSearch works similar to Algolia DocSearch, except that your website is indexed into a Typesense search cluster."]}),"\n",(0,a.jsxs)(r.p,{children:["Typesense is an ",(0,a.jsx)(r.a,{href:"https://github.com/typesense/typesense",children:"open source"})," instant-search engine that you can either:"]}),"\n",(0,a.jsxs)(r.ul,{children:["\n",(0,a.jsxs)(r.li,{children:[(0,a.jsx)(r.a,{href:"https://typesense.org/docs/guide/install-typesense.html#option-2-local-machine-self-hosting",children:"Self-Host"})," on your own servers or"]}),"\n",(0,a.jsxs)(r.li,{children:["Use the Managed ",(0,a.jsx)(r.a,{href:"https://cloud.typesense.org",children:"Typesense Cloud"})," service."]}),"\n"]}),"\n",(0,a.jsx)(r.p,{children:"Similar to Algolia DocSearch, there are two components:"}),"\n",(0,a.jsxs)(r.ul,{children:["\n",(0,a.jsxs)(r.li,{children:[(0,a.jsx)(r.a,{href:"https://github.com/typesense/typesense-docsearch-scraper",children:"typesense-docsearch-scraper"})," - which scrapes your website and indexes the data in your Typesense cluster."]}),"\n",(0,a.jsxs)(r.li,{children:[(0,a.jsx)(r.a,{href:"https://github.com/typesense/docusaurus-theme-search-typesense",children:"docusaurus-theme-search-typesense"})," - a search bar UI component to add to your website."]}),"\n"]}),"\n",(0,a.jsxs)(r.p,{children:["Read a step-by-step walk-through of how to ",(0,a.jsx)(r.a,{href:"https://typesense.org/docs/guide/docsearch.html#step-1-set-up-docsearch-scraper",children:"run typesense-docsearch-scraper here"})," and how to ",(0,a.jsx)(r.a,{href:"https://typesense.org/docs/guide/docsearch.html#option-a-docusaurus-powered-sites",children:"install the Search Bar in your Docusaurus Site here"}),"."]}),"\n",(0,a.jsx)(r.h2,{id:"using-local-search",children:"\uD83D\uDC65 Using Local Search"}),"\n",(0,a.jsx)(r.p,{children:"You can use a local search plugin for websites where the search index is small and can be downloaded to your users' browsers when they visit your website."}),"\n",(0,a.jsxs)(r.p,{children:["You'll find a list of community-supported ",(0,a.jsx)(r.a,{href:"https://docusaurus.io/community/resources#search",children:"local search plugins listed here"}),"."]}),"\n",(0,a.jsx)(r.h2,{id:"using-your-own-search",children:"\uD83D\uDC65 Using your own search"}),"\n",(0,a.jsxs)(r.p,{children:["To use your own search, swizzle the ",(0,a.jsx)(r.code,{children:"SearchBar"})," component in ",(0,a.jsx)(r.code,{children:"@docusaurus/theme-classic"})]}),"\n",(0,a.jsxs)(i.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(c.Z,{value:"npm",children:(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-bash",children:"npm run swizzle @docusaurus/theme-classic SearchBar\n"})})}),(0,a.jsx)(c.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-bash",children:"yarn swizzle @docusaurus/theme-classic SearchBar\n"})})}),(0,a.jsx)(c.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-bash",children:"pnpm run swizzle @docusaurus/theme-classic SearchBar\n"})})})]}),"\n",(0,a.jsxs)(r.p,{children:["This will create an ",(0,a.jsx)(r.code,{children:"src/theme/SearchBar"})," file in your project folder. Restart your dev server and edit the component, you will see that Docusaurus uses your own ",(0,a.jsx)(r.code,{children:"SearchBar"})," component now."]}),"\n",(0,a.jsxs)(r.p,{children:[(0,a.jsx)(r.strong,{children:"Notes"}),": You can alternatively ",(0,a.jsx)(r.a,{href:"#editing-the-algolia-search-component",children:"swizzle from Algolia SearchBar"})," and create your own search component from there."]})]})}function g(e={}){let{wrapper:r}={...(0,o.a)(),...e.components};return r?(0,a.jsx)(r,{...e,children:(0,a.jsx)(u,{...e})}):u(e)}},58636:function(e,r,n){n.d(r,{Z:()=>o});var s=n(85893);n(67294);var a=n(90496);function o(e){let{children:r,hidden:n,className:o}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,a.Z)("tabItem_pnkT",o),hidden:n,children:r})}},15398:function(e,r,n){n.d(r,{Z:()=>j});var s=n(85893),a=n(67294),o=n(90496),i=n(54947),c=n(3620),l=n(844),t=n(97486),h=n(32263),d=n(16971);function u(e){return a.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||a.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.`)})?.filter(Boolean)??[]}function g(e){let{value:r,tabValues:n}=e;return n.some(e=>e.value===r)}var p=n(71607);function x(e){let{className:r,block:n,selectedValue:a,selectValue:c,tabValues:l}=e,t=[],{blockElementScrollPositionUntilNextRender:h}=(0,i.o5)(),d=e=>{let r=e.currentTarget,n=l[t.indexOf(r)].value;n!==a&&(h(r),c(n))},u=e=>{let r=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{let n=t.indexOf(e.currentTarget)+1;r=t[n]??t[0];break}case"ArrowLeft":{let n=t.indexOf(e.currentTarget)-1;r=t[n]??t[t.length-1]}}r?.focus()};return(0,s.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.Z)("tabs",{"tabs--block":n},r),children:l.map(e=>{let{value:r,label:n,attributes:i}=e;return(0,s.jsx)("li",{role:"tab",tabIndex:a===r?0:-1,"aria-selected":a===r,ref:e=>{t.push(e)},onKeyDown:u,onClick:d,...i,className:(0,o.Z)("tabs__item","tabItem_AQgk",i?.className,{"tabs__item--active":a===r}),children:n??r},r)})})}function f(e){let{lazy:r,children:n,selectedValue:i}=e,c=(Array.isArray(n)?n:[n]).filter(Boolean);if(r){let e=c.find(e=>e.props.value===i);return e?(0,a.cloneElement)(e,{className:(0,o.Z)("margin-top--md",e.props.className)}):null}return(0,s.jsx)("div",{className:"margin-top--md",children:c.map((e,r)=>(0,a.cloneElement)(e,{key:r,hidden:e.props.value!==i}))})}function m(e){let r=function(e){let{defaultValue:r,queryString:n=!1,groupId:s}=e,o=function(e){let{values:r,children:n}=e;return(0,a.useMemo)(()=>{let e=r??u(n).map(e=>{let{props:{value:r,label:n,attributes:s,default:a}}=e;return{value:r,label:n,attributes:s,default:a}});return!function(e){let r=(0,h.lx)(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,p]=(0,a.useState)(()=>(function(e){let{defaultValue:r,tabValues:n}=e;if(0===n.length)throw Error("Docusaurus error: the component requires at least one children component");if(r){if(!g({value:r,tabValues:n}))throw Error(`Docusaurus error: The has a defaultValue "${r}" 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 r}let s=n.find(e=>e.default)??n[0];if(!s)throw Error("Unexpected error: 0 tabValues");return s.value})({defaultValue:r,tabValues:o})),[x,f]=function(e){let{queryString:r=!1,groupId:n}=e,s=(0,c.k6)(),o=function(e){let{queryString:r=!1,groupId:n}=e;if("string"==typeof r)return r;if(!1===r)return null;if(!0===r&&!n)throw Error('Docusaurus error: The