From 455ecae53d69f110287b4aae9d33ca40d47f5f1a Mon Sep 17 00:00:00 2001 From: Mircea-Pavel ANTON Date: Wed, 25 Jan 2023 13:34:35 +0000 Subject: [PATCH 1/6] Customize alert shortcode --- layouts/shortcodes/alert.html | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/layouts/shortcodes/alert.html b/layouts/shortcodes/alert.html index 190c08c5..ef343828 100644 --- a/layouts/shortcodes/alert.html +++ b/layouts/shortcodes/alert.html @@ -1,8 +1,27 @@ +{{ $icon := default "triangle-exclamation" (.Get "icon") }} +{{ $cardColor := default "NULL" (.Get "cardColor") }} +{{ $iconColor := default "NULL" (.Get "iconColor") }} +{{ $textColor := default "NULL" (.Get "textColor") }} + +{{ if eq $cardColor "NULL" }}
+{{ else }} +
+{{ end }} + + {{ if eq $iconColor "NULL" }} - {{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }} + {{ else }} + + {{ end }} + {{ partial "icon.html" $icon }} + + {{ if eq $textColor "NULL" }} + {{ else }} + + {{ end }} {{- .Inner | markdownify -}}
From a92ca86201aab269b6955ef39068ff0eb0d53c86 Mon Sep 17 00:00:00 2001 From: Mircea-Pavel ANTON Date: Wed, 25 Jan 2023 13:34:41 +0000 Subject: [PATCH 2/6] Update documentation --- exampleSite/content/docs/shortcodes/index.md | 30 +++++++++++++++----- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md index 20c14147..91698303 100644 --- a/exampleSite/content/docs/shortcodes/index.md +++ b/exampleSite/content/docs/shortcodes/index.md @@ -19,24 +19,40 @@ 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:** ```md {{}} **Warning!** This action is destructive! {{}} - -{{}} -Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter. -{{}} ``` {{< alert >}} **Warning!** This action is destructive! {{< /alert >}} -  -{{< alert "twitter" >}} + +**Example 2:** + +```md +{{}} Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter. +{{}} +``` + +{{< alert icon="twitter" >}} +Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter. +{{< /alert >}} + +**Example 3:** + +```md +{{}} +This is an error! +{{}} +``` + +{{< alert icon="fire" cardColor="red" iconColor="black" textColor="white" >}} +This is an error! {{< /alert >}}


From 0a47bab73a91af1510404a894a4a780cb2264b24 Mon Sep 17 00:00:00 2001 From: Mircea-Pavel ANTON Date: Fri, 27 Jan 2023 00:00:22 +0000 Subject: [PATCH 3/6] Update docs --- exampleSite/content/docs/shortcodes/index.md | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md index 91698303..f9b1e7d2 100644 --- a/exampleSite/content/docs/shortcodes/index.md +++ b/exampleSite/content/docs/shortcodes/index.md @@ -15,9 +15,21 @@ 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. -The input is written in Markdown so you can format it however you please. + +| Parameter | Description | +| -------------- | -------------------------------------------------------- | +| `icon` | **Optional.** the icon to display on the left side. | +| `iconColor` | **Optional.** the color for the icon in basic CSS style. | +| `cardColor` | **Optional.** the color for the card background in basic CSS style. | +| `textColor` | **Optional.** the color for the text in basic CSS style. | + -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. +Notes: + +1. The colors can be either hex values (`#FFFFFF`) or color names (`white`). +2. By default, the colors for the card, icon and text are decided based on the current color theme. +3. 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. +4. The content of the alert is written in Markdown so you can format it however you please. **Example 1:** From 47b038a280b76ae6b78f061d68ddc3a021bd1a58 Mon Sep 17 00:00:00 2001 From: Mircea-Pavel ANTON Date: Fri, 27 Jan 2023 17:20:04 +0000 Subject: [PATCH 4/6] Update docs. --- exampleSite/content/docs/shortcodes/index.md | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md index f9b1e7d2..25680493 100644 --- a/exampleSite/content/docs/shortcodes/index.md +++ b/exampleSite/content/docs/shortcodes/index.md @@ -16,20 +16,15 @@ 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. -| Parameter | Description | -| -------------- | -------------------------------------------------------- | -| `icon` | **Optional.** the icon to display on the left side. | -| `iconColor` | **Optional.** the color for the icon in basic CSS style. | -| `cardColor` | **Optional.** the color for the card background in basic CSS style. | -| `textColor` | **Optional.** the color for the text in basic CSS style. | +| Parameter | Description | +| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `icon` | **Optional.** the icon to display on the left side.
**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.
Can be either hex values (`#FFFFFF`) or color names (`white`)
By default chosen based on the current color theme . | +| `cardColor` | **Optional.** the color for the card background in basic CSS style.
Can be either hex values (`#FFFFFF`) or color names (`white`)
By default chosen based on the current color theme . | +| `textColor` | **Optional.** the color for the text in basic CSS style.
Can be either hex values (`#FFFFFF`) or color names (`white`)
By default chosen based on the current color theme . | -Notes: - -1. The colors can be either hex values (`#FFFFFF`) or color names (`white`). -2. By default, the colors for the card, icon and text are decided based on the current color theme. -3. 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. -4. The content of the alert 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. **Example 1:** From 095a64b1507c170124d303f751fd291acb98b30c Mon Sep 17 00:00:00 2001 From: Mircea-Pavel ANTON Date: Fri, 27 Jan 2023 23:07:45 +0000 Subject: [PATCH 5/6] Update shortcode --- layouts/shortcodes/alert.html | 51 ++++++++++++++++++++++------------- 1 file changed, 33 insertions(+), 18 deletions(-) diff --git a/layouts/shortcodes/alert.html b/layouts/shortcodes/alert.html index ef343828..cae61671 100644 --- a/layouts/shortcodes/alert.html +++ b/layouts/shortcodes/alert.html @@ -1,27 +1,42 @@ -{{ $icon := default "triangle-exclamation" (.Get "icon") }} -{{ $cardColor := default "NULL" (.Get "cardColor") }} -{{ $iconColor := default "NULL" (.Get "iconColor") }} -{{ $textColor := default "NULL" (.Get "textColor") }} - -{{ if eq $cardColor "NULL" }} -
+{{ 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 }} - {{ if eq $iconColor "NULL" }} - + +
- {{ end }} - {{ partial "icon.html" $icon }} + class="flex px-4 py-3 rounded-md" + style="background-color: {{ $.Scratch.Get "cardColor" }}" + {{ end }}> + + + + {{ partial "icon.html" ($.Scratch.Get "icon") }} - {{ if eq $textColor "NULL" }} - - {{ else }} - - {{ end }} + + {{- .Inner | markdownify -}}
From e538cfc4fe578d0b366a464ab77d05f16d869b14 Mon Sep 17 00:00:00 2001 From: Mircea-Pavel ANTON Date: Fri, 27 Jan 2023 23:07:49 +0000 Subject: [PATCH 6/6] Update docs --- exampleSite/content/docs/shortcodes/index.md | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md index 25680493..e2806785 100644 --- a/exampleSite/content/docs/shortcodes/index.md +++ b/exampleSite/content/docs/shortcodes/index.md @@ -26,7 +26,7 @@ In addition to all the [default Hugo shortcodes](https://gohugo.io/content-manag The input is written in Markdown so you can format it however you please. -**Example 1:** +**Example 1:** No params ```md {{}} @@ -38,19 +38,19 @@ The input is written in Markdown so you can format it however you please. **Warning!** This action is destructive! {{< /alert >}} -**Example 2:** +**Example 2:** Unnamed param ```md -{{}} +{{}} Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter. {{}} ``` -{{< alert icon="twitter" >}} +{{< alert "twitter" >}} Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter. {{< /alert >}} -**Example 3:** +**Example 3:** Named params ```md {{}} @@ -124,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`. - | Parameter | Description | | ------------- | ----------------------------------------------------------------------------------------------------------------- | @@ -377,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">}} -


## Mermaid @@ -425,7 +423,7 @@ You can see some additional Mermaid examples on the [diagrams and flowcharts sam ## 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.