Removed some tutorial stubs & started editing

content/tutorials/get-use-compute-service.md

@@ -1,3 +0,0 @@
----
-title: Get & Use a Compute Service
----

content/tutorials/get-use-data-set.md

@@ -1,3 +0,0 @@
----
-title: Get & Use a Data Set
----

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

content/tutorials/publish-compute-service.md

@@ -1,3 +0,0 @@
----
-title: Publish a Compute Service
----

content/tutorials/publish-data-set.md

@@ -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])
-  ```

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.
 ---

content/tutorials/react-publish-data-set.md

@@ -1,34 +1,43 @@
 ---
-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 ###
+## Requirements
-  - This is continuation of [React App / Setup](/tutorials/react-setup) so make sure you have all the steps running.
 
-### 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)
+## 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",
+       name: 'Office Humidity',
-        description: "Weather information of UK including temperature and humidity",
+       description:
-        dateCreated: "2012-02-01T10:55:11+00:00",
+         'Weather information of UK including temperature and humidity',
-        author: "Met Office",
+       dateCreated: '2012-02-01T10:55:11+00:00',
-        size: "3.1bg",
+       author: 'Met Office',
-        license: "Public Domain",
+       size: '3.1bg',
-        copyrightHolder: "Met Office",
+       license: 'Public Domain',
-        contentUrls: ["https://testocnfiles.blob.core.windows.net/testfiles/testzkp.zip"],
+       copyrightHolder: 'Met Office',
-        contentType: "text/csv",
+       contentUrls: [
-        links: [{
+         'https://testocnfiles.blob.core.windows.net/testfiles/testzkp.zip'
-          name: "Dataset sample",
+       ],
-          type: "sample",
+       contentType: 'text/csv',
-          url: "http://data.ceda.ac.uk/badc/ukcp09/data/gridded-land-obs/gridded-land-obs-daily/"
+       links: [
-        }],
+         {
-        tags: "weather, uk, 2011, temperature, humidity",
+           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"
+       type: 'dataset'
      },
      curation: {
        rating: 0,
@@ -36,11 +45,13 @@ title: React Publish a Data Set
        schema: 'Binary Voting'
      },
      additionalInformation: {
-        updateFrequency: "yearly"
+       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()
@@ -48,41 +59,50 @@ title: React Publish a Data Set
        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 React, { Component } from 'react'
-    import './App.css';
+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",
+    name: 'Office Humidity',
-        description: "Weather information of UK including temperature and humidity",
+    description: 'Weather information of UK including temperature and humidity',
-        dateCreated: "2012-02-01T10:55:11+00:00",
+    dateCreated: '2012-02-01T10:55:11+00:00',
-        author: "Met Office",
+    author: 'Met Office',
-        size: "3.1bg",
+    size: '3.1bg',
-        license: "Public Domain",
+    license: 'Public Domain',
-        copyrightHolder: "Met Office",
+    copyrightHolder: 'Met Office',
-        contentUrls: ["https://testocnfiles.blob.core.windows.net/testfiles/testzkp.zip"],
+    contentUrls: [
-        contentType: "text/csv",
+      'https://testocnfiles.blob.core.windows.net/testfiles/testzkp.zip'
-        links: [{
+    ],
-          name: "Dataset sample",
+    contentType: 'text/csv',
-          type: "sample",
+    links: [
-          url: "http://data.ceda.ac.uk/badc/ukcp09/data/gridded-land-obs/gridded-land-obs-daily/"
+      {
-        }],
+        name: 'Dataset sample',
-        tags: "weather, uk, 2011, temperature, humidity",
+        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"
+    type: 'dataset'
   },
   curation: {
     rating: 0,
@@ -90,28 +110,28 @@ Here is full source of `src/App.js` that you should have if you followed this tu
     schema: 'Binary Voting'
   },
   additionalInformation: {
-        updateFrequency: "yearly"
+    updateFrequency: 'yearly'
   }
 }
 class App extends Component {
   async componentDidMount() {
     this.ocean = await new Ocean.getInstance({
       web3Provider: web3,
-          nodeUri: "http://localhost:8545",
+      nodeUri: 'http://localhost:8545',
-          aquariusUri: "http://localhost:5000",
+      aquariusUri: 'http://localhost:5000',
-          brizoUri: "http://localhost:8030",
+      brizoUri: 'http://localhost:8030',
-          parityUri: "http://localhost:8545",
+      parityUri: 'http://localhost:8545',
-          secretStoreUri: "http://localhost:12001",
+      secretStoreUri: 'http://localhost:12001',
       threshold: 0,
-          password: "secret",
+      password: 'secret',
-          address: "0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0",
+      address: '0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0'
     })
-        console.log("Finished loading contracts!")
+    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))
+    alert('Asset successfully submited:', JSON.stringify(ddo))
   }
   render() {
     return (
@@ -119,8 +139,8 @@ Here is full source of `src/App.js` that you should have if you followed this tu
         <h1>Marketplace dapp</h1>
         <button onClick={() => this.submitAsset()}>Register asset</button>
       </div>
-        );
+    )
   }
 }
-    export default App;
+export default App
 ```

content/tutorials/react-setup.md

@@ -1,39 +1,50 @@
 ---
-title: React setup
+title: React App Setup
+description: Tutorial to set up a basic React app that uses squid-js.
 ---
 
-### Requirements ###
+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.
-- `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.
 
-### Tutorial Steps ###
+## Requirements
-1. Run `npx create-react-app marketplace` in you terminal. This will create folder `marketplace` with boilerplate react app.
+
+- `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).
+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 react spinning icon open `src/App.js` and modify the source to:
+4. To clear the React spinning icon, open `src/App.js` and modify the source to:
+
    ```javascript
-    import React, { Component } from 'react';
+   import React, { Component } from 'react'
-    import './App.css';
+   import './App.css'
    class App extends Component {
      render() {
        return (
          <div className="App">
            <h1>Marketplace dapp</h1>
          </div>
-        );
+       )
      }
    }
-    export default App;
+   export default App
    ```
-5. Below `import './App.css';` lets import packages we installed, setup web3 and unlock Metamask accounts if locked.
+
+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 line `class App extends Component {` add following ocean initialization with all configuration. All OceanProtocol operations can be executed from this ocean instance.
+
+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({
@@ -51,13 +62,15 @@ title: React setup
      }
    ```
 
-### Finished ###
+## 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.
+
+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:
 
-Here is full source of `src/App.js` that you should have if you followed this tutorial:
 ```javascript
-    import React, { Component } from 'react';
+import React, { Component } from 'react'
-    import './App.css';
+import './App.css'
 import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
 import * as Web3 from 'web3'
 const web3 = new Web3(window.web3.currentProvider)
@@ -66,24 +79,24 @@ Here is full source of `src/App.js` that you should have if you followed this tu
   async componentDidMount() {
     this.ocean = await new Ocean.getInstance({
       web3Provider: web3,
-          nodeUri: "http://localhost:8545",
+      nodeUri: 'http://localhost:8545',
-          aquariusUri: "http://localhost:5000",
+      aquariusUri: 'http://localhost:5000',
-          brizoUri: "http://localhost:8030",
+      brizoUri: 'http://localhost:8030',
-          parityUri: "http://localhost:8545",
+      parityUri: 'http://localhost:8545',
-          secretStoreUri: "http://localhost:12001",
+      secretStoreUri: 'http://localhost:12001',
       threshold: 0,
-          password: "secret",
+      password: 'secret',
-          address: "0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0",
+      address: '0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0'
     })
-        console.log("Finished loading contracts!")
+    console.log('Finished loading contracts!')
   }
   render() {
     return (
       <div className="App">
         <h1>Marketplace dapp</h1>
       </div>
-        );
+    )
   }
 }
-    export default App;
+export default App
 ```

data/sidebars/tutorials.yml

@@ -7,21 +7,7 @@
     - title: Set Up Azure Storage
       link: /tutorials/azure-for-brizo/
 
-- group: Publish
+- group: React App Tutorial
-  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
   items:
     - title: Setup
       link: /tutorials/react-setup/

src/templates/ApiSwagger.module.scss

@@ -19,7 +19,9 @@
             margin-left: 0;
         }
 
-        &:before { display: none;}
+        &:before {
+            display: none;
+        }
     }
 }