hugo: use render hook for callouts

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>

assets/css/callouts.css

@@ -1,70 +0,0 @@
-/* callouts = blockquotes with classes
- *
- * Note: the left border is set using a custom property
- * in tailwind.config.js
- *
- * */
-
-@layer components {
-  .prose blockquote {
-    @apply bg-blue-light-100 px-6 py-4 font-normal not-italic dark:bg-blue-dark-100;
-    quotes: none;
-    > *:first-child {
-      @apply relative ml-6 mt-0;
-      &:before {
-        @apply bg-black dark:bg-white;
-        position: absolute;
-        display: block;
-        margin-left: -24px;
-        margin-top: 4px;
-        width: 20px;
-        height: 20px;
-        mask-image: url('/icons/info-fill.svg');
-        -webkit-mask-image: url('/icons/info-fill.svg');
-        mask-repeat: no-repeat;
-        mask-size: cover;
-      }
-    }
-    *:last-child {
-      @apply mb-0 after:content-none;
-    }
-
-    &.warning {
-      @apply border-l-red-light bg-red-light-100 dark:border-l-red-dark dark:bg-red-dark-100;
-      > *:first-child:before {
-        mask-image: url('/icons/dangerous-fill.svg');
-        -webkit-mask-image: url('/icons/dangerous-fill.svg');
-      }
-    }
-
-    &.important {
-      @apply border-l-amber-light bg-amber-light-100 dark:border-l-amber-dark dark:bg-amber-dark-100;
-      > *:first-child:before {
-        mask-image: url('/icons/warning-fill.svg');
-        -webkit-mask-image: url('/icons/warning-fill.svg');
-      }
-    }
-
-    &.tip {
-      @apply border-l-green-light bg-green-light-100 dark:border-l-green-dark dark:bg-green-dark-100;
-      > *:first-child:before {
-        mask-image: url('/icons/lightbulb-fill.svg');
-        -webkit-mask-image: url('/icons/lightbulb-fill.svg');
-      }
-    }
-
-    &.experimental {
-      > *:first-child:before {
-        mask-image: url('/icons/science-fill.svg');
-        -webkit-mask-image: url('/icons/science-fill.svg');
-      }
-    }
-    &.restricted {
-      @apply border-l-violet-light bg-violet-light-100 dark:border-l-violet-dark dark:bg-violet-dark-100;
-      > *:first-child:before {
-        mask-image: url('/icons/rocket_launch-fill.svg');
-        -webkit-mask-image: url('/icons/rocket_launch-fill.svg');
-      }
-    }
-  }
-}

assets/css/styles.css

@@ -8,7 +8,6 @@
 @import "tailwindcss/components";
 @import "/assets/css/code";
 @import "/assets/css/toc";
-@import "/assets/css/callouts";
 @import "/assets/css/kapa";
 
 @import "tailwindcss/utilities";

hugo_stats.json

@@ -42,10 +42,13 @@
       "Editor-or-IDE",
       "Entra-ID",
       "Entra-ID-SAML-2.0",
+      "External-cloud-storage",
       "Fedora",
       "For-Mac-with-Apple-silicon",
       "For-Mac-with-Intel-chip",
       "For-all-platforms",
+      "From-the-GUI",
+      "From-the-command-line",
       "GUI",
       "Git-Bash",
       "Git-Bash-CLI",
@@ -58,14 +61,14 @@
       "Hub",
       "Hyper-V-backend-x86_64",
       "Inline",
-      "Install-from-the-command-line",
-      "Install-interactively",
       "JSON",
       "Java",
       "JavaScript",
       "Jenkins",
       "Latest",
       "Linux",
+      "Local-or-Hub-storage",
+      "MDM",
       "Mac",
       "Mac-/-Linux",
       "Mac-/-Linux-/-Git-Bash",
@@ -94,6 +97,7 @@
       "Run-Ollama-in-a-container",
       "Run-Ollama-outside-of-a-container",
       "Shell",
+      "Shell-script",
       "Specific-version",
       "Svelte",
       "Travis-CI",
@@ -165,6 +169,7 @@
       "border-divider-light",
       "border-gray-light-100",
       "border-gray-light-200",
+      "border-l-4",
       "bottom-0",
       "box-content",
       "build-push-action",
@@ -229,7 +234,6 @@
       "drop-shadow",
       "drop-shadow-sm",
       "duration-300",
-      "experimental",
       "fill-blue-light",
       "fixed",
       "flex",
@@ -288,7 +292,6 @@
       "icon-sm",
       "icon-svg",
       "important",
-      "information",
       "inline",
       "inset-0",
       "invertible",
@@ -403,7 +406,6 @@
       "py-4",
       "py-8",
       "relative",
-      "restricted",
       "right-0",
       "right-3",
       "right-8",

i18n/en.yaml

@@ -9,6 +9,15 @@ tableOfContents:
 relatedContent:
   other: Related content
 
+## callout titles:
+
+experimental: Experimental
+restricted: Restricted
+important: Important
+note: Note
+tip: Tip
+warning: Warning
+
 ## openapi strings:
 
 apiExampleResponse:

layouts/_default/_markup/render-blockquote.html

@@ -0,0 +1,41 @@
+{{- $icons := dict
+  "caution" "dangerous"
+  "important" "report"
+  "note" "info"
+  "tip" "lightbulb"
+  "warning" "warning"
+}}
+{{- $borders := dict
+  "caution" "border-red-light dark:border-red-dark"
+  "important" "border-violet-light dark:border-violet-dark"
+  "note" "border-blue-light dark:border-blue-dark"
+  "tip" "border-green-light dark:border-green-dark"
+  "warning" "border-amber-light dark:border-amber-dark"
+}}
+{{- $textColors := dict
+  "caution" "text-red-light dark:text-red-dark"
+  "important" "text-violet-light dark:text-violet-dark"
+  "note" "text-blue-light dark:text-blue-dark"
+  "tip" "text-green-light dark:text-green-dark"
+  "warning" "text-amber-light dark:text-amber-dark"
+}}
+
+{{ if eq .Type "alert" }}
+  <blockquote
+    {{ with .Attributes.id }}id="{{ . }}"{{ end }}
+    class="px-4 border-l-4 {{ index $borders .AlertType }}">
+    <p class="flex gap-2 items-center {{ index $textColors .AlertType }}">
+      <span class="icon-svg pb-1">{{ $i := index $icons .AlertType }}
+        {{ partialCached "icon.html" $i $i }}
+      </span>
+      <strong>{{ or (i18n .AlertType) (title .AlertType) }}</strong>
+    </p>
+    {{ .Text | safeHTML }}
+  </blockquote>
+{{ else }}
+<blockquote
+  {{ with .Attributes.id }}id="{{ . }}"{{ end }}
+  class="px-4 border-l-4 text-gray-light dark:text-gray-dark">
+    {{ .Text | safeHTML }}
+  </blockquote>
+{{ end }}

layouts/partials/head.html

@@ -85,4 +85,3 @@
   | js.Build (dict "minify" true "targetPath" "scripts.js")
 }}
 <script defer src="{{ $js.Permalink }}"></script>
-{{ partialCached "utils/resources.html" "-" }}

layouts/partials/utils/resources.html

@@ -1,11 +0,0 @@
-{{/* meta partial for publishing resources */}}
-{{ $icons := slice }}
-{{ $icons = $icons | append (resources.Get "icons/info-fill.svg") }}
-{{ $icons = $icons | append (resources.Get "icons/dangerous-fill.svg") }}
-{{ $icons = $icons | append (resources.Get "icons/warning-fill.svg") }}
-{{ $icons = $icons | append (resources.Get "icons/lightbulb-fill.svg") }}
-{{ $icons = $icons | append (resources.Get "icons/science-fill.svg") }}
-{{ $icons = $icons | append (resources.Get "icons/rocket_launch-fill.svg") }}
-{{ range $icons }}
-  {{ .Publish}}
-{{ end }}

tailwind.config.js

@@ -12,6 +12,9 @@ module.exports = {
             'pre code': false,
             'code::before': false,
             'code::after': false,
+            blockquote: false,
+            'blockquote p:first-of-type::before': false,
+            'blockquote p:last-of-type::after': false,
             // light colors for prose
             "--tw-prose-body": theme("colors.black"),
             "--tw-prose-headings": theme("colors.black"),
@@ -21,8 +24,6 @@ module.exports = {
             "--tw-prose-counters": theme("colors.black"),
             "--tw-prose-bullets": theme("colors.black"),
             "--tw-prose-hr": theme("colors.divider.light"),
-            "--tw-prose-quotes": theme("colors.black"),
-            "--tw-prose-quote-borders": theme("colors.blue.light.500"),
             "--tw-prose-captions": theme("colors.gray.light.600"),
             "--tw-prose-th-borders": theme("colors.gray.light.200"),
             "--tw-prose-td-borders": theme("colors.gray.light.200"),
@@ -36,8 +37,6 @@ module.exports = {
             "--tw-prose-invert-counters": theme("colors.white"),
             "--tw-prose-invert-bullets": theme("colors.white"),
             "--tw-prose-invert-hr": theme("colors.divider.dark"),
-            "--tw-prose-invert-quotes": theme("colors.white"),
-            "--tw-prose-invert-quote-borders": theme("colors.blue.dark.500"),
             "--tw-prose-invert-captions": theme("colors.gray.dark.600"),
             "--tw-prose-invert-th-borders": theme("colors.gray.dark.200"),
             "--tw-prose-invert-td-borders": theme("colors.gray.dark.200"),