From 312cc3f19a48b560ce64f195a8364916d6a0b4aa Mon Sep 17 00:00:00 2001
From: "Martin Hinshelwood nkdAgility.com" <martin@nkdagility.com>
Date: Fri, 15 Nov 2024 08:37:51 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(podcasts):=20enhance=20podcast=20c?=
 =?UTF-8?q?ontent=20with=20YouTube=20integration=20and=20modularize=20layo?=
 =?UTF-8?q?ut?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Update podcast content to include YouTube video integration by adding
`youtube_video_id` to the parameters and using it in iframes. This
enhances the user experience by allowing video playback directly on
the site. Modularize the podcast layout by creating a new partial
`podcastB.html` to improve code maintainability and reusability.
Refactor the podcast list layout to use the new partial, reducing
repetition and simplifying the HTML structure. These changes aim to
improve the site's functionality and maintainability.
---
 site/content/podcasts/_content.gotmpl |  3 +-
 site/layouts/_default/baseof.html     |  2 +-
 site/layouts/index.html               |  2 +-
 site/layouts/partials/podcastA.html   |  8 +++---
 site/layouts/partials/podcastB.html   | 31 +++++++++++++++++++++
 site/layouts/podcasts/list.html       | 40 +++------------------------
 6 files changed, 43 insertions(+), 43 deletions(-)
 create mode 100644 site/layouts/partials/podcastB.html

diff --git a/site/content/podcasts/_content.gotmpl b/site/content/podcasts/_content.gotmpl
index ea9918c..82cdc88 100644
--- a/site/content/podcasts/_content.gotmpl
+++ b/site/content/podcasts/_content.gotmpl
@@ -3,13 +3,14 @@
   {{ range $episodes }}
     {{ $content := dict
       "mediaType" "text/markdown"
-      "value" .description
+      "value" (printf "%s\n\n%s" .description .iframe)
     }}
     {{ $params := dict
       "duration" .duration_ms
       "preview" (index .images 0).url
       "audio_preview_url" .audio_preview_url
       "id" .id
+      "youtube_video_id" .youtube_video_id
     }}
     {{ $dates := dict "date" (time.AsTime .release_date) }}
     {{ $page := dict
diff --git a/site/layouts/_default/baseof.html b/site/layouts/_default/baseof.html
index 243e839..6d7ad37 100644
--- a/site/layouts/_default/baseof.html
+++ b/site/layouts/_default/baseof.html
@@ -78,7 +78,7 @@
           <div class="image-overlay"></div>
           <div class="r-container  position-relative" style="z-index: 2;">
             <div class="d-flex flex-column">
-              <h2 class="font-1 fw-bold">Our <span class="accent-color">{{ .Page.Title }}</span></h2>
+              <h2 class="font-1 fw-bold">{{ if eq .Kind "section" }}Our&nbsp;{{ end }}<span class="accent-color">{{ .Page.Title }}</span></h2>
               <nav aria-label="breadcrumb">
                 <ol class="breadcrumb font-2">
                   {{ $page := . }}
diff --git a/site/layouts/index.html b/site/layouts/index.html
index f76cba8..b69d4ae 100644
--- a/site/layouts/index.html
+++ b/site/layouts/index.html
@@ -123,7 +123,7 @@ <h2 class="font-1 fw-bold m-0">{{ partial "ordinal.html" $totalPodcasts }}</h2>
               <div class="modal fade bg-overlay" id="modal-about" tabindex="-1" aria-hidden="true">
                 <div class="modal-dialog modal-dialog-centered modal-lg">
                   <div class="modal-content bg-dark-color">
-                    <iframe class="ifr-video" src="https://www.youtube.com/embed/FK2RaJ1EfA8?autoplay=1"></iframe>
+                    <iframe class="ifr-video" src="https://www.youtube.com/embed/{{ .Params.youtube_video_id }}?autoplay=1"></iframe>
                   </div>
                 </div>
               </div>
diff --git a/site/layouts/partials/podcastA.html b/site/layouts/partials/podcastA.html
index 6f82fef..aeb956c 100644
--- a/site/layouts/partials/podcastA.html
+++ b/site/layouts/partials/podcastA.html
@@ -3,7 +3,7 @@
     <div class="image-overlay-2"></div>
     <div class="position-absolute start-0 top-0 w-100 h-100" style="z-index: 2;">
       <div class="d-flex justify-content-center align-items-center h-100">
-        <button type="button" class="btn request-loader" data-bs-toggle="modal" data-bs-target="#modal-1">
+        <button type="button" class="btn request-loader" data-bs-toggle="modal" data-bs-target="#modal-{{- .Params.id }}">
           <i class="fa-solid fa-play ms-1"></i>
         </button>
       </div>
@@ -24,12 +24,12 @@
       {{ .Date | time.Format  "2 January 2006" }}
     </div>
   </div>
-  <h5 class="font-1 fw-bold lh-1">{{ .Title }}</h5>
+  <h5 class="font-1 fw-bold lh-1"><a href="{{ .Permalink }}">{{ .Title }}</a></h5>
 </div>
-<div class="modal fade bg-overlay" id="modal-1" tabindex="-1" aria-hidden="true">
+<div class="modal fade bg-overlay" id="modal-{{- .Params.id }}" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered modal-lg">
     <div class="modal-content bg-dark-color">
-      <iframe class="ifr-video" src="https://www.youtube.com/embed/FK2RaJ1EfA8?autoplay=1"></iframe>
+      <iframe class="ifr-video" src="https://www.youtube.com/embed/{{ .Params.youtube_video_id }}?autoplay=0"></iframe>
     </div>
   </div>
 </div>
diff --git a/site/layouts/partials/podcastB.html b/site/layouts/partials/podcastB.html
new file mode 100644
index 0000000..65b5da2
--- /dev/null
+++ b/site/layouts/partials/podcastB.html
@@ -0,0 +1,31 @@
+<div class="d-flex flex-column gap-3 h-100">
+  <div class="position-relative h-100">
+    <a href="{{ .Permalink }}" class="stretched-link" style="z-index: 100;"></a>
+    <!-- Stretched link -->
+    <div class="overlay rounded-3"></div>
+    {{ if .Params.preview }}
+      <img src="{{ .Params.preview | relURL }}" alt="image" class="img-fluid rounded-3" />
+    {{ else }}
+      <img src="{{ "/image/dummy-img-600x500.jpg" | relURL }}" alt="image" class="img-fluid rounded-3" />
+    {{ end }}
+    <div class="position-absolute bottom-0 start-0 w-100 d-flex flex-column px-4 py-3">
+      <h5 class="font-1 fw-bold lh-1">{{ .Title }}</h5>
+      <div class="d-flex flex-row justify-content-center gap-5">
+        <div class="d-flex flex-row align-items-center gap-2">
+          <i class="fa-regular fa-clock accent-color"></i>{{- partial "duration-in-hours.html" .Params.duration }}
+        </div>
+        <div class="d-flex flex-row align-items-center gap-2">
+          <i class="fa-solid fa-calendar-days accent-color"></i>
+          {{ .Date | time.Format  "2 January 2006" }}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="modal fade bg-overlay" id="e119" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered modal-lg">
+    <div class="modal-content bg-dark-color">
+      <iframe class="ifr-video" src="https://www.youtube.com/embed/{{ .Params.youtube_video_id }}?autoplay=0"></iframe>
+    </div>
+  </div>
+</div>
diff --git a/site/layouts/podcasts/list.html b/site/layouts/podcasts/list.html
index c343071..5687598 100644
--- a/site/layouts/podcasts/list.html
+++ b/site/layouts/podcasts/list.html
@@ -11,46 +11,14 @@ <h3 class="font-1 fw-bold lh-1"><span class="accent-color">Recent</span> Episode
         <div class="row row-cols-1 row-cols-lg-3">
           {{ range .Pages }}
             <div class="col mb-4">
-              <div class="d-flex flex-column gap-3 h-100">
-                <div class="position-relative h-100">
-                  <div class="overlay rounded-3"></div>
-                  <div class="position-absolute start-0 top-0 w-100 h-100" style="z-index: 2;">
-                    <div class="d-flex justify-content-center align-items-center h-100">
-                      <button type="button" class="btn request-loader" data-bs-toggle="modal" data-bs-target="#e119">
-                        <i class="fa-solid fa-play ms-1"></i>
-                      </button>
-                    </div>
-                  </div>
-                  {{ if .Params.preview }}
-                    <img src="{{ .Params.preview | relURL }}" alt="image" class="img-fluid rounded-3" />
-                  {{ else }}
-                    <img src="{{ "/image/dummy-img-600x500.jpg" | relURL }}" alt="image" class="img-fluid rounded-3" />
-                  {{ end }}
-                  <div class="position-absolute bottom-0 start-0 w-100 d-flex flex-column px-4 py-3">
-                    <h5 class="font-1 fw-bold lh-1">{{ .Title }}</h5>
-                    <div class="d-flex flex-row justify-content-center gap-5">
-                      <div class="d-flex flex-row align-items-center gap-2"><i class="fa-regular fa-clock accent-color"></i>{{- partial "duration-in-hours.html" .Params.duration }}</div>
-                      <div class="d-flex flex-row align-items-center gap-2">
-                        <i class="fa-solid fa-calendar-days accent-color"></i>
-                        {{ .Date | time.Format  "2 January 2006" }}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="modal fade bg-overlay" id="e119" tabindex="-1" aria-hidden="true">
-                <div class="modal-dialog modal-dialog-centered modal-lg">
-                  <div class="modal-content bg-dark-color">
-                    <iframe class="ifr-video" src="https://www.youtube.com/embed/FK2RaJ1EfA8?autoplay=1"></iframe>
-                  </div>
-                </div>
-              </div>
+              {{ partial "podcastB.html" . }}
             </div>
           {{ end }}
         </div>
-        <div class="d-flex justify-content-center">
+        {{/* <div class="d-flex justify-content-center">
           <a href="" class="btn button font-1 ls-2">VIEW ALL PODCASTS </a>
-        </div>
+          </div>
+        */}}
       </div>
     </div>
   </section>