From 6347bbabff85c7f8c40eefed65322ee03d9dc2a3 Mon Sep 17 00:00:00 2001
From: Sudeep Hazra <sudeephazra@gmail.com>
Date: Sun, 2 Jun 2024 05:22:54 +0530
Subject: [PATCH] Added signature icons for Medium, GitHub and YouTube (#2484)

* Added signature icons for Medium, GitHub and YouTube

* Reverted location of icons to Mailspring assets
---
 .../composer-signature/lib/constants.ts       | 30 ++++++-
 .../composer-signature/lib/templates.tsx      | 82 +++++++++++++++++++
 2 files changed, 111 insertions(+), 1 deletion(-)

diff --git a/app/internal_packages/composer-signature/lib/constants.ts b/app/internal_packages/composer-signature/lib/constants.ts
index 1a7e2ba2e..5ad0144e6 100644
--- a/app/internal_packages/composer-signature/lib/constants.ts
+++ b/app/internal_packages/composer-signature/lib/constants.ts
@@ -43,6 +43,18 @@ export const DataShape = [
     key: 'linkedinURL',
     label: localized('LinkedIn URL'),
   },
+  {
+    key: 'mediumURL',
+    label: localized('Medium Handle'),
+  },
+  {
+    key: 'githubURL',
+    label: localized('GitHub Username'),
+  },
+  {
+    key: 'youtubeURL',
+    label: localized('YouTube'),
+  },
   {
     key: 'twitterHandle',
     label: localized('Twitter Handle'),
@@ -61,7 +73,7 @@ export const DataShape = [
 export const ResolveSignatureData = data => {
   data = { ...data };
 
-  ['websiteURL', 'facebookURL'].forEach(key => {
+  ['websiteURL', 'facebookURL', 'youtubeURL'].forEach(key => {
     if (data[key] && !data[key].includes(':')) {
       data[key] = `http://${data[key]}`;
     }
@@ -74,6 +86,22 @@ export const ResolveSignatureData = data => {
     }
   }
 
+  // sanitize medium handle
+  if (data.mediumURL) {
+    if (!data.mediumURL.includes('medium.com')) {
+      if (!data.mediumURL.startsWith('@')) {
+        data.mediumURL = `@${data.mediumURL}`;
+      }
+      data.mediumURL = `https://www.medium.com/${data.mediumURL}`;
+    }
+  }
+
+  // sanitize github username
+  if (data.githubURL) {
+    if (!data.githubURL.includes('github.com')) {
+      data.githubURL = `https://www.github.com/${data.githubURL}`;
+    }
+  }
   // sanitize twitter handle
   if (data.twitterHandle) {
     if (data.twitterHandle.includes('/')) {
diff --git a/app/internal_packages/composer-signature/lib/templates.tsx b/app/internal_packages/composer-signature/lib/templates.tsx
index f73d0f0b4..bb2e8b635 100644
--- a/app/internal_packages/composer-signature/lib/templates.tsx
+++ b/app/internal_packages/composer-signature/lib/templates.tsx
@@ -11,6 +11,34 @@ const FB_SHARE = (
     alt="Facebook"
   />
 );
+
+const MEDIUM_SHARE = (
+    <img
+        src="https://www.getmailspring.com/signature-assets/medium.gif"
+        width="13"
+        height="13"
+        alt="Medium"
+    />
+);
+
+const GITHUB_SHARE = (
+    <img
+        src="https://www.getmailspring.com/signature-assets/github.gif"
+        width="13"
+        height="13"
+        alt="Github"
+    />
+);
+
+const YOUTUBE_SHARE = (
+    <img
+        src="https://www.getmailspring.com/signature-assets/youtube.gif"
+        width="13"
+        height="13"
+        alt="YouTube"
+    />
+);
+
 const TWITTER_SHARE = (
   <img
     src="https://www.getmailspring.com/signature-assets/twitter.gif"
@@ -149,6 +177,33 @@ function GenericInfoBlock(props, prefixStyle: any = PrefixStyles.None) {
             {LINKEDIN_SHARE}
           </a>
         )}
+          {props.mediumURL && (
+              <a
+                  href={props.mediumURL}
+                  title="Medium"
+                  style={{ marginRight: 8, color: props.tintColor }}
+              >
+                  {MEDIUM_SHARE}
+              </a>
+          )}
+          {props.githubURL && (
+              <a
+                  href={props.githubURL}
+                  title="GitHub"
+                  style={{ marginRight: 8, color: props.tintColor }}
+              >
+                  {GITHUB_SHARE}
+              </a>
+          )}
+          {props.youtubeURL && (
+              <a
+                  href={props.youtubeURL}
+                  title="YouTube"
+                  style={{ marginRight: 8, color: props.tintColor }}
+              >
+                  {YOUTUBE_SHARE}
+              </a>
+          )}
         {props.twitterHandle && (
           <a
             href={`https://twitter.com/${props.twitterHandle}`}
@@ -430,6 +485,33 @@ const Templates = [
                       {FB_SHARE}
                     </a>
                   )}
+                    {props.mediumURL && (
+                        <a
+                            href={props.mediumURL}
+                            title="Medium"
+                            style={{ marginRight: 8, color: props.tintColor }}
+                        >
+                            {MEDIUM_SHARE}
+                        </a>
+                    )}
+                    {props.githubURL && (
+                        <a
+                            href={props.githubURL}
+                            title="Github"
+                            style={{ marginRight: 8, color: props.tintColor }}
+                        >
+                            {GITHUB_SHARE}
+                        </a>
+                    )}
+                    {props.youtubeURL && (
+                        <a
+                            href={props.youtubeURL}
+                            title="YouTube"
+                            style={{ marginRight: 8, color: props.tintColor }}
+                        >
+                            {YOUTUBE_SHARE}
+                        </a>
+                    )}
                   {props.linkedinURL && (
                     <a
                       href={props.linkedinURL}