No images uploaded yet

';\n updateImageCount(0);\n return;\n }\n \n // Add each image to the gallery\n images.forEach(image => {\n const formattedSize = image.size ? formatFileSize(image.size) : 'Uploaded';\n \n // Create the HTML for the image item\n const imageItemHtml = createImageItemHtml(\n image.id,\n image.cdnUrl,\n image.originalName || image.id,\n formattedSize\n );\n \n // Add the HTML to the gallery\n galleryContainer.insertAdjacentHTML('beforeend', imageItemHtml);\n \n // Add event listeners to the buttons\n const fileItem = galleryContainer.querySelector(`[data-file-id=\"${image.id}\"]`);\n if (fileItem) {\n // View button\n const viewButton = fileItem.querySelector('button[title=\"View image\"]');\n if (viewButton) {\n viewButton.addEventListener('click', () => {\n window.open(image.cdnUrl, '_blank');\n });\n }\n \n // Delete button\n const deleteButton = fileItem.querySelector('button[title=\"Delete image\"]');\n if (deleteButton) {\n deleteButton.addEventListener('click', () => {\n if (confirm('Are you sure you want to delete this image?')) {\n // Show loading state\n galleryContainer.style.opacity = '0.7';\n \n deleteImage(image.id, submissionId)\n .then(() => {\n if (onDeleteSuccess) {\n onDeleteSuccess();\n }\n })\n .catch(error => {\n alert(`Error deleting image: ${error.message}`);\n })\n .finally(() => {\n galleryContainer.style.opacity = '1';\n });\n }\n });\n }\n }\n });\n \n // Initialize lazy loading for the newly added images\n initLazyLoading('img.lazy-image');\n \n // Update the image count\n updateImageCount(images.length);\n}\n\n/**\n * Create HTML for an image item\n * @param {string} id - Image ID\n * @param {string} cdnUrl - CDN URL\n * @param {string} originalName - Original filename\n * @param {string} size - Formatted file size\n * @returns {string} HTML string\n */\nfunction createImageItemHtml(id, cdnUrl, originalName, size) {\n return `\n

\n \n

\n $\"Preview\"\n$ \n

\n \n \n

\n ${originalName}\n

\n \n \n

\n ${size}\n

\n \n \n

\n \n \n \n \n \n

\n `;\n}\n\n/**\n * Update the image count display\n * @param {number} count - Number of images\n */\nfunction updateImageCount(count) {\n const imageCount = document.getElementById('imageCount');\n if (imageCount) {\n imageCount.textContent = `${count} image${count !== 1 ? 's' : ''}`;\n }\n}",[],[305,371,377,402],{"_107":410,"_100":411,"_154":412,"_156":378,"_157":141,"_158":413,"_160":121,"_109":414,"_104":31,"_162":175,"_164":415,"_165":27,"_166":-5,"_167":416,"_103":417},"f6303724-2c23-11f0-b7a5-569c3dd06744","performance.js","f63037d8-2c23-11f0-b7a5-569c3dd06744",360,["D",1746719341410],"/**\n * Performance Optimization Module\n * Provides utilities for improving application performance\n */\n\n/**\n * Initialize lazy loading for images\n * Uses the Intersection Observer API to load images only when they are visible\n * @param {string} selector - CSS selector for images to lazy load\n */\nexport function initLazyLoading(selector = 'img[data-src]') {\n // Check if Intersection Observer is supported\n if (!('IntersectionObserver' in window)) {\n // Fallback for browsers that don't support Intersection Observer\n const images = document.querySelectorAll(selector);\n images.forEach(img => {\n if (img.dataset.src) {\n img.src = img.dataset.src;\n delete img.dataset.src;\n }\n });\n return;\n }\n \n const observer = new IntersectionObserver((entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target;\n if (img.dataset.src) {\n img.src = img.dataset.src;\n delete img.dataset.src;\n }\n observer.unobserve(img);\n }\n });\n }, {\n rootMargin: '50px 0px',\n threshold: 0.01\n });\n \n const images = document.querySelectorAll(selector);\n images.forEach(img => observer.observe(img));\n}\n\n/**\n * Defer non-critical JavaScript\n * @param {string} url - URL of the script to load\n * @param {Function} callback - Function to call when script is loaded\n */\nexport function loadScriptDeferred(url, callback) {\n const script = document.createElement('script');\n script.src = url;\n script.defer = true;\n \n if (callback) {\n script.onload = callback;\n }\n \n document.body.appendChild(script);\n}\n\n/**\n * Throttle function to limit how often a function can be called\n * @param {Function} func - Function to throttle\n * @param {number} limit - Time limit in milliseconds\n * @returns {Function} Throttled function\n */\nexport function throttle(func, limit) {\n let inThrottle;\n return function(...args) {\n const context = this;\n if (!inThrottle) {\n func.apply(context, args);\n inThrottle = true;\n setTimeout(() => inThrottle = false, limit);\n }\n };\n}\n\n/**\n * Debounce function to delay execution until after a period of inactivity\n * @param {Function} func - Function to debounce\n * @param {number} wait - Wait time in milliseconds\n * @returns {Function} Debounced function\n */\nexport function debounce(func, wait) {\n let timeout;\n return function(...args) {\n const context = this;\n clearTimeout(timeout);\n timeout = setTimeout(() => func.apply(context, args), wait);\n };\n}\n\n/**\n * Initialize performance monitoring\n * Logs performance metrics to the console\n */\nexport function initPerformanceMonitoring() {\n if (!window.performance || !window.performance.getEntriesByType) {\n console.warn('Performance API not supported');\n return;\n }\n \n // Log navigation timing metrics\n window.addEventListener('load', () => {\n setTimeout(() => {\n const perfEntries = performance.getEntriesByType('navigation');\n if (perfEntries.length > 0) {\n const navigationEntry = perfEntries[0];\n console.log('Performance metrics:', {\n 'DNS lookup': Math.round(navigationEntry.domainLookupEnd - navigationEntry.domainLookupStart) + 'ms',\n 'TCP connection': Math.round(navigationEntry.connectEnd - navigationEntry.connectStart) + 'ms',\n 'Request time': Math.round(navigationEntry.responseEnd - navigationEntry.requestStart) + 'ms',\n 'DOM processing': Math.round(navigationEntry.domComplete - navigationEntry.responseEnd) + 'ms',\n 'Total page load': Math.round(navigationEntry.loadEventEnd - navigationEntry.startTime) + 'ms'\n });\n }\n }, 0);\n });\n}",[],[305,371,377,411],{"_107":419,"_100":420,"_154":421,"_156":378,"_157":141,"_158":422,"_160":121,"_109":423,"_104":424,"_162":175,"_164":425,"_165":27,"_166":-5,"_167":426,"_103":427},"3970920e-2c60-11f0-871c-569c3dd06744","uploadcare-manager.js","f91aeeea-2bae-11f0-ab1d-569c3dd06744",441,["D",1746745224054],4,"/**\n * Uploadcare Manager Module\n * Handles all Uploadcare-related functionality\n * Optimized for performance with reduced execution\n */\n\n// Initialize Uploadcare with single file uploader\nexport function initUploadcare(submissionId, callbacks = {}) {\n try {\n console.log('Initializing Uploadcare widget with single file uploader');\n \n // Check if Uploadcare is loaded\n if (typeof uploadcare === 'undefined') {\n console.error('ERROR: Uploadcare library is not loaded!');\n if (callbacks.onError) {\n callbacks.onError('Upload widget failed to load');\n }\n return null;\n }\n \n console.log('Uploadcare library loaded successfully', { version: uploadcare.version });\n \n // Initialize the main uploader\n const widget = uploadcare.Widget('#uploadcareFile');\n console.log('Widget initialized:', widget);\n \n // Track upload progress\n widget.onChange(function(file) {\n console.log('Widget onChange event triggered', { file });\n if (!file) {\n if (callbacks.onStatusUpdate) {\n callbacks.onStatusUpdate('');\n }\n return;\n }\n \n if (callbacks.onStatusUpdate) {\n callbacks.onStatusUpdate('Preparing file...', 'blue');\n }\n \n // Handle file upload with optimized progress reporting\n let lastProgressUpdate = 0;\n \n file.progress(info => {\n // Only update progress every 5% to reduce DOM updates\n const currentProgress = Math.round(info.progress * 100);\n if (currentProgress - lastProgressUpdate >= 5 || currentProgress === 100) {\n console.log('Upload progress:', currentProgress + '%');\n if (callbacks.onStatusUpdate) {\n callbacks.onStatusUpdate(`Uploading: ${currentProgress}%`, 'blue');\n }\n lastProgressUpdate = currentProgress;\n }\n });\n \n file.done(fileInfo => {\n console.log('Upload completed:', fileInfo);\n if (callbacks.onStatusUpdate) {\n callbacks.onStatusUpdate('Processing...', 'blue');\n }\n \n // Register the individual file\n registerUploadcareFile(fileInfo.uuid, submissionId)\n .then(() => {\n // Show the \"Add Another Image\" button after successful upload\n if (callbacks.onUploadComplete) {\n callbacks.onUploadComplete(fileInfo);\n }\n });\n });\n \n file.fail(error => {\n console.error('Upload failed:', error);\n if (callbacks.onStatusUpdate) {\n callbacks.onStatusUpdate('Upload failed', 'red');\n }\n });\n });\n \n return widget;\n } catch (error) {\n console.error('Error initializing Uploadcare:', error);\n if (callbacks.onError) {\n callbacks.onError('Error initializing upload widget');\n }\n throw error; // Re-throw to see the full error\n }\n}\n\n// Register a single Uploadcare file with our server\nexport async function registerUploadcareFile(uuid, submissionId) {\n try {\n console.log(`Registering file with server: ${uuid}`);\n \n const response = await fetch('/register-image', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n uploadcareUuid: uuid,\n submissionId: submissionId\n })\n });\n \n console.log(`Server response status: ${response.status} ${response.statusText}`);\n \n // Try to parse the response as JSON\n let result;\n try {\n result = await response.json();\n console.log('Server response:', result);\n } catch (parseError) {\n // If we can't parse as JSON, get the text\n const errorText = await response.text();\n console.error('Error parsing server response:', parseError);\n console.error('Raw response:', errorText);\n throw new Error(`Server returned invalid JSON: ${errorText}`);\n }\n \n if (response.ok && result.success) {\n return result;\n } else {\n const errorMessage = result.message || 'Failed to register image';\n console.error('Server error:', errorMessage);\n \n // Check for database schema errors\n if (errorMessage.includes('no column named') || \n errorMessage.includes('table') || \n errorMessage.includes('schema')) {\n throw new Error('Database schema error. Please try refreshing the page.');\n } else {\n throw new Error(errorMessage);\n }\n }\n } catch (error) {\n console.error('Error registering Uploadcare file:', error);\n throw error;\n }\n}\n\n// Load images for this submission using Uploadcare's API\nexport async function loadImages(submissionId) {\n try {\n console.log(`Loading images for submission ID: ${submissionId}`);\n \n // Make sure we have a valid submission ID\n if (!submissionId) {\n console.error('Missing submission ID');\n throw new Error('Missing submission ID');\n }\n \n // Use the correct API path\n const url = `/list-images?submissionId=${submissionId}`;\n console.log(`Fetching images from: ${url}`);\n \n const response = await fetch(url);\n \n // Log the response status\n console.log(`Response status: ${response.status} ${response.statusText}`);\n \n if (!response.ok) {\n console.error(`Error loading images: ${response.status} ${response.statusText}`);\n \n // Try to get more error details\n let errorText;\n try {\n errorText = await response.text();\n console.error('Error response body:', errorText);\n } catch (e) {\n errorText = 'Could not read error response';\n }\n \n throw new Error(`Failed to load images: ${response.status} ${response.statusText} - ${errorText}`);\n }\n \n // Parse the response as JSON\n let result;\n try {\n result = await response.json();\n console.log('Image list response:', result);\n } catch (parseError) {\n console.error('Error parsing response as JSON:', parseError);\n throw new Error('Invalid JSON response from server');\n }\n \n // Check if the response has the expected structure\n if (result && result.success === true && Array.isArray(result.data)) {\n // Validate and enhance each image object\n const images = result.data.map(image => {\n // Ensure each image has a valid CDN URL\n if (!image.cdnUrl && image.id) {\n image.cdnUrl = `https://ucarecdn.com/${image.id}/`;\n }\n return image;\n });\n \n console.log(`Successfully loaded ${images.length} images`);\n return images;\n } else {\n console.error('Unexpected response format:', result);\n throw new Error(result?.message || 'Error loading images: Unexpected response format');\n }\n } catch (error) {\n console.error('Error loading images:', error);\n throw error;\n }\n}\n\n// Delete an image using Uploadcare's API\nexport async function deleteImage(imageId, submissionId) {\n try {\n console.log(`Deleting image: ${imageId}`);\n \n const response = await fetch(`/image`, {\n method: 'DELETE',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n imageId,\n submissionId\n })\n });\n \n console.log(`Delete response status: ${response.status} ${response.statusText}`);\n \n let result;\n try {\n result = await response.json();\n console.log('Delete response:', result);\n } catch (parseError) {\n console.error('Error parsing delete response:', parseError);\n const errorText = await response.text();\n console.error('Raw response:', errorText);\n throw new Error(`Server returned invalid JSON: ${errorText}`);\n }\n \n if (response.ok && result.success) {\n return result;\n } else {\n // Check for database schema errors\n const errorMessage = result.message || 'Failed to delete image';\n console.error('Delete error:', errorMessage);\n \n if (errorMessage.includes('no column named') || \n errorMessage.includes('table') || \n errorMessage.includes('schema')) {\n throw new Error('Database schema error. Please refresh the page and try again.');\n } else {\n throw new Error(errorMessage);\n }\n }\n } catch (error) {\n console.error('Error deleting image:', error);\n throw error;\n }\n}\n\n// Format file size in human-readable format\nexport function formatFileSize(bytes) {\n if (bytes === 0) return '0 Bytes';\n \n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n \n return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n}",[],[305,371,377,420],[305,371,377],{"_107":430,"_100":431,"_154":432,"_156":372,"_157":141,"_158":433,"_160":121,"_109":434,"_104":364,"_162":175,"_164":435,"_165":27,"_166":-5,"_167":436,"_103":437},"6d28343e-2c34-11f0-b502-569c3dd06744","continue.js","4edd0598-2c22-11f0-826b-569c3dd06744",408,["D",1746726412965],"/**\n * Continue Page Script\n * Uses modular approach for better organization and maintainability\n * Optimized for performance with deferred loading and reduced execution\n */\n\nimport { initLazyLoading, throttle, debounce, loadScriptDeferred, initPerformanceMonitoring } from './modules/performance.js';\n\n// Initialize performance monitoring and lazy loading immediately\ndocument.addEventListener('DOMContentLoaded', () => {\n // Initialize performance monitoring\n initPerformanceMonitoring();\n \n // Initialize lazy loading for images\n initLazyLoading('img.lazy-image');\n \n // Defer non-critical initialization\n setTimeout(() => {\n initDeferredComponents();\n }, 100);\n});\n\n// Deferred initialization of non-critical components\nfunction initDeferredComponents() {\n // Dynamically import modules only when needed\n Promise.all([\n import('./modules/uploadcare-manager.js'),\n import('./modules/gallery-renderer.js'),\n import('./modules/form-handler.js'),\n import('./modules/form-validator.js')\n ]).then(([\n { initUploadcare, loadImages },\n { renderUploadcareGallery },\n { submitAdditionalInfo },\n { setupLiveValidation, validateForm }\n ]) => {\n // DOM elements\n const form = document.getElementById('additionalInfoForm');\n const submitButton = document.getElementById('submitButton');\n const successMessage = document.getElementById('successMessage');\n const errorMessage = document.getElementById('errorMessage');\n const submissionId = document.getElementById('submissionId')?.value;\n const imageCount = document.getElementById('imageCount');\n const uploadStatusElement = document.getElementById('uploadStatus');\n const fileListContainer = document.getElementById('uploadcare-gallery');\n const addMoreContainer = document.getElementById('addMoreContainer');\n \n // Set up live validation for the form\n if (form) {\n setupLiveValidation(form);\n }\n \n // Status update helper function\n function updateStatus(message, color = 'blue') {\n if (!uploadStatusElement) return;\n \n uploadStatusElement.textContent = message;\n uploadStatusElement.className = `mt-2 text-sm text-${color}-500`;\n }\n \n // Show error with refresh button for database schema errors\n function showDatabaseError(message) {\n if (!uploadStatusElement) return;\n \n uploadStatusElement.innerHTML = `\n ${message}\n \n `;\n \n // Add click handler for the refresh button\n document.getElementById('refreshPageBtn')?.addEventListener('click', () => {\n window.location.reload();\n });\n }\n \n // Update image count display\n function updateImageCount(count) {\n if (!imageCount) return;\n imageCount.textContent = `${count} image${count !== 1 ? 's' : ''}`;\n }\n \n // Load and render images with throttling to prevent excessive API calls\n const throttledRefreshGallery = throttle(async function() {\n try {\n const images = await loadImages(submissionId);\n updateImageCount(images.length);\n \n if (images.length > 0) {\n renderUploadcareGallery(\n images, \n 'uploadcare-gallery', \n submissionId, \n throttledRefreshGallery\n );\n } else {\n // Clear the file list container\n if (fileListContainer) {\n fileListContainer.innerHTML = '

No images uploaded yet

';\n }\n }\n } catch (error) {\n console.error('Error refreshing gallery:', error);\n updateStatus(`Error: ${error.message}`, 'red');\n \n if (error.message.includes('schema') || error.message.includes('table')) {\n showDatabaseError('Database schema error. Please try refreshing the page.');\n }\n }\n }, 500);\n \n // Initialize Uploadcare with callbacks - defer this operation\n let uploadcareWidget;\n \n // Defer Uploadcare initialization to improve initial page load\n setTimeout(() => {\n uploadcareWidget = initUploadcare(submissionId, {\n onStatusUpdate: updateStatus,\n onError: (message) => {\n updateStatus(message, 'red');\n },\n onUploadComplete: (fileInfo) => {\n updateStatus('Image uploaded successfully!', 'green');\n if (addMoreContainer) {\n addMoreContainer.classList.remove('hidden');\n }\n throttledRefreshGallery();\n }\n });\n \n // Set up the \"Add Another Image\" button\n const addMoreButton = document.getElementById('addMoreButton');\n if (addMoreButton && uploadcareWidget) {\n addMoreButton.addEventListener('click', function() {\n // Reset the widget to allow uploading another file\n uploadcareWidget.value(null);\n \n // Focus on the widget to open the file picker\n setTimeout(() => {\n const widgetButton = document.querySelector('.uploadcare--widget__button');\n if (widgetButton) {\n widgetButton.click();\n }\n }, 100);\n });\n }\n }, 300);\n \n // Handle form submission with debouncing to prevent double submissions\n if (form) {\n const debouncedSubmit = debounce(async (e) => {\n e.preventDefault();\n \n // Validate the form before submission\n if (!validateForm(form)) {\n return;\n }\n \n submitAdditionalInfo(form, submissionId, {\n onStart: () => {\n // Disable the submit button and show loading state\n if (submitButton) {\n submitButton.disabled = true;\n submitButton.innerText = 'Saving...';\n }\n \n // Hide any previous messages\n if (successMessage) successMessage.classList.add('hidden');\n if (errorMessage) errorMessage.classList.add('hidden');\n },\n onSuccess: () => {\n // Show success message\n if (successMessage) {\n successMessage.classList.remove('hidden');\n \n // Scroll to success message\n successMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });\n \n // Hide success message after 3 seconds\n setTimeout(() => {\n successMessage.classList.add('hidden');\n }, 3000);\n }\n },\n onError: (message) => {\n // Show error message\n if (errorMessage) {\n errorMessage.textContent = message;\n errorMessage.classList.remove('hidden');\n }\n },\n onComplete: () => {\n // Re-enable the submit button\n if (submitButton) {\n submitButton.disabled = false;\n submitButton.innerText = 'Save Information';\n }\n },\n uploadcareWidget\n });\n }, 300);\n \n form.addEventListener('submit', debouncedSubmit);\n }\n \n // Initialize the gallery - defer this to improve initial page load\n setTimeout(() => {\n throttledRefreshGallery();\n }, 500);\n \n // Add event listeners for window resize with throttling\n window.addEventListener('resize', throttle(() => {\n // Adjust UI for different screen sizes if needed\n const isMobile = window.innerWidth < 768;\n \n // Example: Adjust gallery layout for mobile\n if (fileListContainer) {\n fileListContainer.classList.toggle('mobile-layout', isMobile);\n }\n }, 200));\n }).catch(error => {\n console.error('Error loading modules:', error);\n });\n}\n\n// Load non-critical third-party scripts\nfunction loadThirdPartyScripts() {\n // Example: Load analytics or other non-critical scripts\n // loadScriptDeferred('https://some-analytics-script.js');\n}\n\n// Defer loading of third-party scripts\nwindow.addEventListener('load', () => {\n setTimeout(loadThirdPartyScripts, 2000);\n});",[],[305,371,431],{"_107":439,"_100":440,"_154":441,"_156":372,"_157":141,"_158":442,"_160":121,"_109":443,"_104":424,"_162":175,"_164":444,"_165":27,"_166":-5,"_167":445,"_103":446},"8503b830-2c34-11f0-ba0d-569c3dd06744","landing.js","bbafa126-2baf-11f0-8025-569c3dd06744",409,["D",1746726452988],"/**\n * Landing Page Script\n * Uses modular approach for better organization and maintainability\n * Optimized for performance with deferred loading and reduced execution\n */\n\nimport { initLazyLoading, debounce, initPerformanceMonitoring, loadScriptDeferred } from './modules/performance.js';\n\n// Initialize performance monitoring and lazy loading immediately\ndocument.addEventListener('DOMContentLoaded', () => {\n // Initialize performance monitoring\n initPerformanceMonitoring();\n \n // Initialize lazy loading for images\n initLazyLoading('img.lazy-image');\n \n // Defer non-critical initialization\n setTimeout(() => {\n initDeferredComponents();\n }, 100);\n});\n\n// Deferred initialization of non-critical components\nfunction initDeferredComponents() {\n // Dynamically import modules only when needed\n Promise.all([\n import('./modules/form-handler.js'),\n import('./modules/form-validator.js')\n ]).then(([\n { submitInitialForm, requestMagicLink },\n { setupLiveValidation, validateForm }\n ]) => {\n // Main submission form\n const form = document.getElementById('submissionForm');\n const submitButton = document.getElementById('submitButton');\n const successMessage = document.getElementById('successMessage');\n const errorMessage = document.getElementById('errorMessage');\n \n // Magic link form\n const magicLinkForm = document.getElementById('magicLinkForm');\n const magicLinkButton = document.getElementById('magicLinkButton');\n const magicLinkSuccessMessage = document.getElementById('magicLinkSuccessMessage');\n const magicLinkErrorMessage = document.getElementById('magicLinkErrorMessage');\n \n // Debug: Log if elements are found\n console.log('Form elements found:', {\n form: !!form,\n submitButton: !!submitButton,\n successMessage: !!successMessage,\n errorMessage: !!errorMessage\n });\n \n // Set up live validation for both forms\n if (form) {\n setupLiveValidation(form);\n }\n \n if (magicLinkForm) {\n setupLiveValidation(magicLinkForm);\n }\n \n // Handle main form submission with debouncing to prevent double submissions\n if (form) {\n const debouncedSubmit = debounce((e) => {\n e.preventDefault();\n \n // Validate the form before submission\n if (!validateForm(form)) {\n return;\n }\n \n submitInitialForm(form, {\n onStart: () => {\n // Disable the submit button and show loading state\n if (submitButton) {\n submitButton.disabled = true;\n submitButton.innerText = 'Submitting...';\n }\n \n // Hide any previous messages\n if (successMessage) successMessage.classList.add('hidden');\n if (errorMessage) errorMessage.classList.add('hidden');\n },\n onSuccess: (message) => {\n // Show success message with the message from the server\n form.reset();\n \n // Create a success alert if the success message element doesn't exist\n if (!successMessage) {\n // Create an alert with the success message\n alert(message);\n console.log('Showing success alert because success message element not found');\n } else {\n // Update success message content with server response\n const messageText = document.getElementById('successMessageText');\n if (messageText) {\n messageText.textContent = message;\n }\n \n // Make sure the success message is visible\n successMessage.classList.remove('hidden');\n successMessage.style.display = 'block';\n \n // Log the success message for debugging\n console.log('Success message displayed:', message);\n \n // Scroll to the success message\n successMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n },\n onError: (message) => {\n // Show error message\n if (!errorMessage) {\n // Create an alert with the error message\n alert(message);\n console.log('Showing error alert because error message element not found');\n } else {\n errorMessage.textContent = message;\n errorMessage.classList.remove('hidden');\n errorMessage.style.display = 'block';\n }\n },\n onComplete: () => {\n // Re-enable the submit button\n if (submitButton) {\n submitButton.disabled = false;\n submitButton.innerText = 'Submit';\n }\n }\n });\n }, 300);\n \n form.addEventListener('submit', debouncedSubmit);\n }\n \n // Handle magic link form submission with debouncing\n if (magicLinkForm) {\n const debouncedMagicLink = debounce((e) => {\n e.preventDefault();\n \n // Validate the form before submission\n if (!validateForm(magicLinkForm)) {\n return;\n }\n \n const email = document.getElementById('existingEmail')?.value;\n \n requestMagicLink(email, {\n onStart: () => {\n // Disable the button and show loading state\n if (magicLinkButton) {\n magicLinkButton.disabled = true;\n magicLinkButton.innerText = 'Sending...';\n }\n \n // Hide any previous messages\n if (magicLinkSuccessMessage) magicLinkSuccessMessage.classList.add('hidden');\n if (magicLinkErrorMessage) magicLinkErrorMessage.classList.add('hidden');\n },\n onSuccess: (message) => {\n magicLinkForm.reset();\n \n // Update success message with server response\n if (!magicLinkSuccessMessage) {\n alert(message);\n } else {\n magicLinkSuccessMessage.textContent = message;\n magicLinkSuccessMessage.classList.remove('hidden');\n magicLinkSuccessMessage.style.display = 'block';\n }\n },\n onError: (message) => {\n if (!magicLinkErrorMessage) {\n alert(message);\n } else {\n magicLinkErrorMessage.textContent = message;\n magicLinkErrorMessage.classList.remove('hidden');\n magicLinkErrorMessage.style.display = 'block';\n }\n },\n onComplete: () => {\n // Re-enable the button\n if (magicLinkButton) {\n magicLinkButton.disabled = false;\n magicLinkButton.innerText = 'Send Magic Link';\n }\n }\n });\n }, 300);\n \n magicLinkForm.addEventListener('submit', debouncedMagicLink);\n }\n }).catch(error => {\n console.error('Error loading modules:', error);\n });\n}\n\n// Load non-critical third-party scripts\nfunction loadThirdPartyScripts() {\n // Example: Load analytics or other non-critical scripts\n // loadScriptDeferred('https://some-analytics-script.js');\n}\n\n// Defer loading of third-party scripts\nwindow.addEventListener('load', () => {\n setTimeout(loadThirdPartyScripts, 2000);\n});",[],[305,371,440],{"_107":448,"_100":449,"_154":450,"_156":372,"_157":141,"_158":451,"_160":121,"_109":452,"_104":31,"_162":175,"_164":453,"_165":27,"_166":-5,"_167":454,"_103":455},"0352f3f6-2b6b-11f0-8d5e-569c3dd06744","uploadcare-helper.js","0352f4aa-2b6b-11f0-8d5e-569c3dd06744",202,["D",1746639906566],"/**\n * Uploadcare Helper Functions\n * \n * This file contains helper functions for working with Uploadcare\n * in a way that avoids group creation issues.\n */\n\n/**\n * Initialize single file uploaders\n * @param {Array} uploaderIds - Array of uploader element IDs\n * @param {Function} onFileUploaded - Callback function when a file is uploaded\n */\nfunction initSingleFileUploaders(uploaderIds, onFileUploaded) {\n if (typeof uploadcare === 'undefined') {\n console.error('ERROR: Uploadcare library is not loaded!');\n return;\n }\n \n uploaderIds.forEach(id => {\n const widget = uploadcare.Widget(`#${id}`);\n \n widget.onChange(function(file) {\n if (!file) return;\n \n // Handle file upload\n file.progress(info => {\n console.log(`Upload progress for ${id}:`, Math.round(info.progress * 100) + '%');\n });\n \n file.done(fileInfo => {\n console.log(`Upload completed for ${id}:`, fileInfo);\n \n // Call the callback with the file info\n if (typeof onFileUploaded === 'function') {\n onFileUploaded(fileInfo);\n }\n });\n \n file.fail(error => {\n console.error(`Upload failed for ${id}:`, error);\n });\n });\n });\n}\n\n/**\n * Get all uploaded file UUIDs from multiple single uploaders\n * @param {Array} uploaderIds - Array of uploader element IDs\n * @returns {Promise} - Promise resolving to array of file UUIDs\n */\nfunction getUploadedFileUUIDs(uploaderIds) {\n return new Promise((resolve) => {\n const fileUUIDs = [];\n let processedCount = 0;\n \n // If no uploaders, resolve with empty array\n if (!uploaderIds || uploaderIds.length === 0) {\n resolve([]);\n return;\n }\n \n uploaderIds.forEach(id => {\n const widget = uploadcare.Widget(`#${id}`);\n const file = widget.value();\n \n if (file) {\n file.done(fileInfo => {\n if (fileInfo && fileInfo.uuid) {\n fileUUIDs.push(fileInfo.uuid);\n }\n \n processedCount++;\n if (processedCount === uploaderIds.length) {\n resolve(fileUUIDs);\n }\n }).fail(() => {\n processedCount++;\n if (processedCount === uploaderIds.length) {\n resolve(fileUUIDs);\n }\n });\n } else {\n processedCount++;\n if (processedCount === uploaderIds.length) {\n resolve(fileUUIDs);\n }\n }\n });\n });\n}\n\n/**\n * Clear all single file uploaders\n * @param {Array} uploaderIds - Array of uploader element IDs\n */\nfunction clearUploaders(uploaderIds) {\n uploaderIds.forEach(id => {\n const widget = uploadcare.Widget(`#${id}`);\n widget.value(null);\n });\n}\n\n/**\n * Create a preview gallery from individual file UUIDs\n * @param {Array} fileUUIDs - Array of Uploadcare file UUIDs\n * @param {string} containerId - ID of container element for the gallery\n * @param {Function} onDelete - Optional callback when delete button is clicked\n */\nfunction createFileGallery(fileUUIDs, containerId, onDelete) {\n const container = document.getElementById(containerId);\n if (!container) return;\n \n // Clear the container\n container.innerHTML = '';\n \n if (!fileUUIDs || fileUUIDs.length === 0) {\n container.innerHTML = '

No images uploaded yet

';\n return;\n }\n \n // Create gallery grid\n const gallery = document.createElement('div');\n gallery.className = 'grid grid-cols-2 md:grid-cols-4 gap-4';\n container.appendChild(gallery);\n \n // Add each image to the gallery\n fileUUIDs.forEach(uuid => {\n const cdnUrl = `https://ucarecdn.com/${uuid}/`;\n \n const item = document.createElement('div');\n item.className = 'relative bg-white rounded-lg shadow-sm overflow-hidden';\n item.dataset.uuid = uuid;\n \n // Image preview\n const img = document.createElement('img');\n img.src = `${cdnUrl}-/preview/300x300/-/format/auto/-/quality/smart/`;\n img.alt = 'Image preview';\n img.className = 'w-full h-32 object-cover';\n \n // Image actions\n const actions = document.createElement('div');\n actions.className = 'p-2 flex justify-between items-center';\n \n // View button\n const viewBtn = document.createElement('a');\n viewBtn.href = cdnUrl;\n viewBtn.target = '_blank';\n viewBtn.className = 'text-blue-500 hover:text-blue-700 text-sm';\n viewBtn.textContent = 'View';\n \n // Delete button\n const deleteBtn = document.createElement('button');\n deleteBtn.type = 'button';\n deleteBtn.className = 'text-red-500 hover:text-red-700 text-sm';\n deleteBtn.textContent = 'Delete';\n deleteBtn.onclick = () => {\n if (typeof onDelete === 'function') {\n onDelete(uuid, item);\n }\n };\n \n // Assemble the item\n actions.appendChild(viewBtn);\n actions.appendChild(deleteBtn);\n item.appendChild(img);\n item.appendChild(actions);\n gallery.appendChild(item);\n });\n}",[],[305,371,449],[305,371],{"_107":458,"_100":459,"_154":460,"_156":306,"_157":141,"_158":461,"_160":121,"_109":462,"_104":290,"_162":463,"_164":464,"_165":27,"_166":-5,"_167":465,"_103":466},"ab2c1d32-2b75-11f0-bab8-569c3dd06744","direct-fix.ts","a90ee4d0-2b75-11f0-9a45-569c3dd06744",244,["D",1746644483126],"http","import { Hono } from \"https://esm.sh/hono@3.12.6\";\nimport { successResponse, errorResponse } from \"../utils/responseUtils.ts\";\n\nconst app = new Hono();\n\n// Simple HTML page with a form and success message\napp.get(\"/\", (c) => {\n return c.html(`\n \n \n \n \n \n LauraMepson\n \n \n \n \n

LauraMepson

\n \n \n \n \n \n

\n \n

Submission Successful!

Thank you for your submission! We've sent a confirmation email with next steps.

Please check your inbox for important information about your submission.

\n \n \n

Already have an account?

\n \n

\n \n \n \n \n \n \n `);\n});\n\n// Handle form submission\napp.post(\"/submit\", async (c) => {\n try {\n const formData = await c.req.formData();\n const companyName = formData.get(\"companyName\")?.toString() || \"\";\n const email = formData.get(\"email\")?.toString() || \"\";\n \n if (!companyName || !email) {\n return errorResponse(c, \"Company name and email are required\", 400);\n }\n \n // Simulate processing\n await new Promise(resolve => setTimeout(resolve, 500));\n \n return successResponse(c, \"Thank you! We've sent an email with instructions to continue.\");\n } catch (error) {\n console.error(\"Error:\", error);\n return errorResponse(c, \"An error occurred processing your submission\", 500);\n }\n});\n\nexport default app.fetch;",[],[305,459],{"_107":468,"_100":469,"_154":470,"_156":306,"_157":141,"_158":471,"_160":121,"_109":472,"_104":387,"_162":463,"_164":473,"_165":27,"_166":-5,"_167":474,"_103":475},"f40ca4b2-2b7b-11f0-8a99-569c3dd06744","success-demo.ts","82e992be-2b75-11f0-8af6-569c3dd06744",273,["D",1746647182383],"import { Hono } from \"https://esm.sh/hono@3.12.6\";\nimport { blob } from \"https://esm.town/v/std/blob\";\n\n// Storage key for dev.to stylesheets\nconst DEVTO_STYLESHEETS_KEY = \"devto_stylesheets\";\n\ninterface StylesheetData {\n stylesheets: string[];\n fetchedAt: string;\n source: string;\n}\n\n/**\n * Fetch dev.to stylesheets from blob storage\n */\nasync function getDevtoStylesheets(): Promise {\n try {\n const data = await blob.getJSON(DEVTO_STYLESHEETS_KEY);\n return data?.stylesheets || [];\n } catch (error) {\n console.error(\"Error fetching dev.to stylesheets:\", error);\n return [];\n }\n}\n\nconst app = new Hono();\n\n// Simple HTML page with a form and success message\napp.get(\"/\", async (c) => {\n // Get the stylesheets\n const stylesheets = await getDevtoStylesheets();\n \n // Create stylesheet links\n const stylesheetLinks = stylesheets\n .map(url => ``)\n .join('\\n');\n \n return c.html(`\n \n \n \n \n \n DEV Partner Portal - Demo\n \n \n \n ${stylesheetLinks}\n \n \n \n \n \n

DEV Partner Portal

\n \n \n

Dev.to Stylesheets

\n Found ${stylesheets.length} stylesheets from dev.to\n

View Stylesheet URLs

${url}

\n \n \n

Dev.to Elements

\n \n

Crayons Buttons

\n \n \n \n

\n \n

Crayons Card

\n \n

This is a card body styled with dev.to's crayons CSS.

\n \n

\n \n \n \n \n \n

\n \n

Submission Successful!

Thank you for your submission! We've sent a confirmation email with next steps.

Please check your inbox for important information about your submission.

\n \n \n

Test Controls

\n \n \n

Dev.to Stylesheet Test

\n \n

This page tests the automatic injection of dev.to stylesheets.

\n \n

Check the page source to see if the dev.to stylesheets have been injected.

\n \n

Dev.to Elements

The following elements should be styled by dev.to stylesheets:

\n \n

\n \n \n \n

\n \n

This is a card body styled with dev.to's crayons CSS.

\n \n

\n \n \n\n",[],[305,478],{"_107":486,"_100":487,"_154":488,"_156":306,"_157":141,"_158":489,"_160":121,"_109":490,"_104":31,"_162":273,"_164":491,"_165":27,"_166":-5,"_167":492,"_103":493},"552abd44-2c60-11f0-b411-569c3dd06744","test-image-loading.html","552abfa6-2c60-11f0-b411-569c3dd06744",445,["D",1746745270577],"\n\n\n \n \n Image Loading Test\n \n \n\n\n

Image Loading Test

\n \n

Test Image Loading

\n \n \n \n

Results

\n \n

Image Gallery

\n Test image loading to see images\n

\n \n \n\n",[],[305,487],{"_107":495,"_100":496,"_154":497,"_156":306,"_157":141,"_158":498,"_160":121,"_109":499,"_104":31,"_162":273,"_164":500,"_165":27,"_166":-5,"_167":501,"_103":502},"6b265338-2b75-11f0-93af-569c3dd06744","test-success.html","6b26540a-2b75-11f0-93af-569c3dd06744",239,["D",1746644375724],"\n\n\n \n \n Test Success Message\n \n \n\n\n

Test Success Message

\n \n

Submission Successful!

Thank you! We've sent an email with instructions to continue.

Please check your inbox for important information about your submission.

\n \n

\n \n \n\n",[],[305,496],[305],{"_107":505,"_100":506,"_154":507,"_156":-5,"_157":141,"_158":159,"_160":121,"_109":508,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":509,"_103":556},"76e9e766-2adf-11f0-ad9d-569c3dd06744","services","ed368a55-a55d-4883-a46c-b3a7d7aa58c6",["D",1746579970933],[510,520,529,538,546],{"_107":511,"_100":512,"_154":513,"_156":507,"_157":141,"_158":514,"_160":121,"_109":515,"_104":516,"_162":175,"_164":517,"_165":27,"_166":-5,"_167":518,"_103":519},"5cfe7134-2c36-11f0-9312-569c3dd06744","databaseService.ts","76e99356-2adf-11f0-ad9d-569c3dd06744",411,["D",1746727244839],5,"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { Submission, UpdateSubmissionDto } from \"../models/submission.ts\";\nimport { getCached, invalidateCache, invalidateCacheByPrefix } from \"../utils/cacheUtils.ts\";\n\n// Table name - change this when modifying schema\n// Note: Keeping original table name for backward compatibility\nconst SUBMISSIONS_TABLE = 'laura_mepson_submissions_v1';\n\n/**\n * Set up the database tables with optimized schema and indexes\n */\nexport async function setupDatabase(): Promise {\n try {\n // Create submissions table with proper indexes\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS ${SUBMISSIONS_TABLE} (\n id TEXT PRIMARY KEY,\n company_name TEXT NOT NULL,\n email TEXT NOT NULL,\n created_at TEXT NOT NULL,\n additional_fields TEXT\n )`);\n \n // Add indexes for frequently queried columns\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_email ON ${SUBMISSIONS_TABLE} (email)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_created_at ON ${SUBMISSIONS_TABLE} (created_at DESC)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_company_name ON ${SUBMISSIONS_TABLE} (company_name)`);\n \n // Enable WAL mode for better concurrency and performance\n await sqlite.execute(`PRAGMA journal_mode = WAL;`);\n \n // Set synchronous mode to NORMAL for better performance\n await sqlite.execute(`PRAGMA synchronous = NORMAL;`);\n \n // Set cache size to 2000 pages (about 8MB) for better performance\n await sqlite.execute(`PRAGMA cache_size = 2000;`);\n \n console.log(\"Database setup complete with optimized settings\");\n } catch (error) {\n console.error(\"Error setting up database:\", error);\n throw error;\n }\n}\n\n/**\n * Save a new submission with transaction\n */\nexport async function saveSubmission(id: string, companyName: string, email: string): Promise> {\n try {\n const createdAt = new Date().toISOString();\n \n // Use a transaction for better performance and data integrity\n await sqlite.execute('BEGIN TRANSACTION');\n \n await sqlite.execute(\n `INSERT INTO ${SUBMISSIONS_TABLE} (id, company_name, email, created_at, additional_fields)\n VALUES (?, ?, ?, ?, ?)`,\n [id, companyName, email, createdAt, \"{}\"]\n );\n \n await sqlite.execute('COMMIT');\n \n // Invalidate any cached submissions for this email\n invalidateCacheByPrefix(`submission_email_${email}`);\n \n return { id, companyName, email, createdAt };\n } catch (error) {\n // Rollback transaction on error\n await sqlite.execute('ROLLBACK');\n console.error(\"Error saving submission:\", error);\n throw error;\n }\n}\n\n/**\n * Get a submission by ID with optimized query\n */\nexport async function getSubmission(id: string): Promise {\n // Use cache with a 5-minute TTL\n return getCached(`submission_id_${id}`, async () => {\n try {\n // Use a more efficient query with explicit column selection\n const result = await sqlite.execute(\n `SELECT id, company_name, email, created_at, additional_fields \n FROM ${SUBMISSIONS_TABLE} \n WHERE id = ?\n LIMIT 1`,\n [id]\n );\n \n if (result.rows.length === 0) {\n return null;\n }\n \n const row = result.rows[0];\n let additionalFields = {};\n \n try {\n additionalFields = JSON.parse(row.additional_fields || \"{}\");\n } catch (e) {\n console.error(\"Error parsing additional fields:\", e);\n }\n \n return {\n id: row.id,\n companyName: row.company_name,\n email: row.email,\n createdAt: row.created_at,\n additionalFields\n };\n } catch (error) {\n console.error(\"Error getting submission:\", error);\n throw error;\n }\n });\n}\n\n/**\n * Find a submission by email with optimized query\n */\nexport async function findSubmissionByEmail(email: string): Promise {\n // Use cache with a 5-minute TTL\n return getCached(`submission_email_${email}`, async () => {\n try {\n // Use a more efficient query with explicit column selection and index\n const result = await sqlite.execute(\n `SELECT id, company_name, email, created_at, additional_fields \n FROM ${SUBMISSIONS_TABLE} \n WHERE email = ?\n ORDER BY created_at DESC\n LIMIT 1`,\n [email]\n );\n \n if (result.rows.length === 0) {\n return null;\n }\n \n const row = result.rows[0];\n let additionalFields = {};\n \n try {\n additionalFields = JSON.parse(row.additional_fields || \"{}\");\n } catch (e) {\n console.error(\"Error parsing additional fields:\", e);\n }\n \n return {\n id: row.id,\n companyName: row.company_name,\n email: row.email,\n createdAt: row.created_at,\n additionalFields\n };\n } catch (error) {\n console.error(\"Error finding submission by email:\", error);\n return null;\n }\n });\n}\n\n/**\n * Update a submission with additional fields using transaction\n */\nexport async function updateSubmission(id: string, additionalFields: Record): Promise {\n try {\n // First get the existing submission\n const submission = await getSubmission(id);\n \n if (!submission) {\n throw new Error(\"Submission not found\");\n }\n \n // Merge existing additional fields with new ones\n const updatedFields = {\n ...submission.additionalFields,\n ...additionalFields\n };\n \n // Use a transaction for better performance and data integrity\n await sqlite.execute('BEGIN TRANSACTION');\n \n // Update the database\n await sqlite.execute(\n `UPDATE ${SUBMISSIONS_TABLE} \n SET additional_fields = ? \n WHERE id = ?`,\n [JSON.stringify(updatedFields), id]\n );\n \n await sqlite.execute('COMMIT');\n \n // Invalidate caches for this submission\n invalidateCache(`submission_id_${id}`);\n invalidateCache(`submission_email_${submission.email}`);\n \n return {\n ...submission,\n additionalFields: updatedFields\n };\n } catch (error) {\n // Rollback transaction on error\n await sqlite.execute('ROLLBACK');\n console.error(\"Error updating submission:\", error);\n throw error;\n }\n}\n\n/**\n * Batch get submissions by IDs\n * This is more efficient than making multiple individual queries\n */\nexport async function getSubmissionsByIds(ids: string[]): Promise {\n if (ids.length === 0) {\n return [];\n }\n \n try {\n // Create placeholders for the IN clause\n const placeholders = ids.map(() => '?').join(',');\n \n const result = await sqlite.execute(\n `SELECT id, company_name, email, created_at, additional_fields \n FROM ${SUBMISSIONS_TABLE} \n WHERE id IN (${placeholders})`,\n ids\n );\n \n return result.rows.map(row => {\n let additionalFields = {};\n \n try {\n additionalFields = JSON.parse(row.additional_fields || \"{}\");\n } catch (e) {\n console.error(\"Error parsing additional fields:\", e);\n }\n \n return {\n id: row.id,\n companyName: row.company_name,\n email: row.email,\n createdAt: row.created_at,\n additionalFields\n };\n });\n } catch (error) {\n console.error(\"Error getting submissions by IDs:\", error);\n return [];\n }\n}",[],[506,512],{"_107":521,"_100":522,"_154":523,"_156":507,"_157":141,"_158":524,"_160":121,"_109":525,"_104":387,"_162":175,"_164":526,"_165":27,"_166":-5,"_167":527,"_103":528},"642e8e9e-2b78-11f0-9bf4-569c3dd06744","emailService.ts","76e99770-2adf-11f0-ad9d-569c3dd06744",257,["D",1746645652521],"import { email } from \"https://esm.town/v/std/email\";\n\nconst baseUrl = `https://devto.val.run`;\n\n/**\n * Send confirmation email with link to continue\n */\nexport async function sendConfirmationEmail(\n toEmail: string,\n companyName: string,\n uniqueId: string,\n): Promise {\n // For Val Town HTTP vals, we need to use query parameters instead of path parameters\n const continueUrl = `${baseUrl}?action=continue&id=${uniqueId}`;\n\n const subject = `DEV Partner Portal: Continue Your Submission`;\n\n const text = `\nHello from DEV Partner Portal!\n\nThank you for submitting your company information for ${companyName}.\n\nTo add more details to your submission, please click the link below:\n${continueUrl}\n\nThis link is unique to your submission and will allow you to add additional information.\n\nThank you,\nDEV Partner Portal Team\n `;\n\n const html = `\n\n\n\n \n DEV Partner Portal: Continue Your Submission\n\n\n

Hello from DEV Partner Portal!

\n \n

Thank you for submitting your company information for ${companyName}.

\n \n

To add more details to your submission, please click the button below:

\n \n

\n Continue Your Submission\n

\n \n

This link is unique to your submission and will allow you to add additional information.

\n \n

If the button doesn't work, you can copy and paste this URL into your browser:

${continueUrl}

\n \n

Thank you,
DEV Partner Portal Team

\n\n\n `;\n\n try {\n await email({\n to: toEmail,\n subject,\n text,\n html,\n });\n\n console.log(`Confirmation email sent to ${toEmail}`);\n return true;\n } catch (error) {\n console.error(\"Error sending confirmation email:\", error);\n throw error;\n }\n}",[],[506,522],{"_107":530,"_100":531,"_154":532,"_156":507,"_157":141,"_158":533,"_160":121,"_109":534,"_104":364,"_162":175,"_164":535,"_165":27,"_166":-5,"_167":536,"_103":537},"e4087bbc-2c3f-11f0-abfd-569c3dd06744","imageService.ts","bdedc2d4-2c3f-11f0-94c3-569c3dd06744",433,["D",1746731336871],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { ImageMetadata, UploadcareFile, UploadcareGroup } from \"../models/image.ts\";\nimport { getFileInfo, deleteFile, getGroupInfo, storeGroup, storeFile } from \"./uploadcareService.ts\";\nimport { getCached, invalidateCache, invalidateCacheByPrefix } from \"../utils/cacheUtils.ts\";\n\n// Table name for Uploadcare files\nconst UPLOADCARE_FILES_TABLE = 'uploadcare_files_v1';\n\n/**\n * Set up the Uploadcare files table with optimized schema\n */\nexport async function setupImagesTable(): Promise {\n try {\n console.log(`Setting up Uploadcare files table: ${UPLOADCARE_FILES_TABLE}`);\n \n // Create the optimized table with proper indexes\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS ${UPLOADCARE_FILES_TABLE} (\n file_id TEXT PRIMARY KEY,\n submission_id TEXT NOT NULL,\n created_at TEXT NOT NULL,\n is_group BOOLEAN DEFAULT 0,\n metadata TEXT\n )`);\n \n // Create index for faster lookups by submission\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_submission_id ON ${UPLOADCARE_FILES_TABLE} (submission_id)`);\n \n // Create index for sorting by date\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_created_at ON ${UPLOADCARE_FILES_TABLE} (created_at DESC)`);\n \n console.log(\"Uploadcare files table setup complete\");\n \n // Check if migration is needed, but only run once per deployment\n await runMigrationIfNeeded();\n } catch (error) {\n console.error(\"Error setting up Uploadcare files table:\", error);\n throw error;\n }\n}\n\n// Flag to track if migration has been attempted\nlet migrationAttempted = false;\n\n/**\n * Run migration only if needed and only once\n */\nasync function runMigrationIfNeeded(): Promise {\n // Skip if we've already attempted migration in this session\n if (migrationAttempted) {\n return;\n }\n \n migrationAttempted = true;\n \n try {\n // Check if the new table is empty\n const newTableCount = await sqlite.execute(\n `SELECT COUNT(*) as count FROM ${UPLOADCARE_FILES_TABLE}`\n );\n \n // If the table already has data, skip migration\n if (newTableCount.rows[0].count > 0) {\n console.log(`New table already has ${newTableCount.rows[0].count} records, skipping migration`);\n return;\n }\n \n // Check if old tables exist\n const oldTablesExist = await Promise.all([\n checkTableExists('laura_mepson_images_v1'),\n checkTableExists('laura_mepson_images_v2')\n ]);\n \n const oldTableV1Exists = oldTablesExist[0];\n const oldTableV2Exists = oldTablesExist[1];\n \n if (!oldTableV1Exists && !oldTableV2Exists) {\n console.log('No old tables found, no migration needed');\n return;\n }\n \n console.log('Starting one-time migration of image data...');\n \n // Migrate from v2 table if it exists\n if (oldTableV2Exists) {\n await migrateFromTable('laura_mepson_images_v2', true);\n }\n \n // Migrate from v1 table if it exists and we haven't already migrated from v2\n if (oldTableV1Exists && !oldTableV2Exists) {\n await migrateFromTable('laura_mepson_images_v1', false);\n }\n \n console.log('One-time migration completed successfully');\n } catch (error) {\n console.error('Error during migration check:', error);\n // Continue even if migration check fails\n }\n}\n\n/**\n * Migrate data from an old table to the new table\n */\nasync function migrateFromTable(tableName: string, hasGroupId: boolean): Promise {\n try {\n console.log(`Migrating data from ${tableName}`);\n \n // Build the query based on the table structure\n let query = `SELECT id, submission_id, uploaded_at`;\n if (hasGroupId) {\n query += `, group_id`;\n }\n query += ` FROM ${tableName}`;\n \n const oldData = await sqlite.execute(query);\n \n if (oldData.rows.length === 0) {\n console.log(`No data found in ${tableName}`);\n return;\n }\n \n console.log(`Found ${oldData.rows.length} records to migrate from ${tableName}`);\n \n // Use a transaction for better performance\n await sqlite.execute('BEGIN TRANSACTION');\n \n let migratedCount = 0;\n for (const row of oldData.rows) {\n try {\n // Check if this file is already in the new table\n const exists = await sqlite.execute(\n `SELECT file_id FROM ${UPLOADCARE_FILES_TABLE} WHERE file_id = ?`,\n [row.id]\n );\n \n if (exists.rows.length === 0) {\n // Insert into new table\n await sqlite.execute(\n `INSERT INTO ${UPLOADCARE_FILES_TABLE} (file_id, submission_id, created_at, is_group) \n VALUES (?, ?, ?, ?)`,\n [\n row.id,\n row.submission_id,\n row.uploaded_at || new Date().toISOString(),\n hasGroupId && row.group_id ? 1 : 0\n ]\n );\n migratedCount++;\n }\n } catch (error) {\n console.error(`Error migrating record ${row.id}:`, error);\n // Continue with next record\n }\n }\n \n await sqlite.execute('COMMIT');\n console.log(`Successfully migrated ${migratedCount} records from ${tableName}`);\n } catch (error) {\n await sqlite.execute('ROLLBACK');\n console.error(`Error migrating from ${tableName}:`, error);\n throw error;\n }\n}\n\n/**\n * Check if a table exists in the database\n */\nasync function checkTableExists(tableName: string): Promise {\n try {\n const result = await sqlite.execute(\n `SELECT name FROM sqlite_master WHERE type='table' AND name=?`,\n [tableName]\n );\n \n return result.rows.length > 0;\n } catch (error) {\n console.error(`Error checking if table ${tableName} exists:`, error);\n return false;\n }\n}\n\n/**\n * Link an Uploadcare file to a submission\n */\nexport async function linkUploadcareFile(\n fileId: string,\n submissionId: string,\n isGroup: boolean = false\n): Promise {\n try {\n console.log(`Linking Uploadcare file: ${fileId} to submission: ${submissionId}`);\n \n // Check if this file is already linked\n const existing = await sqlite.execute(\n `SELECT file_id FROM ${UPLOADCARE_FILES_TABLE} WHERE file_id = ?`,\n [fileId]\n );\n \n if (existing.rows.length > 0) {\n console.log(`File ${fileId} is already linked, updating submission_id`);\n \n // Update the existing record\n await sqlite.execute(\n `UPDATE ${UPLOADCARE_FILES_TABLE} SET \n submission_id = ?, \n is_group = ?\n WHERE file_id = ?`,\n [submissionId, isGroup ? 1 : 0, fileId]\n );\n } else {\n // Insert a new record\n await sqlite.execute(\n `INSERT INTO ${UPLOADCARE_FILES_TABLE} (file_id, submission_id, created_at, is_group) \n VALUES (?, ?, ?, ?)`,\n [fileId, submissionId, new Date().toISOString(), isGroup ? 1 : 0]\n );\n }\n \n // Invalidate the cache for this submission's files\n invalidateCache(`submission_files_${submissionId}`);\n \n return true;\n } catch (error) {\n console.error(`Error linking Uploadcare file ${fileId}:`, error);\n return false;\n }\n}\n\n/**\n * Unlink an Uploadcare file from a submission\n */\nexport async function unlinkUploadcareFile(\n fileId: string,\n submissionId: string\n): Promise {\n try {\n console.log(`Unlinking Uploadcare file: ${fileId} from submission: ${submissionId}`);\n \n // Verify the file belongs to this submission\n const existing = await sqlite.execute(\n `SELECT file_id FROM ${UPLOADCARE_FILES_TABLE} \n WHERE file_id = ? AND submission_id = ?`,\n [fileId, submissionId]\n );\n \n if (existing.rows.length === 0) {\n console.log(`File ${fileId} is not linked to submission ${submissionId}`);\n return false;\n }\n \n // Delete the record\n await sqlite.execute(\n `DELETE FROM ${UPLOADCARE_FILES_TABLE} WHERE file_id = ?`,\n [fileId]\n );\n \n // Invalidate the cache for this submission's files\n invalidateCache(`submission_files_${submissionId}`);\n \n return true;\n } catch (error) {\n console.error(`Error unlinking Uploadcare file ${fileId}:`, error);\n return false;\n }\n}\n\n/**\n * Get all Uploadcare files for a submission\n */\nexport async function getSubmissionFiles(submissionId: string): Promise {\n // Use cache with a 5-minute TTL\n return getCached(`submission_files_${submissionId}`, async () => {\n try {\n console.log(`Getting Uploadcare files for submission: ${submissionId}`);\n \n const result = await sqlite.execute(\n `SELECT file_id, is_group FROM ${UPLOADCARE_FILES_TABLE}\n WHERE submission_id = ?\n ORDER BY created_at DESC`,\n [submissionId]\n );\n \n // Process the results to handle groups\n const fileIds: string[] = [];\n \n for (const row of result.rows) {\n const fileId = row.file_id;\n const isGroup = row.is_group === 1;\n \n if (isGroup) {\n try {\n // For groups, we need to get the individual files\n console.log(`Expanding group: ${fileId}`);\n const groupInfo = await getGroupInfo(fileId);\n \n if (groupInfo && groupInfo.files) {\n // Add each file in the group\n for (let i = 0; i < groupInfo.files.length; i++) {\n const file = groupInfo.files[i];\n fileIds.push(file.uuid);\n }\n } else {\n // If we can't get group info, just add the group ID\n fileIds.push(fileId);\n }\n } catch (groupError) {\n console.error(`Error expanding group ${fileId}:`, groupError);\n // If there's an error, just add the group ID\n fileIds.push(fileId);\n }\n } else {\n // For individual files, just add the file ID\n fileIds.push(fileId);\n }\n }\n \n return fileIds;\n } catch (error) {\n console.error(`Error getting Uploadcare files for submission ${submissionId}:`, error);\n return [];\n }\n });\n}\n\n/**\n * Get image metadata from Uploadcare\n * This is a simplified version that uses the Uploadcare API directly\n * instead of maintaining our own metadata\n */\nexport async function getImageMetadata(imageId: string): Promise {\n try {\n console.log(`Getting image metadata for: ${imageId}`);\n \n // Get file info from Uploadcare API (this is cached)\n const fileInfo = await getFileInfo(imageId);\n \n if (!fileInfo) {\n return null;\n }\n \n // Get submission ID from our database\n const result = await sqlite.execute(\n `SELECT submission_id FROM ${UPLOADCARE_FILES_TABLE} WHERE file_id = ?`,\n [imageId]\n );\n \n const submissionId = result.rows.length > 0 ? result.rows[0].submission_id : null;\n \n // Return the metadata\n return {\n id: fileInfo.uuid,\n originalName: fileInfo.originalFilename,\n contentType: fileInfo.mimeType,\n size: fileInfo.size,\n uploadedAt: fileInfo.uploadedAt,\n submissionId: submissionId,\n cdnUrl: fileInfo.cdnUrl,\n groupId: null // We don't track this anymore\n };\n } catch (error) {\n console.error(`Error getting image metadata for ${imageId}:`, error);\n return null;\n }\n}\n\n/**\n * List all images for a submission\n * This is a simplified version that uses our optimized table\n */\nexport async function listSubmissionImages(submissionId: string): Promise {\n // Use cache with a 5-minute TTL\n return getCached(`submission_images_${submissionId}`, async () => {\n try {\n console.log(`Listing images for submission: ${submissionId}`);\n \n // Get all file IDs for this submission\n const fileIds = await getSubmissionFiles(submissionId);\n \n if (fileIds.length === 0) {\n return [];\n }\n \n // Get metadata for each file\n const images: ImageMetadata[] = [];\n \n for (const fileId of fileIds) {\n try {\n const metadata = await getImageMetadata(fileId);\n if (metadata) {\n images.push(metadata);\n }\n } catch (error) {\n console.error(`Error getting metadata for file ${fileId}:`, error);\n // Continue with next file\n }\n }\n \n // Sort by uploaded date in descending order\n images.sort((a, b) => {\n return new Date(b.uploadedAt).getTime() - new Date(a.uploadedAt).getTime();\n });\n \n return images;\n } catch (error) {\n console.error(`Error listing submission images for ${submissionId}:`, error);\n return [];\n }\n });\n}\n\n/**\n * Delete image from Uploadcare and remove from our database\n */\nexport async function deleteImage(imageId: string): Promise {\n try {\n console.log(`Deleting image: ${imageId}`);\n \n // Get the submission ID before deleting\n const result = await sqlite.execute(\n `SELECT submission_id FROM ${UPLOADCARE_FILES_TABLE} WHERE file_id = ?`,\n [imageId]\n );\n \n if (result.rows.length === 0) {\n console.error(`Image not found in database: ${imageId}`);\n return false;\n }\n \n const submissionId = result.rows[0].submission_id;\n \n // Try to delete from Uploadcare\n let uploadcareDeleteSuccess = false;\n try {\n console.log(`Deleting image from Uploadcare: ${imageId}`);\n uploadcareDeleteSuccess = await deleteFile(imageId);\n \n if (!uploadcareDeleteSuccess) {\n console.warn(`Failed to delete image from Uploadcare: ${imageId}`);\n // Continue with database deletion even if Uploadcare deletion fails\n } else {\n console.log(`Successfully deleted image from Uploadcare: ${imageId}`);\n }\n } catch (uploadcareError) {\n console.error(`Error deleting image from Uploadcare: ${imageId}`, uploadcareError);\n // Continue with database deletion even if Uploadcare deletion fails\n }\n \n // Delete from our database\n try {\n console.log(`Deleting image from database: ${imageId}`);\n await sqlite.execute(\n `DELETE FROM ${UPLOADCARE_FILES_TABLE} WHERE file_id = ?`,\n [imageId]\n );\n console.log(`Successfully deleted image from database: ${imageId}`);\n \n // Invalidate caches\n invalidateCache(`submission_files_${submissionId}`);\n invalidateCache(`submission_images_${submissionId}`);\n \n return true;\n } catch (dbError) {\n console.error(`Database error deleting image ${imageId}:`, dbError);\n return false;\n }\n } catch (error) {\n console.error(`Error deleting image ${imageId}:`, error);\n return false;\n }\n}\n\n/**\n * Register an Uploadcare file in our system\n */\nexport async function registerUploadcareFile(\n uploadcareUuid: string,\n submissionId: string,\n groupId?: string\n): Promise {\n try {\n console.log(`Registering Uploadcare file: ${uploadcareUuid} for submission: ${submissionId}`);\n \n // Get file info from Uploadcare\n let fileInfo;\n try {\n console.log(`Fetching file info from Uploadcare for UUID: ${uploadcareUuid}`);\n fileInfo = await getFileInfo(uploadcareUuid);\n console.log('Successfully retrieved file info from Uploadcare:', fileInfo);\n } catch (fileInfoError) {\n console.error(`Error getting file info from Uploadcare for ${uploadcareUuid}:`, fileInfoError);\n throw fileInfoError;\n }\n \n // Link the file to the submission in our database\n const isGroup = !!groupId;\n const linked = await linkUploadcareFile(uploadcareUuid, submissionId, isGroup);\n \n if (!linked) {\n console.error(`Failed to link file ${uploadcareUuid} to submission ${submissionId}`);\n throw new Error(`Failed to link file to submission`);\n }\n \n // Store the file permanently on Uploadcare\n try {\n await storeFile(uploadcareUuid);\n } catch (storeError) {\n console.error(`Error storing file ${uploadcareUuid} permanently:`, storeError);\n // Continue even if storing fails\n }\n \n // Return the metadata\n return {\n id: fileInfo.uuid,\n originalName: fileInfo.originalFilename,\n contentType: fileInfo.mimeType,\n size: fileInfo.size,\n uploadedAt: fileInfo.uploadedAt,\n submissionId: submissionId,\n cdnUrl: fileInfo.cdnUrl,\n groupId: groupId || null\n };\n } catch (error) {\n console.error(`Error registering Uploadcare file ${uploadcareUuid}:`, error);\n throw error;\n }\n}\n\n/**\n * Register an Uploadcare file group in our system\n */\nexport async function registerUploadcareGroup(\n groupId: string,\n submissionId: string\n): Promise {\n try {\n console.log(`Registering Uploadcare group: ${groupId} for submission: ${submissionId}`);\n \n // Get group info from Uploadcare\n const groupInfo = await getGroupInfo(groupId);\n \n // Link the group to the submission\n await linkUploadcareFile(groupId, submissionId, true);\n \n // Store the group permanently\n await storeGroup(groupId);\n \n // Register each file in the group\n const registeredFiles: ImageMetadata[] = [];\n \n for (const file of groupInfo.files) {\n try {\n const metadata = await registerUploadcareFile(file.uuid, submissionId, groupId);\n if (metadata) {\n registeredFiles.push(metadata);\n }\n } catch (fileError) {\n console.error(`Error registering file ${file.uuid} from group ${groupId}:`, fileError);\n // Continue with next file\n }\n }\n \n // Invalidate caches\n invalidateCache(`submission_files_${submissionId}`);\n invalidateCache(`submission_images_${submissionId}`);\n \n return registeredFiles;\n } catch (error) {\n console.error(`Error registering Uploadcare group ${groupId}:`, error);\n return [];\n }\n}",[],[506,531],{"_107":539,"_100":540,"_154":541,"_156":507,"_157":141,"_158":123,"_160":121,"_109":542,"_104":184,"_162":175,"_164":543,"_165":27,"_166":-5,"_167":544,"_103":545},"bdee3a0c-2c3f-11f0-94c3-569c3dd06744","templateService.ts","697c937e-2b4f-11f0-a8e2-569c3dd06744",["D",1746731272923],"import { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { blob } from \"https://esm.town/v/std/blob\";\n\n/**\n * Service for handling HTML templates\n */\n\n// Storage key for dev.to stylesheets\nconst DEVTO_STYLESHEETS_KEY = \"devto_stylesheets\";\n\ninterface StylesheetData {\n stylesheets: string[];\n fetchedAt: string;\n source: string;\n}\n\n/**\n * Fetch dev.to stylesheets from blob storage\n */\nasync function getDevtoStylesheets(): Promise {\n try {\n const data = await blob.getJSON(DEVTO_STYLESHEETS_KEY);\n return data?.stylesheets || [];\n } catch (error) {\n console.error(\"Error fetching dev.to stylesheets:\", error);\n return [];\n }\n}\n\n/**\n * Inject dev.to stylesheets into HTML\n */\nasync function injectDevtoStylesheets(html: string): Promise {\n const stylesheets = await getDevtoStylesheets();\n \n if (stylesheets.length === 0) {\n console.log(\"No dev.to stylesheets found in storage\");\n return html;\n }\n \n console.log(`Injecting ${stylesheets.length} dev.to stylesheets`);\n \n // Create stylesheet links\n const stylesheetLinks = stylesheets\n .map(url => ``)\n .join('\\n');\n \n // Add a comment to identify the injected stylesheets\n const stylesheetBlock = `\n\n${stylesheetLinks}\n\n`;\n \n // Insert after the last link or before \n if (html.includes('')) {\n return html.replace('', `${stylesheetBlock}`);\n } else {\n return html;\n }\n}\n\n/**\n * Process conditional blocks in templates\n * Handles #if, #else, #elseif, and #endif directives\n */\nfunction processConditionals(html: string, data: Record): string {\n // Process nested conditionals by repeatedly applying the replacement\n // until no more changes are made\n let previousHtml = \"\";\n let currentHtml = html;\n \n while (previousHtml !== currentHtml) {\n previousHtml = currentHtml;\n \n // Match {{#if condition}}...{{/if}} blocks\n const ifRegex = /\\{\\{#if\\s+([^}]+)\\}\\}([\\s\\S]*?)(?:\\{\\{#else\\}\\}([\\s\\S]*?))?(?:\\{\\{#elseif\\s+([^}]+)\\}\\}([\\s\\S]*?))*\\{\\{\\/if\\}\\}/g;\n \n currentHtml = previousHtml.replace(ifRegex, (match, condition, ifContent, elseContent = '') => {\n // Evaluate the condition\n let result = false;\n \n // Handle equality check (condition == value)\n if (condition.includes('==')) {\n const [left, right] = condition.split('==').map(part => part.trim());\n const leftValue = data[left] || left;\n const rightValue = data[right] || right.replace(/[\"']/g, ''); // Remove quotes if present\n result = leftValue == rightValue;\n } \n // Handle simple variable check\n else {\n const value = data[condition.trim()];\n result = !!value;\n }\n \n return result ? ifContent : elseContent;\n });\n }\n \n return currentHtml;\n}\n\n/**\n * Process component inclusions in templates\n * Handles {{> component/path param1=\"value1\" param2=\"value2\"}} syntax\n */\nasync function processComponents(\n html: string, \n data: Record,\n importMetaUrl: string\n): Promise {\n // Match component inclusion patterns like {{> components/header title=\"My Title\"}}\n const componentRegex = /\\{\\{>\\s*([^}\\s]+)(?:\\s+([^}]+))?\\}\\}/g;\n \n let result = html;\n let match;\n \n // Find all component inclusions\n const componentMatches: Array<{\n fullMatch: string;\n componentPath: string;\n paramsString?: string;\n }> = [];\n \n while ((match = componentRegex.exec(html)) !== null) {\n componentMatches.push({\n fullMatch: match[0],\n componentPath: match[1],\n paramsString: match[2]\n });\n }\n \n // Process each component inclusion\n for (const { fullMatch, componentPath, paramsString } of componentMatches) {\n // Parse component parameters\n const componentData = { ...data };\n if (paramsString) {\n const params = parseComponentParams(paramsString);\n Object.assign(componentData, params);\n }\n \n try {\n // Load and render the component\n const componentHtml = await renderTemplate(\n `/views/${componentPath}.html`, \n componentData, \n importMetaUrl\n );\n \n // Replace the component placeholder with the rendered component\n result = result.replace(fullMatch, componentHtml);\n } catch (error) {\n console.error(`Error rendering component ${componentPath}:`, error);\n // Replace with error message in development, empty string in production\n result = result.replace(fullMatch, ``);\n }\n }\n \n return result;\n}\n\n/**\n * Parse component parameters from a string\n * Handles param=\"value\" and param='value' syntax\n */\nfunction parseComponentParams(paramsString: string): Record {\n const params: Record = {};\n \n // Match param=\"value\" patterns\n const paramRegex = /(\\w+)=(?:\"([^\"]*)\"|'([^']*)'|(\\S+))/g;\n \n let paramMatch;\n while ((paramMatch = paramRegex.exec(paramsString)) !== null) {\n const [, name, doubleQuoted, singleQuoted, unquoted] = paramMatch;\n params[name] = doubleQuoted || singleQuoted || unquoted;\n }\n \n return params;\n}\n\n/**\n * Replace variables in a template\n * Handles {{variable}} syntax\n */\nfunction replaceVariables(html: string, data: Record): string {\n // Add current year to data if not present\n if (!data.year) {\n data.year = new Date().getFullYear().toString();\n }\n \n // Replace all placeholders with their values\n let result = html;\n for (const [key, value] of Object.entries(data)) {\n if (value !== undefined && value !== null) {\n const placeholder = `{{${key}}}`;\n // Use a global regex to replace all occurrences\n const regex = new RegExp(placeholder, 'g');\n result = result.replace(regex, value.toString());\n }\n }\n \n return result;\n}\n\n/**\n * Render a template with the given data\n * @param templatePath Path to the template file\n * @param data Object containing key-value pairs to replace in the template\n * @param importMetaUrl import.meta.url from the calling file\n */\nexport async function renderTemplate(\n templatePath: string, \n data: Record = {}, \n importMetaUrl: string\n): Promise {\n try {\n // Read the template file\n let html = await readFile(templatePath, importMetaUrl);\n \n // Process components first (they may contain conditionals)\n html = await processComponents(html, data, importMetaUrl);\n \n // Process conditionals (multiple passes to handle nested conditionals)\n let previousHtml = \"\";\n let currentHtml = html;\n let iterations = 0;\n const maxIterations = 5; // Prevent infinite loops\n \n while (previousHtml !== currentHtml && iterations < maxIterations) {\n previousHtml = currentHtml;\n currentHtml = processConditionals(previousHtml, data);\n iterations++;\n }\n \n html = currentHtml;\n \n // Replace variables\n html = replaceVariables(html, data);\n \n // Inject dev.to stylesheets\n html = await injectDevtoStylesheets(html);\n \n return html;\n } catch (error) {\n console.error(`Error rendering template ${templatePath}:`, error);\n throw error;\n }\n}",[],[506,540],{"_107":547,"_100":548,"_154":549,"_156":507,"_157":141,"_158":550,"_160":121,"_109":551,"_104":552,"_162":175,"_164":553,"_165":27,"_166":-5,"_167":554,"_103":555},"1e4388c8-2c2f-11f0-aba3-569c3dd06744","uploadcareService.ts","76e9a9a4-2adf-11f0-ad9d-569c3dd06744",389,["D",1746724133121],16,"/**\n * Uploadcare integration service\n * Simplified to leverage more Uploadcare built-in features\n */\n\n// Public key for Uploadcare\nexport const UPLOADCARE_PUBLIC_KEY = '1759805aecfaf0cc68cc';\n\n// Secret key is stored in environment variables\nconst UPLOADCARE_SECRET_KEY = Deno.env.get('UPLOADCARE_SECRET_KEY');\n\n// Uploadcare API endpoints\nconst UPLOADCARE_API_BASE = 'https://api.uploadcare.com';\nconst UPLOADCARE_CDN_BASE = 'https://ucarecdn.com';\n\n// Initialize keys and ensure they're available\nlet keysInitialized = false;\n\n/**\n * Ensure keys are initialized\n */\nexport function ensureKeysInitialized(): boolean {\n if (!keysInitialized) {\n console.log('Initializing Uploadcare keys');\n console.log(`Public key: ${UPLOADCARE_PUBLIC_KEY}`);\n \n if (!UPLOADCARE_SECRET_KEY) {\n console.warn('UPLOADCARE_SECRET_KEY environment variable is not set');\n } else {\n console.log('Secret key is set (value hidden)');\n }\n \n keysInitialized = true;\n }\n return keysInitialized;\n}\n\n/**\n * Get comprehensive Uploadcare widget configuration\n * This configuration is now primarily handled via data attributes in HTML\n * @param customOptions - Optional custom configuration options\n */\nexport function getUploadcareConfig(customOptions = {}) {\n ensureKeysInitialized();\n \n // Default configuration with best practices from Uploadcare docs\n const defaultConfig = {\n // Core settings\n publicKey: UPLOADCARE_PUBLIC_KEY,\n \n // UI settings\n tabs: 'file camera url facebook gdrive gphotos dropbox instagram',\n previewStep: true,\n clearable: true,\n \n // Image settings\n imageShrink: '2048x2048',\n \n // Upload settings\n multipleMax: 10,\n \n // Image editing features\n crop: 'free,1:1,3:2,4:3,16:9',\n imagesOnly: true,\n \n // Integration settings\n integration: 'LauraMepson-Portal',\n \n // Effects\n effects: ['crop', 'enhance', 'sharp', 'grayscale'],\n };\n \n // Merge default config with custom options\n return { ...defaultConfig, ...customOptions };\n}\n\n/**\n * Create authentication headers for Uploadcare REST API\n */\nexport function getUploadcareAuthHeaders(): HeadersInit {\n ensureKeysInitialized();\n \n // Current date in RFC2822 format\n const date = new Date().toUTCString();\n \n // Check if secret key is available\n if (!UPLOADCARE_SECRET_KEY) {\n console.error('UPLOADCARE_SECRET_KEY is missing! Authentication will fail.');\n }\n \n const headers = {\n 'Date': date,\n 'Authorization': `Uploadcare.Simple ${UPLOADCARE_PUBLIC_KEY}:${UPLOADCARE_SECRET_KEY || 'missing-secret-key'}`,\n 'Accept': 'application/vnd.uploadcare-v0.7+json',\n 'Content-Type': 'application/json'\n };\n \n return headers;\n}\n\n/**\n * Get file info from Uploadcare\n * Uses Uploadcare's REST API to get detailed file information\n * Now with caching to improve performance\n */\nimport { getCached } from \"../utils/cacheUtils.ts\";\n\nexport async function getFileInfo(fileId: string): Promise {\n // Use the cache utility with a 30-minute TTL for file info\n // File info rarely changes, so we can cache it for longer\n return getCached(`uploadcare_file_${fileId}`, async () => {\n try {\n ensureKeysInitialized();\n \n console.log(`Fetching file info from Uploadcare for file ID: ${fileId}`);\n console.log(`Using API URL: ${UPLOADCARE_API_BASE}/files/${fileId}/`);\n \n // Check if we have a secret key\n if (!UPLOADCARE_SECRET_KEY) {\n console.error('UPLOADCARE_SECRET_KEY is not set. Authentication will fail.');\n throw new Error('Uploadcare secret key is not configured');\n }\n \n const headers = getUploadcareAuthHeaders();\n console.log('Request headers:', {\n Date: headers['Date'],\n Accept: headers['Accept'],\n 'Content-Type': headers['Content-Type'],\n // Don't log the full Authorization header for security\n Authorization: headers['Authorization'] ? 'Set (value hidden)' : 'Not set'\n });\n \n // Make the API request\n let response;\n try {\n response = await fetch(`${UPLOADCARE_API_BASE}/files/${fileId}/`, {\n headers: headers\n });\n \n console.log(`Uploadcare API response status: ${response.status} ${response.statusText}`);\n } catch (fetchError) {\n console.error('Network error fetching from Uploadcare API:', fetchError);\n throw new Error(`Network error: ${fetchError.message}`);\n }\n \n // Handle non-OK responses\n if (!response.ok) {\n let errorText;\n try {\n errorText = await response.text();\n } catch (e) {\n errorText = 'Could not read error response';\n }\n \n console.error(`Uploadcare API error: ${response.status} ${response.statusText} - ${errorText}`);\n \n // Provide more specific error messages based on status code\n if (response.status === 401) {\n throw new Error('Authentication failed: Invalid Uploadcare API credentials');\n } else if (response.status === 404) {\n throw new Error(`File not found: ${fileId}`);\n } else if (response.status === 429) {\n throw new Error('Rate limit exceeded: Too many requests to Uploadcare API');\n } else {\n throw new Error(`Failed to get file info: ${response.status} ${response.statusText} - ${errorText}`);\n }\n }\n \n // Parse the response\n let data;\n try {\n data = await response.json();\n console.log('Uploadcare file info response:', data);\n } catch (parseError) {\n console.error('Error parsing Uploadcare API response:', parseError);\n throw new Error('Invalid response from Uploadcare API');\n }\n \n // Validate the response data\n if (!data || !data.uuid) {\n console.error('Invalid or missing data in Uploadcare response:', data);\n throw new Error('Invalid data received from Uploadcare API');\n }\n \n // Return the processed data\n return {\n uuid: data.uuid,\n originalFilename: data.original_filename || 'unknown',\n mimeType: data.mime_type || 'application/octet-stream',\n size: data.size || 0,\n isImage: data.is_image || false,\n imageInfo: data.image_info,\n uploadedAt: data.datetime_uploaded || new Date().toISOString(),\n url: data.url || '',\n originalUrl: data.original_file_url || '',\n cdnUrl: data.cdn_url || `${UPLOADCARE_CDN_BASE}/${fileId}/`,\n // Include the raw data for access to all Uploadcare properties\n raw: data\n };\n } catch (error) {\n console.error(`Error in getFileInfo for ${fileId}:`, error);\n throw error;\n }\n }, 30 * 60 * 1000); // 30 minute cache\n}\n\n/**\n * Delete file from Uploadcare\n */\nexport async function deleteFile(fileId: string): Promise {\n try {\n const response = await fetch(`${UPLOADCARE_API_BASE}/files/${fileId}/storage/`, {\n method: 'DELETE',\n headers: getUploadcareAuthHeaders()\n });\n \n if (!response.ok) {\n throw new Error(`Failed to delete file: ${response.status} ${response.statusText}`);\n }\n \n return true;\n } catch (error) {\n console.error('Error deleting file from Uploadcare:', error);\n return false;\n }\n}\n\n/**\n * Store file permanently on Uploadcare\n * By default, files are stored temporarily and may be deleted after 24 hours\n */\nexport async function storeFile(fileId: string): Promise {\n try {\n const response = await fetch(`${UPLOADCARE_API_BASE}/files/${fileId}/storage/`, {\n method: 'PUT',\n headers: getUploadcareAuthHeaders()\n });\n \n if (!response.ok) {\n throw new Error(`Failed to store file: ${response.status} ${response.statusText}`);\n }\n \n return true;\n } catch (error) {\n console.error('Error storing file on Uploadcare:', error);\n return false;\n }\n}\n\n/**\n * List files from Uploadcare\n * @param limit - Maximum number of files to return (default: 100)\n * @param stored - Filter by storage status (true = stored, false = not stored)\n */\nexport async function listFiles(limit = 100, stored?: boolean): Promise {\n try {\n let url = `${UPLOADCARE_API_BASE}/files/?limit=${limit}`;\n \n if (stored !== undefined) {\n url += `&stored=${stored ? 'true' : 'false'}`;\n }\n \n const response = await fetch(url, {\n headers: getUploadcareAuthHeaders()\n });\n \n if (!response.ok) {\n throw new Error(`Failed to list files: ${response.status} ${response.statusText}`);\n }\n \n const data = await response.json();\n return data.results || [];\n } catch (error) {\n console.error('Error listing files from Uploadcare:', error);\n return [];\n }\n}\n\n/**\n * Generate a CDN URL with transformations\n * Note: Uploadcare's JavaScript library provides built-in methods for this,\n * but this function is kept for server-side URL generation\n * @param fileId - Uploadcare file UUID\n * @param options - Transformation options\n */\nexport function generateCdnUrl(fileId: string, options: {\n resize?: string; // e.g., \"300x200\"\n crop?: string; // e.g., \"300x200/center\"\n quality?: number; // 1-100\n format?: string; // jpeg, png, webp, etc.\n effect?: string; // grayscale, flip, mirror, enhance, sharp\n progressive?: boolean;\n preview?: boolean;\n} = {}): string {\n const transformations: string[] = [];\n \n // Add transformations in the correct order\n if (options.resize) transformations.push(`-/resize/${options.resize}/`);\n if (options.crop) transformations.push(`-/crop/${options.crop}/`);\n if (options.quality) transformations.push(`-/quality/${options.quality}/`);\n if (options.effect) {\n const effects = options.effect.split(',');\n for (const effect of effects) {\n transformations.push(`-/${effect}/`);\n }\n }\n if (options.progressive) transformations.push('-/progressive/yes/');\n if (options.preview) transformations.push('-/preview/');\n if (options.format) transformations.push(`-/format/${options.format}/`);\n \n // Construct the final URL\n return `${UPLOADCARE_CDN_BASE}/${fileId}/${transformations.join('')}`;\n}\n\n/**\n * Get image dimensions and other metadata\n * This is a convenience function that extracts image dimensions from file info\n */\nexport async function getImageDimensions(fileId: string): Promise<{width: number, height: number} | null> {\n try {\n const fileInfo = await getFileInfo(fileId);\n \n if (fileInfo.isImage && fileInfo.imageInfo) {\n return {\n width: fileInfo.imageInfo.width,\n height: fileInfo.imageInfo.height\n };\n }\n \n return null;\n } catch (error) {\n console.error('Error getting image dimensions:', error);\n return null;\n }\n}\n\n/**\n * Get file group info from Uploadcare\n * @param groupId - Uploadcare group UUID\n */\nexport async function getGroupInfo(groupId: string): Promise {\n // Use the cache utility with a 30-minute TTL for group info\n return getCached(`uploadcare_group_${groupId}`, async () => {\n try {\n ensureKeysInitialized();\n \n const response = await fetch(`${UPLOADCARE_API_BASE}/groups/${groupId}/`, {\n headers: getUploadcareAuthHeaders()\n });\n \n if (!response.ok) {\n const errorText = await response.text();\n throw new Error(`Failed to get group info: ${response.status} ${response.statusText} - ${errorText}`);\n }\n \n // Return the raw response to maintain all Uploadcare data\n return await response.json();\n } catch (error) {\n console.error('Error getting group info from Uploadcare:', error);\n throw error;\n }\n }, 30 * 60 * 1000); // 30 minute cache\n}\n\n/**\n * Store a file group permanently on Uploadcare\n */\nexport async function storeGroup(groupId: string): Promise {\n try {\n const response = await fetch(`${UPLOADCARE_API_BASE}/groups/${groupId}/storage/`, {\n method: 'PUT',\n headers: getUploadcareAuthHeaders()\n });\n \n if (!response.ok) {\n throw new Error(`Failed to store group: ${response.status} ${response.statusText}`);\n }\n \n return true;\n } catch (error) {\n console.error('Error storing group on Uploadcare:', error);\n return false;\n }\n}\n\n/**\n * Create a new file group from individual files\n * @param fileIds - Array of file UUIDs to include in the group\n */\nexport async function createGroup(fileIds: string[]): Promise {\n try {\n const response = await fetch(`${UPLOADCARE_API_BASE}/groups/`, {\n method: 'POST',\n headers: getUploadcareAuthHeaders(),\n body: JSON.stringify({\n files: fileIds.map(id => ({ uuid: id }))\n })\n });\n \n if (!response.ok) {\n throw new Error(`Failed to create group: ${response.status} ${response.statusText}`);\n }\n \n const data = await response.json();\n return data.id || null;\n } catch (error) {\n console.error('Error creating group on Uploadcare:', error);\n return null;\n }\n}",[],[506,548],[506],{"_107":558,"_100":559,"_154":560,"_156":-5,"_157":141,"_158":561,"_160":121,"_109":562,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":563,"_103":616},"dcb8628a-2c23-11f0-9bd6-569c3dd06744","tests","bf544df7-809b-4afb-bb85-0924af7951dc",357,["D",1746719298690],[564],{"_107":565,"_100":566,"_154":567,"_156":560,"_157":141,"_158":561,"_160":121,"_109":568,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":569,"_103":615},"dcb8651e-2c23-11f0-9bd6-569c3dd06744","unit","83da2a39-07fd-47d1-a92c-dce574535050",["D",1746719298690],[570,585,600],{"_107":571,"_100":377,"_154":572,"_156":567,"_157":141,"_158":573,"_160":121,"_109":574,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":575,"_103":584},"e31e2fa6-2c23-11f0-91dd-569c3dd06744","4606e4a8-38ba-4000-a1ae-7a47f168cc80",358,["D",1746719309427],[576],{"_107":577,"_100":578,"_154":579,"_156":572,"_157":141,"_158":573,"_160":121,"_109":580,"_104":31,"_162":175,"_164":581,"_165":27,"_166":-5,"_167":582,"_103":583},"e31e135e-2c23-11f0-91dd-569c3dd06744","form-validator.test.ts","e31e1408-2c23-11f0-91dd-569c3dd06744",["D",1746719309427],"import { assertEquals } from \"https://deno.land/std@0.177.0/testing/asserts.ts\";\nimport { validateField } from \"../../../public/js/modules/form-validator.js\";\n\n/**\n * Unit tests for form validation functions\n * \n * Note: These tests run in Deno, not in a browser environment.\n * We need to mock the DOM elements for testing.\n */\n\n// Mock DOM elements for testing\nclass MockElement {\n type: string;\n value: string;\n required: boolean;\n \n constructor(type: string, value: string, required = false) {\n this.type = type;\n this.value = value;\n this.required = required;\n }\n}\n\nDeno.test(\"validateField should pass for valid email\", () => {\n const field = new MockElement(\"email\", \"test@example.com\");\n const result = validateField(field as any);\n assertEquals(result.isValid, true);\n});\n\nDeno.test(\"validateField should fail for invalid email\", () => {\n const field = new MockElement(\"email\", \"invalid-email\");\n const result = validateField(field as any);\n assertEquals(result.isValid, false);\n assertEquals(result.message, \"Please enter a valid email address\");\n});\n\nDeno.test(\"validateField should pass for valid URL\", () => {\n const field = new MockElement(\"url\", \"https://example.com\");\n const result = validateField(field as any);\n assertEquals(result.isValid, true);\n});\n\nDeno.test(\"validateField should fail for invalid URL\", () => {\n const field = new MockElement(\"url\", \"invalid-url\");\n const result = validateField(field as any);\n assertEquals(result.isValid, false);\n assertEquals(result.message, \"Please enter a valid URL\");\n});\n\nDeno.test(\"validateField should pass for non-required empty field\", () => {\n const field = new MockElement(\"text\", \"\", false);\n const result = validateField(field as any);\n assertEquals(result.isValid, true);\n});\n\nDeno.test(\"validateField should fail for required empty field\", () => {\n const field = new MockElement(\"text\", \"\", true);\n const result = validateField(field as any);\n assertEquals(result.isValid, false);\n assertEquals(result.message, \"This field is required\");\n});",[],[559,566,377,578],[559,566,377],{"_107":586,"_100":506,"_154":587,"_156":567,"_157":141,"_158":588,"_160":121,"_109":589,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":590,"_103":599},"eb7df78a-2c23-11f0-a055-569c3dd06744","cf9e45bb-0beb-4bf1-b8fd-58c7f52687c5",359,["D",1746719323476],[591],{"_107":592,"_100":593,"_154":594,"_156":587,"_157":141,"_158":588,"_160":121,"_109":595,"_104":31,"_162":175,"_164":596,"_165":27,"_166":-5,"_167":597,"_103":598},"eb7dda8e-2c23-11f0-a055-569c3dd06744","templateService.test.ts","eb7ddb6a-2c23-11f0-a055-569c3dd06744",["D",1746719323476],"import { assertEquals } from \"https://deno.land/std@0.177.0/testing/asserts.ts\";\nimport { renderTemplate } from \"../../../services/templateService.ts\";\n\n/**\n * Unit tests for template service functions\n * \n * Note: These tests require mocking the file system and blob storage.\n */\n\n// Mock readFile function\nconst originalReadFile = globalThis.readFile;\nglobalThis.readFile = async (path: string) => {\n // Return mock templates based on the path\n if (path === \"/test-template.html\") {\n return \"Hello, {{name}}!\";\n }\n \n if (path === \"/test-conditional.html\") {\n return \"{{#if condition}}Yes{{#else}}No{{/if}}\";\n }\n \n if (path === \"/test-component.html\") {\n return \"Component: {{content}}\";\n }\n \n if (path === \"/views/components/test.html\") {\n return \"Test Component: {{param}}\";\n }\n \n throw new Error(`Mock file not found: ${path}`);\n};\n\n// Mock blob.getJSON function\nconst originalBlob = globalThis.blob;\nglobalThis.blob = {\n getJSON: async () => {\n return {\n stylesheets: [\"https://example.com/style.css\"],\n fetchedAt: new Date().toISOString(),\n source: \"test\"\n };\n }\n};\n\n// Tests\nDeno.test(\"renderTemplate should replace variables\", async () => {\n const html = await renderTemplate(\"/test-template.html\", { name: \"World\" }, \"https://example.com\");\n assertEquals(html, \"Hello, World!\");\n});\n\nDeno.test(\"renderTemplate should process conditionals with true condition\", async () => {\n const html = await renderTemplate(\"/test-conditional.html\", { condition: true }, \"https://example.com\");\n assertEquals(html, \"Yes\");\n});\n\nDeno.test(\"renderTemplate should process conditionals with false condition\", async () => {\n const html = await renderTemplate(\"/test-conditional.html\", { condition: false }, \"https://example.com\");\n assertEquals(html, \"No\");\n});\n\nDeno.test(\"renderTemplate should include components\", async () => {\n // Mock the processComponents function to simulate component inclusion\n const html = await renderTemplate(\"/test-component.html\", { content: \"{{> components/test param='Value'}}\" }, \"https://example.com\");\n assertEquals(html, \"Component: Test Component: Value\");\n});\n\n// Cleanup\nDeno.test({\n name: \"Cleanup mocks\",\n fn: () => {\n globalThis.readFile = originalReadFile;\n globalThis.blob = originalBlob;\n },\n sanitizeResources: false,\n sanitizeOps: false\n});",[],[559,566,506,593],[559,566,506],{"_107":601,"_100":602,"_154":603,"_156":567,"_157":141,"_158":561,"_160":121,"_109":604,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":605,"_103":614},"dcb866c2-2c23-11f0-9bd6-569c3dd06744","utils","4f905287-f22e-450a-9094-116ffd98a9a6",["D",1746719298690],[606],{"_107":607,"_100":608,"_154":609,"_156":603,"_157":141,"_158":561,"_160":121,"_109":610,"_104":31,"_162":175,"_164":611,"_165":27,"_166":-5,"_167":612,"_103":613},"dcb840fc-2c23-11f0-9bd6-569c3dd06744","helpers.test.ts","dcb841ce-2c23-11f0-9bd6-569c3dd06744",["D",1746719298690],"import { assertEquals, assertMatch } from \"https://deno.land/std@0.177.0/testing/asserts.ts\";\nimport { generateUniqueId } from \"../../../utils/helpers.ts\";\n\n/**\n * Unit tests for utility functions in utils/helpers.ts\n */\n\n// Test the generateUniqueId function\nDeno.test(\"generateUniqueId should return a string\", () => {\n const id = generateUniqueId();\n assertEquals(typeof id, \"string\");\n});\n\nDeno.test(\"generateUniqueId should return a UUID-like string\", () => {\n const id = generateUniqueId();\n // UUID format: 8-4-4-4-12 hexadecimal digits\n const uuidPattern = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;\n assertMatch(id, uuidPattern);\n});\n\nDeno.test(\"generateUniqueId should return different values on each call\", () => {\n const id1 = generateUniqueId();\n const id2 = generateUniqueId();\n const id3 = generateUniqueId();\n \n // All IDs should be different\n assertEquals(id1 !== id2 && id1 !== id3 && id2 !== id3, true);\n});",[],[559,566,602,608],[559,566,602],[559,566],[559],{"_107":618,"_100":602,"_154":619,"_156":-5,"_157":141,"_158":159,"_160":121,"_109":620,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":621,"_103":649},"76e9e93c-2adf-11f0-ad9d-569c3dd06744","61f60706-523c-4a44-8813-8acd53f13546",["D",1746579970933],[622,631,640],{"_107":623,"_100":624,"_154":625,"_156":619,"_157":141,"_158":626,"_160":121,"_109":627,"_104":31,"_162":175,"_164":628,"_165":27,"_166":-5,"_167":629,"_103":630},"075feb24-2c2f-11f0-a74f-569c3dd06744","cacheUtils.ts","075febd8-2c2f-11f0-a74f-569c3dd06744",387,["D",1746724094724],"/**\n * Simple in-memory cache utility\n * Provides caching functionality with TTL (Time To Live)\n */\n\n// Cache entry type definition\ninterface CacheEntry {\n value: T;\n expires: number;\n}\n\n// In-memory cache store\nconst cache = new Map>();\n\n// Default cache TTL (5 minutes)\nconst DEFAULT_CACHE_TTL = 5 * 60 * 1000;\n\n/**\n * Get a value from cache or compute it if not present\n * @param key Cache key\n * @param fetchFn Function to fetch the value if not in cache\n * @param ttl Time to live in milliseconds\n * @returns The cached or computed value\n */\nexport async function getCached(\n key: string, \n fetchFn: () => Promise, \n ttl: number = DEFAULT_CACHE_TTL\n): Promise {\n const now = Date.now();\n \n // Check if we have a valid cache entry\n if (cache.has(key)) {\n const entry = cache.get(key) as CacheEntry;\n if (now < entry.expires) {\n console.log(`Cache hit for key: ${key}`);\n return entry.value;\n } else {\n console.log(`Cache expired for key: ${key}`);\n cache.delete(key);\n }\n }\n \n // Cache miss, fetch the value\n console.log(`Cache miss for key: ${key}, fetching data...`);\n const value = await fetchFn();\n \n // Store in cache\n cache.set(key, {\n value,\n expires: now + ttl\n });\n \n return value;\n}\n\n/**\n * Manually set a cache entry\n * @param key Cache key\n * @param value Value to cache\n * @param ttl Time to live in milliseconds\n */\nexport function setCache(\n key: string, \n value: T, \n ttl: number = DEFAULT_CACHE_TTL\n): void {\n cache.set(key, {\n value,\n expires: Date.now() + ttl\n });\n}\n\n/**\n * Invalidate a cache entry\n * @param key Cache key to invalidate\n */\nexport function invalidateCache(key: string): void {\n cache.delete(key);\n}\n\n/**\n * Invalidate all cache entries that match a prefix\n * @param prefix Key prefix to match\n */\nexport function invalidateCacheByPrefix(prefix: string): void {\n for (const key of cache.keys()) {\n if (key.startsWith(prefix)) {\n cache.delete(key);\n }\n }\n}\n\n/**\n * Clear the entire cache\n */\nexport function clearCache(): void {\n cache.clear();\n}\n\n/**\n * Get cache statistics\n * @returns Object with cache statistics\n */\nexport function getCacheStats(): { size: number, keys: string[] } {\n return {\n size: cache.size,\n keys: Array.from(cache.keys())\n };\n}",[],[602,624],{"_107":632,"_100":633,"_154":634,"_156":619,"_157":141,"_158":635,"_160":121,"_109":636,"_104":290,"_162":175,"_164":637,"_165":27,"_166":-5,"_167":638,"_103":639},"c7ee0e52-2b49-11f0-ac5c-569c3dd06744","helpers.ts","76e9be4e-2adf-11f0-ad9d-569c3dd06744",76,["D",1746625633522],"/**\n * Generate a cryptographically secure random string\n * @param length The length of the random string to generate\n */\nfunction generateSecureRandomString(length: number): string {\n const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n let result = '';\n \n // Create an array of random values\n const randomValues = new Uint8Array(length);\n \n // Fill with cryptographically secure random values if available\n if (typeof crypto !== 'undefined' && crypto.getRandomValues) {\n crypto.getRandomValues(randomValues);\n } else {\n // Fallback to Math.random() if crypto is not available\n for (let i = 0; i < length; i++) {\n randomValues[i] = Math.floor(Math.random() * 256);\n }\n }\n \n // Convert random values to characters\n for (let i = 0; i < length; i++) {\n result += characters.charAt(randomValues[i] % characters.length);\n }\n \n return result;\n}\n\n/**\n * Generate a unique ID for submissions\n * Creates a longer, more secure token to prevent brute force attacks\n */\nexport function generateUniqueId(): string {\n // Generate a secure random string (32 characters)\n const randomPart1 = generateSecureRandomString(16);\n const randomPart2 = generateSecureRandomString(16);\n \n // Add a timestamp component for uniqueness (in base36)\n const timestampPart = Date.now().toString(36);\n \n // Add a counter component to ensure uniqueness even if called in the same millisecond\n const counterPart = Math.floor(Math.random() * 10000).toString(36).padStart(4, '0');\n \n // Combine all parts with separators\n return `${timestampPart}-${randomPart1}-${counterPart}-${randomPart2}`;\n}\n\n/**\n * Format file size for display\n */\nexport function formatFileSize(bytes: number): string {\n if (bytes < 1024) return bytes + ' bytes';\n else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';\n else return (bytes / 1048576).toFixed(1) + ' MB';\n}",[],[602,633],{"_107":641,"_100":642,"_154":643,"_156":619,"_157":141,"_158":644,"_160":121,"_109":645,"_104":290,"_162":175,"_164":646,"_165":27,"_166":-5,"_167":647,"_103":648},"4230b364-2b71-11f0-a711-569c3dd06744","responseUtils.ts","7d9e4a8c-2b4f-11f0-93cc-569c3dd06744",237,["D",1746642589014],"import { Context } from \"https://esm.sh/hono@3.12.6\";\n\n/**\n * Standard API response format\n */\nexport interface ApiResponse {\n success: boolean;\n message: string;\n data?: T;\n}\n\n/**\n * Create a success response\n */\nexport function successResponse(\n c: Context, \n message: string, \n data?: T, \n status = 200\n): Response {\n const response: ApiResponse = {\n success: true,\n message\n };\n \n if (data !== undefined) {\n response.data = data;\n }\n \n // Debug log\n console.log(`Sending success response: ${JSON.stringify(response)}`);\n \n return c.json(response, status);\n}\n\n/**\n * Create an error response\n */\nexport function errorResponse(\n c: Context, \n message: string, \n status = 400,\n error?: Error\n): Response {\n // Log the error if provided\n if (error) {\n console.error(`Error (${status}): ${message}`, error);\n }\n \n return c.json({\n success: false,\n message\n }, status);\n}\n\n/**\n * Create a not found response\n */\nexport function notFoundResponse(\n c: Context, \n message = \"Resource not found\"\n): Response {\n return errorResponse(c, message, 404);\n}\n\n/**\n * Create a server error response\n */\nexport function serverErrorResponse(\n c: Context, \n error: Error,\n message = \"An internal server error occurred\"\n): Response {\n return errorResponse(c, message, 500, error);\n}",[],[602,642],[602],{"_107":651,"_100":652,"_154":653,"_156":-5,"_157":141,"_158":159,"_160":121,"_109":654,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":655,"_103":1031},"76e9eae0-2adf-11f0-ad9d-569c3dd06744","views","3e3c76da-6b4b-412e-8890-2e14946c4ade",["D",1746579970933],[656,959,1011,1021],{"_107":657,"_100":317,"_154":658,"_156":653,"_157":141,"_158":659,"_160":121,"_109":660,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":661,"_103":958},"b15f6eec-2bfd-11f0-b030-569c3dd06744","bb3ac93a-b6ac-4456-b7c5-5d30aed9f127",300,["D",1746702905093],[662,687,749,773,879,940,949],{"_107":663,"_100":664,"_154":665,"_156":658,"_157":141,"_158":666,"_160":121,"_109":667,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":668,"_103":686},"2a6d1fe8-2c1f-11f0-86a8-569c3dd06744","ad-creation","62a86fd2-5465-4324-b21e-70b54e52321b",318,["D",1746717281578],[669,678],{"_107":670,"_100":671,"_154":672,"_156":665,"_157":141,"_158":673,"_160":121,"_109":674,"_104":290,"_162":273,"_164":675,"_165":27,"_166":-5,"_167":676,"_103":677},"7a759548-2c32-11f0-8b64-569c3dd06744","ad-preview.html","2a6cf7fc-2c1f-11f0-86a8-569c3dd06744",407,["D",1746725576283],"\n

\n Create and manage your ads. Select images from your gallery to\n use in your ads.\n

\n\n \n

Ad creation tools coming soon!

\n You'll be able to create ads and select images from your\n gallery.\n

\n\n

\n \n \n

\n \n \n \n

\n Placeholder Heading\n

\n Placeholder text for the billboard content goes\n here.\n

\n Call to Action →\n

\n",[],[652,317,664,671],{"_107":679,"_100":680,"_154":681,"_156":665,"_157":141,"_158":140,"_160":121,"_109":682,"_104":31,"_162":273,"_164":683,"_165":27,"_166":-5,"_167":684,"_103":685},"7efc6942-2c60-11f0-ab96-569c3dd06744","simple-ad-preview.html","7efc6a14-2c60-11f0-ab96-569c3dd06744",["D",1746745340735],"\n

\n Create and manage your ads. Select images from your gallery to\n use in your ads.\n

\n\n \n

Ad Builder

\n \n \n

\n \n

\n Company Name\n \n

\n \n \n

\n Heading\n \n

\n \n \n

\n Content\n \n

\n \n \n

\n Call to Action\n \n

\n \n \n

\n Ad Image\n \n \n

\n $\"Ad$ \n

\n \n \n \n

\n \n \n

Live Preview

\n \n \n

\n \n \n \n

\n Placeholder Heading\n

\n Placeholder text for the billboard content goes\n here.\n

\n Call to Action →\n

\n \n \n

Select an Image

\n \n

Loading your images...

\n\n\n\n",[],[652,317,664,680],[652,317,664],{"_107":688,"_100":689,"_154":690,"_156":658,"_157":141,"_158":691,"_160":121,"_109":692,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":693,"_103":748},"19daa4de-2c1f-11f0-929b-569c3dd06744","forms","0090b8ed-4fde-4047-820b-7702aacc03c5",315,["D",1746717253772],[694,703,712,721,730,739],{"_107":695,"_100":696,"_154":697,"_156":690,"_157":141,"_158":698,"_160":121,"_109":699,"_104":290,"_162":273,"_164":700,"_165":27,"_166":-5,"_167":701,"_103":702},"8f9ce8d0-2c1f-11f0-ab49-569c3dd06744","company-info-form.html","19da8c74-2c1f-11f0-929b-569c3dd06744",325,["D",1746717451334],"\n

\n {{> components/ui/form-field \n id=\"website\" \n label=\"Company Website\" \n type=\"url\" \n placeholder=\"https://example.com\"\n }}\n\n {{> components/ui/form-field \n id=\"industry\" \n label=\"Industry\" \n placeholder=\"e.g. Technology, Healthcare, Finance\"\n }}\n\n {{> components/ui/form-field \n id=\"employees\" \n label=\"Number of Employees\" \n type=\"select\" \n placeholder=\"Select an option\"\n options='[\n {\"value\": \"1-10\", \"label\": \"1-10\"},\n {\"value\": \"11-50\", \"label\": \"11-50\"},\n {\"value\": \"51-200\", \"label\": \"51-200\"},\n {\"value\": \"201-500\", \"label\": \"201-500\"},\n {\"value\": \"501-1000\", \"label\": \"501-1000\"},\n {\"value\": \"1000+\", \"label\": \"1000+\"}\n ]'\n }}\n\n {{> components/ui/form-field \n id=\"notes\" \n label=\"Additional Notes\" \n type=\"textarea\" \n placeholder=\"Any additional information you'd like to share\"\n cols=\"2\"\n rows=\"3\"\n }}\n

\n\n\n

\n {{> components/ui/button \n id=\"submitButton\" \n type=\"submit\" \n variant=\"primary\" \n text=\"Save Information\"\n }}\n

",[],[652,317,689,696],{"_107":704,"_100":705,"_154":706,"_156":690,"_157":141,"_158":707,"_160":121,"_109":708,"_104":290,"_162":273,"_164":709,"_165":27,"_166":-5,"_167":710,"_103":711},"94636352-2c25-11f0-ba1a-569c3dd06744","magic-link-form.html","fd532554-2c21-11f0-9a05-569c3dd06744",371,["D",1746720036331],"\n\n

Already have an account?

\n \n \n \n {{> components/ui/message-box \n id=\"magicLinkSuccessMessage\" \n type=\"success\" \n message=\"If an account exists with this email, you'll receive a link shortly.\"\n }}\n \n {{> components/ui/message-box \n id=\"magicLinkErrorMessage\" \n type=\"error\"\n message=\"\"\n }}\n

",[],[652,317,689,705],{"_107":713,"_100":714,"_154":715,"_156":690,"_157":141,"_158":716,"_160":121,"_109":717,"_104":31,"_162":273,"_164":718,"_165":27,"_166":-5,"_167":719,"_103":720},"38ca30d6-2c28-11f0-a282-569c3dd06744","simple-company-info-form.html","38ca318a-2c28-11f0-a282-569c3dd06744",378,["D",1746721171149],"\n

\n \n Company Website\n \n \n

\n\n

\n \n Industry\n \n \n

\n\n

\n \n Number of Employees\n \n \n

\n\n

\n \n Additional Notes\n \n \n

\n\n\n

\n \n

",[],[652,317,689,714],{"_107":722,"_100":723,"_154":724,"_156":690,"_157":141,"_158":725,"_160":121,"_109":726,"_104":31,"_162":273,"_164":727,"_165":27,"_166":-5,"_167":728,"_103":729},"218b32ee-2c28-11f0-9e70-569c3dd06744","simple-magic-link-form.html","218b33d4-2c28-11f0-9e70-569c3dd06744",373,["D",1746721132151],"\n

Already have an account?

\n \n \n \n

\n If an account exists with this email, you'll receive a link shortly.\n

\n \n

",[],[652,317,689,723],{"_107":731,"_100":732,"_154":733,"_156":690,"_157":141,"_158":734,"_160":121,"_109":735,"_104":31,"_162":273,"_164":736,"_165":27,"_166":-5,"_167":737,"_103":738},"1c476f96-2c28-11f0-80cd-569c3dd06744","simple-submission-form.html","1c47709a-2c28-11f0-80cd-569c3dd06744",372,["D",1746721123317],"\n",[],[652,317,689,732],{"_107":740,"_100":741,"_154":742,"_156":690,"_157":141,"_158":743,"_160":121,"_109":744,"_104":290,"_162":273,"_164":745,"_165":27,"_166":-5,"_167":746,"_103":747},"8cd2286c-2c25-11f0-9b65-569c3dd06744","submission-form.html","f91e4d10-2c21-11f0-bf46-569c3dd06744",370,["D",1746720023595],"\n\n",[],[652,317,689,741],[652,317,689],{"_107":750,"_100":751,"_154":752,"_156":658,"_157":141,"_158":659,"_160":121,"_109":753,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":754,"_103":772},"b15f70fe-2bfd-11f0-b030-569c3dd06744","layout","bc5635fc-e6f7-4f0d-b9ed-acfbd77db0c1",["D",1746702905093],[755,764],{"_107":756,"_100":757,"_154":758,"_156":752,"_157":141,"_158":759,"_160":121,"_109":760,"_104":31,"_162":273,"_164":761,"_165":27,"_166":-5,"_167":762,"_103":763},"b3cf553e-2bfd-11f0-91c1-569c3dd06744","footer.html","b3cf55e8-2bfd-11f0-91c1-569c3dd06744",301,["D",1746702909185],"",[],[652,317,751,757],{"_107":765,"_100":766,"_154":767,"_156":752,"_157":141,"_158":659,"_160":121,"_109":768,"_104":31,"_162":273,"_164":769,"_165":27,"_166":-5,"_167":770,"_103":771},"b15f5042-2bfd-11f0-b030-569c3dd06744","header.html","b15f510a-2bfd-11f0-b030-569c3dd06744",["D",1746702905093],"

\n{{#if subtitle}}\n

\n{{/if}}",[],[652,317,751,766],[652,317,751],{"_107":774,"_100":775,"_154":776,"_156":658,"_157":141,"_158":777,"_160":121,"_109":778,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":779,"_103":878},"b8f76b64-2bfd-11f0-a444-569c3dd06744","ui","4b2b9cb5-3b20-4bff-a39e-426d24555293",303,["D",1746702917826],[780,789,798,807,816,825,833,842,851,860,869],{"_107":781,"_100":782,"_154":783,"_156":776,"_157":141,"_158":784,"_160":121,"_109":785,"_104":31,"_162":273,"_164":786,"_165":27,"_166":-5,"_167":787,"_103":788},"bf7abfae-2bfd-11f0-91c1-569c3dd06744","account-info.html","bf7ac044-2bfd-11f0-91c1-569c3dd06744",305,["D",1746702928764],"

\n Company: {{company}}
\n Email: {{email}}
\n Your Unique Link:\n https://{{host}}/?action=continue&id={{id}}\n

\n Save this link to access your ad portal later.\n

",[],[652,317,775,782],{"_107":790,"_100":791,"_154":792,"_156":776,"_157":141,"_158":793,"_160":121,"_109":794,"_104":290,"_162":273,"_164":795,"_165":27,"_166":-5,"_167":796,"_103":797},"d2e6705e-2c22-11f0-8b3c-569c3dd06744","button.html","82944f2a-2c1f-11f0-986d-569c3dd06744",346,["D",1746718852723],"\n\n\n {{#if icon && iconPosition == 'left'}}\n {{icon}}\n {{/if}}\n \n {{text}}\n \n {{#if icon && iconPosition == 'right'}}\n {{icon}}\n {{/if}}\n",[],[652,317,775,791],{"_107":799,"_100":800,"_154":801,"_156":776,"_157":141,"_158":802,"_160":121,"_109":803,"_104":364,"_162":273,"_164":804,"_165":27,"_166":-5,"_167":805,"_103":806},"6da68d48-2c25-11f0-80a9-569c3dd06744","form-field.html","7db3bc8e-2c1f-11f0-ab6c-569c3dd06744",366,["D",1746719971343],"\n\n

\n \n {{label}}{{#if required}}*{{/if}}\n \n \n {{#if type == \"textarea\"}}\n {{value}}\n {{else if type == \"select\"}}\n \n {{else}}\n \n {{/if}}\n \n \n

\n \n \n {{#if helpText}}\n

\n {{/if}}\n

",[],[652,317,775,800],{"_107":808,"_100":809,"_154":810,"_156":776,"_157":141,"_158":811,"_160":121,"_109":812,"_104":31,"_162":273,"_164":813,"_165":27,"_166":-5,"_167":814,"_103":815},"fa825dde-2c23-11f0-a80a-569c3dd06744","lazy-image.html","fa825e9c-2c23-11f0-a80a-569c3dd06744",361,["D",1746719348673],"\n\n $\"{{alt}}\"\n$ ",[],[652,317,775,809],{"_107":817,"_100":818,"_154":819,"_156":776,"_157":141,"_158":820,"_160":121,"_109":821,"_104":364,"_162":273,"_164":822,"_165":27,"_166":-5,"_167":823,"_103":824},"74fc43e4-2c25-11f0-aa6b-569c3dd06744","message-box.html","bc23ae1a-2bfd-11f0-a63e-569c3dd06744",367,["D",1746719983644],"\n\n{{#if type == \"success\"}}\n

\n {{message}}\n

\n{{else}}\n {{#if type == \"error\"}}\n

\n {{message}}\n

\n {{else}}\n {{#if type == \"warning\"}}\n

\n {{message}}\n

\n {{else}}\n

\n {{message}}\n

\n {{/if}}\n {{/if}}\n{{/if}}",[],[652,317,775,818],{"_107":826,"_100":827,"_154":828,"_156":776,"_157":141,"_158":777,"_160":121,"_109":829,"_104":31,"_162":273,"_164":830,"_165":27,"_166":-5,"_167":831,"_103":832},"b8f74814-2bfd-11f0-a444-569c3dd06744","section-card.html","b8f748dc-2bfd-11f0-a444-569c3dd06744",["D",1746702917826],"

\n {{icon}}\n

\n \n

\n {{content}}\n

\n \n {{#if footer}}\n

\n {{footer}}\n

\n {{/if}}\n

",[],[652,317,775,827],{"_107":834,"_100":835,"_154":836,"_156":776,"_157":141,"_158":837,"_160":121,"_109":838,"_104":31,"_162":273,"_164":839,"_165":27,"_166":-5,"_167":840,"_103":841},"86cb0fde-2c1f-11f0-a1a8-569c3dd06744","section.html","86cb1092-2c1f-11f0-a1a8-569c3dd06744",324,["D",1746717436542],"\n\n

\n {{icon}}\n

\n \n

\n {{content}}\n

\n \n {{#if footer}}\n

\n {{footer}}\n

\n {{/if}}\n

",[],[652,317,775,835],{"_107":843,"_100":844,"_154":845,"_156":776,"_157":141,"_158":846,"_160":121,"_109":847,"_104":31,"_162":273,"_164":848,"_165":27,"_166":-5,"_167":849,"_103":850},"3ca94d36-2c28-11f0-ae5e-569c3dd06744","simple-account-info.html","3ca94de0-2c28-11f0-ae5e-569c3dd06744",379,["D",1746721177647],"\n

\n Company: {{COMPANY_NAME}}
\n Email: {{EMAIL}}
\n Your Unique Link:\n https://{{HOST}}/?action=continue&id={{ID}}\n

\n Save this link to access your ad portal later.\n

",[],[652,317,775,844],{"_107":852,"_100":853,"_154":854,"_156":776,"_157":141,"_158":855,"_160":121,"_109":856,"_104":31,"_162":273,"_164":857,"_165":27,"_166":-5,"_167":858,"_103":859},"28a399d6-2c28-11f0-80cd-569c3dd06744","simple-error-message.html","28a39a76-2c28-11f0-80cd-569c3dd06744",375,["D",1746721144055],"\n

",[],[652,317,775,853],{"_107":861,"_100":862,"_154":863,"_156":776,"_157":141,"_158":864,"_160":121,"_109":865,"_104":31,"_162":273,"_164":866,"_165":27,"_166":-5,"_167":867,"_103":868},"25e70d9a-2c28-11f0-81f3-569c3dd06744","simple-success-message.html","25e70e4e-2c28-11f0-81f3-569c3dd06744",374,["D",1746721139459],"\n

\n \n

Submission Successful!

Thank you for your submission! We've sent a confirmation email with next steps.

Please check your inbox for important information about your submission.

",[],[652,317,775,862],{"_107":870,"_100":871,"_154":872,"_156":776,"_157":141,"_158":873,"_160":121,"_109":874,"_104":290,"_162":273,"_164":875,"_165":27,"_166":-5,"_167":876,"_103":877},"df05d9a6-2c22-11f0-b5a0-569c3dd06744","success-message.html","01a00686-2c22-11f0-b5ee-569c3dd06744",348,["D",1746718873061],"\n\n

\n \n

\n \n {{#if details}}\n

\n {{/if}}\n

",[],[652,317,775,871],[652,317,775],{"_107":880,"_100":881,"_154":882,"_156":658,"_157":141,"_158":883,"_160":121,"_109":884,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":885,"_103":939},"dae41bfa-2bfd-11f0-a571-569c3dd06744","uploadcare","4019a36b-7272-4e21-b14e-6130d7b40274",310,["D",1746702974750],[886,895,904,913,922,931],{"_107":887,"_100":888,"_154":889,"_156":882,"_157":141,"_158":890,"_160":121,"_109":891,"_104":31,"_162":273,"_164":892,"_165":27,"_166":-5,"_167":893,"_103":894},"aa94eebc-2c1f-11f0-ab49-569c3dd06744","image-count.html","aa94ef84-2c1f-11f0-ab49-569c3dd06744",329,["D",1746717496589],"\n\n

\n \n {{count}} image{{#if count != 1}}s{{/if}}\n \n

",[],[652,317,881,888],{"_107":896,"_100":897,"_154":898,"_156":882,"_157":141,"_158":899,"_160":121,"_109":900,"_104":290,"_162":273,"_164":901,"_165":27,"_166":-5,"_167":902,"_103":903},"b47e586e-2c1f-11f0-a1a8-569c3dd06744","image-gallery.html","21d3758a-2c1f-11f0-9e18-569c3dd06744",330,["D",1746717513216],"\n

\n Upload images to use in your ads. These images will be available\n to select when creating new ads.\n

\n\n \n {{> components/uploadcare/image-uploader}}\n\n \n

Your Images

\n\n \n

\n \n \n

\n\n \n {{> components/uploadcare/image-count count=\"0\"}}\n

\n\n\n

\n \n

",[],[652,317,881,897],{"_107":905,"_100":906,"_154":907,"_156":882,"_157":141,"_158":908,"_160":121,"_109":909,"_104":290,"_162":273,"_164":910,"_165":27,"_166":-5,"_167":911,"_103":912},"c402d550-2c31-11f0-a692-569c3dd06744","image-item.html","a7aec1e6-2c1f-11f0-8ffc-569c3dd06744",402,["D",1746725270190],"\n\n

\n \n

\n $\"Preview\"\n$ \n

\n \n \n

\n {{originalName}}\n

\n \n \n

\n {{size}}\n

\n \n \n

\n \n \n \n \n \n

",[],[652,317,881,906],{"_107":914,"_100":915,"_154":916,"_156":882,"_157":141,"_158":917,"_160":121,"_109":918,"_104":290,"_162":273,"_164":919,"_165":27,"_166":-5,"_167":920,"_103":921},"9693efc6-2c1f-11f0-b34f-569c3dd06744","image-uploader.html","1e05aad6-2c1f-11f0-ab49-569c3dd06744",326,["D",1746717463028],"\n

\n \n

\n\n \n

\n\n\n

\n {{> components/ui/button \n id=\"addMoreButton\" \n type=\"button\" \n variant=\"secondary\" \n text=\"+ Add Another Image\"\n }}\n

",[],[652,317,881,915],{"_107":923,"_100":924,"_154":925,"_156":882,"_157":141,"_158":926,"_160":121,"_109":927,"_104":31,"_162":273,"_164":928,"_165":27,"_166":-5,"_167":929,"_103":930},"447ac22e-2c28-11f0-8cd7-569c3dd06744","simple-image-gallery.html","447ac2f6-2c28-11f0-8cd7-569c3dd06744",380,["D",1746721190763],"\n

\n Upload images to use in your ads. These images will be available\n to select when creating new ads.\n

\n\n \n

\n \n

\n\n \n

\n \n + Add Another Image\n \n

\n\n \n

Your Images

\n\n \n

\n 0 images\n

",[],[652,317,881,924],{"_107":932,"_100":933,"_154":934,"_156":882,"_157":141,"_158":883,"_160":121,"_109":935,"_104":31,"_162":273,"_164":936,"_165":27,"_166":-5,"_167":937,"_103":938},"dae3f864-2bfd-11f0-a571-569c3dd06744","uploader-config.html","dae3f922-2bfd-11f0-a571-569c3dd06744",["D",1746702974750],"\n\n\n\n\n\n\n\n",[],[652,317,881,933],[652,317,881],{"_107":941,"_100":942,"_154":943,"_156":658,"_157":141,"_158":944,"_160":121,"_109":945,"_104":31,"_162":273,"_164":946,"_165":27,"_166":-5,"_167":947,"_103":948},"19c02ac6-2bfe-11f0-9c51-569c3dd06744","README.md","19c02b8e-2bfe-11f0-9c51-569c3dd06744",314,["D",1746703080214],"# Component System Documentation\n\nThis document explains how to use the component system for building templates in the DEV Partner Portal application.\n\n## Overview\n\nThe component system allows you to:\n\n1. Break down complex HTML templates into smaller, reusable components\n2. Pass parameters to components\n3. Use conditional logic within templates\n4. Maintain consistent styling and behavior across the application\n\n## Directory Structure\n\n```\n/views\n /components\n /layout # Page layout components (header, footer)\n /ui # UI elements (section cards, message boxes)\n /forms # Form-related components\n /uploadcare # Uploadcare-related components\n /templates # Page templates that use components\n```\n\n## Using Components\n\nTo include a component in a template, use the following syntax:\n\n```html\n{{> components/path/to/component param1=\"value1\" param2=\"value2\"}}\n```\n\nFor example:\n\n```html\n{{> components/layout/header title=\"My Page\" subtitle=\"Welcome\"}}\n```\n\n## Conditional Logic\n\nYou can use conditional logic in your templates with the following syntax:\n\n```html\n{{#if condition}}\n \n{{#else}}\n \n{{/if}}\n```\n\nYou can also check for equality:\n\n```html\n{{#if type == \"success\"}}\n \n{{#else}}\n \n{{/if}}\n```\n\n## CSS Organization\n\nComponent-specific styles are organized in the following structure:\n\n```\n/public/css\n /components # Component-specific styles\n section-cards.css\n uploadcare-custom.css\n forms.css\n continue-page.css # Page-specific styles that import component styles\n```\n\n## Creating New Components\n\nTo create a new component:\n\n1. Create an HTML file in the appropriate subdirectory under `/views/components/`\n2. Use `{{paramName}}` syntax for parameters that should be replaceable\n3. Use `{{#if condition}}` for conditional content\n4. Add component-specific styles to a CSS file in `/public/css/components/`\n\n## Example Component\n\n```html\n\n

\n {{#if title}}\n

\n {{/if}}\n

\n```\n\nUsage:\n\n```html\n{{> components/ui/alert type=\"warning\" title=\"Attention\" message=\"This is important\"}}\n```\n\n## Best Practices\n\n1. Keep components small and focused on a single responsibility\n2. Use consistent naming conventions for components and parameters\n3. Document component parameters at the top of the component file\n4. Organize related components in subdirectories\n5. Use conditional logic for variations rather than creating multiple similar components\n6. Extract repeated patterns into components\n7. Use CSS classes for styling rather than inline styles",[],[652,317,942],{"_107":950,"_100":951,"_154":952,"_156":658,"_157":141,"_158":953,"_160":121,"_109":954,"_104":31,"_162":273,"_164":955,"_165":27,"_166":-5,"_167":956,"_103":957},"b654d64e-2bfd-11f0-8985-569c3dd06744","meta-tags.html","b654d716-2bfd-11f0-8985-569c3dd06744",302,["D",1746702913416],"\n\n\n",[],[652,317,951],[652,317],{"_107":960,"_100":961,"_154":962,"_156":653,"_157":141,"_158":963,"_160":121,"_109":964,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":965,"_103":1010},"09e7a458-2bfe-11f0-9b2e-569c3dd06744","templates","b29674eb-7908-45e0-89ca-3942bb888a49",312,["D",1746703053624],[966,975,984,993,1002],{"_107":967,"_100":968,"_154":969,"_156":962,"_157":141,"_158":970,"_160":121,"_109":971,"_104":31,"_162":273,"_164":972,"_165":27,"_166":-5,"_167":973,"_103":974},"12353e8e-2c23-11f0-9866-569c3dd06744","component-library.html","12353f6a-2c23-11f0-9866-569c3dd06744",350,["D",1746718958936],"\n\n\n {{> components/meta-tags}}\n Component Library - DEV Partner Portal\n \n \n \n\n\n

DEV Partner Portal

Component Library

\n \n

\n This page showcases all the reusable components available in the DEV Partner Portal application.\n Use this as a reference when building new pages or features.\n

\n \n \n

Form Fields

\n \n

Form field components provide consistent styling and accessibility features for form inputs.

\n \n

Text Input

\n {{> components/ui/form-field \n id=\"demo-text\" \n label=\"Text Input\" \n type=\"text\" \n placeholder=\"Enter text here\"\n }}\n \n

\n{{> components/ui/form-field \n id=\"demo-text\" \n label=\"Text Input\" \n type=\"text\" \n placeholder=\"Enter text here\"\n}}\n

\n \n

Required Email Input

\n {{> components/ui/form-field \n id=\"demo-email\" \n label=\"Email Address\" \n type=\"email\" \n placeholder=\"Enter your email\"\n required=\"true\"\n autocomplete=\"email\"\n }}\n \n

\n{{> components/ui/form-field \n id=\"demo-email\" \n label=\"Email Address\" \n type=\"email\" \n placeholder=\"Enter your email\"\n required=\"true\"\n autocomplete=\"email\"\n}}\n

\n \n

Select Input

\n {{> components/ui/form-field \n id=\"demo-select\" \n label=\"Select Option\" \n type=\"select\" \n placeholder=\"Choose an option\"\n options='[\n {\"value\": \"option1\", \"label\": \"Option 1\"},\n {\"value\": \"option2\", \"label\": \"Option 2\"},\n {\"value\": \"option3\", \"label\": \"Option 3\"}\n ]'\n }}\n \n

\n{{> components/ui/form-field \n id=\"demo-select\" \n label=\"Select Option\" \n type=\"select\" \n placeholder=\"Choose an option\"\n options='[\n {\"value\": \"option1\", \"label\": \"Option 1\"},\n {\"value\": \"option2\", \"label\": \"Option 2\"},\n {\"value\": \"option3\", \"label\": \"Option 3\"}\n ]'\n}}\n

\n \n

Textarea

\n {{> components/ui/form-field \n id=\"demo-textarea\" \n label=\"Text Area\" \n type=\"textarea\" \n placeholder=\"Enter multiple lines of text\"\n rows=\"3\"\n }}\n \n

\n{{> components/ui/form-field \n id=\"demo-textarea\" \n label=\"Text Area\" \n type=\"textarea\" \n placeholder=\"Enter multiple lines of text\"\n rows=\"3\"\n}}\n

\n \n \n

Buttons

\n \n

Button components provide consistent styling and accessibility features for buttons.

\n \n

Primary Button

\n {{> components/ui/button \n id=\"demo-primary-button\" \n type=\"button\" \n variant=\"primary\" \n text=\"Primary Button\"\n }}\n

\n \n

\n{{> components/ui/button \n id=\"demo-primary-button\" \n type=\"button\" \n variant=\"primary\" \n text=\"Primary Button\"\n}}\n

\n \n

Secondary Button

\n {{> components/ui/button \n id=\"demo-secondary-button\" \n type=\"button\" \n variant=\"secondary\" \n text=\"Secondary Button\"\n }}\n

\n \n

\n{{> components/ui/button \n id=\"demo-secondary-button\" \n type=\"button\" \n variant=\"secondary\" \n text=\"Secondary Button\"\n}}\n

\n \n

Outline Button

\n {{> components/ui/button \n id=\"demo-outline-button\" \n type=\"button\" \n variant=\"outline\" \n text=\"Outline Button\"\n }}\n

\n \n

\n{{> components/ui/button \n id=\"demo-outline-button\" \n type=\"button\" \n variant=\"outline\" \n text=\"Outline Button\"\n}}\n

\n \n

Button Sizes

\n {{> components/ui/button \n type=\"button\" \n variant=\"primary\" \n size=\"sm\"\n text=\"Small\"\n }}\n \n {{> components/ui/button \n type=\"button\" \n variant=\"primary\" \n text=\"Medium (Default)\"\n }}\n \n {{> components/ui/button \n type=\"button\" \n variant=\"primary\" \n size=\"lg\"\n text=\"Large\"\n }}\n

\n \n

\n{{> components/ui/button \n type=\"button\" \n variant=\"primary\" \n size=\"sm\"\n text=\"Small\"\n}}\n\n{{> components/ui/button \n type=\"button\" \n variant=\"primary\" \n text=\"Medium (Default)\"\n}}\n\n{{> components/ui/button \n type=\"button\" \n variant=\"primary\" \n size=\"lg\"\n text=\"Large\"\n}}\n

\n \n \n

Message Boxes

\n \n

Message boxes provide consistent styling for success, error, and info messages.

\n \n

Success Message

\n {{> components/ui/message-box \n id=\"demo-success\" \n type=\"success\" \n message=\"This is a success message.\"\n }}\n

\n \n \n \n

\n{{> components/ui/message-box \n id=\"demo-success\" \n type=\"success\" \n message=\"This is a success message.\"\n}}\n

\n \n

Error Message

\n {{> components/ui/message-box \n id=\"demo-error\" \n type=\"error\" \n message=\"This is an error message.\"\n }}\n

\n \n \n \n

\n{{> components/ui/message-box \n id=\"demo-error\" \n type=\"error\" \n message=\"This is an error message.\"\n}}\n

\n \n

Info Message

\n {{> components/ui/message-box \n id=\"demo-info\" \n type=\"info\" \n message=\"This is an info message.\"\n }}\n

\n \n \n \n

\n{{> components/ui/message-box \n id=\"demo-info\" \n type=\"info\" \n message=\"This is an info message.\"\n}}\n

\n \n

Enhanced Success Message

\n {{> components/ui/success-message \n id=\"demo-enhanced-success\" \n title=\"Operation Successful\" \n message=\"Your changes have been saved successfully.\"\n details=\"You can continue working with the updated information.\"\n }}\n

\n \n \n \n

\n{{> components/ui/success-message \n id=\"demo-enhanced-success\" \n title=\"Operation Successful\" \n message=\"Your changes have been saved successfully.\"\n details=\"You can continue working with the updated information.\"\n}}\n

\n \n \n

Sections

\n \n

Section components provide consistent styling for content sections.

\n \n

Basic Section

\n {{> components/ui/section \n icon=\"📝\" \n title=\"Section Title\"\n content=\"

This is the content of the section.

\"\n }}\n \n

\n{{> components/ui/section \n icon=\"📝\" \n title=\"Section Title\"\n content=\"

This is the content of the section.

\"\n}}\n

\n \n

Section with Footer

\n {{> components/ui/section \n icon=\"🔍\" \n title=\"Section with Footer\"\n content=\"

This section has a footer with additional content or actions.

\"\n footer=\"

\"\n }}\n \n

\n{{> components/ui/section \n icon=\"🔍\" \n title=\"Section with Footer\"\n content=\"

This section has a footer with additional content or actions.

\"\n footer=\"

\"\n}}\n

\n \n {{> components/layout/footer year=\"2023\"}}\n\n",[],[652,961,968],{"_107":976,"_100":977,"_154":978,"_156":962,"_157":141,"_158":979,"_160":121,"_109":980,"_104":387,"_162":273,"_164":981,"_165":27,"_166":-5,"_167":982,"_103":983},"eca311a0-2c31-11f0-921e-569c3dd06744","continue-template.html","09e77a3c-2bfe-11f0-9b2e-569c3dd06744",405,["D",1746725338350],"\n\n\n {{> components/meta-tags}}\n Ad Portal - DEV Partner Portal\n \n \n {{> components/uploadcare/uploader-config}}\n \n \n\n\n

\n {{> components/layout/header title=\"DEV Partner Portal\" subtitle=\"Ad Portal\"}}\n \n \n {{> components/ui/section \n icon=\"👤\" \n title=\"Account Information\"\n content='{{> components/ui/account-info company=COMPANY_NAME email=EMAIL id=ID host=HOST}}'\n }}\n \n \n \n {{> components/ui/message-box id=\"successMessage\" type=\"success\" message=\"Your information has been saved successfully!\"}}\n \n {{> components/ui/message-box id=\"errorMessage\" type=\"error\"}}\n

\n \n {{> components/layout/footer year=\"2023\"}}\n \n \n\n",[],[652,961,977],{"_107":985,"_100":986,"_154":987,"_156":962,"_157":141,"_158":988,"_160":121,"_109":989,"_104":290,"_162":273,"_164":990,"_165":27,"_166":-5,"_167":991,"_103":992},"cc3f1a8a-2c31-11f0-af8a-569c3dd06744","landing-template.html","070258b8-2c22-11f0-8ee2-569c3dd06744",403,["D",1746725284005],"\n\n\n {{> components/meta-tags}}\n DEV Partner Portal\n \n \n \n \n\n\n

DEV Partner Portal

\n \n \n {{> components/forms/submission-form}}\n \n \n {{> components/forms/magic-link-form}}\n \n \n {{> components/ui/success-message \n id=\"successMessage\" \n title=\"Submission Successful!\" \n message=\"Thank you for your submission! We've sent a confirmation email with next steps.\"\n details=\"Please check your inbox for important information about your submission.\"\n }}\n \n \n {{> components/ui/message-box \n id=\"errorMessage\" \n type=\"error\"\n }}\n

\n \n {{> components/layout/footer year=\"2023\"}}\n \n \n\n",[],[652,961,986],{"_107":994,"_100":995,"_154":996,"_156":962,"_157":141,"_158":997,"_160":121,"_109":998,"_104":31,"_162":273,"_164":999,"_165":27,"_166":-5,"_167":1000,"_103":1001},"5ce3e642-2c28-11f0-b188-569c3dd06744","simple-continue-template.html","5ce3e6f6-2c28-11f0-b188-569c3dd06744",382,["D",1746721231719],"\n\n \n \n \n Ad Portal - DEV Partner Portal\n \n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n

DEV Partner Portal

Ad Portal

\n\n \n

\n 👤\n

Account Information

\n \n {{> components/ui/simple-account-info}}\n

\n\n \n\n \n Your information has been saved successfully!\n

\n\n \n \n \n

\n\n \n\n \n \n",[],[652,961,995],{"_107":1003,"_100":1004,"_154":1005,"_156":962,"_157":141,"_158":123,"_160":121,"_109":1006,"_104":364,"_162":273,"_164":1007,"_165":27,"_166":-5,"_167":1008,"_103":1009},"bdee47c2-2c3f-11f0-94c3-569c3dd06744","simple-landing-template.html","2e63779c-2c28-11f0-80b2-569c3dd06744",["D",1746731272923],"\n\n\n \n \n DEV Partner Portal\n \n \n \n \n\n\n

DEV Partner Portal

\n \n \n {{> components/forms/simple-submission-form}}\n \n \n {{> components/forms/simple-magic-link-form}}\n \n \n {{> components/ui/simple-success-message}}\n \n \n {{> components/ui/simple-error-message}}\n

\n \n \n \n \n\n",[],[652,961,1004],[652,961],{"_107":1012,"_100":1013,"_154":1014,"_156":653,"_157":141,"_158":1015,"_160":121,"_109":1016,"_104":1017,"_162":273,"_164":1018,"_165":27,"_166":-5,"_167":1019,"_103":1020},"be333534-2baf-11f0-b727-569c3dd06744","continue.html","cbd14f54-2b4c-11f0-ab93-569c3dd06744",287,["D",1746669425869],30,"\n\n \n \n \n Ad Portal - DEV Partner Portal\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n \n \n

DEV Partner Portal

Ad Portal

\n\n \n

\n 👤\n

Account Information

\n\n

\n Company: {{COMPANY_NAME}}
\n Email: {{EMAIL}}
\n Your Unique Link:\n https://{{HOST}}/?action=continue&id={{ID}}\n

\n Save this link to access your ad portal later.\n

\n\n

\n \n\n \n

\n 🏢\n

Image Gallery

\n\n

\n Upload images to use in your ads. These images will be available\n to select when creating new ads.\n

\n\n \n

\n \n

\n\n \n

\n \n + Add Another Image\n \n

\n\n \n

Your Images

\n\n \n

\n 0 images\n

\n\n \n

\n 📢\n

Ad Creation

\n\n

\n Create and manage your ads. Select images from your gallery to\n use in your ads.\n

\n\n \n

Ad creation tools coming soon!

\n You'll be able to create ads and select images from your\n gallery.\n

\n\n

\n \n \n

\n \n \n \n

\n Placeholder Heading\n

\n Placeholder text for the billboard content goes\n here.\n

\n Call to Action →\n

\n \n\n \n \n\n \n Your information has been saved successfully!\n \n\n \n \n \n

\n\n \n\n \n \n",[],[652,1013],{"_107":1022,"_100":1023,"_154":1024,"_156":653,"_157":141,"_158":1025,"_160":121,"_109":1026,"_104":1027,"_162":273,"_164":1028,"_165":27,"_166":-5,"_167":1029,"_103":1030},"c2fa7348-2baf-11f0-8454-569c3dd06744","landing.html","76e9d794-2adf-11f0-ad9d-569c3dd06744",288,["D",1746669433885],8,"\n\n\n \n \n DEV Partner Portal\n \n \n \n\n\n

DEV Partner Portal

\n \n \n \n \n \n

Already have an account?

\n \n \n

\n If an account exists with this email, you'll receive a link shortly.\n

\n \n

\n \n \n

\n \n

Submission Successful!

Thank you for your submission! We've sent a confirmation email with next steps.

Please check your inbox for important information about your submission.

\n \n \n

\n \n \n\n \n\n",[],[652,1023],[652],{"_107":1033,"_100":942,"_154":1034,"_156":-5,"_157":141,"_158":1035,"_160":121,"_109":1036,"_104":1037,"_162":273,"_164":1038,"_165":27,"_166":-5,"_167":1039,"_103":1040},"7479eba8-2c28-11f0-8542-569c3dd06744","c72e72ce-2aa2-11f0-ab66-569c3dd06744",385,["D",1746721271285],22,"# DEV Partner Portal\n\nA landing page application that collects company information and allows users to add additional details through email links.\n\n> **Note:** This project is being refactored to improve code organization and maintainability. See [REFACTORING-PHASE1.md](/REFACTORING-PHASE1.md), [REFACTORING-PHASE2.md](/REFACTORING-PHASE2.md), [REFACTORING-PHASE3.md](/REFACTORING-PHASE3.md), [REFACTORING-PHASE4.md](/REFACTORING-PHASE4.md), and [REFACTORING-PHASE5.md](/REFACTORING-PHASE5.md) for details on the current phases.\n>\n> **Important:** We've fixed template rendering issues by simplifying the component system. See [TEMPLATE-FIX.md](/TEMPLATE-FIX.md) for details.\n\n## Features\n\n- Simple landing page with DEV Partner Portal branding\n- Form to collect company name and email\n- SQLite database storage for submissions\n- Email functionality to send users a unique link\n- Continuation page for adding more information\n- Image upload and storage using Uploadcare\n\n## Uploadcare Implementation\n\nThis project uses Uploadcare for image uploads with a single file uploader configuration.\n\n### Implementation Details\n\n1. `UPLOADCARE_MULTIPLE` is set to `false` in the global configuration\n2. The UI includes a single uploader with an \"Add Another Image\" button\n3. JavaScript handles individual file uploads\n4. Helper script (`/public/js/uploadcare-helper.js`) provides utility functions\n\n## Project Structure\n\n```\n├── api/ # API route handlers\n│ ├── images.ts # Image-related API endpoints\n│ ├── submissions.ts # Submission-related API endpoints\n│ └── index.ts # API routes configuration\n├── controllers/ # Request handling logic\n│ ├── imageController.ts # Image upload/retrieval logic\n│ └── submissionController.ts # Submission handling logic\n├── models/ # Data models and types\n│ ├── image.ts # Image-related types\n│ └── submission.ts # Submission-related types\n├── services/ # Business logic\n│ ├── imageService.ts # Image metadata operations\n│ ├── uploadcareService.ts # Uploadcare integration\n│ ├── databaseService.ts # Database operations\n│ ├── emailService.ts # Email sending functionality\n│ └── templateService.ts # HTML template rendering\n├── utils/ # Utility functions\n│ ├── helpers.ts # Helper functions\n│ └── responseUtils.ts # Standardized API responses\n├── views/ # HTML templates\n│ ├── landing.html # Main landing page\n│ └── continue.html # Continuation page\n├── public/ # Static assets and client-side JS\n│ ├── css/ # Stylesheets\n│ │ └── styles.css # Common styles\n│ └── js/ # Client-side JavaScript\n│ ├── landing.js # Landing page script\n│ ├── continue.js # Continuation page script\n│ └── modules/ # Modular JavaScript components\n│ ├── uploadcare-manager.js # Uploadcare functionality\n│ ├── gallery-renderer.js # Image gallery UI\n│ └── form-handler.js # Form submission logic\n└── index.ts # Main entry point\n```\n\n## Database Schema\n\nThe application uses a SQLite database with the following schemas:\n\n### Submissions Table\n\n```sql\nCREATE TABLE IF NOT EXISTS laura_mepson_submissions_v1 (\n id TEXT PRIMARY KEY,\n company_name TEXT NOT NULL,\n email TEXT NOT NULL,\n created_at TEXT NOT NULL,\n additional_fields TEXT\n)\n```\n\n### Images Table\n\n```sql\nCREATE TABLE IF NOT EXISTS laura_mepson_images_v1 (\n id TEXT PRIMARY KEY,\n original_name TEXT NOT NULL,\n content_type TEXT NOT NULL,\n size INTEGER NOT NULL,\n uploaded_at TEXT NOT NULL,\n submission_id TEXT NOT NULL,\n cdn_url TEXT NOT NULL\n)\n```\n\n> Note: Table names are kept for backward compatibility with existing data, but the application is now branded as DEV Partner Portal.\n\n## User Flow\n\n1. User visits the landing page\n2. User submits company name and email\n3. Data is saved to SQLite database\n4. User receives an email with a unique link\n5. User can click the link to add more information\n6. Additional information is saved to the database\n7. User can upload and manage images related to their submission\n\n## URL Structure\n\n- Main landing page: `https://[username].web.val.run`\n- Continuation page: `https://[username].web.val.run?action=continue&id=[unique_id]`\n\n## Image Storage\n\nImages are stored using Uploadcare:\n- Uploadcare handles file uploads, storage, and CDN delivery\n- Uploadcare's built-in image preview and cropping tools are used\n- Image metadata is stored in our SQLite database\n- Users can upload, view, and delete images\n- Images are associated with a specific submission\n\n## Environment Variables\n\n- `UPLOADCARE_SECRET_KEY`: Secret key for Uploadcare API authentication\n\n## Development Notes\n\n- When modifying the database schema, create a new table with a new version number\n- Email templates are defined in `emailService.ts`\n- The unique ID generation is handled in `utils/helpers.ts`\n- Val Town HTTP vals use query parameters instead of path parameters for routing\n\n## Database Schema\n\nThe application uses a SQLite database with the following schema:\n\n```sql\nCREATE TABLE IF NOT EXISTS laura_mepson_submissions_v1 (\n id TEXT PRIMARY KEY,\n company_name TEXT NOT NULL,\n email TEXT NOT NULL,\n created_at TEXT NOT NULL,\n additional_fields TEXT\n)\n```\n\n> Note: Table name is kept for backward compatibility with existing data, but the application is now branded as DEV Partner Portal.\n\n## User Flow\n\n1. User visits the landing page\n2. User submits company name and email\n3. Data is saved to SQLite database\n4. User receives an email with a unique link\n5. User can click the link to add more information\n6. Additional information is saved to the database\n7. User can upload and manage images related to their submission\n\n## URL Structure\n\n- Main landing page: `https://[username].web.val.run`\n- Continuation page: `https://[username].web.val.run?action=continue&id=[unique_id]`\n\n## Image Storage\n\nImages are stored using Val Town's blob storage:\n- Images are stored with a unique ID\n- Metadata is stored alongside each image\n- Users can upload, view, and delete images\n- Images are associated with a specific submission\n\n## Development Notes\n\n- When modifying the database schema, create a new table with a new version number\n- Email templates are defined in `email.ts`\n- The unique ID generation is handled in `utils.ts`\n- Val Town HTTP vals use query parameters instead of path parameters for routing",[],[942],{"_107":1042,"_100":1043,"_154":1044,"_156":-5,"_157":141,"_158":1045,"_160":121,"_109":1046,"_104":31,"_162":273,"_164":1047,"_165":27,"_166":-5,"_167":1048,"_103":1049},"5038f652-2c1f-11f0-a089-569c3dd06744","REFACTORING-PHASE1.md","5038f71a-2c1f-11f0-a089-569c3dd06744",320,["D",1746717344994],"# DEV Partner Portal Refactoring - Phase 1\n\nThis document outlines the changes made in Phase 1 of the continue.html refactoring.\n\n## Phase 1: Component Structure Setup\n\n### Directory Structure\n\nWe've created a component-based architecture with the following structure:\n\n```\n/views\n /components\n /layout\n header.html\n footer.html\n /forms\n company-info-form.html\n /uploadcare\n uploader-config.html\n image-uploader.html\n image-gallery.html\n /ui\n section-card.html\n message-box.html\n account-info.html\n /ad-creation\n ad-preview.html\n README.md\n /templates\n continue-template.html\n```\n\n### CSS Organization\n\nWe've extracted inline styles into dedicated CSS files:\n\n```\n/public/css\n /components\n section-cards.css\n uploadcare-custom.css\n forms.css\n continue-page.css\n```\n\n### Template Service Enhancement\n\nWe've enhanced the template service (`templateService.ts`) to support:\n\n1. **Component Inclusion**: Using `{{> component/path param1=\"value1\"}}` syntax\n2. **Conditional Logic**: Using `{{#if condition}}...{{#else}}...{{/if}}` syntax\n3. **Variable Replacement**: Using `{{variableName}}` syntax\n4. **Parameter Passing**: Passing data to components\n\n### Component Examples\n\n#### Header Component\n\n```html\n

\n{{#if subtitle}}\n

\n{{/if}}\n```\n\n#### Message Box Component\n\n```html\n{{#if type == \"success\"}}\n

\n {{message}}\n

\n{{else if type == \"error\"}}\n

\n {{message}}\n

\n{{else}}\n

\n {{message}}\n

\n{{/if}}\n```\n\n### Main Template\n\nWe've created a new template (`continue-template.html`) that uses components:\n\n```html\n\n\n\n {{> components/meta-tags}}\n Ad Portal - DEV Partner Portal\n \n \n {{> components/uploadcare/uploader-config}}\n\n\n \n {{> components/layout/header title=\"DEV Partner Portal\" subtitle=\"Ad Portal\"}}\n \n \n

\n \n {{> components/ui/account-info company=COMPANY_NAME email=EMAIL id=ID host=HOST}}\n

\n \n \n \n {{> components/layout/footer year=\"2023\"}}\n\n\n```\n\n### Controller Update\n\nWe've updated the `submissionController.ts` to use our new template:\n\n```typescript\nexport async function renderContinuationPage(c: Context): Promise {\n // ...\n const html = await renderTemplate(\"/views/templates/continue-template.html\", {\n COMPANY_NAME: submission.companyName,\n EMAIL: submission.email,\n ID: id,\n HOST: host\n }, import.meta.url);\n \n return c.html(html);\n}\n```\n\n## Benefits of Phase 1\n\n1. **Improved Organization**: Clear separation of concerns with components\n2. **Better Maintainability**: Smaller, focused files are easier to understand and modify\n3. **Enhanced Reusability**: Components can be reused across different pages\n4. **Cleaner Styling**: Dedicated CSS files for components\n5. **Simplified Templates**: Main template is now more readable and focused on structure\n\n## Next Steps\n\nIn Phase 2, we'll extract more components from the continue.html file, focusing on common UI patterns and further improving the organization of the code.",[],[1043],{"_107":1051,"_100":1052,"_154":1053,"_156":-5,"_157":141,"_158":1054,"_160":121,"_109":1055,"_104":31,"_162":273,"_164":1056,"_165":27,"_166":-5,"_167":1057,"_103":1058},"daa9e53a-2c1f-11f0-8b83-569c3dd06744","REFACTORING-PHASE2.md","daa9e616-2c1f-11f0-8b83-569c3dd06744",332,["D",1746717577259],"# DEV Partner Portal Refactoring - Phase 2\n\nThis document outlines the changes made in Phase 2 of the continue.html refactoring.\n\n## Phase 2: Enhanced Component System\n\nBuilding on the foundation established in Phase 1, we've further improved the component system with more sophisticated components and better organization.\n\n### New UI Components\n\n1. **Form Field Component** (`/views/components/ui/form-field.html`)\n - Generic component for form inputs\n - Supports different input types (text, textarea, select)\n - Handles labels, placeholders, and validation states\n - Example usage:\n ```html\n {{> components/ui/form-field \n id=\"website\" \n label=\"Company Website\" \n type=\"url\" \n placeholder=\"https://example.com\"\n }}\n ```\n\n2. **Button Component** (`/views/components/ui/button.html`)\n - Flexible button component with multiple variants\n - Supports different sizes, styles, and states\n - Example usage:\n ```html\n {{> components/ui/button \n id=\"submitButton\" \n type=\"submit\" \n variant=\"primary\" \n text=\"Save Information\"\n }}\n ```\n\n3. **Section Component** (`/views/components/ui/section.html`)\n - Wrapper for section cards with consistent styling\n - Handles headers, content, and footers\n - Example usage:\n ```html\n {{> components/ui/section \n icon=\"👤\" \n title=\"Account Information\"\n content='{{> components/ui/account-info ...}}'\n }}\n ```\n\n### Uploadcare Components\n\n1. **Image Item Component** (`/views/components/uploadcare/image-item.html`)\n - Represents a single image in the gallery\n - Includes preview, metadata, and action buttons\n\n2. **Image Count Component** (`/views/components/uploadcare/image-count.html`)\n - Displays the number of images with proper pluralization\n\n### JavaScript Improvements\n\n1. **Enhanced Gallery Renderer**\n - More modular approach to rendering images\n - Better separation of concerns\n - Improved error handling\n - JSDoc comments for better documentation\n\n### Template Updates\n\nThe continue-template.html has been updated to use these new components, resulting in:\n- Cleaner, more readable template\n- Better component composition\n- More consistent styling\n- Easier maintenance\n\n### Benefits of Phase 2\n\n1. **Improved Reusability**: Components like form-field and button can be used throughout the application\n2. **Better Abstraction**: Higher-level components hide implementation details\n3. **Enhanced Maintainability**: Smaller, focused components are easier to update\n4. **Consistent UI**: Standardized components ensure consistent styling\n5. **Reduced Duplication**: Common patterns are extracted into reusable components\n6. **Better Documentation**: JSDoc comments and clear parameter definitions\n\n### Example: Before and After\n\n#### Before (Phase 1):\n```html\n

\n 🏢\n

DEV Partner Portal

\n \n {{> components/layout/footer year=\"2023\"}}\n \n \n\n\n```\n\n### Client-Side Validation\n\nWe've implemented a comprehensive client-side validation system:\n\n1. **Form Validator Module** (`/public/js/modules/form-validator.js`)\n - Validates form fields based on type (email, url, text)\n - Shows validation errors inline\n - Supports live validation on blur and input events\n - Prevents form submission if validation fails\n\n2. **Validation Integration**\n - Updated landing.js to use the validation module\n - Updated continue.js to use the validation module\n - Added validation before form submission\n\n### JavaScript Improvements\n\n1. **Enhanced Landing.js**\n - Added form validation\n - Improved error handling\n - Better separation of concerns\n\n2. **Enhanced Continue.js**\n - Added form validation\n - Improved error handling\n - Better separation of concerns\n\n### Benefits of Phase 3\n\n1. **Consistent User Experience**: Both landing and continue pages use the same component system\n2. **Improved Form Validation**: Client-side validation provides immediate feedback to users\n3. **Better Error Handling**: Validation errors are shown inline with the form fields\n4. **Enhanced User Experience**: Live validation helps users correct errors as they type\n5. **Reduced Server Load**: Invalid forms are caught before submission\n6. **Maintainable Code**: Validation logic is centralized in a single module\n\n### Example: Form Validation\n\n```javascript\n// Set up live validation for both forms\nif (form) {\n setupLiveValidation(form);\n}\n\n// Handle form submission\nform.addEventListener('submit', (e) => {\n e.preventDefault();\n \n // Validate the form before submission\n if (!validateForm(form)) {\n return;\n }\n \n // Form submission logic...\n});\n```\n\n## Next Steps\n\nFor Phase 4, we would:\n1. Implement more sophisticated interactions between components\n2. Add accessibility improvements (ARIA attributes, keyboard navigation)\n3. Create a component library documentation page\n4. Add unit tests for components and validation\n5. Implement performance optimizations",[],[1061],{"_107":1069,"_100":1070,"_154":1071,"_156":-5,"_157":141,"_158":1072,"_160":121,"_109":1073,"_104":31,"_162":273,"_164":1074,"_165":27,"_166":-5,"_167":1075,"_103":1076},"4cfff824-2c23-11f0-9f2a-569c3dd06744","REFACTORING-PHASE4.md","4cfff90a-2c23-11f0-9f2a-569c3dd06744",355,["D",1746719057575],"# DEV Partner Portal Refactoring - Phase 4\n\nThis document outlines the changes made in Phase 4 of the continue.html refactoring.\n\n## Phase 4: Accessibility and Component Library\n\nBuilding on the foundation established in previous phases, we've enhanced the component system with accessibility features and created a component library documentation page.\n\n### Accessibility Improvements\n\n1. **Form Field Component** (`/views/components/ui/form-field.html`)\n - Added ARIA attributes for better screen reader support\n - Added proper labeling with `aria-labelledby` and `aria-describedby`\n - Added support for help text and error messages\n - Improved validation error handling\n - Example usage:\n ```html\n {{> components/ui/form-field \n id=\"email\" \n label=\"Email Address\" \n type=\"email\" \n required=\"true\"\n autocomplete=\"email\"\n ariaDescribedby=\"email-help\"\n }}\n ```\n\n2. **Button Component** (`/views/components/ui/button.html`)\n - Added ARIA attributes for better screen reader support\n - Added support for `aria-expanded`, `aria-controls`, and `aria-pressed`\n - Improved focus styles for keyboard navigation\n - Example usage:\n ```html\n {{> components/ui/button \n id=\"toggleButton\" \n type=\"button\" \n variant=\"primary\" \n text=\"Toggle Panel\"\n ariaExpanded=\"false\"\n ariaControls=\"panel-1\"\n }}\n ```\n\n3. **Message Box Component** (`/views/components/ui/message-box.html`)\n - Added appropriate ARIA roles (`alert`, `status`)\n - Added `aria-live` regions for dynamic content\n - Example usage:\n ```html\n {{> components/ui/message-box \n id=\"errorMessage\" \n type=\"error\" \n message=\"Please correct the errors in the form.\"\n }}\n ```\n\n4. **Success Message Component** (`/views/components/ui/success-message.html`)\n - Added appropriate ARIA roles and live regions\n - Made icons decorative with `aria-hidden=\"true\"`\n - Example usage:\n ```html\n {{> components/ui/success-message \n id=\"successMessage\" \n title=\"Success\" \n message=\"Your changes have been saved.\"\n }}\n ```\n\n### Form Validation Improvements\n\n1. **Enhanced Form Validator Module** (`/public/js/modules/form-validator.js`)\n - Added ARIA attributes for validation errors\n - Added focus management for invalid fields\n - Added live region announcements for screen readers\n - Improved error message display\n - Example usage:\n ```javascript\n setupLiveValidation(form);\n \n form.addEventListener('submit', (e) => {\n e.preventDefault();\n if (!validateForm(form)) {\n return;\n }\n // Form submission logic...\n });\n ```\n\n### Component Library Documentation\n\n1. **Component Library Page** (`/views/templates/component-library.html`)\n - Showcases all available components\n - Provides usage examples with code snippets\n - Demonstrates different component variations\n - Accessible at `/components` route\n - Example sections:\n - Form Fields\n - Buttons\n - Message Boxes\n - Sections\n\n2. **Component Library Route**\n - Added a new route to access the component library\n - Added controller function to render the component library page\n - Example usage:\n ```typescript\n submissionsRouter.get(\"/components\", renderComponentLibrary);\n ```\n\n### Benefits of Phase 4\n\n1. **Improved Accessibility**: Components are now accessible to users with disabilities\n2. **Better Keyboard Navigation**: Improved focus management and keyboard interaction\n3. **Screen Reader Support**: ARIA attributes and live regions for screen reader users\n4. **Component Documentation**: Comprehensive documentation for all components\n5. **Developer Experience**: Easier to understand and use components correctly\n6. **Consistent Implementation**: Standardized approach to accessibility across components\n\n### Example: Accessible Form Field\n\n```html\n

\n \n {{label}}{{#if required}}*{{/if}}\n \n \n \n \n \n

\n \n \n {{#if helpText}}\n

\n {{/if}}\n

\n```\n\n## Next Steps\n\nFor Phase 5, we would:\n1. Implement unit tests for components and validation\n2. Add end-to-end testing for critical user flows\n3. Implement performance optimizations\n4. Add more sophisticated component interactions\n5. Create a design system documentation",[],[1070],{"_107":1078,"_100":1079,"_154":1080,"_156":-5,"_157":141,"_158":1081,"_160":121,"_109":1082,"_104":31,"_162":273,"_164":1083,"_165":27,"_166":-5,"_167":1084,"_103":1085},"3b6d0b50-2c24-11f0-a20b-569c3dd06744","REFACTORING-PHASE5.md","3b6d0d26-2c24-11f0-a20b-569c3dd06744",364,["D",1746719457587],"# DEV Partner Portal Refactoring - Phase 5\n\nThis document outlines the changes made in Phase 5 of the continue.html refactoring.\n\n## Phase 5: Testing and Performance Optimization\n\nBuilding on the foundation established in previous phases, we've added unit tests and implemented performance optimizations.\n\n### Unit Tests\n\n1. **Test Framework Setup**\n - Created a structured testing directory\n - Added test documentation and examples\n - Set up test helpers and mocks\n\n2. **Utility Function Tests** (`/tests/unit/utils/helpers.test.ts`)\n - Tests for the `generateUniqueId` function\n - Validates UUID format and uniqueness\n\n3. **Form Validation Tests** (`/tests/unit/modules/form-validator.test.ts`)\n - Tests for the `validateField` function\n - Validates different field types (email, URL, text)\n - Tests required field validation\n\n4. **Template Service Tests** (`/tests/unit/services/templateService.test.ts`)\n - Tests for the `renderTemplate` function\n - Tests variable replacement\n - Tests conditional processing\n - Tests component inclusion\n\n### Performance Optimizations\n\n1. **Performance Module** (`/public/js/modules/performance.js`)\n - Lazy loading for images\n - Deferred script loading\n - Throttling and debouncing functions\n - Performance monitoring\n\n2. **Lazy Image Component** (`/views/components/ui/lazy-image.html`)\n - Implements lazy loading for images\n - Uses placeholder SVGs\n - Supports native lazy loading\n - Maintains accessibility\n\n3. **Throttled API Calls**\n - Implemented throttling for gallery refresh\n - Prevents excessive API calls\n - Improves responsiveness\n\n4. **Debounced Form Submissions**\n - Implemented debouncing for form submissions\n - Prevents double submissions\n - Improves user experience\n\n5. **Responsive UI Optimizations**\n - Added throttled window resize handler\n - Adjusts UI for different screen sizes\n - Improves performance on mobile devices\n\n### JavaScript Improvements\n\n1. **Enhanced Continue.js**\n - Added performance monitoring\n - Implemented throttling and debouncing\n - Improved error handling\n - Added responsive UI adjustments\n\n2. **Enhanced Landing.js**\n - Added performance monitoring\n - Implemented debounced form submissions\n - Improved validation handling\n\n### Benefits of Phase 5\n\n1. **Improved Reliability**: Unit tests ensure code correctness\n2. **Better Performance**: Lazy loading and throttling reduce resource usage\n3. **Enhanced User Experience**: Debouncing prevents double submissions\n4. **Improved Mobile Experience**: Responsive optimizations for different devices\n5. **Better Debugging**: Performance monitoring helps identify bottlenecks\n6. **Reduced Server Load**: Throttled API calls reduce server load\n\n### Example: Lazy Image Component\n\n```html\n $\"{{alt}}\"\n$ \n```\n\n### Example: Throttled Gallery Refresh\n\n```javascript\n// Load and render images with throttling to prevent excessive API calls\nconst throttledRefreshGallery = throttle(async function() {\n try {\n const images = await loadImages(submissionId);\n updateImageCount(images.length);\n \n if (images.length > 0) {\n renderUploadcareGallery(\n images, \n 'uploadcare-gallery', \n submissionId, \n throttledRefreshGallery\n );\n } else {\n // Clear the file list container\n fileListContainer.innerHTML = '

No images uploaded yet

';\n }\n } catch (error) {\n console.error('Error refreshing gallery:', error);\n updateStatus(`Error: ${error.message}`, 'red');\n }\n}, 500);\n```\n\n### Example: Debounced Form Submission\n\n```javascript\n// Handle form submission with debouncing to prevent double submissions\nconst debouncedSubmit = debounce(async (e) => {\n e.preventDefault();\n \n // Validate the form before submission\n if (!validateForm(form)) {\n return;\n }\n \n submitAdditionalInfo(form, submissionId, {\n // Form submission logic...\n });\n}, 300);\n\nform.addEventListener('submit', debouncedSubmit);\n```\n\n## Next Steps\n\nFor future phases, we would:\n1. Implement end-to-end testing for critical user flows\n2. Add more comprehensive unit test coverage\n3. Implement code splitting for larger JavaScript files\n4. Add service worker for offline support\n5. Implement more sophisticated caching strategies",[],[1079],{"_107":1087,"_100":1088,"_154":1089,"_156":-5,"_157":141,"_158":1090,"_160":121,"_109":1091,"_104":290,"_162":273,"_164":1092,"_165":27,"_166":-5,"_167":1093,"_103":1094},"39a43568-2bfd-11f0-a16f-569c3dd06744","REFACTORING.md","cabddb78-2bb0-11f0-b88f-569c3dd06744",299,["D",1746702704215],"# DEV Partner Portal Refactoring\n\nThis document outlines the refactoring changes made to improve the structure and maintainability of the DEV Partner Portal application.\n\n## JavaScript Modularization\n\n### Before\n\nThe client-side JavaScript files (continue.js and landing.js) were large monolithic files with multiple responsibilities, making them difficult to maintain and debug.\n\n### After\n\nThe JavaScript has been refactored into smaller, more focused modules:\n\n1. **uploadcare-manager.js**: Handles all Uploadcare-related functionality\n2. **gallery-renderer.js**: Handles rendering the image gallery UI\n3. **form-handler.js**: Handles form submission and validation\n\nThis modular approach improves:\n- Code organization and readability\n- Testability\n- Maintainability\n- Reusability\n\n## ES Modules Support\n\nThe client-side JavaScript now uses ES modules for better code organization and dependency management:\n\n```html\n\n```\n\n## Benefits of the Refactoring\n\n1. **Improved Code Organization**: Clear separation of concerns with modular code\n2. **Better Maintainability**: Smaller, focused files are easier to understand and modify\n3. **Enhanced Scalability**: The new structure makes it easier to add new features\n4. **Reduced Duplication**: Common functionality is now in shared modules\n5. **Better Error Handling**: Consistent error handling across modules\n\n## Future Improvements\n\n1. **API Structure**: Consider reorganizing API routes with proper path prefixes in a future update\n2. **Controller Separation**: Further separate controllers into presentation and business logic\n3. **TypeScript Types**: Add more comprehensive TypeScript types for better type safety\n4. **Testing**: Add unit and integration tests for the refactored code\n5. **Documentation**: Add JSDoc comments to all functions and modules\n6. **Performance Optimization**: Implement lazy loading for the image gallery",[],[1088],{"_107":1096,"_100":1097,"_154":1098,"_156":-5,"_157":141,"_158":1099,"_160":121,"_109":1100,"_104":31,"_162":273,"_164":1101,"_165":27,"_166":-5,"_167":1102,"_103":1103},"6d6d6e34-2c28-11f0-80d3-569c3dd06744","TEMPLATE-FIX.md","6d6d6efc-2c28-11f0-80d3-569c3dd06744",384,["D",1746721259461],"# Template System Fix\n\nThis document explains the changes made to fix the template rendering issues in the DEV Partner Portal application.\n\n## The Problem\n\nThe template system was experiencing issues with nested conditionals and complex template syntax. This resulted in template code being rendered directly in the HTML output instead of being processed correctly.\n\nExamples of issues:\n- Template variables like `{{value}}` appearing in the rendered output\n- Conditional statements like `{{#if type == \"select\"}}` showing up in the HTML\n- Nested conditionals not being processed correctly\n\n## The Solution\n\nWe took a two-pronged approach to fix these issues:\n\n1. **Simplified Components**: Created simplified versions of all components that avoid complex template syntax\n2. **Direct HTML**: Used direct HTML instead of complex conditional logic in templates\n\n### Simplified Components\n\nWe created the following simplified components:\n\n- `/views/components/forms/simple-submission-form.html`\n- `/views/components/forms/simple-magic-link-form.html`\n- `/views/components/forms/simple-company-info-form.html`\n- `/views/components/ui/simple-success-message.html`\n- `/views/components/ui/simple-error-message.html`\n- `/views/components/ui/simple-account-info.html`\n- `/views/components/uploadcare/simple-image-gallery.html`\n- `/views/components/ad-creation/simple-ad-preview.html`\n\nThese components use direct HTML instead of complex template syntax, making them more reliable and easier to maintain.\n\n### Simplified Templates\n\nWe also created simplified versions of the main templates:\n\n- `/views/templates/simple-landing-template.html`\n- `/views/templates/simple-continue-template.html`\n\nThese templates use the simplified components and avoid complex template syntax.\n\n### Updated Controllers\n\nWe updated the controllers to use the simplified templates:\n\n```typescript\n// Updated renderLandingPage function\nexport async function renderLandingPage(c: Context): Promise {\n const html = await renderTemplate(\"/views/templates/simple-landing-template.html\", {}, import.meta.url);\n return c.html(html);\n}\n\n// Updated renderContinuationPage function\nexport async function renderContinuationPage(c: Context): Promise {\n // ...\n const html = await renderTemplate(\"/views/templates/simple-continue-template.html\", {\n COMPANY_NAME: submission.companyName,\n EMAIL: submission.email,\n ID: id,\n HOST: host\n }, import.meta.url);\n \n return c.html(html);\n}\n```\n\n## Benefits of This Approach\n\n1. **Reliability**: Simplified templates are less prone to rendering errors\n2. **Maintainability**: Direct HTML is easier to understand and maintain\n3. **Performance**: Simpler templates are faster to render\n4. **Debugging**: Issues are easier to identify and fix\n\n## Future Improvements\n\nFor a more robust solution in the future, we could:\n\n1. Implement a more sophisticated template engine like Handlebars or EJS\n2. Create a custom component system with proper escaping and processing\n3. Add template validation to catch syntax errors before rendering\n4. Implement server-side rendering for complex components\n\nHowever, the current simplified approach should be sufficient for the needs of the DEV Partner Portal application while being much more reliable than the previous implementation.",[],[1097],{"_107":1105,"_100":1106,"_154":1107,"_156":-5,"_157":141,"_158":1108,"_160":121,"_109":1109,"_104":31,"_162":273,"_164":1110,"_165":27,"_166":-5,"_167":1111,"_103":1112},"df1d45c6-2b7a-11f0-9917-569c3dd06744","devto-stylesheet-README.md","df1d46a2-2b7a-11f0-9917-569c3dd06744",264,["D",1746646717768],"# Dev.to Stylesheet Utility\n\nThis project provides a utility to periodically fetch stylesheets from dev.to and make them available for use in your own projects.\n\n## Components\n\n### 1. Stylesheet Fetcher (`devto-stylesheet-fetcher.ts`)\n\nA cron job that:\n- Periodically fetches the dev.to homepage\n- Extracts the stylesheet links using regex\n- Stores the extracted links in blob storage\n- Keeps track of changes and maintains a version history\n- Sends email notifications when changes are detected\n\n### 2. Stylesheet Provider (`devto-stylesheet-provider.ts`)\n\nAn HTTP endpoint that:\n- Serves the latest stylesheet links in various formats\n- Provides JavaScript and CSS embed options\n- Offers an API to access current and historical stylesheet data\n- Includes documentation and usage examples\n\n## Setup Instructions\n\n1. **Set up the Stylesheet Fetcher**:\n - Set the cron trigger on `devto-stylesheet-fetcher.ts` to run at your desired interval (e.g., daily)\n - The first run will fetch the initial stylesheets\n\n2. **Set up the Stylesheet Provider**:\n - Set the HTTP trigger on `devto-stylesheet-provider.ts`\n - Access the root URL for documentation and usage examples\n\n## Usage\n\n### Embedding in Your Project\n\nThere are several ways to use the dev.to stylesheets in your project:\n\n#### Option 1: JavaScript Embed (Recommended)\n\n```html\n\n```\n\nThis will dynamically load all the dev.to stylesheets into your page.\n\n#### Option 2: CSS Import\n\n```html\n\n```\n\nThis loads a CSS file that imports all the dev.to stylesheets.\n\n#### Option 3: API Integration\n\nFetch the stylesheets programmatically:\n\n```javascript\nfetch(\"https://your-val-town-url.val.run/api/stylesheets\")\n .then(res => res.json())\n .then(data => {\n // Use the stylesheet URLs as needed\n console.log(data.stylesheets);\n });\n```\n\n## API Endpoints\n\n- `GET /` - Documentation and status page\n- `GET /api/stylesheets` - Get the current stylesheets as JSON\n- `GET /api/history` - Get the history of stylesheet changes\n- `GET /embed.js` - JavaScript snippet to load the stylesheets\n- `GET /embed.css` - CSS file that imports all the stylesheets\n\n## Storage Structure\n\nThe utility uses Val Town's blob storage with the following keys:\n\n- `devto_stylesheets` - Current stylesheet data\n- `devto_stylesheets_last_updated` - Timestamp of last update\n- `devto_stylesheets_history` - History of stylesheet changes\n\n## Limitations\n\n- The utility relies on the current structure of dev.to's HTML. If dev.to changes their HTML structure, the regex extraction may need to be updated.\n- The utility only extracts stylesheet links and does not handle inline styles or dynamically loaded stylesheets.\n- Dev.to may have usage restrictions or rate limits that could affect the fetcher.\n\n## Future Improvements\n\n- Add support for selective stylesheet inclusion\n- Implement stylesheet minification and combination\n- Add support for custom CSS overrides\n- Implement more robust error handling and retry logic",[],[1106],{"_107":1114,"_100":1115,"_154":1116,"_156":-5,"_157":141,"_158":1117,"_160":121,"_109":1118,"_104":364,"_162":1119,"_164":1120,"_165":27,"_166":-5,"_167":1121,"_103":1122},"0af465ca-2b7c-11f0-8d10-569c3dd06744","devto-stylesheet-fetcher.ts","a4a98df0-2b7a-11f0-ad7c-569c3dd06744",274,["D",1746647220809],"interval","/**\n * Dev.to Stylesheet Fetcher\n * \n * This val periodically fetches the dev.to homepage and extracts the stylesheet links.\n * It stores these links in blob storage for use in other vals.\n */\n\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { email } from \"https://esm.town/v/std/email\";\n\n// Storage keys\nconst STORAGE_KEY = \"devto_stylesheets\";\nconst STORAGE_KEY_TIMESTAMP = \"devto_stylesheets_last_updated\";\nconst STORAGE_KEY_HISTORY = \"devto_stylesheets_history\";\n\n// Configuration\nconst MAX_HISTORY_ITEMS = 10;\n\ninterface StylesheetData {\n stylesheets: string[];\n fetchedAt: string;\n source: string;\n}\n\ninterface HistoryItem {\n timestamp: string;\n stylesheets: string[];\n}\n\n/**\n * Main function that runs on a schedule to fetch and extract stylesheets\n */\nexport default async function() {\n try {\n console.log(\"Fetching dev.to stylesheets...\");\n \n // Fetch the dev.to homepage\n const response = await fetch(\"https://dev.to\", {\n headers: {\n \"User-Agent\": \"Mozilla/5.0 (compatible; ValTown/1.0; +https://val.town)\"\n }\n });\n \n if (!response.ok) {\n throw new Error(`Failed to fetch dev.to: ${response.status} ${response.statusText}`);\n }\n \n const html = await response.text();\n \n // Extract stylesheet links using regex\n // Looking specifically for links like:\n // \n const stylesheetRegex = /]*>/g;\n const stylesheets: string[] = [];\n let match;\n \n while ((match = stylesheetRegex.exec(html)) !== null) {\n stylesheets.push(match[1]);\n }\n \n if (stylesheets.length === 0) {\n throw new Error(\"No stylesheets found on dev.to\");\n }\n \n console.log(`Found ${stylesheets.length} stylesheets`);\n \n // Get the previous data to check for changes\n const previousData = await blob.getJSON(STORAGE_KEY).catch(() => null);\n \n // Create new data object\n const now = new Date().toISOString();\n const newData: StylesheetData = {\n stylesheets,\n fetchedAt: now,\n source: \"https://dev.to\"\n };\n \n // Check if there are changes\n const hasChanges = !previousData || \n JSON.stringify(previousData.stylesheets) !== JSON.stringify(stylesheets);\n \n if (hasChanges) {\n console.log(\"Changes detected, updating storage\");\n \n // Store the new data\n await blob.setJSON(STORAGE_KEY, newData);\n await blob.setJSON(STORAGE_KEY_TIMESTAMP, { lastUpdated: now });\n \n // Update history\n const history = await blob.getJSON(STORAGE_KEY_HISTORY).catch(() => []);\n history.unshift({\n timestamp: now,\n stylesheets\n });\n \n // Keep only the most recent items\n const trimmedHistory = history.slice(0, MAX_HISTORY_ITEMS);\n await blob.setJSON(STORAGE_KEY_HISTORY, trimmedHistory);\n \n // Send notification email\n await email({\n subject: \"Dev.to Stylesheets Updated\",\n text: `The dev.to stylesheets have been updated.\\n\\nFound ${stylesheets.length} stylesheets:\\n${stylesheets.join('\\n')}\\n\\nTimestamp: ${now}`,\n html: `\n

Dev.to Stylesheets Updated

The dev.to stylesheets have been updated.

Found ${stylesheets.length} stylesheets:

${url}

Timestamp: ${now}

\n `\n });\n \n return { \n success: true, \n message: \"Stylesheets updated\", \n count: stylesheets.length,\n hasChanges: true\n };\n } else {\n console.log(\"No changes detected\");\n return { \n success: true, \n message: \"No changes detected\", \n count: stylesheets.length,\n hasChanges: false\n };\n }\n } catch (error) {\n console.error(\"Error fetching dev.to stylesheets:\", error);\n \n // Send error notification\n await email({\n subject: \"Error: Dev.to Stylesheet Fetcher\",\n text: `An error occurred while fetching dev.to stylesheets:\\n\\n${error.message}\\n\\n${error.stack}`,\n html: `\n

Error: Dev.to Stylesheet Fetcher

An error occurred while fetching dev.to stylesheets:

${error.message}

${error.stack}

\n `\n });\n \n return { \n success: false, \n error: error.message \n };\n }\n}",[],[1115],{"_107":1124,"_100":1125,"_154":1126,"_156":-5,"_157":141,"_158":1127,"_160":121,"_109":1128,"_104":290,"_162":463,"_164":1129,"_165":27,"_166":-5,"_167":1130,"_103":1131},"e750fea4-2b7a-11f0-a40f-569c3dd06744","devto-stylesheet-provider.ts","be6a626e-2b7a-11f0-a379-569c3dd06744",266,["D",1746646731525],"/**\n * Dev.to Stylesheet Provider\n * \n * This val provides an HTTP endpoint to serve the dev.to stylesheets\n * that were fetched and stored by the devto-stylesheet-fetcher.\n */\n\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { Hono } from \"https://esm.sh/hono@3.11.11\";\nimport { cors } from \"https://esm.sh/hono@3.11.11/cors\";\nimport { parseProject } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\n// Storage keys\nconst STORAGE_KEY = \"devto_stylesheets\";\nconst STORAGE_KEY_TIMESTAMP = \"devto_stylesheets_last_updated\";\nconst STORAGE_KEY_HISTORY = \"devto_stylesheets_history\";\n\ninterface StylesheetData {\n stylesheets: string[];\n fetchedAt: string;\n source: string;\n}\n\ninterface HistoryItem {\n timestamp: string;\n stylesheets: string[];\n}\n\nconst app = new Hono();\n\n// Enable CORS\napp.use(\"*\", cors());\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Get project info for documentation\nconst projectInfo = parseProject(import.meta.url);\n\n/**\n * GET / - Documentation and status\n */\napp.get(\"/\", async (c) => {\n const lastUpdated = await blob.getJSON<{ lastUpdated: string }>(STORAGE_KEY_TIMESTAMP)\n .catch(() => ({ lastUpdated: \"never\" }));\n \n const data = await blob.getJSON(STORAGE_KEY)\n .catch(() => null);\n \n const stylesheetCount = data?.stylesheets?.length || 0;\n \n return c.html(`\n \n \n \n \n \n Dev.to Stylesheet Provider\n \n \n \n

Dev.to Stylesheet Provider

\n \n

Status: ${data ? '✅ Active' : '❌ No data available'}

Last Updated: ${lastUpdated.lastUpdated}

Stylesheets: ${stylesheetCount}

View Current Stylesheets

\n \n

Available Endpoints

\n \n

GET /api/stylesheets

Returns the current dev.to stylesheets as JSON.

fetch(\"${c.req.url}api/stylesheets\")\n  .then(res => res.json())\n  .then(data => console.log(data));

\n \n

GET /api/history

Returns the history of stylesheet changes.

fetch(\"${c.req.url}api/history\")\n  .then(res => res.json())\n  .then(data => console.log(data));

\n \n

GET /embed.js

Returns a JavaScript snippet that can be included in your HTML to dynamically load the dev.to stylesheets.

<script src=\"${c.req.url}embed.js\"></script>

\n \n

GET /embed.css

Returns a CSS file that imports all the dev.to stylesheets.

<link rel=\"stylesheet\" href=\"${c.req.url}embed.css\">

\n \n

Usage Examples

\n \n

Basic HTML Integration

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>My Dev.to Styled Page</title>\n  \n  <!-- Option 1: Use the embed.js script (recommended) -->\n  <script src=\"${c.req.url}embed.js\"></script>\n  \n  <!-- Option 2: Use the CSS file directly -->\n  <!-- <link rel=\"stylesheet\" href=\"${c.req.url}embed.css\"> -->\n  \n  <!-- Option 3: Fetch and add stylesheets programmatically -->\n  <!--\n  <script>\n    fetch(\"${c.req.url}api/stylesheets\")\n      .then(res => res.json())\n      .then(data => {\n        data.stylesheets.forEach(url => {\n          const link = document.createElement('link');\n          link.rel = 'stylesheet';\n          link.href = url;\n          document.head.appendChild(link);\n        });\n      });\n  </script>\n  -->\n</head>\n<body>\n  <h1>My Dev.to Styled Page</h1>\n  <p>This page is styled using dev.to stylesheets.</p>\n</body>\n</html>

\n\n \n \n \n `);\n});\n\n/**\n * GET /api/stylesheets - Get the current stylesheets\n */\napp.get(\"/api/stylesheets\", async (c) => {\n try {\n const data = await blob.getJSON(STORAGE_KEY);\n \n if (!data) {\n return c.json({ \n error: \"No stylesheet data available\", \n message: \"The stylesheet fetcher may not have run yet\" \n }, 404);\n }\n \n return c.json(data);\n } catch (error) {\n return c.json({ \n error: \"Failed to retrieve stylesheets\", \n message: error.message \n }, 500);\n }\n});\n\n/**\n * GET /api/history - Get the history of stylesheet changes\n */\napp.get(\"/api/history\", async (c) => {\n try {\n const history = await blob.getJSON(STORAGE_KEY_HISTORY)\n .catch(() => []);\n \n return c.json({\n history,\n count: history.length\n });\n } catch (error) {\n return c.json({ \n error: \"Failed to retrieve history\", \n message: error.message \n }, 500);\n }\n});\n\n/**\n * GET /embed.js - JavaScript to dynamically load the stylesheets\n */\napp.get(\"/embed.js\", async (c) => {\n try {\n const data = await blob.getJSON(STORAGE_KEY);\n \n if (!data) {\n return c.text(\"console.error('Dev.to stylesheets not available');\", 404, {\n \"Content-Type\": \"application/javascript\"\n });\n }\n \n const js = `\n // Dev.to Stylesheet Loader\n // Generated: ${new Date().toISOString()}\n // Source: ${data.source}\n (function() {\n const stylesheets = ${JSON.stringify(data.stylesheets)};\n \n stylesheets.forEach(url => {\n const link = document.createElement('link');\n link.rel = 'stylesheet';\n link.href = url;\n document.head.appendChild(link);\n });\n \n console.log('[Dev.to Styles] Loaded ' + stylesheets.length + ' stylesheets');\n })();\n `;\n \n return c.text(js, 200, {\n \"Content-Type\": \"application/javascript\",\n \"Cache-Control\": \"max-age=3600\"\n });\n } catch (error) {\n return c.text(`console.error('Error loading Dev.to stylesheets: ${error.message}');`, 500, {\n \"Content-Type\": \"application/javascript\"\n });\n }\n});\n\n/**\n * GET /embed.css - CSS file that imports all the stylesheets\n */\napp.get(\"/embed.css\", async (c) => {\n try {\n const data = await blob.getJSON(STORAGE_KEY);\n \n if (!data) {\n return c.text(\"/* Dev.to stylesheets not available */\", 404, {\n \"Content-Type\": \"text/css\"\n });\n }\n \n const css = `\n /* Dev.to Stylesheets */\n /* Generated: ${new Date().toISOString()} */\n /* Source: ${data.source} */\n \n ${data.stylesheets.map(url => `@import url(\"${url}\");`).join('\\n')}\n `;\n \n return c.text(css, 200, {\n \"Content-Type\": \"text/css\",\n \"Cache-Control\": \"max-age=3600\"\n });\n } catch (error) {\n return c.text(`/* Error loading Dev.to stylesheets: ${error.message} */`, 500, {\n \"Content-Type\": \"text/css\"\n });\n }\n});\n\n// Export the Hono app for HTTP val\nexport default app.fetch;",[],[1125],{"_107":1133,"_100":190,"_154":119,"_156":-5,"_157":141,"_158":123,"_160":121,"_109":1134,"_104":1135,"_162":463,"_164":1136,"_165":27,"_166":99,"_167":1137,"_103":1138},"bdee3304-2c3f-11f0-94c3-569c3dd06744",["D",1746731272923],18,"import { Hono } from \"https://esm.sh/hono@3.12.6\";\nimport { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport apiRouter from \"./api/index.ts\";\nimport { setupDatabase } from \"./services/databaseService.ts\";\nimport { setupImagesTable } from \"./services/imageService.ts\";\n\n// Database initialization flag\nlet dbInitialized = false;\n\n/**\n * Initialize database and image storage only once\n */\nasync function initializeDatabase() {\n if (!dbInitialized) {\n console.log(\"Initializing database...\");\n try {\n await setupDatabase();\n await setupImagesTable();\n dbInitialized = true;\n console.log(\"Database initialization complete\");\n } catch (error) {\n console.error(\"Error initializing storage:\", error);\n // Don't set dbInitialized to true if there was an error\n // This will allow another attempt on the next request\n }\n }\n}\n\n// Initialize database at startup\ninitializeDatabase().catch(error => {\n console.error(\"Failed to initialize database at startup:\", error);\n});\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n console.error(\"Unhandled application error:\", err);\n throw err;\n});\n\n// Fallback initialization middleware - only runs setup if the initial attempt failed\napp.use(\"*\", async (c, next) => {\n if (!dbInitialized) {\n await initializeDatabase();\n }\n return next();\n});\n\n// Serve static files\napp.get(\"/public/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Mount the API router\napp.route(\"/\", apiRouter);\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",[],[190],"files",[151,169,179,188,198,206,215,224,233,243,249,259,267,278,284,294,303,309,315,322,331,339,349,358,369,375,382,391,400,409,418,429,438,447,457,467,476,485,494,504,510,520,529,538,546,557,564,570,576,585,591,600,606,617,622,631,640,650,656,662,669,678,687,694,703,712,721,730,739,749,755,764,773,780,789,798,807,816,825,833,842,851,860,869,879,886,895,904,913,922,931,940,949,959,966,975,984,993,1002,1011,1021,1032,1041,1050,1059,1068,1077,1086,1095,1104,1113,1123,1132],"counts",{"_1143":31,"_1144":364,"_1145":31,"_1146":31},"pulls","branches","forks","envVars","contents",[1149,1152,1155,1158,1161,1164,1167,1170,1173,1176,1179,1182,1185,1188,1191,1194,1197,1200,1203,1206],{"_107":152,"_100":153,"_154":155,"_156":-5,"_157":141,"_158":159,"_160":121,"_109":1150,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_103":1151},["D",1746579970933],[153],{"_107":244,"_100":245,"_154":246,"_156":-5,"_157":141,"_158":159,"_160":121,"_109":1153,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_103":1154},["D",1746579970933],[245],{"_107":279,"_100":280,"_154":281,"_156":-5,"_157":141,"_158":159,"_160":121,"_109":1156,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_103":1157},["D",1746579970933],[280],{"_107":304,"_100":305,"_154":306,"_156":-5,"_157":141,"_158":159,"_160":121,"_109":1159,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_103":1160},["D",1746579970933],[305],{"_107":505,"_100":506,"_154":507,"_156":-5,"_157":141,"_158":159,"_160":121,"_109":1162,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_103":1163},["D",1746579970933],[506],{"_107":558,"_100":559,"_154":560,"_156":-5,"_157":141,"_158":561,"_160":121,"_109":1165,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_103":1166},["D",1746719298690],[559],{"_107":618,"_100":602,"_154":619,"_156":-5,"_157":141,"_158":159,"_160":121,"_109":1168,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_103":1169},["D",1746579970933],[602],{"_107":651,"_100":652,"_154":653,"_156":-5,"_157":141,"_158":159,"_160":121,"_109":1171,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_103":1172},["D",1746579970933],[652],{"_107":1033,"_100":942,"_154":1034,"_156":-5,"_157":141,"_158":1035,"_160":121,"_109":1174,"_104":1037,"_162":273,"_164":1038,"_165":27,"_166":-5,"_103":1175},["D",1746721271285],[942],{"_107":1042,"_100":1043,"_154":1044,"_156":-5,"_157":141,"_158":1045,"_160":121,"_109":1177,"_104":31,"_162":273,"_164":1047,"_165":27,"_166":-5,"_103":1178},["D",1746717344994],[1043],{"_107":1051,"_100":1052,"_154":1053,"_156":-5,"_157":141,"_158":1054,"_160":121,"_109":1180,"_104":31,"_162":273,"_164":1056,"_165":27,"_166":-5,"_103":1181},["D",1746717577259],[1052],{"_107":1060,"_100":1061,"_154":1062,"_156":-5,"_157":141,"_158":1063,"_160":121,"_109":1183,"_104":31,"_162":273,"_164":1065,"_165":27,"_166":-5,"_103":1184},["D",1746718655080],[1061],{"_107":1069,"_100":1070,"_154":1071,"_156":-5,"_157":141,"_158":1072,"_160":121,"_109":1186,"_104":31,"_162":273,"_164":1074,"_165":27,"_166":-5,"_103":1187},["D",1746719057575],[1070],{"_107":1078,"_100":1079,"_154":1080,"_156":-5,"_157":141,"_158":1081,"_160":121,"_109":1189,"_104":31,"_162":273,"_164":1083,"_165":27,"_166":-5,"_103":1190},["D",1746719457587],[1079],{"_107":1087,"_100":1088,"_154":1089,"_156":-5,"_157":141,"_158":1090,"_160":121,"_109":1192,"_104":290,"_162":273,"_164":1092,"_165":27,"_166":-5,"_103":1193},["D",1746702704215],[1088],{"_107":1096,"_100":1097,"_154":1098,"_156":-5,"_157":141,"_158":1099,"_160":121,"_109":1195,"_104":31,"_162":273,"_164":1101,"_165":27,"_166":-5,"_103":1196},["D",1746721259461],[1097],{"_107":1105,"_100":1106,"_154":1107,"_156":-5,"_157":141,"_158":1108,"_160":121,"_109":1198,"_104":31,"_162":273,"_164":1110,"_165":27,"_166":-5,"_103":1199},["D",1746646717768],[1106],{"_107":1114,"_100":1115,"_154":1116,"_156":-5,"_157":141,"_158":1117,"_160":121,"_109":1201,"_104":364,"_162":1119,"_164":1120,"_165":27,"_166":-5,"_103":1202},["D",1746647220809],[1115],{"_107":1124,"_100":1125,"_154":1126,"_156":-5,"_157":141,"_158":1127,"_160":121,"_109":1204,"_104":290,"_162":463,"_164":1129,"_165":27,"_166":-5,"_103":1205},["D",1746646731525],[1125],{"_107":1133,"_100":190,"_154":119,"_156":-5,"_157":141,"_158":123,"_160":121,"_109":1207,"_104":1135,"_162":463,"_164":1136,"_165":27,"_166":99,"_103":1208},["D",1746731272923],[190],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name.remixes",{"_98":99,"_100":101,"_105":1215,"_1145":1219,"_1220":-5},{"_107":108,"_100":101,"_109":1216,"_111":-5,"_112":27,"_113":114,"_115":-5,"_116":-5,"_12":117,"_118":119,"_120":121,"_122":123,"_124":31,"_125":126,"_127":126,"_128":129,"_130":129,"_131":129,"_132":126,"_133":126,"_134":27,"_21":1217,"_138":1218},["D",1746553245576],{"_98":99,"_136":137},{"_104":140,"_100":42,"_107":141,"_142":108,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":101,"_148":99},[],"upstream","routes/_app","actionData","errors"]

LauraMepson

Submission Successful!

Already have an account?

DEV Partner Portal

Dev.to Stylesheets

Dev.to Elements

Crayons Buttons

Crayons Card

Card Header

Submission Successful!

Test Controls

Dev.to Stylesheet Test

Dev.to Elements

Card Header

Image Loading Test

Test Image Loading

Results

Image Gallery

Test Success Message

Submission Successful!

Hello from DEV Partner Portal!

\n Placeholder Heading\n

Ad Builder

Live Preview

\n Placeholder Heading\n

Select an Image

Already have an account?

Already have an account?

{{title}}

{{subtitle}}

{{title}}

{{title}}

Submission Successful!

{{title}}

Your Images

Your Images

{{title}}

DEV Partner Portal

Component Library

Form Fields

Text Input

Required Email Input

Select Input

Textarea

Buttons

Primary Button

Secondary Button

Outline Button

Button Sizes

Message Boxes

Success Message

Error Message

Info Message

Enhanced Success Message

Sections

Basic Section

Section with Footer

DEV Partner Portal

DEV Partner Portal

Ad Portal

Account Information

Company Information

Image Gallery

Ad Creation

DEV Partner Portal

DEV Partner Portal

Ad Portal

Account Information

Company Information

Image Gallery

Your Images

Ad Creation

\n Placeholder Heading\n

DEV Partner Portal

Already have an account?

Submission Successful!

{{title}}

{{subtitle}}

Company Information

DEV Partner Portal