🎯 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! 🚀
123 lines
No EOL
3.7 KiB
JavaScript
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' });
|
|
}
|
|
}
|