fix: fetch logo content for svg

components/CustomLogo.vue

@@ -1,44 +1,23 @@
 <script setup lang="ts">
-const settings = await useSettings()
-type CustomLogo = Partial<Record<'is' | 'src', string>>
-let customLogo: Ref<CustomLogo> | ComputedRef<CustomLogo>
+let customLogo: Settings['portal_logo']
 
 try {
   const settings = await useSettings()
-
-  customLogo = computed(() => {
-    const logo = settings.value.portal_logo
-
-    if (!logo) return {}
-
-    if (logo.substr(-4) === '.svg') {
-      // Will render as inline SVG so that CSS "currentColor" can cascade to it
-      return {
-        is: 'svg',
-        src: `//${settings.value.domain}/yunohost/sso/customassets/${logo}`,
-      }
-    } else {
-      return {
-        is: 'img',
-        src: `//${settings.value.domain}/yunohost/sso/customassets/${logo}`,
-      }
-    }
-  })
-} catch (error) {
+  customLogo = settings.value.portal_logo
+} catch {
   // If `yunohost-portal-api` is down we can't get settings
-  customLogo = ref({})
 }
 </script>
 
 <template>
   <div
-    v-if="customLogo.is === 'svg'"
+    v-if="customLogo?.is === 'svg'"
     aria-hidden="true"
     class="svg-div"
     v-html="customLogo.src"
   />
   <img
-    v-else-if="customLogo.is === 'img'"
+    v-else-if="customLogo?.is === 'svg'"
     :src="customLogo.src"
     alt=""
     aria-hidden="true"

composables/states.ts

@@ -81,7 +81,7 @@ export const useQueryMsg = () => useState<string | null>('queryMsg', () => null)
 export interface Settings {
   domain: string
   public: boolean
-  portal_logo?: string
+  portal_logo?: { is: 'img' | 'svg', src: string }
   portal_theme: string
   portal_title?: string
   search_engine?: string
@@ -99,6 +99,21 @@ export const useSettings = async () => {
 
   if (!settings.value) {
     const { data } = await useApi<Settings>('/public')
+
+    const logo = data.value.portal_logo
+    if (logo) {
+      const src = `https://${data.value.domain}/yunohost/sso/customassets/${logo}`
+      const is = data.value.portal_logo.substr(-4) === '.svg' ? 'svg' : 'img'
+      data.value.portal_logo = { is, src: is === 'svg' ? '' : src }
+
+      if (is === 'svg') {
+        // Query file content to inject inline SVG so that CSS "currentColor" can cascade to it
+        $fetch(src).then((blob) => blob.text()).then((text) => {
+          data.value.portal_logo.src = text.replace('<?xml version="1.0" encoding="utf-8"?>', '')
+        })
+      }
+    }
+
     settings.value = data.value as Settings
 
     const colorMode = useColorMode()