Rating System Implementation

[recursivezero]

GitHub Discussion: Implementing a Client-Side Star Rating System in Astro

Here's a clean, discussion-style format with minimal CSS and Astro code snippets:

# Client-Side Star Rating System for Static Astro Sites

**Problem**: How to implement a persistent star rating system without server-side code?

**Solution**: Use localStorage to save ratings per item with unique identifiers.

## Minimal Implementation

### 1. Create the StarRating Component

```astro
---
// src/components/StarRating.astro
const { itemId, maxStars = 5, interactive = true } = Astro.props;
const storageKey = `rating-${itemId}`;
---

<div class="stars" data-item-id={itemId}>
  {Array.from({ length: maxStars }).map((_, i) => (
    <span class="star" data-value={i+1}>★</span>
  ))}
</div>

<style>
  .stars { font-size: 1.5rem; }
  .star { 
    color: #ddd; 
    cursor: pointer; 
    transition: color 0.2s;
  }
  .star:hover, .star.active { color: gold; }
</style>

<script is:inline>
  // Load saved rating
  const starsEl = document.querySelector('.stars[data-item-id="${itemId}"]');
  const savedRating = localStorage.getItem('${storageKey}');
  
  if (savedRating) {
    starsEl.querySelectorAll('.star').forEach(star => {
      star.classList.toggle('active', star.dataset.value <= savedRating);
    });
  }

  // Handle clicks
  starsEl?.addEventListener('click', (e) => {
    if (!e.target.classList.contains('star')) return;
    
    const rating = e.target.dataset.value;
    localStorage.setItem('${storageKey}', rating);
    
    // Update UI
    starsEl.querySelectorAll('.star').forEach(star => {
      star.classList.toggle('active', star.dataset.value <= rating);
    });
  });
</script>

2. Usage in Pages

---
// src/pages/product/[id].astro
import StarRating from '../../components/StarRating.astro';
const { id } = Astro.params;
---

<article>
  <h2>Product #{id}</h2>
  <StarRating itemId={`product-${id}`} />
</article>

Key Features

• ✅ Persistent ratings using localStorage
• ✅ Unique per item using itemId prop
• ✅ No external dependencies
• ✅ Progressive enhancement (works without JS, though without persistence)

Variations

Display-Only Version

<StarRating 
  itemId={`product-${id}`} 
  interactive={false} 
  currentRating={4.5} 
/>

Half-Star Ratings

Add this CSS:

.star.half:after {
  content: '★';
  position: absolute;
  width: 50%;
  overflow: hidden;
  color: gold;
}

Limitations

• Ratings are browser-specific
• No aggregation across users
• Limited to ~5MB storage (plenty for ratings)

Q: How would you extend this system? Share your ideas below!

This format:
1. Clearly states the problem and solution
2. Provides minimal, copy-pasteable code
3. Includes usage examples
4. Notes limitations
5. Encourages discussion

Would you like me to modify any part of this discussion format?

[recursivezero]

@1046prt check this and do the next things on stories section

We will store ratings in local storage only