mirror of
https://github.com/oceanprotocol/docs.git
synced 2024-11-26 19:49:26 +01:00
Issue-545: Add search button on home page
This commit is contained in:
parent
a0d1c77f48
commit
aac6849bc5
@ -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
|
||||
//
|
||||
|
@ -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>
|
||||
)
|
||||
|
@ -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
|
||||
|
@ -1,14 +1,31 @@
|
||||
import React from 'react'
|
||||
|
||||
import { graphql } from 'gatsby'
|
||||
import PropTypes from 'prop-types'
|
||||
import { useStaticQuery, graphql } from 'gatsby'
|
||||
|
||||
import SearchClient from './SearchClient'
|
||||
|
||||
const SearchComponent = ({ data, pageContext }) => {
|
||||
console.log('data', data)
|
||||
const { searchData } = pageContext
|
||||
const searchableData = searchData.map(({ node }) => {
|
||||
const SearchComponent = () => {
|
||||
const data = useStaticQuery(graphql`
|
||||
query {
|
||||
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
|
||||
|
@ -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>
|
||||
|
@ -112,3 +112,8 @@
|
||||
transition: transform 0.2s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
.searchButton {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
Loading…
Reference in New Issue
Block a user