Skip to content

Commit 2da564e

Browse files
cotes2020cotes2020
committed
Feature: Added post sharing options.
 Also added a license statement at the bottom of the posts.
1 parent 046b781 commit 2da564e

11 files changed

Lines changed: 220 additions & 28 deletions

File tree

‎_data/share.yml‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Sharing options at the bottom of the post.
2+
# Icons from <https://fontawesome.com/>
3+
#
4+
# v2.1
5+
# https://github.com/cotes2020/jekyll-theme-chirpy
6+
# © 2020 Cotes Chung
7+
# MIT Licensed
8+
9+
label: "Share"
10+
11+
platforms:
12+
-
13+
type: Twitter
14+
icon: "fab fa-twitter"
15+
link: "https://twitter.com/intent/tweet?text=TITLE&url=URL"
16+
-
17+
type: Facebook
18+
icon: "fab fa-facebook-square"
19+
link: "https://www.facebook.com/sharer/sharer.php?title=TITLE&u=URL"
20+
-
21+
type: Telegram
22+
icon: "fab fa-telegram"
23+
link: "https://telegram.me/share?text=TITLE&url=URL"
24+
25+
# Uncomment below if you need to.
26+
# -
27+
# type: Weibo
28+
# icon: "fab fa-weibo"
29+
# link: "http://service.weibo.com/share/share.php?title=TITLE&url=URL"

‎_includes/post-nav.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!--
2+
Navigation buttons at the bottom of the post.
3+
4+
v2.1
5+
https://github.com/cotes2020/jekyll-theme-chirpy
6+
© 2020 Cotes Chung
7+
MIT License
8+
-->
9+
10+
<div class="post-navigation d-flex justify-content-between">
11+
{% if page.previous.url %}
12+
<a href="{{ site.baseurl }}{{ page.previous.url }}" class="btn btn-outline-primary">
13+
<p>{{ page.previous.title }}</p>
14+
{% else %}
15+
<a href="javascript:;" class="btn btn-outline-primary disabled">
16+
<p>-</p>
17+
{% endif %}
18+
</a>
19+
20+
{% if page.next.url %}
21+
<a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary">
22+
<p>{{ page.next.title }}</p>
23+
{% else %}
24+
<a href="javascript:;" class="btn btn-outline-primary disabled">
25+
<p>-</p>
26+
{% endif %}
27+
</a>
28+
</div>

‎_includes/post-sharing.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!--
2+
Post sharing snippet
3+
4+
v2.1
5+
https://github.com/cotes2020/jekyll-theme-chirpy
6+
© 2019 Cotes Chung
7+
Published under the MIT License
8+
-->
9+
10+
<div class="share-wrapper">
11+
<span class="share-label ml-1 mr-1">{{ site.data.share.label }}</span>
12+
<span class="share-icon">
13+
{% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
14+
{% assign url = page.url | relative_url | prepend: site.url %}
15+
16+
{% for share in site.data.share.platforms %}
17+
{% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %}
18+
<a href="{{ link }}" data-toggle="tooltip" data-placement="top"
19+
title="{{ share.type }}" target="_blank">
20+
<i class="fa-fw {{ share.icon }} mr-1"></i>
21+
</a>
22+
{% endfor %}
23+
24+
<i class="fa-fw fas fa-link mr-1 small" onclick="copyLink()"
25+
data-toggle="tooltip" data-placement="top" title="Copy link"></i>
26+
27+
</span>
28+
</div>

‎_includes/related-posts.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
{% assign score_list = score_list | sort | reverse %}
4444
{% assign count = 0 %}
4545
<div id="related-posts" class="mt-4 mb-2 mb-sm-4 pb-2">
46-
<h3 class="pt-2 mt-1 mb-4" data-toc-skip>{{ site.data.label.post.relate_posts }}</h3>
46+
<h3 class="pt-2 mt-1 mb-4 ml-1" data-toc-skip>{{ site.data.label.post.relate_posts }}</h3>
4747
<div class="card-deck mb-4">
4848
{% for score_item in score_list %}
4949
{% assign data = score_item | split: ":" %}

‎_layouts/post.html‎

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,11 @@ <h1 data-toc-skip>{{ page.title }}</h1>
6666
{% endif %}
6767
</div>
6868
69-
<div class="post-tail text-muted">
69+
<div class="post-tail-wrapper text-muted">
70+
7071
<!-- Tags -->
7172
{% if page.tags.size > 0 %}
72-
<div class="mb-4">
73+
<div class="pt-5">
7374
{% for tag in page.tags %}
7475
<a href="{{ site.baseurl }}/tags/{{ tag | replace: ' ', '-' | downcase | url_encode }}/"
7576
class="post-tag no-text-decoration" >
@@ -78,9 +79,31 @@ <h1 data-toc-skip>{{ page.title }}</h1>
7879
{% endfor %}
7980
</div>
8081
{% endif %}
82+
83+
<div class="post-tail-bottom
84+
d-flex justify-content-between align-items-center pt-5 pb-2">
85+
86+
{% if site.data.license.type %}
87+
<div class="license-wrapper">
88+
<span class="license-text ml-1 mr-1">This post is licensed under
89+
<a href="{{ site.data.license.link }}">
90+
{{ site.data.license.type }}
91+
{% for icon in site.data.license.icons %}
92+
<i class="{{ icon }}"></i>
93+
{% endfor %}
94+
</a>
95+
</span>
96+
</div>
97+
{% endif %}
98+
99+
{% include post-sharing.html %}
100+
101+
</div><!-- .post-tail-bottom -->
102+
81103
</div><!-- div.post-tail -->
82104

83105
</div> <!-- .post -->
106+
84107
</div> <!-- #post-wrapper -->
85108

86109
{% include panel.html %}
@@ -91,31 +114,14 @@ <h1 data-toc-skip>{{ page.title }}</h1>
91114
<div id="post-extend-wrapper" class="col-12 col-lg-11 col-xl-8">
92115

93116
<div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
117+
94118
{% include related-posts.html %}
95119

96-
<div class="post-navigation d-flex justify-content-between">
97-
{% if page.previous.url %}
98-
<a href="{{ site.baseurl }}{{ page.previous.url }}" class="btn btn-outline-primary">
99-
<p>{{ page.previous.title }}</p>
100-
{% else %}
101-
<a href="javascript:;" class="btn btn-outline-primary disabled">
102-
<p>-</p>
103-
{% endif %}
104-
</a>
105-
106-
{% if page.next.url %}
107-
<a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary">
108-
<p>{{ page.next.title }}</p>
109-
{% else %}
110-
<a href="javascript:;" class="btn btn-outline-primary disabled">
111-
<p>-</p>
112-
{% endif %}
113-
</a>
114-
</div> <!-- div.post-navigation -->
120+
{% include post-nav.html %}
115121

116-
{% if site.disqus.comments and page.comments %}
117-
{% include disqus.html %}
118-
{% endif %}
122+
{% if site.disqus.comments and page.comments %}
123+
{% include disqus.html %}
124+
{% endif %}
119125

120126
</div> <!-- .pl-1 pr-1 -->
121127

‎assets/css/_dark/dark-main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
--tb-odd-bg: rgba(52, 53, 42, 0.52); /* odd rows of the posts' table */
4646
--tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */
4747
--footnote-target-bg: rgb(63, 81, 181);
48+
--btn-sharing: #6c757d;
4849

4950
hr {
5051
border-color: var(--main-border);

‎assets/css/main.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -720,6 +720,7 @@ p>a, span>a,
720720
.post a:hover code,
721721
footer a:hover,
722722
#post-wrapper .post-content a:hover,
723+
.license-wrapper .license-text a:hover,
723724
#page .post-content a:hover,
724725
#access-lastmod a:hover {
725726
color: #d2603a;
@@ -798,11 +799,14 @@ table tbody td {
798799
background: var(--tag-bg, rgba(0, 0, 0, 0.075));
799800
border-radius: .34rem;
800801
padding: 0 .4rem;
801-
margin: 0 .1rem;
802802
color: #818182;
803803
line-height: 1.6rem;
804804
}
805805

806+
.post-tag:not(:first-child) {
807+
margin-left: .2rem;
808+
}
809+
806810
.tag:hover,
807811
.post-tag:hover {
808812
background: var(--tag-hover, rgb(222, 226, 230));

‎assets/css/post.scss‎

Lines changed: 76 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
transform: translateX(-50%);
2222
}
2323

24-
.post-tail {
24+
.post-tail-wrapper {
2525
margin-top: 3.5rem;
2626
border-bottom: 1px double var(--main-border, #e9ecef);
2727
font-size: 0.85rem;
@@ -196,6 +196,80 @@
196196
min-height: 2rem;
197197
}
198198

199+
.post-tail-bottom a {
200+
color: inherit;
201+
}
202+
203+
.share-wrapper a:hover,
204+
.share-wrapper i:hover {
205+
text-decoration: none;
206+
color: var(--link-color, #2a408e)!important;
207+
}
208+
209+
.share-wrapper {
210+
vertical-align: middle;
211+
user-select: none;
212+
}
213+
214+
.share-label {
215+
font-family: 'Oswald', sans-serif;
216+
}
217+
218+
.share-label::after {
219+
content: ":";
220+
}
221+
222+
.share-wrapper .share-icon {
223+
font-size: 1.2rem;
224+
}
225+
226+
.share-wrapper .share-icon .fab.fa-twitter {
227+
color: var(--btn-sharing, rgba(29,161,242,1.00));
228+
}
229+
230+
.share-wrapper .share-icon .fab.fa-facebook-square {
231+
color: var(--btn-sharing, rgb(66, 95, 156));
232+
}
233+
234+
.share-wrapper .share-icon .fab.fa-telegram {
235+
color: var(--btn-sharing, rgb(39, 159, 217));
236+
}
237+
238+
.share-wrapper .share-icon .fab.fa-weibo {
239+
color: var(--btn-sharing, rgb(229, 20, 43));
240+
}
241+
242+
.share-wrapper .fas.fa-link {
243+
color: var(--btn-sharing, rgb(171, 171, 171));
244+
}
245+
246+
.license-wrapper .license-text>a {
247+
font-weight: 600;
248+
}
249+
250+
.license-wrapper {
251+
line-height: 1.2rem;
252+
}
253+
254+
.license-wrapper i {
255+
font-weight: 400;
256+
}
257+
258+
.license-wrapper span:last-child {
259+
font-size: .85rem;
260+
}
261+
262+
@media all and (max-width: 576px) {
263+
.post-tail-bottom {
264+
-ms-flex-wrap: wrap!important;
265+
flex-wrap: wrap!important;
266+
}
267+
268+
.post-tail-bottom>div:first-child {
269+
margin-bottom: 1rem;
270+
}
271+
}
272+
199273
@media all and (max-width: 768px) {
200274
.post img {
201275
max-width: calc(100% + 1rem);
@@ -241,6 +315,7 @@
241315
margin-left: -.5rem;
242316
margin-right: -.5rem;
243317
}
318+
244319
}
245320

246321
/*

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/*
2+
* Copy current page url to clipboard.
3+
* v2.1
4+
* https://github.com/cotes2020/jekyll-theme-chirpy
5+
* © 2020 Cotes Chung
6+
* MIT License
7+
*/
8+
9+
function copyLink() {
10+
var url = window.location.href;
11+
var $temp = $("<input>");
12+
13+
$("body").append($temp);
14+
$temp.val(url).select();
15+
document.execCommand("copy");
16+
$temp.remove();
17+
18+
alert("Link copied successfully!");
19+
}

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

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)