introduced theming.customGoogleFontFamilies allowing to import custom fonts within an event space

Author: fcamblor

cloud/functions/src/crawlers/crawler-parsers.ts

@@ -60,6 +60,7 @@ export const EVENT_THEME_PARSER = z.object({
       subTitle: z.string().nullable(),
       banner: z.string().nullable(),
     }).optional().nullable().default(null),
+    customGoogleFontFamilies: z.array(z.string()).optional().nullable().default(null),
 })
 
 export const SOCIAL_MEDIA_TYPE = z.union([

mobile/src/components/events/CurrentEventHeader.vue

@@ -5,7 +5,6 @@
         <ion-button class="viewsHeader-back" @click="backButtonClicked" shape="round" :aria-label="LL.Back_List_Events()" data-testid="back-to-events-list">
           <ion-icon src="/assets/icons/solid/checkbox-list.svg"></ion-icon>
         </ion-button>
-        <!-- NOTE (!) See how to manage the dynamic import of font familly via a URL. --> 
         <div class="viewsHeader-title">
           <span class="viewsHeader-name" :style="confDescriptor.theming.headingCustomStyles?.title || ''">{{ confDescriptor.headingTitle }}</span>
           <span v-if="confDescriptor.headingSubTitle"

mobile/src/models/VoxxrinEvent.ts

@@ -118,5 +118,6 @@ export function toVoxxrinEventTheme(firestoreTheme: EventTheme): VoxxrinEventThe
             tertiaryContrastRGB: hexToRGB(firestoreTheme.colors.tertiaryContrastHex),
         },
         headingCustomStyles: firestoreTheme.headingCustomStyles,
+        customGoogleFontFamilies: firestoreTheme.customGoogleFontFamilies,
     }
 }

mobile/src/views/event/_BaseEventPages.vue

@@ -1,6 +1,7 @@
 <template>
   <ion-page>
     <event-tabs :tabs="tabs" :spaced-event-id="spacedEventIdRef"></event-tabs>
+    <link v-for="googleFontUrl in confDescriptorRef?.theming.customGoogleFontFamilies || []" :key="googleFontUrl" rel="stylesheet" :href="`https://fonts.googleapis.com/css2?family=${googleFontUrl}&display=swap`" />
   </ion-page>
 </template>
 

shared/event-list.firestore.d.ts

@@ -14,6 +14,7 @@ export type EventTheme = {
       subTitle: string|null,
       banner: string|null,
     }|null,
+    customGoogleFontFamilies: string[]|null
 }
 
 export type Day = {