Compare commits

...

No commits in common. "main" and "pages" have entirely different histories.
main ... pages

50 changed files with 260 additions and 3275 deletions

1
.domains Normal file
View File

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

View File

@ -1,13 +0,0 @@
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

View File

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

View File

@ -1 +0,0 @@
d95105353f659f1dfc16aa00e97dde9a18406be4

3
.github/FUNDING.yml vendored
View File

@ -1,3 +0,0 @@
github: kytta
liberapay: kytta
custom: paypal.me/NickKaramoff

View File

@ -1,37 +0,0 @@
name: Test
on:
push:
branches:
- main
pull_request:
jobs:
test:
runs-on: ubuntu-latest
steps:
- name: Checkout the repository
uses: actions/checkout@v3
- name: Install pnpm
uses: pnpm/action-setup@v2
with:
version: latest
- name: Install Node.js
uses: actions/setup-node@v3
with:
node-version: 18
cache: pnpm
- name: Install dependencies
run: pnpm install --ignore-scripts
- name: Lint
run: pnpm lint
env:
FORCE_COLOR: 2
- name: Build
run: pnpm build
env:
FORCE_COLOR: 2
- name: Check size
uses: getsentry/size-limit-action@v5
with:
main_branch: main
github_token: ${{ secrets.GITHUB_TOKEN }}
skip_step: build

3
.gitignore vendored
View File

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

View File

@ -1,38 +0,0 @@
repos:
- repo: https://github.com/pre-commit/pre-commit-hooks
rev: v4.4.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: "v3.0.2"
hooks:
- id: prettier
- repo: https://github.com/pre-commit/mirrors-eslint
rev: "v8.48.0"
hooks:
- id: eslint
files: \.([jt]s|astro)$ # *.js, *.ts and *.astro
types: [file]
additional_dependencies:
- eslint
- eslint-config-prettier
- eslint-plugin-unicorn
- prettier@3
- repo: local
hooks:
- id: svgo
name: optimize SVG files
entry: svgo
types: [svg]
files: 'src/icons/.*\.svg'
language: node
additional_dependencies:
- "svgo"

View File

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

View File

@ -1,361 +0,0 @@
# 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.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.3.0...main
[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

View File

@ -1,117 +0,0 @@
# 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.

21
LICENSE
View File

@ -1,21 +0,0 @@
MIT License
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
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
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.

191
README.md
View File

@ -1,191 +0,0 @@
# Shareon
<img src="./assets/logo.svg" align="right" alt="Shareon logo — the Postal Horn emoji" width="96" height="96">
> Lightweight, stylish, and ethical share buttons
- **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.
<a href="https://shareon.js.org/"><img src="./assets/demo@2x.png" height="126" width="333" alt="Shareon demo screenshot"></a>
See the live demo at [shareon.js.org](https://shareon.js.org)
## Install
Simply load the needed files from the CDN:
```html
<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>
```
- `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
pnpm add shareon # or `npm install`, or `yarn add`
```
```js
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
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:
```html
<div class="shareon">
<a class="facebook"></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>
</div>
```
Shareon will populate these `<a>` elements with correct `href` attributes.
### 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://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:
- you **MUST** 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 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 custom parameters:
```html
<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="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 © 20202022 [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>

BIN
apple-touch-icon.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 7.1 KiB

BIN
banner.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

BIN
favicon.ico Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

1
google1b3b138126470b07.html Executable file
View File

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

BIN
icon-192.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
icon-512.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

1
icon.svg Executable file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 8.1 KiB

343
index.html Normal file → Executable file
View File

@ -1,105 +1,132 @@
<!doctype html>
<html lang="en">
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shareon Demo Page</title>
<title>Shareon Lightweight, stylish, and ethical share buttons</title>
<meta
name="title"
content="Shareon Lightweight, stylish, and ethical share buttons"
/>
<meta
name="description"
content="Theyre under 6 kB in size, look good, and don't track your users. It's the perfect choice for your blog, news site, or project page!"
/>
<meta
name="keywords"
content="share buttons, sharing, social networks, share via, share on"
/>
<meta name="author" content="Nikita Karamov" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/awsm.css/dist/awsm.min.css"
/>
<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>
<!-- fixes for awsm.css -->
<style>
body {
max-width: 800px;
margin: 0 auto;
font-family: sans-serif;
}
code {
font-family: monospace;
font-size: 1em;
}
.shareon.specimen {
font-weight: 600;
font-weight: bold;
max-width: 500px;
margin: 0 auto;
}
.shareon > a,
.shareon > a:hover,
.shareon > a:visited {
color: #fff;
}
button:not([disabled]):hover {
border: none;
}
</style>
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://shareon.js.org/" />
<meta
property="og:title"
content="Shareon Lightweight, stylish, and ethical share buttons"
/>
<meta
property="og:description"
content="Theyre under 6 kB in size, look good, and don't track your users. It's the perfect choice for your blog, news site, or project page!"
/>
<meta property="og:image" content="https://shareon.js.org/banner.png" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://shareon.js.org/" />
<meta
property="twitter:title"
content="Shareon Lightweight, stylish, and ethical share buttons"
/>
<meta
property="twitter:description"
content="Theyre under 6 kB in size, look good, and don't track your users. It's the perfect choice for your blog, news site, or project page!"
/>
<meta
property="twitter:image"
content="https://shareon.js.org/banner.png"
/>
<meta name="twitter:creator" content="@KyttaWasHere" />
</head>
<body>
<header>
<p>
<img
src="./icon.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">npm</a>
</li>
<li>
<a href="https://github.com/kytta/shareon">source code</a>
</li>
</ul>
</nav>
</header>
<main>
<h1>Shareon Demo Page</h1>
<section>
<h2><code>&lt;a&gt;</code></h2>
<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>
<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="web-share"></a>
</div>
</section>
<section>
<h2><code>&lt;button&gt;</code></h2>
<div class="shareon">
<button class="facebook"></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="web-share"></button>
</div>
</section>
<section>
<h2><code>&lt;a&gt;</code> with custom params</h2>
<article>
<h2>
<a id="what-is-it" href="#what-is-it" aria-hidden="true"></a>
What is it?
</h2>
<p>Shareon are share buttons for popular social networks.</p>
<div
class="shareon"
data-title="shareon demo page test"
data-url="https://demo.shareon.js.org"
data-text="hey check this out"
class="shareon specimen"
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="@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="web-share"></a>
</div>
</section>
<section>
<h2>Specimen</h2>
<div class="shareon specimen">
<a class="facebook"></a>
<a class="linkedin"></a>
<a class="mastodon">Toot</a>
@ -111,7 +138,6 @@
<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 />
@ -120,12 +146,141 @@
<a class="copy-url"></a>
<a class="web-share">Share</a>
</div>
</section>
<p>Unlike many other share buttons, Shareon are:</p>
<ul>
<li>
<b>lightweight</b>, clocking in at only 6 KB brotlied code (JS+CSS),
</li>
<li>
<b>stylish</b>, using official vector logos and colours with no
visual mess, and
</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 share links. This makes Shareon 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>Simply load the needed files from the CDN:</p>
<pre><code>&lt;link
href="https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.min.css"
rel="stylesheet"
&gt;
&lt;script
src="https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.iife.js"
defer
init
&gt;&lt;/script&gt;</code></pre>
<aside>
<p>
Want other options? Check the
<a href="https://github.com/kytta/shareon/#install"
>extended docs</a
>
on GitHub!
</p>
</aside>
<p>or install it via NPM and bundle it in a JS file:</p>
<pre><code>import * as Shareon from "shareon";
import "shareon/css";
Shareon.init();</code></pre>
</article>
<article>
<h2>
<a id="usage" href="#usage" aria-hidden="true"></a>
Usage
</h2>
<p>
Create a container with class <code>shareon</code> and populate it
with elements, class names of which match the names of the 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;a class="reddit"&gt;&lt;/a&gt;
&lt;a class="teams"&gt;&lt;/a&gt;
&lt;a class="telegram"&gt;&lt;/a&gt;
&lt;a class="twitter"&gt;&lt;/a&gt;
&lt;a class="viber"&gt;&lt;/a&gt;
&lt;a class="vkontakte"&gt;&lt;/a&gt;
&lt;a class="whatsapp"&gt;&lt;/a&gt;
&lt;a class="copy-url"&gt;&lt;/a&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>
<a class="reddit"></a>
<a class="teams"></a>
<a class="telegram"></a>
<a class="twitter"></a>
<a class="viber"></a>
<a class="vkontakte"></a>
<a class="whatsapp"></a>
<a class="copy-url"></a>
</div>
<p>
You can customize the shared URL and page title with
<code>data-</code> attributes:
</p>
<pre><code>&lt;div class="shareon" data-url="https://custom.url/for-this-page"&gt;
&lt;a class="facebook" data-title="Custom Facebook title"&gt;&lt;/a&gt;
&lt;a class="twitter" data-title="Custom Twitter title"&gt;&lt;/a&gt;
&lt;/div&gt;</code></pre>
<p>
Read more in the
<a href="https://github.com/kytta/shareon/#usage">README</a>
on GitHub!
</p>
</article>
</main>
<script type="module">
import { init } from "./src/shareon.js";
init();
</script>
<footer>
<p>
Copyright © 20202023
<a href="https://www.kytta.dev/">Nikita Karamov</a>
<br />
Licenced under the MIT License.
</p>
<p>
Website built with
<a href="https://igoradamenko.github.io/awsm.css/index.html"
>awsm.css</a
>
</p>
</footer>
</body>
</html>

View File

@ -1,133 +0,0 @@
{
"name": "shareon",
"version": "2.3.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"
],
"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"
],
"type": "module",
"main": "./dist/shareon.umd.js",
"unpkg": "./dist/shareon.iife.js",
"jsdelivr": "./dist/shareon.iife.js",
"module": "./dist/shareon.es.js",
"exports": {
".": {
"import": "./dist/shareon.es.js",
"require": "./dist/shareon.umd.js"
},
"./css": "./dist/shareon.min.css"
},
"files": [
"dist"
],
"scripts": {
"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"
},
"devDependencies": {
"@size-limit/preset-small-lib": "^8.2.6",
"autoprefixer": "^10.4.14",
"clean-publish": "^4.2.0",
"eslint": "^8.45.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-unicorn": "^47.0.0",
"postcss": "^8.4.26",
"postcss-calc": "^9.0.1",
"postcss-css-variables": "^0.19.0",
"postcss-csso": "^6.0.1",
"postcss-url": "^10.1.3",
"prettier": "^3.0.0",
"size-limit": "^8.2.6",
"vite": "^4.4.4"
},
"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": "6 KB",
"path": "./dist/shareon.min.css",
"brotli": true
},
{
"limit": "1 KB",
"path": "./dist/shareon.es.js",
"brotli": true
}
],
"publishConfig": {
"directory": "package"
},
"clean-publish": {
"withoutPublish": true,
"tempDir": "package",
"fields": [
"postcss"
]
}
}

File diff suppressed because it is too large Load Diff

7
site.webmanifest Executable file
View File

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

View File

@ -1 +0,0 @@
<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>

Before

Width:  |  Height:  |  Size: 183 B

View File

@ -1 +0,0 @@
<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>

Before

Width:  |  Height:  |  Size: 287 B

View File

@ -1 +0,0 @@
<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.073z"/></svg>

Before

Width:  |  Height:  |  Size: 376 B

View File

@ -1 +0,0 @@
<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.849 2.849 0 0 1 0 2.886a2.851 2.851 0 1 1 2.85 2.852Z"/></svg>

Before

Width:  |  Height:  |  Size: 381 B

View File

@ -1 +0,0 @@
<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.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"/></svg>

Before

Width:  |  Height:  |  Size: 527 B

View File

@ -1 +0,0 @@
<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.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 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-.422.038-.008.077-.015.11-.024 2.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.545zm-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.102c0-1.31.337-2.35 1.011-3.12.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.164.675.77 1.012 1.81 1.012 3.12z"/></svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -1 +0,0 @@
<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.639c0 6.689-5.24 11.638-12 11.638-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.48z"/></svg>

Before

Width:  |  Height:  |  Size: 512 B

View File

@ -1 +0,0 @@
<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.568 2.568 0 0 1-2.564 2.564 2.568 2.568 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.611 11.611 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.593 11.593 0 0 0 3.596-1.49 1.814 1.814 0 1 0-1.932-3.073 7.867 7.867 0 0 1-8.34 0c-.318-.2-.674-.29-1.024-.278z"/></svg>

Before

Width:  |  Height:  |  Size: 640 B

View File

@ -1 +0,0 @@
<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.026L12.017 0z"/></svg>

Before

Width:  |  Height:  |  Size: 886 B

View File

@ -1 +0,0 @@
<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.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.326l-.011.001zm5.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-.742l.017.01z"/></svg>

Before

Width:  |  Height:  |  Size: 735 B

View File

@ -1 +0,0 @@
<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.525 2.525 0 0 1 1.812-.737A2.634 2.634 0 0 1 24 12.063c0 1.075-.653 2-1.516 2.423.044.258.065.519.063.78 0 4.043-4.698 7.31-10.512 7.31s-10.512-3.267-10.512-7.31c0-.275.022-.55.064-.801a2.627 2.627 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.513.513 0 0 1 .21-.296.521.521 0 0 1 .357-.063l4.361.926c.3-.644.952-1.057 1.663-1.052ZM7.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.37.716 0 3.16-.084 4.444-1.37a.545.545 0 0 0 .044-.695.498.498 0 0 0-.697 0c-.82.8-2.527 1.095-3.77 1.095-1.243 0-2.97-.294-3.77-1.095a.49.49 0 0 0-.348-.143v.002Zm-.051-5.989A1.88 1.88 0 0 0 5.99 13.94c0 1.031.842 1.873 1.876 1.873a1.878 1.878 0 0 0 1.873-1.874 1.878 1.878 0 0 0-1.873-1.875Zm8.254 0a1.878 1.878 0 0 0-1.873 1.876c0 1.031.842 1.873 1.875 1.873a1.878 1.878 0 0 0 1.875-1.874 1.88 1.88 0 0 0-1.877-1.875Z"/></svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -1 +0,0 @@
<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-.205-.475-.205-.832-.563-.358-.357-.563-.832Q18 6.053 18 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.837.205.48.205 1.02 0 .55-.205 1.025-.205.475-.563.832-.357.358-.837.563-.48.205-1.02.205zm0-3.75q-.469 0-.797.328-.328.328-.328.797 0 .469.328.797.328.328.797.328.469 0 .797-.328.328-.328.328-.797 0-.469-.328-.797-.328-.328-.797-.328zM24 10.002v5.578q0 .774-.293 1.46-.293.685-.803 1.194-.51.51-1.195.803-.686.293-1.459.293-.445 0-.908-.105-.463-.106-.85-.329-.293.95-.855 1.729-.563.78-1.319 1.336-.756.557-1.67.861-.914.305-1.898.305-1.148 0-2.162-.398-1.014-.399-1.805-1.102-.79-.703-1.312-1.664t-.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.275q.639.276 1.114.75.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.328.328.328.328.797zM12.75 2.373q-.41 0-.78.158-.368.158-.638.434-.27.275-.428.639-.158.363-.158.773 0 .41.158.78.159.368.428.638.27.27.639.428.369.158.779.158.41 0 .773-.158.364-.159.64-.428.274-.27.433-.639.158-.369.158-.779 0-.41-.158-.773-.159-.364-.434-.64-.275-.275-.639-.433-.363-.158-.773-.158zM6.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.752zm5.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-.879Z"/></svg>

Before

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -1 +0,0 @@
<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-.356-.117-.104-.292-.069-.418-.04-.178.04-3.013 1.915-8.504 5.62-.806.554-1.534.823-2.187.806-.72-.013-2.104-.405-3.134-.739C1.025 13.39.022 13.174.11 12.476c.045-.363.546-.734 1.5-1.114 5.878-2.56 9.796-4.249 11.758-5.064 5.599-2.328 6.763-2.733 7.521-2.747Z"/></svg>

Before

Width:  |  Height:  |  Size: 655 B

View File

@ -1 +0,0 @@
<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-.178l.011.002z"/></svg>

Before

Width:  |  Height:  |  Size: 373 B

View File

@ -1 +0,0 @@
<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.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 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.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"/></svg>

Before

Width:  |  Height:  |  Size: 544 B

View File

@ -1 +0,0 @@
<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.817.57 12.933.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.981.981 0 0 0-.616.117l-.01.002c-.43.247-.816.562-1.146.932-.002.004-.006.004-.008.008-.267.323-.42.638-.46.948a.596.596 0 0 0-.007.14c0 .136.022.27.065.4l.013.01c.135.48.473 1.276 1.205 2.604.42.768.903 1.5 1.446 2.186.27.344.56.673.87.984l.132.132c.31.308.64.6.984.87a15.524 15.524 0 0 0 2.186 1.447c1.328.733 2.126 1.07 2.604 1.206l.01.014a1.275 1.275 0 0 0 .54.055c.31-.036.627-.19.948-.46.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-.83-.36-.255-.73-.492-1.113-.71-.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.248a12.73 12.73 0 0 0-.71-1.115 28.35 28.35 0 0 0-.83-1.035.822.822 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>

Before

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -1 +0,0 @@
<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>

Before

Width:  |  Height:  |  Size: 355 B

View File

@ -1 +0,0 @@
<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>

Before

Width:  |  Height:  |  Size: 264 B

View File

@ -1 +0,0 @@
<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-.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"/></svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -1,8 +0,0 @@
import { init } from "./shareon";
const s = document.currentScript;
if (s && s.hasAttribute("init")) {
init();
}
export { init } from "./shareon";

View File

@ -1,194 +0,0 @@
: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 > .facebook {
background-color: #1877f2;
}
.shareon > .facebook:before {
background-image: url("icons/facebook.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 > .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");
}

View File

@ -1,140 +0,0 @@
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
* }) => string}}
*/
const urlBuilderMap = {
facebook: (d) => `https://www.facebook.com/sharer/sharer.php?u=${d.url}${d.hashtags? `&hashtag=%23${d.hashtags.split('%2C')[0]}` : ''}`,
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 "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 || "",
),
};
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 };

View File

@ -1,92 +0,0 @@
/*!
* 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",
],
};

View File

@ -1,27 +0,0 @@
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,
},
});