LogoWorkshop OpenMoji SDK Demo

\n This demo showcases the LogoWorkshopOpenMoji SDK capabilities.\n Generate logos programmatically with just a few parameters.\n

\n \n {/* Logo preview */}\n

\n {logoSvg ? (\n

\n ) : (\n

Generate a logo to see it here

\n )}\n

\n \n {/* Basic inputs */}\n

\n \n Logo Text\n \n setWords(e.target.value)}\n placeholder=\"Enter logo text (e.g. 'Logo Generator')\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm\"\n />\n

\n \n

\n \n Emoji (OpenMoji will be used)\n \n

\n setEmoji(e.target.value)}\n placeholder=\"Enter emoji (e.g. 🚀)\"\n className=\"flex-grow px-3 py-2 border border-gray-300 rounded-md shadow-sm\"\n maxLength={2}\n />\n setShowEmojiPicker(!showEmojiPicker)}\n className=\"px-3 py-2 bg-gray-200 hover:bg-gray-300 rounded-md\"\n title=\"Show emoji picker\"\n >\n 😊\n \n \n 🎲\n \n

\n \n {showEmojiPicker && (\n \n

\n )}\n

\n \n {/* Toggle advanced mode */}\n

\n setAdvancedMode(!advancedMode)}\n className=\"text-blue-600 hover:text-blue-800 text-sm font-medium\"\n >\n {advancedMode ? \"Hide Advanced Options\" : \"Show Advanced Options\"}\n \n

\n \n {/* Advanced options */}\n {advancedMode && (\n

Advanced Options

\n \n Layout Mode\n \n {\n const value = e.target.value;\n if (value === \"auto\") setSingleLine(undefined);\n else if (value === \"singleLine\") setSingleLine(true);\n else setSingleLine(false);\n }}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm\"\n >\n \n \n \n \n

\n \n

\n \n Font Family\n \n setFontFamily(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm\"\n >\n {fontOptions.map((font) => (\n \n ))}\n \n

\n \n

\n \n Debug Mode\n \n

\n setDebug(e.target.checked)}\n className=\"h-4 w-4 text-blue-600 border-gray-300 rounded\"\n />\n \n Show guide lines\n \n

\n \n

\n \n Text Color\n \n setTextColor(e.target.value)}\n className=\"w-full h-10 border border-gray-300 rounded-md shadow-sm\"\n />\n

\n \n

\n \n Accent Color\n \n setAccentColor(e.target.value)}\n className=\"w-full h-10 border border-gray-300 rounded-md shadow-sm\"\n />\n

\n \n

\n \n Secondary Color\n \n setSecondaryColor(e.target.value)}\n className=\"w-full h-10 border border-gray-300 rounded-md shadow-sm\"\n />\n

\n \n

\n \n Background Color\n \n setBgColor(e.target.value)}\n className=\"w-full h-10 border border-gray-300 rounded-md shadow-sm\"\n />\n

\n \n

\n \n Top Line Style\n \n

\n setBoldTop(e.target.checked)}\n className=\"h-4 w-4 text-blue-600 border-gray-300 rounded\"\n />\n \n Bold\n \n

\n setItalicTop(e.target.checked)}\n className=\"h-4 w-4 text-blue-600 border-gray-300 rounded\"\n />\n \n Italic\n \n

\n \n

\n \n Bottom Line Style\n \n

\n setBoldBottom(e.target.checked)}\n className=\"h-4 w-4 text-blue-600 border-gray-300 rounded\"\n />\n \n Bold\n \n

\n setItalicBottom(e.target.checked)}\n className=\"h-4 w-4 text-blue-600 border-gray-300 rounded\"\n />\n \n Italic\n \n

\n )}\n \n {/* Generate button */}\n

\n \n {isGenerating ? \"Generating...\" : \"Generate Logo\"}\n \n \n \n {savingToHost ? \"Saving...\" : \"Save to SVG Host\"}\n \n

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

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

SVG saved successfully!

\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

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

Error: Failed to save SVG to host

\n )}\n

\n \n {/* Code examples */}\n {logoSvg && (\n

Integration Examples

\n \n

API Usage

\n copyCode(apiCode)}\n className=\"px-3 py-1 bg-gray-200 hover:bg-gray-300 text-gray-800 text-sm rounded\"\n >\n Copy\n \n

\n              {apiCode}\n

\n \n

SDK Usage

\n copyCode(sdkCode)}\n className=\"px-3 py-1 bg-gray-200 hover:bg-gray-300 text-gray-800 text-sm rounded\"\n >\n Copy\n \n

\n              {sdkCode}\n

\n \n {/* SVG Output */}\n

SVG Output

\n \n Copy\n \n

\n \n

\n )}\n \n {/* Metadata display */}\n {logoMeta && (\n

Logo Metadata

\n            {JSON.stringify(logoMeta, null, 2)}\n

\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 LogoWorkshop OpenMoji SDK Demo\n \n \n \n \n \n

\n \n \n

\n View source\n

\n Emoji graphics provided by OpenMoji – the open-source emoji and icon project. License: CC BY-SA 4.0\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 }\n \n /* Custom styles for emoji-mart */\n .emoji-picker-container {\n z-index: 100;\n width: 100%;\n max-height: 400px;\n overflow-y: auto;\n }\n\n /* Responsive text display */\n .project-logo text {\n dominant-baseline: middle;\n }\n\n /* Responsive layout */\n @media (max-width: 640px) {\n body {\n padding: 10px;\n }\n \n .emoji-picker-container {\n max-width: 100%;\n overflow-x: auto;\n }\n }\n \n /* Code syntax highlighting */\n pre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n white-space: pre-wrap;\n word-break: break-word;\n }\n \n /* Logo container */\n .logo-preview {\n max-width: 100%;\n overflow-x: auto;\n }\n`;\n","deleted","label",[98],"permalink","https://www.val.town/x/dcm31/logoWorkshopOpenMoji/code/index.new.tsx","extension","actionData","errors"]