Merge pull request #57 from github/add-social_media-support

Add support for social media links
This commit is contained in:
Brandon Rosage 2019-03-05 12:11:09 -06:00 committed by GitHub
commit 991221edda
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 72 additions and 7 deletions

19
_data/social_media.yml Normal file
View file

@ -0,0 +1,19 @@
facebook:
name: Facebook
profile_url_prefix: https://www.facebook.com/
icon_svg: '<svg height="20" class="d-block v-align-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.3 15.4"><path d="M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z" fill="#959da5"/></svg>'
linkedin:
name: LinkedIn
profile_url_prefix: https://www.linkedin.com/in/
icon_svg: '<svg height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 18"><path d="M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z" fill="#959da5"/></svg>'
twitter:
name: Twitter
profile_url_prefix: https://www.twitter.com/
icon_svg: '<svg height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 273.5 222.3"><path d="M273.5 26.3a109.77 109.77 0 0 1-32.2 8.8 56.07 56.07 0 0 0 24.7-31 113.39 113.39 0 0 1-35.7 13.6 56.1 56.1 0 0 0-97 38.4 54 54 0 0 0 1.5 12.8A159.68 159.68 0 0 1 19.1 10.3a56.12 56.12 0 0 0 17.4 74.9 56.06 56.06 0 0 1-25.4-7v.7a56.11 56.11 0 0 0 45 55 55.65 55.65 0 0 1-14.8 2 62.39 62.39 0 0 1-10.6-1 56.24 56.24 0 0 0 52.4 39 112.87 112.87 0 0 1-69.7 24 119 119 0 0 1-13.4-.8 158.83 158.83 0 0 0 86 25.2c103.2 0 159.6-85.5 159.6-159.6 0-2.4-.1-4.9-.2-7.3a114.25 114.25 0 0 0 28.1-29.1" fill="#959da5"/></svg>'
youtube:
name: YouTube
profile_url_prefix: https://www.youtube.com/
icon_svg: '<svg height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.17 13.6"><path d="M18.77 2.13A2.4 2.4 0 0 0 17.09.42C15.59 0 9.58 0 9.58 0a57.55 57.55 0 0 0-7.5.4A2.49 2.49 0 0 0 .39 2.13 26.27 26.27 0 0 0 0 6.8a26.15 26.15 0 0 0 .39 4.67 2.43 2.43 0 0 0 1.69 1.71c1.52.42 7.5.42 7.5.42a57.69 57.69 0 0 0 7.51-.4 2.4 2.4 0 0 0 1.68-1.71 25.63 25.63 0 0 0 .4-4.67 24 24 0 0 0-.4-4.69zM7.67 9.71V3.89l5 2.91z" fill="#959da5"/></svg>'

View file

@ -34,6 +34,19 @@
{{ user.location }}
</div>
{% endif %}
{% if site.social_media %}
<div class="d-flex flex-wrap flex-items-start {% if site.layout == 'stacked' %}flex-justify-center mt-1 mt-md-3{% endif %}">
{% for account in site.social_media %}
<div class="mr-3 mb-3">
{% assign service_shortname = account[0] %}
{% assign service = site.data.social_media[service_shortname] %}
<a href="{{ service.profile_url_prefix }}{{ account[1] }}" title="{{ service.name }}: {{ account[1] }}">
{{ service.icon_svg }}<span class="d-none">{{ service.name }}</span>
</a>
</div>
{% endfor %}
</div>
{% endif %}
{% if user.hireable %}
<span title="Hire me" class="d-inline-block f5 rounded-2 text-white bg-green py-1 px-2">Available for hire</span>
{% endif %}

View file

@ -0,0 +1,13 @@
{% if include.service == 'facebook' %}
{% capture share_url %}
https://www.facebook.com/sharer/sharer.php?u={{ include.permalink | prepend: site.url | prepend: site.baseurl | url_encode }}
{% endcapture %}
{% elsif include.service == 'linkedin' %}
{% capture share_url %}
https://www.linkedin.com/shareArticle?mini=true&url={{ include.permalink | prepend: site.url | prepend: site.baseurl | url_encode }}&title={{ include.title | url_encode }}&source=LinkedIn
{% endcapture %}
{% elsif include.service == 'twitter' %}
{% capture share_url %}
https://twitter.com/share?text={{ include.title | url_encode }}&url={{ include.permalink | prepend: site.url | prepend: site.baseurl | url_encode }}
{% endcapture %}
{% endif %}{{ share_url | strip }}

View file

@ -1,5 +1,27 @@
{% include header.html %}
{% capture post_body %}
{% if site.social_media %}
<div class="col-sm-4 col-lg-3 d-flex flex-wrap flex-items-center d-sm-block float-sm-right border rounded-2 bg-white p-3 mb-5 ml-md-5">
<h3 class="text-gray-dark mr-3 mr-sm-0">Share</h3>
<ul class="d-flex d-sm-block list-style-none">
{% for account in site.social_media %}
<li class="mt-sm-3">
{% assign service_shortname = account[0] %}
{% assign service = site.data.social_media[service_shortname] %}
<a href="{% include social_media_share_url.html service=service_shortname title=page.title permalink=page.url %}" title="Share on {{ service.name }}" class="d-flex flex-items-center">
<div style="width:32px">{{ service.icon_svg }}</div><span class="d-none d-sm-inline-block text-gray-light">{{ service.name }}</span>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
<div class="article">
{{ content }}
</div>
{% endcapture %}
{% if site.layout == 'stacked' %}
<div class="container-lg py-6 p-responsive text-center">
{% include masthead.html metadata=false %}
@ -8,7 +30,7 @@
<p class="f5"><a href="/" class="d-flex flex-items-center">{% octicon chevron-left height:16 class:"mr-2 v-align-middle" fill:#0366d6 aria-label:Home %}Home</a></p>
<h1 class="f00-light lh-condensed">{{ page.title }}</h1>
<p class="{% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %} mb-5">Published {{ page.date | date: "%b %d, %Y"}}</p>
{{ content }}
{{ post_body }}
</div>
</div>
{% else %}
@ -24,9 +46,7 @@
<p class="f5"><a href="{{ site.url }}{{ site.baseurl | append:'/' }}" class="d-flex flex-items-center {% if site.style == 'dark' %}text-white{% endif %}">{% octicon chevron-left height:16 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:Home %}Home</a></p>
<h1 class="f00-light lh-condensed">{{ page.title }}</h1>
<p class="{% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %} mb-5">Published {{ page.date | date: "%b %d, %Y"}}</p>
<div class="article">
{{ content }}
</div>
{{ post_body }}
</div>
</div>
</div>

View file

@ -1,4 +1,4 @@
.highlight { background: #ffffff; }
.highlight { width: 100%; overflow: auto; background: #ffffff; }
.highlight .c { color: #999988; font-style: italic } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { font-weight: bold } /* Keyword */
@ -60,6 +60,6 @@
.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
/* Make line numbers unselectable: excludes line numbers from copy-paste user ops */
.highlight .lineno {-webkit-user-select: none;-moz-user-select: none; -o-user-select: none;}
.highlight .lineno {-webkit-user-select: none;-moz-user-select: none; -o-user-select: none;}
.lineno::-moz-selection {background-color: transparent;} /* Mozilla specific */
.lineno::selection {background-color: transparent;} /* Other major browsers */
.lineno::selection {background-color: transparent;} /* Other major browsers */