const DEFAULT_FRONTEND_MODULE = "https://esm.town/v/dglazkov/bbrunfe";
export type FrontendOptions = {
frontend?: false | string;
style?: {
bg?: string;
fontFamily?: string;
colorPrimary?: string;
colorPrimaryBg?: string;
colorError?: string;
};
};
const renderFrontend = (board: string, options?: FrontendOptions) => {
if (options && options.frontend === false) {
return new Response("Method not allowed", { status: 405 });
}
const chatAppModule = (options && options.frontend)
|| DEFAULT_FRONTEND_MODULE;
const bg = options?.style?.bg || "#f0f0f0";
const fontFamily = options?.style?.fontFamily
|| "Helvetica Neue, Helvetica, Arial, sans-serif";
const colorPrimary = options?.style?.colorPrimary || "#3498db";
const colorPrimaryBg = options?.style?.colorPrimaryBg || "#fff";
const colorError = options?.style?.colorError || "#fff0f0";
const page = `<!doctype html><head>
<meta charset="utf-8">
<link rel="board" href="${board}">
<meta name="viewport" content="width=device-width">
<style>
:root {
--ca-color-bg: ${bg};
--ca-font-family: ${fontFamily};
--ca-color-primary: ${colorPrimary};
--ca-color-primary-bg: ${colorPrimaryBg};
--ca-color-error: ${colorError};
}
body, html {
height: 100%;
margin: 0;
font-family: var(--ca-font-family);
background-color: var(--ca-color-bg);
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
body {
padding: 2rem;
width: 100%;
}
</style>
<script type="module" src="${chatAppModule}"></script>
</head>
<body>
<chat-app></chat-app>
</body>`;
return new Response(page, {
headers: {
"Content-Type": "text/html",
},
});
};