Merge pull request #27 from andybalaam/add-mastodon-via-toot

This commit is contained in:
Nikita Karamov 2020-09-24 17:15:08 +02:00 committed by GitHub
commit cb897e8e5b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 4 deletions

View File

@ -87,6 +87,7 @@ classes match the names of social networks:
<div class="shareon"> <div class="shareon">
<a class="facebook"></a> <a class="facebook"></a>
<a class="linkedin"></a> <a class="linkedin"></a>
<a class="mastodon"></a>
<a class="messenger"></a> <a class="messenger"></a>
<a class="odnoklassniki"></a> <a class="odnoklassniki"></a>
<a class="pinterest"></a> <a class="pinterest"></a>
@ -117,8 +118,8 @@ on the whole container or on the specific buttons:
Apart from the URL and title, some networks support extra parameters: Apart from the URL and title, some networks support extra parameters:
- add `data-media` to an Odnoklassniki, Pinterest, or VK button to customize the pinned picture - add `data-media` to an Odnoklassniki, Pinterest, or VK button to customize the pinned picture
- add `data-text` to a WhatsApp, Telegram or Viber button to add custom message text - add `data-text` to a WhatsApp, Mastodon, Telegram or Viber button to add custom message text
- add `data-via` to a Twitter button to mention a user - add `data-via` to a Twitter or Mastodon button to mention a user
Here are all the custom parameters in their glory: Here are all the custom parameters in their glory:
@ -129,6 +130,14 @@ Here are all the custom parameters in their glory:
<a class="pinterest" data-media="https://picsum.photos/500">Pin</a> <a class="pinterest" data-media="https://picsum.photos/500">Pin</a>
<a class="telegram" data-text="Check this out!"></a> <a class="telegram" data-text="Check this out!"></a>
<a class="twitter" data-via="MyNickname"></a> <a class="twitter" data-via="MyNickname"></a>
<a class="mastodon" data-text="Check this out!" data-via="@MyNickname@myserver.social"></a>
<a class="whatsapp">Send</a> <a class="whatsapp">Send</a>
</div> </div>
``` ```
## Copyright
Includes a modified version of the
[Mastodon logo](https://commons.wikimedia.org/wiki/File:Mastodon_Logotype_%28Simple%29.svg),
which is licensed under the
[APGLv3 license](https://www.gnu.org/licenses/agpl.html) or later.

View File

@ -68,6 +68,7 @@
style="text-align: center"> style="text-align: center">
<a class="facebook"></a> <a class="facebook"></a>
<a class="linkedin"></a> <a class="linkedin"></a>
<a class="mastodon"></a>
<a class="messenger"></a> <a class="messenger"></a>
<a class="odnoklassniki"></a> <a class="odnoklassniki"></a>
<a class="pinterest"></a> <a class="pinterest"></a>
@ -186,6 +187,7 @@ shareon();</code></pre>
<pre><code>&lt;div class="shareon"&gt; <pre><code>&lt;div class="shareon"&gt;
&lt;a class="facebook"&gt;&lt;/a&gt; &lt;a class="facebook"&gt;&lt;/a&gt;
&lt;a class="linkedin"&gt;&lt;/a&gt; &lt;a class="linkedin"&gt;&lt;/a&gt;
&lt;a class="mastodon"&gt;&lt;/a&gt;
&lt;a class="messenger"&gt;&lt;/a&gt; &lt;a class="messenger"&gt;&lt;/a&gt;
&lt;a class="odnoklassniki"&gt;&lt;/a&gt; &lt;a class="odnoklassniki"&gt;&lt;/a&gt;
&lt;a class="pinterest"&gt;&lt;/a&gt; &lt;a class="pinterest"&gt;&lt;/a&gt;
@ -200,6 +202,7 @@ shareon();</code></pre>
<div class="shareon"> <div class="shareon">
<a class="facebook"></a> <a class="facebook"></a>
<a class="linkedin"></a> <a class="linkedin"></a>
<a class="mastodon"></a>
<a class="messenger"></a> <a class="messenger"></a>
<a class="odnoklassniki"></a> <a class="odnoklassniki"></a>
<a class="pinterest"></a> <a class="pinterest"></a>
@ -241,8 +244,8 @@ shareon();</code></pre>
<ul> <ul>
<li>add <code>data-media</code> to an Odnoklassniki, Pinterest, or VK button to customize the pinned picture</li> <li>add <code>data-media</code> to an Odnoklassniki, Pinterest, or VK button to customize the pinned picture</li>
<li>add <code>data-text</code> to a WhatsApp, Telegram, or Viber button to add custom message text</li> <li>add <code>data-text</code> to a WhatsApp, Mastodon, Telegram, or Viber button to add custom message text</li>
<li>add <code>data-via</code> to a Twitter button to mention a user</li> <li>add <code>data-via</code> to a Twitter or Mastodon button to mention a user</li>
</ul> </ul>
<p> <p>
@ -255,6 +258,7 @@ shareon();</code></pre>
&lt;a class="pinterest" data-media="https://picsum.photos/500"&gt;Pin&lt;/a&gt; &lt;a class="pinterest" data-media="https://picsum.photos/500"&gt;Pin&lt;/a&gt;
&lt;a class="telegram" data-text="Check this out!"&gt;&lt;/a&gt; &lt;a class="telegram" data-text="Check this out!"&gt;&lt;/a&gt;
&lt;a class="twitter" data-via="MyNickname"&gt;&lt;/a&gt; &lt;a class="twitter" data-via="MyNickname"&gt;&lt;/a&gt;
&lt;a class="mastodon" data-text="Check this out!" data-via="@MyNickname@myserver.social"&gt;&lt;/a&gt;
&lt;a class="whatsapp"&gt;Send&lt;/a&gt; &lt;a class="whatsapp"&gt;Send&lt;/a&gt;
&lt;/div></code></pre> &lt;/div></code></pre>
<div class="shareon" data-url="https://example.com/custom-url"> <div class="shareon" data-url="https://example.com/custom-url">
@ -263,6 +267,7 @@ shareon();</code></pre>
<a class="pinterest" data-media="https://picsum.photos/500">Pin</a> <a class="pinterest" data-media="https://picsum.photos/500">Pin</a>
<a class="telegram" data-text="Check this out!"></a> <a class="telegram" data-text="Check this out!"></a>
<a class="twitter" data-via="MyNickname"></a> <a class="twitter" data-via="MyNickname"></a>
<a class="mastodon" data-text="Check this out!" data-via="@MyNickname@myserver.social"></a>
<a class="whatsapp">Send</a> <a class="whatsapp">Send</a>
</div> </div>

View File

@ -38,6 +38,11 @@ const NETWORKS = {
iconWhenText: 'data:image/svg+xml,%3Csvg fill="%23fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/%3E%3C/svg%3E', iconWhenText: 'data:image/svg+xml,%3Csvg fill="%23fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/%3E%3C/svg%3E',
url: (d) => `https://www.linkedin.com/shareArticle?mini=true&url=${d.url}&title=${d.title}`, url: (d) => `https://www.linkedin.com/shareArticle?mini=true&url=${d.url}&title=${d.title}`,
}, },
mastodon: {
color: '#3088D4',
icon: 'data:image/svg+xml,%3Csvg fill="%23fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M23.193 7.879c0-5.206-3.411-6.732-3.411-6.732C18.062.357 15.108.025 12.041 0h-.076c-3.068.025-6.02.357-7.74 1.147 0 0-3.411 1.526-3.411 6.732 0 1.192-.023 2.618.015 4.129.124 5.092.934 10.109 5.641 11.355 2.17.574 4.034.695 5.535.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.129.539c-2.165-.074-4.449-.233-4.799-2.891a5.499 5.499 0 01-.048-.745s2.125.52 4.817.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.507.475-6.507zm-4.024 6.709h-2.497V8.469c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.312v3.349h-2.483v-3.35c0-1.536-.602-2.312-1.802-2.312-1.085 0-1.628.655-1.628 1.944v6.119H4.832V8.284c0-1.289.328-2.313.987-3.07.68-.758 1.569-1.146 2.674-1.146 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.304z"/%3E%3C/svg%3E',
url: (d) => `https://toot.karamoff.dev/?text=${d.title}%0D%0A${d.url}${d.text ? `%0D%0A%0D%0A${d.text}` : ''}${d.via ? `%0D%0A%0D%0A${d.via}` : ''}`,
},
messenger: { messenger: {
color: '#0099FF', color: '#0099FF',
icon: 'data:image/svg+xml,%3Csvg fill="%23fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 11.64C0 4.95 5.24 0 12 0s12 4.95 12 11.64-5.24 11.64-12 11.64c-1.21 0-2.38-.16-3.47-.46a.96.96 0 00-.64.05L5.5 23.92a.96.96 0 01-1.35-.85l-.07-2.14a.97.97 0 00-.32-.68A11.39 11.39 0 010 11.64zm8.32-2.19l-3.52 5.6c-.35.53.32 1.14.82.75l3.79-2.87c.26-.2.6-.2.87 0l2.8 2.1c.84.63 2.04.4 2.6-.48l3.52-5.6c.35-.53-.32-1.13-.82-.75l-3.79 2.87c-.25.2-.6.2-.86 0l-2.8-2.1a1.8 1.8 0 00-2.61.48z"/%3E%3C/svg%3E', icon: 'data:image/svg+xml,%3Csvg fill="%23fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 11.64C0 4.95 5.24 0 12 0s12 4.95 12 11.64-5.24 11.64-12 11.64c-1.21 0-2.38-.16-3.47-.46a.96.96 0 00-.64.05L5.5 23.92a.96.96 0 01-1.35-.85l-.07-2.14a.97.97 0 00-.32-.68A11.39 11.39 0 010 11.64zm8.32-2.19l-3.52 5.6c-.35.53.32 1.14.82.75l3.79-2.87c.26-.2.6-.2.87 0l2.8 2.1c.84.63 2.04.4 2.6-.48l3.52-5.6c.35-.53-.32-1.13-.82-.75l-3.79 2.87c-.25.2-.6.2-.86 0l-2.8-2.1a1.8 1.8 0 00-2.61.48z"/%3E%3C/svg%3E',