publish temporary version waiting merge pull request on shareon original repo.
This commit is contained in:
parent
4db5ac324b
commit
fe31d87512
92
README.md
92
README.md
|
@ -1,93 +1,7 @@
|
||||||
# shareon
|
# 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">
|
I'm not shareon maintainer.
|
||||||
|
|
||||||
Lightweight, stylish and ethical share buttons.
|
I just publish a specific version waiting my pull request will be merged.
|
||||||
|
|
||||||
- **Small.** Dependency-free. CSS+JS bundle is only 6 KB minified and gzipped.
|
Check [original repository](https://github.com/NickKaramoff/shareon).
|
||||||
- **Stylish.** Uses official vector logos and colors with no visual mess.
|
|
||||||
- **Ethical.** Embeds no tracking code. JS is required only for the setup.
|
|
||||||
|
|
||||||
<img src="https://raw.githubusercontent.com/NickKaramoff/shareon/master/docs/screen01@2x.png" height="156" width="416" alt="shareon example">
|
|
||||||
|
|
||||||
----
|
|
||||||
Observe the live demo here: [shareon.js.org](https://shareon.js.org)
|
|
||||||
|
|
||||||
## Install
|
|
||||||
|
|
||||||
Include the link to shareon's JS and CSS in your website:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/shareon@1.2.0/dist/shareon.min.css" rel="stylesheet">
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/shareon@1.2.0/dist/shareon.min.js" type="text/javascript"></script>
|
|
||||||
```
|
|
||||||
|
|
||||||
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="linkedin"></a>
|
|
||||||
<a class="messenger"></a>
|
|
||||||
<a class="odnoklassniki"></a>
|
|
||||||
<a class="pinterest"></a>
|
|
||||||
<a class="pocket"></a>
|
|
||||||
<button class="reddit"></button>
|
|
||||||
<button class="telegram"></button>
|
|
||||||
<button class="twitter"></button>
|
|
||||||
<button class="viber"></button>
|
|
||||||
<button class="vkontakte"></button>
|
|
||||||
<button class="whatsapp"></button>
|
|
||||||
</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 an Odnoklassniki, Pinterest, or VK button to customize the pinned picture
|
|
||||||
- add `data-text` to a WhatsApp, Telegram or Viber button to add custom message text
|
|
||||||
- add `data-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>
|
|
||||||
```
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "shareon",
|
"name": "@amiceli/shareon",
|
||||||
"version": "1.2.0",
|
"version": "1.2.1",
|
||||||
"description": "Lightweight, stylish and ethical share buttons for popular social networks",
|
"description": "Lightweight, stylish and ethical share buttons for popular social networks",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"homepage": "https://shareon.js.org",
|
"homepage": "https://shareon.js.org",
|
||||||
|
@ -11,10 +11,10 @@
|
||||||
],
|
],
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git+https://github.com/NickKaramoff/shareon.git"
|
"url": "git+https://github.com/amiceli/shareon.git"
|
||||||
},
|
},
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/NickKaramoff/shareon/issues"
|
"url": "https://github.com/amiceli/shareon"
|
||||||
},
|
},
|
||||||
"author": {
|
"author": {
|
||||||
"name": "Nikita Karamov",
|
"name": "Nikita Karamov",
|
||||||
|
|
|
@ -13,7 +13,7 @@ const pkg = require('./package.json');
|
||||||
const inputFile = './src/index.ts';
|
const inputFile = './src/index.ts';
|
||||||
const outputDir = isDev ? './dev/' : './dist/';
|
const outputDir = isDev ? './dev/' : './dist/';
|
||||||
|
|
||||||
const bannerText = `${pkg.name} v${pkg.version} by Nikita Karamov\n${pkg.homepage}`;
|
const bannerText = `${pkg.name.replace('/', '').replace('@', '')} v${pkg.version} by Nikita Karamov\n${pkg.homepage}`;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* PLUGINS
|
* PLUGINS
|
||||||
|
@ -40,7 +40,7 @@ if (!isDev) {
|
||||||
}
|
}
|
||||||
|
|
||||||
plugins.push(postcss({
|
plugins.push(postcss({
|
||||||
extract: `${pkg.name}.min.css`,
|
extract: `${pkg.name.replace('/', '').replace('@', '')}.min.css`,
|
||||||
plugins: [
|
plugins: [
|
||||||
(!isDev) && postcssPluginCssnano({
|
(!isDev) && postcssPluginCssnano({
|
||||||
preset: 'default',
|
preset: 'default',
|
||||||
|
@ -60,25 +60,25 @@ const output = [];
|
||||||
|
|
||||||
if (isDev) {
|
if (isDev) {
|
||||||
output.push({
|
output.push({
|
||||||
name: pkg.name,
|
name: pkg.name.replace('/', '').replace('@', ''),
|
||||||
format: 'iife',
|
format: 'iife',
|
||||||
file: `${outputDir}${pkg.name}.js`,
|
file: `${outputDir}${pkg.name.replace('/', '').replace('@', '')}.js`,
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
output.push({
|
output.push({
|
||||||
name: pkg.name,
|
name: pkg.name.replace('/', '').replace('@', ''),
|
||||||
format: 'cjs',
|
format: 'cjs',
|
||||||
file: `${outputDir}${pkg.name}.cjs`,
|
file: `${outputDir}${pkg.name.replace('/', '').replace('@', '')}.cjs`,
|
||||||
});
|
});
|
||||||
output.push({
|
output.push({
|
||||||
name: pkg.name,
|
name: pkg.name.replace('/', '').replace('@', ''),
|
||||||
format: 'esm',
|
format: 'esm',
|
||||||
file: `${outputDir}${pkg.name}.mjs`,
|
file: `${outputDir}${pkg.name.replace('/', '').replace('@', '')}.mjs`,
|
||||||
});
|
});
|
||||||
output.push({
|
output.push({
|
||||||
name: pkg.name,
|
name: pkg.name.replace('/', '').replace('@', ''),
|
||||||
format: 'iife',
|
format: 'iife',
|
||||||
file: `${outputDir}${pkg.name}.min.js`,
|
file: `${outputDir}${pkg.name.replace('/', '').replace('@', '')}.min.js`,
|
||||||
plugins: [terser({ output: { comments: false } })],
|
plugins: [terser({ output: { comments: false } })],
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue