Feature: Added post sharing options.

Also added a license statement at the bottom of the posts.

_data/share.yml

@@ -0,0 +1,29 @@
+#  Sharing options at the bottom of the post.
+#  Icons from <https://fontawesome.com/>
+#
+#  v2.1
+#  https://github.com/cotes2020/jekyll-theme-chirpy
+#  © 2020 Cotes Chung
+#  MIT Licensed
+
+label: "Share"
+
+platforms:
+  -
+    type: Twitter
+    icon: "fab fa-twitter"
+    link: "https://twitter.com/intent/tweet?text=TITLE&url=URL"
+  -
+    type: Facebook
+    icon: "fab fa-facebook-square"
+    link: "https://www.facebook.com/sharer/sharer.php?title=TITLE&u=URL"
+  -
+    type: Telegram
+    icon: "fab fa-telegram"
+    link: "https://telegram.me/share?text=TITLE&url=URL"
+
+  # Uncomment below if you need to.
+  # -
+  #   type: Weibo
+  #   icon: "fab fa-weibo"
+  #   link: "http://service.weibo.com/share/share.php?title=TITLE&url=URL"

_includes/post-nav.html

@@ -0,0 +1,28 @@
+<!--
+  Navigation buttons at the bottom of the post.
+
+  v2.1
+  https://github.com/cotes2020/jekyll-theme-chirpy
+  © 2020 Cotes Chung
+  MIT License
+-->
+
+<div class="post-navigation d-flex justify-content-between">
+  {% if page.previous.url %}
+  <a href="{{ site.baseurl }}{{ page.previous.url }}" class="btn btn-outline-primary">
+    <p>{{ page.previous.title }}</p>
+  {% else %}
+  <a href="javascript:;" class="btn btn-outline-primary disabled">
+    <p>-</p>
+  {% endif %}
+  </a>
+
+  {% if page.next.url %}
+  <a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary">
+    <p>{{ page.next.title }}</p>
+  {% else %}
+    <a href="javascript:;" class="btn btn-outline-primary disabled">
+    <p>-</p>
+  {% endif %}
+  </a>
+</div>

_includes/post-sharing.html

@@ -0,0 +1,28 @@
+<!--
+ Post sharing snippet
+
+ v2.1
+ https://github.com/cotes2020/jekyll-theme-chirpy
+ © 2019 Cotes Chung
+ Published under the MIT License
+-->
+
+<div class="share-wrapper">
+  <span class="share-label ml-1 mr-1">{{ site.data.share.label }}</span>
+  <span class="share-icon">
+    {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
+    {% assign url = page.url | relative_url | prepend: site.url %}
+
+    {% for share in site.data.share.platforms %}
+      {% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %}
+        <a href="{{ link }}" data-toggle="tooltip" data-placement="top"
+          title="{{ share.type }}" target="_blank">
+          <i class="fa-fw {{ share.icon }} mr-1"></i>
+        </a>
+    {% endfor %}
+
+    <i class="fa-fw fas fa-link mr-1 small" onclick="copyLink()"
+        data-toggle="tooltip" data-placement="top" title="Copy link"></i>
+
+  </span>
+</div>

_includes/related-posts.html

@@ -43,7 +43,7 @@
   {% assign score_list = score_list | sort | reverse %}
   {% assign count = 0 %}
   <div id="related-posts" class="mt-4 mb-2 mb-sm-4 pb-2">
-    <h3 class="pt-2 mt-1 mb-4" data-toc-skip>{{ site.data.label.post.relate_posts }}</h3>
+    <h3 class="pt-2 mt-1 mb-4 ml-1" data-toc-skip>{{ site.data.label.post.relate_posts }}</h3>
     <div class="card-deck mb-4">
     {% for score_item in score_list %}
       {% assign data = score_item | split: ":" %}

_layouts/post.html

@@ -66,10 +66,11 @@ layout: default
         {% endif %}
       </div>
 
-      <div class="post-tail text-muted">
+      <div class="post-tail-wrapper text-muted">
+
         <!-- Tags -->
         {% if page.tags.size > 0 %}
-        <div class="mb-4">
+        <div class="pt-5">
           {% for tag in page.tags %}
           <a href="{{ site.baseurl }}/tags/{{ tag | replace: ' ', '-' | downcase | url_encode }}/"
             class="post-tag no-text-decoration" >
@@ -78,9 +79,31 @@ layout: default
           {% endfor %}
           </div>
         {% endif %}
+
+        <div class="post-tail-bottom
+          d-flex justify-content-between align-items-center pt-5 pb-2">
+
+          {% if site.data.license.type %}
+          <div class="license-wrapper">
+            <span class="license-text ml-1 mr-1">This post is licensed under
+              <a href="{{ site.data.license.link }}">
+              {{ site.data.license.type }}
+              {% for icon in site.data.license.icons %}
+                <i class="{{ icon }}"></i>
+              {% endfor %}
+              </a>
+            </span>
+          </div>
+          {% endif %}
+
+          {% include post-sharing.html %}
+
+        </div><!-- .post-tail-bottom -->
+
       </div><!-- div.post-tail -->
 
     </div> <!-- .post -->
+
   </div> <!-- #post-wrapper -->
 
   {% include panel.html %}
@@ -91,31 +114,14 @@ layout: default
   <div id="post-extend-wrapper" class="col-12 col-lg-11 col-xl-8">
 
     <div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
+
       {% include related-posts.html %}
 
-      <div class="post-navigation d-flex justify-content-between">
+      {% include post-nav.html %}
-      {% if page.previous.url %}
-        <a href="{{ site.baseurl }}{{ page.previous.url }}" class="btn btn-outline-primary">
-          <p>{{ page.previous.title }}</p>
-      {% else %}
-        <a href="javascript:;" class="btn btn-outline-primary disabled">
-          <p>-</p>
-      {% endif %}
-        </a>
 
-      {% if page.next.url %}
+      {% if site.disqus.comments and page.comments %}
-        <a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary">
+        {% include disqus.html %}
-          <p>{{ page.next.title }}</p>
-      {% else %}
-        <a href="javascript:;" class="btn btn-outline-primary disabled">
-          <p>-</p>
       {% endif %}
-        </a>
-      </div> <!-- div.post-navigation -->
-
-    {% if site.disqus.comments and page.comments %}
-      {% include disqus.html %}
-    {% endif %}
 
     </div> <!-- .pl-1 pr-1 -->
 

assets/css/_dark/dark-main.scss

@@ -45,6 +45,7 @@
   --tb-odd-bg: rgba(52, 53, 42, 0.52); /* odd rows of the posts' table */
   --tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */
   --footnote-target-bg: rgb(63, 81, 181);
+  --btn-sharing: #6c757d;
 
   hr {
     border-color: var(--main-border);

assets/css/main.scss

@@ -720,6 +720,7 @@ p>a, span>a,
 .post a:hover code,
 footer a:hover,
 #post-wrapper .post-content a:hover,
+.license-wrapper .license-text a:hover,
 #page .post-content a:hover,
 #access-lastmod a:hover {
   color: #d2603a;
@@ -798,11 +799,14 @@ table tbody td {
   background: var(--tag-bg, rgba(0, 0, 0, 0.075));
   border-radius: .34rem;
   padding: 0 .4rem;
-  margin: 0 .1rem;
   color: #818182;
   line-height: 1.6rem;
 }
 
+.post-tag:not(:first-child) {
+  margin-left: .2rem;
+}
+
 .tag:hover,
 .post-tag:hover {
   background: var(--tag-hover, rgb(222, 226, 230));

assets/css/post.scss

@@ -21,7 +21,7 @@
   transform: translateX(-50%);
 }
 
-.post-tail {
+.post-tail-wrapper {
   margin-top: 3.5rem;
   border-bottom: 1px double var(--main-border, #e9ecef);
   font-size: 0.85rem;
@@ -196,6 +196,80 @@
   min-height: 2rem;
 }
 
+.post-tail-bottom a {
+  color: inherit;
+}
+
+.share-wrapper a:hover,
+.share-wrapper i:hover {
+  text-decoration: none;
+  color: var(--link-color, #2a408e)!important;
+}
+
+.share-wrapper {
+  vertical-align: middle;
+  user-select: none;
+}
+
+.share-label {
+  font-family: 'Oswald', sans-serif;
+}
+
+.share-label::after {
+  content: ":";
+}
+
+.share-wrapper .share-icon {
+  font-size: 1.2rem;
+}
+
+.share-wrapper .share-icon .fab.fa-twitter {
+  color: var(--btn-sharing, rgba(29,161,242,1.00));
+}
+
+.share-wrapper .share-icon .fab.fa-facebook-square {
+  color: var(--btn-sharing, rgb(66, 95, 156));
+}
+
+.share-wrapper .share-icon .fab.fa-telegram {
+  color: var(--btn-sharing, rgb(39, 159, 217));
+}
+
+.share-wrapper .share-icon .fab.fa-weibo {
+  color: var(--btn-sharing, rgb(229, 20, 43));
+}
+
+.share-wrapper .fas.fa-link {
+  color: var(--btn-sharing, rgb(171, 171, 171));
+}
+
+.license-wrapper .license-text>a {
+  font-weight: 600;
+}
+
+.license-wrapper {
+  line-height: 1.2rem;
+}
+
+.license-wrapper i {
+  font-weight: 400;
+}
+
+.license-wrapper span:last-child {
+  font-size: .85rem;
+}
+
+@media all and (max-width: 576px) {
+  .post-tail-bottom {
+    -ms-flex-wrap: wrap!important;
+    flex-wrap: wrap!important;
+  }
+
+  .post-tail-bottom>div:first-child {
+    margin-bottom: 1rem;
+  }
+}
+
 @media all and (max-width: 768px) {
   .post img {
     max-width: calc(100% + 1rem);
@@ -241,6 +315,7 @@
     margin-left: -.5rem;
     margin-right: -.5rem;
   }
+
 }
 
 /*

assets/js/_src/_commons/copy-link.js

@@ -0,0 +1,19 @@
+/*
+* Copy current page url to clipboard.
+* v2.1
+* https://github.com/cotes2020/jekyll-theme-chirpy
+* © 2020 Cotes Chung
+* MIT License
+*/
+
+function copyLink() {
+  var url = window.location.href;
+  var $temp = $("<input>");
+
+  $("body").append($temp);
+  $temp.val(url).select();
+  document.execCommand("copy");
+  $temp.remove();
+
+  alert("Link copied successfully!");
+}

assets/js/dist/_commons/copy-link.min.js

@@ -0,0 +1 @@
+function copyLink(){var a=window.location.href;var b=$("<input>");$("body").append(b);b.val(a).select();document.execCommand("copy");b.remove();alert("Link copied successfully!")};

assets/js/dist/commons.js

@@ -9,4 +9,5 @@
 {% include_relative _commons/sidebar.min.js %}
 {% include_relative _commons/topbar-switch.min.js %}
 {% include_relative _commons/topbar-title.min.js %}
-{% include_relative _commons/tooltip.min.js %}
+{% include_relative _commons/tooltip.min.js %}
+{% include_relative _commons/copy-link.min.js %}