Update bface UI and security work
This commit is contained in:
+25
-3
@@ -81,8 +81,10 @@ export const CONFIG_KEYS = {
|
||||
APP_NAME: 'APP_NAME',
|
||||
APP_DISPLAY_NAME: 'APP_DISPLAY_NAME',
|
||||
APP_DESCRIPTION: 'APP_DESCRIPTION',
|
||||
FAVICON: 'FAVICON',
|
||||
BRAND_LOGO: 'BRAND_LOGO',
|
||||
THEME_COLOR: 'THEME_COLOR',
|
||||
BACKGROUND_COLOR: 'BACKGROUND_COLOR',
|
||||
UI_SHELL: 'UI_SHELL',
|
||||
INITIAL_ROUTE: 'INITIAL_ROUTE',
|
||||
STORAGE_BACKEND: 'STORAGE_BACKEND',
|
||||
@@ -150,8 +152,10 @@ export function initEnv(appConfig) {
|
||||
APP_NAME: appConfig.id || appConfig.name,
|
||||
APP_DISPLAY_NAME: appConfig.displayName || appConfig.short_name || appConfig.name,
|
||||
APP_DESCRIPTION: appConfig.description || '',
|
||||
FAVICON: appConfig.favicon || appConfig.brand_logo || appConfig.brandLogo || appConfig.icons?.[0]?.src || '/favicon.svg',
|
||||
BRAND_LOGO: appConfig.brand_logo || appConfig.brandLogo || appConfig.icons?.[0]?.src || '/favicon.svg',
|
||||
THEME_COLOR: appConfig.theme_color || appConfig.themeColor || '#000000',
|
||||
BACKGROUND_COLOR: appConfig.background_color || appConfig.backgroundColor || '#ffffff',
|
||||
UI_SHELL: appConfig.ui_shell || appConfig.uiShell || 'EmptyShell',
|
||||
INITIAL_ROUTE: appConfig.initial_route || appConfig.initialRoute || appConfig.ui?.initial_route || appConfig.ui?.initialRoute || '/home',
|
||||
STORAGE_BACKEND: appConfig.storage?.backend || 'localStorage',
|
||||
@@ -318,6 +322,18 @@ function setMetaTag(name, content) {
|
||||
element.setAttribute('content', content);
|
||||
}
|
||||
|
||||
export function setDocumentBackground(color) {
|
||||
if (typeof document === 'undefined' || !color) {
|
||||
return;
|
||||
}
|
||||
|
||||
document.documentElement.style.backgroundColor = color;
|
||||
|
||||
if (document.body) {
|
||||
document.body.style.backgroundColor = color;
|
||||
}
|
||||
}
|
||||
|
||||
function setFavicon(href) {
|
||||
if (typeof document === 'undefined' || !href) {
|
||||
return;
|
||||
@@ -344,25 +360,31 @@ export async function syncDocumentHeadFromConfig(options = {}) {
|
||||
const {
|
||||
titleFallback = 'PWA Template',
|
||||
descriptionFallback = '',
|
||||
themeColorFallback = '#000000'
|
||||
themeColorFallback = '#000000',
|
||||
backgroundColorFallback = '#ffffff'
|
||||
} = options;
|
||||
|
||||
const [title, description, themeColor, brandLogo] = await Promise.all([
|
||||
const [favicon, title, description, themeColor, backgroundColor, brandLogo] = await Promise.all([
|
||||
getConfig(CONFIG_KEYS.FAVICON, '/favicon.svg'),
|
||||
getConfig(CONFIG_KEYS.APP_DISPLAY_NAME, titleFallback),
|
||||
getConfig(CONFIG_KEYS.APP_DESCRIPTION, descriptionFallback),
|
||||
getConfig(CONFIG_KEYS.THEME_COLOR, themeColorFallback),
|
||||
getConfig(CONFIG_KEYS.BACKGROUND_COLOR, backgroundColorFallback),
|
||||
getConfig(CONFIG_KEYS.BRAND_LOGO, '/favicon.svg')
|
||||
]);
|
||||
|
||||
document.title = title || titleFallback;
|
||||
setMetaTag('description', description || descriptionFallback);
|
||||
setMetaTag('theme-color', themeColor || themeColorFallback);
|
||||
setFavicon(brandLogo || '/favicon.svg');
|
||||
setDocumentBackground(backgroundColor || backgroundColorFallback);
|
||||
setFavicon(favicon || '/favicon.svg');
|
||||
|
||||
return {
|
||||
title: title || titleFallback,
|
||||
description: description || descriptionFallback,
|
||||
themeColor: themeColor || themeColorFallback,
|
||||
backgroundColor: backgroundColor || backgroundColorFallback,
|
||||
favicon: favicon || '/favicon.svg',
|
||||
brandLogo: brandLogo || '/favicon.svg'
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user