You may have heard of Jekyll. It is a simple static site generator that you can use to create blogs and websites in general to expose your thoughts and content. Most of people use Jekyll as it is a ready to use solution for Github Pages, a free place on the Internet where you can host a website.
Jekyll Now is a Jekyll theme that integrates already most of the features that you need for your blog, such as adding content using Markdown or YAML, styling using SASS and mobile responsive support. Although the coolness of Jekyll Now, it has a downside which is that it hasn't been updated for more than two years now (last commit on April, 2018). The lack of updates scars some of the features it provides. One of these scar features is social media referring on the footer of your blog.
Jekyll Now has a main configuration file name _config.yml. When you stumble upon it, you notice that you can refer your social media profile, which will later be shown as an icon that upon clicking will redirect to your profile. For example you can reference your Github page, Twitter profile or even LinkedIn. However you can't reference your dev.to or even Medium profile. To enable we need to dig deep in Jekyll Now "engine" and perform some updates.
Heading over to _includes folder we notice a file with references for the available footer links: svg-icons.html. This is the first step to include our custom footer social media link, the HTML. By copying one of the lines and replacing the website name with dev.to, we create a reference link for DEV.
{% if site.footer-links.dev-to %}<a href="https://dev.to/{{ site.footer-links.dev-to }}"><i class="svg-icon dev-to"></i></a>{% endif %}
Once having the HTML defined, we need to customize it, by adding some CSS. You may have noticed that the footer element is composed by an <i> element that refers a CSS class: svg-icon. If it is referring some CSS class, then this class must be also living on the engine. As referred before, Jekyll Now uses SASS for styling. A folder named _sass can be found, which includes the styling for svg-icon. Similar to what has been done before on svg-icons.html, by opening _svg-icons.scss we can extend the class to support the dev.to icon. Copying a line and replacing previous references with what was defined in the <i> element will style the HTML element that we just created. Just make sure to correctly refer the base64 string of the icon SVG icon and adopt the icon size (otherwise SVG layers may be displayed duplicated).
&.dev-to{ background-image: url(data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjxwYXRoICBmaWxsPSIjMDAwMDAwIiBkPSJNMTIwLjEyIDIwOC4yOWMtMy44OC0yLjktNy43Ny00LjM1LTExLjY1LTQuMzVIOTEuMDN2MTA0LjQ3aDE3LjQ1YzMuODggMCA3Ljc3LTEuNDUgMTEuNjUtNC4zNSAzLjg4LTIuOSA1LjgyLTcuMjUgNS44Mi0xMy4wNnYtNjkuNjVjLS4wMS01LjgtMS45Ni0xMC4xNi01LjgzLTEzLjA2ek00MDQuMSAzMkg0My45QzE5LjcgMzIgLjA2IDUxLjU5IDAgNzUuOHYzNjAuNEMuMDYgNDYwLjQxIDE5LjcgNDgwIDQzLjkgNDgwaDM2MC4yYzI0LjIxIDAgNDMuODQtMTkuNTkgNDMuOS00My44Vjc1LjhjLS4wNi0yNC4yMS0xOS43LTQzLjgtNDMuOS00My44ek0xNTQuMiAyOTEuMTljMCAxOC44MS0xMS42MSA0Ny4zMS00OC4zNiA0Ny4yNWgtNDYuNFYxNzIuOThoNDcuMzhjMzUuNDQgMCA0Ny4zNiAyOC40NiA0Ny4zNyA0Ny4yOGwuMDEgNzAuOTN6bTEwMC42OC04OC42NkgyMDEuNnYzOC40MmgzMi41N3YyOS41N0gyMDEuNnYzOC40MWg1My4yOXYyOS41N2gtNjIuMThjLTExLjE2LjI5LTIwLjQ0LTguNTMtMjAuNzItMTkuNjlWMTkzLjdjLS4yNy0xMS4xNSA4LjU2LTIwLjQxIDE5LjcxLTIwLjY5aDYzLjE5bC0uMDEgMjkuNTJ6bTEwMy42NCAxMTUuMjljLTEzLjIgMzAuNzUtMzYuODUgMjQuNjMtNDcuNDQgMGwtMzguNTMtMTQ0LjhoMzIuNTdsMjkuNzEgMTEzLjcyIDI5LjU3LTExMy43MmgzMi41OGwtMzguNDYgMTQ0Ljh6Ij48L3BhdGg+PC9zdmc+);}
The final step is to edit the _config.yml file to include our dev-to profile display. Under the footer-links collection, add the following tag:
dev-to: <your_dev.to_username>
That's it. If everything went well, you should see the dev.to icon on the footer of your blog and when clicking on it, it should redirect to your profile!
Top comments (0)