Jekyll2023-03-23T06:29:57+00:00//vivekkrish.com/feed.xmlVivek KrishnakumarPersonal website of Vivek Krishnakumar, a Bioinformatics Engineer working at IlluminaVivek KrishnakumarAdding and Configuring Social Links2017-08-14T10:15:00+00:002017-08-14T10:15:00+00:00//vivekkrish.com/adding-configuring-social-links<h2 id="summary">Summary:</h2>
<p>The Indigo theme allows users to maintain and display a selection of links to their social presence.
A recent modification to this functionality makes configuring and maintaining these links, very easy.</p>
<h3 id="index">Index</h3>
<ul>
<li><a href="#background">Background</a></li>
<li><a href="#improvements">Improvements</a></li>
<li><a href="#compatibility">Compatibility</a></li>
<li><a href="#additions-for-scientific-users">Additions for scientific users</a></li>
</ul>
<hr />
<h2 id="background">Background</h2>
<p>Traditionally, a pre-defined set of social links were made available for the user to enable/disable, via the use of named configuration variables in <code class="language-plaintext highlighter-rouge">_config.yml</code>, like so:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>facebook: myfacebook
twitter: mytwitter
# google: mygoogle
# instagram: myinstagram
# pinterest: mypinterest
linkedin: mylinkedin
youtube: myyoutube
spotify: myspotify
github: mygithub
email: myemail@gmail.com
</code></pre></div></div>
<p>Depending on which links were required, the user would un-comment (remove the ‘#’ symbol at the beginning of the line) specific lines of the config and replace the dummy names (<strong>myfacebook</strong>, <strong>mytwitter</strong>, etc.) with their actual IDs from each of the sites.</p>
<p>Once enabled, the <a href="https://github.com/vivekkrish/vivekkrish.github.io/blob/76d0b3c52bd2e4fac69ff1b99eb58f01947e4ae2/_includes/social-links.html"><code class="language-plaintext highlighter-rouge">_includes/social-links.html</code></a> file would rely on the configs and display the corresponding set of links along with icon assets from <a href="https://github.com/vivekkrish/vivekkrish.github.io/blob/master/_includes/icons.html"><code class="language-plaintext highlighter-rouge">_include/icons.html</code></a>.</p>
<h2 id="improvements">Improvements</h2>
<p>With the existing implementation, it was not very easy to add new links or re-order them on the home page. To make this process easier, the following improvements were made.</p>
<ul>
<li>
<p>The manifest of social links was moved to a <a href="http://yaml.org">YAML</a> formatted data file, <a href="https://github.com/vivekkrish/vivekkrish.github.io/blob/master/_data/social-links.yml"><code class="language-plaintext highlighter-rouge">_data/social-links.yml</code></a>, which stores the social site <code class="language-plaintext highlighter-rouge">name</code> (e.g. <strong>facebook</strong>), <code class="language-plaintext highlighter-rouge">url-prefix</code> (e.g. <strong>facebook.com/</strong>), <code class="language-plaintext highlighter-rouge">url-scheme</code> (e.g. <strong>https://</strong>) and <code class="language-plaintext highlighter-rouge">icon</code> name (only required, if the <code class="language-plaintext highlighter-rouge">icon</code> name was different from the social site <code class="language-plaintext highlighter-rouge">name</code>).</p>
<p>Here are some sample configurations:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> - name: facebook
url-prefix: facebook.com/
- name: twitter
url-prefix: twitter.com/
- name: lanyrd
url-prefix: lanyrd.com/
url-scheme: 'http://'
icon: microphone
- name: email
url-scheme: 'mailto:'
icon: mail
</code></pre></div> </div>
</li>
<li>
<p>The updated <a href="https://github.com/vivekkrish/vivekkrish.github.io/blob/master/_includes/social-links.html"><code class="language-plaintext highlighter-rouge">_includes/social-links.html</code></a> file iterates over the entries in <code class="language-plaintext highlighter-rouge">_data/social-links.yml</code>, and makes use of the actual IDs configured in <code class="language-plaintext highlighter-rouge">_config.yml</code> along with the icons in <code class="language-plaintext highlighter-rouge">_includes/icons.html</code> to render the linkouts.</p>
</li>
<li>
<p>A new configuration variable called <code class="language-plaintext highlighter-rouge">social-links-order</code> in <code class="language-plaintext highlighter-rouge">_config.yml</code> allows the user to specify the explicit ordering of the linkouts (which overrides the listed order in <code class="language-plaintext highlighter-rouge">_data/social-links.yml</code> manifest file). For example:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> social-links-order: [github, facebook, twitter, medium, email]
</code></pre></div> </div>
</li>
</ul>
<h2 id="compatibility">Compatibility</h2>
<p>These changes are fully backward compatible with the previous social link configuration set in <code class="language-plaintext highlighter-rouge">_config.yml</code>. No changes are needed as long as you did not make modifications to your own <a href="https://github.com/vivekkrish/vivekkrish.github.io/blob/76d0b3c52bd2e4fac69ff1b99eb58f01947e4ae2/_includes/social-links.html"><code class="language-plaintext highlighter-rouge">_includes/social-links.html</code></a>.</p>
<p>If you use the new <code class="language-plaintext highlighter-rouge">social-links-order</code> variable, ensure that you add all the social media names to the list, otherwise they will not show up.</p>
<h2 id="additions-for-scientific-users">Additions for scientific users</h2>
<p>For users in the scientific/academic fields who wish to link out to relevant resources that track their publication records, citation impact metrics, etc., Indigo now offers a set of scientific social linkouts to the following websites:</p>
<ul>
<li><strong>Google Scholar</strong></li>
<li><strong>ResearchGate</strong></li>
<li><strong>Mendeley</strong></li>
<li><strong>PubMed</strong></li>
<li><strong>ORCiD</strong></li>
<li><strong>Impactstory</strong></li>
<li><strong>figshare</strong></li>
</ul>vivekkrishSummary: