diff --git a/.gitignore b/.gitignore index d815957f75..b2381dedda 100644 --- a/.gitignore +++ b/.gitignore @@ -3,10 +3,12 @@ # Production /build +/public # Generated files .docusaurus .cache-loader +.cache # Misc .DS_Store diff --git a/docs/100-getting-started/index.mdx b/docs/100-getting-started/index.mdx index 6501dc4708..7a78dd4fd5 100644 --- a/docs/100-getting-started/index.mdx +++ b/docs/100-getting-started/index.mdx @@ -72,32 +72,32 @@ _Select one of these options if you want to connect Prisma ORM to your own datab @@ -110,32 +110,32 @@ _Select one of these options if you want to connect Prisma ORM to your own datab diff --git a/docs/200-orm/index.mdx b/docs/200-orm/index.mdx index 01f3c1c165..1d3b842b98 100644 --- a/docs/200-orm/index.mdx +++ b/docs/200-orm/index.mdx @@ -1,5 +1,6 @@ --- title: 'ORM' +id: 'orm-index' metaTitle: 'ORM' metaDescription: 'ORM' toc: false diff --git a/docs/index.mdx b/docs/index.mdx new file mode 100644 index 0000000000..ce15547473 --- /dev/null +++ b/docs/index.mdx @@ -0,0 +1,10 @@ +--- +title: 'Homepage' +metaTitle: 'homepage' +metaDescription: 'About the Prisma docs.' +toc: false +--- + + + + diff --git a/docusaurus.config.ts b/docusaurus.config.ts index a49ba0152e..f95b8c9772 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -39,7 +39,7 @@ const config: Config = { }, blog: false, theme: { - customCss: './src/css/custom.css', + customCss: ['./src/css/custom.css', './src/css/all.css', './src/css/theming.css'], }, } satisfies Preset.Options, ], @@ -49,35 +49,47 @@ const config: Config = { // Replace with your project's social card image: 'img/docusaurus-social-card.jpg', navbar: { - title: 'Docs', logo: { - alt: 'Prisma Logo', - src: 'img/logo-dark.svg', srcDark: 'img/logo-white.svg', + alt: 'Prisma logo', + src: 'img/logo.svg', + href: "https://prisma.io/", + target: "_self" }, items: [ { type: 'docSidebar', - sidebarId: 'getStartedSidebar', + sidebarId: 'index', + position: 'left', + label: '/docs', + className: 'logo-link', + }, + { + type: 'docSidebar', + sidebarId: 'gettingStarted', position: 'left', label: 'Get Started', + className: 'indigo first-item', }, { type: 'docSidebar', sidebarId: 'ormSidebar', position: 'left', + className: 'indigo', label: 'ORM', }, { type: 'docSidebar', sidebarId: 'accelerateSidebar', position: 'left', + className: 'teal', label: 'Accelerate', }, { type: 'docSidebar', sidebarId: 'pulseSidebar', position: 'left', + className: 'teal', label: 'Pulse', }, { @@ -86,6 +98,12 @@ const config: Config = { className: 'header-github-link', 'aria-label': 'GitHub repository', }, + { + href: 'https://console.prisma.io/login?utm_source=docs&utm_medium=login', + position: 'right', + label: "Login", + className: 'navbar-login-btn internal teal-btn', + }, ], }, algolia: { @@ -100,29 +118,33 @@ const config: Config = { title: 'Products', items: [ { - label: 'Client', - href: 'https://prisma.io/client', - }, - { - label: 'Migrate', - href: 'https://prisma.io/migrate', + label: 'ORM', + href: 'https://prisma.io/orm', + target: "_self", + class: "internal footer__link-item" }, { label: 'Accelerate', href: 'https://prisma.io/accelerate', + target: "_self", + class: "internal footer__link-item" }, { label: 'Pulse', href: 'https://prisma.io/pulse', + target: "_self", + class: "internal footer__link-item" }, { label: 'Pricing', href: 'https://prisma.io/pricing', + target: "_self", + class: "internal footer__link-item" }, ], }, { - title: 'Developers', + title: 'Resources', items: [ { label: 'Docs', @@ -136,18 +158,64 @@ const config: Config = { label: 'Prisma Examples', href: 'https://github.com/prisma/prisma-examples', }, + { + label: 'Prisma in your stack', + href: 'https://prisma.io/stack', + target: "_self", + class: "internal footer__link-item" + }, + { + label: 'Ecosystem', + href: 'https://prisma.io/ecosystem', + target: "_self", + class: "internal footer__link-item" + }, + { + label: 'Tutorials', + href: 'https://prisma.io/learn', + target: "_self", + class: "internal footer__link-item" + }, + { + label: 'Playground', + href: 'https://playground.prisma.io/', + }, + { + label: 'Customer stories', + href: 'https://prisma.io/showcase', + target: "_self", + class: "internal footer__link-item" + }, + { + label: 'Data Platform status', + href: 'https://www.prisma-status.com/', + }, + { + label: 'VS Code Extension', + href: 'https://marketplace.visualstudio.com/items?itemName=Prisma.prisma', + }, ], }, { - title: 'Use Cases', + title: 'Contact us', items: [ { - label: 'Customer Stories', - href: 'https://www.prisma.io/showcase', + label: 'Community', + href: 'https://www.prisma.io/community', + target: "_self", + class: "internal footer__link-item" + }, + { + label: 'Support', + href: 'https://www.prisma.io/support', + target: "_self", + class: "internal footer__link-item" }, { label: 'Enterprise', href: 'https://www.prisma.io/enterprise', + target: "_self", + class: "internal footer__link-item" }, ], }, @@ -157,15 +225,94 @@ const config: Config = { { label: 'About', href: 'https://prisma.io/about', + target: "_self", + class: "internal footer__link-item", }, { label: 'Blog', to: 'https://prisma.io/blog', + target: "_self", + class: "internal footer__link-item", + }, + { + label: 'Data DX', + to: 'https://www.datadx.io/', + }, + { + label: 'Careers', + to: 'https://prisma.io/careers', + target: "_self", + class: "internal footer__link-item", + }, + { + label: 'Events', + to: 'https://prisma.io/events', + target: "_self", + class: "internal footer__link-item", + }, + { + label: 'Causes', + to: 'https://prismaio.notion.site/Prisma-Causes-0c9e1ddc0f5942edaba355692cfee69f', + }, + { + label: 'OSS Friends', + to: 'https://prisma.io/oss-friends', + target: "_self", + class: "internal footer__link-item", + }, + { + label: 'Terms & Privacy', + to: 'https://prismaio.notion.site/Terms-Privacy-5b5b9938b3a941ccb2ad97eaf5524c07', + }, + { + label: 'Service Level Agreement', + to: 'https://pris.ly/sla', }, ], }, + { + items: [ + { + label: ' ', + href: "https://discord.gg/KQyTW2H5ca", + class: "fa-brands fa-discord internal" + }, + { + label: ' ', + href: "https://discord.gg/KQyTW2H5ca", + class: "fa-brands fa-x-twitter internal" + }, + { + label: ' ', + href: "https://discord.gg/KQyTW2H5ca", + class: "fa-brands fa-youtube internal" + }, + { + label: ' ', + href: "https://discord.gg/KQyTW2H5ca", + class: "fa-brands fa-slack internal" + }, + { + label: ' ', + href: "https://discord.gg/KQyTW2H5ca", + class: "fa-brands fa-github internal" + }, + ] + } ], - copyright: `Copyright © ${new Date().getFullYear()} Prisma Data, Inc. Built with Docusaurus.`, + logo: { + srcDark: 'img/logo-white.svg', + alt: 'Prisma logo', + src: 'img/logo-white.svg', + href: "https://prisma.io/", + target: "_self", + }, + copyright: `© ${new Date().getFullYear()} Prisma Data, Inc.`, + }, + docs: { + sidebar: { + autoCollapseCategories: true + }, }, prism: { theme: prismThemes.github, diff --git a/package-lock.json b/package-lock.json index 9cb87fc58f..e80bc0484d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,9 @@ "@docusaurus/core": "^3.1.1", "@docusaurus/preset-classic": "^3.1.1", "@mdx-js/react": "^3.0.0", + "@react-aria/overlays": "^3.21.1", + "@react-aria/tooltip": "^3.7.2", + "@react-aria/utils": "^3.23.2", "clsx": "^2.0.0", "prism-react-renderer": "^2.3.0", "react": "^18.0.0", @@ -3284,6 +3287,50 @@ "node": ">=14" } }, + "node_modules/@formatjs/ecma402-abstract": { + "version": "1.18.2", + "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.18.2.tgz", + "integrity": "sha512-+QoPW4csYALsQIl8GbN14igZzDbuwzcpWrku9nyMXlaqAlwRBgl5V+p0vWMGFqHOw37czNXaP/lEk4wbLgcmtA==", + "dependencies": { + "@formatjs/intl-localematcher": "0.5.4", + "tslib": "^2.4.0" + } + }, + "node_modules/@formatjs/fast-memoize": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.0.tgz", + "integrity": "sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==", + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/@formatjs/icu-messageformat-parser": { + "version": "2.7.6", + "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.7.6.tgz", + "integrity": "sha512-etVau26po9+eewJKYoiBKP6743I1br0/Ie00Pb/S/PtmYfmjTcOn2YCh2yNkSZI12h6Rg+BOgQYborXk46BvkA==", + "dependencies": { + "@formatjs/ecma402-abstract": "1.18.2", + "@formatjs/icu-skeleton-parser": "1.8.0", + "tslib": "^2.4.0" + } + }, + "node_modules/@formatjs/icu-skeleton-parser": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.0.tgz", + "integrity": "sha512-QWLAYvM0n8hv7Nq5BEs4LKIjevpVpbGLAJgOaYzg9wABEoX1j0JO1q2/jVkO6CVlq0dbsxZCngS5aXbysYueqA==", + "dependencies": { + "@formatjs/ecma402-abstract": "1.18.2", + "tslib": "^2.4.0" + } + }, + "node_modules/@formatjs/intl-localematcher": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.4.tgz", + "integrity": "sha512-zTwEpWOzZ2CiKcB93BLngUX59hQkuZjT2+SAQEscSm52peDW/getsawMcWF1rGRpMCX6D7nSJA3CzJ8gn13N/g==", + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -3297,6 +3344,39 @@ "@hapi/hoek": "^9.0.0" } }, + "node_modules/@internationalized/date": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.2.tgz", + "integrity": "sha512-vo1yOMUt2hzp63IutEaTUxROdvQg1qlMRsbCvbay2AK2Gai7wIgCyK5weEX3nHkiLgo4qCXHijFNC/ILhlRpOQ==", + "dependencies": { + "@swc/helpers": "^0.5.0" + } + }, + "node_modules/@internationalized/message": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@internationalized/message/-/message-3.1.2.tgz", + "integrity": "sha512-MHAWsZWz8jf6jFPZqpTudcCM361YMtPIRu9CXkYmKjJ/0R3pQRScV5C0zS+Qi50O5UAm8ecKhkXx6mWDDcF6/g==", + "dependencies": { + "@swc/helpers": "^0.5.0", + "intl-messageformat": "^10.1.0" + } + }, + "node_modules/@internationalized/number": { + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.5.1.tgz", + "integrity": "sha512-N0fPU/nz15SwR9IbfJ5xaS9Ss/O5h1sVXMZf43vc9mxEG48ovglvvzBjF53aHlq20uoR6c+88CrIXipU/LSzwg==", + "dependencies": { + "@swc/helpers": "^0.5.0" + } + }, + "node_modules/@internationalized/string": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@internationalized/string/-/string-3.2.1.tgz", + "integrity": "sha512-vWQOvRIauvFMzOO+h7QrdsJmtN1AXAFVcaLWP9AseRN2o7iHceZ6bIXhBD4teZl8i91A3gxKnWBlGgjCwU6MFQ==", + "dependencies": { + "@swc/helpers": "^0.5.0" + } + }, "node_modules/@jest/schemas": { "version": "29.6.3", "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz", @@ -3505,6 +3585,214 @@ "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.24.tgz", "integrity": "sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==" }, + "node_modules/@react-aria/focus": { + "version": "3.16.2", + "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.16.2.tgz", + "integrity": "sha512-Rqo9ummmgotESfypzFjI3uh58yMpL+E+lJBbQuXkBM0u0cU2YYzu0uOrFrq3zcHk997udZvq1pGK/R+2xk9B7g==", + "dependencies": { + "@react-aria/interactions": "^3.21.1", + "@react-aria/utils": "^3.23.2", + "@react-types/shared": "^3.22.1", + "@swc/helpers": "^0.5.0", + "clsx": "^2.0.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, + "node_modules/@react-aria/i18n": { + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@react-aria/i18n/-/i18n-3.10.2.tgz", + "integrity": "sha512-Z1ormoIvMOI4mEdcFLYsoJy9w/EzBdBmgfLP+S/Ah+1xwQOXpgwZxiKOhYHpWa0lf6hkKJL34N9MHJvCJ5Crvw==", + "dependencies": { + "@internationalized/date": "^3.5.2", + "@internationalized/message": "^3.1.2", + "@internationalized/number": "^3.5.1", + "@internationalized/string": "^3.2.1", + "@react-aria/ssr": "^3.9.2", + "@react-aria/utils": "^3.23.2", + "@react-types/shared": "^3.22.1", + "@swc/helpers": "^0.5.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, + "node_modules/@react-aria/interactions": { + "version": "3.21.1", + "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.21.1.tgz", + "integrity": "sha512-AlHf5SOzsShkHfV8GLLk3v9lEmYqYHURKcXWue0JdYbmquMRkUsf/+Tjl1+zHVAQ8lKqRnPYbTmc4AcZbqxltw==", + "dependencies": { + "@react-aria/ssr": "^3.9.2", + "@react-aria/utils": "^3.23.2", + "@react-types/shared": "^3.22.1", + "@swc/helpers": "^0.5.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, + "node_modules/@react-aria/overlays": { + "version": "3.21.1", + "resolved": "https://registry.npmjs.org/@react-aria/overlays/-/overlays-3.21.1.tgz", + "integrity": "sha512-djEBDF+TbIIOHWWNpdm19+z8xtY8U+T+wKVQg/UZ6oWnclSqSWeGl70vu73Cg4HVBJ4hKf1SRx4Z/RN6VvH4Yw==", + "dependencies": { + "@react-aria/focus": "^3.16.2", + "@react-aria/i18n": "^3.10.2", + "@react-aria/interactions": "^3.21.1", + "@react-aria/ssr": "^3.9.2", + "@react-aria/utils": "^3.23.2", + "@react-aria/visually-hidden": "^3.8.10", + "@react-stately/overlays": "^3.6.5", + "@react-types/button": "^3.9.2", + "@react-types/overlays": "^3.8.5", + "@react-types/shared": "^3.22.1", + "@swc/helpers": "^0.5.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, + "node_modules/@react-aria/ssr": { + "version": "3.9.2", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.2.tgz", + "integrity": "sha512-0gKkgDYdnq1w+ey8KzG9l+H5Z821qh9vVjztk55rUg71vTk/Eaebeir+WtzcLLwTjw3m/asIjx8Y59y1lJZhBw==", + "dependencies": { + "@swc/helpers": "^0.5.0" + }, + "engines": { + "node": ">= 12" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, + "node_modules/@react-aria/tooltip": { + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/@react-aria/tooltip/-/tooltip-3.7.2.tgz", + "integrity": "sha512-6jXOSGPao3gPgUQWLbH2r/jxGMqIaIKrJgfwu9TQrh+UkwwiTYW20EpEDCYY2nRFlcoi7EYAiPDSEbHCwXS7Lg==", + "dependencies": { + "@react-aria/focus": "^3.16.2", + "@react-aria/interactions": "^3.21.1", + "@react-aria/utils": "^3.23.2", + "@react-stately/tooltip": "^3.4.7", + "@react-types/shared": "^3.22.1", + "@react-types/tooltip": "^3.4.7", + "@swc/helpers": "^0.5.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, + "node_modules/@react-aria/utils": { + "version": "3.23.2", + "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.23.2.tgz", + "integrity": "sha512-yznR9jJ0GG+YJvTMZxijQwVp+ahP66DY0apZf7X+dllyN+ByEDW+yaL1ewYPIpugxVzH5P8jhnBXsIyHKN411g==", + "dependencies": { + "@react-aria/ssr": "^3.9.2", + "@react-stately/utils": "^3.9.1", + "@react-types/shared": "^3.22.1", + "@swc/helpers": "^0.5.0", + "clsx": "^2.0.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, + "node_modules/@react-aria/visually-hidden": { + "version": "3.8.10", + "resolved": "https://registry.npmjs.org/@react-aria/visually-hidden/-/visually-hidden-3.8.10.tgz", + "integrity": "sha512-np8c4wxdbE7ZrMv/bnjwEfpX0/nkWy9sELEb0sK8n4+HJ+WycoXXrVxBUb9tXgL/GCx5ReeDQChjQWwajm/z3A==", + "dependencies": { + "@react-aria/interactions": "^3.21.1", + "@react-aria/utils": "^3.23.2", + "@react-types/shared": "^3.22.1", + "@swc/helpers": "^0.5.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, + "node_modules/@react-stately/overlays": { + "version": "3.6.5", + "resolved": "https://registry.npmjs.org/@react-stately/overlays/-/overlays-3.6.5.tgz", + "integrity": "sha512-U4rCFj6TPJPXLUvYXAcvh+yP/CO2W+7f0IuqP7ZZGE+Osk9qFkT+zRK5/6ayhBDFpmueNfjIEAzT9gYPQwNHFw==", + "dependencies": { + "@react-stately/utils": "^3.9.1", + "@react-types/overlays": "^3.8.5", + "@swc/helpers": "^0.5.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, + "node_modules/@react-stately/tooltip": { + "version": "3.4.7", + "resolved": "https://registry.npmjs.org/@react-stately/tooltip/-/tooltip-3.4.7.tgz", + "integrity": "sha512-ACtRgBQ8rphBtsUaaxvEAM0HHN9PvMuyvL0vUHd7jvBDCVZJ6it1BKu9SBKjekBkoBOw9nemtkplh9R2CA6V8Q==", + "dependencies": { + "@react-stately/overlays": "^3.6.5", + "@react-types/tooltip": "^3.4.7", + "@swc/helpers": "^0.5.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, + "node_modules/@react-stately/utils": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.9.1.tgz", + "integrity": "sha512-yzw75GE0iUWiyps02BOAPTrybcsMIxEJlzXqtvllAb01O9uX5n0i3X+u2eCpj2UoDF4zS08Ps0jPgWxg8xEYtA==", + "dependencies": { + "@swc/helpers": "^0.5.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, + "node_modules/@react-types/button": { + "version": "3.9.2", + "resolved": "https://registry.npmjs.org/@react-types/button/-/button-3.9.2.tgz", + "integrity": "sha512-EnPTkGHZRtiwAoJy5q9lDjoG30bEzA/qnvKG29VVXKYAGeqY2IlFs1ypmU+z1X/CpJgPcG3I5cakM7yTVm3pSg==", + "dependencies": { + "@react-types/shared": "^3.22.1" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, + "node_modules/@react-types/overlays": { + "version": "3.8.5", + "resolved": "https://registry.npmjs.org/@react-types/overlays/-/overlays-3.8.5.tgz", + "integrity": "sha512-4D7EEBQigD/m8hE68Ys8eloyyZFHHduqykSIgINJ0edmo0jygRbWlTwuhWFR9USgSP4dK54duN0Mvq0m4HEVEw==", + "dependencies": { + "@react-types/shared": "^3.22.1" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, + "node_modules/@react-types/shared": { + "version": "3.22.1", + "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.22.1.tgz", + "integrity": "sha512-PCpa+Vo6BKnRMuOEzy5zAZ3/H5tnQg1e80khMhK2xys0j6ZqzkgQC+fHMNZ7VDFNLqqNMj/o0eVeSBDh2POjkw==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, + "node_modules/@react-types/tooltip": { + "version": "3.4.7", + "resolved": "https://registry.npmjs.org/@react-types/tooltip/-/tooltip-3.4.7.tgz", + "integrity": "sha512-rV4HZRQxLRNhe24yATOxnFQtGRUmsR7mqxMupXCmd1vrw8h+rdKlQv1zW2q8nALAKNmnRXZJHxYQ1SFzb98fgg==", + "dependencies": { + "@react-types/overlays": "^3.8.5", + "@react-types/shared": "^3.22.1" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, "node_modules/@sideway/address": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz", @@ -3805,6 +4093,14 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/@swc/helpers": { + "version": "0.5.6", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.6.tgz", + "integrity": "sha512-aYX01Ke9hunpoCexYAgQucEpARGQ5w/cqHFrIR+e9gdKb1QWTsVJuTJ2ozQzIAxLyRQe/m+2RqzkyOOGiMKRQA==", + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@szmarczak/http-timer": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-5.0.1.tgz", @@ -8190,6 +8486,17 @@ "node": ">= 0.10" } }, + "node_modules/intl-messageformat": { + "version": "10.5.11", + "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.5.11.tgz", + "integrity": "sha512-eYq5fkFBVxc7GIFDzpFQkDOZgNayNTQn4Oufe8jw6YY6OHVw70/4pA3FyCsQ0Gb2DnvEJEMmN2tOaXUGByM+kg==", + "dependencies": { + "@formatjs/ecma402-abstract": "1.18.2", + "@formatjs/fast-memoize": "2.2.0", + "@formatjs/icu-messageformat-parser": "2.7.6", + "tslib": "^2.4.0" + } + }, "node_modules/invariant": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", diff --git a/package.json b/package.json index 006f259e78..467a75c318 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "build": "docusaurus build", "swizzle": "docusaurus swizzle", "deploy": "docusaurus deploy", - "clear": "docusaurus clear", + "clean": "docusaurus clear", "serve": "docusaurus serve", "write-translations": "docusaurus write-translations", "write-heading-ids": "docusaurus write-heading-ids", @@ -20,6 +20,9 @@ "@docusaurus/core": "^3.1.1", "@docusaurus/preset-classic": "^3.1.1", "@mdx-js/react": "^3.0.0", + "@react-aria/overlays": "^3.21.1", + "@react-aria/tooltip": "^3.7.2", + "@react-aria/utils": "^3.23.2", "clsx": "^2.0.0", "prism-react-renderer": "^2.3.0", "react": "^18.0.0", diff --git a/sidebars.ts b/sidebars.ts index 6542790a94..82247f6402 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -12,13 +12,159 @@ import type { SidebarsConfig } from '@docusaurus/plugin-content-docs'; */ const sidebars: SidebarsConfig = { // By default, Docusaurus generates a sidebar from the docs folder structure - // tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }], - getStartedSidebar: [{ type: 'autogenerated', dirName: '100-getting-started' }], - ormSidebar: [{ type: 'autogenerated', dirName: '200-orm' }], - accelerateSidebar: [{ type: 'autogenerated', dirName: '300-accelerate' }], - pulseSidebar: [{ type: 'autogenerated', dirName: '400-pulse' }], - platformSidebar: [{ type: 'autogenerated', dirName: '500-platform' }], - aboutSidebar: [{ type: 'autogenerated', dirName: '600-about' }], + index: ['index'], + gettingStarted: [ + { + type: "category", + collapsed: false, + collapsible: false, + label: "Get Started", + items: [ + "getting-started/index", + "getting-started/quickstart", + { + type: "category", + label: "Set up Prisma ORM", + collapsed: false, + items: [{ + type: 'autogenerated', + dirName: '100-getting-started/02-setup-prisma', + }] + } + ] + } + ], + ormSidebar: [{ + type: "category", + label: "ORM", + collapsed: false, + collapsible: false, + items: [ + 'orm/orm-index', + { + type: "category", + label: "Overview", + collapsed: false, + items : [{ + type: 'autogenerated', + dirName: '200-orm/050-overview', + }] + }, + { + type: "category", + label: "Prisma Schema", + collapsed: false, + items : [{ + type: 'autogenerated', + dirName: '200-orm/100-prisma-schema' + }] + }, + { + type: "category", + label: "Prisma Client", + collapsed: false, + items : [{ + type: 'autogenerated', + dirName: '200-orm/200-prisma-client' + }] + }, + { + type: "category", + label: "Prisma Migrate", + collapsed: false, + items : [{ + type: 'autogenerated', + dirName: '200-orm/300-prisma-migrate' + }] + }, + { + type: "category", + label: "Tools", + collapsed: false, + items : [{ + type: 'autogenerated', + dirName: '200-orm/400-tools' + }] + }, + { + type: "category", + label: "Reference", + collapsed: false, + items : [{ + type: 'autogenerated', + dirName: '200-orm/500-reference' + }] + }, + { + type: "category", + label: "More", + collapsed: false, + items : [{ + type: 'autogenerated', + dirName: '200-orm/800-more' + }] + } + ]}], + accelerateSidebar: [ + { + type: "category", + label: "Accelerate", + collapsed: false, + collapsible: false, + items: [{ type: 'autogenerated', dirName: '300-accelerate'}] + }, + { + type: "category", + label: "Platform", + collapsed: false, + collapsible: false, + items: [ + 'platform/about', + 'platform/maturity-levels', + 'platform/limits', + 'platform/support', + 'platform/index', + { + type: "category", + collapsed: false, + label: "Concepts", + items: [{ type: 'autogenerated', dirName: '500-platform/20-concepts'}] + } + ] + } + ], + pulseSidebar: [ + { + type: "category", + label: "Pulse", + collapsible: false, + collapsed: false, + items: [{ type: 'autogenerated', dirName: '400-pulse'}] + }, + { + type: "category", + label: "Platform", + collapsible: false, + collapsed: false, + items: [ + 'platform/about', + 'platform/maturity-levels', + 'platform/limits', + 'platform/support', + 'platform/index', + { + type: "category", + collapsed: false, + label: "Concepts", + items: [{ type: 'autogenerated', dirName: '500-platform/20-concepts'}] + } + ] + } + ], + aboutSidebar: [{ + type: 'autogenerated', + dirName: '600-about' + }], }; export default sidebars; diff --git a/src/components/GettingStarted/index.tsx b/src/components/GettingStarted/index.tsx index c58d8dcc3a..925dc3d527 100644 --- a/src/components/GettingStarted/index.tsx +++ b/src/components/GettingStarted/index.tsx @@ -1,32 +1,7 @@ import React, { useRef, useState } from 'react' import styled from 'styled-components' -// import { defaultTheme } from '../../theme' -// import { Icon } from '../Icon' -// import { Tooltip } from '../tooltip/Tooltip' - -// TODO: consider this https://david-gilbertson.medium.com/icons-as-react-components-de3e33cb8792 - -// TODO: this is filler -const Icon: React.FC<{ icon: string, btn?: string, size?: string }> = ({ icon }) => { - return -} - -// TODO: this is filler -const Tooltip: React.FC> = ({ children }) => { - return <>{children} -} - -// TODO: this is filler -const indigo = { - 100: '#EBF4FF', - 200: '#C3DAFE', - 300: '#A3BFFA', - 400: '#7F9CF5', - 500: '#667EEA', - 600: '#5A67D8', - 700: '#4C51BF', - 800: '#434190', -} +import { Icon } from '../Icon' +import { Tooltip } from '../tooltip/Tooltip' export const Database = ({ color, width, height }: any) => ( { export const Tab = styled.div` padding: 15px; background-color: var(--main-bgd-color); - border: 1px solid ${indigo[600]}; + border: 1px solid var(--indigo-600); border-radius: 0px 8px 8px 8px; font-family: Inter; font-size: 14px; @@ -194,16 +170,18 @@ const SquareWrapper = styled.a` cursor: pointer; &:hover { background: var(--main-bgd-color); - border-color: ${indigo[600]}; + border-color: var(--indigo-600); } &:active, &:focus { background: var(--code-inline-bgd-color); - border-color: ${indigo[700]}; + border-color: var(--indigo-700); } - svg { + img { width: 100%; height: 100%; + margin-bottom: 0; + object-fit: contain; } ` @@ -218,7 +196,7 @@ export const SquareLogo = ({ image, tech, url }: any) => { onMouseMove={() => setVisibleTooltip(true)} onMouseLeave={() => setVisibleTooltip(false)} > - {image} + {visibleTooltip && ( @@ -231,7 +209,8 @@ export const SquareLogo = ({ image, tech, url }: any) => { export const List = styled.div` display: grid; - gap: 12px; + gap: 16px; + margin-top: 16px; justify-content: space-between; grid-template-columns: repeat(3, auto); @media (min-width: 1240px) { diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx new file mode 100644 index 0000000000..8c5b72e698 --- /dev/null +++ b/src/components/Icon.tsx @@ -0,0 +1,48 @@ +import React, { useEffect, useRef, useState } from 'react' + +interface IconProps { + icon: string + color?: string + className?: string + size?: string + btn?: 'left' | 'right' + fit?: 'width' | 'height' +} + +export const Icon = ({ icon, color, className, size, btn, fit }: IconProps) => { + const iconRef = useRef(null) + const [font, setFontSize] = useState(0) + const [measure, setMeasure] = useState('vw') + useEffect(() => { + if (iconRef && iconRef.current) { + setFont() + } + }, [iconRef.current]) + + const setFont = () => { + const parentElement = iconRef.current.parentElement.getBoundingClientRect() + setFontSize( + (100 * parentElement[parentElement.width > parentElement.height ? 'height' : 'width']) / + window[parentElement.width > parentElement.height ? 'innerHeight' : 'innerWidth'] - + 0.6 + ) + setMeasure(parentElement.width > parentElement.height ? 'vh' : 'vw') + } + + useEffect(() => { + window.addEventListener('resize', setFont) + return () => window.removeEventListener('resize', setFont) + }, []) + return ( + + ) +} \ No newline at end of file diff --git a/src/components/tooltip/Tooltip.tsx b/src/components/tooltip/Tooltip.tsx new file mode 100644 index 0000000000..445b32eaee --- /dev/null +++ b/src/components/tooltip/Tooltip.tsx @@ -0,0 +1,165 @@ +import { useOverlayPosition } from '@react-aria/overlays' +import { useTooltip } from '@react-aria/tooltip' +import { mergeProps } from '@react-aria/utils' +import { useTooltipTriggerState } from '@react-stately/tooltip' +import React, { ReactPortal, useEffect, useLayoutEffect, useRef, useState } from 'react' +import { createPortal } from 'react-dom' +import { ArrowWrapper, TooltipWrapper } from './TooltipStyles' + +const ARROW_SIZE = 5 // in px +const SPACING = 8 + +type Position = 'top' | 'bottom' | 'left' | 'right' + +export type TooltipProps = React.PropsWithChildren<{ + /** An HTML ID attribute that will be attached to the the rendered component. Useful for targeting it from tests */ + id?: string + /** React Ref of an HTML Element to position this Tooltip against */ + target: React.RefObject + /** Position of the tooltip relative to the target. The Tooltip might still be flipped if there isn't enough space. */ + position?: Position +}> + +/** + * A tooltip is an overlay that is most commonly used to display a short description about an icon / image + */ + +export function Tooltip({ id, children, target, position }: TooltipProps): ReactPortal | null { + const state = useTooltipTriggerState({ isOpen: true }) + const { tooltipProps } = useTooltip({ id }, state) + + const ref = useRef(null) + + const { + overlayProps, + placement, + arrowProps: ariaArrowProps, + } = useOverlayPosition({ + targetRef: target as React.RefObject, + overlayRef: ref, + shouldFlip: true, + placement: position, + offset: SPACING + ARROW_SIZE, + }) + + // Calculate arrow position styles on your own, taking react-aria's position into account + // We cannot expect react-aria to position the arrow 100% correctly since it does not know what our tooltip looks like + const [arrowProps, setArrowProps] = useState>(ariaArrowProps) + + const checkForResize = () => { + // Figure out overlay dimensions so we can position the arrow accordingly + const overlayDimensions = ref.current?.getBoundingClientRect() + const targetDimensions = target.current?.getBoundingClientRect() + + if (!targetDimensions || !overlayDimensions) { + return + } + + const left = + Math.abs(overlayDimensions.left - targetDimensions.left) + + targetDimensions.width / 2 - + ARROW_SIZE + const top = + Math.abs(overlayDimensions.top - targetDimensions.top) + + targetDimensions.height / 2 - + ARROW_SIZE + + setArrowProps({ + ...arrowProps, + style: { + ...arrowProps.style, + ...(placement === 'top' + ? { + top: overlayDimensions.height, + left, + } + : undefined), + ...(placement === 'bottom' + ? { + left, + } + : undefined), + ...(placement === 'left' + ? { + left: overlayDimensions.width, + top, + } + : undefined), + ...(placement === 'right' + ? { + top, + left: 0, + } + : undefined), + }, + }) + } + useLayoutEffect(() => { + checkForResize() + }, [placement]) + + useEffect(() => { + window.addEventListener('resize', checkForResize) + return () => { + window.removeEventListener('resize', checkForResize) + } + }, []) + return typeof window === 'object' + ? createPortal( + + +
+ {children} +
+ , + document.body + ) + : null +} + +type ArrowProps = { + arrowProps: React.HTMLAttributes + position: Position + className?: string +} + +function Arrow({ arrowProps, position }: ArrowProps) { + return ( + + ) +} \ No newline at end of file diff --git a/src/components/tooltip/TooltipStyles.tsx b/src/components/tooltip/TooltipStyles.tsx new file mode 100644 index 0000000000..af700ef2e4 --- /dev/null +++ b/src/components/tooltip/TooltipStyles.tsx @@ -0,0 +1,56 @@ +import styled from 'styled-components' + +export const animationStyle: any = { + bottom: ` + animation: slide-top 0.1s cubic-bezier(0, 0, 0.2, 1) forwards; + @keyframes slide-top { + 0% { transform: translateY(-5px); opacity: 0 } + 25% { opacity: 1 } + 100% { transform: translateY(0px); opacity: 1 } + } + `, + top: ` + animation: slide-bottom 0.1s cubic-bezier(0, 0, 0.2, 1) forwards; + @keyframes slide-bottom { + 0% { transform: translateY(5px); opacity: 0 } + 25% { opacity: 1 } + 100% { transform: translateY(0px); opacity: 1 } + } + `, + right: ` + animation: slide-left 0.1s cubic-bezier(0, 0, 0.2, 1) forwards; + @keyframes slide-left { + 0% { transform: translateX(-5px); opacity: 0 } + 25% { opacity: 1 } + 100% { transform: translateX(0px); opacity: 1 } + } + `, + left: ` + animation: slide-right 0.1s cubic-bezier(0, 0, 0.2, 1) forward; + @keyframes slide-right { + 0% { transform: translateX(5px); opacity: 0 } + 25% { opacity: 1 } + 100% { transform: translateX(0px); opacity: 1 } + } + `, +} + +export const TooltipWrapper = styled.div<{ placement: string }>` + ${(props) => props.placement && animationStyle[props.placement]} + .children-wrapper { + display: flex; + align-items: center; + border-radius: 0.375rem; + padding: 0.375rem 0.75rem; + background: var(--gray-800); + color: white; + white-space: nowrap; + font-size: 0.875rem; /* 14px */ + line-height: 1.25rem; /* 20px */ + } +` + +export const ArrowWrapper = styled.div` + position: absolute; + border-color: #2d3748; +` \ No newline at end of file diff --git a/src/css/all.css b/src/css/all.css new file mode 100644 index 0000000000..df8c4cba80 --- /dev/null +++ b/src/css/all.css @@ -0,0 +1,1130 @@ +.fa { + font-family: var(--fa-style-family, 'Font Awesome 6 Pro'); + font-weight: var(--fa-style, 900); + } + + .fa, + .fa-classic, + .fa-sharp, + .fas, + .fa-solid, + .far, + .fa-regular, + .fasr, + .fal, + .fa-light, + .fasl, + .fat, + .fa-thin, + .fad, + .fa-duotone, + .fass, + .fa-sharp-solid, + .fab, + .fa-brands { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: var(--fa-display, inline-block); + font-style: normal; + font-variant: normal; + line-height: 1; + text-rendering: auto; + } + + .fas, + .fa-classic, + .fa-solid, + .far, + .fa-regular, + .fal, + .fa-light, + .fat, + .fa-thin { + font-family: 'Font Awesome 6 Pro'; + } + + .fab, + .fa-brands { + font-family: 'Font Awesome 6 Brands'; + } + + .fad, + .fa-classic.fa-duotone, + .fa-duotone { + font-family: 'Font Awesome 6 Duotone'; + } + + .fass, + .fasr, + .fasl, + .fa-sharp { + font-family: 'Font Awesome 6 Sharp'; + } + + .fass, + .fa-sharp { + font-weight: 900; + } + + .fa-1x { + font-size: 1em; + } + + .fa-2x { + font-size: 2em; + } + + .fa-3x { + font-size: 3em; + } + + .fa-4x { + font-size: 4em; + } + + .fa-5x { + font-size: 5em; + } + + .fa-6x { + font-size: 6em; + } + + .fa-7x { + font-size: 7em; + } + + .fa-8x { + font-size: 8em; + } + + .fa-9x { + font-size: 9em; + } + + .fa-10x { + font-size: 10em; + } + + .fa-2xs { + font-size: 0.625em; + line-height: 0.1em; + vertical-align: 0.225em; + } + + .fa-xs { + font-size: 0.75em; + line-height: 0.08333em; + vertical-align: 0.125em; + } + + .fa-sm { + font-size: 0.875em; + line-height: 0.07143em; + vertical-align: 0.05357em; + } + + .fa-lg { + font-size: 1.25em; + line-height: 0.05em; + vertical-align: -0.075em; + } + + .fa-xl { + font-size: 1.5em; + line-height: 0.04167em; + vertical-align: -0.125em; + } + + .fa-2xl { + font-size: 2em; + line-height: 0.03125em; + vertical-align: -0.1875em; + } + + .fa-fw { + text-align: center; + width: 1.25em; + } + + .fa-ul { + list-style-type: none; + margin-left: var(--fa-li-margin, 2.5em); + padding-left: 0; + } + + .fa-ul > li { + position: relative; + } + + .fa-li { + left: calc(var(--fa-li-width, 2em) * -1); + position: absolute; + text-align: center; + width: var(--fa-li-width, 2em); + line-height: inherit; + } + + .fa-border { + border-color: var(--fa-border-color, #eee); + border-radius: var(--fa-border-radius, 0.1em); + border-style: var(--fa-border-style, solid); + border-width: var(--fa-border-width, 0.08em); + padding: var(--fa-border-padding, 0.2em 0.25em 0.15em); + } + + .fa-pull-left { + float: left; + margin-right: var(--fa-pull-margin, 0.3em); + } + + .fa-pull-right { + float: right; + margin-left: var(--fa-pull-margin, 0.3em); + } + + .fa-beat { + -webkit-animation-name: fa-beat; + animation-name: fa-beat; + -webkit-animation-delay: var(--fa-animation-delay, 0s); + animation-delay: var(--fa-animation-delay, 0s); + -webkit-animation-direction: var(--fa-animation-direction, normal); + animation-direction: var(--fa-animation-direction, normal); + -webkit-animation-duration: var(--fa-animation-duration, 1s); + animation-duration: var(--fa-animation-duration, 1s); + -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite); + animation-iteration-count: var(--fa-animation-iteration-count, infinite); + -webkit-animation-timing-function: var(--fa-animation-timing, ease-in-out); + animation-timing-function: var(--fa-animation-timing, ease-in-out); + } + + .fa-bounce { + -webkit-animation-name: fa-bounce; + animation-name: fa-bounce; + -webkit-animation-delay: var(--fa-animation-delay, 0s); + animation-delay: var(--fa-animation-delay, 0s); + -webkit-animation-direction: var(--fa-animation-direction, normal); + animation-direction: var(--fa-animation-direction, normal); + -webkit-animation-duration: var(--fa-animation-duration, 1s); + animation-duration: var(--fa-animation-duration, 1s); + -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite); + animation-iteration-count: var(--fa-animation-iteration-count, infinite); + -webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1)); + animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1)); + } + + .fa-fade { + -webkit-animation-name: fa-fade; + animation-name: fa-fade; + -webkit-animation-delay: var(--fa-animation-delay, 0s); + animation-delay: var(--fa-animation-delay, 0s); + -webkit-animation-direction: var(--fa-animation-direction, normal); + animation-direction: var(--fa-animation-direction, normal); + -webkit-animation-duration: var(--fa-animation-duration, 1s); + animation-duration: var(--fa-animation-duration, 1s); + -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite); + animation-iteration-count: var(--fa-animation-iteration-count, infinite); + -webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); + animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); + } + + .fa-beat-fade { + -webkit-animation-name: fa-beat-fade; + animation-name: fa-beat-fade; + -webkit-animation-delay: var(--fa-animation-delay, 0s); + animation-delay: var(--fa-animation-delay, 0s); + -webkit-animation-direction: var(--fa-animation-direction, normal); + animation-direction: var(--fa-animation-direction, normal); + -webkit-animation-duration: var(--fa-animation-duration, 1s); + animation-duration: var(--fa-animation-duration, 1s); + -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite); + animation-iteration-count: var(--fa-animation-iteration-count, infinite); + -webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); + animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); + } + + .fa-flip { + -webkit-animation-name: fa-flip; + animation-name: fa-flip; + -webkit-animation-delay: var(--fa-animation-delay, 0s); + animation-delay: var(--fa-animation-delay, 0s); + -webkit-animation-direction: var(--fa-animation-direction, normal); + animation-direction: var(--fa-animation-direction, normal); + -webkit-animation-duration: var(--fa-animation-duration, 1s); + animation-duration: var(--fa-animation-duration, 1s); + -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite); + animation-iteration-count: var(--fa-animation-iteration-count, infinite); + -webkit-animation-timing-function: var(--fa-animation-timing, ease-in-out); + animation-timing-function: var(--fa-animation-timing, ease-in-out); + } + + .fa-shake { + -webkit-animation-name: fa-shake; + animation-name: fa-shake; + -webkit-animation-delay: var(--fa-animation-delay, 0s); + animation-delay: var(--fa-animation-delay, 0s); + -webkit-animation-direction: var(--fa-animation-direction, normal); + animation-direction: var(--fa-animation-direction, normal); + -webkit-animation-duration: var(--fa-animation-duration, 1s); + animation-duration: var(--fa-animation-duration, 1s); + -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite); + animation-iteration-count: var(--fa-animation-iteration-count, infinite); + -webkit-animation-timing-function: var(--fa-animation-timing, linear); + animation-timing-function: var(--fa-animation-timing, linear); + } + + .fa-spin { + -webkit-animation-name: fa-spin; + animation-name: fa-spin; + -webkit-animation-delay: var(--fa-animation-delay, 0s); + animation-delay: var(--fa-animation-delay, 0s); + -webkit-animation-direction: var(--fa-animation-direction, normal); + animation-direction: var(--fa-animation-direction, normal); + -webkit-animation-duration: var(--fa-animation-duration, 2s); + animation-duration: var(--fa-animation-duration, 2s); + -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite); + animation-iteration-count: var(--fa-animation-iteration-count, infinite); + -webkit-animation-timing-function: var(--fa-animation-timing, linear); + animation-timing-function: var(--fa-animation-timing, linear); + } + + .fa-spin-reverse { + --fa-animation-direction: reverse; + } + + .fa-pulse, + .fa-spin-pulse { + -webkit-animation-name: fa-spin; + animation-name: fa-spin; + -webkit-animation-direction: var(--fa-animation-direction, normal); + animation-direction: var(--fa-animation-direction, normal); + -webkit-animation-duration: var(--fa-animation-duration, 1s); + animation-duration: var(--fa-animation-duration, 1s); + -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite); + animation-iteration-count: var(--fa-animation-iteration-count, infinite); + -webkit-animation-timing-function: var(--fa-animation-timing, steps(8)); + animation-timing-function: var(--fa-animation-timing, steps(8)); + } + + @media (prefers-reduced-motion: reduce) { + .fa-beat, + .fa-bounce, + .fa-fade, + .fa-beat-fade, + .fa-flip, + .fa-pulse, + .fa-shake, + .fa-spin, + .fa-spin-pulse { + -webkit-animation-delay: -1ms; + animation-delay: -1ms; + -webkit-animation-duration: 1ms; + animation-duration: 1ms; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-transition-delay: 0s; + transition-delay: 0s; + -webkit-transition-duration: 0s; + transition-duration: 0s; + } + } + + @-webkit-keyframes fa-beat { + 0%, + 90% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 45% { + -webkit-transform: scale(var(--fa-beat-scale, 1.25)); + transform: scale(var(--fa-beat-scale, 1.25)); + } + } + + @keyframes fa-beat { + 0%, + 90% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 45% { + -webkit-transform: scale(var(--fa-beat-scale, 1.25)); + transform: scale(var(--fa-beat-scale, 1.25)); + } + } + + @-webkit-keyframes fa-bounce { + 0% { + -webkit-transform: scale(1, 1) translateY(0); + transform: scale(1, 1) translateY(0); + } + + 10% { + -webkit-transform: scale( + var(--fa-bounce-start-scale-x, 1.1), + var(--fa-bounce-start-scale-y, 0.9) + ) + translateY(0); + transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) + translateY(0); + } + + 30% { + -webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) + translateY(var(--fa-bounce-height, -0.5em)); + transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) + translateY(var(--fa-bounce-height, -0.5em)); + } + + 50% { + -webkit-transform: scale( + var(--fa-bounce-land-scale-x, 1.05), + var(--fa-bounce-land-scale-y, 0.95) + ) + translateY(0); + transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) + translateY(0); + } + + 57% { + -webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); + transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); + } + + 64% { + -webkit-transform: scale(1, 1) translateY(0); + transform: scale(1, 1) translateY(0); + } + + 100% { + -webkit-transform: scale(1, 1) translateY(0); + transform: scale(1, 1) translateY(0); + } + } + + @keyframes fa-bounce { + 0% { + -webkit-transform: scale(1, 1) translateY(0); + transform: scale(1, 1) translateY(0); + } + + 10% { + -webkit-transform: scale( + var(--fa-bounce-start-scale-x, 1.1), + var(--fa-bounce-start-scale-y, 0.9) + ) + translateY(0); + transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) + translateY(0); + } + + 30% { + -webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) + translateY(var(--fa-bounce-height, -0.5em)); + transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) + translateY(var(--fa-bounce-height, -0.5em)); + } + + 50% { + -webkit-transform: scale( + var(--fa-bounce-land-scale-x, 1.05), + var(--fa-bounce-land-scale-y, 0.95) + ) + translateY(0); + transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) + translateY(0); + } + + 57% { + -webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); + transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); + } + + 64% { + -webkit-transform: scale(1, 1) translateY(0); + transform: scale(1, 1) translateY(0); + } + + 100% { + -webkit-transform: scale(1, 1) translateY(0); + transform: scale(1, 1) translateY(0); + } + } + + @-webkit-keyframes fa-fade { + 50% { + opacity: var(--fa-fade-opacity, 0.4); + } + } + + @keyframes fa-fade { + 50% { + opacity: var(--fa-fade-opacity, 0.4); + } + } + + @-webkit-keyframes fa-beat-fade { + 0%, + 100% { + opacity: var(--fa-beat-fade-opacity, 0.4); + -webkit-transform: scale(1); + transform: scale(1); + } + + 50% { + opacity: 1; + -webkit-transform: scale(var(--fa-beat-fade-scale, 1.125)); + transform: scale(var(--fa-beat-fade-scale, 1.125)); + } + } + + @keyframes fa-beat-fade { + 0%, + 100% { + opacity: var(--fa-beat-fade-opacity, 0.4); + -webkit-transform: scale(1); + transform: scale(1); + } + + 50% { + opacity: 1; + -webkit-transform: scale(var(--fa-beat-fade-scale, 1.125)); + transform: scale(var(--fa-beat-fade-scale, 1.125)); + } + } + + @-webkit-keyframes fa-flip { + 50% { + -webkit-transform: rotate3d( + var(--fa-flip-x, 0), + var(--fa-flip-y, 1), + var(--fa-flip-z, 0), + var(--fa-flip-angle, -180deg) + ); + transform: rotate3d( + var(--fa-flip-x, 0), + var(--fa-flip-y, 1), + var(--fa-flip-z, 0), + var(--fa-flip-angle, -180deg) + ); + } + } + + @keyframes fa-flip { + 50% { + -webkit-transform: rotate3d( + var(--fa-flip-x, 0), + var(--fa-flip-y, 1), + var(--fa-flip-z, 0), + var(--fa-flip-angle, -180deg) + ); + transform: rotate3d( + var(--fa-flip-x, 0), + var(--fa-flip-y, 1), + var(--fa-flip-z, 0), + var(--fa-flip-angle, -180deg) + ); + } + } + + @-webkit-keyframes fa-shake { + 0% { + -webkit-transform: rotate(-15deg); + transform: rotate(-15deg); + } + + 4% { + -webkit-transform: rotate(15deg); + transform: rotate(15deg); + } + + 8%, + 24% { + -webkit-transform: rotate(-18deg); + transform: rotate(-18deg); + } + + 12%, + 28% { + -webkit-transform: rotate(18deg); + transform: rotate(18deg); + } + + 16% { + -webkit-transform: rotate(-22deg); + transform: rotate(-22deg); + } + + 20% { + -webkit-transform: rotate(22deg); + transform: rotate(22deg); + } + + 32% { + -webkit-transform: rotate(-12deg); + transform: rotate(-12deg); + } + + 36% { + -webkit-transform: rotate(12deg); + transform: rotate(12deg); + } + + 40%, + 100% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + } + + @keyframes fa-shake { + 0% { + -webkit-transform: rotate(-15deg); + transform: rotate(-15deg); + } + + 4% { + -webkit-transform: rotate(15deg); + transform: rotate(15deg); + } + + 8%, + 24% { + -webkit-transform: rotate(-18deg); + transform: rotate(-18deg); + } + + 12%, + 28% { + -webkit-transform: rotate(18deg); + transform: rotate(18deg); + } + + 16% { + -webkit-transform: rotate(-22deg); + transform: rotate(-22deg); + } + + 20% { + -webkit-transform: rotate(22deg); + transform: rotate(22deg); + } + + 32% { + -webkit-transform: rotate(-12deg); + transform: rotate(-12deg); + } + + 36% { + -webkit-transform: rotate(12deg); + transform: rotate(12deg); + } + + 40%, + 100% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + } + + @-webkit-keyframes fa-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + + @keyframes fa-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + + .fa-rotate-90 { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + } + + .fa-rotate-180 { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); + } + + .fa-rotate-270 { + -webkit-transform: rotate(270deg); + transform: rotate(270deg); + } + + .fa-flip-horizontal { + -webkit-transform: scale(-1, 1); + transform: scale(-1, 1); + } + + .fa-flip-vertical { + -webkit-transform: scale(1, -1); + transform: scale(1, -1); + } + + .fa-flip-both, + .fa-flip-horizontal.fa-flip-vertical { + -webkit-transform: scale(-1, -1); + transform: scale(-1, -1); + } + + .fa-rotate-by { + -webkit-transform: rotate(var(--fa-rotate-angle, none)); + transform: rotate(var(--fa-rotate-angle, none)); + } + + .fa-stack { + display: inline-block; + height: 2em; + line-height: 2em; + position: relative; + vertical-align: middle; + width: 2.5em; + } + + .fa-stack-1x, + .fa-stack-2x { + left: 0; + position: absolute; + text-align: center; + width: 100%; + z-index: var(--fa-stack-z-index, auto); + } + + .fa-stack-1x { + line-height: inherit; + } + + .fa-stack-2x { + font-size: 2em; + } + + .fa-inverse { + color: var(--fa-inverse, #fff); + } + + /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen + readers do not read off random characters that represent icons */ + .fa-arrow-up-right::before { + content: '\e09f'; + } + + .fa-arrows-rotate::before { + content: '\f021'; + } + + .fa-bars::before { + content: '\f0c9'; + } + + .fa-bolt::before { + content: '\f0e7'; + } + + .fa-book-open::before { + content: '\f518'; + } + + .fa-book-open-alt::before { + content: '\e0c0'; + } + + .fa-book-open-cover::before { + content: '\e0c0'; + } + + .fa-box::before { + content: '\f466'; + } + + .fa-chart-line-up::before { + content: '\e0e5'; + } + + .fa-chart-simple::before { + content: '\e473'; + } + + .fa-chevron-down::before { + content: '\f078'; + } + + .fa-circle-exclamation::before { + content: '\f06a'; + } + + .fa-comment::before { + content: '\f075'; + } + + .fa-comment-alt-edit::before { + content: '\f4a4'; + } + + .fa-comment-quote::before { + content: '\e14c'; + } + + .fa-database::before { + content: '\f1c0'; + } + + .fa-discord::before { + content: '\f392'; + } + + .fa-envelope::before { + content: '\f0e0'; + } + + .fa-exclamation-circle::before { + content: '\f06a'; + } + + .fa-file-binary::before { + content: '\e175'; + } + + .fa-folder-magnifying-glass::before { + content: '\e18b'; + } + + .fa-folder-search::before { + content: '\e18b'; + } + + .fa-github::before { + content: '\f09b'; + } + + .fa-globe::before { + content: '\f0ac'; + } + + .fa-grid-2::before { + content: '\e196'; + } + + .fa-hands-heart::before { + content: '\f4c3'; + } + + .fa-hands-holding-heart::before { + content: '\f4c3'; + } + + .fa-headset::before { + content: '\f590'; + } + + .fa-layer-group::before { + content: '\f5fd'; + } + + .fa-message-edit::before { + content: '\f4a4'; + } + + .fa-message-pen::before { + content: '\f4a4'; + } + + .fa-navicon::before { + content: '\f0c9'; + } + + .fa-refresh::before { + content: '\f021'; + } + + .fa-server::before { + content: '\f233'; + } + + .fa-signal-stream::before { + content: '\f8dd'; + } + + .fa-slack::before { + content: '\f198'; + } + + .fa-slack-hash::before { + content: '\f198'; + } + + .fa-slash::before { + content: '\f715'; + } + + .fa-star::before { + content: '\f005'; + } + + .fa-sync::before { + content: '\f021'; + } + + .fa-terminal::before { + content: '\f120'; + } + + .fa-triangle::before { + content: '\f2ec'; + } + + .fa-twitter::before { + content: '\f099'; + } + + .fa-user::before { + content: '\f007'; + } + + .fa-users-viewfinder::before { + content: '\e595'; + } + + .fa-youtube::before { + content: '\f167'; + } + + .fa-zap::before { + content: '\f0e7'; + } + + .sr-only, + .fa-sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; + } + + .sr-only-focusable:not(:focus), + .fa-sr-only-focusable:not(:focus) { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; + } + + .fab, + .fa-brands { + font-weight: 400; + } + + :root, + :host { + --fa-style-family-brands: 'Font Awesome 6 Brands'; + --fa-font-brands: normal 400 1em/1 'Font Awesome 6 Brands'; + } + + @font-face { + font-family: 'Font Awesome 6 Brands'; + font-style: normal; + font-weight: 400; + font-display: block; + src: url('/fonts/fa-brands-400.woff2') format('woff2'), + url('/fonts/fa-brands-400.woff2') format('woff2'); + } + @font-face { + font-family: 'Font Awesome 6 Pro'; + font-style: normal; + font-weight: 900; + font-display: block; + src: url('/fonts/fa-solid-900.woff2') format('woff2'), + url('/fonts/fa-solid-900.woff2') format('woff2'); + } + + .fa-rabbit-fast:before, + .fa-rabbit-running:before { + content: '\f709'; + } + + .fa-discord::before { + content: '\f392'; + } + + .fa-github::before { + content: '\f09b'; + } + + .fa-slack::before { + content: '\f198'; + } + + .fa-slack-hash::before { + content: '\f198'; + } + + .fa-twitter::before { + content: '\f099'; + } + + .fa-youtube::before { + content: '\f167'; + } + + .fa-x-twitter::before { + content: '\e61b'; + } + + /*! + * Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com + * License - https://fontawesome.com/license (Commercial License) + * Copyright 2023 Fonticons, Inc. + */ + :root, + :host { + --fa-style-family-classic: 'Font Awesome 6 Pro'; + --fa-font-light: normal 300 1em/1 'Font Awesome 6 Pro'; + } + + @font-face { + font-family: 'Font Awesome 6 Pro'; + font-style: normal; + font-weight: 300; + font-display: block; + src: url('/fonts/fa-light-300.woff2') format('woff2'), + url('/fonts/fa-light-300.woff2') format('woff2'); + } + + .fal, + .fa-light { + font-weight: 300; + } + + /*! + * Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com + * License - https://fontawesome.com/license (Commercial License) + * Copyright 2023 Fonticons, Inc. + */ + :root, + :host { + --fa-style-family-classic: 'Font Awesome 6 Pro'; + --fa-font-regular: normal 400 1em/1 'Font Awesome 6 Pro'; + } + + @font-face { + font-family: 'Font Awesome 6 Pro'; + font-style: normal; + font-weight: 400; + font-display: block; + src: url('/fonts/fa-regular-400.woff2') format('woff2'), + url('/fonts/fa-regular-400.woff2') format('woff2'); + } + + .far, + .fa-regular { + font-weight: 400; + } + .fa-arrow-right:before { + content: '\f061'; + } + +/** Inter Regular */ +@font-face { + font-family: 'Inter'; + font-weight: 400; + font-style: normal; + font-display: swap; + src: url('/fonts/Inter-Regular.woff2'), url('/fonts/Inter-Regular.woff2'); +} + +/** Inter Medium */ +@font-face { + font-family: 'Inter'; + font-weight: 500; + font-style: normal; + font-display: swap; + src: url('/fonts/Inter-Medium.woff2'), url('/fonts/Inter-Medium.woff2'); +} + +/** Inter Italic */ +@font-face { + font-family: 'Inter'; + font-weight: 400; + font-style: italic; + font-display: swap; + src: url('/fonts/Inter-Italic.woff2'), url('/fonts/Inter-Italic.woff2'); +} + +/** Inter SemiBold */ +@font-face { + font-family: 'Inter'; + font-weight: 600; + font-style: normal; + font-display: swap; + src: url('/fonts/Inter-SemiBold.woff2'), url('/fonts/Inter-SemiBold.woff2'); +} + +/** Inter SemiBold Italic */ +@font-face { + font-family: 'Inter'; + font-weight: 600; + font-style: italic; + font-display: swap; + src: url('/fonts/Inter-SemiBoldItalic.woff2'), url('/fonts/Inter-SemiBoldItalic.woff2'); +} + +/** Inter Bold */ +@font-face { + font-family: 'Inter'; + font-weight: 700; + font-style: normal; + font-display: swap; + src: url('/fonts/Inter-Bold.woff2'), url('/fonts/Inter-Bold.woff2'); +} + +/** Inter Bold Italic */ +@font-face { + font-family: 'Inter'; + font-weight: 700; + font-style: italic; + font-display: swap; + src: url('/fonts/Inter-BoldItalic.woff2'), url('/fonts/Inter-BoldItalic.woff2'); +} + +/** Barlow Bold */ +@font-face { + font-family: 'Barlow'; + font-weight: 600; + font-style: normal; + font-display: swap; + src: url('/fonts/Barlow-Bold.woff2'), url('/fonts/Barlow-Bold.woff2'); +} + +@font-face { + font-family: 'JetBrainsMono'; + font-weight: 400; + font-style: normal; + font-display: swap; + src: url('/fonts/JetBrainsMono-Regular.woff2'), url('/fonts/JetBrainsMono-Regular.woff2'); +} \ No newline at end of file diff --git a/src/css/custom.css b/src/css/custom.css index 7fef696b1d..6abee423dc 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -4,31 +4,9 @@ * 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); +.footer--dark { + --ifm-footer-background-color: rgb(26, 32, 44); } - .header-github-link::before { content: ''; width: 24px; @@ -41,4 +19,751 @@ .header-github-link:hover::before { background-color: var(--ifm-navbar-link-hover-color); +} +.menu { + font-family: Inter, sans-serif; + padding-top: 0px !important; + padding-left: 32px !important; + margin-left: -14px !important; + scrollbar-width: auto; +} + +.theme-doc-sidebar-container { + border-right: none !important; +} + +.menu__link { + font-size: 0.875rem; + line-height: 1.25; + margin-bottom: 0.75rem; + margin-left: 8px; + padding: 0; + position: relative; + color: rgb(113, 128, 150) !important; +} +.menu__link--sublist { + margin-bottom: 0; +} +.menu__link:hover { + color: rgb(26, 32, 44) !important; + background: none; +} + +.theme-doc-sidebar-item-category-level-1 > .menu__list { + border-left: none; + padding-left: 0; +} + +.theme-doc-sidebar-item-category-level-1.menu__list-item { + margin-top: 1.25rem !important; + margin-bottom: 0.75rem; +} + +.menu__link--sublist-caret { + font-weight: bold; + font-size: 0.75rem; + line-height: 0.875rem; + color: var(--ifm-color-content) !important; + letter-spacing: 0.02em; +} + +.theme-doc-sidebar-item-category:not(.theme-doc-sidebar-item-category-level-1) .menu__link--sublist-caret { + text-transform: uppercase; + margin-top: 8px; +} + +.theme-doc-sidebar-item-category-level-2 > ul { + border-left: none; +} +.menu__list-item-collapsible > a:not([href]) { + font-size: 1.125rem; + font-weight: 600; + letter-spacing: -0.01em; + color: var(--ifm-color-content) !important; + margin-bottom: 0; +} + +.menu__list { + border-left: 2px solid rgb(226, 232, 240); + margin-top: 8px; +} + +.theme-doc-sidebar-menu { + border-left: none; +} + +.menu__list-item-collapsible:hover, .menu__list-item-collapsible--active, .menu__link--active:not(.menu__link--sublist), .menu__link--active:not(.menu__link--sublist):hover { + background: none; +} +.menu__list-item { + margin-top: 0 !important; +} + +.menu__list-item-collapsible { + flex-direction: row-reverse; + margin-bottom: 0.75rem; + align-items: center; +} +.menu__caret:hover { + background: none; +} +.menu__caret::before { + background-position: center; + background-repeat: no-repeat; + background-size: contain; + width: 6px; + height: 6px; +} + +.menu__link--sublist-caret:after { + display: none; +} + +.menu__caret { + padding: 0; +} + +html { + font-family: 'Inter', sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + box-sizing: border-box; + overflow-y: scroll; + /* Issue 894 */ + font-size: 16px; +} + +::selection, +pre[class*='language-']::selection, +pre[class*='language-'] ::selection, +code[class*='language-']::selection, +code[class*='language-'] ::selection { + color: var(--white-color); + background: var(--selection-bgd-color); +} + +pre { + margin: 0; +} + +a { + color: var(--link-color); +} + +h3 { + display: block; + margin-block-start: 1em; + margin-block-end: 1em; +} + +h4 { + margin-block-start: 1.33em; + margin-block-end: 1.33em; +} + +h5 { + margin-block-start: 1.67em; + margin-block-end: 1.67em; +} + +h6 { + margin-block-start: 2.33em; + margin-block-end: 2.33em; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin-inline-start: 0px; + margin-inline-end: 0px; +} + +html { + line-height: unset; + -webkit-text-size-adjust: unset; +} + +body { + font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI'; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: 'Inter', sans-serif; + font-weight: 500; +} + +h1.inline-code { + display: inline-block; +} + +h2 { + margin: 0; + margin-block-end: 0; + margin-block-start: 0; +} + +section h2, +section h3, +section h4, +section h5, +section h6 { + font-weight: 600; + text-decoration: none; + color: var(--main-font-color); +} + +section h2 { + margin-bottom: 0; +} + +.title-link { + /* margin-left: -24px; + margin-right: 5px; */ + opacity: 0; +} + +h2:hover .title-link, +h3:hover .title-link, +h4:hover .title-link, +h5:hover .title-link, +h6:hover .title-link { + opacity: 1; +} + +h2 code, +h3 code, +h4 code, +h5 code, +h6 code { + font-size: inherit; +} + +* { + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +img { + max-width: 100%; + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; +} + +p { + margin: 1rem 0; +} + +p, +li { + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 24px; +} + +kbd { + background: var(--white-color); + box-shadow: 0px 1px 1px rgba(47, 55, 71, 0.6), 0px 1px 4px rgba(47, 55, 71, 0.2); + border-bottom: 1px solid rgba(47, 55, 71, 0.2); + border-radius: 4px; + padding: 2px 6px; + vertical-align: baseline; + font-size: 14px !important; + font-family: 'JetBrainsMono' !important; +} + +table { + width: 100%; + word-break: normal; + border: 1px solid var(--border-color); + border-radius: 8px; + border-spacing: 0px; + margin: 0 0px 20px; + white-space: inherit; +} + +table * { + font-size: 13px; +} + +table th { + text-align: left; + font-size: 14px; + font-weight: 600; + padding: 12px; +} + +table td { + padding: 12px; + border-top: 1px solid var(--border-color); + vertical-align: top; +} + +table code { + white-space: nowrap; +} + +blockquote { + font-family: Inter; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + color: var(--code-inner-color); + padding-left: 2rem; + padding-bottom: 8px; + padding-bottom: 8px; + margin: 2rem 0px; + position: relative; +} + +blockquote pre { + font-weight: normal; +} + +blockquote::before { + content: ''; + position: absolute; + width: 8px; + height: 100%; + left: 0px; + background: var(--code-bgd-color); + border-radius: 5px; +} + +blockquote code { + color: var(--code-inner-color); +} + +blockquote p { + margin: 0; +} + +hr { + margin: 2rem 0; + margin-left: -40px; + margin-right: -40px; + border: 0; + height: 1px; + background: var(--border-color); +} + + +.indigo:hover, .navbar__link--active.indigo { + color: var(--navbar-indigo-color); + + /* --navbar-teal-color: rgb(24, 115, 103); + --navbar-tab-bg: rgb(237, 242, 247); + --navbar-indigo-color: rgb(76, 81, 191); */ +} + +.teal:hover, .navbar__link--active.teal { + color: var(--navbar-teal-color); +} + +.navbar__item { + padding: 8px; + border-radius: 8px; +} +.navbar__link--active { + background: var(--navbar-tab-bg); +} + +.navbar__items { + gap: 16px; +} + +.logo-link { + font-family: Inter, sans-serif; + font-size: 22px; + font-style: normal; + font-weight: 500; + padding-left: 22px; + position: relative; + line-height: 100%; + color: var(--ifm-navbar-link-color); + transition: transform 0.18s ease-out 0s; + background: transparent; + border: none; + padding: 0px; + cursor: pointer; + position: absolute; + left: 140px; + margin-top: 2px; +} + +.logo-link:hover { + transform: translateY(-2px); + color: var(--main-font-color); +} + + +.navbar__logo { + width: var(--doc-sidebar-width); + padding-right: 53px; + margin-right: -1rem; + + @media (prefers-color-scheme: dark) { + filter: brightness(100); + } + +} +@media (prefers-color-scheme: dark) { + :root[data-theme='light'] .navbar__logo { + filter: none; + } +} + + +.first-item { + margin-left: -16px; +} + + +.menu::-webkit-scrollbar { + width: 0.4rem; + height: 0.4rem; + background-color: transparent; +} +.menu::-webkit-scrollbar-thumb { + border-radius: 10px; + background-color: #c5c6c8; +} +.menu::-webkit-scrollbar-track { + border-radius: 10px; + background-color: transparent; +} +.menu::-webkit-scrollbar-corner { + background-color: transparent; + border-color: transparent; +} + +.breadcrumbs__item { + cursor: default; +} + +.breadcrumbs__link { + padding: 0; + font-size: 16px; + line-height: 1.6rem; + font-weight: normal; + margin: 0px; + color: rgb(113, 128, 150) !important; +} + +.breadcrumbs__item > .breadcrumbs__link:hover { + background: none; +} +.breadcrumbs__item--active > .breadcrumbs__link { + background: none; + padding: 0; +} +.navbar { + box-shadow: none; + border-bottom: 1px solid rgb(226, 232, 240); + padding-left: 16px; + padding-right: 55px; +} +.breadcrumbs__item:not(:last-child):after { + background: var(--ifm-breadcrumb-separator) center no-repeat; + opacity: 1; + height: 20px; + transform: translateY(5px); + filter: none; +} + +.breadcrumbs__item[itemscope] > .breadcrumbs__link:hover { + text-decoration: underline; + background: none; + cursor: pointer; + color: rgb(74, 85, 104) !important; +} + +.breadcrumbs__link > svg { + top: 4px; +} + +/* FOOTER */ + +footer > .container { + padding: 40px 1.5rem 100px; + max-width: 1248px; + margin: auto; + width: 100%; +} + +.footer__title { + text-transform: uppercase; + font-weight: 400; + font-size: 1rem; + color: white; + letter-spacing: 0.08em; + margin-top: 0px; + margin-bottom: 1rem; +} + +.footer__item { + color: white; + font-size: 1.125rem; + display: flex; + cursor: pointer; + font-weight: 500; + box-sizing: border-box; + text-decoration: none; + line-height: 1.38889; + padding: 1rem 0px; + @media only screen and (min-width: 940px) { + padding: 0.5rem 0px; + } +} + +.footer__link-item { + line-height: unset; + text-decoration: none; +} + +.footer__link-item:hover { + text-decoration: none; + color: var(--brand-primary); +} + +.internal > svg { + display: none; +} + +.footer__links { + position: relative; + margin: 0; +} + +.footer__bottom { + height: calc(var(--footer-bottom-height) + 64px); + margin-top: 64px; + padding-top: 64px; + border-top: 1px solid white; +} + +.footer__bottom > div:not(.footer__copyright) { + margin-bottom: 0 !important; + height: 100%; + display: flex; + align-items: center; + justify-content: flex-start; + height: 55px; +} + +.footer__bottom > div:not(.footer__copyright) > a { + opacity: 1; +} + + +.footer__col:last-child { + position: absolute; + top: calc(100% + 128px); + height: var(--footer-bottom-height); + display: flex; + align-items: center; + justify-content: flex-end; + width: auto; + right: 0; +} + +.footer__col:last-child > .footer__title { + display: none; +} + +.footer__col:last-child > ul { + display: flex; + gap: 20px; + font-size: 1.375rem; + color: white; +} +.footer__col:last-child .footer__item a { + font-size: 1.375rem; + color: white; +} +.footer__col:last-child .footer__item a:hover { + color: var(--brand-primary); + text-decoration: none; +} + + +.footer__copyright { + text-align: left; +} + +.footer__logo { + margin: 0 0 1.45rem; +} + +.navbar__items--right { + padding-right: 90px; + flex-direction: row-reverse; + position: relative; +} + +.navbar-login-btn { + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); +} + +.teal-btn { + padding: 6px 12px; + border-radius: 4px; + font-family: Barlow; + font-size: 14px; + font-weight: 700; + line-height: 20px; + background-color: #16A394; + letter-spacing: 0em; + border: 1px solid rgb(22, 163, 148); + transition: all var(--ifm-transition-fast) var(--ifm-transition-timing-default); + text-align: center; + color: white; +} + +.teal-btn:hover { + border: 1px solid rgb(24, 115, 103); + background-color: rgb(24, 115, 103); + color: white; +} + + +/* TABS */ +.tabs-container { + width: min-content; +} +.tabs-container > div { + padding: 32px; + margin-top: 0 !important; + background-color: var(--main-bgd-color); + border: 1px solid rgb(90, 103, 216); + border-radius: 0px 8px 8px; + font-family: Inter; + font-size: 14px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0em; + text-align: left; +} + +.tabs-container p { + margin: 0; +} + +.tabs__item { + padding: 6px 12px; + margin-right: 4px; + font-weight: 600; + font-size: 0.875rem; + align-items: center; + border-radius: 4px 4px 0px 0px !important; + background-color: var(--border-color); + border: none !important; + color: rgb(113, 128, 150); + cursor: pointer; + -webkit-box-align: center; + align-items: center; + display: flex; +} + +.tabs__item:hover { + background: var(--border-color); +} + +.tabs__item--active { + background-color: rgb(90, 103, 216); + color: var(--white-color); +} + +.tabs__item--active:hover { + background-color: rgb(90, 103, 216); +} + +.table-of-contents { + border: none; +} +.table-of-contents li { + padding: 0.75rem 0px 0px; + margin: 0; + line-height: 0; +} + +.table-of-contents::before { + content: "On this page"; + font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-style: normal; + font-weight: bold; + font-size: 0.875rem; + line-height: 100%; + letter-spacing: 0.01em; + text-transform: uppercase; + color: var(--ifm-color-content); + margin: 0px; +} + +.table-of-contents__link { + text-decoration: none; + color: rgb(113, 128, 150); + font-size: 0.875rem; + line-height: 1rem; + background-image: linear-gradient(currentColor,var(--dark-color)); + background-position: 0% 100%; + display: inline; + width: fit-content; + background-repeat: no-repeat; + background-size: 0% 2px; + transition: background-size 0.7s ease 0s; + @media (prefers-color-scheme: dark) { + color: rgb(160, 174, 192); + } +} + +.table-of-contents__link--active { + background-size: 100% 2px; +} + +.DocSearch-Button:hover { + background: var(--docsearch-searchbox-background); +} + +.theme-doc-sidebar-item-link-level-2:first-of-type { + display: none; +} + +.main-wrapper { + background-color: var(--ifm-background-color); + /* background-color: var(--main-bgd-color); */ +} + +.pagination-nav__link { + border: 1px solid var(--border-color); +} + +.pagination-nav__sublabel { + color: var(--ifm-color-content); +} +.pagination-nav__link:hover { + background: var(--main-bgd-color); +} + +.theme-doc-markdown > p { + color: var(--ifm-color-content); } \ No newline at end of file diff --git a/src/css/theming.css b/src/css/theming.css new file mode 100644 index 0000000000..62491e2bca --- /dev/null +++ b/src/css/theming.css @@ -0,0 +1,421 @@ + +/* You can override the default Infima variables here. */ +/* PRIMITIVES */ +:root { + --ifm-color-primary: #2e8555; + --ifm-color-primary-dark: #29784c; + --ifm-color-primary-darker: #277148; + --main-font-color: #2d3748; + --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); + --ifm-menu-link-sublist-icon: url("/icons/triangle-right.svg"); + --ifm-breadcrumb-separator: url("/icons/breadcrumb.svg"); + --navbar-teal-color: rgb(24, 115, 103); + --navbar-tab-bg: rgb(237, 242, 247); + --navbar-indigo-color: rgb(76, 81, 191); + --ifm-navbar-height: 80px; + --ifm-color-content: rgb(26, 32, 44); + --ifm-breadcrumb-spacing: 4px; + --ifm-navbar-link-color: rgb(45, 55, 72); + --ifm-footer-background-color: rgb(26, 32, 44); + --ifm-navbar-link-hover-color: rgb(45, 55, 72); + --ifm-link-hover-decoration: none; + --ifm-hover-overlay: var(--indigo-700); + --ifm-color-primary: var(--indigo-600); + --ifm-heading-color: var(--ifm-color-content); + + + --main-font-color: #2d3748; + --main-bgd-color: #f7fafc; + --header-bg-color: #ffffff; + --selection-bgd-color: #0c344b; + --white-color: #ffffff; + --link-color: #3182ce; + --border-color: #e2e8f0; + --code-bgd-color: #f6f8fa; + --code-inline-bgd-color: #edf2f7; + --list-bullet-color: #a0aec0; + --search-highlight-bg-color: #ebf8ff; + --tag-media-color: #2d3748; + --gradient1-color: #2f3747; + --gradient2-color: #0d0f14; + --header-btn-color: #4a5568; + --ifm-footer-background-color: rgb(26, 32, 44); + --footer-bottom-height: 75px; + --ifm-link-hover-color: var(--link-color); + --brand-primary: rgb(90, 103, 216); + --ifm-hover-overlay: var(--indigo-700); + /* Code blocks */ + --code-inner-color: #718096; + --code-token1-color: #d5408c; + --code-token2-color: #805ad5; + --code-token3-color: #319795; + --code-token4-color: #dd6b21; + --code-token5-color: #690; + --code-token6-color: #9a6e3a; + --code-token7-color: #e90; + --code-linenum-color: #cbd5e0; + --code-added-color: #47bb78; + --code-added-bg-color: #d9f4e6; + --code-deleted-color: #e53e3e; + --code-deleted-bg-color: #f5e4e7; + --code-highlight-color: #a0aec0; + --code-highlight-bg-color: #e2e8f0; + --code-edit-bg-color: #c3dafe; + --code-result-bg-color: #e7edf3; + --ifm-color-primary: var(--indigo-600); + /* Buttons */ + --red-color: #ff4f56; + --green-color: #15bd76; + --grey-color: #3d556b; + --grey-bg-color: #8fa6b2; + --dark-color: rgb(12, 52, 75); + + margin: 0; + font-family: 'Inter', sans-serif; + font-weight: normal; + word-wrap: break-word; + color: var(--main-font-color); + background-color: var(--white-color); + /* Colors */ + --indigo-100: #EBF4FF; + --indigo-200: #C3DAFE; + --indigo-300: #A3BFFA; + --indigo-400: #7F9CF5; + --indigo-500: #667EEA; + --indigo-600: #5A67D8; + --indigo-700: #4C51BF; + --indigo-700: #434190; + + --gray-100: #F7FAFC; + --gray-200: #EDF2F7; + --gray-300: #E2E8F0; + --gray-400: #CBD5E0; + --gray-500: #A0AEC0; + --gray-600: #718096; + --gray-700: #4A5568; + --gray-800: #2D3748; + --gray-900: #1A202C; +} + +/* For readability concerns, you should choose a lighter palette in dark mode. */ +/* PRIMITES WITH THEME DEFINED BY TOGGLER */ +[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); + --navbar-teal-color: rgb(113, 232, 223); + --navbar-tab-bg: rgb(45, 55, 72); + --navbar-indigo-color: rgb(127, 156, 245); + --ifm-color-content: rgb(247, 250, 252); + --ifm-navbar-link-color: #e2e8f0; + --ifm-footer-background-color: rgb(26, 32, 44); + --ifm-hover-overlay: var(--indigo-700); + /* Generic */ + --main-font-color: #e2e8f0; + --main-bgd-color: #1a202c; + --border-color: #2d3748; + --header-bg-color: #1a202c; + --selection-bgd-color: #0c344b; + --white-color: #ffffff; + --link-color: #7f9cf5; + --ifm-link-hover-color: var(--link-color); + --code-bgd-color: #2d3748; + --code-inline-bgd-color: #2d3748; + --list-bullet-color: #a0aec0; + --search-highlight-bg-color: #ebf8ff; + --tag-media-color: #2d3748; + --gradient1-color: #2f3747; + --gradient2-color: #0d0f14; + --header-btn-color: #4a5568; + --navbar-teal-color: rgb(113, 232, 223); + --navbar-tab-bg: rgb(45, 55, 72); + --navbar-indigo-color: rgb(127, 156, 245); + --ifm-color-content: rgb(247, 250, 252); + --ifm-navbar-background-color: #1a202c; + --ifm-navbar-link-color: #e2e8f0; + /* Code blocks */ + --code-inner-color: #718096; + --code-token1-color: #d5408c; + --code-token2-color: #805ad5; + --code-token3-color: #319795; + --code-token4-color: #dd6b21; + --code-token5-color: #690; + --code-token6-color: #9a6e3a; + --code-token7-color: #e90; + --code-linenum-color: #cbd5e0; + --code-added-color: #47bb78; + --code-added-bg-color: #d9f4e6; + --code-deleted-color: #e53e3e; + --code-deleted-bg-color: #f5e4e7; + --code-highlight-color: #a0aec0; + --code-highlight-bg-color: #4a5568; + --code-edit-bg-color: #c3dafe; + --code-result-bg-color: #e7edf3; + /* Buttons */ + --red-color: #ff4f56; + --green-color: #15bd76; + --grey-color: #3d556b; + --grey-bg-color: #8fa6b2; + --dark-color: rgb(12, 52, 75); +} + +main { + padding-top: 16px !important; + padding-left: 32px !important; +} + +/* PRIMITES WITH THEME DEFINED */ +@media (prefers-color-scheme: dark) { + /* Theme: Dark OS + Light docs = Light docs */ + :root[data-theme='light'] { + --ifm-color-primary: #2e8555; + --ifm-background-color: #fff; + --ifm-color-primary-dark: #29784c; + --ifm-color-primary-darker: #277148; + --main-font-color: #2d3748; + --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); + --ifm-menu-link-sublist-icon: url("/icons/triangle-right.svg"); + --ifm-breadcrumb-separator: url("/icons/breadcrumb.svg"); + --navbar-teal-color: rgb(24, 115, 103); + --navbar-tab-bg: rgb(237, 242, 247); + --navbar-indigo-color: rgb(76, 81, 191); + --ifm-navbar-height: 80px; + --ifm-color-content: rgb(26, 32, 44); + --ifm-breadcrumb-spacing: 4px; + --ifm-navbar-link-color: rgb(45, 55, 72); + --ifm-footer-background-color: rgb(26, 32, 44); + --ifm-navbar-link-hover-color: rgb(45, 55, 72); + --ifm-link-hover-decoration: none; + --ifm-hover-overlay: var(--indigo-700); + --ifm-color-primary: var(--indigo-600); + --ifm-heading-color: var(--ifm-color-content); + --ifm-navbar-background-color: #fff; + --docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,0.4); + + --main-font-color: #2d3748; + --main-bgd-color: #f7fafc; + --header-bg-color: #ffffff; + --selection-bgd-color: #0c344b; + --white-color: #ffffff; + --link-color: #3182ce; + --border-color: #e2e8f0; + --code-bgd-color: #f6f8fa; + --code-inline-bgd-color: #edf2f7; + --list-bullet-color: #a0aec0; + --search-highlight-bg-color: #ebf8ff; + --tag-media-color: #2d3748; + --gradient1-color: #2f3747; + --gradient2-color: #0d0f14; + --header-btn-color: #4a5568; + --ifm-footer-background-color: rgb(26, 32, 44); + --footer-bottom-height: 75px; + --ifm-link-hover-color: var(--link-color); + --brand-primary: rgb(90, 103, 216); + --ifm-hover-overlay: var(--indigo-700); + /* Code blocks */ + --code-inner-color: #718096; + --code-token1-color: #d5408c; + --code-token2-color: #805ad5; + --code-token3-color: #319795; + --code-token4-color: #dd6b21; + --code-token5-color: #690; + --code-token6-color: #9a6e3a; + --code-token7-color: #e90; + --code-linenum-color: #cbd5e0; + --code-added-color: #47bb78; + --code-added-bg-color: #d9f4e6; + --code-deleted-color: #e53e3e; + --code-deleted-bg-color: #f5e4e7; + --code-highlight-color: #a0aec0; + --code-highlight-bg-color: #e2e8f0; + --code-edit-bg-color: #c3dafe; + --code-result-bg-color: #e7edf3; + --ifm-color-primary: var(--indigo-600); + /* Buttons */ + --red-color: #ff4f56; + --green-color: #15bd76; + --grey-color: #3d556b; + --grey-bg-color: #8fa6b2; + --dark-color: rgb(12, 52, 75); + + margin: 0; + font-family: 'Inter', sans-serif; + font-weight: normal; + word-wrap: break-word; + color: var(--main-font-color); + background-color: var(--white-color); + /* Colors */ + --indigo-100: #EBF4FF; + --indigo-200: #C3DAFE; + --indigo-300: #A3BFFA; + --indigo-400: #7F9CF5; + --indigo-500: #667EEA; + --indigo-600: #5A67D8; + --indigo-700: #4C51BF; + --indigo-700: #434190; + + --gray-100: #F7FAFC; + --gray-200: #EDF2F7; + --gray-300: #E2E8F0; + --gray-400: #CBD5E0; + --gray-500: #A0AEC0; + --gray-600: #718096; + --gray-700: #4A5568; + --gray-800: #2D3748; + --gray-900: #1A202C; + } + [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); + --navbar-teal-color: rgb(113, 232, 223); + --navbar-tab-bg: rgb(45, 55, 72); + --navbar-indigo-color: rgb(127, 156, 245); + --ifm-color-content: rgb(247, 250, 252); + --ifm-navbar-link-color: #e2e8f0; + --ifm-footer-background-color: rgb(26, 32, 44); + --ifm-hover-overlay: var(--indigo-700); + /* Generic */ + --main-font-color: #e2e8f0; + --main-bgd-color: #1a202c; + --border-color: #2d3748; + --header-bg-color: #1a202c; + --selection-bgd-color: #0c344b; + --white-color: #ffffff; + --link-color: #7f9cf5; + --ifm-link-hover-color: var(--link-color); + --code-bgd-color: #2d3748; + --code-inline-bgd-color: #2d3748; + --list-bullet-color: #a0aec0; + --search-highlight-bg-color: #ebf8ff; + --tag-media-color: #2d3748; + --gradient1-color: #2f3747; + --gradient2-color: #0d0f14; + --header-btn-color: #4a5568; + --navbar-teal-color: rgb(113, 232, 223); + --navbar-tab-bg: rgb(45, 55, 72); + --navbar-indigo-color: rgb(127, 156, 245); + --ifm-color-content: rgb(247, 250, 252); + --ifm-navbar-background-color: #1a202c; + --ifm-navbar-link-color: #e2e8f0; + /* Code blocks */ + --code-inner-color: #718096; + --code-token1-color: #d5408c; + --code-token2-color: #805ad5; + --code-token3-color: #319795; + --code-token4-color: #dd6b21; + --code-token5-color: #690; + --code-token6-color: #9a6e3a; + --code-token7-color: #e90; + --code-linenum-color: #cbd5e0; + --code-added-color: #47bb78; + --code-added-bg-color: #d9f4e6; + --code-deleted-color: #e53e3e; + --code-deleted-bg-color: #f5e4e7; + --code-highlight-color: #a0aec0; + --code-highlight-bg-color: #4a5568; + --code-edit-bg-color: #c3dafe; + --code-result-bg-color: #e7edf3; + /* Buttons */ + --red-color: #ff4f56; + --green-color: #15bd76; + --grey-color: #3d556b; + --grey-bg-color: #8fa6b2; + --dark-color: rgb(12, 52, 75); + } +} + +html[data-theme='dark'] { + --ifm-background-color: #1a202c; + --main-bgd-color: #1a202c; + --border-color: #2d3748; + --white-color: white; +} + +/* SEARCH BAR STYLING */ + +[data-theme='light'] .DocSearch { + --docsearch-text-color: var(--ifm-font-color-base); + --docsearch-highlight-color: var(--teal-600); + --docsearch-searchbox-shadow: inset 0 0 0 2px #18816A; + --docsearch-muted-color: var(--ifm-color-secondary-darkest); + --docsearch-container-background: rgba(94, 100, 112, 0.7); + /* Modal */ + --docsearch-modal-background: var(--gray-200); + /* Search box */ + --docsearch-searchbox-background: var(--ifm-color-secondary); + --docsearch-searchbox-focus-background: var(--ifm-color-white); + /* Hit */ + --docsearch-hit-color: var(--ifm-font-color-base); + --docsearch-hit-active-color: var(--ifm-color-white); + --docsearch-hit-background: var(--ifm-color-white); + /* Footer */ + --docsearch-footer-background: var(--ifm-color-white); + @media (prefers-color-scheme: dark) { + --docsearch-footer-background: var(--ifm-color-white); + --docsearch-modal-background: var(--gray-200); + --docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0,0%,100%,0.5),0 3px 8px 0 #555a64; + --docsearch-muted-color: var(--ifm-color-secondary-darkest); + --docsearch-searchbox-background: var(--ifm-color-secondary); + + --docsearch-searchbox-focus-background: var(--ifm-color-white); + --docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,0.4); + } +} + +[data-theme='dark'] .DocSearch { + --docsearch-text-color: var(--ifm-font-color-base); + --docsearch-muted-color: var(--gray-500); + --docsearch-container-background: rgba(47, 55, 69, 0.7); + /* Modal */ + --docsearch-modal-background: #090A15; + /* Search box */ + --docsearch-searchbox-background: var(--ifm-background-color); + --docsearch-searchbox-focus-background: #090A15; + /* Hit */ + --docsearch-hit-color: var(--ifm-font-color-base); + --docsearch-hit-active-color: var(--ifm-color-white); + --docsearch-hit-background: var(--ifm-color-emphasis-100); + /* Footer */ + --docsearch-footer-background: #1A202C; + --docsearch-key-gradient: linear-gradient( + -26.5deg, + var(--ifm-color-emphasis-200) 0%, + var(--ifm-color-emphasis-100) 100% + ); + --docsearch-highlight-color: #16A394; + --docsearch-searchbox-shadow: inset 0 0 0 2px #18816A; + --docsearch-footer-shadow: 0px -4px 8px 0px #00000033, 0px 1px 0px 0px #494C6A80 inset; + --docsearch-modal-shadow: 0px 3px 8px 0px #000309, 1px 1px 0px 0px #2C2E40 inset; + @media (prefers-color-scheme: dark) { + --docsearch-modal-background: #090A15; + --docsearch-footer-background: #1A202C; + --docsearch-footer-shadow: 0px -4px 8px 0px #00000033, 0px 1px 0px 0px #494C6A80 inset; + --docsearch-modal-shadow: 0px 3px 8px 0px #000309, 1px 1px 0px 0px #2C2E40 inset; + --docsearch-muted-color: var(--gray-500); + --docsearch-searchbox-background: var(--ifm-background-color); + + --docsearch-key-shadow: inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,0.3); + --docsearch-searchbox-focus-background: #090A15; + } +} \ No newline at end of file diff --git a/src/theme/DocSidebar/index.tsx b/src/theme/DocSidebar/index.tsx new file mode 100644 index 0000000000..7b774841bc --- /dev/null +++ b/src/theme/DocSidebar/index.tsx @@ -0,0 +1,13 @@ +import React, { useEffect } from 'react'; +import DocSidebar from '@theme-original/DocSidebar'; + +export default function DocSidebarWrapper(props: any) { + useEffect(() => { + console.log(props.path.split("/")[1].replace("-", " ")) + }, [props]) + return ( + <> + + + ); +} diff --git a/src/theme/DocSidebar/styles.module.css b/src/theme/DocSidebar/styles.module.css new file mode 100644 index 0000000000..f3452f97ec --- /dev/null +++ b/src/theme/DocSidebar/styles.module.css @@ -0,0 +1,3 @@ +.sidebar-wrapper { + background: pink; + } diff --git a/static/fonts/Barlow-Bold.woff2 b/static/fonts/Barlow-Bold.woff2 new file mode 100644 index 0000000000..4e73de50c2 Binary files /dev/null and b/static/fonts/Barlow-Bold.woff2 differ diff --git a/static/fonts/Barlow-SemiBold.woff2 b/static/fonts/Barlow-SemiBold.woff2 new file mode 100644 index 0000000000..77b92f377b Binary files /dev/null and b/static/fonts/Barlow-SemiBold.woff2 differ diff --git a/static/fonts/Inter-Bold.woff2 b/static/fonts/Inter-Bold.woff2 new file mode 100644 index 0000000000..3813d99430 Binary files /dev/null and b/static/fonts/Inter-Bold.woff2 differ diff --git a/static/fonts/Inter-BoldItalic.woff2 b/static/fonts/Inter-BoldItalic.woff2 new file mode 100644 index 0000000000..ec305f36d8 Binary files /dev/null and b/static/fonts/Inter-BoldItalic.woff2 differ diff --git a/static/fonts/Inter-Italic.woff2 b/static/fonts/Inter-Italic.woff2 new file mode 100644 index 0000000000..4fb825a4ac Binary files /dev/null and b/static/fonts/Inter-Italic.woff2 differ diff --git a/static/fonts/Inter-Medium.woff2 b/static/fonts/Inter-Medium.woff2 new file mode 100644 index 0000000000..effc911a0d Binary files /dev/null and b/static/fonts/Inter-Medium.woff2 differ diff --git a/static/fonts/Inter-MediumItalic.woff2 b/static/fonts/Inter-MediumItalic.woff2 new file mode 100644 index 0000000000..420a657eac Binary files /dev/null and b/static/fonts/Inter-MediumItalic.woff2 differ diff --git a/static/fonts/Inter-Regular.woff2 b/static/fonts/Inter-Regular.woff2 new file mode 100644 index 0000000000..59ed376834 Binary files /dev/null and b/static/fonts/Inter-Regular.woff2 differ diff --git a/static/fonts/Inter-SemiBold.woff2 b/static/fonts/Inter-SemiBold.woff2 new file mode 100644 index 0000000000..08f0dc7aba Binary files /dev/null and b/static/fonts/Inter-SemiBold.woff2 differ diff --git a/static/fonts/Inter-SemiBoldItalic.woff2 b/static/fonts/Inter-SemiBoldItalic.woff2 new file mode 100644 index 0000000000..cdf2cb112d Binary files /dev/null and b/static/fonts/Inter-SemiBoldItalic.woff2 differ diff --git a/static/fonts/JetBrainsMono-Regular.woff2 b/static/fonts/JetBrainsMono-Regular.woff2 new file mode 100644 index 0000000000..cc9a1ae35f Binary files /dev/null and b/static/fonts/JetBrainsMono-Regular.woff2 differ diff --git a/static/fonts/fa-brands-400.woff2 b/static/fonts/fa-brands-400.woff2 new file mode 100644 index 0000000000..76fbd53382 Binary files /dev/null and b/static/fonts/fa-brands-400.woff2 differ diff --git a/static/fonts/fa-light-300.woff2 b/static/fonts/fa-light-300.woff2 new file mode 100644 index 0000000000..1f5e395d13 Binary files /dev/null and b/static/fonts/fa-light-300.woff2 differ diff --git a/static/fonts/fa-regular-400.woff2 b/static/fonts/fa-regular-400.woff2 new file mode 100644 index 0000000000..377777b767 Binary files /dev/null and b/static/fonts/fa-regular-400.woff2 differ diff --git a/static/fonts/fa-solid-900.woff2 b/static/fonts/fa-solid-900.woff2 new file mode 100644 index 0000000000..0fdabda469 Binary files /dev/null and b/static/fonts/fa-solid-900.woff2 differ diff --git a/static/icons/breadcrumb.svg b/static/icons/breadcrumb.svg new file mode 100644 index 0000000000..9f1f05b719 --- /dev/null +++ b/static/icons/breadcrumb.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/technologies/cockroachdbgradient.svg b/static/icons/technologies/cockroachdbgradient.svg new file mode 100644 index 0000000000..80edaa3041 --- /dev/null +++ b/static/icons/technologies/cockroachdbgradient.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/technologies/mongodbsimple.svg b/static/icons/technologies/mongodbsimple.svg new file mode 100644 index 0000000000..c544636f49 --- /dev/null +++ b/static/icons/technologies/mongodbsimple.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/technologies/mysqlsimple.svg b/static/icons/technologies/mysqlsimple.svg new file mode 100644 index 0000000000..49fa851770 --- /dev/null +++ b/static/icons/technologies/mysqlsimple.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/technologies/planetscale.svg b/static/icons/technologies/planetscale.svg new file mode 100644 index 0000000000..eb481abea5 --- /dev/null +++ b/static/icons/technologies/planetscale.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/technologies/postgresqlsimple.svg b/static/icons/technologies/postgresqlsimple.svg new file mode 100644 index 0000000000..e458a949b2 --- /dev/null +++ b/static/icons/technologies/postgresqlsimple.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/technologies/sqlserver.svg b/static/icons/technologies/sqlserver.svg new file mode 100644 index 0000000000..513c4cfd68 --- /dev/null +++ b/static/icons/technologies/sqlserver.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/triangle-right.svg b/static/icons/triangle-right.svg new file mode 100644 index 0000000000..222c1a4c6e --- /dev/null +++ b/static/icons/triangle-right.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/static/img/logo-dark.svg b/static/img/logo-dark.svg index 4ae931fcab..026073e307 100644 --- a/static/img/logo-dark.svg +++ b/static/img/logo-dark.svg @@ -1,3 +1 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/static/img/logo-white.svg b/static/img/logo-white.svg index 5ce03bcc02..c497237f37 100644 --- a/static/img/logo-white.svg +++ b/static/img/logo-white.svg @@ -1,3 +1 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/static/img/logo.svg b/static/img/logo.svg index 9db6d0d066..026073e307 100644 --- a/static/img/logo.svg +++ b/static/img/logo.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file