diff --git a/index.html b/index.html index 20dca6d..e3257fd 100644 --- a/index.html +++ b/index.html @@ -7,25 +7,25 @@ - + - + - + @@ -1663,25 +1663,45 @@ function renderModalComments(container, comments) { } function getShareableImageUrl(proposal) { - // Base Cloudinary URL (you would need to sign up for Cloudinary) + // Base Cloudinary URL const cloudinaryUrl = "https://res.cloudinary.com/dh8apmjya/image/fetch"; - // Encode the proposal text for URL - const encodedText = encodeURIComponent(proposal.text); - const encodedAuthor = encodeURIComponent(proposal.author_name); + // Make sure we have valid text to work with + const text = proposal.text || "Unknown petition"; + const authorName = proposal.author_name || "Anonymous"; - // Transformation parameters for text overlay + // Encode the proposal text for URL - handle special characters better + // Limit text length to avoid excessively long URLs + const maxTextLength = 100; + const trimmedText = text.length > maxTextLength ? + text.substring(0, maxTextLength) + '...' : text; + + const encodedText = encodeURIComponent(trimmedText) + .replace(/'/g, '%27') + .replace(/"/g, '%22') + .replace(/\(/g, '%28') + .replace(/\)/g, '%29') + .replace(/\*/g, '%2A'); + + const encodedAuthor = encodeURIComponent(authorName) + .replace(/'/g, '%27') + .replace(/"/g, '%22'); + + // Transformation parameters for text overlay - adjust for better readability const textParams = - "l_text:Roboto_32_bold:" + encodedText + - ",co_white,w_500,c_fit/" + - "l_text:Roboto_20:Posted%20by%20" + encodedAuthor + - ",co_rgb:aaaaaa,g_north_west,y_80,x_50"; + `l_text:Roboto_30_bold:${encodedText}` + + `,co_white,w_480,c_fit,g_north,y_60,x_50` + + `/l_text:Roboto_18:Posted%20by%20${encodedAuthor}` + + `,co_rgb:aaaaaa,g_north_west,y_150,x_50`; // URL of your template image in R2 const templateUrl = encodeURIComponent("https://radical.omar-c29.workers.dev/memes/petition-template.png"); + // Add a cache-busting parameter to prevent caching issues + const cacheBuster = Date.now(); + // Combine everything - return `${cloudinaryUrl}/${textParams}/${templateUrl}`; + return `${cloudinaryUrl}/${textParams}/${templateUrl}?cb=${cacheBuster}`; } // Function to toggle comments visibility