118 lines
3.9 KiB
HTML
118 lines
3.9 KiB
HTML
{{ define "main" }}
|
|
<h1 class="page-title">{{ .Title }}</h1>
|
|
|
|
{{- if eq .Section "posts" }}
|
|
{{/* Blog archive listing */}}
|
|
|
|
<div class="tag-filter-container">
|
|
<div class="tags-cloud" style="margin-top: 0.5rem; margin-bottom: 2.5rem;">
|
|
<button class="tag-item active" data-filter="all">All</button>
|
|
{{- range $name, $taxonomy := .Site.Taxonomies.tags }}
|
|
<button class="tag-item" data-filter="{{ $name | urlize }}">#{{ $name }} <span class="tag-count">({{ len $taxonomy }})</span></button>
|
|
{{- end }}
|
|
</div>
|
|
</div>
|
|
|
|
{{- $posts := .Pages -}}
|
|
{{- $byYear := $posts.GroupByDate "2006" -}}
|
|
{{- range $byYear }}
|
|
<div class="archive-year">
|
|
<h3 class="year-heading">{{ .Key }}</h3>
|
|
<ul class="post-list">
|
|
{{- range .Pages }}
|
|
{{- $tagList := slice -}}
|
|
{{- range .Params.tags -}}
|
|
{{- $tagList = $tagList | append (. | urlize) -}}
|
|
{{- end -}}
|
|
<li class="post-list-item" data-tags="{{ delimit $tagList "," }}">
|
|
<time class="post-date" datetime="{{ .Date.Format "2006-01-02" }}">
|
|
{{ .Date.Format "02 Jan" }}
|
|
</time>
|
|
<div class="post-list-info">
|
|
<a href="{{ .Permalink }}" class="post-title-link">{{ .Title }}</a>
|
|
{{- with .Params.tags }}
|
|
<span class="post-list-tags">
|
|
{{- range . }}
|
|
<a href="/posts/?tag={{ . | urlize }}" class="post-list-tag">#{{ . }}</a>
|
|
{{- end }}
|
|
</span>
|
|
{{- end }}
|
|
</div>
|
|
</li>
|
|
{{- end }}
|
|
</ul>
|
|
</div>
|
|
{{- end }}
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const filterButtons = document.querySelectorAll('.tag-filter-container .tag-item');
|
|
const postItems = document.querySelectorAll('.post-list-item');
|
|
const archiveYears = document.querySelectorAll('.archive-year');
|
|
|
|
function applyFilter(filterValue) {
|
|
// Find and activate the correct button
|
|
let targetButton = Array.from(filterButtons).find(btn => btn.getAttribute('data-filter') === filterValue);
|
|
if (!targetButton) targetButton = filterButtons[0]; // fallback to 'all'
|
|
|
|
filterButtons.forEach(btn => btn.classList.remove('active'));
|
|
targetButton.classList.add('active');
|
|
|
|
const filter = targetButton.getAttribute('data-filter');
|
|
|
|
// Filter posts
|
|
postItems.forEach(item => {
|
|
if (filter === 'all') {
|
|
item.classList.remove('hidden');
|
|
} else {
|
|
const tags = item.getAttribute('data-tags') ? item.getAttribute('data-tags').split(',') : [];
|
|
if (tags.includes(filter)) {
|
|
item.classList.remove('hidden');
|
|
} else {
|
|
item.classList.add('hidden');
|
|
}
|
|
}
|
|
});
|
|
|
|
// Hide empty years
|
|
archiveYears.forEach(yearDiv => {
|
|
const visiblePosts = yearDiv.querySelectorAll('.post-list-item:not(.hidden)');
|
|
if (visiblePosts.length === 0) {
|
|
yearDiv.classList.add('hidden');
|
|
} else {
|
|
yearDiv.classList.remove('hidden');
|
|
}
|
|
});
|
|
}
|
|
|
|
filterButtons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
applyFilter(button.getAttribute('data-filter'));
|
|
|
|
// Update URL without reloading
|
|
const url = new URL(window.location);
|
|
if (button.getAttribute('data-filter') === 'all') {
|
|
url.searchParams.delete('tag');
|
|
} else {
|
|
url.searchParams.set('tag', button.getAttribute('data-filter'));
|
|
}
|
|
window.history.pushState({}, '', url);
|
|
});
|
|
});
|
|
|
|
// Check URL params on load
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const initialTag = urlParams.get('tag');
|
|
if (initialTag) {
|
|
applyFilter(initialTag);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{{- else }}
|
|
{{/* Generic page content */}}
|
|
<div class="post-content">
|
|
{{ .Content }}
|
|
</div>
|
|
{{- end }}
|
|
{{ end }}
|