adminjs
Version:
Admin panel for apps written in node.js
137 lines (135 loc) • 4.69 kB
JavaScript
/* eslint-disable @typescript-eslint/no-unused-vars */
import { combineStyles } from '@adminjs/design-system';
import createStore from './store/store.js';
import ViewHelpers from '../backend/utils/view-helpers/view-helpers.js';
import { initializeAssets, initializeBranding, initializeLocale } from './store/index.js';
import { getAssets, getBranding, getFaviconFromBranding, getLocales } from '../backend/utils/options-parser/options-parser.js';
import { defaultLocale } from '../locale/index.js';
const html = async (admin, attributes) => {
const h = new ViewHelpers({
options: admin.options
});
const store = createStore();
const branding = await getBranding(admin);
const assets = await getAssets(admin);
const faviconTag = getFaviconFromBranding(branding);
const locales = await getLocales(admin || defaultLocale);
const scripts = (assets && assets.scripts || []).map(s => `<script src="${s}"></script>`);
const styles = (assets && assets.styles || []).map(l => `<link rel="stylesheet" type="text/css" href="${l}">`);
store.dispatch(initializeBranding(branding));
store.dispatch(initializeAssets(assets));
store.dispatch(initializeLocale(locales));
const theme = combineStyles(branding.theme);
const reduxState = store.getState();
const {
locale
} = reduxState;
const stringifiedAttributes = JSON.stringify(attributes ?? {});
return `
<html lang=${locale.language}>
<head>
<script>
window.REDUX_STATE = ${JSON.stringify(reduxState)};
window.THEME = ${JSON.stringify(theme)};
window.AdminJS = { Components: {} };
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>${branding.companyName}</title>
${faviconTag}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<script src="${h.assetPath('global.bundle.js', assets)}"></script>
<script src="${h.assetPath('design-system.bundle.js', assets)}"></script>
<script src="${h.assetPath('app.bundle.js', assets)}"></script>
<script src="${h.assetPath('components.bundle.js', assets)}"></script>
<script>
try {
window.__APP_STATE__ = JSON.parse('${stringifiedAttributes}');
} catch (e) {
console.log(e)
window.__APP_STATE__ = {};
}
</script>
${styles.join('\n')}
<style>
/* http://meyerweb.com/eric/tools/css/reset/
v4.0 | 20180602
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
display: none;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html, body, #app {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
color: '#0C1E29';
}
#app {
isolation: isolate;
}
:root {
color-scheme: light;
}
</style>
</head>
<body>
<div id="app" />
<script>
var app = document.getElementById('app');
var root = createRoot(app);
const CustomLoginApplication = AdminJS.UserComponents && AdminJS.UserComponents.LoginApplication;
const LoginApplication = AdminJS.LoginApplication;
root.render(LoginApplication);
</script>
${scripts.join('\n')}
</body>
</html>
`;
};
export default html;