web: Improve UX for copyCode animation

assets/scss/_custom.scss

@@ -1950,10 +1950,20 @@ body.td-search #search {
 
 .code-sample > .copy-code-icon {
   cursor: pointer;
-  text-align: right;
+  display: flex;
+  gap:1rem;
+  justify-content: right;
   padding: 0.2rem;
 }
 
+#toast-container > *{
+  background: $primary;
+}
+
+.toast-success {
+  background-color: $primary !important; 
+  color: #ffffff !important; 
+}
 
 // handle main page features on narrow viewports
 @media screen and (max-width: 768px) {

data/i18n/en/en.toml

@@ -18,6 +18,9 @@ other = "Show More Posts..."
 [banner_acknowledgement]
 other = "Hide this notice"
 
+[browser_clipboard_support_warning]
+other = "Sorry, your browser doesn't support copying this example to your clipboard."
+
 [case_study_prefix]
 other = "Case study:"
 
@@ -158,6 +161,9 @@ other = "Environment variables"
 [error_404_were_you_looking_for]
 other = "Were you looking for:"
 
+[error_copy_to_clipboard]
+other = "Error"
+
 [examples_heading]
 other = "Examples"
 
@@ -600,6 +606,9 @@ other = "See Also"
 [subscribe_button]
 other = "Subscribe"
 
+[success_copy_to_clipboard]
+other = "Success"
+
 [synopsis_heading]
 other = "Synopsis"
 
@@ -618,6 +627,12 @@ other = """<p>Items on this page refer to third party products or projects that
 [thirdparty_message_vendor]
 other = """Items on this page refer to vendors external to Kubernetes. The Kubernetes project authors aren't responsible for those third-party products or projects. To add a vendor, product or project to this list, read the <a href="/docs/contribute/style/content-guide/#third-party-content">content guide</a> before submitting a change. <a href="#third-party-content-disclaimer">More information.</a>"""
 
+[toast_failure_copycode]
+other="Failed to copy to clipboard: "
+
+[toast_success_copycode]
+other = "Copied to clipboard: "
+
 [translated_by]
 other = "Translated By"
 
@@ -639,7 +654,8 @@ other = "Versions"
 [warning]
 other = "Warning:"
 
-[whatsnext_heading]
-other = "What's next"
-
+[warning_copy_to_clipboard]
+other = "Warning"
 
+[whatsnext_heading]
+other = "What's next"

layouts/partials/hooks/body-end.html

@@ -6,29 +6,54 @@
 {{ end }}
 {{/* copy-and-paste helper for codenew shortcode */}}
 {{- if or (.HasShortcode "code_sample") (.HasShortcode "code") (.HasShortcode "codenew") -}}
+  {{- $toastrJs := resources.Get "js/toastr-2.1.4.min.js" | minify | fingerprint -}}
   {{- 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>
+    <script async src="{{ $toastrJs.RelPermalink }}"></script>
   {{- else -}}
-    {{- $sweetAlert := resources.Get "js/sweetalert-2.1.2.min.js" -}}
-<script async src="{{ $sweetAlert.RelPermalink }}"></script>
+    <script async src="{{ $toastrJs.RelPermalink }}"></script>
   {{- end -}}
+
 <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("{{i18n "toast_success_copycode"}}" + elem, "{{i18n "success_copy_to_clipboard"}}");
         },
         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("{{i18n "toast_failure_copycode"}}" + elem, "{{i18n "error_copy_to_clipboard"}}");
+        }
       );
     } 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("{{i18n "browser_clipboard_support_warning"}}", "{{i18n "warning_copy_to_clipboard"}}");
     }
   }
 }
 </script>
+
 {{- end -}}

layouts/partials/hooks/head-end.html

@@ -61,3 +61,7 @@
   {{- $bannerDismissJs := resources.Get "js/banner-dismiss.js" -}}
 <script defer src="{{ $bannerDismissJs.RelPermalink }}"></script>
 {{- end -}}
+
+{{- if or (.HasShortcode "code_sample") (.HasShortcode "code") (.HasShortcode "codenew") -}}
+    <link rel="stylesheet" href="/css/toastr-2.1.4.min.css">
+{{- end -}}