deckhearth/pages/api/collections/[id]/thumbnails.js
Randall Stillwell 50a3156b92 🔗 Implement Collection Slug URLs
🎯 Vanity URLs for Collections:
- Added slug-based URLs like /collection/modern-masters-2021
- Backwards compatible with numeric IDs
- SEO-friendly and memorable URLs

🛠️ Slug System:
- Created lib/slug-utils.js with slug generation and validation
- generateSlug() converts names to URL-friendly format
- generateUniqueSlug() handles duplicates with numeric suffixes
- isValidSlug() validates format (lowercase, hyphens, no special chars)

📊 Database Schema:
- Added slug column to collections table with unique constraint
- Migration script adds slugs to existing collections
- Database constraints ensure slug format and uniqueness
- Performance index on slug column

🔌 API Updates:
- Updated collections API to generate slugs for new collections
- New [identifier].js endpoint handles both slugs and IDs
- Thumbnails API supports both slug and ID lookups
- Smart identifier detection (slug vs numeric ID)

🎨 Frontend Integration:
- Collections page uses slugs for navigation
- Fallback to ID if slug not available (backwards compatibility)
- Updated all collection links to use slugs
- Sample collections created with proper slugs

 URL Examples:
- /collection/modern-masters-2021 (new slug format)
- /collection/123 (old ID format still works)
- Automatic redirect potential for future

The collection URLs are now beautiful and shareable! 🚀
2025-07-26 22:06:52 -05:00

123 lines
No EOL
3.7 KiB
JavaScript

import { sql } from '@vercel/postgres';
import { getUserFromRequest } from '../../../../lib/permission-middleware';
import { isValidSlug } from '../../../../lib/slug-utils';
export default async function handler(req, res) {
// Set CORS headers
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
// Handle preflight requests
if (req.method === 'OPTIONS') {
res.status(200).end();
return;
}
if (req.method !== 'GET') {
return res.status(405).json({ error: 'Method not allowed' });
}
try {
// Get authenticated user
const user = await getUserFromRequest(req);
if (!user) {
return res.status(401).json({ error: 'Authentication required' });
}
const { id: identifier } = req.query;
if (!identifier) {
return res.status(400).json({ error: 'Collection identifier is required' });
}
// Determine if identifier is a slug or numeric ID
const isSlug = isValidSlug(identifier) || isNaN(parseInt(identifier));
// Verify user has access to this collection
let collectionResult;
if (isSlug) {
collectionResult = await sql`
SELECT c.*, cp.role as user_role
FROM collections c
LEFT JOIN collection_permissions cp ON c.id = cp.collection_id AND cp.user_id = ${user.userId} AND cp.status = 'active'
WHERE c.slug = ${identifier}
AND (
c.user_id = ${user.userId} OR
cp.id IS NOT NULL OR
c.is_public = true
)
`;
} else {
const numericId = parseInt(identifier);
collectionResult = await sql`
SELECT c.*, cp.role as user_role
FROM collections c
LEFT JOIN collection_permissions cp ON c.id = cp.collection_id AND cp.user_id = ${user.userId} AND cp.status = 'active'
WHERE c.id = ${numericId}
AND (
c.user_id = ${user.userId} OR
cp.id IS NOT NULL OR
c.is_public = true
)
`;
}
if (collectionResult.rows.length === 0) {
return res.status(404).json({ error: 'Collection not found or access denied' });
}
const collection = collectionResult.rows[0];
// Get the top 5 rarest cards from the collection
const thumbnailsResult = await sql`
SELECT DISTINCT
cards.id,
cards.name,
cards.rarity,
cards.image_url,
cards.stock_image_url,
cards.market_price,
cards.game,
cards.set_name,
cc.quantity
FROM collection_cards cc
JOIN cards ON cc.card_id = cards.id
WHERE cc.collection_id = ${collection.id}
AND (cards.image_url IS NOT NULL OR cards.stock_image_url IS NOT NULL)
ORDER BY
CASE cards.rarity
WHEN 'mythic' THEN 8
WHEN 'legendary' THEN 7
WHEN 'rare' THEN 6
WHEN 'uncommon' THEN 5
WHEN 'common' THEN 4
WHEN 'special' THEN 3
WHEN 'promo' THEN 2
WHEN 'token' THEN 1
ELSE 0
END DESC,
cards.market_price DESC NULLS LAST,
cards.name ASC
LIMIT 5
`;
const thumbnails = thumbnailsResult.rows.map(card => ({
id: card.id,
name: card.name,
rarity: card.rarity,
image_url: card.image_url,
stock_image_url: card.stock_image_url,
market_price: parseFloat(card.market_price) || 0,
game: card.game,
set_name: card.set_name,
quantity: parseInt(card.quantity) || 1
}));
res.status(200).json(thumbnails);
} catch (error) {
console.error('Error fetching collection thumbnails:', error);
res.status(500).json({ error: 'Internal server error' });
}
}