website/layouts/shortcodes/editor.html at 32875ebfd67a17581a09699db6bfdb157a2eaab8 · sourcemeta/website · GitHub

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
{{- $filename := .Get "filename" -}}
{{- $type := .Get "type" -}}
{{- $language := .Get "language" -}}
{{- $details := split (.Get "details") "|" -}}
{{- $detailCount := len $details -}}

{{- $bgGradient := "" -}}
{{- $iconColor := "" -}}
{{- $icon := "" -}}
{{- $panelTitle := "" -}}

{{- if eq $type "fail" -}}
  {{- $bgGradient = "linear-gradient(135deg, #3d0a0a 0%, #1e1e1e 100%)" -}}
  {{- $iconColor = "text-danger" -}}
  {{- $icon = "bi-exclamation-triangle-fill" -}}
  {{- $panelTitle = "Problems" -}}
{{- else if eq $type "success" -}}
  {{- $bgGradient = "linear-gradient(135deg, #0a3d1a 0%, #1e1e1e 100%)" -}}
  {{- $iconColor = "text-success" -}}
  {{- $icon = "bi-check-circle-fill" -}}
  {{- $panelTitle = "Output" -}}
{{- end -}}

{{- $highlighted := transform.Highlight .Inner $language "" -}}

<div class="card border-0 shadow flex-grow-1 d-flex flex-column overflow-hidden" style="border-radius: 12px;">
  <div class="d-flex align-items-center px-3 py-2" style="background: #2d2d2d;">
    <div class="d-flex gap-1 me-3">
      <div class="rounded-circle" style="width: 12px; height: 12px; background: #ff5f56;"></div>
      <div class="rounded-circle" style="width: 12px; height: 12px; background: #ffbd2e;"></div>
      <div class="rounded-circle" style="width: 12px; height: 12px; background: #27c93f;"></div>
    </div>
    <span class="small text-white-50">{{ $filename }}</span>
  </div>
  <div class="card-body p-0 flex-grow-1 position-relative" style="min-height: 400px; background: {{ $bgGradient | safeCSS }};">
    <div class="position-relative h-100" style="font-size: 0.75rem; line-height: 1.6; overflow-x: auto;">
      {{ $highlighted | safeHTML }}
    </div>
  </div>
  <div class="border-0" style="background: #252526; border-top: 1px solid #3c3c3c;">
    <div class="px-3 py-2" style="background: #2d2d30; border-bottom: 1px solid #3c3c3c;">
      <small class="text-white-50 text-uppercase" style="font-size: 0.7rem; letter-spacing: 0.5px;">
        <i class="bi {{ $icon }} {{ $iconColor }} me-2"></i>{{ $panelTitle }} ({{ $detailCount }})
      </small>
    </div>
    <div class="p-3">
      {{ range $index, $detail := $details }}
      <div class="{{ if ne $index (sub $detailCount 1) }}mb-2 {{ end }}d-flex align-items-start">
        <i class="bi {{ if eq $type "fail" }}bi-x-circle-fill text-danger{{ else }}bi-check-circle-fill text-success{{ end }} me-2" style="font-size: 0.85rem; margin-top: 2px;"></i>
        <span class="small text-white-50">{{ $detail }}</span>
      </div>
      {{ end }}
    </div>
  </div>
</div>