✨ Card View in List Shortcode

exampleSite/content/docs/shortcodes/index.md

@@ -17,7 +17,7 @@ In addition to all the [default Hugo shortcodes](https://gohugo.io/content-manag
 
 <!-- prettier-ignore-start -->
 | 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.)                    |
 | `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 . |
@@ -297,7 +297,7 @@ In order to add images to the gallery, use `img` tags for each image and add `cl
 
 <!-- prettier-ignore-start -->
 | Parameter | Description                                           |
-|-----------|-------------------------------------------------------|
+| --------- | ----------------------------------------------------- |
 | `repo`    | [String] github repo in the format of `username/repo` |
 <!-- 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 -->
 | Parameter   | Description                                                            |
-|-------------|------------------------------------------------------------------------|
+| ----------- | ---------------------------------------------------------------------- |
 | `projectID` | [String] gitlab numeric ProjectID                                      |
 | `baseURL`   | [String] optional gitlab instace URL, default is `https://gitlab.com/` |
 <!-- prettier-ignore-end -->
@@ -401,9 +401,10 @@ When life gives you lemons, make lemonade.
 
 <!-- prettier-ignore-start -->
 | 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` |
 
@@ -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=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/>
 

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" }}
 <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">
     {{ if $where }}
         {{ range ( where .Site.RegularPages $where $value | first $limit ) }}
@@ -20,3 +43,5 @@
         {{end}}
     {{ end }}
 </section>
+
+{{ end }}