Feature: introduce documentation theme 42bv/fortytwo

.gitignore

@@ -16,3 +16,11 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 .vscode
+
+
+# Jekyll
+*.gem
+.bundle
+.sass-cache
+_site
+Gemfile.lock

README.md

@@ -7,88 +7,10 @@ Show a ProgressBar in React whenever a fetch request is in progress.
 
 You can view a [demo here.]( https://codesandbox.io/embed/g5jmo1Q8Z?view=preview)
 
-# Features
-
-1. Only shows the ProgressBar when requests take more than 150 milliseconds.
-   This way users are not looking at a progress bar needlessly.
-
-2. When the requests finishes it will always show a nice 100% complete animation.
-   This way users will always see the progress bar complete the animation.
-
-3. The ProgressBar can be styled to your liking.
-
 # Installation
 
 `npm install react-fetch-progressbar --save`
 
-# Usage
-
-First you must override `window.fetch` with the `progressbarFetch`
-so the ProgressBar can knows whenever fetch is called:
-
-
-```js
-import { progressBarFetch, setOriginalFetch } from 'react-fetch-progressbar';
-
-// Let react-fetch-progressbar know what the original fetch is.
-setOriginalFetch(window.fetch);
-
-/* 
-  Now override the fetch with progressBarFetch, so the ProgressBar
-  knows how many requests are currently active.
-*/
-window.fetch = progressBarFetch;
-```
-
-Next you simply display the ProgressBar somewhere:
-
-```js
-import { ProgressBar } from 'react-fetch-progressbar';
-
-// Then somewhere in a render method:
-<ProgressBar />
-```
-
-WARNING: only render one ProgressBar at a time, otherwise the two
-progressBars will interfere with each other.
-
-# Styling the ProgressBar
-
-You have a two options, either provide a style object or create
-a CSS rule.
-
-First these are the default styles, which are applied:
-
-```js
-{
-  position: 'absolute',
-  top: '0',
-  zIndex: '9000',
-  backgroundColor: '#f0ad4e',
-  height: '4px',
-}
-```
-
-It is important that you never override the `transition` and the
-`width` property, otherwise the animation will not work.
-
-## Via style
-
-Say you want a different `height` and `backgroundColor` you simply
-override the styles using:
-
-```js
-<ProgressBar style={{ backgroundColor: 'red', height: '10px' }}/>
-```
-
-## Via CSS
-
-The class which is added on the progress bar is called `.react-fetch-progress-bar`
-you can extend that class and override properties like so:
+# Documentation
 
-```css
-.react-fetch-progress-bar {
-  backgroundColor: red !important;
-  height: 10px;
-}
-```
+See the [documentation.](https://42bv.github.io/react-fetch-progressbar/)

docs/_config.yml

@@ -0,0 +1,6 @@
+remote_theme: 42bv/fortytwo
+title: 'react-fetch-progressbar'
+description: 'Progressbar during fetch requests'
+baseurl: /react-fetch-progressbar/
+plugins:
+  - jekyll-remote-theme

docs/index.md

@@ -0,0 +1,22 @@
+---
+layout: default
+title: Introduction
+nav_order: 1
+description: 'Documentation for mad-spring-connect.'
+has_children: true
+permalink: /
+---
+
+[![Build Status](https://travis-ci.org/42BV/react-fetch-progressbar.svg?branch=master)](https://travis-ci.org/42BV/react-fetch-progressbar)
+[![Codecov](https://codecov.io/gh/42BV/react-fetch-progressbar/branch/master/graph/badge.svg)](https://codecov.io/gh/42BV/react-fetch-progressbar)
+
+Show a ProgressBar in React whenever a fetch request is in progress. You can view a [demo here.]( https://codesandbox.io/embed/g5jmo1Q8Z?view=preview)
+
+## Features
+
+1. Only shows the ProgressBar when requests take more than 150 milliseconds.
+   This way users are not looking at a progress bar needlessly.
+2. When the requests finishes it will always show a nice 100% complete animation.
+   This way users will always see the progress bar complete the animation.
+3. The ProgressBar can be styled to your liking.
+

docs/introduction/installation.md

@@ -0,0 +1,20 @@
+---
+layout: default
+title: Installation
+description: 'Installation instructions for react-fetch-progressbar.'
+parent: Introduction
+permalink: /installation
+nav_order: 1
+---
+
+### With npm
+
+```
+npm install react-fetch-progressbar --save
+```
+
+### Or with Yarn
+
+```
+yarn add react-fetch-progressbar
+```

docs/introduction/usage.md

@@ -0,0 +1,83 @@
+---
+layout: default
+title: Usage
+description: 'Usage instructions for react-fetch-progressbar.'
+parent: Introduction
+permalink: /usage
+nav_order: 3
+---
+
+First you must override `window.fetch` with the `progressbarFetch`
+so the ProgressBar can knows whenever fetch is called:
+
+
+```js
+import { progressBarFetch, setOriginalFetch } from 'react-fetch-progressbar';
+
+// Let react-fetch-progressbar know what the original fetch is.
+setOriginalFetch(window.fetch);
+
+/* 
+  Now override the fetch with progressBarFetch, so the ProgressBar
+  knows how many requests are currently active.
+*/
+window.fetch = progressBarFetch;
+```
+
+Next you simply display the ProgressBar somewhere:
+
+```jsx
+import { ProgressBar } from 'react-fetch-progressbar';
+
+// Then somewhere in a render method:
+<ProgressBar />
+```
+
+WARNING: only render one ProgressBar at a time, otherwise the two
+progressBars will interfere with each other.
+
+# Styling the ProgressBar
+
+You have a two options, either provide a style object or create
+a CSS rule.
+
+First these are the default styles, which are applied:
+
+```js
+{
+  position: 'absolute',
+  top: '0',
+  zIndex: '9000',
+  backgroundColor: '#f0ad4e',
+  height: '4px',
+}
+```
+
+It is important that you never override the `transition` and the
+`width` property, otherwise the animation will not work.
+
+## Via style
+
+Say you want a different `height` and `backgroundColor` you simply
+override the styles using:
+
+```jsx
+const style = {
+  backgroundColor: 'red',
+  height: '10px'
+}
+
+<ProgressBar style={style}/>
+```
+
+## Via CSS
+
+The class which is added on the progress bar is called `.react-fetch-progress-bar`
+you can extend that class and override properties like so:
+
+```css
+.react-fetch-progress-bar {
+  backgroundColor: red !important;
+  height: 10px;
+}
+```