[Docs site] Learning paths, v2 (cloudflare#7612)

* partial changes * Janky code to stitch together modules and learning paths * Update to pull values dynamically * fleshed out PoC * Flipped order of nbsp * Added titles * Surfaced bm path on list page * Fixed breadcrumb issue * Added side navigation basics + updating with learning path values * Added time estimations to nav * finished base LP page * Removed tech partners integration for more maintaiable option * Removed from json collector * Cleaned up learning path shortcode * Added new unit * Small usability tweaks * Updated button styling * finalized time estimates * performance and formatting code tweaks * Refactor to organize modules into folders * Refactored modules to live in folders * Removed log statement * Added skeleton of load balancing * content tweaks * small tweaks * Fixed missing unit * Revised learning units portion of data structure * Updated progress buttons for different unit structure * fixed broken links * Re-added unit count to details title * Small mobile styling tweak * Replaced load balancing get started * Fixed broken links * last broken link * Rough draft of first unit * added more content * Polished concepts and removed bots info * Finished preparation section going through different settings * Finished content * Addressed most of Pedro's feedback * Fixed styling issue * Apply suggestions from Patricia's content review Co-authored-by: Patricia Santa Ana <[email protected]> * updating path * Temp solution * Another test * Fixed import paths * Re-added footers * Apply patch file * Updated crawl script * Few more updates to crawl * Moved script to head instead of main.ts * Apply suggestions from code review Co-authored-by: Pedro Sousa <[email protected]> * Small updates based on code review --------- Co-authored-by: Patricia Santa Ana <[email protected]> Co-authored-by: Pedro Sousa <[email protected]>
gilgongo · Feb 24, 2023 · a22972a · a22972a
1 parent b6d7f8f
commit a22972a
Show file tree

Hide file tree

Showing 111 changed files with 1,763 additions and 642 deletions.
diff --git a/assets/dashboard-landing.json b/assets/dashboard-landing.json
@@ -514,7 +514,7 @@
           "title": "Load Balancing pricing"
         },
         {
-          "url_path": "/load-balancing/get-started/",
+          "url_path": "/learning-paths/load-balancing/",
           "title": "Get started with Load Balancing"
         },
         {

diff --git a/assets/events.ts b/assets/events.ts
@@ -243,7 +243,7 @@ export function toggleSidebar() {
         ".DocsContent",
         ".DocsMarkdown",
         ".DocsSidebar--sections .toggleSidebar",
-        ".breadcrumb",
+        ".breadcrumb"
       ];
 
       classToggleList.forEach(function (querySelector) {

diff --git a/assets/json-collector.ts b/assets/json-collector.ts
@@ -1,15 +1,15 @@
-import * as get_started from "./json/get-started.json";
-import * as optimize_site_speed from "./json/optimize-site-speed.json";
-import * as application_security from "./json/application-security.json";
-import * as replace_vpn from "./json/replace-vpn.json";
-import * as partners_integrations from "./json/technology-partner-integrations.json";
+import * as get_started from "data/learning-paths/get-started.json";
+import * as optimize_site_speed from "data/learning-paths/optimize-site-speed.json";
+import * as application_security from "data/learning-paths/application-security.json";
+import * as replace_vpn from "data/learning-paths/replace-vpn.json";
+import * as load_balancing from "data/learning-paths/load-balancing.json";
 
 let learning_paths = [
   get_started,
   optimize_site_speed,
   application_security,
   replace_vpn,
-  partners_integrations,
+  load_balancing,
 ];
 
 export { learning_paths };
diff --git a/assets/json/technology-partner-integrations.json b/assets/json/technology-partner-integrations.json
diff --git a/assets/learning-path-navigation.ts b/assets/learning-path-navigation.ts
@@ -0,0 +1,104 @@
+import { learning_paths as paths } from "./json-collector";
+
+(function () {
+  const currentLocation = window.location.href;
+  const params = new URLSearchParams(document.location.search);
+  const currentLearningPath = params.get("learning_path");
+  let currentPathData;
+
+  if (currentLearningPath !== null) {
+    for (const path in paths) {
+      if (paths[path]["uid"] === currentLearningPath) {
+        currentPathData = paths[path];
+      }
+    }
+
+    // Add learning path to breadcrumb list
+    const firstLearningBreadcrumb = document.getElementById(
+      "firstLearningBreadcrumb"
+    );
+    if (firstLearningBreadcrumb) {
+      firstLearningBreadcrumb.insertAdjacentHTML(
+        "afterend",
+        `<li id="firstLearningBreadcrumb">
+            <a href="${currentPathData["path"]}" class="DocsMarkdown--link">
+              <span class="DocsMarkdown--link-content">${currentPathData["title"]}</span></a>
+          </li>`
+      );
+    }
+
+    // Update final next link to point to the next module
+    const nextModuleLink = document.getElementById("nextModuleLink");
+    if (nextModuleLink && currentPathData) {
+      const moduleNameRegex = new RegExp("/learning-paths/modules/.*?/(.*?)/");
+      const result = currentLocation.match(moduleNameRegex);
+      const currentModule = result[1];
+      let nextModule = "";
+
+      currentPathData.modules.forEach((c, i) => {
+        if (currentModule === c.uid) {
+          if (i + 1 < currentPathData.modules.length) {
+            nextModule =
+              currentPathData.modules[i + 1]["folder"] +
+              "/" +
+              currentPathData.modules[i + 1]["uid"] +
+              "/";
+          }
+        }
+      });
+
+      if (nextModule === "") {
+        nextModuleLink.innerHTML = "Finish learning path >";
+        nextModuleLink.setAttribute("href", "/learning-paths/");
+      } else {
+        nextModuleLink.setAttribute(
+          "href",
+          "/learning-paths/modules/" +
+            nextModule +
+            "?learning_path=" +
+            currentLearningPath
+        );
+        nextModuleLink.innerHTML = "Continue to next module >";
+      }
+    }
+
+    // Update navigational links to keep the current context
+    const navigationLinks =
+      document.getElementsByClassName("learningNavigation");
+    if (navigationLinks) {
+      for (const item of navigationLinks) {
+        const currentHref = item.getAttribute("href");
+        item.setAttribute(
+          "href",
+          currentHref + "?learning_path=" + currentLearningPath
+        );
+      }
+    }
+
+    // Update breadcrumbs to keep the current context
+    const subsequentBreacrumb = document.getElementsByClassName(
+      "subsequentBreacrumb"
+    );
+    if (subsequentBreacrumb) {
+      for (const item of subsequentBreacrumb) {
+        const currentHref = item.getAttribute("href");
+        item.setAttribute(
+          "href",
+          currentHref + "?learning_path=" + currentLearningPath
+        );
+      }
+    }
+
+    // Update side nav to keep the current context
+    const navLinks = document.getElementsByClassName("DocsSidebar--nav-link");
+    if (navLinks) {
+      for (const item of navLinks) {
+        const currentHref = item.getAttribute("href");
+        item.setAttribute(
+          "href",
+          currentHref + "?learning_path=" + currentLearningPath
+        );
+      }
+    }
+  }
+})();
diff --git a/assets/learning-paths.ts b/assets/learning-paths.ts
@@ -1,4 +1,4 @@
-import { learning_paths as paths } from "json-collector";
+import { learning_paths as paths } from "./json-collector";
 
 function buildHtml(destination, array) {
   const numTrails = document.getElementById("numTrails");
@@ -28,7 +28,8 @@ function getSelectValues(selectElementCollection: HTMLCollectionOf<Element>) {
   let selectedValues: Record<string, string> = {};
   for (const htmlElement of selectElementCollection) {
     let selectElement = htmlElement as HTMLSelectElement;
-    let selectedValue = selectElement.options[selectElement.selectedIndex].value;
+    let selectedValue =
+      selectElement.options[selectElement.selectedIndex].value;
     selectedValues[selectElement.id] = selectedValue;
   }
   return selectedValues;
@@ -42,12 +43,18 @@ export function filterResults() {
     for (const dropdown of selectorDropdowns) {
       dropdown.addEventListener("change", () => {
         let selectedOptions = getSelectValues(selectorDropdowns);
-        if (Object.values(selectedOptions).every(selectedValue => selectedValue === "all")) {
+        if (
+          Object.values(selectedOptions).every(
+            (selectedValue) => selectedValue === "all"
+          )
+        ) {
           passed = paths;
         } else {
           passed = paths.filter((currentPath) => {
             let keepItem = true;
-            for (const [filterName, filterValue] of Object.entries(selectedOptions)) {
+            for (const [filterName, filterValue] of Object.entries(
+              selectedOptions
+            )) {
               if (filterValue === "all") {
                 continue;
               } else if (!currentPath[filterName].includes(filterValue)) {
@@ -62,4 +69,4 @@ export function filterResults() {
       });
     }
   }
-}
+}
diff --git a/assets/main.ts b/assets/main.ts
@@ -10,6 +10,8 @@ declare global {
   }
 }
 
+const currentLocation = window.location.href;
+
 (function () {
   navs.init();
   timeago.init();

diff --git a/bin/crawl.ts b/bin/crawl.ts
@@ -22,7 +22,7 @@ let REDIRECT_ERRORS: string[] = [];
 
 const ROOT = resolve(".");
 const PUBDIR = join(ROOT, "public");
-const LEARNING_PATH_DIR = join(ROOT, "assets/json");
+const LEARNING_PATH_DIR = join(ROOT, "data/learning-paths");
 const REDIRECT_FILE = join(ROOT, "content/_redirects");
 const VERBOSE = process.argv.includes("--verbose");
 const EXTERNALS = process.argv.includes("--externals");
@@ -306,9 +306,9 @@ try {
 try {
   await walkJsonFiles(LEARNING_PATH_DIR);
   if (!JSON_ERRORS && !JSON_WARNS) {
-    console.log("\n~> /assets/json files DONE~!\n\n");
+    console.log("\n~> /data/learning-paths/ files DONE~!\n\n");
   } else {
-    let msg = "\n~> /assets/json files DONE with:";
+    let msg = "\n~> /data/learning-paths/ files DONE with:";
     if (JSON_ERRORS > 0) {
       process.exitCode = 1;
       msg += "\n    - " + JSON_ERRORS.toLocaleString() + " error(s)";