Add email icon and copy to clipboard

Author: WillHannon-MCB

.vitepress/theme/components/SocialLink.vue

@@ -1,20 +1,60 @@
 <script>
-import { computed } from 'vue';
-
 export default {
     props: {
         icon: String,
         link: String,
     },
+    data() {
+        return {
+            showNotification: false
+        };
+    },
     computed: {
         svg() {
             return `<span class="i-social-${this.icon}" />`;
         },
+    },
+    methods: {
+        handleClick() {
+            if (this.icon === 'email') {
+                navigator.clipboard.writeText(this.link).then(() => {
+                    this.showNotification = true;
+                    setTimeout(() => {
+                        this.showNotification = false;
+                    }, 1000);
+                }, (err) => {
+                    console.error('Failed to copy email: ', err);
+                });
+            } else {
+                window.open(this.link, '_blank', 'noopener');
+            }
+        },
     }
 }
 </script>
 
 <template>
-    <a class="flex justify-center items-center w-9 h-9 text-gray-600 transition-color duration-500 hover:text-custom-orange hover:duration-300"
-        :href="link" target="_blank" rel="noopener" v-html="svg"></a>
+    <transition name="fade">
+        <div v-if="showNotification"
+            class="fixed top-2 left-1/2 transform -translate-x-1/2 border-2 border-custom-orange bg-white text-custom-orange text-center py-2 px-4 rounded-lg">
+            Email address copied to clipboard!
+        </div>
+    </transition>
+    <div @click.stop="handleClick"
+        class="flex justify-center items-center w-9 h-9 text-gray-600 transition-color duration-500 hover:text-custom-orange hover:duration-300"
+        v-html="svg">
+    </div>
 </template>
+
+<style>
+/* Fade transition */
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.5s ease;
+}
+
+.fade-enter,
+.fade-leave-to {
+    opacity: 0;
+}
+</style>

.vitepress/theme/components/TeamMembersItem.vue

@@ -10,14 +10,22 @@ export default {
             type: Object,
             required: true
         }
+    },
+    methods: {
+        navigate(url) {
+            if (url) {
+                window.location.href = url;
+            }
+        }
     }
 }
 </script>
 
 <template>
     <article
         class="hover:shadow-lg hover:shadow-custom-orange flex flex-col gap-px rounded-lg w-full h-full overflow-hidden transition-shadow duration-300 ease-in-out">
-        <a :href="member.url" class="py-8 px-6 sm:py-12 sm:px-8 flex-grow bg-custom-soft no-underline">
+        <div :href="member.url" class="py-8 px-6 sm:py-12 sm:px-8 flex-grow bg-custom-soft cursor-pointer"
+            @click="navigate(member.url)">
             <figure class="relative shrink-0 mx-auto rounded-full shadow w-24 h-24">
                 <img class="absolute inset-0 rounded-full object-cover" :src="member.image" :alt="member.name" />
             </figure>
@@ -35,6 +43,6 @@ export default {
                     <SocialLink v-for="{ link, icon } in member.links" :key="link" :icon="icon" :link="link" />
                 </div>
             </div>
-        </a>
+        </div>
     </article>
 </template>

.vitepress/theme/icons.css

@@ -41,6 +41,10 @@
   --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm7.931 9h-2.764a14.67 14.67 0 0 0-1.792-6.243A8.013 8.013 0 0 1 19.931 11zM12.53 4.027c1.035 1.364 2.427 3.78 2.627 6.973H9.03c.139-2.596.994-5.028 2.451-6.974.172-.01.344-.026.519-.026.179 0 .354.016.53.027zm-3.842.7C7.704 6.618 7.136 8.762 7.03 11H4.069a8.013 8.013 0 0 1 4.619-6.273zM4.069 13h2.974c.136 2.379.665 4.478 1.556 6.23A8.01 8.01 0 0 1 4.069 13zm7.381 6.973C10.049 18.275 9.222 15.896 9.041 13h6.113c-.208 2.773-1.117 5.196-2.603 6.972-.182.012-.364.028-.551.028-.186 0-.367-.016-.55-.027zm4.011-.772c.955-1.794 1.538-3.901 1.691-6.201h2.778a8.005 8.005 0 0 1-4.469 6.201z'/%3E%3C/svg%3E");
 }
 
+.i-social-email {
+  --icon: url("data:image/svg+xml,%3Csvg fill='%23000000' viewBox='0 0 1920 1920' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M0 1694.235h1920V226H0v1468.235ZM112.941 376.664V338.94H1807.06v37.723L960 1111.233l-847.059-734.57ZM1807.06 526.198v950.513l-351.134-438.89-88.32 70.475 378.353 472.998H174.042l378.353-472.998-88.32-70.475-351.134 438.89V526.198L960 1260.768l847.059-734.57Z' fill-rule='evenodd'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+}
+
 .i-menu {
   --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5' /%3E%3C/svg%3E");
 }

README.md

@@ -92,11 +92,13 @@ name: "Will Hannon" # <-------------- Your preferred name
 image: "/assets/people/will-hannon.jpeg" # <-------------- The path to an image of you (a link also works)
 title: "Data Scientist" # <-------------- Your title. Please be as consistent as possible
 category: "Staff" # <-------------- One of [Graduate Students, Postdocs, or Staff]
-links: # <-------------- Links to your socials. Icons should be one of [github, linkedin, orcid, twitter, or website]
+links: # <-------------- Links to your socials. Icons should be one of [github, linkedin, orcid, twitter, email, or website]
   - link: "https://github.com/WillHannon-MCB"
     icon: "github"
   - link: "https://www.linkedin.com/in/williamhannon/"
     icon: "linkedin"
+  - link: "[email protected]"
+    icon: "email"
 ---
 ```
 

people/will-hannon.md

@@ -9,6 +9,8 @@ links:
     icon: "github"
   - link: "https://www.linkedin.com/in/williamhannon/"
     icon: "linkedin"
+  - link: "[email protected]"
+    icon: "email"
 ---
 
 As a Data Scientist in the Bloom Lab, I develop and implement computational approaches to study viral evolution and communicate with our data. I’m interested in improving access to the information-rich datasets we generate to aid in antigen engineering, therapeutic design, viral surveillance, and gaining a better understanding of viral evolution.