From 9e128e3fc7906e3c7eb6486bfc9c03b4508999b0 Mon Sep 17 00:00:00 2001
From: Tim Bannister <tim@scalefactory.com>
Date: Tue, 14 May 2024 00:52:02 +0100
Subject: [PATCH 1/3] Reimplement code_sample shortcode

Use Hugo Pipes for the icon asset pipeline, and avoid inline styling.
---
 {static => assets}/images/copycode.svg |  0
 assets/scss/_custom.scss               |  5 +++++
 layouts/shortcodes/code.html           | 13 +++++++------
 layouts/shortcodes/code_sample.html    | 13 +++++++------
 layouts/shortcodes/codenew.html        | 13 +++++++------
 5 files changed, 26 insertions(+), 18 deletions(-)
 rename {static => assets}/images/copycode.svg (100%)

diff --git a/static/images/copycode.svg b/assets/images/copycode.svg
similarity index 100%
rename from static/images/copycode.svg
rename to assets/images/copycode.svg
diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
index e5e376438b1f1..223900bf09146 100644
--- a/assets/scss/_custom.scss
+++ b/assets/scss/_custom.scss
@@ -1407,4 +1407,9 @@ div.alert > em.javascript-required {
   cursor: pointer;
   font-size: calc(5vw + 10px);
   color: #333;
+}
+
+.code-sample > .copy-code-icon {
+  cursor: pointer;
+  text-align: right;
 }
\ No newline at end of file
diff --git a/layouts/shortcodes/code.html b/layouts/shortcodes/code.html
index 08064fa3f3d57..11f7eb8112fa6 100644
--- a/layouts/shortcodes/code.html
+++ b/layouts/shortcodes/code.html
@@ -1,6 +1,6 @@
 {{ $p := .Page }}
 {{ $file := .Get "file" }}
-{{ $codelang := .Get "language" | default (path.Ext $file | strings.TrimPrefix ".") }} 
+{{ $codelang := .Get "language" | default (path.Ext $file | strings.TrimPrefix ".") }}
 {{ $fileDir := path.Split $file }}
 {{ $bundlePath := path.Join .Page.File.Dir $fileDir.Dir }}
 {{ $filename := printf "/content/%s/examples/%s" .Page.Lang $file | safeURL }}
@@ -18,15 +18,16 @@
 {{ errorf "[%s] %q not found in %q" site.Language.Lang $fileDir.File $bundlePath }}
 {{ end }}
 {{ with $.Scratch.Get "content" }}
-<div class="highlight">
-    <div class="copy-code-icon" style="text-align:right">
+<div class="highlight code-sample">
+    <div class="copy-code-icon">
     {{ with $ghlink }}<a href="{{ . }}" download="{{ $file }}">{{ end }}<code>{{ $file }}</code>
     {{ if $ghlink }}</a>{{ end }}
-    <img src="{{ "images/copycode.svg" | relURL }}" style="max-height:24px; cursor: pointer" onclick="copyCode('{{ $file | anchorize }}')" title="Copy {{ $file }} to clipboard">
-    </img>
+    {{- with resources.Get "images/copycode.svg" -}}
+    <img src="{{  .RelPermalink }}" class="icon-copycode" onclick="copyCode('{{ $file | anchorize }}')" title="Copy {{ $file }} to clipboard"></img>
+    {{- end -}}
     </div>
     <div class="includecode" id="{{ $file | anchorize }}">
     {{- highlight . $codelang "" -}}
     </div>
 </div>
-{{ end }}
+{{- end -}}
diff --git a/layouts/shortcodes/code_sample.html b/layouts/shortcodes/code_sample.html
index 08064fa3f3d57..11f7eb8112fa6 100644
--- a/layouts/shortcodes/code_sample.html
+++ b/layouts/shortcodes/code_sample.html
@@ -1,6 +1,6 @@
 {{ $p := .Page }}
 {{ $file := .Get "file" }}
-{{ $codelang := .Get "language" | default (path.Ext $file | strings.TrimPrefix ".") }} 
+{{ $codelang := .Get "language" | default (path.Ext $file | strings.TrimPrefix ".") }}
 {{ $fileDir := path.Split $file }}
 {{ $bundlePath := path.Join .Page.File.Dir $fileDir.Dir }}
 {{ $filename := printf "/content/%s/examples/%s" .Page.Lang $file | safeURL }}
@@ -18,15 +18,16 @@
 {{ errorf "[%s] %q not found in %q" site.Language.Lang $fileDir.File $bundlePath }}
 {{ end }}
 {{ with $.Scratch.Get "content" }}
-<div class="highlight">
-    <div class="copy-code-icon" style="text-align:right">
+<div class="highlight code-sample">
+    <div class="copy-code-icon">
     {{ with $ghlink }}<a href="{{ . }}" download="{{ $file }}">{{ end }}<code>{{ $file }}</code>
     {{ if $ghlink }}</a>{{ end }}
-    <img src="{{ "images/copycode.svg" | relURL }}" style="max-height:24px; cursor: pointer" onclick="copyCode('{{ $file | anchorize }}')" title="Copy {{ $file }} to clipboard">
-    </img>
+    {{- with resources.Get "images/copycode.svg" -}}
+    <img src="{{  .RelPermalink }}" class="icon-copycode" onclick="copyCode('{{ $file | anchorize }}')" title="Copy {{ $file }} to clipboard"></img>
+    {{- end -}}
     </div>
     <div class="includecode" id="{{ $file | anchorize }}">
     {{- highlight . $codelang "" -}}
     </div>
 </div>
-{{ end }}
+{{- end -}}
diff --git a/layouts/shortcodes/codenew.html b/layouts/shortcodes/codenew.html
index 08064fa3f3d57..11f7eb8112fa6 100644
--- a/layouts/shortcodes/codenew.html
+++ b/layouts/shortcodes/codenew.html
@@ -1,6 +1,6 @@
 {{ $p := .Page }}
 {{ $file := .Get "file" }}
-{{ $codelang := .Get "language" | default (path.Ext $file | strings.TrimPrefix ".") }} 
+{{ $codelang := .Get "language" | default (path.Ext $file | strings.TrimPrefix ".") }}
 {{ $fileDir := path.Split $file }}
 {{ $bundlePath := path.Join .Page.File.Dir $fileDir.Dir }}
 {{ $filename := printf "/content/%s/examples/%s" .Page.Lang $file | safeURL }}
@@ -18,15 +18,16 @@
 {{ errorf "[%s] %q not found in %q" site.Language.Lang $fileDir.File $bundlePath }}
 {{ end }}
 {{ with $.Scratch.Get "content" }}
-<div class="highlight">
-    <div class="copy-code-icon" style="text-align:right">
+<div class="highlight code-sample">
+    <div class="copy-code-icon">
     {{ with $ghlink }}<a href="{{ . }}" download="{{ $file }}">{{ end }}<code>{{ $file }}</code>
     {{ if $ghlink }}</a>{{ end }}
-    <img src="{{ "images/copycode.svg" | relURL }}" style="max-height:24px; cursor: pointer" onclick="copyCode('{{ $file | anchorize }}')" title="Copy {{ $file }} to clipboard">
-    </img>
+    {{- with resources.Get "images/copycode.svg" -}}
+    <img src="{{  .RelPermalink }}" class="icon-copycode" onclick="copyCode('{{ $file | anchorize }}')" title="Copy {{ $file }} to clipboard"></img>
+    {{- end -}}
     </div>
     <div class="includecode" id="{{ $file | anchorize }}">
     {{- highlight . $codelang "" -}}
     </div>
 </div>
-{{ end }}
+{{- end -}}

From 2b498d9bfb9a0276cd4b6a45f42172302c7e1a6e Mon Sep 17 00:00:00 2001
From: Tim Bannister <tim@scalefactory.com>
Date: Tue, 14 May 2024 01:06:55 +0100
Subject: [PATCH 2/3] Make tooltip localizable

Allow localizations to customize the tooltip for copying code samples to
the clipboard.
---
 data/i18n/en/en.toml                | 3 +++
 layouts/shortcodes/code.html        | 3 ++-
 layouts/shortcodes/code_sample.html | 3 ++-
 layouts/shortcodes/codenew.html     | 3 ++-
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/data/i18n/en/en.toml b/data/i18n/en/en.toml
index 80f1306f287e5..b16e8b6e042a6 100644
--- a/data/i18n/en/en.toml
+++ b/data/i18n/en/en.toml
@@ -68,6 +68,9 @@ other = "YouTube"
 [conjunction_1]
 other = "and"
 
+[copy_sample_to_clipboard]
+other = "Copy {{ .filename }} to clipboard"
+
 [cve_id]
 other = "CVE ID"
 
diff --git a/layouts/shortcodes/code.html b/layouts/shortcodes/code.html
index 11f7eb8112fa6..fda3a27f13ced 100644
--- a/layouts/shortcodes/code.html
+++ b/layouts/shortcodes/code.html
@@ -22,8 +22,9 @@
     <div class="copy-code-icon">
     {{ with $ghlink }}<a href="{{ . }}" download="{{ $file }}">{{ end }}<code>{{ $file }}</code>
     {{ if $ghlink }}</a>{{ end }}
+    {{- $copyTitle := T "copy_sample_to_clipboard" (dict "filename" $file) -}}
     {{- with resources.Get "images/copycode.svg" -}}
-    <img src="{{  .RelPermalink }}" class="icon-copycode" onclick="copyCode('{{ $file | anchorize }}')" title="Copy {{ $file }} to clipboard"></img>
+    <img src="{{  .RelPermalink }}" class="icon-copycode" onclick="copyCode('{{ $file | anchorize }}')" title="{{ $copyTitle }}"></img>
     {{- end -}}
     </div>
     <div class="includecode" id="{{ $file | anchorize }}">
diff --git a/layouts/shortcodes/code_sample.html b/layouts/shortcodes/code_sample.html
index 11f7eb8112fa6..fda3a27f13ced 100644
--- a/layouts/shortcodes/code_sample.html
+++ b/layouts/shortcodes/code_sample.html
@@ -22,8 +22,9 @@
     <div class="copy-code-icon">
     {{ with $ghlink }}<a href="{{ . }}" download="{{ $file }}">{{ end }}<code>{{ $file }}</code>
     {{ if $ghlink }}</a>{{ end }}
+    {{- $copyTitle := T "copy_sample_to_clipboard" (dict "filename" $file) -}}
     {{- with resources.Get "images/copycode.svg" -}}
-    <img src="{{  .RelPermalink }}" class="icon-copycode" onclick="copyCode('{{ $file | anchorize }}')" title="Copy {{ $file }} to clipboard"></img>
+    <img src="{{  .RelPermalink }}" class="icon-copycode" onclick="copyCode('{{ $file | anchorize }}')" title="{{ $copyTitle }}"></img>
     {{- end -}}
     </div>
     <div class="includecode" id="{{ $file | anchorize }}">
diff --git a/layouts/shortcodes/codenew.html b/layouts/shortcodes/codenew.html
index 11f7eb8112fa6..fda3a27f13ced 100644
--- a/layouts/shortcodes/codenew.html
+++ b/layouts/shortcodes/codenew.html
@@ -22,8 +22,9 @@
     <div class="copy-code-icon">
     {{ with $ghlink }}<a href="{{ . }}" download="{{ $file }}">{{ end }}<code>{{ $file }}</code>
     {{ if $ghlink }}</a>{{ end }}
+    {{- $copyTitle := T "copy_sample_to_clipboard" (dict "filename" $file) -}}
     {{- with resources.Get "images/copycode.svg" -}}
-    <img src="{{  .RelPermalink }}" class="icon-copycode" onclick="copyCode('{{ $file | anchorize }}')" title="Copy {{ $file }} to clipboard"></img>
+    <img src="{{  .RelPermalink }}" class="icon-copycode" onclick="copyCode('{{ $file | anchorize }}')" title="{{ $copyTitle }}"></img>
     {{- end -}}
     </div>
     <div class="includecode" id="{{ $file | anchorize }}">

From e2d9c4f1c5615adeabda97291839514afd997e2a Mon Sep 17 00:00:00 2001
From: Tim Bannister <tim@scalefactory.com>
Date: Tue, 14 May 2024 00:53:00 +0100
Subject: [PATCH 3/3] Add space around code snippet copy icon

---
 assets/scss/_custom.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
index 223900bf09146..5f8e91f6f21af 100644
--- a/assets/scss/_custom.scss
+++ b/assets/scss/_custom.scss
@@ -1412,4 +1412,5 @@ div.alert > em.javascript-required {
 .code-sample > .copy-code-icon {
   cursor: pointer;
   text-align: right;
+  padding: 0.2rem;
 }
\ No newline at end of file