Two-Line Logo Generator

\n \n {label}\n {description && (\n ({description})\n )}\n \n

\n onChange(e.target.value)}\n className=\"w-10 h-10 border border-gray-300 rounded-md\"\n />\n onChange(e.target.value)}\n placeholder=\"#RRGGBB\"\n className=\"flex-grow px-3 py-2 border border-gray-300 rounded-md shadow-sm font-mono text-sm\"\n maxLength={7}\n />\n

\n {uniqueColors.map((color) => (\n onChange(color)}\n title={color}\n />\n ))}\n

\n );\n};\n\nexport default ColorPicker;",[],[172],{"_107":181,"_99":103,"_153":182,"_155":-5,"_156":140,"_157":183,"_159":121,"_109":184,"_104":94,"_161":176,"_163":185,"_165":27,"_166":-5,"_167":186,"_102":187},"2ed64aee-180d-11f0-b5aa-569c3dd06744","4617e33e-2dc7-4cc9-9217-f0aa21938c80",9,["D",1744510534783],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\n// Official OpenMoji color palette\nexport const colorPalettes = {\n // Primary colors from OpenMoji\n primary: [\n \"#EA5A47\", // Red (primary)\n \"#5C9E31\", // Green (primary)\n \"#3692F7\", // Blue (primary)\n \"#F1B31C\", // Yellow (primary)\n \"#E67A94\", // Pink (primary)\n \"#AF7AC5\", // Purple (primary)\n \"#FF8C1A\", // Orange (primary)\n \"#00AEB3\", // Teal (primary)\n ],\n // Secondary/darker colors from OpenMoji\n secondary: [\n \"#781E32\", // Dark Red (secondary)\n \"#286E20\", // Dark Green (secondary)\n \"#0063A6\", // Dark Blue (secondary)\n \"#B27800\", // Dark Yellow (secondary)\n \"#A63553\", // Dark Pink (secondary)\n \"#6F4D9F\", // Dark Purple (secondary)\n \"#C85000\", // Dark Orange (secondary)\n \"#007489\", // Dark Teal (secondary)\n ],\n // Light/background colors\n background: [\n \"#FFFFFF\", // White\n \"#F1F2F2\", // Light Grey\n \"#3F3F3F\", // Dark Grey\n \"#000000\", // Black\n \"#D0CFCE\", // Silver\n \"#9B9B9A\", // Medium Grey\n ]\n};\n\nexport default {\n colorPalettes\n};",[],[103],{"_107":189,"_99":190,"_153":191,"_155":-5,"_156":140,"_157":192,"_159":121,"_109":193,"_104":33,"_161":176,"_163":194,"_165":27,"_166":-5,"_167":195,"_102":196},"41e33ca2-180b-11f0-aa5b-569c3dd06744","EmojiUtils.tsx","884b7533-7950-4916-9965-c4d9fc4458c8",1,["D",1744509707723],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\n// Convert emoji to codepoint\nexport const emojiToCodepoint = (emoji) => {\n try {\n // Get the first character (emoji) from the input\n const singleEmoji = [...emoji][0];\n\n // Convert to codepoint(s)\n let codepoint = \"\";\n for (const codeUnit of singleEmoji) {\n const hex = codeUnit.codePointAt(0).toString(16).toUpperCase();\n codepoint += (codepoint ? \"-\" : \"\") + hex;\n }\n\n // Remove any FE0F (variation selector) for simpler handling\n codepoint = codepoint.replace(/-FE0F/g, \"\");\n\n return codepoint;\n } catch (err) {\n console.error(\"Error converting emoji to codepoint:\", err);\n return null;\n }\n};\n\n// Get a random emoji from emoji-mart\nexport const getRandomEmoji = () => {\n // Pick a random emoji from common categories\n const categories = [\"people\", \"nature\", \"foods\", \"activity\", \"places\", \"objects\", \"symbols\", \"flags\"];\n const randomCategory = categories[Math.floor(Math.random() * categories.length)];\n\n // Default to rocket emoji if we can't get a random one\n let randomEmoji = \"🚀\";\n\n if (window.EmojiMart && window.EmojiMart.data) {\n try {\n const categoryData = window.EmojiMart.data.categories.find(c => c.id === randomCategory);\n if (categoryData && categoryData.emojis && categoryData.emojis.length) {\n const randomIndex = Math.floor(Math.random() * categoryData.emojis.length);\n const emojiKey = categoryData.emojis[randomIndex];\n const emoji = window.EmojiMart.data.emojis[emojiKey];\n if (emoji && emoji.native) {\n randomEmoji = emoji.native;\n }\n }\n } catch (err) {\n console.error(\"Error getting random emoji:\", err);\n }\n }\n\n return randomEmoji;\n};\n\nexport default {\n emojiToCodepoint,\n getRandomEmoji\n};",[],[190],{"_107":198,"_99":199,"_153":200,"_155":-5,"_156":140,"_157":94,"_159":121,"_109":201,"_104":192,"_161":176,"_163":202,"_165":27,"_166":-5,"_167":203,"_102":204},"9348d7e6-180b-11f0-8cf5-569c3dd06744","FontData.tsx","8cd30f82-049d-4547-b35e-234c5786892f",["D",1744509844312],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\n// Neutral colors always available\nexport const neutralColors = [\n \"#000000\",\n \"#ffffff\",\n \"#d0cfce\",\n \"#9b9b9a\",\n \"#3f3f3f\",\n];\n\n// System/Web-safe fonts only\nexport const fontOptions = [\n { name: \"Arial\", value: \"Arial, sans-serif\" },\n { name: \"Helvetica\", value: \"Helvetica, Arial, sans-serif\" },\n { name: \"Verdana\", value: \"Verdana, Geneva, sans-serif\" },\n { name: \"Tahoma\", value: \"Tahoma, Geneva, sans-serif\" },\n { name: \"Trebuchet MS\", value: \"'Trebuchet MS', Helvetica, sans-serif\" },\n { name: \"Georgia\", value: \"Georgia, serif\" },\n { name: \"Garamond\", value: \"Garamond, serif\" },\n { name: \"Times New Roman\", value: \"'Times New Roman', Times, serif\" },\n { name: \"Courier New\", value: \"'Courier New', Courier, monospace\" },\n { name: \"Segoe UI\", value: \"'Segoe UI', Tahoma, Geneva, sans-serif\" },\n { name: \"Calibri\", value: \"Calibri, 'Gill Sans', sans-serif\" },\n { name: \"Geneva\", value: \"Geneva, Verdana, sans-serif\" },\n { name: \"Optima\", value: \"Optima, sans-serif\" },\n { name: \"Cambria\", value: \"Cambria, Georgia, serif\" },\n { name: \"Candara\", value: \"Candara, Calibri, sans-serif\" },\n { name: \"Avenir\", value: \"Avenir, 'Segoe UI', sans-serif\" },\n { name: \"System UI\", value: \"system-ui, -apple-system, BlinkMacSystemFont, sans-serif\" },\n];\n\nexport default {\n neutralColors,\n fontOptions\n};",[],[199],{"_107":206,"_99":207,"_153":208,"_155":-5,"_156":140,"_157":209,"_159":121,"_109":210,"_104":33,"_161":176,"_163":211,"_165":27,"_166":-5,"_167":212,"_102":213},"460646f2-1811-11f0-ab83-569c3dd06744","LogoGenerator.tsx","4606477e-1811-11f0-ab83-569c3dd06744",18,["D",1744512291674],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\n// Common logo generation logic to share between web UI and API\n\n// Fixed corner radius from OpenMoji design (15px)\nexport const CORNER_RADIUS = 15;\n\n// Fixed container dimensions\nexport const CONTAINER_WIDTH = 400;\nexport const CONTAINER_HEIGHT = 150;\n\n/**\n * Estimate font size parameters for text on client or server\n * \n * On client, uses actual DOM measurements when svgRef is provided\n * On server, uses the character estimation approach\n * \n * @param topWord Top text (or single line text)\n * @param bottomWord Bottom text (only used in two-line mode)\n * @param fontFamily Font family to use\n * @param singleLineMode Whether to use single line mode\n * @param svgRef Optional ref to SVG element for DOM measurements\n */\nexport function calculateLogoTextParameters(\n topWord: string,\n bottomWord: string,\n fontFamily: string,\n singleLineMode: boolean,\n svgRef?: React.RefObject | null\n) {\n // Default result structure\n const result = {\n topFontSize: 60,\n bottomFontSize: 40,\n topY: singleLineMode ? CONTAINER_HEIGHT / 2 : 45,\n bottomY: 90,\n calculatedWidth: 0\n };\n \n // For client-side with SVG ref - use DOM measurements (more accurate)\n if (svgRef?.current && typeof document !== 'undefined') {\n try {\n const svg = svgRef.current;\n const svgNS = \"http://www.w3.org/2000/svg\";\n \n // Function to measure text width at a given font size\n const measureTextWidth = (text, fontSize) => {\n const tempText = document.createElementNS(svgNS, \"text\");\n tempText.setAttribute(\"font-family\", fontFamily);\n tempText.setAttribute(\"font-weight\", \"bold\");\n tempText.setAttribute(\"font-size\", fontSize);\n tempText.textContent = text;\n svg.appendChild(tempText);\n const width = tempText.getBBox().width;\n svg.removeChild(tempText);\n return width;\n };\n \n // Function to measure text height at a given font size\n const measureTextHeight = (text, fontSize) => {\n const tempText = document.createElementNS(svgNS, \"text\");\n tempText.setAttribute(\"font-family\", fontFamily);\n tempText.setAttribute(\"font-weight\", \"bold\");\n tempText.setAttribute(\"font-size\", fontSize);\n tempText.textContent = text;\n svg.appendChild(tempText);\n const height = tempText.getBBox().height;\n svg.removeChild(tempText);\n return height;\n };\n \n if (singleLineMode) {\n // For single line mode, simply make the text as large as possible\n let singleText = topWord;\n \n // Start with a large base size\n let baseFontSize = 100;\n \n // Measure width at base size\n const textWidthAt100px = measureTextWidth(singleText, 100);\n \n // Calculate the resulting width at base size\n const projectedWidth = textWidthAt100px * (baseFontSize / 100);\n \n // Max width calculation - use almost the entire container width (98%)\n const maxWidth = CONTAINER_WIDTH * 0.98; // 98% of container width for wider text\n \n // Scale down if necessary\n if (projectedWidth > maxWidth) {\n const scaleFactor = maxWidth / projectedWidth;\n baseFontSize *= scaleFactor;\n }\n \n // Ensure the text can fit vertically too\n const textHeightAtBaseSize = measureTextHeight(singleText, baseFontSize);\n const maxHeight = CONTAINER_HEIGHT * 0.85; // 85% of container height\n \n if (textHeightAtBaseSize > maxHeight) {\n const heightScaleFactor = maxHeight / textHeightAtBaseSize;\n baseFontSize *= heightScaleFactor;\n }\n \n // Set the final font size\n const finalFontSize = Math.floor(baseFontSize);\n result.topFontSize = finalFontSize;\n \n // Calculate and store width for UI\n result.calculatedWidth = measureTextWidth(singleText, finalFontSize);\n } else {\n // Two line mode - apply the original algorithm with tighter spacing\n \n // Measure both words at a reference size to find natural width ratio\n const topWidthAt100px = measureTextWidth(topWord, 100);\n const bottomWidthAt100px = measureTextWidth(bottomWord, 100);\n \n // Calculate ratio for equal width\n // If bottom word is naturally wider, it needs a smaller font size\n const widthRatio = bottomWidthAt100px / topWidthAt100px;\n \n // Start with base sizes - intentionally make top word larger\n let baseTopSize = 90;\n // Calculate bottom size to create equal width\n let baseBottomSize = baseTopSize / widthRatio;\n \n // Calculate the resulting width when both have the same visual width\n const equalWidth = topWidthAt100px * (baseTopSize / 100);\n result.calculatedWidth = equalWidth;\n \n // Check if the combined height exceeds the container\n const topHeight = measureTextHeight(topWord, baseTopSize);\n const bottomHeight = measureTextHeight(bottomWord, baseBottomSize);\n \n // Calculate available height for text (with margins) - use less margin for more text space\n const verticalMargin = CONTAINER_HEIGHT * 0.08; // Reduced from 0.15 to 0.08 (just 8% margin)\n const maxCombinedHeight = CONTAINER_HEIGHT - verticalMargin;\n \n // If we need to scale down to fit vertically\n if (topHeight + bottomHeight > maxCombinedHeight) {\n const scaleFactor = maxCombinedHeight / (topHeight + bottomHeight);\n baseTopSize *= scaleFactor;\n baseBottomSize *= scaleFactor;\n }\n \n // Check if width exceeds container width - use most of the container width (98%)\n const maxWidth = CONTAINER_WIDTH * 0.98; // 98% of container width for wider text\n if (equalWidth > maxWidth) {\n const widthScaleFactor = maxWidth / equalWidth;\n baseTopSize *= widthScaleFactor;\n baseBottomSize *= widthScaleFactor;\n }\n \n // Set the final font sizes\n const finalTopSize = Math.floor(baseTopSize);\n const finalBottomSize = Math.floor(baseBottomSize);\n \n result.topFontSize = finalTopSize;\n result.bottomFontSize = finalBottomSize;\n \n // Calculate vertical positions based on actual heights\n const finalTopHeight = measureTextHeight(topWord, finalTopSize);\n const finalBottomHeight = measureTextHeight(bottomWord, finalBottomSize);\n \n // Calculate vertical positions with even tighter spacing between words\n const totalHeight = finalTopHeight + finalBottomHeight;\n \n // Extreme reduction in the space between words\n const availableSpace = CONTAINER_HEIGHT - totalHeight - (CONTAINER_HEIGHT * 0.05); // very small margin (5%)\n const spacing = availableSpace / 6; // Use smaller divisor for tighter spacing\n \n // Top word position - placed higher\n result.topY = (CONTAINER_HEIGHT * 0.04) + (finalTopHeight / 2) + spacing;\n // Bottom word position - placed closer to top word\n result.bottomY = result.topY + (finalTopHeight / 2) + (spacing * 0.5) + (finalBottomHeight / 2);\n }\n \n return result;\n } catch (error) {\n console.error(\"Error in DOM measurement:\", error);\n // Fall back to text-based estimation below\n }\n }\n \n // For server-side or fallback - use character-based estimation\n try {\n if (singleLineMode) {\n // For single line, use a simplified calculation based on text length\n const textLength = topWord.length;\n \n // Use same exact algorithm as web version but with estimation\n let fontSize = 100; // Start with large size\n \n // Calculate available width (98% of container)\n const availableWidth = CONTAINER_WIDTH * 0.98;\n \n // Estimate text width at base size (100px)\n const estimatedWidthAt100px = estimateTextWidth(topWord, 100);\n \n // Calculate estimated full width\n const estimatedFullWidth = estimatedWidthAt100px * (fontSize / 100);\n \n // Scale down if necessary\n if (estimatedFullWidth > availableWidth) {\n fontSize = fontSize * (availableWidth / estimatedFullWidth);\n }\n \n // Set final estimated font size\n result.topFontSize = Math.floor(fontSize);\n result.calculatedWidth = estimatedWidthAt100px * (result.topFontSize / 100);\n } else {\n // Two-line logo using same approach as web version\n // Measure both words at a reference size to find natural width ratio\n const topEstimatedWidthAt100px = estimateTextWidth(topWord, 100);\n const bottomEstimatedWidthAt100px = estimateTextWidth(bottomWord, 100);\n \n // Calculate ratio for equal width\n // If bottom word is naturally wider, it needs a smaller font size\n const widthRatio = bottomEstimatedWidthAt100px / topEstimatedWidthAt100px || 1;\n \n // Start with base sizes - intentionally make top word larger\n let baseTopSize = 90;\n // Calculate bottom size to create equal width\n let baseBottomSize = baseTopSize / widthRatio;\n \n // Calculate the resulting width when both have the same visual width\n const equalWidth = topEstimatedWidthAt100px * (baseTopSize / 100);\n result.calculatedWidth = equalWidth;\n \n // Check if width exceeds container width - use most of the container width (98%)\n const maxWidth = CONTAINER_WIDTH * 0.98; // 98% of container width for wider text\n if (equalWidth > maxWidth) {\n const widthScaleFactor = maxWidth / equalWidth;\n baseTopSize *= widthScaleFactor;\n baseBottomSize *= widthScaleFactor;\n }\n \n // Set the final font sizes\n result.topFontSize = Math.floor(baseTopSize);\n result.bottomFontSize = Math.floor(baseBottomSize);\n \n // Estimated vertical positions\n result.topY = 45;\n result.bottomY = 90;\n }\n \n return result;\n } catch (error) {\n console.error(\"Error in text estimation:\", error);\n // Return default values as last resort\n return result;\n }\n}\n\n/**\n * Generate SVG content for the logo\n */\nexport function generateLogoSVG(\n topWord: string,\n bottomWord: string,\n fontFamily: string,\n backgroundColor: string,\n textColor: string,\n accentColor: string,\n secondaryColor: string,\n topFontSize: number,\n bottomFontSize: number,\n topY: number,\n bottomY: number,\n singleLineMode: boolean\n): string {\n if (singleLineMode) {\n // Single line version\n return `\n`.trim();\n } else {\n // Two line version\n return `\n`.trim();\n }\n}\n\n/**\n * Estimate text width based on character count and types\n * This is a more sophisticated text width estimator for server-side\n */\nexport function estimateTextWidth(text: string, fontSize: number): number {\n if (!text) return 0;\n \n // Average width of different character types relative to fontSize\n const charWidths = {\n wide: 0.8, // Characters like M, W, Q, D, O, G\n normal: 0.6, // Most characters\n narrow: 0.3 // Characters like I, l, j, f, t\n };\n \n // Character classification\n const wideChars = \"MWQDOG\";\n const narrowChars = \"IljftT1.\";\n \n let totalWidth = 0;\n \n // Calculate width based on character type\n for (const char of text) {\n if (wideChars.includes(char)) {\n totalWidth += charWidths.wide * fontSize;\n } else if (narrowChars.includes(char)) {\n totalWidth += charWidths.narrow * fontSize;\n } else {\n totalWidth += charWidths.normal * fontSize;\n }\n }\n \n // Add spacing between characters\n totalWidth += (text.length - 1) * 0.1 * fontSize;\n \n return totalWidth;\n}\n\n/**\n * Calculate a data URL from SVG content\n */\nexport function svgToDataURL(svgContent: string): string {\n // Browser-safe way to convert SVG to base64\n const svgBase64 = btoa(unescape(encodeURIComponent(svgContent)));\n return `data:image/svg+xml;base64,${svgBase64}`;\n}\n\nexport default {\n CORNER_RADIUS,\n CONTAINER_WIDTH,\n CONTAINER_HEIGHT,\n calculateLogoTextParameters,\n generateLogoSVG,\n estimateTextWidth,\n svgToDataURL\n};",[],[207],{"_107":215,"_99":216,"_153":217,"_155":-5,"_156":140,"_157":139,"_159":121,"_109":218,"_104":219,"_161":176,"_163":220,"_165":27,"_166":-5,"_167":221,"_102":222},"f6ef388e-1884-11f0-b112-569c3dd06744","LogoPreview.tsx","c523ce65-e594-4197-9d45-4ce6d093a4a4",["D",1744561980601],3,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useRef } from \"https://esm.sh/react@18.2.0\";\nimport { CONTAINER_WIDTH, CONTAINER_HEIGHT } from \"./LogoGenerator.tsx\";\n\nexport const LogoPreview = ({ \n bgColor, \n fontFamily, \n textColor,\n accentColor, \n topWord, \n bottomWord, \n topFontSize, \n bottomFontSize,\n cornerRadius,\n calculatedWidth,\n secondaryColor,\n singleLineMode,\n topY,\n bottomY\n}) => {\n const svgRef = useRef(null);\n \n return (\n

Logo Preview

\n \n

\n {singleLineMode ? (\n `Font size: ${topFontSize}px`\n ) : (\n `Font sizes: Top ${topFontSize}px, Bottom ${bottomFontSize}px, Ratio: ${(bottomFontSize / topFontSize).toFixed(2)}`\n )}\n

\n );\n};\n\nexport default LogoPreview;",[],[216],{"_107":224,"_99":225,"_153":226,"_155":-5,"_156":140,"_157":227,"_159":121,"_109":228,"_104":94,"_161":176,"_163":229,"_165":27,"_166":-5,"_167":230,"_102":231},"27cbdf28-180f-11f0-b0ab-569c3dd06744","SvgHostClient.tsx","c0e9d1f1-57b7-4e9c-b3ac-1e4e7e13bc83",13,["D",1744511381965],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\n// Function to upload SVG to the same SVG host service used by OpenMoji\nexport const uploadSvgToHost = async (svgString, title = \"Logo\") => {\n try {\n // Use the same API endpoint as the OpenMoji generator\n const apiUrl = \"https://svgur.com/i.json\";\n \n // Create a form data object to match the API requirements\n const formData = new FormData();\n formData.append('source', svgString);\n formData.append('title', title);\n \n // Make the API request\n const response = await fetch(apiUrl, {\n method: 'POST',\n body: formData,\n });\n \n if (!response.ok) {\n throw new Error(`API responded with status: ${response.status}`);\n }\n \n // Parse the response\n const data = await response.json();\n \n // Check if the upload was successful\n if (data && data.links && data.links.viewer) {\n return {\n success: true,\n url: data.links.viewer, // Direct link to view the SVG\n deleteUrl: data.links.delete, // URL to delete the image if needed\n title: title\n };\n } else {\n throw new Error('API response missing expected data');\n }\n \n } catch (error) {\n console.error(\"Error uploading SVG:\", error);\n \n // Fallback to data URL if API fails\n try {\n const svgBase64 = btoa(unescape(encodeURIComponent(svgString)));\n const dataUrl = `data:image/svg+xml;base64,${svgBase64}`;\n \n return {\n success: true,\n url: dataUrl,\n title: title,\n isDataUrl: true // Flag to indicate this is a fallback\n };\n } catch (fallbackError) {\n return {\n success: false,\n error: `API Error: ${error.message}. Fallback also failed: ${fallbackError.message}`\n };\n }\n }\n};\n\nexport default {\n uploadSvgToHost\n};",[],[225],{"_107":233,"_99":234,"_153":235,"_155":-5,"_156":140,"_157":236,"_159":121,"_109":237,"_104":94,"_161":238,"_163":239,"_165":27,"_166":-5,"_167":240,"_102":241},"52a82aba-1811-11f0-897e-569c3dd06744","api.tsx","052cd264-1810-11f0-abe4-569c3dd06744",19,["D",1744512312850],"http","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { fontOptions } from \"./FontData.tsx\";\nimport { colorPalettes } from \"./ColorUtils.tsx\";\nimport { \n calculateLogoTextParameters,\n generateLogoSVG,\n svgToDataURL\n} from \"./LogoGenerator.tsx\";\n\n/**\n * API for generating SVG logos with one or two lines of text\n * GET Parameters:\n * - topWord: Top text or single line text (required)\n * - bottomWord: Bottom text (only used in two-line mode)\n * - fontFamily: Font family name from FontData.tsx\n * - backgroundColor: Background color in hex (#RRGGBB)\n * - textColor: Text color for top text in hex (#RRGGBB)\n * - accentColor: Color for bottom text in hex (#RRGGBB)\n * - secondaryColor: Color for bottom strip in hex (#RRGGBB)\n * - singleLine: \"true\" for single line mode, any other value for two-line mode\n */\nexport default async function api(request: Request): Promise {\n // Extract URL parameters\n const url = new URL(request.url);\n const params = url.searchParams;\n \n // Get required parameters\n const topWord = params.get(\"topWord\")?.toUpperCase() || \"LOGO\";\n \n // Get optional parameters\n const bottomWord = params.get(\"bottomWord\")?.toUpperCase() || \"TESTER\";\n const singleLine = params.get(\"singleLine\") === \"true\";\n \n // Font family (default to Arial if not valid)\n let fontFamily = \"Arial, sans-serif\";\n const fontName = params.get(\"fontFamily\");\n if (fontName) {\n const fontOption = fontOptions.find(f => f.name.toLowerCase() === fontName.toLowerCase());\n if (fontOption) {\n fontFamily = fontOption.value;\n }\n }\n \n // Colors (use defaults if not provided or invalid)\n const backgroundColor = isValidHexColor(params.get(\"backgroundColor\")) \n ? params.get(\"backgroundColor\") \n : \"#3B82F6\";\n \n const textColor = isValidHexColor(params.get(\"textColor\"))\n ? params.get(\"textColor\")\n : \"#FFFFFF\";\n \n const accentColor = isValidHexColor(params.get(\"accentColor\"))\n ? params.get(\"accentColor\")\n : \"#EA5A47\";\n \n const secondaryColor = isValidHexColor(params.get(\"secondaryColor\"))\n ? params.get(\"secondaryColor\")\n : \"#781E32\";\n \n // Calculate text parameters using the shared logic\n const { topFontSize, bottomFontSize, topY, bottomY } = calculateLogoTextParameters(\n topWord,\n bottomWord,\n fontFamily,\n singleLine,\n null // No SVG ref on server\n );\n \n // Generate SVG content using the shared function\n const svgContent = generateLogoSVG(\n topWord,\n bottomWord,\n fontFamily,\n backgroundColor,\n textColor,\n accentColor,\n secondaryColor,\n topFontSize,\n bottomFontSize,\n topY,\n bottomY,\n singleLine\n );\n \n // Convert to data URL if requested\n const format = params.get(\"format\")?.toLowerCase();\n \n if (format === \"dataurl\") {\n // Get data URL from shared function\n const dataUrl = svgToDataURL(svgContent);\n \n return new Response(JSON.stringify({ \n success: true, \n dataUrl,\n metadata: {\n topFontSize,\n bottomFontSize,\n topY,\n bottomY,\n singleLine\n }\n }), {\n headers: {\n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\"\n }\n });\n } else {\n // Return SVG directly\n return new Response(svgContent, {\n headers: {\n \"Content-Type\": \"image/svg+xml\",\n \"Access-Control-Allow-Origin\": \"*\"\n }\n });\n }\n}\n\n/**\n * Validate if a string is a valid hex color\n */\nfunction isValidHexColor(color: string | null): boolean {\n if (!color) return false;\n return /^#([0-9A-F]{3}){1,2}$/i.test(color);\n}",[],[234],{"_107":243,"_99":244,"_153":119,"_155":-5,"_156":140,"_157":123,"_159":121,"_109":245,"_104":246,"_161":238,"_163":247,"_165":27,"_166":-5,"_167":248,"_102":249},"ec2c551c-1884-11f0-8907-569c3dd06744","index.tsx",["D",1744561962544],5,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { ColorPicker } from \"./ColorPicker.tsx\";\nimport { LogoPreview } from \"./LogoPreview.tsx\";\nimport { fontOptions } from \"./FontData.tsx\";\nimport { colorPalettes } from \"./ColorUtils.tsx\";\nimport { uploadSvgToHost } from \"./SvgHostClient.tsx\";\nimport { \n calculateLogoTextParameters,\n generateLogoSVG,\n svgToDataURL,\n CORNER_RADIUS\n} from \"./LogoGenerator.tsx\";\n\nconst TwoLineLogoGenerator = () => {\n const [topWord, setTopWord] = useState('LOGO');\n const [bottomWord, setBottomWord] = useState('TESTER');\n const [textColor, setTextColor] = useState(\"#ffffff\");\n const [accentColor, setAccentColor] = useState(\"#EA5A47\");\n const [bgColor, setBgColor] = useState(\"#3B82F6\");\n const [secondaryColor, setSecondaryColor] = useState(\"#781E32\");\n const [fontFamily, setFontFamily] = useState(\"Arial, sans-serif\");\n const [topFontSize, setTopFontSize] = useState(60);\n const [bottomFontSize, setBottomFontSize] = useState(40);\n const [calculatedWidth, setCalculatedWidth] = useState(0);\n const [cornerRadius, setCornerRadius] = useState(CORNER_RADIUS);\n const [svgString, setSvgString] = useState(\"\");\n const [saveSuccess, setSaveSuccess] = useState(null);\n const [savedSvgUrl, setSavedSvgUrl] = useState(\"\");\n const [deleteUrl, setDeleteUrl] = useState(\"\");\n const [savingToHost, setSavingToHost] = useState(false);\n const [singleLineMode, setSingleLineMode] = useState(false);\n const [saveMessage, setSaveMessage] = useState(\"\");\n const [topY, setTopY] = useState(45);\n const [bottomY, setBottomY] = useState(90);\n \n const svgRef = useRef(null);\n const textAreaRef = useRef(null);\n \n // Calculate font sizes and positions using the shared logic\n useEffect(() => {\n try {\n const result = calculateLogoTextParameters(\n topWord,\n bottomWord,\n fontFamily,\n singleLineMode,\n svgRef\n );\n \n setTopFontSize(result.topFontSize);\n setBottomFontSize(result.bottomFontSize);\n setTopY(result.topY);\n setBottomY(result.bottomY);\n setCalculatedWidth(result.calculatedWidth);\n } catch (error) {\n console.error(\"Error calculating text parameters:\", error);\n }\n }, [topWord, bottomWord, fontFamily, singleLineMode]);\n\n // Generate SVG using the shared function\n const generateSVG = () => {\n const svgContent = generateLogoSVG(\n topWord,\n bottomWord,\n fontFamily,\n bgColor,\n textColor,\n accentColor,\n secondaryColor,\n topFontSize,\n bottomFontSize,\n topY,\n bottomY,\n singleLineMode\n );\n\n setSvgString(svgContent);\n \n // Reset save status when generating new SVG\n setSaveSuccess(null);\n setSavedSvgUrl(\"\");\n setDeleteUrl(\"\");\n setSaveMessage(\"\");\n };\n\n const copyToClipboard = () => {\n if (textAreaRef.current) {\n textAreaRef.current.select();\n document.execCommand(\"copy\");\n }\n };\n\n const saveToSvgHost = async () => {\n // Make sure we have SVG content\n if (!svgString) {\n generateSVG();\n }\n \n setSavingToHost(true);\n setSaveMessage(\"Uploading to SVG host...\");\n \n try {\n // Generate name for the logo\n const name = singleLineMode \n ? `${topWord} Logo` \n : `${topWord} ${bottomWord} Logo`;\n \n // Upload to svgHost\n const result = await uploadSvgToHost(svgString, name);\n \n if (result.success) {\n setSaveSuccess(true);\n setSavedSvgUrl(result.url);\n \n // Store delete URL if available\n if (result.deleteUrl) {\n setDeleteUrl(result.deleteUrl);\n }\n \n // Set appropriate message\n if (result.isDataUrl) {\n setSaveMessage(\"Created data URL (couldn't connect to external SVG host)\");\n } else {\n setSaveMessage(\"SVG uploaded successfully to svgur.com\");\n }\n } else {\n setSaveSuccess(false);\n setSaveMessage(`Error: ${result.error || \"Failed to save to SVG Host\"}`);\n }\n } catch (err) {\n setSaveSuccess(false);\n setSaveMessage(`Error: ${err.message}`);\n } finally {\n setSavingToHost(false);\n }\n };\n\n const copySvgUrl = () => {\n if (savedSvgUrl) {\n navigator.clipboard.writeText(savedSvgUrl)\n .catch(err => {\n console.error(\"Failed to copy URL to clipboard\", err);\n });\n }\n };\n\n return (\n

\n {/* Hidden SVG for text measurements */}\n \n \n \n\n

Customize Logo

\n\n

\n setSingleLineMode(!singleLineMode)}\n className=\"mr-2 h-4 w-4\"\n />\n \n Single Line Mode\n \n

\n\n

\n \n {singleLineMode ? \"Text\" : \"Top Word\"}\n \n setTopWord(e.target.value.toUpperCase())}\n className=\"border border-gray-300 rounded p-2\"\n maxLength={20} // Increased character limit\n />\n

\n \n {!singleLineMode && (\n

\n Bottom Word\n setBottomWord(e.target.value.toUpperCase())}\n className=\"border border-gray-300 rounded p-2\"\n maxLength={20} // Increased character limit\n />\n

\n )}\n

\n \n

\n Font\n setFontFamily(e.target.value)}\n className=\"border border-gray-300 rounded p-2\"\n style={{ fontFamily: fontFamily }}\n >\n {fontOptions.map((font) => (\n \n ))}\n \n

\n Corner Radius\n

\n setCornerRadius(parseInt(e.target.value, 10))}\n className=\"flex-grow\"\n />\n

\n setCornerRadius(parseInt(e.target.value, 10))}\n className=\"w-12 px-1 py-1 border border-gray-300 rounded text-center\"\n />\n

\n \n

\n \n \n \n \n {!singleLineMode && (\n \n )}\n \n \n

\n\n

Export Logo

\n \n Generate SVG\n \n \n \n {savingToHost ? \"Saving...\" : \"Save as SVG\"}\n \n

\n \n {/* Save status */}\n {saveSuccess !== null && (\n

\n {saveSuccess ? (\n <>\n

{saveMessage}

\n {savedSvgUrl && (\n

Your SVG is available at:

\n e.target.select()}\n className=\"flex-1 p-1 text-sm border border-gray-300 rounded\"\n />\n \n Copy\n \n

\n \n View in browser\n \n {deleteUrl && (\n \n Delete SVG\n \n )}\n

\n )}\n \n ) : (\n

{saveMessage}

\n )}\n

\n )}\n \n {svgString && (\n

\n \n \n Copy to Clipboard\n \n

\n )}\n

\n \n

Logo Metrics

Font sizes adjusted for optimal fit:

Text size: {topFontSize}px
Top word: {topFontSize}px
Bottom word: {bottomFontSize}px
Font size ratio: {(bottomFontSize / topFontSize).toFixed(2)}
Width: {Math.round(calculatedWidth)}px
\n \n Get this logo via API\n \n

\n );\n};\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n \n \n \n Two-Line Logo Generator\n \n \n \n \n \n

\n \n \n

\n View source\n

\n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n body {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n line-height: 1.5;\n padding: 20px;\n background-color: #f5f7fa;\n }\n \n .text-xs {\n font-size: 0.75rem;\n }\n \n .text-sm {\n font-size: 0.875rem;\n }\n \n .text-lg {\n font-size: 1.125rem;\n }\n \n .font-medium {\n font-weight: 500;\n }\n \n .font-bold {\n font-weight: 700;\n }\n \n input[type=\"range\"] {\n width: 100%;\n height: 8px;\n -webkit-appearance: none;\n background: #e2e8f0;\n border-radius: 4px;\n outline: none;\n }\n \n input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n background: #3b82f6;\n border-radius: 50%;\n cursor: pointer;\n }\n \n .project-logo text {\n dominant-baseline: middle;\n }\n`;",[],[244],"files",[150,170,180,188,197,205,214,223,232,242],"counts",{"_254":33,"_255":219,"_256":33,"_257":33},"pulls","branches","forks","envVars","contents",[],{"_107":181,"_99":103,"_153":182,"_155":-5,"_156":140,"_157":183,"_159":121,"_109":261,"_104":94,"_161":176,"_163":185,"_165":27,"_166":-5,"_102":262},["D",1744510534783],[103],"upstream",{"_107":265,"_99":266,"_115":267,"_116":-5,"_113":114,"_21":268},"93395986-0ea3-11f0-bd9c-569c3dd06744","logoWorkshopOpenMoji","Project created from val URLs",{"_97":98,"_135":136},"screenshots",{"_271":272,"_273":274},"thumbnail","https://screenshots.valtown.net/screenshot.png?width=1024&height=768&version=20&url=https%3A%2F%2Fdcm31--33276b6c2d8a402190531092e60809f3.web.val.run","preview","https://screenshots.valtown.net/screenshot.png?width=1920&height=1080&version=20&url=https%3A%2F%2Fdcm31--33276b6c2d8a402190531092e60809f3.web.val.run","emptyEnvVars","isNew","routes/_app.x.$handle.$name.code.$",{"_97":98,"_99":100,"_101":43,"_104":-7,"_102":103,"_105":279,"_148":283,"_250":314,"_162":315,"_258":317,"_263":318,"_326":121,"_327":-5},{"_107":108,"_99":100,"_109":280,"_111":-5,"_112":27,"_113":114,"_115":-5,"_116":-5,"_12":117,"_118":119,"_120":121,"_122":123,"_124":33,"_125":126,"_127":126,"_128":129,"_130":129,"_131":129,"_132":126,"_133":27,"_21":281,"_137":282},["D",1744509707723],{"_97":98,"_135":136},{"_104":139,"_99":43,"_107":140,"_141":108,"_142":143,"_144":145,"_146":114,"_147":117},[284,287,290,293,296,299,302,305,308,311],{"_107":151,"_99":152,"_153":154,"_155":-5,"_156":140,"_157":158,"_159":121,"_109":160,"_104":33,"_161":162,"_163":164,"_165":27,"_166":-5,"_167":285,"_102":286},[],[152],{"_107":171,"_99":172,"_153":173,"_155":-5,"_156":140,"_157":174,"_159":121,"_109":175,"_104":94,"_161":176,"_163":177,"_165":27,"_166":-5,"_167":288,"_102":289},[],[172],{"_107":181,"_99":103,"_153":182,"_155":-5,"_156":140,"_157":183,"_159":121,"_109":184,"_104":94,"_161":176,"_163":185,"_165":27,"_166":-5,"_167":291,"_102":292},[],[103],{"_107":189,"_99":190,"_153":191,"_155":-5,"_156":140,"_157":192,"_159":121,"_109":193,"_104":33,"_161":176,"_163":194,"_165":27,"_166":-5,"_167":294,"_102":295},[],[190],{"_107":198,"_99":199,"_153":200,"_155":-5,"_156":140,"_157":94,"_159":121,"_109":201,"_104":192,"_161":176,"_163":202,"_165":27,"_166":-5,"_167":297,"_102":298},[],[199],{"_107":206,"_99":207,"_153":208,"_155":-5,"_156":140,"_157":209,"_159":121,"_109":210,"_104":33,"_161":176,"_163":211,"_165":27,"_166":-5,"_167":300,"_102":301},[],[207],{"_107":215,"_99":216,"_153":217,"_155":-5,"_156":140,"_157":139,"_159":121,"_109":218,"_104":219,"_161":176,"_163":220,"_165":27,"_166":-5,"_167":303,"_102":304},[],[216],{"_107":224,"_99":225,"_153":226,"_155":-5,"_156":140,"_157":227,"_159":121,"_109":228,"_104":94,"_161":176,"_163":229,"_165":27,"_166":-5,"_167":306,"_102":307},[],[225],{"_107":233,"_99":234,"_153":235,"_155":-5,"_156":140,"_157":236,"_159":121,"_109":237,"_104":94,"_161":238,"_163":239,"_165":27,"_166":-5,"_167":309,"_102":310},[],[234],{"_107":243,"_99":244,"_153":119,"_155":-5,"_156":140,"_157":123,"_159":121,"_109":245,"_104":246,"_161":238,"_163":247,"_165":27,"_166":-5,"_167":312,"_102":313},[],[244],[284,287,290,293,296,299,302,305,308,311],{"_107":181,"_99":103,"_153":182,"_155":-5,"_156":140,"_157":183,"_159":121,"_109":261,"_104":94,"_161":176,"_163":185,"_165":27,"_166":-5,"_102":316},[103],[],{"_107":143,"_109":319,"_320":321,"_99":43,"_141":265,"_104":227,"_142":-5,"_144":-5,"_322":323,"_133":27,"_113":114,"_324":98,"_325":266},["D",1743475616093],"updatedAt",["D",1744851995505],"lockfileKey","1744852004848-esm.town_v_dcm31_logoWorkshopOpenMoji@13-main","userHandle","projectName","showCompareCallout","pull","routes/_app","actionData","errors"]