Merge pull request #38656 from vikram-redhat/pdf

vikram-redhat · web-flow · commit fa1e2486e7ee · 2021-11-12T15:10:11.000+10:00
Added icons and pdf
diff --git a/_templates/_page_openshift.html.erb b/_templates/_page_openshift.html.erb
@@ -24,6 +24,27 @@
   <meta content="#000000" name="msapplication-TileColor">
   <meta content="https://assets.openshift.net/content/subdomain/touch-icon-precomposed.png" name="msapplication-TileImage">
   <%= render("_templates/_analytics.html.erb", :distro_key => distro_key) %>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js"></script>
+
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
+        rel="stylesheet">
+  <script>
+
+    function getPDF() {
+      var element = document.getElementsByClassName('main');
+      <%
+        filepath = repo_path[0...-5]
+      %>
+      var opt = {
+        margin:       10,
+        filename:     '<%= "#{filepath}.pdf" %>',
+        html2canvas:  { windowWidth: 650 },
+        image:        { type: 'jpeg', quality: 0.98 }
+      };
+      html2pdf().set(opt).from(element[0]).save();
+    }
+  </script>
+
 </head>
 
 <body onload="selectVersion('<%= version %>');">
@@ -102,14 +123,14 @@
       </li>
       <% if (distro_key != "openshift-origin" && distro_key != "openshift-aro") %>
       <span text-align="right" style="float: right !important">
-        <a href="https://github.com/openshift/openshift-docs/commits/<%= (distro_key == "openshift-enterprise") ? "enterprise-#{version}" : "dedicated-4" %>/<%= repo_path %>">Page history</a>
+        <a href="https://github.com/openshift/openshift-docs/commits/<%= (distro_key == "openshift-enterprise") ? "enterprise-#{version}" : "dedicated-4" %>/<%= repo_path %>"><span class="material-icons-outlined">history</span></a>
         <%
           unless (unsupported_versions.include? version)
         %>
-        /
         <a href="https://github.com/openshift/openshift-docs/issues/new?title=<%= (distro_key == "openshift-enterprise") ? "[enterprise-#{version}] Issue in file #{repo_path}" : ((distro_key=="openshift-dedicated" ) ? "[dedicated] Issue in file #{repo_path}" : "[online] Issue in file #{repo_path}" ) %>">
-          Open an issue
+          <span class="material-icons-outlined">bug_report</span>
         </a>
+        <a href="javascript: void(0);" onclick="getPDF();"><span class="material-icons-outlined">picture_as_pdf</span></a>
         <% if (version == "4.5") %>
         /
         <select onchange="selectLang(this);">
@@ -341,7 +362,7 @@
   <script type="text/javascript">
     window.addEventListener('DOMContentLoaded', () => {
       window.addEventListener("wheel", () => {
-        
+
         const ioConfiguration = {
           "rootMargin": "-120px 0px -400px 0px",
           "threshold": 0
@@ -370,7 +391,7 @@
                 document.querySelector(`#toc li a[href="#${i.target.id}"]`).classList.add('toc-active')
               }
             })
-          } 
+          }
         };
 
         //make clicked toc item active and stop IntersectionObserver
@@ -435,7 +456,7 @@
               };
             };
           if(document.documentElement.scrollHeight != window.pageYOffset + window.innerHeight) {
-            sidebar.style.marginBottom = "0px"; 
+            sidebar.style.marginBottom = "0px";
             toc.style.bottom = "0px";
           }
         }
@@ -454,8 +475,8 @@
             document.querySelector('#support-alert').style.position = "fixed";
             document.querySelector('#support-alert').style.bottom = "0px";
             document.querySelector('#support-alert').style.margin = "5px";
-            document.querySelector('#support-alert').style.zIndex = "9999999"; 
-          }    
+            document.querySelector('#support-alert').style.zIndex = "9999999";
+          }
         }
       }
    });
@@ -465,7 +486,7 @@
           document.querySelector('#support-alert').style.removeProperty('position');
           document.querySelector('#support-alert').style.removeProperty('bottom');
           document.querySelector('#support-alert').style.removeProperty('margin');
-          document.querySelector('#support-alert').style.removeProperty('zIndex');          
+          document.querySelector('#support-alert').style.removeProperty('zIndex');
         }
       }
     })
