✨ (resources/single.html): enhance layout and add new features for resource pages

The layout of the resource pages is improved by increasing the
maximum width of sections and adding a new "technically agile"
branding element. The changes also introduce a new section for
related blog posts and related videos, enhancing user engagement
by providing additional content. Additionally, support for an
AudioNative player from Eleven Labs is added, allowing audio
content to be rendered conditionally based on the environment.
These enhancements aim to improve the user experience and provide
more dynamic content options.

Author: MrHinsh

site/layouts/resources/single.html

@@ -1,30 +1,98 @@
 {{- define "headline" }}
-  <section class="container my-2" style="max-width: 700px !important">
-    <div class="row p-2">
-      <div class="col-12">
-        {{- partial "publications/resourceType.html" . }}
-        <h1 class="mb-4 nkda-heading-primary">{{- .Title | markdownify }}</h1>
-        {{- if .Params.subtitle }}
-          <h2 class="mb-4 nkda-heading-secondary">{{- .Params.subtitle | markdownify }}</h2>
-        {{- end }}
-        {{- partial "publications/craft.html" . }}
-        {{- partial "publications/share-bar.html" . }}
+  <section class="container-fluid resources-headline py-md-4">
+    <section class="container my-2" style="max-width: 900px !important">
+      <div>
+        <div class="row">
+          <div class="col-12 col-xl-8">
+            {{- partial "publications/resourceType.html" . }}
+          </div>
+          <div class="col-xl-4 d-none d-xl-flex justify-content-end align-items-center">
+            <h4>tech·nic·al·ly agile</h4>
+          </div>
+          <div class="col-12 col-xl-8">
+            <h1 class="mb-4 nkda-heading-primary">{{- .Title | markdownify }}</h1>
+            {{- if .Params.subtitle }}
+              <h2 class="mb-4 nkda-heading-secondary">{{- .Params.subtitle | markdownify }}</h2>
+            {{ else }}
+              <h2 class="mb-4 nkda-heading-secondary">{{- .Description | markdownify }}</h2>
+            {{- end }}
+            {{- partial "publications/craft.html" . }}
+          </div>
+          <div class="col-xl-4 d-none d-xl-flex justify-content-center align-items-center">
+            <div class="position-relative">
+              <img src="/images/technically-agile-logo.png" />
+              <img src="/images/nkdagility-with-martin-hinshelwood-dark-300px.png" alt="Image" class="position-absolute top-0 end-0" style="width: 100px; height: auto;" />
+            </div>
+          </div>
+          <div class="col-xl-12 d-none d-xl-flex justify-content-end align-items-center">
+            {{ $url := "" }}
+            {{ if eq .Type "resources" }}
+              {{ $url = printf "https://nkdagility.com/resources/%s" .Params.ResourceId }}
+            {{ else }}
+              {{ $url = printf "https://nkdagility.com%s" .RelPermalink }}
+            {{ end }}
+            {{ $url }}
+          </div>
+        </div>
       </div>
-    </div>
+    </section>
+  </section>
+  <section class="container my-2" style="max-width: 900px !important">
+    {{- partial "publications/share-bar.html" . }}
   </section>
 {{- end }}
+
 {{- define "main" }}
-  <section class="container my-5" style="max-width: 700px !important">{{- .Content }}</section>
+
+  <!-- Change this date as needed -->
+  {{ if .Params.AudioNative }}
+    <section class="container my-5" style="max-width: 700px !important">
+      {{- if ne hugo.Environment "production" }}
+        <div>RENDER AUDIO NATIVE from Eleven Labs (Production only)</div>
+        <div>AudioNative: {{ .Params.AudioNative }}</div>
+      {{- else -}}
+        <div id="elevenlabs-audionative-widget" data-height="90" data-width="100%" data-frameborder="no" data-scrolling="no" data-publicuserid="71edc96043fbd75e5e1bd94d997b31cfa7932b5e94d7296094d7bc2906e081ab" data-playerurl="https://elevenlabs.io/player/index.html">Loading the <a href="https://elevenlabs.io/text-to-speech" target="_blank" rel="noopener">Elevenlabs Text to Speech</a> AudioNative Player...</div>
+        <script src="https://elevenlabs.io/player/audioNativeHelper.js" type="text/javascript"></script>
+      {{- end -}}
+    </section>
+  {{ end }}
+
+
+  <section class="container my-5 content" style="max-width: 700px !important">
+    {{- .Content }}
+  </section>
+
   <section class="container my-5" style="max-width: 700px !important">
     {{- partial "publications/tag-cloud.html" . }}
   </section>
-  <section class="container my-5" style="max-width: 700px !important">
+
+  <section class="container my-5" style="max-width: 900px !important">
     {{- partial "publications/share-bar.html" . }}
   </section>
   <section class="container my-5 p-2" style="max-width: 700px !important">
     {{- partial "publications/comments.html" . }}
   </section>
+
+  <section class="container my-5 p-2" style="max-width: 700px !important">
+    {{ $related := .Site.RegularPages.Related . }}
+    {{ $blogs := where $related ".Params.resourceTypes" "blog" | first 5 }}
+    {{ with $blogs }}
+      <h3>Related blog posts</h3>
+      <ul>
+        {{ range . }}
+          <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+        {{ end }}
+      </ul>
+    {{ else }}
+      <p>No related blog posts found.</p>
+    {{ end }}
+  </section>
+
+  <section class="container my-5 p-2" style="max-width: 700px !important">
+    {{- partial "related-videos.html" . }}
+  </section>
 {{- end }}
+
 {{- define "template" }}
-  resources/single.html
+  resources/blog.html
 {{- end }}