add support for dynamic "share" links on posts

GuyStone · Mar 4, 2019 · 415b995 · 415b995
1 parent 3c8532a
commit 415b995
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3 deletions.
diff --git a/_includes/social_media_share_url.html b/_includes/social_media_share_url.html
@@ -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 }}
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -24,6 +24,22 @@ <h1 class="f00-light lh-condensed">{{ page.title }}</h1>
             <p class="f5"><a href="/" 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>
+            {% 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="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>

diff --git a/_sass/_highlight-syntax.scss b/_sass/_highlight-syntax.scss
@@ -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 */