Use URI templates for social network links (daattali#586)

Author: cketti

_data/SocialNetworks.yml

@@ -2,91 +2,90 @@
 # Use the same key you added in _config.yml -> social-network-links.
 # In addition to that you need to specify the following properties:
 #   name: Specify a user-friendly name that will be used as a link title
-#   baseURL: Define a base URL which will be combined with the value of
-#            site.social-network-links.<key>
+#   urlTemplate: Define a URL template. The variable {value} will be replaced
+#                with the value of site.social-network-links.<key>
 #   icon: Specify a valid fontawesome icon class
 
 facebook:
   name: "Facebook"
-  baseURL: "https://www.facebook.com/"
+  urlTemplate: "https://www.facebook.com/{value}"
   icon: "fa-facebook"
 
 github:
   name: "GitHub"
-  baseURL: "https://github.com/"
+  urlTemplate: "https://github.com/{value}"
   icon: "fa-github"
 
 twitter:
   name: "Twitter"
-  baseURL: "https://twitter.com/"
+  urlTemplate: "https://twitter.com/{value}"
   icon: "fa-twitter"
 
 reddit:
   name: "Reddit"
-  baseURL: "https://reddit.com/u/"
+  urlTemplate: "https://reddit.com/u/{value}"
   icon: "fa-reddit"
 
 email:
   name: "Email me"
-  baseURL: "mailto:"
+  urlTemplate: "mailto:{value}"
   icon: "fa-envelope"
 
 linkedin:
   name: "LinkedIn"
-  baseURL: "https://linkedin.com/in/"
+  urlTemplate: "https://linkedin.com/in/{value}"
   icon: "fa-linkedin"
 
 xing:
   name: "Xing"
-  baseURL: "https://www.xing.com/profile/"
+  urlTemplate: "https://www.xing.com/profile/{value}"
   icon: "fa-xing"
 
 stackoverflow:
   name: "StackOverflow"
-  baseURL: "https://stackoverflow.com/users/"
+  urlTemplate: "https://stackoverflow.com/users/{value}"
   icon: "fa-stack-overflow"
 
 snapchat:
   name: "Snapchat"
-  baseURL: "https://www.snapchat.com/add/"
+  urlTemplate: "https://www.snapchat.com/add/{value}"
   icon: "fa-snapchat-ghost"
 
 instagram:
   name: "Instagram"
-  baseURL: "https://www.instagram.com/"
+  urlTemplate: "https://www.instagram.com/{value}"
   icon: "fa-instagram"
 
 youtube:
   name: "YouTube"
-  baseURL: "https://www.youtube.com/"
+  urlTemplate: "https://www.youtube.com/{value}"
   icon: "fa-youtube"
 
 spotify:
   name: "Spotify"
-  baseURL: "https://open.spotify.com/user/"
+  urlTemplate: "https://open.spotify.com/user/{value}"
   icon: "fa-spotify"
 
 telephone:
   name: "Phone"
-  baseURL: "tel:"
+  urlTemplate: "tel:{value}"
   icon: "fa-phone"
 
 rss:
   name: "RSS"
-  baseURL: "{{ '/feed.xml' | relative_url }}"
   icon: "fa-rss"
 
 steam:
   name: "Steam"
-  baseURL: "https://steamcommunity.com/id/"
+  urlTemplate: "https://steamcommunity.com/id/{value}"
   icon: "fa-steam"
 
 twitch:
   name: "Twitch"
-  baseURL: "https://www.twitch.tv/"
+  urlTemplate: "https://www.twitch.tv/{value}"
   icon: "fa-twitch"
 
 yelp:
   name: "Yelp"
-  baseURL: "https://{{ site.author.yelp }}.yelp.com"
+  urlTemplate: "https://{value}.yelp.com"
   icon: "fa-yelp"

_includes/footer.html

@@ -6,14 +6,15 @@
           {%- for link in site.social-network-links -%}
             {%- assign curkey = link[0] -%}
             {%- assign element = site.data.SocialNetworks[curkey] -%}
-            <li>
             {%- if curkey == 'rss' -%}
-              <a href="{{ '/feed.xml' | relative_url }}" title="{{ element.name }}">
-            {%- elsif curkey == 'yelp' -%}
-              <a href="https://{{ site.social-network-links[curkey] }}.yelp.com" title="{{ element.name }}">
+              {%- capture url -%}{{ '/feed.xml' | relative_url }}{%- endcapture -%}
             {%- else -%}
-              <a href="{{element.baseURL}}{{ site.social-network-links[curkey] }}" title="{{ element.name }}">
+              {%- assign value = site.social-network-links[curkey] -%}
+              {%- assign placeholder = "{value}" -%}
+              {%- capture url -%}{{ element.urlTemplate | replace: placeholder, value }}{%- endcapture -%}
             {%- endif -%}
+            <li>
+              <a href="{{ url }}" title="{{ element.name }}">
                 <span class="fa-stack fa-lg" aria-hidden="true">
                   <i class="fa fa-circle fa-stack-2x"></i>
                   <i class="fa {{ element.icon }} fa-stack-1x fa-inverse"></i>