Okay- so- I added a button for my email on the home page and it was a journey. There is certainly a better way to do it but here are the steps I took:

1. Find the code that generates those icons in this template
2. Make an email icon
3. make it show up
4. on click make it copy my email to your clipboard
5. also on click change the icon to a check box to show it is copied
6. after a couple seconds change it back

okay so the first thing I did was use ripgrep to search the entire project for mentions of linkedin (because I knew there was a linkedin icon). This lead me to the svg partial and boy oh boy that sure was something. From there I found a gmail icon but it wasn’t as pretty as I wanted it to be so I found a public domain envelope logo which I liked better and added that to svg.

Now I needed the element to be a button and also call some javascript on click so I modified home.html since that’s the page with the icons and added a check in the “draw icons” loop that checks specifically if you are drawing the mail icon and then does custom behavior. This should all be put into some sort of function or other shortcode/partial- something, I’m still learning hugo, but eventually this should be cleaned up so it is more maintainable. The rest was just javascript.

{{ with site.Params.social }}
<div class="social-icons">
    {{- range . }}
      {{- if (ne .name "mail")}}
      <a href="{{ trim .url " " | safeURL }}" target="_blank"
          rel="noopener noreferrer me"
          title="{{ (.title | default .name) | title }}">
          {{ partial "svg.html" . }}
      </a>
      {{- else }}
      <script>
        function revert_clip() {
          var icon = document.getElementById("check_icon");
          var mail_svg = "{{ partial "svg.html" . }}";
          icon.outerHTML = mail_svg;
        }

        function email2clip() {
          // copy to clipboard
          navigator.clipboard.writeText("{{.address}}");
          // convert icon to checkbox for a few seconds then revert back
          var icon = document.getElementById("mail_icon");
          var checkbox_svg = "{{ partial "checkbox_svg.html" . }}";
          icon.outerHTML = checkbox_svg;
          setTimeout(function() { revert_clip(icon); }, 2000);
        }
      </script>
      <a id="email_button">
        <button onclick="email2clip()"
            title="{{ (.title | default .name) | title }}">
            {{ partial "svg.html" . }}
        </button>
      </a>
      {{- end }}
    {{- end }}
</div>
{{ end }}

Always remember your css #

While trying to add the “Email Copied!” text it was getting cut off at the edges. I tried changing the svg viewport but that scaled it so the height was miniscule. Eventually I remembered that the css exists so I fixed the css I’d writen for that class and that fixed the scaling issue.

Now if you want something to do you can go to the /home page and click the email button a bunch of times.