Add ability to change the branding

This commit is contained in:
Marian Hähnlein 2022-04-12 15:58:58 +02:00
parent 81741dcc76
commit 560747106b
No known key found for this signature in database
GPG key ID: B43047632CA1D3D6
28 changed files with 275 additions and 201 deletions

View file

@ -12,7 +12,12 @@ module.exports = {
FOOTER_DONATE_URL: config.footer_donate_url,
FOOTER_CLI_URL: config.footer_cli_url,
FOOTER_DMCA_URL: config.footer_dmca_url,
FOOTER_SOURCE_URL: config.footer_source_url
FOOTER_SOURCE_URL: config.footer_source_url,
COLORS: {
PRIMARY: config.ui_color_primary,
ACCENT: config.ui_color_accent
},
CUSTOM_ASSETS: config.ui_custom_assets
},
DEFAULTS: {
DOWNLOADS: config.default_downloads,

View file

@ -242,6 +242,68 @@ const conf = convict({
format: String,
default: 'https://github.com/timvisee/send',
env: 'SEND_FOOTER_SOURCE_URL'
},
ui_color_primary: {
format: String,
default: '#0a84ff',
env: 'UI_COLOR_PRIMARY'
},
ui_color_accent: {
format: String,
default: '#003eaa',
env: 'UI_COLOR_ACCENT'
},
ui_custom_assets: {
android_chrome_192px: {
format: String,
default: '',
env: 'UI_CUSTOM_ASSETS_ANDROID_CHROME_192PX'
},
android_chrome_512px: {
format: String,
default: '',
env: 'UI_CUSTOM_ASSETS_ANDROID_CHROME_512PX'
},
apple_touch_icon: {
format: String,
default: '',
env: 'UI_CUSTOM_ASSETS_APPLE_TOUCH_ICON'
},
favicon_16px: {
format: String,
default: '',
env: 'UI_CUSTOM_ASSETS_FAVICON_16PX'
},
favicon_32px: {
format: String,
default: '',
env: 'UI_CUSTOM_ASSETS_FAVICON_32PX'
},
icon: {
format: String,
default: '',
env: 'UI_CUSTOM_ASSETS_ICON'
},
safari_pinned_tab: {
format: String,
default: '',
env: 'UI_CUSTOM_ASSETS_SAFARI_PINNED_TAB'
},
facebook: {
format: String,
default: '',
env: 'UI_CUSTOM_ASSETS_FACEBOOK'
},
twitter: {
format: String,
default: '',
env: 'UI_CUSTOM_ASSETS_TWITTER'
},
wordmark: {
format: String,
default: '',
env: 'UI_CUSTOM_ASSETS_WORDMARK'
}
}
});

View file

@ -21,20 +21,20 @@ module.exports = function(state, body = '') {
<meta property="og:description" content="${state.description}" />
<meta name="twitter:description" content="${state.description}" />
<meta name="twitter:card" content="summary" />
<meta
property="og:image"
content="${state.baseUrl}/${assets.get('send-fb.jpg')}"
/>
<meta
name="twitter:image"
content="${state.baseUrl}/${assets.get('send-twitter.jpg')}"
/>
<meta property="og:image" content="${state.ui.assets.facebook}" />
<meta name="twitter:image" content="${state.ui.assets.twitter}" />
<meta property="og:url" content="${state.baseUrl}" />
<meta name="theme-color" content="#220033" />
<meta name="msapplication-TileColor" content="#220033" />
<link rel="manifest" href="/app.webmanifest" />
<link rel="stylesheet" type="text/css" href="/inter.css" />
<style nonce=${state.cspNonce}>
:root {
--color-primary: ${state.ui.colors.primary};
--color-primary-accent: ${state.ui.colors.accent};
}
</style>
<link
rel="stylesheet"
type="text/css"
@ -43,23 +43,23 @@ module.exports = function(state, body = '') {
<link
rel="apple-touch-icon"
sizes="180x180"
href="${assets.get('apple-touch-icon.png')}"
href="${state.ui.assets.apple_touch_icon}"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="${assets.get('favicon-32x32.png')}"
href="${state.ui.assets.favicon_32px}"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="${assets.get('favicon-16x16.png')}"
href="${state.ui.assets.favicon_16px}"
/>
<link
rel="mask-icon"
href="${assets.get('safari-pinned-tab.svg')}"
href="${state.ui.assets.safari_pinned_tab}"
color="#838383"
/>
<script defer src="${assets.get('app.js')}"></script>

View file

@ -50,6 +50,12 @@ module.exports = function(app) {
return `'nonce-${req.cspNonce}'`;
}
],
styleSrc: [
"'self'",
function(req) {
return `'nonce-${req.cspNonce}'`;
}
],
formAction: ["'none'"],
frameAncestors: ["'none'"],
objectSrc: ["'none'"],

View file

@ -1,18 +1,20 @@
const assets = require('../../common/assets');
const state = require('../state');
module.exports = async function(req, res) {
const appState = await state(req);
module.exports = function(req, res) {
const manifest = {
name: 'Send',
short_name: 'Send',
lang: req.language,
icons: [
{
src: assets.get('android-chrome-192x192.png'),
src: appState.ui.assets.android_chrome_192px,
type: 'image/png',
sizes: '192x192'
},
{
src: assets.get('android-chrome-512x512.png'),
src: appState.ui.assets.android_chrome_512px,
type: 'image/png',
sizes: '512x512'
}

View file

@ -24,6 +24,22 @@ module.exports = async function(req) {
prefs.surveyUrl = config.survey_url;
}
const baseUrl = config.deriveBaseUrl(req);
const uiAssets = {
android_chrome_192px: assets.get('android-chrome-192x192.png'),
android_chrome_512px: assets.get('android-chrome-512x512.png'),
apple_touch_icon: assets.get('apple-touch-icon.png'),
favicon_16px: assets.get('favicon-16x16.png'),
favicon_32px: assets.get('favicon-32x32.png'),
icon: assets.get('icon.svg'),
safari_pinned_tab: assets.get('safari-pinned-tab.svg'),
facebook: baseUrl + '/' + assets.get('send-fb.jpg'),
twitter: baseUrl + '/' + assets.get('send-twitter.jpg'),
wordmark: assets.get('wordmark.svg') + '#logo'
};
Object.keys(uiAssets).forEach(index => {
if (config.ui_custom_assets[index] !== '')
uiAssets[index] = config.ui_custom_assets[index];
});
return {
archive: {
numFiles: 0
@ -35,7 +51,13 @@ module.exports = async function(req) {
description:
'Encrypt and send files with a link that automatically expires to ensure your important documents dont stay online forever.',
baseUrl,
ui: {},
ui: {
colors: {
primary: config.ui_color_primary,
accent: config.ui_color_accent
},
assets: uiAssets
},
storage: {
files: []
},