Fixes for highlighting

Web3Auth · Nov 29, 2023 · dadebf3 · dadebf3
1 parent cab7cb3
commit dadebf3
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 27 deletions.
diff --git a/plugins/docusaurus-plugin-virtual-files/index.js b/plugins/docusaurus-plugin-virtual-files/index.js
@@ -29,13 +29,14 @@ module.exports = (context, options) => ({
     const dir = path.resolve(context.siteDir, options.rootDir);
     const filenames = Object.values(hostedFileLinks);
     const fileContents = {};
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
 
     if (environment === "development") {
       var data = "";
       for (const filename of filenames) {
         const filePath = path.join(dir, filename.replaceAll("/", "-"));
-        const directoryPath = path.dirname(filePath);
-
         try {
           data = await readFileAsync(filePath, "utf8");
         } catch (e) {
@@ -44,9 +45,6 @@ module.exports = (context, options) => ({
           data = await fetchHostedFile(filename);
 
           try {
-            if (!fs.existsSync(directoryPath)) {
-              fs.mkdirSync(directoryPath, { recursive: true });
-            }
             await writeFileAsync(filePath, data);
             console.log(`Saved ${filename} to cache`);
           } catch (error) {

diff --git a/src/pages/integration-builder/builder/choices.ts b/src/pages/integration-builder/builder/choices.ts
@@ -26,7 +26,7 @@ export const MPC_CORE_KIT = "MPC_CORE_KIT";
 
 // Platform choices
 export const REACT = "REACT";
-export const NEXT = "NEXT";
+export const NEXTJS = "NEXTJS";
 export const VUE = "VUE";
 export const ANGULAR = "ANGULAR";
 export const HTML = "HTML";
@@ -39,7 +39,7 @@ export const UNREAL = "UNREAL";
 export const NODE = "NODE";
 
 export const WEB_SDKS = [PNP_MODAL, PNP_NO_MODAL, SFA_WEB, MPC_CORE_KIT];
-export const WEB_FRAMEWORKS = [REACT, NEXT, VUE, ANGULAR, HTML];
+export const WEB_FRAMEWORKS = [REACT, NEXTJS, VUE, ANGULAR];
 
 export const SDKS_PNP: DisplayChoice[] = [
   { key: PNP_MODAL, displayName: "Web - Modal SDK" },
@@ -62,10 +62,9 @@ export const SDKS_CORE_KIT: DisplayChoice[] = [
 
 export const LANGS_WEB: DisplayChoice[] = [
   { key: REACT, displayName: "React" },
-  { key: NEXT, displayName: "Next JS" },
+  { key: NEXTJS, displayName: "Next JS" },
   { key: VUE, displayName: "Vue" },
   { key: ANGULAR, displayName: "Angular" },
-  { key: HTML, displayName: "HTML/JS" },
 ];
 
 export const LANGS_WEB_PNP_MODAL: DisplayChoice[] = [...LANGS_WEB, { key: HTML, displayName: "HTML/JS" }];

diff --git a/src/pages/integration-builder/builder/highlight.ts b/src/pages/integration-builder/builder/highlight.ts
@@ -2,7 +2,7 @@
 function highlightStart(fileContent: string, variableName: string): string {
   const contentByLine = fileContent.split(`\n`);
   for (let i = 0; i < contentByLine.length; i += 1) {
-    if (contentByLine[i].includes(`HIGHLIGHTSTART-${variableName}`)) {
+    if (contentByLine[i].includes(`IMP START - ${variableName}`)) {
       contentByLine[i] = "// highlight-start";
     }
   }
@@ -11,7 +11,7 @@ function highlightStart(fileContent: string, variableName: string): string {
 function highlightEnd(fileContent: string, variableName: string): string {
   const contentByLine = fileContent.split(`\n`);
   for (let i = 0; i < contentByLine.length; i += 1) {
-    if (contentByLine[i].includes(`HIGHLIGHTEND-${variableName}`)) {
+    if (contentByLine[i].includes(`IMP END - ${variableName}`)) {
       contentByLine[i] = "// highlight-end";
     }
   }
@@ -22,7 +22,7 @@ function removeHighlightCode(fileContent: string): string {
   // 2. line that this occurs on
   const contentByLine = fileContent.split(`\n`);
   for (let i = 0; i < contentByLine.length; i += 1) {
-    if (contentByLine[i].includes("HIGHLIGHT")) {
+    if (contentByLine[i].includes("IMP")) {
       contentByLine.splice(i, 1);
     }
   }

diff --git a/src/pages/integration-builder/builder/index.ts b/src/pages/integration-builder/builder/index.ts
@@ -1,7 +1,7 @@
 /* eslint-disable camelcase */
 import { IntegrationBuilder, IntegrationStep } from "../interfaces";
 import {
-  CORE_KIT,
+  HTML,
   LANGS_ANDROID,
   LANGS_FLUTTER,
   LANGS_IOS,
@@ -205,7 +205,9 @@ const builder: IntegrationBuilder = {
 
     if (WEB_SDKS.includes(finalValues.sdk)) {
       if (!WEB_FRAMEWORKS.includes(finalValues.framework)) {
-        finalValues.framework = WEB_FRAMEWORKS[0];
+        if (!(finalValues.sdk === PNP_MODAL && finalValues.framework === HTML)) {
+          finalValues.framework = WEB_FRAMEWORKS[0];
+        }
       }
       selectedSDK = `${finalValues.sdk}_${finalValues.framework}`;
     } else {

diff --git a/src/pages/integration-builder/builder/pnp/web_modal/html/steps.ts b/src/pages/integration-builder/builder/pnp/web_modal/html/steps.ts
@@ -5,47 +5,51 @@ export default function getSteps(steps, files, replacementAggregator) {
   steps.push(
     {
       ...STEPS.htmlQuickStart,
-      pointer: replacementAggregator.highlightRange(hostedFileLinks.MODAL_HTML_STYLE_CSS, files[hostedFileLinks.MODAL_HTML_STYLE_CSS], "Quick Start"),
+      pointer: replacementAggregator.highlightRange(
+        hostedFileLinks.MODAL_HTML_INDEX_HTML,
+        files[hostedFileLinks.MODAL_HTML_INDEX_HTML],
+        "Quick Start"
+      ),
     },
     {
       ...STEPS.registerApp,
       pointer: replacementAggregator.highlightRange(
-        hostedFileLinks.MODAL_HTML_STYLE_CSS,
-        files[hostedFileLinks.MODAL_HTML_STYLE_CSS],
+        hostedFileLinks.MODAL_HTML_INDEX_HTML,
+        files[hostedFileLinks.MODAL_HTML_INDEX_HTML],
         "Dashboard Registration"
       ),
     },
     {
       ...STEPS.initialization,
       pointer: replacementAggregator.highlightRange(
-        hostedFileLinks.MODAL_HTML_STYLE_CSS,
-        files[hostedFileLinks.MODAL_HTML_STYLE_CSS],
+        hostedFileLinks.MODAL_HTML_INDEX_HTML,
+        files[hostedFileLinks.MODAL_HTML_INDEX_HTML],
         "SDK Initialization"
       ),
     },
     {
       ...STEPS.login,
-      pointer: replacementAggregator.highlightRange(hostedFileLinks.MODAL_HTML_STYLE_CSS, files[hostedFileLinks.MODAL_HTML_STYLE_CSS], "Login"),
+      pointer: replacementAggregator.highlightRange(hostedFileLinks.MODAL_HTML_INDEX_HTML, files[hostedFileLinks.MODAL_HTML_INDEX_HTML], "Login"),
     },
     {
       ...STEPS.getUserInfo,
       pointer: replacementAggregator.highlightRange(
-        hostedFileLinks.MODAL_HTML_STYLE_CSS,
-        files[hostedFileLinks.MODAL_HTML_STYLE_CSS],
+        hostedFileLinks.MODAL_HTML_INDEX_HTML,
+        files[hostedFileLinks.MODAL_HTML_INDEX_HTML],
         "Get User Information"
       ),
     },
     {
       ...STEPS.blockchainCalls,
       pointer: replacementAggregator.highlightRange(
-        hostedFileLinks.MODAL_HTML_STYLE_CSS,
-        files[hostedFileLinks.MODAL_HTML_STYLE_CSS],
+        hostedFileLinks.MODAL_HTML_INDEX_HTML,
+        files[hostedFileLinks.MODAL_HTML_INDEX_HTML],
         "Blockchain Calls"
       ),
     },
     {
       ...STEPS.logout,
-      pointer: replacementAggregator.highlightRange(hostedFileLinks.MODAL_HTML_STYLE_CSS, files[hostedFileLinks.MODAL_HTML_STYLE_CSS], "Logout"),
+      pointer: replacementAggregator.highlightRange(hostedFileLinks.MODAL_HTML_INDEX_HTML, files[hostedFileLinks.MODAL_HTML_INDEX_HTML], "Logout"),
     }
   );
 }
diff --git a/src/pages/integration-builder/utils.tsx b/src/pages/integration-builder/utils.tsx
@@ -51,10 +51,10 @@ export class ReplaceFileAggregator {
     const startLine = [];
     const endLine = [];
     for (let i = 0; i < contentByLine.length; i += 1) {
-      if (contentByLine[i].includes(`HIGHLIGHTSTART-${variableName}`)) {
+      if (contentByLine[i].includes(`IMP START - ${variableName}`)) {
         startLine.push(i);
       }
-      if (contentByLine[i].includes(`HIGHLIGHTEND-${variableName}`)) {
+      if (contentByLine[i].includes(`IMP END - ${variableName}`)) {
         endLine.push(i);
       }
     }