Further fixes

Author: yashovardhan

docusaurus.config.js

@@ -133,13 +133,28 @@ const config = {
           breadcrumbs: false,
           remarkPlugins: [npm2yarnPlugin],
         },
+        pages: {
+          path: 'src/pages',
+          routeBasePath: '/',
+          include: ['**/**.{js,jsx,ts,tsx,md,mdx}'],
+          exclude: [
+            '**/_*.{js,jsx,ts,tsx,md,mdx}',
+            '**/_*/**',
+            '**/*.test.{js,jsx,ts,tsx}',
+            '**/__tests__/**',
+            '**/quick-start/**',  // Exclude quick-start directory from pages plugin
+          ],
+          mdxPageComponent: '@theme/MDXPage',
+          remarkPlugins: [npm2yarnPlugin],
+        },
         theme: {
           customCss: require.resolve('./src/scss/custom.scss'),
         },
       },
     ],
   ],
   plugins: [
+    ['./src/plugins/docusaurus-plugin-virtual-files', { rootDir: '.integrationBuilderCache' }],
     'docusaurus-plugin-sass',
     './src/plugins/mm-scss-utils',
     [
@@ -267,7 +282,6 @@ const config = {
         containerId: 'GTM-5FGPLC2Q',
       },
     ],
-    ['./src/plugins/docusaurus-plugin-virtual-files', { rootDir: '.integrationBuilderCache' }],
   ],
   clientModules: [require.resolve('./src/client/scroll-fix.js')],
   themeConfig:

src/pages/quick-start/index.tsx

@@ -47,29 +47,20 @@ const getURLFromBuilderOptions = (opts: Record<string, string>, stepIndex): stri
   return url.toString();
 };
 
-export default function IntegrationBuilderPage(props: { files?: any }) {
-  // Get files from props (passed via Docusaurus modules)
-  const [files, setFiles] = useState<Record<string, string>>({});
-  const [filesLoaded, setFilesLoaded] = useState(false);
-
-  useEffect(() => {
-    if (props.files) {
-      try {
-        // The files should be available directly from props
-        const filesData = props.files.default || props.files;
-        console.log('Loaded files from props, count:', Object.keys(filesData).length);
-        setFiles(filesData);
-        setFilesLoaded(true);
-      } catch (error) {
-        console.error('Error accessing files from props:', error);
-        setFiles({});
-        setFilesLoaded(true);
-      }
-    } else {
-      console.log('No files found in props');
-      setFilesLoaded(true);
-    }
-  }, [props.files]);
+export default function IntegrationBuilderPage(props: any) {
+  // Debug what we're actually receiving
+  console.log('=== DEBUG: Component props ===');
+  console.log('Full props object:', props);
+  console.log('Props keys:', Object.keys(props));
+  console.log('props.files:', props.files);
+  console.log('props.route:', props.route);
+  console.log('props.route?.modules:', props.route?.modules);
+
+  // Try different ways to access files
+  const files = props.files || (props.route?.modules?.files ? JSON.parse(props.route.modules.files) : {});
+  console.log('Extracted files:', files);
+  console.log('Files is object?', typeof files === 'object');
+  console.log('Files keys:', Object.keys(files || {}));
 
   const [builderOptions, setBuilderOptions] = useState<Record<string, string>>(
     getDefaultBuilderOptions(),
@@ -85,10 +76,10 @@ export default function IntegrationBuilderPage(props: { files?: any }) {
   );
   const [loading, setLoading] = useState<boolean>(false);
   const [initialLoadComplete, setInitialLoadComplete] = useState<boolean>(false);
-  const integration = useMemo(
-    () => builder.build(builderOptions, files, stepIndex),
-    [builderOptions, files, stepIndex],
-  );
+  const integration = useMemo(() => {
+    const result = builder.build(builderOptions, files || {}, stepIndex);
+    return result;
+  }, [builderOptions, files, stepIndex]);
   const [selectedFilename, setSelectedFilename] = useState(integration.filenames[0] || "");
 
   const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
@@ -238,7 +229,7 @@ export default function IntegrationBuilderPage(props: { files?: any }) {
               onChange={(event) => onChangeDropdown(key, event.target.value)}
             >
               {option.choices.map((value) => (
-                <option value={value.key} key={key}>
+                <option value={value.key} key={value.key}>
                   {value.displayName}
                 </option>
               ))}

src/pages/quick-start/utils.tsx

@@ -24,6 +24,12 @@ export class ReplaceFileAggregator {
   replacementOutcomes = [];
 
   replaceFileVariable(fileContent: string, filename: string, variableName: string, replacement: string): string {
+    // Add defensive check for undefined/null fileContent
+    if (!fileContent || typeof fileContent !== 'string') {
+      console.warn(`Warning: fileContent is ${fileContent} for file ${filename}. Using empty string.`);
+      return '';
+    }
+
     // 1. number of new lines to derive OFFSET
     const replacementLineCount = replacement.split(`\n`).length - 3;
     // 2. line that this occurs on
@@ -47,6 +53,12 @@ export class ReplaceFileAggregator {
     fileContent: string,
     variableName: string,
   ): { range: string; filename: string; fileContent: string; variableName: string } {
+    // Add defensive check for undefined/null fileContent
+    if (!fileContent || typeof fileContent !== 'string') {
+      console.warn(`Warning: fileContent is ${fileContent} for file ${filename} in highlightRange. Using empty string.`);
+      return { range: "1-1", filename, fileContent: "", variableName };
+    }
+
     const contentByLine = fileContent.split(`\n`);
     const startLine = [];
     const endLine = [];

src/plugins/docusaurus-plugin-virtual-files/index.js

@@ -10,24 +10,22 @@ const environment = process.env.IB_ENV || "development";
 
 async function fetchHostedFile(filename) {
   try {
-    console.log(`Fetching file: ${filename}`);
     const response = await axios.get("https://raw.githubusercontent.com/" + filename);
     var fileContent = response.data;
     if (typeof fileContent !== "string") {
       fileContent = JSON.stringify(fileContent, null, 2);
     }
-    console.log(`Successfully fetched ${filename}, content length: ${fileContent.length}`);
     return fileContent;
   } catch (e) {
-    console.log(`Error fetching ${filename}: ${e}`);
-    return "";
+    return ""; // Return empty string as fallback
   }
 }
 
 const IBfileLinks = require("../../utils/IBfileLinks.json");
 module.exports = (context, options) => ({
   name: "docusaurus-plugin-virtual-files",
   async loadContent() {
+    console.log('🔄 Virtual files plugin: loadContent called');
     const dir = path.resolve(context.siteDir, options.rootDir);
     const filenames = Object.values(IBfileLinks);
     const fileContents = {};
@@ -42,15 +40,12 @@ module.exports = (context, options) => ({
         try {
           data = await readFileAsync(filePath, "utf8");
         } catch (e) {
-          console.log(`Fetching ${filename} since local cache not available`);
-
           data = await fetchHostedFile(filename);
 
           try {
             await writeFileAsync(filePath, data);
-            console.log(`Saved ${filename} to cache`);
           } catch (error) {
-            console.log(`Error saving ${filename} to cache`);
+            console.log(`Error saving ${filename} to cache: ${error.message}`);
           }
         }
         fileContents[filename] = data;
@@ -61,18 +56,38 @@ module.exports = (context, options) => ({
       }
     }
 
+    const emptyFiles = Object.entries(fileContents).filter(([key, value]) => !value || value.length === 0);
+    if (emptyFiles.length > 0) {
+      console.log(`Warning: ${emptyFiles.length} files are empty:`, emptyFiles.map(([key]) => key));
+    }
+
+    console.log(`✅ Virtual files plugin: Loaded ${Object.keys(fileContents).length} files`);
     return fileContents;
   },
   async contentLoaded({ content, actions }) {
     const { createData, addRoute } = actions;
+
+    console.log('🔄 Virtual files plugin: contentLoaded called');
+    console.log(`📁 Content has ${Object.keys(content).length} files`);
+
+    // Create JSON data file like web3auth-docs
     const files = await createData("files.json", JSON.stringify(content));
+    console.log('📄 Created files.json data:', files);
+
+    const routePath = "/quick-start";
+    console.log(`🛣️ Adding route at path: ${routePath}`);
+    console.log(`📍 Component path: @site/src/pages/quick-start`);
+
     addRoute({
-      path: (process.env.REACT_APP_BASE_URL || "/docs/") + "quick-start",
+      path: routePath,
+      exact: true,
       component: "@site/src/pages/quick-start",
       modules: {
         files,
       },
     });
+
+    console.log('✅ Virtual files plugin: Route added successfully');
   },
 });
 

src/theme/Footer/index.js

@@ -1,9 +1,11 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import Footer from "@theme-original/Footer";
 import { Intercom } from "@intercom/messenger-js-sdk";
 import useIsBrowser from "@docusaurus/useIsBrowser";
 
 export default function FooterWrapper(props) {
+  const [canShowFooter, setCanShowFooter] = useState(true);
+
   useEffect(() => {
     const handleManageCookie = () => {
       window.Osano.cm.showDrawer("osano-cm-dom-info-dialog-open");
@@ -17,6 +19,17 @@ export default function FooterWrapper(props) {
     };
   }, []);
 
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      // check if footer can be shown
+      const path = window.location.pathname;
+      if (path.includes("quick-start")) {
+        setCanShowFooter(false);
+      }
+    }
+  }, []);
+
+
   const isBrowser = useIsBrowser();
   const isProd = process.env.NODE_ENV === "production";
   if (isBrowser && isProd) {
@@ -25,6 +38,8 @@ export default function FooterWrapper(props) {
     });
   }
 
+  if (!canShowFooter) return null;
+
   return (
     <>
       <Footer {...props} />