// ==UserScript== // @name Product Hunt Launch Card Downloader // @namespace web.nextbyte.ai // @version 2.0 // @description Adds a minimal 'Download Launch Card' button to Product Hunt products with customizable themes, metrics, and export options (PNG/PDF). Fixed image rendering in PDF and improved UI with shadcn design. // @author NextByte // @match https://www.producthunt.com/products/* // @grant none // @run-at document-idle // ==/UserScript== (function() { 'use strict'; // Libraries for image generation const loadLibraries = () => { return new Promise((resolve) => { // Load html2canvas if (!window.html2canvas) { const script1 = document.createElement('script'); script1.src = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js'; script1.onload = () => { // Load jsPDF const script2 = document.createElement('script'); script2.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js'; script2.onload = () => resolve(); document.head.appendChild(script2); }; document.head.appendChild(script1); } else { resolve(); } }); }; // Extract product data from the page const extractProductData = () => { const data = {}; // Product name const nameEl = document.querySelector('h1.text-24'); data.name = nameEl ? nameEl.textContent.trim() : 'Product Name'; // Tagline const taglineEl = document.querySelector('h2.text-18.text-gray-700'); data.tagline = taglineEl ? taglineEl.textContent.trim() : ''; // Product image/logo - try multiple selectors let logoEl = document.querySelector('[data-test*="thumbnail"]'); if (!logoEl) { logoEl = document.querySelector('img[alt*="thumbnail"]'); } if (!logoEl) { logoEl = document.querySelector('img[src*="ph-files"]'); } data.logo = logoEl ? logoEl.src : ''; // Description const descEl = document.querySelector('.text-16.font-normal.text-gray-700 span'); data.description = descEl ? descEl.textContent.trim() : ''; // Extract from JSON-LD structured data try { const jsonLdScripts = document.querySelectorAll('script[type="application/ld+json"]'); for (const jsonLd of jsonLdScripts) { try { const structuredData = JSON.parse(jsonLd.textContent); if (Array.isArray(structuredData)) { // Find the product data (not breadcrumb) const productData = structuredData.find(item => item['@type'] === 'MobileApplication' || item['@type'] === 'SoftwareApplication' || item['@type'] === 'Product' ); if (productData) { data.datePublished = productData.datePublished; data.category = productData.applicationCategory; data.makers = productData.author || []; break; } } else if (structuredData['@type'] === 'MobileApplication' || structuredData['@type'] === 'SoftwareApplication' || structuredData['@type'] === 'Product') { data.datePublished = structuredData.datePublished; data.category = structuredData.applicationCategory; data.makers = structuredData.author || []; break; } } catch (e) { // Skip invalid JSON continue; } } } catch (e) { console.error('Error parsing JSON-LD:', e); } // Extract from Apollo data in page try { const apolloScript = Array.from(document.querySelectorAll('script')).find(s => s.textContent.includes('ApolloSSRDataTransport') || s.textContent.includes('latestLaunch') ); if (apolloScript) { const scriptText = apolloScript.textContent; // Extract votes count const votesMatch = scriptText.match(/\"latestScore[\"\\s:]+(\\d+)/); data.votes = votesMatch ? parseInt(votesMatch[1]) : 0; // Extract comments count const commentsMatch = scriptText.match(/\"commentsCount[\"\\s:]+(\\d+)/); data.comments = commentsMatch ? parseInt(commentsMatch[1]) : 0; // Extract featured status const featuredMatch = scriptText.match(/\"featured[\"\\s:]+(\\w+)/); data.featured = featuredMatch ? featuredMatch[1] === 'true' : false; // Extract topics/tags const topicsMatches = scriptText.matchAll(/\"name[\"\\s:]+[\"']([^\"']+)[\"'][^}]*\"slug[\"\\s:]+[\"']([^\"']+)[\"']/g); data.topics = []; const seenTopics = new Set(); for (const match of topicsMatches) { const topicName = match[1]; // Filter out common non-topic names if (topicName && !seenTopics.has(topicName) && data.topics.length < 5 && topicName !== data.name && topicName.length < 30) { data.topics.push(topicName); seenTopics.add(topicName); } } } } catch (e) { console.error('Error extracting Apollo data:', e); } // Fallback: try to get votes from visible elements if (!data.votes) { const votesEl = document.querySelector('[data-test*="vote"] span'); if (votesEl) { const votesText = votesEl.textContent.match(/\\d+/); data.votes = votesText ? parseInt(votesText[0]) : 0; } } // Format launch date if (data.datePublished) { const date = new Date(data.datePublished); data.launchDate = date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }); } else { data.launchDate = 'Recently'; } return data; }; // Load image as data URL const loadImageAsDataUrl = async (url) => { if (!url) return null; try { const response = await fetch(url); const blob = await response.blob(); return new Promise((resolve) => { const reader = new FileReader(); reader.onloadend = () => resolve(reader.result); reader.readAsDataURL(blob); }); } catch (e) { console.error('Error loading image:', e); return null; } }; // Create the launch card HTML const createLaunchCard = async (data, theme, options) => { const card = document.createElement('div'); card.id = 'ph-launch-card'; card.style.cssText = ` width: 600px; padding: 40px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; position: fixed; left: -9999px; top: 0; `; // Apply theme styles const themes = { official: { background: 'linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%)', primaryColor: '#da552f', secondaryColor: '#333333', textColor: '#666666', borderColor: '#e0e0e0' }, dark: { background: 'linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%)', primaryColor: '#ff6154', secondaryColor: '#ffffff', textColor: '#cccccc', borderColor: '#444444' }, minimal: { background: '#ffffff', primaryColor: '#000000', secondaryColor: '#333333', textColor: '#666666', borderColor: '#e0e0e0' }, startup: { background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', primaryColor: '#ffffff', secondaryColor: '#ffffff', textColor: '#f0f0f0', borderColor: 'rgba(255,255,255,0.3)' } }; const currentTheme = themes[theme] || themes.official; card.style.background = options.backgroundType === 'gradient' ? currentTheme.background : options.backgroundType === 'pattern' ? `${currentTheme.background.split(',')[0]}, repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,.03) 10px, rgba(0,0,0,.03) 20px)` : currentTheme.background.split(',')[0].replace('linear-gradient(135deg, ', '').replace(' 0%', ''); if (options.borderRadius) { card.style.borderRadius = '20px'; } if (options.shadow) { card.style.boxShadow = '0 20px 60px rgba(0,0,0,0.15)'; } // Load image as data URL for PDF compatibility let logoDataUrl = null; if (data.logo) { logoDataUrl = await loadImageAsDataUrl(data.logo); } // Build card content let html = `

${logoDataUrl ? `

` : ''}

${data.name}

${data.tagline}

${data.description ? `

${data.description.substring(0, 200)}${data.description.length > 200 ? '...' : ''}

` : ''} ${options.showMetrics ? `

${data.votes !== undefined ? `

${data.votes}

Upvotes

` : ''} ${data.comments !== undefined ? `

${data.comments}

Comments

` : ''}

${data.topics && data.topics.length > 0 ? `

${data.topics.map(topic => ` ${topic} `).join('')}

` : ''}

🚀 ${data.launchDate}

${data.makers && data.makers.length > 0 ? `

Made by

${data.makers.slice(0, 3).map(maker => `

${maker.image ? `

` : ''} ${maker.name}

`).join('')}

` : ''} ${data.featured && options.showMetrics ? `

⭐ FEATURED

` : ''}

Generated with Product Hunt Launch Card

`; card.innerHTML = html; return card; }; // Create minimal control panel with shadcn UI design const createControlPanel = () => { const panel = document.createElement('div'); panel.id = 'ph-control-panel'; panel.style.cssText = ` position: fixed; top: 100px; right: 20px; background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); z-index: 10000; width: 280px; max-height: 80vh; overflow-y: auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; `; panel.innerHTML = `

Launch Card

Theme

Background

Show Metrics Rounded Corners Shadow Effect

`; return panel; }; // Show status message const showStatus = (message, type = 'info') => { const status = document.getElementById('ph-status'); if (status) { status.textContent = message; status.style.display = 'block'; status.style.background = type === 'success' ? '#d1fae5' : type === 'error' ? '#fee2e2' : '#f3f4f6'; status.style.color = type === 'success' ? '#065f46' : type === 'error' ? '#7f1d1d' : '#374151'; status.style.borderLeftColor = type === 'success' ? '#10b981' : type === 'error' ? '#ef4444' : '#da552f'; setTimeout(() => { status.style.display = 'none'; }, 3000); } }; // Get current options const getOptions = () => { return { theme: document.getElementById('ph-theme-select')?.value || 'official', backgroundType: document.getElementById('ph-background-select')?.value || 'gradient', showMetrics: document.getElementById('ph-show-metrics')?.checked ?? true, borderRadius: document.getElementById('ph-border-radius')?.checked ?? true, shadow: document.getElementById('ph-shadow')?.checked ?? true }; }; // Preview card const previewCard = async () => { const existingPreview = document.getElementById('ph-preview-modal'); if (existingPreview) { existingPreview.remove(); } const data = extractProductData(); const options = getOptions(); const card = await createLaunchCard(data, options.theme, options); const modal = document.createElement('div'); modal.id = 'ph-preview-modal'; modal.style.cssText = ` position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 10001; padding: 20px; `; const container = document.createElement('div'); container.style.cssText = ` position: relative; max-width: 90%; max-height: 90%; overflow: auto; `; card.style.position = 'relative'; card.style.left = 'auto'; container.appendChild(card); const closeBtn = document.createElement('button'); closeBtn.textContent = '×'; closeBtn.style.cssText = ` position: absolute; top: 10px; right: 10px; background: white; border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 24px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.2); z-index: 1; `; closeBtn.onclick = () => modal.remove(); container.appendChild(closeBtn); modal.appendChild(container); modal.onclick = (e) => { if (e.target === modal) modal.remove(); }; document.body.appendChild(modal); }; // Download as PNG const downloadPNG = async () => { showStatus('Generating PNG...', 'info'); await loadLibraries(); const data = extractProductData(); const options = getOptions(); const card = await createLaunchCard(data, options.theme, options); document.body.appendChild(card); try { const canvas = await html2canvas(card, { backgroundColor: null, scale: 2, logging: false, useCORS: true, allowTaint: true }); canvas.toBlob((blob) => { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `${data.name.replace(/[^a-z0-9]/gi, '_')}_launch_card.png`; a.click(); URL.revokeObjectURL(url); showStatus('PNG downloaded!', 'success'); }); } catch (error) { console.error('Error generating PNG:', error); showStatus('Error generating PNG', 'error'); } finally { card.remove(); } }; // Download as PDF const downloadPDF = async () => { showStatus('Generating PDF...', 'info'); await loadLibraries(); const data = extractProductData(); const options = getOptions(); const card = await createLaunchCard(data, options.theme, options); document.body.appendChild(card); try { const canvas = await html2canvas(card, { backgroundColor: null, scale: 2, logging: false, useCORS: true, allowTaint: true }); const imgData = canvas.toDataURL('image/png'); const { jsPDF } = window.jspdf; const pdf = new jsPDF({ orientation: 'landscape', unit: 'px', format: [canvas.width / 2, canvas.height / 2] }); pdf.addImage(imgData, 'PNG', 0, 0, canvas.width / 2, canvas.height / 2); pdf.save(`${data.name.replace(/[^a-z0-9]/gi, '_')}_launch_card.pdf`); showStatus('PDF downloaded!', 'success'); } catch (error) { console.error('Error generating PDF:', error); showStatus('Error generating PDF', 'error'); } finally { card.remove(); } }; // Copy to clipboard const copyToClipboard = async () => { showStatus('Copying to clipboard...', 'info'); await loadLibraries(); const data = extractProductData(); const options = getOptions(); const card = await createLaunchCard(data, options.theme, options); document.body.appendChild(card); try { const canvas = await html2canvas(card, { backgroundColor: null, scale: 2, logging: false, useCORS: true, allowTaint: true }); canvas.toBlob(async (blob) => { try { await navigator.clipboard.write([ new ClipboardItem({ 'image/png': blob }) ]); showStatus('Copied to clipboard!', 'success'); } catch (err) { console.error('Clipboard error:', err); showStatus('Clipboard not supported', 'error'); } card.remove(); }); } catch (error) { console.error('Error copying:', error); showStatus('Error copying to clipboard', 'error'); card.remove(); } }; // Initialize const init = () => { // Wait for page to be fully loaded if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); return; } // Check if we're on a product page if (!window.location.pathname.startsWith('/products/')) { return; } // Check if already initialized if (document.getElementById('ph-toggle-btn')) { return; } // Wait a bit for dynamic content to load setTimeout(() => { const panel = createControlPanel(); document.body.appendChild(panel); // Event listeners document.getElementById('ph-close-panel').onclick = () => { panel.style.display = 'none'; }; document.getElementById('ph-preview-btn').onclick = previewCard; document.getElementById('ph-copy-btn').onclick = copyToClipboard; document.getElementById('ph-download-png-btn').onclick = downloadPNG; document.getElementById('ph-download-pdf-btn').onclick = downloadPDF; // Add minimal toggle button const toggleBtn = document.createElement('button'); toggleBtn.id = 'ph-toggle-btn'; toggleBtn.innerHTML = '📥'; toggleBtn.title = 'Download Launch Card'; toggleBtn.style.cssText = ` position: fixed; top: 100px; right: 20px; width: 48px; height: 48px; background: #da552f; color: white; border: none; border-radius: 6px; font-size: 20px; cursor: pointer; box-shadow: 0 2px 8px rgba(218, 85, 47, 0.3); z-index: 9999; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; `; toggleBtn.onmouseover = () => { toggleBtn.style.transform = 'scale(1.05)'; toggleBtn.style.boxShadow = '0 4px 12px rgba(218, 85, 47, 0.4)'; }; toggleBtn.onmouseout = () => { toggleBtn.style.transform = 'scale(1)'; toggleBtn.style.boxShadow = '0 2px 8px rgba(218, 85, 47, 0.3)'; }; toggleBtn.onclick = () => { const panel = document.getElementById('ph-control-panel'); if (panel) { panel.style.display = panel.style.display === 'none' ? 'block' : 'none'; } }; document.body.appendChild(toggleBtn); console.log('Product Hunt Launch Card Downloader v2.0 initialized!'); }, 2000); }; init(); })();