From c1609f283e5424d6ab1de9ed47a43e528e5e2f4e Mon Sep 17 00:00:00 2001
From: Troy McConaghy <troy@bigchaindb.com>
Date: Wed, 5 Dec 2018 15:01:07 +0100
Subject: [PATCH] Removed some tutorial stubs & started editing

---
 content/tutorials/get-use-compute-service.md |   3 -
 content/tutorials/get-use-data-set.md        |   3 -
 content/tutorials/introduction.md            |   2 +-
 content/tutorials/publish-compute-service.md |   3 -
 content/tutorials/publish-data-set.md        |  20 --
 content/tutorials/react-get-use-data-set.md  |   3 +-
 content/tutorials/react-publish-data-set.md  | 252 ++++++++++---------
 content/tutorials/react-setup.md             | 177 +++++++------
 data/sidebars/tutorials.yml                  |  18 +-
 src/templates/ApiSwagger.module.scss         |   4 +-
 10 files changed, 239 insertions(+), 246 deletions(-)
 delete mode 100644 content/tutorials/get-use-compute-service.md
 delete mode 100644 content/tutorials/get-use-data-set.md
 delete mode 100644 content/tutorials/publish-compute-service.md
 delete mode 100644 content/tutorials/publish-data-set.md

diff --git a/content/tutorials/get-use-compute-service.md b/content/tutorials/get-use-compute-service.md
deleted file mode 100644
index 58568cb1..00000000
--- a/content/tutorials/get-use-compute-service.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Get & Use a Compute Service
----
diff --git a/content/tutorials/get-use-data-set.md b/content/tutorials/get-use-data-set.md
deleted file mode 100644
index e7b01e29..00000000
--- a/content/tutorials/get-use-data-set.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Get & Use a Data Set
----
diff --git a/content/tutorials/introduction.md b/content/tutorials/introduction.md
index 01effeaa..52b4fc23 100644
--- a/content/tutorials/introduction.md
+++ b/content/tutorials/introduction.md
@@ -3,7 +3,7 @@ title: Overview of the Tutorials
 description: What you can expect to find in these Ocean Protocol tutorials.
 ---
 
-These tutorials give examples of how to use Pleuston (a demo marketplace app) and Python to:
+These tutorials give examples of how to use squid-js (JavaScript) and squid-py (Python) to:
 
 - publish a data set
 - publish a compute service
diff --git a/content/tutorials/publish-compute-service.md b/content/tutorials/publish-compute-service.md
deleted file mode 100644
index 7e3be4bb..00000000
--- a/content/tutorials/publish-compute-service.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Publish a Compute Service
----
diff --git a/content/tutorials/publish-data-set.md b/content/tutorials/publish-data-set.md
deleted file mode 100644
index 61d65e42..00000000
--- a/content/tutorials/publish-data-set.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: Publish a Data Set
----
-
-### Requirements ###
-- Javascript frontend or nodejs app running
-- Installed `@oceanprotocol/squid` and `web3` packages
-- All required services running ([oceanprotocol/docker-images](https://github.com/oceanprotocol/docker-images))
-
-### Publishing ###
-  ```javascript
-    // import package
-    import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
-    // create ocean with configuration
-    const ocean = await new Ocean.getInstance({/* < your configuration > */})
-    // get accounts
-    const accounts = await ocean.getAccounts()
-    // register your asset
-    const ddo = await ocean.registerAsset(/* < your asset > */, accounts[0])
-  ```
\ No newline at end of file
diff --git a/content/tutorials/react-get-use-data-set.md b/content/tutorials/react-get-use-data-set.md
index 9340057d..1fb5c3e7 100644
--- a/content/tutorials/react-get-use-data-set.md
+++ b/content/tutorials/react-get-use-data-set.md
@@ -1,3 +1,4 @@
 ---
-title: React Get & Use a Data Set
+title: Get & Use a Data Set
+description: Tutorial to get and use a data set in a basic React app.
 ---
diff --git a/content/tutorials/react-publish-data-set.md b/content/tutorials/react-publish-data-set.md
index 4f607bbd..0f4cf11a 100644
--- a/content/tutorials/react-publish-data-set.md
+++ b/content/tutorials/react-publish-data-set.md
@@ -1,126 +1,146 @@
 ---
-title: React Publish a Data Set
+title: Publish a Data Set
+description: Tutorial to add data set publishing capabilities to a basic React app.
 ---
 
-### Requirements ###
-  - This is continuation of [React App / Setup](/tutorials/react-setup) so make sure you have all the steps running.
+## Requirements
 
-### Adding Publishing ###
+This is continuation of the [React App Setup](/tutorials/react-setup) tutorial, so make sure you have all the steps running.
 
-  1. Open `src/App.js` in your marketplace dapp from [React App / Setup](/tutorials/react-setup)
-  2. First lets add asset that we want to publish. To do that we need to add the following code after `window.ethereum.enable()` line.
-  ```javascript
-    const asset = {
-      base: {
-        name: "Office Humidity",
-        description: "Weather information of UK including temperature and humidity",
-        dateCreated: "2012-02-01T10:55:11+00:00",
-        author: "Met Office",
-        size: "3.1bg",
-        license: "Public Domain",
-        copyrightHolder: "Met Office",
-        contentUrls: ["https://testocnfiles.blob.core.windows.net/testfiles/testzkp.zip"],
-        contentType: "text/csv",
-        links: [{
-          name: "Dataset sample",
-          type: "sample",
-          url: "http://data.ceda.ac.uk/badc/ukcp09/data/gridded-land-obs/gridded-land-obs-daily/"
-        }],
-        tags: "weather, uk, 2011, temperature, humidity",
-        price: 5,
-        type: "dataset"
-      },
-      curation: {
-        rating: 0,
-        numVotes: 0,
-        schema: 'Binary Voting'
-      },
-      additionalInformation: {
-        updateFrequency: "yearly"
-      }
-    }
-  ```
-  3. Now that we have asset to submit we need function to handle it. Just before `render() {` let's add:
-  ```javascript
-    async submitAsset(){
-      const accounts = await this.ocean.getAccounts()
-      const ddo = await this.ocean.registerAsset(asset, accounts[0])
-      alert("Asset successfully submited:", JSON.stringify(ddo))
-    }
-  ```
-  4. Last thing we need is button to start our registration inside render function just after `<h1>Marketplace dapp</h1>`
-  ```jsx
-    <button onClick={()=>this.submitAsset()}>Register asset</button>
-  ```
+## Adding Publishing
+
+1. Open `src/App.js` in your marketplace dapp from the [React App Setup](/tutorials/react-setup) tutorial.
+2. First lets add asset that we want to publish. To do that we need to add the following code after `window.ethereum.enable()` line.
+
+   ```javascript
+   const asset = {
+     base: {
+       name: 'Office Humidity',
+       description:
+         'Weather information of UK including temperature and humidity',
+       dateCreated: '2012-02-01T10:55:11+00:00',
+       author: 'Met Office',
+       size: '3.1bg',
+       license: 'Public Domain',
+       copyrightHolder: 'Met Office',
+       contentUrls: [
+         'https://testocnfiles.blob.core.windows.net/testfiles/testzkp.zip'
+       ],
+       contentType: 'text/csv',
+       links: [
+         {
+           name: 'Dataset sample',
+           type: 'sample',
+           url:
+             'http://data.ceda.ac.uk/badc/ukcp09/data/gridded-land-obs/gridded-land-obs-daily/'
+         }
+       ],
+       tags: 'weather, uk, 2011, temperature, humidity',
+       price: 5,
+       type: 'dataset'
+     },
+     curation: {
+       rating: 0,
+       numVotes: 0,
+       schema: 'Binary Voting'
+     },
+     additionalInformation: {
+       updateFrequency: 'yearly'
+     }
+   }
+   ```
+
+3. Now that we have asset to submit we need function to handle it. Just before `render() {` let's add:
+
+   ```javascript
+     async submitAsset(){
+       const accounts = await this.ocean.getAccounts()
+       const ddo = await this.ocean.registerAsset(asset, accounts[0])
+       alert("Asset successfully submited:", JSON.stringify(ddo))
+     }
+   ```
+
+4. Last thing we need is button to start our registration inside render function just after `<h1>Marketplace dapp</h1>`
+
+   ```jsx
+   <button onClick={() => this.submitAsset()}>Register asset</button>
+   ```
+
+## Finished
 
-### Finished ###
 That's it, if you have no errors in your `console.log` and you receive alert after you click `Register asset` you have successfully registered an asset.
 
 Here is full source of `src/App.js` that you should have if you followed this tutorial:
-  ```javascript
-    import React, { Component } from 'react';
-    import './App.css';
-    import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
-    import * as Web3 from 'web3'
-    const web3 = new Web3(window.web3.currentProvider)
-    window.ethereum.enable()
-    const asset = {
-      base: {
-        name: "Office Humidity",
-        description: "Weather information of UK including temperature and humidity",
-        dateCreated: "2012-02-01T10:55:11+00:00",
-        author: "Met Office",
-        size: "3.1bg",
-        license: "Public Domain",
-        copyrightHolder: "Met Office",
-        contentUrls: ["https://testocnfiles.blob.core.windows.net/testfiles/testzkp.zip"],
-        contentType: "text/csv",
-        links: [{
-          name: "Dataset sample",
-          type: "sample",
-          url: "http://data.ceda.ac.uk/badc/ukcp09/data/gridded-land-obs/gridded-land-obs-daily/"
-        }],
-        tags: "weather, uk, 2011, temperature, humidity",
-        price: 5,
-        type: "dataset"
-      },
-      curation: {
-        rating: 0,
-        numVotes: 0,
-        schema: 'Binary Voting'
-      },
-      additionalInformation: {
-        updateFrequency: "yearly"
+
+```javascript
+import React, { Component } from 'react'
+import './App.css'
+import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
+import * as Web3 from 'web3'
+const web3 = new Web3(window.web3.currentProvider)
+window.ethereum.enable()
+const asset = {
+  base: {
+    name: 'Office Humidity',
+    description: 'Weather information of UK including temperature and humidity',
+    dateCreated: '2012-02-01T10:55:11+00:00',
+    author: 'Met Office',
+    size: '3.1bg',
+    license: 'Public Domain',
+    copyrightHolder: 'Met Office',
+    contentUrls: [
+      'https://testocnfiles.blob.core.windows.net/testfiles/testzkp.zip'
+    ],
+    contentType: 'text/csv',
+    links: [
+      {
+        name: 'Dataset sample',
+        type: 'sample',
+        url:
+          'http://data.ceda.ac.uk/badc/ukcp09/data/gridded-land-obs/gridded-land-obs-daily/'
       }
-    }
-    class App extends Component {
-      async componentDidMount() {
-        this.ocean = await new Ocean.getInstance({
-          web3Provider: web3,
-          nodeUri: "http://localhost:8545",
-          aquariusUri: "http://localhost:5000",
-          brizoUri: "http://localhost:8030",
-          parityUri: "http://localhost:8545",
-          secretStoreUri: "http://localhost:12001",
-          threshold: 0,
-          password: "secret",
-          address: "0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0",
-        })
-        console.log("Finished loading contracts!")
-      }
-      async submitAsset(){
-        const accounts = await this.ocean.getAccounts()
-        const ddo = await this.ocean.registerAsset(asset, accounts[0])
-        alert("Asset successfully submited:", JSON.stringify(ddo))
-      }
-      render() {
-        return (
-          <div className="App">
-            <h1>Marketplace dapp</h1>
-            <button onClick={()=>this.submitAsset()}>Register asset</button>
-          </div>
-        );
-      }
-    }
-    export default App;
-  ```
+    ],
+    tags: 'weather, uk, 2011, temperature, humidity',
+    price: 5,
+    type: 'dataset'
+  },
+  curation: {
+    rating: 0,
+    numVotes: 0,
+    schema: 'Binary Voting'
+  },
+  additionalInformation: {
+    updateFrequency: 'yearly'
+  }
+}
+class App extends Component {
+  async componentDidMount() {
+    this.ocean = await new Ocean.getInstance({
+      web3Provider: web3,
+      nodeUri: 'http://localhost:8545',
+      aquariusUri: 'http://localhost:5000',
+      brizoUri: 'http://localhost:8030',
+      parityUri: 'http://localhost:8545',
+      secretStoreUri: 'http://localhost:12001',
+      threshold: 0,
+      password: 'secret',
+      address: '0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0'
+    })
+    console.log('Finished loading contracts!')
+  }
+  async submitAsset() {
+    const accounts = await this.ocean.getAccounts()
+    const ddo = await this.ocean.registerAsset(asset, accounts[0])
+    alert('Asset successfully submited:', JSON.stringify(ddo))
+  }
+  render() {
+    return (
+      <div className="App">
+        <h1>Marketplace dapp</h1>
+        <button onClick={() => this.submitAsset()}>Register asset</button>
+      </div>
+    )
+  }
+}
+export default App
+```
diff --git a/content/tutorials/react-setup.md b/content/tutorials/react-setup.md
index 0e3a951e..75fa4bcb 100644
--- a/content/tutorials/react-setup.md
+++ b/content/tutorials/react-setup.md
@@ -1,89 +1,102 @@
 ---
-title: React setup
+title: React App Setup
+description: Tutorial to set up a basic React app that uses squid-js.
 ---
 
-### Requirements ###
-- `nodejs` >= 10 and `npm` >= 5.2 installed.
-- [oceanprotocol/docker-images](https://github.com/oceanprotocol/docker-images) running.
-- Browser with [Metamask](https://metamask.io/) and some ether in your account.
+This tutorial shows how you can build a basic [React](https://reactjs.org/) app that uses the squid-js JavaScript package to publish a data set, get a data set, and more.
 
-### Tutorial Steps ###
-1. Run `npx create-react-app marketplace` in you terminal. This will create folder `marketplace` with boilerplate react app.
+## Requirements
+
+- `nodejs` >= 10 installed. (You can check using `node -v`.)
+- `npm` >= 5.2 installed. (You can check using `npm -v`.)
+- [oceanprotocol/docker-images](https://github.com/oceanprotocol/docker-images) running, but with _Pleuston not running_. (Pleuston is another React app.)
+- A browser with [MetaMask](https://metamask.io/) and some Ether in your account (for the network you're connected to). See [the tutorial about getting Ether and Ocean Tokens for testnets](/tutorials/get-ether-and-ocean-tokens/).
+
+## Tutorial Steps
+
+1. Run `npx create-react-app marketplace` in you terminal. This will create a folder named `marketplace` with a boilerplate React app.
 2. Move to your dapp directory with `cd marketplace` and run `yarn add @oceanprotocol/squid web3`. This adds OceanProtocol and Web3 packages to the dapp.
-3. At this point you can already run `yarn start` which starts dapp in your browser at [localhost:3000](http://localhost:3000).
-4. To clear react spinning icon open `src/App.js` and modify the source to:
-  ```javascript
-    import React, { Component } from 'react';
-    import './App.css';
-    class App extends Component {
-      render() {
-        return (
-          <div className="App">
-            <h1>Marketplace dapp</h1>
-          </div>
-        );
-      }
-    }
-    export default App;
-  ```
-5. Below `import './App.css';` lets import packages we installed, setup web3 and unlock Metamask accounts if locked.
-  ```javascript
-    import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
-    import * as Web3 from 'web3'
-    const web3 = new Web3(window.web3.currentProvider)
-    window.ethereum.enable()
-  ```
-6. After line `class App extends Component {` add following ocean initialization with all configuration. All OceanProtocol operations can be executed from this ocean instance.
-  ```javascript
-    async componentDidMount() {
-      this.ocean = await new Ocean.getInstance({
-        web3Provider: web3,
-        nodeUri: "http://localhost:8545",
-        aquariusUri: "http://localhost:5000",
-        brizoUri: "http://localhost:8030",
-        parityUri: "http://localhost:8545",
-        secretStoreUri: "http://localhost:12001",
-        threshold: 0,
-        password: "secret",
-        address: "0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0",
-      })
-      console.log("Finished loading contracts!")
-    }
-  ```
+3. At this point you can already run `yarn start` which starts the dapp in your browser at [localhost:3000](http://localhost:3000).
+4. To clear the React spinning icon, open `src/App.js` and modify the source to:
 
-### Finished ###
-That's it, if you have no errors in your `console.log` then you have successfully initialized Ocean instance in you breand new react dapp and you are ready for next steps in this tutorial.
+   ```javascript
+   import React, { Component } from 'react'
+   import './App.css'
+   class App extends Component {
+     render() {
+       return (
+         <div className="App">
+           <h1>Marketplace dapp</h1>
+         </div>
+       )
+     }
+   }
+   export default App
+   ```
 
-Here is full source of `src/App.js` that you should have if you followed this tutorial:
-  ```javascript
-    import React, { Component } from 'react';
-    import './App.css';
-    import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
-    import * as Web3 from 'web3'
-    const web3 = new Web3(window.web3.currentProvider)
-    window.ethereum.enable()
-    class App extends Component {
-      async componentDidMount() {
-        this.ocean = await new Ocean.getInstance({
-          web3Provider: web3,
-          nodeUri: "http://localhost:8545",
-          aquariusUri: "http://localhost:5000",
-          brizoUri: "http://localhost:8030",
-          parityUri: "http://localhost:8545",
-          secretStoreUri: "http://localhost:12001",
-          threshold: 0,
-          password: "secret",
-          address: "0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0",
-        })
-        console.log("Finished loading contracts!")
-      }
-      render() {
-        return (
-          <div className="App">
-            <h1>Marketplace dapp</h1>
-          </div>
-        );
-      }
-    }
-    export default App;
-  ```
+5. Below the `import './App.css'` line, let's import the packages we installed, set up web3 and unlock MetaMask accounts (if locked):
+
+   ```javascript
+   import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
+   import * as Web3 from 'web3'
+   const web3 = new Web3(window.web3.currentProvider)
+   window.ethereum.enable()
+   ```
+
+6. After the line `class App extends Component {` add the following Ocean initialization with all configuration. All OceanProtocol operations can be executed from this Ocean instance.
+
+   ```javascript
+     async componentDidMount() {
+       this.ocean = await new Ocean.getInstance({
+         web3Provider: web3,
+         nodeUri: "http://localhost:8545",
+         aquariusUri: "http://localhost:5000",
+         brizoUri: "http://localhost:8030",
+         parityUri: "http://localhost:8545",
+         secretStoreUri: "http://localhost:12001",
+         threshold: 0,
+         password: "secret",
+         address: "0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0",
+       })
+       console.log("Finished loading contracts!")
+     }
+   ```
+
+## Finished
+
+That's it, if you have no errors in your `console.log` then you have successfully initialized an Ocean instance in you brand new React dapp and you are ready for the next steps in this tutorial.
+
+Here is the full source of `src/App.js` that you should have if you followed this tutorial:
+
+```javascript
+import React, { Component } from 'react'
+import './App.css'
+import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
+import * as Web3 from 'web3'
+const web3 = new Web3(window.web3.currentProvider)
+window.ethereum.enable()
+class App extends Component {
+  async componentDidMount() {
+    this.ocean = await new Ocean.getInstance({
+      web3Provider: web3,
+      nodeUri: 'http://localhost:8545',
+      aquariusUri: 'http://localhost:5000',
+      brizoUri: 'http://localhost:8030',
+      parityUri: 'http://localhost:8545',
+      secretStoreUri: 'http://localhost:12001',
+      threshold: 0,
+      password: 'secret',
+      address: '0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0'
+    })
+    console.log('Finished loading contracts!')
+  }
+  render() {
+    return (
+      <div className="App">
+        <h1>Marketplace dapp</h1>
+      </div>
+    )
+  }
+}
+export default App
+```
diff --git a/data/sidebars/tutorials.yml b/data/sidebars/tutorials.yml
index 1e63c4fc..0815ebaa 100644
--- a/data/sidebars/tutorials.yml
+++ b/data/sidebars/tutorials.yml
@@ -7,25 +7,11 @@
     - title: Set Up Azure Storage
       link: /tutorials/azure-for-brizo/
 
-- group: Publish
-  items:
-    - title: Publish a Data Set
-      link: /tutorials/publish-data-set/
-    - title: Publish a Compute Service
-      link: /tutorials/publish-compute-service/
-
-- group: Consume
-  items:
-    - title: Get & Use a Data Set
-      link: /tutorials/get-use-data-set/
-    - title: Get & Use a Compute Service
-      link: /tutorials/get-use-compute-service/
-
-- group: React app
+- group: React App Tutorial
   items:
     - title: Setup
       link: /tutorials/react-setup/
     - title: Publish a Data Set
       link: /tutorials/react-publish-data-set/
     - title: Get & Use a Data Set
-      link: /tutorials/react-get-use-data-set/
\ No newline at end of file
+      link: /tutorials/react-get-use-data-set/
diff --git a/src/templates/ApiSwagger.module.scss b/src/templates/ApiSwagger.module.scss
index 4057c0f2..a029bcc6 100644
--- a/src/templates/ApiSwagger.module.scss
+++ b/src/templates/ApiSwagger.module.scss
@@ -19,7 +19,9 @@
             margin-left: 0;
         }
 
-        &:before { display: none;}
+        &:before {
+            display: none;
+        }
     }
 }