+
{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 && (
<>
*/}
- {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 (
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 }) => { {/*
@@ -32,7 +32,7 @@ function HomepageHeader() {
}
export default function Home(): JSX.Element {
- const {siteConfig} = useDocusaurusContext()
+ const { siteConfig } = useDocusaurusContext()
const data = landingJson
return (
- - {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..b2f5f71 100644
--- a/src/theme/SearchBar.js
+++ b/src/theme/SearchBar.js
@@ -1,59 +1,107 @@
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 = '⌘';
+ // 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 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,
+
+ observer.observe(document.body, {
+ childList: true,
subtree: true
});
return () => observer.disconnect();
}, [isApple]);
+ useEffect(() => {
+ async function init() {
+ try {
+ 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 (