earnestma
/
shareon
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Merge branch 'prettier-code-style' 

Merges https://codeberg.org/kytta/shareon/pulls/1
pull/45/head
Nikita Karamov 2022-02-08 19:21:30 +01:00
parent c3295cc821 0e924799a6
commit 8d8037ee1a
No known key found for this signature in database
GPG Key ID: 3C8E688C96EEB9C9
16 changed files with 471 additions and 394 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.editorconfig
View File

@ -3,17 +3,11 @@ root = true
[*] [*]
charset = utf-8 charset = utf-8
end_of_line = lf end_of_line = lf
indent_style = tab indent_style = space
indent_size = 2
insert_final_newline = true insert_final_newline = true
max_line_length = 80 max_line_length = 80
trim_trailing_whitespace = true trim_trailing_whitespace = true
[*.md] [*.md]
indent_size = 2
indent_style = space
max_line_length = off
trim_trailing_whitespace = false trim_trailing_whitespace = false
[*.yml]
indent_size = 2
indent_style = space

4
.eslintrc.json
View File

@ -5,9 +5,7 @@
"es6": true, "es6": true,
"node": true "node": true
}, },
"extends": [ "extends": ["airbnb-base", "prettier"],
"airbnb-base"
],
"parserOptions": { "parserOptions": {
"ecmaVersion": 2020, "ecmaVersion": 2020,
"sourceType": "module" "sourceType": "module"

1
.git-blame-ignore-revs Normal file
View File

@ -0,0 +1 @@
d95105353f659f1dfc16aa00e97dde9a18406be4

4
.github/workflows/ci.yml vendored
View File

@ -20,7 +20,7 @@ jobs:
- name: Setup Node - name: Setup Node
uses: actions/setup-node@v2 uses: actions/setup-node@v2
with: with:
node-version: '16' node-version: "16"
- uses: pnpm/action-setup@v2.0.1 - uses: pnpm/action-setup@v2.0.1
with: with:
version: 6.0.2 version: 6.0.2
@ -39,7 +39,7 @@ jobs:
- name: Setup Node - name: Setup Node
uses: actions/setup-node@v2 uses: actions/setup-node@v2
with: with:
node-version: '16' node-version: "16"
- uses: pnpm/action-setup@v2.0.1 - uses: pnpm/action-setup@v2.0.1
with: with:
version: 6.0.2 version: 6.0.2

1
.prettierignore Symbolic link
View File

@ -0,0 +1 @@
./.gitignore

7
CHANGELOG.md
View File

@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [Unreleased]
### Changed
- change code style to [Prettier](https://prettier.io/)
## [1.6.3] - 2022-02-02 ## [1.6.3] - 2022-02-02
### Changed ### Changed
@ -194,6 +200,7 @@ Initial release of shareon
- Add Telegram button - Add Telegram button
- Add Twitter button - Add Twitter button
[Unreleased]: https://codeberg.org/kytta/shareon/compare/v1.6.3...main
[1.6.2]: https://github.com/kytta/shareon/compare/v1.6.2...v1.6.3 [1.6.2]: https://github.com/kytta/shareon/compare/v1.6.2...v1.6.3
[1.6.2]: https://github.com/kytta/shareon/compare/v1.6.1...v1.6.2 [1.6.2]: https://github.com/kytta/shareon/compare/v1.6.1...v1.6.2
[1.6.1]: https://github.com/kytta/shareon/compare/v1.6.0...v1.6.1 [1.6.1]: https://github.com/kytta/shareon/compare/v1.6.0...v1.6.1

79
README.md
View File

@ -10,7 +10,8 @@
<img src="./assets/demo@2x.png" height="84" width="392" alt="shareon demo screenshot"> <img src="./assets/demo@2x.png" height="84" width="392" alt="shareon demo screenshot">
---- ---
Observe the live demo here: [shareon.js.org](https://shareon.js.org) Observe the live demo here: [shareon.js.org](https://shareon.js.org)
## Install ## Install
@ -18,8 +19,14 @@ Observe the live demo here: [shareon.js.org](https://shareon.js.org)
Include the link to shareon's JS and CSS in your website: Include the link to shareon's JS and CSS in your website:
```html ```html
<link href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css" rel="stylesheet"> <link
<script src="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.js" type="text/javascript"></script> href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css"
rel="stylesheet"
/>
<script
src="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.js"
type="text/javascript"
></script>
``` ```
or install it via NPM use it in a JS file that you will bundle: or install it via NPM use it in a JS file that you will bundle:
@ -31,9 +38,9 @@ yarn add shareon
``` ```
```js ```js
const shareon = require('shareon'); const shareon = require("shareon");
// or // or
import shareon from 'shareon'; import shareon from "shareon";
``` ```
## Initialization ## Initialization
@ -55,8 +62,14 @@ want the buttons to be initialized:
```html ```html
<!-- notice the 'noinit' section of the url for JS --> <!-- notice the 'noinit' section of the url for JS -->
<link href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css" rel="stylesheet"> <link
<script src="https://cdn.jsdelivr.net/npm/shareon@1/dist/noinit/shareon.min.js" type="text/javascript"></script> href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css"
rel="stylesheet"
/>
<script
src="https://cdn.jsdelivr.net/npm/shareon@1/dist/noinit/shareon.min.js"
type="text/javascript"
></script>
<script type="text/javascript"> <script type="text/javascript">
// do something important // do something important
@ -67,9 +80,9 @@ want the buttons to be initialized:
or, if you're using Node: or, if you're using Node:
```js ```js
const shareon = require('shareon/dist/noinit/shareon'); const shareon = require("shareon/dist/noinit/shareon");
// or // or
import shareon from 'shareon/dist/noinit/shareon'; import shareon from "shareon/dist/noinit/shareon";
// do something important // do something important
shareon(); shareon();
@ -78,27 +91,27 @@ shareon();
## Usage ## Usage
> shareon was heavily inspired by [Likely](https://ilyabirman.net/projects/likely/), > shareon was heavily inspired by [Likely](https://ilyabirman.net/projects/likely/),
and has a backwards-compatible API (excluding themes and sizes). > and has a backwards-compatible API (excluding themes and sizes).
Create a container with class `shareon` and populate it with elements, whose Create a container with class `shareon` and populate it with elements, whose
classes match the names of social networks: classes match the names of social networks:
```html ```html
<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="mastodon"></a>
<!-- FB App ID is required for the Messenger button to function --> <!-- FB App ID is required for the Messenger button to function -->
<a class="messenger" data-fb-app-id="0123456789012345"></a> <a class="messenger" data-fb-app-id="0123456789012345"></a>
<a class="odnoklassniki"></a> <a class="odnoklassniki"></a>
<a class="pinterest"></a> <a class="pinterest"></a>
<a class="pocket"></a> <a class="pocket"></a>
<button class="reddit"></button> <button class="reddit"></button>
<button class="telegram"></button> <button class="telegram"></button>
<button class="twitter"></button> <button class="twitter"></button>
<button class="viber"></button> <button class="viber"></button>
<button class="vkontakte"></button> <button class="vkontakte"></button>
<button class="whatsapp"></button> <button class="whatsapp"></button>
</div> </div>
``` ```
@ -111,8 +124,8 @@ on the whole container or on the specific buttons:
```html ```html
<div class="shareon" data-url="https://example.com"> <div class="shareon" data-url="https://example.com">
<a class="facebook" data-title="Custom Facebook title"></a> <a class="facebook" data-title="Custom Facebook title"></a>
<a class="twitter" data-title="Custom Twitter title"></a> <a class="twitter" data-title="Custom Twitter title"></a>
</div> </div>
``` ```
@ -127,13 +140,13 @@ Here are all the custom parameters in their glory:
```html ```html
<div class="shareon" data-url="https://example.com/custom-url"> <div class="shareon" data-url="https://example.com/custom-url">
<a class="facebook" data-title="Custom Facebook title"></a> <a class="facebook" data-title="Custom Facebook title"></a>
<a class="messenger" data-fb-app-id="0123456789012345"></a> <a class="messenger" data-fb-app-id="0123456789012345"></a>
<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-via="@MyNickname@myserver.social"></a> <a class="mastodon" data-via="@MyNickname@myserver.social"></a>
<a class="whatsapp" data-url="https://my-cool-website.com">Send</a> <a class="whatsapp" data-url="https://my-cool-website.com">Send</a>
</div> </div>
``` ```

439
docs/index.html
View File

@ -1,149 +1,179 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Lightweight, stylish and ethical share buttons for popular social networks"> <meta
<meta name="keywords" content="share buttons, sharing, social networks, share via, share on"> name="description"
<meta name="author" content="Nikita Karamov"> content="Lightweight, stylish and ethical share buttons for popular social networks"
/>
<meta
name="keywords"
content="share buttons, sharing, social networks, share via, share on"
/>
<meta name="author" content="Nikita Karamov" />
<title>shareon – Lightweight, stylish and ethical share buttons</title> <title>shareon – Lightweight, stylish and ethical share buttons</title>
<meta property="og:title" content="shareon"> <meta property="og:title" content="shareon" />
<meta property="og:url" content="https://shareon.js.org"> <meta property="og:url" content="https://shareon.js.org" />
<meta property="og:image" content="https://raw.githubusercontent.com/kytta/shareon/main/assets/banner.png"> <meta
<meta property="og:description" content="Lightweight, stylish and ethical share buttons for popular social networks"> property="og:image"
<meta name="twitter:card" content="summary_large_image"> content="https://raw.githubusercontent.com/kytta/shareon/main/assets/banner.png"
<meta name="twitter:creator" content="@KyttaWasHere"> />
<meta
property="og:description"
content="Lightweight, stylish and ethical share buttons for popular social networks"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@KyttaWasHere" />
<link rel="stylesheet" href="https://igoradamenko.github.io/awsm.css/css/awsm.min.css"> <link
rel="stylesheet"
href="https://igoradamenko.github.io/awsm.css/css/awsm.min.css"
/>
<style> <style>
.shareon > a:hover { .shareon > a:hover {
color: #fff; color: #fff;
} }
button:not([disabled]):hover { button:not([disabled]):hover {
border: none; border: none;
} }
</style> </style>
<link rel="manifest" href="/site.webmanifest"> <link rel="manifest" href="/site.webmanifest" />
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico" />
<link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="icon" href="/icon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head> </head>
<body> <body>
<header> <header>
<p> <p>
<img src="https://raw.githubusercontent.com/NickKaramoff/shareon/main/assets/logo.svg" <img
alt="shareon logo — the Postal Horn emoji" src="https://raw.githubusercontent.com/NickKaramoff/shareon/main/assets/logo.svg"
width="64" alt="shareon logo — the Postal Horn emoji"
height="64"> width="64"
</p> height="64"
<h1>shareon</h1> />
<p>Lightweight, stylish and ethical share buttons</p> </p>
<nav> <h1>shareon</h1>
<ul> <p>Lightweight, stylish and ethical share buttons</p>
<li> <nav>
<a href="https://www.npmjs.com/package/shareon" target="_blank">npm</a> <ul>
</li> <li>
<li> <a href="https://www.npmjs.com/package/shareon" target="_blank"
<a href="https://github.com/kytta/shareon" target="_blank">github</a> >npm</a
</li> >
</ul> </li>
</nav> <li>
<a href="https://github.com/kytta/shareon" target="_blank"
>github</a
>
</li>
</ul>
</nav>
</header> </header>
<main> <main>
<article> <article>
<h2> <h2>
<a id="what-is-it" href="#what-is-it" aria-hidden="true"></a> <a id="what-is-it" href="#what-is-it" aria-hidden="true"></a>
What is it? What is it?
</h2> </h2>
<p> <p>
<code>shareon</code> are share buttons for popular social networks. <code>shareon</code> are share buttons for popular social networks.
</p> </p>
<div class="shareon" data-title="shareon — lightweight, stylish and ethical share buttons" <div
style="text-align: center"> class="shareon"
<a class="facebook"></a> data-title="shareon — lightweight, stylish and ethical share buttons"
<a class="linkedin"></a> style="text-align: center"
<a class="mastodon" data-via="@kytta@fosstodon.org"></a> >
<a class="messenger" data-fb-app-id="3619024578167617"></a> <a class="facebook"></a>
<a class="odnoklassniki"></a> <a class="linkedin"></a>
<a class="pinterest"></a> <a class="mastodon" data-via="@kytta@fosstodon.org"></a>
<a class="pocket"></a> <a class="messenger" data-fb-app-id="3619024578167617"></a>
<a class="reddit"></a> <a class="odnoklassniki"></a>
<a class="telegram"></a> <a class="pinterest"></a>
<a class="twitter" data-via="KyttaWasHere"></a> <a class="pocket"></a>
<a class="viber"></a> <a class="reddit"></a>
<a class="vkontakte"></a> <a class="telegram"></a>
<a class="whatsapp"></a> <a class="twitter" data-via="KyttaWasHere"></a>
</div> <a class="viber"></a>
<a class="vkontakte"></a>
<a class="whatsapp"></a>
</div>
<p> <p>Unlike many other share buttons, <code>shareon</code> are:</p>
Unlike many other share buttons, <code>shareon</code> are:
</p>
<ul> <ul>
<li><b>lightweight</b>, clocking in at only 6 KB gzipped code (JS+CSS)</li> <li>
<li><b>stylish</b>, by having no visual features other than official colors and logos</li> <b>lightweight</b>, clocking in at only 6 KB gzipped code (JS+CSS)
<li><b>ethical</b>, since they do not insert any pesky tracking code</li> </li>
</ul> <li>
<b>stylish</b>, by having no visual features other than official
colors and logos
</li>
<li>
<b>ethical</b>, since they do not insert any pesky tracking code
</li>
</ul>
<p> <p>
The whole JavaScript code is quick and simple: it only populates the buttons with set up links. The The whole JavaScript code is quick and simple: it only populates the
speed buttons with set up links. The speed and easy customization make
and easy customization make <code>shareon</code> the perfect choice for your blog, news site or project <code>shareon</code> the perfect choice for your blog, news site or
page! project page!
</p> </p>
</article> </article>
<article> <article>
<h2> <h2>
<a id="install" href="#install" aria-hidden="true"></a> <a id="install" href="#install" aria-hidden="true"></a>
Install Install
</h2> </h2>
<p> <p>Include the link to shareon's JS and CSS in your website:</p>
Include the link to shareon's JS and CSS in your website:
</p>
<pre><code>&lt;link href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css" <pre><code>&lt;link href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css"
rel="stylesheet"&gt; rel="stylesheet"&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.js" &lt;script src="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.js"
type="text/javascript"&gt;&lt;/script&gt;</code></pre> type="text/javascript"&gt;&lt;/script&gt;</code></pre>
<p>or install it via NPM and use it in a JS file that you will later bundle:</p> <p>
<pre><code>const shareon = require('shareon');</code></pre> or install it via NPM and use it in a JS file that you will later
<pre><code>import shareon from 'shareon';</code></pre> bundle:
</article> </p>
<pre><code>const shareon = require('shareon');</code></pre>
<pre><code>import shareon from 'shareon';</code></pre>
</article>
<article> <article>
<h2> <h2>
<a id="initialization" href="#initialization" aria-hidden="true"></a> <a id="initialization" href="#initialization" aria-hidden="true"></a>
Initialization Initialization
</h2> </h2>
<p> <p>
By default, shareon will initialize every button after page load. By default, shareon will initialize every button after page load. It
It also exports the <code>shareon</code> function, that will let also exports the <code>shareon</code> function, that will let you
you repopulate your buttons with updated information (for example, repopulate your buttons with updated information (for example, if you
if you changed the page title): changed the page title):
</p> </p>
<pre><code>// shareon auto-initializes <pre><code>// shareon auto-initializes
window.title = "Cool new window title"; window.title = "Cool new window title";
shareon();</code></pre> shareon();</code></pre>
<p> <p>
If you want to postpone the initialization, you can import the If you want to postpone the initialization, you can import the
<code>noinit</code>-version of the package. You'll need to <code>noinit</code>-version of the package. You'll need to manually
manually call the <code>shareon</code> function when you want the call the <code>shareon</code> function when you want the buttons to be
buttons to be initialized: initialized:
</p> </p>
<pre><code>&lt;!-- notice the 'noinit' section of the url for JS --&gt; <pre><code>&lt;!-- notice the 'noinit' section of the url for JS --&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/shareon@1/dist/noinit/shareon.min.js" &lt;script src="https://cdn.jsdelivr.net/npm/shareon@1/dist/noinit/shareon.min.js"
type="text/javascript"&gt;&lt;/script&gt; type="text/javascript"&gt;&lt;/script&gt;
&lt;link href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css" &lt;link href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css"
@ -154,39 +184,36 @@ shareon();</code></pre>
shareon(); shareon();
&lt;/script&gt;</code></pre> &lt;/script&gt;</code></pre>
<p> <p>or, if you're using Node:</p>
or, if you're using Node:
</p>
<pre><code>const shareon = require('shareon'); <pre><code>const shareon = require('shareon');
// or // or
import shareon from 'shareon'; import shareon from 'shareon';
// do something important // do something important
shareon();</code></pre> shareon();</code></pre>
</article> </article>
<article> <article>
<h2> <h2>
<a id="usage" href="#usage" aria-hidden="true"></a> <a id="usage" href="#usage" aria-hidden="true"></a>
Usage Usage
</h2> </h2>
<aside> <aside>
<p> <p>
<code>shareon</code> was heavily inspired by <code>shareon</code> was heavily inspired by
<a href="https://ilyabirman.net/projects/likely/">Likely</a>, <a href="https://ilyabirman.net/projects/likely/">Likely</a>, and
and has a backwards-compatible API has a backwards-compatible API
</p> </p>
</aside> </aside>
<p> <p>
Create a container with class <code>shareon</code> and populate it with elements, whose classes match Create a container with class <code>shareon</code> and populate it
the with elements, whose classes match the names of social networks:
names of social networks: </p>
</p>
<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="mastodon"&gt;&lt;/a&gt;
@ -202,61 +229,72 @@ shareon();</code></pre>
&lt;button class="vkontakte"&gt;&lt;/button&gt; &lt;button class="vkontakte"&gt;&lt;/button&gt;
&lt;button class="whatsapp"&gt;&lt;/button&gt; &lt;button class="whatsapp"&gt;&lt;/button&gt;
&lt;/div&gt;</code></pre> &lt;/div&gt;</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="mastodon"></a>
<a class="messenger" data-fb-app-id="3619024578167617"></a> <a class="messenger" data-fb-app-id="3619024578167617"></a>
<a class="odnoklassniki"></a> <a class="odnoklassniki"></a>
<a class="pinterest"></a> <a class="pinterest"></a>
<a class="pocket"></a> <a class="pocket"></a>
<button class="reddit"></button> <button class="reddit"></button>
<button class="telegram"></button> <button class="telegram"></button>
<button class="twitter"></button> <button class="twitter"></button>
<button class="viber"></button> <button class="viber"></button>
<button class="vkontakte"></button> <button class="vkontakte"></button>
<button class="whatsapp"></button> <button class="whatsapp"></button>
</div> </div>
<p> <p>
If you use <code>&lt;a&gt;</code>, the buttons will get a `href`-attribute to them. In other cases they If you use <code>&lt;a&gt;</code>, the buttons will get a
will get a listener on <code>click</code> event, so you can use <code>&lt;button&gt;</code>s if you `href`-attribute to them. In other cases they will get a listener on
wish. <code>click</code> event, so you can use <code>&lt;button&gt;</code>s
</p> if you wish.
</p>
<p> <p>
By default, the URL and the title of the page will be used in sharing dialogs. To change this, you can By default, the URL and the title of the page will be used in sharing
use dialogs. To change this, you can use the <code>data-url</code> and
the <code>data-url</code> and <code>data-title</code> attributes. Use them on the whole container or on <code>data-title</code> attributes. Use them on the whole container or
the specific buttons: on the specific buttons:
</p> </p>
<pre><code>&lt;div class="shareon" data-url="https://example.com"&gt; <pre><code>&lt;div class="shareon" data-url="https://example.com"&gt;
&lt;a class="whatsapp" data-title="Custom WhatsApp title"&gt;&lt;/a&gt; &lt;a class="whatsapp" data-title="Custom WhatsApp title"&gt;&lt;/a&gt;
&lt;a class="twitter" data-title="Custom Twitter title"&gt;&lt;/a&gt; &lt;a class="twitter" data-title="Custom Twitter title"&gt;&lt;/a&gt;
&lt;/div&gt;</code></pre> &lt;/div&gt;</code></pre>
<div class="shareon" data-url="https://example.com"> <div class="shareon" data-url="https://example.com">
<a class="whatsapp" data-title="Custom WhatsApp title"></a> <a class="whatsapp" data-title="Custom WhatsApp title"></a>
<a class="twitter" data-title="Custom Twitter title"></a> <a class="twitter" data-title="Custom Twitter title"></a>
</div> </div>
<p> <p>
Apart from the URL and title, some networks support extra parameters: Apart from the URL and title, some networks support extra parameters:
</p> </p>
<ul> <ul>
<li>you <strong>have to</strong> add <code>data-fb-app-id</code> to the FB Messenger button to make sharing even possible</li> <li>
<li>add <code>data-media</code> to an Odnoklassniki, Pinterest, or VK button to customize the pinned picture</li> you <strong>have to</strong> add <code>data-fb-app-id</code> to the
<li>add <code>data-text</code> to a WhatsApp, Mastodon, Telegram, or Viber button to add custom message text</li> FB Messenger button to make sharing even possible
<li>add <code>data-via</code> to a Twitter or Mastodon button to mention a user</li> </li>
</ul> <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, Mastodon, Telegram, or
Viber button to add custom message text
</li>
<li>
add <code>data-via</code> to a Twitter or Mastodon button to mention
a user
</li>
</ul>
<p> <p>Here are all the custom parameters in their glory:</p>
Here are all the custom parameters in their glory:
</p>
<pre><code>&lt;div class="shareon" data-url="https://example.com/custom-url"&gt; <pre><code>&lt;div class="shareon" data-url="https://example.com/custom-url"&gt;
&lt;a class="facebook" data-title="Custom Facebook title"&gt;&lt;/a&gt; &lt;a class="facebook" data-title="Custom Facebook title"&gt;&lt;/a&gt;
&lt;a class="messenger" data-fb-app-id="0123456789012345"&gt;&lt;/a&gt; &lt;a class="messenger" data-fb-app-id="0123456789012345"&gt;&lt;/a&gt;
&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;
@ -265,28 +303,35 @@ shareon();</code></pre>
&lt;a class="mastodon" data-via="@MyNickname@myserver.social"&gt;&lt;/a&gt; &lt;a class="mastodon" data-via="@MyNickname@myserver.social"&gt;&lt;/a&gt;
&lt;a class="whatsapp" data-url="https://my-cool-website.com"&gt;Send&lt;/a&gt; &lt;a class="whatsapp" data-url="https://my-cool-website.com"&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">
<a class="facebook" data-title="Custom Facebook title"></a> <a class="facebook" data-title="Custom Facebook title"></a>
<a class="messenger" data-fb-app-id="3619024578167617"></a> <a class="messenger" data-fb-app-id="3619024578167617"></a>
<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-via="@MyNickname@myserver.social"></a> <a class="mastodon" data-via="@MyNickname@myserver.social"></a>
<a class="whatsapp" data-url="https://my-cool-website.com">Send</a> <a class="whatsapp" data-url="https://my-cool-website.com">Send</a>
</div> </div>
</article>
</article>
</main> </main>
<footer> <footer>
<p>by <a href="https://www.kytta.dev/" target="_blank">Nikita Karamov</a></p> <p>
<p>Website built with <a href="https://igoradamenko.github.io/awsm.css/index.html" target="_blank">awsm.css</a> by <a href="https://www.kytta.dev/" target="_blank">Nikita Karamov</a>
</p> </p>
<p>
Website built with
<a
href="https://igoradamenko.github.io/awsm.css/index.html"
target="_blank"
>awsm.css</a
>
</p>
</footer> </footer>
<!-- These files are autocopied on build and will be present on the website --> <!-- These files are autocopied on build and will be present on the website -->
<!-- See https://github.com/kytta/shareon/blob/main/.github/workflows/node.yml#L29 --> <!-- See https://github.com/kytta/shareon/blob/main/.github/workflows/node.yml#L29 -->
<link href="shareon.min.css" rel="stylesheet"> <link href="shareon.min.css" rel="stylesheet" />
<script src="shareon.min.js" type="text/javascript"></script> <script src="shareon.min.js" type="text/javascript"></script>
</body> </body>
</html> </html>

4
package.json
View File

@ -35,7 +35,7 @@
"build": "rollup --config", "build": "rollup --config",
"build:dev": "cross-env NODE_ENV=development rollup --config", "build:dev": "cross-env NODE_ENV=development rollup --config",
"dev": "cross-env NODE_ENV=development rollup --config --watch", "dev": "cross-env NODE_ENV=development rollup --config --watch",
"lint": "eslint src/*.js", "lint": "prettier --check . && eslint src/*.js",
"release": "np", "release": "np",
"size": "size-limit", "size": "size-limit",
"test": "pnpm run lint && pnpm run build && pnpm run size", "test": "pnpm run lint && pnpm run build && pnpm run size",
@ -52,6 +52,7 @@
"cssnano": "^5.0.16", "cssnano": "^5.0.16",
"eslint": "^8.8.0", "eslint": "^8.8.0",
"eslint-config-airbnb-base": "^15.0.0", "eslint-config-airbnb-base": "^15.0.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.25.4", "eslint-plugin-import": "^2.25.4",
"np": "^7.6.0", "np": "^7.6.0",
"postcss": "^8.4.6", "postcss": "^8.4.6",
@ -59,6 +60,7 @@
"postcss-calc": "^8.2.3", "postcss-calc": "^8.2.3",
"postcss-css-variables": "^0.18.0", "postcss-css-variables": "^0.18.0",
"postcss-mixins": "^9.0.1", "postcss-mixins": "^9.0.1",
"prettier": "^2.5.1",
"rollup": "^2.67.0", "rollup": "^2.67.0",
"rollup-plugin-postcss": "^4.0.2", "rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-terser": "^7.0.2", "rollup-plugin-terser": "^7.0.2",

92
rollup.config.js
View File

@ -1,24 +1,25 @@
import { join, resolve } from 'path'; import { join, resolve } from "path";
import buble from '@rollup/plugin-buble'; import buble from "@rollup/plugin-buble";
import consts from '@nickkaramoff/rollup-plugin-consts'; import consts from "@nickkaramoff/rollup-plugin-consts";
import strip from '@rollup/plugin-strip'; import strip from "@rollup/plugin-strip";
import postcss from 'rollup-plugin-postcss'; import postcss from "rollup-plugin-postcss";
import { terser } from 'rollup-plugin-terser'; import { terser } from "rollup-plugin-terser";
const autoprefixer = require('autoprefixer'); const autoprefixer = require("autoprefixer");
const banner = require('postcss-banner'); const banner = require("postcss-banner");
const calc = require('postcss-calc'); const calc = require("postcss-calc");
const cssnano = require('cssnano'); const cssnano = require("cssnano");
const cssVariables = require('postcss-css-variables'); const cssVariables = require("postcss-css-variables");
const mixins = require('postcss-mixins'); const mixins = require("postcss-mixins");
const networks = require('./src/networksMixin'); const networks = require("./src/networksMixin");
const { urlBuilderMap } = require('./src/networks'); const { urlBuilderMap } = require("./src/networks");
const pkg = require('./package.json'); const pkg = require("./package.json");
const isDev = process.env.ROLLUP_WATCH || process.env.NODE_ENV === 'development'; const isDev =
const outputDir = resolve('.', 'dist'); process.env.ROLLUP_WATCH || process.env.NODE_ENV === "development";
const outputDir = resolve(".", "dist");
const bannerText = `${pkg.name} v${pkg.version}`; const bannerText = `${pkg.name} v${pkg.version}`;
const postcssPlugins = [ const postcssPlugins = [
@ -34,14 +35,14 @@ const postcssPlugins = [
if (!isDev) { if (!isDev) {
postcssPlugins.push( postcssPlugins.push(
cssnano({ cssnano({
preset: 'default', preset: "default",
}), }),
autoprefixer(), autoprefixer(),
banner({ banner({
banner: bannerText, banner: bannerText,
important: true, important: true,
inline: true, inline: true,
}), })
); );
} }
@ -49,46 +50,49 @@ const getPlugins = (css) => [
consts({ consts({
urlBuilderMap, urlBuilderMap,
}), }),
css && postcss({ css &&
extract: resolve(join(outputDir, 'shareon.min.css')), postcss({
plugins: postcssPlugins, extract: resolve(join(outputDir, "shareon.min.css")),
}), plugins: postcssPlugins,
(!isDev) && strip({ }),
debugger: true, !isDev &&
include: ['**/*.js'], strip({
functions: ['console.log', 'console.debug', 'assert.*'], debugger: true,
sourceMap: false, include: ["**/*.js"],
}), functions: ["console.log", "console.debug", "assert.*"],
(!isDev) && buble({ sourceMap: false,
transforms: { }),
modules: false, !isDev &&
}, buble({
}), transforms: {
modules: false,
},
}),
]; ];
const getOutput = (baseDir) => { const getOutput = (baseDir) => {
const defaultParameters = { const defaultParameters = {
name: pkg.name, name: pkg.name,
exports: 'default', exports: "default",
}; };
return [ return [
{ {
...defaultParameters, ...defaultParameters,
format: 'iife', format: "iife",
file: join(baseDir, `${pkg.name}${isDev ? '' : '.min'}.js`), file: join(baseDir, `${pkg.name}${isDev ? "" : ".min"}.js`),
plugins: isDev ? [] : [terser({ output: { comments: /^!/ } })], plugins: isDev ? [] : [terser({ output: { comments: /^!/ } })],
banner: `/*! ${bannerText} */`, banner: `/*! ${bannerText} */`,
}, },
(!isDev) && { !isDev && {
...defaultParameters, ...defaultParameters,
format: 'cjs', format: "cjs",
file: join(baseDir, `${pkg.name}.cjs`), file: join(baseDir, `${pkg.name}.cjs`),
banner: `/*! ${bannerText} */`, banner: `/*! ${bannerText} */`,
}, },
(!isDev) && { !isDev && {
...defaultParameters, ...defaultParameters,
format: 'esm', format: "esm",
file: join(baseDir, `${pkg.name}.mjs`), file: join(baseDir, `${pkg.name}.mjs`),
banner: `/*! ${bannerText} */`, banner: `/*! ${bannerText} */`,
}, },
@ -97,13 +101,13 @@ const getOutput = (baseDir) => {
export default [ export default [
{ {
input: join(__dirname, 'src', 'autoinit.js'), input: join(__dirname, "src", "autoinit.js"),
output: getOutput(outputDir), output: getOutput(outputDir),
plugins: getPlugins(true), plugins: getPlugins(true),
}, },
{ {
input: join(__dirname, 'src', 'shareon.js'), input: join(__dirname, "src", "shareon.js"),
output: getOutput(join(outputDir, 'noinit')), output: getOutput(join(outputDir, "noinit")),
plugins: getPlugins(false), plugins: getPlugins(false),
}, },
]; ];

4
src/autoinit.js
View File

@ -1,5 +1,5 @@
import initializeShareon from './shareon'; import initializeShareon from "./shareon";
import './style.css'; import "./style.css";
window.onload = () => { window.onload = () => {
initializeShareon(); initializeShareon();

78
src/networks.js
View File

@ -29,70 +29,96 @@
*/ */
const NETWORKS = { const NETWORKS = {
facebook: { facebook: {
color: '#1877F2', color: "#1877F2",
icon: 'data:image/svg+xml,%3Csvg fill="%23fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M23.998 12c0-6.628-5.372-12-11.999-12C5.372 0 0 5.372 0 12c0 5.988 4.388 10.952 10.124 11.852v-8.384H7.078v-3.469h3.046V9.356c0-3.008 1.792-4.669 4.532-4.669 1.313 0 2.686.234 2.686.234v2.953H15.83c-1.49 0-1.955.925-1.955 1.874V12h3.328l-.532 3.469h-2.796v8.384c5.736-.9 10.124-5.864 10.124-11.853z"/%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="M23.998 12c0-6.628-5.372-12-11.999-12C5.372 0 0 5.372 0 12c0 5.988 4.388 10.952 10.124 11.852v-8.384H7.078v-3.469h3.046V9.356c0-3.008 1.792-4.669 4.532-4.669 1.313 0 2.686.234 2.686.234v2.953H15.83c-1.49 0-1.955.925-1.955 1.874V12h3.328l-.532 3.469h-2.796v8.384c5.736-.9 10.124-5.864 10.124-11.853z"/%3E%3C/svg%3E',
url: (d) => `https://www.facebook.com/sharer/sharer.php?u=${d.url}`, url: (d) => `https://www.facebook.com/sharer/sharer.php?u=${d.url}`,
}, },
linkedin: { linkedin: {
color: '#2867B2', color: "#2867B2",
icon: 'data:image/svg+xml,%3Csvg fill="%23fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M23.722 23.72h-4.91v-7.692c0-1.834-.038-4.194-2.559-4.194-2.56 0-2.95 1.995-2.95 4.06v7.827H8.394V7.902h4.716v2.157h.063c.659-1.244 2.261-2.556 4.655-2.556 4.974 0 5.894 3.274 5.894 7.535zM.388 7.902h4.923v15.819H.388zM2.85 5.738A2.849 2.849 0 010 2.886a2.851 2.851 0 112.85 2.852z"/%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="M23.722 23.72h-4.91v-7.692c0-1.834-.038-4.194-2.559-4.194-2.56 0-2.95 1.995-2.95 4.06v7.827H8.394V7.902h4.716v2.157h.063c.659-1.244 2.261-2.556 4.655-2.556 4.974 0 5.894 3.274 5.894 7.535zM.388 7.902h4.923v15.819H.388zM2.85 5.738A2.849 2.849 0 010 2.886a2.851 2.851 0 112.85 2.852z"/%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', 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/sharing/share-offsite/?url=${d.url}`, url: (d) => `https://www.linkedin.com/sharing/share-offsite/?url=${d.url}`,
}, },
mastodon: { mastodon: {
color: '#3088D4', 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', 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.kytta.dev/?text=${d.title}%0D%0A${d.url}${d.text ? `%0D%0A%0D%0A${d.text}` : ''}${d.via ? `%0D%0A%0D%0A${d.via}` : ''}`, url: (d) =>
`https://toot.kytta.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',
url: (d) => `https://www.facebook.com/dialog/send?app_id=${d.fbAppId}&link=${d.url}&redirect_uri=${d.url}`, url: (d) =>
`https://www.facebook.com/dialog/send?app_id=${d.fbAppId}&link=${d.url}&redirect_uri=${d.url}`,
}, },
odnoklassniki: { odnoklassniki: {
color: '#EE8208', color: "#EE8208",
icon: 'data:image/svg+xml,%3Csvg fill="%23fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M14.505 17.44a11.599 11.599 0 003.6-1.49 1.816 1.816 0 00-1.935-3.073 7.866 7.866 0 01-8.34 0 1.814 1.814 0 00-2.5.565c0 .002 0 .004-.002.005a1.812 1.812 0 00.567 2.5l.002.002c1.105.695 2.322 1.2 3.596 1.488l-3.465 3.465A1.796 1.796 0 006 23.439l.03.03c.344.354.81.53 1.274.53.465 0 .93-.176 1.275-.53L12 20.065l3.404 3.406a1.815 1.815 0 002.566-2.565l-3.465-3.466zM12 12.388a6.202 6.202 0 006.195-6.193C18.195 2.78 15.415 0 12 0S5.805 2.78 5.805 6.197A6.2 6.2 0 0012 12.389zm0-8.757a2.566 2.566 0 010 5.13 2.569 2.569 0 01-2.565-2.564A2.57 2.57 0 0112 3.63z"/%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="M14.505 17.44a11.599 11.599 0 003.6-1.49 1.816 1.816 0 00-1.935-3.073 7.866 7.866 0 01-8.34 0 1.814 1.814 0 00-2.5.565c0 .002 0 .004-.002.005a1.812 1.812 0 00.567 2.5l.002.002c1.105.695 2.322 1.2 3.596 1.488l-3.465 3.465A1.796 1.796 0 006 23.439l.03.03c.344.354.81.53 1.274.53.465 0 .93-.176 1.275-.53L12 20.065l3.404 3.406a1.815 1.815 0 002.566-2.565l-3.465-3.466zM12 12.388a6.202 6.202 0 006.195-6.193C18.195 2.78 15.415 0 12 0S5.805 2.78 5.805 6.197A6.2 6.2 0 0012 12.389zm0-8.757a2.566 2.566 0 010 5.13 2.569 2.569 0 01-2.565-2.564A2.57 2.57 0 0112 3.63z"/%3E%3C/svg%3E',
url: (d) => `https://connect.ok.ru/offer?url=${d.url}&title=${d.title}${d.media ? `&imageUrl=${d.media}` : ''}`, url: (d) =>
`https://connect.ok.ru/offer?url=${d.url}&title=${d.title}${
d.media ? `&imageUrl=${d.media}` : ""
}`,
}, },
pinterest: { pinterest: {
color: '#eE0023', color: "#eE0023",
icon: 'data:image/svg+xml,%3Csvg fill="%23fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026z"/%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="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026z"/%3E%3C/svg%3E',
url: (d) => `https://pinterest.com/pin/create/button/?url=${d.url}&description=${d.title}${d.media ? `&media=${d.media}` : ''}`, url: (d) =>
`https://pinterest.com/pin/create/button/?url=${d.url}&description=${
d.title
}${d.media ? `&media=${d.media}` : ""}`,
}, },
pocket: { pocket: {
color: '#EF4154', color: "#EF4154",
icon: 'data:image/svg+xml,%3Csvg fill="%23fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m18.813 10.259-5.646 5.419a1.649 1.649 0 0 1 -2.282 0l-5.646-5.419a1.645 1.645 0 0 1 2.276-2.376l4.511 4.322 4.517-4.322a1.643 1.643 0 0 1 2.326.049 1.64 1.64 0 0 1 -.045 2.326zm5.083-7.546a2.163 2.163 0 0 0 -2.041-1.436h-19.676c-.9 0-1.717.564-2.037 1.405-.094.25-.142.511-.142.774v7.245l.084 1.441c.348 3.277 2.047 6.142 4.682 8.139.045.036.094.07.143.105l.03.023a11.899 11.899 0 0 0 4.694 2.072c.786.158 1.591.24 2.389.24.739 0 1.481-.067 2.209-.204.088-.029.176-.045.264-.06.023 0 .049-.015.074-.029a12.002 12.002 0 0 0 4.508-2.025l.029-.031.135-.105c2.627-1.995 4.324-4.862 4.686-8.148l.073-1.441v-7.233c0-.251-.031-.5-.121-.742z"/%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="m18.813 10.259-5.646 5.419a1.649 1.649 0 0 1 -2.282 0l-5.646-5.419a1.645 1.645 0 0 1 2.276-2.376l4.511 4.322 4.517-4.322a1.643 1.643 0 0 1 2.326.049 1.64 1.64 0 0 1 -.045 2.326zm5.083-7.546a2.163 2.163 0 0 0 -2.041-1.436h-19.676c-.9 0-1.717.564-2.037 1.405-.094.25-.142.511-.142.774v7.245l.084 1.441c.348 3.277 2.047 6.142 4.682 8.139.045.036.094.07.143.105l.03.023a11.899 11.899 0 0 0 4.694 2.072c.786.158 1.591.24 2.389.24.739 0 1.481-.067 2.209-.204.088-.029.176-.045.264-.06.023 0 .049-.015.074-.029a12.002 12.002 0 0 0 4.508-2.025l.029-.031.135-.105c2.627-1.995 4.324-4.862 4.686-8.148l.073-1.441v-7.233c0-.251-.031-.5-.121-.742z"/%3E%3C/svg%3E',
url: (d) => `https://getpocket.com/edit.php?url=${d.url}`, url: (d) => `https://getpocket.com/edit.php?url=${d.url}`,
}, },
reddit: { reddit: {
color: '#FF4500', color: "#FF4500",
icon: 'data:image/svg+xml,%3Csvg fill="%23fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M19.53 1.148a1.83 1.83 0 00-1.667 1.054l-4.372-.928a.522.522 0 00-.358.063.515.515 0 00-.21.297L11.59 7.925c-2.807.086-5.32.909-7.137 2.237a2.668 2.668 0 00-1.815-.737A2.64 2.64 0 000 12.064a2.634 2.634 0 001.563 2.407 4.95 4.95 0 00-.065.803c0 4.053 4.71 7.326 10.537 7.326s10.537-3.273 10.537-7.326a4.548 4.548 0 00-.063-.782 2.732 2.732 0 001.519-2.428 2.64 2.64 0 00-2.639-2.64 2.53 2.53 0 00-1.816.74c-1.796-1.288-4.287-2.134-7.031-2.239l1.204-5.637 3.906.823a1.888 1.888 0 001.878 1.777c1.024 0 1.87-.837 1.88-1.861a1.884 1.884 0 00-1.88-1.88zM7.907 18.066c-.13 0-.254.05-.347.141a.498.498 0 000 .697c1.266 1.267 3.736 1.373 4.454 1.373s3.167-.084 4.454-1.373a.546.546 0 00.044-.697.5.5 0 00-.698 0c-.823.802-2.533 1.099-3.779 1.099s-2.977-.295-3.779-1.099a.49.49 0 00-.349-.142zm-1.932-4.122c0-1.035.844-1.88 1.88-1.88 1.034 0 1.878.843 1.878 1.879S8.89 15.82 7.856 15.82a1.882 1.882 0 01-1.88-1.877zm10.155-1.88c1.035 0 1.88.845 1.88 1.879 0 1.035-.844 1.878-1.879 1.878s-1.879-.843-1.879-1.877c0-1.037.844-1.88 1.878-1.88z" fill-rule="evenodd"/%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="M19.53 1.148a1.83 1.83 0 00-1.667 1.054l-4.372-.928a.522.522 0 00-.358.063.515.515 0 00-.21.297L11.59 7.925c-2.807.086-5.32.909-7.137 2.237a2.668 2.668 0 00-1.815-.737A2.64 2.64 0 000 12.064a2.634 2.634 0 001.563 2.407 4.95 4.95 0 00-.065.803c0 4.053 4.71 7.326 10.537 7.326s10.537-3.273 10.537-7.326a4.548 4.548 0 00-.063-.782 2.732 2.732 0 001.519-2.428 2.64 2.64 0 00-2.639-2.64 2.53 2.53 0 00-1.816.74c-1.796-1.288-4.287-2.134-7.031-2.239l1.204-5.637 3.906.823a1.888 1.888 0 001.878 1.777c1.024 0 1.87-.837 1.88-1.861a1.884 1.884 0 00-1.88-1.88zM7.907 18.066c-.13 0-.254.05-.347.141a.498.498 0 000 .697c1.266 1.267 3.736 1.373 4.454 1.373s3.167-.084 4.454-1.373a.546.546 0 00.044-.697.5.5 0 00-.698 0c-.823.802-2.533 1.099-3.779 1.099s-2.977-.295-3.779-1.099a.49.49 0 00-.349-.142zm-1.932-4.122c0-1.035.844-1.88 1.88-1.88 1.034 0 1.878.843 1.878 1.879S8.89 15.82 7.856 15.82a1.882 1.882 0 01-1.88-1.877zm10.155-1.88c1.035 0 1.88.845 1.88 1.879 0 1.035-.844 1.878-1.879 1.878s-1.879-.843-1.879-1.877c0-1.037.844-1.88 1.878-1.88z" fill-rule="evenodd"/%3E%3C/svg%3E',
url: (d) => `https://www.reddit.com/submit?title=${d.title}&url=${d.url}`, url: (d) => `https://www.reddit.com/submit?title=${d.title}&url=${d.url}`,
}, },
telegram: { telegram: {
color: '#179CDE', color: "#179CDE",
icon: 'data:image/svg+xml,%3Csvg fill="%23fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1.517 11.31c-.962.382-1.466.756-1.512 1.122-.088.702.924.921 2.196 1.335 1.037.337 2.433.731 3.158.747.658.014 1.393-.257 2.204-.814 5.533-3.735 8.39-5.622 8.57-5.663.126-.029.301-.065.42.04.119.106.107.306.095.36-.101.429-5.3 5.156-5.599 5.467-1.143 1.187-2.443 1.913-.437 3.235 1.735 1.144 2.746 1.873 4.534 3.045 1.142.75 2.039 1.637 3.218 1.529.543-.05 1.104-.56 1.389-2.083.673-3.598 1.996-11.392 2.302-14.604a3.585 3.585 0 00-.034-.8c-.027-.158-.084-.383-.29-.55-.243-.197-.619-.24-.787-.236-.764.013-1.936.42-7.579 2.767C11.39 7.03 7.44 8.73 1.517 11.31z"/%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="M1.517 11.31c-.962.382-1.466.756-1.512 1.122-.088.702.924.921 2.196 1.335 1.037.337 2.433.731 3.158.747.658.014 1.393-.257 2.204-.814 5.533-3.735 8.39-5.622 8.57-5.663.126-.029.301-.065.42.04.119.106.107.306.095.36-.101.429-5.3 5.156-5.599 5.467-1.143 1.187-2.443 1.913-.437 3.235 1.735 1.144 2.746 1.873 4.534 3.045 1.142.75 2.039 1.637 3.218 1.529.543-.05 1.104-.56 1.389-2.083.673-3.598 1.996-11.392 2.302-14.604a3.585 3.585 0 00-.034-.8c-.027-.158-.084-.383-.29-.55-.243-.197-.619-.24-.787-.236-.764.013-1.936.42-7.579 2.767C11.39 7.03 7.44 8.73 1.517 11.31z"/%3E%3C/svg%3E',
url: (d) => `https://telegram.me/share/url?url=${d.url}${d.text ? `&text=${d.text}` : ''}`, url: (d) =>
`https://telegram.me/share/url?url=${d.url}${
d.text ? `&text=${d.text}` : ""
}`,
}, },
twitter: { twitter: {
color: '#1DA1F2', color: "#1DA1F2",
icon: 'data:image/svg+xml,%3Csvg fill="%23fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z"/%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="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z"/%3E%3C/svg%3E',
url: (d) => `https://twitter.com/intent/tweet?url=${d.url}&text=${d.title}${d.via ? `&via=${d.via}` : ''}`, url: (d) =>
`https://twitter.com/intent/tweet?url=${d.url}&text=${d.title}${
d.via ? `&via=${d.via}` : ""
}`,
}, },
viber: { viber: {
color: '#7360F2', color: "#7360F2",
icon: 'data:image/svg+xml,%3Csvg fill="%23fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M11.398.002C9.473.028 5.331.344 3.014 2.467 1.294 4.177.693 6.698.623 9.82c-.06 3.11-.13 8.95 5.5 10.541v2.42s-.038.97.602 1.17c.79.25 1.24-.499 1.99-1.299l1.4-1.58c3.85.32 6.8-.419 7.14-.529.78-.25 5.181-.811 5.901-6.652.74-6.031-.36-9.831-2.34-11.551l-.01-.002c-.6-.55-3-2.3-8.37-2.32 0 0-.396-.025-1.038-.016zm.067 1.697c.545-.003.88.02.88.02 4.54.01 6.711 1.38 7.221 1.84 1.67 1.429 2.528 4.856 1.9 9.892-.6 4.88-4.17 5.19-4.83 5.4-.28.09-2.88.73-6.152.52 0 0-2.439 2.941-3.199 3.701-.12.13-.26.17-.35.15-.13-.03-.17-.19-.16-.41l.02-4.019c-4.771-1.32-4.491-6.302-4.441-8.902.06-2.6.55-4.732 2-6.172 1.957-1.77 5.475-2.01 7.11-2.02zm.36 2.6a.299.299 0 00-.3.299.3.3 0 00.3.3 5.631 5.631 0 014.03 1.59c1.09 1.06 1.621 2.48 1.641 4.34a.3.3 0 00.3.3v-.009a.3.3 0 00.3-.3 6.451 6.451 0 00-1.81-4.76c-1.19-1.16-2.692-1.76-4.462-1.76zm-3.954.69a.955.955 0 00-.615.12h-.012c-.41.24-.788.54-1.148.94-.27.32-.421.639-.461.949a1.24 1.24 0 00.05.541l.02.01a13.722 13.722 0 001.2 2.6 15.383 15.383 0 002.32 3.171l.03.04.04.03.03.03.03.03a15.603 15.603 0 003.18 2.33c1.32.72 2.122 1.06 2.602 1.2v.01c.14.04.268.06.398.06a1.84 1.84 0 001.102-.472c.39-.35.7-.738.93-1.148v-.01c.23-.43.15-.841-.18-1.121a13.632 13.632 0 00-2.15-1.54c-.51-.28-1.03-.11-1.24.17l-.45.569c-.23.28-.65.24-.65.24l-.012.01c-3.12-.8-3.95-3.959-3.95-3.959s-.04-.43.25-.65l.56-.45c.27-.22.46-.74.17-1.25a13.522 13.522 0 00-1.54-2.15.843.843 0 00-.504-.3zm4.473.89a.3.3 0 00.002.6 3.78 3.78 0 012.65 1.15 3.5 3.5 0 01.9 2.57.3.3 0 00.3.299l.01.012a.3.3 0 00.3-.301c.03-1.19-.34-2.19-1.07-2.99-.73-.8-1.75-1.25-3.05-1.34a.3.3 0 00-.042 0zm.49 1.619a.305.305 0 00-.018.611c.99.05 1.47.55 1.53 1.58a.3.3 0 00.3.29h.01a.3.3 0 00.29-.32c-.07-1.34-.8-2.091-2.1-2.161a.305.305 0 00-.012 0z"/%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="M11.398.002C9.473.028 5.331.344 3.014 2.467 1.294 4.177.693 6.698.623 9.82c-.06 3.11-.13 8.95 5.5 10.541v2.42s-.038.97.602 1.17c.79.25 1.24-.499 1.99-1.299l1.4-1.58c3.85.32 6.8-.419 7.14-.529.78-.25 5.181-.811 5.901-6.652.74-6.031-.36-9.831-2.34-11.551l-.01-.002c-.6-.55-3-2.3-8.37-2.32 0 0-.396-.025-1.038-.016zm.067 1.697c.545-.003.88.02.88.02 4.54.01 6.711 1.38 7.221 1.84 1.67 1.429 2.528 4.856 1.9 9.892-.6 4.88-4.17 5.19-4.83 5.4-.28.09-2.88.73-6.152.52 0 0-2.439 2.941-3.199 3.701-.12.13-.26.17-.35.15-.13-.03-.17-.19-.16-.41l.02-4.019c-4.771-1.32-4.491-6.302-4.441-8.902.06-2.6.55-4.732 2-6.172 1.957-1.77 5.475-2.01 7.11-2.02zm.36 2.6a.299.299 0 00-.3.299.3.3 0 00.3.3 5.631 5.631 0 014.03 1.59c1.09 1.06 1.621 2.48 1.641 4.34a.3.3 0 00.3.3v-.009a.3.3 0 00.3-.3 6.451 6.451 0 00-1.81-4.76c-1.19-1.16-2.692-1.76-4.462-1.76zm-3.954.69a.955.955 0 00-.615.12h-.012c-.41.24-.788.54-1.148.94-.27.32-.421.639-.461.949a1.24 1.24 0 00.05.541l.02.01a13.722 13.722 0 001.2 2.6 15.383 15.383 0 002.32 3.171l.03.04.04.03.03.03.03.03a15.603 15.603 0 003.18 2.33c1.32.72 2.122 1.06 2.602 1.2v.01c.14.04.268.06.398.06a1.84 1.84 0 001.102-.472c.39-.35.7-.738.93-1.148v-.01c.23-.43.15-.841-.18-1.121a13.632 13.632 0 00-2.15-1.54c-.51-.28-1.03-.11-1.24.17l-.45.569c-.23.28-.65.24-.65.24l-.012.01c-3.12-.8-3.95-3.959-3.95-3.959s-.04-.43.25-.65l.56-.45c.27-.22.46-.74.17-1.25a13.522 13.522 0 00-1.54-2.15.843.843 0 00-.504-.3zm4.473.89a.3.3 0 00.002.6 3.78 3.78 0 012.65 1.15 3.5 3.5 0 01.9 2.57.3.3 0 00.3.299l.01.012a.3.3 0 00.3-.301c.03-1.19-.34-2.19-1.07-2.99-.73-.8-1.75-1.25-3.05-1.34a.3.3 0 00-.042 0zm.49 1.619a.305.305 0 00-.018.611c.99.05 1.47.55 1.53 1.58a.3.3 0 00.3.29h.01a.3.3 0 00.29-.32c-.07-1.34-.8-2.091-2.1-2.161a.305.305 0 00-.012 0z"/%3E%3C/svg%3E',
url: (d) => `viber://forward?text=${d.title}%0D%0A${d.url}${d.text ? `%0D%0A%0D%0A${d.text}` : ''}`, url: (d) =>
`viber://forward?text=${d.title}%0D%0A${d.url}${
d.text ? `%0D%0A%0D%0A${d.text}` : ""
}`,
}, },
vkontakte: { vkontakte: {
color: '#4680C2', color: "#4680C2",
icon: 'data:image/svg+xml,%3Csvg fill="%23fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M23.058 19.504h-2.616c-.99 0-1.297-.787-3.076-2.59-1.55-1.501-2.236-1.704-2.617-1.704-.534 0-.687.153-.687.89v2.363c0 .636-.202 1.017-1.88 1.017-2.77 0-5.845-1.677-8.004-4.804C.925 10.103.034 6.672.034 5.961c0-.381.153-.737.89-.737H3.54c.66 0 .915.305 1.17 1.016 1.295 3.736 3.456 7.014 4.345 7.014.33 0 .483-.153.483-.99V8.399c-.102-1.78-1.042-1.931-1.042-2.566 0-.306.255-.61.66-.61h4.117c.56 0 .762.304.762.964v5.211c0 .558.255.762.407.762.33 0 .61-.204 1.22-.813 1.88-2.11 3.227-5.362 3.227-5.362.178-.381.483-.737 1.145-.737h2.616c.788 0 .966.405.788.965-.33 1.526-3.532 6.048-3.532 6.048-.28.457-.381.66 0 1.17.28.381 1.194 1.169 1.805 1.88 1.118 1.27 1.98 2.338 2.21 3.076.255.735-.128 1.116-.864 1.116z"/%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="M23.058 19.504h-2.616c-.99 0-1.297-.787-3.076-2.59-1.55-1.501-2.236-1.704-2.617-1.704-.534 0-.687.153-.687.89v2.363c0 .636-.202 1.017-1.88 1.017-2.77 0-5.845-1.677-8.004-4.804C.925 10.103.034 6.672.034 5.961c0-.381.153-.737.89-.737H3.54c.66 0 .915.305 1.17 1.016 1.295 3.736 3.456 7.014 4.345 7.014.33 0 .483-.153.483-.99V8.399c-.102-1.78-1.042-1.931-1.042-2.566 0-.306.255-.61.66-.61h4.117c.56 0 .762.304.762.964v5.211c0 .558.255.762.407.762.33 0 .61-.204 1.22-.813 1.88-2.11 3.227-5.362 3.227-5.362.178-.381.483-.737 1.145-.737h2.616c.788 0 .966.405.788.965-.33 1.526-3.532 6.048-3.532 6.048-.28.457-.381.66 0 1.17.28.381 1.194 1.169 1.805 1.88 1.118 1.27 1.98 2.338 2.21 3.076.255.735-.128 1.116-.864 1.116z"/%3E%3C/svg%3E',
url: (d) => `https://vk.com/share.php?url=${d.url}&title=${d.title}${d.media ? `&image=${d.media}` : ''}`, url: (d) =>
`https://vk.com/share.php?url=${d.url}&title=${d.title}${
d.media ? `&image=${d.media}` : ""
}`,
}, },
whatsapp: { whatsapp: {
color: '#25D366', color: "#25D366",
icon: 'data:image/svg+xml,%3Csvg fill="%23fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 00-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/%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="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 00-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/%3E%3C/svg%3E',
url: (d) => `https://wa.me/?text=${d.title}%0D%0A${d.url}${d.text ? `%0D%0A%0D%0A${d.text}` : ''}`, url: (d) =>
`https://wa.me/?text=${d.title}%0D%0A${d.url}${
d.text ? `%0D%0A%0D%0A${d.text}` : ""
}`,
}, },
}; };
@ -100,11 +126,7 @@ const NETWORKS = {
* @type {Record<string, UrlBuilder>} * @type {Record<string, UrlBuilder>}
*/ */
const urlBuilderMap = Object.fromEntries( const urlBuilderMap = Object.fromEntries(
Object.entries(NETWORKS) Object.entries(NETWORKS).map((entry) => [entry[0], entry[1].url])
.map((entry) => [
entry[0],
entry[1].url,
]),
); );
module.exports = { module.exports = {

10
src/networksMixin.js
View File

@ -1,20 +1,20 @@
const { fullNetworkMap } = require('./networks'); const { fullNetworkMap } = require("./networks");
module.exports = function networks() { module.exports = function networks() {
const ruleObj = {}; const ruleObj = {};
Object.entries(fullNetworkMap).forEach(([name, network]) => { Object.entries(fullNetworkMap).forEach(([name, network]) => {
ruleObj[`.shareon > *.${name}`] = { ruleObj[`.shareon > *.${name}`] = {
'background-color': network.color, "background-color": network.color,
}; };
ruleObj[`.shareon > *.${name}::before`] = { ruleObj[`.shareon > *.${name}::before`] = {
'background-image': `url('${network.icon}')`, "background-image": `url('${network.icon}')`,
}; };
if (Object.prototype.hasOwnProperty.call(network, 'iconWhenText')) { if (Object.prototype.hasOwnProperty.call(network, "iconWhenText")) {
ruleObj[`.shareon > *.${name}:not(:empty)::before`] = { ruleObj[`.shareon > *.${name}:not(:empty)::before`] = {
'background-image': `url('${network.iconWhenText}')`, "background-image": `url('${network.iconWhenText}')`,
}; };
} }
}); });

42
src/shareon.js
View File

@ -1,8 +1,8 @@
// eslint-disable-next-line import/no-unresolved // eslint-disable-next-line import/no-unresolved
import urlBuilderMap from 'consts:urlBuilderMap'; import urlBuilderMap from "consts:urlBuilderMap";
const initializeShareon = () => { const initializeShareon = () => {
const shareonContainers = document.getElementsByClassName('shareon'); const shareonContainers = document.getElementsByClassName("shareon");
// iterate over <div class="shareon"> // iterate over <div class="shareon">
for (let i = 0; i < shareonContainers.length; i += 1) { for (let i = 0; i < shareonContainers.length; i += 1) {
@ -25,48 +25,38 @@ const initializeShareon = () => {
if (Object.prototype.hasOwnProperty.call(urlBuilderMap, cls)) { if (Object.prototype.hasOwnProperty.call(urlBuilderMap, cls)) {
const preset = { const preset = {
url: encodeURIComponent( url: encodeURIComponent(
child.dataset.url child.dataset.url ||
|| container.dataset.url container.dataset.url ||
|| window.location.href, window.location.href
), ),
title: encodeURIComponent( title: encodeURIComponent(
child.dataset.title child.dataset.title || container.dataset.title || document.title
|| container.dataset.title
|| document.title,
), ),
media: encodeURIComponent( media: encodeURIComponent(
child.dataset.media child.dataset.media || container.dataset.media || ""
|| container.dataset.media
|| '',
), ),
text: encodeURIComponent( text: encodeURIComponent(
child.dataset.text child.dataset.text || container.dataset.text || ""
|| container.dataset.text
|| '',
), ),
via: encodeURIComponent( via: encodeURIComponent(
child.dataset.via child.dataset.via || container.dataset.via || ""
|| container.dataset.via
|| '',
), ),
fbAppId: encodeURIComponent( fbAppId: encodeURIComponent(
child.dataset.fbAppId child.dataset.fbAppId || container.dataset.fbAppId || ""
|| container.dataset.fbAppId
|| '',
), ),
}; };
const url = urlBuilderMap[cls](preset); const url = urlBuilderMap[cls](preset);
if (child.tagName.toLowerCase() === 'a') { if (child.tagName.toLowerCase() === "a") {
child.setAttribute('href', url); child.setAttribute("href", url);
child.setAttribute('rel', 'noopener noreferrer'); child.setAttribute("rel", "noopener noreferrer");
child.setAttribute('target', '_blank'); child.setAttribute("target", "_blank");
} else { } else {
const getButtonListener = (buttonUrl) => () => { const getButtonListener = (buttonUrl) => () => {
window.open(buttonUrl, '_blank', 'noopener,noreferrer'); window.open(buttonUrl, "_blank", "noopener,noreferrer");
}; };
child.addEventListener('click', getButtonListener(url)); child.addEventListener("click", getButtonListener(url));
} }
break; // once a network is detected we don't want to check further break; // once a network is detected we don't want to check further

88
src/style.css
View File

@ -1,76 +1,76 @@
:root { :root {
--button-size: 36px; --button-size: 36px;
--icon-size: 20px; --icon-size: 20px;
--padding-ver: calc(0.3 * var(--icon-size)); --padding-ver: calc(0.3 * var(--icon-size));
--padding-hor: calc(var(--icon-size) / 2); --padding-hor: calc(var(--icon-size) / 2);
--padding-icon: calc((var(--button-size) - var(--icon-size)) / 2); --padding-icon: calc((var(--button-size) - var(--icon-size)) / 2);
--height: calc(var(--button-size) - 2 * var(--padding-ver)); --height: calc(var(--button-size) - 2 * var(--padding-ver));
--width: calc(var(--button-size) - 2 * var(--padding-hor)); --width: calc(var(--button-size) - 2 * var(--padding-hor));
} }
.shareon { .shareon {
font-size: 0 !important; font-size: 0 !important;
} }
.shareon > * { .shareon > * {
display: inline-block; display: inline-block;
position: relative; position: relative;
height: var(--height); height: var(--height);
min-width: var(--width); min-width: var(--width);
margin: calc(var(--padding-ver) / 2); margin: calc(var(--padding-ver) / 2);
padding: var(--padding-ver) var(--padding-hor); padding: var(--padding-ver) var(--padding-hor);
background-color: #ccc; background-color: #ccc;
border-radius: calc(var(--icon-size) / 6); border-radius: calc(var(--icon-size) / 6);
border: none; border: none;
box-sizing: content-box; box-sizing: content-box;
color: white; color: white;
line-height: 1.5; line-height: 1.5;
transition: opacity 300ms ease; transition: opacity 300ms ease;
vertical-align: middle; vertical-align: middle;
} }
.shareon > *:hover { .shareon > *:hover {
border: none; border: none;
cursor: pointer; cursor: pointer;
opacity: .7; opacity: 0.7;
} }
.shareon > *:not(:empty) { .shareon > *:not(:empty) {
font-size: calc(0.8 * var(--icon-size)); font-size: calc(0.8 * var(--icon-size));
text-decoration: none; text-decoration: none;
} }
.shareon > *:not(:empty)::before { .shareon > *:not(:empty)::before {
position: relative; position: relative;
height: 100%; height: 100%;
width: calc(var(--icon-size) + var(--padding-icon)); width: calc(var(--icon-size) + var(--padding-icon));
top: 0; top: 0;
left: 0; left: 0;
background-position: 0 50%; background-position: 0 50%;
} }
.shareon > *::before { .shareon > *::before {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
height: var(--icon-size); height: var(--icon-size);
width: var(--icon-size); width: var(--icon-size);
top: var(--padding-icon); top: var(--padding-icon);
left: var(--padding-icon); left: var(--padding-icon);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: var(--icon-size) var(--icon-size); background-size: var(--icon-size) var(--icon-size);
content: ''; content: "";
vertical-align: bottom; vertical-align: bottom;
} }
@mixin networks; @mixin networks;