Update docs

pull/14/head
Nikita Karamov 2020-07-26 14:40:37 +02:00
parent 14558ac201
commit bece4cdcf2
No known key found for this signature in database
GPG Key ID: E40DFE6E993540FF
2 changed files with 97 additions and 10 deletions

View File

@ -18,8 +18,8 @@ Observe the live demo here: [shareon.js.org](https://shareon.js.org)
Include the link to shareon's JS and CSS in your website: Include the link to shareon's JS and CSS in your website:
```html ```html
<link href="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.js" type="text/javascript"></script> <script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js" type="text/javascript"></script>
``` ```
or install it via NPM use it in a JS file that you will bundle: or install it via NPM use it in a JS file that you will bundle:
@ -31,7 +31,48 @@ yarn add shareon
``` ```
```js ```js
require('shareon'); const shareon = require('shareon');
// or
import shareon from 'shareon';
```
## Initialization
By default, shareon will initialize every button after page load. It also
exports the `shareon` function, that will let you repopulate your buttons with
updated information (for example, if you changed the page title):
```js
// shareon auto-initializes
window.title = "Cool new window title";
shareon();
```
If you want to postpone the initialization, you can import the `noinit`-version
of the package. You'll need to manually call the `shareon` function when you
want the buttons to be initialized:
```html
<!-- notice the 'noinit' section of the url for JS -->
<link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/noinit/shareon.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js" type="text/javascript"></script>
<script type="text/javascript">
// do something important
shareon();
</script>
```
or, if you're using Node:
```js
const shareon = require('shareon/dist/noinit/shareon');
// or
import shareon from 'shareon/dist/noinit/shareon';
// do something important
shareon();
``` ```
## Usage ## Usage

View File

@ -103,14 +103,60 @@
Include the link to shareon's JS and CSS in your website: Include the link to shareon's JS and CSS in your website:
</p> </p>
<pre><code>&lt;link href="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.css" <pre><code>&lt;link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.css"
rel="stylesheet"&gt; rel="stylesheet"&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.js" &lt;script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js"
type="text/javascript"&gt;&lt;/script&gt;</code></pre> type="text/javascript"&gt;&lt;/script&gt;</code></pre>
<p>or install it via NPM use it in a JS file that you will later bundle:</p> <p>or install it via NPM and use it in a JS file that you will later bundle:</p>
<pre><code>require('shareon');</code></pre> <pre><code>const shareon = require('shareon');</code></pre>
<pre><code>import 'shareon';</code></pre> <pre><code>import shareon from 'shareon';</code></pre>
</article>
<article>
<h2>
<a id="initialization" href="#initialization" aria-hidden="true"></a>
Initialization
</h2>
<p>
By default, shareon will initialize every button after page load.
It also exports the <code>shareon</code> function, that will let
you repopulate your buttons with updated information (for example,
if you changed the page title):
</p>
<pre><code>// shareon auto-initializes
window.title = "Cool new window title";
shareon();</code></pre>
<p>
If you want to postpone the initialization, you can import the
<code>noinit</code>-version of the package. You'll need to
manually call the <code>shareon</code> function when you want the
buttons to be initialized:
</p>
<pre><code>&lt;!-- notice the 'noinit' section of the url for JS --&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js"
type="text/javascript"&gt;&lt;/script&gt;
&lt;link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.css"
rel="stylesheet"&gt;
&lt;script type="text/javascript"&gt;
// do something important
shareon();
&lt;/script&gt;</code></pre>
<p>
or, if you're using Node:
</p>
<pre><code>const shareon = require('shareon');
// or
import shareon from 'shareon';
// do something important
shareon();</code></pre>
</article> </article>
<article> <article>
@ -225,7 +271,7 @@
</p> </p>
</footer> </footer>
<link href="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.js" type="text/javascript"></script> <script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js" type="text/javascript"></script>
</body> </body>
</html> </html>