Merge pull request #757 from oceanprotocol/issue-545-search-docs

Add search feature in docs

content/tutorials/marketplace-consume-data-asset.md

@@ -1,3 +1,8 @@
+---
+title: Consume data asset
+description: 
+---
+
 1. Go to Ocean Marketplace https://market.oceanprotocol.com/
 2. Search for the data asset.
    The Ocean Marketplace provides features to search the Data/Algorithms by text, and users can also sort the result by published date.

content/tutorials/marketplace-introduction.md

@@ -1,4 +1,7 @@
-# Ocean Market
+---
+title: Ocean Market
+description: 
+---
 
 https://market.oceanprotocol.com/
 

content/tutorials/marketplace-publish-data-asset.md

@@ -1,4 +1,7 @@
-# Publish a Data asset on Ocean Market place.
+---
+title: Publish a Data asset on Ocean Market place.
+description: 
+---
 
 ## What can be published?
 

content/tutorials/marketplace-swap-and-stake.md

@@ -1,4 +1,7 @@
-# Swap and/or Stake Tokens
+---
+title: Swap and/or Stake Tokens
+description: 
+---
 
 ## Swap Ocean Tokens against Datatokens
 

gatsby-config.js

@@ -170,6 +170,7 @@ module.exports = {
         path: `${__dirname}/markdowns/markdowns`,
         name: 'markdowns'
       }
-    }
+    },
+    `gatsby-transformer-remark-plaintext`
   ]
 }

gatsby-node.js

@@ -132,7 +132,6 @@ exports.createPages = ({ graphql, actions }) => {
         await createSwaggerPages(createPage)
 
         await createDeploymentsPage(createPage)
-
         // API: ocean.js
         const lastRelease =
           result.data.oceanJs.repository.releases.edges.filter(
@@ -172,6 +171,12 @@ exports.createPages = ({ graphql, actions }) => {
         await createReadTheDocsPage(createPage, 'provider', providerList)
         await createReadTheDocsPage(createPage, 'ocean-subgraph', subgraphList)
 
+        // Create search page
+        createPage({
+          path: `/search/`,
+          component: path.resolve('./src/components/Search/SearchComponent.jsx')
+        })
+
         resolve()
       })
     )
@@ -187,6 +192,7 @@ const createDeploymentsPage = async (createPage) => {
     component: template
   })
 }
+
 //
 // Create pages from TypeDoc json files
 //

package-lock.json

@@ -3142,6 +3142,11 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
     "@endemolshinegroup/cosmiconfig-typescript-loader": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@endemolshinegroup/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-3.0.2.tgz",
@@ -4132,6 +4137,108 @@
         "unist-util-visit": "^1.3.0"
       }
     },
+    "@material-ui/core": {
+      "version": "4.12.3",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.3.tgz",
+      "integrity": "sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/styles": "^4.11.4",
+        "@material-ui/system": "^4.12.1",
+        "@material-ui/types": "5.1.0",
+        "@material-ui/utils": "^4.11.2",
+        "@types/react-transition-group": "^4.2.0",
+        "clsx": "^1.0.4",
+        "hoist-non-react-statics": "^3.3.2",
+        "popper.js": "1.16.1-lts",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0",
+        "react-transition-group": "^4.4.0"
+      }
+    },
+    "@material-ui/icons": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz",
+      "integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.4"
+      }
+    },
+    "@material-ui/lab": {
+      "version": "4.0.0-alpha.60",
+      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz",
+      "integrity": "sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.11.2",
+        "clsx": "^1.0.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0"
+      }
+    },
+    "@material-ui/styles": {
+      "version": "4.11.4",
+      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz",
+      "integrity": "sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/hash": "^0.8.0",
+        "@material-ui/types": "5.1.0",
+        "@material-ui/utils": "^4.11.2",
+        "clsx": "^1.0.4",
+        "csstype": "^2.5.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "jss": "^10.5.1",
+        "jss-plugin-camel-case": "^10.5.1",
+        "jss-plugin-default-unit": "^10.5.1",
+        "jss-plugin-global": "^10.5.1",
+        "jss-plugin-nested": "^10.5.1",
+        "jss-plugin-props-sort": "^10.5.1",
+        "jss-plugin-rule-value-function": "^10.5.1",
+        "jss-plugin-vendor-prefixer": "^10.5.1",
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "2.6.17",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz",
+          "integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A=="
+        }
+      }
+    },
+    "@material-ui/system": {
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.1.tgz",
+      "integrity": "sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.11.2",
+        "csstype": "^2.5.2",
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "2.6.17",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz",
+          "integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A=="
+        }
+      }
+    },
+    "@material-ui/types": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
+      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
+    },
+    "@material-ui/utils": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz",
+      "integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0"
+      }
+    },
     "@mdx-js/util": {
       "version": "2.0.0-next.8",
       "resolved": "https://registry.npmjs.org/@mdx-js/util/-/util-2.0.0-next.8.tgz",
@@ -4731,6 +4838,14 @@
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-KibDWL6nshuOJ0fu8ll7QnV/LVTo3PzQ9aCPnRUYPfX7eZohHwLIdNHj7pftanREzHNP4/nJa8oeM73uSiavMQ==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/readable-stream": {
       "version": "2.3.9",
       "resolved": "https://registry.npmjs.org/@types/readable-stream/-/readable-stream-2.3.9.tgz",
@@ -5798,11 +5913,18 @@
       "integrity": "sha512-1uIESzroqpaTzt9uX48HO+6gfnKu3RwvWdCcWSrX4csMInJfCo1yvKPNXCwXFRpJqRW25tiASb6No0YH57PXqg=="
     },
     "axios": {
-      "version": "0.21.1",
+      "version": "0.21.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
-      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
       "requires": {
-        "follow-redirects": "^1.10.0"
+        "follow-redirects": "^1.14.0"
+      },
+      "dependencies": {
+        "follow-redirects": {
+          "version": "1.14.3",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.3.tgz",
+          "integrity": "sha512-3MkHxknWMUtb23apkgz/83fDoe+y+qr0TdgacGIA7bew+QLBo3vdgEN2xEsuXNivpFy4CyDhBBZnNZOtalmenw=="
+        }
       }
     },
     "axobject-query": {
@@ -7444,6 +7566,11 @@
         "mimic-response": "^1.0.0"
       }
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "coa": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
@@ -8194,6 +8321,15 @@
         }
       }
     },
+    "css-vendor": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
+      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.3",
+        "is-in-browser": "^1.0.2"
+      }
+    },
     "css-what": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz",
@@ -8935,6 +9071,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -14278,6 +14423,15 @@
         }
       }
     },
+    "gatsby-transformer-remark-plaintext": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/gatsby-transformer-remark-plaintext/-/gatsby-transformer-remark-plaintext-1.0.3.tgz",
+      "integrity": "sha512-V6nU03WKW65Xy5DyQPeVSMf5KVNoXX2yHbq53H0u1a/MkakG3osNTDWiTDxVQ8kg9OZ/04Dblczg9QxRnLjrYA==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "strip-markdown": "^3.0.2"
+      }
+    },
     "gatsby-transformer-sharp": {
       "version": "2.12.1",
       "resolved": "https://registry.npmjs.org/gatsby-transformer-sharp/-/gatsby-transformer-sharp-2.12.1.tgz",
@@ -15624,6 +15778,11 @@
       "integrity": "sha512-8yKEWNX4z2YsofXAMT7KvA1g8p+GxtB1ffV8XtpAEGuXNAbCV5wdNKH+qTpw8SM9fh4aMPDR+yQuKfgnreyZlg==",
       "dev": true
     },
+    "hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -16268,6 +16427,11 @@
       "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
       "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw=="
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    },
     "is-installed-globally": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
@@ -16727,6 +16891,11 @@
       "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
       "dev": true
     },
+    "js-search": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/js-search/-/js-search-2.0.0.tgz",
+      "integrity": "sha512-lJ8KzjlwcelIWuAdKyzsXv45W6OIwRpayzc7XmU8mzgWadg5UVOKVmnq/tXudddEB9Ceic3tVaGu6QOK/eebhg=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -16832,6 +17001,84 @@
         "verror": "1.10.0"
       }
     },
+    "jss": {
+      "version": "10.7.1",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.7.1.tgz",
+      "integrity": "sha512-5QN8JSVZR6cxpZNeGfzIjqPEP+ZJwJJfZbXmeABNdxiExyO+eJJDy6WDtqTf8SDKnbL5kZllEpAP71E/Lt7PXg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^3.0.2",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-camel-case": {
+      "version": "10.7.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.7.1.tgz",
+      "integrity": "sha512-+ioIyWvmAfgDCWXsQcW1NMnLBvRinOVFkSYJUgewQ6TynOcSj5F1bSU23B7z0p1iqK0PPHIU62xY1iNJD33WGA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "10.7.1"
+      }
+    },
+    "jss-plugin-default-unit": {
+      "version": "10.7.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.7.1.tgz",
+      "integrity": "sha512-tW+dfYVNARBQb/ONzBwd8uyImigyzMiAEDai+AbH5rcHg5h3TtqhAkxx06iuZiT/dZUiFdSKlbe3q9jZGAPIwA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.7.1"
+      }
+    },
+    "jss-plugin-global": {
+      "version": "10.7.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.7.1.tgz",
+      "integrity": "sha512-FbxCnu44IkK/bw8X3CwZKmcAnJqjAb9LujlAc/aP0bMSdVa3/MugKQRyeQSu00uGL44feJJDoeXXiHOakBr/Zw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.7.1"
+      }
+    },
+    "jss-plugin-nested": {
+      "version": "10.7.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.7.1.tgz",
+      "integrity": "sha512-RNbICk7FlYKaJyv9tkMl7s6FFfeLA3ubNIFKvPqaWtADK0KUaPsPXVYBkAu4x1ItgsWx67xvReMrkcKA0jSXfA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.7.1",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-props-sort": {
+      "version": "10.7.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.7.1.tgz",
+      "integrity": "sha512-eyd5FhA+J0QrpqXxO7YNF/HMSXXl4pB0EmUdY4vSJI4QG22F59vQ6AHtP6fSwhmBdQ98Qd9gjfO+RMxcE39P1A==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.7.1"
+      }
+    },
+    "jss-plugin-rule-value-function": {
+      "version": "10.7.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.7.1.tgz",
+      "integrity": "sha512-fGAAImlbaHD3fXAHI3ooX6aRESOl5iBt3LjpVjxs9II5u9tzam7pqFUmgTcrip9VpRqYHn8J3gA7kCtm8xKwHg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.7.1",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-vendor-prefixer": {
+      "version": "10.7.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.7.1.tgz",
+      "integrity": "sha512-1UHFmBn7hZNsHXTkLLOL8abRl8vi+D1EVzWD4WmLFj55vawHZfnH1oEz6TUf5Y61XHv0smdHabdXds6BgOXe3A==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "css-vendor": "^2.0.8",
+        "jss": "10.7.1"
+      }
+    },
     "jsx-ast-utils": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz",
@@ -19836,6 +20083,11 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "popper.js": {
+      "version": "1.16.1-lts",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
+      "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -21271,6 +21523,17 @@
       "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.0.tgz",
       "integrity": "sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg=="
     },
+    "react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
@@ -23708,6 +23971,11 @@
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.0.tgz",
       "integrity": "sha512-e6/d0eBu7gHtdCqFt0xJr642LdToM5/cN4Qb9DbHjVx1CP5RyeM+zH7pbecEmDv/lBqb0QH+6Uqq75rxFPkM0w=="
     },
+    "strip-markdown": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/strip-markdown/-/strip-markdown-3.1.2.tgz",
+      "integrity": "sha512-NjwW6CEefesmHQPs7lof/lgnSriqUnRNOWpnrNPq9A7/yOCdnhaB7DcxlhYuN7WiiRUe349aitAsTQ/ajM9Dmw=="
+    },
     "strip-outer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
@@ -24225,6 +24493,11 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "tinycolor2": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",

package.json

@@ -16,8 +16,11 @@
     "test": "npm run lint"
   },
   "dependencies": {
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.60",
     "@oceanprotocol/art": "^3.2.0",
-    "axios": "^0.21.1",
+    "axios": "^0.21.4",
     "classnames": "^2.3.1",
     "gatsby": "^2.32.13",
     "gatsby-image": "^3.11.0",
@@ -43,11 +46,13 @@
     "gatsby-source-git": "^1.1.0",
     "gatsby-source-graphql": "^2.14.0",
     "gatsby-transformer-remark": "^2.16.1",
+    "gatsby-transformer-remark-plaintext": "^1.0.3",
     "gatsby-transformer-sharp": "^2.12.1",
     "gatsby-transformer-xml": "^2.10.0",
     "gatsby-transformer-yaml": "^2.11.0",
     "giphy-js-sdk-core": "^1.0.6",
     "intersection-observer": "^0.12.0",
+    "js-search": "^2.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",

src/components/Header.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { Link, StaticQuery, graphql } from 'gatsby'
 import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
 import styles from './Header.module.scss'
+import SearchButton from './Search/SearchButton'
 
 const query = graphql`
   query {
@@ -37,7 +38,6 @@ const Header = () => (
               <Logo className={styles.headerLogoImage} />
               <h1 className={styles.headerTitle}>{siteTitle}</h1>
             </Link>
-
             <nav className={styles.headerMenu}>
               {sections.map(({ node }) => (
                 <Link
@@ -48,6 +48,7 @@ const Header = () => (
                   {node.title}
                 </Link>
               ))}
+              <SearchButton />
             </nav>
           </div>
         </header>

src/components/HeaderHome.jsx

@@ -3,6 +3,7 @@ import { StaticQuery, graphql } from 'gatsby'
 import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
 import Content from '../components/Content'
 import styles from './HeaderHome.module.scss'
+import SearchButton from '../components/Search/SearchButton'
 
 const HeaderHome = () => (
   <StaticQuery
@@ -24,7 +25,14 @@ const HeaderHome = () => (
           <Content>
             <Logo className={styles.headerLogo} />
             <h1 className={styles.headerTitle}>{siteTitle}</h1>
-            <p className={styles.headerDescription}>{siteDescription}</p>
+            <p className={styles.headerDescription}>
+              <div style={{ display: 'flex', flexDirection: 'column' }}>
+                {siteDescription}
+                <div>
+                  <SearchButton />
+                </div>
+              </div>
+            </p>
           </Content>
         </header>
       )

src/components/Search/SearchButton.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { navigate } from 'gatsby'
+
+import { IconButton } from '@material-ui/core'
+import SearchIcon from '@material-ui/icons/Search'
+const SearchButton = () => {
+  return (
+    <IconButton onClick={() => navigate('/search')}>
+      <SearchIcon />
+    </IconButton>
+  )
+}
+export default SearchButton

src/components/Search/SearchClient.jsx

@@ -0,0 +1,153 @@
+import React, { useState, useEffect } from 'react'
+import * as JsSearch from 'js-search'
+import PropTypes from 'prop-types'
+import { makeStyles } from '@material-ui/core/styles'
+import List from '@material-ui/core/List'
+import ListItem from '@material-ui/core/ListItem'
+import TextField from '@material-ui/core/TextField'
+import InputAdornment from '@material-ui/core/InputAdornment'
+import SearchIcon from '@material-ui/icons/Search'
+import SearchResultElement from './SearchResultElement'
+
+const useStyles = makeStyles((theme) => ({
+  parent: {
+    overflow: 'hidden',
+    position: 'relative',
+    width: '100%'
+  },
+  child: {
+    background: 'green',
+    height: '100%',
+    width: '50%',
+    position: 'absolute',
+    right: 0,
+    top: 0
+  },
+  root: {
+    margin: 'auto',
+    width: '50%'
+  }
+}))
+
+const SearchClient = ({ searchableData }) => {
+  const [searchState, setSearchState] = useState({
+    isLoading: true,
+    searchResults: [],
+    search: null,
+    isError: false,
+    termFrequency: true,
+    removeStopWords: false,
+    searchQuery: '',
+    selectedStrategy: '',
+    selectedSanitizer: '',
+    touched: false
+  })
+
+  const classes = useStyles()
+
+  useEffect(() => {
+    rebuildIndex(searchableData)
+  }, [])
+
+  const rebuildIndex = (searchableData) => {
+    // const {
+    //   removeStopWords,
+    //   selectedStrategy,
+    //   selectedSanitizer,
+    //   termFrequency
+    // } = searchState
+    const dataToSearch = new JsSearch.Search('title')
+    dataToSearch.addIndex('title')
+    dataToSearch.addIndex('description')
+    dataToSearch.addIndex('text')
+
+    dataToSearch.addDocuments(searchableData)
+    setSearchState({
+      ...searchState,
+      isLoading: false,
+      search: dataToSearch
+    })
+  }
+
+  const searchData = (e) => {
+    const { search } = searchState
+    const queryResult = search.search(e.target.value)
+    setSearchState({
+      ...searchState,
+      touched: true,
+      searchQuery: e.target.value,
+      searchResults: queryResult
+    })
+  }
+  const handleSubmit = (e) => {
+    e.preventDefault()
+  }
+
+  return (
+    <div style={{ height: '100%' }}>
+      <form onSubmit={handleSubmit}>
+        <TextField
+          variant="outlined"
+          placeholder="Search"
+          style={{
+            margin: '10px auto',
+            width: '100%'
+          }}
+          autoFocus
+          value={searchState.searchQuery}
+          onChange={searchData}
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <SearchIcon />
+              </InputAdornment>
+            )
+          }}
+        />
+      </form>
+
+      <div
+        id="result-list-conatiner"
+        style={{ overflowY: 'auto', height: '100%' }}
+        className={classes.parent}
+      >
+        {searchState.touched ? (
+          <div>
+            <ResultList searchResults={searchState.searchResults} />
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+SearchClient.propTypes = {
+  searchableData: PropTypes.array.isRequired
+}
+
+const ResultList = ({ searchResults }) => {
+  return (
+    <div style={{ maxHeight: '100%' }}>
+      <div>
+        Total results found: {searchResults.length} [Searched from Tutorials and
+        Core Concepts]
+      </div>
+
+      <div>
+        <List style={{ maxHeight: '100%' }}>
+          {searchResults.map((element) => (
+            <ListItem style={{ before: { content: null } }} key={element.id}>
+              <SearchResultElement element={element} />
+            </ListItem>
+          ))}
+        </List>
+      </div>
+    </div>
+  )
+}
+
+ResultList.propTypes = {
+  searchResults: PropTypes.array.isRequired
+}
+
+export default SearchClient

src/components/Search/SearchComponent.jsx

@@ -0,0 +1,71 @@
+import React from 'react'
+
+import { useStaticQuery, graphql } from 'gatsby'
+
+import SearchClient from './SearchClient'
+import Layout from '../../components/Layout'
+import HeaderSection from '../../components/HeaderSection'
+import PropTypes from 'prop-types'
+
+const SearchComponent = ({ location }) => {
+  const data = useStaticQuery(graphql`
+    query {
+      allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/content/" } }) {
+        edges {
+          node {
+            fields {
+              slug
+              section
+            }
+            frontmatter {
+              title
+              description
+            }
+            id
+            plainText
+          }
+        }
+      }
+    }
+  `)
+  const searchableData = data.allMarkdownRemark.edges.map(({ node }) => {
+    var section = 'Concepts'
+    if (node.fields.slug.startsWith('/tutorials')) section = 'Tutorials'
+
+    return {
+      title: node.frontmatter.title,
+      description: node.frontmatter.description,
+      slug: node.fields.slug,
+      id: node.id,
+      text: node.plainText,
+      section: section
+    }
+  })
+
+  return (
+    <Layout location={location}>
+      <HeaderSection title="Search" />
+      <main>
+        <article style={{ height: '700px' }}>
+          <div
+            id="search-client-container"
+            style={{
+              margin: 'auto',
+              width: '50%',
+              height: '100%',
+              paddingBottom: '50px'
+            }}
+          >
+            <SearchClient searchableData={searchableData} />
+          </div>
+        </article>
+      </main>
+    </Layout>
+  )
+}
+
+SearchComponent.propTypes = {
+  location: PropTypes.object.isRequired
+}
+
+export default SearchComponent

src/components/Search/SearchComponent.module.scss

@@ -0,0 +1,10 @@
+@import 'variables';
+
+.searchform input[type='text'] {
+  float: right;
+  padding: 6px;
+  border: none;
+  margin-top: 8px;
+  margin-right: 16px;
+  font-size: 17px;
+}

src/components/Search/SearchResultElement.jsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { Link } from 'gatsby'
+import PropTypes from 'prop-types'
+import Card from '@material-ui/core/Card'
+import CardContent from '@material-ui/core/CardContent'
+import Typography from '@material-ui/core/Typography'
+import { makeStyles } from '@material-ui/core/styles'
+
+const useStyles = makeStyles({
+  root: {
+    minWidth: 275
+  },
+  bullet: {
+    display: 'inline-block',
+    margin: '0 2px',
+    transform: 'scale(0.8)'
+  },
+  title: {
+    fontSize: 14
+  },
+  pos: {
+    marginBottom: 12
+  }
+})
+
+const SearchResultElement = ({ element }) => {
+  const classes = useStyles()
+  const { slug, title, section, description } = element
+  return (
+    <Card container alignItems="center" style={{ width: '100%' }}>
+      <CardContent>
+        <Typography
+          className={classes.title}
+          color="textSecondary"
+          gutterBottom
+        >
+          {section}
+        </Typography>
+        <Typography variant="h6" component="h2">
+          <Link to={slug}>{title}</Link>
+        </Typography>
+        <Typography className={classes.pos} color="textSecondary">
+          {description ? description.substring(0, 100) + '...' : null}
+        </Typography>
+      </CardContent>
+    </Card>
+  )
+}
+
+SearchResultElement.propTypes = {
+  element: PropTypes.object.isRequired
+}
+
+export default SearchResultElement

src/pages/index.jsx

@@ -66,7 +66,6 @@ const IndexPage = ({ data, location }) => (
             </li>
           ))}
         </ul>
-
         <Repositories />
       </Content>
     </Layout>

src/pages/index.module.scss

@@ -112,3 +112,8 @@
     transition: transform 0.2s ease-out;
   }
 }
+
+.searchButton {
+  margin-top: 20px;
+  text-align: center;
+}