From 8f8bcdefc01250152eae544603eae33952c45f15 Mon Sep 17 00:00:00 2001
From: Joe Mooring <joe.mooring@veriphor.com>
Date: Wed, 8 Dec 2021 18:51:26 -0800
Subject: [PATCH] Add frontmatter param to code-toggle shortcode (#1601)

Closes #1598
---
 layouts/shortcodes/code-toggle.html | 123 +++++++++++++++++++++-------
 1 file changed, 95 insertions(+), 28 deletions(-)

diff --git a/layouts/shortcodes/code-toggle.html b/layouts/shortcodes/code-toggle.html
index 6d4246052..113d85a1f 100644
--- a/layouts/shortcodes/code-toggle.html
+++ b/layouts/shortcodes/code-toggle.html
@@ -1,41 +1,108 @@
-{{ $file := .Get "file" }}
-{{ $code := "" }}
-{{ with .Get "config" }}
-  {{ $file = $file | default "config" }}
-  {{ $sections := (split . ".") }}
-  {{ $configSection := index $.Site.Data.docs.config $sections }}
-  {{ $code = dict $sections $configSection  }}
-  {{ if $.Get "skipHeader"}}
-    {{ $code = $configSection  }}
-  {{ end }}
-{{ else }}
-  {{ $code = $.Inner }}
-{{ end  }}
-{{ $langs := (slice "yaml" "toml" "json") }}
-<div class="code relative" {{ with $file }}id="{{ . | urlize}}"{{ end }}>
+{{- /*
+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 -}}
+    {{- 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">
+    {{- 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 }}
+    {{- end }}
   </div>
   <div class="tab-content">
-    {{ range $langs }}
-      <div data-pane="{{ . }}" class="code-copy-content nt3 tab-pane {{ cond (eq . "yaml") "active" ""}}">
-        {{ highlight ($code | transform.Remarshal . | replaceRE `\n+` "\n" | safeHTML) . "" }}
+    {{- 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 ne ($.Get "copy") "false" }}
+      {{- 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 }}
+        {{- /* 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>