feat: add optional hint/admonition icons (#383)
BREAKING CHANGE: The types of the `hint` short code have been renamed to `[note|tip|important|caution|warning]` the old types `[info|ok|warning|danger]` are still working, but should be considered as deprecated.
BREAKING CHANGE: The `hint` short code is using named arguments now. You have to change, e.g. `{{< hint warning >}}` to `{{< hint type=warning >}}`.
This commit is contained in:
Robert Kaussow
GitHub
parent
1563cd228b
commit
f6966b8513
24 changed files with 310 additions and 35 deletions
|
|
@ -37,3 +37,8 @@ outputs:
|
|||
- HTML
|
||||
term:
|
||||
- HTML
|
||||
|
||||
security:
|
||||
exec:
|
||||
allow:
|
||||
- "^asciidoctor$"
|
||||
|
|
|
|||
29
exampleSite/content/en/asciidoc/admonition-icons.adoc
Normal file
29
exampleSite/content/en/asciidoc/admonition-icons.adoc
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
+++
|
||||
title = "Admonition Icons"
|
||||
+++
|
||||
|
||||
:icons: font
|
||||
|
||||
By default, the admonition is rendered with a plain text label. To enable font icons the document attribute `:icons: font` need to be set.
|
||||
|
||||
== Example
|
||||
|
||||
[NOTE]
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
|
||||
Ornateness bland it ex enc, est yeti am bongo detract re.
|
||||
|
||||
[TIP]
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
|
||||
Ornateness bland it ex enc, est yeti am bongo detract re.
|
||||
|
||||
[IMPORTANT]
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
|
||||
Ornateness bland it ex enc, est yeti am bongo detract re.
|
||||
|
||||
[CAUTION]
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
|
||||
Ornateness bland it ex enc, est yeti am bongo detract re.
|
||||
|
||||
[WARNING]
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
|
||||
Ornateness bland it ex enc, est yeti am bongo detract re.
|
||||
72
exampleSite/content/en/asciidoc/admonitions.adoc
Normal file
72
exampleSite/content/en/asciidoc/admonitions.adoc
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
+++
|
||||
title = "Admonitions"
|
||||
+++
|
||||
|
||||
:toc:
|
||||
:toclevels: 2
|
||||
|
||||
{{< toc >}}
|
||||
|
||||
== Admonition types
|
||||
|
||||
There are certain statements you may want to draw attention to by taking them out of the content's flow and labeling them with a priority. These are called admonitions.
|
||||
|
||||
```tpl
|
||||
[NOTE|TIP|IMPORTANT|CAUTION|WARNING]
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
|
||||
Ornateness bland it ex enc, est yeti am bongo detract re.
|
||||
```
|
||||
|
||||
=== Example
|
||||
|
||||
[NOTE]
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
|
||||
Ornateness bland it ex enc, est yeti am bongo detract re.
|
||||
|
||||
[TIP]
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
|
||||
Ornateness bland it ex enc, est yeti am bongo detract re.
|
||||
|
||||
[IMPORTANT]
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
|
||||
Ornateness bland it ex enc, est yeti am bongo detract re.
|
||||
|
||||
[CAUTION]
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
|
||||
Ornateness bland it ex enc, est yeti am bongo detract re.
|
||||
|
||||
[WARNING]
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
|
||||
Ornateness bland it ex enc, est yeti am bongo detract re.
|
||||
|
||||
|
||||
== Admonition icons
|
||||
|
||||
Icons can be added by setting a unicode glyph or a character reference to the `tip-caption` attribute:
|
||||
|
||||
```text
|
||||
:tip-caption: 💡
|
||||
|
||||
[TIP]
|
||||
It's possible to use Unicode glyphs as admonition icons.
|
||||
```
|
||||
|
||||
```text
|
||||
:tip-caption: pass:[🔥]
|
||||
|
||||
[TIP]
|
||||
It's possible to use Unicode glyphs as admonition icons.
|
||||
```
|
||||
|
||||
=== Example
|
||||
|
||||
:tip-caption: 💡
|
||||
|
||||
[TIP]
|
||||
It's possible to use Unicode glyphs as admonition icons.
|
||||
|
||||
|
||||
:tip-caption: pass:[🔥]
|
||||
|
||||
[TIP]
|
||||
It's possible to use Unicode glyphs as admonition icons.
|
||||
|
|
@ -3,11 +3,20 @@ title: Hints
|
|||
---
|
||||
|
||||
Hint shortcode can be used as hint/alerts/notification block.
|
||||
There are four colors to choose: `info`, `ok`, `warning` and `danger`.
|
||||
|
||||
Attributes:
|
||||
|
||||
| Name | Usage | default |
|
||||
| ---------------- | --------------------------------------------------------------------------------- | --------------------- |
|
||||
| type | color types to choose from | note |
|
||||
| icon (optional) | custom icon to use | undefined (type name) |
|
||||
| title (optional) | custom icon to use, need to be an icon from an [SVG sprite](/features/icon-sets/) | undefined (type name) |
|
||||
|
||||
Syntax:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
```tpl
|
||||
{{</* hint [info|ok|warning|danger] */>}}
|
||||
{{</* hint type=[note|tip|important|caution|warning] (icon=gdoc_github) (title=GitHub) */>}}
|
||||
**Markdown content**\
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
|
||||
Ornateness bland it ex enc, est yeti am bongo detract re.
|
||||
|
|
@ -17,26 +26,44 @@ Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclima
|
|||
|
||||
## Example
|
||||
|
||||
{{< hint info >}}
|
||||
{{< hint type=note >}}
|
||||
**Markdown content**\
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
|
||||
Ornateness bland it ex enc, est yeti am bongo detract re.
|
||||
{{< /hint >}}
|
||||
|
||||
{{< hint ok >}}
|
||||
{{< hint type=tip >}}
|
||||
**Markdown content**\
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
|
||||
Ornateness bland it ex enc, est yeti am bongo detract re.
|
||||
{{< /hint >}}
|
||||
|
||||
{{< hint warning >}}
|
||||
{{< hint type=important >}}
|
||||
**Markdown content**\
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
|
||||
Ornateness bland it ex enc, est yeti am bongo detract re.
|
||||
{{< /hint >}}
|
||||
|
||||
{{< hint danger >}}
|
||||
{{< hint type=caution >}}
|
||||
**Markdown content**\
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
|
||||
Ornateness bland it ex enc, est yeti am bongo detract re.
|
||||
{{< /hint >}}
|
||||
|
||||
{{< hint type=warning >}}
|
||||
**Markdown content**\
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
|
||||
Ornateness bland it ex enc, est yeti am bongo detract re.
|
||||
{{< /hint >}}
|
||||
|
||||
Example with a custom icon and title:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
<!-- spellchecker-disable -->
|
||||
{{< hint type=note icon=gdoc_github title=GitHub >}}
|
||||
**Markdown content**\
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
|
||||
Ornateness bland it ex enc, est yeti am bongo detract re.
|
||||
{{< /hint >}}
|
||||
<!-- spellchecker-enable -->
|
||||
<!-- prettier-ignore-end -->
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
height: 4rem;
|
||||
}
|
||||
|
||||
.icon-grid__line .icon {
|
||||
.icon-grid__line .gdoc-icon {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue