feat: use the custom logo, if defined, to render social custom link

Author: peterpeterparker

studio/src/app/utils/editor/header-footer.utils.tsx

@@ -26,7 +26,7 @@ export class HeaderFooterUtils {
       deck.removeChild(currentSlotElement);
     }
 
-    const promises: Promise<HTMLElement>[] = [this.createContainer(slotName), this.createSocial(user, type), this.createImg(type)];
+    const promises: Promise<HTMLElement>[] = [this.createContainer(slotName), this.createSocial(user, type), this.createImg(user, type)];
     const [div, social, deckgoImg] = await Promise.all(promises);
 
     social.appendChild(deckgoImg);
@@ -60,7 +60,7 @@ export class HeaderFooterUtils {
     return socialElement;
   }
 
-  private static async createImg(type: 'twitter' | 'linkedin' | 'dev' | 'medium' | 'github' | 'custom'): Promise<HTMLElement> {
+  private static async createImg(user: User, type: 'twitter' | 'linkedin' | 'dev' | 'medium' | 'github' | 'custom'): Promise<HTMLElement> {
     const deckgoImg: HTMLElement = document.createElement(SlotType.IMG);
     deckgoImg.setAttribute('slot', 'icon');
     deckgoImg.setAttribute('aria-label', type);
@@ -71,6 +71,8 @@ export class HeaderFooterUtils {
       deckgoImg.setAttribute('svg-src', `${config.globalAssetsUrl}/icons/ionicons/${type}.svg`);
     } else if (type === 'medium' || type === 'dev') {
       deckgoImg.setAttribute('svg-src', `${config.globalAssetsUrl}/icons/${type}.svg`);
+    } else if (user.data.social.custom_logo_url !== undefined && user.data.social.custom_logo_url !== '') {
+      deckgoImg.setAttribute('img-src', user.data.social.custom_logo_url);
     } else {
       deckgoImg.setAttribute('svg-src', `${config.globalAssetsUrl}/icons/ionicons/globe.svg`);
     }

studio/src/app/utils/editor/social.utils.tsx

@@ -41,15 +41,23 @@ export class SocialUtils {
   }
 
   static createCustom(user: User): JSX.IntrinsicElements {
-    const config: EnvironmentDeckDeckGoConfig = EnvironmentConfigService.getInstance().get('deckdeckgo');
-
     return (
       <deckgo-social slot={`social-link`} fullUrl={user.data.social.custom}>
-        <deckgo-lazy-img slot="icon" svg-src={`${config.globalAssetsUrl}/icons/ionicons/globe.svg`} aria-label="Web"></deckgo-lazy-img>
+        {this.createCustomLogo(user)}
       </deckgo-social>
     );
   }
 
+  private static createCustomLogo(user: User): JSX.IntrinsicElements {
+    if (user.data.social.custom_logo_url) {
+      return <deckgo-lazy-img slot="icon" img-src={user.data.social.custom_logo_url} aria-label="Web"></deckgo-lazy-img>;
+    }
+
+    const config: EnvironmentDeckDeckGoConfig = EnvironmentConfigService.getInstance().get('deckdeckgo');
+
+    return <deckgo-lazy-img slot="icon" svg-src={`${config.globalAssetsUrl}/icons/ionicons/globe.svg`} aria-label="Web"></deckgo-lazy-img>;
+  }
+
   static createGitHub(user: User): JSX.IntrinsicElements {
     const config: EnvironmentDeckDeckGoConfig = EnvironmentConfigService.getInstance().get('deckdeckgo');