fix(docs): add ShareBlockAside to docs

Author: greglobinski

docs/content/pages/3--share-block-standard/index.md

@@ -16,7 +16,7 @@ It renders one or more share buttons inside a `flex` container with optional hea
 
 ## Usage
 
-Let's create a share block with three items, for Facebook, Twitter and GooglePlus.
+Let's create a share block with five items, for Facebook, Twitter, GooglePlus, Email and Linkedin.
 
 **Step 1.** Import the icons. As usual, we are going to use icons provided by [react-icons](https://github.com/react-icons/react-icons).
 
@@ -59,7 +59,7 @@ const shareBlockProps = {
 };
 ```
 
-**Step 4.** Add `ShareBlock` to your app. Remember to pass all prepared props to the component.
+**Step 4.** Add `ShareBlockStandard` to your app. Remember to pass all prepared props to the component.
 
 ```javascript
 <ShareBlockStandard {...shareBlockProps} />

docs/content/pages/4--share-block-aside/cover.png

@@ -0,0 +1,125 @@
+---
+title: <ShareBlockAside />
+description: ShareBlockAside is a dynamic container with additional buttons floating aside the content.
+cover: cover.png
+---
+
+## Demo
+
+[Live demo](../live-share-block-aside)
+
+## Description
+
+`ShareBlockAside` is a built-in, ready-to-use 'share' block component.
+
+It renders two block of share buttons, one is static placed inside/under the content, the second one is floating aside.
+
+The floating buttons appear only when there is a free space aside.
+
+The components script automatically hide the floating block whenever the static block is visible in the viewport. Set the `pageHeaderSelector` prop to turn on similar behavior for the title of the web page.
+
+## Usage
+
+Let's create a share block using `ShareBlockAside` with buttons for five networks.
+
+**Step 1.** Import the icons. As usual, we are going to use icons provided by [react-icons](https://github.com/react-icons/react-icons).
+
+```javascript
+import FaTwitter from "react-icons/lib/fa/twitter";
+import FaFacebook from "react-icons/lib/fa/facebook";
+import FaGooglePlus from "react-icons/lib/fa/google-plus";
+import FaEnvelope from "react-icons/lib/fa/envelope";
+import FaPinterest from "react-icons/lib/fa/pinterest";
+import FaLinkedin from "react-icons/lib/fa/linkedin";
+```
+
+**Step 2.** Import the `react-custom-share` components: a button and a block. Notice that we will use `ShareButtonRectangle` as a button component to render the items of the block.
+
+```javascript
+import { ShareButtonRectangle, ShareBlockAside } from "react-custom-share";
+```
+
+**Step 3.** Prepare an object with props for the `ShareBlockAside` component. The `url`, `button` and `buttons` are required props.
+
+```javascript
+const shareBlockProps = {
+  url: "https://github.com/greglobinski/react-custom-share",
+  button: ShareButtonRectangle,
+  buttons: [
+    { network: "Twitter", icon: FaTwitter },
+    { network: "Facebook", icon: FaFacebook },
+    { network: "GooglePlus", icon: FaGooglePlus },
+    { network: "Email", icon: FaEnvelope },
+    {
+      network: "Pinterest",
+      icon: FaPinterest,
+      media:
+        "https://raw.githubusercontent.com/greglobinski/react-custom-share/master/static/react-custom-share.gif"
+    }
+  ],
+  text: "Give it a try - react-custom-share component",
+  longtext:
+    "Social sharing buttons for React. Use one of the build-in themes or create a custom one from the scratch.",
+  header: "Share it",
+  pageHeaderSelector: ".header"
+};
+```
+
+Take a look at the new prop `pageHeaderSelector`. It's a distinctive prop of `ShareBlockAside`. If set the floating buttons will be hidden when the page header is visible in the viewport.
+
+**Step 4.** Add `ShareBlockAside` to your app. Remember to pass all prepared props to the component.
+
+```javascript
+<ShareBlockAside {...shareBlockProps} />
+```
+
+**Full code**
+
+```javascript
+import React from "react";
+import ReactDOM from "react-dom";
+import FaTwitter from "react-icons/lib/fa/twitter";
+import FaFacebook from "react-icons/lib/fa/facebook";
+import FaGooglePlus from "react-icons/lib/fa/google-plus";
+import FaEnvelope from "react-icons/lib/fa/envelope";
+import FaPinterest from "react-icons/lib/fa/pinterest";
+import FaLinkedin from "react-icons/lib/fa/linkedin";
+
+import { ShareButton, ShareBlockAside } from "react-custom-share";
+
+const App = props => {
+  const shareBlockProps = {
+    url: "https://github.com/greglobinski/react-custom-share",
+    button: ShareButtonRectangle,
+    buttons: [
+      { network: "Twitter", icon: FaTwitter },
+      { network: "Facebook", icon: FaFacebook },
+      { network: "GooglePlus", icon: FaGooglePlus },
+      { network: "Email", icon: FaEnvelope },
+      {
+        network: "Pinterest",
+        icon: FaPinterest,
+        media:
+          "https://raw.githubusercontent.com/greglobinski/react-custom-share/master/static/react-custom-share.gif"
+      },
+      { network: "Linkedin", icon: FaLinkedin }
+    ],
+    text: "Give it a try - react-custom-share component",
+    longtext:
+      "Social sharing buttons for React. Use one of the build-in themes or create a custom one from the scratch.",
+    header: "Share it",
+    pageHeaderSelector: ".header"
+  };
+
+  return <ShareBlockAside {...shareBlockProps} />;
+};
+
+ReactDOM.render(<App />, document.getElementById("root"));
+```
+
+## ShareBlockStandard's props
+
+* **header** - the inline share block's title | _string_ | optional
+* **debounce**: wait option for the `debounce` method applied to `window.resize` event | number _(milliseconds)_ | optional | default: 250
+* **pageHeaderSelector**: selector for `document.querySelector()` pointing the header of the web page | _string_ | optional
+* other props the same as `ShareBlock`

docs/content/pages/4--share-block-aside/index.md

@@ -25,9 +25,10 @@
     "normalize.css": "^8.0.0",
     "prismjs": "^1.14.0",
     "react-addons-perf": "^15.4.2",
-    "react-custom-share": "^0.3.0",
+    "react-custom-share": "^0.4.4",
     "react-helmet": "^5.2.0",
     "react-icons": "^2.2.7",
+    "react-lorem-component": "^0.13.0",
     "styled-jsx": "^2.2.6",
     "styled-jsx-plugin-postcss": "^0.1.3",
     "styled-jsx-plugin-stylelint": "^0.1.0",