149 lines
3.9 KiB
HTML
149 lines
3.9 KiB
HTML
|
{{ $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>
|