From 98fa8bf6047e5c9b32213e7210c37dc247913073 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20Cora=C3=A7=C3=A3o?= Date: Fri, 1 Dec 2023 13:41:14 +0000 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Card=20View=20in=20List=20Shortcode?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- exampleSite/content/docs/shortcodes/index.md | 33 ++++++++++---------- layouts/shortcodes/list.html | 27 +++++++++++++++- 2 files changed, 43 insertions(+), 17 deletions(-) diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md index 19b425b3..156bf607 100644 --- a/exampleSite/content/docs/shortcodes/index.md +++ b/exampleSite/content/docs/shortcodes/index.md @@ -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. -| Parameter | Description | -| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `icon` | **Optional.** the icon to display on the left side.
**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.
Can be either hex values (`#FFFFFF`) or color names (`white`)
By default chosen based on the current color theme . | -| `cardColor` | **Optional.** the color for the card background in basic CSS style.
Can be either hex values (`#FFFFFF`) or color names (`white`)
By default chosen based on the current color theme . | -| `textColor` | **Optional.** the color for the text in basic CSS style.
Can be either hex values (`#FFFFFF`) or color names (`white`)
By default chosen based on the current color theme . | +| Parameter | Description | +| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `icon` | **Optional.** the icon to display on the left side.
**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.
Can be either hex values (`#FFFFFF`) or color names (`white`)
By default chosen based on the current color theme . | +| `cardColor` | **Optional.** the color for the card background in basic CSS style.
Can be either hex values (`#FFFFFF`) or color names (`white`)
By default chosen based on the current color theme . | +| `textColor` | **Optional.** the color for the text in basic CSS style.
Can be either hex values (`#FFFFFF`) or color names (`white`)
By default chosen based on the current color theme . | 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 | Parameter | Description | -|-----------|-------------------------------------------------------| +| --------- | ----------------------------------------------------- | | `repo` | [String] github repo in the format of `username/repo` | @@ -320,7 +320,7 @@ Finaly custom GitLab instace URL can be provided, as long as the `api/v4/project | Parameter | Description | -|-------------|------------------------------------------------------------------------| +| ----------- | ---------------------------------------------------------------------- | | `projectID` | [String] gitlab numeric ProjectID | | `baseURL` | [String] optional gitlab instace URL, default is `https://gitlab.com/` | @@ -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. -| Parameter | Description | -| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `limit` | **Required.** the number of recent articles to display. | -| `title` | Optional title for the list, default is `Recent` | -| `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` | +| Parameter | Description | +| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `limit` | **Required.** the number of recent articles to display. | +| `title` | Optional title for the list, default is `Recent` | +| `cardView` | Optional card view enabled for the list, default is `false` | +| `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 >}} 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:** ```md -{{}} +{{}} ``` -{{< list title="Samples" limit=5 where="Type" value="sample">}} +{{< list title="Samples" cardView=true limit=6 where="Type" value="sample">}}


diff --git a/layouts/shortcodes/list.html b/layouts/shortcodes/list.html index 18fa486d..f46e96e4 100644 --- a/layouts/shortcodes/list.html +++ b/layouts/shortcodes/list.html @@ -2,9 +2,32 @@ {{ $limit := .Get "limit" | default 1 }} {{ $title := .Get "title" | default (i18n "shortcode.recent_articles" | emojify) }} {{ $parent := .Page.RelPermalink }} +{{ $cardView := .Get "cardView" }} {{ $where := .Get "where" }} {{ $value := .Get "value" }}

{{ $title }}

+ + +{{ if $cardView | default false}} + +
+ {{ 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 }} +
+ +{{ else }} +
{{ if $where }} {{ range ( where .Site.RegularPages $where $value | first $limit ) }} @@ -19,4 +42,6 @@ {{ end }} {{end}} {{ end }} -
\ No newline at end of file + + +{{ end }}