fix(single.html): ✏️ clean up HTML structure and improve readability

* Adjusted indentation and spacing for better code clarity.
* Ensured consistent formatting across various sections.
* Enhanced the share button links for improved accessibility.

Author: HeyItsGilbert

themes/powershell-community/layouts/_default/single.html

@@ -12,23 +12,26 @@
                     {{ if eq .Section "podcast" }}
                     <li><a href="/podcast/" class="hover:text-blue-600 transition-colors duration-200">Podcast</a></li>
                     {{ else }}
-                    <li><a href="/articles/" class="hover:text-blue-600 transition-colors duration-200">Articles</a></li>
+                    <li><a href="/articles/" class="hover:text-blue-600 transition-colors duration-200">Articles</a>
+                    </li>
                     {{ end }}
                     <li><i class="fas fa-chevron-right text-xs"></i></li>
                     <li class="text-gray-900 font-medium truncate">{{ .Title }}</li>
                 </ol>
             </nav>
-            
+
             <!-- Article Meta -->
             <div class="flex flex-wrap items-center gap-4 mb-6">
                 {{ if eq .Section "podcast" }}
-                <span class="inline-flex items-center bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium">
+                <span
+                    class="inline-flex items-center bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium">
                     <i class="fas fa-podcast mr-2"></i>Podcast
                 </span>
                 {{ end }}
                 {{ with .Params.categories }}
                 {{ range . }}
-                <span class="inline-flex items-center bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">
+                <span
+                    class="inline-flex items-center bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">
                     {{ . }}
                 </span>
                 {{ end }}
@@ -38,10 +41,10 @@
                 <span class="text-gray-600 text-sm">{{ .Params.duration }}</span>
                 {{ end }}
             </div>
-            
+
             <!-- Title -->
             <h1 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-4 leading-tight">{{ .Title }}</h1>
-            
+
             <!-- Author and Reading Time -->
             <div class="flex items-center justify-between">
                 <div class="flex items-center space-x-4">
@@ -50,35 +53,33 @@ <h1 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-4 leading-tight">{{ .
                         <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center mr-3">
                             <i class="fas fa-user text-white text-sm"></i>
                         </div>
-                        <a href="{{ "/authors/" | relURL }}{{ . | urlize }}/" class="font-medium hover:text-blue-600 transition-colors duration-200">{{ . }}</a>
+                        <a href="{{ " /authors/" | relURL }}{{ . | urlize }}/"
+                            class="font-medium hover:text-blue-600 transition-colors duration-200">{{ . }}</a>
                     </div>
                     {{ end }}
                     <span class="text-gray-400">•</span>
                     <span class="text-gray-600 text-sm">{{ .ReadingTime }} min read</span>
                 </div>
-                
+
                 <!-- Share Buttons -->
                 <div class="flex items-center space-x-2">
                     <span class="text-gray-600 text-sm mr-2">Share:</span>
-                    <a href="https://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}" 
-                       target="_blank" rel="noopener"
-                       class="text-gray-500 hover:text-blue-400 transition-colors duration-200">
+                    <a href="https://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}" target="_blank"
+                        rel="noopener" class="text-gray-500 hover:text-blue-400 transition-colors duration-200">
                         <i class="fab fa-twitter"></i>
                     </a>
-                    <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ .Permalink }}" 
-                       target="_blank" rel="noopener"
-                       class="text-gray-500 hover:text-blue-600 transition-colors duration-200">
+                    <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ .Permalink }}" target="_blank"
+                        rel="noopener" class="text-gray-500 hover:text-blue-600 transition-colors duration-200">
                         <i class="fab fa-linkedin"></i>
                     </a>
-                    <button onclick="navigator.clipboard.writeText('{{ .Permalink }}')" 
-                            class="text-gray-500 hover:text-gray-700 transition-colors duration-200"
-                            title="Copy link">
+                    <button onclick="navigator.clipboard.writeText('{{ .Permalink }}')"
+                        class="text-gray-500 hover:text-gray-700 transition-colors duration-200" title="Copy link">
                         <i class="fas fa-link"></i>
                     </button>
                 </div>
             </div>
         </header>
-        
+
         <!-- Podcast Player (if podcast) -->
         {{ if and (eq .Section "podcast") .Params.podcast_url }}
         <div class="mb-8 p-6 bg-gradient-to-r from-purple-50 to-purple-100 rounded-xl">
@@ -97,30 +98,30 @@ <h3 class="font-semibold text-gray-900">Listen to this Episode</h3>
             </audio>
         </div>
         {{ end }}
-        
+
         <!-- Article Content -->
         <div class="prose" style="max-width: none; font-size: 1.125rem;">
             {{ .Content }}
         </div>
-        
+
         <!-- Tags -->
         {{ with .Params.tags }}
         <div class="mt-6 pt-6 border-t border-gray-200">
             <h3 class="text-lg font-semibold text-gray-900 mb-3">Tags</h3>
             <div class="flex flex-wrap gap-2">
                 {{ range . }}
-                <a href="{{ "/tags/" | relURL }}{{ . | urlize }}/" 
-                   class="inline-block bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm font-medium hover:bg-blue-100 hover:text-blue-700 transition-colors duration-200">
+                <a href="{{ " /tags/" | relURL }}{{ . | urlize }}/"
+                    class="inline-block bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm font-medium hover:bg-blue-100 hover:text-blue-700 transition-colors duration-200">
                     #{{ . }}
                 </a>
                 {{ end }}
             </div>
         </div>
         {{ end }}
-        
+
         <!-- About the Author (sourced from author profiles) -->
         {{ partial "article-author-about.html" . }}
-        
+
         <!-- Related Posts -->
         {{ $related := .Site.RegularPages.Related . | first 3 }}
         {{ if $related }}
@@ -136,7 +137,12 @@ <h4 class="text-lg font-semibold text-gray-900 mb-3 line-clamp-2">
                                 {{ .Title }}
                             </a>
                         </h4>
-                        <p class="text-gray-600 text-sm line-clamp-3">{{ .Summary }}</p>
+                        <p class="text-gray-600 text-sm line-clamp-3">{{ .Summary | plainify | truncate 125 }}</p>
+                        <a href="{{ .RelPermalink }}"
+                            class="inline-flex items-center mt-4 text-sm font-medium text-blue-600 hover:text-blue-700 transition-colors duration-200">
+                            Read more
+                            <i class="fas fa-arrow-right ml-2 text-xs" aria-hidden="true"></i>
+                        </a>
                     </div>
                 </article>
                 {{ end }}
@@ -149,7 +155,7 @@ <h4 class="text-lg font-semibold text-gray-900 mb-3 line-clamp-2">
             <div class="flex justify-between items-center">
                 {{ with .PrevInSection }}
                 <a href="{{ .RelPermalink }}"
-                   class="flex items-center text-blue-600 hover:text-blue-700 font-medium transition-colors duration-200">
+                    class="flex items-center text-blue-600 hover:text-blue-700 font-medium transition-colors duration-200">
                     <i class="fas fa-chevron-left mr-2"></i>
                     <span class="truncate max-w-xs">{{ .Title }}</span>
                 </a>
@@ -159,7 +165,7 @@ <h4 class="text-lg font-semibold text-gray-900 mb-3 line-clamp-2">
 
                 {{ with .NextInSection }}
                 <a href="{{ .RelPermalink }}"
-                   class="flex items-center text-blue-600 hover:text-blue-700 font-medium transition-colors duration-200">
+                    class="flex items-center text-blue-600 hover:text-blue-700 font-medium transition-colors duration-200">
                     <span class="truncate max-w-xs">{{ .Title }}</span>
                     <i class="fas fa-chevron-right ml-2"></i>
                 </a>
@@ -173,23 +179,23 @@ <h4 class="text-lg font-semibold text-gray-900 mb-3 line-clamp-2">
 
 {{ define "scripts" }}
 <script>
-// Copy link functionality
-function copyToClipboard(text) {
-    navigator.clipboard.writeText(text).then(function() {
-        // You could add a toast notification here
-        console.log('Link copied to clipboard');
-    });
-}
+    // Copy link functionality
+    function copyToClipboard(text) {
+        navigator.clipboard.writeText(text).then(function () {
+            // You could add a toast notification here
+            console.log('Link copied to clipboard');
+        });
+    }
 
-// Smooth scrolling for anchor links within the article
-document.querySelectorAll('.prose a[href^="#"]').forEach(anchor => {
-    anchor.addEventListener('click', function (e) {
-        e.preventDefault();
-        const target = document.querySelector(this.getAttribute('href'));
-        if (target) {
-            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
-        }
+    // Smooth scrolling for anchor links within the article
+    document.querySelectorAll('.prose a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            }
+        });
     });
-});
 </script>
 {{ end }}