drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-06-20 07:21:29 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: allow enable/disable code block copy button (#331)

Browse Source 
* refactor: move codeblock to a partial component

* feat: add flags for code block copy button

* allow disable code copy button completely
* allow make the copy button always visible

* chore: run build:css
This commit is contained in:
Xin
2024-03-28 08:32:51 +01:00
committed by GitHub
parent 741a640b1a
commit d8351aa432
9 changed files with 76 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
layouts/_default/_markup/render-codeblock.html
View File

@ -1,25 +1,12 @@
{{- $class := .Attributes.class | default "" -}}
{{- $filename := .Attributes.filename | default "" -}}
{{- $lang := .Attributes.lang | default .Type -}}
{{- $copyCode := (T "copyCode") | default "Copy code" -}}
<div class="code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
{{- if $filename -}}
<div class="filename" dir="auto">{{ $filename }}</div>
{{- end -}}
{{- if transform.CanHighlight $lang -}}
<div>{{- highlight .Inner $lang .Options -}}</div>
{{- else -}}
<pre><code>{{ .Inner }}</code></pre>
{{- end -}}
<div class="hx-opacity-0 hx-transition group-hover/code:hx-opacity-100 hx-flex hx-gap-1 hx-absolute hx-m-[11px] hx-right-0 {{ if $filename }}hx-top-8{{ else }}hx-top-0{{ end }}">
<button
class="code-copy-btn hx-group/copybtn hx-transition-all active:hx-opacity-50 hx-bg-primary-700/5 hx-border hx-border-black/5 hx-text-gray-600 hover:hx-text-gray-900 hx-rounded-md hx-p-1.5 dark:hx-bg-primary-300/10 dark:hx-border-white/10 dark:hx-text-gray-400 dark:hover:hx-text-gray-50"
title="{{ $copyCode }}"
>
<div class="copy-icon group-[.copied]/copybtn:hx-hidden hx-pointer-events-none hx-h-4 hx-w-4"></div>
<div class="success-icon hx-hidden group-[.copied]/copybtn:hx-block hx-pointer-events-none hx-h-4 hx-w-4"></div>
</button>
</div>
<div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
{{ partial "components/codeblock" (dict "filename" $filename "lang" $lang "content" .Inner "options" .Options) }}
{{- if or (eq site.Params.highlight.copy.enable nil) (site.Params.highlight.copy.enable) }}
{{- partialCached "components/codeblock-copy-button" (dict "filename" $filename) $filename }}
{{ end }}
</div>

15
layouts/partials/components/codeblock-copy-button.html Normal file
View File

@ -0,0 +1,15 @@
{{/* TODO: remove filename variable */}}
{{- $filename := .filename | default "" -}}
{{- $display := site.Params.highlight.copy.display | default "hover" -}}
{{- $copyCode := (T "copyCode") | default "Copy code" -}}
<div class="hextra-code-copy-btn-container {{ if eq $display `hover` }}hx-opacity-0{{ end }} hx-transition group-hover/code:hx-opacity-100 hx-flex hx-gap-1 hx-absolute hx-m-[11px] hx-right-0 {{ if $filename }}hx-top-8{{ else }}hx-top-0{{ end }}">
<button
class="hextra-code-copy-btn hx-group/copybtn hx-transition-all active:hx-opacity-50 hx-bg-primary-700/5 hx-border hx-border-black/5 hx-text-gray-600 hover:hx-text-gray-900 hx-rounded-md hx-p-1.5 dark:hx-bg-primary-300/10 dark:hx-border-white/10 dark:hx-text-gray-400 dark:hover:hx-text-gray-50"
title="{{ $copyCode }}"
>
<div class="copy-icon group-[.copied]/copybtn:hx-hidden hx-pointer-events-none hx-h-4 hx-w-4"></div>
<div class="success-icon hx-hidden group-[.copied]/copybtn:hx-block hx-pointer-events-none hx-h-4 hx-w-4"></div>
</button>
</div>

13
layouts/partials/components/codeblock.html Normal file
View File

@ -0,0 +1,13 @@
{{ $filename := .filename | default "" -}}
{{ $lang := .lang | default "" }}
{{ $content := .content }}
{{ $options := .options | default (dict) }}
{{- if $filename -}}
<div class="filename" dir="auto">{{ $filename }}</div>
{{- end -}}
{{- if transform.CanHighlight $lang -}}
<div>{{- highlight $content $lang $options -}}</div>
{{- else -}}
<pre><code>{{ $content }}</code></pre>
{{- end -}}