From 8ab786d5f7f21cef1ee13c71ad4846215c06dee7 Mon Sep 17 00:00:00 2001 From: Akshay Date: Wed, 8 Sep 2021 19:51:51 +0200 Subject: [PATCH 01/23] Issue-545: Add js-search library --- package-lock.json | 20 ++++++++++++++++---- package.json | 3 ++- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 18c855aa..1f42dbad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5798,11 +5798,18 @@ "integrity": "sha512-1uIESzroqpaTzt9uX48HO+6gfnKu3RwvWdCcWSrX4csMInJfCo1yvKPNXCwXFRpJqRW25tiASb6No0YH57PXqg==" }, "axios": { - "version": "0.21.1", - "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz", - "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==", + "version": "0.21.4", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz", + "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==", "requires": { - "follow-redirects": "^1.10.0" + "follow-redirects": "^1.14.0" + }, + "dependencies": { + "follow-redirects": { + "version": "1.14.3", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.3.tgz", + "integrity": "sha512-3MkHxknWMUtb23apkgz/83fDoe+y+qr0TdgacGIA7bew+QLBo3vdgEN2xEsuXNivpFy4CyDhBBZnNZOtalmenw==" + } } }, "axobject-query": { @@ -16727,6 +16734,11 @@ "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==", "dev": true }, + "js-search": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/js-search/-/js-search-2.0.0.tgz", + "integrity": "sha512-lJ8KzjlwcelIWuAdKyzsXv45W6OIwRpayzc7XmU8mzgWadg5UVOKVmnq/tXudddEB9Ceic3tVaGu6QOK/eebhg==" + }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", diff --git a/package.json b/package.json index ac13f150..3ba9da78 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ }, "dependencies": { "@oceanprotocol/art": "^3.2.0", - "axios": "^0.21.1", + "axios": "^0.21.4", "classnames": "^2.3.1", "gatsby": "^2.32.13", "gatsby-image": "^3.11.0", @@ -48,6 +48,7 @@ "gatsby-transformer-yaml": "^2.11.0", "giphy-js-sdk-core": "^1.0.6", "intersection-observer": "^0.12.0", + "js-search": "^2.0.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-helmet": "^6.1.0", From fd9e5184d45f0d74a117654de211199cb0a6738b Mon Sep 17 00:00:00 2001 From: Akshay Date: Sat, 11 Sep 2021 00:46:36 +0200 Subject: [PATCH 02/23] Issue-545: Build index on title and create search page --- gatsby-node.js | 35 ++++++++ src/components/SearchComponent.jsx | 123 +++++++++++++++++++++++++++++ 2 files changed, 158 insertions(+) create mode 100644 src/components/SearchComponent.jsx diff --git a/gatsby-node.js b/gatsby-node.js index b88890bf..4e6755b0 100755 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -103,6 +103,25 @@ exports.createPages = ({ graphql, actions }) => { } } } + + searchContext: allMarkdownRemark( + filter: { fileAbsolutePath: { regex: "/content/" } } + ) { + edges { + node { + fields { + slug + section + + } + frontmatter { + title + description + } + + } + } + } } ` ).then(async (result) => { @@ -133,6 +152,9 @@ 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( @@ -187,6 +209,19 @@ const createDeploymentsPage = async (createPage) => { component: template }) } + +const createSearchPage = async (createPage, searchContext) => { + const template = path.resolve('./src/components/SearchComponent.jsx') + const slug = `/concepts/search/` + + createPage({ + path: slug, + component: template, + context: { + searchData: searchContext + } + }) +} // // Create pages from TypeDoc json files // diff --git a/src/components/SearchComponent.jsx b/src/components/SearchComponent.jsx new file mode 100644 index 00000000..21f8c02c --- /dev/null +++ b/src/components/SearchComponent.jsx @@ -0,0 +1,123 @@ +import React, {useState, useEffect} from "react" +import * as JsSearch from "js-search" +import {Link} from "gatsby" + +const SearchComponent = ({pageContext}) => { + + const {searchData} = pageContext + console.log("searchData", searchData) + const state = useState({isLoading: false, isError: false, searchQuery: ''}) + const searchableData = searchData.map(({node}) => { + return {title: node.frontmatter.title, description: node.frontmatter.description, slug: node.fields.slug} + }) + return ( + <>Search feature + + + ) +} + +const ClientSearch = ({searchableData}) => { + const [searchState, setSearchState] = useState({ + isLoading: true, + searchResults: [], + search: null, + isError: false, + termFrequency: true, + removeStopWords: false, + searchQuery: "", + selectedStrategy: "", + selectedSanitizer: "" + }) + + useEffect(() => { + rebuildIndex(searchableData) + }, []); + + const rebuildIndex = (searchableData) => { + const {removeStopWords, selectedStrategy, selectedSanitizer, termFrequency} = searchState + const dataToSearch = new JsSearch.Search("title") + dataToSearch.addIndex('title') + + dataToSearch.addDocuments(searchableData) + setSearchState({ + ...searchState, + isLoading: false, + search: dataToSearch + }) + } + + const searchData = e => { + const {search} = searchState + const queryResult = search.search(e.target.value) + setSearchState({ + ...searchState, + searchQuery: e.target.value, + searchResults: queryResult + }) + } + const handleSubmit = (e) => { + e.preventDefault() + } + + return ( +
+
+
+ +
+
+ +
+ +
+ +
+ ) +} + + +const ResultList = ({searchResults}) => { + return (
+
+ Total results found: { + searchResults.length + }
+
    { + searchResults.map((element) =>< li > + ) + }
+
+ ) +} + +const ResultElement = ({title, slug}) => { + return ( + <> + + {title} + + ) +} + +export default SearchComponent From 16d38100ecbde42e48e13d9d0c7ca3dc4cecba40 Mon Sep 17 00:00:00 2001 From: Akshay Date: Sat, 11 Sep 2021 17:56:14 +0200 Subject: [PATCH 03/23] Issue-545: Format components --- gatsby-node.js | 6 +- src/components/SearchComponent.jsx | 231 +++++++++++++++-------------- 2 files changed, 125 insertions(+), 112 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index 4e6755b0..5688a83e 100755 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -112,13 +112,11 @@ exports.createPages = ({ graphql, actions }) => { fields { slug section - } frontmatter { - title - description + title + description } - } } } diff --git a/src/components/SearchComponent.jsx b/src/components/SearchComponent.jsx index 21f8c02c..95ea0ac9 100644 --- a/src/components/SearchComponent.jsx +++ b/src/components/SearchComponent.jsx @@ -1,123 +1,138 @@ -import React, {useState, useEffect} from "react" -import * as JsSearch from "js-search" -import {Link} from "gatsby" +import React, { useState, useEffect } from 'react' +import * as JsSearch from 'js-search' +import { Link } from 'gatsby' +import PropTypes from 'prop-types' -const SearchComponent = ({pageContext}) => { +const SearchComponent = ({ pageContext }) => { + const { searchData } = pageContext + const searchableData = searchData.map(({ node }) => { + return { + title: node.frontmatter.title, + description: node.frontmatter.description, + slug: node.fields.slug, + id: node.id + } + }) + return ( + <> + Search feature + + + ) +} - const {searchData} = pageContext - console.log("searchData", searchData) - const state = useState({isLoading: false, isError: false, searchQuery: ''}) - const searchableData = searchData.map(({node}) => { - return {title: node.frontmatter.title, description: node.frontmatter.description, slug: node.fields.slug} +SearchComponent.propTypes = { + pageContext: PropTypes.object.isRequired +} + +const ClientSearch = ({ searchableData }) => { + const [searchState, setSearchState] = useState({ + isLoading: true, + searchResults: [], + search: null, + isError: false, + termFrequency: true, + removeStopWords: false, + searchQuery: '', + selectedStrategy: '', + selectedSanitizer: '' + }) + + useEffect(() => { + rebuildIndex(searchableData) + }, []) + + const rebuildIndex = (searchableData) => { + // const { + // removeStopWords, + // selectedStrategy, + // selectedSanitizer, + // termFrequency + // } = searchState + const dataToSearch = new JsSearch.Search('title') + dataToSearch.addIndex('title') + + dataToSearch.addDocuments(searchableData) + setSearchState({ + ...searchState, + isLoading: false, + search: dataToSearch }) - return ( - <>Search feature - - - ) -} + } -const ClientSearch = ({searchableData}) => { - const [searchState, setSearchState] = useState({ - isLoading: true, - searchResults: [], - search: null, - isError: false, - termFrequency: true, - removeStopWords: false, - searchQuery: "", - selectedStrategy: "", - selectedSanitizer: "" + const searchData = (e) => { + const { search } = searchState + const queryResult = search.search(e.target.value) + setSearchState({ + ...searchState, + searchQuery: e.target.value, + searchResults: queryResult }) + } + const handleSubmit = (e) => { + e.preventDefault() + } - useEffect(() => { - rebuildIndex(searchableData) - }, []); + return ( +
+
+
+ +
+
- const rebuildIndex = (searchableData) => { - const {removeStopWords, selectedStrategy, selectedSanitizer, termFrequency} = searchState - const dataToSearch = new JsSearch.Search("title") - dataToSearch.addIndex('title') +
- dataToSearch.addDocuments(searchableData) - setSearchState({ - ...searchState, - isLoading: false, - search: dataToSearch - }) - } - - const searchData = e => { - const {search} = searchState - const queryResult = search.search(e.target.value) - setSearchState({ - ...searchState, - searchQuery: e.target.value, - searchResults: queryResult - }) - } - const handleSubmit = (e) => { - e.preventDefault() - } - - return ( -
-
-
- -
-
- -
- -
- -
- ) +
+ +
+
+ ) } - -const ResultList = ({searchResults}) => { - return (
-
- Total results found: { - searchResults.length - }
-
    { - searchResults.map((element) =>< li > - ) - }
-
- ) +ClientSearch.propTypes = { + searchableData: PropTypes.array.isRequired } -const ResultElement = ({title, slug}) => { - return ( - <> - - {title} - - ) +const ResultList = ({ searchResults }) => { + return ( +
+
Total results found: {searchResults.length}
+
    + {searchResults.map((element) => ( +
  • + +
    • + ))} +
+
+ ) +} + +ResultList.propTypes = { + searchResults: PropTypes.array.isRequired +} + +const ResultElement = ({ title, slug }) => { + return ( + <> + {title} + + ) +} + +ResultElement.propTypes = { + title: PropTypes.string.isRequired, + slug: PropTypes.string.isRequired } export default SearchComponent From 8e27a2261cf3982408ab2a5b27890c5401d60e88 Mon Sep 17 00:00:00 2001 From: Akshay Date: Sat, 11 Sep 2021 17:56:41 +0200 Subject: [PATCH 04/23] Issue-545: Format components --- gatsby-node.js | 1 + 1 file changed, 1 insertion(+) diff --git a/gatsby-node.js b/gatsby-node.js index 5688a83e..374f4b1b 100755 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -117,6 +117,7 @@ exports.createPages = ({ graphql, actions }) => { title description } + id } } } From fc56e8b6a0053adec57fa295baa11863de1c70eb Mon Sep 17 00:00:00 2001 From: Akshay Date: Sat, 11 Sep 2021 18:34:46 +0200 Subject: [PATCH 05/23] Issue-545: Use modal --- package-lock.json | 227 +++++++++++++++++++++++++++++ package.json | 1 + src/components/SearchComponent.jsx | 119 ++++++++++----- 3 files changed, 307 insertions(+), 40 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1f42dbad..2693100c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3142,6 +3142,11 @@ "to-fast-properties": "^2.0.0" } }, + "@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" + }, "@endemolshinegroup/cosmiconfig-typescript-loader": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/@endemolshinegroup/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-3.0.2.tgz", @@ -4132,6 +4137,88 @@ "unist-util-visit": "^1.3.0" } }, + "@material-ui/core": { + "version": "4.12.3", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.3.tgz", + "integrity": "sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/styles": "^4.11.4", + "@material-ui/system": "^4.12.1", + "@material-ui/types": "5.1.0", + "@material-ui/utils": "^4.11.2", + "@types/react-transition-group": "^4.2.0", + "clsx": "^1.0.4", + "hoist-non-react-statics": "^3.3.2", + "popper.js": "1.16.1-lts", + "prop-types": "^15.7.2", + "react-is": "^16.8.0 || ^17.0.0", + "react-transition-group": "^4.4.0" + } + }, + "@material-ui/styles": { + "version": "4.11.4", + "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz", + "integrity": "sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==", + "requires": { + "@babel/runtime": "^7.4.4", + "@emotion/hash": "^0.8.0", + "@material-ui/types": "5.1.0", + "@material-ui/utils": "^4.11.2", + "clsx": "^1.0.4", + "csstype": "^2.5.2", + "hoist-non-react-statics": "^3.3.2", + "jss": "^10.5.1", + "jss-plugin-camel-case": "^10.5.1", + "jss-plugin-default-unit": "^10.5.1", + "jss-plugin-global": "^10.5.1", + "jss-plugin-nested": "^10.5.1", + "jss-plugin-props-sort": "^10.5.1", + "jss-plugin-rule-value-function": "^10.5.1", + "jss-plugin-vendor-prefixer": "^10.5.1", + "prop-types": "^15.7.2" + }, + "dependencies": { + "csstype": { + "version": "2.6.17", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz", + "integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==" + } + } + }, + "@material-ui/system": { + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.1.tgz", + "integrity": "sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/utils": "^4.11.2", + "csstype": "^2.5.2", + "prop-types": "^15.7.2" + }, + "dependencies": { + "csstype": { + "version": "2.6.17", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz", + "integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==" + } + } + }, + "@material-ui/types": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz", + "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==" + }, + "@material-ui/utils": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz", + "integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==", + "requires": { + "@babel/runtime": "^7.4.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.0 || ^17.0.0" + } + }, "@mdx-js/util": { "version": "2.0.0-next.8", "resolved": "https://registry.npmjs.org/@mdx-js/util/-/util-2.0.0-next.8.tgz", @@ -4731,6 +4818,14 @@ "csstype": "^3.0.2" } }, + "@types/react-transition-group": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.2.tgz", + "integrity": "sha512-KibDWL6nshuOJ0fu8ll7QnV/LVTo3PzQ9aCPnRUYPfX7eZohHwLIdNHj7pftanREzHNP4/nJa8oeM73uSiavMQ==", + "requires": { + "@types/react": "*" + } + }, "@types/readable-stream": { "version": "2.3.9", "resolved": "https://registry.npmjs.org/@types/readable-stream/-/readable-stream-2.3.9.tgz", @@ -7451,6 +7546,11 @@ "mimic-response": "^1.0.0" } }, + "clsx": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz", + "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==" + }, "coa": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz", @@ -8201,6 +8301,15 @@ } } }, + "css-vendor": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz", + "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==", + "requires": { + "@babel/runtime": "^7.8.3", + "is-in-browser": "^1.0.2" + } + }, "css-what": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz", @@ -8942,6 +9051,15 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "dom-serializer": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz", @@ -15631,6 +15749,11 @@ "integrity": "sha512-8yKEWNX4z2YsofXAMT7KvA1g8p+GxtB1ffV8XtpAEGuXNAbCV5wdNKH+qTpw8SM9fh4aMPDR+yQuKfgnreyZlg==", "dev": true }, + "hyphenate-style-name": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", + "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" + }, "iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -16275,6 +16398,11 @@ "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz", "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==" }, + "is-in-browser": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", + "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=" + }, "is-installed-globally": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz", @@ -16844,6 +16972,84 @@ "verror": "1.10.0" } }, + "jss": { + "version": "10.7.1", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.7.1.tgz", + "integrity": "sha512-5QN8JSVZR6cxpZNeGfzIjqPEP+ZJwJJfZbXmeABNdxiExyO+eJJDy6WDtqTf8SDKnbL5kZllEpAP71E/Lt7PXg==", + "requires": { + "@babel/runtime": "^7.3.1", + "csstype": "^3.0.2", + "is-in-browser": "^1.1.3", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-camel-case": { + "version": "10.7.1", + "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.7.1.tgz", + "integrity": "sha512-+ioIyWvmAfgDCWXsQcW1NMnLBvRinOVFkSYJUgewQ6TynOcSj5F1bSU23B7z0p1iqK0PPHIU62xY1iNJD33WGA==", + "requires": { + "@babel/runtime": "^7.3.1", + "hyphenate-style-name": "^1.0.3", + "jss": "10.7.1" + } + }, + "jss-plugin-default-unit": { + "version": "10.7.1", + "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.7.1.tgz", + "integrity": "sha512-tW+dfYVNARBQb/ONzBwd8uyImigyzMiAEDai+AbH5rcHg5h3TtqhAkxx06iuZiT/dZUiFdSKlbe3q9jZGAPIwA==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.7.1" + } + }, + "jss-plugin-global": { + "version": "10.7.1", + "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.7.1.tgz", + "integrity": "sha512-FbxCnu44IkK/bw8X3CwZKmcAnJqjAb9LujlAc/aP0bMSdVa3/MugKQRyeQSu00uGL44feJJDoeXXiHOakBr/Zw==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.7.1" + } + }, + "jss-plugin-nested": { + "version": "10.7.1", + "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.7.1.tgz", + "integrity": "sha512-RNbICk7FlYKaJyv9tkMl7s6FFfeLA3ubNIFKvPqaWtADK0KUaPsPXVYBkAu4x1ItgsWx67xvReMrkcKA0jSXfA==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.7.1", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-props-sort": { + "version": "10.7.1", + "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.7.1.tgz", + "integrity": "sha512-eyd5FhA+J0QrpqXxO7YNF/HMSXXl4pB0EmUdY4vSJI4QG22F59vQ6AHtP6fSwhmBdQ98Qd9gjfO+RMxcE39P1A==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.7.1" + } + }, + "jss-plugin-rule-value-function": { + "version": "10.7.1", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.7.1.tgz", + "integrity": "sha512-fGAAImlbaHD3fXAHI3ooX6aRESOl5iBt3LjpVjxs9II5u9tzam7pqFUmgTcrip9VpRqYHn8J3gA7kCtm8xKwHg==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.7.1", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-vendor-prefixer": { + "version": "10.7.1", + "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.7.1.tgz", + "integrity": "sha512-1UHFmBn7hZNsHXTkLLOL8abRl8vi+D1EVzWD4WmLFj55vawHZfnH1oEz6TUf5Y61XHv0smdHabdXds6BgOXe3A==", + "requires": { + "@babel/runtime": "^7.3.1", + "css-vendor": "^2.0.8", + "jss": "10.7.1" + } + }, "jsx-ast-utils": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz", @@ -19848,6 +20054,11 @@ "ts-pnp": "^1.1.6" } }, + "popper.js": { + "version": "1.16.1-lts", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz", + "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==" + }, "portfinder": { "version": "1.0.28", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", @@ -21283,6 +21494,17 @@ "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.0.tgz", "integrity": "sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg==" }, + "react-transition-group": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", + "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, "read": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz", @@ -24237,6 +24459,11 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "tinycolor2": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", diff --git a/package.json b/package.json index 3ba9da78..df494419 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "test": "npm run lint" }, "dependencies": { + "@material-ui/core": "^4.12.3", "@oceanprotocol/art": "^3.2.0", "axios": "^0.21.4", "classnames": "^2.3.1", diff --git a/src/components/SearchComponent.jsx b/src/components/SearchComponent.jsx index 95ea0ac9..c3eda496 100644 --- a/src/components/SearchComponent.jsx +++ b/src/components/SearchComponent.jsx @@ -2,6 +2,26 @@ import React, { useState, useEffect } from 'react' 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' + +const useStyles = makeStyles((theme) => ({ + modal: { + display: 'flex', + alignItems: 'top', + justifyContent: 'center' + }, + paper: { + backgroundColor: theme.palette.background.paper, + boxShadow: theme.shadows[5], + padding: theme.spacing(2, 4, 3), + margin: theme.spacing(3) + } +})) const SearchComponent = ({ pageContext }) => { const { searchData } = pageContext @@ -15,7 +35,6 @@ const SearchComponent = ({ pageContext }) => { }) return ( <> - Search feature ) @@ -35,9 +54,21 @@ const ClientSearch = ({ searchableData }) => { removeStopWords: false, searchQuery: '', selectedStrategy: '', - selectedSanitizer: '' + selectedSanitizer: '', + touched: false }) + const classes = useStyles() + const [open, setOpen] = React.useState(false) + + const handleOpen = () => { + setOpen(true) + } + + const handleClose = () => { + setOpen(false) + } + useEffect(() => { rebuildIndex(searchableData) }, []) @@ -65,6 +96,7 @@ const ClientSearch = ({ searchableData }) => { const queryResult = search.search(e.target.value) setSearchState({ ...searchState, + touched: true, searchQuery: e.target.value, searchResults: queryResult }) @@ -75,26 +107,46 @@ const ClientSearch = ({ searchableData }) => { return (
-
-
- -
-
- -
- -
- -
+ + + +
+

Search

+
+
+
+ +
+
+
+ {searchState.touched ? ( + + ) : null} +
+
+
+ +
) } @@ -107,13 +159,13 @@ const ResultList = ({ searchResults }) => { return (
Total results found: {searchResults.length}
-
    + {searchResults.map((element) => ( -
  • - -
    • + + {element.title} + ))} -
+
) } @@ -122,17 +174,4 @@ ResultList.propTypes = { searchResults: PropTypes.array.isRequired } -const ResultElement = ({ title, slug }) => { - return ( - <> - {title} - - ) -} - -ResultElement.propTypes = { - title: PropTypes.string.isRequired, - slug: PropTypes.string.isRequired -} - export default SearchComponent From 619c181a101760a49764ee6e7818ac5b88173055 Mon Sep 17 00:00:00 2001 From: Akshay Date: Sun, 12 Sep 2021 23:10:29 +0200 Subject: [PATCH 06/23] WIP: Improve UI --- gatsby-node.js | 2 +- package-lock.json | 8 ++++++++ package.json | 1 + src/components/{ => Search}/SearchComponent.jsx | 13 ++++++++----- src/components/Search/SearchComponent.module.scss | 10 ++++++++++ 5 files changed, 28 insertions(+), 6 deletions(-) rename src/components/{ => Search}/SearchComponent.jsx (91%) create mode 100644 src/components/Search/SearchComponent.module.scss diff --git a/gatsby-node.js b/gatsby-node.js index 374f4b1b..721146a7 100755 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -210,7 +210,7 @@ const createDeploymentsPage = async (createPage) => { } const createSearchPage = async (createPage, searchContext) => { - const template = path.resolve('./src/components/SearchComponent.jsx') + const template = path.resolve('./src/components/Search/SearchComponent.jsx') const slug = `/concepts/search/` createPage({ diff --git a/package-lock.json b/package-lock.json index 2693100c..90c37bac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4156,6 +4156,14 @@ "react-transition-group": "^4.4.0" } }, + "@material-ui/icons": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz", + "integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==", + "requires": { + "@babel/runtime": "^7.4.4" + } + }, "@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 df494419..c9f0ae77 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ }, "dependencies": { "@material-ui/core": "^4.12.3", + "@material-ui/icons": "^4.11.2", "@oceanprotocol/art": "^3.2.0", "axios": "^0.21.4", "classnames": "^2.3.1", diff --git a/src/components/SearchComponent.jsx b/src/components/Search/SearchComponent.jsx similarity index 91% rename from src/components/SearchComponent.jsx rename to src/components/Search/SearchComponent.jsx index c3eda496..8ce867b4 100644 --- a/src/components/SearchComponent.jsx +++ b/src/components/Search/SearchComponent.jsx @@ -8,6 +8,9 @@ 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: { @@ -107,9 +110,9 @@ const ClientSearch = ({ searchableData }) => { return (
- + { >
-

Search

-
+
diff --git a/src/components/Search/SearchComponent.module.scss b/src/components/Search/SearchComponent.module.scss new file mode 100644 index 00000000..7be7c8f9 --- /dev/null +++ b/src/components/Search/SearchComponent.module.scss @@ -0,0 +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 From a0d1c77f48bb1f9c7975cdddd26742725fccb6fe Mon Sep 17 00:00:00 2001 From: Akshay Date: Sun, 12 Sep 2021 23:27:03 +0200 Subject: [PATCH 07/23] Issue-545: WIP Create SearchClient component --- src/components/HeaderHome.jsx | 3 +- src/components/Search/SearchClient.jsx | 159 +++++++++++++++++++ src/components/Search/SearchComponent.jsx | 183 ++++------------------ 3 files changed, 188 insertions(+), 157 deletions(-) create mode 100644 src/components/Search/SearchClient.jsx diff --git a/src/components/HeaderHome.jsx b/src/components/HeaderHome.jsx index 2ad511fa..5895c5cb 100644 --- a/src/components/HeaderHome.jsx +++ b/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 = () => ( (

{siteTitle}

{siteDescription}

+ ) diff --git a/src/components/Search/SearchClient.jsx b/src/components/Search/SearchClient.jsx new file mode 100644 index 00000000..d08fea5e --- /dev/null +++ b/src/components/Search/SearchClient.jsx @@ -0,0 +1,159 @@ +import React, { useState, useEffect } from 'react' +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' + }, + paper: { + backgroundColor: theme.palette.background.paper, + boxShadow: theme.shadows[5], + padding: theme.spacing(2, 4, 3), + margin: theme.spacing(3) + } +})) + +const SearchClient = ({ searchableData }) => { + const [searchState, setSearchState] = useState({ + isLoading: true, + searchResults: [], + search: null, + isError: false, + termFrequency: true, + removeStopWords: false, + searchQuery: '', + selectedStrategy: '', + selectedSanitizer: '', + touched: false + }) + + const classes = useStyles() + const [open, setOpen] = React.useState(false) + + const handleOpen = () => { + setOpen(true) + } + + const handleClose = () => { + setOpen(false) + } + + useEffect(() => { + rebuildIndex(searchableData) + }, []) + + const rebuildIndex = (searchableData) => { + // const { + // removeStopWords, + // selectedStrategy, + // selectedSanitizer, + // termFrequency + // } = searchState + const dataToSearch = new JsSearch.Search('title') + dataToSearch.addIndex('title') + + dataToSearch.addDocuments(searchableData) + setSearchState({ + ...searchState, + isLoading: false, + search: dataToSearch + }) + } + + const searchData = (e) => { + const { search } = searchState + const queryResult = search.search(e.target.value) + setSearchState({ + ...searchState, + touched: true, + searchQuery: e.target.value, + searchResults: queryResult + }) + } + const handleSubmit = (e) => { + e.preventDefault() + } + + return ( +
+ + + +
+
+
+
+ +
+
+
+ {searchState.touched ? ( + + ) : null} +
+
+
+ + +
+ ) +} + +SearchClient.propTypes = { + searchableData: PropTypes.array.isRequired +} + +const ResultList = ({ searchResults }) => { + return ( +
+
Total results found: {searchResults.length}
+ + {searchResults.map((element) => ( + + {element.title} + + ))} + +
+ ) +} + +ResultList.propTypes = { + searchResults: PropTypes.array.isRequired +} + +export default SearchClient diff --git a/src/components/Search/SearchComponent.jsx b/src/components/Search/SearchComponent.jsx index 8ce867b4..3254bced 100644 --- a/src/components/Search/SearchComponent.jsx +++ b/src/components/Search/SearchComponent.jsx @@ -1,32 +1,12 @@ -import React, { useState, useEffect } from 'react' -import * as JsSearch from 'js-search' -import { Link } from 'gatsby' +import React from 'react' + +import { graphql } 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' - }, - paper: { - backgroundColor: theme.palette.background.paper, - boxShadow: theme.shadows[5], - padding: theme.spacing(2, 4, 3), - margin: theme.spacing(3) - } -})) +import SearchClient from './SearchClient' -const SearchComponent = ({ pageContext }) => { +const SearchComponent = ({ data, pageContext }) => { + console.log('data', data) const { searchData } = pageContext const searchableData = searchData.map(({ node }) => { return { @@ -38,143 +18,34 @@ const SearchComponent = ({ pageContext }) => { }) return ( <> - + ) } SearchComponent.propTypes = { - pageContext: PropTypes.object.isRequired + pageContext: PropTypes.object, + data: PropTypes.object } -const ClientSearch = ({ searchableData }) => { - const [searchState, setSearchState] = useState({ - isLoading: true, - searchResults: [], - search: null, - isError: false, - termFrequency: true, - removeStopWords: false, - searchQuery: '', - selectedStrategy: '', - selectedSanitizer: '', - touched: false - }) - - const classes = useStyles() - const [open, setOpen] = React.useState(false) - - const handleOpen = () => { - setOpen(true) +export const SearchComponentQuery = graphql` + query { + allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/content/" } }) { + edges { + node { + fields { + slug + section + } + frontmatter { + title + description + } + id + } + } + } } - - const handleClose = () => { - setOpen(false) - } - - useEffect(() => { - rebuildIndex(searchableData) - }, []) - - const rebuildIndex = (searchableData) => { - // const { - // removeStopWords, - // selectedStrategy, - // selectedSanitizer, - // termFrequency - // } = searchState - const dataToSearch = new JsSearch.Search('title') - dataToSearch.addIndex('title') - - dataToSearch.addDocuments(searchableData) - setSearchState({ - ...searchState, - isLoading: false, - search: dataToSearch - }) - } - - const searchData = (e) => { - const { search } = searchState - const queryResult = search.search(e.target.value) - setSearchState({ - ...searchState, - touched: true, - searchQuery: e.target.value, - searchResults: queryResult - }) - } - const handleSubmit = (e) => { - e.preventDefault() - } - - return ( -
- - - -
-
-
-
- -
-
-
- {searchState.touched ? ( - - ) : null} -
-
-
- - -
- ) -} - -ClientSearch.propTypes = { - searchableData: PropTypes.array.isRequired -} - -const ResultList = ({ searchResults }) => { - return ( -
-
Total results found: {searchResults.length}
- - {searchResults.map((element) => ( - - {element.title} - - ))} - -
- ) -} - -ResultList.propTypes = { - searchResults: PropTypes.array.isRequired -} +` export default SearchComponent From aac6849bc52a985961194efbc224f32af948cf07 Mon Sep 17 00:00:00 2001 From: Akshay Date: Mon, 13 Sep 2021 00:07:51 +0200 Subject: [PATCH 08/23] Issue-545: Add search button on home page --- gatsby-node.js | 33 -------------- src/components/HeaderHome.jsx | 3 +- src/components/Search/SearchClient.jsx | 7 ++- src/components/Search/SearchComponent.jsx | 54 ++++++++++------------- src/pages/index.jsx | 5 ++- src/pages/index.module.scss | 5 +++ 6 files changed, 39 insertions(+), 68 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index 721146a7..f0823b61 100755 --- a/gatsby-node.js +++ b/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 // diff --git a/src/components/HeaderHome.jsx b/src/components/HeaderHome.jsx index 5895c5cb..2ad511fa 100644 --- a/src/components/HeaderHome.jsx +++ b/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 = () => ( (

{siteTitle}

{siteDescription}

- ) diff --git a/src/components/Search/SearchClient.jsx b/src/components/Search/SearchClient.jsx index d08fea5e..35ee6af5 100644 --- a/src/components/Search/SearchClient.jsx +++ b/src/components/Search/SearchClient.jsx @@ -89,7 +89,12 @@ const SearchClient = ({ searchableData }) => { return (
- { - 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 diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 425a0bdf..2822a06f 100755 --- a/src/pages/index.jsx +++ b/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 }) => ( ))} - +
+ +
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss index 95e98992..4b556f2d 100644 --- a/src/pages/index.module.scss +++ b/src/pages/index.module.scss @@ -112,3 +112,8 @@ transition: transform 0.2s ease-out; } } + +.searchButton { + margin-top: 20px; + text-align: center; +} \ No newline at end of file From a52b53a48ca3af8a41976c1b6ed9a3abcaa5aefe Mon Sep 17 00:00:00 2001 From: Akshay Date: Mon, 13 Sep 2021 00:12:29 +0200 Subject: [PATCH 09/23] Feature: Add Search button in section header --- src/components/Header.jsx | 3 ++- src/components/Search/SearchClient.jsx | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 9c3b9e4f..0061c99b 100755 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -2,6 +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' const query = graphql` query { @@ -37,7 +38,6 @@ const Header = () => (

{siteTitle}

-
diff --git a/src/components/Search/SearchClient.jsx b/src/components/Search/SearchClient.jsx index 35ee6af5..dec17391 100644 --- a/src/components/Search/SearchClient.jsx +++ b/src/components/Search/SearchClient.jsx @@ -88,7 +88,7 @@ const SearchClient = ({ searchableData }) => { } return ( -
+ <>
-
+ ) } From e4aa6aaf85bfbb7439cda0258c413a80d3c73e3c Mon Sep 17 00:00:00 2001 From: Akshay Date: Mon, 13 Sep 2021 00:15:56 +0200 Subject: [PATCH 10/23] Issue-545: Add description in search index --- src/components/Search/SearchClient.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Search/SearchClient.jsx b/src/components/Search/SearchClient.jsx index dec17391..ba49dd6a 100644 --- a/src/components/Search/SearchClient.jsx +++ b/src/components/Search/SearchClient.jsx @@ -64,6 +64,7 @@ const SearchClient = ({ searchableData }) => { // } = searchState const dataToSearch = new JsSearch.Search('title') dataToSearch.addIndex('title') + dataToSearch.addIndex('description') dataToSearch.addDocuments(searchableData) setSearchState({ From 1466fce1cb257276712d87637378961d1babfb14 Mon Sep 17 00:00:00 2001 From: Akshay Date: Mon, 13 Sep 2021 00:17:29 +0200 Subject: [PATCH 11/23] Issue-545: Add border to search box --- src/components/Search/SearchClient.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Search/SearchClient.jsx b/src/components/Search/SearchClient.jsx index ba49dd6a..6fa08600 100644 --- a/src/components/Search/SearchClient.jsx +++ b/src/components/Search/SearchClient.jsx @@ -120,7 +120,8 @@ const SearchClient = ({ searchableData }) => { placeholder="Search..." style={{ margin: '0 auto', - width: '400px' + width: '400px', + border: '1px solid' }} type="text" /> From eb59b06c465e968a956bef130351199c45d612b6 Mon Sep 17 00:00:00 2001 From: Akshay Date: Mon, 13 Sep 2021 00:50:18 +0200 Subject: [PATCH 12/23] Issue-545: Add content as index --- gatsby-config.js | 3 ++- package-lock.json | 14 ++++++++++++++ package.json | 1 + src/components/Search/SearchClient.jsx | 1 + src/components/Search/SearchComponent.jsx | 6 ++++-- 5 files changed, 22 insertions(+), 3 deletions(-) diff --git a/gatsby-config.js b/gatsby-config.js index ba9169a5..31879ac8 100755 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -170,6 +170,7 @@ module.exports = { path: `${__dirname}/markdowns/markdowns`, name: 'markdowns' } - } + }, + `gatsby-transformer-remark-plaintext` ] } diff --git a/package-lock.json b/package-lock.json index 90c37bac..6470ad06 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14411,6 +14411,15 @@ } } }, + "gatsby-transformer-remark-plaintext": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/gatsby-transformer-remark-plaintext/-/gatsby-transformer-remark-plaintext-1.0.3.tgz", + "integrity": "sha512-V6nU03WKW65Xy5DyQPeVSMf5KVNoXX2yHbq53H0u1a/MkakG3osNTDWiTDxVQ8kg9OZ/04Dblczg9QxRnLjrYA==", + "requires": { + "@babel/runtime": "^7.0.0", + "strip-markdown": "^3.0.2" + } + }, "gatsby-transformer-sharp": { "version": "2.12.1", "resolved": "https://registry.npmjs.org/gatsby-transformer-sharp/-/gatsby-transformer-sharp-2.12.1.tgz", @@ -23950,6 +23959,11 @@ "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.0.tgz", "integrity": "sha512-e6/d0eBu7gHtdCqFt0xJr642LdToM5/cN4Qb9DbHjVx1CP5RyeM+zH7pbecEmDv/lBqb0QH+6Uqq75rxFPkM0w==" }, + "strip-markdown": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/strip-markdown/-/strip-markdown-3.1.2.tgz", + "integrity": "sha512-NjwW6CEefesmHQPs7lof/lgnSriqUnRNOWpnrNPq9A7/yOCdnhaB7DcxlhYuN7WiiRUe349aitAsTQ/ajM9Dmw==" + }, "strip-outer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz", diff --git a/package.json b/package.json index c9f0ae77..beba29c7 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "gatsby-source-git": "^1.1.0", "gatsby-source-graphql": "^2.14.0", "gatsby-transformer-remark": "^2.16.1", + "gatsby-transformer-remark-plaintext": "^1.0.3", "gatsby-transformer-sharp": "^2.12.1", "gatsby-transformer-xml": "^2.10.0", "gatsby-transformer-yaml": "^2.11.0", diff --git a/src/components/Search/SearchClient.jsx b/src/components/Search/SearchClient.jsx index 6fa08600..1ed26312 100644 --- a/src/components/Search/SearchClient.jsx +++ b/src/components/Search/SearchClient.jsx @@ -65,6 +65,7 @@ const SearchClient = ({ searchableData }) => { const dataToSearch = new JsSearch.Search('title') dataToSearch.addIndex('title') dataToSearch.addIndex('description') + dataToSearch.addIndex('text') dataToSearch.addDocuments(searchableData) setSearchState({ diff --git a/src/components/Search/SearchComponent.jsx b/src/components/Search/SearchComponent.jsx index 5b358fcc..e9a219eb 100644 --- a/src/components/Search/SearchComponent.jsx +++ b/src/components/Search/SearchComponent.jsx @@ -19,18 +19,20 @@ const SearchComponent = () => { description } id + plainText } } } } `) - + console.log('data', data) const searchableData = data.allMarkdownRemark.edges.map(({ node }) => { return { title: node.frontmatter.title, description: node.frontmatter.description, slug: node.fields.slug, - id: node.id + id: node.id, + text: node.plainText } }) return ( From 8e088aabcb9f70605e42d7515da3c2fbde745489 Mon Sep 17 00:00:00 2001 From: Akshay Date: Mon, 13 Sep 2021 01:14:31 +0200 Subject: [PATCH 13/23] Issue-545: Add frontmatter to show title in result --- content/tutorials/marketplace-consume-data-asset.md | 5 +++++ content/tutorials/marketplace-introduction.md | 5 +++++ content/tutorials/marketplace-publish-data-asset.md | 4 ++++ content/tutorials/marketplace-swap-and-stake.md | 4 ++++ 4 files changed, 18 insertions(+) diff --git a/content/tutorials/marketplace-consume-data-asset.md b/content/tutorials/marketplace-consume-data-asset.md index 7bf88b0d..c17d4103 100644 --- a/content/tutorials/marketplace-consume-data-asset.md +++ b/content/tutorials/marketplace-consume-data-asset.md @@ -1,3 +1,8 @@ +--- +title: Consume data asset +description: +--- + 1. Go to Ocean Marketplace https://market.oceanprotocol.com/ 2. Search for the data asset. The Ocean Marketplace provides features to search the Data/Algorithms by text, and users can also sort the result by published date. diff --git a/content/tutorials/marketplace-introduction.md b/content/tutorials/marketplace-introduction.md index 49df4f2c..23d75930 100644 --- a/content/tutorials/marketplace-introduction.md +++ b/content/tutorials/marketplace-introduction.md @@ -1,3 +1,8 @@ +--- +title: Ocean Market +description: +--- + # Ocean Market https://market.oceanprotocol.com/ diff --git a/content/tutorials/marketplace-publish-data-asset.md b/content/tutorials/marketplace-publish-data-asset.md index 623fabef..2d647071 100644 --- a/content/tutorials/marketplace-publish-data-asset.md +++ b/content/tutorials/marketplace-publish-data-asset.md @@ -1,3 +1,7 @@ +--- +title: Publish a Data asset on Ocean Market place. +description: +--- # Publish a Data asset on Ocean Market place. ## What can be published? diff --git a/content/tutorials/marketplace-swap-and-stake.md b/content/tutorials/marketplace-swap-and-stake.md index 54feadf5..8f9184c4 100644 --- a/content/tutorials/marketplace-swap-and-stake.md +++ b/content/tutorials/marketplace-swap-and-stake.md @@ -1,3 +1,7 @@ +--- +title: Swap and/or Stake Tokens +description: +--- # Swap and/or Stake Tokens ## Swap Ocean Tokens against Datatokens From 01350950c4dda8e02b1c670955a4df6510b90ceb Mon Sep 17 00:00:00 2001 From: Akshay Date: Mon, 13 Sep 2021 01:21:26 +0200 Subject: [PATCH 14/23] Issue-545: Add frontmatter to show title in result --- content/tutorials/marketplace-introduction.md | 2 -- content/tutorials/marketplace-publish-data-asset.md | 1 - content/tutorials/marketplace-swap-and-stake.md | 1 - 3 files changed, 4 deletions(-) diff --git a/content/tutorials/marketplace-introduction.md b/content/tutorials/marketplace-introduction.md index 23d75930..3d7cc4e2 100644 --- a/content/tutorials/marketplace-introduction.md +++ b/content/tutorials/marketplace-introduction.md @@ -3,8 +3,6 @@ title: Ocean Market description: --- -# Ocean Market - https://market.oceanprotocol.com/ ## Landing page diff --git a/content/tutorials/marketplace-publish-data-asset.md b/content/tutorials/marketplace-publish-data-asset.md index 2d647071..7e9a1ada 100644 --- a/content/tutorials/marketplace-publish-data-asset.md +++ b/content/tutorials/marketplace-publish-data-asset.md @@ -2,7 +2,6 @@ title: Publish a Data asset on Ocean Market place. description: --- -# Publish a Data asset on Ocean Market place. ## What can be published? diff --git a/content/tutorials/marketplace-swap-and-stake.md b/content/tutorials/marketplace-swap-and-stake.md index 8f9184c4..87fa9c21 100644 --- a/content/tutorials/marketplace-swap-and-stake.md +++ b/content/tutorials/marketplace-swap-and-stake.md @@ -2,7 +2,6 @@ title: Swap and/or Stake Tokens description: --- -# Swap and/or Stake Tokens ## Swap Ocean Tokens against Datatokens From 213e04a0bee2398af1093adcfb01e4ba23fe0745 Mon Sep 17 00:00:00 2001 From: Akshay Date: Mon, 13 Sep 2021 20:45:55 +0200 Subject: [PATCH 15/23] Issue-#545: Create search page --- gatsby-node.js | 12 +- package-lock.json | 12 ++ package.json | 1 + src/components/Header.jsx | 4 +- src/components/Search/SearchButton.jsx | 13 ++ src/components/Search/SearchClient.jsx | 142 ++++++++---------- src/components/Search/SearchComponent.jsx | 22 ++- .../Search/SearchComponent.module.scss | 16 +- src/pages/index.jsx | 4 +- src/pages/index.module.scss | 2 +- 10 files changed, 132 insertions(+), 96 deletions(-) create mode 100644 src/components/Search/SearchButton.jsx 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 +} From 81faf612014039e6d5040eda32ca7e8fb66699f2 Mon Sep 17 00:00:00 2001 From: Akshay Date: Mon, 13 Sep 2021 22:35:15 +0200 Subject: [PATCH 16/23] Issue-#545: Improve search bar --- src/components/Search/SearchClient.jsx | 29 ++++++++++++++++------- src/components/Search/SearchComponent.jsx | 2 +- 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/src/components/Search/SearchClient.jsx b/src/components/Search/SearchClient.jsx index f402d40c..1febcf5a 100644 --- a/src/components/Search/SearchClient.jsx +++ b/src/components/Search/SearchClient.jsx @@ -5,7 +5,10 @@ import PropTypes from 'prop-types' import { makeStyles } from '@material-ui/core/styles' import List from '@material-ui/core/List' import ListItem from '@material-ui/core/ListItem' - +import Pagination from '@material-ui/lab/Pagination' +import TextField from '@material-ui/core/TextField' +import InputAdornment from '@material-ui/core/InputAdornment' +import SearchIcon from '@material-ui/icons/Search' const useStyles = makeStyles((theme) => ({ parent: { overflow: 'hidden', @@ -83,17 +86,23 @@ const SearchClient = ({ searchableData }) => { return (
- + + + ) }} - type="text" /> @@ -133,6 +142,8 @@ const ResultList = ({ searchResults }) => { return (
Total results found: {searchResults.length}
+ +
{searchResults.map((element) => ( diff --git a/src/components/Search/SearchComponent.jsx b/src/components/Search/SearchComponent.jsx index 8db40f10..a7795cde 100644 --- a/src/components/Search/SearchComponent.jsx +++ b/src/components/Search/SearchComponent.jsx @@ -43,7 +43,7 @@ const SearchComponent = () => {
-
+
Date: Mon, 13 Sep 2021 22:41:43 +0200 Subject: [PATCH 17/23] Issue-#545: Add try-catch block --- gatsby-node.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index e8a96610..0205bffd 100755 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -179,13 +179,19 @@ exports.createPages = ({ graphql, actions }) => { } const createSearchPage = async (createPage) => { - const template = path.resolve('./src/components/Search/SearchComponent.jsx') - const slug = `/search/` + try { + const pageTemplate = path.resolve( + './src/components/Search/SearchComponent.jsx' + ) + const url = `/search/` - createPage({ - path: slug, - component: template - }) + createPage({ + path: pageTemplate, + component: url + }) + } catch (error) { + console.log(error.message) + } } const createDeploymentsPage = async (createPage) => { From 48936254439bac047b616e80f791965bd8f99249 Mon Sep 17 00:00:00 2001 From: Akshay Date: Mon, 13 Sep 2021 23:17:42 +0200 Subject: [PATCH 18/23] Issue-#545: Improve result render --- gatsby-node.js | 20 +++---- src/components/Search/SearchButton.jsx | 4 +- src/components/Search/SearchClient.jsx | 20 ++++--- src/components/Search/SearchComponent.jsx | 10 ++-- src/components/Search/SearchResultElement.jsx | 54 +++++++++++++++++++ 5 files changed, 79 insertions(+), 29 deletions(-) create mode 100644 src/components/Search/SearchResultElement.jsx diff --git a/gatsby-node.js b/gatsby-node.js index 0205bffd..d8ebf28c 100755 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -179,19 +179,15 @@ exports.createPages = ({ graphql, actions }) => { } const createSearchPage = async (createPage) => { - try { - const pageTemplate = path.resolve( - './src/components/Search/SearchComponent.jsx' - ) - const url = `/search/` + const pageTemplate = path.resolve( + './src/components/Search/SearchComponent.jsx' + ) + const url = `/search/` - createPage({ - path: pageTemplate, - component: url - }) - } catch (error) { - console.log(error.message) - } + createPage({ + path: url, + component: pageTemplate + }) } const createDeploymentsPage = async (createPage) => { diff --git a/src/components/Search/SearchButton.jsx b/src/components/Search/SearchButton.jsx index d9642a38..b7c41e6a 100644 --- a/src/components/Search/SearchButton.jsx +++ b/src/components/Search/SearchButton.jsx @@ -5,8 +5,8 @@ import { IconButton } from '@material-ui/core' import SearchIcon from '@material-ui/icons/Search' const SearchButton = () => { return ( - - navigate('/search')} /> + navigate('/search')}> + ) } diff --git a/src/components/Search/SearchClient.jsx b/src/components/Search/SearchClient.jsx index 1febcf5a..bba459af 100644 --- a/src/components/Search/SearchClient.jsx +++ b/src/components/Search/SearchClient.jsx @@ -1,14 +1,14 @@ import React, { useState, useEffect } from 'react' import * as JsSearch from 'js-search' -import { Link } from 'gatsby' import PropTypes from 'prop-types' import { makeStyles } from '@material-ui/core/styles' import List from '@material-ui/core/List' import ListItem from '@material-ui/core/ListItem' -import Pagination from '@material-ui/lab/Pagination' import TextField from '@material-ui/core/TextField' import InputAdornment from '@material-ui/core/InputAdornment' import SearchIcon from '@material-ui/icons/Search' +import SearchResultElement from './SearchResultElement' + const useStyles = makeStyles((theme) => ({ parent: { overflow: 'hidden', @@ -89,7 +89,6 @@ const SearchClient = ({ searchableData }) => { { > {searchState.touched ? (
-
Total results found: {searchState.searchResults.length}
- - + {/* {searchState.searchResults.map((element) => ( { {element.title} ))} - + + */} +
) : null}
@@ -140,15 +139,14 @@ 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} + ))} diff --git a/src/components/Search/SearchComponent.jsx b/src/components/Search/SearchComponent.jsx index a7795cde..28c69500 100644 --- a/src/components/Search/SearchComponent.jsx +++ b/src/components/Search/SearchComponent.jsx @@ -27,15 +27,17 @@ const SearchComponent = () => { } } `) - console.log('data', data) const searchableData = data.allMarkdownRemark.edges.map(({ node }) => { + var section = 'Concepts' + if (node.fields.slug.startsWith('/tutorials')) section = 'Tutorials' + return { title: node.frontmatter.title, description: node.frontmatter.description, - slug: - node.fields.slug[0] === '/' ? node.fields.slug : '/' + node.fields.slug, + slug: node.fields.slug, id: node.id, - text: node.plainText + text: node.plainText, + section: section } }) diff --git a/src/components/Search/SearchResultElement.jsx b/src/components/Search/SearchResultElement.jsx new file mode 100644 index 00000000..466b2ae6 --- /dev/null +++ b/src/components/Search/SearchResultElement.jsx @@ -0,0 +1,54 @@ +import React from 'react' +import { Link } from 'gatsby' +import PropTypes from 'prop-types' +import Card from '@material-ui/core/Card' +import CardContent from '@material-ui/core/CardContent' +import Typography from '@material-ui/core/Typography' +import { makeStyles } from '@material-ui/core/styles' + +const useStyles = makeStyles({ + root: { + minWidth: 275 + }, + bullet: { + display: 'inline-block', + margin: '0 2px', + transform: 'scale(0.8)' + }, + title: { + fontSize: 14 + }, + pos: { + marginBottom: 12 + } +}) + +const SearchResultElement = ({ element }) => { + const classes = useStyles() + const { slug, title, section, description } = element + return ( + + + + {section} + + + {title} + + + {description ? description.substring(0, 100) + '...' : null} + + + + ) +} + +SearchResultElement.propTypes = { + element: PropTypes.object.isRequired +} + +export default SearchResultElement From 70a92bb4a3589ef03dd864faf1afb011ca6d9dbd Mon Sep 17 00:00:00 2001 From: Akshay Date: Mon, 13 Sep 2021 23:22:19 +0200 Subject: [PATCH 19/23] Issue-#545: Resolve codeclimate issue --- gatsby-node.js | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index d8ebf28c..df531261 100755 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -132,7 +132,6 @@ 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( @@ -172,24 +171,18 @@ exports.createPages = ({ graphql, actions }) => { await createReadTheDocsPage(createPage, 'provider', providerList) await createReadTheDocsPage(createPage, 'ocean-subgraph', subgraphList) + // Create search page + createPage({ + path: `/search/`, + component: path.resolve('./src/components/Search/SearchComponent.jsx') + }) + resolve() }) ) }) } -const createSearchPage = async (createPage) => { - const pageTemplate = path.resolve( - './src/components/Search/SearchComponent.jsx' - ) - const url = `/search/` - - createPage({ - path: url, - component: pageTemplate - }) -} - const createDeploymentsPage = async (createPage) => { const template = path.resolve('./src/components/Deployments.jsx') const slug = `/concepts/deployments/` From 9ceeea7c4e555560edb979e7a70ca8beea7a6b33 Mon Sep 17 00:00:00 2001 From: Akshay Date: Mon, 13 Sep 2021 23:34:59 +0200 Subject: [PATCH 20/23] Issue-#545: Resolve build issue --- src/components/Search/SearchComponent.jsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/Search/SearchComponent.jsx b/src/components/Search/SearchComponent.jsx index 28c69500..cf1676f1 100644 --- a/src/components/Search/SearchComponent.jsx +++ b/src/components/Search/SearchComponent.jsx @@ -5,8 +5,9 @@ import { useStaticQuery, graphql } from 'gatsby' import SearchClient from './SearchClient' import Layout from '../../components/Layout' import HeaderSection from '../../components/HeaderSection' +import PropTypes from 'prop-types' -const SearchComponent = () => { +const SearchComponent = ({ location }) => { const data = useStaticQuery(graphql` query { allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/content/" } }) { @@ -58,4 +59,8 @@ const SearchComponent = () => { ) } +SearchComponent.propTypes = { + location: PropTypes.object.isRequired +} + export default SearchComponent From 8b6382c66deaf7286ed6ba233f45e826a5ffc79a Mon Sep 17 00:00:00 2001 From: Akshay Date: Tue, 14 Sep 2021 12:28:53 +0200 Subject: [PATCH 21/23] Issue-#545: Auto focus serach box --- src/components/Search/SearchClient.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Search/SearchClient.jsx b/src/components/Search/SearchClient.jsx index bba459af..3a8f2646 100644 --- a/src/components/Search/SearchClient.jsx +++ b/src/components/Search/SearchClient.jsx @@ -93,6 +93,7 @@ const SearchClient = ({ searchableData }) => { margin: '10px auto', width: '100%' }} + autoFocus value={searchState.searchQuery} onChange={searchData} InputProps={{ From e2c8b8e6c2ef49106940debed514a4ea49ea4183 Mon Sep 17 00:00:00 2001 From: Akshay Date: Tue, 14 Sep 2021 13:13:05 +0200 Subject: [PATCH 22/23] Issue-#545: Change location of serach button on home page --- src/components/HeaderHome.jsx | 10 +++++++++- src/components/Search/SearchClient.jsx | 15 +-------------- src/components/Search/SearchComponent.jsx | 9 +++++++-- src/pages/index.jsx | 4 ---- 4 files changed, 17 insertions(+), 21 deletions(-) diff --git a/src/components/HeaderHome.jsx b/src/components/HeaderHome.jsx index 2ad511fa..d52f08e9 100644 --- a/src/components/HeaderHome.jsx +++ b/src/components/HeaderHome.jsx @@ -3,6 +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 SearchButton from '../components/Search/SearchButton' const HeaderHome = () => ( (

{siteTitle}

-

{siteDescription}

+

+

+ {siteDescription} +
+ +
+
+

) diff --git a/src/components/Search/SearchClient.jsx b/src/components/Search/SearchClient.jsx index 3a8f2646..f3244e5b 100644 --- a/src/components/Search/SearchClient.jsx +++ b/src/components/Search/SearchClient.jsx @@ -108,22 +108,11 @@ const SearchClient = ({ searchableData }) => {
{searchState.touched ? (
- {/* - {searchState.searchResults.map((element) => ( - - {element.title} - - ))} - - */}
) : null} @@ -137,8 +126,6 @@ SearchClient.propTypes = { } const ResultList = ({ searchResults }) => { - const url = typeof window !== 'undefined' ? window.location.host : '' - console.log('url', url) return (
Total results found: {searchResults.length}
diff --git a/src/components/Search/SearchComponent.jsx b/src/components/Search/SearchComponent.jsx index cf1676f1..2ba9531e 100644 --- a/src/components/Search/SearchComponent.jsx +++ b/src/components/Search/SearchComponent.jsx @@ -46,10 +46,15 @@ const SearchComponent = ({ location }) => {
-
+
diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 2e3e9ffc..d3129e20 100755 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -9,7 +9,6 @@ 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 SearchButton from '../components/Search/SearchButton' const SectionBox = ({ to, children, ...props }) => to ? ( @@ -67,9 +66,6 @@ const IndexPage = ({ data, location }) => ( ))} -
- -
From 2bcd97503d395743a339af458fe1438c8818f1c6 Mon Sep 17 00:00:00 2001 From: Akshay Date: Tue, 14 Sep 2021 13:39:39 +0200 Subject: [PATCH 23/23] Issue-#545 Add message --- src/components/Search/SearchClient.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/Search/SearchClient.jsx b/src/components/Search/SearchClient.jsx index f3244e5b..70ee378b 100644 --- a/src/components/Search/SearchClient.jsx +++ b/src/components/Search/SearchClient.jsx @@ -128,7 +128,10 @@ SearchClient.propTypes = { const ResultList = ({ searchResults }) => { return (
-
Total results found: {searchResults.length}
+
+ Total results found: {searchResults.length} [Searched from Tutorials and + Core Concepts] +