Updates Docusaurus to 2.1

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/6390
Co-authored-by: Rob Dominguez <24390149+robertjdominguez@users.noreply.github.com>
Co-authored-by: surendran82 <26085612+surendran82@users.noreply.github.com>
GitOrigin-RevId: ca59e788e7d16bf74389c00a51db18604350b483
This commit is contained in:
Sean Park-Ross 2022-11-18 18:00:57 +02:00 committed by hasura-bot
parent cdb62ff277
commit 619cc552f0
43 changed files with 15698 additions and 11225 deletions

8
docs/.gitignore vendored
View File

@ -18,3 +18,11 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

26
docs/.prettierrc.json Normal file
View File

@ -0,0 +1,26 @@
{
"arrowParens": "avoid",
"bracketSpacing": true,
"embeddedLanguageFormatting": "auto",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxSingleQuote": false,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": false,
"vueIndentScriptAndStyle": false,
"printWidth": 120,
"overrides": [
{
"files": "*.graphql",
"options": {
"parser": "graphql"
}
}
]
}

801
docs/.yarn/releases/yarn-3.2.4.cjs vendored Executable file

File diff suppressed because one or more lines are too long

5
docs/.yarnrc Normal file
View File

@ -0,0 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
yarn-path ".yarn/releases/yarn-1.22.19.cjs"

3
docs/.yarnrc.yml Normal file
View File

@ -0,0 +1,3 @@
nodeLinker: node-modules
yarnPath: .yarn/releases/yarn-3.2.4.cjs

View File

@ -27,7 +27,7 @@ All Hasura Cloud billing related details can be found under the `Billing` tab in
## Details
- [Billing owner](/billing-owner.mdx)
- [Billing owner](/account-management/billing/billing-owner.mdx)
- [Manage payment methods](/account-management/billing/payment-methods.mdx)
- [Coupons and credits](/account-management/billing/credits.mdx)
- [Receipts](/account-management/billing/receipts.mdx)

View File

@ -182,11 +182,11 @@ creating a GraphQL query.
## Keep up to date
Hasura currently supports [queries](./queries/postgres/index.mdx),
[relationships](./schema/postgres/table-relationships/index.mdx), and [mutations](./mutations/postgres/index.mdx) on
Hasura currently supports [queries](/queries/postgres/index.mdx),
[relationships](/schema/postgres/table-relationships/index.mdx), and [mutations](/mutations/postgres/index.mdx) on
CockroachDB.
Please refer to the [Postgres docs](./queries/postgres/index.mdx) on how you can try these features out via the Console
Please refer to the [Postgres docs](/queries/postgres/index.mdx) on how you can try these features out via the Console
or by manipulating metadata in JSON/YAML directly.
If you'd like to stay informed about the status of CockroachDB support, subscribe to our newsletter and join our

View File

@ -36,7 +36,7 @@ already have one.
Please refer to the quickstart sections which describe how to install Hasura EE in various container platforms. **Each
of the below guides requires HGE versions `v2.12.0` and above.**
- [Quickstart with Docker](/quickstart-docker.mdx)
- [Quickstart with AWS ECS](/quickstart-aws-ecs.mdx)
- [Quickstart with Kubernetes](/quickstart-kubernetes.mdx)
- [Quickstart with Google Cloud Run](/quickstart-google-cloud-run.mdx)
- [Quickstart with Docker](/enterprise/getting-started/quickstart-docker.mdx)
- [Quickstart with AWS ECS](/enterprise/getting-started/quickstart-aws-ecs.mdx)
- [Quickstart with Kubernetes](/enterprise/getting-started/quickstart-kubernetes.mdx)
- [Quickstart with Google Cloud Run](/enterprise/getting-started/quickstart-google-cloud-run.mdx)

View File

@ -111,7 +111,7 @@ graphql-engine:
### Step 5: Start using Hasura
Congratulations! You have successfully set up Hasura EE on Docker.
[Start using Hasura EE now](/start-using-hasura-ee.mdx).
[Start using Hasura EE now](/enterprise/getting-started/start-using-hasura-ee.mdx).
## Hasura GraphQL engine server logs {#docker-logs}

View File

@ -117,7 +117,7 @@ Head to: `http://localhost` and the console should load!
### Step 5: Start using Hasura
Congratulations! You have successfully set up Hasura EE on Docker.
[Start using Hasura EE now](/start-using-hasura-ee.mdx).
[Start using Hasura EE now](/enterprise/getting-started/start-using-hasura-ee.mdx).
## Hasura GraphQL engine server logs {#kubernetes-logs}

View File

@ -85,7 +85,7 @@ Edit the file and add your migration actions. For the file format and instructio
to [migration file format](#migrations-file-format).
The corresponding Hasura metadata changes, if any, can be made directly in the appropriate metadata file in the
/metadata directory, refer to [metadata format](/metadata-format.mdx).
/metadata directory, refer to [metadata format](/migrations-metadata-seeds/manage-migrations.mdx).
Apply the metadata and migrations:

View File

@ -142,7 +142,8 @@ authors (id int, name text)
articles (id int, title text, author_id int, body text)
```
Also, suppose there is an [object relationship](/table-relationships/index.mdx) `articles.author` defined as:
Also, suppose there is an [object relationship](schema/bigquery/table-relationships/index.mdx) `articles.author`
defined as:
```sql
articles.author_id -> authors.id

View File

@ -12,5 +12,5 @@ slug: index
A number of common patterns exist across databases. The guides below will help you better understand best practices when
designing and working with GraphQL.
- [Data modeling guides](/data-modeling/index.mdx)
- [Exporting the Hasura GraphQL Schema](/export-graphql-schema.mdx)
- [Data modeling guides](/schema/common-patterns/data-modeling/index.mdx)
- [Exporting the Hasura GraphQL Schema](/schema/common-patterns/export-graphql-schema.mdx)

View File

@ -36,10 +36,10 @@ The following are benefits of Postgres compared to other database management sys
The following are some Postgres features that can be used to manage your data and extend your Hasura GraphQL API:
- [Constraints](/constraints.mdx)
- [Views](/views.mdx)
- [Functions](/functions.mdx)
- [Triggers](/triggers.mdx)
- [Indexes](/indexes.mdx)
- [Import data from CSV](/import-data-from-csv.mdx)
- [Auditing tables](/auditing-tables.mdx)
- [Constraints](/schema/postgres/postgres-guides/constraints.mdx)
- [Views](/schema/postgres/postgres-guides/views.mdx)
- [Functions](/schema/postgres/postgres-guides/functions.mdx)
- [Triggers](/schema/postgres/postgres-guides/triggers.mdx)
- [Indexes](/schema/postgres/postgres-guides/indexes.mdx)
- [Import data from CSV](/schema/postgres/postgres-guides/import-data-from-csv.mdx)
- [Auditing tables](/schema/postgres/postgres-guides/auditing-tables.mdx)

View File

@ -98,7 +98,7 @@ REFRESH MATERIALIZED VIEW popular_active_authors;
```
Materialized views can be refreshed when their underlying source data changes using
[Postgres triggers](/triggers.mdx).
[Postgres triggers](/schema/postgres/postgres-guides/triggers.mdx).
## Postgres views & Hasura

View File

@ -91,8 +91,12 @@ const config = {
themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
({
hideableSidebar: true,
autoCollapseSidebarCategories: true,
docs: {
sidebar: {
hideable: true,
autoCollapseCategories: true
}
},
colorMode: {
defaultMode: 'light',
disableSwitch: false,

View File

@ -1,7 +1,11 @@
{
"name": "docs",
"description": "Hasura GraphQL Engine Documentation",
"version": "0.0.0",
"private": true,
"engines": {
"node": ">=16.14"
},
"scripts": {
"docusaurus": "docusaurus",
"start": "docusaurus start",
@ -17,25 +21,26 @@
"typecheck": "tsc"
},
"dependencies": {
"@docusaurus/core": "^2.0.0-beta.18",
"@docusaurus/preset-classic": "^2.0.0-beta.18",
"@docusaurus/core": "^2.1.0",
"@docusaurus/preset-classic": "^2.1.0",
"@mdx-js/react": "^1.6.21",
"algoliasearch": "^4.14.2",
"algoliasearch-helper": "^3.7.4",
"clsx": "^1.1.1",
"clsx": "^1.2.1",
"docusaurus-plugin-sass": "^0.2.2",
"graphiql": "^1.5.1",
"graphql": "^15.7.2",
"prism-react-renderer": "^1.2.1",
"prism-react-renderer": "^1.3.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-transition-group": "^4.4.2",
"sass": "^1.49.8"
},
"devDependencies": {
"@docusaurus/module-type-aliases": "^2.0.0-beta.18",
"@tsconfig/docusaurus": "^1.0.4",
"typescript": "^4.5.5"
"@docusaurus/module-type-aliases": "^2.1.0",
"@tsconfig/docusaurus": "^1.0.6",
"prettier": "^2.7.1",
"typescript": "^4.8.4"
},
"browserslist": {
"production": [
@ -48,5 +53,6 @@
"last 1 firefox version",
"last 1 safari version"
]
}
},
"packageManager": "yarn@3.2.4"
}

View File

@ -1,205 +0,0 @@
/* Dark Mode Styles */
html[data-theme='dark'] {
--ifm-link-color:#48ADF6;
--ifm-heading-color: var(--color-gray-12);
--ifm-navbar-background-color:var(--color-gray-82);
--ifm-background-color:var(--color-gray-90);
--ifm-hero-background-color: var(--ifm-background-color);
--ifm-table-stripe-background: var(--color-gray-86-alpha-04);
--ifm-pre-background:var(--color-gray-86);
--ifm-code-background:var(--color-gray-86);
--ifm-dropdown-background-color: var(--color-gray-78);
--ifm-card-background-color:var(--color-gray-82);
--ifm-footer-background-color:var(--color-gray-82);
--collapse-button-bg-color-dark: var(--color-gray-86);
--docsearch-searchbox-background: var(--color-gray-90) !important;
--docsearch-searchbox-focus-background: var(--color-gray-86) !important;
code {
background-color: var(--color-gray-78);
}
pre {
code {
background-color: var(--ifm-code-background);
}
}
.alert {
pre {
code {
--ifm-code-background: var(--color-gray-78);
}
}
}
.docusaurus-highlight-code-line {
background-color: var(--color-gray-78);
}
.card:hover {
--ifm-card-background-color:var(--color-gray-78) !important;
}
.header-github-link {
&:hover {
opacity: 0.6;
}
&::before {
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
no-repeat;
}
}
.no-shadow {
background-color: var(--color-gray-0);
}
.theme-doc-sidebar-container {
background-color: var(--color-gray-86);
button[class*='collapseSidebarButton_'], div[class*='collapsedDocSidebar_'] {
&::before {
background: url('/icons/collapse-arrow-left-light.svg') no-repeat;
}
&:hover {
background-color: var(--color-gray-82);
}
}
}
.theme-doc-sidebar-menu {
.theme-doc-sidebar-item-category {
.theme-doc-sidebar-item-link {
.menu__link {
border-left: 0.1rem solid var(--color-gray-74);
}
.menu__link--active {
border-left: 0.1rem solid var(--color-gray-16);
}
}
}
.theme-doc-sidebar-item-link-level-1.menu__list-item, .theme-doc-sidebar-item-link-level-2.menu__list-item {
&::before {
background: url('/icons/dot.svg') no-repeat;
}
.menu__link {
border-left: none;
}
}
.theme-doc-sidebar-item-category.cloud-icon {
.menu__list-item-collapsible {
.menu__link {
&:after {
background: url('/icons/cloud-light.svg') no-repeat;
}
}
}
}
.theme-doc-sidebar-item-category.enterprise-icon {
.menu__list-item-collapsible {
.menu__link {
&:after {
background: url('/icons/enterprise-light.svg') no-repeat;
}
}
}
}
.theme-doc-sidebar-item-link.cloud-and-enterprise-icon {
.menu__link {
position: relative;
&:after {
background: url('/icons/ce_ee_light.svg') no-repeat;
}
}
}
.theme-doc-sidebar-item-category.cloud-and-enterprise-icon {
.menu__list-item-collapsible {
.menu__link {
&:after {
background: url('/icons/ce_ee_light.svg') no-repeat;
margin-left: 5px;
}
}
}
}
.theme-doc-sidebar-item-link.cloud-icon {
.menu__link {
&:after {
background: url('/icons/cloud-light.svg') no-repeat;
background-position: right center;
}
&:hover {
&:before {
background-color: var(--color-gray-74);
color: var(--color-gray-0);
box-shadow: 0px 12px 66px rgba(12, 16, 21, 0.4);
}
}
}
}
.theme-doc-sidebar-item-category.cloud-icon, .theme-doc-sidebar-item-category.enterprise-icon {
.menu__list-item-collapsible {
.menu__link {
&:after {
background-position: right center;
}
&:hover {
&:before {
background-color: var(--color-gray-74);
color: var(--color-gray-0);
box-shadow: 0px 12px 66px rgba(12, 16, 21, 0.4);
}
}
}
}
}
}
.table-of-contents {
&.table-of-contents__left-border {
border-left: 1px solid var(--color-gray-74);
}
.table-of-contents__link--active {
border-left: 0.125rem solid var(--color-gray-16);
}
}
.admonition {
&.alert {
background-color: var(--color-gray-86);
}
.admonition-icon svg {
fill: var(--ifm-alert-border-color);
stroke: var(--ifm-alert-border-color);
}
}
.theme-edit-this-page {
&::before, &::after {
filter: invert(1);
}
color: var(--ifm-color-gray-2);
&:hover {
color: var(--ifm-color-gray-0);
}
}
.pagination-nav {
.pagination-nav__item {
&:not(:empty) {
background-color: var(--color-gray-86);
&:hover {
background-color: var(--color-gray-82);
}
.pagination-nav__link {
color: var(--ifm-color-content-secondary);
}
}
&:first-child .pagination-nav__label::before, &--next .pagination-nav__label::after {
background: url("/icons/arrow_right-light.svg") no-repeat;
}
}
}
}

View File

@ -0,0 +1,5 @@
.theme-admonition {
.admonitionHeading_node_modules-\@docusaurus-theme-classic-lib-theme-Admonition-styles-module {
text-transform: none;
}
}

View File

@ -0,0 +1,290 @@
.theme-doc-sidebar-menu {
.theme-doc-sidebar-item-category.cloud-icon {
.menu__list-item-collapsible {
.menu__link {
&:after {
background: url('/icons/cloud-dark.svg') no-repeat;
}
}
}
}
.theme-doc-sidebar-item-category.enterprise-icon {
.menu__list-item-collapsible {
.menu__link {
&:after {
background: url('/icons/enterprise-dark.svg') no-repeat;
}
}
}
}
.theme-doc-sidebar-item-category.cloud-and-enterprise-icon {
.menu__list-item-collapsible {
.menu__link {
&:after {
background: url('/icons/ce_ee_dark.svg') no-repeat;
}
}
}
}
.theme-doc-sidebar-item-link.cloud-icon,
.theme-doc-sidebar-item-link.cloud-and-enterprise-icon {
.menu__link {
position: relative;
&:after {
content: '';
position: inherit;
background-position: right center;
width: unset;
transform: none;
//background: url('/icons/cloud-dark.svg') no-repeat;
margin-left: 8px;
width: 18px;
height: 18px;
transform: translate(4px, 0px);
max-height: 20px;
min-height: unset;
}
&:hover {
&:before {
font-weight: var(--ifm-font-weight-semibold);
padding: 16px;
position: absolute;
bottom: 35px;
left: 50%;
transform: translateX(-50%);
border-radius: 4px;
max-width: 180px;
width: -webkit-fill-available;
z-index: 1;
animation-delay: 2s;
background-color: var(--color-gray-0);
color: var(--color-gray-82);
box-shadow: 0px 12px 42px rgba(12, 16, 21, 0.07);
width: 100%;
line-height: 19px;
}
}
}
}
.theme-doc-sidebar-item-link.cloud-icon {
.menu__link {
position: relative;
&:after {
background: url('/icons/cloud-dark.svg') no-repeat;
}
&:hover {
&:before {
content: 'Available on Hasura Cloud';
}
}
}
}
.theme-doc-sidebar-item-link.cloud-and-enterprise-icon {
.menu__link {
position: relative;
&:after {
background: url('/icons/ce_ee_dark.svg') no-repeat;
}
&:hover {
&:before {
content: 'Available on both Hasura Cloud and Enterprise Edition (EE)';
}
}
}
}
.theme-doc-sidebar-item-category.cloud-icon {
.menu__list-item-collapsible {
.menu__link {
&:hover {
&:before {
content: 'Available on Hasura Cloud';
}
}
}
}
}
.theme-doc-sidebar-item-category.enterprise-icon {
.menu__list-item-collapsible {
.menu__link {
&:hover {
&:before {
content: 'Available on Hasura Enterprise Edition (EE)';
}
}
}
}
}
.theme-doc-sidebar-item-category.cloud-and-enterprise-icon {
.menu__list-item-collapsible {
.menu__link {
&:hover {
&:before {
content: 'Available on both Hasura Cloud and Enterprise Edition (EE)';
}
}
}
}
}
.theme-doc-sidebar-item-category.cloud-icon,
.theme-doc-sidebar-item-category.enterprise-icon {
.menu__list-item-collapsible {
.menu__link {
position: relative;
&:after {
content: '';
position: inherit;
width: 20px;
background-position: right center;
width: unset;
transform: none;
height: 18px;
transform: translate(4px, 0px);
max-height: 20px;
min-height: unset;
}
&:hover {
&:before {
font-weight: var(--ifm-font-weight-semibold);
padding: 16px;
position: absolute;
// right: -170px;
// top: 50%;
// transform: translateY(-50%);
bottom: 35px;
left: 50%;
transform: translateX(-50%);
border-radius: 4px;
max-width: 180px;
width: -webkit-fill-available;
z-index: 1;
animation-delay: 2s;
background-color: var(--color-gray-0);
color: var(--color-gray-82);
box-shadow: 0px 12px 42px rgba(12, 16, 21, 0.07);
width: 100%;
line-height: 19px;
}
}
}
}
.menu__list {
.theme-doc-sidebar-item-category {
.menu__list-item-collapsible {
.menu__link {
&:after {
display: none;
}
&:hover {
&:before {
display: none;
}
}
}
}
}
}
}
.theme-doc-sidebar-item-category.cloud-icon,
.theme-doc-sidebar-item-category.cloud-and-enterprise-icon {
.menu__list-item-collapsible {
.menu__link {
position: relative;
&:after {
content: '';
position: inherit;
width: 20px;
background-position: right center;
width: unset;
transform: none;
height: 18px;
transform: translate(4px, 0px);
max-height: 20px;
min-height: unset;
}
&:hover {
&:before {
font-weight: var(--ifm-font-weight-semibold);
padding: 16px;
position: absolute;
// right: -170px;
// top: 50%;
// transform: translateY(-50%);
bottom: 35px;
left: 50%;
transform: translateX(-50%);
border-radius: 4px;
max-width: 180px;
width: -webkit-fill-available;
z-index: 1;
animation-delay: 2s;
background-color: var(--color-gray-0);
color: var(--color-gray-82);
box-shadow: 0px 12px 42px rgba(12, 16, 21, 0.07);
width: 100%;
line-height: 19px;
}
}
}
}
.menu__list {
.theme-doc-sidebar-item-category {
.menu__list-item-collapsible {
.menu__link {
&:after {
display: none;
}
&:hover {
&:before {
display: none;
}
}
}
}
}
}
}
.theme-doc-sidebar-item-category.no-index {
.menu__list-item-collapsible {
.menu__link {
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
align-items: center;
}
}
}
.theme-doc-sidebar-item-link.no-index {
.menu__link {
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
align-items: center;
}
}
}

View File

@ -0,0 +1,37 @@
// Gallery for cloud db guides' vendor logos
.vendor-table {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
a {
text-decoration: none;
}
.card-wrapper {
display: grid;
place-items: center center;
grid-gap: 1rem;
height: 100%;
width: 100%;
text-decoration: none;
}
.card {
display: grid;
place-items: center center;
height: 200px;
background: #fff;
width: 100%;
img {
width: 100px;
height: auto;
}
&:hover {
box-shadow: var(--ifm-global-shadow-md);
cursor: pointer;
}
}
}

View File

@ -3,895 +3,31 @@
* bundles Infima by default. Infima is a CSS framework designed to
* work well for content-centric websites.
*/
@use 'custom-dark';
@font-face {
font-family: 'IBM Plex Sans';
src: url('/fonts/IBM-Plex-Sans-300.woff2') format('woff2');
/* Super Modern Browsers */
font-weight: 300;
font-display: swap;
}
@font-face {
font-family: 'IBM Plex Sans';
src: url('/fonts/IBM-Plex-Sans-400.woff2') format('woff2');
/* Super Modern Browsers */
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'IBM Plex Sans';
src: url('/fonts/IBM-Plex-Sans-500.woff2') format('woff2');
/* Super Modern Browsers */
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: 'IBM Plex Sans';
src: url('/fonts/IBM-Plex-Sans-600.woff2') format('woff2');
/* Super Modern Browsers */
font-weight: 600;
font-display: swap;
}
@font-face {
font-family: 'IBM Plex Mono';
src: url('/fonts/IBM-Plex-Mono-300.woff2') format('woff2');
/* Super Modern Browsers */
font-weight: 300;
font-display: swap;
}
@font-face {
font-family: 'IBM Plex Mono';
src: url('/fonts/IBM-Plex-Mono-600.woff2') format('woff2');
/* Super Modern Browsers */
font-weight: 600;
font-display: swap;
}
@font-face {
font-family: 'IBM Plex Mono';
src: url('/fonts/IBM-Plex-Mono-normal.woff2') format('woff2');
/* Super Modern Browsers */
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: 'IBM Plex Mono Regular';
src: url('/fonts/IBM-Plex-Mono-Regular.woff2') format('woff2');
/* Super Modern Browsers */
font-weight: normal;
font-display: swap;
}
/* You can override the default Infima variables here. */
:root {
/* Custom Variables */
--color-gray-0: #ffffff;
--color-gray-4: #f3f5f7;
--color-gray-4-alpha-04: rgba(243, 245, 247, 0.4);
--color-gray-8: #e7ebef;
--color-gray-12: #dce2e8;
--color-gray-16: #cfd8df;
--color-gray-74: #344658;
--color-gray-78: #2c3b4b;
--color-gray-82: #23303d;
--color-gray-86: #1c262f;
--color-gray-86-alpha-04: rgba(28, 38, 47, 0.4);
--color-gray-90: #141c22;
/* Docusaurus Specific variables */
--ifm-color-primary: #0b89d0;
--ifm-color-primary-dark: #0079bd;
--ifm-color-primary-darker: #005c8f;
--ifm-color-primary-darkest: #00324e;
--ifm-color-primary-light: #1699e2;
--ifm-color-primary-lighter: #35b6ff;
--ifm-color-primary-lightest: #77ceff;
--ifm-color-primary-contrast-background: #e1f4ff;
--ifm-color-primary-contrast-foreground: #00324e;
--ifm-color-secondary: #e0e7ee;
--ifm-color-secondary-dark: #d5dee5;
--ifm-color-secondary-darker: #c3cdd6;
--ifm-color-secondary-darkest: #b1bcc7;
--ifm-color-secondary-light: #ebf1f6;
--ifm-color-secondary-lighter: #f2f7fb;
--ifm-color-secondary-lightest: #f8fcff;
--ifm-color-secondary-contrast-background: #ebf1f6;
--ifm-color-secondary-contrast-foreground: #1b2738;
--ifm-color-success: #46b486;
--ifm-color-success-dark: #37a476;
--ifm-color-success-darker: #02864f;
--ifm-color-success-darkest: #026d40;
--ifm-color-success-light: #54c596;
--ifm-color-success-lighter: #66d0a3;
--ifm-color-success-lightest: #77dbb1;
--ifm-color-success-contrast-background: #ddfaed;
--ifm-color-success-contrast-foreground: #003921;
--ifm-color-info: #5898d2;
--ifm-color-info-dark: #478bca;
--ifm-color-info-darker: #2771b6;
--ifm-color-info-darkest: #0b5599;
--ifm-color-info-light: #6aa4db;
--ifm-color-info-lighter: #7bb4e8;
--ifm-color-info-lightest: #8cc3f5;
--ifm-color-info-contrast-background: #e3f2ff;
--ifm-color-info-contrast-foreground: #00315f;
--ifm-color-warning: #dd9833;
--ifm-color-warning-dark: #c78017;
--ifm-color-warning-darker: #a66401;
--ifm-color-warning-darkest: #794900;
--ifm-color-warning-light: #f2b14f;
--ifm-color-warning-lighter: #f6ba61;
--ifm-color-warning-lightest: #f9c374;
--ifm-color-warning-contrast-background: #ffefd8;
--ifm-color-warning-contrast-foreground: #3e2500;
--ifm-color-danger: #e66d6d;
--ifm-color-danger-dark: #d95c5c;
--ifm-color-danger-darker: #c64242;
--ifm-color-danger-darkest: #a02929;
--ifm-color-danger-light: #f47e7e;
--ifm-color-danger-lighter: #f88e8e;
--ifm-color-danger-lightest: #fc9f9f;
--ifm-color-danger-contrast-background: #ffe8e8;
--ifm-color-danger-contrast-foreground: #6a0808;
--ifm-color-gray-100: var(--color-gray-12);
/*--ifm-color-gray-200: #EBF1F6;
--ifm-color-gray-300: #D5DEE5;
--ifm-color-gray-400: #B1BCC7;
--ifm-color-gray-500: #909DA6;
--ifm-color-gray-600: #74818A;
--ifm-color-gray-700: #616D75;
--ifm-color-gray-800: #404955; */
--ifm-color-gray-900: var(--color-gray-90);
/* --ifm-navbar-background-color; */
/* --ifm-background-color */
--ifm-heading-color: var(--color-gray-74);
--ifm-footer-background-color: var(--color-gray-8);
--ifm-color-content-secondary: #616d75;
--ifm-link-color: #0676c8;
--ifm-menu-color: var(--ifm-color-content);
--ifm-menu-color-active: var(--ifm-color-content);
--ifm-toc-link-color: var(--ifm-color-content);
--ifm-table-stripe-background: var(--color-gray-4-alpha-04);
--ifm-pre-background: var(--color-gray-4);
--ifm-code-background: var(--color-gray-4);
--ifm-code-font-size: 0.875rem; /* 14px */
/* --ifm-pre-color: inherit; */
--ifm-global-shadow-lw: 0px 2px 6px rgba(0, 0, 0, 0.2);
--ifm-global-shadow-md: 0px 4px 14px rgba(0, 0, 0, 0.16);
--ifm-global-shadow-tl: 0px 10px 30px rgba(0, 0, 0, 0.16);
--ifm-global-radius: 0.25rem;
--doc-sidebar-width: 320px !important;
--ifm-navbar-height: 72px !important;
--ifm-font-family-base: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans,
sans-serif, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
--ifm-font-family-monospace: 'IBM Plex Mono Regular', 'IBM Plex Mono', SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace;
--ifm-font-size-base: 16px;
--ifm-line-height-base: 1.5; /* 150% */
--ifm-font-weight-light: 300;
--ifm-font-weight-normal: 400;
--ifm-font-weight-semibold: 500;
--ifm-font-weight-bold: 600;
--ifm-heading-line-height: 1.25;
--ifm-h1-font-size: 2.5rem; /* 40px */
--ifm-h2-font-size: 2rem; /* 32px */
--ifm-h3-font-size: 1.5rem; /* 24px */
--ifm-h4-font-size: 1.25rem; /* 20px */
--ifm-h5-font-size: 1rem; /* 16px */
--ifm-h6-font-size: 0.875rem; /* 14px */
--ifm-small-font-size: 0.75rem; /* 12px */
--ifm-heading-font-weight: var(--ifm-font-weight-semibold);
--ifm-footer-padding-vertical: 3rem;
}
/* Docusaurus Specific Styles */
.header-github-link {
&::before {
content: '';
width: 24px;
height: 24px;
display: flex;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
no-repeat;
}
&:hover {
opacity: 0.8;
}
}
.DocSearch-Button {
border-radius: var(--ifm-global-radius) !important;
}
@media (min-width: 768px) {
.DocSearch-Button {
width: 14rem;
}
}
.theme-doc-sidebar-container {
background-color: var(--color-gray-4);
button[class*='collapseSidebarButton_'],
div[class*='collapsedDocSidebar_'] {
svg {
display: none;
}
&::before {
content: '';
display: inline-block;
background: url('/icons/collapse-arrow-left.svg') no-repeat;
width: 1.25rem;
height: 1.25rem;
margin-top: 0.25rem;
}
}
div[class*='collapsedDocSidebar_'] {
&::before {
transform: rotate(180deg);
}
}
}
.theme-doc-sidebar-menu {
font-size: 14px;
font-weight: var(--ifm-font-weight-normal);
.menu__link {
.menu__link--active,
&.menu__link--active {
font-weight: var(--ifm-font-weight-bold);
}
}
}
.menu__list-item--collapsed {
.menu__list-item-collapsible {
&::before {
transform: rotate(0deg) !important;
transition: all var(--ifm-transition-fast) ease-in-out;
}
}
}
.theme-doc-sidebar-menu {
.theme-doc-sidebar-item-category {
.theme-doc-sidebar-item-link {
margin-top: 0;
.menu__link {
//border-left: 0.1rem solid var(--color-gray-16);
border-radius: 0 0.25rem 0.25rem 0;
}
.menu__link--active {
//border-left: 0.1rem solid var(--color-gray-82);
}
}
}
.theme-doc-sidebar-item-link-level-1.menu__list-item,
.theme-doc-sidebar-item-link-level-2.menu__list-item {
display: flex;
align-items: center;
&::before {
content: '';
display: inline-block;
//background: url("/icons/dot-light.svg") no-repeat;
//width: 1rem;
//height: 1rem;
//transform: scale(0.7);
}
.menu__link {
border-left: none;
justify-content: flex-start;
}
}
.menu__list-item {
// margin-top: 0;
.menu__caret {
display: flex;
align-items: center;
justify-content: center;
//position: absolute;
top: 0px;
left: 0px;
padding: 0 0;
}
.menu__caret::before,
.menu__link--sublist::after {
min-width: 1.5rem;
width: 1.5rem;
height: 1.5rem;
background: url('/icons/chevron-top.svg') no-repeat;
background-position: center center;
min-height: 29.5px;
}
.menu__list-item-collapsible {
&::before {
height: auto;
background-position: center center;
transform: rotate(90deg);
transition: all 0.3s ease-in-out;
}
.menu__link--active {
background: var(--ifm-menu-color-background-active) !important;
}
}
}
.theme-doc-sidebar-item-category.cloud-icon {
.menu__list-item-collapsible {
.menu__link {
&:after {
background: url('/icons/cloud-dark.svg') no-repeat;
}
}
}
}
.theme-doc-sidebar-item-category.enterprise-icon {
.menu__list-item-collapsible {
.menu__link {
&:after {
background: url('/icons/enterprise-dark.svg') no-repeat;
}
}
}
}
.theme-doc-sidebar-item-category.cloud-and-enterprise-icon {
.menu__list-item-collapsible {
.menu__link {
&:after {
background: url('/icons/ce_ee_dark.svg') no-repeat;
}
}
}
}
.theme-doc-sidebar-item-link.cloud-icon,
.theme-doc-sidebar-item-link.cloud-and-enterprise-icon {
.menu__link {
position: relative;
&:after {
content: '';
position: inherit;
background-position: right center;
width: unset;
transform: none;
//background: url('/icons/cloud-dark.svg') no-repeat;
margin-left: 8px;
width: 18px;
transform: translate(4px, -1px);
max-height: 20px;
min-height: unset;
}
&:hover {
&:before {
font-weight: var(--ifm-font-weight-semibold);
padding: 16px;
position: absolute;
bottom: 35px;
left: 50%;
transform: translateX(-50%);
border-radius: 4px;
max-width: 180px;
width: -webkit-fill-available;
z-index: 1;
animation-delay: 2s;
background-color: var(--color-gray-0);
color: var(--color-gray-82);
box-shadow: 0px 12px 42px rgba(12, 16, 21, 0.07);
width: 100%;
line-height: 19px;
}
}
}
}
.theme-doc-sidebar-item-link.cloud-icon {
.menu__link {
position: relative;
&:after {
background: url('/icons/cloud-dark.svg') no-repeat;
}
&:hover {
&:before {
content: 'Available on Hasura Cloud';
}
}
}
}
.theme-doc-sidebar-item-link.cloud-and-enterprise-icon {
.menu__link {
position: relative;
&:after {
background: url('/icons/ce_ee_dark.svg') no-repeat;
}
&:hover {
&:before {
content: 'Available on both Hasura Cloud and Enterprise Edition (EE)';
}
}
}
}
.theme-doc-sidebar-item-category.cloud-icon {
.menu__list-item-collapsible {
.menu__link {
&:hover {
&:before {
content: 'Available on Hasura Cloud';
}
}
}
}
}
.theme-doc-sidebar-item-category.enterprise-icon {
.menu__list-item-collapsible {
.menu__link {
&:hover {
&:before {
content: 'Available on Hasura Enterprise Edition (EE)';
}
}
}
}
}
.theme-doc-sidebar-item-category.cloud-and-enterprise-icon {
.menu__list-item-collapsible {
.menu__link {
&:hover {
&:before {
content: 'Available on both Hasura Cloud and Enterprise Edition (EE)';
}
}
}
}
}
.theme-doc-sidebar-item-category.cloud-icon,
.theme-doc-sidebar-item-category.enterprise-icon {
.menu__list-item-collapsible {
.menu__link {
position: relative;
&:after {
content: '';
position: inherit;
width: 20px;
background-position: right center;
width: unset;
transform: none;
height: 100%;
transform: translate(4px, -1px);
max-height: 20px;
min-height: unset;
}
&:hover {
&:before {
font-weight: var(--ifm-font-weight-semibold);
padding: 16px;
position: absolute;
// right: -170px;
// top: 50%;
// transform: translateY(-50%);
bottom: 35px;
left: 50%;
transform: translateX(-50%);
border-radius: 4px;
max-width: 180px;
width: -webkit-fill-available;
z-index: 1;
animation-delay: 2s;
background-color: var(--color-gray-0);
color: var(--color-gray-82);
box-shadow: 0px 12px 42px rgba(12, 16, 21, 0.07);
width: 100%;
line-height: 19px;
}
}
}
}
.menu__list {
.theme-doc-sidebar-item-category {
.menu__list-item-collapsible {
.menu__link {
&:after {
display: none;
}
&:hover {
&:before {
display: none;
}
}
}
}
}
}
}
.theme-doc-sidebar-item-category.cloud-icon,
.theme-doc-sidebar-item-category.cloud-and-enterprise-icon {
.menu__list-item-collapsible {
.menu__link {
position: relative;
&:after {
content: '';
position: inherit;
width: 20px;
background-position: right center;
width: unset;
transform: none;
height: 100%;
transform: translate(4px, -1px);
max-height: 20px;
min-height: unset;
}
&:hover {
&:before {
font-weight: var(--ifm-font-weight-semibold);
padding: 16px;
position: absolute;
// right: -170px;
// top: 50%;
// transform: translateY(-50%);
bottom: 35px;
left: 50%;
transform: translateX(-50%);
border-radius: 4px;
max-width: 180px;
width: -webkit-fill-available;
z-index: 1;
animation-delay: 2s;
background-color: var(--color-gray-0);
color: var(--color-gray-82);
box-shadow: 0px 12px 42px rgba(12, 16, 21, 0.07);
width: 100%;
line-height: 19px;
}
}
}
}
.menu__list {
.theme-doc-sidebar-item-category {
.menu__list-item-collapsible {
.menu__link {
&:after {
display: none;
}
&:hover {
&:before {
display: none;
}
}
}
}
}
}
}
.theme-doc-sidebar-item-category.no-index {
.menu__list-item-collapsible {
.menu__link {
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
align-items: center;
}
}
}
.theme-doc-sidebar-item-link.no-index {
.menu__link {
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
align-items: center;
}
}
}
.table-of-contents {
margin-left: 0;
padding-left: var(--ifm-toc-padding-horizontal);
&.table-of-contents__left-border {
border-left: 1px solid var(--color-gray-16);
}
.table-of-contents__link {
display: block;
font-size: 0.75rem;
}
.table-of-contents__link--active {
font-weight: var(--ifm-font-weight-bold);
border-left: 0.125rem solid var(--color-gray-82);
color: var(--ifm-font-color-base);
margin-left: -1rem;
padding-left: 0.75rem;
}
}
.theme-doc-breadcrumbs {
.breadcrumbs {
.breadcrumbs__item {
--ifm-breadcrumb-padding-horizontal: 0;
&:first-child {
display: none;
}
.breadcrumbs__link {
background-color: transparent;
}
}
}
}
.markdown {
--ifm-h1-vertical-rhythm-top: 2.5;
h1 {
margin-top: 25px;
}
h1:first-child {
--ifm-h1-font-size: 2.5rem; /* 40px */
}
}
.admonition {
.admonition-heading h5 {
text-transform: capitalize;
}
a {
color: var(--ifm-alert-border-color);
}
}
.theme-code-block {
box-shadow: none !important;
}
code {
background-color: var(--color-gray-4);
}
pre {
code {
background-color: var(--ifm-code-background);
}
}
div[class*='codeBlockTitle_'] {
background-color: var(--ifm-code-background) !important;
}
.alert {
pre {
code {
--ifm-code-background: var(--color-gray-4);
}
}
}
.docusaurus-highlight-code-line {
background-color: var(--color-gray-12);
display: block;
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
}
.theme-edit-this-page {
display: flex;
align-items: center;
height: 30px;
color: var(--ifm-color-gray-900);
svg {
display: none;
}
&::before,
&::after {
content: '';
display: inline-block;
transform: translateX(0);
transition: transform var(--ifm-transition-fast) linear;
}
&::before {
margin-right: 0.5rem;
background: url('/icons/github-dark.svg') no-repeat;
width: 24px;
height: 24px;
}
&::after {
margin-left: 0.25rem;
background: url('/icons/arrow_right.svg') no-repeat;
width: 1rem;
height: 1rem;
margin-bottom: -0.25rem;
}
&:hover {
text-decoration: none;
color: var(--ifm-color-gray-1000);
&::after {
transform: translateX(0.25rem);
}
}
}
.pagination-nav {
.pagination-nav__item {
&:not(:empty) {
background-color: var(--color-gray-4);
&:hover {
background-color: var(--color-gray-8);
}
.pagination-nav__link {
border-color: transparent;
box-shadow: var(--ifm-global-shadow-lw);
color: var(--color-gray-74);
}
.pagination-nav__label {
font-size: 1rem;
}
.pagination-nav__sublabel {
display: none;
}
}
&:first-child .pagination-nav__label::before,
&--next .pagination-nav__label::after {
content: '';
display: inline-block;
background: url('/icons/arrow_right.svg') no-repeat;
width: 1rem;
height: 1rem;
margin-bottom: -0.2rem;
transition: transform var(--ifm-transition-fast) linear;
}
&:first-child {
.pagination-nav__label::before {
margin-right: 0.25rem;
transform: rotate(180deg);
}
&:hover {
.pagination-nav__label::before {
transform: rotate(180deg) translateX(0.25rem);
}
}
}
&--next {
.pagination-nav__label::after {
margin-left: 0.25rem;
}
&:hover {
.pagination-nav__label::after {
transform: translateX(0.25rem);
}
}
}
}
}
.footer__links {
font-size: 0.75rem;
text-transform: uppercase;
font-weight: 600;
.footer__title {
font-size: 0.75rem;
}
.footer__item {
padding: 0.625rem 0;
}
}
/* .footer__links .footer__link-item svg {
display: none;
} */
@use "default-fonts-and-colors";
@use "cloud-and-enterprise-menu-icons";
@use "header";
@use "sidebar";
@use "table-of-contents";
@use "doc";
@use "footer";
@use "introduction-page";
@use "cloud-db-icon-gallery";
@use "admonitions";
/* Custom Styles */
.no-shadow {
box-shadow: none !important;
}
/* navbar */
.navbar__item.navbar__link {
font-size: 14px;
line-height: 20px;
}
.nav-link_login {
color: var(--ifm-color-primary);
}
.nav-link_getting-started {
font-weight: 500;
text-transform: capitalize;
white-space: nowrap;
background-color: var(--ifm-color-primary-light);
color: var(--color-gray-0);
border-radius: var(--ifm-global-radius);
padding: 0.5rem 1rem;
margin-right: 0.5rem;
&:hover {
background-color: var(--ifm-color-primary-dark);
color: var(--color-gray-0);
}
}
.close {
color: #fff;
opacity: 0.75;
}
// Custom for index
.custom_doc_item_wrapper-x-wide {
padding-left: 1.5rem;
padding-right: 1.5rem;
.row {
.col {
max-width: 100vw !important;
article {
width: 100%;
}
}
}
}
// Card gallery
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
}
// Card
.card {
display: flex;
flex-direction: column;
// border: solid 1px white;
border-radius: 8px;
padding: 20px;
h4 {
text-transform: uppercase;
font-size: 1.1rem;
}
a {
margin-left: auto;
margin-top: auto;
display: flex;
align-items: center;
}
&:hover {
.arrow {
transform: translateX(5px);
}
}
}
.sub-heading {
grid-column: 1 / -1;
h3 {
margin-bottom: 10px;
}
@ -916,40 +52,11 @@ tbody {
word-break: break-word;
}
// Gallery for cloud db guides' vendor logos
.vendor-table {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
/* Dark Mode Styles */
a {
text-decoration: none;
}
html[data-theme='dark'] {
.card-wrapper {
display: grid;
place-items: center center;
grid-gap: 1rem;
height: 100%;
width: 100%;
text-decoration: none;
}
.card {
display: grid;
place-items: center center;
height: 200px;
background: #fff;
width: 100%;
img {
width: 100px;
height: auto;
}
&:hover {
box-shadow: var(--ifm-global-shadow-md);
cursor: pointer;
}
.no-shadow {
background-color: var(--color-gray-0);
}
}

View File

@ -0,0 +1,224 @@
@font-face {
font-family: 'IBM Plex Sans';
src: url('/fonts/IBM-Plex-Sans-300.woff2') format('woff2');
/* Super Modern Browsers */
font-weight: 300;
font-display: swap;
}
@font-face {
font-family: 'IBM Plex Sans';
src: url('/fonts/IBM-Plex-Sans-400.woff2') format('woff2');
/* Super Modern Browsers */
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'IBM Plex Sans';
src: url('/fonts/IBM-Plex-Sans-500.woff2') format('woff2');
/* Super Modern Browsers */
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: 'IBM Plex Sans';
src: url('/fonts/IBM-Plex-Sans-600.woff2') format('woff2');
/* Super Modern Browsers */
font-weight: 600;
font-display: swap;
}
@font-face {
font-family: 'IBM Plex Mono';
src: url('/fonts/IBM-Plex-Mono-300.woff2') format('woff2');
/* Super Modern Browsers */
font-weight: 300;
font-display: swap;
}
@font-face {
font-family: 'IBM Plex Mono';
src: url('/fonts/IBM-Plex-Mono-600.woff2') format('woff2');
/* Super Modern Browsers */
font-weight: 600;
font-display: swap;
}
@font-face {
font-family: 'IBM Plex Mono';
src: url('/fonts/IBM-Plex-Mono-normal.woff2') format('woff2');
/* Super Modern Browsers */
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: 'IBM Plex Mono Regular';
src: url('/fonts/IBM-Plex-Mono-Regular.woff2') format('woff2');
/* Super Modern Browsers */
font-weight: normal;
font-display: swap;
}
/* You can override the default Infima variables here. */
:root {
/* Custom Variables */
--color-gray-0: #ffffff;
--color-gray-4: #f3f5f7;
--color-gray-4-alpha-04: rgba(243, 245, 247, 0.4);
--color-gray-8: #e7ebef;
--color-gray-12: #dce2e8;
--color-gray-16: #cfd8df;
--color-gray-74: #344658;
--color-gray-78: #2c3b4b;
--color-gray-82: #23303d;
--color-gray-86: #1c262f;
--color-gray-86-alpha-04: rgba(28, 38, 47, 0.4);
--color-gray-90: #141c22;
/* Docusaurus Specific variables */
--ifm-color-primary: #0b89d0;
--ifm-color-primary-dark: #0079bd;
--ifm-color-primary-darker: #005c8f;
--ifm-color-primary-darkest: #00324e;
--ifm-color-primary-light: #1699e2;
--ifm-color-primary-lighter: #35b6ff;
--ifm-color-primary-lightest: #77ceff;
--ifm-color-primary-contrast-background: #e1f4ff;
--ifm-color-primary-contrast-foreground: #00324e;
--ifm-color-secondary: #e0e7ee;
--ifm-color-secondary-dark: #d5dee5;
--ifm-color-secondary-darker: #c3cdd6;
--ifm-color-secondary-darkest: #b1bcc7;
--ifm-color-secondary-light: #ebf1f6;
--ifm-color-secondary-lighter: #f2f7fb;
--ifm-color-secondary-lightest: #f8fcff;
--ifm-color-secondary-contrast-background: #ebf1f6;
--ifm-color-secondary-contrast-foreground: #1b2738;
--ifm-color-success: #46b486;
--ifm-color-success-dark: #37a476;
--ifm-color-success-darker: #02864f;
--ifm-color-success-darkest: #026d40;
--ifm-color-success-light: #54c596;
--ifm-color-success-lighter: #66d0a3;
--ifm-color-success-lightest: #77dbb1;
--ifm-color-success-contrast-background: #ddfaed;
--ifm-color-success-contrast-foreground: #003921;
--ifm-color-info: #5898d2;
--ifm-color-info-dark: #478bca;
--ifm-color-info-darker: #2771b6;
--ifm-color-info-darkest: #0b5599;
--ifm-color-info-light: #6aa4db;
--ifm-color-info-lighter: #7bb4e8;
--ifm-color-info-lightest: #8cc3f5;
--ifm-color-info-contrast-background: #e3f2ff;
--ifm-color-info-contrast-foreground: #00315f;
--ifm-color-warning: #dd9833;
--ifm-color-warning-dark: #c78017;
--ifm-color-warning-darker: #a66401;
--ifm-color-warning-darkest: #794900;
--ifm-color-warning-light: #f2b14f;
--ifm-color-warning-lighter: #f6ba61;
--ifm-color-warning-lightest: #f9c374;
--ifm-color-warning-contrast-background: #ffefd8;
--ifm-color-warning-contrast-foreground: #3e2500;
--ifm-color-danger: #e66d6d;
--ifm-color-danger-dark: #d95c5c;
--ifm-color-danger-darker: #c64242;
--ifm-color-danger-darkest: #a02929;
--ifm-color-danger-light: #f47e7e;
--ifm-color-danger-lighter: #f88e8e;
--ifm-color-danger-lightest: #fc9f9f;
--ifm-color-danger-contrast-background: #ffe8e8;
--ifm-color-danger-contrast-foreground: #6a0808;
--ifm-color-gray-100: var(--color-gray-12);
/*--ifm-color-gray-200: #EBF1F6;
--ifm-color-gray-300: #D5DEE5;
--ifm-color-gray-400: #B1BCC7;
--ifm-color-gray-500: #909DA6;
--ifm-color-gray-600: #74818A;
--ifm-color-gray-700: #616D75;
--ifm-color-gray-800: #404955; */
--ifm-color-gray-900: var(--color-gray-90);
/* --ifm-navbar-background-color; */
/* --ifm-background-color */
--ifm-heading-color: var(--color-gray-74);
--ifm-footer-background-color: var(--color-gray-8);
--ifm-color-content-secondary: #616d75;
--ifm-link-color: #0676c8;
--ifm-menu-color: var(--ifm-color-content);
--ifm-menu-color-active: var(--ifm-color-content);
--ifm-toc-link-color: var(--ifm-color-content);
--ifm-table-stripe-background: var(--color-gray-4-alpha-04);
--ifm-pre-background: var(--color-gray-4);
--ifm-code-background: var(--color-gray-4);
--ifm-code-font-size: 0.875rem; /* 14px */
/* --ifm-pre-color: inherit; */
--ifm-global-shadow-lw: 0px 2px 6px rgba(0, 0, 0, 0.2);
--ifm-global-shadow-md: 0px 4px 14px rgba(0, 0, 0, 0.16);
--ifm-global-shadow-tl: 0px 10px 30px rgba(0, 0, 0, 0.16);
--ifm-global-radius: 0.25rem;
--doc-sidebar-width: 320px !important;
--ifm-navbar-height: 72px !important;
--ifm-font-family-base: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans,
sans-serif, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
--ifm-font-family-monospace: 'IBM Plex Mono Regular', 'IBM Plex Mono', SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace;
--ifm-font-size-base: 16px;
--ifm-line-height-base: 1.5; /* 150% */
--ifm-font-weight-light: 300;
--ifm-font-weight-normal: 400;
--ifm-font-weight-semibold: 500;
--ifm-font-weight-bold: 600;
--ifm-heading-line-height: 1.25;
--ifm-h1-font-size: 2.5rem; /* 40px */
--ifm-h2-font-size: 2rem; /* 32px */
--ifm-h3-font-size: 1.5rem; /* 24px */
--ifm-h4-font-size: 1.25rem; /* 20px */
--ifm-h5-font-size: 1rem; /* 16px */
--ifm-h6-font-size: 0.875rem; /* 14px */
--ifm-small-font-size: 0.75rem; /* 12px */
--ifm-heading-font-weight: var(--ifm-font-weight-semibold);
--ifm-footer-padding-vertical: 3rem;
}
/* Dark Mode Styles */
html[data-theme='dark'] {
--ifm-link-color: #48ADF6;
--ifm-heading-color: var(--color-gray-12);
--ifm-navbar-background-color: var(--color-gray-82);
--ifm-background-color: var(--color-gray-90);
--ifm-hero-background-color: var(--ifm-background-color);
--ifm-table-stripe-background: var(--color-gray-86-alpha-04);
--ifm-pre-background: var(--color-gray-86);
--ifm-code-background: var(--color-gray-86);
--ifm-dropdown-background-color: var(--color-gray-78);
--ifm-card-background-color: var(--color-gray-82);
--ifm-footer-background-color: var(--color-gray-82);
--collapse-button-bg-color-dark: var(--color-gray-86);
--docsearch-searchbox-background: var(--color-gray-90) !important;
--docsearch-searchbox-focus-background: var(--color-gray-86) !important;
}

199
docs/src/css/doc.scss Normal file
View File

@ -0,0 +1,199 @@
theme-doc-breadcrumbs {
.breadcrumbs {
.breadcrumbs__item {
--ifm-breadcrumb-padding-horizontal: 0;
&:first-child {
display: none;
}
.breadcrumbs__link {
background-color: transparent;
}
}
}
}
.markdown {
--ifm-h1-vertical-rhythm-top: 2.5;
h1 {
margin-top: 25px;
}
h1:first-child {
--ifm-h1-font-size: 2.5rem; /* 40px */
}
}
/*
Code blocks
*/
.theme-code-block {
box-shadow: none !important;
}
.prism-code code {
background-color: var(--color-gray-4);
.theme-code-block-highlighted-line {
background-color: var(--color-gray-12);
}
}
html[data-theme='dark'] {
.prism-code code {
background-color: var(--color-gray-86);
.theme-code-block-highlighted-line {
background-color: var(--color-gray-78);
}
}
}
html[data-theme='dark'] {
code {
background-color: var(--color-gray-78);
}
}
.theme-edit-this-page {
display: flex;
align-items: center;
height: 30px;
color: var(--ifm-color-gray-900);
svg {
display: none;
}
&::before,
&::after {
content: '';
display: inline-block;
transform: translateX(0);
transition: transform var(--ifm-transition-fast) linear;
}
&::before {
margin-right: 0.5rem;
background: url('/icons/github-dark.svg') no-repeat;
width: 24px;
height: 24px;
}
&::after {
margin-left: 0.25rem;
background: url('/icons/arrow_right.svg') no-repeat;
width: 1rem;
height: 1rem;
margin-bottom: -0.25rem;
}
&:hover {
text-decoration: none;
color: var(--ifm-color-gray-1000);
&::after {
transform: translateX(0.25rem);
}
}
}
.pagination-nav {
.pagination-nav__link {
&:not(:empty) {
background-color: var(--color-gray-4);
&:hover {
background-color: var(--color-gray-8);
}
border-color: transparent;
box-shadow: var(--ifm-global-shadow-lw);
color: var(--color-gray-74);
.pagination-nav__label {
font-size: 1rem;
}
.pagination-nav__sublabel {
display: none;
}
}
&:first-child .pagination-nav__label::before,
&--next .pagination-nav__label::after {
content: '';
display: inline-block;
background: url('/icons/arrow_right.svg') no-repeat;
width: 1rem;
height: 1rem;
margin-bottom: -0.2rem;
transition: transform var(--ifm-transition-fast) linear;
}
&:first-child {
.pagination-nav__label::before {
margin-right: 0.25rem;
transform: rotate(180deg);
}
&:hover {
.pagination-nav__label::before {
transform: rotate(180deg) translateX(0.25rem);
}
}
}
&--next {
.pagination-nav__label::after {
margin-left: 0.25rem;
}
&:hover {
.pagination-nav__label::after {
transform: translateX(0.25rem);
}
}
}
}
}
/* Dark Mode Styles */
html[data-theme='dark'] {
.pagination-nav {
.pagination-nav__link {
&:not(:empty) {
background-color: var(--color-gray-86);
&:hover {
background-color: var(--color-gray-82);
}
.pagination-nav__link {
color: var(--ifm-color-content-secondary);
}
}
&:first-child .pagination-nav__label::before, &--next .pagination-nav__label::after {
background: url("/icons/arrow_right-light.svg") no-repeat;
}
.pagination-nav__label {
color: white;
}
}
}
.theme-edit-this-page {
&::before, &::after {
filter: invert(1);
}
color: var(--ifm-color-gray-2);
&:hover {
color: var(--ifm-color-gray-0);
}
}
}

13
docs/src/css/footer.scss Normal file
View File

@ -0,0 +1,13 @@
.footer__links {
font-size: 0.75rem;
text-transform: uppercase;
font-weight: 600;
.footer__title {
font-size: 0.75rem;
}
.footer__item {
padding: 0.625rem 0;
}
}

73
docs/src/css/header.scss Normal file
View File

@ -0,0 +1,73 @@
/* Docusaurus Specific Styles */
.header-github-link {
&::before {
content: '';
width: 24px;
height: 24px;
display: flex;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
}
&:hover {
opacity: 0.8;
}
}
/*
Header bar search field keyboard glyphs
*/
.DocSearch-Button-Keys {
:first-child {
font-size: 1.3em
};
:last-child {
font-size: 1em;
}
}
@media (min-width: 768px) {
.DocSearch-Button {
width: 14rem;
}
}
.navbar__item.navbar__link {
font-size: 14px;
line-height: 20px;
}
.nav-link_login {
color: var(--ifm-color-primary);
}
.nav-link_getting-started {
font-weight: 500;
text-transform: capitalize;
white-space: nowrap;
background-color: var(--ifm-color-primary-light);
color: var(--color-gray-0);
border-radius: var(--ifm-global-radius);
padding: 0.5rem 1rem;
margin-right: 0.5rem;
&:hover {
background-color: var(--ifm-color-primary-dark);
color: var(--color-gray-0);
}
}
/* Dark Mode Styles */
html[data-theme='dark'] {
.header-github-link {
&:hover {
opacity: 0.6;
}
&::before {
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
}
}
}

View File

@ -0,0 +1,59 @@
// Custom for index
.custom_doc_item_wrapper-x-wide {
padding-left: 1.5rem;
padding-right: 1.5rem;
.row {
.col {
max-width: 100vw !important;
article {
width: 100%;
}
}
}
}
// Card gallery
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
}
// Card
.card {
display: flex;
flex-direction: column;
// border: solid 1px white;
border-radius: 8px;
padding: 20px;
h4 {
text-transform: uppercase;
font-size: 1.1rem;
}
a {
margin-left: auto;
margin-top: auto;
display: flex;
align-items: center;
}
&:hover {
.arrow {
transform: translateX(5px);
}
}
}
/* Dark Mode Styles */
html[data-theme='dark'] {
.card:hover {
--ifm-card-background-color: var(--color-gray-78) !important;
}
}

209
docs/src/css/sidebar.scss Normal file
View File

@ -0,0 +1,209 @@
.theme-doc-sidebar-container {
background-color: var(--color-gray-4);
.menu {
padding: 0.5rem 0.5rem 0.5rem 0.8rem;
}
}
.theme-doc-sidebar-menu {
font-size: 14px;
font-weight: var(--ifm-font-weight-normal);
.menu__link {
.menu__link--active,
&.menu__link--active {
font-weight: var(--ifm-font-weight-bold);
}
}
}
.menu__list-item--collapsed {
.menu__list-item-collapsible {
&::before {
transform: rotate(0deg) !important;
transition: all var(--ifm-transition-fast) ease-in-out;
}
}
}
.theme-doc-sidebar-menu {
.theme-doc-sidebar-item-category {
.theme-doc-sidebar-item-link {
margin-top: 0;
.menu__link {
//border-left: 0.1rem solid var(--color-gray-16);
border-radius: 0 0.25rem 0.25rem 0;
}
.menu__link--active {
//border-left: 0.1rem solid var(--color-gray-82);
}
}
}
.theme-doc-sidebar-item-link-level-1.menu__list-item,
.theme-doc-sidebar-item-link-level-2.menu__list-item {
display: flex;
align-items: center;
&::before {
content: '';
display: inline-block;
//background: url("/icons/dot-light.svg") no-repeat;
//width: 1rem;
//height: 1rem;
//transform: scale(0.7);
}
.menu__link {
border-left: none;
justify-content: flex-start;
}
}
.menu__list-item {
// margin-top: 0;
.menu__caret {
display: flex;
align-items: center;
justify-content: center;
//position: absolute;
top: 0px;
left: 0px;
padding: 0 0;
}
.menu__caret::before,
.menu__link--sublist::after {
min-width: 1.5rem;
width: 1.5rem;
height: 1.5rem;
background: url('/icons/chevron-top.svg') no-repeat;
background-position: center center;
min-height: 29.5px;
}
.menu__list-item-collapsible {
&::before {
height: auto;
background-position: center center;
transform: rotate(90deg);
transition: all 0.3s ease-in-out;
}
.menu__link--active {
background: var(--ifm-menu-color-background-active) !important;
}
}
}
}
/* Dark Mode Styles */
html[data-theme='dark'] {
.theme-doc-sidebar-container {
background-color: var(--color-gray-86);
button[class*='collapseSidebarButton_'], div[class*='collapsedDocSidebar_'] {
&::before {
background: url('/icons/collapse-arrow-left-light.svg') no-repeat;
}
&:hover {
background-color: var(--color-gray-82);
}
}
}
.theme-doc-sidebar-menu {
.theme-doc-sidebar-item-link-level-1.menu__list-item, .theme-doc-sidebar-item-link-level-2.menu__list-item {
&::before {
background: url('/icons/dot.svg') no-repeat;
}
.menu__link {
border-left: none;
}
}
.theme-doc-sidebar-item-category.cloud-icon {
.menu__list-item-collapsible {
.menu__link {
&:after {
background: url('/icons/cloud-light.svg') no-repeat;
}
}
}
}
.theme-doc-sidebar-item-category.enterprise-icon {
.menu__list-item-collapsible {
.menu__link {
&:after {
background: url('/icons/enterprise-light.svg') no-repeat;
}
}
}
}
.theme-doc-sidebar-item-link.cloud-and-enterprise-icon {
.menu__link {
position: relative;
&:after {
background: url('/icons/ce_ee_light.svg') no-repeat;
}
}
}
.theme-doc-sidebar-item-category.cloud-and-enterprise-icon {
.menu__list-item-collapsible {
.menu__link {
&:after {
background: url('/icons/ce_ee_light.svg') no-repeat;
margin-left: 5px;
}
}
}
}
.theme-doc-sidebar-item-link.cloud-icon {
.menu__link {
&:after {
background: url('/icons/cloud-light.svg') no-repeat;
background-position: right center;
}
&:hover {
&:before {
background-color: var(--color-gray-74);
color: var(--color-gray-0);
box-shadow: 0px 12px 66px rgba(12, 16, 21, 0.4);
}
}
}
}
.theme-doc-sidebar-item-category.cloud-icon, .theme-doc-sidebar-item-category.enterprise-icon {
.menu__list-item-collapsible {
.menu__link {
&:after {
background-position: right center;
}
&:hover {
&:before {
background-color: var(--color-gray-74);
color: var(--color-gray-0);
box-shadow: 0px 12px 66px rgba(12, 16, 21, 0.4);
}
}
}
}
}
}
}

View File

@ -0,0 +1,36 @@
.table-of-contents {
margin-left: 0;
padding-left: var(--ifm-toc-padding-horizontal);
&.table-of-contents__left-border {
border-left: 1px solid var(--color-gray-16);
}
.table-of-contents__link {
display: block;
font-size: 0.75rem;
}
.table-of-contents__link--active {
font-weight: var(--ifm-font-weight-bold);
border-left: 0.125rem solid var(--color-gray-82);
color: var(--ifm-font-color-base);
margin-left: -1rem;
padding-left: 0.75rem;
}
}
/* Dark Mode Styles */
html[data-theme='dark'] {
.table-of-contents {
&.table-of-contents__left-border {
border-left: 1px solid var(--color-gray-74);
}
.table-of-contents__link--active {
border-left: 0.125rem solid var(--color-gray-16);
}
}
}

View File

@ -1,27 +0,0 @@
.doc-sidebar-tabs {
display: flex;
justify-content: center;
align-items: center;
display: inline-flex;
justify-content: center;
padding: 0.25rem 0.25rem 0;
margin-bottom: 0.5rem;
border: 1px solid transparent;
border-right-color: var(--ifm-toc-border-color);
border-bottom-color: var(--ifm-toc-border-color);
.link-tab {
font-weight: var(--ifm-font-weight-bold);
font-size: var(--ifm-code-font-size);
text-decoration: none;
text-transform: capitalize;
white-space: nowrap;
color: var(--color-gray-72);
padding: 0.5rem 0;
margin: 0.5rem 1rem -1px;
border-bottom: 3px solid transparent;
&.active {
border-bottom-color: var(--ifm-color-primary-light);
}
}
}

View File

@ -1,18 +0,0 @@
import React from "react";
import Content from "@theme-original/DocSidebar/Desktop/Content";
import VersionedLink from "@site/src/components/VersionedLink";
import styles from "./customStyles.module.scss";
import useIsBrowser from "@docusaurus/useIsBrowser";
export default function ContentWrapper(props) {
const isBrowser = useIsBrowser();
const isCloudDocs =
isBrowser && window.location.pathname.includes("/graphql/cloud/");
const isCoreDocs =
isBrowser && window.location.pathname.includes("/graphql/core/");
return (
<>
<Content {...props} />
</>
);
}

View File

@ -1,8 +0,0 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/// <reference types="react" />
export default function SearchBar(): JSX.Element;

View File

@ -1,216 +0,0 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React, { useState, useRef, useCallback, useMemo, Fragment } from "react";
import { createPortal } from "react-dom";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import { useHistory } from "@docusaurus/router";
import { useBaseUrlUtils } from "@docusaurus/useBaseUrl";
import Link from "@docusaurus/Link";
import Head from "@docusaurus/Head";
import { isRegexpStringMatch, useSearchPage } from "@docusaurus/theme-common";
import { DocSearchButton, useDocSearchKeyboardEvents } from "@docsearch/react";
import { useAlgoliaContextualFacetFilters } from "@docusaurus/theme-search-algolia/client";
import Translate, { translate } from "@docusaurus/Translate";
import styles from "./styles.module.css";
let DocSearchModal = null;
// Customization START
// In the event of re-swizzling, just change this component others can be updated as whatever they are in new version.
function Hit({ hit, children }) {
const isCloud = hit.url?.includes("/graphql/cloud/");
return (
<Fragment>
{isCloud ? (
<span className="docIdentifier badge badge--success">cloud</span>
) : null}
<Link to={hit.url}>{children}</Link>
</Fragment>
);
}
// Customization END
function ResultsFooter({ state, onClose }) {
const { generateSearchPageLink } = useSearchPage();
return (
<Link to={generateSearchPageLink(state.query)} onClick={onClose}>
<Translate
id="theme.SearchBar.seeAll"
values={{ count: state.context.nbHits }}
>
{"See all {count} results"}
</Translate>
</Link>
);
}
function mergeFacetFilters(f1, f2) {
const normalize = (f) => (typeof f === "string" ? [f] : f);
return [...normalize(f1), ...normalize(f2)];
}
function DocSearch({ contextualSearch, externalUrlRegex, ...props }) {
const { siteMetadata } = useDocusaurusContext();
const contextualSearchFacetFilters = useAlgoliaContextualFacetFilters();
const configFacetFilters = props.searchParameters?.facetFilters ?? [];
const facetFilters = contextualSearch
? // Merge contextual search filters with config filters
mergeFacetFilters(contextualSearchFacetFilters, configFacetFilters)
: // ... or use config facetFilters
configFacetFilters;
// we let user override default searchParameters if he wants to
const searchParameters = {
...props.searchParameters,
facetFilters,
};
const { withBaseUrl } = useBaseUrlUtils();
const history = useHistory();
const searchContainer = useRef(null);
const searchButtonRef = useRef(null);
const [isOpen, setIsOpen] = useState(false);
const [initialQuery, setInitialQuery] = useState(undefined);
const importDocSearchModalIfNeeded = useCallback(() => {
if (DocSearchModal) {
return Promise.resolve();
}
return Promise.all([
import("@docsearch/react/modal"),
import("@docsearch/react/style"),
import("./styles.css"),
]).then(([{ DocSearchModal: Modal }]) => {
DocSearchModal = Modal;
});
}, []);
const onOpen = useCallback(() => {
importDocSearchModalIfNeeded().then(() => {
searchContainer.current = document.createElement("div");
document.body.insertBefore(
searchContainer.current,
document.body.firstChild
);
setIsOpen(true);
});
}, [importDocSearchModalIfNeeded, setIsOpen]);
const onClose = useCallback(() => {
setIsOpen(false);
searchContainer.current?.remove();
}, [setIsOpen]);
const onInput = useCallback(
(event) => {
importDocSearchModalIfNeeded().then(() => {
setIsOpen(true);
setInitialQuery(event.key);
});
},
[importDocSearchModalIfNeeded, setIsOpen, setInitialQuery]
);
const navigator = useRef({
navigate({ itemUrl }) {
// Algolia results could contain URL's from other domains which cannot
// be served through history and should navigate with window.location
if (isRegexpStringMatch(externalUrlRegex, itemUrl)) {
window.location.href = itemUrl;
} else {
history.push(itemUrl);
}
},
}).current;
const transformItems = useRef((items) =>
items.map((item) => {
// If Algolia contains a external domain, we should navigate without
// relative URL
if (isRegexpStringMatch(externalUrlRegex, item.url)) {
return item;
}
// We transform the absolute URL into a relative URL.
const url = new URL(item.url);
return {
...item,
url: withBaseUrl(`${url.pathname}${url.hash}`),
};
})
).current;
const resultsFooterComponent = useMemo(
() =>
// eslint-disable-next-line react/no-unstable-nested-components
(footerProps) =>
<ResultsFooter {...footerProps} onClose={onClose} />,
[onClose]
);
const transformSearchClient = useCallback(
(searchClient) => {
searchClient.addAlgoliaAgent(
"docusaurus",
siteMetadata.docusaurusVersion
);
return searchClient;
},
[siteMetadata.docusaurusVersion]
);
useDocSearchKeyboardEvents({
isOpen,
onOpen,
onClose,
onInput,
searchButtonRef,
});
const translatedSearchLabel = translate({
id: "theme.SearchBar.label",
message: "Search",
description: "The ARIA label and placeholder for search button",
});
return (
<>
<Head>
{/* This hints the browser that the website will load data from Algolia,
and allows it to preconnect to the DocSearch cluster. It makes the first
query faster, especially on mobile. */}
<link
rel="preconnect"
href={`https://${props.appId}-dsn.algolia.net`}
crossOrigin="anonymous"
/>
</Head>
<div className={styles.searchBox}>
<DocSearchButton
onTouchStart={importDocSearchModalIfNeeded}
onFocus={importDocSearchModalIfNeeded}
onMouseOver={importDocSearchModalIfNeeded}
onClick={onOpen}
ref={searchButtonRef}
translations={{
buttonText: translatedSearchLabel,
buttonAriaLabel: translatedSearchLabel,
}}
/>
</div>
{isOpen &&
DocSearchModal &&
searchContainer.current &&
createPortal(
<DocSearchModal
onClose={onClose}
initialScrollY={window.scrollY}
initialQuery={initialQuery}
navigator={navigator}
transformItems={transformItems}
hitComponent={Hit}
transformSearchClient={transformSearchClient}
{...(props.searchPagePath && {
resultsFooterComponent,
})}
{...props}
searchParameters={searchParameters}
/>,
searchContainer.current
)}
</>
);
}
export default function SearchBar() {
const { siteConfig } = useDocusaurusContext();
return <DocSearch {...siteConfig.themeConfig.algolia} />;
}

View File

@ -1,32 +0,0 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
:root {
--docsearch-primary-color: var(--ifm-color-primary);
--docsearch-text-color: var(--ifm-font-color-base);
}
.DocSearch-Button {
margin: 0;
transition: all var(--ifm-transition-fast)
var(--ifm-transition-timing-default);
}
.DocSearch-Container {
z-index: calc(var(--ifm-z-index-fixed) + 1);
}
/* Customization START */
.DocSearch-Hit {
position: relative;
}
.DocSearch-Hit .docIdentifier {
position: absolute;
right: 0;
}
/* Customization END */

View File

@ -1,20 +0,0 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
@media (max-width: 996px) {
.searchBox {
position: absolute;
right: var(--ifm-navbar-padding-horizontal);
}
}
@media (min-width: 997px) {
.searchBox {
padding: var(--ifm-navbar-item-padding-vertical)
var(--ifm-navbar-item-padding-horizontal);
}
}

View File

@ -1,8 +0,0 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/// <reference types="react" />
export default function SearchPage(): JSX.Element;

File diff suppressed because one or more lines are too long

View File

@ -1,119 +0,0 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.searchQueryInput,
.searchVersionInput {
border-radius: var(--ifm-global-radius);
border: 2px solid var(--ifm-toc-border-color);
font: var(--ifm-font-size-base) var(--ifm-font-family-base);
padding: 0.8rem;
width: 100%;
background: var(--docsearch-searchbox-focus-background);
color: var(--docsearch-text-color);
margin-bottom: 0.5rem;
transition: border var(--ifm-transition-fast) ease;
}
.searchQueryInput:focus,
.searchVersionInput:focus {
border-color: var(--docsearch-primary-color);
outline: none;
}
.searchQueryInput::placeholder {
color: var(--docsearch-muted-color);
}
.searchResultsColumn {
font-size: 0.9rem;
font-weight: bold;
}
.algoliaLogo {
max-width: 150px;
}
.algoliaLogoPathFill {
fill: var(--ifm-font-color-base);
}
.searchResultItem {
padding: 1rem 0;
border-bottom: 1px solid var(--ifm-toc-border-color);
}
.searchResultItemHeading {
font-weight: 400;
margin-bottom: 0;
}
.searchResultItemPath {
font-size: 0.8rem;
color: var(--ifm-color-content-secondary);
--ifm-breadcrumb-separator-size-multiplier: 1;
}
.searchResultItemSummary {
margin: 0.5rem 0 0;
font-style: italic;
}
@media only screen and (max-width: 996px) {
.searchQueryColumn {
max-width: 60% !important;
}
.searchVersionColumn {
max-width: 40% !important;
}
.searchResultsColumn {
max-width: 60% !important;
}
.searchLogoColumn {
max-width: 40% !important;
padding-left: 0 !important;
}
}
@media screen and (max-width: 576px) {
.searchQueryColumn {
max-width: 100% !important;
}
.searchVersionColumn {
max-width: 100% !important;
padding-left: var(--ifm-spacing-horizontal) !important;
}
}
.loadingSpinner {
width: 3rem;
height: 3rem;
border: 0.4em solid #eee;
border-top-color: var(--ifm-color-primary);
border-radius: 50%;
animation: loading-spin 1s linear infinite;
margin: 0 auto;
}
@keyframes loading-spin {
100% {
transform: rotate(360deg);
}
}
.loader {
margin-top: 2rem;
}
:global(.search-result-match) {
color: var(--docsearch-hit-color);
background: rgb(255 215 142 / 25%);
padding: 0.09em 0;
}

View File

@ -1,9 +1,3 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import styles from './styles.module.css';
import TOCItems from '@theme/TOCItems';

View File

@ -1,10 +1,3 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.tableOfContentsInline ul {
list-style-type: disc;
font-size: initial;

View File

@ -0,0 +1,33 @@
import React from "react";
// Recursive component rendering the toc tree
function TOCItemTree({ toc, className, linkClassName, isChild }) {
if (!toc.length) {
return null;
}
return (
<ul className={isChild ? undefined : className}>
{toc.map((heading) => (
<li key={heading.id}>
{/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
<a
href={`#${heading.id}`}
className={linkClassName ?? undefined}
// Developer provided the HTML, so assume it's safe.
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: heading.value }}
/>
<TOCItemTree
isChild
toc={heading.children}
className={className}
linkClassName={linkClassName}
/>
</li>
))}
</ul>
);
}
// Memo only the tree root is enough
export default React.memo(TOCItemTree);

View File

@ -1,64 +1,7 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React, {useMemo} from 'react';
import {
useThemeConfig,
useTOCHighlight,
useFilteredAndTreeifiedTOC,
} from '@docusaurus/theme-common'; // Recursive component rendering the toc tree
/* eslint-disable jsx-a11y/control-has-associated-label */
function TOCItemList({toc, className, linkClassName, isChild}) {
if (!toc.length) {
return null;
}
return (
<ul className={isChild ? undefined : className}>
{toc.map((heading) => (
<li key={heading.id}>
<a
href={`#${heading.id}`}
className={linkClassName ?? undefined} // Developer provided the HTML, so assume it's safe.
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: heading.value,
}}
/>
<TOCItemList
isChild
toc={heading.children}
className={className}
linkClassName={linkClassName}
/>
</li>
))}
</ul>
);
}
// find descendent with searchId as id using DFS and return its children
function findTOC(tocTree, searchId) {
for(let i = 0; i < tocTree.length; i++ ) {
let tocTreeNode = tocTree[i];
if (tocTreeNode.id === searchId) {
return tocTreeNode.children;
}
let searchResult = findTOC(tocTreeNode.children, searchId);
if (searchResult) {
return searchResult;
}
}
return null;
}
import React, { useMemo } from 'react';
import { useThemeConfig } from '@docusaurus/theme-common';
import { useTOCHighlight, useFilteredAndTreeifiedTOC } from '@docusaurus/theme-common/internal';
import TOCItemTree from '@theme/TOCItems/Tree';
export default function TOCItems({
toc,
@ -70,34 +13,73 @@ export default function TOCItems({
...props
}) {
const themeConfig = useThemeConfig();
const minHeadingLevel =
minHeadingLevelOption ?? themeConfig.tableOfContents.minHeadingLevel;
const maxHeadingLevel =
maxHeadingLevelOption ?? themeConfig.tableOfContents.maxHeadingLevel;
// In the event of re-swizzling, make sure to change the tocTree declaration above to `let`
const minHeadingLevel = minHeadingLevelOption ?? themeConfig.tableOfContents.minHeadingLevel;
const maxHeadingLevel = maxHeadingLevelOption ?? themeConfig.tableOfContents.maxHeadingLevel;
let tocTree = useFilteredAndTreeifiedTOC({
toc,
minHeadingLevel,
maxHeadingLevel,
});
/* eslint-disable jsx-a11y/control-has-associated-label */
function TOCItemList({ toc, className, linkClassName, isChild }) {
if (!toc.length) {
return null;
}
return (
<ul className={isChild ? undefined : className}>
{toc.map(heading => (
<li key={heading.id}>
<a
href={`#${heading.id}`}
className={linkClassName ?? undefined} // Developer provided the HTML, so assume it's safe.
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: heading.value,
}}
/>
<TOCItemList isChild toc={heading.children} className={className} linkClassName={linkClassName} />
</li>
))}
</ul>
);
}
// find descendent with searchId as id using DFS and return its children
function findTOC(tocTree, searchId) {
for (let i = 0; i < tocTree.length; i++) {
let tocTreeNode = tocTree[i];
if (tocTreeNode.id === searchId) {
return tocTreeNode.children;
}
let searchResult = findTOC(tocTreeNode.children, searchId);
if (searchResult) {
return searchResult;
}
}
return null;
}
// Customization START
// In the event of re-swizzling, need to copy below snippet and add back in the newly swizzled TOCItems component
// This block should always come after the `tocTree` variable which holds results from `useFilteredAndTreeifiedTOC`
// This block should alwways come after the `tocTree` variable which holds results from `useFilteredAndTreeifiedTOC`
// make sure to change the tocTree declaration above to `let`
if (typeof props.filterTOC === "function") {
if (typeof props.filterTOC === 'function') {
tocTree = props.filterTOC(tocTree);
}
if (typeof props.filterTOC === "string") {
tocTree = findTOC(tocTree, props.filterTOC)
if (typeof props.filterTOC === 'string') {
tocTree = findTOC(tocTree, props.filterTOC);
}
if(!tocTree) {
if (!tocTree) {
throw new Error('TOCInline error: filter gives no result');
}
// Customization END
const tocHighlightConfig = useMemo(() => {
if (linkClassName && linkActiveClassName) {
return {
@ -107,16 +89,8 @@ export default function TOCItems({
maxHeadingLevel,
};
}
return undefined;
}, [linkClassName, linkActiveClassName, minHeadingLevel, maxHeadingLevel]);
useTOCHighlight(tocHighlightConfig);
return (
<TOCItemList
toc={tocTree}
className={className}
linkClassName={linkClassName}
{...props}
/>
);
return <TOCItemTree toc={tocTree} className={className} linkClassName={linkClassName} {...props} />;
}

File diff suppressed because it is too large Load Diff