From e9836ae31cdd2f852b641a3e6bdcd0566529ffb7 Mon Sep 17 00:00:00 2001
From: nevfy <yaver4.0.0.0@gmail.com>
Date: Sun, 10 Nov 2024 20:52:11 +0300
Subject: [PATCH] feat: add responsive carousel

---
 content/en/_index.html                      | 28 ++---------------
 layouts/shortcodes/responsive-carousel.html | 35 +++++++++++++++++++++
 2 files changed, 38 insertions(+), 25 deletions(-)
 create mode 100644 layouts/shortcodes/responsive-carousel.html

diff --git a/content/en/_index.html b/content/en/_index.html
index 401c35f..3ab05d8 100644
--- a/content/en/_index.html
+++ b/content/en/_index.html
@@ -8,31 +8,9 @@ linkTitle = "SelfPrivacy"
 	<div class="flex-md-row flex-column-reverse d-flex justify-content-center align-content-center">
 		<div class="col-xs-12 col-md-4">
 			<div class="container rounded">
-				<div id="screenshotsCarouselControls" class="carousel slide" data-bs-ride="carousel">
-				  <div class="carousel-inner rounded">
-					<div class="carousel-item active">
-						<img class="d-block w-100" src="/images/screenshots/en/1.png" alt="First slide">
-					</div>
-					<div class="carousel-item">
-						<img class="d-block w-100" src="/images/screenshots/en/2.png" alt="Second slide">
-					</div>
-					<div class="carousel-item active">
-						<img class="d-block w-100" src="/images/screenshots/en/3.png" alt="Third slide">
-					</div>
-						<div class="carousel-item">
-						<img class="d-block w-100" src="/images/screenshots/en/4.png" alt="Fourth slide">
-					</div>
-						<div class="carousel-item">
-						<img class="d-block w-100" src="/images/screenshots/en/5.png" alt="Fifth slide">
-					</div>
-					<div class="carousel-item">
-						<img class="d-block w-100" src="/images/screenshots/en/6.png" alt="Sixth slide">
-					</div>
-					<div class="carousel-item">
-						<img class="d-block w-100" src="/images/screenshots/en/7.png" alt="Seventh slide">
-					</div>
-				  </div>
-				  <div class="carousel-indicators">
+				<div id="screenshotsCarouselControls" class="carousel" data-bs-ride="false">
+					{{< responsive-carousel en >}}
+					<div class="carousel-indicators">
 					<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="0" class="active" aria-current="true"></button>
 					<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="1"></button>
 					<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="2"></button>
diff --git a/layouts/shortcodes/responsive-carousel.html b/layouts/shortcodes/responsive-carousel.html
new file mode 100644
index 0000000..ecb87ea
--- /dev/null
+++ b/layouts/shortcodes/responsive-carousel.html
@@ -0,0 +1,35 @@
+{{ $lang := ( .Get 0 ) }}
+{{ $srcFiles := (resources.Match (printf "images/screenshots/%s/*" $lang)) }}
+
+{{ $tinyw := default "500" }}
+{{ $smallw := default "800" }}
+{{ $mediumw := default "1200" }}
+{{ $largew := default "2400" }}
+
+{{ range $i, $src := $srcFiles }}
+
+  {{ $tiny := $src.Resize (printf "%sx" $tinyw) }}
+  {{ $small := $src.Resize (printf "%sx" $smallw) }}
+  {{ $medium:= $src.Resize (printf "%sx" $mediumw) }}
+  {{ $large := $src.Resize (printf "%sx" $largew) }}
+
+  <div class="carousel-item {{ if eq $i 0 }} active {{ end }}">
+  <img
+    class = "w-100"
+    srcset='
+    {{ with $tiny.RelPermalink }}{{.}} {{(printf "%sw" $tinyw)}} {{ end }},
+    {{ with $small.RelPermalink }}{{.}} {{(printf "%sw" $smallw)}} {{ end }},
+    {{ with $medium.RelPermalink }}{{.}} {{(printf "%sw" $mediumw)}} {{ end }},
+    {{ with $large.RelPermalink }}{{.}} {{(printf "%sw" $largew)}} {{ end }}
+    '
+    sizes='
+      (max-width: {{(printf "%spx" $tinyw)}}) {{(printf "%spx" $tinyw)}},
+      (max-width: {{(printf "%spx" $smallw)}}) {{(printf "%spx" $smallw)}},
+      (max-width: {{(printf "%spx" $mediumw)}}) {{(printf "%spx" $mediumw)}},
+      (max-width: {{(printf "%spx" $largew)}}) {{(printf "%spx" $largew)}},
+      100%
+    '
+  >
+  </div>
+
+{{ end }}
\ No newline at end of file