update docs site

estevanmaito · Feb 5, 2020 · 5ea2a9f · 5ea2a9f
1 parent cc198bf
commit 5ea2a9f
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 36 deletions.
diff --git a/docs/browsers/ie.png b/docs/browsers/ie.png
diff --git a/docs/complete.png b/docs/complete.png
diff --git a/docs/index.html b/docs/index.html
@@ -1,34 +1,39 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta charset="UTF-8">
-  
+
   <!-- SEO -->
   <title>Sharect.js - Share selection text</title>
-  <meta name="description" content="A lightweight JavaScript lib to let users share their text selections to social networks, in desktop browsers.">
+  <meta name="description"
+    content="A lightweight JavaScript lib to let users share their text selections to social networks, in desktop browsers.">
   <link rel="canonical" href="https://estevanmaito.github.io/sharect/">
   <meta name="author" content="Estevan Maito">
   <meta name="robots" content="index">
 
   <!-- Google+ / Schema.org -->
   <meta itemprop="name" content="Sharect.js - Share selection text">
-  <meta itemprop="description" content="A lightweight JavaScript lib to let users share their text selections to social networks, in desktop browsers.">
+  <meta itemprop="description"
+    content="A lightweight JavaScript lib to let users share their text selections to social networks, in desktop browsers.">
   <meta itemprop="image" content="https://estevanmaito.github.io/sharect/share.png">
   <link href="https://plus.google.com/+estevanmaito" rel="publisher">
-  
+
   <!-- Open Graph Facebook -->
   <meta property="og:title" content="Sharect.js - Share selection text">
-  <meta property="og:description" content="A lightweight JavaScript lib to let users share their text selections to social networks, in desktop browsers.">
+  <meta property="og:description"
+    content="A lightweight JavaScript lib to let users share their text selections to social networks, in desktop browsers.">
   <meta property="og:url" content="https://estevanmaito.github.io/sharect/">
   <meta property="og:site_name" content="Sharect.js">
   <meta property="og:type" content="website">
   <meta property="og:image" content="https://estevanmaito.github.io/sharect/share.png">
-  <meta property="fb:app_id" content="1811139599209031"> 
+  <meta property="fb:app_id" content="1811139599209031">
 
   <!-- Twitter -->
   <meta name="twitter:title" content="Sharect.js - Share selection text">
-  <meta name="twitter:description" content="A lightweight JavaScript lib to let users share their text selections to social networks, in desktop browsers.">
+  <meta name="twitter:description"
+    content="A lightweight JavaScript lib to let users share their text selections to social networks, in desktop browsers.">
   <meta name="twitter:url" content="https://estevanmaito.github.io/sharect/">
   <meta name="twitter:card" content="summary">
   <meta name="twitter:image" content="https://estevanmaito.github.io/sharect/share.png">
@@ -42,31 +47,36 @@
   <!-- Favicon -->
   <link rel="icon" type="image/png" href="favicon.png">
 </head>
+
 <body>
-  
+
   <div class="container">
 
     <nav>
       <ul class="nav">
-        <li class="nav__link"><a href="https://github.com/estevanmaito/sharect#docs">Documentation</a></li>
-        <li class="nav__link"><a href="https://github.com/estevanmaito/sharect/releases/download/v1.1.0/sharect.min.js">Download</a></li>
+        <li class="nav__link"><a href="https://github.com/estevanmaito/sharect/blob/master/README.md">Documentation</a>
+        </li>
+        <li class="nav__link"><a
+            href="https://github.com/estevanmaito/sharect/releases/download/v2.0.0/sharect.js">Download</a></li>
         <li class="nav__link"><a href="https://github.com/estevanmaito/sharect">Github</a></li>
       </ul>
     </nav>
 
     <header class="header">
       <img src="logo.svg" alt="Sharect" width="360px" class="header__logo">
       <h4>Share selection text</h4>
-      <p class="header__intro text-center"><span class="animate-selection">A <strong>lightweight</strong> (4Kb minified, 1.7Kb gzipped) JavaScript library to let users share their text selections to social networks, in desktop browsers. (Yes, like Medium)</span></p>
+      <p class="header__intro text-center"><span class="animate-selection">A <strong>lightweight</strong> (8Kb minified,
+          2.9Kb gzipped) JavaScript library to let users share their text selections to social networks, in desktop
+          browsers. (Yes, like Medium)</span></p>
       <!-- <p>TRY SELECTING ANY TEXT</p> -->
     </header>
 
     <section class="row section">
       <article class="grid-1-4 text-center">
-        <p>Lightweight, 1.7Kb gzipped.</p>
+        <p>Lightweight, 2.9Kb gzipped.</p>
       </article>
       <article class="grid-1-4 text-center">
-        <p>Start using with 3 lines of code.</p>
+        <p>Start using with 2 lines of code.</p>
       </article>
       <article class="grid-1-4 text-center">
         <p>No dependencies at all.</p>
@@ -83,38 +93,35 @@ <h2>Usage</h2>
         <h3>Default</h3>
         <div class="row">
           <section class="grid-1-2">
-            <script src="https://gist.github.com/estevanmaito/947d42096ca9afa5384ab77bbe358db7.js"></script>
+            <script src="https://gist.github.com/estevanmaito/5c442995cc84b70f0b72d6df2ca29b2a.js"></script>
           </section>
           <section class="grid-1-2">
-            <img src="default.png" alt="Share selection text to Twitter is the default option." class="img-responsive">
+            <img src="simple.png" alt="Share selection text to Twitter is the default option." class="img-responsive">
           </section>
         </div>
       </article>
       <article>
         <h3>Complete</h3>
         <div class="row">
           <section class="grid-1-2">
-            <script src="https://gist.github.com/estevanmaito/ee5fe496f59a115b671949cb32a393e1.js"></script>
+            <script src="https://gist.github.com/estevanmaito/891900e8b883309ccd2f3abe85d60fbf.js"></script>
           </section>
           <section class="grid-1-2">
-            <img src="custom.png" alt="The complete API offers full customization and share to Twitter and Facebook." class="img-responsive">
+            <img src="simple-pink.png"
+              alt="The complete API offers full customization and share to Twitter and Facebook."
+              class="img-responsive">
           </section>
         </div>
-        <p>The above example assumes you already have started Facebook's JavaScript SDK. <a href="https://github.com/estevanmaito/sharect#facebook-share">Read more in the docs</a>.</p>
       </article>
     </section>
 
     <section class="section">
-      <h2>Installation</h2>
+      <h2>Documentation</h2>
 
       <article>
-        <h3>NPM</h3>
-        <pre><code>npm install sharect</code></pre>
-      </article>
-
-      <article>
-        <h3>Script</h3>
-        <p><a href="https://github.com/estevanmaito/sharect/releases/download/v1.1.0/sharect.min.js">Download</a> and reference the minified JavaScript file in your HTML like the default example above.</p>
+        <p>Read the <a href="https://github.com/estevanmaito/sharect#table-of-contents"
+            target="_blank">documentation</a> and
+          find the best installation for your use case, alongside with configuration and extension options.</p>
       </article>
     </section>
 
@@ -124,25 +131,26 @@ <h3>Script</h3>
 
   </div>
 
-  <script src="sharect.min.js"></script>
+  <script src="sharect.js"></script>
   <script>
-    var sharect = new Sharect();
-    sharect.config({
+    Sharect.config({
       twitterUsername: 'estevanmaito',
       backgroundColor: '#9bab2f',
       iconColor: '#fff'
-    })
-    .init();
+    }).init();
   </script>
   <script>
-    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+    (function (i, s, o, g, r, a, m) {
+      i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
+        (i[r].q = i[r].q || []).push(arguments)
+      }, i[r].l = 1 * new Date(); a = s.createElement(o),
+        m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
+    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
 
     ga('create', 'UA-96097906-1', 'auto');
     ga('send', 'pageview');
 
   </script>
 </body>
+
 </html>
diff --git a/docs/sharect.js b/docs/sharect.js