added new shortcodes and respective docs

This commit is contained in:
Nuno Coração 2022-10-06 23:52:51 +01:00
parent 7e613a6219
commit 7ba6c3661d
7 changed files with 86 additions and 5 deletions

View file

@ -1553,6 +1553,10 @@ select {
margin-bottom: 2.25rem !important; margin-bottom: 2.25rem !important;
} }
.mt-20 {
margin-top: 5rem;
}
.-mr-2 { .-mr-2 {
margin-right: -0.5rem; margin-right: -0.5rem;
} }

View file

@ -37,6 +37,25 @@ Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
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 >}} {{< /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.
<!-- prettier-ignore-start -->
|Parameter|Description|
|---|---|
|`link`| **Required.** the `.RelPermalink` to the target article.|
<!-- prettier-ignore-end -->
**Example:**
```md
{{</* article link="/docs/welcome/" */>}}
```
{{< article link="/docs/welcome/" >}}
## Badge ## Badge
`badge` outputs a styled badge component which is useful for displaying metadata. `badge` outputs a styled badge component which is useful for displaying metadata.
@ -164,6 +183,33 @@ 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" >}}). 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.
<!-- prettier-ignore-start -->
|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.|
<!-- prettier-ignore-end -->
**Example #1:**
```md
{{</* list limit=2 */>}}
```
{{< list limit=2 >}}
**Example #2:**
```md
{{</* list limit=2 where="Type" value="sample" */>}}
```
{{< list limit=2 where="Type" value="sample">}}
## Swatches ## 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. `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.

View file

@ -4,6 +4,7 @@ date: 2019-03-05
description: "Guide to Emoji usage in Blowfish" description: "Guide to Emoji usage in Blowfish"
summary: "📖🏞️🧗🏽🐉🧙🏽‍♂️🧚🏽👸" summary: "📖🏞️🧗🏽🐉🧙🏽‍♂️🧚🏽👸"
tags: ["emoji", "sample"] tags: ["emoji", "sample"]
type: 'sample'
--- ---
Emoji is supported throughout Blowfish by default. Emoji can be used in titles, menu items and article content. Emoji is supported throughout Blowfish by default. Emoji can be used in titles, menu items and article content.

View file

@ -41,7 +41,7 @@
<div class="{{ $articleInnerClasses }}"> <div class="{{ $articleInnerClasses }}">
<h3 class="items-center text-xl font-semibold"> <div class="items-center text-xl font-semibold">
{{ with .Params.externalUrl }} {{ with .Params.externalUrl }}
<div> <div>
<div <div
@ -55,8 +55,8 @@
</div> </div>
{{ else }} {{ else }}
<p class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral" <div class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
href="{{ .RelPermalink }}">{{ .Title | emojify }}</p> href="{{ .RelPermalink }}">{{ .Title | emojify }}</div>
{{ end }} {{ end }}
{{ if and .Draft .Site.Params.article.showDraftLabel }} {{ if and .Draft .Site.Params.article.showDraftLabel }}
<div class=" ltr:ml-2 rtl:mr-2"> <div class=" ltr:ml-2 rtl:mr-2">
@ -66,7 +66,7 @@
{{ if templates.Exists "partials/extend-article-link.html" }} {{ if templates.Exists "partials/extend-article-link.html" }}
{{ partial "extend-article-link.html" . }} {{ partial "extend-article-link.html" . }}
{{ end }} {{ end }}
</h3> </div>
<div class="text-sm text-neutral-500 dark:text-neutral-400"> <div class="text-sm text-neutral-500 dark:text-neutral-400">
{{ partial "article-meta.html" . }} {{ partial "article-meta.html" . }}
</div> </div>

View file

@ -0,0 +1,9 @@
{{ $parent := .Page.RelPermalink }}
<section class="w-full mt-10 mb-10">
{{ $RelPermalink := .Get "link" }}
{{ range ( where .Site.RegularPages "RelPermalink" $RelPermalink | first 1 ) }}
{{ if not (eq .RelPermalink $parent) }}
{{ partial "article-link.html" . }}
{{ end }}
{{end}}
</section>

View file

@ -0,0 +1,21 @@
{{ $limit := .Get "limit" }}
{{ $parent := .Page.RelPermalink }}
{{ $where := .Get "where" }}
{{ $value := .Get "value" }}
<h2 class="mt-20 text-2xl font-extrabold mb-10">{{ i18n "shortcode.recent_articles" | emojify }}</h2>
<section class="space-y-10 w-full mt-10 mb-10">
{{ if $where }}
{{ range ( where .Site.RegularPages $where $value | first 1 ) }}
{{ if not (eq .RelPermalink $parent) }}
{{ partial "article-link.html" . }}
{{ end }}
{{end}}
{{ else }}
{{ range .Site.RegularPages | first $limit }}
{{ if not (eq .RelPermalink $parent) }}
{{ partial "article-link.html" . }}
{{ end }}
{{end}}
{{ end }}
</section>

View file

@ -1,6 +1,6 @@
{ {
"name": "hugo-blowfish-theme", "name": "hugo-blowfish-theme",
"version": "1.5.2", "version": "1.6.0",
"description": "Blowfish theme for Hugo", "description": "Blowfish theme for Hugo",
"scripts": { "scripts": {
"preinstall": "rimraf assets/vendor", "preinstall": "rimraf assets/vendor",