From 8b938e59fe1a0d126f36dc816c935cce67863222 Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Thu, 29 Jul 2021 15:58:17 +0200 Subject: [PATCH] Update README --- README.md | 151 +++++++++++++++++++++++++++------------------ assets/demo@2x.png | Bin 9728 -> 15798 bytes 2 files changed, 92 insertions(+), 59 deletions(-) diff --git a/README.md b/README.md index 8f8ea5a..2a4df63 100644 --- a/README.md +++ b/README.md @@ -1,84 +1,98 @@ -# shareon +📯 shareon +========== -shareon logo — the Postal Horn emoji +> Lightweight, stylish and ethical share buttons for popular social networks -> Lightweight, stylish and ethical share buttons +demo: shareon buttons for various popular social networks -- **Small.** Dependency-free. CSS+JS bundle is only 6 KB minified and gzipped. -- **Stylish.** Uses official vector logos and colors with no visual mess. +- **Small.** Dependency-free. CSS+JS bundle is uner 7 KB, minified and gzipped. +- **Stylish.** Uses official colours and vector logos with no visual mess. - **Ethical.** Embeds no tracking code. JS is required only for the setup. -shareon demo screenshot +Observe the live demo at [shareon.js.org](https://shareon.js.org/)! ----- -Observe the live demo here: [shareon.js.org](https://shareon.js.org) +Install +------- -## Install +### Modern browsers + +shareon ships as an ES6 module. +[Most modern browsers](https://caniuse.com/es6-module) support this format. Include the link to shareon's JS and CSS in your website: ```html - - + + ``` -or install it via NPM use it in a JS file that you will bundle: +### Older browsers + +If for some reason you don't want to use the ESM format, you can include the +Legacy (IIFE) version of the package + +```html + + +``` + +### Node.js + +If you build a web app using Node.js, you can install shareon as a package: ```sh npm install shareon -# or +``` + +```sh yarn add shareon ``` +Then, import it in your code: + ```js -const shareon = require('shareon'); -// or import shareon from 'shareon'; ``` -## Initialization +> **💡 Tip!** Modern browsers and some bundlers support importing directly from +> URL: +> +> ```js +> import shareon from 'https://cdn.jsdelivr.net/npm/shareon@2'; +> ``` + +CommonJS' `require()` [**is not supported**](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c). + +Initialization +-------------- By default, shareon will initialize every button after page load. It also exports the `shareon` function, that will let you repopulate your buttons with updated information (for example, if you changed the page title): ```js +import shareon from 'shareon'; // shareon auto-initializes window.title = "Cool new window title"; shareon(); ``` -If you want to postpone the initialization, you can import the `noinit`-version -of the package. You'll need to manually call the `shareon` function when you -want the buttons to be initialized: +If you use the IIFE version, `shareon()` is available as a global function: ```html - - - - - ``` -or, if you're using Node: +Usage +----- -```js -const shareon = require('shareon/dist/noinit/shareon'); -// or -import shareon from 'shareon/dist/noinit/shareon'; - -// do something important -shareon(); -``` - -## Usage - -> shareon was heavily inspired by [Likely](https://ilyabirman.net/projects/likely/), - and has a backwards-compatible API (excluding themes and sizes). +> shareon was heavily inspired by +> [Likely](https://ilyabirman.net/projects/likely/), +> and has backwards-compatible networks' names Create a container with class `shareon` and populate it with elements, whose classes match the names of social networks: @@ -88,39 +102,45 @@ classes match the names of social networks: - + + + - - - - - - + + + + + + ``` -If you use ``, the buttons will get a `href`-attribute to them. In other cases -they will get a listener on `click` event, so you can use `