Caleb/Blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add basic tag support for showing and filtering tagged posts

Browse Source
This commit is contained in:
Caleb Braaten
2026-01-12 13:49:23 -08:00
parent b0fd1b6d9e
commit 88b6d1bade
7 changed files with 109 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/frontend/clientJS/tag-picker.ts
View File

@@ -27,12 +27,12 @@ class TagPickerManager {
// Toggle a tag and update the page
toggleTag(tagName: string) {
const currentTags = this.getActiveTags();
// Toggle logic: if tag is active, remove it; otherwise add it
const newTags = currentTags.includes(tagName)
const newTags = currentTags.includes(tagName)
? currentTags.filter(t => t !== tagName)
: [...currentTags, tagName];
// Navigate to new URL
const queryString = this.generateTagQueryString(newTags);
const newUrl = queryString ? `/?${queryString}` : '/';
@@ -42,7 +42,7 @@ class TagPickerManager {
// Attach click listeners to tag links
attachTagClickListeners() {
const tagLinks = document.querySelectorAll('.tag-pill, .post-tag');
tagLinks.forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
@@ -57,7 +57,7 @@ class TagPickerManager {
// Update visual state of tags based on current URL
updateTagVisualState() {
const activeTags = this.getActiveTags();
// Update tag pills in sidebar
document.querySelectorAll('.tag-pill').forEach(link => {
const tagName = link.textContent?.trim();
@@ -98,5 +98,3 @@ document.addEventListener('DOMContentLoaded', () => {
if (document.readyState === 'interactive' || document.readyState === 'complete') {
tagPickerManager.updateTagVisualState();
}
export { TagPickerManager };

136
src/frontend/components/tag-picker.tsx
View File

@@ -1,21 +1,24 @@
import React from 'react';
import tagPickerScript from '../clientJS/tag-picker.js' with { type: "text" };
import { minifyJS } from '../utils';
export function TagPicker({ availableTags = [], activeTags = [] }: {
availableTags?: { name: string; post_count: number }[],
activeTags?: string[]
}) {
import { getAllTags } from '../../db/tags';
const tags = getAllTags();
export function TagPicker() {
return (
<div className="tags sheet-background">
<h3>Tags</h3>
{availableTags.length > 0 ? (
{tags.length > 0 ? (
<ul className="tag-pills">
{availableTags.map(tag => (
{tags.map(tag => (
<li key={tag.name}>
<a
<a
data-tag
href={`?tag=${tag.name.toLowerCase().replace(/\s+/g, '-')}`}
className="tag-pill"
title={`${tag.post_count} post${tag.post_count !== 1 ? 's' : ''} (click to toggle)`}
title={`${tag.post_count} post${tag.post_count !== 1 ? 's' : ''} (click to view)`}
>
{tag.name}
</a>
@@ -30,122 +33,7 @@ export function TagPicker({ availableTags = [], activeTags = [] }: {
Clear all filters
</a>
</div>
<script dangerouslySetInnerHTML={{ __html: minifyJS(tagToggleScript) }} />
<script dangerouslySetInnerHTML={{ __html: minifyJS(tagPickerScript) }} />
</div>
)
}
// Client-side script for tag toggle functionality
const tagToggleScript = `
(function() {
'use strict';
class TagPickerManager {
constructor() {
this.init();
}
init() {
this.attachTagClickListeners();
this.updateTagVisualState();
}
// Parse current URL to get active tags
getActiveTags() {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.getAll('tag').map(tag => decodeURIComponent(tag).replace(/-/g, ' '));
}
// Generate query string from tags array
generateTagQueryString(tags) {
if (tags.length === 0) return '';
const params = new URLSearchParams();
tags.forEach(tag => {
params.append('tag', tag.toLowerCase().replace(/\\s+/g, '-'));
});
return params.toString();
}
// Toggle a tag and update the page
toggleTag(tagName) {
const currentTags = this.getActiveTags();
// Toggle logic: if tag is active, remove it; otherwise add it
const newTags = currentTags.includes(tagName)
? currentTags.filter(t => t !== tagName)
: [...currentTags, tagName];
// Navigate to new URL
const queryString = this.generateTagQueryString(newTags);
const newUrl = queryString ? \`/?\${queryString}\` : '/';
window.location.href = newUrl;
}
// Attach click listeners to tag links
attachTagClickListeners() {
const tagLinks = document.querySelectorAll('.tag-pill, .post-tag');
tagLinks.forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
const tagName = link.textContent?.trim();
if (tagName) {
this.toggleTag(tagName);
}
});
});
}
// Update visual state of tags based on current URL
updateTagVisualState() {
const activeTags = this.getActiveTags();
// Update tag pills in sidebar
document.querySelectorAll('.tag-pill').forEach(link => {
const tagName = link.textContent?.trim();
if (tagName && activeTags.includes(tagName)) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
// Update post tags
document.querySelectorAll('.post-tag').forEach(link => {
const tagName = link.textContent?.trim();
if (tagName && activeTags.includes(tagName)) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
// Update clear filters button visibility
const tagActions = document.querySelector('.tag-actions');
if (tagActions) {
tagActions.style.display = activeTags.length > 0 ? 'block' : 'none';
}
}
}
// Initialize on DOM ready
function initializeTagPicker() {
// Remove any existing instance
if (window.tagPickerManager) {
delete window.tagPickerManager;
}
// Create new instance
window.tagPickerManager = new TagPickerManager();
}
// Wait for DOM to be ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initializeTagPicker);
} else {
initializeTagPicker();
}
})();
`;

1
src/frontend/onLoad.ts
View File

@@ -24,7 +24,6 @@ function attachLinkHandlers() {
const links: NodeListOf<HTMLAnchorElement> = document.querySelectorAll('a:not([data-external])');
links.forEach(link => {
console.log('Attaching listener to:', link.href);
link.onclick = async (e) => {
console.log('clicked', link.href);
e.preventDefault();

12
src/frontend/pages/home.tsx
View File

@@ -3,12 +3,16 @@ import { getRecentPosts, formatDate, calculateReadTime, getNumOfPosts } from '..
import { parseTags } from '../../db/tags';
import { type BlogPost } from '../../db/queries';
export function Home({ searchParams }: { searchParams: Record<string, string> }) {
const currentPage = parseInt(searchParams.page || "1", 10);
export function Home({ searchParams }: { searchParams: URLSearchParams }) {
const postsPerPage = 10;
const totalPages = Math.ceil(getNumOfPosts() / postsPerPage);
const tags = searchParams.getAll('tag');
const currentPage = parseInt(searchParams.get('page') || "1", 10);
const totalPages = Math.ceil(getNumOfPosts(tags) / postsPerPage);
const offset = (currentPage - 1) * postsPerPage;
const posts = getRecentPosts(postsPerPage, offset); // Get posts for the current page
const posts = getRecentPosts(postsPerPage, offset, tags); // Get posts for the current page
return (
<main>

9
src/frontend/styles.css
View File

@@ -569,9 +569,6 @@ h1 {
background-color: var(--text-primary);
color: var(--bg-primary);
border-color: var(--text-primary);
font-weight: 600;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transform: scale(1.05);
}
/* Tag actions for clearing filters */
@@ -1099,15 +1096,15 @@ h1 {
.post-title {
font-size: 28px;
}
.back-button {
margin-bottom: 12px;
}
.back-link {
font-size: 13px;
}
.back-arrow {
font-size: 15px;
margin-right: 6px;