diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md index 1483aace..a4ea6ac1 100644 --- a/exampleSite/content/docs/shortcodes/index.md +++ b/exampleSite/content/docs/shortcodes/index.md @@ -167,6 +167,7 @@ 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/)" >}} + ## Gallery `gallery` allows you to showcase multiple images at once, in a responsive manner with more varied and interesting layouts. @@ -187,6 +188,26 @@ In order to add images to the gallery, proceed as you normally would with `{{< f {{< figure src="featured.png" class="grid-item grid-w15" >}} {{< /gallery >}} + +## 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. @@ -205,45 +226,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. @@ -280,6 +262,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. @@ -306,6 +315,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. @@ -386,26 +407,3 @@ consectetur adipiscing elit. "Toto, I've a feeling we're not in Kansas anymore." The Wizard of Oz (1939) {{< /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" >}} \ No newline at end of file