glow/first-home-diy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add article feedback / rating widget #21

New issue
Closed
opened 2026-06-09 18:33:44 +00:00 by glow · 2 comments
glow commented 2026-06-09 18:33:44 +00:00
Owner
Copy link

No way for readers to indicate if an article was helpful.

Implementation:

  • Simple thumbs-up/thumbs-down at end of article
  • Optional 1-5 star rating
  • Store in localStorage (no backend needed)
  • Could wire to analytics events later
No way for readers to indicate if an article was helpful. Implementation: - Simple thumbs-up/thumbs-down at end of article - Optional 1-5 star rating - Store in localStorage (no backend needed) - Could wire to analytics events later
glow closed this issue 2026-06-09 19:13:26 +00:00
glow commented 2026-06-09 19:13:34 +00:00
Author
Owner
Copy link

Implemented article feedback widget in commit d762794:

  • New ArticleFeedback component at src/components/article-feedback.tsx
  • Thumbs-up / thumbs-down buttons with toggle behavior (click again to retract)
  • Stores vote per-article-slug in localStorage (feedback:{slug})
  • Loads existing vote from localStorage on mount via useVisibleTask$
  • Active state styled with success (thumbs up) / error (thumbs down) colors
  • Exposes optional onVote callback for future analytics wiring
  • Wired into article page before ArticleRelated component

Closes #21

Implemented article feedback widget in commit d762794: - New `ArticleFeedback` component at `src/components/article-feedback.tsx` - Thumbs-up / thumbs-down buttons with toggle behavior (click again to retract) - Stores vote per-article-slug in localStorage (`feedback:{slug}`) - Loads existing vote from localStorage on mount via `useVisibleTask$` - Active state styled with success (thumbs up) / error (thumbs down) colors - Exposes optional `onVote` callback for future analytics wiring - Wired into article page before `ArticleRelated` component Closes #21
glow commented 2026-06-09 19:15:21 +00:00
Author
Owner
Copy link

Updated: removed onVote prop to comply with Qwik's $() serialization rules (commit 6012f94). The linter rejects raw function references inside lexical $() scopes.

Final implementation:

  • src/components/article-feedback.tsx — thumbs-up/thumbs-down with localStorage persistence (`feedback:{slug}`)
  • Wired into article page at src/routes/articles/[slug]/index.tsx before ArticleRelated
  • Toggle behavior: click again to retract vote
  • Accessible with aria-pressed
  • Build produces 18 pages, lint clean

Deployed to https://firsthomefix-dev.hermes.tecinfra.xyz

Closes #21

Updated: removed `onVote` prop to comply with Qwik's `$()` serialization rules (commit 6012f94). The linter rejects raw function references inside lexical `$()` scopes. Final implementation: - `src/components/article-feedback.tsx` — thumbs-up/thumbs-down with localStorage persistence (\`feedback:{slug}\`) - Wired into article page at `src/routes/articles/[slug]/index.tsx` before `ArticleRelated` - Toggle behavior: click again to retract vote - Accessible with `aria-pressed` - Build produces 18 pages, lint clean Deployed to https://firsthomefix-dev.hermes.tecinfra.xyz Closes #21
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
No results found.
Labels
Clear labels   
bug
Bug fix

  
feature
New feature

  
improvement
Code improvements and refactors

No labels
bug
feature
improvement
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
glow/first-home-diy#21
No description provided.