mermaid usage

#

It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

https://mermaid.js.org/intro/

Youtube

#

Alert

#

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.

Example 1: No params

{{< alert >}}
**Warning!** This action is destructive!
{{< /alert >}}

Example 2: Unnamed param

{{< alert "twitter" >}}
Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
{{< /alert >}}

Example 3: Named params

{{< alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" >}}
This is an error!
{{< /alert >}}

Article

#

Article will embed a single article into a markdown file. The link to the file should be the .RelPermalink of the file to be embedded. Note that the shortcode will not display anything if it’s referencing it’s parent. Note: if you are running your website in a subfolder like Blowfish (i.e. /blowfish/) please include that path in the link.

Example:

{{< article link="/docs/welcome/" >}}

Badge

#

badge outputs a styled badge component which is useful for displaying metadata.

Example:

{{< badge >}}
New article!
{{< /badge >}}

Button

#

button outputs a styled button component which can be used to highlight a primary action. It has two optional variables href and target which can be used to specify the URL and target of the link.

Example:

{{< button href="#button" target="_self" >}}
Call to action
{{< /button >}}

Carousel

#

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.

Example 1: 16:9 aspect ratio and verbose list of images

{{< carousel images="{gallery/03.jpg, gallery/01.jpg, gallery/02.jpg, gallery/04.jpg}" >}}

Previous Nextsads

Example 2: 21:9 aspect ratio and regex-ed list of images

{{< carousel images="gallery/*" aspectRatio="21-9" interval="2500" >}}

Previous Nextsads

Chart

#

chart uses the Chart.js library to embed charts into articles using simple structured data. It supports a number of different chart styles and everything can be configured from within the shortcode. Simply provide the chart parameters between the shortcode tags and Chart.js will do the rest.

Refer to the official Chart.js docs for details on syntax and supported chart types.

Example:

{{< chart >}}
type: 'bar',
data: {
  labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
  datasets: [{
    label: '# of votes',
    data: [12, 19, 3, 5, 3],
  }]
}
{{< /chart >}}

Gallery

#

gallery allows you to showcase multiple images at once, in a responsive manner with more varied and interesting layouts.

In order to add images to the gallery, use img tags for each image and add class="grid-wXX" in order for the gallery to be able to identify the column width for each image. The widths available by default start at 10% and go all the way to 100% in 5% increments. For example, to set the width to 65%, set the class to grid-w65. Additionally, widths for 33% and 66% are also available in order to build galleries with 3 cols. You can also leverage tailwind’s responsive indicators to have a reponsive grid.

Example: responsive gallery

{{< gallery >}}
  <img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w33" />
  <img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w33" />
  <img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w33" />
  <img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w33" />
  <img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w33" />
  <img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w33" />
  <img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w33" />
{{< /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.

Example 1:

{{< github repo="kiga-hub/deployment-docker-compose" >}}

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 for the available syntax.

To include mathematical expressions in an article, simply place the shortcode anywhere with the content. It only needs to be included once per article and KaTeX will automatically render any markup on that page. Both inline and block notation are supported.

Inline notation can be generated by wrapping the expression in \\( and \\) delimiters. Alternatively, block notation can be generated using $$ delimiters.

Example:

{{< katex >}}
\\(f(a,b,c) = (a^2+b^2+c^2)^3\\)

\(f(a,b,c) = (a^2+b^2+c^2)^3\)

Check out the page for more examples.

Lead

#

lead is used to bring emphasis to the start of an article. It can be used to style an introduction, or to call out an important piece of information. Simply wrap any Markdown content in the lead shortcode.

Example:

{{< lead >}}
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.

Example #1:

{{< list limit=2 >}}

Recent

Example #2:

{{< list title="Samples" limit=5 where="Type" value="sample" >}}

Samples

TypeIt

#

TypeIt 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.

Example 1:

{{< typeit >}}
Lorem ipsum dolor sit amet 
{{< /typeit >}}

Example 2:

{{< typeit 
  tag=h1
  lifeLike=true
>}}
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. 
{{< /typeit >}}

Example 3:

{{< typeit 
  tag=h3
  speed=50
  breakLines=false
  loop=true
>}}
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. 
{{< /typeit >}}