From 6c07c9e143d48a92cfff0079f5dfe78e41319eda Mon Sep 17 00:00:00 2001
From: Matt Spencer <matthew@thespencers.me.uk>
Date: Wed, 19 Jan 2022 23:01:12 +0000
Subject: [PATCH 1/4] Create Carousel shortcode

Create Carousel shortcode and partial
Only create carousel when there is more than one banner
Move banner into a partial to allow use in shortcode
Use carousel by default in homepage
Add <a> link to image carousel

Signed-off-by: Matt Spencer <matt.spencer@arm.com>
---
 content/_index.md                             |  2 +-
 themes/soafee/layouts/partials/banner.html    | 20 ++++++++
 themes/soafee/layouts/partials/img.html       | 14 +++---
 themes/soafee/layouts/shortcodes/banner.html  | 18 +++----
 .../soafee/layouts/shortcodes/carousel.html   | 47 +++++++++++++++++++
 .../soafee/layouts/shortcodes/imagegrid.html  |  5 +-
 6 files changed, 85 insertions(+), 21 deletions(-)
 create mode 100644 themes/soafee/layouts/partials/banner.html
 create mode 100644 themes/soafee/layouts/shortcodes/carousel.html

diff --git a/content/_index.md b/content/_index.md
index da8eef5..d74c0ea 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -8,7 +8,7 @@ keywords: Cloud native, Software defined, Cloud native development, Automotive s
 
 # {{< figure class="banner-img" src="/images/ARM1828_SOAFEE_Dark_ST2.svg" alt="SOAFEE Logo">}}
 
-{{< banner >}}
+{{< carousel >}}
 
 ## Overview
 
diff --git a/themes/soafee/layouts/partials/banner.html b/themes/soafee/layouts/partials/banner.html
new file mode 100644
index 0000000..5e28770
--- /dev/null
+++ b/themes/soafee/layouts/partials/banner.html
@@ -0,0 +1,20 @@
+{{ $self := .ctx | default . }}
+
+<div class="card banner bg-light text-light">
+    {{ $ctx := (dict 
+        "src" $self.background 
+        "alt" $self.title 
+        "media_page" "headless_media"
+        "class" "card-img" )}}
+    {{ with (dict "Page" .Page "ctx" $ctx) }}
+        {{ partial "img" . }}
+    {{ end }}
+    <div class="card-img-overlay d-flex flex-column">
+        <h3 class="card-title">{{ $self.title }} </h3>
+        <hr>
+        <p class="card-text text-center flex-grow-1">
+            {{ $self.description }}
+        </p>
+        <a href="{{ .Page.Permalink }}" class="btn btn-primary mt-auto">More Details</a>
+    </div>
+</div>
diff --git a/themes/soafee/layouts/partials/img.html b/themes/soafee/layouts/partials/img.html
index e639312..0334b21 100644
--- a/themes/soafee/layouts/partials/img.html
+++ b/themes/soafee/layouts/partials/img.html
@@ -2,16 +2,16 @@
 {{ $breakpoints := dict "sm" 576 "md" 768 "lg" 992 "xl" 1200 "xxl" 1400 }}
 
 <!-- TODO: Filter breakpoints if needed -->
+{{ $ctx := .ctx | default . }}
 
-{{ $alt := .alt | default "" }}
-{{ $columns := .columns | default 1 }}
-
-<!-- Allow specifying a resource bundle to source the image from -->
-{{ $mediaPage := .media_page | default .Page.File.Path }}
-{{ $resourcesPage := .site.GetPage $mediaPage }}
-{{ $image := $resourcesPage.Resources.GetMatch .src }}
+{{ $alt := $ctx.alt | default "" }}
+{{ $columns := $ctx.columns | default 1 }}
 
 
+<!-- Allow specifying a resource bundle to source the image from -->
+{{ $mediaPage := $ctx.media_page | default .Page.File.Path }}
+{{ $resourcesPage := .Page.Site.GetPage $mediaPage }}
+{{ $image := $resourcesPage.Resources.GetMatch $ctx.src }}
 {{ $imgSrcSet := slice }}
 {{ $sizes := slice }}
 {{ range $breakpoints }}
diff --git a/themes/soafee/layouts/shortcodes/banner.html b/themes/soafee/layouts/shortcodes/banner.html
index 53954df..3cba7ec 100644
--- a/themes/soafee/layouts/shortcodes/banner.html
+++ b/themes/soafee/layouts/shortcodes/banner.html
@@ -1,14 +1,8 @@
+{{ $bannerSourcePage := .Get "source" | default .Page.File.Path }}
+{{ $page := .Page.Site.GetPage $bannerSourcePage }}
 
-{{ range where .Site.Pages "Params.banner.active" true }}
-  <div class="card banner bg-light text-light">
-    {{ partial "img" (dict "site" $.Site "src" .Params.banner.background "alt" .Params.banner.title "media_page" "headless_media" "class" "card-img") }}
-    <div class="card-img-overlay d-flex flex-column">
-        <h3 class="card-title">{{ .Params.banner.title }} </h3>
-        <hr>
-        <p class="card-text text-center flex-grow-1">
-            {{ .Params.banner.description }}
-        </p>
-        <a href="{{ .Permalink }}" class="btn btn-primary mt-auto">More Details</a>
-    </div>
-</div>
+{{ with $page }}
+    {{ with (dict "Page" .Page "ctx" .Params.banner)}}
+        {{ partial "banner" . }}
+    {{ end }}
 {{ end }}
diff --git a/themes/soafee/layouts/shortcodes/carousel.html b/themes/soafee/layouts/shortcodes/carousel.html
new file mode 100644
index 0000000..a8ac708
--- /dev/null
+++ b/themes/soafee/layouts/shortcodes/carousel.html
@@ -0,0 +1,47 @@
+{{ $id := .Get "id" | default "carouselId" }}
+<!-- TODO: Add param to enable indicators -->
+{{ $showIndicators := false }}
+
+{{ $posts := (where .Site.Pages "Params.banner.active" true)}}
+
+
+<!-- If there are more than one posts, add the carousel-->
+{{ if gt (len $posts) 1 }}
+<div id="{{ $id }}" class="carousel slide" data-bs-ride="carousel">
+{{ if eq $showIndicators true}}
+    <div class="carousel-indicators">
+{{ range $index,$post := $posts }}
+        <button type="button" data-bs-target="#{{ $id }}" data-bs-slide-to="{{$index}}" {{ if eq $index 0 }}class="active" aria-current="true" {{ end }} aria-label="Slide {{ $index }}"></button>
+{{ end }}
+    </div>
+{{ end }}
+    <div class="carousel-inner">
+{{ range $index,$post := $posts }}
+        <div class="carousel-item {{ if eq $index 0 }}active{{ end }}">
+            <div class="card banner bg-light text-light">
+                {{ with (dict "Page" .Page "ctx" .Params.banner)}}
+                    {{ partial "banner" . }}
+                {{ end }}
+            </div>
+      </div>
+{{ end }}
+    </div>
+    <button class="carousel-control-prev" type="button" data-bs-target="#{{ $id }}" data-bs-slide="prev">
+      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">Previous</span>
+    </button>
+    <button class="carousel-control-next" type="button" data-bs-target="#{{ $id }}" data-bs-slide="next">
+      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">Next</span>
+    </button>
+</div>
+
+{{ else if (eq (len $posts) 1) }}
+<!-- Else, if there is just one post, add the banner-->
+{{ range $posts }}
+    {{ with (dict "Page" .Page "ctx" .Params.banner)}}
+        {{ partial "banner" . }}
+    {{ end }}
+{{ end }}
+{{ end }}
+
diff --git a/themes/soafee/layouts/shortcodes/imagegrid.html b/themes/soafee/layouts/shortcodes/imagegrid.html
index 80091d3..fb29537 100644
--- a/themes/soafee/layouts/shortcodes/imagegrid.html
+++ b/themes/soafee/layouts/shortcodes/imagegrid.html
@@ -16,6 +16,7 @@
 
 {{ $mediaPage := .Get "media_page" | default .Page.File.Path }}
 {{ $resourcesPage := .Site.GetPage $mediaPage }}
+{{ $page := .Page }}
 
 <div class="imagegrid row">
     {{ range index .Site.Data (split .Params.data "." ) }}
@@ -31,7 +32,9 @@
         {{ end }}
 
         <div class="col-md">
-        {{ partial "img" (dict "site" $.Site "src" .image "alt" .alt "columns" 3 "media_page" $mediaPage )}}
+            <a href="{{.url}}" style="width:100%">
+        {{ partial "img" (dict "Page" $page "src" .image "alt" .alt "columns" $columns "media_page" $mediaPage )}}
+            </a>
         </div>
 
         {{ if eq $row $lastRow }}
-- 
GitLab


From 2f92006b4b0a2277f62c1badb6e492837dfbfc56 Mon Sep 17 00:00:00 2001
From: Matt Spencer <matthew@thespencers.me.uk>
Date: Wed, 19 Jan 2022 23:07:08 +0000
Subject: [PATCH 2/4] Fix the where clause for banners

Signed-off-by: Matt Spencer <matt.spencer@arm.com>
---
 themes/soafee/layouts/shortcodes/carousel.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/themes/soafee/layouts/shortcodes/carousel.html b/themes/soafee/layouts/shortcodes/carousel.html
index a8ac708..84cd581 100644
--- a/themes/soafee/layouts/shortcodes/carousel.html
+++ b/themes/soafee/layouts/shortcodes/carousel.html
@@ -2,7 +2,7 @@
 <!-- TODO: Add param to enable indicators -->
 {{ $showIndicators := false }}
 
-{{ $posts := (where .Site.Pages "Params.banner.active" true)}}
+{{ $posts := (where .Site.Pages "Params.banner.active" "eq" true)}}
 
 
 <!-- If there are more than one posts, add the carousel-->
-- 
GitLab


From ecd5f29f988c94001a5a3dcbc1f8ba1ba4647bb5 Mon Sep 17 00:00:00 2001
From: Matt Spencer <matthew@thespencers.me.uk>
Date: Wed, 19 Jan 2022 23:01:12 +0000
Subject: [PATCH 3/4] Create Carousel shortcode

Create Carousel shortcode and partial
Only create carousel when there is more than one banner
Move banner into a partial to allow use in shortcode
Use carousel by default in homepage
Add <a> link to image carousel

Signed-off-by: Matt Spencer <matt.spencer@arm.com>
---
 content/_index.md                             |  2 +-
 themes/soafee/layouts/partials/banner.html    | 20 ++++++++
 themes/soafee/layouts/partials/img.html       | 14 +++---
 themes/soafee/layouts/shortcodes/banner.html  | 18 +++----
 .../soafee/layouts/shortcodes/carousel.html   | 47 +++++++++++++++++++
 .../soafee/layouts/shortcodes/imagegrid.html  |  5 +-
 6 files changed, 85 insertions(+), 21 deletions(-)
 create mode 100644 themes/soafee/layouts/partials/banner.html
 create mode 100644 themes/soafee/layouts/shortcodes/carousel.html

diff --git a/content/_index.md b/content/_index.md
index da8eef5..d74c0ea 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -8,7 +8,7 @@ keywords: Cloud native, Software defined, Cloud native development, Automotive s
 
 # {{< figure class="banner-img" src="/images/ARM1828_SOAFEE_Dark_ST2.svg" alt="SOAFEE Logo">}}
 
-{{< banner >}}
+{{< carousel >}}
 
 ## Overview
 
diff --git a/themes/soafee/layouts/partials/banner.html b/themes/soafee/layouts/partials/banner.html
new file mode 100644
index 0000000..5e28770
--- /dev/null
+++ b/themes/soafee/layouts/partials/banner.html
@@ -0,0 +1,20 @@
+{{ $self := .ctx | default . }}
+
+<div class="card banner bg-light text-light">
+    {{ $ctx := (dict 
+        "src" $self.background 
+        "alt" $self.title 
+        "media_page" "headless_media"
+        "class" "card-img" )}}
+    {{ with (dict "Page" .Page "ctx" $ctx) }}
+        {{ partial "img" . }}
+    {{ end }}
+    <div class="card-img-overlay d-flex flex-column">
+        <h3 class="card-title">{{ $self.title }} </h3>
+        <hr>
+        <p class="card-text text-center flex-grow-1">
+            {{ $self.description }}
+        </p>
+        <a href="{{ .Page.Permalink }}" class="btn btn-primary mt-auto">More Details</a>
+    </div>
+</div>
diff --git a/themes/soafee/layouts/partials/img.html b/themes/soafee/layouts/partials/img.html
index e639312..0334b21 100644
--- a/themes/soafee/layouts/partials/img.html
+++ b/themes/soafee/layouts/partials/img.html
@@ -2,16 +2,16 @@
 {{ $breakpoints := dict "sm" 576 "md" 768 "lg" 992 "xl" 1200 "xxl" 1400 }}
 
 <!-- TODO: Filter breakpoints if needed -->
+{{ $ctx := .ctx | default . }}
 
-{{ $alt := .alt | default "" }}
-{{ $columns := .columns | default 1 }}
-
-<!-- Allow specifying a resource bundle to source the image from -->
-{{ $mediaPage := .media_page | default .Page.File.Path }}
-{{ $resourcesPage := .site.GetPage $mediaPage }}
-{{ $image := $resourcesPage.Resources.GetMatch .src }}
+{{ $alt := $ctx.alt | default "" }}
+{{ $columns := $ctx.columns | default 1 }}
 
 
+<!-- Allow specifying a resource bundle to source the image from -->
+{{ $mediaPage := $ctx.media_page | default .Page.File.Path }}
+{{ $resourcesPage := .Page.Site.GetPage $mediaPage }}
+{{ $image := $resourcesPage.Resources.GetMatch $ctx.src }}
 {{ $imgSrcSet := slice }}
 {{ $sizes := slice }}
 {{ range $breakpoints }}
diff --git a/themes/soafee/layouts/shortcodes/banner.html b/themes/soafee/layouts/shortcodes/banner.html
index 53954df..3cba7ec 100644
--- a/themes/soafee/layouts/shortcodes/banner.html
+++ b/themes/soafee/layouts/shortcodes/banner.html
@@ -1,14 +1,8 @@
+{{ $bannerSourcePage := .Get "source" | default .Page.File.Path }}
+{{ $page := .Page.Site.GetPage $bannerSourcePage }}
 
-{{ range where .Site.Pages "Params.banner.active" true }}
-  <div class="card banner bg-light text-light">
-    {{ partial "img" (dict "site" $.Site "src" .Params.banner.background "alt" .Params.banner.title "media_page" "headless_media" "class" "card-img") }}
-    <div class="card-img-overlay d-flex flex-column">
-        <h3 class="card-title">{{ .Params.banner.title }} </h3>
-        <hr>
-        <p class="card-text text-center flex-grow-1">
-            {{ .Params.banner.description }}
-        </p>
-        <a href="{{ .Permalink }}" class="btn btn-primary mt-auto">More Details</a>
-    </div>
-</div>
+{{ with $page }}
+    {{ with (dict "Page" .Page "ctx" .Params.banner)}}
+        {{ partial "banner" . }}
+    {{ end }}
 {{ end }}
diff --git a/themes/soafee/layouts/shortcodes/carousel.html b/themes/soafee/layouts/shortcodes/carousel.html
new file mode 100644
index 0000000..a8ac708
--- /dev/null
+++ b/themes/soafee/layouts/shortcodes/carousel.html
@@ -0,0 +1,47 @@
+{{ $id := .Get "id" | default "carouselId" }}
+<!-- TODO: Add param to enable indicators -->
+{{ $showIndicators := false }}
+
+{{ $posts := (where .Site.Pages "Params.banner.active" true)}}
+
+
+<!-- If there are more than one posts, add the carousel-->
+{{ if gt (len $posts) 1 }}
+<div id="{{ $id }}" class="carousel slide" data-bs-ride="carousel">
+{{ if eq $showIndicators true}}
+    <div class="carousel-indicators">
+{{ range $index,$post := $posts }}
+        <button type="button" data-bs-target="#{{ $id }}" data-bs-slide-to="{{$index}}" {{ if eq $index 0 }}class="active" aria-current="true" {{ end }} aria-label="Slide {{ $index }}"></button>
+{{ end }}
+    </div>
+{{ end }}
+    <div class="carousel-inner">
+{{ range $index,$post := $posts }}
+        <div class="carousel-item {{ if eq $index 0 }}active{{ end }}">
+            <div class="card banner bg-light text-light">
+                {{ with (dict "Page" .Page "ctx" .Params.banner)}}
+                    {{ partial "banner" . }}
+                {{ end }}
+            </div>
+      </div>
+{{ end }}
+    </div>
+    <button class="carousel-control-prev" type="button" data-bs-target="#{{ $id }}" data-bs-slide="prev">
+      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">Previous</span>
+    </button>
+    <button class="carousel-control-next" type="button" data-bs-target="#{{ $id }}" data-bs-slide="next">
+      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">Next</span>
+    </button>
+</div>
+
+{{ else if (eq (len $posts) 1) }}
+<!-- Else, if there is just one post, add the banner-->
+{{ range $posts }}
+    {{ with (dict "Page" .Page "ctx" .Params.banner)}}
+        {{ partial "banner" . }}
+    {{ end }}
+{{ end }}
+{{ end }}
+
diff --git a/themes/soafee/layouts/shortcodes/imagegrid.html b/themes/soafee/layouts/shortcodes/imagegrid.html
index 80091d3..fb29537 100644
--- a/themes/soafee/layouts/shortcodes/imagegrid.html
+++ b/themes/soafee/layouts/shortcodes/imagegrid.html
@@ -16,6 +16,7 @@
 
 {{ $mediaPage := .Get "media_page" | default .Page.File.Path }}
 {{ $resourcesPage := .Site.GetPage $mediaPage }}
+{{ $page := .Page }}
 
 <div class="imagegrid row">
     {{ range index .Site.Data (split .Params.data "." ) }}
@@ -31,7 +32,9 @@
         {{ end }}
 
         <div class="col-md">
-        {{ partial "img" (dict "site" $.Site "src" .image "alt" .alt "columns" 3 "media_page" $mediaPage )}}
+            <a href="{{.url}}" style="width:100%">
+        {{ partial "img" (dict "Page" $page "src" .image "alt" .alt "columns" $columns "media_page" $mediaPage )}}
+            </a>
         </div>
 
         {{ if eq $row $lastRow }}
-- 
GitLab


From 39709ab6e54dcd24bdca9647e9acf3ee6d396bb0 Mon Sep 17 00:00:00 2001
From: Matt Spencer <matthew@thespencers.me.uk>
Date: Wed, 19 Jan 2022 23:07:08 +0000
Subject: [PATCH 4/4] Fix the where clause for banners

Signed-off-by: Matt Spencer <matt.spencer@arm.com>
---
 themes/soafee/layouts/shortcodes/carousel.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/themes/soafee/layouts/shortcodes/carousel.html b/themes/soafee/layouts/shortcodes/carousel.html
index a8ac708..84cd581 100644
--- a/themes/soafee/layouts/shortcodes/carousel.html
+++ b/themes/soafee/layouts/shortcodes/carousel.html
@@ -2,7 +2,7 @@
 <!-- TODO: Add param to enable indicators -->
 {{ $showIndicators := false }}
 
-{{ $posts := (where .Site.Pages "Params.banner.active" true)}}
+{{ $posts := (where .Site.Pages "Params.banner.active" "eq" true)}}
 
 
 <!-- If there are more than one posts, add the carousel-->
-- 
GitLab