Release 1.0.0

See #1
2020-03-26 01:52:00 +01:00 · 2020-03-26 01:52:00 +01:00 · fd54e4d8c7
parent 116814f907 7c2912efeb
commit fd54e4d8c7
18 changed files with 8176 additions and 27 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1 @@
+dist
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,6 @@
+module.exports = {
+    extends: ['airbnb-typescript/base'],
+    parserOptions: {
+        project: './tsconfig.json',
+    },
+};
--- a/.gitignore
+++ b/.gitignore
@ -1 +1,5 @@
-node_modules
+dev
+dist
+.idea
+node_modules
+yarn-error.log
--- a/.travis.yml
+++ b/.travis.yml
@ -0,0 +1,9 @@
+language: node_js
+node_js:
+  - node
+  - lts/erbium
+  - lts/dubnium
+cache: yarn
+
+install: yarn
+script: yarn test
--- a/README.md
+++ b/README.md
@ -1,24 +1,87 @@
 # shareon

-<img src="https://raw.githubusercontent.com/googlefonts/noto-emoji/master/png/128/emoji_u1f4ef.png"
-         align="right"
-         alt="Postal Horn emoji"
-         width="96"
-         height="96">
+<img src="https://raw.githubusercontent.com/googlefonts/noto-emoji/master/png/128/emoji_u1f4ef.png" align="right" alt="Postal Horn emoji" width="96" height="96">

 Lightweight, stylish and ethical share buttons.

- **Small.** Dependency-free.
- **Stylish.** Uses official vector logos and colors.
- **Ethical.** No tracking code is being embedded.
+- **Small.** Dependency-free. CSS+JS bundle is only 3.15 KB minified and gzipped.
+- **Stylish.** Uses official vector logos and colors with no visual mess.
+- **Ethical.** No tracking code is being embedded. JS is used for quick setup only.
+
+<img src="https://raw.githubusercontent.com/NickKaramoff/shareon/develop/docs/screen01@2x.png" height="114" alt="shareon example">
+
+----
+Observe the live demo here: [os.karamoff.dev/shareon](https://os.karamoff.dev/shareon)
+
+## Install
+
+Include the link to shareon's JS and CSS in your website:

 ```html
-<!-- Define the container element -->
-<div class="sharevia">
-    <!-- Choose desired networks -->
-    <div class="twitter"></div>
+<link 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>
+```

-    <!-- Add optional text -->
-    <div class="facebook">Share</div>
+or install it via NPM use it in a JS file that you will bundle:
+
+```sh
+npm install shareon
+# or
+yarn add shareon
+```
+
+```js
+require('shareon');
+```
+
+## Usage
+
+> shareon was heavily inspired by [Likely](https://ilyabirman.net/projects/likely/),
+  and has a backwards-compatible API (excluding themes and sizes).
+
+Create a container with class `shareon` and populate it with elements, whose
+classes match the names of social networks:
+
+```html
+<div class="shareon">
+    <a class="facebook"></a>
+    <a class="messenger"></a>
+    <a class="pinterest"></a>
+    <a class="telegram"></a>
+    <a class="twitter"></a>
+    <a class="whatsapp"></a>
+</div>
+```
+
+If you use `<a>`, the buttons will get a `href`-attribute to them. In other cases
+they will get a listener on `click` event, so you can use `<button>`s if you wish.
+
+By default the URL and the title of the page will be used in sharing dialogs.
+To change this, you can use the `data-url` and `data-title` attributes. Use them
+on the whole container or on the specific buttons:
+
+```html
+<div class="shareon" data-url="https://example.com">
+    <a class="facebook" data-title="Custom Facebook title"></a>
+    <a class="twitter" data-title="Custom Twitter title"></a>
+</div>
+```
+
+Apart from the URL and title, some networks support extra parameters:
+
+- add `data-media` to a Pinterest button to customize the pinned picture
+- add `data-text` to a WhatsApp or Telegram button to add custom message text
+- add `data-via` to a Twitter button to mention a user
+
+Here are all the custom parameters in their glory:
+
+```html
+<div class="shareon" data-url="https://example.com/custom-url">
+    <a class="facebook" data-title="Custom Facebook title"></a>
+    <a class="messenger" data-url="https://my-cool-website.com"></a>
+    <a class="pinterest" data-media="https://picsum.photos/500">Pin</a>
+    <a class="telegram" data-text="Check this out!"></a>
+    <a class="twitter" data-via="MyNickname"></a>
+    <a class="whatsapp">Send</a>
 </div>
 ```
--- a/docs/favicon-16x16.png
+++ b/docs/favicon-16x16.png
--- a/docs/favicon-32x32.png
+++ b/docs/favicon-32x32.png
--- a/docs/favicon.ico
+++ b/docs/favicon.ico
--- a/docs/index.html
+++ b/docs/index.html
@ -9,7 +9,16 @@

    <title>shareon</title>

+    <style>
+        .shareon > a:hover {
+            color: #fff;
+        }
+    </style>
+
    <link rel="stylesheet" href="https://igoradamenko.github.io/awsm.css/css/awsm.min.css">
+
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
 </head>
 <body>
    <header>
@ -43,12 +52,154 @@
            <p>
                <code>shareon</code> are share buttons for popular social networks.
            </p>
+
+            <div class="shareon" data-title="shareon — lightweight, stylish and ethical share buttons"
+                 style="text-align: center">
+                <a class="facebook"></a>
+                <a class="messenger"></a>
+                <a class="pinterest"></a>
+                <a class="telegram"></a>
+                <a class="twitter"></a>
+                <a class="whatsapp"></a>
+            </div>
+
+            <p>
+                Unlike many other share buttons, <code>shareon</code> are:
+            </p>
+
+            <ul>
+                <li><b>lightweight</b>, clocking in at only 3.15 KB gzipped code (JS+CSS)</li>
+                <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>
+                The whole JavaScript code is quick and simple: it only populates the buttons with set up links. The
+                speed
+                and easy customization make <code>shareon</code> the perfect choice for your blog, news site or project
+                page!
+            </p>
+        </article>
+
+        <article>
+            <h2>
+                <a id="install" href="#install" aria-hidden="true"></a>
+                Install
+            </h2>
+            <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"
+      rel="stylesheet"&gt;
+&lt;script src="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.js"
+        type="text/javascript"&gt;&lt;/script&gt;</code></pre>
+
+            <p>or install it via NPM use it in a JS file that you will later bundle:</p>
+            <pre><code>require('shareon');</code></pre>
+        </article>
+
+        <article>
+            <h2>
+                <a id="usage" href="#usage" aria-hidden="true"></a>
+                Usage
+            </h2>
+
+            <aside>
+                <p>
+                    <code>shareon</code> was heavily inspired by
+                    <a href="https://ilyabirman.net/projects/likely/">Likely</a>,
+                    and has a backwards-compatible API
+                </p>
+            </aside>
+
+            <p>
+                Create a container with class <code>shareon</code> and populate it with elements, whose classes match
+                the
+                names of social networks:
+            </p>
+
+            <pre><code>&lt;div class="shareon"&gt;
+    &lt;a class="facebook"&gt;&lt;/a&gt;
+    &lt;a class="messenger"&gt;&lt;/a&gt;
+    &lt;a class="pinterest"&gt;&lt;/a&gt;
+    &lt;a class="telegram"&gt;&lt;/a&gt;
+    &lt;a class="twitter"&gt;&lt;/a&gt;
+    &lt;a class="whatsapp"&gt;&lt;/a&gt;
+&lt;/div&gt;</code></pre>
+            <div class="shareon">
+                <a class="facebook"></a>
+                <a class="messenger"></a>
+                <a class="pinterest"></a>
+                <a class="telegram"></a>
+                <a class="twitter"></a>
+                <a class="whatsapp"></a>
+            </div>
+
+            <p>
+                If you use <code>&lt;a&gt;</code>, the buttons will get a `href`-attribute to them. In other cases they
+                will get a listener on <code>click</code> event, so you can use <code>&lt;button&gt;</code>s if you
+                wish.
+            </p>
+
+            <p>
+                By default the URL and the title of the page will be used in sharing dialogs. To change this, you can
+                use
+                the <code>data-url</code> and <code>data-title</code> attributes. Use them on the whole container or on
+                the specific buttons:
+            </p>
+
+            <pre><code>&lt;div class="shareon" data-url="https://example.com"&gt;
+    &lt;a class="facebook" data-title="Custom Facebook title"&gt;&lt;/a&gt;
+    &lt;a class="twitter" data-title="Custom Twitter title"&gt;&lt;/a&gt;
+&lt;/div&gt;</code></pre>
+
+            <div class="shareon" data-url="https://example.com">
+                <a class="whatsapp" data-title="Custom WhatsApp title"></a>
+                <a class="twitter" data-title="Custom Twitter title"></a>
+            </div>
+
+            <p>
+                Apart from the URL and title, some networks support extra parameters:
+            </p>
+
+            <ul>
+                <li>add <code>data-media</code> to a Pinterest button to customize the pinned picture</li>
+                <li>add <code>data-text</code> to a WhatsApp or Telegram button to add custom message text</li>
+                <li>add <code>data-via</code> to a Twitter button to mention a user</li>
+            </ul>
+
+            <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;
+    &lt;a class="facebook" data-title="Custom Facebook title"&gt;&lt;/a&gt;
+    &lt;a class="messenger" data-url="https://my-cool-website.com"&gt;&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="twitter" data-via="MyNickname"&gt;&lt;/a&gt;
+    &lt;a class="whatsapp"&gt;Send&lt;/a&gt;
+&lt;/div></code></pre>
+            <div class="shareon" data-url="https://example.com/custom-url">
+                <a class="facebook" data-title="Custom Facebook title"></a>
+                <a class="messenger" data-url="https://my-cool-website.com"></a>
+                <a class="pinterest" data-media="https://picsum.photos/500">Pin</a>
+                <a class="telegram" data-text="Check this out!"></a>
+                <a class="twitter" data-via="MyNickname"></a>
+                <a class="whatsapp">Send</a>
+            </div>
+
        </article>
    </main>

    <footer>
        <p>by <a href="https://karamoff.dev" target="_blank">Nikita Karamov</a></p>
-        <p>Website built with <a href="https://igoradamenko.github.io/awsm.css/index.html" target="_blank">awsm.css</a></p>
+        <p>Website built with <a href="https://igoradamenko.github.io/awsm.css/index.html" target="_blank">awsm.css</a>
+        </p>
    </footer>
+
+    <link href="https://cdn.jsdelivr.net/npm/shareon@1.0.0-beta.3/dist/shareon.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/shareon@1.0.0-beta.3/dist/shareon.min.js" type="text/javascript"></script>
 </body>
-</html>
+</html>
--- a/docs/screen01@2x.png
+++ b/docs/screen01@2x.png
--- a/package.json
+++ b/package.json
@ -1,9 +1,15 @@
 {
  "name": "shareon",
-  "version": "1.0.0-alpha.0",
-  "repository": "https://github.com/NickKaramoff/shareon",
+  "version": "1.0.0-beta.3",
+  "homepage": "https://os.karamoff.dev/shareon",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NickKaramoff/shareon.git"
+  },
+  "bugs": {
+    "url": "https://github.com/NickKaramoff/shareon/issues"
+  },
  "license": "MIT",
-
  "author": "Nikita Karamov <nick@karamoff.dev>",
  "description": "Lightweight, stylish and ethical share buttons for popular social networks",
  "keywords": [
@ -11,12 +17,61 @@
    "sharing",
    "social networks"
  ],
-
-  "main": "./dist/shareon.js",
-
-  "scripts": {},
-
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "main": "./dist/shareon.cjs",
+  "exports": {
+    "require": "./dist/shareon.cjs"
+  },
+  "unpkg": "./dist/shareon.min.js",
+  "scripts": {
+    "build": "rollup -c ./rollup/rollup.config.prod.js",
+    "dev": "rollup -w -c ./rollup/rollup.config.dev.js",
+    "pretest": "run-p build",
+    "test:lint": "eslint-ci --ext .js,.ts ./src/",
+    "test:size": "size-limit",
+    "test": "run-p test:*"
+  },
  "dependencies": {},
-
-  "devDependencies": {}
+  "devDependencies": {
+    "@rollup/plugin-strip": "^1.3.2",
+    "@rollup/plugin-typescript": "^4.0.0",
+    "@size-limit/preset-small-lib": "^4.4.1",
+    "@typescript-eslint/eslint-plugin": "^2.24.0",
+    "cssnano": "^4.1.10",
+    "eslint": "^6.8.0",
+    "eslint-ci": "^1.0.0",
+    "eslint-config-airbnb-typescript": "^7.2.0",
+    "eslint-plugin-import": "^2.20.1",
+    "node-sass": "^4.13.1",
+    "np": "^6.2.0",
+    "npm-run-all": "^4.1.5",
+    "rollup": "^1.32.1",
+    "rollup-plugin-banner": "^0.2.1",
+    "rollup-plugin-postcss": "^2.5.0",
+    "rollup-plugin-terser": "^5.3.0",
+    "size-limit": "^4.4.1",
+    "typescript": "^3.8.3"
+  },
+  "size-limit": [
+    {
+      "limit": "1 KB",
+      "path": "./dist/shareon.min.js",
+      "webpack": false
+    },
+    {
+      "limit": "1 KB",
+      "path": [
+        "./dist/shareon.cjs"
+      ]
+    },
+    {
+      "limit": "7 KB",
+      "path": "./dist/shareon.min.css",
+      "webpack": false
+    }
+  ]
 }
--- a/rollup/plugins.js
+++ b/rollup/plugins.js
@ -0,0 +1,36 @@
+import postcssPluginCssnano from 'cssnano';
+import rollupPluginBanner from 'rollup-plugin-banner';
+import rollupPluginPostcss from 'rollup-plugin-postcss';
+import rollupPluginStrip from '@rollup/plugin-strip';
+import { terser as rollupPluginTerser } from 'rollup-plugin-terser';
+import rollupPluginTypescript from '@rollup/plugin-typescript';
+
+export const banner = () => rollupPluginBanner(
+  '<%= pkg.name %> by Nikita Karamov\nInspired by Likely (https://ilyabirman.net/projects/likely/)'
+)
+
+export const postcss = (file, minify) => rollupPluginPostcss({
+  extract: file || true,
+  plugins: [
+    minify && postcssPluginCssnano({
+      preset: 'default',
+    })
+  ],
+})
+
+export const strip = () => rollupPluginStrip({
+  debugger: true,
+  include: ['**/*.js', '**/*.ts'],
+  functions: ['console.log', 'console.debug', 'assert.*'],
+  sourceMap: false,
+});
+
+export const terser = () => rollupPluginTerser({
+  sourcemap: false,
+  output: {
+    comments: false,
+    ecma: 5,
+  },
+});
+
+export const typescript = () => rollupPluginTypescript();
--- a/rollup/rollup.config.dev.js
+++ b/rollup/rollup.config.dev.js
@ -0,0 +1,19 @@
+import { postcss, typescript } from './plugins';
+
+const input = './src/index.ts';
+const name = 'shareon';
+const outputDir = './dev/';
+
+
+export default {
+  input,
+  output: {
+    name,
+    format: 'iife',
+    file: `${outputDir}${name}.js`,
+  },
+  plugins: [
+    typescript(),
+    postcss(`${outputDir}${name}.css`, false),
+  ],
+};
--- a/rollup/rollup.config.prod.js
+++ b/rollup/rollup.config.prod.js
@ -0,0 +1,29 @@
+import { banner, postcss, strip, terser, typescript } from './plugins';
+
+const input = './src/index.ts';
+const name = 'shareon';
+const outputDir = './dist/';
+
+
+export default {
+  input,
+  output: [
+    {
+      name,
+      format: 'cjs',
+      file: `${outputDir}${name}.cjs`,
+    },
+    {
+      name,
+      format: 'iife',
+      file: `${outputDir}${name}.min.js`,
+      plugins: [terser()],
+    },
+  ],
+  plugins: [
+    typescript(),
+    strip(),
+    postcss(`${outputDir}${name}.min.css`, true),
+    banner()
+  ],
+};
--- a/src/index.ts
+++ b/src/index.ts
@ -0,0 +1,66 @@
+import './style.scss';
+
+interface PublishPreset {
+  url: string,
+  title: string,
+  extra: {
+    media: string,
+    text: string,
+    via: string,
+  }
+}
+
+type UrlBuilder = (data: PublishPreset) => string;
+
+const NETWORKS: { [name: string]: UrlBuilder } = {
+  facebook: (d) => `https://www.facebook.com/sharer/sharer.php?u=${d.url}`,
+  messenger: (d) => `https://www.facebook.com/dialog/send?app_id=3619024578167617&link=${d.url}&redirect_uri=${d.url}`,
+  pinterest: (d) => `https://pinterest.com/pin/create/button/?url=${d.url}&description=${d.title}${d.extra.media ? `&media=${d.extra.media}` : ''}`,
+  telegram: (d) => `https://telegram.me/share/url?url=${d.url}${d.extra.text ? `&text=${d.extra.text}` : ''}`,
+  twitter: (d) => `https://twitter.com/intent/tweet?url=${d.url}&text=${d.title}${d.extra.via ? `&via=${d.extra.via}` : ''}`,
+  whatsapp: (d) => `whatsapp://send?text=${d.title}%0D%0A${d.url}${d.extra.text ? `%0D%0A%0D%0A${d.extra.text}` : ''}`,
+};
+
+function initShareonChild(child: HTMLElement, preset: PublishPreset) {
+  if (child) {
+    child.classList.forEach((cls) => {
+      if (Object.prototype.hasOwnProperty.call(NETWORKS, cls)) {
+        const url = NETWORKS[cls](preset);
+        if (child.tagName.toLowerCase() === 'a') {
+          child.setAttribute('href', url);
+          child.setAttribute('rel', 'noopener noreferrer');
+          child.setAttribute('target', '_blank');
+        } else {
+          child.addEventListener('click', () => { window.open(url, '_blank', 'noopener,noreferrer').opener = null; });
+        }
+      }
+    });
+  }
+}
+
+window.onload = () => {
+  const shareonContainers = document.getElementsByClassName('shareon');
+
+  for (let i = 0; i < shareonContainers.length; i += 1) {
+    const container = shareonContainers[i] as HTMLElement;
+
+    for (let j = 0; j < container.children.length; j += 1) {
+      const child = container.children[j] as HTMLElement;
+
+      const preset: PublishPreset = {
+        url: encodeURIComponent(child.dataset.url || container.dataset.url || window.location.href),
+        title: encodeURIComponent(child.dataset.title || container.dataset.title || document.title || ''),
+        extra: {
+          media: encodeURIComponent(child.dataset.media || container.dataset.media || ''),
+          text: encodeURIComponent(child.dataset.text || container.dataset.text || ''),
+          via: encodeURIComponent(child.dataset.via || container.dataset.via || ''),
+        },
+      };
+
+      initShareonChild(
+        child as HTMLElement,
+        preset,
+      );
+    }
+  }
+};
--- a/src/style.scss
+++ b/src/style.scss
@ -0,0 +1,117 @@
+$button-size:   36px;
+$icon-size:     20px;
+
+$padding-ver:   0.3*$icon-size;
+$padding-hor:   $icon-size / 2;
+$padding-icon:  ($button-size - $icon-size) / 2;
+
+$height:        $button-size - 2*$padding-ver;
+$width:         $button-size - 2*$padding-hor;
+
+.shareon {
+    & > * {
+        display: inline-block;
+        position: relative;
+
+        height: $height;
+        min-width: $width;
+
+        padding: $padding-ver $padding-hor;
+
+        background-color: #ccc;
+        border-radius: $icon-size / 6;
+        border: none;
+        box-sizing: content-box;
+        color: white;
+        line-height: 1.5;
+        transition: opacity 300ms ease;
+        vertical-align: middle;
+
+        &:hover {
+            cursor: pointer;
+            opacity: .7;
+        }
+
+        &:not(:empty) {
+            font-size: 0.8 * $icon-size;
+            text-decoration: none;
+
+            &::before {
+                position: relative;
+
+                height: 100%;
+                width: $icon-size+$padding-icon;
+
+                top: 0;
+                left: 0;
+
+                background-position: 0 50%;
+            }
+        }
+
+        &::before {
+            display: inline-block;
+            position: absolute;
+
+            height: $icon-size;
+            width: $icon-size;
+
+            top: $padding-icon;
+            left: $padding-icon;
+
+            background-repeat: no-repeat;
+            background-size: $icon-size $icon-size;
+            content: '';
+            vertical-align: bottom;
+        }
+
+
+        &.facebook {
+            background-color: #1877F2;
+
+            &::before {
+                background-image: url("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");
+            }
+        }
+
+        &.messenger {
+            background-color: #0099FF;
+
+            &::before {
+                background-image: url("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");
+            }
+        }
+
+        &.pinterest {
+            background-color: #e60023;
+
+            &::before {
+                background-image: url("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");
+            }
+        }
+
+        &.telegram {
+            background-color: #179CDE;
+
+            &::before {
+                background-image: url("data:image/svg+xml,%3Csvg viewBox='4.4 5 14 14' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M4.987 11.948c3.69-1.487 6.151-2.468 7.382-2.941 3.515-1.352 4.245-1.587 4.721-1.595.105-.002.339.022.491.136a.482.482 0 01.18.317c.017.091.038.299.021.461-.19 1.851-1.015 6.343-1.434 8.417-.177.877-.529 1.065-.867 1.094-.736.062-1.291-.343-2.003-.775-1.114-.675-1.788-.987-2.869-1.646-1.25-.762-.15-1.118.562-1.802.186-.179 3.371-3.042 3.357-3.128-.005-.032-.099-.34-.173-.401s-.184-.04-.262-.024c-.112.024-1.892 1.112-5.339 3.264-.506.321-.963.477-1.373.469-.452-.009-1.321-.236-1.968-.43-.792-.239-1.085-.351-1.03-.756.028-.211.23-.431.604-.66z'/%3E%3C/svg%3E");
+            }
+        }
+
+        &.twitter {
+            background-color: #1da1f2;
+
+            &::before {
+                background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' 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");
+            }
+        }
+
+        &.whatsapp {
+            background-color: #25D366;
+
+            &::before {
+                background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' 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");
+            }
+        }
+    }
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "lib": [
+            "dom",
+            "es6"
+        ],
+        "module": "ES2020",
+        "noImplicitAny": true,
+        "noImplicitReturns": true,
+        "target": "es5"
+    },
+    "include": [
+        "./src/**/*"
+    ],
+    "exclude": [
+        "node_modules"
+    ]
+}
--- a/yarn.lock
+++ b/yarn.lock