Release 1.0.0

See #1
pull/2/head
Nikita Karamov 2020-03-26 01:52:00 +01:00 committed by GitHub
commit fd54e4d8c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 8176 additions and 27 deletions

1
.eslintignore Normal file
View File

@ -0,0 +1 @@
dist

6
.eslintrc.js Normal file
View File

@ -0,0 +1,6 @@
module.exports = {
extends: ['airbnb-typescript/base'],
parserOptions: {
project: './tsconfig.json',
},
};

6
.gitignore vendored
View File

@ -1 +1,5 @@
node_modules
dev
dist
.idea
node_modules
yarn-error.log

9
.travis.yml Normal file
View File

@ -0,0 +1,9 @@
language: node_js
node_js:
- node
- lts/erbium
- lts/dubnium
cache: yarn
install: yarn
script: yarn test

View File

@ -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>
```

BIN
docs/favicon-16x16.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 493 B

BIN
docs/favicon-32x32.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 820 B

BIN
docs/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -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>

BIN
docs/screen01@2x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

View File

@ -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
}
]
}

36
rollup/plugins.js Normal file
View File

@ -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();

View File

@ -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),
],
};

View File

@ -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()
],
};

66
src/index.ts Normal file
View File

@ -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,
);
}
}
};

117
src/style.scss Normal file
View File

@ -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");
}
}
}
}

18
tsconfig.json Normal file
View File

@ -0,0 +1,18 @@
{
"compilerOptions": {
"lib": [
"dom",
"es6"
],
"module": "ES2020",
"noImplicitAny": true,
"noImplicitReturns": true,
"target": "es5"
},
"include": [
"./src/**/*"
],
"exclude": [
"node_modules"
]
}

7575
yarn.lock

File diff suppressed because it is too large Load Diff