From 3f5fb332a856e475dc6d628328c52edbf5d72f1c Mon Sep 17 00:00:00 2001 From: s0ham075 Date: Sat, 26 Jul 2025 22:16:49 +0530 Subject: [PATCH 1/4] Docusaurus version upgrade --- docs/API/create-deliverable.api.mdx | 27 +- docs/API/create-image-variable-folder.api.mdx | 20 - docs/API/create-tag.api.mdx | 20 - docs/API/delete-tags-by-i-ds.api.mdx | 19 - docs/API/delete-template.api.mdx | 19 - docs/API/delete-variables-by-i-ds.api.mdx | 19 - docs/API/edit-template-metadata.api.mdx | 19 - ...-placeholders-and-generate-preview.api.mdx | 19 - docs/API/get-template-by-id.api.mdx | 20 - docs/API/get-templates-and-folders.api.mdx | 19 - docs/API/read-tag.api.mdx | 19 - docs/API/read-variables-folder.api.mdx | 19 - docs/API/update-tag.api.mdx | 19 - docs/API/update-variable-by-id.api.mdx | 19 - ...plate-with-optional-default-values.api.mdx | 19 - .../Additional Information.md | 8 +- .../How to Create a Document Template.md | 6 +- .../How to Create a Template.md | 6 +- .../Template Troubleshooting.md | 4 +- docusaurus.config.js | 32 +- package.json | 41 +- searchPlugin.js | 16 +- src/components/BodyTable.jsx | 4 +- src/components/HeadersTable.jsx | 28 +- src/components/JsonToTable.jsx | 56 +- src/components/QueryTable.jsx | 12 +- src/css/api.scss | 39 +- src/css/chatbot.scss | 34 +- src/css/custom-templates.scss | 59 +- src/css/custom.css | 22 +- src/css/custom.scss | 86 +- src/css/design-preferences.scss | 102 +- src/css/headings-and-paragraphs.scss | 57 +- src/css/legacy.scss | 1748 +++++++++-------- src/css/root-and-body.scss | 44 +- src/css/sidebar.scss | 28 +- src/pages/index.tsx | 6 +- src/theme/MDXComponents/index.js | 12 + src/theme/MDXContent/index.js | 40 +- src/theme/SearchBar.js | 116 +- 40 files changed, 1424 insertions(+), 1478 deletions(-) diff --git a/docs/API/create-deliverable.api.mdx b/docs/API/create-deliverable.api.mdx index 5552a65..968b207 100644 --- a/docs/API/create-deliverable.api.mdx +++ b/docs/API/create-deliverable.api.mdx @@ -10,25 +10,14 @@ sidebar_class_name: "post api-method" info_path: docs/API/turbodocx-api-documentation custom_edit_url: null --- - - - - import ApiTabs from "@theme/ApiTabs"; - import DiscriminatorTabs from "@theme/DiscriminatorTabs"; - import MethodEndpoint from "@theme/ApiExplorer/MethodEndpoint"; - import SecuritySchemes from "@theme/ApiExplorer/SecuritySchemes"; - import MimeTabs from "@theme/MimeTabs"; - import ParamsItem from "@theme/ParamsItem"; - import ResponseSamples from "@theme/ResponseSamples"; - import SchemaItem from "@theme/SchemaItem"; - import SchemaTabs from "@theme/SchemaTabs"; - - import JsonToTable from '@site/src/components/JsonToTable'; - import BodyTable from '@site/src/components/BodyTable'; - import QueryTable from '@site/src/components/QueryTable'; - import HeadersTable from '@site/src/components/HeadersTable'; - import DisplayJson from '@site/src/components/DisplayJson'; - import DisplayEndpoint from '@site/src/components/DisplayEndpoint'; +import ApiTabs from "@theme/ApiTabs"; +import DiscriminatorTabs from "@theme/DiscriminatorTabs"; +import MethodEndpoint from "@theme/ApiExplorer/MethodEndpoint"; +import SecuritySchemes from "@theme/ApiExplorer/SecuritySchemes"; +import MimeTabs from "@theme/MimeTabs"; +import ParamsItem from "@theme/ParamsItem"; +import SchemaItem from "@theme/SchemaItem"; +import SchemaTabs from "@theme/SchemaTabs" # Create Deliverable diff --git a/docs/API/create-image-variable-folder.api.mdx b/docs/API/create-image-variable-folder.api.mdx index 07d7fdf..6b3d529 100644 --- a/docs/API/create-image-variable-folder.api.mdx +++ b/docs/API/create-image-variable-folder.api.mdx @@ -10,26 +10,6 @@ sidebar_class_name: "post api-method" info_path: docs/API/turbodocx-api-documentation custom_edit_url: null --- - - - - import ApiTabs from "@theme/ApiTabs"; - import DiscriminatorTabs from "@theme/DiscriminatorTabs"; - import MethodEndpoint from "@theme/ApiExplorer/MethodEndpoint"; - import SecuritySchemes from "@theme/ApiExplorer/SecuritySchemes"; - import MimeTabs from "@theme/MimeTabs"; - import ParamsItem from "@theme/ParamsItem"; - import ResponseSamples from "@theme/ResponseSamples"; - import SchemaItem from "@theme/SchemaItem"; - import SchemaTabs from "@theme/SchemaTabs"; - - import JsonToTable from '@site/src/components/JsonToTable'; - import BodyTable from '@site/src/components/BodyTable'; - import QueryTable from '@site/src/components/QueryTable'; - import HeadersTable from '@site/src/components/HeadersTable'; - import DisplayJson from '@site/src/components/DisplayJson'; - import DisplayEndpoint from '@site/src/components/DisplayEndpoint'; - # Create Image Variable (Folder) Create Image Variable (Folder) diff --git a/docs/API/create-tag.api.mdx b/docs/API/create-tag.api.mdx index 90dd1db..24e7c7f 100644 --- a/docs/API/create-tag.api.mdx +++ b/docs/API/create-tag.api.mdx @@ -10,26 +10,6 @@ sidebar_class_name: "post api-method" info_path: docs/API/turbodocx-api-documentation custom_edit_url: null --- - - - - import ApiTabs from "@theme/ApiTabs"; - import DiscriminatorTabs from "@theme/DiscriminatorTabs"; - import MethodEndpoint from "@theme/ApiExplorer/MethodEndpoint"; - import SecuritySchemes from "@theme/ApiExplorer/SecuritySchemes"; - import MimeTabs from "@theme/MimeTabs"; - import ParamsItem from "@theme/ParamsItem"; - import ResponseSamples from "@theme/ResponseSamples"; - import SchemaItem from "@theme/SchemaItem"; - import SchemaTabs from "@theme/SchemaTabs"; - - import JsonToTable from '@site/src/components/JsonToTable'; - import BodyTable from '@site/src/components/BodyTable'; - import QueryTable from '@site/src/components/QueryTable'; - import HeadersTable from '@site/src/components/HeadersTable'; - import DisplayJson from '@site/src/components/DisplayJson'; - import DisplayEndpoint from '@site/src/components/DisplayEndpoint'; - # Create Tag Create Tag diff --git a/docs/API/delete-tags-by-i-ds.api.mdx b/docs/API/delete-tags-by-i-ds.api.mdx index 12eb9b4..c2dfb00 100644 --- a/docs/API/delete-tags-by-i-ds.api.mdx +++ b/docs/API/delete-tags-by-i-ds.api.mdx @@ -11,25 +11,6 @@ info_path: docs/API/turbodocx-api-documentation custom_edit_url: null --- - - - import ApiTabs from "@theme/ApiTabs"; - import DiscriminatorTabs from "@theme/DiscriminatorTabs"; - import MethodEndpoint from "@theme/ApiExplorer/MethodEndpoint"; - import SecuritySchemes from "@theme/ApiExplorer/SecuritySchemes"; - import MimeTabs from "@theme/MimeTabs"; - import ParamsItem from "@theme/ParamsItem"; - import ResponseSamples from "@theme/ResponseSamples"; - import SchemaItem from "@theme/SchemaItem"; - import SchemaTabs from "@theme/SchemaTabs"; - - import JsonToTable from '@site/src/components/JsonToTable'; - import BodyTable from '@site/src/components/BodyTable'; - import QueryTable from '@site/src/components/QueryTable'; - import HeadersTable from '@site/src/components/HeadersTable'; - import DisplayJson from '@site/src/components/DisplayJson'; - import DisplayEndpoint from '@site/src/components/DisplayEndpoint'; - # Delete Tags (by IDs) Delete Tags (by IDs) diff --git a/docs/API/delete-template.api.mdx b/docs/API/delete-template.api.mdx index b0cb91f..05579d3 100644 --- a/docs/API/delete-template.api.mdx +++ b/docs/API/delete-template.api.mdx @@ -11,25 +11,6 @@ info_path: docs/API/turbodocx-api-documentation custom_edit_url: null --- - - - import ApiTabs from "@theme/ApiTabs"; - import DiscriminatorTabs from "@theme/DiscriminatorTabs"; - import MethodEndpoint from "@theme/ApiExplorer/MethodEndpoint"; - import SecuritySchemes from "@theme/ApiExplorer/SecuritySchemes"; - import MimeTabs from "@theme/MimeTabs"; - import ParamsItem from "@theme/ParamsItem"; - import ResponseSamples from "@theme/ResponseSamples"; - import SchemaItem from "@theme/SchemaItem"; - import SchemaTabs from "@theme/SchemaTabs"; - - import JsonToTable from '@site/src/components/JsonToTable'; - import BodyTable from '@site/src/components/BodyTable'; - import QueryTable from '@site/src/components/QueryTable'; - import HeadersTable from '@site/src/components/HeadersTable'; - import DisplayJson from '@site/src/components/DisplayJson'; - import DisplayEndpoint from '@site/src/components/DisplayEndpoint'; - # Delete Template Delete Template diff --git a/docs/API/delete-variables-by-i-ds.api.mdx b/docs/API/delete-variables-by-i-ds.api.mdx index 9ee4aa3..8f6af25 100644 --- a/docs/API/delete-variables-by-i-ds.api.mdx +++ b/docs/API/delete-variables-by-i-ds.api.mdx @@ -11,25 +11,6 @@ info_path: docs/API/turbodocx-api-documentation custom_edit_url: null --- - - - import ApiTabs from "@theme/ApiTabs"; - import DiscriminatorTabs from "@theme/DiscriminatorTabs"; - import MethodEndpoint from "@theme/ApiExplorer/MethodEndpoint"; - import SecuritySchemes from "@theme/ApiExplorer/SecuritySchemes"; - import MimeTabs from "@theme/MimeTabs"; - import ParamsItem from "@theme/ParamsItem"; - import ResponseSamples from "@theme/ResponseSamples"; - import SchemaItem from "@theme/SchemaItem"; - import SchemaTabs from "@theme/SchemaTabs"; - - import JsonToTable from '@site/src/components/JsonToTable'; - import BodyTable from '@site/src/components/BodyTable'; - import QueryTable from '@site/src/components/QueryTable'; - import HeadersTable from '@site/src/components/HeadersTable'; - import DisplayJson from '@site/src/components/DisplayJson'; - import DisplayEndpoint from '@site/src/components/DisplayEndpoint'; - # Delete Variables (by IDs) Delete Variables (by IDs) diff --git a/docs/API/edit-template-metadata.api.mdx b/docs/API/edit-template-metadata.api.mdx index a71ed6b..9b209d3 100644 --- a/docs/API/edit-template-metadata.api.mdx +++ b/docs/API/edit-template-metadata.api.mdx @@ -11,25 +11,6 @@ info_path: docs/API/turbodocx-api-documentation custom_edit_url: null --- - - - import ApiTabs from "@theme/ApiTabs"; - import DiscriminatorTabs from "@theme/DiscriminatorTabs"; - import MethodEndpoint from "@theme/ApiExplorer/MethodEndpoint"; - import SecuritySchemes from "@theme/ApiExplorer/SecuritySchemes"; - import MimeTabs from "@theme/MimeTabs"; - import ParamsItem from "@theme/ParamsItem"; - import ResponseSamples from "@theme/ResponseSamples"; - import SchemaItem from "@theme/SchemaItem"; - import SchemaTabs from "@theme/SchemaTabs"; - - import JsonToTable from '@site/src/components/JsonToTable'; - import BodyTable from '@site/src/components/BodyTable'; - import QueryTable from '@site/src/components/QueryTable'; - import HeadersTable from '@site/src/components/HeadersTable'; - import DisplayJson from '@site/src/components/DisplayJson'; - import DisplayEndpoint from '@site/src/components/DisplayEndpoint'; - # Edit Template Metadata Edit Template Metadata diff --git a/docs/API/extract-template-placeholders-and-generate-preview.api.mdx b/docs/API/extract-template-placeholders-and-generate-preview.api.mdx index 223923d..763e480 100644 --- a/docs/API/extract-template-placeholders-and-generate-preview.api.mdx +++ b/docs/API/extract-template-placeholders-and-generate-preview.api.mdx @@ -11,25 +11,6 @@ info_path: docs/API/turbodocx-api-documentation custom_edit_url: null --- - - - import ApiTabs from "@theme/ApiTabs"; - import DiscriminatorTabs from "@theme/DiscriminatorTabs"; - import MethodEndpoint from "@theme/ApiExplorer/MethodEndpoint"; - import SecuritySchemes from "@theme/ApiExplorer/SecuritySchemes"; - import MimeTabs from "@theme/MimeTabs"; - import ParamsItem from "@theme/ParamsItem"; - import ResponseSamples from "@theme/ResponseSamples"; - import SchemaItem from "@theme/SchemaItem"; - import SchemaTabs from "@theme/SchemaTabs"; - - import JsonToTable from '@site/src/components/JsonToTable'; - import BodyTable from '@site/src/components/BodyTable'; - import QueryTable from '@site/src/components/QueryTable'; - import HeadersTable from '@site/src/components/HeadersTable'; - import DisplayJson from '@site/src/components/DisplayJson'; - import DisplayEndpoint from '@site/src/components/DisplayEndpoint'; - # Extract Template Placeholders and Generate Preview Extract Template Placeholders and Generate Preview diff --git a/docs/API/get-template-by-id.api.mdx b/docs/API/get-template-by-id.api.mdx index 463793e..c3c36e9 100644 --- a/docs/API/get-template-by-id.api.mdx +++ b/docs/API/get-template-by-id.api.mdx @@ -10,26 +10,6 @@ sidebar_class_name: "get api-method" info_path: docs/API/turbodocx-api-documentation custom_edit_url: null --- - - - - import ApiTabs from "@theme/ApiTabs"; - import DiscriminatorTabs from "@theme/DiscriminatorTabs"; - import MethodEndpoint from "@theme/ApiExplorer/MethodEndpoint"; - import SecuritySchemes from "@theme/ApiExplorer/SecuritySchemes"; - import MimeTabs from "@theme/MimeTabs"; - import ParamsItem from "@theme/ParamsItem"; - import ResponseSamples from "@theme/ResponseSamples"; - import SchemaItem from "@theme/SchemaItem"; - import SchemaTabs from "@theme/SchemaTabs"; - - import JsonToTable from '@site/src/components/JsonToTable'; - import BodyTable from '@site/src/components/BodyTable'; - import QueryTable from '@site/src/components/QueryTable'; - import HeadersTable from '@site/src/components/HeadersTable'; - import DisplayJson from '@site/src/components/DisplayJson'; - import DisplayEndpoint from '@site/src/components/DisplayEndpoint'; - # Get Template by ID Get Template by ID diff --git a/docs/API/get-templates-and-folders.api.mdx b/docs/API/get-templates-and-folders.api.mdx index 2d7efae..3f62eee 100644 --- a/docs/API/get-templates-and-folders.api.mdx +++ b/docs/API/get-templates-and-folders.api.mdx @@ -11,25 +11,6 @@ info_path: docs/API/turbodocx-api-documentation custom_edit_url: null --- - - - import ApiTabs from "@theme/ApiTabs"; - import DiscriminatorTabs from "@theme/DiscriminatorTabs"; - import MethodEndpoint from "@theme/ApiExplorer/MethodEndpoint"; - import SecuritySchemes from "@theme/ApiExplorer/SecuritySchemes"; - import MimeTabs from "@theme/MimeTabs"; - import ParamsItem from "@theme/ParamsItem"; - import ResponseSamples from "@theme/ResponseSamples"; - import SchemaItem from "@theme/SchemaItem"; - import SchemaTabs from "@theme/SchemaTabs"; - - import JsonToTable from '@site/src/components/JsonToTable'; - import BodyTable from '@site/src/components/BodyTable'; - import QueryTable from '@site/src/components/QueryTable'; - import HeadersTable from '@site/src/components/HeadersTable'; - import DisplayJson from '@site/src/components/DisplayJson'; - import DisplayEndpoint from '@site/src/components/DisplayEndpoint'; - # Get Templates and Folders Get Templates and Folders diff --git a/docs/API/read-tag.api.mdx b/docs/API/read-tag.api.mdx index 4eb565e..728b474 100644 --- a/docs/API/read-tag.api.mdx +++ b/docs/API/read-tag.api.mdx @@ -11,25 +11,6 @@ info_path: docs/API/turbodocx-api-documentation custom_edit_url: null --- - - - import ApiTabs from "@theme/ApiTabs"; - import DiscriminatorTabs from "@theme/DiscriminatorTabs"; - import MethodEndpoint from "@theme/ApiExplorer/MethodEndpoint"; - import SecuritySchemes from "@theme/ApiExplorer/SecuritySchemes"; - import MimeTabs from "@theme/MimeTabs"; - import ParamsItem from "@theme/ParamsItem"; - import ResponseSamples from "@theme/ResponseSamples"; - import SchemaItem from "@theme/SchemaItem"; - import SchemaTabs from "@theme/SchemaTabs"; - - import JsonToTable from '@site/src/components/JsonToTable'; - import BodyTable from '@site/src/components/BodyTable'; - import QueryTable from '@site/src/components/QueryTable'; - import HeadersTable from '@site/src/components/HeadersTable'; - import DisplayJson from '@site/src/components/DisplayJson'; - import DisplayEndpoint from '@site/src/components/DisplayEndpoint'; - # Read Tag Read Tag diff --git a/docs/API/read-variables-folder.api.mdx b/docs/API/read-variables-folder.api.mdx index 095a312..f5d4fc6 100644 --- a/docs/API/read-variables-folder.api.mdx +++ b/docs/API/read-variables-folder.api.mdx @@ -11,25 +11,6 @@ info_path: docs/API/turbodocx-api-documentation custom_edit_url: null --- - - - import ApiTabs from "@theme/ApiTabs"; - import DiscriminatorTabs from "@theme/DiscriminatorTabs"; - import MethodEndpoint from "@theme/ApiExplorer/MethodEndpoint"; - import SecuritySchemes from "@theme/ApiExplorer/SecuritySchemes"; - import MimeTabs from "@theme/MimeTabs"; - import ParamsItem from "@theme/ParamsItem"; - import ResponseSamples from "@theme/ResponseSamples"; - import SchemaItem from "@theme/SchemaItem"; - import SchemaTabs from "@theme/SchemaTabs"; - - import JsonToTable from '@site/src/components/JsonToTable'; - import BodyTable from '@site/src/components/BodyTable'; - import QueryTable from '@site/src/components/QueryTable'; - import HeadersTable from '@site/src/components/HeadersTable'; - import DisplayJson from '@site/src/components/DisplayJson'; - import DisplayEndpoint from '@site/src/components/DisplayEndpoint'; - # Read Variables (Folder) Read Variables (Folder) diff --git a/docs/API/update-tag.api.mdx b/docs/API/update-tag.api.mdx index 48e4910..88a59eb 100644 --- a/docs/API/update-tag.api.mdx +++ b/docs/API/update-tag.api.mdx @@ -11,25 +11,6 @@ info_path: docs/API/turbodocx-api-documentation custom_edit_url: null --- - - - import ApiTabs from "@theme/ApiTabs"; - import DiscriminatorTabs from "@theme/DiscriminatorTabs"; - import MethodEndpoint from "@theme/ApiExplorer/MethodEndpoint"; - import SecuritySchemes from "@theme/ApiExplorer/SecuritySchemes"; - import MimeTabs from "@theme/MimeTabs"; - import ParamsItem from "@theme/ParamsItem"; - import ResponseSamples from "@theme/ResponseSamples"; - import SchemaItem from "@theme/SchemaItem"; - import SchemaTabs from "@theme/SchemaTabs"; - - import JsonToTable from '@site/src/components/JsonToTable'; - import BodyTable from '@site/src/components/BodyTable'; - import QueryTable from '@site/src/components/QueryTable'; - import HeadersTable from '@site/src/components/HeadersTable'; - import DisplayJson from '@site/src/components/DisplayJson'; - import DisplayEndpoint from '@site/src/components/DisplayEndpoint'; - # Update Tag Update Tag diff --git a/docs/API/update-variable-by-id.api.mdx b/docs/API/update-variable-by-id.api.mdx index 8c30420..bfcb2e3 100644 --- a/docs/API/update-variable-by-id.api.mdx +++ b/docs/API/update-variable-by-id.api.mdx @@ -11,25 +11,6 @@ info_path: docs/API/turbodocx-api-documentation custom_edit_url: null --- - - - import ApiTabs from "@theme/ApiTabs"; - import DiscriminatorTabs from "@theme/DiscriminatorTabs"; - import MethodEndpoint from "@theme/ApiExplorer/MethodEndpoint"; - import SecuritySchemes from "@theme/ApiExplorer/SecuritySchemes"; - import MimeTabs from "@theme/MimeTabs"; - import ParamsItem from "@theme/ParamsItem"; - import ResponseSamples from "@theme/ResponseSamples"; - import SchemaItem from "@theme/SchemaItem"; - import SchemaTabs from "@theme/SchemaTabs"; - - import JsonToTable from '@site/src/components/JsonToTable'; - import BodyTable from '@site/src/components/BodyTable'; - import QueryTable from '@site/src/components/QueryTable'; - import HeadersTable from '@site/src/components/HeadersTable'; - import DisplayJson from '@site/src/components/DisplayJson'; - import DisplayEndpoint from '@site/src/components/DisplayEndpoint'; - # Update Variable (by ID) Update Variable (by ID) diff --git a/docs/API/upload-template-with-optional-default-values.api.mdx b/docs/API/upload-template-with-optional-default-values.api.mdx index 5a08435..320d598 100644 --- a/docs/API/upload-template-with-optional-default-values.api.mdx +++ b/docs/API/upload-template-with-optional-default-values.api.mdx @@ -11,25 +11,6 @@ info_path: docs/API/turbodocx-api-documentation custom_edit_url: null --- - - - import ApiTabs from "@theme/ApiTabs"; - import DiscriminatorTabs from "@theme/DiscriminatorTabs"; - import MethodEndpoint from "@theme/ApiExplorer/MethodEndpoint"; - import SecuritySchemes from "@theme/ApiExplorer/SecuritySchemes"; - import MimeTabs from "@theme/MimeTabs"; - import ParamsItem from "@theme/ParamsItem"; - import ResponseSamples from "@theme/ResponseSamples"; - import SchemaItem from "@theme/SchemaItem"; - import SchemaTabs from "@theme/SchemaTabs"; - - import JsonToTable from '@site/src/components/JsonToTable'; - import BodyTable from '@site/src/components/BodyTable'; - import QueryTable from '@site/src/components/QueryTable'; - import HeadersTable from '@site/src/components/HeadersTable'; - import DisplayJson from '@site/src/components/DisplayJson'; - import DisplayEndpoint from '@site/src/components/DisplayEndpoint'; - # Upload Template with Optional Default Values Upload Template with Optional Default Values diff --git a/docs/TurboDocx Templating/Additional Information.md b/docs/TurboDocx Templating/Additional Information.md index 1f902b8..81e73e6 100644 --- a/docs/TurboDocx Templating/Additional Information.md +++ b/docs/TurboDocx Templating/Additional Information.md @@ -91,7 +91,7 @@ This will remove the requirement to have content in that variable. To undo this ## Subvariables -In your Knowledgebase you may have entries that you will want to have variables in. For example a entry outlining each parties responsibites with {CustomerName} or {OrganizationName} as variables. We call these Subvariables. Here we will go over how you can utilize them. +In your Knowledgebase you may have entries that you will want to have variables in. For example a entry outlining each parties responsibites with {CustomerName} or {OrganizationName} as variables. We call these Subvariables. Here we will go over how you can utilize them.


@@ -100,7 +100,7 @@ In your Knowledgebase you may have entries that you will want to have variables 1. We will start by creating a new Knowledgebase entry (see How to Create a Knowledgebase Entry if you need a refresher), and we will be selecting "Rich Text" from our more options menu.

2. Much like adding a variable in a Template you will fill out your entry utilizing \{brackets\} around the subvariable that you would like to create, in this example we will be using \{CustomerName\} in part of our chart.

-3. As you can see once the subvariable is created a seperate input box will appear on the left side under {CustomerName}. Whatever you input into this box will be placed in the subvariable! +3. As you can see once the subvariable is created a seperate input box will appear on the left side under {CustomerName}. Whatever you input into this box will be placed in the subvariable! ![img](/img/additional_information/subvariables.png) @@ -174,7 +174,7 @@ Here are some best practices when troubleshooting why your variable is not showi

-1. All variables will need to be one word, so do not put any spaces in the middle of the {brackets}. +1. All variables will need to be one word, so do not put any spaces in the middle of the {brackets}.

@@ -183,7 +183,7 @@ Here are some best practices when troubleshooting why your variable is not showi ![](/img/how_to_create_a_template/paragraphtool.png) -When you activate the tool, it will resemble the image below. Since {CustomerName} is plain text, it can be incorporated into a paragraph. However, we will be utilizing a chart in Rich Text for {Scope}, so it needs to be on its own line. Paragraph symbols will indicate this distinction clearly. +When you activate the tool, it will resemble the image below. Since {CustomerName} is plain text, it can be incorporated into a paragraph. However, we will be utilizing a chart in Rich Text for {Scope}, so it needs to be on its own line. Paragraph symbols will indicate this distinction clearly. ![](/img/additional_information/ptoolexample.png) diff --git a/docs/TurboDocx Templating/How to Create a Document Template.md b/docs/TurboDocx Templating/How to Create a Document Template.md index d2b9858..578fc67 100644 --- a/docs/TurboDocx Templating/How to Create a Document Template.md +++ b/docs/TurboDocx Templating/How to Create a Document Template.md @@ -69,7 +69,7 @@ Let's start with creating our first document template.
1. Open up whatever application you will be using to create your document (Word, Google Drive, etc).

-2. Anything you would like to be a variable or an item that will change from document to document will be put between these {brackets}. This can be single items such as {Date} or {CustomerName} or it can be whole sections such as {Scope} as seen in the images below. +2. Anything you would like to be a variable or an item that will change from document to document will be put between these {brackets}. This can be single items such as {Date} or {CustomerName} or it can be whole sections such as {Scope} as seen in the images below. ![](/img/how_to_create_a_template/CreatingATemplateDoc1Title.PNG) ![](/img/how_to_create_a_template/CreatingATemplateDoc2Title.PNG) @@ -79,9 +79,9 @@ Let's start with creating our first document template.
:::tip -- If you've previously created a document you want to use as a template, go ahead and use that. Just remember to replace all the variables within the {brackets}. Find and replace may be helpful here. +- If you've previously created a document you want to use as a template, go ahead and use that. Just remember to replace all the variables within the {brackets}. Find and replace may be helpful here. -- All variables will need to be one word, so do not put any spaces in the middle of the {brackets}. +- All variables will need to be one word, so do not put any spaces in the middle of the {brackets}. - Remember your Knowledgebase, if the variable has the same name as something in your Knowledgebase TurboDocx will use the info from the Knowledgebase to fill in the corresponding Variable. diff --git a/docs/TurboDocx Templating/How to Create a Template.md b/docs/TurboDocx Templating/How to Create a Template.md index 63ee2ba..43acb0d 100644 --- a/docs/TurboDocx Templating/How to Create a Template.md +++ b/docs/TurboDocx Templating/How to Create a Template.md @@ -26,7 +26,7 @@ Let's start with creating our first template.


1. Open up whatever application you will be using to create your document (Word, Google Drive, etc).

-2. Anything you would like to be a variable or an item that will change from document to document will be put between these {brackets}. This can be single items such as {Date} or {CustomerName} or it can be whole sections such as {Scope} as seen in the images below. +2. Anything you would like to be a variable or an item that will change from document to document will be put between these {brackets}. This can be single items such as {Date} or {CustomerName} or it can be whole sections such as {Scope} as seen in the images below. ![](/img/how_to_create_a_template/CreatingATemplateDoc1Title.PNG) ![](/img/how_to_create_a_template/CreatingATemplateDoc2Title.PNG) @@ -36,9 +36,9 @@ Let's start with creating our first template.


:::tip -- If you've previously created a document you want to use as a template, go ahead and use that. Just remember to replace all the variables within the {brackets}. Find and replace may be helpful here. +- If you've previously created a document you want to use as a template, go ahead and use that. Just remember to replace all the variables within the {brackets}. Find and replace may be helpful here. -- All variables will need to be one word, so do not put any spaces in the middle of the {brackets}. +- All variables will need to be one word, so do not put any spaces in the middle of the {brackets}. - Remember your Knowledgebase, if the variable has the same name as something in your Knowledgebase TurboDocx will use the info from the Knowledgebase to fill in the corresponding Variable. diff --git a/docs/TurboDocx Templating/Template Troubleshooting.md b/docs/TurboDocx Templating/Template Troubleshooting.md index ae01eb6..1f39f13 100644 --- a/docs/TurboDocx Templating/Template Troubleshooting.md +++ b/docs/TurboDocx Templating/Template Troubleshooting.md @@ -29,7 +29,7 @@ Before you throw your computer, watch this video! Your variables aren't broken, ### 1. Variable Naming Rules -All variables must be **one word only** - no spaces allowed inside the {brackets}. +All variables must be **one word only** - no spaces allowed inside the {brackets}.
@@ -151,7 +151,7 @@ One of the most common mistakes is thinking a variable is on its own line when i ![](/img/how_to_create_a_template/paragraphtool.png) -When you activate the tool, it will resemble the image below. Since {CustomerName} is plain text, it can be incorporated into a paragraph. However, we will be utilizing a chart in Rich Text for {Scope}, so it needs to be on its own line. Paragraph symbols will indicate this distinction clearly. +When you activate the tool, it will resemble the image below. Since {CustomerName} is plain text, it can be incorporated into a paragraph. However, we will be utilizing a chart in Rich Text for {Scope}, so it needs to be on its own line. Paragraph symbols will indicate this distinction clearly. ![](/img/additional_information/ptoolexample.png) diff --git a/docusaurus.config.js b/docusaurus.config.js index 19f2172..cdf8b01 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -1,8 +1,9 @@ // @ts-check // Note: type annotations allow type checking and IDEs autocompletion +const { themes } = require('prism-react-renderer'); +const lightCodeTheme = themes.github; +const darkCodeTheme = themes.dracula; -const lightCodeTheme = require('prism-react-renderer/themes/github'); -const darkCodeTheme = require('prism-react-renderer/themes/dracula'); // [item, [[], [], []]] const apiConfig = require('./dev-docs-openapi.js'); @@ -45,7 +46,19 @@ const config = { // If you aren't using GitHub pages, you don't need these. organizationName: 'TurboDocx', // Usually your GitHub org/user name. projectName: 'docusaurus', // Usually your repo name. - plugins: ['docusaurus-plugin-sass', "@orama/plugin-docusaurus", + plugins: ['docusaurus-plugin-sass', + [ + "@orama/plugin-docusaurus-v3", + { + searchbox: { + placeholder: "Search...", + }, + searchButton: { + text: "soham..." + }, + + }, + ], [ 'docusaurus-plugin-llms', { @@ -59,9 +72,9 @@ const config = { [ 'docusaurus-plugin-openapi-docs', { - id: "apiDocs", - docsPluginId: "classic", - config: openApiCongfig + id: "api", // plugin id + docsPluginId: "classic", // configured for preset-classic + config: openApiCongfig, }, ], async function myPlugin(context, options) { return { @@ -91,12 +104,12 @@ const config = { ({ docs: { docItemComponent: "@theme/ApiItem", - docLayoutComponent: "@theme/DocPage", + // docLayoutComponent: "@theme/DocPage", sidebarPath: require.resolve('./sidebars.js'), // Please change this to your repo. // Remove this to remove the "edit this page" links. // editUrl: - // 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/', + // 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/', }, // blog: { // showReadingTime: true, @@ -143,7 +156,8 @@ const config = { href: "https://www.turbodocx.com/?utm_source=docs-site", }, items: [ - ...itemsJson.items, { + ...itemsJson.items, + { type: 'search', position: 'left', } diff --git a/package.json b/package.json index 527521e..f57952f 100644 --- a/package.json +++ b/package.json @@ -5,8 +5,7 @@ "scripts": { "docusaurus": "docusaurus", "start": "docusaurus start", - "prebuild": "npm --prefix ./vendor/docusaurus-plugin-llms install && npm --prefix ./vendor/docusaurus-plugin-llms run build", - "build": "docusaurus build", + "build": "docusaurus build && node scripts/exportOramaIndex.js", "swizzle": "docusaurus swizzle", "deploy": "docusaurus deploy", "clear": "docusaurus clear", @@ -17,17 +16,19 @@ "typecheck": "tsc" }, "dependencies": { - "@docusaurus/core": "2.4.3", - "@docusaurus/plugin-google-tag-manager": "2.4.3", - "@docusaurus/preset-classic": "2.4.3", - "@docusaurus/theme-live-codeblock": "2.4.3", + "@docusaurus/core": "3.8.1", + "@docusaurus/plugin-google-tag-manager": "3.8.1", + "@docusaurus/preset-classic": "3.8.1", + "@docusaurus/theme-live-codeblock": "3.8.1", + "@docusaurus/utils": "3.8.1", "@fontsource/inter": "^5.0.8", "@gocapsule/column-extension": "^1.0.0-beta-3", - "@lyrasearch/plugin-docusaurus": "^0.0.2", - "@mdx-js/react": "^1.6.22", + "@mdx-js/react": "^3.1.0", "@monaco-editor/react": "^4.4.6", - "@orama/orama": "^1.2.6", - "@orama/plugin-docusaurus": "^1.2.6", + "@orama/orama": "3.1.6", + "@orama/plugin-docusaurus-v3": "2.1.0", + "@orama/searchbox": "^1.0.0-rc53", + "@oramacloud/client": "^2.1.4", "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-aspect-ratio": "^1.0.3", "@radix-ui/react-context-menu": "^2.1.5", @@ -60,9 +61,9 @@ "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "docusaurus-plugin-llms": "file:./vendor/docusaurus-plugin-llms", - "docusaurus-plugin-openapi-docs": "^2.1.3", - "docusaurus-plugin-sass": "^0.2.2", - "docusaurus-theme-openapi-docs": "^2.1.3", + "docusaurus-plugin-openapi-docs": "4.2.0", + "docusaurus-plugin-sass": "^0.2.6", + "docusaurus-theme-openapi-docs": "4.2.0", "framer-motion": "^6.5.1", "highlight.js": "^11.8.0", "js-yaml": "^4.1.0", @@ -74,10 +75,10 @@ "postcss": "^8.4.32", "postcss-import": "^15.1.0", "postman-to-openapi": "^3.0.1", - "prism-react-renderer": "^1.3.5", + "prism-react-renderer": "^2.1.0", "prosemirror-history": "^1.3.0", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-monaco-editor": "^0.52.0", "react-resizable": "^3.0.5", "rehype-react": "^7.1.2", @@ -96,9 +97,9 @@ "unified": "^10.1.2" }, "devDependencies": { - "@docusaurus/module-type-aliases": "2.4.3", - "@tsconfig/docusaurus": "^1.0.5", - "typescript": "^4.7.4" + "@docusaurus/module-type-aliases": "3.8.1", + "@docusaurus/tsconfig": "3.0.0", + "typescript": "~5.2.2" }, "browserslist": { "production": [ @@ -115,4 +116,4 @@ "engines": { "node": "18.x" } -} +} \ No newline at end of file diff --git a/searchPlugin.js b/searchPlugin.js index 81d900f..d820d1c 100644 --- a/searchPlugin.js +++ b/searchPlugin.js @@ -14,24 +14,24 @@ module.exports = { rating: 'number', }, }; - + // Create a database instance. const db = await create({ schema, }); - + // Get a list of all of the Markdown files in the project. const markdownFiles = await docusaurusUtils.getAllMarkdownFiles(siteConfig); - + // Insert each Markdown file into the database. for (let i = 0; i < markdownFiles.length; i++) { const file = markdownFiles[i]; const content = await docusaurusUtils.readFile(file); - + // Extract the title and rating from the Markdown file. const title = file.name; const rating = Number(file.data.meta?.rating); - + // Insert the document into the database. await insert(db, { title, @@ -41,13 +41,13 @@ module.exports = { }, }); } - + // Search the database for the given term. const searchResult = await search(db, { term: options.term, }); - + // Return the search results. return searchResult.hits.map((hit) => hit.document); }, -}; +}; \ No newline at end of file diff --git a/src/components/BodyTable.jsx b/src/components/BodyTable.jsx index 9aa29d1..965ebcc 100644 --- a/src/components/BodyTable.jsx +++ b/src/components/BodyTable.jsx @@ -63,7 +63,7 @@ const JsonToTable = ({ data, title, columns }) => { const renderTable = (json, tableName = "Root") => { try { - } catch (e) {} + } catch (e) { } if (!json) return null; const nestedTables = []; @@ -96,7 +96,7 @@ const JsonToTable = ({ data, title, columns }) => { {tableHeaderdata.map((item) => { - return {item.name}; + return {item.name}; })} diff --git a/src/components/HeadersTable.jsx b/src/components/HeadersTable.jsx index 89f7043..982b6c2 100644 --- a/src/components/HeadersTable.jsx +++ b/src/components/HeadersTable.jsx @@ -86,7 +86,7 @@ const JsonToTable = ({ data, title, columns }) => { {tableHeaderdata.map((item) => { - return {item.name}; + return {item.name}; })} @@ -99,26 +99,26 @@ const JsonToTable = ({ data, title, columns }) => { }; return ( -
+
{decodedData && Object.keys(decodedData).length > 0 && ( - - Headers - - {/* + + Headers + + {/* */} - {decodedData && Object.keys(decodedData).length > 0 ? ( - renderTable(decodedData) - ) : ( -

- )} - {/* + {decodedData && Object.keys(decodedData).length > 0 ? ( + renderTable(decodedData) + ) : ( +

+ )} + {/* */} - - + + )}
diff --git a/src/components/JsonToTable.jsx b/src/components/JsonToTable.jsx index c1bde93..d7459dd 100644 --- a/src/components/JsonToTable.jsx +++ b/src/components/JsonToTable.jsx @@ -1,18 +1,40 @@ import React, { useState, useEffect } from 'react'; -import zlib from 'zlib'; -import { useDoc } from '@docusaurus/theme-common/internal'; +import pako from 'pako'; +// import { useDoc } from '@docusaurus/theme-common/internal'; +import { useAllDocsData } from '@docusaurus/plugin-content-docs/client'; +import { useLocation } from '@docusaurus/router'; const JsonToTable = () => { const [decodedData, setDecodedData] = useState({}); - const { frontMatter } = useDoc(); + const allDocsData = useAllDocsData(); + const location = useLocation(); + + // Assuming only one docs plugin instance (e.g., "default") + const docs = allDocsData.default; + const currentPath = location.pathname; + const currentDoc = Object.values(docs.versions[0].docs).find( + (doc) => doc.permalink === currentPath + ); + + const frontMatter = currentDoc?.frontMatter || {}; + + console.log(frontMatter); useEffect(() => { if (frontMatter.api) { try { - let decodedJSON = JSON.parse( - zlib.inflateSync(Buffer.from(frontMatter.api, 'base64')).toString() - ); + // Convert base64 to binary data + const binaryString = atob(frontMatter.api); + const binaryData = new Uint8Array(binaryString.length); + for (let i = 0; i < binaryString.length; i++) { + binaryData[i] = binaryString.charCodeAt(i); + } + + // Decompress using pako + const decompressed = pako.inflate(binaryData, { to: 'string' }); + let decodedJSON = JSON.parse(decompressed); + decodedJSON.requestBodyValues = extractPropertiesAndExamples(decodedJSON); setDecodedData(decodedJSON); } catch (error) { @@ -66,7 +88,6 @@ const JsonToTable = () => { } }; - return (
@@ -91,17 +112,14 @@ const JsonToTable = () => { {decodedData?.requestBodyValues && Object.keys(decodedData.requestBodyValues).length > 0 && ( <>

Request Body

- - {Object.entries(decodedData.requestBodyValues).map(([key, value]) => ( - - - ))} - + {Object.entries(decodedData.requestBodyValues).map(([key, value]) => ( + + ))} )} {decodedData.securitySchemes && Object.keys(decodedData.securitySchemes).length > 0 && ( @@ -127,4 +145,4 @@ const JsonToTable = () => { ); }; -export default JsonToTable; +export default JsonToTable; \ No newline at end of file diff --git a/src/components/QueryTable.jsx b/src/components/QueryTable.jsx index 13ac4f1..852df49 100644 --- a/src/components/QueryTable.jsx +++ b/src/components/QueryTable.jsx @@ -111,12 +111,12 @@ const JsonToTable = ({ data, title, columns }) => { {/* */} - {decodedData && Object.keys(decodedData).length > 0 ? ( - renderTable(decodedData) - ) : ( -

- )} - {/* + {decodedData && Object.keys(decodedData).length > 0 ? ( + renderTable(decodedData) + ) : ( +

+ )} + {/* */} diff --git a/src/css/api.scss b/src/css/api.scss index 3e60dab..bb9a73b 100644 --- a/src/css/api.scss +++ b/src/css/api.scss @@ -1,11 +1,11 @@ .theme-api-markdown { -display: flex; -flex-direction: column; + display: flex; + flex-direction: column; } -#__docusaurus_skipToContent_fallback > div > main > div > div > div > div > div { +#__docusaurus_skipToContent_fallback>div>main>div>div>div>div>div { max-width: none !important; } @@ -39,10 +39,27 @@ flex-direction: column; .tracing-beam { display: none; } + .col--7 { - max-width: unset; + width: 100% !important; } - } +} + +.col.col--7 { + --ifm-col-width: 100% !important; + flex: 1 1 100% !important; + max-width: 100% !important; +} + +/* More specific targeting if the above doesn't work */ +.docItemContainer_jff .col.col--7, +[class*="api"] .col.col--7, +.api-method .col.col--7 { + --ifm-col-width: 100% !important; + flex: 1 1 100% !important; + max-width: 100% !important; + width: 100% !important; +} .body-cards { .bg-card { @@ -51,7 +68,7 @@ flex-direction: column; overflow-x: scroll; } } - + .headers-card { justify-content: center; display: flex; @@ -59,15 +76,15 @@ flex-direction: column; } .openapi-tabs__code-container:not(.openapi-tabs__code-container-inner) { - background-color: hsl(var(--card))!important; + background-color: hsl(var(--card)) !important; } .openapi-explorer__request-form { - background-color: hsl(var(--card))!important; + background-color: hsl(var(--card)) !important; } .openapi-explorer__response-container { - background-color: hsl(var(--card))!important; + background-color: hsl(var(--card)) !important; } .query-table { @@ -76,6 +93,4 @@ flex-direction: column; padding-top: 2em !important; } -.col--7 { - -} \ No newline at end of file +.col--7 {} \ No newline at end of file diff --git a/src/css/chatbot.scss b/src/css/chatbot.scss index 29f5def..cfe14e0 100644 --- a/src/css/chatbot.scss +++ b/src/css/chatbot.scss @@ -16,11 +16,9 @@ $color-accent-dark: $color-2-7; // red-700 [data-theme="dark"] .chat-box { border-radius: 20px; - background: radial-gradient( - 178.18% 201.98% at 100% 0%, - rgba($color-primary-darker, 0.8) 0%, - rgba($color-primary-darkest, 0) 100% - ); + background: radial-gradient(178.18% 201.98% at 100% 0%, + rgba($color-primary-darker, 0.8) 0%, + rgba($color-primary-darkest, 0) 100%); backdrop-filter: blur(5px); position: fixed; @@ -48,6 +46,7 @@ $color-accent-dark: $color-2-7; // red-700 h6 { color: white !important; } + p { color: white !important; } @@ -91,6 +90,7 @@ $color-accent-dark: $color-2-7; // red-700 h6 { color: white !important; } + p { color: white !important; } @@ -110,6 +110,7 @@ $color-accent-dark: $color-2-7; // red-700 height: 80%; overflow-y: scroll; padding: 10px; + .chatbot-avatar { height: 2.5em; } @@ -258,11 +259,9 @@ $color-accent-dark: $color-2-7; // red-700 left: -10px; right: -10px; bottom: -10px; - background: linear-gradient( - to right bottom, - rgba(255, 255, 255, 0.5), - rgba(255, 255, 255, 0.1) - ); + background: linear-gradient(to right bottom, + rgba(255, 255, 255, 0.5), + rgba(255, 255, 255, 0.1)); filter: blur(20px); } @@ -275,11 +274,13 @@ $color-accent-dark: $color-2-7; // red-700 [data-theme="light"] .dot { background-color: black; } + .dot { width: 8px; height: 8px; margin: 0 4px; - background-color: white; /* Change color as needed */ + background-color: white; + /* Change color as needed */ border-radius: 50%; animation: dotFlashing 1s infinite linear alternate; } @@ -300,6 +301,7 @@ $color-accent-dark: $color-2-7; // red-700 0% { opacity: 0; } + 50%, 100% { opacity: 1; @@ -315,7 +317,8 @@ $color-accent-dark: $color-2-7; // red-700 right: 10px; } - .chat-box__input, .chat-box__button { + .chat-box__input, + .chat-box__button { padding: 12px; // Increase padding for larger touch targets } @@ -334,7 +337,8 @@ $color-accent-dark: $color-2-7; // red-700 right: 10px; } - .chat-box__input, .chat-box__button { + .chat-box__input, + .chat-box__button { padding: 12px; // Increase padding for larger touch targets } @@ -347,7 +351,7 @@ $color-accent-dark: $color-2-7; // red-700 .theme-edit-this-page { /* Hide the text content */ color: transparent !important; - line-height: 0 !important; + line-height: 0 !important; font-size: 0 !important; - color: transparent !important; + color: transparent !important; } \ No newline at end of file diff --git a/src/css/custom-templates.scss b/src/css/custom-templates.scss index 00f5f2f..369a9c4 100644 --- a/src/css/custom-templates.scss +++ b/src/css/custom-templates.scss @@ -6,7 +6,8 @@ p { p { display: none !important; } - > div { + + >div { p { display: none !important; } @@ -20,7 +21,9 @@ p { min-height: 20em; justify-content: center; flex-direction: row !important; - gap: 0.2em; /* space between cards */ + gap: 0.2em; + + /* space between cards */ p { display: none !important; } @@ -62,15 +65,19 @@ p { flex-direction: column; //border: 1px solid #CAD0D2; flex: 0 1 calc(20% - 1em); - > div { + + >div { height: 100% !important; } - > .content div:first-child { + + >.content div:first-child { height: 100% !important; } + pre { height: 100% !important; } + p { display: block !important; } @@ -84,7 +91,9 @@ p { justify-content: center; flex-direction: row !important; - gap: 2em; /* space between cards */ + gap: 2em; + + /* space between cards */ p { display: none !important; } @@ -127,15 +136,19 @@ p { flex-direction: column; //border: 1px solid #CAD0D2; flex: 0 1 calc(20% - 1em); - > div { + + >div { height: 100% !important; } - > .content div:first-child { + + >.content div:first-child { height: 100% !important; } + pre { height: 100% !important; } + p { display: block !important; } @@ -149,7 +162,7 @@ p { align-items: center; opacity: 0.8; - > h1, + >h1, h2, h3, h4, @@ -179,15 +192,14 @@ p { border: 1px solid rgb(255 255 255 / 5%) !important; border-radius: 1.5rem; gap: 1rem; - background-image: radial-gradient( - rgba(255, 255, 255, 0.2) 1px, - transparent 1px - ) !important; + background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1px, + transparent 1px) !important; background-position: 50% 50%; background-size: 1.1rem 1.1rem; padding: 0rem !important; border-radius: 1.25rem; + .node-ResizableImage { width: fit-content; flex: 0 0 20%; @@ -203,13 +215,15 @@ p { } } } - .content { - } - > div { + + .content {} + + >div { flex: 1 1 0px; height: 100% !important; align-self: stretch; } + .content div:first-child { height: fit-content; justify-content: flex-start !important; @@ -346,6 +360,7 @@ p { 0% { --gradient-angle: 0deg; } + 100% { --gradient-angle: 360deg; } @@ -371,7 +386,7 @@ p { .border-button { // Your styles here... - + br { + +br { display: none; // or any other styles you want to apply } } @@ -407,13 +422,15 @@ p { display: flex; max-width: 100%; } + .background-landing { height: 100ch; display: block; justify-content: center; align-items: center; opacity: 0.8; - > h1, + + >h1, h2, h3, h4, @@ -423,6 +440,7 @@ p { padding-right: 0em; letter-spacing: -1.6px; } + .content { height: 100%; display: flex !important; @@ -433,6 +451,7 @@ p { flex: 0 0 calc(100% - 1em) !important; // Adjust width to 100% on small devices } } + .draggable-grid { .draggable-item { flex-direction: column; @@ -484,7 +503,7 @@ p { .ProseMirror { - > * + * { + >*+* { margin-top: 0.75em; } @@ -560,6 +579,7 @@ p { display: flex; align-items: center; padding-top: 1em; + div { display: flex !important; flex-direction: column; @@ -760,7 +780,8 @@ th { 0% { transform: rotate(0deg); } + 100% { transform: rotate(-360deg); } -} +} \ No newline at end of file diff --git a/src/css/custom.css b/src/css/custom.css index f5af61a..2110a46 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1,6 +1,6 @@ -@import 'tailwindcss/base'; -@import 'tailwindcss/components'; -@import 'tailwindcss/utilities'; +@use 'tailwindcss/base'; +@use 'tailwindcss/components'; +@use'tailwindcss/utilities'; /* Platform-specific search bar key display */ .DocSearch-Button-Key { @@ -15,4 +15,20 @@ .DocSearch-Button-Key:first-of-type { font-size: 0.75rem; line-height: 1; +} + +.col.col--7 { + --ifm-col-width: 100% !important; + flex: 1 1 100% !important; + max-width: 100% !important; +} + +/* More specific targeting if the above doesn't work */ +.docItemContainer_jff .col.col--7, +[class*="api"] .col.col--7, +.api-method .col.col--7 { + --ifm-col-width: 100% !important; + flex: 1 1 100% !important; + max-width: 100% !important; + width: 100% !important; } \ No newline at end of file diff --git a/src/css/custom.scss b/src/css/custom.scss index 109770c..a925e35 100644 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -23,30 +23,53 @@ @import "./blog.scss"; @import "./api.scss"; + + +.ShowSummaryCTA-module_summary__cta__wrapper__YLAFs { + display: none !important; +} + +.searchbutton-module_searchbutton__gg7JJ { + min-width: 250px; + /* Minimum width */ + width: 18.3125rem !important; + ; + /* Take full available width */ + /* Maximum width */ + padding: 42px 16px; + box-sizing: border-box; +} + // Removed global list-style rule to prevent affecting navigation // Enhanced text styling for better readability - only apply to content areas -article, .markdown, [class*="theme-doc-markdown"] { +article, +.markdown, +[class*="theme-doc-markdown"] { + // Ensure bold text renders properly - strong, b { + strong, + b { font-weight: 700 !important; } - + // Only apply list styles to content, not navigation - ul, ol { + ul, + ol { margin: 1.25em 0; padding-left: 1.75em; list-style: revert; // Ensure list styles show - + li { margin-bottom: 0.75em; line-height: 1.6; - + // Improve spacing for list items with strong/bold text - strong, b { + strong, + b { font-weight: 600; } - + // Better handling of code within list items code { margin: 0 0.125em; @@ -54,39 +77,40 @@ article, .markdown, [class*="theme-doc-markdown"] { font-size: 0.9em; } } - + // Nested lists - ul, ol { + ul, + ol { margin-top: 0.5em; margin-bottom: 0.5em; padding-left: 1.5em; - + li { margin-bottom: 0.5em; } } } - + // Ensure bullets are visible with proper spacing ul { list-style-type: disc; - + ul { list-style-type: circle; - + ul { list-style-type: square; } } } - + // Ensure numbers are visible with proper spacing ol { list-style-type: decimal; - + ol { list-style-type: lower-alpha; - + ol { list-style-type: lower-roman; } @@ -141,30 +165,4 @@ article, .markdown, [class*="theme-doc-markdown"] { // -webkit-backdrop-filter: blur(16px) saturate(180%); // background-color: white; // border: none; -// } - - - - - - - - - - - - - - - - - - - - - - - - - - +// } \ No newline at end of file diff --git a/src/css/design-preferences.scss b/src/css/design-preferences.scss index 275c8b0..cffdfcb 100644 --- a/src/css/design-preferences.scss +++ b/src/css/design-preferences.scss @@ -1,76 +1,76 @@ -$color-1: rgba(43, 87, 154, 1); // primary-500 -$color-1-1: #EAEEF5; // primary-100 -$color-1-2: #D5DDEB; // primary-200 -$color-1-3: #809AC2; // primary-300 -$color-1-4: #5579AE; // primary-400 -$color-1-5: #2B579A; // primary-500 -$color-1-6: #22467B; // primary-600 -$color-1-7: #11233E; // primary-700 -$color-1-8: #1565C0; // primary-light +$color-1: rgba(43, 87, 154, 1); // primary-500 +$color-1-1: #EAEEF5; // primary-100 +$color-1-2: #D5DDEB; // primary-200 +$color-1-3: #809AC2; // primary-300 +$color-1-4: #5579AE; // primary-400 +$color-1-5: #2B579A; // primary-500 +$color-1-6: #22467B; // primary-600 +$color-1-7: #11233E; // primary-700 +$color-1-8: #1565C0; // primary-light // extrapolated colors -$color-1-9: #0a1f36; // slightly darker than primary-700 +$color-1-9: #0a1f36; // slightly darker than primary-700 $color-1-10: #091c32; $color-1-11: #081930; $color-1-12: #061624; -$color-2: rgba(250, 82, 82, 1); // red-500 -$color-2-1: #FFF5F5; // red-100 -$color-2-2: #FFE3E3; // red-200 -$color-2-3: #FF8787; // red-300 -$color-2-4: #FF6B6B; // red-400 -$color-2-5: #FA5252; // red-500 -$color-2-6: #F03E3E; // red-600 -$color-2-7: #C92A2A; // red-700 +$color-2: rgba(250, 82, 82, 1); // red-500 +$color-2-1: #FFF5F5; // red-100 +$color-2-2: #FFE3E3; // red-200 +$color-2-3: #FF8787; // red-300 +$color-2-4: #FF6B6B; // red-400 +$color-2-5: #FA5252; // red-500 +$color-2-6: #F03E3E; // red-600 +$color-2-7: #C92A2A; // red-700 // extrapolated colros -$color-2-8: #AC1E1E; // continuing from red-700 +$color-2-8: #AC1E1E; // continuing from red-700 $color-2-9: #991919; $color-2-10: #860f0f; $color-2-11: #730505; $color-2-12: #600000; -$color-3: rgba(81, 207, 102, 1); // green-500 -$color-3-1: #EBFBEE; // green-100 -$color-3-2: #D3F9D8; // green-200 -$color-3-3: #8CE99A; // green-300 -$color-3-4: #69DB7C; // green-400 -$color-3-5: #51CF66; // green-500 -$color-3-6: #37B24D; // green-600 -$color-3-7: #2B8A3E; // green-700 +$color-3: rgba(81, 207, 102, 1); // green-500 +$color-3-1: #EBFBEE; // green-100 +$color-3-2: #D3F9D8; // green-200 +$color-3-3: #8CE99A; // green-300 +$color-3-4: #69DB7C; // green-400 +$color-3-5: #51CF66; // green-500 +$color-3-6: #37B24D; // green-600 +$color-3-7: #2B8A3E; // green-700 // extrapolated colors -$color-3-8: #216a34; // continuing from green-700 +$color-3-8: #216a34; // continuing from green-700 $color-3-9: #1e6030; $color-3-10: #1b562c; $color-3-11: #184c28; $color-3-12: #154224; -$color-4: rgba(255, 146, 43, 1); // orange-500 -$color-4-1: #FFF4E6; // orange-100 -$color-4-2: #FFE8CC; // orange-200 -$color-4-3: #FFC078; // orange-300 -$color-4-4: #FFA94D; // orange-400 -$color-4-5: #FF922B; // orange-500 -$color-4-6: #F76707; // orange-600 -$color-4-7: #D9480F; // orange-700 -$color-4-8: #E95420; // orange-light +$color-4: rgba(255, 146, 43, 1); // orange-500 +$color-4-1: #FFF4E6; // orange-100 +$color-4-2: #FFE8CC; // orange-200 +$color-4-3: #FFC078; // orange-300 +$color-4-4: #FFA94D; // orange-400 +$color-4-5: #FF922B; // orange-500 +$color-4-6: #F76707; // orange-600 +$color-4-7: #D9480F; // orange-700 +$color-4-8: #E95420; // orange-light // extrapolated colors -$color-4-9: #cc3e0c; // a bit darker than orange-light +$color-4-9: #cc3e0c; // a bit darker than orange-light $color-4-10: #b8350a; $color-4-11: #a42c08; $color-4-12: #912306; -$color-5: rgba(33, 37, 41, 1); // grey-900 -$color-5-1: #F8F9FA; // grey-50 -$color-5-2: #F1F3F5; // grey-100 -$color-5-3: #E9ECEF; // grey-200 -$color-5-4: #DEE2E6; // grey-300 -$color-5-5: #CED4DA; // grey-400 -$color-5-6: #ADB5BD; // grey-500 -$color-5-7: #868E96; // grey-600 -$color-5-8: #495057; // grey-700 -$color-5-9: #343A40; // grey-800 -$color-5-10: #212529; // grey-900 -$color-5-11: #000000; // grey-darkest -$color-5-12: #000000; // defined as darkest +$color-5: rgba(33, 37, 41, 1); // grey-900 +$color-5-1: #F8F9FA; // grey-50 +$color-5-2: #F1F3F5; // grey-100 +$color-5-3: #E9ECEF; // grey-200 +$color-5-4: #DEE2E6; // grey-300 +$color-5-5: #CED4DA; // grey-400 +$color-5-6: #ADB5BD; // grey-500 +$color-5-7: #868E96; // grey-600 +$color-5-8: #495057; // grey-700 +$color-5-9: #343A40; // grey-800 +$color-5-10: #212529; // grey-900 +$color-5-11: #000000; // grey-darkest +$color-5-12: #000000; // defined as darkest \ No newline at end of file diff --git a/src/css/headings-and-paragraphs.scss b/src/css/headings-and-paragraphs.scss index b0e60c4..584c3a5 100644 --- a/src/css/headings-and-paragraphs.scss +++ b/src/css/headings-and-paragraphs.scss @@ -1,4 +1,5 @@ [data-theme="dark"] { + p, h1, h2, @@ -16,14 +17,13 @@ } row { - background-image: radial-gradient( - circle at 200% 104%, - #e03c3c 3%, - #ffffff 71% - ) !important; + background-image: radial-gradient(circle at 200% 104%, + #e03c3c 3%, + #ffffff 71%) !important; } [data-theme="light"] { + p, h1, h2, @@ -33,8 +33,8 @@ row { h6 { color: black !important; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, - "Noto Sans", sans-serif, "system-ui", "Segoe UI", Helvetica, Arial, - sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; + "Noto Sans", sans-serif, "system-ui", "Segoe UI", Helvetica, Arial, + sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; // font-family: Inter; } } @@ -60,7 +60,8 @@ p { font-size: 16px; font-style: normal; font-weight: 400; - line-height: 1.6; /* Improved readability */ + line-height: 1.6; + /* Improved readability */ letter-spacing: -0.08px; margin-top: 1em; margin-bottom: 1em; @@ -161,7 +162,7 @@ ul { @include vertical-margin($base-margin); padding-left: 1.5em; // Better indentation for bullets line-height: 1.6; // Improved line height for readability - + // Reset margin for nested lists ul { margin-top: 0.5em; @@ -175,7 +176,7 @@ ol { @include vertical-margin($base-margin); padding-left: 1.5em; // Better indentation for numbers line-height: 1.6; // Improved line height for readability - + // Reset margin for nested lists ol { margin-top: 0.5em; @@ -188,7 +189,7 @@ ol { li { margin-bottom: $base-margin * 0.75; // Increased bottom margin for better spacing line-height: 1.5; // Better line height for readability - + // Reduce spacing for nested list items li { margin-bottom: $base-margin * 0.5; @@ -196,22 +197,24 @@ li { } .theme-doc-markdown { - ul, ol { + + ul, + ol { margin-top: 1.25em; margin-bottom: 1.25em; - + li { margin-bottom: 0.75em; // Consistent spacing in markdown content - + // Better spacing for list items with multiple paragraphs p { margin-top: 0.5em; margin-bottom: 0.5em; - + &:first-child { margin-top: 0; } - + &:last-child { margin-bottom: 0; } @@ -226,17 +229,21 @@ img { } a { - color: $color-1; /* Default link color */ - text-decoration: none; /* Remove underline by default */ + color: $color-1; + /* Default link color */ + text-decoration: none; + /* Remove underline by default */ font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, - "Noto Sans", sans-serif, "system-ui", "Segoe UI", Helvetica, Arial, - sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; + "Noto Sans", sans-serif, "system-ui", "Segoe UI", Helvetica, Arial, + sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; } a:hover { - color: $color-1; /* Change color on hover */ - text-decoration: underline; /* Underline on hover */ + color: $color-1; + /* Change color on hover */ + text-decoration: underline; + /* Underline on hover */ font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, - "Noto Sans", sans-serif, "system-ui", "Segoe UI", Helvetica, Arial, - sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; -} + "Noto Sans", sans-serif, "system-ui", "Segoe UI", Helvetica, Arial, + sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; +} \ No newline at end of file diff --git a/src/css/legacy.scss b/src/css/legacy.scss index 305976c..1ea4eaa 100644 --- a/src/css/legacy.scss +++ b/src/css/legacy.scss @@ -1,936 +1,960 @@ p { - margin: 0px !important; - } - - .code-card { + margin: 0px !important; +} + +.code-card { + p { + display: none !important; + } + + >div { p { display: none !important; } - > div { - p { - display: none !important; - } - } } - - .draggable-grid { - display: flex !important; - flex-wrap: wrap !important; - background: black !important; - min-height: 20em; - justify-content: center; - flex-direction: row !important; - gap: 0.2em; /* space between cards */ - p { - display: none !important; - } - - .node-ResizableImage { - display: flex; - width: fit-content; - flex: 1 1 10%; - min-height: 100%; - - .react-component { +} + +.draggable-grid { + display: flex !important; + flex-wrap: wrap !important; + background: black !important; + min-height: 20em; + justify-content: center; + flex-direction: row !important; + gap: 0.2em; + + /* space between cards */ + p { + display: none !important; + } + + .node-ResizableImage { + display: flex; + width: fit-content; + flex: 1 1 10%; + min-height: 100%; + + .react-component { + width: 100% !important; + height: 100% !important; + + img { width: 100% !important; height: 100% !important; - - img { - width: 100% !important; - height: 100% !important; - } } } - - .content { - display: inherit; - flex-wrap: inherit; - flex-direction: inherit; - gap: inherit; - justify-content: inherit; - } - - .node-draggableItem { - flex: 1 1 calc(25% - 1em) !important; + } + + .content { + display: inherit; + flex-wrap: inherit; + flex-direction: inherit; + gap: inherit; + justify-content: inherit; + } + + .node-draggableItem { + flex: 1 1 calc(25% - 1em) !important; + } + + .image-card { + flex: 1 1 calc(25% - 1em) !important; + } + + .draggable-item { + flex-direction: column; + //border: 1px solid #CAD0D2; + flex: 0 1 calc(20% - 1em); + + >div { + height: 100% !important; } - - .image-card { - flex: 1 1 calc(25% - 1em) !important; + + >.content div:first-child { + height: 100% !important; } - - .draggable-item { - flex-direction: column; - //border: 1px solid #CAD0D2; - flex: 0 1 calc(20% - 1em); - > div { - height: 100% !important; - } - > .content div:first-child { - height: 100% !important; - } - pre { - height: 100% !important; - } - p { - display: block !important; - } + + pre { + height: 100% !important; } - } - - .draggable-logo-grid { - display: flex !important; - flex-wrap: wrap !important; - - - justify-content: center; - flex-direction: row !important; - gap: 2em; /* space between cards */ + p { - display: none !important; - } - - .node-ResizableImage { - display: flex; - width: fit-content; - flex: 0 0 5%; - // min-height: 100%; - // min-height: 100%; - - .react-component { + display: block !important; + } + } +} + +.draggable-logo-grid { + display: flex !important; + flex-wrap: wrap !important; + + + justify-content: center; + flex-direction: row !important; + gap: 2em; + + /* space between cards */ + p { + display: none !important; + } + + .node-ResizableImage { + display: flex; + width: fit-content; + flex: 0 0 5%; + // min-height: 100%; + // min-height: 100%; + + .react-component { + width: 100% !important; + height: 100% !important; + + img { width: 100% !important; height: 100% !important; - - img { - width: 100% !important; - height: 100% !important; - } } } - - .content { - display: inherit; - flex-wrap: inherit; - flex-direction: inherit; - gap: inherit; - justify-content: inherit; + } + + .content { + display: inherit; + flex-wrap: inherit; + flex-direction: inherit; + gap: inherit; + justify-content: inherit; + } + + .node-draggableItem { + flex: 1 1 calc(25% - 1em) !important; + } + + .image-card { + flex: 1 1 calc(25% - 1em) !important; + } + + .draggable-item { + flex-direction: column; + //border: 1px solid #CAD0D2; + flex: 0 1 calc(20% - 1em); + + >div { + height: 100% !important; } - - .node-draggableItem { - flex: 1 1 calc(25% - 1em) !important; + + >.content div:first-child { + height: 100% !important; } - - .image-card { - flex: 1 1 calc(25% - 1em) !important; + + pre { + height: 100% !important; } - - .draggable-item { - flex-direction: column; - //border: 1px solid #CAD0D2; - flex: 0 1 calc(20% - 1em); - > div { - height: 100% !important; - } - > .content div:first-child { - height: 100% !important; - } - pre { + + p { + display: block !important; + } + } +} + +.background-landing { + height: 100ch; + display: block; + justify-content: center; + align-items: center; + opacity: 0.8; + + >h1, + h2, + h3, + h4, + h5, + h6 { + padding-left: 10em; + padding-right: 10em; + letter-spacing: -1.6px; + } + + .content { + height: 100%; + display: flex; + flex-direction: column; + align-items: center !important; + justify-content: center !important; + backdrop-filter: blur(5px); + } +} + +.cta { + display: block; + justify-content: center; + align-items: center; + opacity: 0.8; + + >h1, + h2, + h3, + h4, + h5, + h6 { + letter-spacing: -1.6px; + } + + .content { + height: 100%; + display: flex; + flex-direction: column; + align-items: center !important; + justify-content: center !important; + backdrop-filter: blur(5px); + } +} + +.radial-card-content { + display: flex; + flex-direction: column; + background-color: rgb(16 16 50) !important; + justify-content: center !important; + align-items: center; + border: 1px solid rgb(255 255 255 / 5%) !important; + border-radius: 1.5rem; + gap: 1rem; + background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1px, + transparent 1px) !important; + background-position: 50% 50%; + background-size: 1.1rem 1.1rem; + padding: 0rem !important; + + border-radius: 1.25rem; + + .node-ResizableImage { + width: fit-content; + flex: 0 0 20%; + min-height: 0; + + .react-component { + width: 100% !important; + height: 100% !important; + + img { + width: 100% !important; height: 100% !important; } - p { - display: block !important; - } } } - + + .content {} + + >div { + flex: 1 1 0px; + height: 100% !important; + align-self: stretch; + } + + .content div:first-child { + height: fit-content; + justify-content: flex-start !important; + } +} + +.inside-magic { + background: var(--color-2); + min-height: 100%; + margin-top: 0px; +} + +.inside-magic p { + display: block !important; +} + +.inside-magic br { + display: block !important; +} + +.magic-card { + + + + border-radius: 0.5rem; + z-index: 1; + position: relative; + padding-top: 0 !important; + + .draggable-image-item { + display: flex; + width: fit-content; + flex: 1 1 10%; + min-height: 100%; + + + width: 100% !important; + height: 100% !important; + + img { + width: 100% !important; + height: 100% !important; + } + + } + + // div { + // height: 100% !important; + // } +} + +.magic-image-card { + @extend .magic-card; + padding-top: 1em !important; + padding: 1em; + display: flex; + + .img { + flex: 1 1 10px; + } + + // div { + // height: 100% !important; + // } +} + + + + + +.magic-card p { + display: none; +} + +.magic-card br { + display: none; +} + +.magic-card:hover { + color: rgb(88, 199, 250); + transition: color 1s; +} + +.magic-card::before, +.magic-card::after { + content: ""; + position: absolute; + inset: -0.5rem; + z-index: -1; + background: conic-gradient(from var(--gradient-angle), + $color-3, + $color-4, + $color-5, + $color-4, + $color-3 ); + border-radius: inherit; + animation: rotation 10s linear infinite; +} + +.magic-card::after { + filter: blur(3.5rem); +} + +@property --gradient-angle { + syntax: ""; + initial-value: 0deg; + inherits: false; +} + +.general-card { + background-color: rgba(255, 255, 255, 0.015); + border-color: rgba(255, 255, 255, 0.1); + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05), 0px 8px 15px rgba(0, 0, 0, 0.1), + 0 0 0 1px rgba(255, 255, 255, 0.1); + padding: 56px 16px 16px 16px; + border-radius: 15px; + cursor: pointer; + position: relative; + transition: box-shadow 0.25s; + height: 100%; +} + +.card-one { + border-radius: 10px; + border: 2px solid darken($color-1, 10%); +} + +.glass-card-one { + backdrop-filter: blur(16px) saturate(180%); + -webkit-backdrop-filter: blur(16px) saturate(180%); + background-color: rgba(red($color-1), green($color-1), blue($color-1), 0.5); + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.125); +} + +.card-two { + border-radius: 10px; + border: 2px solid darken($color-2, 10%); +} + +.glass-card-two { + backdrop-filter: blur(16px) saturate(180%); + -webkit-backdrop-filter: blur(16px) saturate(180%); + background-color: rgba(red($color-2), green($color-2), blue($color-2), 0.5); + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.125); +} + +.card-three { + border-radius: 10px; + border: 2px solid darken($color-3, 10%); +} + +.glass-card-three { + backdrop-filter: blur(16px) saturate(180%); + -webkit-backdrop-filter: blur(16px) saturate(180%); + background-color: rgba(red($color-3), green($color-3), blue($color-3), 0.5); + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.125); +} + +.card-four { + border-radius: 10px; + border: 2px solid darken($color-4, 10%); +} + +@keyframes rotation { + 0% { + --gradient-angle: 0deg; + } + + 100% { + --gradient-angle: 360deg; + } +} + +.button { + box-sizing: border-box; + box-shadow: none; + border: none; + font-size: 14px; + padding: 2em; + // letter-spacing: 5px; + color: white; + border: solid 4px transparent; + border-image: linear-gradient(45deg, pink, skyblue); + border-image-slice: 1; + background: linear-gradient(45deg, pink, skyblue); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + + +br { + display: none; // or any other styles you want to apply + } + +} + +.border-button { + box-sizing: border-box; + box-shadow: none; + border: none; + font-size: 14px; + padding: 2em; + // letter-spacing: 5px; + color: white; + border: solid 4px transparent; + border-image: linear-gradient(45deg, pink, skyblue); + border-image-slice: 1; + background: linear-gradient(45deg, pink, skyblue); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +.border-button { + // Your styles here... + + +br { + display: none; // or any other styles you want to apply + } +} + +.gradient-button { + box-sizing: border-box; + box-shadow: none; + border: none; + padding: 2em; + font-size: 14px; + // letter-spacing: 5px; + color: white; + border: solid 4px transparent; + border-image: linear-gradient(45deg, pink, skyblue); + border-image-slice: 1; + color: white; + background-image: linear-gradient(90deg, #7b81ec, #3bd1d3); + + +br { + display: none; // or any other styles you want to apply + } +} + +.gradient-blur-button { + background-image: linear-gradient(to right, #DA22FF 0%, #9733EE 51%, #DA22FF 100%); + margin: 10px; + padding: 15px 45px; + text-align: center; + text-transform: uppercase; + transition: 0.5s; + background-size: 200% auto; + color: white; + box-shadow: 0 0 20px #eee; + border-radius: 10px; + display: block; + + +br { + display: none; // or any other styles you want to apply + } + +} + + +.btn-grad { + background-image: linear-gradient(to right, #3A1C71 0%, #D76D77 51%, #3A1C71 100%); + margin: 10px; + padding: 15px 45px; + text-align: center; + transition: 0.5s; + background-size: 200% auto; + color: white; + box-shadow: 0 0 20px #eee; + border-radius: 10px; + + +br { + display: none; // or any other styles you want to apply + } +} + +.btn-grad:hover { + background-position: right center; + /* change the direction of the change here */ + color: #fff; +} + + +@media (max-width: 768px) { + .border-button { + display: flex; + max-width: 100%; + } + + .background-landing { height: 100ch; display: block; justify-content: center; align-items: center; opacity: 0.8; - - > h1, + + >h1, h2, h3, h4, h5, h6 { - padding-left: 10em; - padding-right: 10em; + padding-left: 0em; + padding-right: 0em; letter-spacing: -1.6px; } - + .content { height: 100%; - display: flex; - flex-direction: column; - align-items: center !important; - justify-content: center !important; - backdrop-filter: blur(5px); + display: flex !important; + font-size: 5px; + flex-direction: column !important; + gap: 10em; + word-wrap: break-word; + flex: 0 0 calc(100% - 1em) !important; // Adjust width to 100% on small devices } } - + .cta { display: block; justify-content: center; align-items: center; opacity: 0.8; - - > h1, + + >h1, h2, h3, h4, h5, h6 { + padding-left: 0em; + padding-right: 0em; letter-spacing: -1.6px; } - + .content { height: 100%; - display: flex; - flex-direction: column; - align-items: center !important; - justify-content: center !important; - backdrop-filter: blur(5px); + display: flex !important; + font-size: 5px; + flex-direction: column !important; + gap: 10em; + word-wrap: break-word; + flex: 0 0 calc(100% - 1em) !important; // Adjust width to 100% on small devices } } - - .radial-card-content { - display: flex; - flex-direction: column; - background-color: rgb(16 16 50) !important; - justify-content: center !important; - align-items: center; - border: 1px solid rgb(255 255 255 / 5%) !important; - border-radius: 1.5rem; - gap: 1rem; - background-image: radial-gradient( - rgba(255, 255, 255, 0.2) 1px, - transparent 1px - ) !important; - background-position: 50% 50%; - background-size: 1.1rem 1.1rem; - padding: 0rem !important; - - border-radius: 1.25rem; - .node-ResizableImage { - width: fit-content; - flex: 0 0 20%; - min-height: 0; - - .react-component { - width: 100% !important; - height: 100% !important; - - img { - width: 100% !important; - height: 100% !important; - } - } - } - .content { - } - > div { - flex: 1 1 0px; - height: 100% !important; - align-self: stretch; - } - .content div:first-child { - height: fit-content; - justify-content: flex-start !important; + + .draggable-grid { + .draggable-item { + flex-direction: column; + flex: 0 1 calc(100% - 1em); // Adjust width to 100% on small devices } } - - .inside-magic { - background: var(--color-2); - min-height: 100%; - margin-top: 0px; - } - - .inside-magic p { - display: block !important; - } - - .inside-magic br { - display: block !important; - } - - .magic-card { - - - - border-radius: 0.5rem; - z-index: 1; - position: relative; - padding-top: 0 !important; - - .draggable-image-item { - display: flex; - width: fit-content; - flex: 1 1 10%; - min-height: 100%; - - - width: 100% !important; - height: 100% !important; - - img { - width: 100% !important; - height: 100% !important; - } - - } - - // div { - // height: 100% !important; - // } - } - - .magic-image-card { - @extend .magic-card; - padding-top: 1em !important; - padding: 1em; + + .extend-width-full-page { + display: flex; - .img { - flex: 1 1 10px; - } - - // div { - // height: 100% !important; - // } - } - - - - - - .magic-card p { - display: none; - } - - .magic-card br { - display: none; - } - - .magic-card:hover { - color: rgb(88, 199, 250); - transition: color 1s; - } - - .magic-card::before, - .magic-card::after { - content: ""; - position: absolute; - inset: -0.5rem; - z-index: -1; - background: conic-gradient( - from var(--gradient-angle), - $color-3, - $color-4, - $color-5, - $color-4, - $color-3 - ); - border-radius: inherit; - animation: rotation 10s linear infinite; - } - - .magic-card::after { - filter: blur(3.5rem); - } - - @property --gradient-angle { - syntax: ""; - initial-value: 0deg; - inherits: false; - } - - .general-card { - background-color: rgba(255, 255, 255, 0.015); - border-color: rgba(255, 255, 255, 0.1); - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05), 0px 8px 15px rgba(0, 0, 0, 0.1), - 0 0 0 1px rgba(255, 255, 255, 0.1); - padding: 56px 16px 16px 16px; - border-radius: 15px; - cursor: pointer; - position: relative; - transition: box-shadow 0.25s; - height: 100%; } - - .card-one { - border-radius: 10px; - border: 2px solid darken($color-1, 10%); - } - - .glass-card-one { - backdrop-filter: blur(16px) saturate(180%); - -webkit-backdrop-filter: blur(16px) saturate(180%); - background-color: rgba(red($color-1), green($color-1), blue($color-1), 0.5); - border-radius: 12px; - border: 1px solid rgba(255, 255, 255, 0.125); - } - - .card-two { - border-radius: 10px; - border: 2px solid darken($color-2, 10%); - } - - .glass-card-two { - backdrop-filter: blur(16px) saturate(180%); - -webkit-backdrop-filter: blur(16px) saturate(180%); - background-color: rgba(red($color-2), green($color-2), blue($color-2), 0.5); - border-radius: 12px; - border: 1px solid rgba(255, 255, 255, 0.125); - } - - .card-three { - border-radius: 10px; - border: 2px solid darken($color-3, 10%); - } - - .glass-card-three { - backdrop-filter: blur(16px) saturate(180%); - -webkit-backdrop-filter: blur(16px) saturate(180%); - background-color: rgba(red($color-3), green($color-3), blue($color-3), 0.5); - border-radius: 12px; - border: 1px solid rgba(255, 255, 255, 0.125); - } - - .card-four { - border-radius: 10px; - border: 2px solid darken($color-4, 10%); - } - - @keyframes rotation { - 0% { - --gradient-angle: 0deg; - } - 100% { - --gradient-angle: 360deg; + + .radial-card-content { + .content div:first-child { + height: fit-content !important; // Adjust height for small devices + display: flex; + gap: 1em !important; + flex-direction: column !important; } } - - .button { - box-sizing: border-box; - box-shadow: none; - border: none; - font-size: 14px; - padding: 2em; - // letter-spacing: 5px; - color: white; - border: solid 4px transparent; - border-image: linear-gradient(45deg, pink, skyblue); - border-image-slice: 1; - background: linear-gradient(45deg, pink, skyblue); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - + br { - display: none; // or any other styles you want to apply - } - + + + + .draggable-logo-grid .content { + display: flex !important; + flex-flow: inherit; + gap: inherit; + justify-content: center; + flex-direction: column; + flex-wrap: wrap; + align-items: center; } - - .border-button { - box-sizing: border-box; - box-shadow: none; - border: none; - font-size: 14px; - padding: 2em; - // letter-spacing: 5px; - color: white; - border: solid 4px transparent; - border-image: linear-gradient(45deg, pink, skyblue); - border-image-slice: 1; - background: linear-gradient(45deg, pink, skyblue); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - } - - .border-button { - // Your styles here... - - + br { - display: none; // or any other styles you want to apply +} + +@media (max-width: 1024px) { + .draggable-grid { + .draggable-item { + flex: 0 1 calc(50% - 1em); // Adjust width to 50% on medium devices } } - - .gradient-button { - box-sizing: border-box; - box-shadow: none; - border: none; - padding: 2em; - font-size: 14px; - // letter-spacing: 5px; - color: white; - border: solid 4px transparent; - border-image: linear-gradient(45deg, pink, skyblue); - border-image-slice: 1; - color: white; - background-image: linear-gradient(90deg, #7b81ec, #3bd1d3); - + br { - display: none; // or any other styles you want to apply + + .radial-card-content { + .content div:first-child { + height: 450px; // Adjust height for medium devices } } - - .gradient-blur-button { - background-image: linear-gradient(to right, #DA22FF 0%, #9733EE 51%, #DA22FF 100%); - margin: 10px; - padding: 15px 45px; - text-align: center; - text-transform: uppercase; - transition: 0.5s; - background-size: 200% auto; - color: white; - box-shadow: 0 0 20px #eee; - border-radius: 10px; - display: block; - + br { - display: none; // or any other styles you want to apply - } - - } - - - .btn-grad { - background-image: linear-gradient(to right, #3A1C71 0%, #D76D77 51%, #3A1C71 100%); - margin: 10px; - padding: 15px 45px; - text-align: center; - transition: 0.5s; - background-size: 200% auto; - color: white; - box-shadow: 0 0 20px #eee; - border-radius: 10px; - + br { - display: none; // or any other styles you want to apply - } + + +} + +.ProseMirror { + >*+* { + margin-top: 0.75em; } - - .btn-grad:hover { - background-position: right center; /* change the direction of the change here */ + + pre { + background: #0d0d0d; + border-radius: 0.5rem; color: #fff; + font-family: "JetBrainsMono", monospace; + padding: 0.75rem 1rem; + + code { + background: none; + color: inherit; + font-size: 0.8rem; + padding: 0; + } + + .hljs-comment, + .hljs-quote { + color: #616161; + } + + .hljs-variable, + .hljs-template-variable, + .hljs-attribute, + .hljs-tag, + .hljs-name, + .hljs-regexp, + .hljs-link, + .hljs-name, + .hljs-selector-id, + .hljs-selector-class { + color: #f98181; + } + + .hljs-number, + .hljs-meta, + .hljs-built_in, + .hljs-builtin-name, + .hljs-literal, + .hljs-type, + .hljs-params { + color: #fbbc88; + } + + .hljs-string, + .hljs-symbol, + .hljs-bullet { + color: #b9f18d; + } + + .hljs-title, + .hljs-section { + color: #faf594; + } + + .hljs-keyword, + .hljs-selector-tag { + color: #70cff8; + } + + .hljs-emphasis { + font-style: italic; + } + + .hljs-strong { + font-weight: 700; + } + } +} + +.callout { + display: flex; + align-items: center; + padding-top: 1em; + + div { + display: flex !important; + flex-direction: column; } - - - @media (max-width: 768px) { - .border-button { - display: flex; - max-width: 100%; - } - - - .background-landing { - height: 100ch; - display: block; - justify-content: center; - align-items: center; - opacity: 0.8; - > h1, - h2, - h3, - h4, - h5, - h6 { - padding-left: 0em; - padding-right: 0em; - letter-spacing: -1.6px; - } - .content { - height: 100%; - display: flex !important; - font-size: 5px; - flex-direction: column !important; - gap: 10em; - word-wrap: break-word; - flex: 0 0 calc(100% - 1em) !important; // Adjust width to 100% on small devices - } - } - - .cta { - display: block; - justify-content: center; - align-items: center; - opacity: 0.8; - > h1, - h2, - h3, - h4, - h5, - h6 { - padding-left: 0em; - padding-right: 0em; - letter-spacing: -1.6px; - } - .content { - height: 100%; - display: flex !important; - font-size: 5px; - flex-direction: column !important; - gap: 10em; - word-wrap: break-word; - flex: 0 0 calc(100% - 1em) !important; // Adjust width to 100% on small devices - } - } - - .draggable-grid { - .draggable-item { - flex-direction: column; - flex: 0 1 calc(100% - 1em); // Adjust width to 100% on small devices - } - } - - .extend-width-full-page { - - display: flex; - } - - .radial-card-content { - .content div:first-child { - height: fit-content !important; // Adjust height for small devices - display: flex; - gap: 1em !important; - flex-direction: column !important; - } - } - - - - .draggable-logo-grid .content { - display: flex !important; - flex-flow: inherit; - gap: inherit; - justify-content: center; - flex-direction: column; - flex-wrap: wrap; - align-items: center; - } - } - - @media (max-width: 1024px) { - .draggable-grid { - .draggable-item { - flex: 0 1 calc(50% - 1em); // Adjust width to 50% on medium devices - } - } - - .radial-card-content { - .content div:first-child { - height: 450px; // Adjust height for medium devices - } - } - - - } - - .ProseMirror { - > * + * { - margin-top: 0.75em; - } - - pre { - background: #0d0d0d; - border-radius: 0.5rem; - color: #fff; - font-family: "JetBrainsMono", monospace; - padding: 0.75rem 1rem; - - code { - background: none; - color: inherit; - font-size: 0.8rem; - padding: 0; - } - - .hljs-comment, - .hljs-quote { - color: #616161; - } - - .hljs-variable, - .hljs-template-variable, - .hljs-attribute, - .hljs-tag, - .hljs-name, - .hljs-regexp, - .hljs-link, - .hljs-name, - .hljs-selector-id, - .hljs-selector-class { - color: #f98181; - } - - .hljs-number, - .hljs-meta, - .hljs-built_in, - .hljs-builtin-name, - .hljs-literal, - .hljs-type, - .hljs-params { - color: #fbbc88; - } - - .hljs-string, - .hljs-symbol, - .hljs-bullet { - color: #b9f18d; - } - - .hljs-title, - .hljs-section { - color: #faf594; - } - - .hljs-keyword, - .hljs-selector-tag { - color: #70cff8; - } - - .hljs-emphasis { - font-style: italic; - } - - .hljs-strong { - font-weight: 700; - } - } - } - - .callout { - display: flex; - align-items: center; - padding-top: 1em; - div { - display: flex !important; - flex-direction: column; - } - } - - // table { - // /* Add a semi-transparent background */ - // // background: rgba(255, 255, 255, 0.25); - - // /* Create a border and border radius */ - // border: 1px solid rgba(255, 255, 255, 0.18); - // border-radius: 10px; - // background: none !important; - // /* Create the blur (this is the glass effect) */ - // // backdrop-filter: blur(4px); - - // /* Just to center the table on the page */ - // margin: auto; - // } - - th, - td { - /* Add padding to cells */ - padding: 10px 20px !important; - background: none !important; - /* Create a semi-transparent border for cells */ - border: none !important; - } - - tr { - background-color: none !important; - background: none !important; - } - - th { - /* Add a background color to header cells */ - background-color: transparent !important; - } - - .selectedCell { - background-color: transparent !important; - background: none !important; - } - - .gradient-hover-card-one { - background-color: rgba(255, 255, 255, 0.015); - border-color: rgba(255, 255, 255, 0.1); - overflow: hidden; - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05), 0px 8px 15px rgba(0, 0, 0, 0.1), - 0 0 0 1px rgba(255, 255, 255, 0.1); - padding: 56px 16px 16px 16px; - border-radius: 15px; - cursor: pointer; - position: relative; - height: fit-content; - min-height: 100%; - transition: box-shadow 0.25s; - } - - .gradient-hover-card-one::before { - transition: opacity 0.5s; - content: ""; - position: absolute; - top: 0; - right: 0; - - width: 20%; - height: 20%; - background: radial-gradient(circle at top right, $color-1, transparent); - filter: blur(110px); - z-index: 2; - } - - .gradient-hover-card-one:hover::before { - top: 0; - right: 0; - width: 30%; - height: 30%; - border-radius: 25px; - opacity: 1; - animation: rotate 15s linear infinite; - } - - .gradient-hover-card-two { - @extend .gradient-hover-card-one; - } - - .gradient-hover-card-two:before { - transition: opacity 0.5s; - content: ""; - position: absolute; - top: 0; - right: 0; - - width: 20%; - height: 20%; - background: radial-gradient(circle at top right, $color-2, transparent); - filter: blur(110px); - z-index: 2; - } - - .gradient-hover-card-two:hover::before { - top: 0; - right: 0; - width: 30%; - height: 30%; - border-radius: 25px; - opacity: 1; - animation: rotate 15s linear infinite; - } - - .gradient-hover-card-three { - @extend .gradient-hover-card-one; - } - - .gradient-hover-card-three:before { - transition: opacity 0.5s; - content: ""; - position: absolute; - top: 0; - right: 0; - - width: 20%; - height: 20%; - background: radial-gradient(circle at top right, $color-3, transparent); - filter: blur(110px); - z-index: 2; - } - - .gradient-hover-card-three:hover::before { - top: 0; - right: 0; - width: 30%; - height: 30%; - border-radius: 25px; - opacity: 1; - animation: rotate 15s linear infinite; - } - - .gradient-hover-card-four { - @extend .gradient-hover-card-one; - } - - .gradient-hover-card-four:before { - transition: opacity 0.5s; - content: ""; - position: absolute; - top: 0; - right: 0; - - width: 20%; - height: 20%; - background: radial-gradient(circle at top right, $color-4, transparent); - filter: blur(110px); - z-index: 2; - } - - .gradient-hover-card-four:hover::before { - top: 0; - right: 0; - width: 30%; - height: 30%; - border-radius: 25px; - opacity: 1; - animation: rotate 15s linear infinite; - } - - .gradient-hover-card-five { - @extend .gradient-hover-card-one; - } - - .gradient-hover-card-five:before { - transition: opacity 0.5s; - content: ""; - position: absolute; - top: 0; - right: 0; - - width: 20%; - height: 20%; - background: radial-gradient(circle at top right, $color-5, transparent); - filter: blur(110px); - z-index: 2; - } - - .gradient-hover-card-five:hover::before { - top: 0; - right: 0; - width: 30%; - height: 30%; - border-radius: 25px; - opacity: 1; - animation: rotate 15s linear infinite; - } - - .flex-img { - padding: 10px; +} + +// table { +// /* Add a semi-transparent background */ +// // background: rgba(255, 255, 255, 0.25); + +// /* Create a border and border radius */ +// border: 1px solid rgba(255, 255, 255, 0.18); +// border-radius: 10px; +// background: none !important; +// /* Create the blur (this is the glass effect) */ +// // backdrop-filter: blur(4px); + +// /* Just to center the table on the page */ +// margin: auto; +// } + +th, +td { + /* Add padding to cells */ + padding: 10px 20px !important; + background: none !important; + /* Create a semi-transparent border for cells */ + border: none !important; +} + +tr { + background-color: none !important; + background: none !important; +} + +th { + /* Add a background color to header cells */ + background-color: transparent !important; +} + +.selectedCell { + background-color: transparent !important; + background: none !important; +} + +.gradient-hover-card-one { + background-color: rgba(255, 255, 255, 0.015); + border-color: rgba(255, 255, 255, 0.1); + overflow: hidden; + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05), 0px 8px 15px rgba(0, 0, 0, 0.1), + 0 0 0 1px rgba(255, 255, 255, 0.1); + padding: 56px 16px 16px 16px; + border-radius: 15px; + cursor: pointer; + position: relative; + height: fit-content; + min-height: 100%; + transition: box-shadow 0.25s; +} + +.gradient-hover-card-one::before { + transition: opacity 0.5s; + content: ""; + position: absolute; + top: 0; + right: 0; + + width: 20%; + height: 20%; + background: radial-gradient(circle at top right, $color-1, transparent); + filter: blur(110px); + z-index: 2; +} + +.gradient-hover-card-one:hover::before { + top: 0; + right: 0; + width: 30%; + height: 30%; + border-radius: 25px; + opacity: 1; + animation: rotate 15s linear infinite; +} + +.gradient-hover-card-two { + @extend .gradient-hover-card-one; +} + +.gradient-hover-card-two:before { + transition: opacity 0.5s; + content: ""; + position: absolute; + top: 0; + right: 0; + + width: 20%; + height: 20%; + background: radial-gradient(circle at top right, $color-2, transparent); + filter: blur(110px); + z-index: 2; +} + +.gradient-hover-card-two:hover::before { + top: 0; + right: 0; + width: 30%; + height: 30%; + border-radius: 25px; + opacity: 1; + animation: rotate 15s linear infinite; +} + +.gradient-hover-card-three { + @extend .gradient-hover-card-one; +} + +.gradient-hover-card-three:before { + transition: opacity 0.5s; + content: ""; + position: absolute; + top: 0; + right: 0; + + width: 20%; + height: 20%; + background: radial-gradient(circle at top right, $color-3, transparent); + filter: blur(110px); + z-index: 2; +} + +.gradient-hover-card-three:hover::before { + top: 0; + right: 0; + width: 30%; + height: 30%; + border-radius: 25px; + opacity: 1; + animation: rotate 15s linear infinite; +} + +.gradient-hover-card-four { + @extend .gradient-hover-card-one; +} + +.gradient-hover-card-four:before { + transition: opacity 0.5s; + content: ""; + position: absolute; + top: 0; + right: 0; + + width: 20%; + height: 20%; + background: radial-gradient(circle at top right, $color-4, transparent); + filter: blur(110px); + z-index: 2; +} + +.gradient-hover-card-four:hover::before { + top: 0; + right: 0; + width: 30%; + height: 30%; + border-radius: 25px; + opacity: 1; + animation: rotate 15s linear infinite; +} + +.gradient-hover-card-five { + @extend .gradient-hover-card-one; +} + +.gradient-hover-card-five:before { + transition: opacity 0.5s; + content: ""; + position: absolute; + top: 0; + right: 0; + + width: 20%; + height: 20%; + background: radial-gradient(circle at top right, $color-5, transparent); + filter: blur(110px); + z-index: 2; +} + +.gradient-hover-card-five:hover::before { + top: 0; + right: 0; + width: 30%; + height: 30%; + border-radius: 25px; + opacity: 1; + animation: rotate 15s linear infinite; +} + +.flex-img { + padding: 10px; + background-color: blue; + height: 50px !important; + + img { background-color: blue; height: 50px !important; - - img { - background-color: blue; - height: 50px !important; - } - } - - .extend-width-full-page { - width: 100vw !important; - } - - .extend-height-full-page { - height: 100vw; - } - - .extend-half-page { - .node-ResizableImage { - height: auto; - width: auto; - } - } - - - @keyframes rotate { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(-360deg); - } } - \ No newline at end of file +} + +.extend-width-full-page { + width: 100vw !important; +} + +.extend-height-full-page { + height: 100vw; +} + +.extend-half-page { + .node-ResizableImage { + height: auto; + width: auto; + } +} + + +@keyframes rotate { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(-360deg); + } +} \ No newline at end of file diff --git a/src/css/root-and-body.scss b/src/css/root-and-body.scss index 55c3636..fd52aee 100644 --- a/src/css/root-and-body.scss +++ b/src/css/root-and-body.scss @@ -1,5 +1,3 @@ - - // :root { // --ifm-color-primary: $color-1; // --ifm-color-primary-dark: #4600dd; @@ -58,7 +56,7 @@ $dark-darkest: $color-1-6; // border: none; // } -[data-theme="dark"] #__docusaurus__skipToContent__fallback > div { +[data-theme="dark"] #__docusaurus__skipToContent__fallback>div { backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); background: radial-gradient(circle at 50% 50%, #2B579A, #355695, #2B579A); @@ -71,28 +69,31 @@ $dark-darkest: $color-1-6; 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } } -[data-theme="dark"] #docusaurus_skipToContent_fallback > div { +[data-theme="dark"] #docusaurus_skipToContent_fallback>div { backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); background-color: rgba(17, 25, 40, 0.75) !important; border: none; } -html, body { +html, +body { // height: 100%; // max-width: 100vw !important; overflow-x: hidden; } -#__docusaurus_skipToContent_fallback > main > pre { +#__docusaurus_skipToContent_fallback>main>pre { position: fixed; opacity: 0; height: 10px; @@ -140,7 +141,8 @@ html, body { top: 0; left: 0; right: 0; - height: 60vh; /* Adjust this value as needed */ + height: 60vh; + /* Adjust this value as needed */ background: radial-gradient(ellipse 349px 354px at 60% 40%, rgba(#2B579A, var(--ellipis-transparency)) 40%, transparent 90%) no-repeat; background-size: 100% 200%; animation: gradientAnimation 10s ease infinite; @@ -170,7 +172,8 @@ html, body { top: 0; left: 0; right: 0; - height: 70vh; /* Adjust this value as needed */ + height: 70vh; + /* Adjust this value as needed */ background: radial-gradient(ellipse 315.122px 352.987px at 80% 50%, rgba(#F6BF5A, var(--ellipis-transparency)) 40%, transparent 90%) no-repeat; background-size: 100% 200%; animation: gradientAnimation 10s ease infinite; @@ -189,31 +192,33 @@ html, body { } [class^="admonition"] { - ul, ol { + + ul, + ol { margin-left: 1.25em; margin-top: 1em; margin-bottom: 1em; padding-left: 1.5em; line-height: 1.6; - + li { margin-bottom: 0.75em; line-height: 1.5; - + // Better spacing for list items with paragraphs p { margin-top: 0.25em; margin-bottom: 0.25em; - + &:first-child { margin-top: 0; } - + &:last-child { margin-bottom: 0; } } - + // Last list item shouldn't have bottom margin &:last-child { margin-bottom: 0; @@ -228,7 +233,8 @@ html, body { top: 0; left: 0; right: 0; - height: 200px; /* Adjust this value as needed */ + height: 200px; + /* Adjust this value as needed */ background: radial-gradient(ellipse 50vw 80px at 95% 40%, rgba(#F6BF5A, 20%) 40%, transparent 95%); background-size: 100% 200%; animation: gradientAnimation 10s ease infinite; @@ -248,7 +254,8 @@ html, body { top: 0; left: 0; right: 0; - height: 200px; /* Adjust this value as needed */ + height: 200px; + /* Adjust this value as needed */ background: radial-gradient(ellipse 50vw 80px at 70% 40%, rgba(#F6BF5A, 20%) 40%, transparent 95%); background-size: 100% 200%; animation: gradientAnimation 10s ease infinite; @@ -260,6 +267,7 @@ html, body { padding-left: 5em; padding-right: 5em; } + background-color: transparent; // backdrop-filter: blur(16px) saturate(10%); // -webkit-backdrop-filter: blur(16px) saturate(10%); @@ -269,6 +277,7 @@ html, body { margin-top: 1.25em; margin-bottom: 1.25em; } + /* Styles for elements with a class that starts with "word" */ } @@ -301,5 +310,4 @@ html, body { // @media (max-width: 768px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) { // background-image: radial-gradient(circle at 500px 1px, $primary 3%, transparent 71%, rgba(0, 0, 0, 0.1)) !important; // } -// } - +// } \ No newline at end of file diff --git a/src/css/sidebar.scss b/src/css/sidebar.scss index f838563..a5ac870 100644 --- a/src/css/sidebar.scss +++ b/src/css/sidebar.scss @@ -1,12 +1,11 @@ - // import design-preferences.scss - +@use "./design-preferences.scss" as prefs; .menu__link--active:not(.menu__link--sublist) { border-radius: 7px; - background: $color-1-1; - color: $color-1; + background: prefs.$color-1-1; + color: prefs.$color-1; /* Navigation Selected */ font-family: Inter; @@ -53,13 +52,11 @@ // } -.thin-scrollbar.theme-doc-toc-desktop { - -} +.thin-scrollbar.theme-doc-toc-desktop {} -#__docusaurus > nav > div.navbar__inner > div:nth-child(1) > button > svg { +#__docusaurus>nav>div.navbar__inner>div:nth-child(1)>button>svg { color: black !important } @@ -70,17 +67,16 @@ } .tocCollapsible_node_modules-\@docusaurus-theme-classic-lib-theme-TOCCollapsible-styles-module.theme-doc-toc-mobile.tocMobile_node_modules-\@docusaurus-theme-classic-lib-theme-DocItem-TOC-Mobile-styles-module { - .clean-btn { - padding-left: 2rem; - display: unset !important; - } + .clean-btn { + padding-left: 2rem; + display: unset !important; + } } .navbar-sidebar__back { margin-top: 20px; background: transparent; color: black !important - } .navbar-toggle { @@ -99,13 +95,13 @@ } .breadcrumbs { - li:nth-child(1) { + li:nth-child(1) { display: none !important; - } + } } .breadcrumbs__item--active .breadcrumbs__link { - background: $color-1; + background: prefs.$color-1; color: white; } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3ccbe50..5c0e1bf 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -10,10 +10,10 @@ import landingJson from '../../landing.json' import Landing from "./_landing_page.md" import styles from './index.module.css'; import Parser from '../components/Parser'; -import {Redirect} from '@docusaurus/router'; +import { Redirect } from '@docusaurus/router'; function HomepageHeader() { - const {siteConfig} = useDocusaurusContext(); + const { siteConfig } = useDocusaurusContext(); return (
@@ -32,7 +32,7 @@ function HomepageHeader() { } export default function Home(): JSX.Element { - const {siteConfig} = useDocusaurusContext() + const { siteConfig } = useDocusaurusContext() const data = landingJson return ( diff --git a/src/theme/MDXComponents/index.js b/src/theme/MDXComponents/index.js index ac73561..fea9ea4 100644 --- a/src/theme/MDXComponents/index.js +++ b/src/theme/MDXComponents/index.js @@ -3,10 +3,22 @@ import MDXComponents from '@theme-original/MDXComponents'; import Parser from '@site/src/components/Parser'; import CodeSnippets from '@site/src/components/CodeSnippets'; import InfoBox from '@site/src/components/InfoBox'; +import JsonToTable from '@site/src/components/JsonToTable'; +import BodyTable from '@site/src/components/BodyTable'; +import QueryTable from '@site/src/components/QueryTable'; +import HeadersTable from '@site/src/components/HeadersTable.jsx'; +import DisplayJson from '@site/src/components/DisplayJson'; +import DisplayEndpoint from '@site/src/components/DisplayEndpoint'; export default { ...MDXComponents, CodeSnippets, InfoBox, Parser, + JsonToTable, + BodyTable, + QueryTable, + HeadersTable, + DisplayJson, + DisplayEndpoint }; \ No newline at end of file diff --git a/src/theme/MDXContent/index.js b/src/theme/MDXContent/index.js index cb37050..d66b81e 100644 --- a/src/theme/MDXContent/index.js +++ b/src/theme/MDXContent/index.js @@ -16,46 +16,50 @@ export default function MDXContentWrapper(props) { history.push("/docs/another-page"); }; + const metadata = props?.children?.type?.metadata ?? {}; + const frontMatter = props?.children?.type?.frontMatter ?? {}; + const authors = Array.isArray(metadata.authors) ? metadata.authors : []; + return ( <> - {props?.children?.type?.metadata?.title ? ( + {metadata?.readingTime ? ( <>

- - {props.children.type.metadata.title} + + {metadata.title}

- {props.children.type.metadata.authors.length > 0 && - props.children.type.metadata.authors.map((item, index) => ( + {authors.length > 0 && + authors.map((item, index) => ( {" " + item.name + ","} ))} -   On {props.children.type.metadata.formattedDate},{" "} - {Math.ceil(props.children.type.metadata.readingTime * 10) / 1} min +   On {metadata.formattedDate},{" "} + {Math.ceil(metadata.readingTime * 10) / 1} min

- {props.children.type.metadata.authors.map((item, index) => ( + {authors.map((item, index) => (
))}
- {props.children.type.metadata.authors.length > 0 && - props.children.type.metadata.authors.map((item, index) => ( + {authors.length > 0 && + authors.map((item, index) => ( {" " + item.name + ","} ))}
diff --git a/src/theme/SearchBar.js b/src/theme/SearchBar.js index 45a204b..c4a696b 100644 --- a/src/theme/SearchBar.js +++ b/src/theme/SearchBar.js @@ -1,21 +1,67 @@ import React, { useEffect, useState } from 'react'; import SearchBar from '@theme-original/SearchBar'; +import { create, insertMultiple } from "@orama/orama"; +import useBaseUrl from '@docusaurus/useBaseUrl'; + + +const DOCS_PRESET_SCHEMA = { + title: "string", + content: "string", + category: "string", + url: "string", +}; export default function SearchBarWrapper(props) { const [isApple, setIsApple] = useState(false); + const [client, setClient] = useState(null); + const baseUrl = useBaseUrl('/'); useEffect(() => { // Detect platform for keyboard shortcut display const isAppleDevice = () => { - return typeof navigator !== 'undefined' && - /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform); + return typeof navigator !== 'undefined' && + /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform); }; - setIsApple(isAppleDevice()); }, []); useEffect(() => { // Override DocSearch button key display + // const updateKeyDisplay = () => { + // const kbdElements = document.querySelectorAll('.aa-DetachedSearchButton kbd'); + // if (kbdElements.length >= 2) { + // // Handle the case with separate Cmd/Ctrl and K keys + // const firstKey = kbdElements[0]; + // if (firstKey && isApple && firstKey.textContent === '⌘') { + // firstKey.textContent = 'Ctrl'; + // } else if (firstKey && isApple && firstKey.textContent === 'Ctrl') { + // firstKey.textContent = '⌘'; + // } + // } else { + // // Handle single key element + // kbdElements.forEach(key => { + // if (key && !isApple && (key.textContent === '⌘' || key.textContent.includes('⌘'))) { + // key.textContent = 'Ctrl'; + // } else if (key && isApple && (key.textContent === 'Ctrl' || key.textContent.includes('Ctrl'))) { + // key.textContent = '⌘'; + // } + // }); + // } + // }; + + // Run immediately and set up observer for dynamic updates + // updateKeyDisplay(); + + // const observer = new MutationObserver(() => { + // // Small delay to ensure DOM is updated + // setTimeout(updateKeyDisplay, 100); + // }); + + // observer.observe(document.body, { + // childList: true, + // subtree: true + // }); + const updateKeyDisplay = () => { const kbdElements = document.querySelectorAll('.aa-DetachedSearchButton kbd'); if (kbdElements.length >= 2) { @@ -38,22 +84,64 @@ export default function SearchBarWrapper(props) { } }; - // Run immediately and set up observer for dynamic updates + // run on load updateKeyDisplay(); - - const observer = new MutationObserver(() => { - // Small delay to ensure DOM is updated - setTimeout(updateKeyDisplay, 100); - }); - - observer.observe(document.body, { - childList: true, - subtree: true - }); + + // re‑run whenever DocSearch injects new bits + const observer = new MutationObserver(() => setTimeout(updateKeyDisplay, 50)); + observer.observe(document.body, { childList: true, subtree: true }); return () => observer.disconnect(); }, [isApple]); + useEffect(() => { + async function init() { + try { + // const res = await fetch("../../.docusaurus/orama-search-index-current.json.gz"); + // if (!res.ok) throw new Error(`Failed to fetch Orama index: ${res.status}`); + + // const buffer = await res.arrayBuffer(); + // const jsonStr = ungzip(buffer, { to: "string" }); + // const parsedData = JSON.parse(jsonStr); + const indexUrl = `${baseUrl}orama-index.json`; + const response = await fetch(indexUrl); + console.log(response) + const parsedData = await response.json(); + const documents = Object.values(parsedData.docs.docs); + + // Create Orama DB and insert docs + const db = create({ schema: DOCS_PRESET_SCHEMA }); + await insertMultiple(db, documents); + + const clientInstance = { + search: async ({ term }) => { + const { hits } = await db.search({ term }); + return { + results: hits.map((hit) => ({ + title: hit.document.title, + description: hit.document.content.slice(0, 100), + url: hit.document.url, + })), + }; + }, + }; + + setClient(clientInstance); + } catch (error) { + console.error("Error initializing Orama search:", error); + } + } + + init(); + }, [baseUrl]); + + + props = { + ...props, + clientInstance: { client }, + } + + if (!client) return null; return (
From 46f1854bc3efad2cddfc381b945813b0486202fd Mon Sep 17 00:00:00 2001 From: s0ham075 Date: Tue, 29 Jul 2025 15:54:40 +0530 Subject: [PATCH 2/4] PR review changes --- README.md | 28 ++++++++- docs/API/create-deliverable.api.mdx | 2 +- docusaurus.config.js | 18 +----- package.json | 1 - scripts/exportOramaIndex.js | 17 ++++++ src/theme/SearchBar.js | 88 ++++++++--------------------- 6 files changed, 71 insertions(+), 83 deletions(-) create mode 100644 scripts/exportOramaIndex.js diff --git a/README.md b/README.md index 0dba734..11eeb3f 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,31 @@ -# Welcome to your Dev-Docs Repo +--- -This Repo is the Starter Template and it was made by AVB +# Welcome to Dev-Docs 🚀 -``` +This is your starter template, built by **AVB**. + +### Quick Start + +```bash npm run start -- --host 0.0.0.0 ``` +### Setup + +This repo uses [docusaurus-plugin-llms](https://github.com/nicolasiscoding/docusaurus-plugin-llms). Run: + +```bash +git submodule update --init +npm install +``` + +### Commands + +```bash +npm run build +npm run start +``` + +Happy coding! ✨ +--- \ No newline at end of file diff --git a/docs/API/create-deliverable.api.mdx b/docs/API/create-deliverable.api.mdx index 968b207..b42f07f 100644 --- a/docs/API/create-deliverable.api.mdx +++ b/docs/API/create-deliverable.api.mdx @@ -17,7 +17,7 @@ import SecuritySchemes from "@theme/ApiExplorer/SecuritySchemes"; import MimeTabs from "@theme/MimeTabs"; import ParamsItem from "@theme/ParamsItem"; import SchemaItem from "@theme/SchemaItem"; -import SchemaTabs from "@theme/SchemaTabs" +import SchemaTabs from "@theme/SchemaTabs"; # Create Deliverable diff --git a/docusaurus.config.js b/docusaurus.config.js index cdf8b01..2d3eb2f 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -46,19 +46,7 @@ const config = { // If you aren't using GitHub pages, you don't need these. organizationName: 'TurboDocx', // Usually your GitHub org/user name. projectName: 'docusaurus', // Usually your repo name. - plugins: ['docusaurus-plugin-sass', - [ - "@orama/plugin-docusaurus-v3", - { - searchbox: { - placeholder: "Search...", - }, - searchButton: { - text: "soham..." - }, - - }, - ], + plugins: ['docusaurus-plugin-sass', "@orama/plugin-docusaurus-v3", [ 'docusaurus-plugin-llms', { @@ -72,8 +60,8 @@ const config = { [ 'docusaurus-plugin-openapi-docs', { - id: "api", // plugin id - docsPluginId: "classic", // configured for preset-classic + id: "api", + docsPluginId: "classic", config: openApiCongfig, }, ], async function myPlugin(context, options) { diff --git a/package.json b/package.json index f57952f..e5b79b6 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,6 @@ "@orama/orama": "3.1.6", "@orama/plugin-docusaurus-v3": "2.1.0", "@orama/searchbox": "^1.0.0-rc53", - "@oramacloud/client": "^2.1.4", "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-aspect-ratio": "^1.0.3", "@radix-ui/react-context-menu": "^2.1.5", diff --git a/scripts/exportOramaIndex.js b/scripts/exportOramaIndex.js new file mode 100644 index 0000000..c754587 --- /dev/null +++ b/scripts/exportOramaIndex.js @@ -0,0 +1,17 @@ +const fs = require("fs"); +const path = require("path"); +const zlib = require("zlib"); + +const oramaIndexPath = ".docusaurus/orama-search-index-current.json.gz"; +const outputPath = path.join(__dirname, "../static/orama-index.json"); + +(async () => { + try { + const compressed = fs.readFileSync(oramaIndexPath); + const decompressed = zlib.gunzipSync(compressed).toString("utf-8"); + fs.writeFileSync(outputPath, decompressed); + console.log(`✅ Orama index exported to ${outputPath}`); + } catch (error) { + console.error("❌ Failed to export Orama index:", error); + } +})(); diff --git a/src/theme/SearchBar.js b/src/theme/SearchBar.js index c4a696b..37272b5 100644 --- a/src/theme/SearchBar.js +++ b/src/theme/SearchBar.js @@ -21,75 +21,43 @@ export default function SearchBarWrapper(props) { const isAppleDevice = () => { return typeof navigator !== 'undefined' && /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform); + return typeof navigator !== 'undefined' && + /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform); }; + setIsApple(isAppleDevice()); }, []); useEffect(() => { - // Override DocSearch button key display - // const updateKeyDisplay = () => { - // const kbdElements = document.querySelectorAll('.aa-DetachedSearchButton kbd'); - // if (kbdElements.length >= 2) { - // // Handle the case with separate Cmd/Ctrl and K keys - // const firstKey = kbdElements[0]; - // if (firstKey && isApple && firstKey.textContent === '⌘') { - // firstKey.textContent = 'Ctrl'; - // } else if (firstKey && isApple && firstKey.textContent === 'Ctrl') { - // firstKey.textContent = '⌘'; - // } - // } else { - // // Handle single key element - // kbdElements.forEach(key => { - // if (key && !isApple && (key.textContent === '⌘' || key.textContent.includes('⌘'))) { - // key.textContent = 'Ctrl'; - // } else if (key && isApple && (key.textContent === 'Ctrl' || key.textContent.includes('Ctrl'))) { - // key.textContent = '⌘'; - // } - // }); - // } - // }; - - // Run immediately and set up observer for dynamic updates - // updateKeyDisplay(); - - // const observer = new MutationObserver(() => { - // // Small delay to ensure DOM is updated - // setTimeout(updateKeyDisplay, 100); - // }); - - // observer.observe(document.body, { - // childList: true, - // subtree: true - // }); - const updateKeyDisplay = () => { - const kbdElements = document.querySelectorAll('.aa-DetachedSearchButton kbd'); - if (kbdElements.length >= 2) { - // Handle the case with separate Cmd/Ctrl and K keys - const firstKey = kbdElements[0]; - if (firstKey && !isApple && firstKey.textContent === '⌘') { - firstKey.textContent = 'Ctrl'; - } else if (firstKey && isApple && firstKey.textContent === 'Ctrl') { - firstKey.textContent = '⌘'; + // 1) Grab the two elements under the DocSearch button + const kbdElements = document.querySelectorAll('button.DocSearch-Button kbd'); + if (!kbdElements.length) return; // nothing to do yet + + kbdElements.forEach(key => { + const txt = key.textContent || ''; + if (isApple) { + // Mac: turn “Ctrl” → “⌘” + if (txt.includes('Ctrl')) key.textContent = txt.replace(/Ctrl/g, '⌘'); + } else { + // Windows/Linux: turn “⌘” → “Ctrl” + if (txt.includes('⌘')) key.textContent = txt.replace(/⌘/g, 'Ctrl'); } - } else { - // Handle single key element - kbdElements.forEach(key => { - if (key && !isApple && (key.textContent === '⌘' || key.textContent.includes('⌘'))) { - key.textContent = 'Ctrl'; - } else if (key && isApple && (key.textContent === 'Ctrl' || key.textContent.includes('Ctrl'))) { - key.textContent = '⌘'; - } - }); - } + }); }; // run on load updateKeyDisplay(); - // re‑run whenever DocSearch injects new bits - const observer = new MutationObserver(() => setTimeout(updateKeyDisplay, 50)); - observer.observe(document.body, { childList: true, subtree: true }); + const observer = new MutationObserver(() => { + // Small delay to ensure DOM is updated + setTimeout(updateKeyDisplay, 100); + }); + + observer.observe(document.body, { + childList: true, + subtree: true + }); return () => observer.disconnect(); }, [isApple]); @@ -97,12 +65,6 @@ export default function SearchBarWrapper(props) { useEffect(() => { async function init() { try { - // const res = await fetch("../../.docusaurus/orama-search-index-current.json.gz"); - // if (!res.ok) throw new Error(`Failed to fetch Orama index: ${res.status}`); - - // const buffer = await res.arrayBuffer(); - // const jsonStr = ungzip(buffer, { to: "string" }); - // const parsedData = JSON.parse(jsonStr); const indexUrl = `${baseUrl}orama-index.json`; const response = await fetch(indexUrl); console.log(response) From f94389f17b56bfd0b94f59e0b47cd4d887c84729 Mon Sep 17 00:00:00 2001 From: s0ham075 Date: Wed, 30 Jul 2025 15:57:31 +0530 Subject: [PATCH 3/4] rebase merges --- docusaurus.config.js | 1 - 1 file changed, 1 deletion(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 2d3eb2f..d69fbf0 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -4,7 +4,6 @@ const { themes } = require('prism-react-renderer'); const lightCodeTheme = themes.github; const darkCodeTheme = themes.dracula; - // [item, [[], [], []]] const apiConfig = require('./dev-docs-openapi.js'); const openApiCongfig = apiConfig.config From 788a595ab4d0b2039cd8680c6d805b215a793616 Mon Sep 17 00:00:00 2001 From: s0ham075 Date: Wed, 30 Jul 2025 17:20:18 +0530 Subject: [PATCH 4/4] SearchBar fix --- src/theme/SearchBar.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/theme/SearchBar.js b/src/theme/SearchBar.js index 37272b5..b2f5f71 100644 --- a/src/theme/SearchBar.js +++ b/src/theme/SearchBar.js @@ -21,8 +21,6 @@ export default function SearchBarWrapper(props) { const isAppleDevice = () => { return typeof navigator !== 'undefined' && /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform); - return typeof navigator !== 'undefined' && - /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform); }; setIsApple(isAppleDevice());