mirror of
https://github.com/YunoHost/yunohost-portal.git
synced 2024-09-03 20:06:23 +02:00
101 lines
3.4 KiB
Vue
101 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
type CustomLogo = Partial<Record<'is' | 'content', string>>
|
|
let customLogo: Ref<CustomLogo> | ComputedRef<CustomLogo>
|
|
|
|
try {
|
|
const settings = await useSettings()
|
|
|
|
customLogo = computed(() => {
|
|
const logo = settings.value.portal_logo
|
|
|
|
if (!logo) return {}
|
|
|
|
const [mimetype, base64Content] = logo.split(':')
|
|
if (mimetype === 'image/svg+xml') {
|
|
// Will render as inline SVG so that CSS "currentColor" can cascade to it
|
|
return {
|
|
is: 'svg',
|
|
content: atob(base64Content),
|
|
}
|
|
} else {
|
|
return {
|
|
is: 'img',
|
|
content: `data:${mimetype};base64, ${base64Content}`,
|
|
}
|
|
}
|
|
})
|
|
} catch (error) {
|
|
// If `yunohost-portal-api` is down we can't get settings
|
|
customLogo = ref({})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="customLogo.is === 'svg'"
|
|
aria-hidden="true"
|
|
class="svg-div"
|
|
v-html="customLogo.content"
|
|
/>
|
|
<img
|
|
v-else-if="customLogo.is === 'img'"
|
|
:src="customLogo.content"
|
|
alt=""
|
|
aria-hidden="true"
|
|
/>
|
|
<svg
|
|
v-else
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
viewBox="0 0 98 85"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
d="M97,51c-2.02,4.98-8.33,5.67-14,7c-0.609,6.29,3.05,10.95-1,16c-6.41-0.26-7.471-5.859-7-13c-1,0-2,0-3,0
|
|
c-2.09,2.77,0.9,4.52,0,8c-1.12,4.34-7.88,7.91-11,7c-2.18-0.641-5.96-6.63-5-12c2.82-2.71,2.76,3.12,6,3c5.05-7.84-9.63-8.55-8-17
|
|
c1.24-6.42,11.66-9.66,15-1c1.54,4.21-5.17,0.16-5,3c-0.279,1.62,0.95,1.72,1,3c2.52,0.77,1.68-2.16,3-3c1.859-1.17,3.09-0.75,6-1
|
|
c2.45-2.55,1.08-8.92,4-11c3.87,0.46,6.08,2.59,6,7C91.01,46.109,94.3,46.05,97,51z"
|
|
/>
|
|
<path
|
|
d="M87,13c0.609,3.21,2.32,4.98,2,8c-0.34,3.21-2.9,8.83-4,9c-1.17,0.18-1.34,1.78-2,2
|
|
c-4.66,1.57-12.391-1.48-14-7c-1.16-3.97,1.9-13.37,4-17c1.3-2.25,1.221-2.99,5-4c2.41-0.65,3.65-2.25,6,0
|
|
c0.471,0.45,1.3,0.49,1.85,0.89c-0.199,0,2,3.14,2.15,4.11C88.32,11.07,86.77,11.78,87,13z M79,22c1.779-1.89,3.29-4.04,3-8
|
|
C77.49,12.33,74.67,21.3,79,22z"
|
|
/>
|
|
<path
|
|
d="M67,21c-0.07,5.81,2.48,10.7,0,15c-6.73,1.06-7.24-4.1-11-6c-1.939,1.39-1.49,5.18-3,7
|
|
c-3.78,0.44-4.69-1.97-7-3c2.47-7.81,1.26-18.98,2-26c8.58-0.58,7.68,8.32,12,12c0.52-4.34-0.359-15.52,3-20
|
|
C70.33,3.29,67.09,12.99,67,21z"
|
|
/>
|
|
<path
|
|
d="M52,55c1.93,8.41,0.12,22.689-12,20c-1.59-0.35-8.42-5.22-9-7c-1.62-5,0.34-13.34,3-16
|
|
C39.03,46.97,45.48,50.359,52,55z M39,66c4.55,0.96,6.3-4.2,4-7C39.37,59.03,38.61,61.939,39,66z"
|
|
/>
|
|
<path
|
|
d="M39,8c5.58,0.9,6.4,6.81,5,15c-1.43,8.38-3.02,14.59-9,15c-9.57,0.65-12.25-16.69-9-29
|
|
c8.32,1.27,6.59,10.36,6,17c2.71,0.83,2.2-0.85,3-2C37.05,21.04,37.82,13.61,39,8z"
|
|
/>
|
|
<path
|
|
d="M28,62c0.1,5.67,4.4,11.33,2,17c-4.32-1.01-6.57-4.09-9-7c-3.15-0.48-2.26,3.07-6,2
|
|
c-0.67,5.061,2.29,7.57-1,10c-4.7-0.63-6.66-4-8-8c-2.61-1.38-5.48-2.52-6-6c0.14-3.53,4.48-2.85,7-4c0.47-5.53-1.41-13.41,2-16
|
|
c8.31,0.49,8.21,7.13,7,15c4.36,0.29,4.94-4.35,5-7c0.06-2.43-1.82-8.26,2-11c3.06-0.73,2.94,1.73,6,1
|
|
C32.35,52.7,27.92,57.439,28,62z"
|
|
/>
|
|
<path
|
|
d="M24,12c1.07,7.07-3.86,8.14-6,12c0.21,6.88-0.47,12.86-2,18c-5.86-1.32-8.7-10.38-6-17
|
|
c-0.33-3.52-5.26-4.22-7-8c-0.3-0.66-0.47-4.43-1-7C1.09,5.63,0.55,4.31,3,1c8.16-0.49,7.21,8.13,9,14c5.05,0.39,3.91-5.42,8-6
|
|
C20.98,10.35,22.67,11,24,12z"
|
|
/>
|
|
</svg>
|
|
</template>
|
|
|
|
<style scoped>
|
|
svg,
|
|
img,
|
|
.svg-div {
|
|
max-width: 100px;
|
|
max-height: 100px;
|
|
fill: currentColor;
|
|
}
|
|
</style>
|