✨ (podcasts): enhance podcast content with YouTube integration and mo…

…dularize layout

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,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

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 := . }}

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>

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>

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>

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>