Merge pull request #519 from hugo-fixit/obsidian-callouts

🎉 Feat: support extended alert syntax compatible with Obsidian Callouts min hugo version 0.134.1
hugo-fixit · Oct 10, 2024 · f738e4a · f738e4a
2 parents 19ceeb2 + 12cc5f7
commit f738e4a
Show file tree

Hide file tree

Showing 29 changed files with 298 additions and 144 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.132.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.132.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/_details.scss b/assets/css/_partials/_details.scss
@@ -1,40 +1,46 @@
 .details {
-  .details-summary {
+  > .details-summary {
     @include border-radius($global-border-radius);
 
     &:hover {
       cursor: pointer;
     }
-  }
 
-  i.details-icon {
-    color: $global-font-secondary-color;
-    @include transition(transform 0.2s ease);
+    i.details-icon {
+      color: $global-font-secondary-color;
+      @include transition(transform 0.2s ease);
 
-    [data-theme='dark'] & {
-      color: $global-font-secondary-color-dark;
+      [data-theme='dark'] & {
+        color: $global-font-secondary-color-dark;
+      }
     }
   }
 
-  .details-content {
+  > .details-content {
     max-height: 0;
     overflow-y: hidden;
     @include details-transition-open;
   }
 
   &.open {
-    .details-summary {
+    > .details-summary {
       @include border-radius($global-border-radius $global-border-radius 0 0);
-    }
 
-    i.details-icon {
-      @include transform(rotate(90deg));
+      i.details-icon {
+        @include transform(rotate(90deg));
+      }
     }
 
-    .details-content {
+    > .details-content {
       max-height: 100%;
       @include border-radius(0 0 $global-border-radius $global-border-radius);
       @include details-transition-close;
     }
   }
+
+  &.disabled {
+    > .details-summary {
+      cursor: default;
+    }
+  }
 }
diff --git a/assets/css/_partials/_maps/_admonition.scss b/assets/css/_partials/_maps/_admonition.scss
@@ -1,15 +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),
-  'tip' #00bfa5 rgba(0, 191, 165, 0.1),
-  'success' #00c853 rgba(0, 200, 83, 0.1),
-  'question' #64dd17 rgba(100, 221, 23, 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
@@ -16,6 +16,19 @@
 
   .admonition-content {
     padding: 0.5rem 0;
+
+    // for extended alert syntax
+    > p {
+      margin: 0;
+    }
+    // title-only alert
+    &:empty {
+      display: none;
+    }
+    // BUG of Hugo https://github.com/gohugoio/hugo/issues/12913
+    &:has(> p:only-child:empty) {
+      display: none;
+    }
   }
 
   i.icon {
@@ -30,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: $background-color;
-        background-color: opacify($background-color, 0.15);
-      }
-
-      &.open .admonition-title {
-        background-color: $background-color;
-      }
+  > .admonition-title {
+    border-bottom-color: var(--#{$prefix}admonition-bg-color);
+    background-color: var(--#{$prefix}admonition-bg-color-collapsed);
 
-      i.icon {
-        color: $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);
+  }
 
-        &.open .admonition-title {
-          background-color: $background-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)};
 
-        i.icon {
-          color: $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/assets/js/theme.js b/assets/js/theme.js
@@ -334,7 +334,7 @@ class FixIt {
   }
 
   initDetails(target = document) {
-    this.util.forEach(target.getElementsByClassName('details'), ($details) => {
+    this.util.forEach(target.querySelectorAll('.details:not(.disabled)'), ($details) => {
       const $summary = $details.querySelector('.details-summary');
       $summary.addEventListener('click', () => {
         $details.classList.toggle('open');

diff --git a/hugo.toml b/hugo.toml
@@ -135,7 +135,7 @@ enableEmoji = true
 [module]
   [module.hugoVersion]
     extended = true
-    min = "0.132.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/i18n/de.toml b/i18n/de.toml
@@ -187,6 +187,7 @@ caution = ""
 note = "Notiz"
 abstract = "Kurzfassung"
 info = "Info"
+todo = "Aufgabe"
 tip = "Tipp"
 success = "Erfolg"
 question = "Frage"

diff --git a/i18n/en.toml b/i18n/en.toml
@@ -186,6 +186,7 @@ caution = "Caution"
 note = "Note"
 abstract = "Abstract"
 info = "Info"
+todo = "Todo"
 tip = "Tip"
 success = "Success"
 question = "Question"

diff --git a/i18n/es.toml b/i18n/es.toml
@@ -187,6 +187,7 @@ caution = ""
 note = "Nota"
 abstract = "Resumen"
 info = "Información"
+todo = "Por hacer"
 tip = "Consejo"
 success = "Éxito"
 question = "Pregunta"

diff --git a/i18n/fr.toml b/i18n/fr.toml
@@ -186,6 +186,7 @@ caution = ""
 note = "Remarque"
 abstract = "Résumé"
 info = "Info"
+todo = "À faire"
 tip = "Astuce"
 success = "Succès"
 question = "Question"

diff --git a/i18n/hi.toml b/i18n/hi.toml
@@ -187,6 +187,7 @@ caution = ""
 note = "ध्यान दें"
 abstract = "सारांश"
 info = "जानकारी"
+todo = "करने के लिए"
 tip = "टिप"
 success = "सफलता"
 question = "प्रश्न"