Skip to content

Fix broken search on /articles/ (and other list pages)#28

Closed
HeyItsGilbert wants to merge 1 commit into
mainfrom
claude/ecstatic-ride-clfhmd
Closed

Fix broken search on /articles/ (and other list pages)#28
HeyItsGilbert wants to merge 1 commit into
mainfrom
claude/ecstatic-ride-clfhmd

Conversation

@HeyItsGilbert

Copy link
Copy Markdown
Member

Problem

The search box on /articles/ (and any list page with the same template) did nothing when you typed in it.

Root cause

The client-side filter in themes/powershell-community/layouts/_default/list.html throws a TypeError on the first card and aborts:

  • Cards only get a data-tags attribute when the article has tags:
    {{ if .Params.tags }}data-tags="..."{{ end }}
    
  • No articles use tags (they use categories/authors), so data-tags is never rendered.
  • The search JS unconditionally calls .includes() on it:
    const tags = item.dataset.tags;   // undefined
    ... || tags.includes(searchTerm)  // TypeError: Cannot read properties of undefined
  • The error throws inside the forEach on the first card, so the handler aborts and nothing filters.

Fix

Default the dataset reads to empty strings so a missing attribute no longer crashes the filter:

const title = item.dataset.title || '';
const content = item.dataset.content || '';
const tags = item.dataset.tags || '';

Known remaining limitation (not addressed here)

The filter only loops over .content-item elements currently in the DOM, which is just the paginated page (pagerSize: 10). So search only matches within the current page, not across all articles. Fixing that properly would require a real client-side index (e.g. Fuse.js + a generated JSON index) or server-side search — happy to follow up if wanted.

🤖 Generated with Claude Code


Generated by Claude Code

The client-side search filter threw a TypeError on every card because
data-tags is only rendered when an article has tags, but no articles use
tags (they use categories). Reading item.dataset.tags returned undefined
and calling .includes() on it aborted the filter loop, so search did
nothing.

Default the dataset reads to empty strings so missing attributes no
longer crash the filter.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Px3dibHBwyDeWD2HMwwzoX
@netlify

netlify Bot commented Jun 21, 2026

Copy link
Copy Markdown

Deploy Preview for powershellorg ready!

Name Link
🔨 Latest commit a990469
🔍 Latest deploy log https://app.netlify.com/projects/powershellorg/deploys/6a374a3dec8dcb00086a9e26
😎 Deploy Preview https://deploy-preview-28--powershellorg.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@HeyItsGilbert HeyItsGilbert marked this pull request as ready for review June 21, 2026 02:25
@HeyItsGilbert

Copy link
Copy Markdown
Member Author

This only works if all the pages are rendered. Will look into a more comprehensive solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants