Add ability to change the branding
This commit is contained in:
parent
81741dcc76
commit
560747106b
28 changed files with 275 additions and 201 deletions
|
@ -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,
|
||||
|
|
|
@ -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'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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'"],
|
||||
|
|
|
@ -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'
|
||||
}
|
||||
|
|
|
@ -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 don’t stay online forever.',
|
||||
baseUrl,
|
||||
ui: {},
|
||||
ui: {
|
||||
colors: {
|
||||
primary: config.ui_color_primary,
|
||||
accent: config.ui_color_accent
|
||||
},
|
||||
assets: uiAssets
|
||||
},
|
||||
storage: {
|
||||
files: []
|
||||
},
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue