Joseph Hale's Technical Blog
feat: add Mastodon sharing link (#1344)
Adds a "share to Mastodon" button as a link sharing option using @justinribeiro's share-to-mastodon package
Discussion of proposed change - #1324
---------
Co-authored-by: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
authored by
Natalie Somersall
Cotes Chung
and committed by
GitHub
(Oct 30, 2023, 2:02 AM +0800)
2bf87e0d
f6d96ab2
+71
-43
+28
-3
_includes/post-sharing.html
+28
-3
_includes/post-sharing.html
···
1
1
<!-- Post sharing snippet -->
2
2
3
3
<div class="share-wrapper d-flex align-items-center">
4
-
<span class="share-label text-muted me-1">{{ site.data.locales[include.lang].post.share }}</span>
4
+
<span class="share-label text-muted">{{ site.data.locales[include.lang].post.share }}</span>
5
5
<span class="share-icons">
6
6
{% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
7
7
{% assign title = title | uri_escape %}
8
8
{% assign url = page.url | absolute_url | url_encode %}
9
9
10
-
{% for share in site.data.share.platforms %}
10
+
{% for share in site.data.share.platforms -%}
11
+
{% if share.type == 'Mastodon' %}
12
+
<script defer type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/share-to-mastodon/+esm"></script>
13
+
<button
14
+
class="btn text-start"
15
+
data-bs-toggle="tooltip"
16
+
data-bs-placement="top"
17
+
title="{{ share.type }}"
18
+
aria-label="{{ share.type }}"
19
+
>
20
+
<share-to-mastodon
21
+
class="share-mastodon"
22
+
message="{{ title }}"
23
+
url="{{ url }}"
24
+
{%- if share.instances -%}
25
+
customInstanceList="{{ share.instances | jsonify | xml_escape }}"
26
+
{%- endif %}
27
+
>
28
+
<i class="{{ share.icon }}"></i>
29
+
</share-to-mastodon>
30
+
</button>
31
+
32
+
{% continue %}
33
+
{% endif %}
34
+
11
35
{% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %}
36
+
12
37
<a
13
38
href="{{ link }}"
14
39
data-bs-toggle="tooltip"
···
31
56
title="{{ site.data.locales[include.lang].post.button.share_link.title }}"
32
57
data-title-succeed="{{ site.data.locales[include.lang].post.button.share_link.succeed }}"
33
58
>
34
-
<i class="fa-fw fas fa-link pe-none"></i>
59
+
<i class="fa-fw fas fa-link pe-none fs-6"></i>
35
60
</button>
36
61
</span>
37
62
</div>
+2
-1
_sass/colors/typography-light.scss
+2
-1
_sass/colors/typography-light.scss
+28
-39
_sass/layout/post.scss
+28
-39
_sass/layout/post.scss
···
2
2
Post-specific style
3
3
*/
4
4
5
-
@mixin btn-sharing-color($light-color, $important: false) {
6
-
@if $important {
7
-
color: var(--btn-share-color, $light-color) !important;
8
-
} @else {
9
-
color: var(--btn-share-color, $light-color);
10
-
}
11
-
}
12
-
13
5
%btn-post-nav {
14
6
width: 50%;
15
7
position: relative;
···
72
64
-ms-user-select: none;
73
65
user-select: none;
74
66
67
+
%icon-size {
68
+
font-size: 1.125rem;
69
+
}
70
+
75
71
.share-icons {
76
-
font-size: 1.2rem;
72
+
display: flex;
73
+
74
+
i {
75
+
color: var(--btn-share-color);
76
+
77
+
@extend %icon-size;
78
+
}
77
79
78
80
> * {
79
-
margin-left: 0.25rem;
81
+
@extend %icon-size;
82
+
83
+
margin-left: 0.5rem;
80
84
81
85
&:hover {
82
86
i {
···
87
91
88
92
button {
89
93
position: relative;
90
-
bottom: 2px;
94
+
bottom: 1px;
91
95
padding: 0;
92
96
93
97
@extend %cursor-pointer;
94
98
}
99
+
} /* .share-icons */
100
+
} /* .share-wrapper */
101
+
}
95
102
96
-
a :hover {
97
-
text-decoration: none;
98
-
}
103
+
.share-mastodon {
104
+
/* See: https://github.com/justinribeiro/share-to-mastodon#properties */
105
+
--wc-stm-font-family: $font-family-base;
106
+
--wc-stm-dialog-background-color: var(--card-bg);
107
+
--wc-stm-form-button-border: 1px solid var(--btn-border-color);
108
+
--wc-stm-form-submit-background-color: var(--sidebar-btn-bg);
109
+
--wc-stm-form-cancel-background-color: var(--sidebar-btn-bg);
110
+
--wc-stm-form-button-background-color-hover: #007bff;
111
+
--wc-stm-form-button-color-hover: white;
99
112
100
-
.fa-square-x-twitter {
101
-
@include btn-sharing-color(black);
102
-
}
103
-
104
-
.fa-facebook-square {
105
-
@include btn-sharing-color(rgb(66, 95, 156));
106
-
}
107
-
108
-
.fa-telegram {
109
-
@include btn-sharing-color(rgb(39, 159, 217));
110
-
}
111
-
112
-
.fa-linkedin {
113
-
@include btn-sharing-color(rgb(0, 119, 181));
114
-
}
115
-
116
-
.fa-weibo {
117
-
@include btn-sharing-color(rgb(229, 20, 43));
118
-
}
119
-
} /* .share-icons */
120
-
121
-
.fas.fa-link {
122
-
@include btn-sharing-color(rgb(171, 171, 171));
123
-
}
124
-
} /* .share-wrapper */
113
+
font-size: 1rem;
125
114
}
126
115
127
116
.post-tags {