code-toggle.html (3633B)
1 {{- /*
2 Renders syntax-highlighted configuration data in JSON, TOML, and YAML formats.
3
4 @param {string} config
5 Section of site.Data.docs.config to render.
6 Example: markup.highlight
7 Default: ""
8 @param {bool} copy
9 Display a copy button.
10 Default: true
11 @param {string} file
12 File name to display above the rendered code.
13 Default: ""
14 @param {bool} fm
15 Does Inner represent front matter?
16 Default: false
17 @param {string} Inner
18 Content between opening and closing shortcode tags.
19 Default: ""
20 @param {bool} skipHeader
21 Omit top level key(s) when rendering a section of site.Data.docs.config.
22 Default: false
23 @returns {template.HTML}
24 */ -}}
25
26 {{- /* Initialize. */ -}}
27 {{- $config := "" -}}
28 {{- $copy := true -}}
29 {{- $file := "" -}}
30 {{- $fm := false -}}
31 {{- $skipHeader := false -}}
32
33 {{- /* Get parameters, defend against string booleans. */ -}}
34 {{- if .Params -}}
35 {{- $config = .Get "config" -}}
36 {{- $file = .Get "file" -}}
37 {{- if (isset .Params "copy") -}}
38 {{- if in (slice true "true") (.Get "copy") -}}
39 {{- $copy = true -}}
40 {{- else -}}
41 {{- $copy = false -}}
42 {{- end -}}
43 {{- end -}}
44 {{- if (isset .Params "fm") -}}
45 {{- if in (slice true "true") (.Get "fm") -}}
46 {{- $fm = true -}}
47 {{- else -}}
48 {{- $fm = false -}}
49 {{- end -}}
50 {{- end -}}
51 {{- if (isset .Params "skipHeader") -}}
52 {{- if in (slice true "true") (.Get "skipHeader") -}}
53 {{- $skipHeader = true -}}
54 {{- else -}}
55 {{- $skipHeader = false -}}
56 {{- end -}}
57 {{- end -}}
58 {{- end -}}
59
60 {{- /* Define constants. */ -}}
61 {{- $delimiters := dict "toml" "+++" "yaml" "---" -}}
62 {{- $langs := slice "yaml" "toml" "json" -}}
63 {{- $placeHolder := "#-hugo-placeholder-#" -}}
64
65 {{- /* Render. */ -}}
66 {{- $code := "" -}}
67 {{- with $config -}}
68 {{- $file = $file | default "config" -}}
69 {{- $sections := (split . ".") -}}
70 {{- $configSection := index $.Site.Data.docs.config $sections -}}
71 {{- $code = dict $sections $configSection -}}
72 {{- if $skipHeader -}}
73 {{- $code = $configSection -}}
74 {{- end -}}
75 {{- else -}}
76 {{- $code = $.Inner -}}
77 {{- end }}
78 <div class="code relative" {{ with $file }}id="{{ . | urlize }}"{{ end }}>
79 <div class="code-nav flex flex-nowrap items-stretch">
80 {{- with $file }}
81 <div class="san-serif f6 dib lh-solid pl2 pv2 mr2">
82 {{- . -}}{{- if not $fm -}}.{{- end -}}
83 </div>
84 {{- end -}}
85 {{- range $langs }}
86 <button data-toggle-tab="{{ . }}" class="tab-button {{ cond (eq . "yaml") "active" "" }} ba san-serif f6 dib lh-solid ph2 pv2">
87 {{ . }}
88 </button>
89
90 {{- end }}
91 </div>
92 <div class="tab-content">
93 {{- range $langs }}
94 <div data-pane="{{ . }}" class="code-copy-content nt3 tab-pane {{ cond (eq . "yaml") "active" "" }}">
95 {{- $hCode := $code | transform.Remarshal . -}}
96 {{- if and $fm (in (slice "toml" "yaml") .) -}}
97 {{- $hCode = printf "%s\n%s\n%s" $placeHolder $hCode $placeHolder -}}
98 {{- end -}}
99 {{- $hCode = $hCode | replaceRE `\n+` "\n" }}
100 {{ highlight $hCode . "" | replaceRE $placeHolder (index $delimiters .) | safeHTML }}
101 </div>
102 {{- if $copy }}
103 <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>
104 {{- /* 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 */ -}}
105 {{- end -}}
106 {{- end }}
107 </div>
108 </div>