mirror of
https://github.com/nunocoracao/blowfish.git
synced 2025-01-22 14:35:43 -06:00
final polisH
This commit is contained in:
Nuno Coração
parent
0e4ef64c96
commit
fd4f96eb3b
2 changed files with 31 additions and 1 deletions
|
|
@ -39,6 +39,8 @@ Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
|
|||
Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
|
||||
{{< /alert >}}
|
||||
|
||||
<br/><br/><br/>
|
||||
|
||||
## 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.*
|
||||
|
|
@ -57,6 +59,8 @@ Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
|
|||
|
||||
{{< article link="/docs/welcome/" >}}
|
||||
|
||||
<br/><br/><br/>
|
||||
|
||||
## Badge
|
||||
|
||||
`badge` outputs a styled badge component which is useful for displaying metadata.
|
||||
|
|
@ -73,6 +77,8 @@ New article!
|
|||
New article!
|
||||
{{< /badge >}}
|
||||
|
||||
<br/><br/><br/>
|
||||
|
||||
## 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.
|
||||
|
|
@ -89,6 +95,8 @@ Call to action
|
|||
Call to action
|
||||
{{< /button >}}
|
||||
|
||||
<br/><br/><br/>
|
||||
|
||||
## 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`.
|
||||
|
|
@ -117,6 +125,8 @@ Call to action
|
|||
|
||||
{{< carousel images="gallery/*" aspectRatio="21-9" >}}
|
||||
|
||||
<br/><br/><br/>
|
||||
|
||||
## Chart
|
||||
|
||||
`chart` uses the Chart.js library to embed charts into articles using simple structured data. It supports a number of [different chart styles](https://www.chartjs.org/docs/latest/samples/) 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.
|
||||
|
|
@ -153,6 +163,8 @@ data: {
|
|||
|
||||
You can see some additional Chart.js examples on the [charts samples]({{< ref "charts" >}}) page.
|
||||
|
||||
<br/><br/><br/>
|
||||
|
||||
## Figure
|
||||
|
||||
Blowfish includes a `figure` shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits.
|
||||
|
|
@ -194,6 +206,8 @@ 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/)" >}}
|
||||
|
||||
<br/><br/><br/>
|
||||
|
||||
## Gallery
|
||||
|
||||
`gallery` allows you to showcase multiple images at once, in a responsive manner with more varied and interesting layouts.
|
||||
|
|
@ -224,6 +238,8 @@ In order to add images to the gallery, use `img` tags for each image and add `cl
|
|||
<img src="gallery/07.jpg" class="grid-w33" />
|
||||
{{< /gallery >}}
|
||||
|
||||
<br/><br/><br/>
|
||||
|
||||
## 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.
|
||||
|
|
@ -242,6 +258,8 @@ In order to add images to the gallery, use `img` tags for each image and add `cl
|
|||
|
||||
{{< github repo="nunocoracao/blowfish" >}}
|
||||
|
||||
<br/><br/><br/>
|
||||
|
||||
## 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.
|
||||
|
|
@ -260,6 +278,8 @@ 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" >}}).
|
||||
|
||||
<br/><br/><br/>
|
||||
|
||||
## 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 +300,8 @@ Inline notation can be generated by wrapping the expression in `\\(` and `\\)` d
|
|||
|
||||
Check out the [mathematical notation samples]({{< ref "mathematical-notation" >}}) page for more examples.
|
||||
|
||||
<br/><br/><br/>
|
||||
|
||||
## 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.
|
||||
|
|
@ -296,6 +318,8 @@ When life gives you lemons, make lemonade.
|
|||
When life gives you lemons, make lemonade.
|
||||
{{< /lead >}}
|
||||
|
||||
<br/><br/><br/>
|
||||
|
||||
## 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.
|
||||
|
|
@ -325,6 +349,8 @@ When life gives you lemons, make lemonade.
|
|||
|
||||
{{< list limit=2 where="Type" value="sample">}}
|
||||
|
||||
<br/><br/><br/>
|
||||
|
||||
## 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.
|
||||
|
|
@ -351,6 +377,8 @@ B-->C[Profit]
|
|||
|
||||
You can see some additional Mermaid examples on the [diagrams and flowcharts samples]({{< ref "diagrams-flowcharts" >}}) page.
|
||||
|
||||
<br/><br/><br/>
|
||||
|
||||
## 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.
|
||||
|
|
@ -364,6 +392,8 @@ You can see some additional Mermaid examples on the [diagrams and flowcharts sam
|
|||
**Output**
|
||||
{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
|
||||
|
||||
<br/><br/><br/>
|
||||
|
||||
## 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.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "hugo-blowfish-theme",
|
||||
"version": "2.25.0",
|
||||
"version": "2.26.0",
|
||||
"description": "Blowfish theme for Hugo",
|
||||
"scripts": {
|
||||
"fullinstall": "npm run preinstall && npm install && npm run postinstall",
|
||||
|
|
|
|||
Loading…
Reference in a new issue