mirror of
https://github.com/oceanprotocol/docs.git
synced 2024-11-26 19:49:26 +01:00
Issue-#545: Create search page
This commit is contained in:
parent
01350950c4
commit
213e04a0be
@ -132,7 +132,7 @@ exports.createPages = ({ graphql, actions }) => {
|
|||||||
await createSwaggerPages(createPage)
|
await createSwaggerPages(createPage)
|
||||||
|
|
||||||
await createDeploymentsPage(createPage)
|
await createDeploymentsPage(createPage)
|
||||||
|
await createSearchPage(createPage)
|
||||||
// API: ocean.js
|
// API: ocean.js
|
||||||
const lastRelease =
|
const lastRelease =
|
||||||
result.data.oceanJs.repository.releases.edges.filter(
|
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 createDeploymentsPage = async (createPage) => {
|
||||||
const template = path.resolve('./src/components/Deployments.jsx')
|
const template = path.resolve('./src/components/Deployments.jsx')
|
||||||
const slug = `/concepts/deployments/`
|
const slug = `/concepts/deployments/`
|
||||||
|
12
package-lock.json
generated
12
package-lock.json
generated
@ -4164,6 +4164,18 @@
|
|||||||
"@babel/runtime": "^7.4.4"
|
"@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": {
|
"@material-ui/styles": {
|
||||||
"version": "4.11.4",
|
"version": "4.11.4",
|
||||||
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz",
|
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz",
|
||||||
|
@ -18,6 +18,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@material-ui/core": "^4.12.3",
|
"@material-ui/core": "^4.12.3",
|
||||||
"@material-ui/icons": "^4.11.2",
|
"@material-ui/icons": "^4.11.2",
|
||||||
|
"@material-ui/lab": "^4.0.0-alpha.60",
|
||||||
"@oceanprotocol/art": "^3.2.0",
|
"@oceanprotocol/art": "^3.2.0",
|
||||||
"axios": "^0.21.4",
|
"axios": "^0.21.4",
|
||||||
"classnames": "^2.3.1",
|
"classnames": "^2.3.1",
|
||||||
|
@ -2,7 +2,7 @@ import React from 'react'
|
|||||||
import { Link, StaticQuery, graphql } from 'gatsby'
|
import { Link, StaticQuery, graphql } from 'gatsby'
|
||||||
import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
|
import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
|
||||||
import styles from './Header.module.scss'
|
import styles from './Header.module.scss'
|
||||||
import SearchComponent from './Search/SearchComponent'
|
import SearchButton from './Search/SearchButton'
|
||||||
|
|
||||||
const query = graphql`
|
const query = graphql`
|
||||||
query {
|
query {
|
||||||
@ -48,7 +48,7 @@ const Header = () => (
|
|||||||
{node.title}
|
{node.title}
|
||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
<SearchComponent className={styles.section} />
|
<SearchButton />
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
13
src/components/Search/SearchButton.jsx
Normal file
13
src/components/Search/SearchButton.jsx
Normal file
@ -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>
|
||||||
|
<SearchIcon onClick={() => navigate('/search')} />
|
||||||
|
</IconButton>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default SearchButton
|
@ -3,26 +3,26 @@ import * as JsSearch from 'js-search'
|
|||||||
import { Link } from 'gatsby'
|
import { Link } from 'gatsby'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import { makeStyles } from '@material-ui/core/styles'
|
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 List from '@material-ui/core/List'
|
||||||
import ListItem from '@material-ui/core/ListItem'
|
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) => ({
|
const useStyles = makeStyles((theme) => ({
|
||||||
modal: {
|
parent: {
|
||||||
display: 'flex',
|
overflow: 'hidden',
|
||||||
alignItems: 'top',
|
position: 'relative',
|
||||||
justifyContent: 'center'
|
width: '100%'
|
||||||
},
|
},
|
||||||
paper: {
|
child: {
|
||||||
backgroundColor: theme.palette.background.paper,
|
background: 'green',
|
||||||
boxShadow: theme.shadows[5],
|
height: '100%',
|
||||||
padding: theme.spacing(2, 4, 3),
|
width: '50%',
|
||||||
margin: theme.spacing(3)
|
position: 'absolute',
|
||||||
|
right: 0,
|
||||||
|
top: 0
|
||||||
|
},
|
||||||
|
root: {
|
||||||
|
margin: 'auto',
|
||||||
|
width: '50%'
|
||||||
}
|
}
|
||||||
}))
|
}))
|
||||||
|
|
||||||
@ -41,15 +41,6 @@ const SearchClient = ({ searchableData }) => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
const classes = useStyles()
|
const classes = useStyles()
|
||||||
const [open, setOpen] = React.useState(false)
|
|
||||||
|
|
||||||
const handleOpen = () => {
|
|
||||||
setOpen(true)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
setOpen(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
rebuildIndex(searchableData)
|
rebuildIndex(searchableData)
|
||||||
@ -90,54 +81,45 @@ const SearchClient = ({ searchableData }) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div style={{ height: '100%' }}>
|
||||||
<Button
|
<form onSubmit={handleSubmit}>
|
||||||
variant="outlined"
|
<input
|
||||||
onClick={handleOpen}
|
id="Search"
|
||||||
disableRipple
|
value={searchState.searchQuery}
|
||||||
startIcon={<SearchIcon />}
|
onChange={searchData}
|
||||||
|
placeholder="Search..."
|
||||||
|
style={{
|
||||||
|
margin: '0 auto',
|
||||||
|
width: '400px',
|
||||||
|
border: '1px solid'
|
||||||
|
}}
|
||||||
|
type="text"
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div
|
||||||
|
id="result-list-conatiner"
|
||||||
|
style={{ overflowY: 'scroll', height: '100%' }}
|
||||||
|
className={classes.parent}
|
||||||
>
|
>
|
||||||
Search
|
{searchState.touched ? (
|
||||||
</Button>
|
<div>
|
||||||
<Modal
|
<div>Total results found: {searchState.searchResults.length}</div>
|
||||||
className={classes.modal}
|
|
||||||
open={open}
|
<List>
|
||||||
onClose={handleClose}
|
{searchState.searchResults.map((element) => (
|
||||||
closeAfterTransition
|
<ListItem
|
||||||
BackdropComponent={Backdrop}
|
style={{ before: { content: null } }}
|
||||||
BackdropProps={{
|
key={element.id}
|
||||||
timeout: 500
|
>
|
||||||
}}
|
<Link to={element.slug}>{element.title} </Link>
|
||||||
>
|
</ListItem>
|
||||||
<Fade in={open}>
|
))}
|
||||||
<div className={classes.paper}>
|
</List>
|
||||||
<div>
|
|
||||||
<div style={{ margin: '0 auto' }}>
|
|
||||||
<form onSubmit={handleSubmit} className={styles.searchform}>
|
|
||||||
<input
|
|
||||||
id="Search"
|
|
||||||
value={searchState.searchQuery}
|
|
||||||
onChange={searchData}
|
|
||||||
placeholder="Search..."
|
|
||||||
style={{
|
|
||||||
margin: '0 auto',
|
|
||||||
width: '400px',
|
|
||||||
border: '1px solid'
|
|
||||||
}}
|
|
||||||
type="text"
|
|
||||||
/>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
{searchState.touched ? (
|
|
||||||
<ResultList searchResults={searchState.searchResults} />
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</Fade>
|
) : null}
|
||||||
</Modal>
|
</div>
|
||||||
</>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -146,16 +128,20 @@ SearchClient.propTypes = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const ResultList = ({ searchResults }) => {
|
const ResultList = ({ searchResults }) => {
|
||||||
|
const url = typeof window !== 'undefined' ? window.location.host : ''
|
||||||
|
console.log('url', url)
|
||||||
return (
|
return (
|
||||||
<div>
|
<div style={{ maxHeight: '100%', overflowY: 'scroll' }}>
|
||||||
<div>Total results found: {searchResults.length} </div>
|
<div>Total results found: {searchResults.length} </div>
|
||||||
<List>
|
<div>
|
||||||
{searchResults.map((element) => (
|
<List style={{ maxHeight: '100%', overflowY: 'scroll' }}>
|
||||||
<ListItem style={{ before: { content: null } }} key={element.id}>
|
{searchResults.map((element) => (
|
||||||
<Link to={element.slug}>{element.title} </Link>
|
<ListItem style={{ before: { content: null } }} key={element.id}>
|
||||||
</ListItem>
|
<Link to={element.slug}>{element.title} </Link>
|
||||||
))}
|
</ListItem>
|
||||||
</List>
|
))}
|
||||||
|
</List>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -3,6 +3,8 @@ import React from 'react'
|
|||||||
import { useStaticQuery, graphql } from 'gatsby'
|
import { useStaticQuery, graphql } from 'gatsby'
|
||||||
|
|
||||||
import SearchClient from './SearchClient'
|
import SearchClient from './SearchClient'
|
||||||
|
import Layout from '../../components/Layout'
|
||||||
|
import HeaderSection from '../../components/HeaderSection'
|
||||||
|
|
||||||
const SearchComponent = () => {
|
const SearchComponent = () => {
|
||||||
const data = useStaticQuery(graphql`
|
const data = useStaticQuery(graphql`
|
||||||
@ -30,15 +32,27 @@ const SearchComponent = () => {
|
|||||||
return {
|
return {
|
||||||
title: node.frontmatter.title,
|
title: node.frontmatter.title,
|
||||||
description: node.frontmatter.description,
|
description: node.frontmatter.description,
|
||||||
slug: node.fields.slug,
|
slug:
|
||||||
|
node.fields.slug[0] === '/' ? node.fields.slug : '/' + node.fields.slug,
|
||||||
id: node.id,
|
id: node.id,
|
||||||
text: node.plainText
|
text: node.plainText
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<Layout location={location}>
|
||||||
<SearchClient searchableData={searchableData} />
|
<HeaderSection title="Search" />
|
||||||
</>
|
<main>
|
||||||
|
<article style={{ height: '400px' }}>
|
||||||
|
<div
|
||||||
|
id="search-client-container"
|
||||||
|
style={{ margin: 'auto', width: '50%', height: '100%' }}
|
||||||
|
>
|
||||||
|
<SearchClient searchableData={searchableData} />
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
</Layout>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
@import 'variables';
|
@import 'variables';
|
||||||
|
|
||||||
.searchform input[type=text] {
|
.searchform input[type='text'] {
|
||||||
float: right;
|
float: right;
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
border: none;
|
border: none;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
}
|
}
|
||||||
|
@ -9,7 +9,7 @@ import HeaderHome from '../components/HeaderHome'
|
|||||||
import Repositories from '../components/Repositories'
|
import Repositories from '../components/Repositories'
|
||||||
import { ReactComponent as Arrow } from '../images/arrow.svg'
|
import { ReactComponent as Arrow } from '../images/arrow.svg'
|
||||||
import styles from './index.module.scss'
|
import styles from './index.module.scss'
|
||||||
import SearchComponent from '../components/Search/SearchComponent'
|
import SearchButton from '../components/Search/SearchButton'
|
||||||
|
|
||||||
const SectionBox = ({ to, children, ...props }) =>
|
const SectionBox = ({ to, children, ...props }) =>
|
||||||
to ? (
|
to ? (
|
||||||
@ -68,7 +68,7 @@ const IndexPage = ({ data, location }) => (
|
|||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
<div className={styles.searchButton}>
|
<div className={styles.searchButton}>
|
||||||
<SearchComponent />
|
<SearchButton />
|
||||||
</div>
|
</div>
|
||||||
<Repositories />
|
<Repositories />
|
||||||
</Content>
|
</Content>
|
||||||
|
@ -116,4 +116,4 @@
|
|||||||
.searchButton {
|
.searchButton {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user