ami/tl-vikunja
1
0
Fork 0
Code

feat: allow custom logo via environment variable (#3685)

Browse Source 
Related discussion: https://community.vikunja.io/t/change-vikunja-logo-and-color-scheme/621

Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/3685
Reviewed-by: konrad <k@knt.li>
Co-authored-by: davidangel <david@davidangel.net>
Co-committed-by: davidangel <david@davidangel.net>
This commit is contained in:
davidangel 2023-08-23 16:13:29 +00:00 committed by konrad
parent 37975c1931
commit cade3df3e9
5 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Dockerfile
View File

@ -57,6 +57,7 @@ ENV VIKUNJA_SENTRY_ENABLED false
ENV VIKUNJA_SENTRY_DSN https://85694a2d757547cbbc90cd4b55c5a18d@o1047380.ingest.sentry.io/6024480 ENV VIKUNJA_SENTRY_DSN https://85694a2d757547cbbc90cd4b55c5a18d@o1047380.ingest.sentry.io/6024480
ENV VIKUNJA_PROJECT_INFINITE_NESTING_ENABLED false ENV VIKUNJA_PROJECT_INFINITE_NESTING_ENABLED false
ENV VIKUNJA_ALLOW_ICON_CHANGES true ENV VIKUNJA_ALLOW_ICON_CHANGES true
ENV VIKUNJA_CUSTOM_LOGO_URL ""
COPY docker/injector.sh /docker-entrypoint.d/50-injector.sh COPY docker/injector.sh /docker-entrypoint.d/50-injector.sh
COPY docker/ipv6-disable.sh /docker-entrypoint.d/60-ipv6-disable.sh COPY docker/ipv6-disable.sh /docker-entrypoint.d/60-ipv6-disable.sh

1
docker/injector.sh
View File

@ -13,5 +13,6 @@ sed -ri "s:^(\s*window.SENTRY_ENABLED\s*=)\s*.+:\1 ${VIKUNJA_SENTRY_ENABLED}:g"
sed -ri "s:^(\s*window.SENTRY_DSN\s*=)\s*.+:\1 '${VIKUNJA_SENTRY_DSN}':g" /usr/share/nginx/html/index.html sed -ri "s:^(\s*window.SENTRY_DSN\s*=)\s*.+:\1 '${VIKUNJA_SENTRY_DSN}':g" /usr/share/nginx/html/index.html
sed -ri "s:^(\s*window.PROJECT_INFINITE_NESTING_ENABLED\s*=)\s*.+:\1 '${VIKUNJA_PROJECT_INFINITE_NESTING_ENABLED}':g" /usr/share/nginx/html/index.html sed -ri "s:^(\s*window.PROJECT_INFINITE_NESTING_ENABLED\s*=)\s*.+:\1 '${VIKUNJA_PROJECT_INFINITE_NESTING_ENABLED}':g" /usr/share/nginx/html/index.html
sed -ri "s:^(\s*window.ALLOW_ICON_CHANGES\s*=)\s*.+:\1 ${VIKUNJA_ALLOW_ICON_CHANGES}:g" /usr/share/nginx/html/index.html sed -ri "s:^(\s*window.ALLOW_ICON_CHANGES\s*=)\s*.+:\1 ${VIKUNJA_ALLOW_ICON_CHANGES}:g" /usr/share/nginx/html/index.html
sed -ri "s:^(\s*window.CUSTOM_LOGO_URL\s*=)\s*.+:\1 ${VIKUNJA_CUSTOM_LOGO_URL}:g" /usr/share/nginx/html/index.html
date -uIseconds | xargs echo 'info: started at' date -uIseconds | xargs echo 'info: started at'

2
index.html
View File

@ -32,6 +32,8 @@
window.PROJECT_INFINITE_NESTING_ENABLED = false window.PROJECT_INFINITE_NESTING_ENABLED = false
// Allow changing the logo and other icons based on various occasions throughout the year. // Allow changing the logo and other icons based on various occasions throughout the year.
window.ALLOW_ICON_CHANGES = true window.ALLOW_ICON_CHANGES = true
// Allow using a custom logo via external URL.
window.CUSTOM_LOGO_URL = ''
</script> </script>
</body> </body>
</html> </html>

10
src/components/home/Logo.vue
View File

@ -9,15 +9,21 @@ import {MILLISECONDS_A_HOUR} from '@/constants/date'
const now = useNow({ const now = useNow({
interval: MILLISECONDS_A_HOUR, interval: MILLISECONDS_A_HOUR,
}) })
const Logo = computed(() => window.ALLOW_ICON_CHANGES && now.value.getMonth() === 5 ? LogoFullPride : LogoFull) const Logo = computed(() => window.ALLOW_ICON_CHANGES && now.value.getMonth() === 6 ? LogoFullPride : LogoFull)
const CustomLogo = computed(() => window.CUSTOM_LOGO_URL)
</script> </script>
<template> <template>
<Logo alt="Vikunja" class="logo" /> <div>
<Logo v-if="!CustomLogo" alt="Vikunja" class="logo" />
<img v-show="CustomLogo" :src="CustomLogo" alt="Vikunja" class="logo" />
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.logo { .logo {
color: var(--logo-text-color); color: var(--logo-text-color);
max-width: 168px;
max-height: 48px;
} }
</style> </style>

1
src/main.ts
View File

@ -23,6 +23,7 @@ declare global {
SENTRY_DSN: string; SENTRY_DSN: string;
PROJECT_INFINITE_NESTING_ENABLED: boolean; PROJECT_INFINITE_NESTING_ENABLED: boolean;
ALLOW_ICON_CHANGES: boolean; ALLOW_ICON_CHANGES: boolean;
CUSTOM_LOGO_URL?: string;
} }
} }