Merge branch 'develop-custom-head-event' into develop

fcamblor · fcamblor · commit 4a3907bb887e · 2025-03-27T12:02:38.000+01:00
diff --git a/cloud/functions/src/crawlers/bdxio/crawler.ts b/cloud/functions/src/crawlers/bdxio/crawler.ts
@@ -268,6 +268,7 @@ export const BDXIO_CRAWLER: CrawlerKind<typeof BDXIO_PARSER> = {
             title: descriptor.title,
             days: descriptor.days as Day[],
             headingTitle: descriptor.headingTitle,
+            headingSubTitle: descriptor.headingSubTitle,
             headingBackground: descriptor.headingBackground,
             description: descriptor.description,
             keywords: descriptor.keywords,
diff --git a/cloud/functions/src/crawlers/camping-des-speakers/crawler.ts b/cloud/functions/src/crawlers/camping-des-speakers/crawler.ts
@@ -145,6 +145,7 @@ export const CAMPING_DES_SPEAKERS_CRAWLER: CrawlerKind<typeof CAMPING_DES_SPEAKE
             title: descriptor.title,
             days: descriptor.days,
             headingTitle: descriptor.headingTitle,
+            headingSubTitle: descriptor.headingSubTitle,
             headingBackground: descriptor.headingBackground,
             description: descriptor.description || "",
             keywords: descriptor.keywords,
diff --git a/cloud/functions/src/crawlers/codeurs-en-seine/crawler.ts b/cloud/functions/src/crawlers/codeurs-en-seine/crawler.ts
@@ -264,6 +264,7 @@ export const CODEURS_EN_SEINE_CRAWLER: CrawlerKind<typeof CODEURS_EN_SEINE_PARSE
             title: descriptor.title,
             days: descriptor.days as Day[],
             headingTitle: descriptor.headingTitle,
+            headingSubTitle: descriptor.headingSubTitle,
             headingBackground: descriptor.headingBackground,
             description: descriptor.description,
             keywords: descriptor.keywords,
diff --git a/cloud/functions/src/crawlers/crawler-parsers.ts b/cloud/functions/src/crawlers/crawler-parsers.ts
@@ -54,7 +54,17 @@ export const EVENT_THEME_PARSER = z.object({
         secondaryContrastHex: HEX_COLOR_PARSER,
         tertiaryHex: HEX_COLOR_PARSER,
         tertiaryContrastHex: HEX_COLOR_PARSER
-    })
+    }),
+    headingCustomStyles: z.object({
+      title: z.string().nullable(),
+      subTitle: z.string().nullable(),
+      banner: z.string().nullable(),
+    }).optional().nullable().default(null),
+    headingSrcSet: z.array(z.object({
+      url: z.string(),
+      descriptor: z.string().regex(/\d(?:w|x)/)
+    })).min(1).optional().nullable().default(null),
+    customGoogleFontFamilies: z.array(z.string()).optional().nullable().default(null),
 })
 
 export const SOCIAL_MEDIA_TYPE = z.union([
@@ -178,6 +188,7 @@ export const EVENT_FEATURES_CONFIG_PARSER = z.object({
 
 export const EVENT_DESCRIPTOR_PARSER = LISTABLE_EVENT_PARSER.extend({
     headingTitle: z.string(),
+    headingSubTitle: z.string().optional().nullable().default(null),
     headingBackground: z.string().optional().nullable().default(null),
     features: EVENT_FEATURES_CONFIG_PARSER,
     talkFormats: z.array(THEMABLE_TALK_FORMAT_PARSER),
diff --git a/cloud/functions/src/crawlers/devoxx-scala/crawler.ts b/cloud/functions/src/crawlers/devoxx-scala/crawler.ts
@@ -284,6 +284,7 @@ export const DEVOXX_SCALA_CRAWLER: CrawlerKind<typeof DEVOXX_SCALA_DESCRIPTOR_PA
         const eventDescriptor: FullEvent['conferenceDescriptor'] = {
             ...eventInfo,
             headingTitle: descriptor.headingTitle,
+            headingSubTitle: descriptor.headingSubTitle,
             headingBackground: descriptor.headingBackground,
             features: descriptor.features,
             talkFormats: Array.from(themedTalkFormatsByIdAndDuration.values()),
diff --git a/cloud/functions/src/crawlers/devoxx/crawler.ts b/cloud/functions/src/crawlers/devoxx/crawler.ts
@@ -175,6 +175,7 @@ Please, unless event id is made configurable at cfp.dev level, you should rather
         const eventDescriptor: FullEvent['conferenceDescriptor'] = {
             ...eventInfo,
             headingTitle: descriptor.headingTitle,
+            headingSubTitle: descriptor.headingSubTitle,
             headingBackground: descriptor.headingBackground,
             features: descriptor.features,
             talkFormats: eventTalkFormats,
diff --git a/cloud/functions/src/crawlers/jugsummercamp/crawler.ts b/cloud/functions/src/crawlers/jugsummercamp/crawler.ts
@@ -135,6 +135,7 @@ export const JUG_SUMMERCAMP_CRAWLER: CrawlerKind<typeof JUG_SUMMERCAMP_PARSER> =
             title: descriptor.title,
             days: descriptor.days,
             headingTitle: descriptor.headingTitle,
+            headingSubTitle: descriptor.headingSubTitle,
             headingBackground: descriptor.headingBackground,
             description: descriptor.description || "",
             keywords: descriptor.keywords,
diff --git a/cloud/functions/src/crawlers/la-product-conf/crawler.ts b/cloud/functions/src/crawlers/la-product-conf/crawler.ts
@@ -248,6 +248,7 @@ export const LA_PRODUCT_CONF_CRAWLER: CrawlerKind<typeof LA_PRODUCT_CONF_DESCRIP
             title: descriptor.title,
             days: descriptor.days as Day[],
             headingTitle: descriptor.headingTitle,
+            headingSubTitle: descriptor.headingSubTitle,
             headingBackground: descriptor.headingBackground,
             description: descriptor.description,
             keywords: descriptor.keywords,
diff --git a/cloud/functions/src/crawlers/openplanner/crawler.ts b/cloud/functions/src/crawlers/openplanner/crawler.ts
@@ -302,6 +302,7 @@ export const OPENPLANNER_CRAWLER: CrawlerKind<typeof OPENPLANNER_DESCRIPTOR_PARS
           logoUrl: descriptor.logoUrl || openPlannerSchedule.logoUrl,
           backgroundUrl: descriptor.backgroundUrl || openPlannerSchedule.backgroundUrl,
           headingTitle: descriptor.headingTitle || openPlannerSchedule.headingTitle,
+          headingSubTitle: descriptor.headingSubTitle || openPlannerSchedule.headingSubTitle,
           headingBackground: descriptor.headingBackground || openPlannerSchedule.headingBackground,
           talkFormats: formats,
           talkTracks: tracks,
diff --git a/cloud/functions/src/crawlers/single-file/crawler.ts b/cloud/functions/src/crawlers/single-file/crawler.ts
@@ -143,6 +143,7 @@ export const SINGLE_FILE_CRAWLER: CrawlerKind<typeof SINGLE_FILE_DESCRIPTOR_PARS
       conferenceDescriptor: {
         ...eventInfo,
         headingTitle: descriptor.headingTitle,
+        headingSubTitle: descriptor.headingSubTitle,
         headingBackground: descriptor.headingBackground,
         features: descriptor.features,
         talkFormats: descriptor.talkFormats,
diff --git a/cloud/functions/src/crawlers/web2day/crawler.ts b/cloud/functions/src/crawlers/web2day/crawler.ts
@@ -183,6 +183,7 @@ export const WEB2DAY_CRAWLER: CrawlerKind<typeof WEB2DAY_PARSER> = {
             title: descriptor.title,
             days: descriptor.days as Day[],
             headingTitle: descriptor.headingTitle,
+            headingSubTitle: descriptor.headingSubTitle,
             headingBackground: descriptor.headingBackground,
             description: descriptor.description,
             keywords: descriptor.keywords,
diff --git a/mobile/src/components/events/CurrentEventHeader.vue b/mobile/src/components/events/CurrentEventHeader.vue
@@ -5,16 +5,26 @@
         <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>
-<!-- TODO: Fix router navigation from preferences/schedule prior to re-enabling this one -->
-<!--        <global-user-actions-button :tabbed-navigation="true" />-->
+        <div class="viewsHeader-title">
+          <span class="viewsHeader-name" :style="confDescriptor.theming.headingCustomStyles?.title || ''">{{ confDescriptor.headingTitle }}</span>
+          <span v-if="confDescriptor.headingSubTitle"
+                :style="confDescriptor.theming.headingCustomStyles?.subTitle || ''" class="viewsHeader-subTitle"
+          >{{ confDescriptor.headingSubTitle }}</span>
+        </div>
       </div>
 
       <div class="viewsSubHeader">
-        <div class="viewsSubHeader-title">{{ confDescriptor?.headingTitle }}</div>
-        <current-event-status :conf-descriptor="confDescriptor"></current-event-status>
+        <div class="viewsSubHeader-status">
+          <current-event-status :conf-descriptor="confDescriptor"></current-event-status>
+        </div>
       </div>
     </ion-toolbar>
-    <img :src="confDescriptor?.backgroundUrl" :alt="LL.Banner_Event()">
+    <img
+      :src="!confDescriptor.theming.headingSrcSet?.length && confDescriptor.backgroundUrl ? confDescriptor.backgroundUrl : ''"
+      :srcset="confDescriptor.theming.headingSrcSet?.length ? confDescriptor.theming.headingSrcSet.map(entry => `${entry.url} ${entry.descriptor}`).join(', ') : ''"
+      :alt="LL.Banner_Event()"
+      :style="confDescriptor.theming.headingCustomStyles?.banner || ''"
+    />
   </ion-header>
 </template>
 
@@ -24,7 +34,6 @@ import CurrentEventStatus from "@/components/events/CurrentEventStatus.vue";
 import {computed, PropType, ref} from "vue";
 import {VoxxrinConferenceDescriptor} from "@/models/VoxxrinConferenceDescriptor";
 import {useTabbedPageNav} from "@/state/useTabbedPageNav";
-import GlobalUserActionsButton from "@/components/user/GlobalUserActionsButton.vue";
 import {typesafeI18n} from "@/i18n/i18n-vue";
 
 const { LL } = typesafeI18n()
@@ -44,7 +53,7 @@ function backButtonClicked() {
 }
 
 const headingBackground = computed(() => {
-  return props.confDescriptor?.headingBackground || `var(--default-background)`
+  return props.confDescriptor.headingBackground || `var(--default-background)`
 })
 </script>
 
@@ -92,27 +101,64 @@ const headingBackground = computed(() => {
       display: flex;
       align-items: center;
       justify-content: space-between;
+      gap: 16px;
       padding-top: 16px;
       font-weight: bold;
       color: var(--voxxrin-event-theme-colors-primary-contrast-hex);
 
+       &-title {
+        position: relative;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-content: center;
+        justify-content: center;
+        line-height: 1;
+
+        @media (min-width:768px) {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          min-height: 100%;
+          max-width: calc(100% - 174px);
+          white-space: nowrap;
+
+          .viewsSubHeader-name {
+            font-size: clamp(55px, 5vw, 78px) !important;
+          }
+
+          .viewsSubHeader-dates {
+            font-size: clamp(16px, 5vw, 24px) !important;
+          }
+        }
+
+        .viewsHeader-name {
+          line-height: 1;
+          font-size: calc(26px + 16 * (100vw - 320px) / 1024);
+          font-weight: 700;
+        }
+
+        .viewsHeader-subTitle {
+          font-weight: 500;
+          font-size: 15px;
+        }
+      }
+
       .btnUser {
         border: 1px solid rgba(white, 0.5);
       }
     }
 
     .viewsSubHeader {
       display: flex;
-      align-items: center;
-      justify-content: space-between;
+      align-items: end;
+      justify-content: end;
       padding: 12px 0 18px 0;
       font-weight: bold;
 
-      &-title {
-        flex: 1;
-        color: var(--voxxrin-event-theme-colors-primary-contrast-hex);
-        font-weight: bold;
-        font-size: calc(22px + 8 * (100vw - 320px) / 1024)
+      &-status {
+        flex: 0 0 auto;
       }
     }
   }
diff --git a/mobile/src/components/events/EventTalksGroup.vue b/mobile/src/components/events/EventTalksGroup.vue
@@ -1,5 +1,8 @@
 <template>
-  <img :src="confDescriptor.backgroundUrl">
+  <img
+    :src="!confDescriptor.theming.headingSrcSet?.length && confDescriptor.backgroundUrl ? confDescriptor.backgroundUrl : ''"
+    :srcset="confDescriptor.theming.headingSrcSet?.length ? confDescriptor.theming.headingSrcSet.map(entry => `${entry.url} ${entry.descriptor}`).join(', ') : ''"
+  />
   <span class="schedule-talk-event-title">{{confDescriptor.headingTitle}}</span>
 
   <schedule-talk v-for="(talk, index) in talks" :key="talk.id.value"
diff --git a/mobile/src/models/VoxxrinEvent.ts b/mobile/src/models/VoxxrinEvent.ts
@@ -117,5 +117,8 @@ export function toVoxxrinEventTheme(firestoreTheme: EventTheme): VoxxrinEventThe
             tertiaryRGB: hexToRGB(firestoreTheme.colors.tertiaryHex),
             tertiaryContrastRGB: hexToRGB(firestoreTheme.colors.tertiaryContrastHex),
         },
+        headingCustomStyles: firestoreTheme.headingCustomStyles,
+        headingSrcSet: firestoreTheme.headingSrcSet,
+        customGoogleFontFamilies: firestoreTheme.customGoogleFontFamilies,
     }
 }
diff --git a/mobile/src/state/useDevUtilities.ts b/mobile/src/state/useDevUtilities.ts
@@ -18,7 +18,7 @@ import {updateLogConfigTo} from "@/services/Logger";
 // May be useful for debug purposes
 
 type OverridableListableEventProperties = {eventId: string} & Partial<Pick<ListableVoxxrinEvent, "theming"|"location"|"backgroundUrl"|"logoUrl">>;
-type OverridableEventDescriptorProperties = {eventId: string} & Partial<Pick<VoxxrinConferenceDescriptor, "headingTitle"|"theming"|"features"|"infos"|"location"|"backgroundUrl"|"logoUrl">>;
+type OverridableEventDescriptorProperties = {eventId: string} & Partial<Pick<VoxxrinConferenceDescriptor, "headingTitle"|"headingSubTitle"|"theming"|"features"|"infos"|"location"|"backgroundUrl"|"logoUrl">>;
 
 let overridenListableEventPropertiesRef: Ref<OverridableListableEventProperties|undefined>|undefined = undefined
 let overridenEventDescriptorPropertiesRef: Ref<OverridableEventDescriptorProperties|undefined>|undefined = undefined
diff --git a/mobile/src/views/event/_BaseEventPages.vue b/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>
 
diff --git a/shared/conference-descriptor.firestore.d.ts b/shared/conference-descriptor.firestore.d.ts
@@ -15,6 +15,7 @@ export type EventRecordingConfig = {
 
 export type ConferenceDescriptor = Omit<ListableEvent, "websiteUrl"> & {
     headingTitle: string,
+    headingSubTitle: string|null,
     headingBackground: string|null;
     features: {
         roomsDisplayed: boolean,
diff --git a/shared/event-list.firestore.d.ts b/shared/event-list.firestore.d.ts
@@ -8,7 +8,14 @@ export type EventTheme = {
         secondaryContrastHex: HexColor,
         tertiaryHex: HexColor,
         tertiaryContrastHex: HexColor
-    }
+    },
+    headingCustomStyles: {
+      title: string|null,
+      subTitle: string|null,
+      banner: string|null,
+    }|null,
+    headingSrcSet: Array<{ url: string, descriptor: string }>|null,
+    customGoogleFontFamilies: string[]|null
 }
 
 export type Day = {
