{{ $type := .Get "type"}} {{ $iconName := "pencil" }} {{ $calloutTitle := $type | humanize }} {{ $calloutColorClass := "callout-blue"}} {{ if (eq $type "info") }} {{ $iconName = "info" }} {{ end }} {{ if (eq $type "note") }} {{ end }} {{ if (eq $type "warning") }} {{ $iconName = "alert-triangle" }} {{ $calloutTitle = "Warning" }} {{ $calloutColorClass = "callout-orange" }} {{ end }} {{ if (eq $type "summary") }} {{ $iconName = "clipboard-list" }} {{ $calloutTitle = "Summary" }} {{ $calloutColorClass = "callout-cyan" }} {{ end }} {{ if (eq $type "todo") }} {{ $iconName = "check-circle-2" }} {{ $calloutTitle = "TODO" }} {{ $calloutColorClass = "callout-blue" }} {{ end }} {{ if (eq $type "hint") }} {{ $iconName = "flame" }} {{ $calloutTitle = "Hint" }} {{ $calloutColorClass = "callout-cyan" }} {{ end }} {{ if (eq $type "success") }} {{ $iconName = "check" }} {{ $calloutTitle = "Done" }} {{ $calloutColorClass = "callout-green" }} {{ end }} {{ if (eq $type "help") }} {{ $iconName = "help-circle" }} {{ $calloutTitle = "Help" }} {{ $calloutColorClass = "callout-yellow" }} {{ end }} {{ if (eq $type "help") }} {{ $iconName = "help-circle" }} {{ $calloutTitle = "Help" }} {{ $calloutColorClass = "callout-yellow" }} {{ end }} {{ if (eq $type "fail") }} {{ $iconName = "x" }} {{ $calloutTitle = "Fail" }} {{ $calloutColorClass = "callout-red" }} {{ end }} {{ if (eq $type "danger") }} {{ $iconName = "zap" }} {{ $calloutTitle = "Danger" }} {{ $calloutColorClass = "callout-red" }} {{ end }} {{ if (eq $type "bug") }} {{ $iconName = "bug" }} {{ $calloutTitle = "Bug" }} {{ $calloutColorClass = "callout-red" }} {{ end }} {{ if (eq $type "example") }} {{ $iconName = "list" }} {{ $calloutTitle = "Example" }} {{ $calloutColorClass = "callout-purple" }} {{ end }} {{ if (eq $type "quote") }} {{ $iconName = "quote" }} {{ $calloutTitle = "Quote" }} {{ $calloutColorClass = "callout-grey" }} {{ end }} {{ $context := dict "vendor" "lucide" "name" $iconName "height" "1.5em" "width" "1.5em" }} <style> .callout-blue { --callout-color: var(--callout-color-blue); } .callout-cyan { --callout-color: var(--callout-color-cyan); } .callout-yellow { --callout-color: var(--callout-color-yellow); } .callout-orange { --callout-color: var(--callout-color-orange); } .callout-red { --callout-color: var(--callout-color-red); } .callout-grey { --callout-color: var(--callout-color-grey); } .callout-purple { --callout-color: var(--callout-color-purple); } .callout-green { --callout-color: var(--callout-color-green); } #callout { --callout-color-blue: 138, 173, 244; --callout-color-cyan: 125, 196, 228; --callout-color-yellow: 238, 212, 159; --callout-color-orange: 245, 169, 127; --callout-color-red: 237, 135, 150; --callout-color-grey: 158, 158, 158; --callout-color-purple: 198, 160, 246; --callout-color-green: 166, 218, 149; background-color: rgba(var(--callout-color), 0.1); border: 1px solid rgba(var(--callout-color), 0.6); padding: 1.5em 1.25em; border-radius: 5px; margin-bottom: 20px; } #callout-title { color: rgb(var(--callout-color)); margin-top: 0px; svg { margin-right: 5px; vertical-align: -0.125rem; } } @media (max-width: 767px) { #callout { padding: 1.5em 0.75em 1.5em 0.6em; } } </style> <div id="callout" class="{{ $type }} {{ $calloutColorClass }}"> <h4 id="callout-title">{{ partial "icons/icon" $context }} {{ $calloutTitle }}</h4> <div id="callout-inner"> {{ .Inner | markdownify }} </div> </div>