templates/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2025-04-20 18:51:54 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #484 from mirceanton/feature-483-custom-alert

Browse source 
✨ Custom colors for alert shortcode
This commit is contained in:
Nuno Coração 2023-02-03 20:39:19 +00:00 • committed by GitHub
commit 0dafb5894d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 70 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
exampleSite/content/docs/shortcodes/index.md
View file

@ -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. `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. 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 1:** No params
**Example:**
```md ```md
{{</* alert */>}} {{</* alert */>}}
**Warning!** This action is destructive! **Warning!** This action is destructive!
{{</* /alert */>}} {{</* /alert */>}}
{{</* alert "twitter" */>}}
Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
{{</* /alert */>}}
``` ```
{{< alert >}} {{< alert >}}
**Warning!** This action is destructive! **Warning!** This action is destructive!
{{< /alert >}} {{< /alert >}}
&nbsp;
**Example 2:** Unnamed param
```md
{{</* alert "twitter" */>}}
Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
{{</* /alert */>}}
```
{{< alert "twitter" >}} {{< alert "twitter" >}}
Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter. Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
{{< /alert >}} {{< /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/> <br/><br/><br/>
## Article ## 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`. `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 --> <!-- prettier-ignore-start -->
| Parameter | Description | | 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">}} {{< list title="Samples" limit=5 where="Type" value="sample">}}
<br/><br/><br/> <br/><br/><br/>
## Mermaid ## Mermaid
@ -487,7 +508,7 @@ With other shortcodes
## TypeIt ## TypeIt
[TypeIt](https://www.typeitjs.com) is the most versatile JavaScript tool for creating typewriter effects on the planet. With a straightforward configuration, it allows you to type single or multiple strings that break lines, delete & replace each other, and it even handles strings that contain complex HTML. [TypeIt](https://www.typeitjs.com) is the most versatile JavaScript tool for creating typewriter effects on the planet. With a straightforward configuration, it allows you to type single or multiple strings that break lines, delete & replace each other, and it even handles strings that contain complex HTML.
Blowfish implements a sub-set of TypeIt features using a `shortcode`. Write your text within the `typeit` shortcode and use the following parameters to configure the behavior you want. Blowfish implements a sub-set of TypeIt features using a `shortcode`. Write your text within the `typeit` shortcode and use the following parameters to configure the behavior you want.

42
layouts/shortcodes/alert.html
View file

@ -1,8 +1,42 @@
<div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900"> {{ if .IsNamedParams }}
<span class="text-primary-400 ltr:pr-3 rtl:pl-3 flex items-center"> {{ $.Scratch.Set "icon" (default "triangle-exclamation" (.Get "icon") ) }}
{{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }} {{ $.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>
<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 -}} {{- .Inner | markdownify -}}
</span> </span>
</div> </div>