mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-12-14 08:02:15 +03:00
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
hasura-bot
parent
cdb62ff277
commit
619cc552f0
8
docs/.gitignore
vendored
8
docs/.gitignore
vendored
@ -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
26
docs/.prettierrc.json
Normal 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
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
5
docs/.yarnrc
Normal 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
3
docs/.yarnrc.yml
Normal file
@ -0,0 +1,3 @@
|
||||
nodeLinker: node-modules
|
||||
|
||||
yarnPath: .yarn/releases/yarn-3.2.4.cjs
|
||||
@ -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)
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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}
|
||||
|
||||
|
||||
@ -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}
|
||||
|
||||
|
||||
@ -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:
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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"
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
5
docs/src/css/admonitions.scss
Normal file
5
docs/src/css/admonitions.scss
Normal file
@ -0,0 +1,5 @@
|
||||
.theme-admonition {
|
||||
.admonitionHeading_node_modules-\@docusaurus-theme-classic-lib-theme-Admonition-styles-module {
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
290
docs/src/css/cloud-and-enterprise-menu-icons.scss
Normal file
290
docs/src/css/cloud-and-enterprise-menu-icons.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
37
docs/src/css/cloud-db-icon-gallery.scss
Normal file
37
docs/src/css/cloud-db-icon-gallery.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
224
docs/src/css/default-fonts-and-colors.scss
Normal file
224
docs/src/css/default-fonts-and-colors.scss
Normal 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
199
docs/src/css/doc.scss
Normal 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
13
docs/src/css/footer.scss
Normal 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
73
docs/src/css/header.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
59
docs/src/css/introduction-page.scss
Normal file
59
docs/src/css/introduction-page.scss
Normal 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
209
docs/src/css/sidebar.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
36
docs/src/css/table-of-contents.scss
Normal file
36
docs/src/css/table-of-contents.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
8
docs/src/theme/SearchBar/index.d.ts
vendored
8
docs/src/theme/SearchBar/index.d.ts
vendored
@ -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;
|
||||
@ -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} />;
|
||||
}
|
||||
@ -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 */
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
8
docs/src/theme/SearchPage/index.d.ts
vendored
8
docs/src/theme/SearchPage/index.d.ts
vendored
@ -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
@ -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;
|
||||
}
|
||||
@ -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';
|
||||
|
||||
@ -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;
|
||||
|
||||
33
docs/src/theme/TOCItems/Tree.js
Normal file
33
docs/src/theme/TOCItems/Tree.js
Normal 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);
|
||||
@ -1,26 +1,36 @@
|
||||
/**
|
||||
* 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
|
||||
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';
|
||||
|
||||
/* eslint-disable jsx-a11y/control-has-associated-label */
|
||||
export default function TOCItems({
|
||||
toc,
|
||||
className = 'table-of-contents table-of-contents__left-border',
|
||||
linkClassName = 'table-of-contents__link',
|
||||
linkActiveClassName = undefined,
|
||||
minHeadingLevel: minHeadingLevelOption,
|
||||
maxHeadingLevel: maxHeadingLevelOption,
|
||||
...props
|
||||
}) {
|
||||
const themeConfig = useThemeConfig();
|
||||
const minHeadingLevel = minHeadingLevelOption ?? themeConfig.tableOfContents.minHeadingLevel;
|
||||
const maxHeadingLevel = maxHeadingLevelOption ?? themeConfig.tableOfContents.maxHeadingLevel;
|
||||
let tocTree = useFilteredAndTreeifiedTOC({
|
||||
toc,
|
||||
minHeadingLevel,
|
||||
maxHeadingLevel,
|
||||
});
|
||||
|
||||
function TOCItemList({toc, className, linkClassName, isChild}) {
|
||||
/* 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) => (
|
||||
{toc.map(heading => (
|
||||
<li key={heading.id}>
|
||||
<a
|
||||
href={`#${heading.id}`}
|
||||
@ -30,21 +40,16 @@ function TOCItemList({toc, className, linkClassName, isChild}) {
|
||||
__html: heading.value,
|
||||
}}
|
||||
/>
|
||||
<TOCItemList
|
||||
isChild
|
||||
toc={heading.children}
|
||||
className={className}
|
||||
linkClassName={linkClassName}
|
||||
/>
|
||||
<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++ ) {
|
||||
// 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) {
|
||||
@ -58,46 +63,23 @@ function findTOC(tocTree, searchId) {
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export default function TOCItems({
|
||||
toc,
|
||||
className = 'table-of-contents table-of-contents__left-border',
|
||||
linkClassName = 'table-of-contents__link',
|
||||
linkActiveClassName = undefined,
|
||||
minHeadingLevel: minHeadingLevelOption,
|
||||
maxHeadingLevel: maxHeadingLevelOption,
|
||||
...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`
|
||||
let tocTree = useFilteredAndTreeifiedTOC({
|
||||
toc,
|
||||
minHeadingLevel,
|
||||
maxHeadingLevel,
|
||||
});
|
||||
}
|
||||
|
||||
// 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} />;
|
||||
}
|
||||
|
||||
22613
docs/yarn.lock
22613
docs/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user