Merge pull request #46362 from sftim/20240514_redo_code_sample

Redo code_sample shortcode
kubernetes · May 15, 2024 · b9475dc · b9475dc
2 parents d4b0776 + e2d9c4f
commit b9475dc
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 18 deletions.
diff --git a/static/images/copycode.svg → assets/images/copycode.svg b/static/images/copycode.svg → assets/images/copycode.svg
diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
@@ -1407,4 +1407,10 @@ div.alert > em.javascript-required {
   cursor: pointer;
   font-size: calc(5vw + 10px);
   color: #333;
+}
+
+.code-sample > .copy-code-icon {
+  cursor: pointer;
+  text-align: right;
+  padding: 0.2rem;
 }
diff --git 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
@@ -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,17 @@
 {{ 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>
+    {{- $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="{{ $copyTitle }}"></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
@@ -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,17 @@
 {{ 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>
+    {{- $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="{{ $copyTitle }}"></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
@@ -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,17 @@
 {{ 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>
+    {{- $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="{{ $copyTitle }}"></img>
+    {{- end -}}
     </div>
     <div class="includecode" id="{{ $file | anchorize }}">
     {{- highlight . $codelang "" -}}
     </div>
 </div>
-{{ end }}
+{{- end -}}