diff --git a/assets/css/styles.1573ddad.css b/assets/css/styles.1573ddad.css
deleted file mode 100644
index 65f3f83cd0..0000000000
--- a/assets/css/styles.1573ddad.css
+++ /dev/null
@@ -1 +0,0 @@
-:root{--ifm-color-scheme:light;--ifm-dark-value:10%;--ifm-darker-value:15%;--ifm-darkest-value:30%;--ifm-light-value:15%;--ifm-lighter-value:30%;--ifm-lightest-value:50%;--ifm-contrast-background-value:90%;--ifm-contrast-foreground-value:70%;--ifm-contrast-background-dark-value:70%;--ifm-contrast-foreground-dark-value:90%;--ifm-color-primary:#3578e5;--ifm-color-secondary:#ebedf0;--ifm-color-success:#00a400;--ifm-color-info:#54c7ec;--ifm-color-warning:#ffba00;--ifm-color-danger:#fa383e;--ifm-color-primary-dark:#306cce;--ifm-color-primary-darker:#2d66c3;--ifm-color-primary-darkest:#2554a0;--ifm-color-primary-light:#538ce9;--ifm-color-primary-lighter:#72a1ed;--ifm-color-primary-lightest:#9abcf2;--ifm-color-primary-contrast-background:#ebf2fc;--ifm-color-primary-contrast-foreground:#102445;--ifm-color-secondary-dark:#d4d5d8;--ifm-color-secondary-darker:#c8c9cc;--ifm-color-secondary-darkest:#a4a6a8;--ifm-color-secondary-light:#eef0f2;--ifm-color-secondary-lighter:#f1f2f5;--ifm-color-secondary-lightest:#f5f6f8;--ifm-color-secondary-contrast-background:#fdfdfe;--ifm-color-secondary-contrast-foreground:#474748;--ifm-color-success-dark:#009400;--ifm-color-success-darker:#008b00;--ifm-color-success-darkest:#007300;--ifm-color-success-light:#26b226;--ifm-color-success-lighter:#4dbf4d;--ifm-color-success-lightest:#80d280;--ifm-color-success-contrast-background:#e6f6e6;--ifm-color-success-contrast-foreground:#003100;--ifm-color-info-dark:#4cb3d4;--ifm-color-info-darker:#47a9c9;--ifm-color-info-darkest:#3b8ba5;--ifm-color-info-light:#6ecfef;--ifm-color-info-lighter:#87d8f2;--ifm-color-info-lightest:#aae3f6;--ifm-color-info-contrast-background:#eef9fd;--ifm-color-info-contrast-foreground:#193c47;--ifm-color-warning-dark:#e6a700;--ifm-color-warning-darker:#d99e00;--ifm-color-warning-darkest:#b38200;--ifm-color-warning-light:#ffc426;--ifm-color-warning-lighter:#ffcf4d;--ifm-color-warning-lightest:#ffdd80;--ifm-color-warning-contrast-background:#fff8e6;--ifm-color-warning-contrast-foreground:#4d3800;--ifm-color-danger-dark:#e13238;--ifm-color-danger-darker:#d53035;--ifm-color-danger-darkest:#af272b;--ifm-color-danger-light:#fb565b;--ifm-color-danger-lighter:#fb7478;--ifm-color-danger-lightest:#fd9c9f;--ifm-color-danger-contrast-background:#ffebec;--ifm-color-danger-contrast-foreground:#4b1113;--ifm-color-white:#fff;--ifm-color-black:#000;--ifm-color-gray-0:var(--ifm-color-white);--ifm-color-gray-100:#f5f6f7;--ifm-color-gray-200:#ebedf0;--ifm-color-gray-300:#dadde1;--ifm-color-gray-400:#ccd0d5;--ifm-color-gray-500:#bec3c9;--ifm-color-gray-600:#8d949e;--ifm-color-gray-700:#606770;--ifm-color-gray-800:#444950;--ifm-color-gray-900:#1c1e21;--ifm-color-gray-1000:var(--ifm-color-black);--ifm-color-emphasis-0:var(--ifm-color-gray-0);--ifm-color-emphasis-100:var(--ifm-color-gray-100);--ifm-color-emphasis-200:var(--ifm-color-gray-200);--ifm-color-emphasis-300:var(--ifm-color-gray-300);--ifm-color-emphasis-400:var(--ifm-color-gray-400);--ifm-color-emphasis-500:var(--ifm-color-gray-500);--ifm-color-emphasis-600:var(--ifm-color-gray-600);--ifm-color-emphasis-700:var(--ifm-color-gray-700);--ifm-color-emphasis-800:var(--ifm-color-gray-800);--ifm-color-emphasis-900:var(--ifm-color-gray-900);--ifm-color-emphasis-1000:var(--ifm-color-gray-1000);--ifm-color-content:var(--ifm-color-emphasis-900);--ifm-color-content-inverse:var(--ifm-color-emphasis-0);--ifm-color-content-secondary:#525860;--ifm-background-color:transparent;--ifm-background-surface-color:var(--ifm-color-content-inverse);--ifm-global-border-width:1px;--ifm-global-radius:.4rem;--ifm-hover-overlay:#0000000d;--ifm-font-color-base:var(--ifm-color-content);--ifm-font-color-base-inverse:var(--ifm-color-content-inverse);--ifm-font-color-secondary:var(--ifm-color-content-secondary);--ifm-font-family-base:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--ifm-font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--ifm-font-size-base:100%;--ifm-font-weight-light:300;--ifm-font-weight-normal:400;--ifm-font-weight-semibold:500;--ifm-font-weight-bold:700;--ifm-font-weight-base:var(--ifm-font-weight-normal);--ifm-line-height-base:1.65;--ifm-global-spacing:1rem;--ifm-spacing-vertical:var(--ifm-global-spacing);--ifm-spacing-horizontal:var(--ifm-global-spacing);--ifm-transition-fast:.2s;--ifm-transition-slow:.4s;--ifm-transition-timing-default:cubic-bezier(.08,.52,.52,1);--ifm-global-shadow-lw:0 1px 2px 0 #0000001a;--ifm-global-shadow-md:0 5px 40px #0003;--ifm-global-shadow-tl:0 12px 28px 0 #0003,0 2px 4px 0 #0000001a;--ifm-z-index-dropdown:100;--ifm-z-index-fixed:200;--ifm-z-index-overlay:400;--ifm-container-width:1140px;--ifm-container-width-xl:1320px;--ifm-code-background:#f6f7f8;--ifm-code-border-radius:var(--ifm-global-radius);--ifm-code-font-size:90%;--ifm-code-padding-horizontal:.1rem;--ifm-code-padding-vertical:.1rem;--ifm-pre-background:var(--ifm-code-background);--ifm-pre-border-radius:var(--ifm-code-border-radius);--ifm-pre-color:inherit;--ifm-pre-line-height:1.45;--ifm-pre-padding:1rem;--ifm-heading-color:inherit;--ifm-heading-margin-top:0;--ifm-heading-margin-bottom:var(--ifm-spacing-vertical);--ifm-heading-font-family:var(--ifm-font-family-base);--ifm-heading-font-weight:var(--ifm-font-weight-bold);--ifm-heading-line-height:1.25;--ifm-h1-font-size:2rem;--ifm-h2-font-size:1.5rem;--ifm-h3-font-size:1.25rem;--ifm-h4-font-size:1rem;--ifm-h5-font-size:.875rem;--ifm-h6-font-size:.85rem;--ifm-image-alignment-padding:1.25rem;--ifm-leading-desktop:1.25;--ifm-leading:calc(var(--ifm-leading-desktop)*1rem);--ifm-list-left-padding:2rem;--ifm-list-margin:1rem;--ifm-list-item-margin:.25rem;--ifm-list-paragraph-margin:1rem;--ifm-table-cell-padding:.75rem;--ifm-table-background:transparent;--ifm-table-stripe-background:#00000008;--ifm-table-border-width:1px;--ifm-table-border-color:var(--ifm-color-emphasis-300);--ifm-table-head-background:inherit;--ifm-table-head-color:inherit;--ifm-table-head-font-weight:var(--ifm-font-weight-bold);--ifm-table-cell-color:inherit;--ifm-link-color:var(--ifm-color-primary);--ifm-link-decoration:none;--ifm-link-hover-color:var(--ifm-link-color);--ifm-link-hover-decoration:underline;--ifm-paragraph-margin-bottom:var(--ifm-leading);--ifm-blockquote-font-size:var(--ifm-font-size-base);--ifm-blockquote-border-left-width:2px;--ifm-blockquote-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-blockquote-padding-vertical:0;--ifm-blockquote-shadow:none;--ifm-blockquote-color:var(--ifm-color-emphasis-800);--ifm-blockquote-border-color:var(--ifm-color-emphasis-300);--ifm-hr-background-color:var(--ifm-color-emphasis-500);--ifm-hr-height:1px;--ifm-hr-margin-vertical:1.5rem;--ifm-scrollbar-size:7px;--ifm-scrollbar-track-background-color:#f1f1f1;--ifm-scrollbar-thumb-background-color:silver;--ifm-scrollbar-thumb-hover-background-color:#a7a7a7;--ifm-alert-background-color:inherit;--ifm-alert-border-color:inherit;--ifm-alert-border-radius:var(--ifm-global-radius);--ifm-alert-border-width:0px;--ifm-alert-border-left-width:5px;--ifm-alert-color:var(--ifm-font-color-base);--ifm-alert-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-alert-padding-vertical:var(--ifm-spacing-vertical);--ifm-alert-shadow:var(--ifm-global-shadow-lw);--ifm-avatar-intro-margin:1rem;--ifm-avatar-intro-alignment:inherit;--ifm-avatar-photo-size:3rem;--ifm-badge-background-color:inherit;--ifm-badge-border-color:inherit;--ifm-badge-border-radius:var(--ifm-global-radius);--ifm-badge-border-width:var(--ifm-global-border-width);--ifm-badge-color:var(--ifm-color-white);--ifm-badge-padding-horizontal:calc(var(--ifm-spacing-horizontal)*.5);--ifm-badge-padding-vertical:calc(var(--ifm-spacing-vertical)*.25);--ifm-breadcrumb-border-radius:1.5rem;--ifm-breadcrumb-spacing:.5rem;--ifm-breadcrumb-color-active:var(--ifm-color-primary);--ifm-breadcrumb-item-background-active:var(--ifm-hover-overlay);--ifm-breadcrumb-padding-horizontal:.8rem;--ifm-breadcrumb-padding-vertical:.4rem;--ifm-breadcrumb-size-multiplier:1;--ifm-breadcrumb-separator:url("data:image/svg+xml;utf8,");--ifm-breadcrumb-separator-filter:none;--ifm-breadcrumb-separator-size:.5rem;--ifm-breadcrumb-separator-size-multiplier:1.25;--ifm-button-background-color:inherit;--ifm-button-border-color:var(--ifm-button-background-color);--ifm-button-border-width:var(--ifm-global-border-width);--ifm-button-color:var(--ifm-font-color-base-inverse);--ifm-button-font-weight:var(--ifm-font-weight-bold);--ifm-button-padding-horizontal:1.5rem;--ifm-button-padding-vertical:.375rem;--ifm-button-size-multiplier:1;--ifm-button-transition-duration:var(--ifm-transition-fast);--ifm-button-border-radius:calc(var(--ifm-global-radius)*var(--ifm-button-size-multiplier));--ifm-button-group-spacing:2px;--ifm-card-background-color:var(--ifm-background-surface-color);--ifm-card-border-radius:calc(var(--ifm-global-radius)*2);--ifm-card-horizontal-spacing:var(--ifm-global-spacing);--ifm-card-vertical-spacing:var(--ifm-global-spacing);--ifm-toc-border-color:var(--ifm-color-emphasis-300);--ifm-toc-link-color:var(--ifm-color-content-secondary);--ifm-toc-padding-vertical:.5rem;--ifm-toc-padding-horizontal:.5rem;--ifm-dropdown-background-color:var(--ifm-background-surface-color);--ifm-dropdown-font-weight:var(--ifm-font-weight-semibold);--ifm-dropdown-link-color:var(--ifm-font-color-base);--ifm-dropdown-hover-background-color:var(--ifm-hover-overlay);--ifm-footer-background-color:var(--ifm-color-emphasis-100);--ifm-footer-color:inherit;--ifm-footer-link-color:var(--ifm-color-emphasis-700);--ifm-footer-link-hover-color:var(--ifm-color-primary);--ifm-footer-link-horizontal-spacing:.5rem;--ifm-footer-padding-horizontal:calc(var(--ifm-spacing-horizontal)*2);--ifm-footer-padding-vertical:calc(var(--ifm-spacing-vertical)*2);--ifm-footer-title-color:inherit;--ifm-footer-logo-max-width:min(30rem,90vw);--ifm-hero-background-color:var(--ifm-background-surface-color);--ifm-hero-text-color:var(--ifm-color-emphasis-800);--ifm-menu-color:var(--ifm-color-emphasis-700);--ifm-menu-color-active:var(--ifm-color-primary);--ifm-menu-color-background-active:var(--ifm-hover-overlay);--ifm-menu-color-background-hover:var(--ifm-hover-overlay);--ifm-menu-link-padding-horizontal:.75rem;--ifm-menu-link-padding-vertical:.375rem;--ifm-menu-link-sublist-icon:url("data:image/svg+xml;utf8,");--ifm-menu-link-sublist-icon-filter:none;--ifm-navbar-background-color:var(--ifm-background-surface-color);--ifm-navbar-height:3.75rem;--ifm-navbar-item-padding-horizontal:.75rem;--ifm-navbar-item-padding-vertical:.25rem;--ifm-navbar-link-color:var(--ifm-font-color-base);--ifm-navbar-link-hover-color:var(--ifm-color-primary);--ifm-navbar-link-active-color:var(--ifm-link-color);--ifm-navbar-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-navbar-padding-vertical:calc(var(--ifm-spacing-vertical)*.5);--ifm-navbar-shadow:var(--ifm-global-shadow-lw);--ifm-navbar-search-input-background-color:var(--ifm-color-emphasis-200);--ifm-navbar-search-input-color:var(--ifm-color-emphasis-800);--ifm-navbar-search-input-placeholder-color:var(--ifm-color-emphasis-500);--ifm-navbar-search-input-icon:url("data:image/svg+xml;utf8,");--ifm-navbar-sidebar-width:83vw;--ifm-pagination-border-radius:var(--ifm-global-radius);--ifm-pagination-color-active:var(--ifm-color-primary);--ifm-pagination-font-size:1rem;--ifm-pagination-item-active-background:var(--ifm-hover-overlay);--ifm-pagination-page-spacing:.2em;--ifm-pagination-padding-horizontal:calc(var(--ifm-spacing-horizontal)*1);--ifm-pagination-padding-vertical:calc(var(--ifm-spacing-vertical)*.25);--ifm-pagination-nav-border-radius:var(--ifm-global-radius);--ifm-pagination-nav-color-hover:var(--ifm-color-primary);--ifm-pills-color-active:var(--ifm-color-primary);--ifm-pills-color-background-active:var(--ifm-hover-overlay);--ifm-pills-spacing:.125rem;--ifm-tabs-color:var(--ifm-font-color-secondary);--ifm-tabs-color-active:var(--ifm-color-primary);--ifm-tabs-color-active-border:var(--ifm-tabs-color-active);--ifm-tabs-padding-horizontal:1rem;--ifm-tabs-padding-vertical:1rem}*{box-sizing:border-box}html{background-color:var(--ifm-background-color);color:var(--ifm-font-color-base);color-scheme:var(--ifm-color-scheme);font:var(--ifm-font-size-base)/var(--ifm-line-height-base)var(--ifm-font-family-base);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;text-rendering:optimizelegibility;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{word-wrap:break-word;margin:0}iframe{color-scheme:normal;border:0}.container{max-width:var(--ifm-container-width);padding:0 var(--ifm-spacing-horizontal);width:100%;margin:0 auto}.container--fluid{max-width:inherit}.row{margin:0 calc(var(--ifm-spacing-horizontal)*-1);flex-wrap:wrap;display:flex}.row--no-gutters{margin-left:0;margin-right:0}.row--no-gutters>.col{padding-left:0;padding-right:0}.row--align-top{align-items:flex-start}.row--align-bottom{align-items:flex-end}.row--align-center{align-items:center}.row--align-stretch{align-items:stretch}.row--align-baseline{align-items:baseline}.col{--ifm-col-width:100%;max-width:var(--ifm-col-width);padding:0 var(--ifm-spacing-horizontal);flex:1 0;width:100%;margin-left:0}.col[class*=col--]{flex:0 0 var(--ifm-col-width)}.col--1{--ifm-col-width:calc(1/12*100%)}.col--offset-1{margin-left:8.33333%}.col--2{--ifm-col-width:calc(2/12*100%)}.col--offset-2{margin-left:16.6667%}.col--3{--ifm-col-width:calc(3/12*100%)}.col--offset-3{margin-left:25%}.col--4{--ifm-col-width:calc(4/12*100%)}.col--offset-4{margin-left:33.3333%}.col--5{--ifm-col-width:calc(5/12*100%)}.col--offset-5{margin-left:41.6667%}.col--6{--ifm-col-width:calc(6/12*100%)}.col--offset-6{margin-left:50%}.col--7{--ifm-col-width:calc(7/12*100%)}.col--offset-7{margin-left:58.3333%}.col--8{--ifm-col-width:calc(8/12*100%)}.col--offset-8{margin-left:66.6667%}.col--9{--ifm-col-width:calc(9/12*100%)}.col--offset-9{margin-left:75%}.col--10{--ifm-col-width:calc(10/12*100%)}.col--offset-10{margin-left:83.3333%}.col--11{--ifm-col-width:calc(11/12*100%)}.col--offset-11{margin-left:91.6667%}.col--12{--ifm-col-width:calc(12/12*100%)}.col--offset-12{margin-left:100%}.margin--none{margin:0!important}.margin-top--none{margin-top:0!important}.margin-left--none{margin-left:0!important}.margin-bottom--none{margin-bottom:0!important}.margin-right--none{margin-right:0!important}.margin-vert--none{margin-top:0!important;margin-bottom:0!important}.margin-horiz--none{margin-left:0!important;margin-right:0!important}.margin--xs{margin:.25rem!important}.margin-top--xs{margin-top:.25rem!important}.margin-left--xs{margin-left:.25rem!important}.margin-bottom--xs{margin-bottom:.25rem!important}.margin-right--xs{margin-right:.25rem!important}.margin-vert--xs{margin-top:.25rem!important;margin-bottom:.25rem!important}.margin-horiz--xs{margin-left:.25rem!important;margin-right:.25rem!important}.margin--sm{margin:.5rem!important}.margin-top--sm{margin-top:.5rem!important}.margin-left--sm{margin-left:.5rem!important}.margin-bottom--sm{margin-bottom:.5rem!important}.margin-right--sm{margin-right:.5rem!important}.margin-vert--sm{margin-top:.5rem!important;margin-bottom:.5rem!important}.margin-horiz--sm{margin-left:.5rem!important;margin-right:.5rem!important}.margin--md{margin:1rem!important}.margin-top--md{margin-top:1rem!important}.margin-left--md{margin-left:1rem!important}.margin-bottom--md{margin-bottom:1rem!important}.margin-right--md{margin-right:1rem!important}.margin-vert--md{margin-top:1rem!important;margin-bottom:1rem!important}.margin-horiz--md{margin-left:1rem!important;margin-right:1rem!important}.margin--lg{margin:2rem!important}.margin-top--lg{margin-top:2rem!important}.margin-left--lg{margin-left:2rem!important}.margin-bottom--lg{margin-bottom:2rem!important}.margin-right--lg{margin-right:2rem!important}.margin-vert--lg{margin-top:2rem!important;margin-bottom:2rem!important}.margin-horiz--lg{margin-left:2rem!important;margin-right:2rem!important}.margin--xl{margin:5rem!important}.margin-top--xl{margin-top:5rem!important}.margin-left--xl{margin-left:5rem!important}.margin-bottom--xl{margin-bottom:5rem!important}.margin-right--xl{margin-right:5rem!important}.margin-vert--xl{margin-top:5rem!important;margin-bottom:5rem!important}.margin-horiz--xl{margin-left:5rem!important;margin-right:5rem!important}.padding--none{padding:0!important}.padding-top--none{padding-top:0!important}.padding-left--none{padding-left:0!important}.padding-bottom--none{padding-bottom:0!important}.padding-right--none{padding-right:0!important}.padding-vert--none{padding-top:0!important;padding-bottom:0!important}.padding-horiz--none{padding-left:0!important;padding-right:0!important}.padding--xs{padding:.25rem!important}.padding-top--xs{padding-top:.25rem!important}.padding-left--xs{padding-left:.25rem!important}.padding-bottom--xs{padding-bottom:.25rem!important}.padding-right--xs{padding-right:.25rem!important}.padding-vert--xs{padding-top:.25rem!important;padding-bottom:.25rem!important}.padding-horiz--xs{padding-left:.25rem!important;padding-right:.25rem!important}.padding--sm{padding:.5rem!important}.padding-top--sm{padding-top:.5rem!important}.padding-left--sm{padding-left:.5rem!important}.padding-bottom--sm{padding-bottom:.5rem!important}.padding-right--sm{padding-right:.5rem!important}.padding-vert--sm{padding-top:.5rem!important;padding-bottom:.5rem!important}.padding-horiz--sm{padding-left:.5rem!important;padding-right:.5rem!important}.padding--md{padding:1rem!important}.padding-top--md{padding-top:1rem!important}.padding-left--md{padding-left:1rem!important}.padding-bottom--md{padding-bottom:1rem!important}.padding-right--md{padding-right:1rem!important}.padding-vert--md{padding-top:1rem!important;padding-bottom:1rem!important}.padding-horiz--md{padding-left:1rem!important;padding-right:1rem!important}.padding--lg{padding:2rem!important}.padding-top--lg{padding-top:2rem!important}.padding-left--lg{padding-left:2rem!important}.padding-bottom--lg{padding-bottom:2rem!important}.padding-right--lg{padding-right:2rem!important}.padding-vert--lg{padding-top:2rem!important;padding-bottom:2rem!important}.padding-horiz--lg{padding-left:2rem!important;padding-right:2rem!important}.padding--xl{padding:5rem!important}.padding-top--xl{padding-top:5rem!important}.padding-left--xl{padding-left:5rem!important}.padding-bottom--xl{padding-bottom:5rem!important}.padding-right--xl{padding-right:5rem!important}.padding-vert--xl{padding-top:5rem!important;padding-bottom:5rem!important}.padding-horiz--xl{padding-left:5rem!important;padding-right:5rem!important}code{background-color:var(--ifm-code-background);border-radius:var(--ifm-code-border-radius);font-family:var(--ifm-font-family-monospace);font-size:var(--ifm-code-font-size);padding:var(--ifm-code-padding-vertical)var(--ifm-code-padding-horizontal);vertical-align:middle;border:.1rem solid #0000001a}a code{color:inherit}pre{background-color:var(--ifm-pre-background);border-radius:var(--ifm-pre-border-radius);color:var(--ifm-pre-color);font:var(--ifm-code-font-size)/var(--ifm-pre-line-height)var(--ifm-font-family-monospace);margin:0 0 var(--ifm-spacing-vertical);padding:var(--ifm-pre-padding);overflow:auto}pre code{font-size:100%;line-height:inherit;background-color:#0000;border:none;padding:0}kbd{background-color:var(--ifm-color-emphasis-0);border:1px solid var(--ifm-color-emphasis-400);box-shadow:inset 0 -1px 0 var(--ifm-color-emphasis-400);color:var(--ifm-color-emphasis-800);font:80% var(--ifm-font-family-monospace);border-radius:.2rem;padding:.15rem .3rem}h1,h2,h3,h4,h5,h6{color:var(--ifm-heading-color);font-family:var(--ifm-heading-font-family);font-weight:var(--ifm-heading-font-weight);line-height:var(--ifm-heading-line-height);margin:var(--ifm-heading-margin-top)0 var(--ifm-heading-margin-bottom)0}h1{font-size:var(--ifm-h1-font-size)}h2{font-size:var(--ifm-h2-font-size)}h3{font-size:var(--ifm-h3-font-size)}h4{font-size:var(--ifm-h4-font-size)}h5{font-size:var(--ifm-h5-font-size)}h6{font-size:var(--ifm-h6-font-size)}img{max-width:100%}img[align=right]{padding-left:var(--image-alignment-padding)}img[align=left]{padding-right:var(--image-alignment-padding)}.markdown{--ifm-h1-vertical-rhythm-top:3;--ifm-h2-vertical-rhythm-top:2;--ifm-h3-vertical-rhythm-top:1.5;--ifm-heading-vertical-rhythm-top:1.25;--ifm-h1-vertical-rhythm-bottom:1.25;--ifm-heading-vertical-rhythm-bottom:1}.markdown:before{content:"";display:table}.markdown:after{clear:both;content:"";display:table}.markdown>:last-child{margin-bottom:0!important}.markdown h1:first-child{--ifm-h1-font-size:3rem;margin-bottom:calc(var(--ifm-h1-vertical-rhythm-bottom)*var(--ifm-leading))}.markdown>h2{--ifm-h2-font-size:2rem;margin-bottom:calc(var(--ifm-heading-vertical-rhythm-bottom)*var(--ifm-leading));margin-top:calc(var(--ifm-h2-vertical-rhythm-top)*var(--ifm-leading))}.markdown>h3{--ifm-h3-font-size:1.5rem;margin-bottom:calc(var(--ifm-heading-vertical-rhythm-bottom)*var(--ifm-leading));margin-top:calc(var(--ifm-h3-vertical-rhythm-top)*var(--ifm-leading))}.markdown>h4,.markdown>h5,.markdown>h6{margin-bottom:calc(var(--ifm-heading-vertical-rhythm-bottom)*var(--ifm-leading));margin-top:calc(var(--ifm-heading-vertical-rhythm-top)*var(--ifm-leading))}.markdown>pre,.markdown>ul,.markdown>p{margin-bottom:var(--ifm-leading)}.markdown li{word-wrap:break-word}.markdown li>p{margin-top:var(--ifm-list-paragraph-margin)}.markdown li+li{margin-top:var(--ifm-list-item-margin)}ul,ol{margin:0 0 var(--ifm-list-margin);padding-left:var(--ifm-list-left-padding)}ol ol,ul ol{list-style-type:lower-roman}ul ul,ul ol,ol ol,ol ul{margin:0}ul ul ol,ul ol ol,ol ul ol,ol ol ol{list-style-type:lower-alpha}table{border-collapse:collapse;margin-bottom:var(--ifm-spacing-vertical);display:block;overflow:auto}table thead tr{border-bottom:2px solid var(--ifm-table-border-color)}table thead{background-color:var(--ifm-table-stripe-background)}table tr{background-color:var(--ifm-table-background);border-top:var(--ifm-table-border-width)solid var(--ifm-table-border-color)}table tr:nth-child(2n){background-color:var(--ifm-table-stripe-background)}table th,table td{border:var(--ifm-table-border-width)solid var(--ifm-table-border-color);padding:var(--ifm-table-cell-padding)}table th{background-color:var(--ifm-table-head-background);color:var(--ifm-table-head-color);font-weight:var(--ifm-table-head-font-weight)}table td{color:var(--ifm-table-cell-color)}strong{font-weight:var(--ifm-font-weight-bold)}a{color:var(--ifm-link-color);-webkit-text-decoration:var(--ifm-link-decoration);text-decoration:var(--ifm-link-decoration);transition:color var(--ifm-transition-fast)var(--ifm-transition-timing-default)}a:hover{color:var(--ifm-link-hover-color);-webkit-text-decoration:var(--ifm-link-hover-decoration);text-decoration:var(--ifm-link-hover-decoration)}a:not([href]){-webkit-text-decoration:none;text-decoration:none}p{margin:0 0 var(--ifm-paragraph-margin-bottom)}blockquote{border-left:var(--ifm-blockquote-border-left-width)solid var(--ifm-blockquote-border-color);box-shadow:var(--ifm-blockquote-shadow);color:var(--ifm-blockquote-color);font-size:var(--ifm-blockquote-font-size);margin:0 0 var(--ifm-spacing-vertical);padding:var(--ifm-blockquote-padding-vertical)var(--ifm-blockquote-padding-horizontal)}blockquote>:first-child{margin-top:0}blockquote>:last-child{margin-bottom:0}hr{background-color:var(--ifm-hr-background-color);height:var(--ifm-hr-height);margin:var(--ifm-hr-margin-vertical)0;border:0}.shadow--lw{box-shadow:var(--ifm-global-shadow-lw)!important}.shadow--md{box-shadow:var(--ifm-global-shadow-md)!important}.shadow--tl{box-shadow:var(--ifm-global-shadow-tl)!important}.text--primary{color:var(--ifm-color-primary)}.text--secondary{color:var(--ifm-color-secondary)}.text--success{color:var(--ifm-color-success)}.text--info{color:var(--ifm-color-info)}.text--warning{color:var(--ifm-color-warning)}.text--danger{color:var(--ifm-color-danger)}.text--center{text-align:center}.text--left{text-align:left}.text--justify{text-align:justify}.text--right{text-align:right}.text--capitalize{text-transform:capitalize}.text--lowercase{text-transform:lowercase}.text--uppercase{text-transform:uppercase}.text--light{font-weight:var(--ifm-font-weight-light)}.text--normal{font-weight:var(--ifm-font-weight-normal)}.text--semibold{font-weight:var(--ifm-font-weight-semibold)}.text--bold{font-weight:var(--ifm-font-weight-bold)}.text--italic{font-style:italic}.text--truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.text--break{word-wrap:break-word!important;word-break:break-word!important}.text--no-decoration,.text--no-decoration:hover{-webkit-text-decoration:none;text-decoration:none}.clean-btn{color:inherit;cursor:pointer;background:0 0;border:none;padding:0;font-family:inherit}.clean-list{padding-left:0;list-style:none}.alert--primary{--ifm-alert-background-color:var(--ifm-color-primary-contrast-background);--ifm-alert-background-color-highlight:#3578e526;--ifm-alert-foreground-color:var(--ifm-color-primary-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-primary-dark)}.alert--secondary{--ifm-alert-background-color:var(--ifm-color-secondary-contrast-background);--ifm-alert-background-color-highlight:#ebedf026;--ifm-alert-foreground-color:var(--ifm-color-secondary-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-secondary-dark)}.alert--success{--ifm-alert-background-color:var(--ifm-color-success-contrast-background);--ifm-alert-background-color-highlight:#00a40026;--ifm-alert-foreground-color:var(--ifm-color-success-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-success-dark)}.alert--info{--ifm-alert-background-color:var(--ifm-color-info-contrast-background);--ifm-alert-background-color-highlight:#54c7ec26;--ifm-alert-foreground-color:var(--ifm-color-info-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-info-dark)}.alert--warning{--ifm-alert-background-color:var(--ifm-color-warning-contrast-background);--ifm-alert-background-color-highlight:#ffba0026;--ifm-alert-foreground-color:var(--ifm-color-warning-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-warning-dark)}.alert--danger{--ifm-alert-background-color:var(--ifm-color-danger-contrast-background);--ifm-alert-background-color-highlight:#fa383e26;--ifm-alert-foreground-color:var(--ifm-color-danger-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-danger-dark)}.alert{--ifm-code-background:var(--ifm-alert-background-color-highlight);--ifm-link-color:var(--ifm-alert-foreground-color);--ifm-link-hover-color:var(--ifm-alert-foreground-color);--ifm-link-decoration:underline;--ifm-tabs-color:var(--ifm-alert-foreground-color);--ifm-tabs-color-active:var(--ifm-alert-foreground-color);--ifm-tabs-color-active-border:var(--ifm-alert-border-color);background-color:var(--ifm-alert-background-color);border:var(--ifm-alert-border-width)solid var(--ifm-alert-border-color);border-left-width:var(--ifm-alert-border-left-width);border-radius:var(--ifm-alert-border-radius);box-shadow:var(--ifm-alert-shadow);color:var(--ifm-alert-foreground-color);padding:var(--ifm-alert-padding-vertical)var(--ifm-alert-padding-horizontal)}.alert__heading{font:bold var(--ifm-h5-font-size)/var(--ifm-heading-line-height)var(--ifm-heading-font-family);text-transform:uppercase;align-items:center;margin-bottom:.5rem;display:flex}.alert__icon{margin-right:.4em;display:inline-flex}.alert__icon svg{fill:var(--ifm-alert-foreground-color);stroke:var(--ifm-alert-foreground-color);stroke-width:0}.alert .close{color:var(--ifm-alert-foreground-color);margin:calc(var(--ifm-alert-padding-vertical)*-1)calc(var(--ifm-alert-padding-horizontal)*-1)0 0;opacity:.75}.alert .close:hover,.alert .close:focus{opacity:1}.alert a{-webkit-text-decoration-color:var(--ifm-alert-border-color);text-decoration-color:var(--ifm-alert-border-color)}.alert a:hover{text-decoration-thickness:2px}.avatar{-moz-column-gap:var(--ifm-avatar-intro-margin);column-gap:var(--ifm-avatar-intro-margin);display:flex}.avatar__photo{height:var(--ifm-avatar-photo-size);width:var(--ifm-avatar-photo-size);border-radius:50%;display:block;overflow:hidden}.avatar__photo--sm{--ifm-avatar-photo-size:2rem}.avatar__photo--lg{--ifm-avatar-photo-size:4rem}.avatar__photo--xl{--ifm-avatar-photo-size:6rem}.avatar__intro{text-align:var(--ifm-avatar-intro-alignment);flex-direction:column;flex:1;justify-content:center;display:flex}.avatar__name{font:bold var(--ifm-h4-font-size)/var(--ifm-heading-line-height)var(--ifm-font-family-base)}.avatar__subtitle{margin-top:.25rem}.avatar--vertical{--ifm-avatar-intro-alignment:center;--ifm-avatar-intro-margin:.5rem;flex-direction:column;align-items:center}.badge{background-color:var(--ifm-badge-background-color);border:var(--ifm-badge-border-width)solid var(--ifm-badge-border-color);border-radius:var(--ifm-badge-border-radius);color:var(--ifm-badge-color);font-size:75%;font-weight:var(--ifm-font-weight-bold);padding:var(--ifm-badge-padding-vertical)var(--ifm-badge-padding-horizontal);line-height:1;display:inline-block}.badge--primary{--ifm-badge-background-color:var(--ifm-color-primary);--ifm-badge-border-color:var(--ifm-badge-background-color)}.badge--secondary{--ifm-badge-background-color:var(--ifm-color-secondary);--ifm-badge-border-color:var(--ifm-badge-background-color);color:var(--ifm-color-black)}.badge--success{--ifm-badge-background-color:var(--ifm-color-success);--ifm-badge-border-color:var(--ifm-badge-background-color)}.badge--info{--ifm-badge-background-color:var(--ifm-color-info);--ifm-badge-border-color:var(--ifm-badge-background-color)}.badge--warning{--ifm-badge-background-color:var(--ifm-color-warning);--ifm-badge-border-color:var(--ifm-badge-background-color)}.badge--danger{--ifm-badge-background-color:var(--ifm-color-danger);--ifm-badge-border-color:var(--ifm-badge-background-color)}.breadcrumbs{margin-bottom:0;padding-left:0}.breadcrumbs__item{display:inline-block}.breadcrumbs__item:not(:last-child):after{background:var(--ifm-breadcrumb-separator)center;content:" ";filter:var(--ifm-breadcrumb-separator-filter);height:calc(var(--ifm-breadcrumb-separator-size)*var(--ifm-breadcrumb-size-multiplier)*var(--ifm-breadcrumb-separator-size-multiplier));margin:0 var(--ifm-breadcrumb-spacing);opacity:.5;width:calc(var(--ifm-breadcrumb-separator-size)*var(--ifm-breadcrumb-size-multiplier)*var(--ifm-breadcrumb-separator-size-multiplier));display:inline-block}.breadcrumbs__item--active .breadcrumbs__link{background:var(--ifm-breadcrumb-item-background-active);color:var(--ifm-breadcrumb-color-active)}.breadcrumbs__link{border-radius:var(--ifm-breadcrumb-border-radius);color:var(--ifm-font-color-base);font-size:calc(1rem*var(--ifm-breadcrumb-size-multiplier));padding:calc(var(--ifm-breadcrumb-padding-vertical)*var(--ifm-breadcrumb-size-multiplier))calc(var(--ifm-breadcrumb-padding-horizontal)*var(--ifm-breadcrumb-size-multiplier));transition-property:background,color;transition-duration:var(--ifm-transition-fast);transition-timing-function:var(--ifm-transition-timing-default);display:inline-block}.breadcrumbs__link:link:hover,.breadcrumbs__link:visited:hover,area[href].breadcrumbs__link:hover{background:var(--ifm-breadcrumb-item-background-active);-webkit-text-decoration:none;text-decoration:none}.breadcrumbs__link:any-link:hover{background:var(--ifm-breadcrumb-item-background-active);-webkit-text-decoration:none;text-decoration:none}.breadcrumbs--sm{--ifm-breadcrumb-size-multiplier:.8}.breadcrumbs--lg{--ifm-breadcrumb-size-multiplier:1.2}.button{background-color:var(--ifm-button-background-color);border:var(--ifm-button-border-width)solid var(--ifm-button-border-color);border-radius:var(--ifm-button-border-radius);color:var(--ifm-button-color);cursor:pointer;font-size:calc(.875rem*var(--ifm-button-size-multiplier));font-weight:var(--ifm-button-font-weight);padding:calc(var(--ifm-button-padding-vertical)*var(--ifm-button-size-multiplier))calc(var(--ifm-button-padding-horizontal)*var(--ifm-button-size-multiplier));text-align:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;transition-property:color,background,border-color;transition-duration:var(--ifm-button-transition-duration);transition-timing-function:var(--ifm-transition-timing-default);line-height:1.5;display:inline-block}.button:hover{color:var(--ifm-button-color);-webkit-text-decoration:none;text-decoration:none}.button--outline{--ifm-button-background-color:transparent;--ifm-button-color:var(--ifm-button-border-color)}.button--outline:hover{--ifm-button-background-color:var(--ifm-button-border-color)}.button--outline:hover,.button--outline:active,.button--outline.button--active{--ifm-button-color:var(--ifm-font-color-base-inverse)}.button--link{--ifm-button-background-color:transparent;--ifm-button-border-color:transparent;color:var(--ifm-link-color);-webkit-text-decoration:var(--ifm-link-decoration);text-decoration:var(--ifm-link-decoration)}.button--link:hover,.button--link:active,.button--link.button--active{color:var(--ifm-link-hover-color);-webkit-text-decoration:var(--ifm-link-hover-decoration);text-decoration:var(--ifm-link-hover-decoration)}.button.disabled,.button:disabled,.button[disabled]{opacity:.65;pointer-events:none}.button--sm{--ifm-button-size-multiplier:.8}.button--lg{--ifm-button-size-multiplier:1.35}.button--block{width:100%;display:block}.button.button--secondary{color:var(--ifm-color-gray-900)}.button.button--secondary.button--outline:not(.button--active):not(:hover){color:var(--ifm-font-color-base)}:where(.button--primary){--ifm-button-background-color:var(--ifm-color-primary);--ifm-button-border-color:var(--ifm-color-primary)}:where(.button--primary):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-primary-dark);--ifm-button-border-color:var(--ifm-color-primary-dark)}.button--primary:active,.button--primary.button--active{--ifm-button-background-color:var(--ifm-color-primary-darker);--ifm-button-border-color:var(--ifm-color-primary-darker)}:where(.button--secondary){--ifm-button-background-color:var(--ifm-color-secondary);--ifm-button-border-color:var(--ifm-color-secondary)}:where(.button--secondary):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-secondary-dark);--ifm-button-border-color:var(--ifm-color-secondary-dark)}.button--secondary:active,.button--secondary.button--active{--ifm-button-background-color:var(--ifm-color-secondary-darker);--ifm-button-border-color:var(--ifm-color-secondary-darker)}:where(.button--success){--ifm-button-background-color:var(--ifm-color-success);--ifm-button-border-color:var(--ifm-color-success)}:where(.button--success):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-success-dark);--ifm-button-border-color:var(--ifm-color-success-dark)}.button--success:active,.button--success.button--active{--ifm-button-background-color:var(--ifm-color-success-darker);--ifm-button-border-color:var(--ifm-color-success-darker)}:where(.button--info){--ifm-button-background-color:var(--ifm-color-info);--ifm-button-border-color:var(--ifm-color-info)}:where(.button--info):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-info-dark);--ifm-button-border-color:var(--ifm-color-info-dark)}.button--info:active,.button--info.button--active{--ifm-button-background-color:var(--ifm-color-info-darker);--ifm-button-border-color:var(--ifm-color-info-darker)}:where(.button--warning){--ifm-button-background-color:var(--ifm-color-warning);--ifm-button-border-color:var(--ifm-color-warning)}:where(.button--warning):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-warning-dark);--ifm-button-border-color:var(--ifm-color-warning-dark)}.button--warning:active,.button--warning.button--active{--ifm-button-background-color:var(--ifm-color-warning-darker);--ifm-button-border-color:var(--ifm-color-warning-darker)}:where(.button--danger){--ifm-button-background-color:var(--ifm-color-danger);--ifm-button-border-color:var(--ifm-color-danger)}:where(.button--danger):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-danger-dark);--ifm-button-border-color:var(--ifm-color-danger-dark)}.button--danger:active,.button--danger.button--active{--ifm-button-background-color:var(--ifm-color-danger-darker);--ifm-button-border-color:var(--ifm-color-danger-darker)}.button-group{gap:var(--ifm-button-group-spacing);display:inline-flex}.button-group>.button:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.button-group>.button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.button-group--block{justify-content:stretch;display:flex}.button-group--block>.button{flex-grow:1}.card{background-color:var(--ifm-card-background-color);border-radius:var(--ifm-card-border-radius);box-shadow:var(--ifm-global-shadow-lw);flex-direction:column;display:flex;overflow:hidden}.card--full-height{height:100%}.card__image{padding-top:var(--ifm-card-vertical-spacing)}.card__image:first-child{padding-top:0}.card__header,.card__body,.card__footer{padding:var(--ifm-card-vertical-spacing)var(--ifm-card-horizontal-spacing)}.card__header:not(:last-child),.card__body:not(:last-child),.card__footer:not(:last-child){padding-bottom:0}.card__header>:last-child,.card__body>:last-child,.card__footer>:last-child{margin-bottom:0}.card__footer{margin-top:auto}.table-of-contents{padding:var(--ifm-toc-padding-vertical)0;margin-bottom:0;font-size:.8rem}.table-of-contents,.table-of-contents ul{padding-left:var(--ifm-toc-padding-horizontal);list-style:none}.table-of-contents li{margin:var(--ifm-toc-padding-vertical)var(--ifm-toc-padding-horizontal)}.table-of-contents__left-border{border-left:1px solid var(--ifm-toc-border-color)}.table-of-contents__link{color:var(--ifm-toc-link-color);display:block}.table-of-contents__link:hover,.table-of-contents__link:hover code,.table-of-contents__link--active,.table-of-contents__link--active code{color:var(--ifm-color-primary);-webkit-text-decoration:none;text-decoration:none}.close{color:var(--ifm-color-black);float:right;font-size:1.5rem;font-weight:var(--ifm-font-weight-bold);opacity:.5;transition:opacity var(--ifm-transition-fast)var(--ifm-transition-timing-default);padding:1rem;line-height:1}.close:hover{opacity:.7}.close:focus{opacity:.8}.dropdown{font-weight:var(--ifm-dropdown-font-weight);vertical-align:top;display:inline-flex;position:relative}.dropdown--hoverable:hover .dropdown__menu,.dropdown--show .dropdown__menu{opacity:1;pointer-events:all;visibility:visible;transform:translateY(-1px)}.dropdown--right .dropdown__menu{left:inherit;right:0}.dropdown--nocaret .navbar__link:after{content:none!important}.dropdown__menu{background-color:var(--ifm-dropdown-background-color);border-radius:var(--ifm-global-radius);box-shadow:var(--ifm-global-shadow-md);opacity:0;pointer-events:none;min-width:10rem;max-height:80vh;left:0;top:calc(100% - var(--ifm-navbar-item-padding-vertical) + .3rem);visibility:hidden;z-index:var(--ifm-z-index-dropdown);transition-property:opacity,transform,visibility;transition-duration:var(--ifm-transition-fast);transition-timing-function:var(--ifm-transition-timing-default);padding:.5rem;list-style:none;position:absolute;overflow-y:auto;transform:translateY(-.625rem)}.dropdown__link{color:var(--ifm-dropdown-link-color);white-space:nowrap;border-radius:.25rem;margin-top:.2rem;padding:.25rem .5rem;font-size:.875rem;display:block}.dropdown__link:hover,.dropdown__link--active{background-color:var(--ifm-dropdown-hover-background-color);color:var(--ifm-dropdown-link-color);-webkit-text-decoration:none;text-decoration:none}.dropdown__link--active,.dropdown__link--active:hover{--ifm-dropdown-link-color:var(--ifm-link-color)}.dropdown>.navbar__link:after{content:"";border:.4em solid #0000;border-top-color:currentColor;border-bottom:0 solid;margin-left:.3em;display:inline-block;position:relative;top:2px;transform:translateY(-50%)}.footer{background-color:var(--ifm-footer-background-color);color:var(--ifm-footer-color);padding:var(--ifm-footer-padding-vertical)var(--ifm-footer-padding-horizontal)}.footer--dark{--ifm-footer-background-color:#303846;--ifm-footer-color:var(--ifm-footer-link-color);--ifm-footer-link-color:var(--ifm-color-secondary);--ifm-footer-title-color:var(--ifm-color-white)}.footer__links{margin-bottom:1rem}.footer__link-item{color:var(--ifm-footer-link-color);line-height:2}.footer__link-item:hover{color:var(--ifm-footer-link-hover-color)}.footer__link-separator{margin:0 var(--ifm-footer-link-horizontal-spacing)}.footer__logo{max-width:var(--ifm-footer-logo-max-width);margin-top:1rem}.footer__title{color:var(--ifm-footer-title-color);font:bold var(--ifm-h4-font-size)/var(--ifm-heading-line-height)var(--ifm-font-family-base);margin-bottom:var(--ifm-heading-margin-bottom)}.footer__item{margin-top:0}.footer__items{margin-bottom:0}[type=checkbox]{padding:0}.hero{background-color:var(--ifm-hero-background-color);color:var(--ifm-hero-text-color);align-items:center;padding:4rem 2rem;display:flex}.hero--primary{--ifm-hero-background-color:var(--ifm-color-primary);--ifm-hero-text-color:var(--ifm-font-color-base-inverse)}.hero--dark{--ifm-hero-background-color:#303846;--ifm-hero-text-color:var(--ifm-color-white)}.hero__title{font-size:3rem}.hero__subtitle{font-size:1.5rem}.menu{font-weight:var(--ifm-font-weight-semibold);overflow-x:hidden}.menu__list{margin:0;padding-left:0;list-style:none}.menu__list .menu__list{padding-left:var(--ifm-menu-link-padding-horizontal);flex:0 0 100%;margin-top:.25rem}.menu__list-item:not(:first-child){margin-top:.25rem}.menu__list-item--collapsed .menu__list{height:0;overflow:hidden}.menu__list-item--collapsed .menu__link--sublist:after,.menu__list-item--collapsed .menu__caret:before{transform:rotate(90deg)}.menu__list-item-collapsible{transition:background var(--ifm-transition-fast)var(--ifm-transition-timing-default);border-radius:.25rem;flex-wrap:wrap;display:flex;position:relative}.menu__list-item-collapsible:hover,.menu__list-item-collapsible--active{background:var(--ifm-menu-color-background-hover)}.menu__list-item-collapsible .menu__link:hover,.menu__list-item-collapsible .menu__link--active{background:0 0!important}.menu__link,.menu__caret{transition:background var(--ifm-transition-fast)var(--ifm-transition-timing-default);border-radius:.25rem;align-items:center;display:flex}.menu__link:hover,.menu__caret:hover{background:var(--ifm-menu-color-background-hover)}.menu__link{color:var(--ifm-menu-color);padding:var(--ifm-menu-link-padding-vertical)var(--ifm-menu-link-padding-horizontal);flex:1;line-height:1.25}.menu__link:hover{color:var(--ifm-menu-color);transition:color var(--ifm-transition-fast)var(--ifm-transition-timing-default);-webkit-text-decoration:none;text-decoration:none}.menu__link--sublist-caret:after{content:"";background:var(--ifm-menu-link-sublist-icon)50%/2rem 2rem;min-width:1.25rem;filter:var(--ifm-menu-link-sublist-icon-filter);width:1.25rem;height:1.25rem;transition:transform var(--ifm-transition-fast)linear;margin-left:auto;transform:rotate(180deg)}.menu__link--active,.menu__link--active:hover{color:var(--ifm-menu-color-active)}.menu__link--active:not(.menu__link--sublist){background-color:var(--ifm-menu-color-background-active)}.menu__caret{padding:var(--ifm-menu-link-padding-vertical)var(--ifm-menu-link-padding-horizontal)}.menu__caret:before{content:"";background:var(--ifm-menu-link-sublist-icon)50%/2rem 2rem;filter:var(--ifm-menu-link-sublist-icon-filter);width:1.25rem;height:1.25rem;transition:transform var(--ifm-transition-fast)linear;transform:rotate(180deg)}html[data-theme=dark],.navbar--dark{--ifm-menu-link-sublist-icon-filter:invert(100%)sepia(94%)saturate(17%)hue-rotate(223deg)brightness(104%)contrast(98%)}.navbar{background-color:var(--ifm-navbar-background-color);box-shadow:var(--ifm-navbar-shadow);height:var(--ifm-navbar-height);padding:var(--ifm-navbar-padding-vertical)var(--ifm-navbar-padding-horizontal);display:flex}.navbar>.container,.navbar>.container-fluid{display:flex}.navbar--fixed-top{z-index:var(--ifm-z-index-fixed);position:sticky;top:0}.navbar__inner{flex-wrap:wrap;justify-content:space-between;width:100%;display:flex}.navbar__brand{color:var(--ifm-navbar-link-color);align-items:center;min-width:0;margin-right:1rem;display:flex}.navbar__brand:hover{color:var(--ifm-navbar-link-hover-color);-webkit-text-decoration:none;text-decoration:none}.navbar__title{flex:auto}.navbar__toggle{margin-right:.5rem;display:none}.navbar__logo{flex:none;height:2rem;margin-right:.5rem}.navbar__logo img{height:100%}.navbar__items{flex:1;align-items:center;min-width:0;display:flex}.navbar__items--center{flex:none}.navbar__items--center .navbar__brand{margin:0}.navbar__items--center+.navbar__items--right{flex:1}.navbar__items--right{flex:none;justify-content:flex-end}.navbar__items--right>:last-child{padding-right:0}.navbar__item{padding:var(--ifm-navbar-item-padding-vertical)var(--ifm-navbar-item-padding-horizontal);display:inline-block}.navbar__item.dropdown .navbar__link:not([href]){pointer-events:none}.navbar__link{color:var(--ifm-navbar-link-color);font-weight:var(--ifm-font-weight-semibold)}.navbar__link:hover,.navbar__link--active{color:var(--ifm-navbar-link-hover-color);-webkit-text-decoration:none;text-decoration:none}.navbar--dark,.navbar--primary{--ifm-menu-color:var(--ifm-color-gray-300);--ifm-navbar-link-color:var(--ifm-color-gray-100);--ifm-navbar-search-input-background-color:#ffffff1a;--ifm-navbar-search-input-placeholder-color:#ffffff80;color:var(--ifm-color-white)}.navbar--dark{--ifm-navbar-background-color:#242526;--ifm-navbar-link-hover-color:var(--ifm-color-primary);--ifm-menu-color-background-active:#ffffff0d;--ifm-navbar-search-input-color:var(--ifm-color-white)}.navbar--primary{--ifm-navbar-background-color:var(--ifm-color-primary);--ifm-navbar-link-hover-color:var(--ifm-color-white);--ifm-menu-color-active:var(--ifm-color-white);--ifm-navbar-search-input-color:var(--ifm-color-emphasis-500)}.navbar__search-input{appearance:none;background:var(--ifm-navbar-search-input-background-color)var(--ifm-navbar-search-input-icon)no-repeat .75rem center/1rem 1rem;color:var(--ifm-navbar-search-input-color);cursor:text;border:none;border-radius:2rem;width:12.5rem;height:2rem;padding:0 .5rem 0 2.25rem;font-size:1rem;display:inline-block}.navbar__search-input::placeholder{color:var(--ifm-navbar-search-input-placeholder-color)}.navbar-sidebar{background-color:var(--ifm-navbar-background-color);box-shadow:var(--ifm-global-shadow-md);opacity:0;visibility:hidden;width:var(--ifm-navbar-sidebar-width);transition-property:opacity,visibility,transform;transition-duration:var(--ifm-transition-fast);transition-timing-function:ease-in-out;position:fixed;top:0;bottom:0;left:0;overflow-x:hidden;transform:translate(-100%)}.navbar-sidebar--show .navbar-sidebar,.navbar-sidebar--show .navbar-sidebar__backdrop{opacity:1;visibility:visible}.navbar-sidebar--show .navbar-sidebar{transform:translate(0,0)}.navbar-sidebar__backdrop{opacity:0;visibility:hidden;transition-property:opacity,visibility;transition-duration:var(--ifm-transition-fast);background-color:#0009;transition-timing-function:ease-in-out;position:fixed;inset:0}.navbar-sidebar__brand{box-shadow:var(--ifm-navbar-shadow);height:var(--ifm-navbar-height);padding:var(--ifm-navbar-padding-vertical)var(--ifm-navbar-padding-horizontal);flex:1;align-items:center;display:flex}.navbar-sidebar__items{height:calc(100% - var(--ifm-navbar-height));transition:transform var(--ifm-transition-fast)ease-in-out;display:flex;transform:translateZ(0)}.navbar-sidebar__items--show-secondary{transform:translate3d(calc((var(--ifm-navbar-sidebar-width))*-1),0,0)}.navbar-sidebar__item{width:calc(var(--ifm-navbar-sidebar-width));flex-shrink:0;padding:.5rem}.navbar-sidebar__back{background:var(--ifm-menu-color-background-active);font-size:15px;font-weight:var(--ifm-button-font-weight);text-align:left;width:calc(100% + 1rem);margin:0 0 .2rem -.5rem;padding:.6rem 1.5rem;position:relative;top:-.5rem}.navbar-sidebar__close{margin-left:auto;display:flex}.pagination{-moz-column-gap:var(--ifm-pagination-page-spacing);column-gap:var(--ifm-pagination-page-spacing);font-size:var(--ifm-pagination-font-size);padding-left:0;display:flex}.pagination--sm{--ifm-pagination-font-size:.8rem;--ifm-pagination-padding-horizontal:.8rem;--ifm-pagination-padding-vertical:.2rem}.pagination--lg{--ifm-pagination-font-size:1.2rem;--ifm-pagination-padding-horizontal:1.2rem;--ifm-pagination-padding-vertical:.3rem}.pagination__item{display:inline-flex}.pagination__item>span{padding:var(--ifm-pagination-padding-vertical)}.pagination__item--active .pagination__link{background:var(--ifm-pagination-item-active-background);color:var(--ifm-pagination-color-active)}.pagination__item:not(.pagination__item--active):hover .pagination__link{background:var(--ifm-pagination-item-active-background)}.pagination__item--disabled,.pagination__item[disabled]{opacity:.25;pointer-events:none}.pagination__link{border-radius:var(--ifm-pagination-border-radius);color:var(--ifm-font-color-base);padding:var(--ifm-pagination-padding-vertical)var(--ifm-pagination-padding-horizontal);transition:background var(--ifm-transition-fast)var(--ifm-transition-timing-default);display:inline-block}.pagination__link:hover{-webkit-text-decoration:none;text-decoration:none}.pagination-nav{grid-gap:var(--ifm-spacing-horizontal);gap:var(--ifm-spacing-horizontal);grid-template-columns:repeat(2,1fr);display:grid}.pagination-nav__link{border:1px solid var(--ifm-color-emphasis-300);border-radius:var(--ifm-pagination-nav-border-radius);height:100%;line-height:var(--ifm-heading-line-height);padding:var(--ifm-global-spacing);transition:border-color var(--ifm-transition-fast)var(--ifm-transition-timing-default);display:block}.pagination-nav__link:hover{border-color:var(--ifm-pagination-nav-color-hover);-webkit-text-decoration:none;text-decoration:none}.pagination-nav__link--next{text-align:right;grid-column:2/3}.pagination-nav__label{font-size:var(--ifm-h4-font-size);font-weight:var(--ifm-heading-font-weight);word-break:break-word}.pagination-nav__link--prev .pagination-nav__label:before{content:"« "}.pagination-nav__link--next .pagination-nav__label:after{content:" »"}.pagination-nav__sublabel{color:var(--ifm-color-content-secondary);font-size:var(--ifm-h5-font-size);font-weight:var(--ifm-font-weight-semibold);margin-bottom:.25rem}.pills{gap:var(--ifm-pills-spacing);padding-left:0;display:flex}.pills__item{cursor:pointer;font-weight:var(--ifm-font-weight-bold);transition:background var(--ifm-transition-fast)var(--ifm-transition-timing-default);border-radius:.5rem;padding:.25rem 1rem;display:inline-block}.pills__item--active{background:var(--ifm-pills-color-background-active);color:var(--ifm-pills-color-active)}.pills__item:not(.pills__item--active):hover{background:var(--ifm-pills-color-background-active)}.pills--block{justify-content:stretch}.pills--block .pills__item{text-align:center;flex-grow:1}.tabs{color:var(--ifm-tabs-color);font-weight:var(--ifm-font-weight-bold);margin-bottom:0;padding-left:0;display:flex;overflow-x:auto}.tabs__item{border-radius:var(--ifm-global-radius);cursor:pointer;padding:var(--ifm-tabs-padding-vertical)var(--ifm-tabs-padding-horizontal);transition:background-color var(--ifm-transition-fast)var(--ifm-transition-timing-default);border-bottom:3px solid #0000;display:inline-flex}.tabs__item--active{border-bottom-color:var(--ifm-tabs-color-active-border);color:var(--ifm-tabs-color-active);border-bottom-right-radius:0;border-bottom-left-radius:0}.tabs__item:hover{background-color:var(--ifm-hover-overlay)}.tabs--block{justify-content:stretch}.tabs--block .tabs__item{flex-grow:1;justify-content:center}html[data-theme=dark]{--ifm-color-scheme:dark;--ifm-color-emphasis-0:var(--ifm-color-gray-1000);--ifm-color-emphasis-100:var(--ifm-color-gray-900);--ifm-color-emphasis-200:var(--ifm-color-gray-800);--ifm-color-emphasis-300:var(--ifm-color-gray-700);--ifm-color-emphasis-400:var(--ifm-color-gray-600);--ifm-color-emphasis-500:var(--ifm-color-gray-500);--ifm-color-emphasis-600:var(--ifm-color-gray-400);--ifm-color-emphasis-700:var(--ifm-color-gray-300);--ifm-color-emphasis-800:var(--ifm-color-gray-200);--ifm-color-emphasis-900:var(--ifm-color-gray-100);--ifm-color-emphasis-1000:var(--ifm-color-gray-0);--ifm-background-color:#1b1b1d;--ifm-background-surface-color:#242526;--ifm-hover-overlay:#ffffff0d;--ifm-color-content:#e3e3e3;--ifm-color-content-secondary:#fff;--ifm-breadcrumb-separator-filter:invert(64%)sepia(11%)saturate(0%)hue-rotate(149deg)brightness(99%)contrast(95%);--ifm-code-background:#ffffff1a;--ifm-scrollbar-track-background-color:#444;--ifm-scrollbar-thumb-background-color:#686868;--ifm-scrollbar-thumb-hover-background-color:#7a7a7a;--ifm-table-stripe-background:#ffffff12;--ifm-toc-border-color:var(--ifm-color-emphasis-200);--ifm-color-primary-contrast-background:#102445;--ifm-color-primary-contrast-foreground:#ebf2fc;--ifm-color-secondary-contrast-background:#474748;--ifm-color-secondary-contrast-foreground:#fdfdfe;--ifm-color-success-contrast-background:#003100;--ifm-color-success-contrast-foreground:#e6f6e6;--ifm-color-info-contrast-background:#193c47;--ifm-color-info-contrast-foreground:#eef9fd;--ifm-color-warning-contrast-background:#4d3800;--ifm-color-warning-contrast-foreground:#fff8e6;--ifm-color-danger-contrast-background:#4b1113;--ifm-color-danger-contrast-foreground:#ffebec}@media (min-width:1440px){.container{max-width:var(--ifm-container-width-xl)}}@media (max-width:996px){.col{--ifm-col-width:100%;flex-basis:var(--ifm-col-width);margin-left:0}.footer{--ifm-footer-padding-horizontal:0}.footer__link-separator{display:none}.footer__col{margin-bottom:calc(var(--ifm-spacing-vertical)*3)}.footer__link-item{width:max-content;display:block}.hero{padding-left:0;padding-right:0}.navbar>.container,.navbar>.container-fluid{padding:0}.navbar__toggle{display:inherit}.navbar__item{display:none}.navbar__search-input{width:9rem}.pills--block,.tabs--block{flex-direction:column}}@media (max-width:576px){.markdown h1:first-child{--ifm-h1-font-size:2rem}.markdown>h2{--ifm-h2-font-size:1.5rem}.markdown>h3{--ifm-h3-font-size:1.25rem}}@media (pointer:fine){.thin-scrollbar{scrollbar-width:thin}.thin-scrollbar::-webkit-scrollbar{height:var(--ifm-scrollbar-size);width:var(--ifm-scrollbar-size)}.thin-scrollbar::-webkit-scrollbar-track{background:var(--ifm-scrollbar-track-background-color);border-radius:10px}.thin-scrollbar::-webkit-scrollbar-thumb{background:var(--ifm-scrollbar-thumb-background-color);border-radius:10px}.thin-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--ifm-scrollbar-thumb-hover-background-color)}}@media (prefers-reduced-motion:reduce){:root{--ifm-transition-fast:0s;--ifm-transition-slow:0s}}@media print{.table-of-contents,.footer,.menu,.navbar,.pagination-nav{display:none}.tabs{page-break-inside:avoid}}:root{--docusaurus-progress-bar-color:var(--ifm-color-primary)}#nprogress{pointer-events:none}#nprogress .bar{background:var(--docusaurus-progress-bar-color);z-index:1031;width:100%;height:2px;position:fixed;top:0;left:0}#nprogress .peg{width:100px;height:100%;box-shadow:0 0 10px var(--docusaurus-progress-bar-color),0 0 5px var(--docusaurus-progress-bar-color);opacity:1;position:absolute;right:0;transform:rotate(3deg)translateY(-4px)}[data-rmiz-ghost]{pointer-events:none;position:absolute}[data-rmiz-btn-zoom],[data-rmiz-btn-unzoom]{color:#fff;outline-offset:2px;touch-action:manipulation;appearance:none;background-color:#000000b3;border:none;border-radius:50%;width:40px;height:40px;margin:0;padding:9px;box-shadow:0 0 1px #ffffff80}[data-rmiz-btn-zoom]:not(:focus):not(:active){clip:rect(0 0 0 0);clip-path:inset(50%);pointer-events:none;white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}[data-rmiz-btn-zoom]{cursor:zoom-in;position:absolute;inset:10px 10px auto auto}[data-rmiz-btn-unzoom]{cursor:zoom-out;z-index:1;position:absolute;inset:20px 20px auto auto}[data-rmiz-content=found] img,[data-rmiz-content=found] svg,[data-rmiz-content=found] [role=img],[data-rmiz-content=found] [data-zoom]{cursor:zoom-in}[data-rmiz-modal]::backdrop{display:none}[data-rmiz-modal][open]{background:0 0;border:0;width:100dvw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;position:fixed;overflow:hidden}[data-rmiz-modal-overlay]{transition:background-color .3s;position:absolute;inset:0}[data-rmiz-modal-overlay=hidden]{background-color:#fff0}[data-rmiz-modal-content]{width:100%;height:100%;position:relative}[data-rmiz-modal-img]{cursor:zoom-out;image-rendering:high-quality;transform-origin:0 0;transition:transform .3s;position:absolute}@media (prefers-reduced-motion:reduce){[data-rmiz-modal-overlay],[data-rmiz-modal-img]{transition-duration:.01ms!important}}:root{--site-primary-hue-saturation:167 68%;--site-primary-hue-saturation-light:167 56%;--site-color-feedback-background:#f0f8ff;--docusaurus-highlighted-code-line-bg:#0000001a;--ifm-breadcrumb-color-active:var(--ifm-color-primary-darker)!important;--ifm-menu-color-active:var(--ifm-color-primary-darker)!important}html[data-theme=dark]{--site-color-feedback-background:#2a2929;--docusaurus-highlighted-code-line-bg:#42424259}[data-theme=light]{--ifm-color-primary:hsl(var(--site-primary-hue-saturation)30%);--ifm-color-primary-dark:hsl(var(--site-primary-hue-saturation)26%);--ifm-color-primary-darker:hsl(var(--site-primary-hue-saturation)23%);--ifm-color-primary-darkest:hsl(var(--site-primary-hue-saturation)17%);--ifm-color-primary-light:hsl(var(--site-primary-hue-saturation-light)39%);--ifm-color-primary-lighter:hsl(var(--site-primary-hue-saturation-light)47%);--ifm-color-primary-lightest:hsl(var(--site-primary-hue-saturation-light)58%)}[data-theme=dark]{--ifm-color-primary:hsl(var(--site-primary-hue-saturation)45%);--ifm-color-primary-dark:hsl(var(--site-primary-hue-saturation)41%);--ifm-color-primary-darker:hsl(var(--site-primary-hue-saturation)38%);--ifm-color-primary-darkest:hsl(var(--site-primary-hue-saturation)32%);--ifm-color-primary-light:hsl(var(--site-primary-hue-saturation-light)54%);--ifm-color-primary-lighter:hsl(var(--site-primary-hue-saturation-light)62%);--ifm-color-primary-lightest:hsl(var(--site-primary-hue-saturation-light)73%)}.header-github-link:before{content:"";background-color:var(--ifm-navbar-link-color);width:24px;height:24px;transition:background-color var(--ifm-transition-fast)var(--ifm-transition-timing-default);display:flex;-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")}.header-github-link:hover:before{background-color:var(--ifm-navbar-link-hover-color)}.footer--dark{--ifm-footer-background-color:#2b3137}.unique-tabs .tabs__item{margin-right:8px;line-height:16px}.unique-tabs .tabs__item--active{color:#fff;border-radius:var(--ifm-global-radius);background-color:var(--ifm-tabs-color-active);border:0}[data-theme=light] .themedDocusaurus [fill=\#FFFF50]{fill:#adff2f}[data-theme=dark] .themedDocusaurus [fill=\#FFFF50]{fill:#2e8b57}[data-theme=light] .DocSearch{--docsearch-muted-color:var(--ifm-color-emphasis-700);--docsearch-container-background:#5e6470b3;--docsearch-modal-background:var(--ifm-color-secondary-lighter);--docsearch-searchbox-background:var(--ifm-color-secondary);--docsearch-searchbox-focus-background:var(--ifm-color-white);--docsearch-hit-color:var(--ifm-font-color-base);--docsearch-hit-active-color:var(--ifm-color-white);--docsearch-hit-background:var(--ifm-color-white);--docsearch-footer-background:var(--ifm-color-white)}[data-theme=dark] .DocSearch{--docsearch-text-color:var(--ifm-font-color-base);--docsearch-muted-color:var(--ifm-color-secondary-darkest);--docsearch-container-background:#2f3745b3;--docsearch-modal-background:var(--ifm-background-color);--docsearch-searchbox-background:var(--ifm-background-color);--docsearch-searchbox-focus-background:var(--ifm-color-black);--docsearch-hit-color:var(--ifm-font-color-base);--docsearch-hit-active-color:var(--ifm-color-white);--docsearch-hit-background:var(--ifm-color-emphasis-100);--docsearch-footer-background:var(--ifm-background-surface-color);--docsearch-key-gradient:linear-gradient(-26.5deg,var(--ifm-color-emphasis-200)0%,var(--ifm-color-emphasis-100)100%)}div[class^=announcementBar_]{--site-announcement-bar-stripe-color1:#e8d7ff;--site-announcement-bar-stripe-color2:#ffe9d1;background:repeating-linear-gradient(35deg,var(--site-announcement-bar-stripe-color1),var(--site-announcement-bar-stripe-color1)20px,var(--site-announcement-bar-stripe-color2)10px,var(--site-announcement-bar-stripe-color2)40px);font-size:20px;font-weight:700}.screen-reader-only{clip:rect(0 0 0 0);clip-path:polygon(0 0,0 0,0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}[data-theme=light] img[src$=\#gh-dark-mode-only],[data-theme=dark] img[src$=\#gh-light-mode-only]{display:none}.test-marker-site-custom-css-unique-rule{content:"site-custom-css-unique-rule"}.video-container{width:100%;max-width:560px;margin:0 auto;position:relative;overflow:hidden}.yt-lite>.lty-playbtn{cursor:pointer;border:0}.dropdown-separator{margin:.3rem 0}.dropdown-archived-versions{padding:.2rem .5rem;font-size:.875rem}.code-block-error-line{margin:0 calc(-1*var(--ifm-pre-padding));padding:0 var(--ifm-pre-padding);background-color:#ff000020;border-left:3px solid #ff000080;display:block}[data-rmiz-modal-overlay=visible]{background-color:#fffffff2}[data-theme=dark] [data-rmiz-modal-overlay=visible]{background-color:#000000f2}html[data-navbar=false] .navbar{display:none}html[data-red-border] div#__docusaurus{border:thick solid red}@media screen and (min-width:1px){html.plugin-docs.plugin-id-docs-tests .red>a{color:red}:is(html.plugin-docs.plugin-id-docs-tests .red>a):after{content:" ";background-image:url(data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMSAxIj4KICA8cGF0aCBkPSJNMCwwaDF2MUgwIiBmaWxsPSIjZjAwIi8+Cjwvc3ZnPgo=);background-size:contain;width:1rem;height:1rem;margin-left:.5rem}html.plugin-docs.plugin-id-docs-tests .navbar{border-bottom:thin solid #0ff}.theme-doc-sidebar-item-link:is(html.plugin-docs.plugin-id-docs-tests .dogfood_sidebar_class_name_test)>a,.theme-doc-sidebar-item-category:is(html.plugin-docs.plugin-id-docs-tests .dogfood_sidebar_class_name_test)>div>a{color:#0ff}.card:is(html.plugin-docs.plugin-id-docs-tests .dogfood_sidebar_class_name_test){border:thin solid #0ff}html.plugin-blog.plugin-id-blog-tests .navbar{border-bottom:thin solid #0f0}html.plugin-pages.plugin-id-pages-tests .navbar{border-bottom:thin solid #ff0}html:has(#navbar-dropdown-tests) .navbar__item.dropdown~a{display:none}}#z-index-test{z-index:100}.test-marker-site-client-module{content:"site-client-module"}.dogfood-image-test-css{background-image:url(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);background-size:contain}.container_tECh{color:#fff;background-color:#18191a;min-height:100vh;padding:80px 20px 20px;overflow-x:hidden}.container_tECh code{color:#fff;background-color:#444950}.nav_sWk6{z-index:1;background-color:#242526;justify-content:space-evenly;align-items:center;width:100%;height:3.75rem;display:flex;position:fixed}.navlink__gTJ{color:#fff;text-align:center;border-radius:4px;padding:6px;font-size:clamp(12px,4vw,16px);font-weight:500}.navlink__gTJ:hover{background-color:#292a2b;-webkit-text-decoration:none;text-decoration:none}.active_Uuwz{background-color:#363739}@media screen and (min-width:800px){.nav_sWk6{float:left;background-color:#18191a;border-right:1px solid #606770;flex-direction:column;justify-content:flex-start;align-items:center;width:200px;height:100vh;padding-top:20px}.navlink__gTJ{text-align:left;width:80%;margin-top:20px}.container_tECh{float:right;width:calc(100% - 200px);padding-top:40px}}.containerParaiso_TYa3{cursor:default;background-color:#292a2b;border-radius:4px;margin-top:10px;padding:10px;font-family:monospace;font-size:13px;position:relative}.basicElementParaiso_DqvR{color:#fff;border-left:1px solid #4f424c;padding:3px 5px 3px 20px}.labelParaiso_l3ql{color:#e7e9db;letter-spacing:.5px;margin-right:3px}.nullValueParaiso_Ey4X{color:#fec418;text-transform:uppercase;background-color:#4f424c;border-radius:3px;padding:1px 2px;font-size:11px;font-weight:700;display:inline-block}.undefinedValueParaiso__T3e{color:#8d8687}.stringValueParaiso_T6i7{color:#f99b15}.booleanValueParaiso__TSh{color:#815ba4}.numberValueParaiso_JGW0{color:#e96ba8}.otherValueParaiso_nnwW,.punctuationParaiso_knwc{color:#fff}.expandIconParaiso_fAkX{color:#815ba4;vertical-align:baseline;margin-right:3px;font-size:22px;line-height:10px;display:inline-block}.collapseIconParaiso_MWEp:after{content:"▾"}.collapseIconParaiso_MWEp{color:#06b6ef;vertical-align:baseline;margin-right:3px;font-size:22px;line-height:10px;display:inline-block}.expandIconParaiso_fAkX:after{content:"▸"}.collapseContentParaiso_KH36{color:#f99b15;cursor:pointer;font-size:18px;line-height:10px}.collapseContentParaiso_KH36:after{content:"..."}.childFieldsContainerParaiso_HB7R{margin:0;padding:0}.listItem_lSSi{background-color:#242526;border-radius:4px;margin-bottom:20px;padding:10px}.sectionTitle_T1wU{margin-top:20px}.listItem_Bobk{background-color:#242526;border-radius:4px;margin-bottom:20px;padding:10px}.version_gVgE{float:right}.name_C0v7{color:#e06b6b;font-weight:800}.listItem_zpSX{background-color:#242526;border-radius:4px;margin-bottom:20px;padding:10px}.route_X3At{margin-bottom:10px}.routeName_j49z{color:#e06b6b}.backToTopButton_PuQw{background-color:var(--ifm-color-emphasis-200);width:3rem;height:3rem;z-index:calc(var(--ifm-z-index-fixed) - 1);box-shadow:var(--ifm-global-shadow-lw);transition:all var(--ifm-transition-fast)var(--ifm-transition-timing-default);opacity:0;visibility:hidden;border-radius:50%;position:fixed;bottom:1.3rem;right:1.3rem;transform:scale(0)}.backToTopButton_PuQw:after{content:" ";-webkit-mask:var(--ifm-menu-link-sublist-icon)50%/2rem 2rem no-repeat;-webkit-mask:var(--ifm-menu-link-sublist-icon)50%/2rem 2rem no-repeat;mask:var(--ifm-menu-link-sublist-icon)50%/2rem 2rem no-repeat;background-color:var(--ifm-color-emphasis-1000);width:100%;height:100%;display:inline-block}@media (hover:hover){.backToTopButton_PuQw:hover{background-color:var(--ifm-color-emphasis-300)}}.backToTopButtonShow_YSA3{opacity:1;visibility:visible;transform:scale(1)}:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:#656c85cc;--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 #ffffff80,0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px #1e235a66;--docsearch-key-pressed-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 1px 0 #1e235a66;--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 #45629b1f}html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:#090a11cc;--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 #0304094d;--docsearch-key-pressed-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 1px 1px 0 #0304094d;--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 #494c6a80,0 -4px 8px 0 #0003;--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}.DocSearch-Button{background:var(--docsearch-searchbox-background);color:var(--docsearch-muted-color);cursor:pointer;-webkit-user-select:none;user-select:none;border:0;border-radius:40px;justify-content:space-between;align-items:center;height:36px;margin:0 0 0 16px;padding:0 8px;font-weight:500;display:flex}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:none}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6px}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{padding:0 12px 0 6px;font-size:1rem}.DocSearch-Button-Keys{min-width:calc(40px + .8em);display:flex}.DocSearch-Button-Key{background:var(--docsearch-key-gradient);box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);border:0;border-radius:3px;justify-content:center;align-items:center;width:20px;height:18px;margin-right:.4em;padding:0 0 2px;transition-property:all;transition-duration:.1s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:flex;position:relative;top:-1px}@media (prefers-reduced-motion){.DocSearch-Button-Key{transition:none}}.DocSearch-Button-Key--pressed{box-shadow:var(--docsearch-key-pressed-shadow);transform:translateY(1px)}@media (max-width:768px){.DocSearch-Button-Keys,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{background-color:var(--docsearch-container-background);z-index:200;width:100vw;height:100vh;position:fixed;top:0;left:0}.DocSearch-Container a{-webkit-text-decoration:none;text-decoration:none}.DocSearch-Link{appearance:none;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;background:0 0;border:0;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);box-shadow:var(--docsearch-modal-shadow);max-width:var(--docsearch-modal-width);border-radius:6px;flex-direction:column;margin:60px auto auto;position:relative}.DocSearch-SearchBar{padding:var(--docsearch-spacing)var(--docsearch-spacing)0;display:flex}.DocSearch-Form{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);height:var(--docsearch-searchbox-height);padding:0 var(--docsearch-spacing);border-radius:4px;align-items:center;width:100%;margin:0;display:flex;position:relative}.DocSearch-Input{appearance:none;color:var(--docsearch-text-color);font:inherit;background:0 0;border:0;outline:none;flex:1;width:80%;height:100%;padding:0 0 0 8px;font-size:1.2em}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button{display:none}.DocSearch-Input::-webkit-search-decoration{display:none}.DocSearch-Input::-webkit-search-results-button{display:none}.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-MagnifierLabel,.DocSearch-Reset{color:var(--docsearch-highlight-color);justify-content:center;align-items:center;display:flex}.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator{display:none}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator{color:var(--docsearch-highlight-color);justify-content:center;align-items:center;display:flex}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{appearance:none;color:var(--docsearch-icon-color);cursor:pointer;stroke-width:var(--docsearch-icon-stroke-width);background:0 0;border:0;border-radius:50%;animation:none;right:0}}.DocSearch-Reset{appearance:none;color:var(--docsearch-icon-color);cursor:pointer;stroke-width:var(--docsearch-icon-stroke-width);background:0 0;border:0;border-radius:50%;padding:2px;animation:.1s ease-in forwards fade-in;right:0}.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{width:24px;height:24px}.DocSearch-Cancel{display:none}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color)var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:0 0}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{margin:0;padding:0;list-style:none}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Help{-webkit-user-select:none;user-select:none;margin:0;font-size:.9em}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{color:var(--docsearch-highlight-color);background:0 0}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing);justify-content:center;font-size:.85em;display:flex}.DocSearch-HitsFooter a{color:inherit;border-bottom:1px solid}.DocSearch-Hit{border-radius:4px;padding-bottom:4px;scroll-margin-top:40px;display:flex;position:relative}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--deleting{transition:none}}.DocSearch-Hit--deleting{opacity:0;transition:all .25s linear}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--favoriting{transition:none}}.DocSearch-Hit--favoriting{transform-origin:top;transition:all .25s linear .25s;transform:scale(0)}.DocSearch-Hit a{background:var(--docsearch-hit-background);box-shadow:var(--docsearch-hit-shadow);padding-left:var(--docsearch-spacing);border-radius:4px;width:100%;display:block}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);z-index:10;margin:0 -4px;padding:8px 4px 0;font-size:.85em;font-weight:600;line-height:32px;position:sticky;top:0}.DocSearch-Hit-Tree{color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;stroke-width:var(--docsearch-icon-stroke-width);width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{-webkit-text-decoration:underline;text-decoration:underline}.DocSearch-Hit-Container{color:var(--docsearch-hit-color);height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing)0 0;flex-direction:row;align-items:center;display:flex}.DocSearch-Hit-icon{width:20px;height:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{color:var(--docsearch-muted-color);stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Hit-action{align-items:center;width:22px;height:22px;display:flex}.DocSearch-Hit-action svg{width:18px;height:18px;display:block}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{appearance:none;color:inherit;cursor:pointer;background:0 0;border:0;border-radius:50%;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:#0003;transition:background-color .1s ease-in}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{transition:none}}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{text-overflow:ellipsis;white-space:nowrap;flex-direction:column;flex:auto;justify-content:center;width:80%;margin:0 8px;font-weight:500;line-height:1.2em;display:flex;position:relative;overflow-x:hidden}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:#0003;transition:none}}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{text-align:center;width:80%;margin:0 auto;padding:36px 0;font-size:.9em}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{text-align:left;padding-bottom:24px;display:inline-block}.DocSearch-NoResults-Prefill-List ul{padding:8px 0 0;display:inline-block}.DocSearch-NoResults-Prefill-List li{list-style-type:"» ";list-style-position:inside}.DocSearch-Prefill{appearance:none;color:var(--docsearch-highlight-color);cursor:pointer;background:0 0;border:0;border-radius:1em;padding:0;font-size:1em;font-weight:700;display:inline-block}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:none;-webkit-text-decoration:underline;text-decoration:underline}.DocSearch-Footer{background:var(--docsearch-footer-background);box-shadow:var(--docsearch-footer-shadow);height:var(--docsearch-footer-height);padding:0 var(--docsearch-spacing);-webkit-user-select:none;user-select:none;z-index:300;border-radius:0 0 8px 8px;flex-direction:row-reverse;flex-shrink:0;justify-content:space-between;align-items:center;width:100%;display:flex;position:relative}.DocSearch-Commands{color:var(--docsearch-muted-color);margin:0;padding:0;list-style:none;display:flex}.DocSearch-Commands li{align-items:center;display:flex}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{background:var(--docsearch-key-gradient);box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);border:0;border-radius:2px;justify-content:center;align-items:center;width:20px;height:18px;margin-right:.4em;padding:0 0 1px;display:flex}.DocSearch-VisuallyHiddenForAccessibility{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (max-width:768px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh,1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;position:absolute;bottom:0}.DocSearch-Hit-content-wrapper{width:80%;display:flex;position:relative}.DocSearch-Modal{box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh,1vh)*100);border-radius:0;width:100%;max-width:100%;margin:0}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh,1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{appearance:none;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin-left:var(--docsearch-spacing);-webkit-user-select:none;user-select:none;white-space:nowrap;background:0 0;border:0;outline:none;flex:none;padding:0;font-size:1em;font-weight:500;display:inline-block;overflow:hidden}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}:root{--docsearch-primary-color:var(--ifm-color-primary);--docsearch-text-color:var(--ifm-font-color-base)}.DocSearch-Button{transition:all var(--ifm-transition-fast)var(--ifm-transition-timing-default);margin:0}.DocSearch-Container{z-index:calc(var(--ifm-z-index-fixed) + 1)}.apiTable_e8hp{font-size:small}.apiTable_e8hp tbody tr{transition:box-shadow .2s}.apiTable_e8hp tbody tr:focus,.apiTable_e8hp tbody tr:hover{box-shadow:0 0 7px 0 inset var(--ifm-color-warning);cursor:pointer;outline:none;transition:box-shadow .2s}.apiTable_e8hp code{cursor:text}.yt-lite{contain:content;cursor:pointer;background-color:#000;background-position:50%;background-size:cover;display:block;position:relative}.yt-lite.lyt-activated:before{content:"";box-sizing:content-box;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);background-position:top;background-repeat:repeat-x;width:100%;height:60px;padding-bottom:50px;transition:all .2s cubic-bezier(0,0,.2,1);display:block;position:absolute;top:0}.yt-lite:after{content:"";padding-bottom:var(--aspect-ratio);display:block}.yt-lite>iframe{width:100%;height:100%;position:absolute;top:0;left:0}.yt-lite>.lty-playbtn{z-index:1;opacity:.8;background-color:#212121;border-radius:14%;width:70px;height:46px;transition:all .2s cubic-bezier(0,0,.2,1)}.yt-lite:hover>.lty-playbtn{opacity:1;background-color:red}.yt-lite>.lty-playbtn:before{content:"";border:11px solid #0000;border-left:19px solid #fff;border-right-width:0}.yt-lite>.lty-playbtn,.yt-lite>.lty-playbtn:before{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.yt-lite.lyt-activated{cursor:unset}.yt-lite.lyt-activated:before,.yt-lite.lyt-activated>.lty-playbtn{opacity:0;pointer-events:none}.skipToContent_UHvc{z-index:calc(var(--ifm-z-index-fixed) + 1);padding:calc(var(--ifm-global-spacing)/2)var(--ifm-global-spacing);color:var(--ifm-color-emphasis-900);background-color:var(--ifm-background-surface-color);position:fixed;top:1rem;left:100%}.skipToContent_UHvc:focus{box-shadow:var(--ifm-global-shadow-md);left:1rem}.closeButton_nmpN{padding:0;line-height:0}.content_ttnW{text-align:center;padding:5px 0;font-size:85%}.content_ttnW a{color:inherit;-webkit-text-decoration:underline;text-decoration:underline}:root{--docusaurus-announcement-bar-height:auto}.announcementBar_cTOO{height:var(--docusaurus-announcement-bar-height);background-color:var(--ifm-color-white);color:var(--ifm-color-black);border-bottom:1px solid var(--ifm-color-emphasis-100);align-items:center;display:flex}html[data-announcement-bar-initially-dismissed=true] .announcementBar_cTOO{display:none}.announcementBarPlaceholder_Lqfg{flex:0 0 10px}.announcementBarClose_UFLi{flex:0 0 30px;align-self:stretch}.announcementBarContent_PjqA{flex:auto}@media print{.announcementBar_cTOO{display:none}}@media (min-width:997px){:root{--docusaurus-announcement-bar-height:30px}.announcementBarPlaceholder_Lqfg,.announcementBarClose_UFLi{flex-basis:50px}}.toggle_bT41{width:2rem;height:2rem}.toggleButton_x9TT{-webkit-tap-highlight-color:transparent;width:100%;height:100%;transition:background var(--ifm-transition-fast);border-radius:50%;justify-content:center;align-items:center;display:flex}.toggleButton_x9TT:hover{background:var(--ifm-color-emphasis-200)}.toggleIcon_nCQi{display:none}[data-theme-choice=system] .systemToggleIcon_IWwm,[data-theme-choice=light] .lightToggleIcon_dnYY,[data-theme-choice=dark] .darkToggleIcon_OBbf{display:initial}.toggleButtonDisabled_Dj8q{cursor:not-allowed}.darkNavbarColorModeToggle_JF8j:hover{background:var(--ifm-color-gray-800)}.tabList_Qoir{margin-bottom:var(--ifm-leading)}.tabItem_AQgk{margin-top:0!important}.themedComponent_bJGS{display:none}[data-theme=light] .themedComponent--light_LEkC,[data-theme=dark] .themedComponent--dark_jnGk,html:not([data-theme]) .themedComponent--light_LEkC{display:initial}:root{--docusaurus-collapse-button-bg:transparent;--docusaurus-collapse-button-bg-hover:#0000001a}[data-theme=dark]:root{--docusaurus-collapse-button-bg:#ffffff0d;--docusaurus-collapse-button-bg-hover:#ffffff1a}@media (min-width:997px){.collapseSidebarButton_PUyN{background-color:var(--docusaurus-collapse-button-bg);border:1px solid var(--ifm-toc-border-color);border-radius:0;height:40px;position:sticky;bottom:0;display:block!important}.collapseSidebarButtonIcon_DI0B{margin-top:4px;transform:rotate(180deg)}[dir=rtl] .collapseSidebarButtonIcon_DI0B{transform:rotate(0)}.collapseSidebarButton_PUyN:hover,.collapseSidebarButton_PUyN:focus{background-color:var(--docusaurus-collapse-button-bg-hover)}}.collapseSidebarButton_PUyN{margin:0;display:none}.tabItem_pnkT>:last-child{margin-bottom:0}.iconExternalLink_Rdzz{margin-left:.3rem}.menuExternalLink_zaS2{align-items:center}@media (min-width:997px){.menuHtmlItem_t1vY{padding:var(--ifm-menu-link-padding-vertical)var(--ifm-menu-link-padding-horizontal)}.menu_rWGR{flex-grow:1;padding:.5rem}@supports (scrollbar-gutter:stable){.menu_rWGR{scrollbar-gutter:stable;padding:.5rem 0 .5rem .5rem}}.menuWithAnnouncementBar_Pf08{margin-bottom:var(--docusaurus-announcement-bar-height)}.sidebar_vtcw{height:100%;padding-top:var(--ifm-navbar-height);width:var(--doc-sidebar-width);flex-direction:column;display:flex}.sidebarWithHideableNavbar_tZ9s{padding-top:0}.sidebarHidden_PrHU{opacity:0;visibility:hidden}.sidebarLogo_UK0N{margin:0 var(--ifm-navbar-padding-horizontal);min-height:var(--ifm-navbar-height);max-height:var(--ifm-navbar-height);align-items:center;color:inherit!important;-webkit-text-decoration:none!important;text-decoration:none!important;display:flex!important}.sidebarLogo_UK0N img{height:2rem;margin-right:.5rem}}.sidebarLogo_UK0N{display:none}@media (min-width:997px){.expandButton_ockD{width:100%;height:100%;transition:background-color var(--ifm-transition-fast)ease;background-color:var(--docusaurus-collapse-button-bg);justify-content:center;align-items:center;display:flex;position:absolute;top:0;right:0}.expandButton_ockD:hover,.expandButton_ockD:focus{background-color:var(--docusaurus-collapse-button-bg-hover)}.expandButtonIcon_H1n0{transform:rotate(0)}[dir=rtl] .expandButtonIcon_H1n0{transform:rotate(180deg)}}:root{--doc-sidebar-width:300px;--doc-sidebar-hidden-width:30px}.docSidebarContainer_S51O{display:none}@media (min-width:997px){.docSidebarContainer_S51O{width:var(--doc-sidebar-width);margin-top:calc(-1*var(--ifm-navbar-height));border-right:1px solid var(--ifm-toc-border-color);will-change:width;transition:width var(--ifm-transition-fast)ease;clip-path:inset(0);display:block}.docSidebarContainerHidden_gbDM{width:var(--doc-sidebar-hidden-width);cursor:pointer}.sidebarViewport_K3q9{height:100%;max-height:100vh;position:sticky;top:0}}.docMainContainer_EfwR{width:100%;display:flex}@media (min-width:997px){.docMainContainer_EfwR{max-width:calc(100% - var(--doc-sidebar-width));flex-grow:1}.docMainContainerEnhanced_r8nV{max-width:calc(100% - var(--doc-sidebar-hidden-width))}.docItemWrapperEnhanced_nA1F{max-width:calc(var(--ifm-container-width) + var(--doc-sidebar-width))!important}}.docRoot_kBZ6{width:100%;display:flex}.docsWrapper_lLmf{flex:1 0 auto;display:flex}.dropdownNavbarItemMobile_nhRg{cursor:pointer}.browserWindow_my1Q{border:3px solid var(--ifm-color-emphasis-200);border-radius:var(--ifm-global-radius);box-shadow:var(--ifm-global-shadow-lw);margin-bottom:var(--ifm-leading)}.browserWindowHeader_jXSR{background:var(--ifm-color-emphasis-200);align-items:center;padding:.5rem 1rem;display:flex}.row_KZDM:after{content:"";clear:both;display:table}.buttons_uHc7{white-space:nowrap}.right_oyze{align-self:center;width:10%}[data-theme=light]{--ifm-background-color:#fff}.browserWindowAddressBar_Pd8y{background-color:var(--ifm-background-color);color:var(--ifm-color-gray-800);-webkit-user-select:none;user-select:none;border-radius:12.5px;flex:1 0;margin:0 1rem 0 .5rem;padding:5px 15px;font:400 13px Arial,sans-serif}[data-theme=dark] .browserWindowAddressBar_Pd8y{color:var(--ifm-color-gray-300)}.dot_giz1{background-color:#bbb;border-radius:50%;width:12px;height:12px;margin-top:4px;margin-right:6px;display:inline-block}.browserWindowMenuIcon_Vhuh{margin-left:auto}.bar_rrRL{background-color:#aaa;width:17px;height:3px;margin:3px 0;display:block}.browserWindowBody_Idgs{background-color:var(--ifm-background-color);border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;padding:1rem}.browserWindowBody_Idgs>:last-child{margin-bottom:0}.red_FE5X{color:red}.red_FE5X[aria-selected=true]{border-bottom-color:red}.orange_kp8w{color:orange}.orange_kp8w[aria-selected=true]{border-bottom-color:orange}.yellow_uGry{color:#ff0}.yellow_uGry[aria-selected=true]{border-bottom-color:#ff0}.cssCarousel_jWvs{position:relative}.cssCarouselSlider_nIAN{scroll-snap-type:x mandatory;scrollbar-width:none;display:flex;overflow:scroll hidden}.cssCarouselItem_GXZ2{scroll-snap-align:start;flex-shrink:0;width:100%;height:100%}.cssCarouselContent_dGP2{width:100%;height:100%;position:relative}.navButton_qSul{color:#fff;width:2.6rem;height:2.6rem;transition:all var(--ifm-transition-fast)var(--ifm-transition-timing-default);background-color:#0000004d;border:0;border-radius:50%;justify-content:center;align-items:center;font-size:1rem;font-weight:700;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.navButton_qSul:hover{background-color:#00000073}.navButton_qSul.navButtonNext_yu77{right:.1rem}.navButton_qSul.navButtonPrev_SxeT{left:.1rem}.siteSlide_AwQk{position:relative}.siteLink_IglZ{--ifm-link-color:var(--ifm-color-gray-400);transition:all var(--ifm-transition-fast)var(--ifm-transition-timing-default);background-color:#0000004d;border-radius:6px;padding:0 12px;font-size:16px;position:absolute;bottom:2px;right:2px}.siteLink_IglZ:hover{--ifm-link-color:var(--ifm-color-gray-200);--ifm-link-hover-color:var(--ifm-color-gray-200);--ifm-link-hover-decoration:none;background-color:#00000073}@media only screen and (max-width:768px){.siteLink_IglZ{padding:0 8px;font-size:12px}}.wrappingBlock_S4U4{vertical-align:top;width:50%;padding:5px;display:inline-block}.wrappingBlock_S4U4 code[class^=codeBlockLines]{white-space:pre-wrap}.tableOfContentsInline_2sru ul{font-size:initial;padding-top:0;list-style-type:disc}.tocCollapsibleButton_IbtT{font-size:inherit;justify-content:space-between;align-items:center;width:100%;padding:.4rem .8rem;display:flex}.tocCollapsibleButton_IbtT:after{content:"";background:var(--ifm-menu-link-sublist-icon)50% 50%/2rem 2rem no-repeat;filter:var(--ifm-menu-link-sublist-icon-filter);width:1.25rem;height:1.25rem;transition:transform var(--ifm-transition-fast);transform:rotate(180deg)}.tocCollapsibleButtonExpanded_Nor3:after{transform:none}.tocCollapsible_BEWm{background-color:var(--ifm-menu-color-background-active);border-radius:var(--ifm-global-radius);margin:1rem 0}.tocCollapsibleContent_FG8F>ul{border-left:none;border-top:1px solid var(--ifm-color-emphasis-300);padding:.2rem 0;font-size:15px}.tocCollapsibleContent_FG8F ul li{margin:.4rem .8rem}.tocCollapsibleContent_FG8F a{display:block}.tocCollapsibleExpanded_FzA_{transform:none}.iconLanguage_tqOs{vertical-align:text-bottom;margin-right:5px}.navbarSearchContainer_dDCC:empty{display:none}@media (max-width:996px){.navbarSearchContainer_dDCC{right:var(--ifm-navbar-padding-horizontal);position:absolute}}@media (min-width:997px){.navbarSearchContainer_dDCC{padding:var(--ifm-navbar-item-padding-vertical)var(--ifm-navbar-item-padding-horizontal)}}.navbarHideable_uAgx{transition:transform var(--ifm-transition-fast)ease}.navbarHidden_QgM6{transform:translateY(calc(-100% - 2px))}@media (max-width:996px){.colorModeToggle_UolE{display:none}}.anchorWithStickyNavbar_rB0w{scroll-margin-top:calc(var(--ifm-navbar-height) + .5rem)}.anchorWithHideOnScrollNavbar_SSbb{scroll-margin-top:.5rem}.hash-link{opacity:0;transition:opacity var(--ifm-transition-fast);-webkit-user-select:none;user-select:none;padding-left:.5rem}.hash-link:before{content:"#"}.hash-link:focus,:hover>.hash-link{opacity:1}.cardContainer_Uewx{--ifm-link-color:var(--ifm-color-emphasis-800);--ifm-link-hover-color:var(--ifm-color-emphasis-700);--ifm-link-hover-decoration:none;border:1px solid var(--ifm-color-emphasis-200);transition:all var(--ifm-transition-fast)ease;transition-property:border,box-shadow;box-shadow:0 1.5px 3px #00000026}.cardContainer_Uewx:hover{border-color:var(--ifm-color-primary);box-shadow:0 3px 6px #0003}.cardContainer_Uewx :last-child{margin-bottom:0}.cardTitle_dwRT{font-size:1.2rem}.cardDescription_mCBT{font-size:.8rem}.docCardListItem_hvcp{margin-bottom:2rem}.docCardListItem_hvcp>*{height:100%}.errorBoundaryError_rP1m{white-space:pre-wrap;color:red}.errorBoundaryFallback_heah{color:red;padding:.55rem}body:not(.navigation-with-keyboard) :not(input):focus{outline:none}#__docusaurus-base-url-issue-banner-container{display:none}.footerLogoLink_CiM_{opacity:.5;transition:opacity var(--ifm-transition-fast)var(--ifm-transition-timing-default)}.footerLogoLink_CiM_:hover{opacity:1}html,body{height:100%}.mainWrapper_PEsc{flex-direction:column;flex:1 0 auto;display:flex}.docusaurus-mt-lg{margin-top:3rem}#__docusaurus{flex-direction:column;min-height:100%;display:flex}.test-marker-theme-layout_zWhB{content:"theme-layout"}.sidebar_P3nc{max-height:calc(100vh - (var(--ifm-navbar-height) + 2rem));top:calc(var(--ifm-navbar-height) + 2rem);position:sticky;overflow-y:auto}.sidebarItemTitle_VrjY{font-size:var(--ifm-h3-font-size);font-weight:var(--ifm-font-weight-bold)}.sidebarItemList_OSkG{font-size:.9rem}.sidebarItem_WJ0y{margin-top:.7rem}.sidebarItemLink_Qrfg{color:var(--ifm-font-color-base);display:block}.sidebarItemLink_Qrfg:hover{-webkit-text-decoration:none;text-decoration:none}.sidebarItemLinkActive_nUeK{color:var(--ifm-color-primary)!important}@media (max-width:996px){.sidebar_P3nc{display:none}}.yearGroupHeading_lECJ{margin-top:1.6rem;margin-bottom:.4rem}.yearGroupHeading_Ruz9{margin:1rem .75rem .5rem}.title_UBNu{font-size:3rem}@media (max-width:576px){.title_UBNu{font-size:2rem}}.container_x5Un{font-size:.9rem}[data-theme=dark] .githubSvg_jqE4{fill:var(--light)}[data-theme=light] .githubSvg_jqE4{fill:var(--dark)}[data-theme=dark] .xSvg_Q0g7{fill:var(--light)}[data-theme=light] .xSvg_Q0g7{fill:var(--dark)}[data-theme=dark] .instagramSvg_Svcp{fill:var(--light)}[data-theme=light] .instagramSvg_Svcp{fill:var(--dark)}[data-theme=dark] .threadsSvg_kngY{fill:var(--light)}[data-theme=light] .threadsSvg_kngY{fill:var(--dark)}:root{--docusaurus-blog-social-icon-size:1rem}.authorSocials_tPnL{height:var(--docusaurus-blog-social-icon-size);line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;flex-wrap:wrap;align-items:center;line-height:0;display:flex;overflow:hidden}.authorSocialLink_hEWM{height:var(--docusaurus-blog-social-icon-size);width:var(--docusaurus-blog-social-icon-size);margin-right:.4rem;line-height:0}.authorSocialIcon_hTX6{width:var(--docusaurus-blog-social-icon-size);height:var(--docusaurus-blog-social-icon-size)}.authorImage_p8ow{--ifm-avatar-photo-size:3.6rem}.author-as-h1_Pd3R .authorImage_p8ow{--ifm-avatar-photo-size:7rem}.author-as-h2_UaZL .authorImage_p8ow{--ifm-avatar-photo-size:5.4rem}.authorDetails_dWdF{flex-direction:column;justify-content:space-around;align-items:flex-start;display:flex}.authorName_Y8Hr{flex-direction:row;font-size:1.1rem;line-height:1.1rem;display:flex}.author-as-h1_Pd3R .authorName_Y8Hr{font-size:2.4rem;line-height:2.4rem;display:inline}.author-as-h2_UaZL .authorName_Y8Hr{font-size:1.4rem;line-height:1.4rem;display:inline}.authorTitle_Slpj{line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-size:.8rem;line-height:1rem;display:-webkit-box;overflow:hidden}.author-as-h1_Pd3R .authorTitle_Slpj{font-size:1.2rem;line-height:1.6rem}.author-as-h2_UaZL .authorTitle_Slpj{font-size:1rem;line-height:1.3rem}.authorBlogPostCount_FxU_{background:var(--ifm-color-secondary);color:var(--ifm-color-black);border-radius:var(--ifm-global-radius);margin-left:.3rem;padding:.1rem .4rem;font-size:.8rem;line-height:1.2}.authorCol_bvyx{max-width:inherit!important}.imageOnlyAuthorRow_L2DM{flex-flow:wrap;display:flex}.imageOnlyAuthorCol_oyze{margin-left:.3rem;margin-right:.3rem}.searchQueryInput_S_pS,.searchVersionInput_RZ74{border-radius:var(--ifm-global-radius);border:2px solid var(--ifm-toc-border-color);font:var(--ifm-font-size-base)var(--ifm-font-family-base);background:var(--docsearch-searchbox-focus-background);width:100%;color:var(--docsearch-text-color);transition:border var(--ifm-transition-fast)ease;margin-bottom:.5rem;padding:.8rem}.searchQueryInput_S_pS:focus,.searchVersionInput_RZ74:focus{border-color:var(--docsearch-primary-color);outline:none}.searchQueryInput_S_pS::placeholder{color:var(--docsearch-muted-color)}.searchResultsColumn_dGxU{font-size:.9rem;font-weight:700}.algoliaLogo_nq6Q{max-width:150px}.algoliaLogoPathFill_IWVH{fill:var(--ifm-font-color-base)}.searchResultItem_jZK3{border-bottom:1px solid var(--ifm-toc-border-color);padding:1rem 0}.searchResultItemHeading_Nbvf{margin-bottom:0;font-weight:400}.searchResultItemPath_wcJo{color:var(--ifm-color-content-secondary);--ifm-breadcrumb-separator-size-multiplier:1;font-size:.8rem}.searchResultItemSummary_HbIg{margin:.5rem 0 0;font-style:italic}@media only screen and (max-width:996px){.searchQueryColumn_ourN{max-width:60%!important}.searchVersionColumn_n2Lb{max-width:40%!important}.searchResultsColumn_dGxU{max-width:60%!important}.searchLogoColumn_v5Xz{max-width:40%!important;padding-left:0!important}}@media screen and (max-width:576px){.searchQueryColumn_ourN{max-width:100%!important}.searchVersionColumn_n2Lb{max-width:100%!important;padding-left:var(--ifm-spacing-horizontal)!important}}.loadingSpinner_Jw0H{border:.4em solid #eee;border-top-color:var(--ifm-color-primary);border-radius:50%;width:3rem;height:3rem;margin:0 auto;animation:1s linear infinite loading-spin_vmq3}@keyframes loading-spin_vmq3{to{transform:rotate(360deg)}}.loader_rYmk{margin-top:2rem}.search-result-match{color:var(--docsearch-hit-color);background:#ffd78e40;padding:.09em 0}.tweet_x2tn{font-size:15px}.tweetMeta_fAxr{color:var(--ifm-color-emphasis-700)}.tweetMeta_fAxr strong{color:var(--ifm-font-color-base)}.section_rC2D{padding:40px 0}.sectionAlt_XiGz{background-color:var(--ifm-color-emphasis-100)}.sectionInner_Y4r1{margin:0 auto}.featureImage_yA8i{width:auto;max-height:128px;margin:0 auto}.featureHeading_TLGJ{font-size:var(--ifm-h3-font-size);padding-top:1rem}.announcement_FsS0{text-align:center;margin:0 auto;padding:48px;font-size:24px;font-weight:700}.announcementDark_tzC4{color:#fff;--ifm-link-color:var(--ifm-color-primary);background-color:#20232a}.announcementInner_RsrQ{max-width:768px;margin:0 auto}.topBanner_JYZy{text-align:center;flex-direction:column;align-items:center;max-width:900px;margin:0 auto;padding:30px 20px;font-size:20px;display:flex}.topBannerTitle_nAZL{margin-bottom:.4rem;font-size:54px;font-weight:700}@media only screen and (max-width:768px){.topBannerTitle_nAZL{font-size:40px}}.topBannerTitleText_Ferb{background:linear-gradient(90deg,#833ab4 0%,#fd1d1d 50%,#fcb045 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.topBannerTitleText_Ferb:hover{border-color:#9800ff;border-bottom-style:solid;border-bottom-width:2px}html[data-theme=dark] .topBannerTitleText_Ferb{background:linear-gradient(90deg,#9800ff 0%,#f62929 50%,#ffa908 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.topBannerDescription_fLgs{font-size:20px}@media only screen and (max-width:768px){.topBannerDescription_fLgs{white-space:normal;font-size:16px}}.hero_syme{background-color:#2b3137;padding:48px}.heroInner_VWeJ{max-width:1100px;margin:0 auto;padding:0 20px}.heroProjectTagline_EkV5{color:#fff;margin:0;font-size:60px}.heroTitleTextHtml_zYwv b{color:var(--ifm-color-primary)}@keyframes jack-in-the-box_cF72{0%{opacity:0;transform-origin:bottom;transform:scale(.1)rotate(30deg)}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}.heroLogo_jM6J{float:right;height:auto;margin-top:20px;padding:0 20px 20px;animation-name:jack-in-the-box_cF72;animation-duration:2s}.indexCtas_hUA_{--ifm-button-size-multiplier:1.6;flex-wrap:wrap;align-items:center;margin-top:24px;display:flex}.indexCtas_hUA_ a,.indexCtas_hUA_ a:hover{color:#000}.indexCtas_hUA_ a:last-of-type{margin:20px 36px}.indexCtasGitHubButtonWrapper_AOht{display:flex}.indexCtasGitHubButton_sMIS{overflow:hidden}.indexCtaTryNowButton_wlFR:hover{color:var(--ifm-color-primary)}@media only screen and (max-width:768px){.hero_syme{padding-left:20px;padding-right:20px}.heroInner_VWeJ{padding:0}.heroProjectTagline_EkV5{text-align:center;font-size:36px}.heroLogo_jM6J{float:none;margin:0 auto;display:block}.indexCtas_hUA_{justify-content:center}.indexCtas_hUA_ a{margin:20px 36px}.indexCtasGitHubButton_sMIS{display:none}}.tweetsSection_Fqsy>.col>*{margin-bottom:2rem}@media (max-width:996px){.tweetsSection_Fqsy>.col:last-child>:last-child{margin-bottom:0}}@media (min-width:997px){.tweetsSection_Fqsy>.col>:last-child{margin-bottom:0}}.test-marker-site-index-page_LJ7R{content:"site-index-page"}.main_LiBd{padding:var(--ifm-spacing-horizontal);background:var(--site-color-feedback-background);border-radius:4px;min-height:500px}.authorListItem_Y1Zl{margin-bottom:2rem;list-style-type:none}.searchBar_E3wW{margin-left:auto}.searchBar_E3wW input{border:1px solid gray;border-radius:15px;height:30px;padding:10px}.svg_d33c{-webkit-user-select:none;user-select:none;color:#e9669e;fill:currentColor;width:1em;height:1em;display:inline-block}.small_xkoK{font-size:1rem}.medium_J4if{font-size:1.25rem}.large_G4cM{font-size:1.8rem}.showcaseCardImage_wjKy{border-bottom:2px solid var(--ifm-color-emphasis-200);height:150px;overflow:hidden}.showcaseCardHeader_H8b9{align-items:center;margin-bottom:12px;display:flex}.showcaseCardTitle_ZxTI{flex:auto;margin-bottom:0}.showcaseCardTitle_ZxTI a{background:linear-gradient(var(--ifm-color-primary),var(--ifm-color-primary))0% 100%/0% 1px no-repeat;-webkit-text-decoration:none;text-decoration:none;transition:background-size .2s ease-out}.showcaseCardTitle_ZxTI a:not(:focus):hover{background-size:100% 1px}.showcaseCardTitle_ZxTI,.showcaseCardHeader_H8b9{margin-right:.25rem}.showcaseCardSrcBtn_F6t0{border:none;margin-left:6px;padding-left:12px;padding-right:12px}.showcaseCardSrcBtn_F6t0:focus-visible{background-color:var(--ifm-color-secondary-dark)}[data-theme=dark] .showcaseCardSrcBtn_F6t0{color:inherit;background-color:var(--ifm-color-emphasis-200)!important}[data-theme=dark] .showcaseCardSrcBtn_F6t0:hover{background-color:var(--ifm-color-emphasis-300)!important}.showcaseCardBody_bvOP{font-size:smaller;line-height:1.66}.cardFooter_Xq1d{flex-wrap:wrap;display:flex}.tag_jo6t{border:1px solid var(--ifm-color-secondary-darkest);cursor:default;border-radius:12px;align-items:center;margin-right:6px;font-size:.675rem;display:inline-flex;margin-bottom:6px!important}.tag_jo6t .textLabel_lQex{margin-left:8px}.tag_jo6t .colorLabel_D_Fl{border-radius:50%;width:7px;height:7px;margin-left:6px;margin-right:6px}.cardList_kMxr{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;display:grid}.showcaseFavorite_LFys{background-color:#f6fdfd;padding-top:2rem;padding-bottom:2rem}html[data-theme=dark] .showcaseFavorite_LFys{background-color:#232525}.headingFavorites_LTro{align-items:center;display:flex}.checkboxLabel_vxMa:hover{opacity:1;box-shadow:0 0 2px 1px var(--ifm-color-secondary-darkest)}input[type=checkbox]+.checkboxLabel_vxMa{cursor:pointer;opacity:.85;border:2px solid var(--ifm-color-secondary-darkest);border-radius:4px;align-items:center;padding:.275rem .8rem;line-height:1.5;transition:opacity .2s ease-out;display:flex}input:focus-visible+.checkboxLabel_vxMa{outline:2px solid}input:checked+.checkboxLabel_vxMa{opacity:.9;border:2px solid var(--ifm-color-primary-darkest);background-color:#94e1d040}input:checked+.checkboxLabel_vxMa:hover{opacity:.75;box-shadow:0 0 2px 1px var(--ifm-color-primary-dark)}html[data-theme=dark] input:checked+.checkboxLabel_vxMa{background-color:#94e1d01a}.checkboxLabel_DiOL{--height:25px;--width:80px;--border:2px;width:var(--width);height:var(--height);border-radius:var(--height);border:var(--border)solid var(--ifm-color-primary-darkest);cursor:pointer;opacity:.75;transition:opacity var(--ifm-transition-fast)var(--ifm-transition-timing-default);box-shadow:var(--ifm-global-shadow-md);justify-content:space-around;display:flex;position:relative}.checkboxLabel_DiOL:hover{opacity:1;box-shadow:var(--ifm-global-shadow-md),0 0 2px 1px var(--ifm-color-primary-dark)}.checkboxLabel_DiOL:after{content:"";width:calc(var(--width)/2);border-radius:var(--height);background-color:var(--ifm-color-primary-darkest);height:100%;transition:transform var(--ifm-transition-fast)var(--ifm-transition-timing-default);transform:translateX(calc(var(--width)/2 - var(--border)));position:absolute;inset:0}input:focus-visible~.checkboxLabel_DiOL:after{outline:2px solid}.checkboxLabel_DiOL>*{color:inherit;font-size:.8rem;transition:opacity .15s ease-in 50ms}input:checked~.checkboxLabel_DiOL:after{transform:translateX(calc(-1*var(--border)))}.headingRow_DGKw{justify-content:space-between;align-items:center;display:flex}.headingText_iR0x{align-items:baseline;display:flex}.headingText_iR0x>h2{margin-bottom:0}.headingText_iR0x>span{margin-left:8px}.headingButtons_DX79{align-items:center;display:flex}.headingButtons_DX79>*{margin-left:8px}.tagList_Ku_M{flex-wrap:wrap;align-items:center;display:flex}.tagListItem_aQcS{-webkit-user-select:none;user-select:none;white-space:nowrap;height:32px;margin-top:.5rem;margin-right:.5rem;font-size:.8rem}.tagListItem_aQcS:last-child{margin-right:0}.codeBlockContainer_jDV4{background:var(--prism-background-color);color:var(--prism-color);margin-bottom:var(--ifm-leading);box-shadow:var(--ifm-global-shadow-lw);border-radius:var(--ifm-code-border-radius)}.codeBlock_Gebt{--ifm-pre-background:var(--prism-background-color);margin:0;padding:0}.codeBlockStandalone_i_cY{padding:0}.codeBlockLines_FJaf{font:inherit;float:left;min-width:100%;padding:var(--ifm-pre-padding)}.codeBlockLinesWithNumbering_FU9Q{padding:var(--ifm-pre-padding)0;display:table}@media print{.codeBlockLines_FJaf{white-space:pre-wrap}}:where(:root){--docusaurus-highlighted-code-line-bg:#484d5b}:where([data-theme=dark]){--docusaurus-highlighted-code-line-bg:#646464}.theme-code-block-highlighted-line{background-color:var(--docusaurus-highlighted-code-line-bg);margin:0 calc(-1*var(--ifm-pre-padding));padding:0 var(--ifm-pre-padding);display:block}.codeLine_qRmp{counter-increment:line-count;display:table-row}.codeLineNumber_dS_J{text-align:right;width:1%;padding:0 var(--ifm-pre-padding);background:var(--ifm-pre-background);overflow-wrap:normal;display:table-cell;position:sticky;left:0}.codeLineNumber_dS_J:before{content:counter(line-count);opacity:.4}.theme-code-block-highlighted-line .codeLineNumber_dS_J:before{opacity:.8}.codeLineContent_XF5l{padding-right:var(--ifm-pre-padding)}.theme-code-block:hover .copyButtonCopied_wDuR{opacity:1!important}.copyButtonIcons_gMWc{width:1.125rem;height:1.125rem;position:relative}.copyButtonIcon_GXfb,.copyButtonSuccessIcon_ktUX{fill:currentColor;opacity:inherit;width:inherit;height:inherit;transition:all var(--ifm-transition-fast)ease;position:absolute;top:0;left:0}.copyButtonSuccessIcon_ktUX{opacity:0;color:#00d600;top:50%;left:50%;transform:translate(-50%,-50%)scale(.33)}.copyButtonCopied_wDuR .copyButtonIcon_GXfb{opacity:0;transform:scale(.33)}.copyButtonCopied_wDuR .copyButtonSuccessIcon_ktUX{opacity:1;transition-delay:75ms;transform:translate(-50%,-50%)scale(1)}.wordWrapButtonIcon___5r{width:1.2rem;height:1.2rem}.wordWrapButtonEnabled_nam_ .wordWrapButtonIcon___5r{color:var(--ifm-color-primary)}.buttonGroup_KXnS{-moz-column-gap:.2rem;right:calc(var(--ifm-pre-padding)/2);top:calc(var(--ifm-pre-padding)/2);column-gap:.2rem;display:flex;position:absolute}.buttonGroup_KXnS button{background:var(--prism-background-color);color:var(--prism-color);border:1px solid var(--ifm-color-emphasis-300);border-radius:var(--ifm-global-radius);transition:opacity var(--ifm-transition-fast)ease-in-out;opacity:0;align-items:center;padding:.4rem;line-height:0;display:flex}.buttonGroup_KXnS button:focus-visible,.buttonGroup_KXnS button:hover{opacity:1!important}.theme-code-block:hover .buttonGroup_KXnS button{opacity:.4}.codeBlockContent_cKMj{border-radius:inherit;direction:ltr;position:relative}.codeBlockTitle_U6Q0{border-bottom:1px solid var(--ifm-color-emphasis-300);font-size:var(--ifm-code-font-size);padding:.75rem var(--ifm-pre-padding);border-top-left-radius:inherit;border-top-right-radius:inherit;font-weight:500}.codeBlockTitle_U6Q0+.codeBlockContent_cKMj .codeBlock_QST6{border-top-left-radius:0;border-top-right-radius:0}.playgroundContainer_TDLX{margin-bottom:var(--ifm-leading);border-radius:var(--ifm-global-radius);box-shadow:var(--ifm-global-shadow-lw);overflow:hidden}.playgroundHeader_h_Hu{letter-spacing:.08rem;text-transform:uppercase;background:var(--ifm-color-emphasis-200);color:var(--ifm-color-content);font-weight:700;font-size:var(--ifm-code-font-size);padding:.75rem}.playgroundHeader_h_Hu:first-of-type{background:var(--ifm-color-emphasis-700);color:var(--ifm-color-content-inverse)}.playgroundPreview_u2xE{background-color:var(--ifm-pre-background);padding:1rem}:root{--docusaurus-tag-list-border:var(--ifm-color-emphasis-300)}.tag_Nd8t{border:1px solid var(--docusaurus-tag-list-border);transition:border var(--ifm-transition-fast)}.tag_Nd8t:hover{--docusaurus-tag-list-border:var(--ifm-link-color);-webkit-text-decoration:none;text-decoration:none}.tagRegular_TiLs{border-radius:var(--ifm-global-radius);padding:.2rem .5rem .3rem;font-size:90%}.tagWithCount_AQg7{border-left:0;align-items:center;padding:0 .5rem 0 1rem;display:flex;position:relative}.tagWithCount_AQg7:before,.tagWithCount_AQg7:after{content:"";border:1px solid var(--docusaurus-tag-list-border);transition:inherit;position:absolute;top:50%}.tagWithCount_AQg7:before{border-bottom:0;border-right:0;width:1.18rem;height:1.18rem;right:100%;transform:translate(50%,-50%)rotate(-45deg)}.tagWithCount_AQg7:after{border-radius:50%;width:.5rem;height:.5rem;left:0;transform:translateY(-50%)}.tagWithCount_AQg7 span{background:var(--ifm-color-secondary);color:var(--ifm-color-black);border-radius:var(--ifm-global-radius);margin-left:.3rem;padding:.1rem .4rem;font-size:.7rem;line-height:1.2}.tag_SyQ5{margin:.5rem .5rem 0 1rem;display:inline-block}.playgroundEditor_uqZ4{direction:ltr;font:var(--ifm-code-font-size)/var(--ifm-pre-line-height)var(--ifm-font-family-monospace)!important}.playgroundEditor_uqZ4 pre{border-radius:0}.details_Nokh{--docusaurus-details-summary-arrow-size:.38rem;--docusaurus-details-transition:transform .2s ease;--docusaurus-details-decoration-color:grey}.details_Nokh>summary{cursor:pointer;padding-left:1rem;list-style:none;position:relative}.details_Nokh>summary::-webkit-details-marker{display:none}.details_Nokh>summary:before{content:"";border-width:var(--docusaurus-details-summary-arrow-size);border-style:solid;border-color:transparent transparent transparent var(--docusaurus-details-decoration-color);transition:var(--docusaurus-details-transition);transform-origin:calc(var(--docusaurus-details-summary-arrow-size)/2)50%;position:absolute;top:.45rem;left:0;transform:rotate(0)}.details_Nokh[open]:not(.isBrowser_QrB5)>summary:before,.details_Nokh[data-collapsed=false].isBrowser_QrB5>summary:before{transform:rotate(90deg)}.collapsibleContent_EoA1{border-top:1px solid var(--docusaurus-details-decoration-color);margin-top:1rem;padding-top:1rem}.collapsibleContent_EoA1 p:last-child,.details_Nokh>summary>p:last-child{margin-bottom:0}.details_Cn_P{--docusaurus-details-decoration-color:var(--ifm-alert-border-color);--docusaurus-details-transition:transform var(--ifm-transition-fast)ease;margin:0 0 var(--ifm-spacing-vertical);border:1px solid var(--ifm-alert-border-color)}.tags_rTaS{display:inline}.tag_l5va{margin:0 .4rem .5rem 0;display:inline-block}.iconEdit_IMw_{vertical-align:sub;margin-right:.3em}.image_oRbT{object-fit:cover;width:100%;height:100%}.containsTaskList_k9gM{list-style:none}:not(.containsTaskList_k9gM>li)>.containsTaskList_k9gM{padding-left:0}.authorCol_mDBc{max-width:inherit!important;flex-grow:1!important}.imageOnlyAuthorRow_WiD6{flex-flow:wrap;display:flex}.imageOnlyAuthorCol_uiac{margin-left:.3rem;margin-right:.3rem}.imageOnlyAuthorCol_uiac [class^=image]{background-color:var(--ifm-color-emphasis-100)}.toggleButton_WvRg{width:var(--ifm-avatar-photo-size);height:var(--ifm-avatar-photo-size);background-color:var(--ifm-color-emphasis-100);border-radius:50%;margin-left:.3rem;margin-right:.3rem}.toggleButtonIconExpanded_ERxv{transform:rotate(180deg)}.img_vXGZ{height:auto}.changelogItemTitleList_sueG{font-size:2rem}.admonition_o5H7{margin-bottom:1em}.admonitionHeading_FzoX{font:var(--ifm-heading-font-weight)var(--ifm-h5-font-size)/var(--ifm-heading-line-height)var(--ifm-heading-font-family);text-transform:uppercase}.admonitionHeading_FzoX:not(:last-child){margin-bottom:.3rem}.admonitionHeading_FzoX code{text-transform:none}.admonitionIcon_rXq6{vertical-align:middle;margin-right:.4em;display:inline-block}.admonitionIcon_rXq6 svg{width:1.6em;height:1.6em;fill:var(--ifm-alert-foreground-color);display:inline-block}.admonitionContent_Knsx>:last-child{margin-bottom:0}.color_mVUL{vertical-align:middle;border-radius:.5rem;width:2rem;height:2rem;display:inline-block}.input_HUC3{border-color:var(--ifm-color-content-secondary);border-radius:var(--ifm-global-radius);border-style:solid;border-width:var(--ifm-global-border-width);font-size:var(--ifm-font-size-base);padding:.5rem}.colorInput_C1YB{border-color:var(--ifm-color-content-secondary);border-radius:var(--ifm-global-radius);border-style:solid;border-width:var(--ifm-global-border-width);height:2.25rem;position:relative;top:7px}.colorTable_Js7s{font-size:small}.container_RUsj,.container_RUsj>svg{max-width:100%}.lastUpdated_OHCJ{margin-top:.2rem;font-size:smaller;font-style:italic}@media (min-width:997px){.lastUpdated_OHCJ{text-align:right}.tocMobile_NSfz{display:none}}@media print{.tocMobile_NSfz{display:none}}.tweetQuote_h8Rz{--ifm-link-color:var(--ifm-color-emphasis-900);--ifm-link-hover-color:var(--ifm-color-emphasis-900);margin:3rem 1rem;padding:0}.tweetQuote_h8Rz blockquote{text-align:center;border:none;margin-bottom:.6rem;font-size:1.2rem;font-weight:200;line-height:1.4;position:relative}.tweetQuote_h8Rz .avatar__subtitle{margin-top:0}.tweetQuote_h8Rz blockquote:before,.tweetQuote_h8Rz blockquote:after{color:#f1efe6;width:3rem;height:3rem;font-family:cursive;font-size:6rem;line-height:1;position:absolute}.tweetQuote_h8Rz blockquote:before{content:"“";top:-1.1rem;left:-2.4rem}.tweetQuote_h8Rz blockquote:after{content:"”";bottom:-1.1rem;right:-1.6rem}[data-theme=dark] .tweetQuote_h8Rz blockquote:before,[data-theme=dark] .tweetQuote_h8Rz blockquote:after{color:#3b3b3b}.tweetQuote_h8Rz p{display:inline}.tweetQuote_h8Rz .avatarImg_b51M{width:42px;height:42px}.changelogItemContainer_jeDt{margin-bottom:1rem}.tableOfContents_RLlU{max-height:calc(100vh - (var(--ifm-navbar-height) + 2rem));top:calc(var(--ifm-navbar-height) + 1rem);position:sticky;overflow-y:auto}@media (max-width:996px){.tableOfContents_RLlU{display:none}.docItemContainer_oucX{padding:0 .3rem}}.rss_fOa_,.rss_fOa_:hover{color:#f26522}.x_RTSd,.x_RTSd:hover{color:#1da1f2}.breadcrumbHomeIcon_uaSn{vertical-align:top;width:1.1rem;height:1.1rem;position:relative;top:1px}.breadcrumbsContainer_Wvrh{--ifm-breadcrumb-size-multiplier:.8;margin-bottom:.8rem}@media (min-width:997px){.generatedIndexPage_hs4p{max-width:75%!important}}.title_tRie{--ifm-h1-font-size:3rem;margin-bottom:calc(1.25*var(--ifm-leading))}.footerTip_UBUV{margin-top:var(--ifm-paragraph-margin-bottom);font-size:.8rem}.docItemContainer_RhpI header+*,.docItemContainer_RhpI article>:first-child{margin-top:0}@media (min-width:997px){.docItemCol_n6xZ{max-width:75%!important}}.mdxPageWrapper_bWhk{justify-content:center}
\ No newline at end of file
diff --git a/assets/css/styles.25efaca5.css b/assets/css/styles.25efaca5.css
new file mode 100644
index 0000000000..6e227dc26a
--- /dev/null
+++ b/assets/css/styles.25efaca5.css
@@ -0,0 +1 @@
+:root{--ifm-color-scheme:light;--ifm-dark-value:10%;--ifm-darker-value:15%;--ifm-darkest-value:30%;--ifm-light-value:15%;--ifm-lighter-value:30%;--ifm-lightest-value:50%;--ifm-contrast-background-value:90%;--ifm-contrast-foreground-value:70%;--ifm-contrast-background-dark-value:70%;--ifm-contrast-foreground-dark-value:90%;--ifm-color-primary:#3578e5;--ifm-color-secondary:#ebedf0;--ifm-color-success:#00a400;--ifm-color-info:#54c7ec;--ifm-color-warning:#ffba00;--ifm-color-danger:#fa383e;--ifm-color-primary-dark:#306cce;--ifm-color-primary-darker:#2d66c3;--ifm-color-primary-darkest:#2554a0;--ifm-color-primary-light:#538ce9;--ifm-color-primary-lighter:#72a1ed;--ifm-color-primary-lightest:#9abcf2;--ifm-color-primary-contrast-background:#ebf2fc;--ifm-color-primary-contrast-foreground:#102445;--ifm-color-secondary-dark:#d4d5d8;--ifm-color-secondary-darker:#c8c9cc;--ifm-color-secondary-darkest:#a4a6a8;--ifm-color-secondary-light:#eef0f2;--ifm-color-secondary-lighter:#f1f2f5;--ifm-color-secondary-lightest:#f5f6f8;--ifm-color-secondary-contrast-background:#fdfdfe;--ifm-color-secondary-contrast-foreground:#474748;--ifm-color-success-dark:#009400;--ifm-color-success-darker:#008b00;--ifm-color-success-darkest:#007300;--ifm-color-success-light:#26b226;--ifm-color-success-lighter:#4dbf4d;--ifm-color-success-lightest:#80d280;--ifm-color-success-contrast-background:#e6f6e6;--ifm-color-success-contrast-foreground:#003100;--ifm-color-info-dark:#4cb3d4;--ifm-color-info-darker:#47a9c9;--ifm-color-info-darkest:#3b8ba5;--ifm-color-info-light:#6ecfef;--ifm-color-info-lighter:#87d8f2;--ifm-color-info-lightest:#aae3f6;--ifm-color-info-contrast-background:#eef9fd;--ifm-color-info-contrast-foreground:#193c47;--ifm-color-warning-dark:#e6a700;--ifm-color-warning-darker:#d99e00;--ifm-color-warning-darkest:#b38200;--ifm-color-warning-light:#ffc426;--ifm-color-warning-lighter:#ffcf4d;--ifm-color-warning-lightest:#ffdd80;--ifm-color-warning-contrast-background:#fff8e6;--ifm-color-warning-contrast-foreground:#4d3800;--ifm-color-danger-dark:#e13238;--ifm-color-danger-darker:#d53035;--ifm-color-danger-darkest:#af272b;--ifm-color-danger-light:#fb565b;--ifm-color-danger-lighter:#fb7478;--ifm-color-danger-lightest:#fd9c9f;--ifm-color-danger-contrast-background:#ffebec;--ifm-color-danger-contrast-foreground:#4b1113;--ifm-color-white:#fff;--ifm-color-black:#000;--ifm-color-gray-0:var(--ifm-color-white);--ifm-color-gray-100:#f5f6f7;--ifm-color-gray-200:#ebedf0;--ifm-color-gray-300:#dadde1;--ifm-color-gray-400:#ccd0d5;--ifm-color-gray-500:#bec3c9;--ifm-color-gray-600:#8d949e;--ifm-color-gray-700:#606770;--ifm-color-gray-800:#444950;--ifm-color-gray-900:#1c1e21;--ifm-color-gray-1000:var(--ifm-color-black);--ifm-color-emphasis-0:var(--ifm-color-gray-0);--ifm-color-emphasis-100:var(--ifm-color-gray-100);--ifm-color-emphasis-200:var(--ifm-color-gray-200);--ifm-color-emphasis-300:var(--ifm-color-gray-300);--ifm-color-emphasis-400:var(--ifm-color-gray-400);--ifm-color-emphasis-500:var(--ifm-color-gray-500);--ifm-color-emphasis-600:var(--ifm-color-gray-600);--ifm-color-emphasis-700:var(--ifm-color-gray-700);--ifm-color-emphasis-800:var(--ifm-color-gray-800);--ifm-color-emphasis-900:var(--ifm-color-gray-900);--ifm-color-emphasis-1000:var(--ifm-color-gray-1000);--ifm-color-content:var(--ifm-color-emphasis-900);--ifm-color-content-inverse:var(--ifm-color-emphasis-0);--ifm-color-content-secondary:#525860;--ifm-background-color:transparent;--ifm-background-surface-color:var(--ifm-color-content-inverse);--ifm-global-border-width:1px;--ifm-global-radius:.4rem;--ifm-hover-overlay:#0000000d;--ifm-font-color-base:var(--ifm-color-content);--ifm-font-color-base-inverse:var(--ifm-color-content-inverse);--ifm-font-color-secondary:var(--ifm-color-content-secondary);--ifm-font-family-base:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--ifm-font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--ifm-font-size-base:100%;--ifm-font-weight-light:300;--ifm-font-weight-normal:400;--ifm-font-weight-semibold:500;--ifm-font-weight-bold:700;--ifm-font-weight-base:var(--ifm-font-weight-normal);--ifm-line-height-base:1.65;--ifm-global-spacing:1rem;--ifm-spacing-vertical:var(--ifm-global-spacing);--ifm-spacing-horizontal:var(--ifm-global-spacing);--ifm-transition-fast:.2s;--ifm-transition-slow:.4s;--ifm-transition-timing-default:cubic-bezier(.08,.52,.52,1);--ifm-global-shadow-lw:0 1px 2px 0 #0000001a;--ifm-global-shadow-md:0 5px 40px #0003;--ifm-global-shadow-tl:0 12px 28px 0 #0003,0 2px 4px 0 #0000001a;--ifm-z-index-dropdown:100;--ifm-z-index-fixed:200;--ifm-z-index-overlay:400;--ifm-container-width:1140px;--ifm-container-width-xl:1320px;--ifm-code-background:#f6f7f8;--ifm-code-border-radius:var(--ifm-global-radius);--ifm-code-font-size:90%;--ifm-code-padding-horizontal:.1rem;--ifm-code-padding-vertical:.1rem;--ifm-pre-background:var(--ifm-code-background);--ifm-pre-border-radius:var(--ifm-code-border-radius);--ifm-pre-color:inherit;--ifm-pre-line-height:1.45;--ifm-pre-padding:1rem;--ifm-heading-color:inherit;--ifm-heading-margin-top:0;--ifm-heading-margin-bottom:var(--ifm-spacing-vertical);--ifm-heading-font-family:var(--ifm-font-family-base);--ifm-heading-font-weight:var(--ifm-font-weight-bold);--ifm-heading-line-height:1.25;--ifm-h1-font-size:2rem;--ifm-h2-font-size:1.5rem;--ifm-h3-font-size:1.25rem;--ifm-h4-font-size:1rem;--ifm-h5-font-size:.875rem;--ifm-h6-font-size:.85rem;--ifm-image-alignment-padding:1.25rem;--ifm-leading-desktop:1.25;--ifm-leading:calc(var(--ifm-leading-desktop)*1rem);--ifm-list-left-padding:2rem;--ifm-list-margin:1rem;--ifm-list-item-margin:.25rem;--ifm-list-paragraph-margin:1rem;--ifm-table-cell-padding:.75rem;--ifm-table-background:transparent;--ifm-table-stripe-background:#00000008;--ifm-table-border-width:1px;--ifm-table-border-color:var(--ifm-color-emphasis-300);--ifm-table-head-background:inherit;--ifm-table-head-color:inherit;--ifm-table-head-font-weight:var(--ifm-font-weight-bold);--ifm-table-cell-color:inherit;--ifm-link-color:var(--ifm-color-primary);--ifm-link-decoration:none;--ifm-link-hover-color:var(--ifm-link-color);--ifm-link-hover-decoration:underline;--ifm-paragraph-margin-bottom:var(--ifm-leading);--ifm-blockquote-font-size:var(--ifm-font-size-base);--ifm-blockquote-border-left-width:2px;--ifm-blockquote-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-blockquote-padding-vertical:0;--ifm-blockquote-shadow:none;--ifm-blockquote-color:var(--ifm-color-emphasis-800);--ifm-blockquote-border-color:var(--ifm-color-emphasis-300);--ifm-hr-background-color:var(--ifm-color-emphasis-500);--ifm-hr-height:1px;--ifm-hr-margin-vertical:1.5rem;--ifm-scrollbar-size:7px;--ifm-scrollbar-track-background-color:#f1f1f1;--ifm-scrollbar-thumb-background-color:silver;--ifm-scrollbar-thumb-hover-background-color:#a7a7a7;--ifm-alert-background-color:inherit;--ifm-alert-border-color:inherit;--ifm-alert-border-radius:var(--ifm-global-radius);--ifm-alert-border-width:0px;--ifm-alert-border-left-width:5px;--ifm-alert-color:var(--ifm-font-color-base);--ifm-alert-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-alert-padding-vertical:var(--ifm-spacing-vertical);--ifm-alert-shadow:var(--ifm-global-shadow-lw);--ifm-avatar-intro-margin:1rem;--ifm-avatar-intro-alignment:inherit;--ifm-avatar-photo-size:3rem;--ifm-badge-background-color:inherit;--ifm-badge-border-color:inherit;--ifm-badge-border-radius:var(--ifm-global-radius);--ifm-badge-border-width:var(--ifm-global-border-width);--ifm-badge-color:var(--ifm-color-white);--ifm-badge-padding-horizontal:calc(var(--ifm-spacing-horizontal)*.5);--ifm-badge-padding-vertical:calc(var(--ifm-spacing-vertical)*.25);--ifm-breadcrumb-border-radius:1.5rem;--ifm-breadcrumb-spacing:.5rem;--ifm-breadcrumb-color-active:var(--ifm-color-primary);--ifm-breadcrumb-item-background-active:var(--ifm-hover-overlay);--ifm-breadcrumb-padding-horizontal:.8rem;--ifm-breadcrumb-padding-vertical:.4rem;--ifm-breadcrumb-size-multiplier:1;--ifm-breadcrumb-separator:url("data:image/svg+xml;utf8,");--ifm-breadcrumb-separator-filter:none;--ifm-breadcrumb-separator-size:.5rem;--ifm-breadcrumb-separator-size-multiplier:1.25;--ifm-button-background-color:inherit;--ifm-button-border-color:var(--ifm-button-background-color);--ifm-button-border-width:var(--ifm-global-border-width);--ifm-button-color:var(--ifm-font-color-base-inverse);--ifm-button-font-weight:var(--ifm-font-weight-bold);--ifm-button-padding-horizontal:1.5rem;--ifm-button-padding-vertical:.375rem;--ifm-button-size-multiplier:1;--ifm-button-transition-duration:var(--ifm-transition-fast);--ifm-button-border-radius:calc(var(--ifm-global-radius)*var(--ifm-button-size-multiplier));--ifm-button-group-spacing:2px;--ifm-card-background-color:var(--ifm-background-surface-color);--ifm-card-border-radius:calc(var(--ifm-global-radius)*2);--ifm-card-horizontal-spacing:var(--ifm-global-spacing);--ifm-card-vertical-spacing:var(--ifm-global-spacing);--ifm-toc-border-color:var(--ifm-color-emphasis-300);--ifm-toc-link-color:var(--ifm-color-content-secondary);--ifm-toc-padding-vertical:.5rem;--ifm-toc-padding-horizontal:.5rem;--ifm-dropdown-background-color:var(--ifm-background-surface-color);--ifm-dropdown-font-weight:var(--ifm-font-weight-semibold);--ifm-dropdown-link-color:var(--ifm-font-color-base);--ifm-dropdown-hover-background-color:var(--ifm-hover-overlay);--ifm-footer-background-color:var(--ifm-color-emphasis-100);--ifm-footer-color:inherit;--ifm-footer-link-color:var(--ifm-color-emphasis-700);--ifm-footer-link-hover-color:var(--ifm-color-primary);--ifm-footer-link-horizontal-spacing:.5rem;--ifm-footer-padding-horizontal:calc(var(--ifm-spacing-horizontal)*2);--ifm-footer-padding-vertical:calc(var(--ifm-spacing-vertical)*2);--ifm-footer-title-color:inherit;--ifm-footer-logo-max-width:min(30rem,90vw);--ifm-hero-background-color:var(--ifm-background-surface-color);--ifm-hero-text-color:var(--ifm-color-emphasis-800);--ifm-menu-color:var(--ifm-color-emphasis-700);--ifm-menu-color-active:var(--ifm-color-primary);--ifm-menu-color-background-active:var(--ifm-hover-overlay);--ifm-menu-color-background-hover:var(--ifm-hover-overlay);--ifm-menu-link-padding-horizontal:.75rem;--ifm-menu-link-padding-vertical:.375rem;--ifm-menu-link-sublist-icon:url("data:image/svg+xml;utf8,");--ifm-menu-link-sublist-icon-filter:none;--ifm-navbar-background-color:var(--ifm-background-surface-color);--ifm-navbar-height:3.75rem;--ifm-navbar-item-padding-horizontal:.75rem;--ifm-navbar-item-padding-vertical:.25rem;--ifm-navbar-link-color:var(--ifm-font-color-base);--ifm-navbar-link-hover-color:var(--ifm-color-primary);--ifm-navbar-link-active-color:var(--ifm-link-color);--ifm-navbar-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-navbar-padding-vertical:calc(var(--ifm-spacing-vertical)*.5);--ifm-navbar-shadow:var(--ifm-global-shadow-lw);--ifm-navbar-search-input-background-color:var(--ifm-color-emphasis-200);--ifm-navbar-search-input-color:var(--ifm-color-emphasis-800);--ifm-navbar-search-input-placeholder-color:var(--ifm-color-emphasis-500);--ifm-navbar-search-input-icon:url("data:image/svg+xml;utf8,");--ifm-navbar-sidebar-width:83vw;--ifm-pagination-border-radius:var(--ifm-global-radius);--ifm-pagination-color-active:var(--ifm-color-primary);--ifm-pagination-font-size:1rem;--ifm-pagination-item-active-background:var(--ifm-hover-overlay);--ifm-pagination-page-spacing:.2em;--ifm-pagination-padding-horizontal:calc(var(--ifm-spacing-horizontal)*1);--ifm-pagination-padding-vertical:calc(var(--ifm-spacing-vertical)*.25);--ifm-pagination-nav-border-radius:var(--ifm-global-radius);--ifm-pagination-nav-color-hover:var(--ifm-color-primary);--ifm-pills-color-active:var(--ifm-color-primary);--ifm-pills-color-background-active:var(--ifm-hover-overlay);--ifm-pills-spacing:.125rem;--ifm-tabs-color:var(--ifm-font-color-secondary);--ifm-tabs-color-active:var(--ifm-color-primary);--ifm-tabs-color-active-border:var(--ifm-tabs-color-active);--ifm-tabs-padding-horizontal:1rem;--ifm-tabs-padding-vertical:1rem}*{box-sizing:border-box}html{background-color:var(--ifm-background-color);color:var(--ifm-font-color-base);color-scheme:var(--ifm-color-scheme);font:var(--ifm-font-size-base)/var(--ifm-line-height-base)var(--ifm-font-family-base);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;text-rendering:optimizelegibility;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{word-wrap:break-word;margin:0}iframe{color-scheme:normal;border:0}.container{max-width:var(--ifm-container-width);padding:0 var(--ifm-spacing-horizontal);width:100%;margin:0 auto}.container--fluid{max-width:inherit}.row{margin:0 calc(var(--ifm-spacing-horizontal)*-1);flex-wrap:wrap;display:flex}.row--no-gutters{margin-left:0;margin-right:0}.row--no-gutters>.col{padding-left:0;padding-right:0}.row--align-top{align-items:flex-start}.row--align-bottom{align-items:flex-end}.row--align-center{align-items:center}.row--align-stretch{align-items:stretch}.row--align-baseline{align-items:baseline}.col{--ifm-col-width:100%;max-width:var(--ifm-col-width);padding:0 var(--ifm-spacing-horizontal);flex:1 0;width:100%;margin-left:0}.col[class*=col--]{flex:0 0 var(--ifm-col-width)}.col--1{--ifm-col-width:calc(1/12*100%)}.col--offset-1{margin-left:8.33333%}.col--2{--ifm-col-width:calc(2/12*100%)}.col--offset-2{margin-left:16.6667%}.col--3{--ifm-col-width:calc(3/12*100%)}.col--offset-3{margin-left:25%}.col--4{--ifm-col-width:calc(4/12*100%)}.col--offset-4{margin-left:33.3333%}.col--5{--ifm-col-width:calc(5/12*100%)}.col--offset-5{margin-left:41.6667%}.col--6{--ifm-col-width:calc(6/12*100%)}.col--offset-6{margin-left:50%}.col--7{--ifm-col-width:calc(7/12*100%)}.col--offset-7{margin-left:58.3333%}.col--8{--ifm-col-width:calc(8/12*100%)}.col--offset-8{margin-left:66.6667%}.col--9{--ifm-col-width:calc(9/12*100%)}.col--offset-9{margin-left:75%}.col--10{--ifm-col-width:calc(10/12*100%)}.col--offset-10{margin-left:83.3333%}.col--11{--ifm-col-width:calc(11/12*100%)}.col--offset-11{margin-left:91.6667%}.col--12{--ifm-col-width:calc(12/12*100%)}.col--offset-12{margin-left:100%}.margin--none{margin:0!important}.margin-top--none{margin-top:0!important}.margin-left--none{margin-left:0!important}.margin-bottom--none{margin-bottom:0!important}.margin-right--none{margin-right:0!important}.margin-vert--none{margin-top:0!important;margin-bottom:0!important}.margin-horiz--none{margin-left:0!important;margin-right:0!important}.margin--xs{margin:.25rem!important}.margin-top--xs{margin-top:.25rem!important}.margin-left--xs{margin-left:.25rem!important}.margin-bottom--xs{margin-bottom:.25rem!important}.margin-right--xs{margin-right:.25rem!important}.margin-vert--xs{margin-top:.25rem!important;margin-bottom:.25rem!important}.margin-horiz--xs{margin-left:.25rem!important;margin-right:.25rem!important}.margin--sm{margin:.5rem!important}.margin-top--sm{margin-top:.5rem!important}.margin-left--sm{margin-left:.5rem!important}.margin-bottom--sm{margin-bottom:.5rem!important}.margin-right--sm{margin-right:.5rem!important}.margin-vert--sm{margin-top:.5rem!important;margin-bottom:.5rem!important}.margin-horiz--sm{margin-left:.5rem!important;margin-right:.5rem!important}.margin--md{margin:1rem!important}.margin-top--md{margin-top:1rem!important}.margin-left--md{margin-left:1rem!important}.margin-bottom--md{margin-bottom:1rem!important}.margin-right--md{margin-right:1rem!important}.margin-vert--md{margin-top:1rem!important;margin-bottom:1rem!important}.margin-horiz--md{margin-left:1rem!important;margin-right:1rem!important}.margin--lg{margin:2rem!important}.margin-top--lg{margin-top:2rem!important}.margin-left--lg{margin-left:2rem!important}.margin-bottom--lg{margin-bottom:2rem!important}.margin-right--lg{margin-right:2rem!important}.margin-vert--lg{margin-top:2rem!important;margin-bottom:2rem!important}.margin-horiz--lg{margin-left:2rem!important;margin-right:2rem!important}.margin--xl{margin:5rem!important}.margin-top--xl{margin-top:5rem!important}.margin-left--xl{margin-left:5rem!important}.margin-bottom--xl{margin-bottom:5rem!important}.margin-right--xl{margin-right:5rem!important}.margin-vert--xl{margin-top:5rem!important;margin-bottom:5rem!important}.margin-horiz--xl{margin-left:5rem!important;margin-right:5rem!important}.padding--none{padding:0!important}.padding-top--none{padding-top:0!important}.padding-left--none{padding-left:0!important}.padding-bottom--none{padding-bottom:0!important}.padding-right--none{padding-right:0!important}.padding-vert--none{padding-top:0!important;padding-bottom:0!important}.padding-horiz--none{padding-left:0!important;padding-right:0!important}.padding--xs{padding:.25rem!important}.padding-top--xs{padding-top:.25rem!important}.padding-left--xs{padding-left:.25rem!important}.padding-bottom--xs{padding-bottom:.25rem!important}.padding-right--xs{padding-right:.25rem!important}.padding-vert--xs{padding-top:.25rem!important;padding-bottom:.25rem!important}.padding-horiz--xs{padding-left:.25rem!important;padding-right:.25rem!important}.padding--sm{padding:.5rem!important}.padding-top--sm{padding-top:.5rem!important}.padding-left--sm{padding-left:.5rem!important}.padding-bottom--sm{padding-bottom:.5rem!important}.padding-right--sm{padding-right:.5rem!important}.padding-vert--sm{padding-top:.5rem!important;padding-bottom:.5rem!important}.padding-horiz--sm{padding-left:.5rem!important;padding-right:.5rem!important}.padding--md{padding:1rem!important}.padding-top--md{padding-top:1rem!important}.padding-left--md{padding-left:1rem!important}.padding-bottom--md{padding-bottom:1rem!important}.padding-right--md{padding-right:1rem!important}.padding-vert--md{padding-top:1rem!important;padding-bottom:1rem!important}.padding-horiz--md{padding-left:1rem!important;padding-right:1rem!important}.padding--lg{padding:2rem!important}.padding-top--lg{padding-top:2rem!important}.padding-left--lg{padding-left:2rem!important}.padding-bottom--lg{padding-bottom:2rem!important}.padding-right--lg{padding-right:2rem!important}.padding-vert--lg{padding-top:2rem!important;padding-bottom:2rem!important}.padding-horiz--lg{padding-left:2rem!important;padding-right:2rem!important}.padding--xl{padding:5rem!important}.padding-top--xl{padding-top:5rem!important}.padding-left--xl{padding-left:5rem!important}.padding-bottom--xl{padding-bottom:5rem!important}.padding-right--xl{padding-right:5rem!important}.padding-vert--xl{padding-top:5rem!important;padding-bottom:5rem!important}.padding-horiz--xl{padding-left:5rem!important;padding-right:5rem!important}code{background-color:var(--ifm-code-background);border-radius:var(--ifm-code-border-radius);font-family:var(--ifm-font-family-monospace);font-size:var(--ifm-code-font-size);padding:var(--ifm-code-padding-vertical)var(--ifm-code-padding-horizontal);vertical-align:middle;border:.1rem solid #0000001a}a code{color:inherit}pre{background-color:var(--ifm-pre-background);border-radius:var(--ifm-pre-border-radius);color:var(--ifm-pre-color);font:var(--ifm-code-font-size)/var(--ifm-pre-line-height)var(--ifm-font-family-monospace);margin:0 0 var(--ifm-spacing-vertical);padding:var(--ifm-pre-padding);overflow:auto}pre code{font-size:100%;line-height:inherit;background-color:#0000;border:none;padding:0}kbd{background-color:var(--ifm-color-emphasis-0);border:1px solid var(--ifm-color-emphasis-400);box-shadow:inset 0 -1px 0 var(--ifm-color-emphasis-400);color:var(--ifm-color-emphasis-800);font:80% var(--ifm-font-family-monospace);border-radius:.2rem;padding:.15rem .3rem}h1,h2,h3,h4,h5,h6{color:var(--ifm-heading-color);font-family:var(--ifm-heading-font-family);font-weight:var(--ifm-heading-font-weight);line-height:var(--ifm-heading-line-height);margin:var(--ifm-heading-margin-top)0 var(--ifm-heading-margin-bottom)0}h1{font-size:var(--ifm-h1-font-size)}h2{font-size:var(--ifm-h2-font-size)}h3{font-size:var(--ifm-h3-font-size)}h4{font-size:var(--ifm-h4-font-size)}h5{font-size:var(--ifm-h5-font-size)}h6{font-size:var(--ifm-h6-font-size)}img{max-width:100%}img[align=right]{padding-left:var(--image-alignment-padding)}img[align=left]{padding-right:var(--image-alignment-padding)}.markdown{--ifm-h1-vertical-rhythm-top:3;--ifm-h2-vertical-rhythm-top:2;--ifm-h3-vertical-rhythm-top:1.5;--ifm-heading-vertical-rhythm-top:1.25;--ifm-h1-vertical-rhythm-bottom:1.25;--ifm-heading-vertical-rhythm-bottom:1}.markdown:before{content:"";display:table}.markdown:after{clear:both;content:"";display:table}.markdown>:last-child{margin-bottom:0!important}.markdown h1:first-child{--ifm-h1-font-size:3rem;margin-bottom:calc(var(--ifm-h1-vertical-rhythm-bottom)*var(--ifm-leading))}.markdown>h2{--ifm-h2-font-size:2rem;margin-bottom:calc(var(--ifm-heading-vertical-rhythm-bottom)*var(--ifm-leading));margin-top:calc(var(--ifm-h2-vertical-rhythm-top)*var(--ifm-leading))}.markdown>h3{--ifm-h3-font-size:1.5rem;margin-bottom:calc(var(--ifm-heading-vertical-rhythm-bottom)*var(--ifm-leading));margin-top:calc(var(--ifm-h3-vertical-rhythm-top)*var(--ifm-leading))}.markdown>h4,.markdown>h5,.markdown>h6{margin-bottom:calc(var(--ifm-heading-vertical-rhythm-bottom)*var(--ifm-leading));margin-top:calc(var(--ifm-heading-vertical-rhythm-top)*var(--ifm-leading))}.markdown>pre,.markdown>ul,.markdown>p{margin-bottom:var(--ifm-leading)}.markdown li{word-wrap:break-word}.markdown li>p{margin-top:var(--ifm-list-paragraph-margin)}.markdown li+li{margin-top:var(--ifm-list-item-margin)}ul,ol{margin:0 0 var(--ifm-list-margin);padding-left:var(--ifm-list-left-padding)}ol ol,ul ol{list-style-type:lower-roman}ul ul,ul ol,ol ol,ol ul{margin:0}ul ul ol,ul ol ol,ol ul ol,ol ol ol{list-style-type:lower-alpha}table{border-collapse:collapse;margin-bottom:var(--ifm-spacing-vertical);display:block;overflow:auto}table thead tr{border-bottom:2px solid var(--ifm-table-border-color)}table thead{background-color:var(--ifm-table-stripe-background)}table tr{background-color:var(--ifm-table-background);border-top:var(--ifm-table-border-width)solid var(--ifm-table-border-color)}table tr:nth-child(2n){background-color:var(--ifm-table-stripe-background)}table th,table td{border:var(--ifm-table-border-width)solid var(--ifm-table-border-color);padding:var(--ifm-table-cell-padding)}table th{background-color:var(--ifm-table-head-background);color:var(--ifm-table-head-color);font-weight:var(--ifm-table-head-font-weight)}table td{color:var(--ifm-table-cell-color)}strong{font-weight:var(--ifm-font-weight-bold)}a{color:var(--ifm-link-color);-webkit-text-decoration:var(--ifm-link-decoration);text-decoration:var(--ifm-link-decoration);transition:color var(--ifm-transition-fast)var(--ifm-transition-timing-default)}a:hover{color:var(--ifm-link-hover-color);-webkit-text-decoration:var(--ifm-link-hover-decoration);text-decoration:var(--ifm-link-hover-decoration)}a:not([href]){-webkit-text-decoration:none;text-decoration:none}p{margin:0 0 var(--ifm-paragraph-margin-bottom)}blockquote{border-left:var(--ifm-blockquote-border-left-width)solid var(--ifm-blockquote-border-color);box-shadow:var(--ifm-blockquote-shadow);color:var(--ifm-blockquote-color);font-size:var(--ifm-blockquote-font-size);margin:0 0 var(--ifm-spacing-vertical);padding:var(--ifm-blockquote-padding-vertical)var(--ifm-blockquote-padding-horizontal)}blockquote>:first-child{margin-top:0}blockquote>:last-child{margin-bottom:0}hr{background-color:var(--ifm-hr-background-color);height:var(--ifm-hr-height);margin:var(--ifm-hr-margin-vertical)0;border:0}.shadow--lw{box-shadow:var(--ifm-global-shadow-lw)!important}.shadow--md{box-shadow:var(--ifm-global-shadow-md)!important}.shadow--tl{box-shadow:var(--ifm-global-shadow-tl)!important}.text--primary{color:var(--ifm-color-primary)}.text--secondary{color:var(--ifm-color-secondary)}.text--success{color:var(--ifm-color-success)}.text--info{color:var(--ifm-color-info)}.text--warning{color:var(--ifm-color-warning)}.text--danger{color:var(--ifm-color-danger)}.text--center{text-align:center}.text--left{text-align:left}.text--justify{text-align:justify}.text--right{text-align:right}.text--capitalize{text-transform:capitalize}.text--lowercase{text-transform:lowercase}.text--uppercase{text-transform:uppercase}.text--light{font-weight:var(--ifm-font-weight-light)}.text--normal{font-weight:var(--ifm-font-weight-normal)}.text--semibold{font-weight:var(--ifm-font-weight-semibold)}.text--bold{font-weight:var(--ifm-font-weight-bold)}.text--italic{font-style:italic}.text--truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.text--break{word-wrap:break-word!important;word-break:break-word!important}.text--no-decoration,.text--no-decoration:hover{-webkit-text-decoration:none;text-decoration:none}.clean-btn{color:inherit;cursor:pointer;background:0 0;border:none;padding:0;font-family:inherit}.clean-list{padding-left:0;list-style:none}.alert--primary{--ifm-alert-background-color:var(--ifm-color-primary-contrast-background);--ifm-alert-background-color-highlight:#3578e526;--ifm-alert-foreground-color:var(--ifm-color-primary-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-primary-dark)}.alert--secondary{--ifm-alert-background-color:var(--ifm-color-secondary-contrast-background);--ifm-alert-background-color-highlight:#ebedf026;--ifm-alert-foreground-color:var(--ifm-color-secondary-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-secondary-dark)}.alert--success{--ifm-alert-background-color:var(--ifm-color-success-contrast-background);--ifm-alert-background-color-highlight:#00a40026;--ifm-alert-foreground-color:var(--ifm-color-success-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-success-dark)}.alert--info{--ifm-alert-background-color:var(--ifm-color-info-contrast-background);--ifm-alert-background-color-highlight:#54c7ec26;--ifm-alert-foreground-color:var(--ifm-color-info-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-info-dark)}.alert--warning{--ifm-alert-background-color:var(--ifm-color-warning-contrast-background);--ifm-alert-background-color-highlight:#ffba0026;--ifm-alert-foreground-color:var(--ifm-color-warning-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-warning-dark)}.alert--danger{--ifm-alert-background-color:var(--ifm-color-danger-contrast-background);--ifm-alert-background-color-highlight:#fa383e26;--ifm-alert-foreground-color:var(--ifm-color-danger-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-danger-dark)}.alert{--ifm-code-background:var(--ifm-alert-background-color-highlight);--ifm-link-color:var(--ifm-alert-foreground-color);--ifm-link-hover-color:var(--ifm-alert-foreground-color);--ifm-link-decoration:underline;--ifm-tabs-color:var(--ifm-alert-foreground-color);--ifm-tabs-color-active:var(--ifm-alert-foreground-color);--ifm-tabs-color-active-border:var(--ifm-alert-border-color);background-color:var(--ifm-alert-background-color);border:var(--ifm-alert-border-width)solid var(--ifm-alert-border-color);border-left-width:var(--ifm-alert-border-left-width);border-radius:var(--ifm-alert-border-radius);box-shadow:var(--ifm-alert-shadow);color:var(--ifm-alert-foreground-color);padding:var(--ifm-alert-padding-vertical)var(--ifm-alert-padding-horizontal)}.alert__heading{font:bold var(--ifm-h5-font-size)/var(--ifm-heading-line-height)var(--ifm-heading-font-family);text-transform:uppercase;align-items:center;margin-bottom:.5rem;display:flex}.alert__icon{margin-right:.4em;display:inline-flex}.alert__icon svg{fill:var(--ifm-alert-foreground-color);stroke:var(--ifm-alert-foreground-color);stroke-width:0}.alert .close{color:var(--ifm-alert-foreground-color);margin:calc(var(--ifm-alert-padding-vertical)*-1)calc(var(--ifm-alert-padding-horizontal)*-1)0 0;opacity:.75}.alert .close:hover,.alert .close:focus{opacity:1}.alert a{-webkit-text-decoration-color:var(--ifm-alert-border-color);text-decoration-color:var(--ifm-alert-border-color)}.alert a:hover{text-decoration-thickness:2px}.avatar{-moz-column-gap:var(--ifm-avatar-intro-margin);column-gap:var(--ifm-avatar-intro-margin);display:flex}.avatar__photo{height:var(--ifm-avatar-photo-size);width:var(--ifm-avatar-photo-size);border-radius:50%;display:block;overflow:hidden}.avatar__photo--sm{--ifm-avatar-photo-size:2rem}.avatar__photo--lg{--ifm-avatar-photo-size:4rem}.avatar__photo--xl{--ifm-avatar-photo-size:6rem}.avatar__intro{text-align:var(--ifm-avatar-intro-alignment);flex-direction:column;flex:1;justify-content:center;display:flex}.avatar__name{font:bold var(--ifm-h4-font-size)/var(--ifm-heading-line-height)var(--ifm-font-family-base)}.avatar__subtitle{margin-top:.25rem}.avatar--vertical{--ifm-avatar-intro-alignment:center;--ifm-avatar-intro-margin:.5rem;flex-direction:column;align-items:center}.badge{background-color:var(--ifm-badge-background-color);border:var(--ifm-badge-border-width)solid var(--ifm-badge-border-color);border-radius:var(--ifm-badge-border-radius);color:var(--ifm-badge-color);font-size:75%;font-weight:var(--ifm-font-weight-bold);padding:var(--ifm-badge-padding-vertical)var(--ifm-badge-padding-horizontal);line-height:1;display:inline-block}.badge--primary{--ifm-badge-background-color:var(--ifm-color-primary);--ifm-badge-border-color:var(--ifm-badge-background-color)}.badge--secondary{--ifm-badge-background-color:var(--ifm-color-secondary);--ifm-badge-border-color:var(--ifm-badge-background-color);color:var(--ifm-color-black)}.badge--success{--ifm-badge-background-color:var(--ifm-color-success);--ifm-badge-border-color:var(--ifm-badge-background-color)}.badge--info{--ifm-badge-background-color:var(--ifm-color-info);--ifm-badge-border-color:var(--ifm-badge-background-color)}.badge--warning{--ifm-badge-background-color:var(--ifm-color-warning);--ifm-badge-border-color:var(--ifm-badge-background-color)}.badge--danger{--ifm-badge-background-color:var(--ifm-color-danger);--ifm-badge-border-color:var(--ifm-badge-background-color)}.breadcrumbs{margin-bottom:0;padding-left:0}.breadcrumbs__item{display:inline-block}.breadcrumbs__item:not(:last-child):after{background:var(--ifm-breadcrumb-separator)center;content:" ";filter:var(--ifm-breadcrumb-separator-filter);height:calc(var(--ifm-breadcrumb-separator-size)*var(--ifm-breadcrumb-size-multiplier)*var(--ifm-breadcrumb-separator-size-multiplier));margin:0 var(--ifm-breadcrumb-spacing);opacity:.5;width:calc(var(--ifm-breadcrumb-separator-size)*var(--ifm-breadcrumb-size-multiplier)*var(--ifm-breadcrumb-separator-size-multiplier));display:inline-block}.breadcrumbs__item--active .breadcrumbs__link{background:var(--ifm-breadcrumb-item-background-active);color:var(--ifm-breadcrumb-color-active)}.breadcrumbs__link{border-radius:var(--ifm-breadcrumb-border-radius);color:var(--ifm-font-color-base);font-size:calc(1rem*var(--ifm-breadcrumb-size-multiplier));padding:calc(var(--ifm-breadcrumb-padding-vertical)*var(--ifm-breadcrumb-size-multiplier))calc(var(--ifm-breadcrumb-padding-horizontal)*var(--ifm-breadcrumb-size-multiplier));transition-property:background,color;transition-duration:var(--ifm-transition-fast);transition-timing-function:var(--ifm-transition-timing-default);display:inline-block}.breadcrumbs__link:link:hover,.breadcrumbs__link:visited:hover,area[href].breadcrumbs__link:hover{background:var(--ifm-breadcrumb-item-background-active);-webkit-text-decoration:none;text-decoration:none}.breadcrumbs__link:any-link:hover{background:var(--ifm-breadcrumb-item-background-active);-webkit-text-decoration:none;text-decoration:none}.breadcrumbs--sm{--ifm-breadcrumb-size-multiplier:.8}.breadcrumbs--lg{--ifm-breadcrumb-size-multiplier:1.2}.button{background-color:var(--ifm-button-background-color);border:var(--ifm-button-border-width)solid var(--ifm-button-border-color);border-radius:var(--ifm-button-border-radius);color:var(--ifm-button-color);cursor:pointer;font-size:calc(.875rem*var(--ifm-button-size-multiplier));font-weight:var(--ifm-button-font-weight);padding:calc(var(--ifm-button-padding-vertical)*var(--ifm-button-size-multiplier))calc(var(--ifm-button-padding-horizontal)*var(--ifm-button-size-multiplier));text-align:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;transition-property:color,background,border-color;transition-duration:var(--ifm-button-transition-duration);transition-timing-function:var(--ifm-transition-timing-default);line-height:1.5;display:inline-block}.button:hover{color:var(--ifm-button-color);-webkit-text-decoration:none;text-decoration:none}.button--outline{--ifm-button-background-color:transparent;--ifm-button-color:var(--ifm-button-border-color)}.button--outline:hover{--ifm-button-background-color:var(--ifm-button-border-color)}.button--outline:hover,.button--outline:active,.button--outline.button--active{--ifm-button-color:var(--ifm-font-color-base-inverse)}.button--link{--ifm-button-background-color:transparent;--ifm-button-border-color:transparent;color:var(--ifm-link-color);-webkit-text-decoration:var(--ifm-link-decoration);text-decoration:var(--ifm-link-decoration)}.button--link:hover,.button--link:active,.button--link.button--active{color:var(--ifm-link-hover-color);-webkit-text-decoration:var(--ifm-link-hover-decoration);text-decoration:var(--ifm-link-hover-decoration)}.button.disabled,.button:disabled,.button[disabled]{opacity:.65;pointer-events:none}.button--sm{--ifm-button-size-multiplier:.8}.button--lg{--ifm-button-size-multiplier:1.35}.button--block{width:100%;display:block}.button.button--secondary{color:var(--ifm-color-gray-900)}.button.button--secondary.button--outline:not(.button--active):not(:hover){color:var(--ifm-font-color-base)}:where(.button--primary){--ifm-button-background-color:var(--ifm-color-primary);--ifm-button-border-color:var(--ifm-color-primary)}:where(.button--primary):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-primary-dark);--ifm-button-border-color:var(--ifm-color-primary-dark)}.button--primary:active,.button--primary.button--active{--ifm-button-background-color:var(--ifm-color-primary-darker);--ifm-button-border-color:var(--ifm-color-primary-darker)}:where(.button--secondary){--ifm-button-background-color:var(--ifm-color-secondary);--ifm-button-border-color:var(--ifm-color-secondary)}:where(.button--secondary):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-secondary-dark);--ifm-button-border-color:var(--ifm-color-secondary-dark)}.button--secondary:active,.button--secondary.button--active{--ifm-button-background-color:var(--ifm-color-secondary-darker);--ifm-button-border-color:var(--ifm-color-secondary-darker)}:where(.button--success){--ifm-button-background-color:var(--ifm-color-success);--ifm-button-border-color:var(--ifm-color-success)}:where(.button--success):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-success-dark);--ifm-button-border-color:var(--ifm-color-success-dark)}.button--success:active,.button--success.button--active{--ifm-button-background-color:var(--ifm-color-success-darker);--ifm-button-border-color:var(--ifm-color-success-darker)}:where(.button--info){--ifm-button-background-color:var(--ifm-color-info);--ifm-button-border-color:var(--ifm-color-info)}:where(.button--info):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-info-dark);--ifm-button-border-color:var(--ifm-color-info-dark)}.button--info:active,.button--info.button--active{--ifm-button-background-color:var(--ifm-color-info-darker);--ifm-button-border-color:var(--ifm-color-info-darker)}:where(.button--warning){--ifm-button-background-color:var(--ifm-color-warning);--ifm-button-border-color:var(--ifm-color-warning)}:where(.button--warning):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-warning-dark);--ifm-button-border-color:var(--ifm-color-warning-dark)}.button--warning:active,.button--warning.button--active{--ifm-button-background-color:var(--ifm-color-warning-darker);--ifm-button-border-color:var(--ifm-color-warning-darker)}:where(.button--danger){--ifm-button-background-color:var(--ifm-color-danger);--ifm-button-border-color:var(--ifm-color-danger)}:where(.button--danger):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-danger-dark);--ifm-button-border-color:var(--ifm-color-danger-dark)}.button--danger:active,.button--danger.button--active{--ifm-button-background-color:var(--ifm-color-danger-darker);--ifm-button-border-color:var(--ifm-color-danger-darker)}.button-group{gap:var(--ifm-button-group-spacing);display:inline-flex}.button-group>.button:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.button-group>.button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.button-group--block{justify-content:stretch;display:flex}.button-group--block>.button{flex-grow:1}.card{background-color:var(--ifm-card-background-color);border-radius:var(--ifm-card-border-radius);box-shadow:var(--ifm-global-shadow-lw);flex-direction:column;display:flex;overflow:hidden}.card--full-height{height:100%}.card__image{padding-top:var(--ifm-card-vertical-spacing)}.card__image:first-child{padding-top:0}.card__header,.card__body,.card__footer{padding:var(--ifm-card-vertical-spacing)var(--ifm-card-horizontal-spacing)}.card__header:not(:last-child),.card__body:not(:last-child),.card__footer:not(:last-child){padding-bottom:0}.card__header>:last-child,.card__body>:last-child,.card__footer>:last-child{margin-bottom:0}.card__footer{margin-top:auto}.table-of-contents{padding:var(--ifm-toc-padding-vertical)0;margin-bottom:0;font-size:.8rem}.table-of-contents,.table-of-contents ul{padding-left:var(--ifm-toc-padding-horizontal);list-style:none}.table-of-contents li{margin:var(--ifm-toc-padding-vertical)var(--ifm-toc-padding-horizontal)}.table-of-contents__left-border{border-left:1px solid var(--ifm-toc-border-color)}.table-of-contents__link{color:var(--ifm-toc-link-color);display:block}.table-of-contents__link:hover,.table-of-contents__link:hover code,.table-of-contents__link--active,.table-of-contents__link--active code{color:var(--ifm-color-primary);-webkit-text-decoration:none;text-decoration:none}.close{color:var(--ifm-color-black);float:right;font-size:1.5rem;font-weight:var(--ifm-font-weight-bold);opacity:.5;transition:opacity var(--ifm-transition-fast)var(--ifm-transition-timing-default);padding:1rem;line-height:1}.close:hover{opacity:.7}.close:focus{opacity:.8}.dropdown{font-weight:var(--ifm-dropdown-font-weight);vertical-align:top;display:inline-flex;position:relative}.dropdown--hoverable:hover .dropdown__menu,.dropdown--show .dropdown__menu{opacity:1;pointer-events:all;visibility:visible;transform:translateY(-1px)}.dropdown--right .dropdown__menu{left:inherit;right:0}.dropdown--nocaret .navbar__link:after{content:none!important}.dropdown__menu{background-color:var(--ifm-dropdown-background-color);border-radius:var(--ifm-global-radius);box-shadow:var(--ifm-global-shadow-md);opacity:0;pointer-events:none;min-width:10rem;max-height:80vh;left:0;top:calc(100% - var(--ifm-navbar-item-padding-vertical) + .3rem);visibility:hidden;z-index:var(--ifm-z-index-dropdown);transition-property:opacity,transform,visibility;transition-duration:var(--ifm-transition-fast);transition-timing-function:var(--ifm-transition-timing-default);padding:.5rem;list-style:none;position:absolute;overflow-y:auto;transform:translateY(-.625rem)}.dropdown__link{color:var(--ifm-dropdown-link-color);white-space:nowrap;border-radius:.25rem;margin-top:.2rem;padding:.25rem .5rem;font-size:.875rem;display:block}.dropdown__link:hover,.dropdown__link--active{background-color:var(--ifm-dropdown-hover-background-color);color:var(--ifm-dropdown-link-color);-webkit-text-decoration:none;text-decoration:none}.dropdown__link--active,.dropdown__link--active:hover{--ifm-dropdown-link-color:var(--ifm-link-color)}.dropdown>.navbar__link:after{content:"";border:.4em solid #0000;border-top-color:currentColor;border-bottom:0 solid;margin-left:.3em;display:inline-block;position:relative;top:2px;transform:translateY(-50%)}.footer{background-color:var(--ifm-footer-background-color);color:var(--ifm-footer-color);padding:var(--ifm-footer-padding-vertical)var(--ifm-footer-padding-horizontal)}.footer--dark{--ifm-footer-background-color:#303846;--ifm-footer-color:var(--ifm-footer-link-color);--ifm-footer-link-color:var(--ifm-color-secondary);--ifm-footer-title-color:var(--ifm-color-white)}.footer__links{margin-bottom:1rem}.footer__link-item{color:var(--ifm-footer-link-color);line-height:2}.footer__link-item:hover{color:var(--ifm-footer-link-hover-color)}.footer__link-separator{margin:0 var(--ifm-footer-link-horizontal-spacing)}.footer__logo{max-width:var(--ifm-footer-logo-max-width);margin-top:1rem}.footer__title{color:var(--ifm-footer-title-color);font:bold var(--ifm-h4-font-size)/var(--ifm-heading-line-height)var(--ifm-font-family-base);margin-bottom:var(--ifm-heading-margin-bottom)}.footer__item{margin-top:0}.footer__items{margin-bottom:0}[type=checkbox]{padding:0}.hero{background-color:var(--ifm-hero-background-color);color:var(--ifm-hero-text-color);align-items:center;padding:4rem 2rem;display:flex}.hero--primary{--ifm-hero-background-color:var(--ifm-color-primary);--ifm-hero-text-color:var(--ifm-font-color-base-inverse)}.hero--dark{--ifm-hero-background-color:#303846;--ifm-hero-text-color:var(--ifm-color-white)}.hero__title{font-size:3rem}.hero__subtitle{font-size:1.5rem}.menu{font-weight:var(--ifm-font-weight-semibold);overflow-x:hidden}.menu__list{margin:0;padding-left:0;list-style:none}.menu__list .menu__list{padding-left:var(--ifm-menu-link-padding-horizontal);flex:0 0 100%;margin-top:.25rem}.menu__list-item:not(:first-child){margin-top:.25rem}.menu__list-item--collapsed .menu__list{height:0;overflow:hidden}.menu__list-item--collapsed .menu__link--sublist:after,.menu__list-item--collapsed .menu__caret:before{transform:rotate(90deg)}.menu__list-item-collapsible{transition:background var(--ifm-transition-fast)var(--ifm-transition-timing-default);border-radius:.25rem;flex-wrap:wrap;display:flex;position:relative}.menu__list-item-collapsible:hover,.menu__list-item-collapsible--active{background:var(--ifm-menu-color-background-hover)}.menu__list-item-collapsible .menu__link:hover,.menu__list-item-collapsible .menu__link--active{background:0 0!important}.menu__link,.menu__caret{transition:background var(--ifm-transition-fast)var(--ifm-transition-timing-default);border-radius:.25rem;align-items:center;display:flex}.menu__link:hover,.menu__caret:hover{background:var(--ifm-menu-color-background-hover)}.menu__link{color:var(--ifm-menu-color);padding:var(--ifm-menu-link-padding-vertical)var(--ifm-menu-link-padding-horizontal);flex:1;line-height:1.25}.menu__link:hover{color:var(--ifm-menu-color);transition:color var(--ifm-transition-fast)var(--ifm-transition-timing-default);-webkit-text-decoration:none;text-decoration:none}.menu__link--sublist-caret:after{content:"";background:var(--ifm-menu-link-sublist-icon)50%/2rem 2rem;min-width:1.25rem;filter:var(--ifm-menu-link-sublist-icon-filter);width:1.25rem;height:1.25rem;transition:transform var(--ifm-transition-fast)linear;margin-left:auto;transform:rotate(180deg)}.menu__link--active,.menu__link--active:hover{color:var(--ifm-menu-color-active)}.menu__link--active:not(.menu__link--sublist){background-color:var(--ifm-menu-color-background-active)}.menu__caret{padding:var(--ifm-menu-link-padding-vertical)var(--ifm-menu-link-padding-horizontal)}.menu__caret:before{content:"";background:var(--ifm-menu-link-sublist-icon)50%/2rem 2rem;filter:var(--ifm-menu-link-sublist-icon-filter);width:1.25rem;height:1.25rem;transition:transform var(--ifm-transition-fast)linear;transform:rotate(180deg)}html[data-theme=dark],.navbar--dark{--ifm-menu-link-sublist-icon-filter:invert(100%)sepia(94%)saturate(17%)hue-rotate(223deg)brightness(104%)contrast(98%)}.navbar{background-color:var(--ifm-navbar-background-color);box-shadow:var(--ifm-navbar-shadow);height:var(--ifm-navbar-height);padding:var(--ifm-navbar-padding-vertical)var(--ifm-navbar-padding-horizontal);display:flex}.navbar>.container,.navbar>.container-fluid{display:flex}.navbar--fixed-top{z-index:var(--ifm-z-index-fixed);position:sticky;top:0}.navbar__inner{flex-wrap:wrap;justify-content:space-between;width:100%;display:flex}.navbar__brand{color:var(--ifm-navbar-link-color);align-items:center;min-width:0;margin-right:1rem;display:flex}.navbar__brand:hover{color:var(--ifm-navbar-link-hover-color);-webkit-text-decoration:none;text-decoration:none}.navbar__title{flex:auto}.navbar__toggle{margin-right:.5rem;display:none}.navbar__logo{flex:none;height:2rem;margin-right:.5rem}.navbar__logo img{height:100%}.navbar__items{flex:1;align-items:center;min-width:0;display:flex}.navbar__items--center{flex:none}.navbar__items--center .navbar__brand{margin:0}.navbar__items--center+.navbar__items--right{flex:1}.navbar__items--right{flex:none;justify-content:flex-end}.navbar__items--right>:last-child{padding-right:0}.navbar__item{padding:var(--ifm-navbar-item-padding-vertical)var(--ifm-navbar-item-padding-horizontal);display:inline-block}.navbar__item.dropdown .navbar__link:not([href]){pointer-events:none}.navbar__link{color:var(--ifm-navbar-link-color);font-weight:var(--ifm-font-weight-semibold)}.navbar__link:hover,.navbar__link--active{color:var(--ifm-navbar-link-hover-color);-webkit-text-decoration:none;text-decoration:none}.navbar--dark,.navbar--primary{--ifm-menu-color:var(--ifm-color-gray-300);--ifm-navbar-link-color:var(--ifm-color-gray-100);--ifm-navbar-search-input-background-color:#ffffff1a;--ifm-navbar-search-input-placeholder-color:#ffffff80;color:var(--ifm-color-white)}.navbar--dark{--ifm-navbar-background-color:#242526;--ifm-navbar-link-hover-color:var(--ifm-color-primary);--ifm-menu-color-background-active:#ffffff0d;--ifm-navbar-search-input-color:var(--ifm-color-white)}.navbar--primary{--ifm-navbar-background-color:var(--ifm-color-primary);--ifm-navbar-link-hover-color:var(--ifm-color-white);--ifm-menu-color-active:var(--ifm-color-white);--ifm-navbar-search-input-color:var(--ifm-color-emphasis-500)}.navbar__search-input{appearance:none;background:var(--ifm-navbar-search-input-background-color)var(--ifm-navbar-search-input-icon)no-repeat .75rem center/1rem 1rem;color:var(--ifm-navbar-search-input-color);cursor:text;border:none;border-radius:2rem;width:12.5rem;height:2rem;padding:0 .5rem 0 2.25rem;font-size:1rem;display:inline-block}.navbar__search-input::placeholder{color:var(--ifm-navbar-search-input-placeholder-color)}.navbar-sidebar{background-color:var(--ifm-navbar-background-color);box-shadow:var(--ifm-global-shadow-md);opacity:0;visibility:hidden;width:var(--ifm-navbar-sidebar-width);transition-property:opacity,visibility,transform;transition-duration:var(--ifm-transition-fast);transition-timing-function:ease-in-out;position:fixed;top:0;bottom:0;left:0;overflow-x:hidden;transform:translate(-100%)}.navbar-sidebar--show .navbar-sidebar,.navbar-sidebar--show .navbar-sidebar__backdrop{opacity:1;visibility:visible}.navbar-sidebar--show .navbar-sidebar{transform:translate(0,0)}.navbar-sidebar__backdrop{opacity:0;visibility:hidden;transition-property:opacity,visibility;transition-duration:var(--ifm-transition-fast);background-color:#0009;transition-timing-function:ease-in-out;position:fixed;inset:0}.navbar-sidebar__brand{box-shadow:var(--ifm-navbar-shadow);height:var(--ifm-navbar-height);padding:var(--ifm-navbar-padding-vertical)var(--ifm-navbar-padding-horizontal);flex:1;align-items:center;display:flex}.navbar-sidebar__items{height:calc(100% - var(--ifm-navbar-height));transition:transform var(--ifm-transition-fast)ease-in-out;display:flex;transform:translateZ(0)}.navbar-sidebar__items--show-secondary{transform:translate3d(calc((var(--ifm-navbar-sidebar-width))*-1),0,0)}.navbar-sidebar__item{width:calc(var(--ifm-navbar-sidebar-width));flex-shrink:0;padding:.5rem}.navbar-sidebar__back{background:var(--ifm-menu-color-background-active);font-size:15px;font-weight:var(--ifm-button-font-weight);text-align:left;width:calc(100% + 1rem);margin:0 0 .2rem -.5rem;padding:.6rem 1.5rem;position:relative;top:-.5rem}.navbar-sidebar__close{margin-left:auto;display:flex}.pagination{-moz-column-gap:var(--ifm-pagination-page-spacing);column-gap:var(--ifm-pagination-page-spacing);font-size:var(--ifm-pagination-font-size);padding-left:0;display:flex}.pagination--sm{--ifm-pagination-font-size:.8rem;--ifm-pagination-padding-horizontal:.8rem;--ifm-pagination-padding-vertical:.2rem}.pagination--lg{--ifm-pagination-font-size:1.2rem;--ifm-pagination-padding-horizontal:1.2rem;--ifm-pagination-padding-vertical:.3rem}.pagination__item{display:inline-flex}.pagination__item>span{padding:var(--ifm-pagination-padding-vertical)}.pagination__item--active .pagination__link{background:var(--ifm-pagination-item-active-background);color:var(--ifm-pagination-color-active)}.pagination__item:not(.pagination__item--active):hover .pagination__link{background:var(--ifm-pagination-item-active-background)}.pagination__item--disabled,.pagination__item[disabled]{opacity:.25;pointer-events:none}.pagination__link{border-radius:var(--ifm-pagination-border-radius);color:var(--ifm-font-color-base);padding:var(--ifm-pagination-padding-vertical)var(--ifm-pagination-padding-horizontal);transition:background var(--ifm-transition-fast)var(--ifm-transition-timing-default);display:inline-block}.pagination__link:hover{-webkit-text-decoration:none;text-decoration:none}.pagination-nav{grid-gap:var(--ifm-spacing-horizontal);gap:var(--ifm-spacing-horizontal);grid-template-columns:repeat(2,1fr);display:grid}.pagination-nav__link{border:1px solid var(--ifm-color-emphasis-300);border-radius:var(--ifm-pagination-nav-border-radius);height:100%;line-height:var(--ifm-heading-line-height);padding:var(--ifm-global-spacing);transition:border-color var(--ifm-transition-fast)var(--ifm-transition-timing-default);display:block}.pagination-nav__link:hover{border-color:var(--ifm-pagination-nav-color-hover);-webkit-text-decoration:none;text-decoration:none}.pagination-nav__link--next{text-align:right;grid-column:2/3}.pagination-nav__label{font-size:var(--ifm-h4-font-size);font-weight:var(--ifm-heading-font-weight);word-break:break-word}.pagination-nav__link--prev .pagination-nav__label:before{content:"« "}.pagination-nav__link--next .pagination-nav__label:after{content:" »"}.pagination-nav__sublabel{color:var(--ifm-color-content-secondary);font-size:var(--ifm-h5-font-size);font-weight:var(--ifm-font-weight-semibold);margin-bottom:.25rem}.pills{gap:var(--ifm-pills-spacing);padding-left:0;display:flex}.pills__item{cursor:pointer;font-weight:var(--ifm-font-weight-bold);transition:background var(--ifm-transition-fast)var(--ifm-transition-timing-default);border-radius:.5rem;padding:.25rem 1rem;display:inline-block}.pills__item--active{background:var(--ifm-pills-color-background-active);color:var(--ifm-pills-color-active)}.pills__item:not(.pills__item--active):hover{background:var(--ifm-pills-color-background-active)}.pills--block{justify-content:stretch}.pills--block .pills__item{text-align:center;flex-grow:1}.tabs{color:var(--ifm-tabs-color);font-weight:var(--ifm-font-weight-bold);margin-bottom:0;padding-left:0;display:flex;overflow-x:auto}.tabs__item{border-radius:var(--ifm-global-radius);cursor:pointer;padding:var(--ifm-tabs-padding-vertical)var(--ifm-tabs-padding-horizontal);transition:background-color var(--ifm-transition-fast)var(--ifm-transition-timing-default);border-bottom:3px solid #0000;display:inline-flex}.tabs__item--active{border-bottom-color:var(--ifm-tabs-color-active-border);color:var(--ifm-tabs-color-active);border-bottom-right-radius:0;border-bottom-left-radius:0}.tabs__item:hover{background-color:var(--ifm-hover-overlay)}.tabs--block{justify-content:stretch}.tabs--block .tabs__item{flex-grow:1;justify-content:center}html[data-theme=dark]{--ifm-color-scheme:dark;--ifm-color-emphasis-0:var(--ifm-color-gray-1000);--ifm-color-emphasis-100:var(--ifm-color-gray-900);--ifm-color-emphasis-200:var(--ifm-color-gray-800);--ifm-color-emphasis-300:var(--ifm-color-gray-700);--ifm-color-emphasis-400:var(--ifm-color-gray-600);--ifm-color-emphasis-500:var(--ifm-color-gray-500);--ifm-color-emphasis-600:var(--ifm-color-gray-400);--ifm-color-emphasis-700:var(--ifm-color-gray-300);--ifm-color-emphasis-800:var(--ifm-color-gray-200);--ifm-color-emphasis-900:var(--ifm-color-gray-100);--ifm-color-emphasis-1000:var(--ifm-color-gray-0);--ifm-background-color:#1b1b1d;--ifm-background-surface-color:#242526;--ifm-hover-overlay:#ffffff0d;--ifm-color-content:#e3e3e3;--ifm-color-content-secondary:#fff;--ifm-breadcrumb-separator-filter:invert(64%)sepia(11%)saturate(0%)hue-rotate(149deg)brightness(99%)contrast(95%);--ifm-code-background:#ffffff1a;--ifm-scrollbar-track-background-color:#444;--ifm-scrollbar-thumb-background-color:#686868;--ifm-scrollbar-thumb-hover-background-color:#7a7a7a;--ifm-table-stripe-background:#ffffff12;--ifm-toc-border-color:var(--ifm-color-emphasis-200);--ifm-color-primary-contrast-background:#102445;--ifm-color-primary-contrast-foreground:#ebf2fc;--ifm-color-secondary-contrast-background:#474748;--ifm-color-secondary-contrast-foreground:#fdfdfe;--ifm-color-success-contrast-background:#003100;--ifm-color-success-contrast-foreground:#e6f6e6;--ifm-color-info-contrast-background:#193c47;--ifm-color-info-contrast-foreground:#eef9fd;--ifm-color-warning-contrast-background:#4d3800;--ifm-color-warning-contrast-foreground:#fff8e6;--ifm-color-danger-contrast-background:#4b1113;--ifm-color-danger-contrast-foreground:#ffebec}@media (min-width:1440px){.container{max-width:var(--ifm-container-width-xl)}}@media (max-width:996px){.col{--ifm-col-width:100%;flex-basis:var(--ifm-col-width);margin-left:0}.footer{--ifm-footer-padding-horizontal:0}.footer__link-separator{display:none}.footer__col{margin-bottom:calc(var(--ifm-spacing-vertical)*3)}.footer__link-item{width:max-content;display:block}.hero{padding-left:0;padding-right:0}.navbar>.container,.navbar>.container-fluid{padding:0}.navbar__toggle{display:inherit}.navbar__item{display:none}.navbar__search-input{width:9rem}.pills--block,.tabs--block{flex-direction:column}}@media (max-width:576px){.markdown h1:first-child{--ifm-h1-font-size:2rem}.markdown>h2{--ifm-h2-font-size:1.5rem}.markdown>h3{--ifm-h3-font-size:1.25rem}}@media (pointer:fine){.thin-scrollbar{scrollbar-width:thin}.thin-scrollbar::-webkit-scrollbar{height:var(--ifm-scrollbar-size);width:var(--ifm-scrollbar-size)}.thin-scrollbar::-webkit-scrollbar-track{background:var(--ifm-scrollbar-track-background-color);border-radius:10px}.thin-scrollbar::-webkit-scrollbar-thumb{background:var(--ifm-scrollbar-thumb-background-color);border-radius:10px}.thin-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--ifm-scrollbar-thumb-hover-background-color)}}@media (prefers-reduced-motion:reduce){:root{--ifm-transition-fast:0s;--ifm-transition-slow:0s}}@media print{.table-of-contents,.footer,.menu,.navbar,.pagination-nav{display:none}.tabs{page-break-inside:avoid}}:root{--docusaurus-progress-bar-color:var(--ifm-color-primary)}#nprogress{pointer-events:none}#nprogress .bar{background:var(--docusaurus-progress-bar-color);z-index:1031;width:100%;height:2px;position:fixed;top:0;left:0}#nprogress .peg{width:100px;height:100%;box-shadow:0 0 10px var(--docusaurus-progress-bar-color),0 0 5px var(--docusaurus-progress-bar-color);opacity:1;position:absolute;right:0;transform:rotate(3deg)translateY(-4px)}[data-rmiz-ghost]{pointer-events:none;position:absolute}[data-rmiz-btn-zoom],[data-rmiz-btn-unzoom]{color:#fff;outline-offset:2px;touch-action:manipulation;appearance:none;background-color:#000000b3;border:none;border-radius:50%;width:40px;height:40px;margin:0;padding:9px;box-shadow:0 0 1px #ffffff80}[data-rmiz-btn-zoom]:not(:focus):not(:active){clip:rect(0 0 0 0);clip-path:inset(50%);pointer-events:none;white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}[data-rmiz-btn-zoom]{cursor:zoom-in;position:absolute;inset:10px 10px auto auto}[data-rmiz-btn-unzoom]{cursor:zoom-out;z-index:1;position:absolute;inset:20px 20px auto auto}[data-rmiz-content=found] img,[data-rmiz-content=found] svg,[data-rmiz-content=found] [role=img],[data-rmiz-content=found] [data-zoom]{cursor:zoom-in}[data-rmiz-modal]::backdrop{display:none}[data-rmiz-modal][open]{background:0 0;border:0;width:100dvw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;position:fixed;overflow:hidden}[data-rmiz-modal-overlay]{transition:background-color .3s;position:absolute;inset:0}[data-rmiz-modal-overlay=hidden]{background-color:#fff0}[data-rmiz-modal-content]{width:100%;height:100%;position:relative}[data-rmiz-modal-img]{cursor:zoom-out;image-rendering:high-quality;transform-origin:0 0;transition:transform .3s;position:absolute}@media (prefers-reduced-motion:reduce){[data-rmiz-modal-overlay],[data-rmiz-modal-img]{transition-duration:.01ms!important}}:root{--site-primary-hue-saturation:167 68%;--site-primary-hue-saturation-light:167 56%;--site-color-feedback-background:#f0f8ff;--docusaurus-highlighted-code-line-bg:#0000001a;--ifm-breadcrumb-color-active:var(--ifm-color-primary-darker)!important;--ifm-menu-color-active:var(--ifm-color-primary-darker)!important}html[data-theme=dark]{--site-color-feedback-background:#2a2929;--docusaurus-highlighted-code-line-bg:#42424259}[data-theme=light]{--ifm-color-primary:hsl(var(--site-primary-hue-saturation)30%);--ifm-color-primary-dark:hsl(var(--site-primary-hue-saturation)26%);--ifm-color-primary-darker:hsl(var(--site-primary-hue-saturation)23%);--ifm-color-primary-darkest:hsl(var(--site-primary-hue-saturation)17%);--ifm-color-primary-light:hsl(var(--site-primary-hue-saturation-light)39%);--ifm-color-primary-lighter:hsl(var(--site-primary-hue-saturation-light)47%);--ifm-color-primary-lightest:hsl(var(--site-primary-hue-saturation-light)58%)}[data-theme=dark]{--ifm-color-primary:hsl(var(--site-primary-hue-saturation)45%);--ifm-color-primary-dark:hsl(var(--site-primary-hue-saturation)41%);--ifm-color-primary-darker:hsl(var(--site-primary-hue-saturation)38%);--ifm-color-primary-darkest:hsl(var(--site-primary-hue-saturation)32%);--ifm-color-primary-light:hsl(var(--site-primary-hue-saturation-light)54%);--ifm-color-primary-lighter:hsl(var(--site-primary-hue-saturation-light)62%);--ifm-color-primary-lightest:hsl(var(--site-primary-hue-saturation-light)73%)}.header-github-link:before{content:"";background-color:var(--ifm-navbar-link-color);width:24px;height:24px;transition:background-color var(--ifm-transition-fast)var(--ifm-transition-timing-default);display:flex;-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")}.header-github-link:hover:before{background-color:var(--ifm-navbar-link-hover-color)}.footer--dark{--ifm-footer-background-color:#2b3137}.unique-tabs .tabs__item{margin-right:8px;line-height:16px}.unique-tabs .tabs__item--active{color:#fff;border-radius:var(--ifm-global-radius);background-color:var(--ifm-tabs-color-active);border:0}[data-theme=light] .themedDocusaurus [fill=\#FFFF50]{fill:#adff2f}[data-theme=dark] .themedDocusaurus [fill=\#FFFF50]{fill:#2e8b57}[data-theme=light] .DocSearch{--docsearch-muted-color:var(--ifm-color-emphasis-700);--docsearch-container-background:#5e6470b3;--docsearch-modal-background:var(--ifm-color-secondary-lighter);--docsearch-searchbox-background:var(--ifm-color-secondary);--docsearch-searchbox-focus-background:var(--ifm-color-white);--docsearch-hit-color:var(--ifm-font-color-base);--docsearch-hit-active-color:var(--ifm-color-white);--docsearch-hit-background:var(--ifm-color-white);--docsearch-footer-background:var(--ifm-color-white)}[data-theme=dark] .DocSearch{--docsearch-text-color:var(--ifm-font-color-base);--docsearch-muted-color:var(--ifm-color-secondary-darkest);--docsearch-container-background:#2f3745b3;--docsearch-modal-background:var(--ifm-background-color);--docsearch-searchbox-background:var(--ifm-background-color);--docsearch-searchbox-focus-background:var(--ifm-color-black);--docsearch-hit-color:var(--ifm-font-color-base);--docsearch-hit-active-color:var(--ifm-color-white);--docsearch-hit-background:var(--ifm-color-emphasis-100);--docsearch-footer-background:var(--ifm-background-surface-color);--docsearch-key-gradient:linear-gradient(-26.5deg,var(--ifm-color-emphasis-200)0%,var(--ifm-color-emphasis-100)100%)}div[class^=announcementBar_]{--site-announcement-bar-stripe-color1:#e8d7ff;--site-announcement-bar-stripe-color2:#ffe9d1;background:repeating-linear-gradient(35deg,var(--site-announcement-bar-stripe-color1),var(--site-announcement-bar-stripe-color1)20px,var(--site-announcement-bar-stripe-color2)10px,var(--site-announcement-bar-stripe-color2)40px);font-size:20px;font-weight:700}.screen-reader-only{clip:rect(0 0 0 0);clip-path:polygon(0 0,0 0,0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}[data-theme=light] img[src$=\#gh-dark-mode-only],[data-theme=dark] img[src$=\#gh-light-mode-only]{display:none}.test-marker-site-custom-css-unique-rule{content:"site-custom-css-unique-rule"}.video-container{width:100%;max-width:560px;margin:0 auto;position:relative;overflow:hidden}.yt-lite>.lty-playbtn{cursor:pointer;border:0}.dropdown-separator{margin:.3rem 0}.dropdown-archived-versions{padding:.2rem .5rem;font-size:.875rem}.code-block-error-line{margin:0 calc(-1*var(--ifm-pre-padding));padding:0 var(--ifm-pre-padding);background-color:#ff000020;border-left:3px solid #ff000080;display:block}[data-rmiz-modal-overlay=visible]{background-color:#fffffff2}[data-theme=dark] [data-rmiz-modal-overlay=visible]{background-color:#000000f2}html[data-navbar=false] .navbar{display:none}html[data-red-border] div#__docusaurus{border:thick solid red}@media screen and (min-width:1px){html.plugin-docs.plugin-id-docs-tests .red>a{color:red}:is(html.plugin-docs.plugin-id-docs-tests .red>a):after{content:" ";background-image:url(data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMSAxIj4KICA8cGF0aCBkPSJNMCwwaDF2MUgwIiBmaWxsPSIjZjAwIi8+Cjwvc3ZnPgo=);background-size:contain;width:1rem;height:1rem;margin-left:.5rem}html.plugin-docs.plugin-id-docs-tests .navbar{border-bottom:thin solid #0ff}.theme-doc-sidebar-item-link:is(html.plugin-docs.plugin-id-docs-tests .dogfood_sidebar_class_name_test)>a,.theme-doc-sidebar-item-category:is(html.plugin-docs.plugin-id-docs-tests .dogfood_sidebar_class_name_test)>div>a{color:#0ff}.card:is(html.plugin-docs.plugin-id-docs-tests .dogfood_sidebar_class_name_test){border:thin solid #0ff}html.plugin-blog.plugin-id-blog-tests .navbar{border-bottom:thin solid #0f0}html.plugin-pages.plugin-id-pages-tests .navbar{border-bottom:thin solid #ff0}html:has(#navbar-dropdown-tests) .navbar__item.dropdown~a{display:none}}#z-index-test{z-index:100}.test-marker-site-client-module{content:"site-client-module"}.dogfood-image-test-css{background-image:url(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);background-size:contain}.container_tECh{color:#fff;background-color:#18191a;min-height:100vh;padding:80px 20px 20px;overflow-x:hidden}.container_tECh code{color:#fff;background-color:#444950}.nav_sWk6{z-index:1;background-color:#242526;justify-content:space-evenly;align-items:center;width:100%;height:3.75rem;display:flex;position:fixed}.navlink__gTJ{color:#fff;text-align:center;border-radius:4px;padding:6px;font-size:clamp(12px,4vw,16px);font-weight:500}.navlink__gTJ:hover{background-color:#292a2b;-webkit-text-decoration:none;text-decoration:none}.active_Uuwz{background-color:#363739}@media screen and (min-width:800px){.nav_sWk6{float:left;background-color:#18191a;border-right:1px solid #606770;flex-direction:column;justify-content:flex-start;align-items:center;width:200px;height:100vh;padding-top:20px}.navlink__gTJ{text-align:left;width:80%;margin-top:20px}.container_tECh{float:right;width:calc(100% - 200px);padding-top:40px}}.containerParaiso_TYa3{cursor:default;background-color:#292a2b;border-radius:4px;margin-top:10px;padding:10px;font-family:monospace;font-size:13px;position:relative}.basicElementParaiso_DqvR{color:#fff;border-left:1px solid #4f424c;padding:3px 5px 3px 20px}.labelParaiso_l3ql{color:#e7e9db;letter-spacing:.5px;margin-right:3px}.nullValueParaiso_Ey4X{color:#fec418;text-transform:uppercase;background-color:#4f424c;border-radius:3px;padding:1px 2px;font-size:11px;font-weight:700;display:inline-block}.undefinedValueParaiso__T3e{color:#8d8687}.stringValueParaiso_T6i7{color:#f99b15}.booleanValueParaiso__TSh{color:#815ba4}.numberValueParaiso_JGW0{color:#e96ba8}.otherValueParaiso_nnwW,.punctuationParaiso_knwc{color:#fff}.expandIconParaiso_fAkX{color:#815ba4;vertical-align:baseline;margin-right:3px;font-size:22px;line-height:10px;display:inline-block}.collapseIconParaiso_MWEp:after{content:"▾"}.collapseIconParaiso_MWEp{color:#06b6ef;vertical-align:baseline;margin-right:3px;font-size:22px;line-height:10px;display:inline-block}.expandIconParaiso_fAkX:after{content:"▸"}.collapseContentParaiso_KH36{color:#f99b15;cursor:pointer;font-size:18px;line-height:10px}.collapseContentParaiso_KH36:after{content:"..."}.childFieldsContainerParaiso_HB7R{margin:0;padding:0}.listItem_lSSi{background-color:#242526;border-radius:4px;margin-bottom:20px;padding:10px}.sectionTitle_T1wU{margin-top:20px}.listItem_Bobk{background-color:#242526;border-radius:4px;margin-bottom:20px;padding:10px}.version_gVgE{float:right}.name_C0v7{color:#e06b6b;font-weight:800}.listItem_zpSX{background-color:#242526;border-radius:4px;margin-bottom:20px;padding:10px}.route_X3At{margin-bottom:10px}.routeName_j49z{color:#e06b6b}.backToTopButton_PuQw{background-color:var(--ifm-color-emphasis-200);width:3rem;height:3rem;z-index:calc(var(--ifm-z-index-fixed) - 1);box-shadow:var(--ifm-global-shadow-lw);transition:all var(--ifm-transition-fast)var(--ifm-transition-timing-default);opacity:0;visibility:hidden;border-radius:50%;position:fixed;bottom:1.3rem;right:1.3rem;transform:scale(0)}.backToTopButton_PuQw:after{content:" ";-webkit-mask:var(--ifm-menu-link-sublist-icon)50%/2rem 2rem no-repeat;-webkit-mask:var(--ifm-menu-link-sublist-icon)50%/2rem 2rem no-repeat;mask:var(--ifm-menu-link-sublist-icon)50%/2rem 2rem no-repeat;background-color:var(--ifm-color-emphasis-1000);width:100%;height:100%;display:inline-block}@media (hover:hover){.backToTopButton_PuQw:hover{background-color:var(--ifm-color-emphasis-300)}}.backToTopButtonShow_YSA3{opacity:1;visibility:visible;transform:scale(1)}:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:#656c85cc;--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 #ffffff80,0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px #1e235a66;--docsearch-key-pressed-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 1px 0 #1e235a66;--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 #45629b1f}html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:#090a11cc;--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 #0304094d;--docsearch-key-pressed-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 1px 1px 0 #0304094d;--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 #494c6a80,0 -4px 8px 0 #0003;--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}.DocSearch-Button{background:var(--docsearch-searchbox-background);color:var(--docsearch-muted-color);cursor:pointer;-webkit-user-select:none;user-select:none;border:0;border-radius:40px;justify-content:space-between;align-items:center;height:36px;margin:0 0 0 16px;padding:0 8px;font-weight:500;display:flex}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:none}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6px}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{padding:0 12px 0 6px;font-size:1rem}.DocSearch-Button-Keys{min-width:calc(40px + .8em);display:flex}.DocSearch-Button-Key{background:var(--docsearch-key-gradient);box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);border:0;border-radius:3px;justify-content:center;align-items:center;width:20px;height:18px;margin-right:.4em;padding:0 0 2px;transition-property:all;transition-duration:.1s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:flex;position:relative;top:-1px}@media (prefers-reduced-motion){.DocSearch-Button-Key{transition:none}}.DocSearch-Button-Key--pressed{box-shadow:var(--docsearch-key-pressed-shadow);transform:translateY(1px)}@media (max-width:768px){.DocSearch-Button-Keys,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{background-color:var(--docsearch-container-background);z-index:200;width:100vw;height:100vh;position:fixed;top:0;left:0}.DocSearch-Container a{-webkit-text-decoration:none;text-decoration:none}.DocSearch-Link{appearance:none;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;background:0 0;border:0;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);box-shadow:var(--docsearch-modal-shadow);max-width:var(--docsearch-modal-width);border-radius:6px;flex-direction:column;margin:60px auto auto;position:relative}.DocSearch-SearchBar{padding:var(--docsearch-spacing)var(--docsearch-spacing)0;display:flex}.DocSearch-Form{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);height:var(--docsearch-searchbox-height);padding:0 var(--docsearch-spacing);border-radius:4px;align-items:center;width:100%;margin:0;display:flex;position:relative}.DocSearch-Input{appearance:none;color:var(--docsearch-text-color);font:inherit;background:0 0;border:0;outline:none;flex:1;width:80%;height:100%;padding:0 0 0 8px;font-size:1.2em}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button{display:none}.DocSearch-Input::-webkit-search-decoration{display:none}.DocSearch-Input::-webkit-search-results-button{display:none}.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-MagnifierLabel,.DocSearch-Reset{color:var(--docsearch-highlight-color);justify-content:center;align-items:center;display:flex}.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator{display:none}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator{color:var(--docsearch-highlight-color);justify-content:center;align-items:center;display:flex}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{appearance:none;color:var(--docsearch-icon-color);cursor:pointer;stroke-width:var(--docsearch-icon-stroke-width);background:0 0;border:0;border-radius:50%;animation:none;right:0}}.DocSearch-Reset{appearance:none;color:var(--docsearch-icon-color);cursor:pointer;stroke-width:var(--docsearch-icon-stroke-width);background:0 0;border:0;border-radius:50%;padding:2px;animation:.1s ease-in forwards fade-in;right:0}.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{width:24px;height:24px}.DocSearch-Cancel{display:none}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color)var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:0 0}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{margin:0;padding:0;list-style:none}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Help{-webkit-user-select:none;user-select:none;margin:0;font-size:.9em}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{color:var(--docsearch-highlight-color);background:0 0}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing);justify-content:center;font-size:.85em;display:flex}.DocSearch-HitsFooter a{color:inherit;border-bottom:1px solid}.DocSearch-Hit{border-radius:4px;padding-bottom:4px;scroll-margin-top:40px;display:flex;position:relative}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--deleting{transition:none}}.DocSearch-Hit--deleting{opacity:0;transition:all .25s linear}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--favoriting{transition:none}}.DocSearch-Hit--favoriting{transform-origin:top;transition:all .25s linear .25s;transform:scale(0)}.DocSearch-Hit a{background:var(--docsearch-hit-background);box-shadow:var(--docsearch-hit-shadow);padding-left:var(--docsearch-spacing);border-radius:4px;width:100%;display:block}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);z-index:10;margin:0 -4px;padding:8px 4px 0;font-size:.85em;font-weight:600;line-height:32px;position:sticky;top:0}.DocSearch-Hit-Tree{color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;stroke-width:var(--docsearch-icon-stroke-width);width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{-webkit-text-decoration:underline;text-decoration:underline}.DocSearch-Hit-Container{color:var(--docsearch-hit-color);height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing)0 0;flex-direction:row;align-items:center;display:flex}.DocSearch-Hit-icon{width:20px;height:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{color:var(--docsearch-muted-color);stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Hit-action{align-items:center;width:22px;height:22px;display:flex}.DocSearch-Hit-action svg{width:18px;height:18px;display:block}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{appearance:none;color:inherit;cursor:pointer;background:0 0;border:0;border-radius:50%;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:#0003;transition:background-color .1s ease-in}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{transition:none}}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{text-overflow:ellipsis;white-space:nowrap;flex-direction:column;flex:auto;justify-content:center;width:80%;margin:0 8px;font-weight:500;line-height:1.2em;display:flex;position:relative;overflow-x:hidden}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:#0003;transition:none}}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{text-align:center;width:80%;margin:0 auto;padding:36px 0;font-size:.9em}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{text-align:left;padding-bottom:24px;display:inline-block}.DocSearch-NoResults-Prefill-List ul{padding:8px 0 0;display:inline-block}.DocSearch-NoResults-Prefill-List li{list-style-type:"» ";list-style-position:inside}.DocSearch-Prefill{appearance:none;color:var(--docsearch-highlight-color);cursor:pointer;background:0 0;border:0;border-radius:1em;padding:0;font-size:1em;font-weight:700;display:inline-block}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:none;-webkit-text-decoration:underline;text-decoration:underline}.DocSearch-Footer{background:var(--docsearch-footer-background);box-shadow:var(--docsearch-footer-shadow);height:var(--docsearch-footer-height);padding:0 var(--docsearch-spacing);-webkit-user-select:none;user-select:none;z-index:300;border-radius:0 0 8px 8px;flex-direction:row-reverse;flex-shrink:0;justify-content:space-between;align-items:center;width:100%;display:flex;position:relative}.DocSearch-Commands{color:var(--docsearch-muted-color);margin:0;padding:0;list-style:none;display:flex}.DocSearch-Commands li{align-items:center;display:flex}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{background:var(--docsearch-key-gradient);box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);border:0;border-radius:2px;justify-content:center;align-items:center;width:20px;height:18px;margin-right:.4em;padding:0 0 1px;display:flex}.DocSearch-VisuallyHiddenForAccessibility{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (max-width:768px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh,1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;position:absolute;bottom:0}.DocSearch-Hit-content-wrapper{width:80%;display:flex;position:relative}.DocSearch-Modal{box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh,1vh)*100);border-radius:0;width:100%;max-width:100%;margin:0}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh,1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{appearance:none;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin-left:var(--docsearch-spacing);-webkit-user-select:none;user-select:none;white-space:nowrap;background:0 0;border:0;outline:none;flex:none;padding:0;font-size:1em;font-weight:500;display:inline-block;overflow:hidden}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}:root{--docsearch-primary-color:var(--ifm-color-primary);--docsearch-text-color:var(--ifm-font-color-base)}.DocSearch-Button{transition:all var(--ifm-transition-fast)var(--ifm-transition-timing-default);margin:0}.DocSearch-Container{z-index:calc(var(--ifm-z-index-fixed) + 1)}.apiTable_e8hp{font-size:small}.apiTable_e8hp tbody tr{transition:box-shadow .2s}.apiTable_e8hp tbody tr:focus,.apiTable_e8hp tbody tr:hover{box-shadow:0 0 7px 0 inset var(--ifm-color-warning);cursor:pointer;outline:none;transition:box-shadow .2s}.apiTable_e8hp code{cursor:text}.yt-lite{contain:content;cursor:pointer;background-color:#000;background-position:50%;background-size:cover;display:block;position:relative}.yt-lite.lyt-activated:before{content:"";box-sizing:content-box;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);background-position:top;background-repeat:repeat-x;width:100%;height:60px;padding-bottom:50px;transition:all .2s cubic-bezier(0,0,.2,1);display:block;position:absolute;top:0}.yt-lite:after{content:"";padding-bottom:var(--aspect-ratio);display:block}.yt-lite>iframe{width:100%;height:100%;position:absolute;top:0;left:0}.yt-lite>.lty-playbtn{z-index:1;opacity:.8;background-color:#212121;border-radius:14%;width:70px;height:46px;transition:all .2s cubic-bezier(0,0,.2,1)}.yt-lite:hover>.lty-playbtn{opacity:1;background-color:red}.yt-lite>.lty-playbtn:before{content:"";border:11px solid #0000;border-left:19px solid #fff;border-right-width:0}.yt-lite>.lty-playbtn,.yt-lite>.lty-playbtn:before{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.yt-lite.lyt-activated{cursor:unset}.yt-lite.lyt-activated:before,.yt-lite.lyt-activated>.lty-playbtn{opacity:0;pointer-events:none}.skipToContent_UHvc{z-index:calc(var(--ifm-z-index-fixed) + 1);padding:calc(var(--ifm-global-spacing)/2)var(--ifm-global-spacing);color:var(--ifm-color-emphasis-900);background-color:var(--ifm-background-surface-color);position:fixed;top:1rem;left:100%}.skipToContent_UHvc:focus{box-shadow:var(--ifm-global-shadow-md);left:1rem}.closeButton_nmpN{padding:0;line-height:0}.content_ttnW{text-align:center;padding:5px 0;font-size:85%}.content_ttnW a{color:inherit;-webkit-text-decoration:underline;text-decoration:underline}:root{--docusaurus-announcement-bar-height:auto}.announcementBar_cTOO{height:var(--docusaurus-announcement-bar-height);background-color:var(--ifm-color-white);color:var(--ifm-color-black);border-bottom:1px solid var(--ifm-color-emphasis-100);align-items:center;display:flex}html[data-announcement-bar-initially-dismissed=true] .announcementBar_cTOO{display:none}.announcementBarPlaceholder_Lqfg{flex:0 0 10px}.announcementBarClose_UFLi{flex:0 0 30px;align-self:stretch}.announcementBarContent_PjqA{flex:auto}@media print{.announcementBar_cTOO{display:none}}@media (min-width:997px){:root{--docusaurus-announcement-bar-height:30px}.announcementBarPlaceholder_Lqfg,.announcementBarClose_UFLi{flex-basis:50px}}.toggle_bT41{width:2rem;height:2rem}.toggleButton_x9TT{-webkit-tap-highlight-color:transparent;width:100%;height:100%;transition:background var(--ifm-transition-fast);border-radius:50%;justify-content:center;align-items:center;display:flex}.toggleButton_x9TT:hover{background:var(--ifm-color-emphasis-200)}.toggleIcon_nCQi{display:none}[data-theme-choice=system] .systemToggleIcon_IWwm,[data-theme-choice=light] .lightToggleIcon_dnYY,[data-theme-choice=dark] .darkToggleIcon_OBbf{display:initial}.toggleButtonDisabled_Dj8q{cursor:not-allowed}.darkNavbarColorModeToggle_JF8j:hover{background:var(--ifm-color-gray-800)}.tabList_Qoir{margin-bottom:var(--ifm-leading)}.tabItem_AQgk{margin-top:0!important}.themedComponent_bJGS{display:none}[data-theme=light] .themedComponent--light_LEkC,[data-theme=dark] .themedComponent--dark_jnGk,html:not([data-theme]) .themedComponent--light_LEkC{display:initial}:root{--docusaurus-collapse-button-bg:transparent;--docusaurus-collapse-button-bg-hover:#0000001a}[data-theme=dark]:root{--docusaurus-collapse-button-bg:#ffffff0d;--docusaurus-collapse-button-bg-hover:#ffffff1a}@media (min-width:997px){.collapseSidebarButton_PUyN{background-color:var(--docusaurus-collapse-button-bg);border:1px solid var(--ifm-toc-border-color);border-radius:0;height:40px;position:sticky;bottom:0;display:block!important}.collapseSidebarButtonIcon_DI0B{margin-top:4px;transform:rotate(180deg)}[dir=rtl] .collapseSidebarButtonIcon_DI0B{transform:rotate(0)}.collapseSidebarButton_PUyN:hover,.collapseSidebarButton_PUyN:focus{background-color:var(--docusaurus-collapse-button-bg-hover)}}.collapseSidebarButton_PUyN{margin:0;display:none}.tabItem_pnkT>:last-child{margin-bottom:0}.iconExternalLink_Rdzz{margin-left:.3rem}.menuExternalLink_zaS2{align-items:center}@media (min-width:997px){.menuHtmlItem_t1vY{padding:var(--ifm-menu-link-padding-vertical)var(--ifm-menu-link-padding-horizontal)}.menu_rWGR{flex-grow:1;padding:.5rem}@supports (scrollbar-gutter:stable){.menu_rWGR{scrollbar-gutter:stable;padding:.5rem 0 .5rem .5rem}}.menuWithAnnouncementBar_Pf08{margin-bottom:var(--docusaurus-announcement-bar-height)}.sidebar_vtcw{height:100%;padding-top:var(--ifm-navbar-height);width:var(--doc-sidebar-width);flex-direction:column;display:flex}.sidebarWithHideableNavbar_tZ9s{padding-top:0}.sidebarHidden_PrHU{opacity:0;visibility:hidden}.sidebarLogo_UK0N{margin:0 var(--ifm-navbar-padding-horizontal);min-height:var(--ifm-navbar-height);max-height:var(--ifm-navbar-height);align-items:center;color:inherit!important;-webkit-text-decoration:none!important;text-decoration:none!important;display:flex!important}.sidebarLogo_UK0N img{height:2rem;margin-right:.5rem}}.sidebarLogo_UK0N{display:none}@media (min-width:997px){.expandButton_ockD{width:100%;height:100%;transition:background-color var(--ifm-transition-fast)ease;background-color:var(--docusaurus-collapse-button-bg);justify-content:center;align-items:center;display:flex;position:absolute;top:0;right:0}.expandButton_ockD:hover,.expandButton_ockD:focus{background-color:var(--docusaurus-collapse-button-bg-hover)}.expandButtonIcon_H1n0{transform:rotate(0)}[dir=rtl] .expandButtonIcon_H1n0{transform:rotate(180deg)}}:root{--doc-sidebar-width:300px;--doc-sidebar-hidden-width:30px}.docSidebarContainer_S51O{display:none}@media (min-width:997px){.docSidebarContainer_S51O{width:var(--doc-sidebar-width);margin-top:calc(-1*var(--ifm-navbar-height));border-right:1px solid var(--ifm-toc-border-color);will-change:width;transition:width var(--ifm-transition-fast)ease;clip-path:inset(0);display:block}.docSidebarContainerHidden_gbDM{width:var(--doc-sidebar-hidden-width);cursor:pointer}.sidebarViewport_K3q9{height:100%;max-height:100vh;position:sticky;top:0}}.docMainContainer_EfwR{width:100%;display:flex}@media (min-width:997px){.docMainContainer_EfwR{max-width:calc(100% - var(--doc-sidebar-width));flex-grow:1}.docMainContainerEnhanced_r8nV{max-width:calc(100% - var(--doc-sidebar-hidden-width))}.docItemWrapperEnhanced_nA1F{max-width:calc(var(--ifm-container-width) + var(--doc-sidebar-width))!important}}.docRoot_kBZ6{width:100%;display:flex}.docsWrapper_lLmf{flex:1 0 auto;display:flex}.dropdownNavbarItemMobile_nhRg{cursor:pointer}.browserWindow_my1Q{border:3px solid var(--ifm-color-emphasis-200);border-radius:var(--ifm-global-radius);box-shadow:var(--ifm-global-shadow-lw);margin-bottom:var(--ifm-leading)}.browserWindowHeader_jXSR{background:var(--ifm-color-emphasis-200);align-items:center;padding:.5rem 1rem;display:flex}.row_KZDM:after{content:"";clear:both;display:table}.buttons_uHc7{white-space:nowrap}.right_oyze{align-self:center;width:10%}[data-theme=light]{--ifm-background-color:#fff}.browserWindowAddressBar_Pd8y{background-color:var(--ifm-background-color);color:var(--ifm-color-gray-800);-webkit-user-select:none;user-select:none;border-radius:12.5px;flex:1 0;margin:0 1rem 0 .5rem;padding:5px 15px;font:400 13px Arial,sans-serif}[data-theme=dark] .browserWindowAddressBar_Pd8y{color:var(--ifm-color-gray-300)}.dot_giz1{background-color:#bbb;border-radius:50%;width:12px;height:12px;margin-top:4px;margin-right:6px;display:inline-block}.browserWindowMenuIcon_Vhuh{margin-left:auto}.bar_rrRL{background-color:#aaa;width:17px;height:3px;margin:3px 0;display:block}.browserWindowBody_Idgs{background-color:var(--ifm-background-color);border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;padding:1rem}.browserWindowBody_Idgs>:last-child{margin-bottom:0}.red_FE5X{color:red}.red_FE5X[aria-selected=true]{border-bottom-color:red}.orange_kp8w{color:orange}.orange_kp8w[aria-selected=true]{border-bottom-color:orange}.yellow_uGry{color:#ff0}.yellow_uGry[aria-selected=true]{border-bottom-color:#ff0}.cssCarousel_jWvs{position:relative}.cssCarouselSlider_nIAN{scroll-snap-type:x mandatory;scrollbar-width:none;display:flex;overflow:scroll hidden}.cssCarouselItem_GXZ2{scroll-snap-align:start;flex-shrink:0;width:100%;height:100%}.cssCarouselContent_dGP2{width:100%;height:100%;position:relative}.navButton_qSul{color:#fff;width:2.6rem;height:2.6rem;transition:all var(--ifm-transition-fast)var(--ifm-transition-timing-default);background-color:#0000004d;border:0;border-radius:50%;justify-content:center;align-items:center;font-size:1rem;font-weight:700;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.navButton_qSul:hover{background-color:#00000073}.navButton_qSul.navButtonNext_yu77{right:.1rem}.navButton_qSul.navButtonPrev_SxeT{left:.1rem}.siteSlide_AwQk{position:relative}.siteLink_IglZ{--ifm-link-color:var(--ifm-color-gray-400);transition:all var(--ifm-transition-fast)var(--ifm-transition-timing-default);background-color:#0000004d;border-radius:6px;padding:0 12px;font-size:16px;position:absolute;bottom:2px;right:2px}.siteLink_IglZ:hover{--ifm-link-color:var(--ifm-color-gray-200);--ifm-link-hover-color:var(--ifm-color-gray-200);--ifm-link-hover-decoration:none;background-color:#00000073}@media only screen and (max-width:768px){.siteLink_IglZ{padding:0 8px;font-size:12px}}.wrappingBlock_S4U4{vertical-align:top;width:50%;padding:5px;display:inline-block}.wrappingBlock_S4U4 code[class^=codeBlockLines]{white-space:pre-wrap}.tableOfContentsInline_2sru ul{font-size:initial;padding-top:0;list-style-type:disc}.tocCollapsibleButton_IbtT{font-size:inherit;justify-content:space-between;align-items:center;width:100%;padding:.4rem .8rem;display:flex}.tocCollapsibleButton_IbtT:after{content:"";background:var(--ifm-menu-link-sublist-icon)50% 50%/2rem 2rem no-repeat;filter:var(--ifm-menu-link-sublist-icon-filter);width:1.25rem;height:1.25rem;transition:transform var(--ifm-transition-fast);transform:rotate(180deg)}.tocCollapsibleButtonExpanded_Nor3:after{transform:none}.tocCollapsible_BEWm{background-color:var(--ifm-menu-color-background-active);border-radius:var(--ifm-global-radius);margin:1rem 0}.tocCollapsibleContent_FG8F>ul{border-left:none;border-top:1px solid var(--ifm-color-emphasis-300);padding:.2rem 0;font-size:15px}.tocCollapsibleContent_FG8F ul li{margin:.4rem .8rem}.tocCollapsibleContent_FG8F a{display:block}.tocCollapsibleExpanded_FzA_{transform:none}.iconLanguage_tqOs{vertical-align:text-bottom;margin-right:5px}.navbarSearchContainer_dDCC:empty{display:none}@media (max-width:996px){.navbarSearchContainer_dDCC{right:var(--ifm-navbar-padding-horizontal);position:absolute}}@media (min-width:997px){.navbarSearchContainer_dDCC{padding:var(--ifm-navbar-item-padding-vertical)var(--ifm-navbar-item-padding-horizontal)}}.navbarHideable_uAgx{transition:transform var(--ifm-transition-fast)ease}.navbarHidden_QgM6{transform:translateY(calc(-100% - 2px))}@media (max-width:996px){.colorModeToggle_UolE{display:none}}.anchorWithStickyNavbar_rB0w{scroll-margin-top:calc(var(--ifm-navbar-height) + .5rem)}.anchorWithHideOnScrollNavbar_SSbb{scroll-margin-top:.5rem}.hash-link{opacity:0;transition:opacity var(--ifm-transition-fast);-webkit-user-select:none;user-select:none;padding-left:.5rem}.hash-link:before{content:"#"}.hash-link:focus,:hover>.hash-link{opacity:1}.cardContainer_Uewx{--ifm-link-color:var(--ifm-color-emphasis-800);--ifm-link-hover-color:var(--ifm-color-emphasis-700);--ifm-link-hover-decoration:none;border:1px solid var(--ifm-color-emphasis-200);transition:all var(--ifm-transition-fast)ease;transition-property:border,box-shadow;box-shadow:0 1.5px 3px #00000026}.cardContainer_Uewx:hover{border-color:var(--ifm-color-primary);box-shadow:0 3px 6px #0003}.cardContainer_Uewx :last-child{margin-bottom:0}.cardTitle_dwRT{font-size:1.2rem}.cardDescription_mCBT{font-size:.8rem}.docCardListItem_hvcp{margin-bottom:2rem}.docCardListItem_hvcp>*{height:100%}.errorBoundaryError_rP1m{white-space:pre-wrap;color:red}.errorBoundaryFallback_heah{color:red;padding:.55rem}body:not(.navigation-with-keyboard) :not(input):focus{outline:none}#__docusaurus-base-url-issue-banner-container{display:none}.footerLogoLink_CiM_{opacity:.5;transition:opacity var(--ifm-transition-fast)var(--ifm-transition-timing-default)}.footerLogoLink_CiM_:hover{opacity:1}html,body{height:100%}.mainWrapper_PEsc{flex-direction:column;flex:1 0 auto;display:flex}.docusaurus-mt-lg{margin-top:3rem}#__docusaurus{flex-direction:column;min-height:100%;display:flex}.test-marker-theme-layout_zWhB{content:"theme-layout"}.sidebar_P3nc{max-height:calc(100vh - (var(--ifm-navbar-height) + 2rem));top:calc(var(--ifm-navbar-height) + 2rem);position:sticky;overflow-y:auto}.sidebarItemTitle_VrjY{font-size:var(--ifm-h3-font-size);font-weight:var(--ifm-font-weight-bold)}.sidebarItemList_OSkG{font-size:.9rem}.sidebarItem_WJ0y{margin-top:.7rem}.sidebarItemLink_Qrfg{color:var(--ifm-font-color-base);display:block}.sidebarItemLink_Qrfg:hover{-webkit-text-decoration:none;text-decoration:none}.sidebarItemLinkActive_nUeK{color:var(--ifm-color-primary)!important}@media (max-width:996px){.sidebar_P3nc{display:none}}.yearGroupHeading_lECJ{margin-top:1.6rem;margin-bottom:.4rem}.yearGroupHeading_Ruz9{margin:1rem .75rem .5rem}.title_UBNu{font-size:3rem}@media (max-width:576px){.title_UBNu{font-size:2rem}}.container_x5Un{font-size:.9rem}[data-theme=dark] .githubSvg_jqE4{fill:var(--light)}[data-theme=light] .githubSvg_jqE4{fill:var(--dark)}[data-theme=dark] .xSvg_Q0g7{fill:var(--light)}[data-theme=light] .xSvg_Q0g7{fill:var(--dark)}[data-theme=dark] .instagramSvg_Svcp{fill:var(--light)}[data-theme=light] .instagramSvg_Svcp{fill:var(--dark)}[data-theme=dark] .threadsSvg_kngY{fill:var(--light)}[data-theme=light] .threadsSvg_kngY{fill:var(--dark)}:root{--docusaurus-blog-social-icon-size:1rem}.authorSocials_tPnL{height:var(--docusaurus-blog-social-icon-size);line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;flex-wrap:wrap;align-items:center;line-height:0;display:flex;overflow:hidden}.authorSocialLink_hEWM{height:var(--docusaurus-blog-social-icon-size);width:var(--docusaurus-blog-social-icon-size);margin-right:.4rem;line-height:0}.authorSocialIcon_hTX6{width:var(--docusaurus-blog-social-icon-size);height:var(--docusaurus-blog-social-icon-size)}.authorImage_p8ow{--ifm-avatar-photo-size:3.6rem}.author-as-h1_Pd3R .authorImage_p8ow{--ifm-avatar-photo-size:7rem}.author-as-h2_UaZL .authorImage_p8ow{--ifm-avatar-photo-size:5.4rem}.authorDetails_dWdF{flex-direction:column;justify-content:space-around;align-items:flex-start;display:flex}.authorName_Y8Hr{flex-direction:row;font-size:1.1rem;line-height:1.1rem;display:flex}.author-as-h1_Pd3R .authorName_Y8Hr{font-size:2.4rem;line-height:2.4rem;display:inline}.author-as-h2_UaZL .authorName_Y8Hr{font-size:1.4rem;line-height:1.4rem;display:inline}.authorTitle_Slpj{line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-size:.8rem;line-height:1rem;display:-webkit-box;overflow:hidden}.author-as-h1_Pd3R .authorTitle_Slpj{font-size:1.2rem;line-height:1.6rem}.author-as-h2_UaZL .authorTitle_Slpj{font-size:1rem;line-height:1.3rem}.authorBlogPostCount_FxU_{background:var(--ifm-color-secondary);color:var(--ifm-color-black);border-radius:var(--ifm-global-radius);margin-left:.3rem;padding:.1rem .4rem;font-size:.8rem;line-height:1.2}.authorCol_bvyx{max-width:inherit!important}.imageOnlyAuthorRow_L2DM{flex-flow:wrap;display:flex}.imageOnlyAuthorCol_oyze{margin-left:.3rem;margin-right:.3rem}.searchQueryInput_S_pS,.searchVersionInput_RZ74{border-radius:var(--ifm-global-radius);border:2px solid var(--ifm-toc-border-color);font:var(--ifm-font-size-base)var(--ifm-font-family-base);background:var(--docsearch-searchbox-focus-background);width:100%;color:var(--docsearch-text-color);transition:border var(--ifm-transition-fast)ease;margin-bottom:.5rem;padding:.8rem}.searchQueryInput_S_pS:focus,.searchVersionInput_RZ74:focus{border-color:var(--docsearch-primary-color);outline:none}.searchQueryInput_S_pS::placeholder{color:var(--docsearch-muted-color)}.searchResultsColumn_dGxU{font-size:.9rem;font-weight:700}.algoliaLogo_nq6Q{max-width:150px}.algoliaLogoPathFill_IWVH{fill:var(--ifm-font-color-base)}.searchResultItem_jZK3{border-bottom:1px solid var(--ifm-toc-border-color);padding:1rem 0}.searchResultItemHeading_Nbvf{margin-bottom:0;font-weight:400}.searchResultItemPath_wcJo{color:var(--ifm-color-content-secondary);--ifm-breadcrumb-separator-size-multiplier:1;font-size:.8rem}.searchResultItemSummary_HbIg{margin:.5rem 0 0;font-style:italic}@media only screen and (max-width:996px){.searchQueryColumn_ourN{max-width:60%!important}.searchVersionColumn_n2Lb{max-width:40%!important}.searchResultsColumn_dGxU{max-width:60%!important}.searchLogoColumn_v5Xz{max-width:40%!important;padding-left:0!important}}@media screen and (max-width:576px){.searchQueryColumn_ourN{max-width:100%!important}.searchVersionColumn_n2Lb{max-width:100%!important;padding-left:var(--ifm-spacing-horizontal)!important}}.loadingSpinner_Jw0H{border:.4em solid #eee;border-top-color:var(--ifm-color-primary);border-radius:50%;width:3rem;height:3rem;margin:0 auto;animation:1s linear infinite loading-spin_vmq3}@keyframes loading-spin_vmq3{to{transform:rotate(360deg)}}.loader_rYmk{margin-top:2rem}.search-result-match{color:var(--docsearch-hit-color);background:#ffd78e40;padding:.09em 0}.tweet_x2tn{font-size:15px}.tweetMeta_fAxr{color:var(--ifm-color-emphasis-700)}.tweetMeta_fAxr strong{color:var(--ifm-font-color-base)}.section_rC2D{padding:40px 0}.sectionAlt_XiGz{background-color:var(--ifm-color-emphasis-100)}.sectionInner_Y4r1{margin:0 auto}.featureImage_yA8i{width:auto;max-height:128px;margin:0 auto}.featureHeading_TLGJ{font-size:var(--ifm-h3-font-size);padding-top:1rem}.announcement_FsS0{text-align:center;margin:0 auto;padding:48px;font-size:24px;font-weight:700}.announcementDark_tzC4{color:#fff;--ifm-link-color:var(--ifm-color-primary);background-color:#20232a}.announcementInner_RsrQ{max-width:768px;margin:0 auto}.topBanner_JYZy{text-align:center;flex-direction:column;align-items:center;max-width:900px;margin:0 auto;padding:30px 20px;font-size:20px;display:flex}.topBannerTitle_nAZL{margin-bottom:.4rem;font-size:54px;font-weight:700}@media only screen and (max-width:768px){.topBannerTitle_nAZL{font-size:40px}}.topBannerTitleText_Ferb{background:linear-gradient(90deg,#833ab4 0%,#fd1d1d 50%,#fcb045 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.topBannerTitleText_Ferb:hover{border-color:#9800ff;border-bottom-style:solid;border-bottom-width:2px}html[data-theme=dark] .topBannerTitleText_Ferb{background:linear-gradient(90deg,#9800ff 0%,#f62929 50%,#ffa908 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.topBannerDescription_fLgs{font-size:20px}@media only screen and (max-width:768px){.topBannerDescription_fLgs{white-space:normal;font-size:16px}}.hero_syme{background-color:#2b3137;padding:48px}.heroInner_VWeJ{max-width:1100px;margin:0 auto;padding:0 20px}.heroProjectTagline_EkV5{color:#fff;margin:0;font-size:60px}.heroTitleTextHtml_zYwv b{color:var(--ifm-color-primary)}@keyframes jack-in-the-box_cF72{0%{opacity:0;transform-origin:bottom;transform:scale(.1)rotate(30deg)}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}.heroLogo_jM6J{float:right;height:auto;margin-top:20px;padding:0 20px 20px;animation-name:jack-in-the-box_cF72;animation-duration:2s}.indexCtas_hUA_{--ifm-button-size-multiplier:1.6;flex-wrap:wrap;align-items:center;margin-top:24px;display:flex}.indexCtas_hUA_ a,.indexCtas_hUA_ a:hover{color:#000}.indexCtas_hUA_ a:last-of-type{margin:20px 36px}.indexCtasGitHubButtonWrapper_AOht{display:flex}.indexCtasGitHubButton_sMIS{overflow:hidden}.indexCtaTryNowButton_wlFR:hover{color:var(--ifm-color-primary)}@media only screen and (max-width:768px){.hero_syme{padding-left:20px;padding-right:20px}.heroInner_VWeJ{padding:0}.heroProjectTagline_EkV5{text-align:center;font-size:36px}.heroLogo_jM6J{float:none;margin:0 auto;display:block}.indexCtas_hUA_{justify-content:center}.indexCtas_hUA_ a{margin:20px 36px}.indexCtasGitHubButton_sMIS{display:none}}.tweetsSection_Fqsy>.col>*{margin-bottom:2rem}@media (max-width:996px){.tweetsSection_Fqsy>.col:last-child>:last-child{margin-bottom:0}}@media (min-width:997px){.tweetsSection_Fqsy>.col>:last-child{margin-bottom:0}}.test-marker-site-index-page_LJ7R{content:"site-index-page"}.main_LiBd{padding:var(--ifm-spacing-horizontal);background:var(--site-color-feedback-background);border-radius:4px;min-height:500px}.authorListItem_Y1Zl{margin-bottom:2rem;list-style-type:none}.searchBar_E3wW{margin-left:auto}.searchBar_E3wW input{border:1px solid gray;border-radius:15px;height:30px;padding:10px}.svg_d33c{-webkit-user-select:none;user-select:none;color:#e9669e;fill:currentColor;width:1em;height:1em;display:inline-block}.small_xkoK{font-size:1rem}.medium_J4if{font-size:1.25rem}.large_G4cM{font-size:1.8rem}.showcaseCardImage_wjKy{border-bottom:2px solid var(--ifm-color-emphasis-200);height:150px;overflow:hidden}.showcaseCardHeader_H8b9{align-items:center;margin-bottom:12px;display:flex}.showcaseCardTitle_ZxTI{flex:auto;margin-bottom:0}.showcaseCardTitle_ZxTI a{background:linear-gradient(var(--ifm-color-primary),var(--ifm-color-primary))0% 100%/0% 1px no-repeat;-webkit-text-decoration:none;text-decoration:none;transition:background-size .2s ease-out}.showcaseCardTitle_ZxTI a:not(:focus):hover{background-size:100% 1px}.showcaseCardTitle_ZxTI,.showcaseCardHeader_H8b9{margin-right:.25rem}.showcaseCardSrcBtn_F6t0{border:none;margin-left:6px;padding-left:12px;padding-right:12px}.showcaseCardSrcBtn_F6t0:focus-visible{background-color:var(--ifm-color-secondary-dark)}[data-theme=dark] .showcaseCardSrcBtn_F6t0{color:inherit;background-color:var(--ifm-color-emphasis-200)!important}[data-theme=dark] .showcaseCardSrcBtn_F6t0:hover{background-color:var(--ifm-color-emphasis-300)!important}.showcaseCardBody_bvOP{font-size:smaller;line-height:1.66}.cardFooter_Xq1d{flex-wrap:wrap;display:flex}.tag_jo6t{border:1px solid var(--ifm-color-secondary-darkest);cursor:default;border-radius:12px;align-items:center;margin-right:6px;font-size:.675rem;display:inline-flex;margin-bottom:6px!important}.tag_jo6t .textLabel_lQex{margin-left:8px}.tag_jo6t .colorLabel_D_Fl{border-radius:50%;width:7px;height:7px;margin-left:6px;margin-right:6px}.cardList_kMxr{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;display:grid}.showcaseFavorite_LFys{background-color:#f6fdfd;padding-top:2rem;padding-bottom:2rem}html[data-theme=dark] .showcaseFavorite_LFys{background-color:#232525}.headingFavorites_LTro{align-items:center;display:flex}.checkboxLabel_vxMa:hover{opacity:1;box-shadow:0 0 2px 1px var(--ifm-color-secondary-darkest)}input[type=checkbox]+.checkboxLabel_vxMa{cursor:pointer;opacity:.85;border:2px solid var(--ifm-color-secondary-darkest);border-radius:4px;align-items:center;padding:.275rem .8rem;line-height:1.5;transition:opacity .2s ease-out;display:flex}input:focus-visible+.checkboxLabel_vxMa{outline:2px solid}input:checked+.checkboxLabel_vxMa{opacity:.9;border:2px solid var(--ifm-color-primary-darkest);background-color:#94e1d040}input:checked+.checkboxLabel_vxMa:hover{opacity:.75;box-shadow:0 0 2px 1px var(--ifm-color-primary-dark)}html[data-theme=dark] input:checked+.checkboxLabel_vxMa{background-color:#94e1d01a}.checkboxLabel_DiOL{--height:25px;--width:80px;--border:2px;width:var(--width);height:var(--height);border-radius:var(--height);border:var(--border)solid var(--ifm-color-primary-darkest);cursor:pointer;opacity:.75;transition:opacity var(--ifm-transition-fast)var(--ifm-transition-timing-default);box-shadow:var(--ifm-global-shadow-md);justify-content:space-around;display:flex;position:relative}.checkboxLabel_DiOL:hover{opacity:1;box-shadow:var(--ifm-global-shadow-md),0 0 2px 1px var(--ifm-color-primary-dark)}.checkboxLabel_DiOL:after{content:"";width:calc(var(--width)/2);border-radius:var(--height);background-color:var(--ifm-color-primary-darkest);height:100%;transition:transform var(--ifm-transition-fast)var(--ifm-transition-timing-default);transform:translateX(calc(var(--width)/2 - var(--border)));position:absolute;inset:0}input:focus-visible~.checkboxLabel_DiOL:after{outline:2px solid}.checkboxLabel_DiOL>*{color:inherit;font-size:.8rem;transition:opacity .15s ease-in 50ms}input:checked~.checkboxLabel_DiOL:after{transform:translateX(calc(-1*var(--border)))}.headingRow_DGKw{justify-content:space-between;align-items:center;display:flex}.headingText_iR0x{align-items:baseline;display:flex}.headingText_iR0x>h2{margin-bottom:0}.headingText_iR0x>span{margin-left:8px}.headingButtons_DX79{align-items:center;display:flex}.headingButtons_DX79>*{margin-left:8px}.tagList_Ku_M{flex-wrap:wrap;align-items:center;display:flex}.tagListItem_aQcS{-webkit-user-select:none;user-select:none;white-space:nowrap;height:32px;margin-top:.5rem;margin-right:.5rem;font-size:.8rem}.tagListItem_aQcS:last-child{margin-right:0}.codeBlockContainer_jDV4{background:var(--prism-background-color);color:var(--prism-color);margin-bottom:var(--ifm-leading);box-shadow:var(--ifm-global-shadow-lw);border-radius:var(--ifm-code-border-radius)}.codeBlock_Gebt{--ifm-pre-background:var(--prism-background-color);margin:0;padding:0}.codeBlockStandalone_i_cY{padding:0}.codeBlockLines_FJaf{font:inherit;float:left;min-width:100%;padding:var(--ifm-pre-padding)}.codeBlockLinesWithNumbering_FU9Q{padding:var(--ifm-pre-padding)0;display:table}@media print{.codeBlockLines_FJaf{white-space:pre-wrap}}:where(:root){--docusaurus-highlighted-code-line-bg:#484d5b}:where([data-theme=dark]){--docusaurus-highlighted-code-line-bg:#646464}.theme-code-block-highlighted-line{background-color:var(--docusaurus-highlighted-code-line-bg);margin:0 calc(-1*var(--ifm-pre-padding));padding:0 var(--ifm-pre-padding);display:block}.codeLine_qRmp{counter-increment:line-count;display:table-row}.codeLineNumber_dS_J{text-align:right;width:1%;padding:0 var(--ifm-pre-padding);background:var(--ifm-pre-background);overflow-wrap:normal;display:table-cell;position:sticky;left:0}.codeLineNumber_dS_J:before{content:counter(line-count);opacity:.4}.theme-code-block-highlighted-line .codeLineNumber_dS_J:before{opacity:.8}.codeLineContent_XF5l{padding-right:var(--ifm-pre-padding)}.theme-code-block:hover .copyButtonCopied_wDuR{opacity:1!important}.copyButtonIcons_gMWc{width:1.125rem;height:1.125rem;position:relative}.copyButtonIcon_GXfb,.copyButtonSuccessIcon_ktUX{fill:currentColor;opacity:inherit;width:inherit;height:inherit;transition:all var(--ifm-transition-fast)ease;position:absolute;top:0;left:0}.copyButtonSuccessIcon_ktUX{opacity:0;color:#00d600;top:50%;left:50%;transform:translate(-50%,-50%)scale(.33)}.copyButtonCopied_wDuR .copyButtonIcon_GXfb{opacity:0;transform:scale(.33)}.copyButtonCopied_wDuR .copyButtonSuccessIcon_ktUX{opacity:1;transition-delay:75ms;transform:translate(-50%,-50%)scale(1)}.wordWrapButtonIcon___5r{width:1.2rem;height:1.2rem}.wordWrapButtonEnabled_nam_ .wordWrapButtonIcon___5r{color:var(--ifm-color-primary)}.buttonGroup_KXnS{-moz-column-gap:.2rem;right:calc(var(--ifm-pre-padding)/2);top:calc(var(--ifm-pre-padding)/2);column-gap:.2rem;display:flex;position:absolute}.buttonGroup_KXnS button{background:var(--prism-background-color);color:var(--prism-color);border:1px solid var(--ifm-color-emphasis-300);border-radius:var(--ifm-global-radius);transition:opacity var(--ifm-transition-fast)ease-in-out;opacity:0;align-items:center;padding:.4rem;line-height:0;display:flex}.buttonGroup_KXnS button:focus-visible,.buttonGroup_KXnS button:hover{opacity:1!important}.theme-code-block:hover .buttonGroup_KXnS button{opacity:.4}.codeBlockContent_cKMj{border-radius:inherit;direction:ltr;position:relative}.codeBlockTitle_U6Q0{border-bottom:1px solid var(--ifm-color-emphasis-300);font-size:var(--ifm-code-font-size);padding:.75rem var(--ifm-pre-padding);border-top-left-radius:inherit;border-top-right-radius:inherit;font-weight:500}.codeBlockTitle_U6Q0+.codeBlockContent_cKMj .codeBlock_QST6{border-top-left-radius:0;border-top-right-radius:0}.playgroundContainer_TDLX{margin-bottom:var(--ifm-leading);border-radius:var(--ifm-global-radius);box-shadow:var(--ifm-global-shadow-lw);overflow:hidden}.playgroundHeader_h_Hu{letter-spacing:.08rem;text-transform:uppercase;background:var(--ifm-color-emphasis-200);color:var(--ifm-color-content);font-weight:700;font-size:var(--ifm-code-font-size);padding:.75rem}.playgroundHeader_h_Hu:first-of-type{background:var(--ifm-color-emphasis-700);color:var(--ifm-color-content-inverse)}.playgroundPreview_u2xE{background-color:var(--ifm-pre-background);padding:1rem}:root{--docusaurus-tag-list-border:var(--ifm-color-emphasis-300)}.tag_Nd8t{border:1px solid var(--docusaurus-tag-list-border);transition:border var(--ifm-transition-fast)}.tag_Nd8t:hover{--docusaurus-tag-list-border:var(--ifm-link-color);-webkit-text-decoration:none;text-decoration:none}.tagRegular_TiLs{border-radius:var(--ifm-global-radius);padding:.2rem .5rem .3rem;font-size:90%}.tagWithCount_AQg7{border-left:0;align-items:center;padding:0 .5rem 0 1rem;display:flex;position:relative}.tagWithCount_AQg7:before,.tagWithCount_AQg7:after{content:"";border:1px solid var(--docusaurus-tag-list-border);transition:inherit;position:absolute;top:50%}.tagWithCount_AQg7:before{border-bottom:0;border-right:0;width:1.18rem;height:1.18rem;right:100%;transform:translate(50%,-50%)rotate(-45deg)}.tagWithCount_AQg7:after{border-radius:50%;width:.5rem;height:.5rem;left:0;transform:translateY(-50%)}.tagWithCount_AQg7 span{background:var(--ifm-color-secondary);color:var(--ifm-color-black);border-radius:var(--ifm-global-radius);margin-left:.3rem;padding:.1rem .4rem;font-size:.7rem;line-height:1.2}.tag_SyQ5{margin:.5rem .5rem 0 1rem;display:inline-block}.playgroundEditor_uqZ4{direction:ltr;font:var(--ifm-code-font-size)/var(--ifm-pre-line-height)var(--ifm-font-family-monospace)!important}.playgroundEditor_uqZ4 pre{border-radius:0}.details_Nokh{--docusaurus-details-summary-arrow-size:.38rem;--docusaurus-details-transition:transform .2s ease;--docusaurus-details-decoration-color:grey}.details_Nokh>summary{cursor:pointer;padding-left:1rem;list-style:none;position:relative}.details_Nokh>summary::-webkit-details-marker{display:none}.details_Nokh>summary:before{content:"";border-width:var(--docusaurus-details-summary-arrow-size);border-style:solid;border-color:transparent transparent transparent var(--docusaurus-details-decoration-color);transition:var(--docusaurus-details-transition);transform-origin:calc(var(--docusaurus-details-summary-arrow-size)/2)50%;position:absolute;top:.45rem;left:0;transform:rotate(0)}.details_Nokh[open]:not(.isBrowser_QrB5)>summary:before,.details_Nokh[data-collapsed=false].isBrowser_QrB5>summary:before{transform:rotate(90deg)}.collapsibleContent_EoA1{border-top:1px solid var(--docusaurus-details-decoration-color);margin-top:1rem;padding-top:1rem}.collapsibleContent_EoA1 p:last-child,.details_Nokh>summary>p:last-child{margin-bottom:0}.details_Cn_P{--docusaurus-details-decoration-color:var(--ifm-alert-border-color);--docusaurus-details-transition:transform var(--ifm-transition-fast)ease;margin:0 0 var(--ifm-spacing-vertical);border:1px solid var(--ifm-alert-border-color)}.tags_rTaS{display:inline}.tag_l5va{margin:0 .4rem .5rem 0;display:inline-block}.iconEdit_IMw_{vertical-align:sub;margin-right:.3em}.image_oRbT{object-fit:cover;width:100%;height:100%}.containsTaskList_k9gM{list-style:none}:not(.containsTaskList_k9gM>li)>.containsTaskList_k9gM{padding-left:0}.authorCol_mDBc{max-width:inherit!important;flex-grow:1!important}.imageOnlyAuthorRow_WiD6{flex-flow:wrap;display:flex}.imageOnlyAuthorCol_uiac{margin-left:.3rem;margin-right:.3rem}.imageOnlyAuthorCol_uiac [class^=image]{background-color:var(--ifm-color-emphasis-100)}.toggleButton_WvRg{width:var(--ifm-avatar-photo-size);height:var(--ifm-avatar-photo-size);background-color:var(--ifm-color-emphasis-100);border-radius:50%;margin-left:.3rem;margin-right:.3rem}.toggleButtonIconExpanded_ERxv{transform:rotate(180deg)}.img_vXGZ{height:auto}.changelogItemTitleList_sueG{font-size:2rem}.admonition_o5H7{margin-bottom:1em}.admonitionHeading_FzoX{font:var(--ifm-heading-font-weight)var(--ifm-h5-font-size)/var(--ifm-heading-line-height)var(--ifm-heading-font-family);text-transform:uppercase}.admonitionHeading_FzoX:not(:last-child){margin-bottom:.3rem}.admonitionHeading_FzoX code{text-transform:none}.admonitionIcon_rXq6{vertical-align:middle;margin-right:.4em;display:inline-block}.admonitionIcon_rXq6 svg{width:1.6em;height:1.6em;fill:var(--ifm-alert-foreground-color);display:inline-block}.admonitionContent_Knsx>:last-child{margin-bottom:0}.color_mVUL{vertical-align:middle;border-radius:.5rem;width:2rem;height:2rem;display:inline-block}.input_HUC3{border-color:var(--ifm-color-content-secondary);border-radius:var(--ifm-global-radius);border-style:solid;border-width:var(--ifm-global-border-width);font-size:var(--ifm-font-size-base);padding:.5rem}.colorInput_C1YB{border-color:var(--ifm-color-content-secondary);border-radius:var(--ifm-global-radius);border-style:solid;border-width:var(--ifm-global-border-width);height:2.25rem;position:relative;top:7px}.colorTable_Js7s{font-size:small}.container_RUsj,.container_RUsj>svg{max-width:100%}.lastUpdated_OHCJ{margin-top:.2rem;font-size:smaller;font-style:italic}@media (min-width:997px){.lastUpdated_OHCJ{text-align:right}.tocMobile_NSfz{display:none}}@media print{.tocMobile_NSfz{display:none}}.tweetQuote_h8Rz{--ifm-link-color:var(--ifm-color-emphasis-900);--ifm-link-hover-color:var(--ifm-color-emphasis-900);margin:3rem 1rem;padding:0}.tweetQuote_h8Rz blockquote{text-align:center;border:none;margin-bottom:.6rem;font-size:1.2rem;font-weight:200;line-height:1.4;position:relative}.tweetQuote_h8Rz .avatar__subtitle{margin-top:0}.tweetQuote_h8Rz blockquote:before,.tweetQuote_h8Rz blockquote:after{color:#f1efe6;width:3rem;height:3rem;font-family:cursive;font-size:6rem;line-height:1;position:absolute}.tweetQuote_h8Rz blockquote:before{content:"“";top:-1.1rem;left:-2.4rem}.tweetQuote_h8Rz blockquote:after{content:"”";bottom:-1.1rem;right:-1.6rem}[data-theme=dark] .tweetQuote_h8Rz blockquote:before,[data-theme=dark] .tweetQuote_h8Rz blockquote:after{color:#3b3b3b}.tweetQuote_h8Rz p{display:inline}.tweetQuote_h8Rz .avatarImg_b51M{width:42px;height:42px}.changelogItemContainer_jeDt{margin-bottom:1rem}.tableOfContents_RLlU{max-height:calc(100vh - (var(--ifm-navbar-height) + 2rem));top:calc(var(--ifm-navbar-height) + 1rem);position:sticky;overflow-y:auto}@media (max-width:996px){.tableOfContents_RLlU{display:none}.docItemContainer_oucX{padding:0 .3rem}}.rss_fOa_,.rss_fOa_:hover{color:#f26522}.x_RTSd,.x_RTSd:hover{color:#1da1f2}.breadcrumbHomeIcon_uaSn{vertical-align:top;width:1.1rem;height:1.1rem;position:relative;top:1px}.breadcrumbsContainer_Wvrh{--ifm-breadcrumb-size-multiplier:.8;margin-bottom:.8rem}@media (min-width:997px){.generatedIndexPage_hs4p{max-width:75%!important}}.title_tRie{--ifm-h1-font-size:3rem;margin-bottom:calc(1.25*var(--ifm-leading))}.footerTip_UBUV{margin-top:var(--ifm-paragraph-margin-bottom);font-size:.8rem}.docItemContainer_RhpI header+*,.docItemContainer_RhpI article>:first-child{margin-top:0}@media (min-width:997px){.docItemCol_n6xZ{max-width:75%!important}}.mdxPageWrapper_bWhk{justify-content:center}
\ No newline at end of file
diff --git a/assets/js/01657c2b.016feb39.js b/assets/js/01657c2b.f540a5cb.js
similarity index 99%
rename from assets/js/01657c2b.016feb39.js
rename to assets/js/01657c2b.f540a5cb.js
index 41600e4f3f..eb18ebe99a 100644
--- a/assets/js/01657c2b.016feb39.js
+++ b/assets/js/01657c2b.f540a5cb.js
@@ -1 +1 @@
-(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["8623"],{64027:function(e,t,n){"use strict";n.d(t,{Z:()=>o});let o=n.p+"assets/images/oss_logo-25c7e8934a28d0f23722c77adb6e7da4.png"},65945:function(e,t,n){"use strict";n.d(t,{Z:()=>o});let o="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,t,n){"use strict";n.r(t),n.d(t,{frontMatter:()=>d,default:()=>m,contentTitle:()=>c,assets:()=>h,docusaurusRequire:()=>u,toc:()=>g,metadata:()=>o});var o=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":1746811575000,"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"}}'),s=n(85893),i=n(80980),r=n(11037),a=n(41949),l=n.n(a);let d={image:"./img/oss_logo.png"},c="Image Tests",h={image:n(64027).Z},u=n(41949),g=[{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 p(e){let t={h1:"h1",h2:"h2",header:"header",img:"img",p:"p",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"image-tests",children:"Image Tests"})}),"\n","\n","\n","\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{alt:"URL encoded image",src:n(65945).Z+"",width:"256",height:"82"})}),"\n",(0,s.jsx)(t.h2,{id:"regular-images",children:"Regular images"}),"\n",(0,s.jsx)(t.p,{children:"Those only render in DEV when IdealImage plugin is disabled."}),"\n",(0,s.jsx)("img",{src:l()}),"\n",(0,s.jsx)("img",{src:u.default}),"\n",(0,s.jsx)(t.h2,{id:"ideal-images",children:"Ideal images"}),"\n",(0,s.jsx)(r.Z,{img:l()}),"\n",(0,s.jsx)(r.Z,{img:u}),"\n",(0,s.jsx)(t.h2,{id:"css-image",children:"CSS Image"}),"\n","\n",(0,s.jsx)(t.p,{children:"This should display a div with have a background image"}),"\n",(0,s.jsx)("div",{className:"dogfood-image-test-css",style:{border:"solid",height:"10rem"}})]})}function m(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}m.displayName="MDXContent(_dogfooding/_docs tests/tests/images/index.mdx)"},41949:function(e,t,n){e.exports={src:{srcSet:n.p+"assets/ideal-img/docusaurus.30c6ff4.200.png 200w",images:[{path:n.p+"assets/ideal-img/docusaurus.30c6ff4.200.png",width:200,height:200}],src:n.p+"assets/ideal-img/docusaurus.30c6ff4.200.png",toString:function(){return n.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"}},11037:function(e,t,n){"use strict";n.d(t,{Z:()=>ee});var o=n(85893),s=n(67294),i=n(77827);function r(e,t,n,o){return e.addEventListener(t,n,o),()=>e.removeEventListener(t,n,o)}function a(e){return"undefined"!=typeof window?(0,o.jsx)(l,{...e,children:e.children}):e.children}class l extends s.Component{static defaultProps={topOffset:0,bottomOffset:0,onEnter(){},onLeave(){}};scrollableAncestor;previousPosition=null;unsubscribe;innerRef=(0,s.createRef)();componentDidMount(){var e;let t;this.scrollableAncestor=function(e){let t=e;for(;t.parentNode&&(t=t.parentNode)!==document.body;){let e=window.getComputedStyle(t),n=e.getPropertyValue("overflow-y")||e.getPropertyValue("overflow");if("auto"===n||"scroll"===n||"overlay"===n)return t}return window}(this.innerRef.current);let n=r(this.scrollableAncestor,"scroll",this._handleScroll,{passive:!0}),o=r(window,"resize",this._handleScroll,{passive:!0}),s=(e=()=>{this._handleScroll()},t=!0,queueMicrotask(()=>{t&&e()}),()=>t=!1);this.unsubscribe=()=>{n(),o(),s()}}componentDidUpdate(){this._handleScroll()}componentWillUnmount(){this.unsubscribe?.()}_handleScroll=()=>{var e;let t=this.innerRef.current,{topOffset:n,bottomOffset:o,onEnter:s,onLeave:i}=this.props,r=(e=function(e){let t,n,{node:o,scrollableAncestor:s,topOffset:i,bottomOffset:r}=e,{top:a,bottom:l}=o.getBoundingClientRect();s===window?(t=window.innerHeight,n=0):(t=s.offsetHeight,n=s.getBoundingClientRect().top);let d=n+t;return{top:a,bottom:l,viewportTop:n+i,viewportBottom:d-r}}({node:t,scrollableAncestor:this.scrollableAncestor,topOffset:n,bottomOffset:o})).viewportBottom-e.viewportTop==0?"invisible":e.viewportTop<=e.top&&e.top<=e.viewportBottom||e.viewportTop<=e.bottom&&e.bottom<=e.viewportBottom||e.top<=e.viewportTop&&e.viewportBottom<=e.bottom?"inside":e.viewportBottom1?s.join(" "):s[0],style:e}}let c="loading",h="loaded",u="error",g={load:"load",loading:c,loaded:h,error:u,noicon:"noicon",offline:"offline"},{load:p,loading:m,loaded:w,error:f,noicon:A,offline:v}=g;class b extends s.PureComponent{static defaultProps={iconColor:"#fff",iconSize:64};constructor(e){super(e),this.state={isMounted:!1}}componentDidMount(){this.setState({isMounted:!0}),this.props.onDimensions&&this.dimensionElement&&this.props.onDimensions({width:this.dimensionElement.clientWidth||this.dimensionElement.parentNode.clientWidth,height:this.dimensionElement.clientHeight||this.dimensionElement.parentNode.clientHeight})}renderIcon(e){let{icon:t,icons:n,iconColor:o,iconSize:i,theme:r}=e,a=n[t];if(!a)return null;let l=d({width:i+100,height:i,color:o},r.icon);return s.createElement("div",l,[s.createElement(a,{fill:o,size:i,key:"icon"}),s.createElement("br",{key:"br"}),this.props.message])}renderImage(e){return e.icon===w?(0,o.jsx)("img",{...d(e.theme.img),src:e.src,alt:e.alt,width:e.width,height:e.height}):(0,o.jsx)("svg",{...d(e.theme.img),width:e.width,height:e.height,ref:e=>this.dimensionElement=e})}renderNoscript(e){return this.state.isMounted?null:(0,o.jsx)("noscript",{children:(0,o.jsx)("img",{...d(e.theme.img,e.theme.noscript),src:e.nsSrc,srcSet:e.nsSrcSet,alt:e.alt,width:e.width,height:e.height})})}render(){let e,t=this.props,{placeholder:n,theme:s}=t;return e=t.icon===w?{}:n.lqip?{backgroundImage:`url("${n.lqip}")`}:{backgroundColor:n.color},(0,o.jsxs)("div",{...d(s.placeholder,e,t.style,t.className),onClick:this.props.onClick,onKeyPress:this.props.onClick,ref:this.props.innerRef,children:[this.renderImage(t),this.renderNoscript(t),this.renderIcon(t)]})}}class C{constructor(){this.signal={onabort:()=>{}},this.abort=()=>this.signal.onabort()}}let S=(e,t)=>(t=t||{},new Promise((n,o)=>{let s=new XMLHttpRequest;for(let n in s.open(t.method||"get",e,!0),t.headers)s.setRequestHeader(n,t.headers[n]);s.withCredentials="include"===t.credentials,s.onload=()=>{n(function e(){let t,n=[],o=[],i={};return s.getAllResponseHeaders().replace(/^(.*?):\s*?([\s\S]*?)$/gm,(e,s,r)=>{n.push(s=s.toLowerCase()),o.push([s,r]),t=i[s],i[s]=t?`${t},${r}`:r}),{ok:(s.status/100|0)==2,status:s.status,statusText:s.statusText,url:s.responseURL,clone:e,text:()=>Promise.resolve(s.responseText),json:()=>Promise.resolve(s.responseText).then(JSON.parse),blob:()=>Promise.resolve(new Blob([s.response])),headers:{keys:()=>n,entries:()=>o,get:e=>i[e.toLowerCase()],has:e=>e.toLowerCase()in i}}}())},s.onerror=o,t.signal&&(t.signal.onabort=()=>{s.onerror=s.onload=void 0,s.abort()}),s.send(t.body)})),x=(e,t)=>{if(!t)return e;let n=e.then(e=>e,e=>e);return n.cancel=()=>{e.cancel(),t.cancel()},n},I=e=>{let t,n=new Promise(n=>{t=setTimeout(n,e)});return n.cancel=()=>{clearTimeout(t),t=void 0},n},E=e=>{let t=new Image,n=new Promise((n,o)=>{t.onload=n,t.onabort=t.onerror=()=>o({}),t.src=e});return n.cancel=()=>{if(!t)throw Error("Already canceled");t.onload=t.onabort=t.onerror=void 0,t.src="",t=void 0},n},L=(e,t)=>{let n=new C,o=n.signal,s=new Promise((n,s)=>S(e,{...t,signal:o}).then(t=>{t.ok?t.blob().then(()=>E(e)).then(n):s({status:t.status})},s));return s.cancel=()=>{if(!n)throw Error("Already canceled");n.abort(),n=void 0},s},B="undefined"==typeof window||"ReactSnap"===window.navigator.userAgent,M=!B&&!!window.navigator.connection,k=(e,t)=>{let n;if(B)return 0;t||(t=window);let o=e.width,{screen:s}=t,i=s.width,r=s.height,{documentElement:a}=document,l=t.innerWidth||a.clientWidth,d=t.innerHeight||a.clientHeight,c=t.devicePixelRatio||1;if(i>l){let e=document.getElementsByTagName("body")[0],t=l-o;n=(e.clientHeight>d||e.clientHeight>r)&&t<=15?i-t:o/l*i}else n=o;return n*c},H=e=>{let t=["Bytes","KB","MB","GB","TB"];if(0===e)return"n/a";let n=parseInt(Math.floor(Math.log(e)/Math.log(1024)),10);return 0===n?`${e} ${t[n]}`:`${(e/1024**n).toFixed(1)} ${t[n]}`},V=(()=>{if(B)return!1;let e=document.createElement("canvas");return!!(e.getContext&&e.getContext("2d"))&&0===e.toDataURL("image/webp").indexOf("data:image/webp")})(),y=e=>"webp"===e.format||e.src&&e.src.match(/\.webp($|\?.*)/i),j=e=>{let t,n,{srcSet:o,maxImageWidth:s,supportsWebp:i}=e;if(0===o.length)throw Error("Need at least one item in srcSet");if(i)0===(t=o.filter(y)).length&&(t=o);else if(0===(t=o.filter(e=>!y(e))).length)throw Error("Need at least one supported format item in srcSet");let r=t.filter(e=>e.width>=s);return 0===r.length?(r=t,n=Math.max.apply(null,r.map(e=>e.width))):n=Math.min.apply(null,r.map(e=>e.width)),t.filter(e=>e.width===n)[0]},N=e=>{let{srcSet:t,getUrl:n}=e;if(!B)return{};let o=t.filter(e=>!y(e)),s=o[0];return{nsSrcSet:o.map(e=>`${n?n(e):e.src} ${e.width}w`).join(","),nsSrc:n?n(s):s.src,ssr:B}},{initial:O,loading:T,loaded:U,error:P}={initial:"initial",loading:c,loaded:h,error:u},D=e=>{let{connection:t,size:n,threshold:o,possiblySlowNetwork:s}=e;if(s)return!1;if(!t)return!0;let{downlink:i,rtt:r,effectiveType:a}=t;switch(a){case"slow-2g":case"2g":return!1;case"3g":if(i&&n&&o)return 8*n/(1e3*i)+r{switch(e){case g.noicon:case g.loaded:return null;case g.loading:return"Loading...";case g.load:let{pickedSrc:n}=t,{size:s}=n;if(s)return["Click to load (",(0,o.jsx)("nobr",{children:H(s)},"nb"),")"];return"Click to load";case g.offline:return"Your browser is offline. Image not loaded";case g.error:let{loadInfo:i}=t;if(404===i)return"404. Image not found";return"Error. Click to reload";default:throw Error(`Wrong icon: ${e}`)}},R=e=>{let{loadState:t,onLine:n,overThreshold:o,userTriggered:s}=e;if(B)return g.noicon;switch(t){case U:return g.loaded;case T:return o?g.loading:g.noicon;case O:if(!n)return g.offline;{let{shouldAutoDownload:t}=e;if(void 0===t)return g.noicon;return s||!t?g.load:g.noicon}case P:return n?g.error:g.offline;default:throw Error(`Wrong state: ${t}`)}};class z extends s.Component{constructor(e){super(e),this.state={loadState:O,connection:M?{downlink:navigator.connection.downlink,rtt:navigator.connection.rtt,effectiveType:navigator.connection.effectiveType}:null,onLine:!0,overThreshold:!1,inViewport:!1,userTriggered:!1,possiblySlowNetwork:!1}}static defaultProps={shouldAutoDownload:D,getMessage:J,getIcon:R,loader:"xhr"};componentDidMount(){M?(this.updateConnection=()=>{navigator.onLine&&this.state.loadState===O&&this.setState({connection:{effectiveType:navigator.connection.effectiveType,downlink:navigator.connection.downlink,rtt:navigator.connection.rtt}})},navigator.connection.addEventListener("onchange",this.updateConnection)):this.props.threshold&&(this.possiblySlowNetworkListener=e=>{if(this.state.loadState!==O)return;let{possiblySlowNetwork:t}=e.detail;!this.state.possiblySlowNetwork&&t&&this.setState({possiblySlowNetwork:t})},window.document.addEventListener("possiblySlowNetwork",this.possiblySlowNetworkListener)),this.updateOnlineStatus=()=>this.setState({onLine:navigator.onLine}),this.updateOnlineStatus(),window.addEventListener("online",this.updateOnlineStatus),window.addEventListener("offline",this.updateOnlineStatus)}componentWillUnmount(){this.clear(),M?navigator.connection.removeEventListener("onchange",this.updateConnection):this.props.threshold&&window.document.removeEventListener("possiblySlowNetwork",this.possiblySlowNetworkListener),window.removeEventListener("online",this.updateOnlineStatus),window.removeEventListener("offline",this.updateOnlineStatus)}onClick=()=>{let{loadState:e,onLine:t,overThreshold:n}=this.state;if(t)switch(e){case T:n&&this.cancel(!0);return;case U:return;case O:case P:this.load(!0);return;default:throw Error(`Wrong state: ${e}`)}};clear(){this.loader&&(this.loader.cancel(),this.loader=void 0)}cancel(e){T===this.state.loadState&&(this.clear(),this.loadStateChange(O,e))}loadStateChange(e,t){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;this.setState({loadState:e,overThreshold:!1,userTriggered:!!t,loadInfo:n})}load=e=>{let{loadState:t,url:n}=this.state;if(B||U===t||T===t)return;this.loadStateChange(T,e);let{threshold:o}=this.props,s="xhr"===this.props.loader?L(n):E(n);if(s.then(()=>{this.clear(),this.loadStateChange(U,!1)}).catch(e=>{this.clear(),404===e.status?this.loadStateChange(P,!1,404):this.loadStateChange(P,!1)}),o){let e=I(o);e.then(()=>{this.loader&&(window.document.dispatchEvent(new CustomEvent("possiblySlowNetwork",{detail:{possiblySlowNetwork:!0}})),this.setState({overThreshold:!0}),this.state.userTriggered||this.cancel(!0))}),this.loader=x(s,e)}else this.loader=s};onEnter=()=>{if(this.state.inViewport)return;this.setState({inViewport:!0});let e=j({srcSet:this.props.srcSet,maxImageWidth:this.props.srcSet.length>1?k(this.state.dimensions):0,supportsWebp:V}),{getUrl:t}=this.props,n=t?t(e):e.src,o=this.props.shouldAutoDownload({...this.state,size:e.size});this.setState({pickedSrc:e,shouldAutoDownload:o,url:n},()=>{o&&this.load(!1)})};onLeave=()=>{this.state.loadState!==T||this.state.userTriggered||(this.setState({inViewport:!1}),this.cancel(!1))};render(){let e=this.props.getIcon(this.state),t=this.props.getMessage(e,this.state);return(0,o.jsx)(a,{onEnter:this.onEnter,onLeave:this.onLeave,children:(0,o.jsx)(b,{...this.props,...N(this.props),onClick:this.onClick,icon:e,src:this.state.url||"",onDimensions:e=>this.setState({dimensions:e}),message:t})})}}let Q=e=>{let{size:t=24,fill:n="#000",className:s,path:i}=e;return(0,o.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",className:s,children:[(0,o.jsx)("path",{d:"M0 0h24v24H0z",fill:"none"}),(0,o.jsx)("path",{fill:n,d:i})]})},{load:q,loading:G,loaded:Z,error:K,noicon:F,offline:Y}=g,X={[q]:e=>(0,o.jsx)(Q,{...e,path:"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"}),[G]:e=>(0,o.jsx)(Q,{...e,path:"M6,2V8H6V8L10,12L6,16V16H6V22H18V16H18V16L14,12L18,8V8H18V2H6M16,16.5V20H8V16.5L12,12.5L16,16.5M12,11.5L8,7.5V4H16V7.5L12,11.5Z"}),[Z]:null,[K]:e=>(0,o.jsx)(Q,{...e,path:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"}),[F]:null,[Y]:e=>(0,o.jsx)(Q,{...e,path:"M19.35 10.04C18.67 6.59 15.64 4 12 4c-1.48 0-2.85.43-4.01 1.17l1.46 1.46C10.21 6.23 11.08 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19c1.66 0 3 1.34 3 3 0 1.13-.64 2.11-1.56 2.62l1.45 1.45C23.16 18.16 24 16.68 24 15c0-2.64-2.05-4.78-4.65-4.96zM3 5.27l2.75 2.74C2.56 8.15 0 10.77 0 14c0 3.31 2.69 6 6 6h11.73l2 2L21 20.73 4.27 4 3 5.27zM7.73 10l8 8H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h1.73z"})},W={placeholder:{backgroundSize:"cover",backgroundRepeat:"no-repeat",position:"relative"},img:{width:"100%",height:"auto",maxWidth:"100%",marginBottom:"-4px"},icon:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"},noscript:{position:"absolute",top:0,left:0}},$=e=>{let{icons:t=X,theme:n=W,...s}=e;return(0,o.jsx)(z,{...s,icons:t,theme:n})};function _(e,t){switch(e){case"noicon":case"loaded":return null;case"loading":return(0,i.I)({id:"theme.IdealImageMessage.loading",message:"Loading...",description:"When the full-scale image is loading"});case"load":{let{pickedSrc:e}=t,{size:n}=e,o=n?` (${function(e){let t=["B","KB","MB","GB","TB"];if(0===e)return"n/a";let n=Math.floor(Math.log(e)/Math.log(1024));return 0===n?`${e} ${t[n]}`:`${(e/1024**n).toFixed(1)} ${t[n]}`}(n)})`:"";return(0,i.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:o})}case"offline":return(0,i.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}=t;if(404===e)return(0,i.I)({id:"theme.IdealImageMessage.404error",message:"404. Image not found",description:"When the image is not found"});return(0,i.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 ee(e){let{img:t,...n}=e;return"string"==typeof t||"default"in t?(0,o.jsx)("img",{src:"string"==typeof t?t:t.default,...n}):(0,o.jsx)($,{height:t.src.height??100,width:t.src.width??100,placeholder:{lqip:t.preSrc},src:t.src.src,srcSet:t.src.images.map(e=>({...e,src:e.path})),getMessage:_})}},80980:function(e,t,n){"use strict";n.d(t,{Z:()=>a,a:()=>r});var o=n(67294);let s={},i=o.createContext(s);function r(e){let t=o.useContext(i);return o.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),o.createElement(i.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
+(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["8623"],{64027:function(e,t,n){"use strict";n.d(t,{Z:()=>o});let o=n.p+"assets/images/oss_logo-25c7e8934a28d0f23722c77adb6e7da4.png"},65945:function(e,t,n){"use strict";n.d(t,{Z:()=>o});let o="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,t,n){"use strict";n.r(t),n.d(t,{frontMatter:()=>d,default:()=>m,contentTitle:()=>c,assets:()=>h,docusaurusRequire:()=>u,toc:()=>g,metadata:()=>o});var o=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":1747136891000,"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"}}'),s=n(85893),i=n(80980),r=n(11037),a=n(41949),l=n.n(a);let d={image:"./img/oss_logo.png"},c="Image Tests",h={image:n(64027).Z},u=n(41949),g=[{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 p(e){let t={h1:"h1",h2:"h2",header:"header",img:"img",p:"p",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"image-tests",children:"Image Tests"})}),"\n","\n","\n","\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{alt:"URL encoded image",src:n(65945).Z+"",width:"256",height:"82"})}),"\n",(0,s.jsx)(t.h2,{id:"regular-images",children:"Regular images"}),"\n",(0,s.jsx)(t.p,{children:"Those only render in DEV when IdealImage plugin is disabled."}),"\n",(0,s.jsx)("img",{src:l()}),"\n",(0,s.jsx)("img",{src:u.default}),"\n",(0,s.jsx)(t.h2,{id:"ideal-images",children:"Ideal images"}),"\n",(0,s.jsx)(r.Z,{img:l()}),"\n",(0,s.jsx)(r.Z,{img:u}),"\n",(0,s.jsx)(t.h2,{id:"css-image",children:"CSS Image"}),"\n","\n",(0,s.jsx)(t.p,{children:"This should display a div with have a background image"}),"\n",(0,s.jsx)("div",{className:"dogfood-image-test-css",style:{border:"solid",height:"10rem"}})]})}function m(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}m.displayName="MDXContent(_dogfooding/_docs tests/tests/images/index.mdx)"},41949:function(e,t,n){e.exports={src:{srcSet:n.p+"assets/ideal-img/docusaurus.30c6ff4.200.png 200w",images:[{path:n.p+"assets/ideal-img/docusaurus.30c6ff4.200.png",width:200,height:200}],src:n.p+"assets/ideal-img/docusaurus.30c6ff4.200.png",toString:function(){return n.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"}},11037:function(e,t,n){"use strict";n.d(t,{Z:()=>ee});var o=n(85893),s=n(67294),i=n(77827);function r(e,t,n,o){return e.addEventListener(t,n,o),()=>e.removeEventListener(t,n,o)}function a(e){return"undefined"!=typeof window?(0,o.jsx)(l,{...e,children:e.children}):e.children}class l extends s.Component{static defaultProps={topOffset:0,bottomOffset:0,onEnter(){},onLeave(){}};scrollableAncestor;previousPosition=null;unsubscribe;innerRef=(0,s.createRef)();componentDidMount(){var e;let t;this.scrollableAncestor=function(e){let t=e;for(;t.parentNode&&(t=t.parentNode)!==document.body;){let e=window.getComputedStyle(t),n=e.getPropertyValue("overflow-y")||e.getPropertyValue("overflow");if("auto"===n||"scroll"===n||"overlay"===n)return t}return window}(this.innerRef.current);let n=r(this.scrollableAncestor,"scroll",this._handleScroll,{passive:!0}),o=r(window,"resize",this._handleScroll,{passive:!0}),s=(e=()=>{this._handleScroll()},t=!0,queueMicrotask(()=>{t&&e()}),()=>t=!1);this.unsubscribe=()=>{n(),o(),s()}}componentDidUpdate(){this._handleScroll()}componentWillUnmount(){this.unsubscribe?.()}_handleScroll=()=>{var e;let t=this.innerRef.current,{topOffset:n,bottomOffset:o,onEnter:s,onLeave:i}=this.props,r=(e=function(e){let t,n,{node:o,scrollableAncestor:s,topOffset:i,bottomOffset:r}=e,{top:a,bottom:l}=o.getBoundingClientRect();s===window?(t=window.innerHeight,n=0):(t=s.offsetHeight,n=s.getBoundingClientRect().top);let d=n+t;return{top:a,bottom:l,viewportTop:n+i,viewportBottom:d-r}}({node:t,scrollableAncestor:this.scrollableAncestor,topOffset:n,bottomOffset:o})).viewportBottom-e.viewportTop==0?"invisible":e.viewportTop<=e.top&&e.top<=e.viewportBottom||e.viewportTop<=e.bottom&&e.bottom<=e.viewportBottom||e.top<=e.viewportTop&&e.viewportBottom<=e.bottom?"inside":e.viewportBottom1?s.join(" "):s[0],style:e}}let c="loading",h="loaded",u="error",g={load:"load",loading:c,loaded:h,error:u,noicon:"noicon",offline:"offline"},{load:p,loading:m,loaded:w,error:f,noicon:A,offline:v}=g;class b extends s.PureComponent{static defaultProps={iconColor:"#fff",iconSize:64};constructor(e){super(e),this.state={isMounted:!1}}componentDidMount(){this.setState({isMounted:!0}),this.props.onDimensions&&this.dimensionElement&&this.props.onDimensions({width:this.dimensionElement.clientWidth||this.dimensionElement.parentNode.clientWidth,height:this.dimensionElement.clientHeight||this.dimensionElement.parentNode.clientHeight})}renderIcon(e){let{icon:t,icons:n,iconColor:o,iconSize:i,theme:r}=e,a=n[t];if(!a)return null;let l=d({width:i+100,height:i,color:o},r.icon);return s.createElement("div",l,[s.createElement(a,{fill:o,size:i,key:"icon"}),s.createElement("br",{key:"br"}),this.props.message])}renderImage(e){return e.icon===w?(0,o.jsx)("img",{...d(e.theme.img),src:e.src,alt:e.alt,width:e.width,height:e.height}):(0,o.jsx)("svg",{...d(e.theme.img),width:e.width,height:e.height,ref:e=>this.dimensionElement=e})}renderNoscript(e){return this.state.isMounted?null:(0,o.jsx)("noscript",{children:(0,o.jsx)("img",{...d(e.theme.img,e.theme.noscript),src:e.nsSrc,srcSet:e.nsSrcSet,alt:e.alt,width:e.width,height:e.height})})}render(){let e,t=this.props,{placeholder:n,theme:s}=t;return e=t.icon===w?{}:n.lqip?{backgroundImage:`url("${n.lqip}")`}:{backgroundColor:n.color},(0,o.jsxs)("div",{...d(s.placeholder,e,t.style,t.className),onClick:this.props.onClick,onKeyPress:this.props.onClick,ref:this.props.innerRef,children:[this.renderImage(t),this.renderNoscript(t),this.renderIcon(t)]})}}class C{constructor(){this.signal={onabort:()=>{}},this.abort=()=>this.signal.onabort()}}let S=(e,t)=>(t=t||{},new Promise((n,o)=>{let s=new XMLHttpRequest;for(let n in s.open(t.method||"get",e,!0),t.headers)s.setRequestHeader(n,t.headers[n]);s.withCredentials="include"===t.credentials,s.onload=()=>{n(function e(){let t,n=[],o=[],i={};return s.getAllResponseHeaders().replace(/^(.*?):\s*?([\s\S]*?)$/gm,(e,s,r)=>{n.push(s=s.toLowerCase()),o.push([s,r]),t=i[s],i[s]=t?`${t},${r}`:r}),{ok:(s.status/100|0)==2,status:s.status,statusText:s.statusText,url:s.responseURL,clone:e,text:()=>Promise.resolve(s.responseText),json:()=>Promise.resolve(s.responseText).then(JSON.parse),blob:()=>Promise.resolve(new Blob([s.response])),headers:{keys:()=>n,entries:()=>o,get:e=>i[e.toLowerCase()],has:e=>e.toLowerCase()in i}}}())},s.onerror=o,t.signal&&(t.signal.onabort=()=>{s.onerror=s.onload=void 0,s.abort()}),s.send(t.body)})),x=(e,t)=>{if(!t)return e;let n=e.then(e=>e,e=>e);return n.cancel=()=>{e.cancel(),t.cancel()},n},I=e=>{let t,n=new Promise(n=>{t=setTimeout(n,e)});return n.cancel=()=>{clearTimeout(t),t=void 0},n},E=e=>{let t=new Image,n=new Promise((n,o)=>{t.onload=n,t.onabort=t.onerror=()=>o({}),t.src=e});return n.cancel=()=>{if(!t)throw Error("Already canceled");t.onload=t.onabort=t.onerror=void 0,t.src="",t=void 0},n},L=(e,t)=>{let n=new C,o=n.signal,s=new Promise((n,s)=>S(e,{...t,signal:o}).then(t=>{t.ok?t.blob().then(()=>E(e)).then(n):s({status:t.status})},s));return s.cancel=()=>{if(!n)throw Error("Already canceled");n.abort(),n=void 0},s},B="undefined"==typeof window||"ReactSnap"===window.navigator.userAgent,M=!B&&!!window.navigator.connection,k=(e,t)=>{let n;if(B)return 0;t||(t=window);let o=e.width,{screen:s}=t,i=s.width,r=s.height,{documentElement:a}=document,l=t.innerWidth||a.clientWidth,d=t.innerHeight||a.clientHeight,c=t.devicePixelRatio||1;if(i>l){let e=document.getElementsByTagName("body")[0],t=l-o;n=(e.clientHeight>d||e.clientHeight>r)&&t<=15?i-t:o/l*i}else n=o;return n*c},H=e=>{let t=["Bytes","KB","MB","GB","TB"];if(0===e)return"n/a";let n=parseInt(Math.floor(Math.log(e)/Math.log(1024)),10);return 0===n?`${e} ${t[n]}`:`${(e/1024**n).toFixed(1)} ${t[n]}`},V=(()=>{if(B)return!1;let e=document.createElement("canvas");return!!(e.getContext&&e.getContext("2d"))&&0===e.toDataURL("image/webp").indexOf("data:image/webp")})(),y=e=>"webp"===e.format||e.src&&e.src.match(/\.webp($|\?.*)/i),j=e=>{let t,n,{srcSet:o,maxImageWidth:s,supportsWebp:i}=e;if(0===o.length)throw Error("Need at least one item in srcSet");if(i)0===(t=o.filter(y)).length&&(t=o);else if(0===(t=o.filter(e=>!y(e))).length)throw Error("Need at least one supported format item in srcSet");let r=t.filter(e=>e.width>=s);return 0===r.length?(r=t,n=Math.max.apply(null,r.map(e=>e.width))):n=Math.min.apply(null,r.map(e=>e.width)),t.filter(e=>e.width===n)[0]},N=e=>{let{srcSet:t,getUrl:n}=e;if(!B)return{};let o=t.filter(e=>!y(e)),s=o[0];return{nsSrcSet:o.map(e=>`${n?n(e):e.src} ${e.width}w`).join(","),nsSrc:n?n(s):s.src,ssr:B}},{initial:O,loading:T,loaded:U,error:P}={initial:"initial",loading:c,loaded:h,error:u},D=e=>{let{connection:t,size:n,threshold:o,possiblySlowNetwork:s}=e;if(s)return!1;if(!t)return!0;let{downlink:i,rtt:r,effectiveType:a}=t;switch(a){case"slow-2g":case"2g":return!1;case"3g":if(i&&n&&o)return 8*n/(1e3*i)+r{switch(e){case g.noicon:case g.loaded:return null;case g.loading:return"Loading...";case g.load:let{pickedSrc:n}=t,{size:s}=n;if(s)return["Click to load (",(0,o.jsx)("nobr",{children:H(s)},"nb"),")"];return"Click to load";case g.offline:return"Your browser is offline. Image not loaded";case g.error:let{loadInfo:i}=t;if(404===i)return"404. Image not found";return"Error. Click to reload";default:throw Error(`Wrong icon: ${e}`)}},R=e=>{let{loadState:t,onLine:n,overThreshold:o,userTriggered:s}=e;if(B)return g.noicon;switch(t){case U:return g.loaded;case T:return o?g.loading:g.noicon;case O:if(!n)return g.offline;{let{shouldAutoDownload:t}=e;if(void 0===t)return g.noicon;return s||!t?g.load:g.noicon}case P:return n?g.error:g.offline;default:throw Error(`Wrong state: ${t}`)}};class z extends s.Component{constructor(e){super(e),this.state={loadState:O,connection:M?{downlink:navigator.connection.downlink,rtt:navigator.connection.rtt,effectiveType:navigator.connection.effectiveType}:null,onLine:!0,overThreshold:!1,inViewport:!1,userTriggered:!1,possiblySlowNetwork:!1}}static defaultProps={shouldAutoDownload:D,getMessage:J,getIcon:R,loader:"xhr"};componentDidMount(){M?(this.updateConnection=()=>{navigator.onLine&&this.state.loadState===O&&this.setState({connection:{effectiveType:navigator.connection.effectiveType,downlink:navigator.connection.downlink,rtt:navigator.connection.rtt}})},navigator.connection.addEventListener("onchange",this.updateConnection)):this.props.threshold&&(this.possiblySlowNetworkListener=e=>{if(this.state.loadState!==O)return;let{possiblySlowNetwork:t}=e.detail;!this.state.possiblySlowNetwork&&t&&this.setState({possiblySlowNetwork:t})},window.document.addEventListener("possiblySlowNetwork",this.possiblySlowNetworkListener)),this.updateOnlineStatus=()=>this.setState({onLine:navigator.onLine}),this.updateOnlineStatus(),window.addEventListener("online",this.updateOnlineStatus),window.addEventListener("offline",this.updateOnlineStatus)}componentWillUnmount(){this.clear(),M?navigator.connection.removeEventListener("onchange",this.updateConnection):this.props.threshold&&window.document.removeEventListener("possiblySlowNetwork",this.possiblySlowNetworkListener),window.removeEventListener("online",this.updateOnlineStatus),window.removeEventListener("offline",this.updateOnlineStatus)}onClick=()=>{let{loadState:e,onLine:t,overThreshold:n}=this.state;if(t)switch(e){case T:n&&this.cancel(!0);return;case U:return;case O:case P:this.load(!0);return;default:throw Error(`Wrong state: ${e}`)}};clear(){this.loader&&(this.loader.cancel(),this.loader=void 0)}cancel(e){T===this.state.loadState&&(this.clear(),this.loadStateChange(O,e))}loadStateChange(e,t){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;this.setState({loadState:e,overThreshold:!1,userTriggered:!!t,loadInfo:n})}load=e=>{let{loadState:t,url:n}=this.state;if(B||U===t||T===t)return;this.loadStateChange(T,e);let{threshold:o}=this.props,s="xhr"===this.props.loader?L(n):E(n);if(s.then(()=>{this.clear(),this.loadStateChange(U,!1)}).catch(e=>{this.clear(),404===e.status?this.loadStateChange(P,!1,404):this.loadStateChange(P,!1)}),o){let e=I(o);e.then(()=>{this.loader&&(window.document.dispatchEvent(new CustomEvent("possiblySlowNetwork",{detail:{possiblySlowNetwork:!0}})),this.setState({overThreshold:!0}),this.state.userTriggered||this.cancel(!0))}),this.loader=x(s,e)}else this.loader=s};onEnter=()=>{if(this.state.inViewport)return;this.setState({inViewport:!0});let e=j({srcSet:this.props.srcSet,maxImageWidth:this.props.srcSet.length>1?k(this.state.dimensions):0,supportsWebp:V}),{getUrl:t}=this.props,n=t?t(e):e.src,o=this.props.shouldAutoDownload({...this.state,size:e.size});this.setState({pickedSrc:e,shouldAutoDownload:o,url:n},()=>{o&&this.load(!1)})};onLeave=()=>{this.state.loadState!==T||this.state.userTriggered||(this.setState({inViewport:!1}),this.cancel(!1))};render(){let e=this.props.getIcon(this.state),t=this.props.getMessage(e,this.state);return(0,o.jsx)(a,{onEnter:this.onEnter,onLeave:this.onLeave,children:(0,o.jsx)(b,{...this.props,...N(this.props),onClick:this.onClick,icon:e,src:this.state.url||"",onDimensions:e=>this.setState({dimensions:e}),message:t})})}}let Q=e=>{let{size:t=24,fill:n="#000",className:s,path:i}=e;return(0,o.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",className:s,children:[(0,o.jsx)("path",{d:"M0 0h24v24H0z",fill:"none"}),(0,o.jsx)("path",{fill:n,d:i})]})},{load:q,loading:G,loaded:Z,error:K,noicon:F,offline:Y}=g,X={[q]:e=>(0,o.jsx)(Q,{...e,path:"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"}),[G]:e=>(0,o.jsx)(Q,{...e,path:"M6,2V8H6V8L10,12L6,16V16H6V22H18V16H18V16L14,12L18,8V8H18V2H6M16,16.5V20H8V16.5L12,12.5L16,16.5M12,11.5L8,7.5V4H16V7.5L12,11.5Z"}),[Z]:null,[K]:e=>(0,o.jsx)(Q,{...e,path:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"}),[F]:null,[Y]:e=>(0,o.jsx)(Q,{...e,path:"M19.35 10.04C18.67 6.59 15.64 4 12 4c-1.48 0-2.85.43-4.01 1.17l1.46 1.46C10.21 6.23 11.08 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19c1.66 0 3 1.34 3 3 0 1.13-.64 2.11-1.56 2.62l1.45 1.45C23.16 18.16 24 16.68 24 15c0-2.64-2.05-4.78-4.65-4.96zM3 5.27l2.75 2.74C2.56 8.15 0 10.77 0 14c0 3.31 2.69 6 6 6h11.73l2 2L21 20.73 4.27 4 3 5.27zM7.73 10l8 8H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h1.73z"})},W={placeholder:{backgroundSize:"cover",backgroundRepeat:"no-repeat",position:"relative"},img:{width:"100%",height:"auto",maxWidth:"100%",marginBottom:"-4px"},icon:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"},noscript:{position:"absolute",top:0,left:0}},$=e=>{let{icons:t=X,theme:n=W,...s}=e;return(0,o.jsx)(z,{...s,icons:t,theme:n})};function _(e,t){switch(e){case"noicon":case"loaded":return null;case"loading":return(0,i.I)({id:"theme.IdealImageMessage.loading",message:"Loading...",description:"When the full-scale image is loading"});case"load":{let{pickedSrc:e}=t,{size:n}=e,o=n?` (${function(e){let t=["B","KB","MB","GB","TB"];if(0===e)return"n/a";let n=Math.floor(Math.log(e)/Math.log(1024));return 0===n?`${e} ${t[n]}`:`${(e/1024**n).toFixed(1)} ${t[n]}`}(n)})`:"";return(0,i.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:o})}case"offline":return(0,i.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}=t;if(404===e)return(0,i.I)({id:"theme.IdealImageMessage.404error",message:"404. Image not found",description:"When the image is not found"});return(0,i.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 ee(e){let{img:t,...n}=e;return"string"==typeof t||"default"in t?(0,o.jsx)("img",{src:"string"==typeof t?t:t.default,...n}):(0,o.jsx)($,{height:t.src.height??100,width:t.src.width??100,placeholder:{lqip:t.preSrc},src:t.src.src,srcSet:t.src.images.map(e=>({...e,src:e.path})),getMessage:_})}},80980:function(e,t,n){"use strict";n.d(t,{Z:()=>a,a:()=>r});var o=n(67294);let s={},i=o.createContext(s);function r(e){let t=o.useContext(i);return o.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),o.createElement(i.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/028951d7.3c0850b9.js b/assets/js/028951d7.554b94e1.js
similarity index 99%
rename from assets/js/028951d7.3c0850b9.js
rename to assets/js/028951d7.554b94e1.js
index 0fecbad1de..241c0a06d5 100644
--- a/assets/js/028951d7.3c0850b9.js
+++ b/assets/js/028951d7.554b94e1.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":1746811575000,"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":1747136891000,"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.4b0631f8.js b/assets/js/03a06760.852976ef.js
similarity index 99%
rename from assets/js/03a06760.4b0631f8.js
rename to assets/js/03a06760.852976ef.js
index b542d2f8ea..bcc6523b0d 100644
--- a/assets/js/03a06760.4b0631f8.js
+++ b/assets/js/03a06760.852976ef.js
@@ -1,4 +1,4 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["37874"],{97199:function(e,t,n){n.r(t),n.d(t,{frontMatter:()=>u,default:()=>m,contentTitle:()=>d,assets:()=>h,toc:()=>p,metadata:()=>r});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":1746811575000,"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),a=n(15398),i=n(58636),o=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)(a.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(i.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)(i.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)(i.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"})})}),(0,s.jsx)(i.Z,{value:"bun",label:"Bun",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"bun 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)(o.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),a=n(54947),i=n(3620),o=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||(0,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:i,tabValues:o}=e,c=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),d=e=>{let t=e.currentTarget,n=o[c.indexOf(t)].value;n!==s&&(u(t),i(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:o.map(e=>{let{value:t,label:n,attributes:a}=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,...a,className:(0,l.Z)("tabs__item","tabItem_AQgk",a?.className,{"tabs__item--active":s===t}),children:n??t},t)})})}function f(e){let{lazy:t,children:n,selectedValue:a}=e,i=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){let e=i.find(e=>e.props.value===a);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:i.map((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a}))})}function x(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}}),r=(0,u.lx)(e,(e,t)=>e.value===t.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.`);return e},[t,n])}(e),[a,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,i.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}),[x,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}),b=(()=>{let e=m??x;return p({value:e,tabValues:l})?e:null})();return(0,o.Z)(()=>{b&&g(b)},[b]),{selectedValue:a,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)(x,{...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:()=>o});var r=n(85893),s=n(67294),l=n(96700),a=n(3620);let i=s.forwardRef(function(e,t){let{name:n,children:i}=e,o=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,{frontMatter:()=>u,default:()=>m,contentTitle:()=>d,assets:()=>h,toc:()=>p,metadata:()=>r});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":1747136891000,"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),a=n(15398),i=n(58636),o=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)(a.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(i.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)(i.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)(i.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"})})}),(0,s.jsx)(i.Z,{value:"bun",label:"Bun",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"bun 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)(o.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),a=n(54947),i=n(3620),o=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||(0,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:i,tabValues:o}=e,c=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),d=e=>{let t=e.currentTarget,n=o[c.indexOf(t)].value;n!==s&&(u(t),i(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:o.map(e=>{let{value:t,label:n,attributes:a}=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,...a,className:(0,l.Z)("tabs__item","tabItem_AQgk",a?.className,{"tabs__item--active":s===t}),children:n??t},t)})})}function f(e){let{lazy:t,children:n,selectedValue:a}=e,i=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){let e=i.find(e=>e.props.value===a);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:i.map((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a}))})}function x(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}}),r=(0,u.lx)(e,(e,t)=>e.value===t.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.`);return e},[t,n])}(e),[a,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,i.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}),[x,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}),b=(()=>{let e=m??x;return p({value:e,tabValues:l})?e:null})();return(0,o.Z)(()=>{b&&g(b)},[b]),{selectedValue:a,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)(x,{...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:()=>o});var r=n(85893),s=n(67294),l=n(96700),a=n(3620);let i=s.forwardRef(function(e,t){let{name:n,children:i}=e,o=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}(i),c=n?`${n}-${o}`:o,u=`#${c}`,d=(0,a.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:i.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[l,a]=s.Children.toArray(t.props.children),o=(0,s.useRef)(null);(0,s.useEffect)(()=>{o.current?.focus()},[o]);let c=s.Children.map(a.props.children,e=>(0,r.jsx)(i,{name:n,ref:o,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),a=n(77827),i=n(15398),o=n(58636),c=n(27817);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)(i.Z,{groupId:"api-config-ex",children:[(0,r.jsxs)(o.Z,{value:"preset",label:(0,a.I)({message:"Preset options"}),children:[(0,r.jsx)("p",{children:(0,r.jsx)(a.Z,{id:"apiDocs.configTabs.presetOptions.description",values:{presetLink:(0,r.jsx)(s.Z,{to:`${h}/using-plugins#docusauruspreset-classic`,children:(0,r.jsx)(a.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.2df89c59.js b/assets/js/03f86864.205cd817.js
similarity index 99%
rename from assets/js/03f86864.2df89c59.js
rename to assets/js/03f86864.205cd817.js
index 2a51994d6c..549f9868ad 100644
--- a/assets/js/03f86864.2df89c59.js
+++ b/assets/js/03f86864.205cd817.js
@@ -1,2 +1,2 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["99131"],{63029:function(e,n,d){d.r(n),d.d(n,{frontMatter:()=>l,default:()=>x,contentTitle:()=>c,assets:()=>o,toc:()=>h,metadata:()=>i});var i=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":1746811575000,"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=d(85893),t=d(80980),r=d(32240);let l={sidebar_position:1,sidebar_label:"Configuration",slug:"/api/themes/configuration",toc_max_heading_level:4},c="Theme configuration",o={},h=[{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},{Details:d}=n;return d||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,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.jsxs)(n.p,{children:["A React hook to access the color context. This context contains functions for selecting light/dark/system mode and exposes the current color mode and the choice from the user. The color mode values ",(0,s.jsx)(n.strong,{children:"should not be used for dynamic content rendering"})," (see below)."]}),"\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:"// highlight-next-line\nimport {useColorMode} from '@docusaurus/theme-common';\n\nconst MyColorModeButton = () => {\n // highlight-start\n const {\n colorMode, // the \"effective\" color mode, never null\n colorModeChoice, // the color mode chosen by the user, can be null\n setColorMode, // set the color mode chosen by the user\n } = useColorMode();\n // highlight-end\n\n return (\n \n );\n};\n"})}),"\n",(0,s.jsx)(n.p,{children:"Attributes:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"colorMode: 'light' | 'dark'"}),": The effective color mode currently applied to the UI. It cannot be ",(0,s.jsx)(n.code,{children:"null"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"colorModeChoice: 'light' | 'dark' | null"}),": The color mode explicitly chosen by the user. It can be ",(0,s.jsx)(n.code,{children:"null"})," if user has not made any choice yet, or if they reset their choice to the system/default value."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"setColorMode(colorModeChoice: 'light' | 'dark' | null, options: {persist: boolean}): void"}),": A function to call when the user explicitly chose a color mode. ",(0,s.jsx)(n.code,{children:"null"})," permits to reset the choice to the system/default value. By default, the choice is persisted in ",(0,s.jsx)(n.code,{children:"localStorage"})," and restored on page reload, but you can opt out with ",(0,s.jsx)(n.code,{children:"{persist: false}"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.admonition,{type:"warning",children:[(0,s.jsxs)(n.p,{children:["Don't use ",(0,s.jsx)(n.code,{children:"colorMode"})," and ",(0,s.jsx)(n.code,{children:"colorModeChoice"})," while rendering React components. Doing so is likely to produce ",(0,s.jsx)(n.a,{href:"https://en.wikipedia.org/wiki/Flash_of_unstyled_content",children:"FOUC"}),", layout shifts and ",(0,s.jsx)(n.a,{href:"https://18.react.dev/reference/react-dom/client/hydrateRoot",children:"React hydration"})," mismatches if you use them to render JSX content dynamically."]}),(0,s.jsxs)(n.p,{children:["However, these values are safe to use ",(0,s.jsx)(n.strong,{children:"after React hydration"}),", in ",(0,s.jsx)(n.code,{children:"useEffect"})," and event listeners, like in the ",(0,s.jsx)(n.code,{children:"MyColorModeButton"})," example above."]}),(0,s.jsxs)(n.p,{children:["If you need to render content dynamically depending on the current theme, the only way to avoid FOUC, layout shifts and hydration mismatch is to rely on CSS selectors to render content dynamically, based on the ",(0,s.jsx)(n.code,{children:"html"})," data attributes that we set before the page displays anything:"]}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-html",children:'\n \x3c!-- content --\x3e\n\n'})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"[data-theme='light']\n[data-theme='dark']\n\n[data-theme-choice='light']\n[data-theme-choice='dark']\n[data-theme-choice='system']\n"})}),(0,s.jsxs)(d,{children:[(0,s.jsxs)("summary",{children:["Why are ",(0,s.jsx)(n.code,{children:"colorMode"})," and ",(0,s.jsx)(n.code,{children:"colorModeChoice"})," unsafe when rendering?"]}),(0,s.jsxs)(n.p,{children:["To understand the problem, you need to understand how ",(0,s.jsx)(n.a,{href:"https://18.react.dev/reference/react-dom/client/hydrateRoot",children:"React hydration"})," works."]}),(0,s.jsxs)(n.p,{children:["During the static site generation phase, Docusaurus doesn't know what the user color mode choice is, and ",(0,s.jsx)(n.code,{children:"useColorMode()"})," returns the following static values:"]}),(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"colorMode = themeConfig.colorMode.defaultMode"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"colorModeChoice = null"})}),"\n"]}),(0,s.jsx)(n.p,{children:"During the very first React client-side render (the hydration), React must produce the exact same HTML markup, and will also use these static values."}),(0,s.jsxs)(n.p,{children:["The correct ",(0,s.jsx)(n.code,{children:"colorMode"})," and ",(0,s.jsx)(n.code,{children:"colorModeChoice"})," values will only be provided in the second React render."]}),(0,s.jsxs)(n.p,{children:["Typically, the following component will lead to ",(0,s.jsx)(n.strong,{children:"React hydration mismatches"}),". The label may switch from ",(0,s.jsx)(n.code,{children:"light"})," to ",(0,s.jsx)(n.code,{children:"dark"})," while React hydrates, leading to a confusing user experience."]}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-jsx",children:"import {useColorMode} from '@docusaurus/theme-common';\n\nconst DisplayCurrentColorMode = () => {\n const {colorMode} = useColorMode();\n return {colorMode};\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,d){d.d(n,{Z:()=>c});var i=d(85893),s=d(67294),t=d(96700),r=d(3620);let l=s.forwardRef(function(e,n){let{name:d,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,d){d.r(n),d.d(n,{frontMatter:()=>l,default:()=>x,contentTitle:()=>c,assets:()=>o,toc:()=>h,metadata:()=>i});var i=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":1747136891000,"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=d(85893),t=d(80980),r=d(32240);let l={sidebar_position:1,sidebar_label:"Configuration",slug:"/api/themes/configuration",toc_max_heading_level:4},c="Theme configuration",o={},h=[{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},{Details:d}=n;return d||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,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.jsxs)(n.p,{children:["A React hook to access the color context. This context contains functions for selecting light/dark/system mode and exposes the current color mode and the choice from the user. The color mode values ",(0,s.jsx)(n.strong,{children:"should not be used for dynamic content rendering"})," (see below)."]}),"\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:"// highlight-next-line\nimport {useColorMode} from '@docusaurus/theme-common';\n\nconst MyColorModeButton = () => {\n // highlight-start\n const {\n colorMode, // the \"effective\" color mode, never null\n colorModeChoice, // the color mode chosen by the user, can be null\n setColorMode, // set the color mode chosen by the user\n } = useColorMode();\n // highlight-end\n\n return (\n \n );\n};\n"})}),"\n",(0,s.jsx)(n.p,{children:"Attributes:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"colorMode: 'light' | 'dark'"}),": The effective color mode currently applied to the UI. It cannot be ",(0,s.jsx)(n.code,{children:"null"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"colorModeChoice: 'light' | 'dark' | null"}),": The color mode explicitly chosen by the user. It can be ",(0,s.jsx)(n.code,{children:"null"})," if user has not made any choice yet, or if they reset their choice to the system/default value."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"setColorMode(colorModeChoice: 'light' | 'dark' | null, options: {persist: boolean}): void"}),": A function to call when the user explicitly chose a color mode. ",(0,s.jsx)(n.code,{children:"null"})," permits to reset the choice to the system/default value. By default, the choice is persisted in ",(0,s.jsx)(n.code,{children:"localStorage"})," and restored on page reload, but you can opt out with ",(0,s.jsx)(n.code,{children:"{persist: false}"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.admonition,{type:"warning",children:[(0,s.jsxs)(n.p,{children:["Don't use ",(0,s.jsx)(n.code,{children:"colorMode"})," and ",(0,s.jsx)(n.code,{children:"colorModeChoice"})," while rendering React components. Doing so is likely to produce ",(0,s.jsx)(n.a,{href:"https://en.wikipedia.org/wiki/Flash_of_unstyled_content",children:"FOUC"}),", layout shifts and ",(0,s.jsx)(n.a,{href:"https://18.react.dev/reference/react-dom/client/hydrateRoot",children:"React hydration"})," mismatches if you use them to render JSX content dynamically."]}),(0,s.jsxs)(n.p,{children:["However, these values are safe to use ",(0,s.jsx)(n.strong,{children:"after React hydration"}),", in ",(0,s.jsx)(n.code,{children:"useEffect"})," and event listeners, like in the ",(0,s.jsx)(n.code,{children:"MyColorModeButton"})," example above."]}),(0,s.jsxs)(n.p,{children:["If you need to render content dynamically depending on the current theme, the only way to avoid FOUC, layout shifts and hydration mismatch is to rely on CSS selectors to render content dynamically, based on the ",(0,s.jsx)(n.code,{children:"html"})," data attributes that we set before the page displays anything:"]}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-html",children:'\n \x3c!-- content --\x3e\n\n'})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"[data-theme='light']\n[data-theme='dark']\n\n[data-theme-choice='light']\n[data-theme-choice='dark']\n[data-theme-choice='system']\n"})}),(0,s.jsxs)(d,{children:[(0,s.jsxs)("summary",{children:["Why are ",(0,s.jsx)(n.code,{children:"colorMode"})," and ",(0,s.jsx)(n.code,{children:"colorModeChoice"})," unsafe when rendering?"]}),(0,s.jsxs)(n.p,{children:["To understand the problem, you need to understand how ",(0,s.jsx)(n.a,{href:"https://18.react.dev/reference/react-dom/client/hydrateRoot",children:"React hydration"})," works."]}),(0,s.jsxs)(n.p,{children:["During the static site generation phase, Docusaurus doesn't know what the user color mode choice is, and ",(0,s.jsx)(n.code,{children:"useColorMode()"})," returns the following static values:"]}),(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"colorMode = themeConfig.colorMode.defaultMode"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"colorModeChoice = null"})}),"\n"]}),(0,s.jsx)(n.p,{children:"During the very first React client-side render (the hydration), React must produce the exact same HTML markup, and will also use these static values."}),(0,s.jsxs)(n.p,{children:["The correct ",(0,s.jsx)(n.code,{children:"colorMode"})," and ",(0,s.jsx)(n.code,{children:"colorModeChoice"})," values will only be provided in the second React render."]}),(0,s.jsxs)(n.p,{children:["Typically, the following component will lead to ",(0,s.jsx)(n.strong,{children:"React hydration mismatches"}),". The label may switch from ",(0,s.jsx)(n.code,{children:"light"})," to ",(0,s.jsx)(n.code,{children:"dark"})," while React hydrates, leading to a confusing user experience."]}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-jsx",children:"import {useColorMode} from '@docusaurus/theme-common';\n\nconst DisplayCurrentColorMode = () => {\n const {colorMode} = useColorMode();\n return {colorMode};\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,d){d.d(n,{Z:()=>c});var i=d(85893),s=d(67294),t=d(96700),r=d(3620);let l=s.forwardRef(function(e,n){let{name:d,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),o=d?`${d}-${c}`:c,h=`#${o}`,a=(0,r.k6)();return(0,t.Z)().collectAnchor(o),(0,i.jsx)("tr",{id:o,tabIndex:0,ref:a.location.hash===h?n:void 0,onClick:e=>{let n="TD"===e.target.tagName.toUpperCase(),d=!!window.getSelection()?.toString();n&&!d&&a.push(h)},onKeyDown:e=>{"Enter"===e.key&&a.push(h)},children:l.props.children})});function c(e){let{children:n,name:d}=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 o=s.Children.map(r.props.children,e=>(0,i.jsx)(l,{name:d,ref:c,children:e}));return(0,i.jsxs)("table",{className:"apiTable_e8hp",children:[t,(0,i.jsx)("tbody",{children:o})]})}},80980:function(e,n,d){d.d(n,{Z:()=>l,a:()=>r});var i=d(67294);let s={},t=i.createContext(s);function r(e){let n=i.useContext(t);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(s):e.components||s:r(e.components),i.createElement(t.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/048b0d50.20c323b9.js b/assets/js/048b0d50.826ada93.js
similarity index 99%
rename from assets/js/048b0d50.20c323b9.js
rename to assets/js/048b0d50.826ada93.js
index 0d4ed287d7..591b5c66ee 100644
--- a/assets/js/048b0d50.20c323b9.js
+++ b/assets/js/048b0d50.826ada93.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["30992"],{83119:function(e,n,t){t.r(n),t.d(n,{frontMatter:()=>l,default:()=>h,contentTitle:()=>c,assets:()=>d,toc:()=>u,metadata:()=>a});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":1746811575000,"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||(0,i.isValidElement)(e)&&function(e){let{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)})?.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}}),a=(0,d.lx)(e,(e,n)=>e.value===n.value);if(a.length>0)throw Error(`Docusaurus error: Duplicate values "${a.map(e=>e.value).join(", ")}" found in . Every value needs to be unique.`);return 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,{frontMatter:()=>l,default:()=>h,contentTitle:()=>c,assets:()=>d,toc:()=>u,metadata:()=>a});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":1747136891000,"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||(0,i.isValidElement)(e)&&function(e){let{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)})?.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}}),a=(0,d.lx)(e,(e,n)=>e.value===n.value);if(a.length>0)throw Error(`Docusaurus error: Duplicate values "${a.map(e=>e.value).join(", ")}" found in . Every value needs to be unique.`);return 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.dbbd1727.js b/assets/js/060daea9.c9596707.js
similarity index 98%
rename from assets/js/060daea9.dbbd1727.js
rename to assets/js/060daea9.c9596707.js
index 09eb4a83eb..857060265a 100644
--- a/assets/js/060daea9.dbbd1727.js
+++ b/assets/js/060daea9.c9596707.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":1746811575000,"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":1747136891000,"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.2e2b9139.js b/assets/js/06c6ffc3.8131529b.js
similarity index 99%
rename from assets/js/06c6ffc3.2e2b9139.js
rename to assets/js/06c6ffc3.8131529b.js
index a73d6a5e4b..6981b1efd3 100644
--- a/assets/js/06c6ffc3.2e2b9139.js
+++ b/assets/js/06c6ffc3.8131529b.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["79557"],{26933:function(e,n,s){s.r(n),s.d(n,{frontMatter:()=>a,default:()=>p,contentTitle:()=>c,assets:()=>d,toc:()=>h,metadata:()=>i});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":1746811575000,"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 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"})})}),(0,t.jsx)(l.Z,{value:"bun",label:"Bun",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"bun 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"})})}),(0,t.jsx)(l.Z,{value:"bun",label:"Bun",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"bun 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"})})}),(0,t.jsx)(l.Z,{value:"bun",label:"Bun",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"bun 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.jsx)(n.admonition,{title:"Tweak the parameters for your setup",type:"warning",children:(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.jsxs)(r.Z,{children:[(0,t.jsxs)(l.Z,{value:"npm",label:"npm",children:[(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: npm\n\n - name: Install dependencies\n run: npm ci\n - name: Build website\n run: npm 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: npm\n\n - name: Install dependencies\n run: npm ci\n - name: Test build website\n run: npm build\n"})})]}),(0,t.jsxs)(l.Z,{value:"yarn",label:"Yarn",children:[(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"})})}),(0,t.jsx)(l.Z,{value:"bun",label:"Bun",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"bun 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"})})}),(0,t.jsx)(l.Z,{value:"bun",label:"Bun",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"bun add --global 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"})})}),(0,t.jsx)(l.Z,{value:"bun",label:"Bun",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"bun 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-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||(0,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}}),i=(0,d.lx)(e,(e,n)=>e.value===n.value);if(i.length>0)throw Error(`Docusaurus error: Duplicate values "${i.map(e=>e.value).join(", ")}" found in . Every value needs to be unique.`);return 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,{frontMatter:()=>a,default:()=>p,contentTitle:()=>c,assets:()=>d,toc:()=>h,metadata:()=>i});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":1747136891000,"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 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"})})}),(0,t.jsx)(l.Z,{value:"bun",label:"Bun",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"bun 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"})})}),(0,t.jsx)(l.Z,{value:"bun",label:"Bun",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"bun 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"})})}),(0,t.jsx)(l.Z,{value:"bun",label:"Bun",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"bun 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.jsx)(n.admonition,{title:"Tweak the parameters for your setup",type:"warning",children:(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.jsxs)(r.Z,{children:[(0,t.jsxs)(l.Z,{value:"npm",label:"npm",children:[(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: npm\n\n - name: Install dependencies\n run: npm ci\n - name: Build website\n run: npm 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: npm\n\n - name: Install dependencies\n run: npm ci\n - name: Test build website\n run: npm build\n"})})]}),(0,t.jsxs)(l.Z,{value:"yarn",label:"Yarn",children:[(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"})})}),(0,t.jsx)(l.Z,{value:"bun",label:"Bun",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"bun 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"})})}),(0,t.jsx)(l.Z,{value:"bun",label:"Bun",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"bun add --global 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"})})}),(0,t.jsx)(l.Z,{value:"bun",label:"Bun",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"bun 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-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||(0,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}}),i=(0,d.lx)(e,(e,n)=>e.value===n.value);if(i.length>0)throw Error(`Docusaurus error: Duplicate values "${i.map(e=>e.value).join(", ")}" found in . Every value needs to be unique.`);return 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.81bfbe70.js b/assets/js/072728dc.40ce1e9b.js
similarity index 98%
rename from assets/js/072728dc.81bfbe70.js
rename to assets/js/072728dc.40ce1e9b.js
index 7721049a04..a452f169de 100644
--- a/assets/js/072728dc.81bfbe70.js
+++ b/assets/js/072728dc.40ce1e9b.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["99417"],{48497:function(e,s,t){t.r(s),t.d(s,{frontMatter:()=>l,default:()=>x,contentTitle:()=>d,assets:()=>u,toc:()=>r,metadata:()=>n});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":1746811575000,"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,{frontMatter:()=>l,default:()=>x,contentTitle:()=>d,assets:()=>u,toc:()=>r,metadata:()=>n});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":1747136891000,"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.1e02fc8f.js b/assets/js/07d8cde9.35f2d069.js
similarity index 99%
rename from assets/js/07d8cde9.1e02fc8f.js
rename to assets/js/07d8cde9.35f2d069.js
index 8b890bdd53..9d737134c2 100644
--- a/assets/js/07d8cde9.1e02fc8f.js
+++ b/assets/js/07d8cde9.35f2d069.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["80812"],{78929:function(e,s,i){i.r(s),i.d(s,{frontMatter:()=>a,default:()=>u,contentTitle:()=>l,assets:()=>r,toc:()=>o,metadata:()=>n});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":1746811575000,"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,{frontMatter:()=>a,default:()=>u,contentTitle:()=>l,assets:()=>r,toc:()=>o,metadata:()=>n});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":1747136891000,"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.1558d561.js b/assets/js/0938a5e1.8afb2e01.js
similarity index 99%
rename from assets/js/0938a5e1.1558d561.js
rename to assets/js/0938a5e1.8afb2e01.js
index a283afe07e..4372719b35 100644
--- a/assets/js/0938a5e1.1558d561.js
+++ b/assets/js/0938a5e1.8afb2e01.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":1746811575000,"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":1747136891000,"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.3f7f8146.js b/assets/js/0a818389.39454efa.js
similarity index 99%
rename from assets/js/0a818389.3f7f8146.js
rename to assets/js/0a818389.39454efa.js
index 0a4de13aa0..e0248afc7e 100644
--- a/assets/js/0a818389.3f7f8146.js
+++ b/assets/js/0a818389.39454efa.js
@@ -1,3 +1,3 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["51698"],{13244:function(e,n,s){s.r(n),s.d(n,{frontMatter:()=>d,default:()=>p,contentTitle:()=>h,assets:()=>u,toc:()=>g,metadata:()=>t});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":1746811575000,"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(27817);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://mdxjs.com/docs/",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"})})}),(0,r.jsx)(a.Z,{value:"bun",label:"Bun",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"bun 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"})})}),(0,r.jsx)(a.Z,{value:"bun",label:"Bun",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"bun 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"})})}),(0,r.jsx)(a.Z,{value:"bun",label:"Bun",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"bun 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"})})}),(0,r.jsx)(a.Z,{value:"bun",label:"Bun",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"bun 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"})})}),(0,r.jsx)(a.Z,{value:"bun",label:"Bun",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"bun 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,{frontMatter:()=>d,default:()=>p,contentTitle:()=>h,assets:()=>u,toc:()=>g,metadata:()=>t});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":1747136891000,"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(27817);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://mdxjs.com/docs/",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"})})}),(0,r.jsx)(a.Z,{value:"bun",label:"Bun",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"bun 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"})})}),(0,r.jsx)(a.Z,{value:"bun",label:"Bun",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"bun 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"})})}),(0,r.jsx)(a.Z,{value:"bun",label:"Bun",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"bun 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"})})}),(0,r.jsx)(a.Z,{value:"bun",label:"Bun",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"bun 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"})})}),(0,r.jsx)(a.Z,{value:"bun",label:"Bun",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"bun 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