diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md index 2b2f2a7a..d329d4e0 100644 --- a/exampleSite/content/docs/shortcodes/index.md +++ b/exampleSite/content/docs/shortcodes/index.md @@ -167,6 +167,24 @@ Blowfish also supports automatic conversion of images included using standard Ma {{< figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" >}} +## GitHub Card + +`github` allows you to quickly link a github repository, all while showing and updating in realtime stats about it, such as the number of stars and forks it has. + + +| Parameter | Description | +| --------- | ------------------------ | +| `repo` | [String] github repo in the format of `username/repo` | + + +**Example 1:** + +```md +{{}} +``` + +{{< github repo="nunocoracao/blowfish" >}} + ## Icon `icon` outputs an SVG icon and takes the icon name as its only parameter. The icon is scaled to match the current text size. @@ -185,45 +203,6 @@ Custom icons can be added by providing your own icon assets in the `assets/icons Icons can also be used in partials by calling the [icon partial]({{< ref "partials#icon" >}}). -## List -`List` will display a list of recent articles. This shortcode requires a limit value to constraint the list. Additionally, it supports a `where` and a `value` in order to filter articles by their parameters. Note that this shortcode will not display its parent page but it will count for the limit value. - - -| Parameter | Description | -| --------- | ------------------------------------------------------- | -| `limit` | **Required.** the number of recent articles to display. | -| `where` | the number of recent articles to display. | -| `value` | the number of recent articles to display. | - - - -**Example #1:** -```md -{{}} -``` - -{{< list limit=2 >}} - -**Example #2:** -```md -{{}} -``` - -{{< list limit=2 where="Type" value="sample">}} - - -## Swatches -`swatches` outputs a set of up to three different colors to showcase color elements like a color palette. This shortcode takes the `HEX` codes of each color and creates the visual elements for each. - -**Example** -```md -{{}} -``` - -**Output** -{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}} - - ## Katex The `katex` shortcode can be used to add mathematical expressions to article content using the KaTeX package. Refer to the online reference of [supported TeX functions](https://katex.org/docs/supported.html) for the available syntax. @@ -260,6 +239,33 @@ When life gives you lemons, make lemonade. When life gives you lemons, make lemonade. {{< /lead >}} +## List +`List` will display a list of recent articles. This shortcode requires a limit value to constraint the list. Additionally, it supports a `where` and a `value` in order to filter articles by their parameters. Note that this shortcode will not display its parent page but it will count for the limit value. + + +| Parameter | Description | +| --------- | ------------------------------------------------------- | +| `limit` | **Required.** the number of recent articles to display. | +| `where` | the number of recent articles to display. | +| `value` | the number of recent articles to display. | + + + +**Example #1:** +```md +{{}} +``` + +{{< list limit=2 >}} + +**Example #2:** +```md +{{}} +``` + +{{< list limit=2 where="Type" value="sample">}} + + ## Mermaid `mermaid` allows you to draw detailed diagrams and visualisations using text. It uses Mermaid under the hood and supports a wide variety of diagrams, charts and other output formats. @@ -286,6 +292,18 @@ B-->C[Profit] You can see some additional Mermaid examples on the [diagrams and flowcharts samples]({{< ref "diagrams-flowcharts" >}}) page. +## Swatches +`swatches` outputs a set of up to three different colors to showcase color elements like a color palette. This shortcode takes the `HEX` codes of each color and creates the visual elements for each. + +**Example** +```md +{{}} +``` + +**Output** +{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}} + + ## 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. @@ -367,29 +385,6 @@ consectetur adipiscing elit. {{< /typeit >}} -## GitHub Card - -[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. - - -| Parameter | Description | -| --------- | ------------------------ | -| `repor` | [String] github repo in the format of `username/repo` | - - - - - -**Example 1:** - -```md -{{}} -``` - -{{< github repo="nunocoracao/blowfish" >}} - ## Swiper `swiper` is used to showcase multiple images in a limited space, in an interactive and visually appealing way. It provides a standar swiper/slider/carousel feature, allowing the user to slide through multiple images while only taking up the vertical space of a single one. @@ -415,4 +410,4 @@ A good resource for testing your go glob string is [this url](https://www.digita {{}} ``` -{{< slider id="1" pattern="{abstract.jpg,featured.png}" >}} +{{< slider id="1" pattern="{abstract.jpg,featured.png}" >}} \ No newline at end of file diff --git a/exampleSite/resources/_gen/images/docs/shortcodes/abstract_hu684c0a32e4d0f58583128be29b348bb9_40710_0x300_resize_q75_box.jpg b/exampleSite/resources/_gen/images/docs/shortcodes/abstract_hu684c0a32e4d0f58583128be29b348bb9_40710_0x300_resize_q75_box.jpg new file mode 100644 index 00000000..42a7078f Binary files /dev/null and b/exampleSite/resources/_gen/images/docs/shortcodes/abstract_hu684c0a32e4d0f58583128be29b348bb9_40710_0x300_resize_q75_box.jpg differ diff --git a/exampleSite/resources/_gen/images/docs/shortcodes/featured_huccf4470440ae6b15644c014dfa031fdc_4868633_0x300_resize_box_3.png b/exampleSite/resources/_gen/images/docs/shortcodes/featured_huccf4470440ae6b15644c014dfa031fdc_4868633_0x300_resize_box_3.png new file mode 100644 index 00000000..f88d1ac4 Binary files /dev/null and b/exampleSite/resources/_gen/images/docs/shortcodes/featured_huccf4470440ae6b15644c014dfa031fdc_4868633_0x300_resize_box_3.png differ