Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
HeyItsGilbert merged 1 commit into from
Jun 23, 2026
Merged

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 49 additions & 43 deletions themes/powershell-community/layouts/_default/single.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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 }}
Expand All @@ -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 }}
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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 }}
Loading