✨ Feat: add custom admonitions support

hugo 0.134.1
hugo-fixit · Oct 10, 2024 · 12cc5f7 · 12cc5f7
1 parent 39a48f3
commit 12cc5f7
Show file tree

Hide file tree

Showing 9 changed files with 142 additions and 73 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@
 # FixIt
 
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/hugo-fixit/FixIt?style=flat)](https://github.com/hugo-fixit/FixIt/releases)
-[![Hugo](https://img.shields.io/badge/Hugo-%5E0.134.0-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
+[![Hugo](https://img.shields.io/badge/Hugo-%5E0.134.1-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
 [![License](https://img.shields.io/github/license/hugo-fixit/FixIt?style=flat)](/LICENSE)
 [![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/hugo-fixit/FixIt)
 

diff --git a/README.zh-cn.md b/README.zh-cn.md
@@ -8,7 +8,7 @@
 # FixIt
 
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/hugo-fixit/FixIt?style=flat)](https://github.com/hugo-fixit/FixIt/releases)
-[![Hugo](https://img.shields.io/badge/Hugo-%5E0.134.0-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
+[![Hugo](https://img.shields.io/badge/Hugo-%5E0.134.1-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
 [![License](https://img.shields.io/github/license/hugo-fixit/FixIt?style=flat)](/LICENSE)
 [![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/hugo-fixit/FixIt)
 

diff --git a/assets/css/_partials/_maps/_admonition.scss b/assets/css/_partials/_maps/_admonition.scss
@@ -1,16 +1,55 @@
-// Color map of admonition [$type $color $background-color, ... ]
-$admonition-color-map:
-  'note' #448aff rgba(68, 138, 255, 0.1),
-  'abstract' #00b0ff rgba(0, 176, 255, 0.1),
-  'info' #00b8d4 rgba(0, 184, 212, 0.1),
-  'todo' #5e9aff rgba(94, 154, 255, 0.1),
-  'tip' #00bfa5 rgba(0, 191, 165, 0.1),
-  'success' #00c853 rgba(0, 200, 83, 0.1),
-  'question' #ffbd67 rgba(255, 190, 0, 0.1),
-  'warning' #ff9100 rgba(255, 145, 0, 0.1),
-  'failure' #ff5252 rgba(255, 82, 82, 0.1),
-  'danger' #ff1744 rgba(255, 23, 68, 0.1),
-  'bug' #f50057 rgba(245, 0, 87, 0.1),
-  'example' #651fff rgba(101, 31, 255, 0.1),
-  'quote' #9e9e9e rgba(159, 159, 159, 0.1)
-  !default;
+// Color map of admonitions
+$admonition-color-map: (
+  note: (
+    color: #448aff,
+    bg-color: rgba(68, 138, 255, 0.1),
+  ),
+  abstract: (
+    color: #00b0ff,
+    bg-color: rgba(0, 176, 255, 0.1),
+  ),
+  info: (
+    color: #00b8d4,
+    bg-color: rgba(0, 184, 212, 0.1),
+  ),
+  todo: (
+    color: #5e9aff,
+    bg-color: rgba(94, 154, 255, 0.1),
+  ),
+  tip: (
+    color: #00bfa5,
+    bg-color: rgba(0, 191, 165, 0.1),
+  ),
+  success: (
+    color: #00c853,
+    bg-color: rgba(0, 200, 83, 0.1),
+  ),
+  question: (
+    color: #ffbd67,
+    bg-color: rgba(255, 190, 0, 0.1),
+  ),
+  warning: (
+    color: #ff9100,
+    bg-color: rgba(255, 145, 0, 0.1),
+  ),
+  failure: (
+    color: #ff5252,
+    bg-color: rgba(255, 82, 82, 0.1),
+  ),
+  danger: (
+    color: #ff1744,
+    bg-color: rgba(255, 23, 68, 0.1),
+  ),
+  bug: (
+    color: #f50057,
+    bg-color: rgba(245, 0, 87, 0.1),
+  ),
+  example: (
+    color: #651fff,
+    bg-color: rgba(101, 31, 255, 0.1),
+  ),
+  quote: (
+    color: #9e9e9e,
+    bg-color: rgba(159, 159, 159, 0.1),
+  ),
+) !default;
diff --git a/assets/css/_partials/_maps/_alert.scss b/assets/css/_partials/_maps/_alert.scss
@@ -1,16 +1,46 @@
-// Color map of alert [$type $border-color $color, ... ]
-$alert-color-map:
-  'note' #0969da #0969da,
-  'tip' #1a7f37 #1a7f37,
-  'important' #8250df #8250df,
-  'warning' #bf8700 #9a6700,
-  'caution' #cf222e #d1242f,
-  !default;
+// Color map of basic alerts
+$alert-color-map: (
+  note: (
+    border-color: #0969da,
+    color: #0969da,
+  ),
+  tip: (
+    border-color: #1a7f37,
+    color: #1a7f37,
+  ),
+  important: (
+    border-color: #8250df,
+    color: #8250df,
+  ),
+  warning: (
+    border-color: #bf8700,
+    color: #9a6700,
+  ),
+  caution: (
+    border-color: #cf222e,
+    color: #d1242f,
+  ),
+) !default;
 
-$alert-color-map-dark:
-  'note' #316dca #478be6,
-  'tip' #347d39 #57ab5a,
-  'important' #8256d0 #986ee2,
-  'warning' #966600 #c69026,
-  'caution' #c93c37 #e5534b,
-  !default;
+$alert-color-map-dark: (
+  note: (
+    border-color: #316dca,
+    color: #478be6,
+  ),
+  tip: (
+    border-color: #347d39,
+    color: #57ab5a,
+  ),
+  important: (
+    border-color: #8256d0,
+    color: #986ee2,
+  ),
+  warning: (
+    border-color: #966600,
+    color: #c69026,
+  ),
+  caution: (
+    border-color: #c93c37,
+    color: #e5534b,
+  ),
+) !default;
diff --git a/assets/css/_partials/_single/_alert.scss b/assets/css/_partials/_single/_alert.scss
@@ -26,18 +26,18 @@
     }
   }
 
-  @each $type, $border-color, $color in $alert-color-map {
+  @each $type, $item in $alert-color-map {
     &.alert-#{$type} {
-      --#{$prefix}alert-border-color: #{$border-color};
-      --#{$prefix}alert-color: #{$color};
+      --#{$prefix}alert-border-color: #{map-get($item, border-color)};
+      --#{$prefix}alert-color: #{map-get($item, color)};
     }
   }
 
   [data-theme='dark'] & {
-    @each $type, $border-color, $color in $alert-color-map-dark {
+    @each $type, $item in $alert-color-map-dark {
       &.alert-#{$type} {
-        --#{$prefix}alert-border-color: #{$border-color};
-        --#{$prefix}alert-color: #{$color};
+        --#{$prefix}alert-border-color: #{map-get($item, border-color)};
+        --#{$prefix}alert-color: #{map-get($item, color)};
       }
     }
   }

diff --git a/assets/css/_shortcodes/_admonition.scss b/assets/css/_shortcodes/_admonition.scss
@@ -43,43 +43,35 @@
     top: 0.6rem;
     right: 0.3rem;
   }
+
+  background-color: var(--#{$prefix}admonition-bg-color);
+  border-left-color: var(--#{$prefix}admonition-color);
 
-  @each $type, $color, $background-color in $admonition-color-map {
-    @if $type == 'note' {
-      background-color: $background-color;
-      border-left-color: $color;
+  > .admonition-title {
+    border-bottom-color: var(--#{$prefix}admonition-bg-color);
+    background-color: var(--#{$prefix}admonition-bg-color-collapsed);
 
-      > .admonition-title {
-        border-bottom-color: $background-color;
-        background-color: opacify($background-color, 0.15);
-
-        i.icon {
-          color: $color;
-        }
-      }
-
-      &.open > .admonition-title {
-        background-color: $background-color;
-      }
+    i.icon {
+      color: var(--#{$prefix}admonition-color);
     }
-
-    @else {
-      &.#{$type} {
-        background-color: $background-color;
-        border-left-color: $color;
+  }
 
-        > .admonition-title {
-          border-bottom-color: $background-color;
-          background-color: opacify($background-color, 0.15);
+  &.open > .admonition-title {
+    background-color: var(--#{$prefix}admonition-bg-color);
+  }
 
-          i.icon {
-            color: $color;
-          }
-        }
+  // default admonition type is note
+  --#{$prefix}admonition-color: #{map-get(map-get($admonition-color-map, note), color)};
+  --#{$prefix}admonition-bg-color: #{map-get(map-get($admonition-color-map, note), bg-color)};
+  --#{$prefix}admonition-bg-color-collapsed: #{opacify(map-get(map-get($admonition-color-map, note), bg-color), 0.15)};
 
-        &.open > .admonition-title {
-          background-color: $background-color;
-        }
+  // set color for each admonition type
+  @each $type, $item in $admonition-color-map {
+    @if $type != 'note' {
+      &.#{$type} {
+        --#{$prefix}admonition-color: #{map-get($item, color)};
+        --#{$prefix}admonition-bg-color: #{map-get($item, bg-color)};
+        --#{$prefix}admonition-bg-color-collapsed: #{opacify(map-get($item, bg-color), 0.15)};
       }
     }
   }

diff --git a/hugo.toml b/hugo.toml
@@ -135,7 +135,7 @@ enableEmoji = true
 [module]
   [module.hugoVersion]
     extended = true
-    min = "0.134.0"
+    min = "0.134.1"
 
 # -------------------------------------------------------------------------------------
 # Markup related configuration in Hugo
@@ -679,6 +679,12 @@ enableEmoji = true
     # For values, see https://mermaid.js.org/config/theming.html#available-themes
     themes = ["default", "dark"]
 
+  # FixIt 0.3.13 | NEW Admonitions custom config
+  # See https://fixit.lruihao.cn/documentation/content-management/shortcodes/extended/admonition/#custom-admonitions
+  # syntax: <type> = <icon>
+  [params.admonition]
+    # ban = "fa-solid fa-ban"
+
   # FixIt 0.2.12 | NEW PanguJS config
   [params.pangu]
     # For Chinese writing

diff --git a/layouts/partials/plugin/admonition.html b/layouts/partials/plugin/admonition.html
@@ -6,7 +6,7 @@
   * @param {String} [.Title] the title of the admonition box
   * @param {Boolean} [.Open] whether the admonition box is open, default is true
   * @param {Boolean} [.Foldable] whether the admonition box is foldable, default is true
-  * TODO support customize admonitions by any .AlertType (add params to config iconMap)
+  * For custom admonitions, see https://fixit.lruihao.cn/documentation/content-management/shortcodes/extended/admonition/#customize-admonitions
 */ -}}
 
 {{- $iconMap := dict
@@ -24,6 +24,8 @@
   "example" "fa-solid fa-list-ul"
   "quote" "fa-solid fa-quote-right"
 -}}
+{{- /* Custom admonitions */ -}}
+{{- $iconMap = site.Params.admonition | merge $iconMap -}}
 {{- $aliasMap := dict
   "summary" "abstract"
   "tldr" "abstract"

diff --git a/theme.toml b/theme.toml
@@ -7,7 +7,7 @@ licenselink = "https://github.com/hugo-fixit/FixIt/blob/master/LICENSE"
 description = "A Clean, Elegant but Advanced Hugo Theme for Hugo."
 homepage = "https://github.com/hugo-fixit/FixIt"
 demosite = "https://fixit.lruihao.cn"
-min_version = "0.134.0"
+min_version = "0.134.1"
 
 tags = [
   "blog",