Update index page
Nikita Karamov
parent
9697351a15
commit
a54cb77af1
297
index.html
297
index.html
|
|
@ -1,23 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Lightweight, stylish and ethical share buttons for popular social networks">
|
||||
<meta name="keywords" content="share buttons, sharing, social networks, share via, share on">
|
||||
<meta name="author" content="Nikita Karamov">
|
||||
<html lang="en-GB">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Lightweight, stylish, and ethical share buttons."
|
||||
/>
|
||||
<meta
|
||||
name="keywords"
|
||||
content="share buttons, sharing, social networks, share via, share on"
|
||||
/>
|
||||
<meta name="author" content="Nikita Karamov" />
|
||||
|
||||
<title>shareon – Lightweight, stylish and ethical share buttons</title>
|
||||
<title>Shareon – Lightweight, stylish, and ethical share buttons</title>
|
||||
|
||||
<meta property="og:title" content="shareon">
|
||||
<meta property="og:url" content="https://shareon.js.org">
|
||||
<meta property="og:image" content="https://raw.githubusercontent.com/kytta/shareon/main/assets/banner.png">
|
||||
<meta property="og:description" content="Lightweight, stylish and ethical share buttons for popular social networks">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:creator" content="@KyttaWasHere">
|
||||
<meta property="og:title" content="Shareon" />
|
||||
<meta property="og:url" content="https://shareon.js.org/" />
|
||||
<meta property="og:image" content="https://shareon.js.org/banner.png" />
|
||||
<meta
|
||||
property="o:description"
|
||||
content="Lightweight, stylish, and ethical share buttons"
|
||||
/>
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:creator" content="@KyttaWasHere" />
|
||||
|
||||
<link rel="stylesheet" href="https://igoradamenko.github.io/awsm.css/css/awsm.min.css">
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/awsm.css/dist/awsm.min.css"
|
||||
/>
|
||||
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/shareon@2.0.0-beta.3/dist/shareon.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/shareon@2.0.0-beta.3/dist/shareon.iife.js"
|
||||
defer
|
||||
init
|
||||
></script>
|
||||
|
||||
<!-- fixes for awsm.css -->
|
||||
<style>
|
||||
.shareon > a:hover {
|
||||
color: #fff;
|
||||
|
|
@ -28,28 +51,31 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<link rel="manifest" href="/site.webmanifest">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<link rel="icon" href="/icon.svg" type="image/svg+xml">
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
</head>
|
||||
<body>
|
||||
<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" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<p>
|
||||
<img src="https://raw.githubusercontent.com/NickKaramoff/shareon/main/assets/logo.svg"
|
||||
alt="shareon logo — the Postal Horn emoji"
|
||||
<img
|
||||
src="./icon.svg"
|
||||
alt="Shareon logo — the Postal Horn emoji"
|
||||
width="64"
|
||||
height="64">
|
||||
height="64"
|
||||
/>
|
||||
</p>
|
||||
<h1>shareon</h1>
|
||||
<p>Lightweight, stylish and ethical share buttons</p>
|
||||
<h1>Shareon</h1>
|
||||
<p>Lightweight, stylish, and ethical share buttons</p>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://www.npmjs.com/package/shareon" target="_blank">npm</a>
|
||||
<a href="https://www.npmjs.com/package/shareon">npm</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/kytta/shareon" target="_blank">github</a>
|
||||
<a href="https://codeberg.org/kytta/shareon">source code</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -62,12 +88,13 @@
|
|||
What is it?
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
<code>shareon</code> are share buttons for popular social networks.
|
||||
</p>
|
||||
<p>Shareon are share buttons for popular social networks.</p>
|
||||
|
||||
<div class="shareon" data-title="shareon — lightweight, stylish and ethical share buttons"
|
||||
style="text-align: center">
|
||||
<div
|
||||
class="shareon"
|
||||
data-title="Shareon — lightweight, stylish, and ethical share buttons"
|
||||
style="text-align: center"
|
||||
>
|
||||
<a class="facebook"></a>
|
||||
<a class="linkedin"></a>
|
||||
<a class="mastodon" data-via="@kytta@fosstodon.org"></a>
|
||||
|
|
@ -83,21 +110,25 @@
|
|||
<a class="whatsapp"></a>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Unlike many other share buttons, <code>shareon</code> are:
|
||||
</p>
|
||||
<p>Unlike many other share buttons, Shareon are:</p>
|
||||
|
||||
<ul>
|
||||
<li><b>lightweight</b>, clocking in at only 6 KB gzipped code (JS+CSS)</li>
|
||||
<li><b>stylish</b>, by having no visual features other than official colors and logos</li>
|
||||
<li><b>ethical</b>, since they do not insert any pesky tracking code</li>
|
||||
<li>
|
||||
<b>lightweight</b>, clocking in at only 6 KB gzipped 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 set up links. The
|
||||
speed
|
||||
and easy customization make <code>shareon</code> the perfect choice for your blog, news site or project
|
||||
page!
|
||||
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>
|
||||
|
||||
|
|
@ -106,64 +137,32 @@
|
|||
<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>
|
||||
Include the link to shareon's JS and CSS in your website:
|
||||
Want other options? Check the
|
||||
<a href="https://codeberg.org/kytta/shareon/#install"
|
||||
>extended docs</a
|
||||
>
|
||||
on Codeberg!
|
||||
</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";
|
||||
|
||||
<pre><code><link href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css"
|
||||
rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.js"
|
||||
type="text/javascript"></script></code></pre>
|
||||
|
||||
<p>or install it via NPM and use it in a JS file that you will later bundle:</p>
|
||||
<pre><code>const shareon = require('shareon');</code></pre>
|
||||
<pre><code>import shareon from 'shareon';</code></pre>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>
|
||||
<a id="initialization" href="#initialization" aria-hidden="true"></a>
|
||||
Initialization
|
||||
</h2>
|
||||
<p>
|
||||
By default, shareon will initialize every button after page load.
|
||||
It also exports the <code>shareon</code> function, that will let
|
||||
you repopulate your buttons with updated information (for example,
|
||||
if you changed the page title):
|
||||
</p>
|
||||
|
||||
<pre><code>// shareon auto-initializes
|
||||
|
||||
window.title = "Cool new window title";
|
||||
shareon();</code></pre>
|
||||
|
||||
<p>
|
||||
If you want to postpone the initialization, you can import the
|
||||
<code>noinit</code>-version of the package. You'll need to
|
||||
manually call the <code>shareon</code> function when you want the
|
||||
buttons to be initialized:
|
||||
</p>
|
||||
<pre><code><!-- notice the 'noinit' section of the url for JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/shareon@1/dist/noinit/shareon.min.js"
|
||||
type="text/javascript"></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css"
|
||||
rel="stylesheet">
|
||||
|
||||
<script type="text/javascript">
|
||||
// do something important
|
||||
shareon();
|
||||
</script></code></pre>
|
||||
|
||||
<p>
|
||||
or, if you're using Node:
|
||||
</p>
|
||||
|
||||
<pre><code>const shareon = require('shareon');
|
||||
// or
|
||||
import shareon from 'shareon';
|
||||
|
||||
// do something important
|
||||
shareon();</code></pre>
|
||||
Shareon.init();</code></pre>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
|
|
@ -172,18 +171,10 @@ shareon();</code></pre>
|
|||
Usage
|
||||
</h2>
|
||||
|
||||
<aside>
|
||||
<p>
|
||||
<code>shareon</code> was heavily inspired by
|
||||
<a href="https://ilyabirman.net/projects/likely/">Likely</a>,
|
||||
and has a backwards-compatible API
|
||||
</p>
|
||||
</aside>
|
||||
|
||||
<p>
|
||||
Create a container with class <code>shareon</code> and populate it with elements, whose classes match
|
||||
the
|
||||
names of social networks:
|
||||
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">
|
||||
|
|
@ -195,12 +186,12 @@ shareon();</code></pre>
|
|||
<a class="odnoklassniki"></a>
|
||||
<a class="pinterest"></a>
|
||||
<a class="pocket"></a>
|
||||
<button class="reddit"></button>
|
||||
<button class="telegram"></button>
|
||||
<button class="twitter"></button>
|
||||
<button class="viber"></button>
|
||||
<button class="vkontakte"></button>
|
||||
<button class="whatsapp"></button>
|
||||
<a class="reddit"></a>
|
||||
<a class="telegram"></a>
|
||||
<a class="twitter"></a>
|
||||
<a class="viber"></a>
|
||||
<a class="vkontakte"></a>
|
||||
<a class="whatsapp"></a>
|
||||
</div></code></pre>
|
||||
<div class="shareon">
|
||||
<a class="facebook"></a>
|
||||
|
|
@ -219,74 +210,36 @@ shareon();</code></pre>
|
|||
</div>
|
||||
|
||||
<p>
|
||||
If you use <code><a></code>, the buttons will get a `href`-attribute to them. In other cases they
|
||||
will get a listener on <code>click</code> event, so you can use <code><button></code>s if you
|
||||
wish.
|
||||
You can customize the shared URL and page title with
|
||||
<code>data-</code> attributes:
|
||||
</p>
|
||||
|
||||
<p>
|
||||
By default, the URL and the title of the page will be used in sharing dialogs. To change this, you can
|
||||
use
|
||||
the <code>data-url</code> and <code>data-title</code> attributes. Use them on the whole container or on
|
||||
the specific buttons:
|
||||
</p>
|
||||
|
||||
<pre><code><div class="shareon" data-url="https://example.com">
|
||||
<a class="whatsapp" data-title="Custom WhatsApp title"></a>
|
||||
<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>
|
||||
|
||||
<div class="shareon" data-url="https://example.com">
|
||||
<a class="whatsapp" data-title="Custom WhatsApp title"></a>
|
||||
<a class="twitter" data-title="Custom Twitter title"></a>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Apart from the URL and title, some networks support extra parameters:
|
||||
Read more in the
|
||||
<a href="https://codeberg.org/kytta/shareon/#usage">README</a>
|
||||
on Codeberg!
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>you <strong>have to</strong> add <code>data-fb-app-id</code> to the FB Messenger button to make sharing even possible</li>
|
||||
<li>add <code>data-media</code> to an Odnoklassniki, Pinterest, or VK button to customize the pinned picture</li>
|
||||
<li>add <code>data-text</code> to a WhatsApp, Mastodon, Telegram, or Viber button to add custom message text</li>
|
||||
<li>add <code>data-via</code> to a Twitter or Mastodon button to mention a user</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
Here are all the custom parameters in their glory:
|
||||
</p>
|
||||
|
||||
<pre><code><div class="shareon" data-url="https://example.com/custom-url">
|
||||
<a class="facebook" data-title="Custom Facebook title"></a>
|
||||
<a class="messenger" data-fb-app-id="0123456789012345"></a>
|
||||
<a class="pinterest" data-media="https://picsum.photos/500">Pin</a>
|
||||
<a class="telegram" data-text="Check this out!"></a>
|
||||
<a class="twitter" data-via="MyNickname"></a>
|
||||
<a class="mastodon" data-via="@MyNickname@myserver.social"></a>
|
||||
<a class="whatsapp" data-url="https://my-cool-website.com">Send</a>
|
||||
</div></code></pre>
|
||||
<div class="shareon" data-url="https://example.com/custom-url">
|
||||
<a class="facebook" data-title="Custom Facebook title"></a>
|
||||
<a class="messenger" data-fb-app-id="3619024578167617"></a>
|
||||
<a class="pinterest" data-media="https://picsum.photos/500">Pin</a>
|
||||
<a class="telegram" data-text="Check this out!"></a>
|
||||
<a class="twitter" data-via="MyNickname"></a>
|
||||
<a class="mastodon" data-via="@MyNickname@myserver.social"></a>
|
||||
<a class="whatsapp" data-url="https://my-cool-website.com">Send</a>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>by <a href="https://www.kytta.dev/" target="_blank">Nikita Karamov</a></p>
|
||||
<p>Website built with <a href="https://igoradamenko.github.io/awsm.css/index.html" target="_blank">awsm.css</a>
|
||||
<p>
|
||||
Copyright © 2020–2022
|
||||
<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>
|
||||
|
||||
<!-- These files are autocopied on build and will be present on the website -->
|
||||
<!-- See https://github.com/kytta/shareon/blob/main/.github/workflows/node.yml#L29 -->
|
||||
<link href="shareon.min.css" rel="stylesheet">
|
||||
<script src="shareon.min.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue