3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-04-29 18:27:56 +02:00
Code Issues Projects Releases Packages Wiki Activity
docusaurus/assets/js/641734b9.193ffe35.js
slorber d92d5ffdd8 deploy: cc97d66dbb
2024-12-26 18:01:37 +00:00

4 lines
No EOL
49 KiB
JavaScript
Raw Blame History

"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["18187"],{49393:function(e,s,n){n.r(s),n.d(s,{metadata:()=>t,contentTitle:()=>h,default:()=>b,assets:()=>m,toc:()=>p,frontMatter:()=>u});var t=JSON.parse('{"id":"styling-layout","title":"Styling and Layout","description":"A Docusaurus site is a pre-rendered single-page React application. You can style it the way you style React apps.","source":"@site/docs/styling-layout.mdx","sourceDirName":".","slug":"/styling-layout","permalink":"/docs/styling-layout","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/styling-layout.mdx","tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1735235940000,"frontMatter":{"description":"A Docusaurus site is a pre-rendered single-page React application. You can style it the way you style React apps."},"sidebar":"docs","previous":{"title":"Head metadata","permalink":"/docs/markdown-features/head-metadata"},"next":{"title":"Swizzling","permalink":"/docs/swizzling"}}'),a=n("85893"),r=n("80980"),o=n("46291"),i=n("67860"),l=n("66482"),c=n("19428"),d=n("45960");let u={description:"A Docusaurus site is a pre-rendered single-page React application. You can style it the way you style React apps."},h="Styling and Layout",m={},p=[{value:"Global styles",id:"global-styles",level:2},{value:"Theme Class Names",id:"theme-class-names",level:3},{value:"Styling your site with Infima",id:"styling-your-site-with-infima",level:3},{value:"Dark Mode",id:"dark-mode",level:3},{value:"Data Attributes",id:"data-attributes",level:3},{value:"Mobile View",id:"mobile-view",level:3},{value:"CSS modules",id:"css-modules",level:2},{value:"CSS-in-JS",id:"css-in-js",level:2},{value:"Sass/SCSS",id:"sassscss",level:2},{value:"Global styles using Sass/SCSS",id:"global-styles-using-sassscss",level:3},{value:"Modules using Sass/SCSS",id:"modules-using-sassscss",level:3},{value:"TypeScript support",id:"typescript-support",level:4}];function g(e){let s={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components},{Details:n}=s;return!n&&function(e,s){throw Error("Expected "+(s?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(s.header,{children:(0,a.jsx)(s.h1,{id:"styling-and-layout",children:"Styling and Layout"})}),"\n",(0,a.jsx)(s.admonition,{type:"tip",children:(0,a.jsxs)(s.p,{children:["This section is focused on styling through stylesheets. For more advanced customizations (DOM structure, React code...), refer to the ",(0,a.jsx)(s.a,{href:"/docs/swizzling",children:"swizzling guide"}),"."]})}),"\n",(0,a.jsx)(s.p,{children:"A Docusaurus site is a single-page React application. You can style it the way you style React apps."}),"\n",(0,a.jsx)(s.p,{children:"There are a few approaches/frameworks which will work, depending on your preferences and the type of website you are trying to build. Websites that are highly interactive and behave more like web apps will benefit from more modern styling approaches that co-locate styles with the components. Component styling can also be particularly useful when you wish to customize or swizzle a component."}),"\n",(0,a.jsx)(s.h2,{id:"global-styles",children:"Global styles"}),"\n",(0,a.jsx)(s.p,{children:"This is the most traditional way of styling that most developers (including non-front-end developers) would be familiar with. It works fine for small websites that do not have much customization."}),"\n",(0,a.jsxs)(s.p,{children:["If you're using ",(0,a.jsx)(s.code,{children:"@docusaurus/preset-classic"}),", you can create your own CSS files (e.g. ",(0,a.jsx)(s.code,{children:"/src/css/custom.css"}),") and import them globally by passing them as an option of the classic theme."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n // ...\n presets: [\n [\n '@docusaurus/preset-classic',\n {\n // highlight-start\n theme: {\n customCss: ['./src/css/custom.css'],\n },\n // highlight-end\n },\n ],\n ],\n};\n"})}),"\n",(0,a.jsx)(s.p,{children:"Any CSS you write within that file will be available globally and can be referenced directly using string literals."}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="/src/css/custom.css"',children:".purple-text {\n color: rebeccapurple;\n}\n"})}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-jsx",children:'function MyComponent() {\n return (\n <main>\n <h1 className="purple-text">Purple Heading!</h1>\n </main>\n );\n}\n'})}),"\n",(0,a.jsx)(s.p,{children:"If you want to add CSS to any element, you can open the DevTools in your browser to inspect its class names. Class names come in several kinds:"}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.strong,{children:"Theme class names"}),". These class names are listed exhaustively in ",(0,a.jsx)(s.a,{href:"#theme-class-names",children:"the next subsection"}),". They don't have any default properties. You should always prioritize targeting those stable class names in your custom CSS."]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.strong,{children:"Infima class names"}),". These class names are found in the classic theme and usually follow the ",(0,a.jsx)(s.a,{href:"http://getbem.com/naming/",children:"BEM convention"})," of ",(0,a.jsx)(s.code,{children:"block__element--modifier"}),". They are usually stable but are still considered implementation details, so you should generally avoid targeting them. However, you can ",(0,a.jsx)(s.a,{href:"#styling-your-site-with-infima",children:"modify Infima CSS variables"}),"."]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.strong,{children:"CSS module class names"}),". These class names end with a hash which may change over time (",(0,a.jsx)(s.code,{children:"codeBlockContainer_RIuc"}),"). They are considered implementation details and you should almost always avoid targeting them in your custom CSS. If you must, you can use an ",(0,a.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors",children:"attribute selector"})," (",(0,a.jsx)(s.code,{children:"[class*='codeBlockContainer']"}),") that ignores the hash."]}),"\n"]}),"\n",(0,a.jsx)(s.h3,{id:"theme-class-names",children:"Theme Class Names"}),"\n",(0,a.jsx)(s.p,{children:"We provide some stable CSS class names for robust and maintainable global layout styling. These names are theme-agnostic and meant to be targeted by custom CSS."}),"\n",(0,a.jsx)(s.admonition,{type:"tip",children:(0,a.jsxs)(s.p,{children:["If you can't find a way to create a robust CSS selector, please ",(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/discussions/5468",children:"report your customization use-case"})," and we will consider adding new class names."]})}),"\n",(0,a.jsxs)(n,{children:[(0,a.jsx)("summary",{children:"Exhaustive list of stable class names"}),(0,a.jsx)(d.Z,{className:"language-ts",children:"/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n// Please do not modify the classnames! This is a breaking change, and annoying\n// for users!\n\n/**\n * These class names are used to style page layouts in Docusaurus, meant to be\n * targeted by user-provided custom CSS selectors.\n */\nexport const ThemeClassNames = {\n page: {\n blogListPage: 'blog-list-page',\n blogPostPage: 'blog-post-page',\n blogTagsListPage: 'blog-tags-list-page',\n blogTagPostListPage: 'blog-tags-post-list-page',\n blogAuthorsListPage: 'blog-authors-list-page',\n blogAuthorsPostsPage: 'blog-authors-posts-page',\n\n docsDocPage: 'docs-doc-page',\n docsTagsListPage: 'docs-tags-list-page',\n docsTagDocListPage: 'docs-tags-doc-list-page',\n\n mdxPage: 'mdx-page',\n },\n wrapper: {\n main: 'main-wrapper',\n // TODO these wrapper class names are now quite useless\n // TODO do breaking change later in 3.0\n // we already add plugin name/id class on <html>: that's enough\n blogPages: 'blog-wrapper',\n docsPages: 'docs-wrapper',\n mdxPages: 'mdx-wrapper',\n },\n common: {\n editThisPage: 'theme-edit-this-page',\n lastUpdated: 'theme-last-updated',\n backToTopButton: 'theme-back-to-top-button',\n codeBlock: 'theme-code-block',\n admonition: 'theme-admonition',\n unlistedBanner: 'theme-unlisted-banner',\n draftBanner: 'theme-draft-banner',\n\n admonitionType: (type: string) => `theme-admonition-${type}`,\n },\n layout: {\n // TODO add other stable classNames here\n },\n\n /**\n * Follows the naming convention \"theme-{blog,doc,version,page}?-<suffix>\"\n */\n docs: {\n docVersionBanner: 'theme-doc-version-banner',\n docVersionBadge: 'theme-doc-version-badge',\n docBreadcrumbs: 'theme-doc-breadcrumbs',\n docMarkdown: 'theme-doc-markdown',\n docTocMobile: 'theme-doc-toc-mobile',\n docTocDesktop: 'theme-doc-toc-desktop',\n docFooter: 'theme-doc-footer',\n docFooterTagsRow: 'theme-doc-footer-tags-row',\n docFooterEditMetaRow: 'theme-doc-footer-edit-meta-row',\n docSidebarContainer: 'theme-doc-sidebar-container',\n docSidebarMenu: 'theme-doc-sidebar-menu',\n docSidebarItemCategory: 'theme-doc-sidebar-item-category',\n docSidebarItemLink: 'theme-doc-sidebar-item-link',\n docSidebarItemCategoryLevel: (level: number) =>\n `theme-doc-sidebar-item-category-level-${level}` as const,\n docSidebarItemLinkLevel: (level: number) =>\n `theme-doc-sidebar-item-link-level-${level}` as const,\n // TODO add other stable classNames here\n },\n blog: {\n // TODO add other stable classNames here\n blogFooterTagsRow: 'theme-blog-footer-tags-row',\n blogFooterEditMetaRow: 'theme-blog-footer-edit-meta-row',\n },\n pages: {\n pageFooterEditMetaRow: 'theme-pages-footer-edit-meta-row',\n },\n} as const;\n".replace(/\/\*[\s\S]*?\*\/|\/\/.*/g,"").replace(/^ *\n/gm,"").trim()})]}),"\n",(0,a.jsx)(s.h3,{id:"styling-your-site-with-infima",children:"Styling your site with Infima"}),"\n",(0,a.jsxs)(s.p,{children:[(0,a.jsx)(s.code,{children:"@docusaurus/preset-classic"})," uses ",(0,a.jsx)(s.a,{href:"https://infima.dev/",children:"Infima"})," as the underlying styling framework. Infima provides a flexible layout and common UI components styling suitable for content-centric websites (blogs, documentation, landing pages). For more details, check out the ",(0,a.jsx)(s.a,{href:"https://infima.dev/",children:"Infima website"}),"."]}),"\n",(0,a.jsxs)(s.p,{children:["When you scaffold your Docusaurus project with ",(0,a.jsx)(s.code,{children:"create-docusaurus"}),", the website will be generated with basic Infima stylesheets and default styling. You can override Infima CSS variables globally."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="/src/css/custom.css"',children:":root {\n --ifm-color-primary: #25c2a0;\n --ifm-code-font-size: 95%;\n}\n"})}),"\n",(0,a.jsxs)(s.p,{children:["Infima uses 7 shades of each color. We recommend using ",(0,a.jsx)(s.a,{href:"https://www.colorbox.io/",children:"ColorBox"})," to find the different shades of colors for your chosen primary color."]}),"\n",(0,a.jsxs)(s.p,{children:["Alternatively, use the following tool to generate the different shades for your website and copy the variables into ",(0,a.jsx)(s.code,{children:"/src/css/custom.css"}),"."]}),"\n",(0,a.jsx)(l.Z,{}),"\n",(0,a.jsx)(s.h3,{id:"dark-mode",children:"Dark Mode"}),"\n",(0,a.jsxs)(s.p,{children:["In light mode, the ",(0,a.jsx)(s.code,{children:"<html>"})," element has a ",(0,a.jsx)(s.code,{children:'data-theme="light"'})," attribute; in dark mode, it's ",(0,a.jsx)(s.code,{children:'data-theme="dark"'}),". Therefore, you can scope your CSS to dark-mode-only by targeting ",(0,a.jsx)(s.code,{children:"html"})," with a specific attribute."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:"/* Overriding root Infima variables */\n[data-theme='dark'] {\n --ifm-color-primary: #4e89e8;\n}\n/* Styling one class specially in dark mode */\n[data-theme='dark'] .purple-text {\n color: plum;\n}\n"})}),"\n",(0,a.jsxs)(s.admonition,{type:"tip",children:[(0,a.jsxs)(s.p,{children:["It is possible to initialize the Docusaurus theme directly from a ",(0,a.jsx)(s.code,{children:"docusaurus-theme"})," query string parameter."]}),(0,a.jsx)(s.p,{children:"Examples:"}),(0,a.jsx)(c.Z,{url:"/docs/?docusaurus-theme=dark"}),(0,a.jsx)(c.Z,{url:"/docs/configuration?docusaurus-theme=light"})]}),"\n",(0,a.jsx)(s.h3,{id:"data-attributes",children:"Data Attributes"}),"\n",(0,a.jsxs)(s.p,{children:["It is possible to inject ",(0,a.jsx)(s.code,{children:"<html>"})," data attributes with query string parameters following the ",(0,a.jsx)(s.code,{children:"docusaurus-data-<key>"})," pattern. This gives you the flexibility to style a page differently based on the query string."]}),"\n",(0,a.jsx)(s.p,{children:"For example, let's render one of our pages with a red border and no navbar:"}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="/src/css/custom.css"',children:"html[data-navbar='false'] .navbar {\n display: none;\n}\n\nhtml[data-red-border] div#__docusaurus {\n border: red solid thick;\n}\n"})}),"\n",(0,a.jsx)(c.Z,{url:"/docs/?docusaurus-data-navbar=false&docusaurus-data-red-border"}),"\n",(0,a.jsx)(s.admonition,{title:"Iframe Mode",type:"tip",children:(0,a.jsxs)(s.p,{children:["If you plan to embed some Docusaurus pages on another site though an iframe, it can be useful to create an alternative display mode and use iframe urls such as ",(0,a.jsx)(s.code,{children:"https://mysite.com/docs/myDoc?docusaurus-data-mode=iframe"}),". It is your responsibility to provide the additional styles and decide which UI elements you want to keep or hide."]})}),"\n",(0,a.jsx)(s.h3,{id:"mobile-view",children:"Mobile View"}),"\n",(0,a.jsxs)(s.p,{children:["Docusaurus uses ",(0,a.jsx)(s.code,{children:"996px"})," as the cutoff between mobile screen width and desktop. If you want your layout to be different in the mobile view, you can use media queries."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:".banner {\n padding: 4rem;\n}\n/** In mobile view, reduce the padding */\n@media screen and (max-width: 996px) {\n .heroBanner {\n padding: 2rem;\n }\n}\n"})}),"\n",(0,a.jsx)(s.admonition,{title:"Customizing the breakpoint",type:"tip",children:(0,a.jsxs)(s.p,{children:["Some React components, such as the header and the sidebar, implement different JavaScript logic when in mobile view. If you change the breakpoint value in your custom CSS, you probably also want to update the invocations of the ",(0,a.jsx)(s.code,{children:"useWindowSize"})," hook by ",(0,a.jsx)(s.a,{href:"/docs/swizzling",children:"swizzling"})," the components it's used in and passing an explicit option argument."]})}),"\n",(0,a.jsx)(s.h2,{id:"css-modules",children:"CSS modules"}),"\n",(0,a.jsxs)(s.p,{children:["To style your components using ",(0,a.jsx)(s.a,{href:"https://github.com/css-modules/css-modules",children:"CSS Modules"}),", name your stylesheet files with the ",(0,a.jsx)(s.code,{children:".module.css"})," suffix (e.g. ",(0,a.jsx)(s.code,{children:"welcome.module.css"}),"). Webpack will load such CSS files as CSS modules and you have to reference the class names as properties of the imported CSS module (as opposed to using plain strings). This is similar to the convention used in ",(0,a.jsx)(s.a,{href:"https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet",children:"Create React App"}),"."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="styles.module.css"',children:".main {\n padding: 12px;\n}\n\n.heading {\n font-weight: bold;\n}\n\n.contents {\n color: #ccc;\n}\n"})}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-jsx",children:"import styles from './styles.module.css';\n\nfunction MyComponent() {\n return (\n <main className={styles.main}>\n <h1 className={styles.heading}>Hello!</h1>\n <article className={styles.contents}>Lorem Ipsum</article>\n </main>\n );\n}\n"})}),"\n",(0,a.jsx)(s.p,{children:"The class names will be processed by webpack into a globally unique class name during build."}),"\n",(0,a.jsx)(s.h2,{id:"css-in-js",children:"CSS-in-JS"}),"\n",(0,a.jsx)(s.admonition,{type:"warning",children:(0,a.jsxs)(s.p,{children:["CSS-in-JS support is a work in progress, so libs like MUI may have display quirks. ",(0,a.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/issues/1640",children:"Welcoming PRs"}),"."]})}),"\n",(0,a.jsx)(s.h2,{id:"sassscss",children:"Sass/SCSS"}),"\n",(0,a.jsxs)(s.p,{children:["To use Sass/SCSS as your CSS preprocessor, install the unofficial Docusaurus plugin ",(0,a.jsx)(s.a,{href:"https://github.com/rlamana/docusaurus-plugin-sass",children:(0,a.jsx)(s.code,{children:"docusaurus-plugin-sass"})}),". This plugin works for both global styles and the CSS modules approach:"]}),"\n",(0,a.jsxs)(s.ol,{children:["\n",(0,a.jsxs)(s.li,{children:["Install ",(0,a.jsx)(s.a,{href:"https://github.com/rlamana/docusaurus-plugin-sass",children:(0,a.jsx)(s.code,{children:"docusaurus-plugin-sass"})}),":"]}),"\n"]}),"\n",(0,a.jsxs)(o.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(i.Z,{value:"npm",children:(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-bash",children:"npm install --save docusaurus-plugin-sass sass\n"})})}),(0,a.jsx)(i.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-bash",children:"yarn add docusaurus-plugin-sass sass\n"})})}),(0,a.jsx)(i.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-bash",children:"pnpm add docusaurus-plugin-sass sass\n"})})})]}),"\n",(0,a.jsxs)(s.ol,{start:"2",children:["\n",(0,a.jsxs)(s.li,{children:["Include the plugin in your ",(0,a.jsx)(s.code,{children:"docusaurus.config.js"})," file:"]}),"\n"]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n // ...\n // highlight-next-line\n plugins: ['docusaurus-plugin-sass'],\n // ...\n};\n"})}),"\n",(0,a.jsxs)(s.ol,{start:"3",children:["\n",(0,a.jsx)(s.li,{children:"Write and import your stylesheets in Sass/SCSS as normal."}),"\n"]}),"\n",(0,a.jsx)(s.h3,{id:"global-styles-using-sassscss",children:"Global styles using Sass/SCSS"}),"\n",(0,a.jsxs)(s.p,{children:["You can now set the ",(0,a.jsx)(s.code,{children:"customCss"})," property of ",(0,a.jsx)(s.code,{children:"@docusaurus/preset-classic"})," to point to your Sass/SCSS file:"]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n presets: [\n [\n '@docusaurus/preset-classic',\n {\n // ...\n theme: {\n // highlight-next-line\n customCss: ['./src/css/custom.scss'],\n },\n // ...\n },\n ],\n ],\n};\n"})}),"\n",(0,a.jsx)(s.h3,{id:"modules-using-sassscss",children:"Modules using Sass/SCSS"}),"\n",(0,a.jsxs)(s.p,{children:["Name your stylesheet files with the ",(0,a.jsx)(s.code,{children:".module.scss"})," suffix (e.g. ",(0,a.jsx)(s.code,{children:"welcome.module.scss"}),") instead of ",(0,a.jsx)(s.code,{children:".css"}),". Webpack will use ",(0,a.jsx)(s.code,{children:"sass-loader"})," to preprocess your stylesheets and load them as CSS modules."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-scss",metastring:'title="styles.module.scss"',children:".main {\n padding: 12px;\n\n article {\n color: #ccc;\n }\n}\n"})}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-jsx",children:"import styles from './styles.module.scss';\n\nfunction MyComponent() {\n return (\n <main className={styles.main}>\n <article>Lorem Ipsum</article>\n </main>\n );\n}\n"})}),"\n",(0,a.jsx)(s.h4,{id:"typescript-support",children:"TypeScript support"}),"\n",(0,a.jsxs)(s.p,{children:["To enable TypeScript support for Sass/SCSS modules, the TypeScript configuration should be updated to add the ",(0,a.jsx)(s.code,{children:"docusaurus-plugin-sass"})," type definitions. This can be done in the ",(0,a.jsx)(s.code,{children:"tsconfig.json"})," file:"]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-diff",children:'{\n "extends": "@docusaurus/tsconfig",\n "compilerOptions": {\n ...\n+ "types": ["docusaurus-plugin-sass"]\n }\n}\n'})})]})}function b(e={}){let{wrapper:s}={...(0,r.a)(),...e.components};return s?(0,a.jsx)(s,{...e,children:(0,a.jsx)(g,{...e})}):g(e)}},6952:function(e,s,n){n.d(s,{Z:function(){return a}});var t=n(85893);function a(e){return(0,t.jsx)("svg",{viewBox:"0 0 14 16",...e,children:(0,t.jsx)("path",{fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"})})}n(67294)},18291:function(e,s,n){n.d(s,{Z:()=>T});var t=n("85893"),a=n("67294"),r=n("90496"),o=n("80661"),i=n("2235");let l={admonition:"admonition_o5H7",admonitionHeading:"admonitionHeading_FzoX",admonitionIcon:"admonitionIcon_rXq6",admonitionContent:"admonitionContent_Knsx"};function c(e){let{type:s,className:n,children:a}=e;return(0,t.jsx)("div",{className:(0,r.Z)(i.k.common.admonition,i.k.common.admonitionType(s),l.admonition,n),children:a})}function d(e){let{icon:s,title:n}=e;return(0,t.jsxs)("div",{className:l.admonitionHeading,children:[(0,t.jsx)("span",{className:l.admonitionIcon,children:s}),n]})}function u(e){let{children:s}=e;return s?(0,t.jsx)("div",{className:l.admonitionContent,children:s}):null}function h(e){let{type:s,icon:n,title:a,children:r,className:o}=e;return(0,t.jsxs)(c,{type:s,className:o,children:[a||n?(0,t.jsx)(d,{title:a,icon:n}):null,(0,t.jsx)(u,{children:r})]})}let m={icon:(0,t.jsx)(function(e){return(0,t.jsx)("svg",{viewBox:"0 0 14 16",...e,children:(0,t.jsx)("path",{fillRule:"evenodd",d:"M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"})})},{}),title:(0,t.jsx)(o.Z,{id:"theme.admonition.note",description:"The default label used for the Note admonition (:::note)",children:"note"})};function p(e){return(0,t.jsx)(h,{...m,...e,className:(0,r.Z)("alert alert--secondary",e.className),children:e.children})}let g={icon:(0,t.jsx)(function(e){return(0,t.jsx)("svg",{viewBox:"0 0 12 16",...e,children:(0,t.jsx)("path",{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})})},{}),title:(0,t.jsx)(o.Z,{id:"theme.admonition.tip",description:"The default label used for the Tip admonition (:::tip)",children:"tip"})};function b(e){return(0,t.jsx)(h,{...g,...e,className:(0,r.Z)("alert alert--success",e.className),children:e.children})}var x=n("6952");let f={icon:(0,t.jsx)(x.Z,{}),title:(0,t.jsx)(o.Z,{id:"theme.admonition.info",description:"The default label used for the Info admonition (:::info)",children:"info"})};function j(e){return(0,t.jsx)(h,{...f,...e,className:(0,r.Z)("alert alert--info",e.className),children:e.children})}function y(e){return(0,t.jsx)("svg",{viewBox:"0 0 16 16",...e,children:(0,t.jsx)("path",{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})})}let v={icon:(0,t.jsx)(y,{}),title:(0,t.jsx)(o.Z,{id:"theme.admonition.warning",description:"The default label used for the Warning admonition (:::warning)",children:"warning"})},w={icon:(0,t.jsx)(function(e){return(0,t.jsx)("svg",{viewBox:"0 0 12 16",...e,children:(0,t.jsx)("path",{fillRule:"evenodd",d:"M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"})})},{}),title:(0,t.jsx)(o.Z,{id:"theme.admonition.danger",description:"The default label used for the Danger admonition (:::danger)",children:"danger"})},k={icon:(0,t.jsx)(y,{}),title:(0,t.jsx)(o.Z,{id:"theme.admonition.caution",description:"The default label used for the Caution admonition (:::caution)",children:"caution"})},S={note:p,tip:b,info:j,warning:function(e){return(0,t.jsx)(h,{...v,...e,className:(0,r.Z)("alert alert--warning",e.className),children:e.children})},danger:function(e){return(0,t.jsx)(h,{...w,...e,className:(0,r.Z)("alert alert--danger",e.className),children:e.children})},secondary:e=>(0,t.jsx)(p,{title:"secondary",...e}),important:e=>(0,t.jsx)(j,{title:"important",...e}),success:e=>(0,t.jsx)(b,{title:"success",...e}),caution:function(e){return(0,t.jsx)(h,{...k,...e,className:(0,r.Z)("alert alert--warning",e.className),children:e.children})}};var N=n("17973");let C={...S,"my-custom-admonition":function(e){return(0,t.jsxs)("div",{style:{border:"solid red",padding:10},children:[(0,t.jsx)(N.Z,{as:"h5",style:{color:"blue",fontSize:30},children:e.title}),(0,t.jsx)("div",{children:e.children})]})}};function T(e){let s=function(e){let{mdxAdmonitionTitle:s,rest:n}=function(e){let s=a.Children.toArray(e),n=s.find(e=>a.isValidElement(e)&&"mdxAdmonitionTitle"===e.type),r=s.filter(e=>e!==n);return{mdxAdmonitionTitle:n?.props.children,rest:r.length>0?(0,t.jsx)(t.Fragment,{children:r}):null}}(e.children),r=e.title??s;return{...e,...r&&{title:r},children:n}}(e),n=function(e){let s=C[e];return s?s:(console.warn(`No admonition component found for admonition type "${e}". Using Info as fallback.`),C.info)}(s.type);return(0,t.jsx)(n,{...s})}},67860:function(e,s,n){n.d(s,{Z:()=>o});var t=n("85893");n("67294");var a=n("90496");let r="tabItem_pnkT";function o(e){let{children:s,hidden:n,className:o}=e;return(0,t.jsx)("div",{role:"tabpanel",className:(0,a.Z)(r,o),hidden:n,children:s})}},46291:function(e,s,n){n.d(s,{Z:()=>y});var t=n("85893"),a=n("67294"),r=n("90496"),o=n("12451"),i=n("3620"),l=n("89637"),c=n("74417"),d=n("46918"),u=n("58247");function h(e){return a.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||a.isValidElement(e)&&function(e){let{props:s}=e;return!!s&&"object"==typeof s&&"value"in s}(e))return e;throw Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)})?.filter(Boolean)??[]}function m(e){let{value:s,tabValues:n}=e;return n.some(e=>e.value===s)}var p=n("8903");let g="tabList_Qoir",b="tabItem_AQgk";function x(e){let{className:s,block:n,selectedValue:a,selectValue:i,tabValues:l}=e,c=[],{blockElementScrollPositionUntilNextRender:d}=(0,o.o5)(),u=e=>{let s=e.currentTarget,n=l[c.indexOf(s)].value;n!==a&&(d(s),i(n))},h=e=>{let s=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{let n=c.indexOf(e.currentTarget)+1;s=c[n]??c[0];break}case"ArrowLeft":{let n=c.indexOf(e.currentTarget)-1;s=c[n]??c[c.length-1]}}s?.focus()};return(0,t.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.Z)("tabs",{"tabs--block":n},s),children:l.map(e=>{let{value:s,label:n,attributes:o}=e;return(0,t.jsx)("li",{role:"tab",tabIndex:a===s?0:-1,"aria-selected":a===s,ref:e=>{c.push(e)},onKeyDown:h,onClick:u,...o,className:(0,r.Z)("tabs__item",b,o?.className,{"tabs__item--active":a===s}),children:n??s},s)})})}function f(e){let{lazy:s,children:n,selectedValue:o}=e,i=(Array.isArray(n)?n:[n]).filter(Boolean);if(s){let e=i.find(e=>e.props.value===o);return e?(0,a.cloneElement)(e,{className:(0,r.Z)("margin-top--md",e.props.className)}):null}return(0,t.jsx)("div",{className:"margin-top--md",children:i.map((e,s)=>(0,a.cloneElement)(e,{key:s,hidden:e.props.value!==o}))})}function j(e){let s=function(e){let{defaultValue:s,queryString:n=!1,groupId:t}=e,r=function(e){let{values:s,children:n}=e;return(0,a.useMemo)(()=>{let e=s??h(n).map(e=>{let{props:{value:s,label:n,attributes:t,default:a}}=e;return{value:s,label:n,attributes:t,default:a}});return!function(e){let s=(0,d.lx)(e,(e,s)=>e.value===s.value);if(s.length>0)throw Error(`Docusaurus error: Duplicate values "${s.map(e=>e.value).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e},[s,n])}(e),[o,p]=(0,a.useState)(()=>(function(e){let{defaultValue:s,tabValues:n}=e;if(0===n.length)throw Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(s){if(!m({value:s,tabValues:n}))throw Error(`Docusaurus error: The <Tabs> has a defaultValue "${s}" 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 s}let t=n.find(e=>e.default)??n[0];if(!t)throw Error("Unexpected error: 0 tabValues");return t.value})({defaultValue:s,tabValues:r})),[g,b]=function(e){let{queryString:s=!1,groupId:n}=e,t=(0,i.k6)(),r=function(e){let{queryString:s=!1,groupId:n}=e;if("string"==typeof s)return s;if(!1===s)return null;if(!0===s&&!n)throw Error('Docusaurus error: The <Tabs> 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:s,groupId:n}),o=(0,c._X)(r);return[o,(0,a.useCallback)(e=>{if(!r)return;let s=new URLSearchParams(t.location.search);s.set(r,e),t.replace({...t.location,search:s.toString()})},[r,t])]}({queryString:n,groupId:t}),[x,f]=function(e){var s;let{groupId:n}=e;let t=(s=n)?`docusaurus.tab.${s}`:null,[r,o]=(0,u.Nk)(t);return[r,(0,a.useCallback)(e=>{if(!!t)o.set(e)},[t,o])]}({groupId:t}),j=(()=>{let e=g??x;return m({value:e,tabValues:r})?e:null})();return(0,l.Z)(()=>{j&&p(j)},[j]),{selectedValue:o,selectValue:(0,a.useCallback)(e=>{if(!m({value:e,tabValues:r}))throw Error(`Can't select invalid tab value=${e}`);p(e),b(e),f(e)},[b,f,r]),tabValues:r}}(e);return(0,t.jsxs)("div",{className:(0,r.Z)("tabs-container",g),children:[(0,t.jsx)(x,{...s,...e}),(0,t.jsx)(f,{...s,...e})]})}function y(e){let s=(0,p.Z)();return(0,t.jsx)(j,{...e,children:h(e.children)},String(s))}},82234:function(e,s,n){n.d(s,{Z:function(){return r}});var t=n(85893);n(67294);var a=n(8903);function r(e){let{children:s,fallback:n}=e;return(0,a.Z)()?(0,t.jsx)(t.Fragment,{children:s?.()}):n??null}},19428:function(e,s,n){n.d(s,{Z:function(){return r}});var t=n(85893);n(67294);var a=n(11678);function r(e){let{url:s}=e;return(0,t.jsx)("div",{style:{padding:10},children:(0,t.jsx)(a.Z,{url:s,style:{minWidth:"min(100%,45vw)",width:800,maxWidth:"100%",overflow:"hidden"},bodyStyle:{padding:0},children:(0,t.jsx)("iframe",{src:s,title:s,style:{display:"block",width:"100%",height:300}})})})}},11678:function(e,s,n){n.d(s,{Z:()=>m});var t=n("85893");n("67294");var a=n("90496");let r="browserWindow_my1Q",o="browserWindowHeader_jXSR",i="buttons_uHc7",l="browserWindowAddressBar_Pd8y",c="dot_giz1",d="browserWindowMenuIcon_Vhuh",u="bar_rrRL",h="browserWindowBody_Idgs";function m(e){let{children:s,minHeight:n,url:m="http://localhost:3000",style:p,bodyStyle:g}=e;return(0,t.jsxs)("div",{className:r,style:{...p,minHeight:n},children:[(0,t.jsxs)("div",{className:o,children:[(0,t.jsxs)("div",{className:i,children:[(0,t.jsx)("span",{className:c,style:{background:"#f25f58"}}),(0,t.jsx)("span",{className:c,style:{background:"#fbbe3c"}}),(0,t.jsx)("span",{className:c,style:{background:"#58cb42"}})]}),(0,t.jsx)("div",{className:(0,a.Z)(l,"text--truncate"),children:m}),(0,t.jsx)("div",{className:d,children:(0,t.jsxs)("div",{children:[(0,t.jsx)("span",{className:u}),(0,t.jsx)("span",{className:u}),(0,t.jsx)("span",{className:u})]})})]}),(0,t.jsx)("div",{className:h,style:g,children:s})]})}},66482:function(e,s,n){n.d(s,{Z:()=>g});var t=n("85893"),a=n("67294"),r=n("90496"),o=n("27124"),i=n.n(o),l=n("64152"),c=n("80661"),d=n("31058"),u=n("45960"),h=n("18291"),m=n("22235");let p={color:"color_mVUL",input:"input_HUC3",colorInput:"colorInput_C1YB",colorTable:"colorTable_Js7s"};function g(){let{colorMode:e,setColorMode:s}=(0,d.I)(),n="dark"===e,o=n?m.r$:m.Yj,g=n?m.iR:m.Nu,[b,x]=(0,a.useState)(o),[f,j]=(0,a.useState)(o),[y,v]=(0,a.useState)(g),[w,k]=(0,a.useState)(m.NT),[S,N]=(0,a.useState)(n?m.Ax:m.lP);function C(e){let s=e.target.value.replace(/^(?=[^#])/,"#");x(s);try{j(i()(s).hex())}catch{}}return(0,a.useEffect)(()=>{N(n?m.Ax:m.lP)},[n]),(0,a.useEffect)(()=>{let e=JSON.parse(S.get()??"{}");x(e.baseColor??o),j(e.baseColor??o),v(e.background??g),k(e.shades??m.NT)},[S,g,o]),(0,a.useEffect)(()=>{(0,m.i3)({baseColor:f,background:y,shades:w},n),S.set(JSON.stringify({baseColor:f,background:y,shades:w}))},[f,y,w,S,n]),(0,t.jsxs)("div",{children:[(0,t.jsx)(h.Z,{type:"tip",children:(0,t.jsx)("p",{children:(0,t.jsx)(c.Z,{id:"colorGenerator.tip.body",values:{wcagLink:(0,t.jsx)(l.Z,{href:"https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast",children:(0,t.jsx)(c.Z,{id:"colorGenerator.tip.body.wcagLink.label",children:"WCAG-AA contrast ratio"})})},children:"Aim for at least {wcagLink} for the primary color to ensure readability. Use the Docusaurus website itself to preview how your color palette would look like. You can use alternative palettes in dark mode because one color doesn't usually work in both light and dark mode."})})}),(0,t.jsxs)("p",{children:[(0,t.jsx)("label",{htmlFor:"primary_color",children:(0,t.jsx)("strong",{className:"margin-right--sm",children:(0,t.jsx)(c.Z,{id:"colorGenerator.inputs.primary.label",children:"Primary Color:"})})})," ",(0,t.jsx)("input",{id:"primary_color",type:"text",className:(0,r.Z)(p.input,"margin-right--sm"),value:b,onChange:C}),(0,t.jsx)("input",{type:"color",className:p.colorInput,value:f,onChange:C}),(0,t.jsx)("button",{type:"button",className:"clean-btn button button--primary margin-left--md",onClick:()=>s(n?"light":"dark"),children:(0,t.jsx)(c.Z,{id:"colorGenerator.inputs.modeToggle.label",values:{colorMode:n?(0,t.jsx)(c.Z,{id:"colorGenerator.inputs.modeToggle.label.colorMode.light",children:"light"}):(0,t.jsx)(c.Z,{id:"colorGenerator.inputs.modeToggle.label.colorMode.dark",children:"dark"})},children:"Edit {colorMode} mode"})}),(0,t.jsx)("button",{type:"button",className:"clean-btn button button--secondary margin-left--md",onClick:()=>{x(o),j(o),v(g),k(m.NT)},children:(0,t.jsx)(c.Z,{id:"colorGenerator.inputs.resetButton.label",children:"Reset"})})]}),(0,t.jsxs)("p",{children:[(0,t.jsx)("label",{htmlFor:"background_color",children:(0,t.jsx)("strong",{className:"margin-right--sm",children:(0,t.jsx)(c.Z,{id:"colorGenerator.inputs.background.label",children:"Background:"})})}),(0,t.jsx)("input",{id:"background_color",type:"color",className:(0,r.Z)(p.colorInput,"margin-right--sm"),value:y,onChange:e=>{v(e.target.value)}})]}),(0,t.jsx)("div",{children:(0,t.jsxs)("table",{className:p.colorTable,children:[(0,t.jsx)("thead",{children:(0,t.jsxs)("tr",{children:[(0,t.jsx)("th",{children:(0,t.jsx)(c.Z,{id:"colorGenerator.table.heading1",children:"CSS Variable Name"})}),(0,t.jsx)("th",{children:(0,t.jsx)(c.Z,{id:"colorGenerator.table.heading2",description:"This column is the color's representation in hex",children:"Hex"})}),(0,t.jsx)("th",{children:(0,t.jsx)(c.Z,{id:"colorGenerator.table.heading3",description:"This column is the adjusted shades' adjustment values relative to the primary color",children:"Adjustment"})}),(0,t.jsx)("th",{children:(0,t.jsx)(c.Z,{id:"colorGenerator.table.heading4",description:"This column is WCAG contrast rating: AAA, AA, Fail",children:"Contrast Rating"})})]})}),(0,t.jsx)("tbody",{children:(0,m.t8)(w,f).sort((e,s)=>e.displayOrder-s.displayOrder).map(e=>{let{variableName:s,adjustment:n,adjustmentInput:a,hex:r}=e;return(0,t.jsxs)("tr",{children:[(0,t.jsx)("td",{children:(0,t.jsx)("code",{children:s})}),(0,t.jsxs)("td",{children:[(0,t.jsx)("span",{className:p.color,style:{backgroundColor:r}}),(0,t.jsx)("code",{className:"margin-left--sm",children:r.toLowerCase()})]}),(0,t.jsx)("td",{children:"--ifm-color-primary"===s?0:(0,t.jsx)("input",{"aria-label":`${s} CSS variable name`,className:p.input,type:"number",value:a,onChange:e=>{let t=parseFloat(e.target.value);k({...w,[s]:{...w[s],adjustmentInput:e.target.value,adjustment:Number.isNaN(t)?n:t/100}})}})}),(0,t.jsx)("td",{style:{fontSize:"medium",backgroundColor:y,color:r},children:(0,t.jsx)("b",{children:function(e,s){let n=i()(e).contrast(i()(s));return n>7?"AAA \uD83C\uDFC5":n>4.5?"AA \uD83D\uDC4D":"Fail \uD83D\uDD34"}(r,y)})})]},s)})})]})}),(0,t.jsx)("p",{children:(0,t.jsx)(c.Z,{id:"colorGenerator.text",values:{cssPath:(0,t.jsx)("code",{children:"src/css/custom.css"})},children:"Replace the variables in {cssPath} with these new variables."})}),(0,t.jsx)(u.Z,{className:"language-css",title:"/src/css/custom.css",children:`${n?"[data-theme='dark']":":root"} {
${(0,m.t8)(w,f).sort((e,s)=>e.codeOrder-s.codeOrder).map(e=>` ${e.variableName}: ${e.hex.toLowerCase()};`).join("\n")}${y!==g?`
--ifm-background-color: ${y};`:""}
}`})]})}},45960:function(e,s,n){n.d(s,{Z:()=>eo});var t,a={};n.r(a),n.d(a,{ButtonExample:()=>Z});var r=n("85893"),o=n("67294"),i=n("90496"),l=n("8903"),c=n("10075"),d=n("80661"),u=n("30056"),h=n("82234"),m=n("22687"),p=n("31058"),g=n("70341");function b(){let{prism:e}=(0,g.L)(),{colorMode:s}=(0,p.I)(),n=e.theme,t=e.darkTheme||n;return"dark"===s?t:n}var x=n("18605");let f="playgroundContainer_6Ior",j="playgroundHeader_Tvsk",y="playgroundEditor_TySg",v="playgroundPreview_mApW";function w(e){let{children:s}=e;return(0,r.jsx)("div",{className:(0,i.Z)(j),children:s})}function k(){return(0,r.jsx)("div",{children:"Loading..."})}function S(){return(0,r.jsx)(h.Z,{fallback:(0,r.jsx)(k,{}),children:()=>(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(x.Z,{fallback:e=>(0,r.jsx)(m.Ac,{...e}),children:(0,r.jsx)(c.i5,{})}),(0,r.jsx)(c.IF,{})]})})}function N(){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(w,{children:(0,r.jsx)(d.Z,{id:"theme.Playground.result",description:"The result label of the live codeblocks",children:"Result"})}),(0,r.jsx)("div",{className:v,children:(0,r.jsx)(S,{})})]})}function C(){let e=(0,l.Z)();return(0,r.jsx)(c.uz,{className:y},String(e))}function T(){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(w,{children:(0,r.jsx)(d.Z,{id:"theme.Playground.liveEditor",description:"The live editor label of the live codeblocks",children:"Live Editor"})}),(0,r.jsx)(C,{})]})}let I=e=>`${e};`;function B(e){let{children:s,transformCode:n,...t}=e,{siteConfig:{themeConfig:a}}=(0,u.Z)(),{liveCodeBlock:{playgroundPosition:o}}=a,i=b(),l=t.metastring?.includes("noInline")??!1;return(0,r.jsx)("div",{className:f,children:(0,r.jsx)(c.nu,{code:s?.replace(/\n$/,""),noInline:l,transformCode:n??I,theme:i,...t,children:"top"===o?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(N,{}),(0,r.jsx)(T,{})]}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(T,{}),(0,r.jsx)(N,{})]})})})}function Z(e){return(0,r.jsx)("button",{type:"button",...e,style:{backgroundColor:"white",color:"black",border:"solid red",borderRadius:20,padding:10,cursor:"pointer",...e.style}})}let L={React:o,...o,...a};var A=n("2235"),_=n("6324"),E=n.n(_);let z=/title=(?<quote>["'])(?<title>.*?)\1/,M=/\{(?<range>[\d,-]+)\}/,R={js:{start:"\\/\\/",end:""},jsBlock:{start:"\\/\\*",end:"\\*\\/"},jsx:{start:"\\{\\s*\\/\\*",end:"\\*\\/\\s*\\}"},bash:{start:"#",end:""},html:{start:"\x3c!--",end:"--\x3e"}},D={...R,lua:{start:"--",end:""},wasm:{start:"\\;\\;",end:""},tex:{start:"%",end:""},vb:{start:"['\u2018\u2019]",end:""},vbnet:{start:"(?:_\\s*)?['\u2018\u2019]",end:""},rem:{start:"[Rr][Ee][Mm]\\b",end:""},f90:{start:"!",end:""},ml:{start:"\\(\\*",end:"\\*\\)"},cobol:{start:"\\*>",end:""}},O=Object.keys(R);function W(e,s){let n=e.map(e=>{let{start:n,end:t}=D[e];return`(?:${n}\\s*(${s.flatMap(e=>[e.line,e.block?.start,e.block?.end].filter(Boolean)).join("|")})\\s*${t})`}).join("|");return RegExp(`^\\s*(?:${n})\\s*$`)}let P="codeBlockContainer_jDV4";function $(e){let{as:s,...n}=e,t=function(e){let s={color:"--prism-color",backgroundColor:"--prism-background-color"},n={};return Object.entries(e.plain).forEach(e=>{let[t,a]=e,r=s[t];r&&"string"==typeof a&&(n[r]=a)}),n}(b());return(0,r.jsx)(s,{...n,style:t,className:(0,i.Z)(n.className,P,A.k.common.codeBlock)})}let H={codeBlockContent:"codeBlockContent_vx7S",codeBlockTitle:"codeBlockTitle_bdru",codeBlock:"codeBlock_Gebt",codeBlockStandalone:"codeBlockStandalone_i_cY",codeBlockLines:"codeBlockLines_FJaf",codeBlockLinesWithNumbering:"codeBlockLinesWithNumbering_FU9Q",buttonGroup:"buttonGroup_cUGO"};function F(e){let{children:s,className:n}=e;return(0,r.jsx)($,{as:"pre",tabIndex:0,className:(0,i.Z)(H.codeBlockStandalone,"thin-scrollbar",n),children:(0,r.jsx)("code",{className:H.codeBlockLines,children:s})})}var G=n("31008");let V={attributes:!0,characterData:!0,childList:!0,subtree:!0};var q=n("7316");let U={codeLine:"codeLine_qRmp",codeLineNumber:"codeLineNumber_dS_J",codeLineContent:"codeLineContent_XF5l"};function Y(e){let{line:s,classNames:n,showLineNumbers:t,getLineProps:a,getTokenProps:o}=e;1===s.length&&"\n"===s[0].content&&(s[0].content="");let l=a({line:s,className:(0,i.Z)(n,t&&U.codeLine)}),c=s.map((e,s)=>(0,r.jsx)("span",{...o({token:e})},s));return(0,r.jsxs)("span",{...l,children:[t?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("span",{className:U.codeLineNumber}),(0,r.jsx)("span",{className:U.codeLineContent,children:c})]}):c,(0,r.jsx)("br",{})]})}var J=n("84171");function Q(e){return(0,r.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,r.jsx)("path",{fill:"currentColor",d:"M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"})})}function X(e){return(0,r.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,r.jsx)("path",{fill:"currentColor",d:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"})})}let K={copyButtonCopied:"copyButtonCopied_OkN_",copyButtonIcons:"copyButtonIcons_OqsO",copyButtonIcon:"copyButtonIcon_PgCn",copyButtonSuccessIcon:"copyButtonSuccessIcon_bsQG"};function ee(e){let{code:s,className:n}=e,[t,a]=(0,o.useState)(!1),l=(0,o.useRef)(void 0),c=(0,o.useCallback)(()=>{(0,J.Z)(s),a(!0),l.current=window.setTimeout(()=>{a(!1)},1e3)},[s]);return(0,o.useEffect)(()=>()=>window.clearTimeout(l.current),[]),(0,r.jsx)("button",{type:"button","aria-label":t?(0,d.I)({id:"theme.CodeBlock.copied",message:"Copied",description:"The copied button label on code blocks"}):(0,d.I)({id:"theme.CodeBlock.copyButtonAriaLabel",message:"Copy code to clipboard",description:"The ARIA label for copy code blocks button"}),title:(0,d.I)({id:"theme.CodeBlock.copy",message:"Copy",description:"The copy button label on code blocks"}),className:(0,i.Z)("clean-btn",n,K.copyButton,t&&K.copyButtonCopied),onClick:c,children:(0,r.jsxs)("span",{className:K.copyButtonIcons,"aria-hidden":"true",children:[(0,r.jsx)(Q,{className:K.copyButtonIcon}),(0,r.jsx)(X,{className:K.copyButtonSuccessIcon})]})})}function es(e){return(0,r.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,r.jsx)("path",{fill:"currentColor",d:"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"})})}let en={wordWrapButtonIcon:"wordWrapButtonIcon_MQXS",wordWrapButtonEnabled:"wordWrapButtonEnabled_TBIH"};function et(e){let{className:s,onClick:n,isEnabled:t}=e,a=(0,d.I)({id:"theme.CodeBlock.wordWrapToggle",message:"Toggle word wrap",description:"The title attribute for toggle word wrapping button of code block lines"});return(0,r.jsx)("button",{type:"button",onClick:n,className:(0,i.Z)("clean-btn",s,t&&en.wordWrapButtonEnabled),"aria-label":a,title:a,children:(0,r.jsx)(es,{className:en.wordWrapButtonIcon,"aria-hidden":"true"})})}function ea(e){var s,n,t;let{children:a,className:l="",metastring:c,title:d,showLineNumbers:u,language:h}=e,{prism:{defaultLanguage:m,magicComments:p}}=(0,g.L)();let x=(s=h??function(e){let s=e.split(" ").find(e=>e.startsWith("language-"));return s?.replace(/language-/,"")}(l)??m,s?.toLowerCase()),f=b(),j=function(){let[e,s]=(0,o.useState)(!1),[n,t]=(0,o.useState)(!1),a=(0,o.useRef)(null),r=(0,o.useCallback)(()=>{let n=a.current.querySelector("code");e?n.removeAttribute("style"):(n.style.whiteSpace="pre-wrap",n.style.overflowWrap="anywhere"),s(e=>!e)},[a,e]),i=(0,o.useCallback)(()=>{let{scrollWidth:e,clientWidth:s}=a.current;t(e>s||a.current.querySelector("code").hasAttribute("style"))},[a]);return!function(e,s){let[n,t]=(0,o.useState)(),a=(0,o.useCallback)(()=>{t(e.current?.closest("[role=tabpanel][hidden]"))},[e,t]);(0,o.useEffect)(()=>{a()},[a]),!function(e,s){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:V,t=(0,G.zX)(s),a=(0,G.Ql)(n);(0,o.useEffect)(()=>{let s=new MutationObserver(t);return e&&s.observe(e,a),()=>s.disconnect()},[e,t,a])}(n,e=>{e.forEach(e=>{"attributes"===e.type&&"hidden"===e.attributeName&&(s(),a())})},{attributes:!0,characterData:!1,childList:!1,subtree:!1})}(a,i),(0,o.useEffect)(()=>{i()},[e,i]),(0,o.useEffect)(()=>(window.addEventListener("resize",i,{passive:!0}),()=>{window.removeEventListener("resize",i)}),[i]),{codeBlockRef:a,isEnabled:e,isCodeScrollable:n,toggle:r}}();let y=(n=c,(n?.match(z)?.groups.title??"")||d),{lineClassNames:v,code:w}=function(e,s){let n=e.replace(/\n$/,""),{language:t,magicComments:a,metastring:r}=s;if(r&&M.test(r)){let e=r.match(M).groups.range;if(0===a.length)throw Error(`A highlight range has been given in code block's metastring (\`\`\` ${r}), but no magic comment config is available. Docusaurus applies the first magic comment entry's className for metastring ranges.`);let s=a[0].className;return{lineClassNames:Object.fromEntries(E()(e).filter(e=>e>0).map(e=>[e-1,[s]])),code:n}}if(void 0===t)return{lineClassNames:{},code:n};let o=function(e,s){switch(e){case"js":case"javascript":case"ts":case"typescript":return W(["js","jsBlock"],s);case"jsx":case"tsx":return W(["js","jsBlock","jsx"],s);case"html":return W(["js","jsBlock","html"],s);case"python":case"py":case"bash":return W(["bash"],s);case"markdown":case"md":return W(["html","jsx","bash"],s);case"tex":case"latex":case"matlab":return W(["tex"],s);case"lua":case"haskell":return W(["lua"],s);case"sql":return W(["lua","jsBlock"],s);case"wasm":return W(["wasm"],s);case"vb":case"vba":case"visual-basic":return W(["vb","rem"],s);case"vbnet":return W(["vbnet","rem"],s);case"batch":return W(["rem"],s);case"basic":return W(["rem","f90"],s);case"fsharp":return W(["js","ml"],s);case"ocaml":case"sml":return W(["ml"],s);case"fortran":return W(["f90"],s);case"cobol":return W(["cobol"],s);default:return W(O,s)}}(t,a),i=n.split("\n"),l=Object.fromEntries(a.map(e=>[e.className,{start:0,range:""}])),c=Object.fromEntries(a.filter(e=>e.line).map(e=>{let{className:s,line:n}=e;return[n,s]})),d=Object.fromEntries(a.filter(e=>e.block).map(e=>{let{className:s,block:n}=e;return[n.start,s]})),u=Object.fromEntries(a.filter(e=>e.block).map(e=>{let{className:s,block:n}=e;return[n.end,s]}));for(let e=0;e<i.length;){let s=i[e].match(o);if(!s){e+=1;continue}let n=s.slice(1).find(e=>void 0!==e);c[n]?l[c[n]].range+=`${e},`:d[n]?l[d[n]].start=e:u[n]&&(l[u[n]].range+=`${l[u[n]].start}-${e-1},`),i.splice(e,1)}n=i.join("\n");let h={};return Object.entries(l).forEach(e=>{let[s,{range:n}]=e;E()(n).forEach(e=>{h[e]??=[],h[e].push(s)})}),{lineClassNames:h,code:n}}(a,{metastring:c,language:x,magicComments:p});let k=u??(t=c,!!t?.includes("showLineNumbers"));return(0,r.jsxs)($,{as:"div",className:(0,i.Z)(l,x&&!l.includes(`language-${x}`)&&`language-${x}`),children:[y&&(0,r.jsx)("div",{className:H.codeBlockTitle,children:y}),(0,r.jsxs)("div",{className:H.codeBlockContent,children:[(0,r.jsx)(q.y$,{theme:f,code:w,language:x??"text",children:e=>{let{className:s,style:n,tokens:t,getLineProps:a,getTokenProps:o}=e;return(0,r.jsx)("pre",{tabIndex:0,ref:j.codeBlockRef,className:(0,i.Z)(s,H.codeBlock,"thin-scrollbar"),style:n,children:(0,r.jsx)("code",{className:(0,i.Z)(H.codeBlockLines,k&&H.codeBlockLinesWithNumbering),children:t.map((e,s)=>(0,r.jsx)(Y,{line:e,getLineProps:a,getTokenProps:o,classNames:v[s],showLineNumbers:k},s))})})}}),(0,r.jsxs)("div",{className:H.buttonGroup,children:[(j.isEnabled||j.isCodeScrollable)&&(0,r.jsx)(et,{className:H.codeButton,onClick:()=>j.toggle(),isEnabled:j.isEnabled}),(0,r.jsx)(ee,{className:H.codeButton,code:w})]})]})]})}let er=(t=function(e){var s;let{children:n,...t}=e,a=(0,l.Z)();let i=(s=n,o.Children.toArray(s).some(e=>(0,o.isValidElement)(e))?s:Array.isArray(s)?s.join(""):s),c="string"==typeof i?ea:F;return(0,r.jsx)(c,{...t,children:i},String(a))},function(e){return e.live?(0,r.jsx)(B,{scope:L,...e}):(0,r.jsx)(t,{...e})});function eo(e){return(0,r.jsx)(er,{...e})}}}]);
Reference in a new issue View git blame Copy permalink