web: Improve UX for copyCode animation

This commit introduces a new toast animation instead
of the previous modal that would have to be manually closed.
The new toast is less intrusive to the user's workflow
and closes by itself.

Fixes issue: 48950.

Signed-off-by: Apoorva Pendse <apoorvavpendse@gmail.com>

assets/scss/_custom.scss

@@ -1950,7 +1950,9 @@ body.td-search #search {
 
 .code-sample > .copy-code-icon {
   cursor: pointer;
-  text-align: right;
+  display: flex;
+  gap:1rem;
+  justify-content: right;
   padding: 0.2rem;
 }
 

layouts/partials/hooks/body-end.html

@@ -7,28 +7,63 @@
 {{/* copy-and-paste helper for codenew shortcode */}}
 {{- if or (.HasShortcode "code_sample") (.HasShortcode "code") (.HasShortcode "codenew") -}}
   {{- if hugo.IsProduction -}}
-    {{- $sweetAlert :=  resources.Get "js/sweetalert-2.1.2.min.js" | minify | fingerprint -}}
-<script async src="{{ $sweetAlert.RelPermalink }}" integrity="{{ $sweetAlert.Data.Integrity }}" crossorigin="anonymous"></script>
+    {{- $toastrCss := resources.Get "css/toastr-2.1.4.min.css" -}}
+    <LINK rel="stylesheet" href="/css/toastr-2.1.4.min.css">
+    {{- $toastrJs := resources.Get "js/toastr-2.1.4.min.js" | minify | fingerprint -}}
+    <script async src="{{ $toastrJs.RelPermalink }}"></script>
   {{- else -}}
-    {{- $sweetAlert := resources.Get "js/sweetalert-2.1.2.min.js" -}}
-<script async src="{{ $sweetAlert.RelPermalink }}"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
   {{- end -}}
+
+  <style>
+    .toast-success {
+      background-color: #007bff !important; 
+      color: #ffffff !important; 
+    }
+  </style>
 <script type="text/javascript">
-function copyCode(elem){
+function copyCode(elem) {
   if (document.getElementById(elem)) {
     if (navigator.clipboard) {
       navigator.clipboard.writeText(document.getElementById(elem).textContent).then(
         function () {
-          swal("Copied to clipboard: ",elem);
+          toastr.options = {
+            closeButton: true,
+            progressBar: true,
+            positionClass: "toast-bottom-center", 
+            timeOut: 2000, 
+            preventDuplicates: true,   
+            newestOnTop: true          
+          };
+          toastr.success("Copied to clipboard: " + elem, "Success");
         },
         function () {
-          swal("Oh, no…","Failed to copy to clipboard: ",elem);
-        },
+          toastr.options = {
+            closeButton: true,
+            progressBar: true,
+            positionClass: "toast-bottom-center", 
+            timeOut: 2000, 
+            preventDuplicates: true,  
+            newestOnTop: true         
+          };
+          toastr.error("Failed to copy to clipboard: " + elem, "Error");
+        }
       );
     } else {
-      swal("Oh, no…","Sorry, your browser doesn't support copying this example to your clipboard.");
+      toastr.options = {
+        closeButton: true,
+        progressBar: true,
+        positionClass: "toast-bottom-center", 
+        timeOut: 2000,
+        preventDuplicates: true,  
+        newestOnTop: true         
+      };
+      toastr.warning("Sorry, your browser doesn't support copying this example to your clipboard.", "Warning");
     }
   }
 }
 </script>
+
 {{- end -}}