Merge pull request #223 from tfsojon/chandu

Worked on mindmap click support #105

content/english/mindmaps/devops/_index.md

@@ -8,16 +8,103 @@ description: "Step by step guide on how to sign Git commits with a valid OpenID
 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
+  Client->A.method() {
+    B.method() {
+      if(condition) {
+        return x1
+        // return early
+        @return
+        A->Client: x11
+      }
+    }
+    return x2
+  }
 ```

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/_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/mindmaps/list.html

@@ -84,6 +84,7 @@ <h2 class="mb-4 font-weight-medium mt-5">{{ .Title }}</h2>
           {{ range .Data.Pages }}
           <div 
             class="offcanvas offcanvas-end fade" 
+            data-bs-scroll="true"
             tabindex="-1" 
             id="{{.Title | urlize}}" 
             aria-labelledby="{{.Title | urlize}}" 
@@ -107,8 +108,12 @@ <h4 class="offcanvas-title" id="offcanvasExampleLabel">{{.Title}}</h4>
             mermaid.initialize({
               startOnLoad: true,
               securityLevel: 'loose',
+              theme: 'forest',
             });
 
+            import zenuml from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml@0.1.0/dist/mermaid-zenuml.esm.min.mjs';
+            await mermaid.registerExternalDiagrams([zenuml]);
+
             function urlize(str) {
               str = str.trim();
               str = str.replace(/\s+/g, '-');
@@ -119,28 +124,71 @@ <h4 class="offcanvas-title" id="offcanvasExampleLabel">{{.Title}}</h4>
             }
 
             window.addEventListener('load', (event) => {
+              const body = document.querySelector('body');
               const contentLoader = document.querySelector('.content-loader');
               const content = document.querySelector('.content');
               contentLoader.remove();
               content.classList.remove('content-hidden');
 
+              let addDataAttribute = (el, textID) => {
+                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));
+              }
+
               setTimeout(function() {
-                let node = document.querySelectorAll('.mindmap-node:not(.section-root):not(.node)');
-                node.forEach(function(el) {
+                // maindmap
+                let mindmapNode = document.querySelectorAll('.mindmap-node:not(.section-root):not(.node)');
+                mindmapNode.forEach(function(el) {
                   let innerText = el.querySelectorAll('.text-inner-tspan');
                   const textArray = [];
                   innerText.forEach((text) => {
                     textArray.push(text.textContent);
                   });
                   const textID = textArray.join(' ');
+                  let id = document.getElementById(urlize(textID));
+                  if (id) { addDataAttribute(el, textID) }
+                });
+
+                // flowchart
+                let flowchartLabel = document.querySelectorAll('.flowchart-label');
+                let flowchartEdgeLabel = document.querySelectorAll('g.edgeLabel');
+                let flowchartLabels = [...flowchartLabel, ...flowchartEdgeLabel];
+                flowchartLabels.forEach(function(el) {
+                  let nodeLabel = el.querySelectorAll('.nodeLabel');
+                  let edgeLabel = el.querySelectorAll('.edgeLabel');
+                  let allLabel = [...nodeLabel, ...edgeLabel];
+                  const textArray = [];
+                  allLabel.forEach((text) => {
+                    textArray.push(text.textContent);
+                  });
+                  const textID = textArray.join(' ');
+                  let id = document.getElementById(urlize(textID));
+                  if (id) { addDataAttribute(el, textID) }
+                });
+
+                // C4Context
+                let personMan = document.querySelectorAll('.person-man');
+                let personManLabel = document.querySelectorAll('g.edgeLabel');
+                personMan.forEach(function(el) {
+
+                  const textArray = [];
+                  let allLabel = el.querySelectorAll('text');
+                  allLabel.forEach((text) => {
+                    let fontSize = window.getComputedStyle(text).fontSize;
+                    if (fontSize == '16px') {
+                      textArray.push(text.textContent);
+                    }
+                  });
 
-                  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));
-
+                  const textID = textArray.join(' ');
+                  let id = document.querySelector(`[aria-labelledby="${urlize(textID)}"]`);
+                  if (id) { addDataAttribute(el, textID) }
                 });
+
+
               }, 1000);
             });