Issue-545: Add search button on home page

gatsby-node.js

@@ -103,24 +103,6 @@ exports.createPages = ({ graphql, actions }) => {
                 }
               }
             }
-
-            searchContext: allMarkdownRemark(
-              filter: { fileAbsolutePath: { regex: "/content/" } }
-            ) {
-              edges {
-                node {
-                  fields {
-                    slug
-                    section
-                  }
-                  frontmatter {
-                    title
-                    description
-                  }
-                  id
-                }
-              }
-            }
           }
         `
       ).then(async (result) => {
@@ -151,9 +133,6 @@ exports.createPages = ({ graphql, actions }) => {
 
         await createDeploymentsPage(createPage)
 
-        const searchContext = result.data.searchContext.edges
-        await createSearchPage(createPage, searchContext)
-
         // API: ocean.js
         const lastRelease =
           result.data.oceanJs.repository.releases.edges.filter(
@@ -209,18 +188,6 @@ const createDeploymentsPage = async (createPage) => {
   })
 }
 
-const createSearchPage = async (createPage, searchContext) => {
-  const template = path.resolve('./src/components/Search/SearchComponent.jsx')
-  const slug = `/concepts/search/`
-
-  createPage({
-    path: slug,
-    component: template,
-    context: {
-      searchData: searchContext
-    }
-  })
-}
 //
 // Create pages from TypeDoc json files
 //

src/components/HeaderHome.jsx

@@ -3,7 +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 SearchComponent from './Search/SearchComponent'
+
 const HeaderHome = () => (
   <StaticQuery
     query={graphql`
@@ -25,7 +25,6 @@ const HeaderHome = () => (
             <Logo className={styles.headerLogo} />
             <h1 className={styles.headerTitle}>{siteTitle}</h1>
             <p className={styles.headerDescription}>{siteDescription}</p>
-            <SearchComponent />
           </Content>
         </header>
       )

src/components/Search/SearchClient.jsx

@@ -89,7 +89,12 @@ const SearchClient = ({ searchableData }) => {
 
   return (
     <div>
-      <Button onClick={handleOpen} startIcon={<SearchIcon />}>
+      <Button
+        variant="outlined"
+        onClick={handleOpen}
+        disableRipple
+        startIcon={<SearchIcon />}
+      >
         Search
       </Button>
       <Modal

src/components/Search/SearchComponent.jsx

@@ -1,14 +1,31 @@
 import React from 'react'
 
-import { graphql } from 'gatsby'
+import { useStaticQuery, graphql } from 'gatsby'
-import PropTypes from 'prop-types'
 
 import SearchClient from './SearchClient'
 
-const SearchComponent = ({ data, pageContext }) => {
+const SearchComponent = () => {
-  console.log('data', data)
+  const data = useStaticQuery(graphql`
-  const { searchData } = pageContext
+    query {
-  const searchableData = searchData.map(({ node }) => {
+      allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/content/" } }) {
+        edges {
+          node {
+            fields {
+              slug
+              section
+            }
+            frontmatter {
+              title
+              description
+            }
+            id
+          }
+        }
+      }
+    }
+  `)
+
+  const searchableData = data.allMarkdownRemark.edges.map(({ node }) => {
     return {
       title: node.frontmatter.title,
       description: node.frontmatter.description,
@@ -23,29 +40,4 @@ const SearchComponent = ({ data, pageContext }) => {
   )
 }
 
-SearchComponent.propTypes = {
-  pageContext: PropTypes.object,
-  data: PropTypes.object
-}
-
-export const SearchComponentQuery = graphql`
-  query {
-    allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/content/" } }) {
-      edges {
-        node {
-          fields {
-            slug
-            section
-          }
-          frontmatter {
-            title
-            description
-          }
-          id
-        }
-      }
-    }
-  }
-`
-
 export default SearchComponent

src/pages/index.jsx

@@ -9,6 +9,7 @@ import HeaderHome from '../components/HeaderHome'
 import Repositories from '../components/Repositories'
 import { ReactComponent as Arrow } from '../images/arrow.svg'
 import styles from './index.module.scss'
+import SearchComponent from '../components/Search/SearchComponent'
 
 const SectionBox = ({ to, children, ...props }) =>
   to ? (
@@ -66,7 +67,9 @@ const IndexPage = ({ data, location }) => (
             </li>
           ))}
         </ul>
-
+        <div className={styles.searchButton}>
+          <SearchComponent />
+        </div>
         <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;
+}