feat(admonition): add support for content-only alerts without titles (#683)

* feat(admonition): add support for content-only alerts without titles

* fix(admonition): improve title-only alert handling and styling

apps/test/content/posts/alert-and-admonition-test.md

@@ -39,7 +39,7 @@ This article comprehensively tests the **Alerts** Markdown syntax extension and
 > [!NOTE] FixIt
 > A clean, elegant but advanced Hugo theme.
 
-> [!TIP] This is a title-only alert
+> [!TIP] This is a title-only alert.
 
 ### Foldable Alerts
 
@@ -59,6 +59,11 @@ Alerts can be nested in multiple levels:
 > > [!todo] Yes! They can be nested.
 > > > [!example] You can even use multiple layers of nesting.
 
+### Content-only Alerts
+
+> [!TIP]~
+> This is a content-only alert without a title.
+
 ### Supported types
 
 > [!note]+

assets/css/_shortcodes/_admonition.scss

@@ -7,10 +7,11 @@
   @include border-radius($global-border-radius);
 
   .admonition-title {
-    font-weight: var(--admonition-title-font-weight, bold);
+    font-weight: var(#{$rootPrefix}admonition-title-font-weight, bold);
     margin: 0 -0.75rem;
     padding: 0.25rem 1.8rem;
     border-bottom: 1px solid;
+    position: relative;
     @include border-radius(0);
 
     strong {
@@ -22,8 +23,11 @@
       }
     }
 
-    &:has(+ .details-content > .admonition-content:empty) {
-      --admonition-title-font-weight: normal;
+    // title-only admonition without content
+    &:not(:has(+ .details-content)) {
+      #{$rootPrefix}admonition-title-font-weight: normal;
+      padding: 0.75rem 1rem 0.75rem 1.8rem;
+      border: 0;
     }
   }
 
@@ -34,10 +38,6 @@
     > p {
       margin: 0;
     }
-    // title-only alert
-    &:empty {
-      display: none;
-    }
 
     .code-block .code-header {
       top: initial !important;
@@ -47,14 +47,16 @@
   i.icon {
     font-size: 0.85rem;
     position: absolute;
-    top: 0.6rem;
-    left: 0.4rem;
+    top: 50%;
+    left: 0.9rem;
+    translate: -50% -50%;
   }
 
   i.details-icon {
     position: absolute;
-    top: 0.6rem;
-    right: 0.3rem;
+    top: 50%;
+    right: 0.9rem;
+    translate: 50% -50%;
   }
   
   background-color: var(#{$rootPrefix}admonition-bg-color);
@@ -92,4 +94,13 @@
   &:last-child {
     margin-bottom: 0.75rem;
   }
+
+  // content-only admonition without title
+  &:not(:has(.admonition-title)) {
+    border-left: 0;
+
+    .admonition-content {
+      padding: 0.75rem 0.25rem;
+    }
+  }
 }

layouts/_partials/plugin/admonition.html

@@ -46,20 +46,25 @@
 {{- $type = index $aliasMap $type | default $type | default "note" -}}
 {{- $icon := index $iconMap $type | default "fa-solid fa-pencil-alt" -}}
 {{- $title := .Title | default (T (printf "admonition.%v" $type)) | default (title $type) -}}
+{{- $titleless := eq .Title "~" -}}
 {{- $foldable := ne .Foldable false -}}
 
 <div class="details admonition {{ $type }}{{ if .Open | ne false }} open{{ end }}{{ if not $foldable }} disabled{{ end }}">
-  <div class="details-summary admonition-title">
-    {{- dict "Class" (add "icon fa-fw " $icon) | partial "plugin/icon.html" -}}
-    {{- $title | safeHTML -}}
-    {{- if $foldable -}}
-      {{- dict "Class" "details-icon fa-solid fa-angle-right fa-fw" | partial "plugin/icon.html" -}}
-    {{- end -}}
-  </div>
-  <div class="details-content">
-    <div class="admonition-content">
-      {{- .Text | safeHTML -}}
+  {{- if not $titleless }}
+    <div class="details-summary admonition-title">
+      {{- dict "Class" (add "icon fa-fw " $icon) | partial "plugin/icon.html" -}}
+      {{- $title | safeHTML -}}
+      {{- if $foldable -}}
+        {{- dict "Class" "details-icon fa-solid fa-angle-right fa-fw" | partial "plugin/icon.html" -}}
+      {{- end -}}
     </div>
-  </div>
+  {{- end }}
+  {{- with .Text -}}
+    <div class="details-content">
+      <div class="admonition-content">
+        {{- . | safeHTML -}}
+      </div>
+    </div>
+  {{- end }}
 </div>
 {{- /* EOF */ -}}