mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-10-27 02:33:18 +00:00
theme: support Obsidian styled alerts #903
This commit is contained in:
Sören Weber
parent
3ade47f1df
commit
0be4927452
6 changed files with 141 additions and 76 deletions
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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).
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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** | | _<empty>_ | Whether to draw an expander and how the content is displayed.<br><br>- _<empty>_: 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 |
|
||||
| _**<content>**_ | | _<empty>_ | 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,34 +192,36 @@ 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 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 */%}}
|
||||
````
|
||||
|
||||
{{% 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 %}}
|
||||
|
||||
#### 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 */%}}
|
||||
````
|
||||
|
||||
{{% 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 %}}
|
||||
|
||||
### Various Features
|
||||
|
|
@ -242,7 +229,9 @@ Some serious information.
|
|||
#### 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 %}}
|
||||
|
||||
{{% notice style="red" title="Expand me..." expanded="false" %}}
|
||||
Thank you!
|
||||
{{% /notice %}}
|
||||
|
||||
#### No Content or No Title
|
||||
|
||||
````go
|
||||
{{%/* notice style="primary" title="Expand me..." expanded="false" */%}}
|
||||
Thank you!
|
||||
{{%/* 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 %}}
|
||||
|
||||
#### No Content
|
||||
|
||||
{{% notice style="accent" title="Just a bar" %}}
|
||||
{{% /notice %}}
|
||||
|
||||
{{% 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.
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
Loading…
Reference in a new issue