Compare commits
No commits in common. "main" and "pages" have entirely different histories.
|
@ -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
|
|
@ -1 +0,0 @@
|
|||
./.gitignore
|
|
@ -1 +0,0 @@
|
|||
d95105353f659f1dfc16aa00e97dde9a18406be4
|
|
@ -1,3 +0,0 @@
|
|||
github: kytta
|
||||
liberapay: kytta
|
||||
custom: paypal.me/NickKaramoff
|
|
@ -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,5 +3,4 @@ dist/
|
|||
.idea/
|
||||
node_modules/
|
||||
.vscode/
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
pnpm-lock.yaml
|
||||
|
|
|
@ -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"
|
|
@ -1,2 +0,0 @@
|
|||
dist/
|
||||
pnpm-lock.yaml
|
361
CHANGELOG.md
|
@ -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
|
117
CONTRIBUTING.md
|
@ -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
|
@ -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
|
@ -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 © 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>
|
After Width: | Height: | Size: 5.9 KiB |
Before Width: | Height: | Size: 24 KiB |
Before Width: | Height: | Size: 7.1 KiB |
After Width: | Height: | Size: 43 KiB |
After Width: | Height: | Size: 5.3 KiB |
|
@ -0,0 +1 @@
|
|||
google-site-verification: google1b3b138126470b07.html
|
After Width: | Height: | Size: 9.0 KiB |
After Width: | Height: | Size: 45 KiB |
After Width: | Height: | Size: 8.1 KiB |
|
@ -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="They’re 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="They’re 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="They’re 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><a></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><button></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><a></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><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></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><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="twitter"></a>
|
||||
<a class="viber"></a>
|
||||
<a class="vkontakte"></a>
|
||||
<a class="whatsapp"></a>
|
||||
<a class="copy-url"></a>
|
||||
</div></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><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></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 © 2020–2023
|
||||
<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>
|
||||
|
|
133
package.json
|
@ -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"
|
||||
]
|
||||
}
|
||||
}
|
1780
pnpm-lock.yaml
|
@ -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" }
|
||||
]
|
||||
}
|
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -1,8 +0,0 @@
|
|||
import { init } from "./shareon";
|
||||
|
||||
const s = document.currentScript;
|
||||
if (s && s.hasAttribute("init")) {
|
||||
init();
|
||||
}
|
||||
|
||||
export { init } from "./shareon";
|
194
src/shareon.css
|
@ -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");
|
||||
}
|
140
src/shareon.js
|
@ -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 };
|
|
@ -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",
|
||||
],
|
||||
};
|
|
@ -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,
|
||||
},
|
||||
});
|