hugo/layouts/shortcodes/code-toggle.html

{{- /*
Renders syntax-highlighted configuration data in JSON, TOML, and YAML formats.

@param {string} config
  Section of site.Data.docs.config to render.
  Example: markup.highlight
  Default: ""
@param {bool} copy
  Display a copy button.
  Default: true
@param {string} file
  File name to display above the rendered code.
  Default: ""
@param {bool} fm
  Does Inner represent front matter?
  Default: false
@param {string} Inner
  Content between opening and closing shortcode tags.
  Default: ""
@param {bool} skipHeader
  Omit top level key(s) when rendering a section of site.Data.docs.config.
  Default: false
@returns {template.HTML}
*/ -}}

{{- /* Initialize. */ -}}
{{- $config := "" -}}
{{- $copy := true -}}
{{- $file := "" -}}
{{- $fm := false -}}
{{- $skipHeader := false -}}

{{- /* Get parameters, defend against string booleans. */ -}}
{{- if .Params -}}
  {{- $config = .Get "config" -}}
  {{- $file = .Get "file" -}}
  {{- if (isset .Params "copy") -}}
    {{- if in (slice true "true") (.Get "copy") -}}
      {{- $copy = true -}}
    {{- else -}}
      {{- $copy = false -}}
    {{- end -}}
  {{- end -}}
  {{- if (isset .Params "fm") -}}
    {{- if in (slice true "true") (.Get "fm") -}}
      {{- $fm = true -}}
    {{- else -}}
      {{- $fm = false -}}
    {{- end -}}
  {{- end -}}
  {{- if (isset .Params "skipHeader") -}}
    {{- if in (slice true "true") (.Get "skipHeader") -}}
      {{- $skipHeader = true -}}
    {{- else -}}
      {{- $skipHeader = false -}}
    {{- end -}}
  {{- end -}}
{{- end -}}

{{- /* Define constants. */ -}}
{{- $delimiters := dict "toml" "+++" "yaml" "---" -}}
{{- $langs := slice "yaml" "toml" "json" -}}
{{- $placeHolder := "#-hugo-placeholder-#" -}}

{{- /* Render. */ -}}
{{- $code := "" -}}
{{- with $config -}}
  {{- $file = $file | default "config" -}}
  {{- $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>