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

Add multi-tag selection support to tag-picker without client side JS

Browse Source
This commit is contained in:
Caleb Braaten 2026-01-14 15:03:23 -08:00
parent 85946a2b40
commit 560020632f
2 changed files with 29 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,15 +19,30 @@ export function TagPicker({ searchParams }: { searchParams?: URLSearchParams })
<h3>Tags</h3> <h3>Tags</h3>
<ul className="tag-pills"> <ul className="tag-pills">
{tags.map(tag => { {tags.map(tag => {
const active = selectedTags.includes(tag.urlNormalized) let active = selectedTags.includes(tag.urlNormalized)
let hyperlink = `/?tag=${tag.urlNormalized}`;
for (const existingTag of selectedTags) {
hyperlink += `&tag=${existingTag}`
}
// Remove the currently selected tag from the tag link url if applicable
if (active) {
hyperlink = hyperlink.split(`?tag=${tag.urlNormalized}`).join('')
hyperlink = hyperlink.split(`&tag=${tag.urlNormalized}`).join('')
}
// Make sure the hyperlink starts with a ? and not a & (or the root webpage)
hyperlink = '/?' + hyperlink.substring(2)
if(hyperlink.length == 2) hyperlink = '/'
return ( return (
< li key={tag.name} > < li key={tag.name} >
<a <a
title={`${tag.post_count} post${tag.post_count !== 1 ? 's' : ''} (click to view)`} title={active ? `Remove ${tag.name} from filter` : `Add ${tag.name} to filter`}
data-tag data-tag
className={`tag-pill ${active ? 'active' : ''}`} className={`tag-pill ${active ? 'active' : ''}`}
href={`?tag=${tag.urlNormalized}`} href={hyperlink}
> >
{tag.name} {tag.name}
</a> </a>

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

@ -39,7 +39,7 @@ export function Home({ searchParams }: { searchParams: URLSearchParams }) {
</div> </div>
)} )}
</div> </div>
<Pagination currentPage={currentPage} totalPages={totalPages} /> <Pagination searchParams={searchParams} currentPage={currentPage} totalPages={totalPages} />
</main> </main>
); );
} }
@ -85,7 +85,7 @@ function PostCard({ post }: { post: Post }) {
); );
} }
function Pagination({ currentPage, totalPages }: { currentPage: number; totalPages: number }) { function Pagination({ currentPage, totalPages, searchParams }:{ currentPage: number; totalPages: number, searchParams: URLSearchParams }) {
// Calculate the range of page numbers to show // Calculate the range of page numbers to show
let startPage: number; let startPage: number;
let endPage: number; let endPage: number;
@ -113,11 +113,17 @@ function Pagination({ currentPage, totalPages }: { currentPage: number; totalPag
const pages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i); const pages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);
let passThroughParams = ''
searchParams.forEach((val, key) => {
if(key != 'page')
passThroughParams += `&${key}=${val}`
})
return ( return (
<nav className="pagination"> <nav className="pagination">
{/* Previous button - always visible, disabled on first page */} {/* Previous button - always visible, disabled on first page */}
<a <a
href={`/?page=${currentPage - 1}`} href={`/?page=${currentPage - 1}${passThroughParams}`}
className={`pagination-link ${currentPage === 1 ? 'disabled' : ''}`} className={`pagination-link ${currentPage === 1 ? 'disabled' : ''}`}
style={{ style={{
opacity: currentPage === 1 ? 0.5 : 1, opacity: currentPage === 1 ? 0.5 : 1,
@ -132,7 +138,7 @@ function Pagination({ currentPage, totalPages }: { currentPage: number; totalPag
{pages.map((page) => ( {pages.map((page) => (
<a <a
key={page} key={page}
href={`/?page=${page}`} href={`/?page=${page}${passThroughParams}`}
className={`pagination-link ${page === currentPage ? 'active' : ''}`} className={`pagination-link ${page === currentPage ? 'active' : ''}`}
> >
{page} {page}
@ -141,7 +147,7 @@ function Pagination({ currentPage, totalPages }: { currentPage: number; totalPag
{/* Next button - always visible, disabled on last page */} {/* Next button - always visible, disabled on last page */}
<a <a
href={`/?page=${currentPage + 1}`} href={`/?page=${currentPage + 1}${passThroughParams}`}
className={`pagination-link ${currentPage === totalPages ? 'disabled' : ''}`} className={`pagination-link ${currentPage === totalPages ? 'disabled' : ''}`}
style={{ style={{
opacity: currentPage === totalPages ? 0.5 : 1, opacity: currentPage === totalPages ? 0.5 : 1,