Merge pull request #106 from auth0/feat/add-one-trust

feat: add auth0-docs-ui package for mintlify customizations

Author: agiannelli-auth0

.gitignore

@@ -3,4 +3,6 @@ temp/
 
 # macOS
 .DS_Store
-*.py
+*.py
+
+.vite

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[`'\"`]([^`'\"`]*)[`'\"`]"],
+    ["cn\\(([^)]*)\\)", "[`'\"`]([^`'\"`]*)[`'\"`]"]
+  ]
+}

main/docs.json

@@ -11,10 +11,6 @@
       "canonical": "https://auth0.com"
     }
   },
-  "banner": {
-    "content": "🚀 We've rolled out a new docs experience - faster, cleaner, and a better developer experience. [Switch to old version](https://auth0.com/docs).",
-    "dismissible": true
-  },
   "colors": {
     "primary": "#000",
     "dark": "#fff",
@@ -7256,23 +7252,6 @@
       }
     ]
   },
-  "navbar": {
-    "links": [
-      {
-        "label": "Log In",
-        "href": "https://auth0.auth0.com/u/login/"
-      },
-      {
-        "label": "Contact Sales",
-        "href": "https://auth0.com/get-started?place=header&type=button&text=talk%20to%20sales"
-      }
-    ],
-    "primary": {
-      "type": "button",
-      "label": "Sign Up",
-      "href": "https://auth0.com/signup"
-    }
-  },
   "logo": {
     "light": "/docs/logo/light.svg",
     "dark": "/docs/logo/dark.svg",

main/docs/scripts/appendRelatedPages.js

@@ -1,46 +1,51 @@
-export const AuthCodeBlock = ({ filename, icon, language, highlight, children }) => {
-  const [user, setUser] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-
-  const userDomainPlaceholder = /{yourDomain}/g;
-  const userClientIdPlaceholder = /{yourClientId}/g;
-  const userClientSecretPlaceholder = /{yourClientSecret}/g;
-  const userSecretPlaceholder = /{yourSecret}/g;
-  const userRedirectUriPlaceholder = /{redirectUri}/g;
-  const yourAudiencePlaceholder = /{yourAudience}/g;
-
-  const processedChildren = children
-    .replace(userDomainPlaceholder, user?.userdomain || "{yourDomain}")
-    .replace(userClientIdPlaceholder, user?.userClientId || "{yourClientId}")
-    .replace(userClientSecretPlaceholder, user?.userClientSecret || "{yourClientSecret}")
-    .replace(userSecretPlaceholder, user?.userSecret || "{yourSecret}")
-    .replace(yourAudiencePlaceholder, user?.yourAudience || "{yourAudience}")
-    .replace(userRedirectUriPlaceholder, user?.userRedirectUri || "{redirectUri}");
+export const AuthCodeBlock = ({
+  filename,
+  icon,
+  language,
+  highlight,
+  children,
+}) => {
+  const [processedChildren, setProcessedChildren] = useState(children);
 
   useEffect(() => {
-    const initUser = async () => {
-      try {
-        await window.authService.getAuthStatus();
-        const user = window.authService.user;
-        if (!user) {
-          throw new Error("User not found");
+    let unsubscribe = null;
+
+    function init() {
+      unsubscribe = window.autorun(() => {
+        let processedChildren = children;
+        for (const [
+          key,
+          value,
+        ] of window.rootStore.variableStore.values.entries()) {
+          processedChildren = processedChildren.replace(
+            new RegExp(key, "g"),
+            value
+          );
         }
-        console.log("User fetched:", user);
-        setUser(user);
-        setIsAuthenticated(true);
-      } catch (error) {
-        console.error("Failed to initialize user:", error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
+        setProcessedChildren(processedChildren);
+      });
+    }
+
+    if (window.rootStore) {
+      init();
+    } else {
+      window.addEventListener("adu:storeReady", init);
+    }
 
-    initUser();
-  }, []);
+    return () => {
+      window.removeEventListener("adu:storeReady", init);
+      unsubscribe?.();
+    };
+  }, [children]);
 
   return (
-    <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
+    <CodeBlock
+      filename={filename}
+      icon={icon}
+      language={language}
+      lines
+      highlight={highlight}
+    >
       {processedChildren}
     </CodeBlock>
   );

main/snippets/AuthCodeBlock.jsx

@@ -1,35 +1,53 @@
 export const AuthCodeGroup = ({ children, dropdown }) => {
-  const [user, setUser] = useState(null);
+  const [processedChildren, setProcessedChildren] = useState(children);
 
-  const userDomainPlaceholder = /{yourDomain}/g;
-  const userClientIdPlaceholder = /{yourClientId}/g;
-  const userClientSecretPlaceholder = /{yourClientSecret}/g;
-  const userSecretPlaceholder = /{yourSecret}/g;
-  const userRedirectUriPlaceholder = /{redirectUri}/g;
-  const yourAudiencePlaceholder = /{yourAudience}/g;
+  useEffect(() => {
+    let unsubscribe = null;
 
-  const processChildren = (node) => {
-    if (typeof node === "string") {
-      return node
-        .replace(userDomainPlaceholder, user?.userdomain || "{yourDomain}")
-        .replace(userClientIdPlaceholder, user?.userClientId || "{yourClientId}")
-        .replace(userClientSecretPlaceholder, user?.userClientSecret || "{yourClientSecret}")
-        .replace(userSecretPlaceholder, user?.userSecret || "{yourSecret}")
-        .replace(yourAudiencePlaceholder, user?.yourAudience || "{yourAudience}")
-        .replace(userRedirectUriPlaceholder, user?.userRedirectUri || "{redirectUri}");
-    } else if (Array.isArray(node)) {
-      return node.map(processChildren);
-    } else if (node && node.props && node.props.children) {
-      return {
-        ...node,
-        props: {
-          ...node.props,
-          children: processChildren(node.props.children),
-        },
-      };
+    function init() {
+      unsubscribe = window.autorun(() => {
+        const processChildren = (node) => {
+          if (typeof node === "string") {
+            let processedNode = node;
+            for (const [
+              key,
+              value,
+            ] of window.rootStore.variableStore.values.entries()) {
+              processedNode = processedNode.replace(
+                new RegExp(key, "g"),
+                value
+              );
+            }
+            return processedNode;
+          } else if (Array.isArray(node)) {
+            return node.map(processChildren);
+          } else if (node && node.props && node.props.children) {
+            return {
+              ...node,
+              props: {
+                ...node.props,
+                children: processChildren(node.props.children),
+              },
+            };
+          }
+          return node;
+        };
+
+        setProcessedChildren(processChildren(children));
+      });
+    }
+
+    if (window.rootStore) {
+      init();
+    } else {
+      window.addEventListener("adu:storeReady", init);
     }
-    return node;
-  };
 
-  return <CodeGroup dropdown={dropdown}>{processChildren(children)}</CodeGroup>;
+    return () => {
+      window.removeEventListener("adu:storeReady", init);
+      unsubscribe?.();
+    };
+  }, [children]);
+
+  return <CodeGroup dropdown={dropdown}>{processedChildren}</CodeGroup>;
 };