diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 07092c6a1..e12ae33cf 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -29,6 +29,7 @@ const config = { staticDirectories: ['static', 'public'], plugins: [ + 'docusaurus-plugin-sass', require.resolve('docusaurus-plugin-image-zoom') ], @@ -46,7 +47,7 @@ const config = { }, blog: false, theme: { - customCss: require.resolve('./src/css/custom.css'), + customCss: require.resolve('./src/css/custom.scss'), }, }), ], diff --git a/docs/package-lock.json b/docs/package-lock.json index c4c585a7c..900ce9de3 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -13,11 +13,13 @@ "@mdx-js/react": "^1.6.22", "clsx": "^1.2.1", "docusaurus-plugin-image-zoom": "^0.1.1", + "docusaurus-plugin-sass": "^0.2.2", "mdx-mermaid": "^1.3.2", "mermaid": "^9.1.6", "prism-react-renderer": "^1.3.5", "react": "^17.0.2", - "react-dom": "^17.0.2" + "react-dom": "^17.0.2", + "sass": "^1.54.8" }, "devDependencies": { "@docusaurus/module-type-aliases": "2.0.1" @@ -5911,6 +5913,18 @@ "medium-zoom": "^1.0.6" } }, + "node_modules/docusaurus-plugin-sass": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/docusaurus-plugin-sass/-/docusaurus-plugin-sass-0.2.2.tgz", + "integrity": "sha512-ZZBpj3PrhGpYE2kAnkZB9NRwy/CDi4rGun1oec6PYR8YvGzqxYGtXvLgHi6FFbu8/N483klk8udqyYMh6Ted+A==", + "dependencies": { + "sass-loader": "^10.1.1" + }, + "peerDependencies": { + "@docusaurus/core": "^2.0.0-beta", + "sass": "^1.30.0" + } + }, "node_modules/dom-converter": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz", @@ -7557,6 +7571,11 @@ "url": "https://opencollective.com/immer" } }, + "node_modules/immutable": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz", + "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -11287,6 +11306,75 @@ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, + "node_modules/sass": { + "version": "1.54.8", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.8.tgz", + "integrity": "sha512-ib4JhLRRgbg6QVy6bsv5uJxnJMTS2soVcCp9Y88Extyy13A8vV0G1fAwujOzmNkFQbR3LvedudAMbtuNRPbQww==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/sass-loader": { + "version": "10.3.1", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.3.1.tgz", + "integrity": "sha512-y2aBdtYkbqorVavkC3fcJIUDGIegzDWPn3/LAFhsf3G+MzPKTJx37sROf5pXtUeggSVbNbmfj8TgRaSLMelXRA==", + "dependencies": { + "klona": "^2.0.4", + "loader-utils": "^2.0.0", + "neo-async": "^2.6.2", + "schema-utils": "^3.0.0", + "semver": "^7.3.2" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "fibers": ">= 3.1.0", + "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0", + "sass": "^1.3.0", + "webpack": "^4.36.0 || ^5.0.0" + }, + "peerDependenciesMeta": { + "fibers": { + "optional": true + }, + "node-sass": { + "optional": true + }, + "sass": { + "optional": true + } + } + }, + "node_modules/sass-loader/node_modules/schema-utils": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz", + "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==", + "dependencies": { + "@types/json-schema": "^7.0.8", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, "node_modules/sax": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", @@ -17969,6 +18057,14 @@ "medium-zoom": "^1.0.6" } }, + "docusaurus-plugin-sass": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/docusaurus-plugin-sass/-/docusaurus-plugin-sass-0.2.2.tgz", + "integrity": "sha512-ZZBpj3PrhGpYE2kAnkZB9NRwy/CDi4rGun1oec6PYR8YvGzqxYGtXvLgHi6FFbu8/N483klk8udqyYMh6Ted+A==", + "requires": { + "sass-loader": "^10.1.1" + } + }, "dom-converter": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz", @@ -19187,6 +19283,11 @@ "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.14.tgz", "integrity": "sha512-ubBeqQutOSLIFCUBN03jGeOS6a3DoYlSYwYJTa+gSKEZKU5redJIqkIdZ3JVv/4RZpfcXdAWH5zCNLWPRv2WDw==" }, + "immutable": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz", + "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==" + }, "import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -21808,6 +21909,40 @@ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, + "sass": { + "version": "1.54.8", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.8.tgz", + "integrity": "sha512-ib4JhLRRgbg6QVy6bsv5uJxnJMTS2soVcCp9Y88Extyy13A8vV0G1fAwujOzmNkFQbR3LvedudAMbtuNRPbQww==", + "requires": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + } + }, + "sass-loader": { + "version": "10.3.1", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.3.1.tgz", + "integrity": "sha512-y2aBdtYkbqorVavkC3fcJIUDGIegzDWPn3/LAFhsf3G+MzPKTJx37sROf5pXtUeggSVbNbmfj8TgRaSLMelXRA==", + "requires": { + "klona": "^2.0.4", + "loader-utils": "^2.0.0", + "neo-async": "^2.6.2", + "schema-utils": "^3.0.0", + "semver": "^7.3.2" + }, + "dependencies": { + "schema-utils": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz", + "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==", + "requires": { + "@types/json-schema": "^7.0.8", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + } + } + } + }, "sax": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", diff --git a/docs/package.json b/docs/package.json index 4d2572fb3..05bd27fa1 100644 --- a/docs/package.json +++ b/docs/package.json @@ -19,11 +19,13 @@ "@mdx-js/react": "^1.6.22", "clsx": "^1.2.1", "docusaurus-plugin-image-zoom": "^0.1.1", + "docusaurus-plugin-sass": "^0.2.2", "mdx-mermaid": "^1.3.2", "mermaid": "^9.1.6", "prism-react-renderer": "^1.3.5", "react": "^17.0.2", - "react-dom": "^17.0.2" + "react-dom": "^17.0.2", + "sass": "^1.54.8" }, "devDependencies": { "@docusaurus/module-type-aliases": "2.0.1" diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css deleted file mode 100644 index 43c8ccfe8..000000000 --- a/docs/src/css/custom.css +++ /dev/null @@ -1,36 +0,0 @@ -/** - * Any CSS included here will be global. The classic template - * bundles Infima by default. Infima is a CSS framework designed to - * work well for content-centric websites. - */ - -/* You can override the default Infima variables here. */ -:root { - --ifm-color-primary: #2e8555; - --ifm-color-primary-dark: #29784c; - --ifm-color-primary-darker: #277148; - --ifm-color-primary-darkest: #205d3b; - --ifm-color-primary-light: #33925d; - --ifm-color-primary-lighter: #359962; - --ifm-color-primary-lightest: #3cad6e; - --ifm-code-font-size: 95%; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); -} - -/* For readability concerns, you should choose a lighter palette in dark mode. */ -[data-theme='dark'] { - --ifm-color-primary: #25c2a0; - --ifm-color-primary-dark: #21af90; - --ifm-color-primary-darker: #1fa588; - --ifm-color-primary-darkest: #1a8870; - --ifm-color-primary-light: #29d5b0; - --ifm-color-primary-lighter: #32d8b4; - --ifm-color-primary-lightest: #4fddbf; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); -} - -.guideImages { - max-width: 650px; - width: 100%; - border: 1px solid #80808029 -} \ No newline at end of file diff --git a/docs/src/css/custom.scss b/docs/src/css/custom.scss new file mode 100644 index 000000000..78bd1b6e1 --- /dev/null +++ b/docs/src/css/custom.scss @@ -0,0 +1,239 @@ +/** + * Any CSS included here will be global. The classic template + * bundles Infima by default. Infima is a CSS framework designed to + * work well for content-centric websites. + */ + +/* You can override the default Infima variables here. */ +:root { + --ifm-color-primary: #2e8555; + --ifm-color-primary-dark: #29784c; + --ifm-color-primary-darker: #277148; + --ifm-color-primary-darkest: #205d3b; + --ifm-color-primary-light: #33925d; + --ifm-color-primary-lighter: #359962; + --ifm-color-primary-lightest: #3cad6e; + --ifm-code-font-size: 95%; + --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); +} + +/* For readability concerns, you should choose a lighter palette in dark mode. */ +[data-theme='dark'] { + --ifm-color-primary: #25c2a0; + --ifm-color-primary-dark: #21af90; + --ifm-color-primary-darker: #1fa588; + --ifm-color-primary-darkest: #1a8870; + --ifm-color-primary-light: #29d5b0; + --ifm-color-primary-lighter: #32d8b4; + --ifm-color-primary-lightest: #4fddbf; + --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); +} + +.guideImages { + max-width: 650px; + width: 100%; + border: 1px solid #80808029 +} + +.markdown { + code { + border-color: transparent; + vertical-align: initial; + font-size: var(--ifm-code-font-size) !important; + } + + blockquote { + background-color: var(--rn-note-background); + border-left: 8px solid var(--ifm-color-warning); + padding: 15px 30px 15px 15px; + + code { + background-color: rgba(0, 0, 0, 0.07); + } + + a code { + background-color: transparent; + white-space: pre; + } + } + + strong { + font-weight: 600; + } + + table { + border-collapse: collapse; + display: table; + margin: 20px 0; + width: 100%; + + thead tr { + background-color: var(--divider); + border: 0; + + > .cliFlagsCol { + width: 20%; + } + + > .cliShortCol { + width: 5%; + } + + > .cliDefaultCol { + width: 20%; + } + + > .cliHelpCol { + width: 55%; + } + + + + } + + tr th { + text-transform: uppercase; + padding: 6px 10px; + font-size: 0.7rem; + text-align: left; + } + + tr td { + font-size: 90%; + line-height: 1.3em; + padding: 10px; + text-align: left; + + code { + display: inline-block; + line-height: 1.2em; + vertical-align: top; + color: #e74c3c; + background-color: unset; + } + + ul { + margin: 8px 0 0 0; + padding: 4px 0 4px 20px; + } + } + + hr { + margin: 12px 0; + } + + .wideColumn { + width: 128px; + } + + .widerColumn { + width: 180px; + } + + .table-heading { + font-weight: var(--ifm-table-head-font-weight); + border-bottom: 2px solid var(--ifm-table-border-color); + } + + div[class*="codeBlockContainer"] { + &, + & pre { + margin-bottom: 0; + } + + pre code { + padding: 12px 16px; + white-space: break-spaces; + } + + button { + display: none; + } + } + } + + figure { + text-align: center; + padding: 8px; + + figcaption { + padding: 8px; + font-size: 0.9rem; + color: var(--subtle); + + code { + color: var(--subtle); + } + } + } + + .docusaurus-highlight-code-line { + background-color: var(--light); + } + + div[class*="codeBlockContainer"] { + box-shadow: none; + border-radius: 8px; + + pre { + border-radius: 8px; + } + + button { + border-color: var(--light); + background: var(--deepdark); + } + } + + div[class*="codeBlockContent"] { + display: grid; + min-width: 100%; + } + + div[class*="codeBlockLines"] { + font-size: 80%; + } + + div[class*="codeBlockTitle"] { + color: var(--subtle); + background-color: var(--ifm-color-emphasis-300); + } + + .tabs { + border-bottom: 1px solid var(--ifm-table-border-color); + color: var(--ifm-font-color-base); + + .tabs__item { + font-weight: normal; + font-size: 15px; + color: var(--ifm-font-color-base); + user-select: none; + + &:hover { + border-radius: var(--ifm-global-radius) var(--ifm-global-radius) 0 0; + } + + &.tabs__item--active { + font-weight: 700; + } + } + } +} + +html[class*='docs-doc-id-cli'] .markdown table thead tr { + :nth-of-type(1) { + width: 20%; + } + + :nth-of-type(2) { + width: 5%; + } + + :nth-of-type(3) { + width: 20%; + } + + :nth-of-type(4) { + width: 50%; + } +} \ No newline at end of file