mirror of
https://github.com/nunocoracao/blowfish.git
synced 2025-04-20 19:01:52 +02:00
Merge pull request #484 from mirceanton/feature-483-custom-alert
✨ Custom colors for alert shortcode
This commit is contained in:
Nuno Coração
GitHub
commit
0dafb5894d
2 changed files with 70 additions and 15 deletions
|
|
@ -15,30 +15,53 @@ In addition to all the [default Hugo shortcodes](https://gohugo.io/content-manag
|
|||
|
||||
`alert` outputs its contents as a stylised message box within your article. It's useful for drawing attention to important information that you don't want the reader to miss.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Parameter | Description |
|
||||
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| `icon` | **Optional.** the icon to display on the left side.<br>**Default:** `exclaimation triangle icon` (Check out the [icon shortcode](#icon) for more details on using icons.) |
|
||||
| `iconColor` | **Optional.** the color for the icon in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme . |
|
||||
| `cardColor` | **Optional.** the color for the card background in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme . |
|
||||
| `textColor` | **Optional.** the color for the text in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme . |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
The input is written in Markdown so you can format it however you please.
|
||||
|
||||
By default, the alert is presented with an exclaimation triangle icon. To change the icon, include the icon name in the shortcode. Check out the [icon shortcode](#icon) for more details on using icons.
|
||||
|
||||
**Example:**
|
||||
**Example 1:** No params
|
||||
|
||||
```md
|
||||
{{</* alert */>}}
|
||||
**Warning!** This action is destructive!
|
||||
{{</* /alert */>}}
|
||||
|
||||
{{</* alert "twitter" */>}}
|
||||
Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
|
||||
{{</* /alert */>}}
|
||||
```
|
||||
|
||||
{{< alert >}}
|
||||
**Warning!** This action is destructive!
|
||||
{{< /alert >}}
|
||||
|
||||
|
||||
**Example 2:** Unnamed param
|
||||
|
||||
```md
|
||||
{{</* alert "twitter" */>}}
|
||||
Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
|
||||
{{</* /alert */>}}
|
||||
```
|
||||
|
||||
{{< alert "twitter" >}}
|
||||
Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
|
||||
{{< /alert >}}
|
||||
|
||||
**Example 3:** Named params
|
||||
|
||||
```md
|
||||
{{</* alert icon="fire" cardColor="red" iconColor="black" textColor="white" */>}}
|
||||
This is an error!
|
||||
{{</* /alert */>}}
|
||||
```
|
||||
|
||||
{{< alert icon="fire" cardColor="red" iconColor="black" textColor="white" >}}
|
||||
This is an error!
|
||||
{{< /alert >}}
|
||||
|
||||
<br/><br/><br/>
|
||||
|
||||
## Article
|
||||
|
|
@ -101,7 +124,6 @@ Call to action
|
|||
|
||||
`carousel` is used to showcase multiple images in an interactive and visually appealing way. This allows a user to slide through multiple images while only taking up the vertical space of a single one. All images are displayed using the full width of the parent component and using one of the predefined aspect ratios of `16:9`, `21:9` or `32:9`.
|
||||
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Parameter | Description |
|
||||
| ------------- | ----------------------------------------------------------------------------------------------------------------- |
|
||||
|
|
@ -354,7 +376,6 @@ The `where` and `value` values are used in the following query `where .Site.Regu
|
|||
|
||||
{{< list title="Samples" limit=5 where="Type" value="sample">}}
|
||||
|
||||
|
||||
<br/><br/><br/>
|
||||
|
||||
## Mermaid
|
||||
|
|
|
|||
|
|
@ -1,8 +1,42 @@
|
|||
<div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
|
||||
<span class="text-primary-400 ltr:pr-3 rtl:pl-3 flex items-center">
|
||||
{{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }}
|
||||
{{ if .IsNamedParams }}
|
||||
{{ $.Scratch.Set "icon" (default "triangle-exclamation" (.Get "icon") ) }}
|
||||
{{ $.Scratch.Set "cardColor" (default "NULL" (.Get "cardColor") ) }}
|
||||
{{ $.Scratch.Set "iconColor" (default "NULL" (.Get "iconColor") ) }}
|
||||
{{ $.Scratch.Set "textColor" (default "NULL" (.Get "textColor") ) }}
|
||||
{{ else }}
|
||||
{{ $.Scratch.Set "icon" (default "triangle-exclamation" (.Get 0) ) }}
|
||||
{{ $.Scratch.Set "cardColor" "NULL" }}
|
||||
{{ $.Scratch.Set "iconColor" "NULL" }}
|
||||
{{ $.Scratch.Set "textColor" "NULL" }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
<div
|
||||
{{ if eq ($.Scratch.Get "cardColor") "NULL" }}
|
||||
class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900"
|
||||
{{ else }}
|
||||
class="flex px-4 py-3 rounded-md"
|
||||
style="background-color: {{ $.Scratch.Get "cardColor" }}"
|
||||
{{ end }}>
|
||||
|
||||
<span
|
||||
{{ if eq ($.Scratch.Get "iconColor") "NULL" }}
|
||||
class="text-primary-400 ltr:pr-3 rtl:pl-3 flex items-center"
|
||||
{{ else }}
|
||||
class="ltr:pr-3 rtl:pl-3 flex items-center"
|
||||
style="color: {{ $.Scratch.Get "iconColor" }}"
|
||||
{{ end }}>
|
||||
|
||||
{{ partial "icon.html" ($.Scratch.Get "icon") }}
|
||||
</span>
|
||||
<span class="dark:text-neutral-300">
|
||||
|
||||
<span
|
||||
{{ if eq ($.Scratch.Get "textColor") "NULL" }}
|
||||
class="dark:text-neutral-300"
|
||||
{{ else }}
|
||||
style="color: {{ $.Scratch.Get "textColor" }}"
|
||||
{{ end }}>
|
||||
|
||||
{{- .Inner | markdownify -}}
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue