30 lines
2.3 KiB
TypeScript
30 lines
2.3 KiB
TypeScript
export const studioHelpScript = `(() => {
|
|
let failed = false;
|
|
function report() {
|
|
const state = document.getElementById("validation-state");
|
|
const diagnostics = document.getElementById("diagnostics");
|
|
if (state && state.textContent === "Checking") {
|
|
state.textContent = "Editor could not start";
|
|
if (diagnostics) diagnostics.textContent = "The editor script could not initialize. Reload the page after updating the server. Your saved draft has not been deleted.";
|
|
}
|
|
}
|
|
function fail() { failed = true; report(); }
|
|
window.addEventListener("error", fail, true);
|
|
window.addEventListener("unhandledrejection", fail);
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
if (failed) report();
|
|
const button = document.querySelector('[data-tab="guided"]');
|
|
if (button) button.click();
|
|
});
|
|
})();`;
|
|
|
|
export function addStudioGuide(html: string, configured: boolean) {
|
|
const guide = `<details open class="help"><summary><strong>How to use Design Studio</strong></summary><ol><li><strong>Describe your website.</strong> Open Guided design, enter your product and audience, then choose colors, shapes and spacing with Next.</li><li><strong>Generate and compare.</strong> Click Generate three directions. The first valid alternative appears in the large preview. Review another to compare, then choose Use reviewed proposal to save it. Show current draft returns without accepting.</li><li><strong>Refine it.</strong> Try “make buttons square and use blue as the primary color” under Edit with words. Lock decisions you want to keep.</li><li><strong>Use it in your app.</strong> Open Review & apply and export Theme config or Compiled CSS. This website previews and exports designs; it does not change your deployed app automatically.</li></ol><p>${configured ? "APIMart AI is enabled with gpt-6-luna. Generation sends your brief and current design to APIMart only when you request it." : "AI is not configured. Local presets and supported rule-based edits still work. Set APIMART_API_KEY in the server .env and restart to enable gpt-6-luna."}</p></details>`;
|
|
return html
|
|
.replace(
|
|
'<script type="module"',
|
|
'<script src="./site-help.js"></script><script type="module"',
|
|
)
|
|
.replace('<div id="diagnostics"', guide + '<div id="diagnostics"');
|
|
}
|