Release 2.5.0

Add Fediverse button (#108 )
Update CHANGELOG
2024-02-04 16:34:19 +01:00 · 2024-02-04 16:32:46 +01:00 · 2024-02-04 16:30:07 +01:00 · 2024-02-04 15:45:32 +01:00 · 2024-02-04 15:43:54 +01:00 · 2024-02-04 15:23:05 +01:00
62 changed files with 3497 additions and 8381 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,13 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+max_line_length = 80
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
--- a/.eslintignore
+++ b/.eslintignore
@ -1 +0,0 @@
-dist
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1 @@
+./.gitignore
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,6 +0,0 @@
-module.exports = {
-    extends: ['airbnb-typescript/base'],
-    parserOptions: {
-        project: './tsconfig.json',
-    },
-};
--- a/.git-blame-ignore-revs
+++ b/.git-blame-ignore-revs
@ -0,0 +1 @@
+d95105353f659f1dfc16aa00e97dde9a18406be4
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@ -1,2 +1,3 @@
-patreon: NickKaramoff
-liberapay: NickKaramoff
+github: kytta
+liberapay: kytta
+custom: paypal.me/NickKaramoff
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@ -0,0 +1,36 @@
+name: Publish
+
+on:
+  release:
+    types:
+      - published
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: "https://registry.npmjs.org"
+          cache: pnpm
+      - name: Install dependencies
+        run: pnpm install --ignore-scripts
+      - name: Build
+        run: pnpm run build
+      - name: Publish to NPM (with provenance)
+        run: pnpm publish --no-git-checks --access public --tag ${{ github.event.release.prerelease && 'next' || 'latest' }}
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_CONFIG_PROVENANCE: "true"
--- a/.github/workflows/size.yml
+++ b/.github/workflows/size.yml
@ -0,0 +1,31 @@
+name: Size Limit
+
+on:
+  pull_request:
+    branches:
+      - main
+
+permissions:
+  pull-requests: write
+
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Fetch Git refs
+        run: git fetch --no-tags --prune --depth=1 origin +refs/heads/*:refs/remotes/origin/*
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+      - name: Check package size
+        uses: andresz1/size-limit-action@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -0,0 +1,33 @@
+name: Test
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+env:
+  FORCE_COLOR: 2
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+      - name: Install dependencies
+        run: pnpm install --ignore-scripts
+      # pre-commit dioes this for us
+      # - name: Lint
+      #   run: pnpm run lint
+      - name: Build
+        run: pnpm run build
--- a/.gitignore
+++ b/.gitignore
@ -1,5 +1,7 @@
-dev
-dist
-.idea
-node_modules
-yarn-error.log
+dev/
+dist/
+.idea/
+node_modules/
+.vscode/
+package-lock.json
+yarn.lock
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@ -0,0 +1,35 @@
+repos:
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v4.5.0
+    hooks:
+      - id: end-of-file-fixer
+        exclude: 'src/icons/.*\.svg'
+      - id: fix-byte-order-marker
+      - id: mixed-line-ending
+      - id: trailing-whitespace
+        args: [--markdown-linebreak-ext=md]
+      - id: check-json
+      - id: check-toml
+      - id: check-yaml
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: "v4.0.0-alpha.8"
+    hooks:
+      - id: prettier
+        additional_dependencies:
+          - prettier@3
+  - repo: https://github.com/pre-commit/mirrors-eslint
+    rev: "v9.0.0-alpha.2"
+    hooks:
+      - id: eslint
+        files: \.([jt]s|astro)$ # *.js, *.ts and *.astro
+        types: [file]
+        additional_dependencies:
+          - eslint@8
+          - eslint-config-prettier@9
+          - eslint-plugin-unicorn@49
+          - prettier@3
+  - repo: https://github.com/kytta/mirrors-svgo
+    rev: v3.2.0
+    hooks:
+      - id: svgo
+        files: "^src/icons/"
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,2 @@
+dist/
+pnpm-lock.yaml
--- a/.travis.yml
+++ b/.travis.yml
@ -1,9 +0,0 @@
-language: node_js
-node_js:
-  - node
-  - lts/erbium
-  - lts/dubnium
-cache: yarn
-
-install: yarn
-script: yarn test
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -0,0 +1,386 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [2.5.0] - 2024-02-04
+
+### Added
+
+- [#108](https://github.com/kytta/shareon/pull/108)
+  Fediverse button (via [Share₂Fedi](https://github.com/kytta/share2fedi))
+
+## [2.4.0] - 2023-12-07
+
+### Added
+
+- [#99](https://github.com/kytta/shareon/pull/99)
+  Email button
+- [#100](https://github.com/kytta/shareon/pull/100)
+  Print button
+
+### Behind-the-scenes
+
+- [#95](https://github.com/kytta/shareon/pull/95)
+  Update to Vite v5
+- [#101](https://github.com/kytta/shareon/pull/101)
+  Enable automatic package publishing
+
+## [2.3.0] - 2023-08-01
+
+### Added
+
+- [#80](https://github.com/kytta/shareon/pull/80):
+  Tumblr button by [Isaac](https://github.com/kabszac)
+
+### Behind-the-scenes
+
+- [#82](https://github.com/kytta/shareon/pull/82):
+  PNPM is now enforced by [Anderson](https://github.com/andersonjoseph)
+
+## [2.2.3] - 2023-07-19
+
+### Fixed
+
+- v2.2.2 was published with the bug not fixed.
+
+## [2.2.2] - 2023-07-15
+
+### Fixed
+
+- [#71](https://github.com/kytta/shareon/pull/71):
+  Web Share icon got minified incorrectly, causing it to not show up at all.
+  Fixed by Jake.
+
+## [2.2.1] - 2023-07-15
+
+### Behind-the-scenes
+
+- [#70](https://github.com/kytta/shareon/pull/70):
+  Icon minification and inlining happens automatically now. As a bonus, the CSS
+  size went a bit down :)
+
+## [2.2.0] - 2023-07-15
+
+### Added
+
+- `data-hashtags` for Facebook and Twitter by Edward in https://github.com/kytta/shareon/pull/60
+- Microsoft Teams button by Dimitrios in https://github.com/kytta/shareon/pull/66
+- Web Share API button by Dimitrios in https://github.com/kytta/shareon/pull/67
+
+### Changed
+
+- the advertized bundle size now uses Brotli for compression (https://github.com/kytta/shareon/pull/69)
+
+## [2.1.0] - 2023-03-20
+
+### Added
+
+- "Copy URL" button in https://github.com/kytta/shareon/pull/44
+
+### Behind-the-scenes
+
+- Added pre-commit hooks in https://github.com/kytta/shareon/pull/47
+- Fixed `size-limit-action` branch in https://github.com/kytta/shareon/pull/48
+
+## [2.0.2] - 2023-01-25
+
+### Changed
+
+- Sourcemaps are not being output any more
+  - They're being loaded automatically and don't serve any other purpose.
+    Disabling those helps us save a few bytes
+- Change minifier to esbuild (instead of terser)
+  - This disables the minification of ESM, which is a good thing, because
+    otherwise the file can't be tree-shaken properly
+- Shareon is now `type: "module"`
+  - This doesn't change anything for the end users
+- Banner was removed
+  - It took unnecessary bytes, and embedding it was somewhat buggy
+- Browserslist config now targets `defaults`
+  - Opera 90 and Samsung Browser 17 aren't targeted. Shareon will still work on
+    these browsers.
+  - the previous config (using `last 3 versions instead` of `last 2 versions`)
+    didn't change coverage that much
+
+### Behind-the-scenes
+
+- Updated to Vite v4
+- CSS is now bundled using Vite
+  - this makes the build script leaner; it's still processed with PostCSS
+- Moved PostCSS and ESLint config to package.json
+
+## [2.0.1] - 2023-01-23
+
+### Changed
+
+- Mastodon button updated to match the new style (#42)
+
+## [2.0.0] - 2021-02-13
+
+### Added
+
+- **BREAKING:** new (auto-)init behaviour, inspired by [petite-vue](https://github.com/vuejs/petite-vue)
+
+  - `require`, `import`, or use `<script>` to include Shareon without
+    initialization
+  - use exported `initializeShareon` function in Node to initialize Shareon
+  - use `init` attribute in `script` to initialize Shareon in-browser
+
+    ```html
+    <script src="path/to/shareon.js" init>
+    ```
+
+- CSS export for use in Webpack/Rollup/etc. ([#35](https://github.com/kytta/shareon/issues/35))
+
+  ```js
+  import "shareon/css";
+  ```
+
+  ```js
+  require("shareon/css");
+  ```
+
+### Changed
+
+- **BREAKING:** default version of the package doesn't auto-initialize buttons
+- **BREAKING:** instead of default export, named exports are now used. If IIFE
+  is used, the global object's name is now `Shareon`, and it has one `init()`
+  method
+- updated logos and colours for some social networks
+- removed mixins, defining the code/styles directly in the files
+- use [Vite](https://vitejs.dev/) for building, reducing the devDependencies
+  tree and build times drastically
+  - **BREAKING:** newly built files offer worse browser support
+- change code style to [Prettier](https://prettier.io/)
+
+### Removed
+
+- **BREAKING:** `noinit` version of the package is removed
+
+## [1.6.3] - 2022-02-02
+
+### Changed
+
+- update URL for the [toot](https://github.com/kytta/toot) instance
+- update URLs and usernames in metadata
+- update dev dependencies
+- migrate to PNPM
+
+## [1.6.2] - 2021-06-29
+
+### Security
+
+- updated build dependencies
+
+## [1.6.1] - 2021-01-17
+
+### Added
+
+- Add CHANGELOG as file
+
+### Fixed
+
+- Fix LinkedIn URL
+
+## [1.6.0] - 2020-09-28
+
+### Changed
+
+- Add parameter for App ID for Messenger button (#17, #29)
+  - now you **have to** include `data-fb-app-id` to your Messenger buttons
+
+## [1.5.0] - 2020-09-24
+
+### Added
+
+- Add Mastodon button (#23, #27)
+
+## [1.4.5] - 2020-09-22
+
+> Version 1.4.3 was skipped due to an error in the deployment process
+> Version 1.4.4 is deprecated due to non-minified build files
+
+### Fixed
+
+- Fix transpilation for legacy browsers (#19, #21)
+- Fix `<button>`s not behaving correctly if there are `<a>`s further on the page
+- Fix PostCSS not applying any plugins (#22)
+
+## [1.4.2] - 2020-09-18
+
+### Fixed
+
+- Fix WhatsApp button on desktop (#18, #20)
+
+## [1.4.1] - 2020-08-01
+
+### Changed
+
+- move codebase from TypeScript to JavaScript+JSDoc
+- replace Sass with CSS+PostCSS
+
+## [1.4.0] - 2020-07-30
+
+### Changed
+
+- Optimise code
+  - package size got reduced down to 937 kb (.min.js) / 840 kb (.cjs/.mjs)
+  - `for` loops were optimised to cut down execution time
+
+## [1.3.1] - 2020-07-30
+
+### Fixed
+
+- Fix documentation
+
+## [1.3.0] - 2020-07-26
+
+### Added
+
+- Add `init()` function to shareon (#11, #13)
+  - this allows not only to postpone the initialization of shareon but also to re-run it
+
+## [1.2.1] - 2020-07-12
+
+### Changed
+
+- Optimize icon SVG files to match one standard (#8)
+
+## [1.2.0] - 2020-07-04
+
+### Added
+
+- Add LinkedIn button (#5)
+- Add Pocket button
+- Add Reddit button
+- Add Viber button
+
+## [1.1.5] - 2020-06-26
+
+### Added
+
+- Add building to ESM
+
+### Changed
+
+- Update README and docs
+
+### Fixed
+
+- Fix unwanted border on `<button>` hover
+
+## [1.1.4] - 2020-06-26
+
+### Changed
+
+- Rearrange fields in package.json
+- Change `node-sass` to `sass`
+- Update Rollup config
+- Update ESLint config
+
+## [1.1.3] - 2020-06-25
+
+### Changed
+
+- Update dependencies
+
+## [1.1.2] - 2020-03-30
+
+### Changed
+
+- Shorten the banner in JS and CSS files
+
+### Fixed
+
+- Fix inconsistent spacing between buttons
+
+## [1.1.1] - 2020-03-27
+
+### Fixed
+
+- Fix incorrect spacing between button rows when wrapped
+
+## [1.1.0] - 2020-03-27
+
+### Added
+
+- Add Odnoklassniki button
+- Add VK button
+
+## [1.0.0] - 2020-03-26
+
+### Added
+
+- Add install instructions to README
+- Add usage instructions to README
+
+## [1.0.0-beta.3] - 2020-03-26
+
+### Added
+
+- Add Facebook button
+- Add Messenger button
+- Add Pinterest button
+- Add WhatsApp button
+
+### Changed
+
+- Update colour of Telegram button
+- Rename `shareon.css` to `shareon.min.css`
+
+### Removed
+
+- Remove building to ESM
+
+## [1.0.0-beta.2] - 2020-03-26
+
+### Fixed
+
+- Fix package files not being published to NPM
+
+## [1.0.0-beta.1] - 2020-03-26
+
+Initial release of shareon
+
+### Added
+
+- Add Telegram button
+- Add Twitter button
+
+[unreleased]: https://github.com/kytta/shareon/compare/v2.5.0...main
+[2.4.0]: https://github.com/kytta/shareon/compare/v2.4.0...v2.5.0
+[2.4.0]: https://github.com/kytta/shareon/compare/v2.3.0...v2.4.0
+[2.3.0]: https://github.com/kytta/shareon/compare/v2.2.3...v2.3.0
+[2.2.3]: https://github.com/kytta/shareon/compare/v2.2.2...v2.2.3
+[2.2.2]: https://github.com/kytta/shareon/compare/v2.2.1...v2.2.2
+[2.2.1]: https://github.com/kytta/shareon/compare/v2.2.0...v2.2.1
+[2.2.0]: https://github.com/kytta/shareon/compare/v2.1.0...v2.2.0
+[2.1.0]: https://github.com/kytta/shareon/compare/v2.0.2...v2.1.0
+[2.0.2]: https://github.com/kytta/shareon/compare/v2.0.1...v2.0.2
+[2.0.1]: https://github.com/kytta/shareon/compare/v2.0.0...v2.0.1
+[2.0.0]: https://github.com/kytta/shareon/compare/v1.6.3...v2.0.0
+[1.6.3]: https://github.com/kytta/shareon/compare/v1.6.2...v1.6.3
+[1.6.2]: https://github.com/kytta/shareon/compare/v1.6.1...v1.6.2
+[1.6.1]: https://github.com/kytta/shareon/compare/v1.6.0...v1.6.1
+[1.6.0]: https://github.com/kytta/shareon/compare/v1.5.0...v1.6.0
+[1.5.0]: https://github.com/kytta/shareon/compare/v1.4.5...v1.5.0
+[1.4.5]: https://github.com/kytta/shareon/compare/v1.4.2...v1.4.5
+[1.4.2]: https://github.com/kytta/shareon/compare/v1.4.1...v1.4.2
+[1.4.1]: https://github.com/kytta/shareon/compare/v1.4.0...v1.4.1
+[1.4.0]: https://github.com/kytta/shareon/compare/v1.3.1...v1.4.0
+[1.3.1]: https://github.com/kytta/shareon/compare/v1.3.0...v1.3.1
+[1.3.0]: https://github.com/kytta/shareon/compare/v1.2.1...v1.3.0
+[1.2.1]: https://github.com/kytta/shareon/compare/v1.2.0...v1.2.1
+[1.2.0]: https://github.com/kytta/shareon/compare/v1.1.5...v1.2.0
+[1.1.5]: https://github.com/kytta/shareon/compare/v1.1.4...v1.1.5
+[1.1.4]: https://github.com/kytta/shareon/compare/v1.1.3...v1.1.4
+[1.1.3]: https://github.com/kytta/shareon/compare/v1.1.2...v1.1.3
+[1.1.2]: https://github.com/kytta/shareon/compare/v1.1.1...v1.1.2
+[1.1.1]: https://github.com/kytta/shareon/compare/v1.1.0...v1.1.1
+[1.1.0]: https://github.com/kytta/shareon/compare/v1.0.0...v1.1.0
+[1.0.0]: https://github.com/kytta/shareon/compare/v1.0.0-beta.3...v1.0.0
+[1.0.0-beta.3]: https://github.com/kytta/shareon/compare/v1.0.0-beta.2...v1.0.0-beta.3
+[1.0.0-beta.2]: https://github.com/kytta/shareon/compare/v1.0.0-beta.1...v1.0.0-beta.2
+[1.0.0-beta.1]: https://github.com/kytta/shareon/compare/3722ada1da60abb768e00621e66b269f8fa60689...v1.0.0-beta.1
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -0,0 +1,117 @@
+# Contributing to Shareon
+
+Shareon welcomes contributions and corrections. Before contributing, please make sure you have read the guidelines below. If you decide to contribute anything, please follow the steps below.
+
+0. Install [pnpm](https://pnpm.io/installation):
+1. Install [pre-commit](https://pre-commit.com/)
+2. Fork this repository
+3. Clone the fork
+4. Enable pre-commit in the repo:
+
+   ```sh
+   pre-commit install
+   ```
+
+5. Create a new branch from the latest commit on `main`
+6. Start hacking on the new branch
+7. Commit and push to the new branch
+8. Make a pull request to `main`
+
+## Table of contents
+
+- [Requesting a button](#requesting-a-button)
+- [Adding or updating a button](#adding-or-updating-a-button)
+- [Testing Package Locally](#testing-package-locally)
+
+## Requesting a button
+
+We welcome requests for new buttons. Before you submit a new issue, make sure:
+
+- No one has requested the button before. If you find an existing issue or pull request, add a reaction to show your support.
+- The website in question has a share page. Usually, such websites offer their own 'Share' buttons.
+- The website is not illegal (e.g. piracy, malware, threatening material, spam, etc.)
+
+If you have additional information, such as the address of the Share page, links to the documentation or to other implementations, put it in the issue description.
+
+## Adding or updating a button
+
+**Note**: If you decide to add a new button without requesting it first, the requirements above still apply.
+
+### 1. Identify share page address
+
+If a website has its own 'Share' button, it will also usually have some documentation for it. This might be the SDK docs or the button constructor. In some cases, there is nothing of sorts, and one has to reverse-engineer this.
+
+Most websites use a fixed share page that expects URL parameters to contain metadata like URL, page title, and/or post text. For example, the Twitter share page has the base URL `https://twitter.com/intent/tweet` and can accept URL parameters `url`, `text`, `via`, and `hashtags`.
+
+### 2. Add JavaScript code for the button
+
+For the button to work, it needs an entry in the `urlBuilderMap`. It's located on top of `src/shareon.js`.
+
+The key of the map is the ID of the website, which is usually its name. It should be all lowercase and only include dashes. Try to keep it as short as possible, e.g. `teams` instead of `microsoft-teams`.
+
+The value of the map is a function that accepts a "preset" (aka "page data") object. This object contains data about the page or of the post, such as url, title, media, text, via, hashtags, and Facebook app ID, all URL-encoded. The function should return a complete Share URL.
+
+> **Note** This is subject to change in Shareon v3, where we plan to migrate to a `URL` builder. See [issue #61 on GitHub](https://github.com/kytta/shareon/issues/61) for information.
+
+Once you;ve added the entry, the button is ready to go. If the button accepts properties that are not defined in the "preset", let us know before implementing it.
+
+### 3. Add the icon
+
+We heavily rely on icons from the [Simple Icons](https://github.com/simple-icons/simple-icons) project. As such, the requirements for the icons are similar.
+
+- The icon MUST be SVG
+- The name the icon MUST match the `urlBuilderMap` key
+- The icon MUST have a `viewBox` of `0 0 24 24` and have no dimensions
+- The icon must have the maximal size possible, i.e. the icon should be touching at least two sides of the viewbox
+- The icon MUST be all white, either via the `fill` or via the `stroke` attribute
+
+The easiest path for you to go is to just find the icon on Simple Icons and download it to `src/icons/`. They already meet all requirements. You do have to change the colour from `currentColor` to `#fff`, though.
+
+If the website does not have its icon on Simple Icons, follow [their contributing guide](https://github.com/simple-icons/simple-icons/blob/develop/CONTRIBUTING.md) to request and/or add it. We will assist you in this task, if needed.
+
+### 4. Optimize the icon
+
+All icons for Shareon should be optimized with the [SVGO tool](https://github.com/svg/svgo). The pre-commit hook you've installed does it automatically before commiting. Alternatively, you can run SVGO on the icon you've just added like so:
+
+```bash
+npx svgo src/icons/ICONNAME.svg
+```
+
+After optimizing the icon, double-check it against your original version to ensure no visual imperfections have crept in.
+
+### 5. Add styles
+
+In `src/shareon.css`, add two lines for the icon: one for the colour and one for the icon. The class of the button MUST match the `urlBuilderMap` key and the icon name. The colour should be the official website colour, preferably taken from Simple Icons. The icon should be referenced using the local path, it will be inlined on build. Example:
+
+```css
+.shareon > .pinterest {
+  background-color: #bd081c;  /* Official colour, as taken from Simple Icons */
+}
+.shareon > .pinterest:before {
+  background-image: url("icons/pinterest.svg");  /* Icon taken Simple Icons and optimized with SVGO */
+}
+```
+
+### 6. Test the icon
+
+Open `index.html` in the repository root and add the icon to the list of all buttons. Then, launch the dev server:
+
+```sh
+pnpm dev --open
+```
+
+The final button should:
+
+- Have a proper icon. It should:
+  - be white
+  - be vertically and horizontally centered
+- Open the share page on click
+- Fill out the data on the share page
+
+### 7. Update docs
+
+Update `README.md` to include the new button in the code snippets. If the button supports non-standard (not just `url` or `title`) `data-` attributes, mention it in 'Share metadata'
+
+### 8. Create a Pull Request
+
+Once you've completed the previous steps, create a pull request to merge your edits into the `main` branch. You can run `pnpm lint` to check if there are any issues you still need to address. If there are any, run `pre-commit`, and it will fix most of them.
--- a/4
+++ b/4
@ -1,6 +1,6 @@
 MIT License

-Copyright (c) 2020 Nikita Karamov
+Copyright (c) 2020-2022 Nikita Karamov

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.
--- a/README.md
+++ b/README.md
@ -1,89 +1,197 @@
-# 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">
+<img src="./assets/logo.svg" align="right" alt="Shareon logo — the Postal Horn emoji" width="96" height="96">

-Lightweight, stylish and ethical share buttons.
+> Lightweight, stylish, and ethical share buttons

- **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.
+- **Small.** Dependency-free. CSS+JS bundle is only 6 KB minified and brotlied.
+- **Stylish.** Uses official vector logos and colours 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="100" width="570" alt="shareon example">
+<a href="https://shareon.js.org/"><img src="./assets/demo@2x.png" height="126" width="333" alt="Shareon demo screenshot"></a>

----
-Observe the live demo here: [shareon.js.org](https://shareon.js.org)
+See the live demo at [shareon.js.org](https://shareon.js.org)

 ## Install

-Include the link to shareon's JS and CSS in your website:
+Simply load the needed files from the CDN:

 ```html
-<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>
+<link
+  href="https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.min.css"
+  rel="stylesheet"
+/>
+<script
+  src="https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.iife.js"
+  defer
+  init
+></script>
 ```

-or install it via NPM use it in a JS file that you will bundle:
+- `defer` makes sure Shareon is loaded after HTML is parsed
+- `init` will automatically initialize Shareon buttons
+
+### Do not auto-initialize
+
+Remove the `init` attribute and initialize Shareon when you need it:
+
+```html
+<script
+  src="https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.iife.js"
+  defer
+></script>
+
+<script>
+  // do something
+  Shareon.init();
+</script>
+```
+
+### Use ESM build
+
+There is also a ESM build for the browsers, which doesn't support
+auto-initialization:
+
+```html
+<script type="module">
+  import { init } from "https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.es.js";
+  // do something
+  init();
+</script>
+```
+
+### Bundle with Node
+
+You can also install Shareon using your favourite package manager and include it
+in your source files:

 ```sh
-npm install shareon
-# or
-yarn add shareon
+pnpm add shareon  # or `npm install`, or `yarn add`
 ```

 ```js
-require('shareon');
+import { init } from "shareon";
+import "shareon/css"; // most bundlers will transpile this CSS
+
+init();
+```
+
+CommonJS imports are also supported:
+
+```js
+const Shareon = require("shareon");
+require("shareon/css"); // most bundlers will transpile this CSS
+
+Shareon.init();
 ```

 ## 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:
+Create a container with class `shareon` and populate it with elements, class
+names of which match the names of the social networks (or `copy-url`, for the
+'Copy URL' button, or `print` for the 'Print' button):

 ```html
 <div class="shareon">
-    <a class="facebook"></a>
-    <a class="messenger"></a>
-    <a class="odnoklassniki"></a>
-    <a class="pinterest"></a>
-    <a class="telegram"></a>
-    <a class="twitter"></a>
-    <a class="vkontakte"></a>
-    <a class="whatsapp"></a>
+  <a class="facebook"></a>
+  <a class="fediverse"></a>
+  <a class="linkedin"></a>
+  <a class="mastodon"></a>
+  <!-- FB App ID is required for the Messenger button to function -->
+  <a class="messenger" data-fb-app-id="0123456789012345"></a>
+  <a class="odnoklassniki"></a>
+  <a class="pinterest"></a>
+  <a class="pocket"></a>
+  <a class="reddit"></a>
+  <a class="teams"></a>
+  <a class="telegram"></a>
+  <a class="tumblr"></a>
+  <a class="twitter"></a>
+  <a class="viber"></a>
+  <a class="vkontakte"></a>
+  <a class="whatsapp"></a>
+  <a class="copy-url"></a>
+  <a class="email"></a>
+  <a class="print"></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.
+Shareon will populate these `<a>` elements with correct `href` attributes.

-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:
+### Use with `<button>`s
+
+You can use `<button>` (or any other element) instead of `<a>`s. In this case,
+Shareon will create an `onclick`-listener for each button. **I do not recommend
+doing this**, as this is not so good for semantics.
+
+### Share metadata
+
+By default, the URL and the title of the active page will be shared. You can
+customize it with `data-` attributes. These can be applied on a specific button
+or on the whole `.shareon` container:

 ```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 class="shareon" data-url="https://custom.url/for-this-page">
+  <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 or Telegram button to add custom message text
- add `data-via` to a Twitter button to mention a user
+- you **MUST** add `data-fb-app-id` to the FB Messenger button to make sharing
+  even possible
+- add `data-s2f-instance` to the Fediverse button to set your Share₂Fedi
+  instance
+- add `data-media` to an Odnoklassniki, Pinterest, or VK button to customize
+  the pinned picture
+- add `data-text` to a Mastodon, Telegram, Tumblr, Viber, or WhatsApp button to add
+  custom message text
+- add `data-via` to a Mastodon, Tumblr, or Twitter button to mention a user
+- add `data-hashtags` to a Facebook, Tumblr, or Twitter button to include hashtags in the shared post.
+  - should be a comma-separated string, for example `stuff,tech,buttons`
+  - Twitter & Tumblr support multiple hashtags
+  - Facebook only supports a single hashtag; only the first one will be used

-Here are all the custom parameters in their glory:
+Here are all custom parameters:

 ```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 class="shareon" data-url="https://custom.url/for-this-page">
+  <a class="facebook" data-title="Custom Facebook title" data-hashtags="awesome"></a>
+  <a class="fediverse" data-s2f-instance="s2f.mydomain.example"></a>
+  <a class="messenger" data-fb-app-id="0123456789012345"></a>
+  <a class="pinterest" data-media="https://custom.picture/for-pinterest">Pin</a>
+  <a class="telegram" data-text="Check this out!"></a>
+  <a class="tumblr" data-hashtags="nice,buttons" data-text="These are some nice buttons" data-via="myblog"></a>
+  <a class="twitter" data-via="MyNickname" data-hashtags="shareon,awesome,brilliant"></a>
+  <a class="mastodon" data-via="@MyNickname@myserver.social"></a>
+  <a class="whatsapp" data-url="https://custom.url/for-whatsapp">Send</a>
 </div>
 ```
+
+## Other versions
+
+- [**WordPress plugin**](https://wordpress.org/plugins/shareon/) by [Gareth](https://github.com/gareth-gillman)
+
+## Licence
+
+Copyright © 2020–2022 [Nikita Karamov](https://www.kytta.dev/)  
+Licenced under the [MIT License](https://spdx.org/licenses/MIT.html).
+
+Shareon was heavily inspired by [Likely](https://ilyabirman.net/likely/),
+and has a somewhat backwards-compatible API (excluding themes and sizes).
+Likely is licenced under the MIT License.
+
+Shareon's logo is the
+[Postal Horn emoji](https://github.com/googlefonts/noto-emoji/blob/43f47be9404018cd9d8f73a227363a8f20acdab5/svg/emoji_u1f4ef.svg)
+from [Noto Emoji](https://github.com/googlefonts/noto-emoji).
+Noto Emoji is licenced under the
+[Apache License v2.0](https://github.com/googlefonts/noto-emoji/blob/43f47be9404018cd9d8f73a227363a8f20acdab5/LICENSE).
+
+Share icons are being sourced from [Simple Icons](https://github.com/simple-icons/simple-icons/).
+Simple Icons is released under [CC0](https://spdx.org/licenses/CC0-1.0.html),
+but the icons themselves may be subject to copyright of the respective owners.
+
+---
+
+This project is hosted on GitHub: <https://github.com/kytta/shareon>
--- a/assets/demo@2x.png
+++ b/assets/demo@2x.png
--- a/assets/logo.svg
+++ b/assets/logo.svg
--- a/docs/CNAME
+++ b/docs/CNAME
@ -1 +0,0 @@
-shareon.js.org
--- a/docs/banner.png
+++ b/docs/banner.png
--- 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
@ -1,218 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Lightweight, stylish and ethical share buttons for popular social networks">
-    <meta name="keywords" content="share buttons, sharing, social networks, share via, share on">
-    <meta name="author" content="Nikita Karamov">
-
-    <meta property="og:title" content="shareon">
-    <meta property="og:url" content="https://shareon.js.org">
-    <meta property="og:image" content="https://raw.githubusercontent.com/NickKaramoff/shareon/develop/docs/banner.png">
-    <meta property="og:description" content="Lightweight, stylish and ethical share buttons for popular social networks">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:creator" content="@NickKaramoff">
-
-    <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>
-        <p>
-            <img src="https://raw.githubusercontent.com/googlefonts/noto-emoji/master/png/128/emoji_u1f4ef.png"
-                 alt="Postal Horn emoji"
-                 width="64"
-                 height="64">
-        </p>
-        <h1>shareon</h1>
-        <p>Lightweight, stylish and ethical share buttons</p>
-        <nav>
-            <ul>
-                <li>
-                    <a href="https://www.npmjs.com/package/shareon" target="_blank">npm</a>
-                </li>
-                <li>
-                    <a href="https://github.com/NickKaramoff/shareon" target="_blank">github</a>
-                </li>
-            </ul>
-        </nav>
-    </header>
-
-    <main>
-        <article>
-            <h2>
-                <a id="what-is-it" href="#what-is-it" aria-hidden="true"></a>
-                What is it?
-            </h2>
-
-            <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="odnoklassniki"></a>
-                <a class="pinterest"></a>
-                <a class="telegram"></a>
-                <a class="twitter"></a>
-                <a class="vkontakte"></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="odnoklassniki"&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="vkontakte"&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="odnoklassniki"></a>
-                <a class="pinterest"></a>
-                <a class="telegram"></a>
-                <a class="twitter"></a>
-                <a class="vkontakte"></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="whatsapp" data-title="Custom WhatsApp 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 an Odnoklassniki, Pinterest or VK 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>
-    </footer>
-
-    <link rel="stylesheet" href="../dist/shareon.min.css">
-    <script src="../dist/shareon.min.js"></script>
-</body>
-</html>
--- a/docs/screen01@2x.png
+++ b/docs/screen01@2x.png
--- a/index.html
+++ b/index.html
@ -0,0 +1,141 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Shareon Demo Page</title>
+
+    <style>
+      body {
+        max-width: 800px;
+        margin: 0 auto;
+        font-family: sans-serif;
+      }
+
+      code {
+        font-family: monospace;
+        font-size: 1em;
+      }
+
+      .shareon.specimen {
+        font-weight: 600;
+      }
+    </style>
+  </head>
+
+  <body>
+    <main>
+      <h1>Shareon Demo Page</h1>
+      <section>
+        <h2><code>&lt;a&gt;</code></h2>
+        <div class="shareon">
+          <a class="facebook"></a>
+          <a class="fediverse"></a>
+          <a class="linkedin"></a>
+          <a class="mastodon"></a>
+          <a class="messenger" data-fb-app-id="3619024578167617"></a>
+          <a class="odnoklassniki"></a>
+          <a class="pinterest"></a>
+          <a class="pocket"></a>
+          <a class="reddit"></a>
+          <a class="teams"></a>
+          <a class="telegram"></a>
+          <a class="tumblr"></a>
+          <a class="twitter"></a>
+          <a class="viber"></a>
+          <a class="vkontakte"></a>
+          <a class="whatsapp"></a>
+          <a class="copy-url"></a>
+          <a class="email"></a>
+          <a class="print"></a>
+          <a class="web-share"></a>
+        </div>
+      </section>
+      <section>
+        <h2><code>&lt;button&gt;</code></h2>
+        <div class="shareon">
+          <button class="facebook"></button>
+          <button class="fediverse"></button>
+          <button class="linkedin"></button>
+          <button class="mastodon"></button>
+          <button class="messenger" data-fb-app-id="3619024578167617"></button>
+          <button class="odnoklassniki"></button>
+          <button class="pinterest"></button>
+          <button class="pocket"></button>
+          <button class="reddit"></button>
+          <button class="teams"></button>
+          <button class="telegram"></button>
+          <button class="tumblr"></button>
+          <button class="twitter"></button>
+          <button class="viber"></button>
+          <button class="vkontakte"></button>
+          <button class="whatsapp"></button>
+          <button class="copy-url"></button>
+          <button class="email"></button>
+          <button class="print"></button>
+          <button class="web-share"></button>
+        </div>
+      </section>
+      <section>
+        <h2><code>&lt;a&gt;</code> with custom params</h2>
+        <div
+          class="shareon"
+          data-title="shareon demo page test"
+          data-url="https://demo.shareon.js.org"
+          data-text="hey check this out"
+        >
+          <a class="facebook"></a>
+          <a class="fediverse" data-s2f-instance="share2fedi.vercel.app"></a>
+          <a class="linkedin"></a>
+          <a class="mastodon" data-via="@NickKaramoff@fosstodon.org"></a>
+          <a class="messenger" data-fb-app-id="3619024578167617"></a>
+          <a class="odnoklassniki"></a>
+          <a class="pinterest"></a>
+          <a class="pocket"></a>
+          <a class="reddit"></a>
+          <a class="teams"></a>
+          <a class="telegram"></a>
+          <a class="tumblr"></a>
+          <a class="twitter" data-via="nickkaramoff"></a>
+          <a class="viber"></a>
+          <a class="vkontakte"></a>
+          <a class="whatsapp"></a>
+          <a class="copy-url"></a>
+          <a class="email"></a>
+          <a class="web-share"></a>
+        </div>
+      </section>
+      <section>
+        <h2>Specimen</h2>
+        <div class="shareon specimen">
+          <a class="facebook"></a>
+          <a class="fediverse"></a>
+          <a class="linkedin"></a>
+          <a class="mastodon">Toot</a>
+          <a class="messenger" data-fb-app-id="3619024578167617"></a>
+          <a class="odnoklassniki"></a>
+          <a class="pinterest">Pin</a>
+          <br />
+          <a class="pocket"></a>
+          <a class="reddit"></a>
+          <a class="teams"></a>
+          <a class="telegram"></a>
+          <a class="tumblr"></a>
+          <a class="twitter">Tweet</a>
+          <a class="viber"></a>
+          <br />
+          <a class="vkontakte">Поделиться</a>
+          <a class="whatsapp"></a>
+          <a class="copy-url"></a>
+          <a class="email"></a>
+          <a class="web-share">Share</a>
+        </div>
+      </section>
+    </main>
+
+    <script type="module">
+      import { init } from "./src/shareon.js";
+      init();
+    </script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@ -1,79 +1,133 @@
 {
  "name": "shareon",
-  "version": "1.1.3",
-  "homepage": "https://shareon.js.org",
-  "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>",
+  "version": "2.5.0",
  "description": "Lightweight, stylish and ethical share buttons for popular social networks",
+  "license": "MIT",
+  "homepage": "https://shareon.js.org",
  "keywords": [
    "share buttons",
    "sharing",
    "social networks"
  ],
-  "files": [
-    "dist",
-    "LICENSE",
-    "README.md"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kytta/shareon.git"
+  },
+  "bugs": {
+    "url": "https://github.com/kytta/shareon/issues"
+  },
+  "author": {
+    "name": "Nikita Karamov",
+    "email": "me@kytta.dev",
+    "url": "https://www.kytta.dev/"
+  },
+  "funding": [
+    "https://github.com/sponsors/kytta/",
+    "https://liberapay.com/kytta",
+    "https://www.paypal.com/paypalme/NickKaramoff"
  ],
-  "main": "./dist/shareon.cjs",
+  "type": "module",
+  "main": "./dist/shareon.umd.js",
+  "unpkg": "./dist/shareon.iife.js",
+  "jsdelivr": "./dist/shareon.iife.js",
+  "module": "./dist/shareon.es.js",
  "exports": {
-    "require": "./dist/shareon.cjs"
+    ".": {
+      "import": "./dist/shareon.es.js",
+      "require": "./dist/shareon.umd.js"
+    },
+    "./css": "./dist/shareon.min.css"
  },
-  "unpkg": "./dist/shareon.min.js",
+  "files": [
+    "dist"
+  ],
  "scripts": {
-    "build": "rollup -c ./rollup/rollup.config.prod.js",
-    "dev": "rollup -w -c ./rollup/rollup.config.dev.js",
-    "pretest": "run-s build",
-    "test:lint": "eslint-ci --ext .js,.ts ./src/",
-    "test:size": "size-limit",
-    "test": "run-p test:*",
-    "postversion": "run-s build"
+    "build": "vite build",
+    "dev": "vite",
+    "lint": "prettier --check . && eslint .",
+    "size": "size-limit",
+    "test": "pnpm run lint && pnpm run build && pnpm run size",
+    "postversion": "pnpm run build",
+    "prepublishOnly": "rm -rf ./package && clean-publish",
+    "postpublish": "rm -rf ./package",
+    "preinstall": "npx only-allow pnpm"
  },
-  "dependencies": {},
  "devDependencies": {
-    "@rollup/plugin-strip": "^1.3.3",
-    "@rollup/plugin-typescript": "^5.0.0",
-    "@size-limit/preset-small-lib": "^4.5.2",
-    "@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.4",
-    "npm-run-all": "^4.1.5",
-    "postcss-banner": "^3.0.2",
-    "rollup": "^2.18.0",
-    "rollup-plugin-license": "^2.1.0",
-    "rollup-plugin-postcss": "^3.1.2",
-    "rollup-plugin-terser": "^6.1.0",
-    "size-limit": "^4.5.2",
-    "typescript": "^3.8.3"
+    "@size-limit/preset-small-lib": "^11.0.1",
+    "autoprefixer": "^10.4.16",
+    "clean-publish": "^4.2.0",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-unicorn": "^49.0.0",
+    "postcss": "^8.4.32",
+    "postcss-calc": "^9.0.1",
+    "postcss-css-variables": "^0.19.0",
+    "postcss-csso": "^6.0.1",
+    "postcss-url": "^10.1.3",
+    "prettier": "^3.1.0",
+    "size-limit": "^11.0.1",
+    "vite": "^5.0.6"
+  },
+  "prettier": {
+    "embeddedLanguageFormatting": "off"
+  },
+  "eslintConfig": {
+    "env": {
+      "browser": true
+    },
+    "extends": [
+      "eslint:recommended",
+      "plugin:unicorn/recommended",
+      "prettier"
+    ],
+    "parserOptions": {
+      "ecmaVersion": "latest",
+      "sourceType": "module"
+    },
+    "overrides": [
+      {
+        "files": [
+          "vite.config.js"
+        ],
+        "env": {
+          "node": true,
+          "browser": false
+        }
+      }
+    ]
+  },
+  "postcss": {
+    "plugins": {
+      "postcss-url": {
+        "url": "inline",
+        "optimizeSvgEncode": true
+      },
+      "postcss-css-variables": {},
+      "postcss-calc": {},
+      "autoprefixer": {},
+      "postcss-csso": {}
+    }
  },
  "size-limit": [
    {
-      "limit": "1 KB",
-      "path": "./dist/shareon.min.js",
-      "webpack": false
-    },
-    {
-      "limit": "1 KB",
-      "path": [
-        "./dist/shareon.cjs"
-      ]
-    },
-    {
-      "limit": "7 KB",
+      "limit": "6 KiB",
      "path": "./dist/shareon.min.css",
-      "webpack": false
+      "brotli": true
+    },
+    {
+      "limit": "1 KiB",
+      "path": "./dist/shareon.es.js",
+      "brotli": true
    }
-  ]
+  ],
+  "publishConfig": {
+    "directory": "package"
+  },
+  "clean-publish": {
+    "withoutPublish": true,
+    "tempDir": "package",
+    "fields": [
+      "postcss"
+    ]
+  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/rollup/plugins.js
+++ b/rollup/plugins.js
@ -1,53 +0,0 @@
-import path from 'path';
-
-import postcssPluginBanner from 'postcss-banner';
-import postcssPluginCssnano from 'cssnano';
-import rollupPluginLicense from 'rollup-plugin-license';
-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';
-
-const pkg = require(path.join(process.cwd(), 'package.json'));
-const bannerText = `${pkg.name} v${pkg.version} by Nikita Karamov
-${pkg.homepage}`;
-
-export const license = () => rollupPluginLicense({
-  banner: {
-    commentStyle: 'ignored',
-    content: bannerText
-  }
-});
-
-/**
- * @param {boolean|string} file
- * @param {boolean} minify
- */
-export const postcss = (file = true, minify) => rollupPluginPostcss({
-  extract: file,
-  plugins: [
-    minify && postcssPluginCssnano({
-      preset: 'default',
-    }),
-    postcssPluginBanner({
-      banner: bannerText,
-      important: true
-    })
-  ],
-});
-
-export const strip = () => rollupPluginStrip({
-  debugger: true,
-  include: ['**/*.js', '**/*.ts'],
-  functions: ['console.log', 'console.debug', 'assert.*'],
-  sourceMap: false,
-});
-
-export const terser = () => rollupPluginTerser({
-  output: {
-    comments: false,
-    ecma: 5,
-  },
-});
-
-export const typescript = () => rollupPluginTypescript();
--- a/rollup/rollup.config.dev.js
+++ b/rollup/rollup.config.dev.js
@ -1,19 +0,0 @@
-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(`${name}.css`, false),
-  ],
-};
--- a/rollup/rollup.config.prod.js
+++ b/rollup/rollup.config.prod.js
@ -1,29 +0,0 @@
-import { license, 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(`${name}.min.css`, true),
-    license()
-  ],
-};
--- a/src/icons/copy-url-done.svg
+++ b/src/icons/copy-url-done.svg
@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6 9 17l-5-5"/></svg>
--- a/src/icons/copy-url.svg
+++ b/src/icons/copy-url.svg
@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
--- a/src/icons/email.svg
+++ b/src/icons/email.svg
@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect height="16" rx="2" width="20" x="2" y="4"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></g></svg>
--- a/src/icons/facebook.svg
+++ b/src/icons/facebook.svg
@ -0,0 +1 @@
+<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073"/></svg>
--- a/src/icons/fediverse.svg
+++ b/src/icons/fediverse.svg
@ -0,0 +1 @@
+<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.239 8.64a2.43 2.43 0 0 1-1.041 1.036l5.714 5.736 1.377-.698zm7.537 7.566-1.378.698 2.895 2.907a2.43 2.43 0 0 1 1.041-1.037zm6.61-5.297-3.234 1.64.238 1.526 3.66-1.856a2.43 2.43 0 0 1-.663-1.31m-5.113 2.592-7.649 3.876a2.43 2.43 0 0 1 .664 1.31l7.223-3.66zm-2.46-9.549-3.69 7.205 1.089 1.094 3.908-7.628a2.43 2.43 0 0 1-1.307-.67m-4.65 9.078-1.87 3.65a2.44 2.44 0 0 1 1.307.67l1.652-3.226zm-2.998-3.34a2.44 2.44 0 0 1-1.216.255 3 3 0 0 1-.235-.025l1.092 6.983a2.44 2.44 0 0 1 1.216-.255q.118.007.234.025zm3.129 9.03a2.4 2.4 0 0 1 .025.49 2.4 2.4 0 0 1-.256.96l6.98 1.121a2.4 2.4 0 0 1-.025-.49 2.4 2.4 0 0 1 .257-.96zm12.78-6.476-3.222 6.29a2.43 2.43 0 0 1 1.307.671l3.222-6.29a2.43 2.43 0 0 1-1.307-.671M15.68 3.348a2.44 2.44 0 0 1-1.04 1.036l4.99 5.01a2.43 2.43 0 0 1 1.04-1.037zm-4.554-.731L4.818 5.813a2.43 2.43 0 0 1 .663 1.31l6.309-3.197a2.43 2.43 0 0 1-.664-1.31m3.502 1.774a2.44 2.44 0 0 1-1.236.264 3 3 0 0 1-.213-.022l.559 3.578 1.524.244zm-.565 5.9 1.32 8.46a2.43 2.43 0 0 1 1.199-.246q.128.007.254.028l-1.249-7.998zM5.486 7.15a2.4 2.4 0 0 1 .027.498 2.4 2.4 0 0 1-.253.953l3.58.575.704-1.374zm6.137.986L10.92 9.51l8.46 1.36a2.4 2.4 0 0 1-.024-.485 2.4 2.4 0 0 1 .26-.966zM13.645.015a2.212 2.212 0 1 0-.24 4.418 2.212 2.212 0 1 0 .24-4.418m8.261 8.293a2.212 2.212 0 1 0-.24 4.418 2.212 2.212 0 1 0 .24-4.418M16.57 18.725a2.212 2.212 0 1 0-.24 4.419 2.212 2.212 0 1 0 .24-4.419M5.01 16.871a2.212 2.212 0 1 0-.24 4.418 2.212 2.212 0 1 0 .24-4.418M3.204 5.307a2.212 2.212 0 1 0-.24 4.418 2.212 2.212 0 1 0 .24-4.418"/></svg>
--- a/src/icons/linkedin-in.svg
+++ b/src/icons/linkedin-in.svg
@ -0,0 +1 @@
+<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.722 23.72h-4.91v-7.692c0-1.834-.038-4.194-2.559-4.194-2.56 0-2.95 1.995-2.95 4.06v7.827H8.394V7.902h4.716v2.157h.063c.659-1.244 2.261-2.556 4.655-2.556 4.974 0 5.894 3.274 5.894 7.535v8.683ZM.388 7.902h4.923v15.819H.388zM2.85 5.738A2.85 2.85 0 0 1 0 2.886a2.851 2.851 0 1 1 2.85 2.852"/></svg>
--- a/src/icons/linkedin.svg
+++ b/src/icons/linkedin.svg
@ -0,0 +1 @@
+<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.06 2.06 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065m1.782 13.019H3.555V9h3.564zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z"/></svg>
--- a/src/icons/mastodon.svg
+++ b/src/icons/mastodon.svg
@ -0,0 +1 @@
+<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38q.398-.092.786-.213c.585-.184 1.27-.39 1.774-.753a.06.06 0 0 0 .023-.043v-1.809a.05.05 0 0 0-.02-.041.05.05 0 0 0-.046-.01 20.3 20.3 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.6 5.6 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422q.059-.011.11-.024c2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545m-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102q0-1.965 1.011-3.12c.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164q1.012 1.155 1.012 3.12z"/></svg>
--- a/src/icons/messenger.svg
+++ b/src/icons/messenger.svg
@ -0,0 +1 @@
+<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M.001 11.639C.001 4.949 5.241 0 12.001 0S24 4.95 24 11.639s-5.24 11.638-12 11.638c-1.21 0-2.38-.16-3.47-.46a.96.96 0 0 0-.64.05l-2.39 1.05a.96.96 0 0 1-1.35-.85l-.07-2.14a.97.97 0 0 0-.32-.68A11.39 11.389 0 0 1 .002 11.64zm8.32-2.19-3.52 5.6c-.35.53.32 1.139.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 0 0-2.61.48"/></svg>
--- a/src/icons/odnoklassniki.svg
+++ b/src/icons/odnoklassniki.svg
@ -0,0 +1 @@
+<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 0a6.2 6.2 0 0 0-6.194 6.195 6.2 6.2 0 0 0 6.195 6.192 6.2 6.2 0 0 0 6.193-6.192A6.2 6.2 0 0 0 12.001 0zm0 3.63a2.567 2.567 0 0 1 2.565 2.565 2.57 2.57 0 0 1-2.564 2.564 2.57 2.57 0 0 1-2.565-2.564 2.567 2.567 0 0 1 2.565-2.564zM6.807 12.6a1.814 1.814 0 0 0-.91 3.35 11.6 11.6 0 0 0 3.597 1.49l-3.462 3.463a1.815 1.815 0 0 0 2.567 2.566L12 20.066l3.405 3.403a1.813 1.813 0 0 0 2.564 0c.71-.709.71-1.858 0-2.566l-3.462-3.462a11.6 11.6 0 0 0 3.596-1.49 1.814 1.814 0 1 0-1.932-3.073 7.87 7.87 0 0 1-8.34 0c-.318-.2-.674-.29-1.024-.278"/></svg>
--- a/src/icons/pinterest.svg
+++ b/src/icons/pinterest.svg
@ -0,0 +1 @@
+<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path 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"/></svg>
--- a/src/icons/pocket.svg
+++ b/src/icons/pocket.svg
@ -0,0 +1 @@
+<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m18.813 10.259-5.646 5.419a1.65 1.65 0 0 1-2.282 0l-5.646-5.419a1.645 1.645 0 0 1 2.276-2.376l4.511 4.322 4.517-4.322a1.643 1.643 0 0 1 2.326.049 1.64 1.64 0 0 1-.045 2.326zm5.083-7.546a2.16 2.16 0 0 0-2.041-1.436H2.179c-.9 0-1.717.564-2.037 1.405-.094.25-.142.511-.142.774v7.245l.084 1.441c.348 3.277 2.047 6.142 4.682 8.139q.069.053.143.105l.03.023a11.9 11.9 0 0 0 4.694 2.072c.786.158 1.591.24 2.389.24.739 0 1.481-.067 2.209-.204.088-.029.176-.045.264-.06.023 0 .049-.015.074-.029a12 12 0 0 0 4.508-2.025l.029-.031.135-.105c2.627-1.995 4.324-4.862 4.686-8.148L24 10.678V3.445c0-.251-.031-.5-.121-.742z"/></svg>
--- a/src/icons/print.svg
+++ b/src/icons/print.svg
@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 9V2h12v7M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 14h12v8H6z"/></svg>
--- a/src/icons/reddit.svg
+++ b/src/icons/reddit.svg
@ -0,0 +1 @@
+<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.512 1.173a1.88 1.88 0 0 1 1.877 1.874 1.884 1.884 0 0 1-1.877 1.857c-.99 0-1.817-.783-1.873-1.773l-3.897-.82-1.201 5.623c2.737.105 5.223.949 7.015 2.234a2.53 2.53 0 0 1 1.812-.737A2.634 2.634 0 0 1 24 12.063c0 1.075-.653 2-1.516 2.423q.066.388.063.78c0 4.043-4.698 7.31-10.512 7.31s-10.512-3.267-10.512-7.31c0-.275.022-.55.064-.801a2.63 2.63 0 0 1-1.559-2.402 2.634 2.634 0 0 1 2.633-2.632c.694 0 1.347.294 1.811.735 1.812-1.325 4.32-2.146 7.12-2.232l1.329-6.276a.5.5 0 0 1 .21-.296.52.52 0 0 1 .357-.063l4.361.926c.3-.644.952-1.057 1.663-1.052M7.917 18.052c-.13 0-.254.05-.347.14a.497.497 0 0 0 0 .696c1.264 1.263 3.728 1.37 4.444 1.37s3.16-.084 4.444-1.37a.545.545 0 0 0 .044-.695.5.5 0 0 0-.697 0c-.82.8-2.527 1.095-3.77 1.095s-2.97-.294-3.77-1.095a.5.5 0 0 0-.348-.143zm-.051-5.989A1.88 1.88 0 0 0 5.99 13.94c0 1.031.842 1.873 1.876 1.873a1.88 1.88 0 0 0 1.873-1.874 1.88 1.88 0 0 0-1.873-1.875Zm8.254 0a1.88 1.88 0 0 0-1.873 1.876c0 1.031.842 1.873 1.875 1.873a1.88 1.88 0 0 0 1.875-1.874 1.88 1.88 0 0 0-1.877-1.875"/></svg>
--- a/src/icons/teams.svg
+++ b/src/icons/teams.svg
@ -0,0 +1 @@
+<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.625 8.127q-.55 0-1.025-.205t-.832-.563-.563-.832T18 5.502q0-.54.205-1.02t.563-.837q.357-.358.832-.563.474-.205 1.025-.205.54 0 1.02.205t.837.563q.358.357.563.837t.205 1.02q0 .55-.205 1.025t-.563.832q-.357.358-.837.563t-1.02.205m0-3.75q-.469 0-.797.328t-.328.797.328.797.797.328.797-.328.328-.797-.328-.797-.797-.328M24 10.002v5.578q0 .774-.293 1.46t-.803 1.194q-.51.51-1.195.803-.686.293-1.459.293-.445 0-.908-.105-.463-.106-.85-.329-.293.95-.855 1.729t-1.319 1.336-1.67.861-1.898.305q-1.148 0-2.162-.398-1.014-.399-1.805-1.102t-1.312-1.664-.674-2.086h-5.8q-.411 0-.704-.293T0 16.881V6.873q0-.41.293-.703t.703-.293h8.59q-.34-.715-.34-1.5 0-.727.275-1.365.276-.639.75-1.114.475-.474 1.114-.75.638-.275 1.365-.275t1.365.275 1.114.75q.474.475.75 1.114.275.638.275 1.365t-.275 1.365q-.276.639-.75 1.113-.475.475-1.114.75-.638.276-1.365.276-.188 0-.375-.024-.188-.023-.375-.058v1.078h10.875q.469 0 .797.328t.328.797M12.75 2.373q-.41 0-.78.158-.368.158-.638.434-.27.275-.428.639-.158.363-.158.773t.158.78q.159.368.428.638.27.27.639.428t.779.158.773-.158q.364-.159.64-.428.274-.27.433-.639t.158-.779-.158-.773q-.159-.364-.434-.64-.275-.275-.639-.433-.363-.158-.773-.158M6.937 9.814h2.25V7.94H2.814v1.875h2.25v6h1.875zm10.313 7.313v-6.75H12v6.504q0 .41-.293.703t-.703.293H8.309q.152.809.556 1.5.405.691.985 1.19.58.497 1.318.779.738.281 1.582.281.926 0 1.746-.352.82-.351 1.436-.966.615-.616.966-1.43.352-.815.352-1.752m5.25-1.547v-5.203h-3.75v6.855q.305.305.691.452.387.146.809.146.469 0 .879-.176.41-.175.715-.48.304-.305.48-.715t.176-.879"/></svg>
--- a/src/icons/telegram.svg
+++ b/src/icons/telegram.svg
@ -0,0 +1 @@
+<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.888 3.551c.168-.003.54.039.781.235.162.14.264.335.288.547.026.156.06.514.033.793-.302 3.189-1.616 10.924-2.285 14.495-.282 1.512-.838 2.017-1.378 2.066-1.17.11-2.058-.773-3.192-1.515-1.774-1.165-2.777-1.889-4.5-3.025-1.99-1.31-.7-2.033.434-3.209.297-.309 5.455-5.002 5.556-5.427.012-.054.024-.252-.094-.356s-.292-.069-.418-.04q-.267.061-8.504 5.62-1.208.831-2.187.806c-.72-.013-2.104-.405-3.134-.739C1.025 13.39.022 13.174.11 12.476q.068-.544 1.5-1.114 8.816-3.84 11.758-5.064c5.599-2.328 6.763-2.733 7.521-2.747Z"/></svg>
--- a/src/icons/tumblr.svg
+++ b/src/icons/tumblr.svg
@ -0,0 +1 @@
+<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.563 24c-5.093 0-7.031-3.756-7.031-6.411V9.747H5.116V6.648c3.63-1.313 4.512-4.596 4.71-6.469C9.84.051 9.941 0 9.999 0h3.517v6.114h4.801v3.633h-4.82v7.47c.016 1.001.375 2.371 2.207 2.371h.09c.631-.02 1.486-.205 1.936-.419l1.156 3.425c-.436.636-2.4 1.374-4.156 1.404h-.178z"/></svg>
--- a/src/icons/twitter.svg
+++ b/src/icons/twitter.svg
@ -0,0 +1 @@
+<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.9 4.9 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.9 4.9 0 0 0 2.235.616A4.93 4.93 0 0 1 1.67 3.148a13.98 13.98 0 0 0 10.15 5.144 4.929 4.929 0 0 1 8.39-4.49 9.9 9.9 0 0 0 3.128-1.196 4.94 4.94 0 0 1-2.165 2.724A9.8 9.8 0 0 0 24 4.555a10 10 0 0 1-2.457 2.549"/></svg>
--- a/src/icons/viber.svg
+++ b/src/icons/viber.svg
@ -0,0 +1 @@
+<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11.4 0C9.473.028 5.333.344 3.02 2.467 1.302 4.187.696 6.7.633 9.817S.488 18.776 6.12 20.36h.003l-.004 2.416s-.037.977.61 1.177c.777.242 1.234-.5 1.98-1.302.407-.44.972-1.084 1.397-1.58 3.85.326 6.812-.416 7.15-.525.776-.252 5.176-.816 5.892-6.657.74-6.02-.36-9.83-2.34-11.546-.596-.55-3.006-2.3-8.375-2.323 0 0-.395-.025-1.037-.017zm.058 1.693c.545-.004.88.017.88.017 4.542.02 6.717 1.388 7.222 1.846 1.675 1.435 2.53 4.868 1.906 9.897v.002c-.604 4.878-4.174 5.184-4.832 5.395-.28.09-2.882.737-6.153.524 0 0-2.436 2.94-3.197 3.704-.12.12-.26.167-.352.144-.13-.033-.166-.188-.165-.414l.02-4.018c-4.762-1.32-4.485-6.292-4.43-8.895.054-2.604.543-4.738 1.996-6.173 1.96-1.773 5.474-2.018 7.11-2.03zm.38 2.602a.304.304 0 0 0-.004.607c1.624.01 2.946.537 4.028 1.592 1.073 1.046 1.62 2.468 1.633 4.334.002.167.14.3.307.3a.304.304 0 0 0 .3-.304c-.014-1.984-.618-3.596-1.816-4.764-1.19-1.16-2.692-1.753-4.447-1.765zm-3.96.695a.98.98 0 0 0-.616.117l-.01.002c-.43.247-.816.562-1.146.932l-.008.008q-.4.484-.46.948a.6.6 0 0 0-.007.14q0 .205.065.4l.013.01c.135.48.473 1.276 1.205 2.604.42.768.903 1.5 1.446 2.186q.405.517.87.984l.132.132q.466.463.984.87a15.5 15.5 0 0 0 2.186 1.447c1.328.733 2.126 1.07 2.604 1.206l.01.014a1.3 1.3 0 0 0 .54.055q.466-.055.948-.46c.004 0 .003-.002.008-.005.37-.33.683-.72.93-1.148l.003-.01c.225-.432.15-.842-.18-1.12-.004 0-.698-.58-1.037-.83q-.54-.383-1.113-.71c-.51-.285-1.032-.106-1.248.174l-.447.564c-.23.283-.657.246-.657.246-3.12-.796-3.955-3.955-3.955-3.955s-.037-.426.248-.656l.563-.448c.277-.215.456-.737.17-1.248a13 13 0 0 0-.71-1.115 28 28 0 0 0-.83-1.035.82.82 0 0 0-.502-.297zm4.49.88a.303.303 0 0 0-.018.606c1.16.085 2.017.466 2.645 1.15.63.688.93 1.524.906 2.57a.306.306 0 0 0 .61.013c.025-1.175-.334-2.193-1.067-2.994-.74-.81-1.777-1.253-3.05-1.346h-.024zm.463 1.63a.305.305 0 0 0-.3.287c-.008.167.12.31.288.32.523.028.875.175 1.113.422.24.245.388.62.416 1.164a.304.304 0 0 0 .605-.03c-.03-.644-.215-1.178-.58-1.557-.367-.378-.893-.574-1.52-.607h-.018z"/></svg>
--- a/src/icons/vkontakte.svg
+++ b/src/icons/vkontakte.svg
@ -0,0 +1 @@
+<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4.199 4.841H.11c.194 9.312 4.85 14.907 13.012 14.907h.462v-5.327c3 .299 5.268 2.492 6.178 5.327H24c-1.164-4.237-4.223-6.58-6.133-7.475 1.91-1.105 4.596-3.79 5.238-7.432h-3.85c-.836 2.955-3.313 5.641-5.67 5.895V4.84h-3.85v10.326C7.347 14.57 4.333 11.675 4.199 4.84Z"/></svg>
--- a/src/icons/web-share.svg
+++ b/src/icons/web-share.svg
@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#fff" stroke-width="2" d="M18 2a3 3 0 1 0 0 6 3 3 0 1 0 0-6zM6 9a3 3 0 1 0 0 6 3 3 0 1 0 0-6zm12 7a3 3 0 1 0 0 6 3 3 0 1 0 0-6zm-9.41-2.49 6.83 3.98m-.01-10.98-6.82 3.98"/></svg>
--- a/src/icons/whatsapp.svg
+++ b/src/icons/whatsapp.svg
@ -0,0 +1 @@
+<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path 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-.52s.198-.298.298-.497c.099-.198.05-.371-.025-.52s-.669-1.612-.916-2.207c-.242-.579-.487-.5-.669-.51a13 13 0 0 0-.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.074s2.096 3.2 5.077 4.487c.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413s.248-1.289.173-1.413c-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-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.82 9.82 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.82 11.82 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.9 11.9 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.82 11.82 0 0 0-3.48-8.413"/></svg>
--- a/src/index.js
+++ b/src/index.js
@ -0,0 +1,8 @@
+import { init } from "./shareon";
+
+const s = document.currentScript;
+if (s && s.hasAttribute("init")) {
+  init();
+}
+
+export { init } from "./shareon";
--- a/src/index.ts
+++ b/src/index.ts
@ -1,68 +0,0 @@
-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}`,
-  odnoklassniki: (d) => `https://connect.ok.ru/offer?url=${d.url}&title=${d.title}${d.extra.media ? `&imageUrl=${d.extra.media}` : ''}`,
-  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}` : ''}`,
-  vkontakte: (d) => `https://vk.com/share.php?url=${d.url}&title=${d.title}${d.extra.media ? `&image=${d.extra.media}` : ''}`,
-  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/shareon.css
+++ b/src/shareon.css
@ -0,0 +1,209 @@
+:root {
+  --button-size: 36px;
+  --icon-size: 20px;
+
+  --padding-ver: calc(0.3 * var(--icon-size));
+  --padding-hor: calc(var(--icon-size) / 2);
+  --padding-icon: calc((var(--button-size) - var(--icon-size)) / 2);
+
+  --height: calc(var(--button-size) - 2 * var(--padding-ver));
+  --width: calc(var(--button-size) - 2 * var(--padding-hor));
+}
+
+.shareon {
+  font-size: 0 !important;
+}
+
+.shareon > * {
+  display: inline-block;
+  position: relative;
+
+  height: var(--height);
+  min-width: var(--width);
+
+  margin: calc(var(--padding-ver) / 2);
+  padding: var(--padding-ver) var(--padding-hor);
+
+  background-color: #333;
+  border-radius: calc(var(--icon-size) / 6);
+  border: none;
+  box-sizing: content-box;
+  color: white;
+  line-height: 1.5;
+  transition: opacity 300ms ease;
+  vertical-align: middle;
+}
+
+.shareon > *:hover {
+  border: none;
+  cursor: pointer;
+  opacity: 0.7;
+}
+
+.shareon > *:not(:empty) {
+  font-size: calc(0.8 * var(--icon-size));
+  text-decoration: none;
+}
+
+.shareon > *:not(:empty)::before {
+  position: relative;
+
+  height: 100%;
+  width: calc(var(--icon-size) + var(--padding-icon));
+
+  top: 0;
+  left: 0;
+
+  background-position: 0 50%;
+}
+
+.shareon > *::before {
+  display: inline-block;
+  position: absolute;
+
+  height: var(--icon-size);
+  width: var(--icon-size);
+
+  top: var(--padding-icon);
+  left: var(--padding-icon);
+
+  background-repeat: no-repeat;
+  background-size: var(--icon-size) var(--icon-size);
+  content: "";
+  vertical-align: bottom;
+}
+
+.shareon > .copy-url:before {
+  background-image: url("icons/copy-url.svg");
+}
+
+.shareon > .copy-url.done:before {
+  background-image: url("icons/copy-url-done.svg");
+}
+
+.shareon > .email:before {
+  background-image: url("icons/email.svg");
+}
+
+.shareon > .facebook {
+  background-color: #1877f2;
+}
+.shareon > .facebook:before {
+  background-image: url("icons/facebook.svg");
+}
+
+.shareon > .fediverse {
+  background-color: #8a54af;
+}
+.shareon > .fediverse:before {
+  background-image: url("icons/fediverse.svg");
+}
+
+.shareon > .linkedin {
+  background-color: #0a66c2;
+}
+.shareon > .linkedin:before {
+  background-image: url("icons/linkedin-in.svg");
+}
+.shareon > .linkedin:not(:empty):before {
+  background-image: url("icons/linkedin.svg");
+}
+
+.shareon > .mastodon {
+  background-color: #6364ff;
+}
+.shareon > .mastodon:before {
+  background-image: url("icons/mastodon.svg");
+}
+
+.shareon > .messenger {
+  background-color: #00b2ff;
+}
+.shareon > .messenger:before {
+  background-image: url("icons/messenger.svg");
+}
+
+.shareon > .odnoklassniki {
+  background-color: #ee8208;
+}
+.shareon > .odnoklassniki:before {
+  background-image: url("icons/odnoklassniki.svg");
+}
+
+.shareon > .pinterest {
+  background-color: #bd081c;
+}
+.shareon > .pinterest:before {
+  background-image: url("icons/pinterest.svg");
+}
+
+.shareon > .pocket {
+  background-color: #ef3f56;
+}
+.shareon > .pocket:before {
+  background-image: url("icons/pocket.svg");
+}
+
+.shareon > .print:before {
+  background-image: url("icons/print.svg");
+}
+
+.shareon > .reddit {
+  background-color: #ff4500;
+}
+.shareon > .reddit:before {
+  background-image: url("icons/reddit.svg");
+}
+
+.shareon > .teams {
+  background-color: #6264a7;
+}
+.shareon > .teams:before {
+  background-image: url("icons/teams.svg");
+}
+
+.shareon > .telegram {
+  background-color: #26a5e4;
+}
+.shareon > .telegram:before {
+  background-image: url("icons/telegram.svg");
+}
+
+.shareon > .tumblr {
+  background-color: #36465d;
+}
+.shareon > .tumblr:before {
+  background-image: url("icons/tumblr.svg");
+}
+
+.shareon > .twitter {
+  background-color: #1d9bf0;
+}
+.shareon > .twitter:before {
+  background-image: url("icons/twitter.svg");
+}
+
+.shareon > .viber {
+  background-color: #7360f2;
+}
+.shareon > .viber:before {
+  background-image: url("icons/viber.svg");
+}
+
+.shareon > .vkontakte {
+  background-color: #0077ff;
+}
+.shareon > .vkontakte:before {
+  background-image: url("icons/vkontakte.svg");
+}
+
+.shareon > .web-share:before {
+  background-image: url("icons/web-share.svg");
+}
+
+.shareon > .whatsapp {
+  background-color: #25d366;
+}
+.shareon > .whatsapp:before {
+  background-image: url("icons/whatsapp.svg");
+}
--- a/src/shareon.js
+++ b/src/shareon.js
@ -0,0 +1,155 @@
+import "./shareon.css";
+
+// prettier-ignore
+/**
+ * Map of social networks to their respective URL builders.
+ *
+ * The `d` argument of each builder is the object with the page metadata, such
+ * as page title, URL, author name, etc.
+ *
+ * @type {{ [network: string]: (d: {
+ *   url: string,
+ *   title?: string,
+ *   media?: string,
+ *   text?: string,
+ *   via?: string,
+ *   fbAppId?: string,
+ *   s2fInstance?: string,
+ * }) => string}}
+ */
+const urlBuilderMap = {
+  facebook: (d) => `https://www.facebook.com/sharer/sharer.php?u=${d.url}${d.hashtags ? `&hashtag=%23${d.hashtags.split('%2C')[0]}` : ''}`,
+  fediverse: (d) => `https://${d.s2fInstance}/?text=${d.title}%0D%0A${d.url}${d.text ? `%0D%0A%0D%0A${d.text}` : ''}${d.via ? `%0D%0A%0D%0A${d.via}` : ''}`,
+  email: (d) => `mailto:?subject=${d.title}&body=${d.url}`,
+  linkedin: (d) => `https://www.linkedin.com/sharing/share-offsite/?url=${d.url}`,
+  mastodon: (d) => `https://toot.kytta.dev/?text=${d.title}%0D%0A${d.url}${d.text ? `%0D%0A%0D%0A${d.text}` : ''}${d.via ? `%0D%0A%0D%0A${d.via}` : ''}`,
+  messenger: (d) => `https://www.facebook.com/dialog/send?app_id=${d.fbAppId}&link=${d.url}&redirect_uri=${d.url}`,
+  odnoklassniki: (d) => `https://connect.ok.ru/offer?url=${d.url}&title=${d.title}${d.media ? `&imageUrl=${d.media}` : ''}`,
+  pinterest: (d) => `https://pinterest.com/pin/create/button/?url=${d.url}&description=${d.title}${d.media ? `&media=${d.media}` : ''}`,
+  pocket: (d) => `https://getpocket.com/edit.php?url=${d.url}`,
+  reddit: (d) => `https://www.reddit.com/submit?title=${d.title}&url=${d.url}`,
+  teams: (d) => `https://teams.microsoft.com/share?href=${d.url}${d.text ? `&msgText=${d.text}` : ''}`,
+  telegram: (d) => `https://telegram.me/share/url?url=${d.url}${d.text ? `&text=${d.text}` : ''}`,
+  tumblr: (d) => `https://www.tumblr.com/widgets/share/tool?posttype=link${d.hashtags ? `&tags=${d.hashtags}` : ''}&title=${d.title}&content=${d.url}&canonicalUrl=${d.url}${d.text ? `&caption=${d.text}` : ''}${d.via ? `&show-via=${d.via}` : ''}`,
+  twitter: (d) => `https://twitter.com/intent/tweet?url=${d.url}&text=${d.title}${d.via ? `&via=${d.via}` : ''}${d.hashtags ? `&hashtags=${d.hashtags}` : ''}`,
+  viber: (d) => `viber://forward?text=${d.title}%0D%0A${d.url}${d.text ? `%0D%0A%0D%0A${d.text}` : ''}`,
+  vkontakte: (d) => `https://vk.com/share.php?url=${d.url}&title=${d.title}${d.media ? `&image=${d.media}` : ''}`,
+  whatsapp: (d) => `https://wa.me/?text=${d.title}%0D%0A${d.url}${d.text ? `%0D%0A%0D%0A${d.text}` : ''}`,
+};
+
+const openUrl = (buttonUrl) => () => {
+  window.open(buttonUrl, "_blank", "noopener,noreferrer");
+};
+
+const init = () => {
+  const shareonContainers = document.querySelectorAll(".shareon");
+
+  // iterate over <div class="shareon">
+  for (const container of shareonContainers) {
+    // iterate over children of <div class="shareon">
+    for (const child of container.children) {
+      if (child) {
+        const classListLength = child.classList.length;
+
+        // iterate over classes of the child element
+        for (let k = 0; k < classListLength; k += 1) {
+          const cls = child.classList.item(k);
+
+          // if it's "Copy URL"
+          if (cls === "copy-url") {
+            child.addEventListener("click", () => {
+              const url =
+                child.dataset.url ||
+                container.dataset.url ||
+                window.location.href;
+              navigator.clipboard.writeText(url);
+              child.classList.add("done");
+              setTimeout(() => {
+                child.classList.remove("done");
+              }, 1000);
+            });
+          }
+
+          // if it's "Print"
+          if (cls === "print") {
+            child.addEventListener("click", () => {
+              window.print();
+            });
+          }
+
+          // if it's "Web Share"
+          if (cls === "web-share") {
+            const data = {
+              title:
+                child.dataset.title ||
+                container.dataset.title ||
+                document.title,
+              text: child.dataset.text || container.dataset.text || "",
+              url:
+                child.dataset.url ||
+                container.dataset.url ||
+                window.location.href,
+            };
+
+            if (navigator.canShare && navigator.canShare(data)) {
+              child.addEventListener("click", () => {
+                navigator.share(data);
+              });
+            } else {
+              child.style.display = "none";
+            }
+          }
+
+          // if it's one of the networks
+          if (Object.prototype.hasOwnProperty.call(urlBuilderMap, cls)) {
+            const preset = {
+              url: encodeURIComponent(
+                child.dataset.url ||
+                  container.dataset.url ||
+                  window.location.href,
+              ),
+              title: encodeURIComponent(
+                child.dataset.title ||
+                  container.dataset.title ||
+                  document.title,
+              ),
+              media: encodeURIComponent(
+                child.dataset.media || container.dataset.media || "",
+              ),
+              text: encodeURIComponent(
+                child.dataset.text || container.dataset.text || "",
+              ),
+              via: encodeURIComponent(
+                child.dataset.via || container.dataset.via || "",
+              ),
+              hashtags: encodeURIComponent(
+                child.dataset.hashtags || container.dataset.hashtags || "",
+              ),
+              fbAppId: encodeURIComponent(
+                child.dataset.fbAppId || container.dataset.fbAppId || "",
+              ),
+              s2fInstance: encodeURIComponent(
+                child.dataset.s2fInstance ||
+                  container.dataset.s2fInstance ||
+                  "s2f.kytta.dev",
+              ),
+            };
+            const url = urlBuilderMap[cls](preset);
+
+            if (child.tagName.toLowerCase() === "a") {
+              child.setAttribute("href", url);
+              child.setAttribute("rel", "noopener noreferrer");
+              child.setAttribute("target", "_blank");
+            } else {
+              child.addEventListener("click", openUrl(url));
+            }
+
+            break; // once a network is detected we don't want to check further
+          }
+        }
+      }
+    }
+  }
+};
+
+export { init };
--- a/src/style.scss
+++ b/src/style.scss
@ -1,136 +0,0 @@
-$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 {
-    font-size: 0 !important;
-
-    & > * {
-        display: inline-block;
-        position: relative;
-
-        height: $height;
-        min-width: $width;
-
-        margin: $padding-ver / 2;
-        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");
-            }
-        }
-
-        &.odnoklassniki {
-            background-color: #EE8208;
-
-            &::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='M14.505 17.44a11.599 11.599 0 003.6-1.49 1.816 1.816 0 00-1.935-3.073 7.866 7.866 0 01-8.34 0 1.814 1.814 0 00-2.5.565c0 .002 0 .004-.002.005a1.812 1.812 0 00.567 2.5l.002.002c1.105.695 2.322 1.2 3.596 1.488l-3.465 3.465A1.796 1.796 0 006 23.439l.03.03c.344.354.81.53 1.274.53.465 0 .93-.176 1.275-.53L12 20.065l3.404 3.406a1.815 1.815 0 002.566-2.565l-3.465-3.466zM12 12.388a6.202 6.202 0 006.195-6.193C18.195 2.78 15.415 0 12 0S5.805 2.78 5.805 6.197A6.2 6.2 0 0012 12.389zm0-8.757a2.566 2.566 0 010 5.13 2.569 2.569 0 01-2.565-2.564A2.57 2.57 0 0112 3.63z'/%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");
-            }
-        }
-
-        &.vkontakte {
-            background-color: #4680C2;
-
-            &::before {
-                background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M97.647 24.37c.741-2.33 0-4.024-3.283-4.024H83.455c-2.753 0-4.024 1.483-4.766 3.071 0 0-5.613 13.556-13.45 22.347-2.542 2.541-3.707 3.389-5.083 3.389-.742 0-1.695-.848-1.695-3.177V24.264c0-2.753-.847-4.024-3.177-4.024H38.127c-1.695 0-2.754 1.271-2.754 2.542 0 2.647 3.919 3.283 4.342 10.696v16.098c0 3.495-.635 4.131-2.012 4.131-3.707 0-12.709-13.662-18.11-29.231-1.059-3.071-2.118-4.236-4.872-4.236H3.707C.53 20.24 0 21.723 0 23.311c0 2.86 3.707 17.263 17.263 36.327 9.002 13.026 21.817 20.016 33.361 20.016 6.99 0 7.837-1.588 7.837-4.236v-9.85c0-3.177.635-3.706 2.86-3.706 1.588 0 4.448.847 10.908 7.095 7.414 7.414 8.684 10.803 12.815 10.803h10.908c3.178 0 4.66-1.589 3.813-4.66-.953-3.071-4.554-7.519-9.214-12.815-2.542-2.965-6.354-6.248-7.519-7.837-1.589-2.118-1.165-2.965 0-4.872-.106 0 13.238-18.851 14.615-25.206' fill='%23fff'/%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/svgo.config.js
+++ b/svgo.config.js
@ -0,0 +1,92 @@
+/*!
+ * SVGO configuration from simple-icons, modified.
+ *
+ * See: https://github.com/simple-icons/simple-icons/blob/4e36921e759278e83f2e6775e0fb78ba76131eec/svgo.config.mjs
+ */
+
+export default {
+  multipass: true,
+  eol: "lf",
+  plugins: [
+    "cleanupAttrs",
+    "mergeStyles",
+    "minifyStyles",
+    "inlineStyles",
+    "removeDoctype",
+    "removeXMLProcInst",
+    "removeComments",
+    "removeMetadata",
+    "removeDesc",
+    "removeUselessDefs",
+    "removeEditorsNSData",
+    "removeEmptyAttrs",
+    "removeHiddenElems",
+    "removeEmptyText",
+    "removeEmptyContainers",
+    "convertStyleToAttrs",
+    "convertColors",
+    "cleanupEnableBackground",
+    {
+      name: "convertPathData",
+      params: {
+        // 3 decimals of precision in floating point numbers
+        floatPrecision: 3,
+      },
+    },
+    "convertTransform",
+    {
+      name: "removeUnknownsAndDefaults",
+    },
+    "removeUselessStrokeAndFill",
+    "removeNonInheritableGroupAttrs",
+    "removeUnusedNS",
+    "cleanupIds",
+    "cleanupNumericValues",
+    "cleanupListOfValues",
+    "collapseGroups",
+    "removeRasterImages",
+    {
+      // Compound all <path>s into one
+      name: "mergePaths",
+      params: {
+        force: true,
+      },
+    },
+    {
+      // Convert basic shapes (such as <circle>) to <path>
+      name: "convertShapeToPath",
+      params: {
+        // including <arc>
+        convertArcs: true,
+      },
+    },
+    "convertEllipseToCircle",
+    {
+      // Sort the attributes on the <svg> tag
+      name: "sortAttrs",
+      params: {
+        order: ["fill", "stroke", "viewBox"],
+        xmlnsOrder: "end",
+      },
+    },
+    "sortDefsChildren",
+    "removeDimensions",
+
+    {
+      name: "removeAttrs",
+      params: {
+        attrs: ["svg:(?!(role|xmlns))", "path:(?!d)"],
+      },
+    },
+    {
+      name: "addAttributesToSVGElement",
+      params: {
+        attributes: [{ xmlns: "http://www.w3.org/2000/svg" }],
+      },
+    },
+    "removeOffCanvasPaths",
+    "removeStyleElement",
+    "removeScriptElement",
+    "removeTitle",
+  ],
+};
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,18 +0,0 @@
-{
-    "compilerOptions": {
-        "lib": [
-            "dom",
-            "es6"
-        ],
-        "module": "ES2020",
-        "noImplicitAny": true,
-        "noImplicitReturns": true,
-        "target": "es5"
-    },
-    "include": [
-        "./src/**/*"
-    ],
-    "exclude": [
-        "node_modules"
-    ]
-}
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,27 @@
+import { defineConfig } from "vite";
+import * as path from "node:path";
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: path.resolve("./src/index.js"),
+      name: "Shareon",
+      formats: ["es", "umd", "iife"],
+      // Workaround to keep the old file names
+      fileName: (format) => `shareon.${format}.js`,
+    },
+    rollupOptions: {
+      output: {
+        // Workaround for a correct file name
+        // See: https://github.com/vitejs/vite/issues/4863
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name === "style.css") return "shareon.min.css";
+          return assetInfo.name;
+        },
+      },
+    },
+  },
+  css: {
+    devSourcemap: true,
+  },
+});
--- a/yarn.lock
+++ b/yarn.lock
				`@ -0,0 +1 @@`
				`<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6 9 17l-5-5"/></svg>`
				`@ -0,0 +1 @@`
				`<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073"/></svg>`
				`@ -0,0 +1 @@`
				<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.239 8.64a2.43 2.43 0 0 1-1.041 1.036l5.714 5.736 1.377-.698zm7.537 7.566-1.378.698 2.895 2.907a2.43 2.43 0 0 1 1.041-1.037zm6.61-5.297-3.234 1.64.238 1.526 3.66-1.856a2.43 2.43 0 0 1-.663-1.31m-5.113 2.592-7.649 3.876a2.43 2.43 0 0 1 .664 1.31l7.223-3.66zm-2.46-9.549-3.69 7.205 1.089 1.094 3.908-7.628a2.43 2.43 0 0 1-1.307-.67m-4.65 9.078-1.87 3.65a2.44 2.44 0 0 1 1.307.67l1.652-3.226zm-2.998-3.34a2.44 2.44 0 0 1-1.216.255 3 3 0 0 1-.235-.025l1.092 6.983a2.44 2.44 0 0 1 1.216-.255q.118.007.234.025zm3.129 9.03a2.4 2.4 0 0 1 .025.49 2.4 2.4 0 0 1-.256.96l6.98 1.121a2.4 2.4 0 0 1-.025-.49 2.4 2.4 0 0 1 .257-.96zm12.78-6.476-3.222 6.29a2.43 2.43 0 0 1 1.307.671l3.222-6.29a2.43 2.43 0 0 1-1.307-.671M15.68 3.348a2.44 2.44 0 0 1-1.04 1.036l4.99 5.01a2.43 2.43 0 0 1 1.04-1.037zm-4.554-.731L4.818 5.813a2.43 2.43 0 0 1 .663 1.31l6.309-3.197a2.43 2.43 0 0 1-.664-1.31m3.502 1.774a2.44 2.44 0 0 1-1.236.264 3 3 0 0 1-.213-.022l.559 3.578 1.524.244zm-.565 5.9 1.32 8.46a2.43 2.43 0 0 1 1.199-.246q.128.007.254.028l-1.249-7.998zM5.486 7.15a2.4 2.4 0 0 1 .027.498 2.4 2.4 0 0 1-.253.953l3.58.575.704-1.374zm6.137.986L10.92 9.51l8.46 1.36a2.4 2.4 0 0 1-.024-.485 2.4 2.4 0 0 1 .26-.966zM13.645.015a2.212 2.212 0 1 0-.24 4.418 2.212 2.212 0 1 0 .24-4.418m8.261 8.293a2.212 2.212 0 1 0-.24 4.418 2.212 2.212 0 1 0 .24-4.418M16.57 18.725a2.212 2.212 0 1 0-.24 4.419 2.212 2.212 0 1 0 .24-4.419M5.01 16.871a2.212 2.212 0 1 0-.24 4.418 2.212 2.212 0 1 0 .24-4.418M3.204 5.307a2.212 2.212 0 1 0-.24 4.418 2.212 2.212 0 1 0 .24-4.418"/></svg>