From 49121543ee09c0feee2160399fbb96a94067a355 Mon Sep 17 00:00:00 2001 From: Fortune Ikechi Date: Mon, 2 Dec 2024 11:34:14 +0000 Subject: [PATCH 1/2] added the cache pages Signed-off-by: Fortune Ikechi --- docs/sidebars.js | 244 +++++++++++++++++++ docusaurus.config.js | 7 +- sidebars.json | 2 +- src/components/HubSpotForm.js | 74 +++--- src/components/caching/architecture-image.js | 11 + src/components/caching/cachefeatures.js | 40 +++ src/components/caching/getstarted.js | 22 ++ src/components/caching/learnmore.js | 43 ++++ src/css/custom.css | 12 +- src/images/cachebtmgradient.svg | 21 ++ src/pages/caching/index.js | 143 +++++++++++ 11 files changed, 584 insertions(+), 35 deletions(-) create mode 100644 docs/sidebars.js create mode 100644 src/components/caching/architecture-image.js create mode 100644 src/components/caching/cachefeatures.js create mode 100644 src/components/caching/getstarted.js create mode 100644 src/components/caching/learnmore.js create mode 100644 src/images/cachebtmgradient.svg create mode 100644 src/pages/caching/index.js diff --git a/docs/sidebars.js b/docs/sidebars.js new file mode 100644 index 0000000000..9fee5cebf5 --- /dev/null +++ b/docs/sidebars.js @@ -0,0 +1,244 @@ +/** + * Creating a sidebar enables you to: + - create an ordered group of docs + - render a sidebar for each doc of that group + - provide next/previous navigation + + The sidebars can be generated from the filesystem, or explicitly defined here. + + Create as many sidebars as you want. + */ + +// @ts-check + +// /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ +const sidebars = { + docs: [ + "Overview", + "cli", + { + type: "category", + label: "Platformatic Composer", + collapsed: true, + items: [ + "composer/overview", + "composer/configuration", + "composer/programmatic", + "composer/api-modification", + "composer/plugin", + ], + }, + { + type: "category", + label: "Platformatic DB", + collapsed: true, + items: [ + "db/overview", + "db/configuration", + "db/migrations", + { + type: "category", + label: "Authorization", + collapsed: true, + items: [ + "db/authorization/overview", + "db/authorization/strategies", + "db/authorization/user-roles-metadata", + "db/authorization/rules", + ], + }, + "db/plugin", + "db/logging", + "db/programmatic", + "db/schema-support", + ], + }, + { + type: "category", + label: "Platformatic Runtime", + collapsed: true, + items: [ + "runtime/overview", + "runtime/configuration", + "runtime/programmatic", + ], + }, + { + type: "category", + label: "Watt", + collapsed: true, + items: ["watt/overview", "watt/configuration", "watt/reference"], + }, + { + type: "category", + label: "Platformatic Service", + collapsed: true, + items: [ + "service/overview", + "service/configuration", + "service/plugin", + "service/programmatic", + ], + }, + { + type: "category", + label: "Client", + collapsed: true, + items: ["client/overview", "client/programmatic", "client/frontend"], + }, + { + type: "category", + label: "Packages", + collapsed: true, + items: [ + { + type: "category", + label: "Node", + collapsed: true, + items: ["packages/node/overview", "packages/node/configuration"], + }, + { + type: "category", + label: "Astro", + collapsed: true, + items: ["packages/astro/overview", "packages/astro/configuration"], + }, + { + type: "category", + label: "Next", + collapsed: true, + items: ["packages/next/overview", "packages/next/configuration"], + }, + { + type: "category", + label: "Remix", + collapsed: true, + items: ["packages/remix/overview", "packages/remix/configuration"], + }, + { + type: "category", + label: "Vite", + collapsed: true, + items: ["packages/vite/overview", "packages/vite/configuration"], + }, + { + type: "category", + label: "SQL-to-OpenAPI", + collapsed: true, + items: [ + "packages/sql-openapi/overview", + "packages/sql-openapi/api", + "packages/sql-openapi/ignore", + "packages/sql-openapi/explicit-include", + ], + }, + { + type: "category", + label: "SQL-to-GraphQL", + collapsed: true, + items: [ + "packages/sql-graphql/overview", + "packages/sql-graphql/queries", + "packages/sql-graphql/mutations", + "packages/sql-graphql/many-to-many", + "packages/sql-graphql/ignore", + ], + }, + { + type: "category", + label: "SQL-Mapper", + collapsed: true, + items: [ + "packages/sql-mapper/overview", + "packages/sql-mapper/fastify-plugin", + { + type: "category", + label: "Entities", + collapsed: true, + items: [ + "packages/sql-mapper/entities/overview", + "packages/sql-mapper/entities/fields", + "packages/sql-mapper/entities/api", + "packages/sql-mapper/entities/example", + "packages/sql-mapper/entities/hooks", + "packages/sql-mapper/entities/relations", + "packages/sql-mapper/entities/transactions", + ], + }, + ], + }, + { + type: "category", + label: "SQL-Events", + collapsed: true, + items: [ + "packages/sql-events/overview", + "packages/sql-events/fastify-plugin", + ], + }, + ], + }, + + "FAQs", + ], + Learn: [ + "learn/overview", + "getting-started/quick-start-watt", + "getting-started/quick-start-guide", + { + type: "category", + label: "Beginner Tutorials", + collapsed: true, + items: ["learn/beginner/crud-application"], + }, + { + type: "category", + label: "Advanced Guides", + collapsed: true, + items: [ + { + type: "category", + label: "Deployment", + collapsed: true, + items: [ + "guides/deployment/overview", + "guides/deployment/dockerize-a-watt-app", + "guides/deployment/deploy-to-fly-io-with-sqlite", + "guides/deployment/advanced-fly-io-deployment", + "guides/deployment/deploying-on-lambda", + ], + }, + "guides/seed-a-database", + { + type: "category", + label: "Add Custom Functionality", + collapsed: true, + items: [ + "guides/add-custom-functionality/overview", + "guides/add-custom-functionality/prerequisites", + "guides/add-custom-functionality/extend-graphql", + "guides/add-custom-functionality/extend-rest", + ], + }, + "guides/securing-platformatic-db", + "guides/jwt-auth0", + "guides/monitoring", + "guides/debug-platformatic-db", + "guides/environment-variables", + "guides/prisma", + "guides/generate-frontend-code-to-consume-platformatic-rest-api", + "guides/migrating-fastify-app-to-platformatic-service", + "guides/migrating-express-app-to-platformatic-service", + "guides/telemetry", + "guides/build-modular-monolith", + "guides/logging-to-elasticsearch", + "guides/jwt-keycloak", + "guides/use-env-with-platformatic", + ], + }, + "learn/glossary", + "FAQs", + ], +}; + +module.exports = sidebars; diff --git a/docusaurus.config.js b/docusaurus.config.js index d8e41d8a1d..07a6843e80 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -41,7 +41,6 @@ const config = { locales: ["en"], }, - presets: [ [ "classic", @@ -202,7 +201,7 @@ const config = { to: "/composer", label: "Composer", }, - + { to: "/aiwarp", label: "AI-Warp", @@ -219,6 +218,10 @@ const config = { to: "/watt", label: "Watt", }, + { + to: "/caching", + label: "Caching", + }, ], }, { diff --git a/sidebars.json b/sidebars.json index e81dcf7b29..23cf29bfbc 100644 --- a/sidebars.json +++ b/sidebars.json @@ -249,4 +249,4 @@ "learn/glossary", "FAQs" ] -} \ No newline at end of file +} diff --git a/src/components/HubSpotForm.js b/src/components/HubSpotForm.js index ab4352e1b0..513c6dda8c 100644 --- a/src/components/HubSpotForm.js +++ b/src/components/HubSpotForm.js @@ -1,18 +1,21 @@ -import React, { useEffect } from 'react' +import React, { useEffect, useState } from "react"; const HubSpotForm = ({ portalId, formId, targetId, - region = 'na1', - cssClass = 'light-mode' + region = "na1", + cssClass = "light-mode", }) => { + const [loading, setLoading] = useState(true); + useEffect(() => { - const script = document.createElement('script') - script.src = 'https://js.hsforms.net/forms/v2.js' - document.body.appendChild(script) + const script = document.createElement("script"); + script.src = "https://js.hsforms.net/forms/v2.js"; + document.body.appendChild(script); - script.addEventListener('load', () => { + script.addEventListener("load", () => { + setLoading(false); if (window.hbspt) { window.hbspt.forms.create({ portalId, @@ -21,53 +24,64 @@ const HubSpotForm = ({ region, cssClass, onFormReady: function ($form) { - const iframe = document.querySelector('iframe') + const iframe = document.querySelector("iframe"); if (iframe) { const observer = new MutationObserver( (mutationsList, observer) => { for (const mutation of mutationsList) { if ( - mutation.type === 'childList' && + mutation.type === "childList" && iframe.contentDocument ) { const doc = iframe.contentDocument || - iframe.contentWindow?.document + iframe.contentWindow?.document; if (doc) { // Set the background color of the iframe's body - doc.body.style.backgroundColor = '#040607' + doc.body.style.backgroundColor = "#040607"; - const labels = doc.querySelectorAll('label') + const labels = doc.querySelectorAll("label"); labels.forEach((label) => { - label.style.color = '#ffffff' - }) - observer.disconnect() // Stop observing after labels and background are adjusted + label.style.color = "#ffffff"; + }); + observer.disconnect(); // Stop observing after labels and background are adjusted } } } } - ) + ); observer.observe(iframe.contentDocument, { childList: true, - subtree: true - }) + subtree: true, + }); } else { - console.error('Iframe not found.') + console.error("Iframe not found."); } - } - }) + }, + }); } else { - console.error('hbspt not available.') + console.error("hbspt not available."); } - }) + }); + + script.addEventListener("error", () => { + setLoading(false); + console.error("Failed to load the script."); + }); + }, [portalId, formId, targetId, region, cssClass]); - script.addEventListener('error', () => { - console.error('Failed to load the script.') - }) - }, [portalId, formId, targetId, region, cssClass]) + if (loading) { + return ( +
+
+ Loading... +
+
+ ); + } - return
-} + return
; +}; -export default HubSpotForm +export default HubSpotForm; diff --git a/src/components/caching/architecture-image.js b/src/components/caching/architecture-image.js new file mode 100644 index 0000000000..f3b8329a00 --- /dev/null +++ b/src/components/caching/architecture-image.js @@ -0,0 +1,11 @@ +import React from "react"; + +export const ArchitectureImage = ({ blok }) => ( +
+ +
+); diff --git a/src/components/caching/cachefeatures.js b/src/components/caching/cachefeatures.js new file mode 100644 index 0000000000..dd645b27d1 --- /dev/null +++ b/src/components/caching/cachefeatures.js @@ -0,0 +1,40 @@ +import React from "react"; +import { render } from "storyblok-rich-text-react-renderer"; +import fixImageUrl from "../../../util/FixImageUrls"; + +export default function CacheFeatures({ blok }) { + return ( +
+
+

Features

+ +
+ {blok.cache_feat.map((feature, index) => ( +
+
+
+ +
+
+

+ {render(feature.title)} +

+
+

+ {render(feature.description)} +

+
+
+ ))} +
+
+
+ ); +} diff --git a/src/components/caching/getstarted.js b/src/components/caching/getstarted.js new file mode 100644 index 0000000000..a9ef852f5c --- /dev/null +++ b/src/components/caching/getstarted.js @@ -0,0 +1,22 @@ +import React from "react"; +import { render } from "storyblok-rich-text-react-renderer"; + +export default function GetStarted({ blok }) { + return ( +
+
+

+ {blok.cache_started[0].title} +

+

+ {blok.cache_started[0].subtitle} +

+
    + {blok.cache_started[0].cache_get_started_list.map((list, index) => ( +
  1. {render(list.list)}
    2. + ))} +
+
+
+ ); +} diff --git a/src/components/caching/learnmore.js b/src/components/caching/learnmore.js new file mode 100644 index 0000000000..5c5d3ee50e --- /dev/null +++ b/src/components/caching/learnmore.js @@ -0,0 +1,43 @@ +import React from "react"; +import fixImageUrl from "../../../util/FixImageUrls"; +import { render } from "storyblok-rich-text-react-renderer"; + +export default function LearnMore({ blok }) { + return ( +
+
+

+ {blok.cache_learn[0].title} +

+
+ {blok.cache_learn[0].learn_more_card.map((feature, index) => ( +
+
+
+
+ +
+
+

+ {render(feature.title)} +

+
+
+

+ {render(feature.description)} +

+
+
+ ))} +
+
+
+ ); +} diff --git a/src/css/custom.css b/src/css/custom.css index 0a7862d8e5..002132f3dd 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -69,8 +69,8 @@ --ifm-background-color: transparent; --ifm-link-color: #9bc1fd; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); - font-family: "Inter", ui-sans-serif, system-ui, sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: "Inter", ui-sans-serif, system-ui, sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } /* add css reset */ @@ -262,6 +262,14 @@ p { width: 100%; height: 100%; } +.cache-footer-bg { + background-image: url("/src/images/cachebtmgradient.svg"); + background-size: cover; + background-position: center 200px; + background-repeat: no-repeat; + width: 100%; + height: 100%; +} @media (max-width: 767px) { .card_bg { background-image: url("/src/images/greenblob.svg"), diff --git a/src/images/cachebtmgradient.svg b/src/images/cachebtmgradient.svg new file mode 100644 index 0000000000..e0eec010f6 --- /dev/null +++ b/src/images/cachebtmgradient.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/caching/index.js b/src/pages/caching/index.js new file mode 100644 index 0000000000..10dac3444d --- /dev/null +++ b/src/pages/caching/index.js @@ -0,0 +1,143 @@ +import React from "react"; +import { + useStoryblok, + storyblokInit, + apiPlugin, + StoryblokComponent, +} from "@storyblok/react"; +import Layout from "@theme/Layout"; +import Page from "../../components/sbComponents/Page"; +import { render } from "storyblok-rich-text-react-renderer"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; +import { ArchitectureImage } from "../../components/caching/architecture-image"; +import CacheFeatures from "../../components/caching/cachefeatures"; +import GetStarted from "../../components/caching/getstarted"; +import LearnMore from "../../components/caching/learnmore"; +import HubSpotForm from "../../components/HubSpotForm"; + +storyblokInit({ + accessToken: process.env.STORYBLOK_ACCESS_TOKEN, + use: [apiPlugin], + components: { + page: Page, + }, + + apiOptions: { + region: "eu", + cache: { + clear: "auto", + type: "none", + }, + headers: { + "Cache-Control": "no-store", + }, + }, +}); + +function PageHeader({ blok }) { + return ( +
+
+
+
+
+
+ gradient +
+ + tag logo + {blok.cache_hero[0].tag_text} + +
+ +

+ {blok.cache_hero[0].hero_title} +

+ +

+ {blok.cache_hero[0].hero_subtitle} +

+ +
+ {blok.cache_hero[0].cta_buttons.map((cta) => ( + + + + ))} +
+
+ +
+ hero_image +
+
+ +
+ {render(blok.cache_hero[0].hero_long_text)} +
+
+
+
+
+ ); +} + +export default function Caching() { + const { siteConfig } = useDocusaurusContext(); + let slug = "caching"; + if (globalThis.window && globalThis.window.location.pathname !== "/") { + slug = globalThis.window.location.pathname.replace("/", ""); + } + const story = useStoryblok(slug, { version: "draft" }); + if (!story || !story.content) { + return
Loading...
; + } + console.log(story.content); + + return ( + + + + + + +
+
+ +
+
+ + ); +} From 4b8e2be2abf72a8e80f0a01643d21f53eca796ef Mon Sep 17 00:00:00 2001 From: Fortune Ikechi Date: Tue, 3 Dec 2024 10:04:04 +0000 Subject: [PATCH 2/2] updated the feature pages with the videos Signed-off-by: Fortune Ikechi --- src/components/servicepage/Hero.js | 60 +++++---- src/pages/Composer/index.js | 192 ++++++++++++++++------------- src/pages/Database/index.js | 192 ++++++++++++++++------------- src/pages/Stackables/index.js | 173 ++++++++++++++------------ 4 files changed, 331 insertions(+), 286 deletions(-) diff --git a/src/components/servicepage/Hero.js b/src/components/servicepage/Hero.js index 2fecdeec02..5f36bda29d 100644 --- a/src/components/servicepage/Hero.js +++ b/src/components/servicepage/Hero.js @@ -1,54 +1,54 @@ -import React from 'react' -import { render } from 'storyblok-rich-text-react-renderer' +import React from "react"; +import { render } from "storyblok-rich-text-react-renderer"; const Hero = ({ blok }) => { return ( -
-
-
+
+
+
gradient -
+
- - + {render(blok.Hero[0].hero_title)} - + {render(blok.Hero[0].hero_subtitle)} -
- hero_image +
- ) -} + ); +}; -export default Hero +export default Hero; diff --git a/src/pages/Composer/index.js b/src/pages/Composer/index.js index 8a209b96b9..25e64e834c 100644 --- a/src/pages/Composer/index.js +++ b/src/pages/Composer/index.js @@ -1,76 +1,76 @@ -import React, { useEffect } from 'react' +import React, { useEffect } from "react"; import { useStoryblok, storyblokInit, apiPlugin, - StoryblokComponent -} from '@storyblok/react' -import Layout from '@theme/Layout' + StoryblokComponent, +} from "@storyblok/react"; +import Layout from "@theme/Layout"; -import Page from '../../components/sbComponents/Page' -import { render } from 'storyblok-rich-text-react-renderer' -import useDocusaurusContext from '@docusaurus/useDocusaurusContext' -import Architecture from '../../components/composer/Architecture' -import Feature from '../../components/composer/Feature' -import GetStarted from '../../components/composer/GetStarted' -import LearnPlatformatic from '../../components/composer/Learnplatformatic' +import Page from "../../components/sbComponents/Page"; +import { render } from "storyblok-rich-text-react-renderer"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; +import Architecture from "../../components/composer/Architecture"; +import Feature from "../../components/composer/Feature"; +import GetStarted from "../../components/composer/GetStarted"; +import LearnPlatformatic from "../../components/composer/Learnplatformatic"; storyblokInit({ accessToken: process.env.STORYBLOK_ACCESS_TOKEN, use: [apiPlugin], components: { - page: Page + page: Page, }, apiOptions: { - region: 'eu' - } -}) + region: "eu", + }, +}); -function PageHeader ({ blok }) { +function PageHeader({ blok }) { return ( -
-
-
+
+
+
gradient -
- - - + {render(blok.hero[0].hero_title)} - + {render(blok.hero[0].hero_subtitle)} -
-
- hero_image +
+
- ) + ); } -export default function Composer () { - const { siteConfig } = useDocusaurusContext() - let slug = 'composer' - const story = useStoryblok(slug, { version: 'draft' }) +export default function Composer() { + const { siteConfig } = useDocusaurusContext(); + let slug = "composer"; + const story = useStoryblok(slug, { version: "draft" }); useEffect(() => { - const script = document.createElement('script') - script.src = 'https://js.hsforms.net/forms/v2.js' - document.body.appendChild(script) + const script = document.createElement("script"); + script.src = "https://js.hsforms.net/forms/v2.js"; + document.body.appendChild(script); - script.addEventListener('load', () => { + script.addEventListener("load", () => { if (window.hbspt) { window.hbspt.forms.create({ - portalId: '22380288', - formId: '63b16ade-bdfb-475d-b40e-f017f7278e1a', - target: '#composer', - region: 'na1', - cssClass: 'light-mode', + portalId: "22380288", + formId: "63b16ade-bdfb-475d-b40e-f017f7278e1a", + target: "#composer", + region: "na1", + cssClass: "light-mode", onFormReady: function ($form) { - const iframe = document.querySelector('iframe') + const iframe = document.querySelector("iframe"); if (iframe) { - const observer = new MutationObserver((mutationsList, observer) => { - for (const mutation of mutationsList) { - if (mutation.type === 'childList' && iframe.contentDocument) { - const doc = - iframe.contentDocument || iframe.contentWindow?.document - if (doc) { - // Set the background color of the iframe's body - doc.body.style.backgroundColor = '#040607' - // doc.body.style.backgroundColor = darkMode - // ? '#00050b' - // : '#FAFAFA' + const observer = new MutationObserver( + (mutationsList, observer) => { + for (const mutation of mutationsList) { + if ( + mutation.type === "childList" && + iframe.contentDocument + ) { + const doc = + iframe.contentDocument || + iframe.contentWindow?.document; + if (doc) { + // Set the background color of the iframe's body + doc.body.style.backgroundColor = "#040607"; + // doc.body.style.backgroundColor = darkMode + // ? '#00050b' + // : '#FAFAFA' - const labels = doc.querySelectorAll('label') - labels.forEach((label) => { - // label.style.color = darkMode ? 'white' : '#00050b' - label.style.color = '#ffffff' - }) - observer.disconnect() // Stop observing after labels and background are adjusted + const labels = doc.querySelectorAll("label"); + labels.forEach((label) => { + // label.style.color = darkMode ? 'white' : '#00050b' + label.style.color = "#ffffff"; + }); + observer.disconnect(); // Stop observing after labels and background are adjusted + } } } } - }) + ); observer.observe(iframe.contentDocument, { childList: true, - subtree: true - }) + subtree: true, + }); } else { - console.error('Iframe not found.') + console.error("Iframe not found."); } - } - }) + }, + }); } else { - console.error('hbspt not available.') + console.error("hbspt not available."); } - }) + }); - script.addEventListener('error', () => { - console.error('Failed to load the script.') - }) - }, [story]) + script.addEventListener("error", () => { + console.error("Failed to load the script."); + }); + }, [story]); - if (globalThis.window && globalThis.window.location.pathname !== '/') { - slug = globalThis.window.location.pathname.replace('/', '') + if (globalThis.window && globalThis.window.location.pathname !== "/") { + slug = globalThis.window.location.pathname.replace("/", ""); } if (!story || !story.content) { - return
Loading...
+ return
Loading...
; } return ( - +
- ) + ); } diff --git a/src/pages/Database/index.js b/src/pages/Database/index.js index 35b6ae9b1b..8ea06faa7a 100644 --- a/src/pages/Database/index.js +++ b/src/pages/Database/index.js @@ -1,76 +1,76 @@ -import React, { useEffect } from 'react' +import React, { useEffect } from "react"; import { useStoryblok, storyblokInit, apiPlugin, - StoryblokComponent -} from '@storyblok/react' -import Layout from '@theme/Layout' + StoryblokComponent, +} from "@storyblok/react"; +import Layout from "@theme/Layout"; -import Page from '../../components/sbComponents/Page' -import { render } from 'storyblok-rich-text-react-renderer' -import useDocusaurusContext from '@docusaurus/useDocusaurusContext' -import Architecture from '../../components/servicepage/Architecture' -import Feature from '../../components/database/Feature' -import GetStarted from '../../components/servicepage/GetStarted' -import LearnPlatformatic from '../../components/database/Learnplatformatic' +import Page from "../../components/sbComponents/Page"; +import { render } from "storyblok-rich-text-react-renderer"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; +import Architecture from "../../components/servicepage/Architecture"; +import Feature from "../../components/database/Feature"; +import GetStarted from "../../components/servicepage/GetStarted"; +import LearnPlatformatic from "../../components/database/Learnplatformatic"; storyblokInit({ accessToken: process.env.STORYBLOK_ACCESS_TOKEN, use: [apiPlugin], components: { - page: Page + page: Page, }, apiOptions: { - region: 'eu' - } -}) + region: "eu", + }, +}); -function PageHeader ({ blok }) { +function PageHeader({ blok }) { return ( -
-
-
+
+
- ) + ); } -export default function Database () { - const { siteConfig } = useDocusaurusContext() - let slug = 'database' - const story = useStoryblok(slug, { version: 'draft' }) +export default function Database() { + const { siteConfig } = useDocusaurusContext(); + let slug = "database"; + const story = useStoryblok(slug, { version: "draft" }); useEffect(() => { - const script = document.createElement('script') - script.src = 'https://js.hsforms.net/forms/v2.js' - document.body.appendChild(script) + const script = document.createElement("script"); + script.src = "https://js.hsforms.net/forms/v2.js"; + document.body.appendChild(script); - script.addEventListener('load', () => { + script.addEventListener("load", () => { if (window.hbspt) { window.hbspt.forms.create({ - portalId: '22380288', - formId: '9d88e23d-89fb-4beb-9d4d-0a844ca6639d', - target: '#database', - region: 'na1', - cssClass: 'light-mode', + portalId: "22380288", + formId: "9d88e23d-89fb-4beb-9d4d-0a844ca6639d", + target: "#database", + region: "na1", + cssClass: "light-mode", onFormReady: function ($form) { - const iframe = document.querySelector('iframe') + const iframe = document.querySelector("iframe"); if (iframe) { - const observer = new MutationObserver((mutationsList, observer) => { - for (const mutation of mutationsList) { - if (mutation.type === 'childList' && iframe.contentDocument) { - const doc = - iframe.contentDocument || iframe.contentWindow?.document - if (doc) { - // Set the background color of the iframe's body - doc.body.style.backgroundColor = '#040607' - // doc.body.style.backgroundColor = darkMode - // ? '#00050b' - // : '#FAFAFA' + const observer = new MutationObserver( + (mutationsList, observer) => { + for (const mutation of mutationsList) { + if ( + mutation.type === "childList" && + iframe.contentDocument + ) { + const doc = + iframe.contentDocument || + iframe.contentWindow?.document; + if (doc) { + // Set the background color of the iframe's body + doc.body.style.backgroundColor = "#040607"; + // doc.body.style.backgroundColor = darkMode + // ? '#00050b' + // : '#FAFAFA' - const labels = doc.querySelectorAll('label') - labels.forEach((label) => { - // label.style.color = darkMode ? 'white' : '#00050b' - label.style.color = '#ffffff' - }) - observer.disconnect() // Stop observing after labels and background are adjusted + const labels = doc.querySelectorAll("label"); + labels.forEach((label) => { + // label.style.color = darkMode ? 'white' : '#00050b' + label.style.color = "#ffffff"; + }); + observer.disconnect(); // Stop observing after labels and background are adjusted + } } } } - }) + ); observer.observe(iframe.contentDocument, { childList: true, - subtree: true - }) + subtree: true, + }); } else { - console.error('Iframe not found.') + console.error("Iframe not found."); } - } - }) + }, + }); } else { - console.error('hbspt not available.') + console.error("hbspt not available."); } - }) + }); - script.addEventListener('error', () => { - console.error('Failed to load the script.') - }) - }, [story]) + script.addEventListener("error", () => { + console.error("Failed to load the script."); + }); + }, [story]); - if (globalThis.window && globalThis.window.location.pathname !== '/') { - slug = globalThis.window.location.pathname.replace('/', '') + if (globalThis.window && globalThis.window.location.pathname !== "/") { + slug = globalThis.window.location.pathname.replace("/", ""); } if (!story || !story.content) { - return
Loading...
+ return
Loading...
; } return ( - +
- ) + ); } diff --git a/src/pages/Stackables/index.js b/src/pages/Stackables/index.js index 272ab0e650..c259cb7b78 100644 --- a/src/pages/Stackables/index.js +++ b/src/pages/Stackables/index.js @@ -1,82 +1,82 @@ -import React, { useEffect } from 'react' +import React, { useEffect } from "react"; import { useStoryblok, storyblokInit, apiPlugin, - StoryblokComponent -} from '@storyblok/react' -import Layout from '@theme/Layout' + StoryblokComponent, +} from "@storyblok/react"; +import Layout from "@theme/Layout"; -import Page from '../../components/sbComponents/Page' -import { render } from 'storyblok-rich-text-react-renderer' -import useDocusaurusContext from '@docusaurus/useDocusaurusContext' -import Architecture from '../../components/composer/Architecture' -import Feature from '../../components/stackables/Feature' -import TemplateMarketPlace from '../../components/stackables/TemplateMarketPlace' -import LearnPlatformatic from '../../components/stackables/Learnplatformatic' +import Page from "../../components/sbComponents/Page"; +import { render } from "storyblok-rich-text-react-renderer"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; +import Architecture from "../../components/composer/Architecture"; +import Feature from "../../components/stackables/Feature"; +import TemplateMarketPlace from "../../components/stackables/TemplateMarketPlace"; +import LearnPlatformatic from "../../components/stackables/Learnplatformatic"; storyblokInit({ accessToken: process.env.STORYBLOK_ACCESS_TOKEN, use: [apiPlugin], components: { - page: Page + page: Page, }, apiOptions: { - region: 'eu' - } -}) + region: "eu", + }, +}); -function PageHeader ({ blok }) { +function PageHeader({ blok }) { return ( -
-
-