customLogo: fallback to yunohost default logo if api is down

components/CustomLogo.vue

@@ -1,23 +1,33 @@
 <script setup lang="ts">
-const settings = await useSettings()
+type CustomLogo = Partial<Record<'is' | 'content', string>>
-const customLogo = computed(() => {
+let customLogo: Ref<CustomLogo> | ComputedRef<CustomLogo>
-  const logo = settings.value.portal_logo
-  if (!logo) return {}
 
-  const [mimetype, base64Content] = logo.split(':')
+try {
-  if (mimetype === 'image/svg+xml') {
+  const settings = await useSettings()
-    // Will render as inline SVG so that CSS "currentColor" can cascade to it
+
-    return {
+  customLogo = computed(() => {
-      is: 'svg',
+    const logo = settings.value.portal_logo
-      content: atob(base64Content),
+
+    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}`,
+      }
     }
-  } else {
+  })
-    return {
+} catch (error) {
-      is: 'img',
+  // If `yunohost-portal-api` is down we can't get settings
-      content: `data:${mimetype};base64, ${base64Content}`,
+  customLogo = ref({})
-    }
+}
-  }
-})
 </script>
 
 <template>