Add support for callouts

.gitignore

@@ -2,3 +2,6 @@
 .hugo_build.lock
 **/_gen
 public
+
+# Vscode
+.vscode

config.toml

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

go.mod

@@ -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
+)

go.sum

@@ -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=

layouts/shortcodes/callout.html

@@ -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>

static/mermaid.css

@@ -0,0 +1,26 @@
+.mermaid {
+
+    .nodeLabel {
+        color: #A9A9B3 !important;
+    }
+
+    .edgePaths path {
+        stroke: #A9A9B3 !important;
+    }
+
+    .marker path {
+        stroke: #cad3f5;
+        fill: #A9A9B3;
+    }
+
+    .cluster rect {
+        fill: #1B1C1D !important;
+        stroke: #1F202E !important;
+    }
+
+    .node rect {
+        fill: #131415 !important;
+        stroke: #1F202E !important;
+    }
+
+}

themes/hello-friend-ng/layouts/_default/_markup/render-codeblock-mermaid.html

@@ -0,0 +1,4 @@
+<pre class="mermaid">
+    {{- .Inner | safeHTML }}
+  </pre>
+{{ .Page.Store.Set "hasMermaid" true }}

themes/hello-friend-ng/layouts/_default/baseof.html

@@ -1,10 +1,13 @@
 <!DOCTYPE html>
 <html lang="{{ .Site.Language }}">
+
 <head>
     {{ partial "head.html" . }}
+    <link rel="stylesheet" href="/mermaid.css">
 </head>
 
 {{ block "body" . }}
+
 <body>
     {{ end }}
 
@@ -22,4 +25,5 @@
 
     {{ partial "javascript.html" . }}
 </body>
+
 </html>

themes/hello-friend-ng/layouts/posts/single.html

@@ -3,7 +3,9 @@
 
   <div class="post-info">
     <p>
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+        class="feather feather-clock">
         <circle cx="12" cy="12" r="10"></circle>
         <polyline points="12 6 12 12 16 14"></polyline>
       </svg>
@@ -55,6 +57,13 @@
 
     <div class="post-content">
       {{ .Content }}
+      {{ if .Page.Store.Get "hasMermaid" }}
+      <script type="module">
+        import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
+        mermaid.initialize({ startOnLoad: true });
+      </script>
+      {{ end }}
+
     </div>
   </article>
 
@@ -65,7 +74,9 @@
     {{ partial "categories.html" . }}
 
     <p>
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+        class="feather feather-file-text">
         <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
         <polyline points="14 2 14 8 20 8"></polyline>
         <line x1="16" y1="13" x2="8" y2="13"></line>
@@ -76,7 +87,9 @@
     </p>
 
     <p>
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+        class="feather feather-calendar">
         <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
         <line x1="16" y1="2" x2="16" y2="6"></line>
         <line x1="8" y1="2" x2="8" y2="6"></line>
@@ -101,14 +114,18 @@
 
     {{- if .GitInfo }}
     <p>
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-commit">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+        class="feather feather-git-commit">
         <circle cx="12" cy="12" r="4"></circle>
         <line x1="1.05" y1="12" x2="7" y2="12"></line>
         <line x1="17.01" y1="12" x2="22.96" y2="12"></line>
       </svg>
 
-          <a href="{{ .Site.Params.gitUrl -}}{{ .GitInfo.Hash }}" target="_blank" rel="noopener">{{ .GitInfo.AbbreviatedHash }}</a>
+      <a href="{{ .Site.Params.gitUrl -}}{{ .GitInfo.Hash }}" target="_blank" rel="noopener">{{ .GitInfo.AbbreviatedHash
-          @ {{ if .Site.Params.dateformNum }}{{ dateFormat .Site.Params.dateformNum .GitInfo.AuthorDate.Local }}{{ else }}{{ dateFormat "2006-01-02" .GitInfo.AuthorDate.Local }}{{ end }}
+        }}</a>
+      @ {{ if .Site.Params.dateformNum }}{{ dateFormat .Site.Params.dateformNum .GitInfo.AuthorDate.Local }}{{ else }}{{
+      dateFormat "2006-01-02" .GitInfo.AuthorDate.Local }}{{ end }}
     </p>
     {{- end }}
   </div>