theme: support Obsidian styled alerts #903

exampleSite/config/_default/params.toml

@@ -454,16 +454,6 @@ disableMermaid = true
 # This can be overridden in the page's frontmatter.
 customMermaidURL = "" # "https://unpkg.com/mermaid/dist/mermaid.min.js"
 
-#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-# Notice
-# These options configure how notices are displayed.
-
-# Wether to add support for Relearn's additional notice styles
-# Default: false
-# If this value is set to false, GitHub's alerts extension also recognises
-# the additional Relearn styles like "info".
-disableBlockquoteNoticeSupport = false
-
 #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # OpenApi
 # These options configure how OpenAPI specifications are displayed.

exampleSite/content/basics/migration/_index.en.md

@@ -26,6 +26,8 @@ This document shows you what's new in the latest release and flags it with one o
 
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The [`notice` shortcode](shortcodes/notice) has a new parameter `expanded` to make the content collapsible.
 
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} If you are running Hugo {{% badge color="fuchsia" icon="fa-fw fab fa-hackerrank" title=" " %}}0.134.0{{% /badge %}} or later, the theme now supports [Obsidian styled alerts](cont/markdown#obsidian-styled-alerts).
+
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme has updated its Mermaid dependency to 11.1.0. This adds support for [packet](shortcodes/mermaid#packet) and [architecture](shortcodes/mermaid#architecture) diagrams.
 
 ---
@@ -38,7 +40,7 @@ This document shows you what's new in the latest release and flags it with one o
 
   If you dislike the new behavior, you can deactivate it by setting `disableAnchorScrolling=true` in your `hugo.toml`. See the [docs for further options](basics/customization#change-heading-anchor-behavior).
 
-- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} If you are running Hugo {{% badge color="fuchsia" icon="fa-fw fab fa-hackerrank" title=" " %}}0.132.0{{% /badge %}} or later, the theme is now capable to print [GitHub styled alerts](cont/markdown#alerts).
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} If you are running Hugo {{% badge color="fuchsia" icon="fa-fw fab fa-hackerrank" title=" " %}}0.132.0{{% /badge %}} or later, the theme is now capable to print [GitHub styled alerts](cont/markdown#github-styled-alerts).
 
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} To support new severity levels for GitHub styled alerts, all shortcodes that support severity levels with their `style` parameter were expanded with the new severities `caution` and `important` and the `color` parameter was expanded with `cyan` and `magenta`. Please note, that coloring and icons of severities may defer from the [display you see on GitHub](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts).
 

exampleSite/content/cont/markdown.en.md

@@ -38,10 +38,12 @@ If not otherwise noted, the shown examples adhere to the [Commonmark](https://co
 
 - {{% badge color="fuchsia" icon="fa-fw fab fa-hackerrank" %}}Hugo{{% /badge %}} [Hugo Extra Extension](https://github.com/gohugoio/hugo-goldmark-extensions?tab=readme-ov-file#extras-extension) supported by Hugo.
 
-- {{% badge color="#7dc903" icon="fa-fw fas fa-puzzle-piece" %}}Relearn{{% /badge %}} Extension specific to this theme.
+- {{% badge color="#7c3aed" icon="fa-fw far fa-gem" %}}Obsidian{{% /badge %}} Extension implemented by [Obsidian](https://obsidian.md/).
 
 - {{% badge color="orangered" icon="fa-fw fas fa-code" %}}HTML{{% /badge %}} If the [usage of HTML](https://gohugo.io/getting-started/configuration-markup/#rendererunsafe) is allowed, the theme supports styling for further HTML elements.
 
+- {{% badge color="#7dc903" icon="fa-fw fas fa-puzzle-piece" %}}Relearn{{% /badge %}} Extension specific to this theme.
+
 ## Paragraphs
 
 In Markdown your content usually spans the whole available document width. This is called a block. Blocks are always separated by whitespace to their adjacent blocks in the resulting document.
@@ -117,6 +119,8 @@ Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis in
 
 ## Blockquotes
 
+### Quotations
+
 For quoting blocks of content from another source within your document add `>` before any text you want to quote.
 
 Blockquotes can also be nested.
@@ -137,7 +141,7 @@ Blockquotes can also be nested.
 > Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.
 {{% /notice %}}
 
-## Alerts
+### GitHub Styled Alerts
 
 {{% badge color="darkgray" icon="fa-fw fab fa-github" %}}GFM{{% /badge %}} Since Hugo {{% badge color="fuchsia" icon="fa-fw fab fa-hackerrank" %}}0.132.0{{% /badge %}} [GitHub styled alerts](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) are also supported. Please note, that coloring and icons of severities may defer between GitHub and this theme.
 
@@ -183,6 +187,36 @@ If you are in need of more advanced options to style your alerts, use the [notic
 > Urgent info that needs immediate user attention to avoid problems.
 {{% /notice %}}
 
+### Obsidian Styled Alerts
+
+{{% badge color="#7c3aed" icon="fa-fw far fa-gem" %}}Obsidian{{% /badge %}} Since Hugo {{% badge color="fuchsia" icon="fa-fw fab fa-hackerrank" %}}0.134.0{{% /badge %}} [Obsidian styled alerts](https://help.obsidian.md/Editing+and+formatting/Callouts#Change+the+title) are also supported. Which enables configurable title text and expand/collapse.
+
+````md
+> [!tip] Callouts can have custom titles
+> Like this one.
+
+> [!tip] Title-only callout
+
+> [!note]- Are callouts foldable?
+> Yes! In a foldable callout, the contents are hidden when the callout is collapsed
+
+> [!note]+ Are callouts foldable?
+> Yes! In a foldable callout, the contents are hidden when the callout is collapsed
+````
+
+{{% notice style="code" icon="eye" title="Result" %}}
+> [!tip] Callouts can have custom titles
+> Like this one.
+
+> [!tip] Title-only callout
+
+> [!note]- Are callouts foldable?
+> Yes! In a foldable callout, the contents are hidden when the callout is collapsed
+
+> [!note]+ Are callouts foldable?
+> Yes! In a foldable callout, the contents are hidden when the callout is collapsed
+{{% /notice %}}
+
 ## Text Markers
 
 ### Bold

exampleSite/content/shortcodes/notice.en.md

@@ -11,9 +11,7 @@ It is all about the boxes.
 
 ## Usage
 
-While the examples are using shortcodes with named parameter you are free to use positional as well, use it as [GitHub styled alerts](/cont/markdown#alerts) or also call this shortcode from your own partials.
-
-Note that if you want to use GitHub styled alerts Markdown, this is only available starting with Hugo {{% badge color="fuchsia" icon="fa-fw fab fa-hackerrank" title=" " %}}0.132.0{{% /badge %}}. In this case no parameter from the below table are available.
+While the examples are using shortcodes with named parameter you are free to use positional as well, use it as [GitHub](/cont/markdown#github-styled-alerts) or [Obsidian](/cont/markdown#obsidian-styled-alerts) styled alerts and also call this shortcode from your own partials.
 
 {{< tabs groupid="shortcode-parameter">}}
 {{% tab title="markdown" %}}
@@ -68,19 +66,6 @@ It is all about the boxes.
 | **expanded**          |          | _&lt;empty&gt;_ | Whether to draw an expander and how the content is displayed.<br><br>- _&lt;empty&gt;_: the content is shown but not collapsible<br>- `true`: the expander is drawn and the content is initially shown<br>- `false`: the expander is drawn and the content is initially hidden |
 | _**&lt;content&gt;**_ |          | _&lt;empty&gt;_ | Arbitrary text to be displayed in box. |
 
-## Configuration
-
-If you are using [GitHub styled alerts](/cont/markdown#alerts), by default the theme also accepts alert levels like `info` not known to GitHub's implementation. If this interferes with your layout, you can turn this extension off by setting `disableBlockquoteNoticeSupport=true` in your `hugo.toml`.
-
-### Global Configuration File
-
-This example reflects the default configuration also used if you don't set anything explicitly.
-
-{{< multiconfig file=hugo >}}
-[params]
-  disableBlockquoteNoticeSupport = false
-{{< /multiconfig >}}
-
 ## Examples
 
 ### By Severity Using Markdown Syntax
@@ -130,11 +115,11 @@ This example reflects the default configuration also used if you don't set anyth
 A **primary** disclaimer
 {{%/* /notice */%}}
 
-{{%/* notice style="secondary" icon="stopwatch" */%}}
+{{%/* notice style="secondary" title="Secondary" */%}}
 A **secondary** disclaimer
 {{%/* /notice */%}}
 
-{{%/* notice style="accent" */%}}
+{{%/* notice style="accent" icon="stopwatch" */%}}
 An **accent** disclaimer
 {{%/* /notice */%}}
 ````
@@ -143,18 +128,18 @@ An **accent** disclaimer
 A **primary** disclaimer
 {{% /notice %}}
 
-{{% notice style="secondary" icon="stopwatch" %}}
+{{% notice style="secondary" title="Secondary" %}}
 A **secondary** disclaimer
 {{% /notice %}}
 
-{{% notice style="accent" %}}
+{{% notice style="accent" icon="stopwatch" %}}
 An **accent** disclaimer
 {{% /notice %}}
 
-### By Color with Title and Icon Variantion
+### By Color
 
 ````go
-{{%/* notice style="blue" */%}}
+{{%/* notice style="blue" title="Blue"*/%}}
 A **blue** disclaimer
 {{%/* /notice */%}}
 
@@ -178,12 +163,12 @@ A **magenta** disclaimer
 A **orange** disclaimer
 {{%/* /notice */%}}
 
-{{%/* notice style="red" */%}}
+{{%/* notice style="red" title="Red" */%}}
 A **red** disclaimer
 {{%/* /notice */%}}
 ````
 
-{{% notice style="blue" %}}
+{{% notice style="blue" title="Blue" %}}
 A **blue** disclaimer
 {{% /notice %}}
 
@@ -207,42 +192,46 @@ A **magenta** disclaimer
 A **orange** disclaimer
 {{% /notice %}}
 
-{{% notice style="red" %}}
+{{% notice style="red" title="Red" %}}
 A **red** disclaimer
 {{% /notice %}}
 
 ### By Special Color
 
-#### Default with Positional Parameter
-
 ````go
-{{%/* notice default "Pay Attention to this Note!" "skull-crossbones" */%}}
-Some serious information.
+{{%/* notice style="default" title="Default" icon="skull-crossbones" */%}}
+Just some grey default color.
 {{%/* /notice */%}}
-````
-
-{{% notice default "Pay Attention to this Note!" "skull-crossbones" %}}
-Some serious information.
-{{% /notice %}}
 
-#### Transparent with Title and Icon
+{{%/* notice style="code" title="Code" icon="skull-crossbones" */%}}
+Colored like a code fence.
+{{%/* /notice */%}}
 
-````go
-{{%/* notice style="transparent" title="Pay Attention to this Note!" icon="skull-crossbones" */%}}
-Some serious information.
+{{%/* notice style="transparent" title="Transparent" icon="skull-crossbones" */%}}
+No visible borders.
 {{%/* /notice */%}}
 ````
 
-{{% notice style="transparent" title="Pay Attention to this Note!" icon="skull-crossbones" %}}
-Some serious information.
+{{% notice style="default" title="Default" icon="skull-crossbones" %}}
+Just some grey default color.
+{{% /notice %}}
+
+{{% notice style="code" title="Code" icon="skull-crossbones" %}}
+Colored like a code fence.
+{{% /notice %}}
+
+{{% notice style="transparent" title="Transparent" icon="skull-crossbones" %}}
+No visible borders.
 {{% /notice %}}
 
 ### Various Features
 
 #### With User-Defined Color, Font Awesome Brand Icon and Markdown in Title and Content
 
 ````go
+{{%/* notice color="fuchsia" title="**Hugo** is _awesome_" icon="fa-fw fab fa-hackerrank" */%}}
 {{% include "shortcodes/include/INCLUDE_ME.md" %}}
+{{%/* /notice */%}}
 ````
 
 {{% notice color="fuchsia" title="**Hugo** is _awesome_" icon="fa-fw fab fa-hackerrank" %}}
@@ -252,26 +241,71 @@ Some serious information.
 #### Expandable Content Area
 
 ````go
-{{%/* notice style="primary" title="Expand me..." expanded="true" */%}}
+{{%/* notice style="green" title="Expand me..." expanded="true" */%}}
 No need to press you!
 {{%/* /notice */%}}
+
+{{%/* notice style="red" title="Expand me..." expanded="false" */%}}
+Thank you!
+{{%/* /notice */%}}
 ````
 
-{{% notice style="primary" title="Expand me..." expanded="true" %}}
+{{% notice style="green" title="Expand me..." expanded="true" %}}
 No need to press you!
 {{% /notice %}}
 
-````go
-{{%/* notice style="primary" title="Expand me..." expanded="false" */%}}
+{{% notice style="red" title="Expand me..." expanded="false" %}}
 Thank you!
+{{% /notice %}}
+
+#### No Content or No Title
+
+````go
+{{%/* notice style="accent" title="Just a bar" */%}}
+{{%/* /notice */%}}
+
+{{%/* notice style="accent" */%}}
+Just a box
 {{%/* /notice */%}}
 ````
 
-{{% notice style="primary" title="Expand me..." expanded="false" %}}
-Thank you!
+{{% notice style="accent" title="Just a bar" %}}
 {{% /notice %}}
 
-#### No Content
-
-{{% notice style="accent" title="Just a bar" %}}
+{{% notice style="accent" %}}
+Just a box
 {{% /notice %}}
+
+#### Obsidian Styled Alerts
+
+````go
+> [!tip] Callouts can have custom titles
+> Like this one.
+
+> [!tip] Title-only callout
+
+> [!note]- Are callouts foldable?
+> Yes! In a foldable callout, the contents are hidden when the callout is collapsed
+
+> [!note]+ Are callouts foldable?
+> Yes! In a foldable callout, the contents are hidden when the callout is collapsed
+
+> [!important] Can callouts be nested?
+> > [!note] Yes!, they can.
+> > > [!important]  You can even use multiple layers of nesting.
+````
+
+> [!tip] Callouts can have custom titles
+> Like this one.
+
+> [!tip] Title-only callout
+
+> [!note]- Are callouts foldable?
+> Yes! In a foldable callout, the contents are hidden when the callout is collapsed
+
+> [!note]+ Are callouts foldable?
+> Yes! In a foldable callout, the contents are hidden when the callout is collapsed
+
+> [!important] Can callouts be nested?
+> > [!note] Yes!, they can.
+> > > [!important]  You can even use multiple layers of nesting.

layouts/_default/_markup/render-blockquote.html

@@ -1,16 +1,19 @@
 {{- $alerttype := .AlertType }}
-{{- $text := .Text }}
-{{- if not site.Params.disableBlockquoteNoticeSupport }}
-  {{- range findRESubmatch "^(<p>)?\\[!(\\w+)\\]\\n(.*?)(</p>)?\\s*$" $text 1 }}
-    {{- $alerttype = lower (index . 2) }}
-    {{- $text = printf "%s%s%s" (index . 1) (index . 3) (index . 4) }}
-  {{- end }}
+{{- $alerttitle := "" }}
+{{- $alertsign := "" }}
+{{- $hugoVersion := "0.134.0" }}
+{{- if ge hugo.Version $hugoVersion }}
+  {{- $alerttitle = .AlertTitle }}
+  {{- $alertsign = .AlertSign }}
 {{- end }}
+{{- $text := .Text }}
 {{- if $alerttype }}
   {{- partial "shortcodes/notice.html" (dict
     "page" .Page
-    "style" $alerttype
     "content" $text
+    "style" $alerttype
+    "title" $alerttitle
+    "expanded" (cond (eq $alertsign "+") true (cond (eq $alertsign "-") false ""))
   ) }}
 {{- else }}
 <blockquote>

layouts/partials/shortcodes/notice.html

@@ -5,7 +5,7 @@
 {{- end }}
 {{- $color := .color | default "" }}
 {{- $content := .content }}
-{{- $hasContent := ne (trim $content " " ) "" }}
+{{- $hasContent := ne (strings.TrimLeft "<p>" (trim $content "\n\r\t ")) "" }}
 {{- $style := .style | default "default" }}
 {{- $title := .title }}
 {{- if not $title }}
@@ -44,23 +44,25 @@
 {{- end }}
 {{- $id := cond (or (eq .id nil) (eq .id "")) (partial "make-random-md5.hugo" $page) .id }}
 {{- with $page }}
+  {{- if or $icon $title $hasContent }}
 <div class="{{ if $expander }}expand {{ end }}box notices cstyle {{ $style }}"{{ if $color }} style="--VARIABLE-BOX-color: {{ $color }};"{{ end }}>
-  {{- if $expander }}
+    {{- if $expander }}
   <input type="checkbox" id="R-expand-{{ $id }}" aria-controls="R-expandcontent-{{ $id }}" {{ if $expanded }} checked{{ end }}>
   <label class="expand-label box-label" for="R-expand-{{ $id }}">
     <i class="expander-icon fa-fw fas fa-chevron-down"></i>
     <i class="expander-icon fa-fw fas fa-chevron-right"></i> {{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ $title | .RenderString }}
   </label>
   <div class="box-spacer"></div>
-  {{- else }}
+    {{- else if or $icon $title }}
   <div class="box-label">
     {{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ $title | .RenderString }}
   </div>
-  {{- end }}
-  {{- if $hasContent }}
+    {{- end }}
+    {{- if $hasContent }}
   <div{{ if $expander }} id="R-expandcontent-{{ $id }}"{{ end }} class="{{ if $expander }}expand-content {{ end }}box-content">
 {{ if ne "<" (substr (strings.TrimLeft "\n\r\t " $content) 0 1) }}<p>{{ end }}<!-- we add a DOM element here if there is none to make collapsing marings work -->
 {{ $content | safeHTML }}</div><!-- no line break allowed here because of awkward behavior of Hugo 110 or this theme when tag shortcode is called standalone outside of tags shortcode ? -->
-  {{- end }}
+    {{- end }}
 </div>
+  {{- end }}
 {{- end }}