Port scripts and stylesheets to modern theme

Author: glopesdev

docfx.json

@@ -83,7 +83,8 @@
     "fileMetadataFiles": [],
     "template": [
       "default",
-      "templates/html"
+      "modern",
+      "template"
     ],
     "postProcessors": [ "ExtractSearchIndex" ],
     "markdownEngineName": "markdig",
@@ -97,7 +98,6 @@
     "keepFileLink": false,
     "cleanupCacheHistory": false,
     "disableGitFeatures": false,
-    "xrefService": [ "https://learn.microsoft.com/api/xref/query?uid={uid}" ],
     "xref": [
       "https://bonsai-rx.org/docs/xrefmap.yml",
       "https://horizongir.github.io/opencv.net/xrefmap.yml",

template/public/main.css

@@ -0,0 +1,28 @@
+.workflow {
+  border: 1px solid #e3e3e3;
+  padding: 1px;
+}
+
+.workflow > p > img {
+  padding-top: 12px;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.codeHeader {
+  box-sizing: content-box;
+  background-color: #f2f2f2;
+  color: #171717;
+  display: flex;
+  flex-direction: row;
+  border: 1px solid #e3e3e3;
+  border-bottom: 0;
+  margin-top: 16px;
+  min-height: 30px;
+}
+
+.codeHeader > .language {
+  padding: 2px 16px;
+  flex-grow: 1;
+  line-height: 26px;
+}

template/public/main.js

@@ -0,0 +1,52 @@
+var WorkflowContainer = {
+    createCodeHeader: function(text) {
+        const div = document.createElement("div");
+        div.className = "codeHeader";
+        div.innerHTML =
+            '<span class="language">'+ text +'</span>'+
+            '<a class="btn border-0 code-action" href="#" title="Copy">'+
+            '  <i class="bi bi-clipboard"></i>'+
+            '</a>';
+        return div;
+    },
+    setCopyAlert: function(element) {
+        const copyIcon = element.querySelector("i");
+        element.classList.add("link-success");
+        copyIcon.classList.add("bi-check-lg");
+        copyIcon.classList.remove("bi-clipboard");
+        setTimeout(function() {
+            copyIcon.classList.remove("bi-check-lg");
+            copyIcon.classList.add("bi-clipboard");
+            element.classList.remove("link-success");
+        }, 1000);
+    },
+    renderElement: function(element) {
+        const img = element.querySelector("img");
+        const workflowPath = img.src;
+        img.src = workflowPath.replace(/\.[^.]+$/, ".svg");
+
+        const codeHeader = WorkflowContainer.createCodeHeader("Workflow");
+        const button = codeHeader.querySelector("a");
+        button.addEventListener("click", (e) => {
+            e.preventDefault();
+            fetch(workflowPath).then(req => req.text()).then(contents => {
+                navigator.clipboard.writeText(contents);
+                WorkflowContainer.setCopyAlert(button);
+            });
+        });
+
+        const wrap = document.createElement("p");
+        const parent = element.parentElement
+        parent.insertBefore(wrap, element);
+        wrap.appendChild(codeHeader);
+        wrap.appendChild(element);
+    },
+    init: async function() {
+        for (const element of document.getElementsByClassName("workflow")) {
+            WorkflowContainer.renderElement(element)
+        }
+    }
+}
+
+export default { }
+WorkflowContainer.init();