Merge pull request #174 from platformatic/add-cache-page

added the cache pages

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;

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",
+            },
           ],
         },
         {

sidebars.json

@@ -250,4 +250,4 @@
     "learn/glossary",
     "FAQs"
   ]
-}
+}

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 (
+      <div className="d-flex justify-content-center">
+        <div className="spinner-border" role="status">
+          <span className="visually-hidden">Loading...</span>
+        </div>
+      </div>
+    );
+  }
 
-  return <div id={targetId} />
-}
+  return <div id={targetId} />;
+};
 
-export default HubSpotForm
+export default HubSpotForm;