diff --git a/gatsby-node.js b/gatsby-node.js index f0823b61..e8a96610 100755 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -132,7 +132,7 @@ exports.createPages = ({ graphql, actions }) => { await createSwaggerPages(createPage) await createDeploymentsPage(createPage) - + await createSearchPage(createPage) // API: ocean.js const lastRelease = result.data.oceanJs.repository.releases.edges.filter( @@ -178,6 +178,16 @@ exports.createPages = ({ graphql, actions }) => { }) } +const createSearchPage = async (createPage) => { + const template = path.resolve('./src/components/Search/SearchComponent.jsx') + const slug = `/search/` + + createPage({ + path: slug, + component: template + }) +} + const createDeploymentsPage = async (createPage) => { const template = path.resolve('./src/components/Deployments.jsx') const slug = `/concepts/deployments/` diff --git a/package-lock.json b/package-lock.json index 6470ad06..dcde7033 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4164,6 +4164,18 @@ "@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", diff --git a/package.json b/package.json index beba29c7..341ee279 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "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.4", "classnames": "^2.3.1", diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 0061c99b..c1e86e2a 100755 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -2,7 +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 SearchComponent from './Search/SearchComponent' +import SearchButton from './Search/SearchButton' const query = graphql` query { @@ -48,7 +48,7 @@ const Header = () => ( {node.title} ))} - + diff --git a/src/components/Search/SearchButton.jsx b/src/components/Search/SearchButton.jsx new file mode 100644 index 00000000..d9642a38 --- /dev/null +++ b/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 ( + + navigate('/search')} /> + + ) +} +export default SearchButton diff --git a/src/components/Search/SearchClient.jsx b/src/components/Search/SearchClient.jsx index 1ed26312..f402d40c 100644 --- a/src/components/Search/SearchClient.jsx +++ b/src/components/Search/SearchClient.jsx @@ -3,26 +3,26 @@ import * as JsSearch from 'js-search' import { Link } from 'gatsby' import PropTypes from 'prop-types' import { makeStyles } from '@material-ui/core/styles' -import Modal from '@material-ui/core/Modal' -import Backdrop from '@material-ui/core/Backdrop' -import Fade from '@material-ui/core/Fade' import List from '@material-ui/core/List' import ListItem from '@material-ui/core/ListItem' -import styles from './SearchComponent.module.scss' -import Button from '@material-ui/core/Button' -import SearchIcon from '@material-ui/icons/Search' const useStyles = makeStyles((theme) => ({ - modal: { - display: 'flex', - alignItems: 'top', - justifyContent: 'center' + parent: { + overflow: 'hidden', + position: 'relative', + width: '100%' }, - paper: { - backgroundColor: theme.palette.background.paper, - boxShadow: theme.shadows[5], - padding: theme.spacing(2, 4, 3), - margin: theme.spacing(3) + child: { + background: 'green', + height: '100%', + width: '50%', + position: 'absolute', + right: 0, + top: 0 + }, + root: { + margin: 'auto', + width: '50%' } })) @@ -41,15 +41,6 @@ const SearchClient = ({ searchableData }) => { }) const classes = useStyles() - const [open, setOpen] = React.useState(false) - - const handleOpen = () => { - setOpen(true) - } - - const handleClose = () => { - setOpen(false) - } useEffect(() => { rebuildIndex(searchableData) @@ -90,54 +81,45 @@ const SearchClient = ({ searchableData }) => { } return ( - <> - - - -
-
-
-
- -
-
-
- {searchState.touched ? ( - - ) : null} -
-
+ {searchState.touched ? ( +
+
Total results found: {searchState.searchResults.length}
+ + + {searchState.searchResults.map((element) => ( + + {element.title} + + ))} +
- - - + ) : null} +
+ ) } @@ -146,16 +128,20 @@ SearchClient.propTypes = { } const ResultList = ({ searchResults }) => { + const url = typeof window !== 'undefined' ? window.location.host : '' + console.log('url', url) return ( -
+
Total results found: {searchResults.length}
- - {searchResults.map((element) => ( - - {element.title} - - ))} - +
+ + {searchResults.map((element) => ( + + {element.title} + + ))} + +
) } diff --git a/src/components/Search/SearchComponent.jsx b/src/components/Search/SearchComponent.jsx index e9a219eb..8db40f10 100644 --- a/src/components/Search/SearchComponent.jsx +++ b/src/components/Search/SearchComponent.jsx @@ -3,6 +3,8 @@ import React from 'react' import { useStaticQuery, graphql } from 'gatsby' import SearchClient from './SearchClient' +import Layout from '../../components/Layout' +import HeaderSection from '../../components/HeaderSection' const SearchComponent = () => { const data = useStaticQuery(graphql` @@ -30,15 +32,27 @@ const SearchComponent = () => { return { title: node.frontmatter.title, description: node.frontmatter.description, - slug: node.fields.slug, + slug: + node.fields.slug[0] === '/' ? node.fields.slug : '/' + node.fields.slug, id: node.id, text: node.plainText } }) + return ( - <> - - + + +
+
+
+ +
+
+
+
) } diff --git a/src/components/Search/SearchComponent.module.scss b/src/components/Search/SearchComponent.module.scss index 7be7c8f9..d627429d 100644 --- a/src/components/Search/SearchComponent.module.scss +++ b/src/components/Search/SearchComponent.module.scss @@ -1,10 +1,10 @@ @import 'variables'; -.searchform input[type=text] { - float: right; - padding: 6px; - border: none; - margin-top: 8px; - margin-right: 16px; - font-size: 17px; -} \ No newline at end of file +.searchform input[type='text'] { + float: right; + padding: 6px; + border: none; + margin-top: 8px; + margin-right: 16px; + font-size: 17px; +} diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 2822a06f..2e3e9ffc 100755 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -9,7 +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' +import SearchButton from '../components/Search/SearchButton' const SectionBox = ({ to, children, ...props }) => to ? ( @@ -68,7 +68,7 @@ const IndexPage = ({ data, location }) => ( ))}
- +
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss index 4b556f2d..b5fda1b4 100644 --- a/src/pages/index.module.scss +++ b/src/pages/index.module.scss @@ -116,4 +116,4 @@ .searchButton { margin-top: 20px; text-align: center; -} \ No newline at end of file +}