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 @@
 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"
+<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">
         align="right"
         alt="Postal Horn emoji"
         width="96"
         height="96">
 Lightweight, stylish and ethical share buttons.
- **Small.** Dependency-free.
+- **Small.** Dependency-free. CSS+JS bundle is only 3.15 KB minified and gzipped.
- **Stylish.** Uses official vector logos and colors.
+- **Stylish.** Uses official vector logos and colors with no visual mess.
- **Ethical.** No tracking code is being embedded.
+- **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 -->
+<link href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css" rel="stylesheet">
-<div class="sharevia">
+<script src="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.js" type="text/javascript"></script>
-    <!-- Choose desired networks -->
+```
    <div class="twitter"></div>
-    <!-- Add optional text -->
+or install it via NPM use it in a JS file that you will bundle:
-    <div class="facebook">Share</div>
+
 ```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>
--- 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",
+  "version": "1.0.0-beta.3",
-  "repository": "https://github.com/NickKaramoff/shareon",
+  "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"
  ],
-
+  "files": [
-  "main": "./dist/shareon.js",
+    "dist",
-
+    "LICENSE",
-  "scripts": {},
+    "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