File: code-toggle.html

package info (click to toggle)
hugo 0.155.2-1
  • links: PTS, VCS
  • area: main
  • in suites: sid
  • size: 43,600 kB
  • sloc: javascript: 31,879; ansic: 2,350; xml: 350; makefile: 196; sh: 110
file content (120 lines) | stat: -rw-r--r-- 4,557 bytes parent folder | download | duplicates (3)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
{{/* prettier-ignore-start */ -}}
{{- /*
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=false] Whether to display a copy-to-clipboard button.
@param {string} [dataKey] The section of site.Data.docs to render.
@param {string} [file] The file name to display above the rendered code.
@param {bool} [fm=false] Whether to render the code as front matter.
@param {bool} [skipHeader=false] Whether to omit top level key(s) when rendering a section of site.Data.docs.config.

@example  {{< code-toggle file=hugo config=build />}}

@example  {{< code-toggle file=content/example.md fm="true" }}
          title='Example'
          draft='false
          {{< /code-toggle }}
*/ -}}
{{/* prettier-ignore-end */ -}}
{{- /* Initialize. */}}
{{- $config := "" }}
{{- $copy := false }}
{{- $dataKey := "" }}
{{- $file := "" }}
{{- $fm := false }}
{{- $skipHeader := false }}

{{- /* Get parameters. */}}
{{- $config = .Get "config" }}
{{- $dataKey = .Get "dataKey" }}
{{- $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 := "" }}
{{- if $config }}
  {{- $file = $file | default "hugo" }}
  {{- $sections := (split $config ".") }}
  {{- $configSection := index $.Site.Data.docs.config $sections }}
  {{- $code = dict $sections $configSection }}
  {{- if $skipHeader }}
    {{- $code = $configSection }}
  {{- end }}
{{- else if $dataKey }}
  {{- $file = $file | default $dataKey }}
  {{- $sections := (split $dataKey ".") }}
  {{- $code = index $.Site.Data.docs $sections }}
{{- else }}
  {{- $code = $.Inner }}
{{- end }}


<div x-data class="shortcode-code not-prose relative p-0 mt-6 mb-8">
  {{- if $copy }}
    <svg
      class="absolute right-4 top-12 z-30 text-blue-600 hover:text-blue-500 cursor-pointer w-6 h-6"
      @click="$copy($refs[$store.nav.userSettings.settings.configFileType])">
      <use href="#icon--copy"></use>
    </svg>
  {{- end }}
  <nav class="relative flex" aria-label="Tabs">
    {{- with $file }}
      <div
        class="select-none flex-none text-sm px-2 content-center border-b-1 border-gray-300 dark:border-gray-700"
        aria-label="Filename">
        {{ . }}{{ if not $fm }}.{{ end }}
      </div>
    {{- end }}
    {{- range $i, $lang := $langs }}
      {{- $isLast := eq (add $i 1) (len $langs) }}
      <button
        x-on:click="$store.nav.userSettings.settings.configFileType = '{{ index $langs $i }}'"
        aria-label="{{ printf `Toggle %s` . }}"
        class="px-3 py-2 font-semibold text-black dark:text-slate-200 border-l-1 border-t-1 {{ if $isLast }}
          border-r-1
        {{ end }} border-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 dark:border-gray-700 cursor-pointer relative min-w-0 flex-1 overflow-hidden text-sm no-underline text-center focus:z-10 overflow-x-auto"
        :class="$store.nav.userSettings.settings.configFileType === '{{ index $langs $i }}' ? 'border-b-0 bg-light dark:bg-dark' : 'border-b-1'">
        <span class="select-none">
          {{ . }}
        </span>
      </button>
    {{- end }}
  </nav>
  {{- if $code }}
    {{- range $i, $lang := $langs }}
      <div
        class="max-h-96 overflow-y-auto border-l-1 border-b-1 border-r-1 border-gray-300 dark:border-gray-700"
        x-ref="{{ $lang }}"
        x-cloak
        x-transition:enter.opacity.duration.300ms
        x-show="$store.nav.userSettings.settings.configFileType === '{{ index $langs $i }}'">
        {{- $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>
    {{- end }}
  {{- end }}
</div>