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