mindmap updates

README.md

@@ -28,6 +28,10 @@ This is the repo to manage all the website work, which is being developed using
 > How to change bg color, text, etc for call-to-action and footer area
 > https://github.com/intelops/website/issues/99#issuecomment-1529354004 
 > https://github.com/intelops/website/pull/139 
+> 
+> 
+> change texts color in banner areas from markdown itself - https://github.com/intelops/website/issues/140 
+> 
 
 > How to change content areas Text, Colors, BG color, etc.
 > https://github.com/intelops/website/issues/107 
@@ -54,4 +58,7 @@ This is the repo to manage all the website work, which is being developed using
 
 > To add/modify opengraph metadata information and verify using ograph previewer browser extension - https://github.com/intelops/website/issues/176 
 >
+> How to add mindmaps to blogs, learning-center articles, or separate Mindmaps to the site? - https://github.com/intelops/website/issues/105 
+> This issue has the samples for reference. Add interactive diagrams using mermaid in Markdown. 
+>
 > 

content/english/mindmaps/devops/_index.md

@@ -4,20 +4,125 @@ title: "DevOps"
 date: 2023-07-10
 weight: 1
 # description
-description: "Step by step guide on how to sign Git commits with a valid OpenID Connect identity"
+description: "Step GOy step guide on how to sign Git commits with a valid OpenID Connect identity"
 category: "Role based Mindmaps"
 ---
 
-DevOps
+## Mindmap
 
 ```mermaid
 mindmap
   root(Learn a programming language)
     Python
     Ruby
     Go
-    :::disable
     Operating System
       VCS Hosting
       Version Control System
+```
+
+<hr/>
+
+## Flowchart
+
+```mermaid
+flowchart TD
+  A[Python] -->|Go| B(Go shopping)
+  B --> C{Let me think}
+  C -->|One| D[Laptop]
+  C -->|Two| E[iPhone]
+  C -->|Three| F[fa:fa-car Car]
+```
+
+<hr/>
+
+## C4Context
+
+```mermaid
+C4Deployment
+  title Deployment Diagram for Internet Banking System - Live
+
+  Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
+    Container(mobile, "Python", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
+  }
+
+  Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){
+    Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
+      Container(spa, "Go", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
+    }
+  }
+
+  Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
+    Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
+      Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
+        Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
+      }
+    }
+    Deployment_Node(bb2, "bigbank-web*** x4", "Ubuntu 16.04 LTS"){
+      Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){
+        Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.")
+      }
+    }
+    Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){
+      Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){
+        ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
+      }
+    }
+    Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS") {
+      Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c") {
+        ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
+      }
+    }
+  }
+
+  Rel(mobile, api, "Makes API calls to", "json/HTTPS")
+  Rel(spa, api, "Makes API calls to", "json/HTTPS")
+  Rel_U(web, spa, "Delivers to the customer's web browser")
+  Rel(api, db, "Reads from and writes to", "JDBC")
+  Rel(api, db2, "Reads from and writes to", "JDBC")
+  Rel_R(db, db2, "Replicates data to")
+
+  UpdateRelStyle(spa, api, $offsetY="-40")
+  UpdateRelStyle(web, spa, $offsetY="-40")
+  UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
+  UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
+  UpdateRelStyle(db, db2, $offsetY="-10")
+```
+
+<hr/>
+
+## ZenUML
+
+```mermaid
+zenuml
+  title Reply message
+  Python->A.method() {
+    GO.method() {
+      if(condition) {
+        return Python
+        // return early
+        @return
+        A->Python: x11
+      }
+    }
+    return go
+  }
+```
+
+```mermaid
+zenuml
+  BookLibService.Borrow(id) {
+    User = Python.GetUser()
+    if(User.isActive) {
+      try {
+        BookRepository.Update(id, onLoan, User)
+        receipt = new Receipt(id, dueDate)
+      } catch (BookNotFoundException) {
+        ErrorService.onException(BookNotFoundException)
+      } finally {
+        Connection.close()
+      }
+    }
+    return receipt
+  }
 ```

themes/delta/assets/js/script.js

@@ -78,6 +78,7 @@ $(document).ready(function () {
     let nextAncestor = menu.closest("li[data-nav-id]");
     while (maxDepth-- >= 0 && nextAncestor !== null) {
       nextAncestor.classList.add("parent");
+      nextAncestor.parentNode.style.display = "block";
       let icon = nextAncestor.querySelector(".category-icon");
       if (icon !== null) {
         icon.classList.remove("icon-right");

themes/delta/assets/scss/_buttons.scss

@@ -40,7 +40,7 @@
     135deg,
     lighten($color-primary, 10) 0%,
     darken($color-primary, 5) 100%
-  );
+  ) !important;
   color: $white;
   border: 0;
 
@@ -84,7 +84,7 @@
     160deg,
     lighten($white, 10) 0%,
     darken($white, 5) 100%
-  );
+  ) !important;
   color: $dark;
   border: 0;
 

themes/delta/assets/scss/_common.scss

@@ -742,6 +742,11 @@ form label {
   *:not(li) {
     margin-bottom: 28px;
   }
+  .zenuml {
+    *:not(li) {
+      margin-bottom: initial;
+    }
+  }
   h2,
   h3,
   h4,

themes/delta/assets/scss/_typography.scss

@@ -22,7 +22,7 @@ strong {
 h1,h2,h3,h4,h5,h6 {
   color: $black;
   font-family: $font-primary;
-  font-weight: 900;
+  font-weight: 900 !important;
 }
 
 .banner-title{
@@ -41,6 +41,9 @@ h1,h2,h3,h4,h5,h6 {
     font-size: 38px;
   }
 }
+.btn-close {
+  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
+}
 
 // List in descending order to prevent extra sort function
 $type-levels: 6, 5, 4, 3, 2, 1;
@@ -52,13 +55,13 @@ $level-size: $font-size;
   // Output heading styles
   h#{$level},
   .h#{$level} {
-    font-size: $level-size;
-    line-height: calc(10px + 2ex + 2px);
+    font-size: $level-size !important;
+    line-height: calc(10px + 2ex + 2px) !important;
     @include desktop {
-      font-size: calc( #{$level-size} * .85);
+      font-size: calc( #{$level-size} * .85) !important;
     }
     @include tablet {
-      font-size: calc( #{$level-size} * .75);
+      font-size: calc( #{$level-size} * .75) !important;
     }
   }
 }

themes/delta/assets/scss/templates/_main.scss

@@ -1847,9 +1847,15 @@ footer {
     pointer-events: none;
   }
 }
-[data-roadmap] {
+.clickable {
   cursor: pointer;
   user-select: none;
+}
+[data-mindmap] {
+  * {
+    @extend .clickable;
+  }
+  @extend .clickable;
   [class^="node-line"],
   .node-bkg {
     transition: .3s;

themes/delta/assets/scss/templates/_navigation.scss

@@ -98,9 +98,9 @@
       content: "";
       height: 9px;
       width: 9px;
-      border: 2px solid;
-      border-left: 0;
-      border-top: 0;
+      border: 2px solid !important;
+      border-left: 0 !important;
+      border-top: 0 !important;
       border-color: inherit;
       border-radius: 2px;
       transform: rotate(45deg);

themes/delta/layouts/_default/opensource-security-reporting-form.html

@@ -4,7 +4,7 @@
 <section class="section">
   <div class="container">
     <div class="row">
-      <div class="col-12">
+      <div class="col-lg-8 mx-auto">
 
         {{ with site.Params.opensource_security_reporting }}
         {{ if .enable }}

themes/delta/layouts/_default/single.html

@@ -64,17 +64,11 @@ <h1 class="h2 mb-3">{{.Title | markdownify}}</h1>
           </span>
         </div>
 
-        <div class="content">
+        {{ if .Page.Store.Get "hasMermaid" }}<p class="content-loader text-center">loading..</p>{{end}}
+        <div class="content {{ if .Page.Store.Get `hasMermaid` }}content-hidden{{end}}">
           {{.Content}}
         </div>
 
-        {{ if .Page.Store.Get "hasMermaid" }}
-          <script type="module">
-            import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
-            mermaid.initialize({ startOnLoad: true });
-          </script>
-        {{ end }}
-
         {{ with site.GetPage (string .Params.Author | urlize | lower) }}
         {{if .Title}}
         <div class="post-author d-flex border rounded-lg mt-5">
@@ -115,6 +109,8 @@ <h3 class="h5 title mb-1"><a href="{{.RelPermalink}}" class="text-dark">{{ .Titl
   </div>
 </section>
 
+{{ partial "mermaid-script" . }}
+
 {{ if site.Params.blog_popup.enable }}
 {{ partial "popup-form" (dict "Class" "blog-popup" "Src" site.Params.blog_popup.clickup_iframe_url) }}
 {{ end }}

themes/delta/layouts/mindmaps/list.html

@@ -59,9 +59,9 @@ <h2 class="h4 text-center mb-4 text-muted">{{ .Key }}</h2>
 
         {{ else }}
 
-          <p class="content-loader text-center">loading..</p>
+          {{ if .Page.Store.Get "hasMermaid" }}<p class="content-loader text-center">loading..</p>{{end}}
 
-          <div class="content content-hidden">
+          <div class="content {{ if .Page.Store.Get `hasMermaid` }}content-hidden{{end}}">
             {{ with site.GetPage "mindmaps" }}
             {{ with .Params.all_mindmaps_button }}
             <a href="{{.link | relLangURL}}" class="border rounded py-1 pe-2 ps-1 d-inline-flex align-item-center line-height-0">
@@ -81,71 +81,7 @@ <h2 class="mb-4 font-weight-medium mt-5">{{ .Title }}</h2>
             {{.Content}}
           </div>
 
-          {{ range .Data.Pages }}
-          <div 
-            class="offcanvas offcanvas-end fade" 
-            tabindex="-1" 
-            id="{{.Title | urlize}}" 
-            aria-labelledby="{{.Title | urlize}}" 
-            style="width:500px; transform:none"
-          >
-            <div class="offcanvas-header">
-              <h4 class="offcanvas-title" id="offcanvasExampleLabel">{{.Title}}</h4>
-              <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-            </div>
-            <div class="offcanvas-body">
-              <div class="content">
-                {{.Content}}
-              </div>
-            </div>
-          </div>
-          {{ end }}
-
-          {{ if .Page.Store.Get "hasMermaid" }}
-          <script type="module">
-            import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
-            mermaid.initialize({
-              startOnLoad: true,
-              securityLevel: 'loose',
-            });
-
-            function urlize(str) {
-              str = str.trim();
-              str = str.replace(/\s+/g, '-');
-              str = str.replace(/[^\w-]/g, '');
-              str = str.replace(/-{2,}/g, '-');
-              str = str.toLowerCase();
-              return str;
-            }
-
-            window.addEventListener('load', (event) => {
-              const contentLoader = document.querySelector('.content-loader');
-              const content = document.querySelector('.content');
-              contentLoader.remove();
-              content.classList.remove('content-hidden');
-
-              setTimeout(function() {
-                let node = document.querySelectorAll('.mindmap-node:not(.section-root):not(.node)');
-                node.forEach(function(el) {
-                  let innerText = el.querySelectorAll('.text-inner-tspan');
-                  const textArray = [];
-                  innerText.forEach((text) => {
-                    textArray.push(text.textContent);
-                  });
-                  const textID = textArray.join(' ');
-
-                  el.setAttribute('type', 'button');
-                  el.setAttribute('data-roadmap', '');
-                  el.setAttribute('data-bs-toggle', 'offcanvas');
-                  el.setAttribute('data-bs-target', '#'+urlize(textID));
-                  el.setAttribute('aria-controls', urlize(textID));
-
-                });
-              }, 1000);
-            });
-
-          </script>
-          {{ end }}
+          {{ partial "mermaid-script" . }}
 
         {{ end }}
       </div>