Release 2.5.0

Closes #79

.eslintrc.json

@@ -1,26 +0,0 @@
-{
-  "root": true,
-  "env": {
-    "browser": true
-  },
-  "extends": ["eslint:recommended", "plugin:unicorn/recommended", "prettier"],
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module"
-  },
-  "overrides": [
-    {
-      "files": ["postcss.config.js", "vite.config.js"],
-      "env": {
-        "node": true,
-        "browser": false
-      }
-    },
-    {
-      "files": ["postcss.config.js"],
-      "rules": {
-        "unicorn/prefer-module": 0
-      }
-    }
-  ]
-}

.github/workflows/ci.yml

@@ -1,63 +0,0 @@
-name: Node.js CI
-
-on:
-  push:
-    branches:
-      - main
-      - v*
-  pull_request:
-    branches:
-      - main
-
-jobs:
-  lint:
-    name: Lint package
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v2
-      - name: Setup Node
-        uses: actions/setup-node@v2
-        with:
-          node-version: "16"
-      - uses: pnpm/action-setup@v2.0.1
-        with:
-          version: 6.0.2
-      - name: Install dependencies
-        run: pnpm i
-      - name: Lint
-        run: pnpm run lint
-
-  build-docs:
-    name: Build and test package and deploy docs
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v2
-      - name: Setup Node
-        uses: actions/setup-node@v2
-        with:
-          node-version: "16"
-      - uses: pnpm/action-setup@v2.0.1
-        with:
-          version: 6.0.2
-      - name: Install dependencies
-        run: pnpm i
-      - name: Test package
-        run: pnpm run test
-
-      - name: Copy built files to docs
-        run: cp ./dist/shareon.min.* ./docs
-        if: ${{ github.ref == 'refs/heads/main' }}
-      - name: Deploy to GitHub Pages
-        uses: crazy-max/ghaction-github-pages@v2
-        with:
-          keep_history: true
-          build_dir: docs
-          fqdn: shareon.js.org
-          jekyll: false
-        if: ${{ github.ref == 'refs/heads/main' }}
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.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"

.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 }}

.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

.gitignore

@@ -3,4 +3,5 @@ dist/
 .idea/
 node_modules/
 .vscode/
-pnpm-lock.yaml
+package-lock.json
+yarn.lock

.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/"

.prettierignore

@@ -1 +0,0 @@
-./.gitignore

.prettierignore

@@ -0,0 +1,2 @@
+dist/
+pnpm-lock.yaml

CHANGELOG.md

@@ -4,7 +4,120 @@ 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).
 
-## [Unreleased]
+## [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
 
@@ -19,13 +132,24 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
     <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
-- remove mixins, defining the code/styles directly in the files
+- 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
@@ -225,8 +349,19 @@ Initial release of shareon
 - Add Telegram button
 - Add Twitter button
 
-[unreleased]: https://codeberg.org/kytta/shareon/compare/v1.6.3...main
-[1.6.2]: https://github.com/kytta/shareon/compare/v1.6.2...v1.6.3
+[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

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.

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020-2021 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

README.md

@@ -1,104 +1,100 @@
-# shareon
+# Shareon
 
-<img src="./assets/logo.svg" align="right" alt="shareon logo — the 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 6 KB minified and gzipped.
-- **Stylish.** Uses official vector logos and colors with no visual mess.
+- **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="./assets/demo@2x.png" height="84" width="392" alt="shareon demo screenshot">
+<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"
+  href="https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.min.css"
   rel="stylesheet"
 />
 <script
-  src="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.js"
-  type="text/javascript"
+  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
 
-```sh
-npm install shareon
-# or
-yarn add shareon
-```
+### Do not auto-initialize
 
-```js
-const shareon = require("shareon");
-// or
-import shareon from "shareon";
-```
-
-## Initialization
-
-By default, shareon will initialize every button after page load. It also
-exports the `shareon` function, that will let you repopulate your buttons with
-updated information (for example, if you changed the page title):
-
-```js
-// shareon auto-initializes
-
-window.title = "Cool new window title";
-shareon();
-```
-
-If you want to postpone the initialization, you can import the `noinit`-version
-of the package. You'll need to manually call the `shareon` function when you
-want the buttons to be initialized:
+Remove the `init` attribute and initialize Shareon when you need it:
 
 ```html
-<!-- notice the 'noinit' section of the url for JS -->
-<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/noinit/shareon.min.js"
-  type="text/javascript"
+  src="https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.iife.js"
+  defer
 ></script>
 
-<script type="text/javascript">
-  // do something important
-  shareon();
+<script>
+  // do something
+  Shareon.init();
 </script>
 ```
 
-or, if you're using Node:
+### 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
+pnpm add shareon  # or `npm install`, or `yarn add`
+```
 
 ```js
-const shareon = require("shareon/dist/noinit/shareon");
-// or
-import shareon from "shareon/dist/noinit/shareon";
+import { init } from "shareon";
+import "shareon/css"; // most bundlers will transpile this CSS
 
-// do something important
-shareon();
+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="fediverse"></a>
   <a class="linkedin"></a>
   <a class="mastodon"></a>
   <!-- FB App ID is required for the Messenger button to function -->
@@ -106,24 +102,36 @@ classes match the names of social networks:
   <a class="odnoklassniki"></a>
   <a class="pinterest"></a>
   <a class="pocket"></a>
-  <button class="reddit"></button>
-  <button class="telegram"></button>
-  <button class="twitter"></button>
-  <button class="viber"></button>
-  <button class="vkontakte"></button>
-  <button class="whatsapp"></button>
+  <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">
+<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>
@@ -131,32 +139,59 @@ on the whole container or on the specific buttons:
 
 Apart from the URL and title, some networks support extra parameters:
 
-- you **have to** add `data-fb-app-id` to the FB Messenger button to make sharing even possible
-- add `data-media` to an Odnoklassniki, Pinterest, or VK button to customize the pinned picture
-- add `data-text` to a WhatsApp, Mastodon, Telegram, or Viber button to add custom message text
-- add `data-via` to a Twitter or Mastodon 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>
+<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://picsum.photos/500">Pin</a>
+  <a class="pinterest" data-media="https://custom.picture/for-pinterest">Pin</a>
   <a class="telegram" data-text="Check this out!"></a>
-  <a class="twitter" data-via="MyNickname"></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://my-cool-website.com">Send</a>
+  <a class="whatsapp" data-url="https://custom.url/for-whatsapp">Send</a>
 </div>
 ```
 
-## License
+## Other versions
 
-MIT © [Nikita Karamov](https://www.kytta.dev/)
+- [**WordPress plugin**](https://wordpress.org/plugins/shareon/) by [Gareth](https://github.com/gareth-gillman)
 
-shareon logo is the [Postal Horn emoji](https://github.com/googlefonts/noto-emoji/blob/v2020-09-16-unicode13_1/svg/emoji_u1f4ef.svg) from [Noto Emoji](https://github.com/googlefonts/noto-emoji/tree/v2020-09-16-unicode13_1), which is licensed under the [Apache License v2.0](https://github.com/googlefonts/noto-emoji/blob/v2020-09-16-unicode13_1/LICENSE).
+## Licence
 
-Includes a modified version of the
-[Mastodon logo](https://commons.wikimedia.org/wiki/File:Mastodon_Logotype_%28Simple%29.svg),
-which is licensed under the
-[APGLv3 license](https://www.gnu.org/licenses/agpl.html) or later.
+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>

docs/CNAME

@@ -1 +0,0 @@
-shareon.js.org

docs/google1b3b138126470b07.html

@@ -1 +0,0 @@
-google-site-verification: google1b3b138126470b07.html

docs/index.html

@@ -1,337 +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" />
-
-    <title>shareon – Lightweight, stylish and ethical share buttons</title>
-
-    <meta property="og:title" content="shareon" />
-    <meta property="og:url" content="https://shareon.js.org" />
-    <meta
-      property="og:image"
-      content="https://raw.githubusercontent.com/kytta/shareon/main/assets/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="@KyttaWasHere" />
-
-    <link
-      rel="stylesheet"
-      href="https://igoradamenko.github.io/awsm.css/css/awsm.min.css"
-    />
-
-    <style>
-      .shareon > a:hover {
-        color: #fff;
-      }
-
-      button:not([disabled]):hover {
-        border: none;
-      }
-    </style>
-
-    <link rel="manifest" href="/site.webmanifest" />
-    <link rel="icon" href="/favicon.ico" />
-    <link rel="icon" href="/icon.svg" type="image/svg+xml" />
-    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-  </head>
-  <body>
-    <header>
-      <p>
-        <img
-          src="https://raw.githubusercontent.com/NickKaramoff/shareon/main/assets/logo.svg"
-          alt="shareon logo — the 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/kytta/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="linkedin"></a>
-          <a class="mastodon" data-via="@kytta@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="telegram"></a>
-          <a class="twitter" data-via="KyttaWasHere"></a>
-          <a class="viber"></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 6 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 and use it in a JS file that you will later
-          bundle:
-        </p>
-        <pre><code>const shareon = require('shareon');</code></pre>
-        <pre><code>import shareon from 'shareon';</code></pre>
-      </article>
-
-      <article>
-        <h2>
-          <a id="initialization" href="#initialization" aria-hidden="true"></a>
-          Initialization
-        </h2>
-        <p>
-          By default, shareon will initialize every button after page load. It
-          also exports the <code>shareon</code> function, that will let you
-          repopulate your buttons with updated information (for example, if you
-          changed the page title):
-        </p>
-
-        <pre><code>// shareon auto-initializes
-
-window.title = "Cool new window title";
-shareon();</code></pre>
-
-        <p>
-          If you want to postpone the initialization, you can import the
-          <code>noinit</code>-version of the package. You'll need to manually
-          call the <code>shareon</code> function when you want the buttons to be
-          initialized:
-        </p>
-        <pre><code>&lt;!-- notice the 'noinit' section of the url for JS --&gt;
-&lt;script src="https://cdn.jsdelivr.net/npm/shareon@1/dist/noinit/shareon.min.js"
-        type="text/javascript"&gt;&lt;/script&gt;
-&lt;link href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css"
-      rel="stylesheet"&gt;
-
-&lt;script type="text/javascript"&gt;
-  // do something important
-  shareon();
-&lt;/script&gt;</code></pre>
-
-        <p>or, if you're using Node:</p>
-
-        <pre><code>const shareon = require('shareon');
-// or
-import shareon from 'shareon';
-
-// do something important
-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="linkedin"&gt;&lt;/a&gt;
-    &lt;a class="mastodon"&gt;&lt;/a&gt;
-    &lt;!-- FB App ID is required for the Messenger button to function --&gt;
-    &lt;a class="messenger" data-fb-app-id="0123456789012345"&gt;&lt;/a&gt;
-    &lt;a class="odnoklassniki"&gt;&lt;/a&gt;
-    &lt;a class="pinterest"&gt;&lt;/a&gt;
-    &lt;a class="pocket"&gt;&lt;/a&gt;
-    &lt;button class="reddit"&gt;&lt;/button&gt;
-    &lt;button class="telegram"&gt;&lt;/button&gt;
-    &lt;button class="twitter"&gt;&lt;/button&gt;
-    &lt;button class="viber"&gt;&lt;/button&gt;
-    &lt;button class="vkontakte"&gt;&lt;/button&gt;
-    &lt;button class="whatsapp"&gt;&lt;/button&gt;
-&lt;/div&gt;</code></pre>
-        <div class="shareon">
-          <a class="facebook"></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>
-          <button class="reddit"></button>
-          <button class="telegram"></button>
-          <button class="twitter"></button>
-          <button class="viber"></button>
-          <button class="vkontakte"></button>
-          <button class="whatsapp"></button>
-        </div>
-
-        <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>
-            you <strong>have to</strong> add <code>data-fb-app-id</code> to the
-            FB Messenger button to make sharing even possible
-          </li>
-          <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, Mastodon, Telegram, or
-            Viber button to add custom message text
-          </li>
-          <li>
-            add <code>data-via</code> to a Twitter or Mastodon 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-fb-app-id="0123456789012345"&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="mastodon" data-via="@MyNickname@myserver.social"&gt;&lt;/a&gt;
-    &lt;a class="whatsapp" data-url="https://my-cool-website.com"&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-fb-app-id="3619024578167617"></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="mastodon" data-via="@MyNickname@myserver.social"></a>
-          <a class="whatsapp" data-url="https://my-cool-website.com">Send</a>
-        </div>
-      </article>
-    </main>
-
-    <footer>
-      <p>
-        by <a href="https://www.kytta.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>
-
-    <!-- These files are autocopied on build and will be present on the website -->
-    <!-- See https://github.com/kytta/shareon/blob/main/.github/workflows/node.yml#L29 -->
-    <link href="shareon.min.css" rel="stylesheet" />
-    <script src="shareon.min.js" type="text/javascript"></script>
-  </body>
-</html>

docs/site.webmanifest

@@ -1,7 +0,0 @@
-{
-  "name": "shareon",
-  "icons": [
-    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
-    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
-  ]
-}

index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -21,8 +21,6 @@
         font-weight: 600;
       }
     </style>
-
-    <link rel="stylesheet" href="./src/shareon.css" />
   </head>
 
   <body>
@@ -32,6 +30,7 @@
         <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>
@@ -39,17 +38,24 @@
           <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>
@@ -57,11 +63,17 @@
           <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>
@@ -73,6 +85,7 @@
           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>
@@ -80,17 +93,23 @@
           <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">Share</a>
+          <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>
@@ -99,11 +118,17 @@
           <br />
           <a class="pocket"></a>
           <a class="reddit"></a>
+          <a class="teams"></a>
           <a class="telegram"></a>
-          <a class="twitter"></a>
+          <a class="tumblr"></a>
+          <a class="twitter">Tweet</a>
           <a class="viber"></a>
-          <a class="vkontakte">Отправить</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>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "shareon",
-  "version": "2.0.0-beta.3",
+  "version": "2.5.0",
   "description": "Lightweight, stylish and ethical share buttons for popular social networks",
   "license": "MIT",
   "homepage": "https://shareon.js.org",
@@ -11,7 +11,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/kytta/shareon.git"
+    "url": "https://github.com/kytta/shareon.git"
   },
   "bugs": {
     "url": "https://github.com/kytta/shareon/issues"
@@ -19,8 +19,14 @@
   "author": {
     "name": "Nikita Karamov",
     "email": "me@kytta.dev",
-    "url": "https://www.kytta.dev"
+    "url": "https://www.kytta.dev/"
   },
+  "funding": [
+    "https://github.com/sponsors/kytta/",
+    "https://liberapay.com/kytta",
+    "https://www.paypal.com/paypalme/NickKaramoff"
+  ],
+  "type": "module",
   "main": "./dist/shareon.umd.js",
   "unpkg": "./dist/shareon.iife.js",
   "jsdelivr": "./dist/shareon.iife.js",
@@ -36,42 +42,82 @@
     "dist"
   ],
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css",
-    "build:js": "vite build",
-    "build:css": "postcss src/shareon.css -o dist/shareon.min.css --map",
+    "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"
+    "postpublish": "rm -rf ./package",
+    "preinstall": "npx only-allow pnpm"
   },
   "devDependencies": {
-    "@size-limit/preset-small-lib": "^7.0.5",
-    "autoprefixer": "^10.4.2",
-    "clean-publish": "^4.0.0",
-    "eslint": "^8.8.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-unicorn": "^40.1.0",
-    "postcss": "^8.4.6",
-    "postcss-banner": "^4.0.1",
-    "postcss-calc": "^8.2.3",
-    "postcss-cli": "^9.1.0",
-    "postcss-css-variables": "^0.18.0",
-    "postcss-csso": "^6.0.0",
-    "prettier": "^2.5.1",
-    "size-limit": "^7.0.5",
-    "vite": "^2.8.0"
+    "@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": "7 KB",
-      "path": "./dist/shareon.min.css"
+      "limit": "6 KiB",
+      "path": "./dist/shareon.min.css",
+      "brotli": true
     },
     {
-      "limit": "1 KB",
-      "path": "./dist/shareon.es.js"
+      "limit": "1 KiB",
+      "path": "./dist/shareon.es.js",
+      "brotli": true
     }
   ],
   "publishConfig": {
@@ -79,6 +125,9 @@
   },
   "clean-publish": {
     "withoutPublish": true,
-    "tempDir": "package"
+    "tempDir": "package",
+    "fields": [
+      "postcss"
+    ]
   }
 }

postcss.config.js

@@ -1,19 +0,0 @@
-const package_ = require("./package.json");
-const bannerText = `${package_.name} v${package_.version}`;
-
-module.exports = {
-  map: {
-    inline: false,
-  },
-  plugins: [
-    require("postcss-css-variables"),
-    require("postcss-calc"),
-    require("autoprefixer"),
-    require("postcss-csso"),
-    require("postcss-banner")({
-      banner: bannerText,
-      important: true,
-      inline: true,
-    }),
-  ],
-};

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

src/index.js

@@ -1,6 +1,5 @@
 import { init } from "./shareon";
 
-// TODO: update README
 const s = document.currentScript;
 if (s && s.hasAttribute("init")) {
   init();

src/shareon.css

@@ -24,7 +24,7 @@
   margin: calc(var(--padding-ver) / 2);
   padding: var(--padding-ver) var(--padding-hor);
 
-  background-color: #ccc;
+  background-color: #333;
   border-radius: calc(var(--icon-size) / 6);
   border: none;
   box-sizing: content-box;
@@ -73,96 +73,137 @@
   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("data:image/svg+xml;charset=utf-8,%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");
+  background-image: url("icons/facebook.svg");
+}
+
+.shareon > .fediverse {
+  background-color: #8a54af;
+}
+.shareon > .fediverse:before {
+  background-image: url("icons/fediverse.svg");
 }
 
 .shareon > .linkedin {
-  background-color: #2867b2;
+  background-color: #0a66c2;
 }
 .shareon > .linkedin:before {
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath 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.535zM.388 7.902h4.923v15.819H.388zM2.85 5.738A2.849 2.849 0 0 1 0 2.886a2.851 2.851 0 1 1 2.85 2.852z'/%3E%3C/svg%3E");
+  background-image: url("icons/linkedin-in.svg");
 }
 .shareon > .linkedin:not(:empty):before {
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath 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.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.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 0h.003z'/%3E%3C/svg%3E");
+  background-image: url("icons/linkedin.svg");
 }
 
 .shareon > .mastodon {
-  background-color: #3088d4;
+  background-color: #6364ff;
 }
 .shareon > .mastodon:before {
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.193 7.879c0-5.206-3.411-6.732-3.411-6.732C18.062.357 15.108.025 12.041 0h-.076c-3.068.025-6.02.357-7.74 1.147 0 0-3.411 1.526-3.411 6.732 0 1.192-.023 2.618.015 4.129.124 5.092.934 10.109 5.641 11.355 2.17.574 4.034.695 5.535.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.129.539c-2.165-.074-4.449-.233-4.799-2.891a5.499 5.499 0 0 1-.048-.745s2.125.52 4.817.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.507.475-6.507zm-4.024 6.709h-2.497V8.469c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.312v3.349h-2.483v-3.35c0-1.536-.602-2.312-1.802-2.312-1.085 0-1.628.655-1.628 1.944v6.119H4.832V8.284c0-1.289.328-2.313.987-3.07.68-.758 1.569-1.146 2.674-1.146 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.304z'/%3E%3C/svg%3E");
+  background-image: url("icons/mastodon.svg");
 }
 
 .shareon > .messenger {
-  background-color: #09f;
+  background-color: #00b2ff;
 }
 .shareon > .messenger:before {
-  background-image: url("data:image/svg+xml;charset=utf-8,%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 0 0-.64.05L5.5 23.92a.96.96 0 0 1-1.35-.85l-.07-2.14a.97.97 0 0 0-.32-.68A11.39 11.39 0 0 1 0 11.64zm8.32-2.19-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 0 0-2.61.48z'/%3E%3C/svg%3E");
+  background-image: url("icons/messenger.svg");
 }
 
 .shareon > .odnoklassniki {
   background-color: #ee8208;
 }
 .shareon > .odnoklassniki:before {
-  background-image: url("data:image/svg+xml;charset=utf-8,%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 0 0 3.6-1.49 1.816 1.816 0 0 0-1.935-3.073 7.866 7.866 0 0 1-8.34 0 1.814 1.814 0 0 0-2.5.565c0 .002 0 .004-.002.005a1.812 1.812 0 0 0 .567 2.5l.002.002c1.105.695 2.322 1.2 3.596 1.488l-3.465 3.465A1.796 1.796 0 0 0 6 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 0 0 2.566-2.565l-3.465-3.466zM12 12.388a6.202 6.202 0 0 0 6.195-6.193C18.195 2.78 15.415 0 12 0S5.805 2.78 5.805 6.197A6.2 6.2 0 0 0 12 12.389zm0-8.757a2.566 2.566 0 0 1 0 5.13 2.569 2.569 0 0 1-2.565-2.564A2.57 2.57 0 0 1 12 3.63z'/%3E%3C/svg%3E");
+  background-image: url("icons/odnoklassniki.svg");
 }
 
 .shareon > .pinterest {
-  background-color: #ee0023;
+  background-color: #bd081c;
 }
 .shareon > .pinterest:before {
-  background-image: url("data:image/svg+xml;charset=utf-8,%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");
+  background-image: url("icons/pinterest.svg");
 }
 
 .shareon > .pocket {
-  background-color: #ef4154;
+  background-color: #ef3f56;
 }
 .shareon > .pocket:before {
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m18.813 10.259-5.646 5.419a1.649 1.649 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.163 2.163 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.139.045.036.094.07.143.105l.03.023a11.899 11.899 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.002 12.002 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'/%3E%3C/svg%3E");
+  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("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.53 1.148a1.83 1.83 0 0 0-1.667 1.054l-4.372-.928a.522.522 0 0 0-.358.063.515.515 0 0 0-.21.297L11.59 7.925c-2.807.086-5.32.909-7.137 2.237a2.668 2.668 0 0 0-1.815-.737A2.64 2.64 0 0 0 0 12.064a2.634 2.634 0 0 0 1.563 2.407 4.95 4.95 0 0 0-.065.803c0 4.053 4.71 7.326 10.537 7.326s10.537-3.273 10.537-7.326a4.548 4.548 0 0 0-.063-.782 2.732 2.732 0 0 0 1.519-2.428 2.64 2.64 0 0 0-2.639-2.64 2.53 2.53 0 0 0-1.816.74c-1.796-1.288-4.287-2.134-7.031-2.239l1.204-5.637 3.906.823a1.888 1.888 0 0 0 1.878 1.777c1.024 0 1.87-.837 1.88-1.861a1.884 1.884 0 0 0-1.88-1.88zM7.907 18.066c-.13 0-.254.05-.347.141a.498.498 0 0 0 0 .697c1.266 1.267 3.736 1.373 4.454 1.373s3.167-.084 4.454-1.373a.546.546 0 0 0 .044-.697.5.5 0 0 0-.698 0c-.823.802-2.533 1.099-3.779 1.099s-2.977-.295-3.779-1.099a.49.49 0 0 0-.349-.142zm-1.932-4.122c0-1.035.844-1.88 1.88-1.88 1.034 0 1.878.843 1.878 1.879S8.89 15.82 7.856 15.82a1.882 1.882 0 0 1-1.88-1.877zm10.155-1.88c1.035 0 1.88.845 1.88 1.879 0 1.035-.844 1.878-1.879 1.878s-1.879-.843-1.879-1.877c0-1.037.844-1.88 1.878-1.88z' fill-rule='evenodd'/%3E%3C/svg%3E");
+  background-image: url("icons/reddit.svg");
+}
+
+.shareon > .teams {
+  background-color: #6264a7;
+}
+.shareon > .teams:before {
+  background-image: url("icons/teams.svg");
 }
 
 .shareon > .telegram {
-  background-color: #179cde;
+  background-color: #26a5e4;
 }
 .shareon > .telegram:before {
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.517 11.31c-.962.382-1.466.756-1.512 1.122-.088.702.924.921 2.196 1.335 1.037.337 2.433.731 3.158.747.658.014 1.393-.257 2.204-.814 5.533-3.735 8.39-5.622 8.57-5.663.126-.029.301-.065.42.04.119.106.107.306.095.36-.101.429-5.3 5.156-5.599 5.467-1.143 1.187-2.443 1.913-.437 3.235 1.735 1.144 2.746 1.873 4.534 3.045 1.142.75 2.039 1.637 3.218 1.529.543-.05 1.104-.56 1.389-2.083.673-3.598 1.996-11.392 2.302-14.604a3.585 3.585 0 0 0-.034-.8c-.027-.158-.084-.383-.29-.55-.243-.197-.619-.24-.787-.236-.764.013-1.936.42-7.579 2.767C11.39 7.03 7.44 8.73 1.517 11.31z'/%3E%3C/svg%3E");
+  background-image: url("icons/telegram.svg");
+}
+
+.shareon > .tumblr {
+  background-color: #36465d;
+}
+.shareon > .tumblr:before {
+  background-image: url("icons/tumblr.svg");
 }
 
 .shareon > .twitter {
-  background-color: #1da1f2;
+  background-color: #1d9bf0;
 }
 .shareon > .twitter:before {
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.954 4.569a10 10 0 0 1-2.825.775 4.958 4.958 0 0 0 2.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 0 0-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 0 0-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 0 1-2.228-.616v.061a4.923 4.923 0 0 0 3.946 4.827 4.996 4.996 0 0 1-2.212.085 4.937 4.937 0 0 0 4.604 3.417 9.868 9.868 0 0 1-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0 0 7.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 0 0 2.46-2.548l-.047-.02z'/%3E%3C/svg%3E");
+  background-image: url("icons/twitter.svg");
 }
 
 .shareon > .viber {
   background-color: #7360f2;
 }
 .shareon > .viber:before {
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.398.002C9.473.028 5.331.344 3.014 2.467 1.294 4.177.693 6.698.623 9.82c-.06 3.11-.13 8.95 5.5 10.541v2.42s-.038.97.602 1.17c.79.25 1.24-.499 1.99-1.299l1.4-1.58c3.85.32 6.8-.419 7.14-.529.78-.25 5.181-.811 5.901-6.652.74-6.031-.36-9.831-2.34-11.551l-.01-.002c-.6-.55-3-2.3-8.37-2.32 0 0-.396-.025-1.038-.016zm.067 1.697c.545-.003.88.02.88.02 4.54.01 6.711 1.38 7.221 1.84 1.67 1.429 2.528 4.856 1.9 9.892-.6 4.88-4.17 5.19-4.83 5.4-.28.09-2.88.73-6.152.52 0 0-2.439 2.941-3.199 3.701-.12.13-.26.17-.35.15-.13-.03-.17-.19-.16-.41l.02-4.019c-4.771-1.32-4.491-6.302-4.441-8.902.06-2.6.55-4.732 2-6.172 1.957-1.77 5.475-2.01 7.11-2.02zm.36 2.6a.299.299 0 0 0-.3.299.3.3 0 0 0 .3.3 5.631 5.631 0 0 1 4.03 1.59c1.09 1.06 1.621 2.48 1.641 4.34a.3.3 0 0 0 .3.3v-.009a.3.3 0 0 0 .3-.3 6.451 6.451 0 0 0-1.81-4.76c-1.19-1.16-2.692-1.76-4.462-1.76zm-3.954.69a.955.955 0 0 0-.615.12h-.012c-.41.24-.788.54-1.148.94-.27.32-.421.639-.461.949a1.24 1.24 0 0 0 .05.541l.02.01a13.722 13.722 0 0 0 1.2 2.6 15.383 15.383 0 0 0 2.32 3.171l.03.04.04.03.03.03.03.03a15.603 15.603 0 0 0 3.18 2.33c1.32.72 2.122 1.06 2.602 1.2v.01c.14.04.268.06.398.06a1.84 1.84 0 0 0 1.102-.472c.39-.35.7-.738.93-1.148v-.01c.23-.43.15-.841-.18-1.121a13.632 13.632 0 0 0-2.15-1.54c-.51-.28-1.03-.11-1.24.17l-.45.569c-.23.28-.65.24-.65.24l-.012.01c-3.12-.8-3.95-3.959-3.95-3.959s-.04-.43.25-.65l.56-.45c.27-.22.46-.74.17-1.25a13.522 13.522 0 0 0-1.54-2.15.843.843 0 0 0-.504-.3zm4.473.89a.3.3 0 0 0 .002.6 3.78 3.78 0 0 1 2.65 1.15 3.5 3.5 0 0 1 .9 2.57.3.3 0 0 0 .3.299l.01.012a.3.3 0 0 0 .3-.301c.03-1.19-.34-2.19-1.07-2.99-.73-.8-1.75-1.25-3.05-1.34a.3.3 0 0 0-.042 0zm.49 1.619a.305.305 0 0 0-.018.611c.99.05 1.47.55 1.53 1.58a.3.3 0 0 0 .3.29h.01a.3.3 0 0 0 .29-.32c-.07-1.34-.8-2.091-2.1-2.161a.305.305 0 0 0-.012 0z'/%3E%3C/svg%3E");
+  background-image: url("icons/viber.svg");
 }
 
 .shareon > .vkontakte {
-  background-color: #4680c2;
+  background-color: #0077ff;
 }
 .shareon > .vkontakte:before {
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.058 19.504h-2.616c-.99 0-1.297-.787-3.076-2.59-1.55-1.501-2.236-1.704-2.617-1.704-.534 0-.687.153-.687.89v2.363c0 .636-.202 1.017-1.88 1.017-2.77 0-5.845-1.677-8.004-4.804C.925 10.103.034 6.672.034 5.961c0-.381.153-.737.89-.737H3.54c.66 0 .915.305 1.17 1.016 1.295 3.736 3.456 7.014 4.345 7.014.33 0 .483-.153.483-.99V8.399c-.102-1.78-1.042-1.931-1.042-2.566 0-.306.255-.61.66-.61h4.117c.56 0 .762.304.762.964v5.211c0 .558.255.762.407.762.33 0 .61-.204 1.22-.813 1.88-2.11 3.227-5.362 3.227-5.362.178-.381.483-.737 1.145-.737h2.616c.788 0 .966.405.788.965-.33 1.526-3.532 6.048-3.532 6.048-.28.457-.381.66 0 1.17.28.381 1.194 1.169 1.805 1.88 1.118 1.27 1.98 2.338 2.21 3.076.255.735-.128 1.116-.864 1.116z'/%3E%3C/svg%3E");
+  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("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath 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 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.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 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.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 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.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z'/%3E%3C/svg%3E");
+  background-image: url("icons/whatsapp.svg");
 }

src/shareon.js

@@ -1,3 +1,5 @@
+import "./shareon.css";
+
 // prettier-ignore
 /**
  * Map of social networks to their respective URL builders.
@@ -11,11 +13,14 @@
  *   media?: string,
  *   text?: string,
  *   via?: string,
- *   fbAppId?: string
+ *   fbAppId?: string,
+ *   s2fInstance?: string,
  * }) => string}}
  */
 const urlBuilderMap = {
-  facebook: (d) => `https://www.facebook.com/sharer/sharer.php?u=${d.url}`,
+  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}`,
@@ -23,8 +28,10 @@ const urlBuilderMap = {
   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}` : ''}`,
-  twitter: (d) => `https://twitter.com/intent/tweet?url=${d.url}&text=${d.title}${d.via ? `&via=${d.via}` : ''}`,
+  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}` : ''}`,
@@ -48,28 +55,83 @@ const init = () => {
         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
+                  window.location.href,
               ),
               title: encodeURIComponent(
-                child.dataset.title || container.dataset.title || document.title
+                child.dataset.title ||
+                  container.dataset.title ||
+                  document.title,
               ),
               media: encodeURIComponent(
-                child.dataset.media || container.dataset.media || ""
+                child.dataset.media || container.dataset.media || "",
               ),
               text: encodeURIComponent(
-                child.dataset.text || container.dataset.text || ""
+                child.dataset.text || container.dataset.text || "",
               ),
               via: encodeURIComponent(
-                child.dataset.via || container.dataset.via || ""
+                child.dataset.via || container.dataset.via || "",
+              ),
+              hashtags: encodeURIComponent(
+                child.dataset.hashtags || container.dataset.hashtags || "",
               ),
               fbAppId: encodeURIComponent(
-                child.dataset.fbAppId || container.dataset.fbAppId || ""
+                child.dataset.fbAppId || container.dataset.fbAppId || "",
+              ),
+              s2fInstance: encodeURIComponent(
+                child.dataset.s2fInstance ||
+                  container.dataset.s2fInstance ||
+                  "s2f.kytta.dev",
               ),
             };
             const url = urlBuilderMap[cls](preset);

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",
+  ],
+};

vite.config.js

@@ -1,24 +1,27 @@
 import { defineConfig } from "vite";
 import * as path from "node:path";
-import package_ from "./package.json";
 
 export default defineConfig({
-  esbuild: {
-    minify: true,
-  },
   build: {
-    sourcemap: true,
-    target: "esnext",
-    minify: "terser",
     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: {
-        banner: `/*! ${package_.name} v${package_.version} */`,
+        // 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,
+  },
 });