diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md index 511e77dc..6ff5eb71 100644 --- a/exampleSite/content/docs/shortcodes/index.md +++ b/exampleSite/content/docs/shortcodes/index.md @@ -167,6 +167,26 @@ 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 + +[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 | +| --------- | ------------------------ | +| `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 +205,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 +241,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 +294,22 @@ B-->C[Profit] You can see some additional Mermaid examples on the [diagrams and flowcharts samples]({{< ref "diagrams-flowcharts" >}}) page. +## Screenshot + +TODO + +## 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. @@ -366,26 +390,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