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>
This commit is contained in:
Natalie Somersall
GitHub
parent
f6d96ab2b8
commit
2bf87e0de7
4 changed files with 71 additions and 43 deletions
|
|
@ -23,3 +23,16 @@ platforms:
|
|||
# - type: Weibo
|
||||
# icon: "fab fa-weibo"
|
||||
# link: "http://service.weibo.com/share/share.php?title=TITLE&url=URL"
|
||||
#
|
||||
# - type: Mastodon
|
||||
# icon: "fa-brands fa-mastodon"
|
||||
# # See: https://github.com/justinribeiro/share-to-mastodon#properties
|
||||
# instances:
|
||||
# - label: mastodon.social
|
||||
# link: "https://mastodon.social/"
|
||||
# - label: mastodon.online
|
||||
# link: "https://mastodon.online/"
|
||||
# - label: fosstodon.org
|
||||
# link: "https://fosstodon.org/"
|
||||
# - label: photog.social
|
||||
# link: "https://photog.social/"
|
||||
|
|
|
|||
|
|
@ -1,14 +1,39 @@
|
|||
<!-- Post sharing snippet -->
|
||||
|
||||
<div class="share-wrapper d-flex align-items-center">
|
||||
<span class="share-label text-muted me-1">{{ site.data.locales[include.lang].post.share }}</span>
|
||||
<span class="share-label text-muted">{{ site.data.locales[include.lang].post.share }}</span>
|
||||
<span class="share-icons">
|
||||
{% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
|
||||
{% assign title = title | uri_escape %}
|
||||
{% assign url = page.url | absolute_url | url_encode %}
|
||||
|
||||
{% for share in site.data.share.platforms %}
|
||||
{% for share in site.data.share.platforms -%}
|
||||
{% if share.type == 'Mastodon' %}
|
||||
<script defer type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/share-to-mastodon/+esm"></script>
|
||||
<button
|
||||
class="btn text-start"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
title="{{ share.type }}"
|
||||
aria-label="{{ share.type }}"
|
||||
>
|
||||
<share-to-mastodon
|
||||
class="share-mastodon"
|
||||
message="{{ title }}"
|
||||
url="{{ url }}"
|
||||
{%- if share.instances -%}
|
||||
customInstanceList="{{ share.instances | jsonify | xml_escape }}"
|
||||
{%- endif %}
|
||||
>
|
||||
<i class="{{ share.icon }}"></i>
|
||||
</share-to-mastodon>
|
||||
</button>
|
||||
|
||||
{% continue %}
|
||||
{% endif %}
|
||||
|
||||
{% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %}
|
||||
|
||||
<a
|
||||
href="{{ link }}"
|
||||
data-bs-toggle="tooltip"
|
||||
|
|
@ -31,7 +56,7 @@
|
|||
title="{{ site.data.locales[include.lang].post.button.share_link.title }}"
|
||||
data-title-succeed="{{ site.data.locales[include.lang].post.button.share_link.succeed }}"
|
||||
>
|
||||
<i class="fa-fw fas fa-link pe-none"></i>
|
||||
<i class="fa-fw fas fa-link pe-none fs-6"></i>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -63,7 +63,8 @@
|
|||
|
||||
/* Posts */
|
||||
--toc-highlight: #0550ae;
|
||||
--btn-share-hover-color: var(--link-color);
|
||||
--btn-share-color: gray;
|
||||
--btn-share-hover-color: #0d6efd;
|
||||
--card-bg: white;
|
||||
--card-hovor-bg: #e2e2e2;
|
||||
--card-shadow: rgb(104, 104, 104, 0.05) 0 2px 6px 0,
|
||||
|
|
|
|||
|
|
@ -2,14 +2,6 @@
|
|||
Post-specific style
|
||||
*/
|
||||
|
||||
@mixin btn-sharing-color($light-color, $important: false) {
|
||||
@if $important {
|
||||
color: var(--btn-share-color, $light-color) !important;
|
||||
} @else {
|
||||
color: var(--btn-share-color, $light-color);
|
||||
}
|
||||
}
|
||||
|
||||
%btn-post-nav {
|
||||
width: 50%;
|
||||
position: relative;
|
||||
|
|
@ -72,11 +64,23 @@ h1 + .post-meta {
|
|||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
%icon-size {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.share-icons {
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
|
||||
i {
|
||||
color: var(--btn-share-color);
|
||||
|
||||
@extend %icon-size;
|
||||
}
|
||||
|
||||
> * {
|
||||
margin-left: 0.25rem;
|
||||
@extend %icon-size;
|
||||
|
||||
margin-left: 0.5rem;
|
||||
|
||||
&:hover {
|
||||
i {
|
||||
|
|
@ -87,43 +91,28 @@ h1 + .post-meta {
|
|||
|
||||
button {
|
||||
position: relative;
|
||||
bottom: 2px;
|
||||
bottom: 1px;
|
||||
padding: 0;
|
||||
|
||||
@extend %cursor-pointer;
|
||||
}
|
||||
|
||||
a :hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.fa-square-x-twitter {
|
||||
@include btn-sharing-color(black);
|
||||
}
|
||||
|
||||
.fa-facebook-square {
|
||||
@include btn-sharing-color(rgb(66, 95, 156));
|
||||
}
|
||||
|
||||
.fa-telegram {
|
||||
@include btn-sharing-color(rgb(39, 159, 217));
|
||||
}
|
||||
|
||||
.fa-linkedin {
|
||||
@include btn-sharing-color(rgb(0, 119, 181));
|
||||
}
|
||||
|
||||
.fa-weibo {
|
||||
@include btn-sharing-color(rgb(229, 20, 43));
|
||||
}
|
||||
} /* .share-icons */
|
||||
|
||||
.fas.fa-link {
|
||||
@include btn-sharing-color(rgb(171, 171, 171));
|
||||
}
|
||||
} /* .share-wrapper */
|
||||
}
|
||||
|
||||
.share-mastodon {
|
||||
/* See: https://github.com/justinribeiro/share-to-mastodon#properties */
|
||||
--wc-stm-font-family: $font-family-base;
|
||||
--wc-stm-dialog-background-color: var(--card-bg);
|
||||
--wc-stm-form-button-border: 1px solid var(--btn-border-color);
|
||||
--wc-stm-form-submit-background-color: var(--sidebar-btn-bg);
|
||||
--wc-stm-form-cancel-background-color: var(--sidebar-btn-bg);
|
||||
--wc-stm-form-button-background-color-hover: #007bff;
|
||||
--wc-stm-form-button-color-hover: white;
|
||||
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
line-height: 2rem;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue