Val Town Code SearchReturn to Val Town

8    <script src="https://esm.town/v/std/catch"></script>
9    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
10    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💪</text></svg>">
11    <style>
12        /* Custom styles for better UX */

25      slug TEXT UNIQUE NOT NULL,
26      description TEXT,
27      image_url TEXT,
28      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
29    )
40      category_id INTEGER,
41      brand TEXT NOT NULL,
42      image_url TEXT NOT NULL,
43      images TEXT, -- JSON array of image URLs
44      in_stock BOOLEAN DEFAULT TRUE,
45      stock_quantity INTEGER DEFAULT 0,
180      categoryId: 2,
181      brand: 'Apple',
182      imageUrl: 'laptop-1.jpg',
183      images: JSON.stringify(['laptop-1.jpg', 'laptop-2.jpg', 'laptop-3.jpg']),
184      stockQuantity: 15,
185      rating: 4.8,
193      categoryId: 3,
194      brand: 'Apple',
195      imageUrl: 'phone-1.jpg',
196      images: JSON.stringify(['phone-1.jpg', 'phone-2.jpg']),
197      stockQuantity: 25,
198      rating: 4.9,
207      categoryId: 4,
208      brand: 'Sony',
209      imageUrl: 'headphones-1.jpg',
210      images: JSON.stringify(['headphones-1.jpg']),
211      stockQuantity: 30,
212      rating: 4.7,
220      categoryId: 5,
221      brand: 'Apple',
222      imageUrl: 'watch-1.jpg',
223      images: JSON.stringify(['watch-1.jpg']),
224      stockQuantity: 20,
225      rating: 4.6,
229    {
230      name: 'Canon EOS R6 Mark II',
231      description: 'Professional mirrorless camera with exceptional image quality.',
232      price: 2499.00,
233      categoryId: 6,
234      brand: 'Canon',
235      imageUrl: 'camera-1.jpg',
236      images: JSON.stringify(['camera-1.jpg']),
237      stockQuantity: 8,
238      rating: 4.9,
246      categoryId: 2,
247      brand: 'Apple',
248      imageUrl: 'tablet-1.jpg',
249      images: JSON.stringify(['tablet-1.jpg']),
250      stockQuantity: 18,
251      rating: 4.8,
259      categoryId: 4,
260      brand: 'Sonos',
261      imageUrl: 'speaker-1.jpg',
262      images: JSON.stringify(['speaker-1.jpg']),
263      stockQuantity: 35,
264      rating: 4.5,
272      categoryId: 2,
273      brand: 'Logitech',
274      imageUrl: 'keyboard-1.jpg',
275      images: JSON.stringify(['keyboard-1.jpg']),
276      stockQuantity: 50,
277      rating: 4.4,
285      INSERT INTO products (
286        name, description, price, original_price, category_id, brand,
287        image_url, images, stock_quantity, rating, review_count, featured
288      ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
289    `, [
290      product.name, product.description, product.price, product.originalPrice || null,
291      product.categoryId, product.brand, product.imageUrl, product.images,
292      product.stockQuantity, product.rating, product.reviewCount, product.featured
293    ]);

106}
107
108export function getImageUrl(filename: string): string {
109  // For demo purposes, using placeholder images
110  const imageMap: Record<string, string> = {
111    'laptop-1.jpg': 'https://images.unsplash.com/photo-1496181133206-80ce9b88a853?w=500&h=500&fit=crop',
112    'phone-1.jpg': 'https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=500&h=500&fit=crop',
113    'headphones-1.jpg': 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=500&h=500&fit=crop',
114    'watch-1.jpg': 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=500&h=500&fit=crop',
115    'camera-1.jpg': 'https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=500&h=500&fit=crop',
116    'tablet-1.jpg': 'https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?w=500&h=500&fit=crop',
117    'speaker-1.jpg': 'https://images.unsplash.com/photo-1608043152269-423dbba4e7e1?w=500&h=500&fit=crop',
118    'keyboard-1.jpg': 'https://images.unsplash.com/photo-1541140532154-b024d705b90a?w=500&h=500&fit=crop',
119  };
120  
121  return imageMap[filename] || `https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=500&h=500&fit=crop&q=80`;
122}
123

18  category: string;
19  brand: string;
20  imageUrl: string;
21  images: string[];
22  inStock: boolean;
23  stockQuantity: number;
92  slug: string;
93  description?: string;
94  imageUrl?: string;
95  productCount: number;
96}

8- **Homepage**: Hero section, product categories, featured products, testimonials
9- **Product Catalog**: Grid layout with filtering, sorting, and pagination
10- **Product Details**: Image gallery, reviews, related products
11- **Shopping Cart**: Item management with quantity controls
12- **Checkout**: Complete order flow with address and payment forms
24- **Database**: SQLite
25- **Styling**: TailwindCSS (Townie)
26- **Storage**: Val Town Blob for product images
27
28## Project Structure

27  };
28  highlights: string[];
29  imageUrl?: string;
30  website?: string;
31}

8    <script src="https://esm.town/v/std/catch"></script>
9    <link rel="stylesheet" href="/frontend/style.css">
10    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📊</text></svg>">
11</head>
12<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">

38    if (extension) {
39      const mimeTypes: Record<string, string> = {
40        'jpg': 'image/jpeg',
41        'jpeg': 'image/jpeg',
42        'png': 'image/png',
43        'gif': 'image/gif',
44        'pdf': 'application/pdf',
45        'doc': 'application/msword',

39    if (response.status > 400) {
40      const shortenedName = "Error (Forbidden)";
41      const image = "/assets/spotify.svg";
42      return { shortenedName, image };
43    } else if (response.status === 204) {
44      const shortenedName = "Currently Not Playing";
45      const image = "/assets/spotify.svg";
46      return { shortenedName, image };
47    }
48
49    const song = await response.json();
50    const image = song.item.album.images[0].url;
51    const artistNames = song.item.artists.map(a => a.name);
52    const link = song.item.external_urls.spotify;
65      formattedArtist,
66      artistLink,
67      image,
68    };
69  } catch (error) {
70    const shortenedName = "Error";
71    const image = "/assets/spotify.svg";
72    return { shortenedName, image };
73  }
74};

7    <script src="https://cdn.twind.style" crossorigin></script>
8    <script src="https://esm.town/v/std/catch"></script>
9    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🛞</text></svg>">
10    <style>
11        /* Custom Protyre branding */