michael/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2025-01-22 14:35:43 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

✨ Card View in List Shortcode

Browse source
This commit is contained in:
Nuno Coração 2023-12-01 13:41:14 +00:00
parent f8c0ea1327
commit 98fa8bf604
2 changed files with 43 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
exampleSite/content/docs/shortcodes/index.md
View file

@ -16,12 +16,12 @@ In addition to all the [default Hugo shortcodes](https://gohugo.io/content-manag
`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. `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.
<!-- prettier-ignore-start --> <!-- prettier-ignore-start -->
| Parameter | Description | | Parameter | Description |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `icon` | **Optional.** the icon to display on the left side.<br>**Default:** `exclaimation triangle icon` (Check out the [icon shortcode](#icon) for more details on using icons.) | | `icon` | **Optional.** the icon to display on the left side.<br>**Default:** `exclaimation triangle icon` (Check out the [icon shortcode](#icon) for more details on using icons.) |
| `iconColor` | **Optional.** the color for the icon in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme . | | `iconColor` | **Optional.** the color for the icon in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme . |
| `cardColor` | **Optional.** the color for the card background in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme . | | `cardColor` | **Optional.** the color for the card background in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme . |
| `textColor` | **Optional.** the color for the text in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme . | | `textColor` | **Optional.** the color for the text in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme . |
<!-- prettier-ignore-end --> <!-- prettier-ignore-end -->
The input is written in Markdown so you can format it however you please. The input is written in Markdown so you can format it however you please.
@ -297,7 +297,7 @@ In order to add images to the gallery, use `img` tags for each image and add `cl
<!-- prettier-ignore-start --> <!-- prettier-ignore-start -->
| Parameter | Description | | Parameter | Description |
|-----------|-------------------------------------------------------| | --------- | ----------------------------------------------------- |
| `repo` | [String] github repo in the format of `username/repo` | | `repo` | [String] github repo in the format of `username/repo` |
<!-- prettier-ignore-end --> <!-- prettier-ignore-end -->
@ -320,7 +320,7 @@ Finaly custom GitLab instace URL can be provided, as long as the `api/v4/project
<!-- prettier-ignore-start --> <!-- prettier-ignore-start -->
| Parameter | Description | | Parameter | Description |
|-------------|------------------------------------------------------------------------| | ----------- | ---------------------------------------------------------------------- |
| `projectID` | [String] gitlab numeric ProjectID | | `projectID` | [String] gitlab numeric ProjectID |
| `baseURL` | [String] optional gitlab instace URL, default is `https://gitlab.com/` | | `baseURL` | [String] optional gitlab instace URL, default is `https://gitlab.com/` |
<!-- prettier-ignore-end --> <!-- prettier-ignore-end -->
@ -400,12 +400,13 @@ When life gives you lemons, make lemonade.
`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. `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 --> <!-- prettier-ignore-start -->
| Parameter | Description | | Parameter | Description |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `limit` | **Required.** the number of recent articles to display. | | `limit` | **Required.** the number of recent articles to display. |
| `title` | Optional title for the list, default is `Recent` | | `title` | Optional title for the list, default is `Recent` |
| `where` | The variable to be used for the query of articles e.g. `Type` | | `cardView` | Optional card view enabled for the list, default is `false` |
| `value` | The value that will need to match the parameter defined in `where` for the query of articles e.g. for `where` == `Type` a valid value could be `sample` | | `where` | The variable to be used for the query of articles e.g. `Type` |
| `value` | The value that will need to match the parameter defined in `where` for the query of articles e.g. for `where` == `Type` a valid value could be `sample` |
{{< alert >}} {{< alert >}}
The `where` and `value` values are used in the following query `where .Site.RegularPages $where $value` in the code of the shortcode. Check [Hugo docs](https://gohugo.io/variables/page/) to learn more about which parameters are available to use. The `where` and `value` values are used in the following query `where .Site.RegularPages $where $value` in the code of the shortcode. Check [Hugo docs](https://gohugo.io/variables/page/) to learn more about which parameters are available to use.
@ -424,10 +425,10 @@ The `where` and `value` values are used in the following query `where .Site.Regu
**Example #2:** **Example #2:**
```md ```md
{{</* list title="Samples" limit=5 where="Type" value="sample" */>}} {{</* list title="Samples" cardView=true limit=5 where="Type" value="sample" */>}}
``` ```
{{< list title="Samples" limit=5 where="Type" value="sample">}} {{< list title="Samples" cardView=true limit=6 where="Type" value="sample">}}
<br/><br/><br/> <br/><br/><br/>

27
layouts/shortcodes/list.html
View file

@ -2,9 +2,32 @@
{{ $limit := .Get "limit" | default 1 }} {{ $limit := .Get "limit" | default 1 }}
{{ $title := .Get "title" | default (i18n "shortcode.recent_articles" | emojify) }} {{ $title := .Get "title" | default (i18n "shortcode.recent_articles" | emojify) }}
{{ $parent := .Page.RelPermalink }} {{ $parent := .Page.RelPermalink }}
{{ $cardView := .Get "cardView" }}
{{ $where := .Get "where" }} {{ $where := .Get "where" }}
{{ $value := .Get "value" }} {{ $value := .Get "value" }}
<h2 class="mt-20 text-2xl font-extrabold mb-10">{{ $title }}</h2> <h2 class="mt-20 text-2xl font-extrabold mb-10">{{ $title }}</h2>
{{ if $cardView | default false}}
<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
{{ if $where }}
{{ range ( where .Site.RegularPages $where $value | first $limit ) }}
{{ if not (eq .RelPermalink $parent) }}
{{ partial "article-link/card.html" . }}
{{ end }}
{{end}}
{{ else }}
{{ range .Site.RegularPages | first $limit }}
{{ if not (eq .RelPermalink $parent) }}
{{ partial "article-link/card.html" . }}
{{ end }}
{{end}}
{{ end }}
</section>
{{ else }}
<section class="space-y-10 w-full mt-10 mb-10"> <section class="space-y-10 w-full mt-10 mb-10">
{{ if $where }} {{ if $where }}
{{ range ( where .Site.RegularPages $where $value | first $limit ) }} {{ range ( where .Site.RegularPages $where $value | first $limit ) }}
@ -19,4 +42,6 @@
{{ end }} {{ end }}
{{end}} {{end}}
{{ end }} {{ end }}
</section> </section>
{{ end }}