Add support for callouts
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Melora Hugues 2023-10-01 13:40:45 +02:00
parent 07c8a13e2c
commit 8fcc303be2
4 changed files with 236 additions and 69 deletions

View file

@ -106,3 +106,9 @@ publishDir = "public"
name = "Resume" name = "Resume"
url = "https://resume.faercol.me" url = "https://resume.faercol.me"
weight = 40 weight = 40
[module]
[[module.imports]]
path = "github.com/hugomods/icons"
[[module.imports]]
path = "github.com/hugomods/icons/vendors/lucide"

8
go.mod Normal file
View file

@ -0,0 +1,8 @@
module git.faercol.me/faercol/hugo-relie
go 1.20
require (
github.com/hugomods/icons v0.6.0 // indirect
github.com/hugomods/icons/vendors/lucide v0.3.16 // indirect
)

4
go.sum Normal file
View file

@ -0,0 +1,4 @@
github.com/hugomods/icons v0.6.0 h1:G6RU93okhPPRDh/jqcew9gwkcYpSpg0rCBv4S6yUAFw=
github.com/hugomods/icons v0.6.0/go.mod h1:cIkSvK6W0q6N4U6n9KGz+QfRWQXAW0INd+1P31gPNGg=
github.com/hugomods/icons/vendors/lucide v0.3.16 h1:IQqgped/4DIe+FGe7u7W3pXcGCl9iztzUPi00rmt2UI=
github.com/hugomods/icons/vendors/lucide v0.3.16/go.mod h1:92fL24fAnTYWIAnq8i3UbWyeERFA/bupS2uhe8btB64=

View file

@ -0,0 +1,149 @@
{{ $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>