push 2

gatsby-config.js

@@ -1,8 +1,8 @@
 module.exports = {
   siteMetadata: {
-    title: `Gatsby Default Starter`,
-    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
-    author: `@gatsbyjs`,
+    title: `X5GON site`,
+    description: `Awesome ML search`,
+    author: `IJS`,
   },
   plugins: [
     `gatsby-plugin-react-helmet`,
@@ -24,7 +24,7 @@ module.exports = {
         background_color: `#663399`,
         theme_color: `#663399`,
         display: `minimal-ui`,
-        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
+        icon: `src/images/logo/x5gon_logo_dark.svg`, // This path is relative to the root of the site.
       },
     },
     // this (optional) plugin enables Progressive Web App + Offline functionality

package.json

@@ -1,9 +1,9 @@
 {
-  "name": "gatsby-starter-default",
+  "name": "search",
   "private": true,
-  "description": "A simple starter to get up and developing quickly with Gatsby",
+  "description": "X5GON search engine powered by ML",
   "version": "0.1.0",
-  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
+  "author": "IJS",
   "dependencies": {
     "@reach/router": "^1.2.1",
     "gatsby": "^2.17.4",

src/components/layout.js

@@ -4,7 +4,8 @@ import { Link } from "gatsby"
 const Layout = props => {
   return (
     <div>
-      <Navbar light={"dark"}>{props.children}</Navbar>
+      <Navbar light={"dark"} />
+      {props.children}
     </div>
   )
 }

src/pages/index.js

@@ -1,9 +1,48 @@
-import React from "react"
+import React, { useState } from "react"
 import "../css/main.css"
 import "../css/bootstrap.css"
+import { navigate } from "gatsby"
 
 import Layout from "../components/layout"
 
-const IndexPage = () => <Layout>homepage</Layout>
+const IndexPage = () => {
+  const [searchKey, setSearchKey] = useState()
+
+  const onFormSubmit = e => {
+    e.preventDefault()
+    console.log("submitted")
+    navigate("/search?q=" + searchKey)
+  }
+
+  const ChangeSearchKey = value => {
+    setSearchKey(value)
+  }
+
+  const SearchBar = () => {
+    return (
+      <form onSubmit={onFormSubmit}>
+        <input
+          ref={input => input && input.focus()}
+          type="text"
+          value={searchKey}
+          onChange={e => ChangeSearchKey(e.target.value)}
+          placeholder="Search |"
+          className="form-control align-middle mb-3"
+          autoComplete="off"
+        />
+      </form>
+    )
+  }
+
+  return (
+    <Layout>
+      <div className="text-center maxer-880 mx-auto">
+        <h3>X5GON Search</h3>
+        <h4>Find OER materials in the blink of an eye.</h4>
+        <SearchBar></SearchBar>
+      </div>
+    </Layout>
+  )
+}
 
 export default IndexPage

src/pages/search.js

@@ -5,6 +5,8 @@ import ReactPaginate from "react-paginate"
 import { Link } from "gatsby"
 import withLocation from "../components/withLocation"
 
+import Layout from "../components/layout"
+
 class Search extends React.Component {
   constructor(props) {
     super(props)
@@ -66,6 +68,7 @@ class Search extends React.Component {
       )
         .then(res => res.json())
         .then(json => {
+          console.log(json)
           this.setState({
             isLoaded: true,
             api_search: {
@@ -153,11 +156,8 @@ class Search extends React.Component {
     if (this.state.IsSearching === true)
       return (
         <p className="mt-2">
-          Number of search results found:{" "}
-          {this.state.api_search.metadata.num_or_materials} for{" "}
-          <b>{this.state.api_search.query.text}</b> in{" "}
-          {this.state.api_search.metadata.max_pages} pages | currently on page{" "}
-          {this.state.current_page}
+          Found <b>{this.state.api_search.metadata.count}</b> Open Educational
+          Resources
         </p>
       )
     else {
@@ -195,17 +195,6 @@ class Search extends React.Component {
       </Link>
     )
   }
-  LogoIcon = () => {
-    return (
-      <Link to="/">
-        <img
-          src="https://www.x5gon.org/wp-content/themes/x5gon/dist/assets/img/logo.svg"
-          alt="X5GON"
-          className="my-5 img-fluid"
-        />
-      </Link>
-    )
-  }
   SearchItem = item => {
     let sitem = item
     if (sitem.description && sitem.description.length > 280) {
@@ -254,10 +243,9 @@ class Search extends React.Component {
   // RENDER VIEW
   render() {
     return (
-      <React.Fragment>
+      <Layout>
         <div className="container">
           <div className="text-center" id="search">
-            <this.LogoIcon />
             <this.SearchBar />
             <this.SearchButton text={"Search"} />
             <div />
@@ -268,7 +256,7 @@ class Search extends React.Component {
           <this.SearchItemsUL />
           <this.BottomPagination />
         </div>
-      </React.Fragment>
+      </Layout>
     )
   }
 }