UNPKG

@dscodotco/theme-cli

Version:

A CLI tool for developing Shopify themes

github.com/dsco-co/theme-cli

dsco-co/theme-cli

5 lines (4 loc) • 3.27 kB
1
2
3
4
5
export declare const devUIHtml = "\n<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Theme Development</title>\n <link rel=\"stylesheet\" href=\"/dev-ui.css\">\n <script src=\"/dev-ui.js\" defer></script>\n</head>\n<body>\n <div id=\"dev-ui\">\n <div class=\"dev-ui-header\">\n <h1>Theme Development</h1>\n <div class=\"dev-ui-controls\">\n <button id=\"check-theme\">Check Theme</button>\n <button id=\"reload-page\">Reload Page</button>\n </div>\n </div>\n <div id=\"theme-check-results\"></div>\n </div>\n</body>\n</html>\n"; export declare const devUIStyles = "\n#dev-ui {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background: #fff;\n border-top: 1px solid #ddd;\n padding: 1rem;\n z-index: 9999;\n}\n\n.dev-ui-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1rem;\n}\n\n.dev-ui-controls {\n display: flex;\n gap: 0.5rem;\n}\n\nbutton {\n padding: 0.5rem 1rem;\n background: #008060;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\nbutton:hover {\n background: #006048;\n}\n\n#theme-check-results {\n max-height: 200px;\n overflow-y: auto;\n padding: 1rem;\n background: #f5f5f5;\n border-radius: 4px;\n}\n"; export declare const errorPageTemplate = "\n<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Error</title>\n <style>\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n margin: 0;\n padding: 2rem;\n background: #f5f5f5;\n }\n .error-container {\n max-width: 800px;\n margin: 0 auto;\n background: white;\n padding: 2rem;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n h1 {\n color: #d82c0d;\n margin-top: 0;\n }\n pre {\n background: #f5f5f5;\n padding: 1rem;\n border-radius: 4px;\n overflow-x: auto;\n }\n </style>\n</head>\n<body>\n <div class=\"error-container\">\n <h1>Error</h1>\n <p>{{message}}</p>\n {{#if stack}}\n <h2>Stack Trace</h2>\n <pre>{{stack}}</pre>\n {{/if}}\n </div>\n</body>\n</html>\n"; export declare const devUIScript = "\ndocument.addEventListener('DOMContentLoaded', () => {\n const checkThemeButton = document.getElementById('check-theme');\n const reloadButton = document.getElementById('reload-page');\n const resultsContainer = document.getElementById('theme-check-results');\n\n checkThemeButton?.addEventListener('click', async () => {\n try {\n const response = await fetch('/api/theme/check');\n const results = await response.json();\n resultsContainer.innerHTML = '<pre>' + JSON.stringify(results, null, 2) + '</pre>';\n } catch (error) {\n console.error('Error checking theme:', error);\n resultsContainer.innerHTML = '<p class=\"error\">Error checking theme</p>';\n }\n });\n\n reloadButton?.addEventListener('click', () => {\n window.location.reload();\n });\n});\n";