hugo/layouts/shortcodes/code-toggle.html
Bjørn Erik Pedersen d3927310d5 Squashed 'docs/' changes from 39af43ef1..1798dc0d5
1798dc0d5 Update theme
403fa716e Update CLI documentation (#2092)
aade5a09e Correct media subtype example
53cd9dea6 netlify: Hugo 0.112.3
b78b86cb1 Add source/target warning to resources.Copy (#2091)
50c299729 netlify: Hugo 0.112.2
73197046f Change config.xxx to hugo.xxx throughout the documentation (#2090)
d489d4c6f Add hugo.WorkingDir to docs (#2089)
7487df809 Fix typos (#2088)
6d0572cd6 netlify: Hugo 0.112.1
6838600b2 netlify: Hugo 0.112.0
513e7a80f Merge branch 'tempv0.112.0'
91eb44275 Some more about 0.112.0
bd3b33a27 docs: Regen docshelper
fb3027daf docs: Regen CLI docs
8e7b8e987 Merge commit 'f96384a3b596f9bc0a3a035970b09b2c601f0ccb'
a942ceef4 tpl/tplimpl: Add img loading attribute to figure shortcode  (#10927)
0e0c7b25e tpl/urls: Return empty string when JoinPath has zero args
310ce949a tpl/urls: Add JoinPath template function
ae435ca77 tpl: Add math.Abs
f340139f8 Revert "Update syntax-highlighting.md (#10929)" (#10930)
917a0e24d Update syntax-highlighting.md (#10929)

git-subtree-dir: docs
git-subtree-split: 1798dc0d54ce048dd975863b490cd809ef14268a
2023-05-27 16:59:59 +02:00

87 lines
3.2 KiB
HTML

{{- /*
Renders syntax-highlighted configuration data in JSON, TOML, and YAML formats.
@param {string} [config] The section of site.Data.docs.config to render.
@param {bool} [copy=true] If true, display a copy to clipboard button.
@param {string} [file] The file name to display above the rendered code.
@param {bool} [fm=false] If true, render the code as front matter.
@param {bool} [skipHeader=false] If false, omit top level key(s) when rendering a section of site.Data.docs.config.
@returns {template.HTML}
*/}}
{{- /* Initialize. */}}
{{- $config := "" }}
{{- $copy := true }}
{{- $file := "" }}
{{- $fm := false }}
{{- $skipHeader := false }}
{{- /* Get parameters. */}}
{{- $config = .Get "config" }}
{{- $file = .Get "file" }}
{{- if in (slice "false" false 0) (.Get "copy") }}
{{- $copy = false }}
{{- else if in (slice "true" true 1) (.Get "copy")}}
{{- $copy = true }}
{{- end }}
{{- if in (slice "false" false 0) (.Get "fm") }}
{{- $fm = false }}
{{- else if in (slice "true" true 1) (.Get "fm")}}
{{- $fm = true }}
{{- end }}
{{- if in (slice "false" false 0) (.Get "skipHeader") }}
{{- $skipHeader = false }}
{{- else if in (slice "true" true 1) (.Get "skipHeader")}}
{{- $skipHeader = true }}
{{- end }}
{{- /* Define constants. */}}
{{- $delimiters := dict "toml" "+++" "yaml" "---" }}
{{- $langs := slice "yaml" "toml" "json" }}
{{- $placeHolder := "#-hugo-placeholder-#" }}
{{- /* Render. */}}
{{- $code := "" }}
{{- with $config }}
{{- $file = $file | default "hugo" }}
{{- $sections := (split . ".") }}
{{- $configSection := index $.Site.Data.docs.config $sections }}
{{- $code = dict $sections $configSection }}
{{- if $skipHeader }}
{{- $code = $configSection }}
{{- end }}
{{- else }}
{{- $code = $.Inner }}
{{- end }}
<div class="code relative" {{ with $file }}id="{{ . | urlize }}"{{ end }}>
<div class="code-nav flex flex-nowrap items-stretch">
{{- with $file }}
<div class="san-serif f6 dib lh-solid pl2 pv2 mr2">
{{ . }}{{ if not $fm }}.{{ end }}
</div>
{{- end }}
{{- range $langs }}
<button data-toggle-tab="{{ . }}" class="tab-button {{ cond (eq . "yaml") "active" "" }} ba san-serif f6 dib lh-solid ph2 pv2">
{{ . }}
</button>
&nbsp;
{{- end }}
</div>
<div class="tab-content">
{{- range $langs }}
<div data-pane="{{ . }}" class="code-copy-content nt3 tab-pane {{ cond (eq . "yaml") "active" "" }}">
{{- $hCode := $code | transform.Remarshal . }}
{{- if and $fm (in (slice "toml" "yaml") .) }}
{{- $hCode = printf "%s\n%s\n%s" $placeHolder $hCode $placeHolder }}
{{- end }}
{{- $hCode = $hCode | replaceRE `\n+` "\n" }}
{{ highlight $hCode . "" | replaceRE $placeHolder (index $delimiters .) | safeHTML }}
</div>
{{- if $copy }}
<button class="needs-js copy copy-toggle bg-accent-color-dark f6 absolute top-0 right-0 lh-solid hover-bg-primary-color-dark bn white ph3 pv2" title="Copy this code to your clipboard." data-clipboard-action="copy" aria-label="copy button"></button>
{{- /* Functionality located within filesaver.js The copy here is located in the css with .copy class so it can be replaced with JS on success */}}
{{- end }}
{{- end }}
</div>
</div>