From 04a27b7ed9aed228c35561b4ba0cfc7fe79951c1 Mon Sep 17 00:00:00 2001
From: Hannah Henderson <hannah@circleci.com>
Date: Tue, 27 Nov 2018 23:44:27 +0000
Subject: [PATCH] Open social media links in new tab and add Medium icon (#143)
---
layouts/partials/social-follow.html | 60 +++++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 39 insertions(+), 21 deletions(-)
diff --git a/layouts/partials/social-follow.html b/layouts/partials/social-follow.html
index d7ca453..f087fa7 100644
--- a/layouts/partials/social-follow.html
+++ b/layouts/partials/social-follow.html
@@ -1,37 +1,55 @@
<!-- TODO: Add follow intents where available TODO: Revisit color and hover color -->
+<div hidden>
+ <span id="new-window-0">Opens in a new window</span>
+ <span id="new-window-1">Opens an external site</span>
+ <span id="new-window-2">Opens an external site in a new window</span>
+</div>
{{ $icon_size := "32px" }}
{{ with .Param "facebook" }}
- <a href="{{ . }}" class="link-transition facebook link dib z-999 pt3 pt0-l mr2" title="Facebook link">
- {{ partial "svg/facebook.svg" (dict "size" $icon_size) }}
- </a>
+<a href="{{ . }}" target="_blank" class="link-transition facebook link dib z-999 pt3 pt0-l mr1" title="Facebook link" rel="noopener" aria-describedby="new-window-0">
+ {{ partial "svg/facebook.svg" (dict "size" $icon_size) }}
+ {{- partial "new-window-icon.html" . -}}
+</a>
{{ end }}
{{ with .Param "twitter" }}
- <a href="{{ . }}" class="link-transition twitter link dib z-999 pt3 pt0-l mr2" title="Twitter link">
- {{ partial "svg/twitter.svg" (dict "size" $icon_size) }}
- </a>
+<a href="{{ . }}" target="_blank" class="link-transition twitter link dib z-999 pt3 pt0-l mr1" title="Twitter link" rel="noopener" aria-describedby="new-window-0">
+ {{ partial "svg/twitter.svg" (dict "size" $icon_size) }}
+ {{- partial "new-window-icon.html" . -}}
+</a>
{{ end }}
{{ with .Param "instagram" }}
- <a href="{{ . }}" class="link-transition instagram link dib z-999 pt3 pt0-l mr2" title="Instagram link">
- {{ partial "svg/instagram.svg" (dict "size" $icon_size) }}
- </a>
+<a href="{{ . }}" target="_blank" class="link-transition instagram link dib z-999 pt3 pt0-l mr1" title="Instagram link" rel="noopener" aria-describedby="new-window-0">
+ {{ partial "svg/instagram.svg" (dict "size" $icon_size) }}
+ {{- partial "new-window-icon.html" . -}}
+</a>
{{ end }}
{{ with .Param "youtube" }}
- <a href="{{ . }}" class="link-transition youtube link dib z-999 pt3 pt0-l mr2" title="Youtube link">
- {{ partial "svg/youtube.svg" (dict "size" $icon_size) }}
- </a>
+<a href="{{ . }}" target="_blank" class="link-transition youtube link dib z-999 pt3 pt0-l mr1" title="Youtube link" rel="noopener" aria-describedby="new-window-0">
+ {{ partial "svg/youtube.svg" (dict "size" $icon_size) }}
+ {{- partial "new-window-icon.html" . -}}
+</a>
{{ end }}
{{ with .Param "linkedin" }}
- <a href="{{ . }}" class="link-transition linkedin link dib z-999 pt3 pt0-l mr2" title="LinkedIn link">
- {{ partial "svg/linkedin.svg" (dict "size" $icon_size) }}
- </a>
+<a href="{{ . }}" target="_blank" class="link-transition linkedin link dib z-999 pt3 pt0-l mr1" title="LinkedIn link" rel="noopener" aria-describedby="new-window-0">
+ {{ partial "svg/linkedin.svg" (dict "size" $icon_size) }}
+ {{- partial "new-window-icon.html" . -}}
+</a>
{{ end }}
{{ with .Param "github" }}
- <a href="{{ . }}" class="link-transition github link dib z-999 pt3 pt0-l mr2" title="Github link">
- {{ partial "svg/github.svg" (dict "size" $icon_size) }}
- </a>
+<a href="{{ . }}" target="_blank" class="link-transition github link dib z-999 pt3 pt0-l mr1" title="Github link" rel="noopener" aria-describedby="new-window-0">
+ {{ partial "svg/github.svg" (dict "size" $icon_size) }}
+ {{- partial "new-window-icon.html" . -}}
+</a>
{{ end }}
{{ with .Param "gitlab" }}
- <a href="{{ . }}" class="link-transition gitlab link dib z-999 pt3 pt0-l mr2" title="Gitlab link">
- {{ partial "svg/gitlab.svg" (dict "size" $icon_size) }}
- </a>
+<a href="{{ . }}" target="_blank" class="link-transition gitlab link dib z-999 pt3 pt0-l mr1" title="Gitlab link" rel="noopener" aria-describedby="new-window-0">
+ {{ partial "svg/gitlab.svg" (dict "size" $icon_size) }}
+ {{- partial "new-window-icon.html" . -}}
+</a>
{{ end }}
+{{ with .Param "medium" }}
+<a href="{{ . }}" target="_blank" class="link-transition medium link dib z-999 pt3 pt0-l mr1" title="Medium link" rel="noopener" aria-describedby="new-window-0">
+ {{ partial "svg/medium.svg" (dict "size" $icon_size) }}
+ {{- partial "new-window-icon.html" . -}}
+</a>
+{{ end }}
\ No newline at end of file
--
Gitblit v1.10.0