make Gatsby start

.prettierrc

@@ -1,6 +1,6 @@
 {
-    "semi": false,
-    "singleQuote": true,
-    "trailingComma": "none",
-    "tabWidth": 2
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "tabWidth": 2
 }

.travis.yml

@@ -20,7 +20,7 @@ before_script:
   # - rm -rf "${HOME}/.ocean/keeper-contracts/artifacts"
   # - bash -x start_ocean.sh --no-commons --no-dashboard 2>&1 > start_ocean.log &
   # - cd ..
-  - cp .env.example .env && cp .env.example .env.build
+  # - cp .env.example .env
   # overwrite AQUARIUS_URI from above .env files, which default to Spree
   - export AQUARIUS_URI='https://aquarius.pacific.market.dev-ocean.com'
 

content/site.json

@@ -3,6 +3,8 @@
     "siteTitle": "Ocean Market",
     "siteTagline": "A marketplace to find and publish open data sets in the Ocean Network.",
     "siteUrl": "https://market.oceanprotocol.now.sh/",
+    "siteIcon": "node_modules/@oceanprotocol/art/logo/favicon-white.png",
+    "siteImage": "../src/images/share.png",
     "copyright": "All Rights Reserved. Powered by [Ocean Protocol](https://oceanprotocol.com)",
     "menu": [
       {

gatsby-config.js

@@ -28,6 +28,13 @@ module.exports = {
         path: `${__dirname}/node_modules/@oceanprotocol/art/`
       }
     },
+    {
+      resolve: 'gatsby-plugin-sharp',
+      options: {
+        defaultQuality: 80
+      }
+    },
+    'gatsby-transformer-sharp',
     'gatsby-transformer-json',
     'gatsby-transformer-remark',
     {
@@ -41,6 +48,20 @@ module.exports = {
     },
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-remove-trailing-slashes',
+    {
+      // https://www.gatsbyjs.org/packages/gatsby-plugin-manifest/#using-with-gatsby-plugin-offline
+      resolve: 'gatsby-plugin-manifest',
+      options: {
+        name: siteConfig.site.siteTitle,
+        short_name: siteConfig.site.siteTitle,
+        start_url: '/',
+        background_color: '#ffffff',
+        theme_color: '#141414',
+        icon: siteConfig.site.siteIcon,
+        display: 'standalone',
+        cache_busting_mode: 'none'
+      }
+    },
     'gatsby-plugin-webpack-size'
   ]
 }

gatsby-node.js

@@ -0,0 +1,8 @@
+exports.onCreateWebpackConfig = ({ actions }) => {
+  actions.setWebpackConfig({
+    node: {
+      // 'fs' fix for squid.js
+      fs: 'empty'
+    }
+  })
+}

package.json

@@ -5,8 +5,8 @@
   "license": "Apache-2.0",
   "homepage": "https://oceanprotocol.com",
   "scripts": {
-    "start": "gatsby develop --host 0.0.0.0",
-    "build": "gatsby build",
+    "start": "gatsby clean && gatsby develop --host 0.0.0.0",
+    "build": "gatsby clean && gatsby build",
     "serve": "serve -s public/",
     "jest": "NODE_ENV=test jest -c tests/unit/jest.config.js",
     "test": "npm run lint && npm run jest",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@loadable/component": "^5.13.0",
     "@now/node": "^1.7.1",
-    "@oceanprotocol/art": "^2.2.0",
+    "@oceanprotocol/art": "^3.0.0",
     "@oceanprotocol/react": "0.0.11",
     "@oceanprotocol/squid": "^2.2.0",
     "@oceanprotocol/typographies": "^0.1.0",
@@ -34,14 +34,18 @@
     "dotenv": "^8.2.0",
     "filesize": "^6.1.0",
     "gatsby": "^2.23.12",
+    "gatsby-image": "^2.4.9",
+    "gatsby-plugin-manifest": "^2.4.14",
     "gatsby-plugin-react-helmet": "^3.3.6",
     "gatsby-plugin-remove-trailing-slashes": "^2.3.7",
+    "gatsby-plugin-sharp": "^2.6.14",
     "gatsby-plugin-svgr": "^2.0.2",
     "gatsby-plugin-webpack-size": "^1.0.0",
     "gatsby-source-filesystem": "^2.3.14",
     "gatsby-source-graphql": "^2.5.7",
     "gatsby-transformer-json": "^2.4.7",
     "gatsby-transformer-remark": "^2.8.20",
+    "gatsby-transformer-sharp": "^2.5.7",
     "is-url-superb": "^4.0.0",
     "numeral": "^2.0.6",
     "react": "^16.13.1",
@@ -63,8 +67,11 @@
   },
   "devDependencies": {
     "@babel/core": "^7.10.3",
-    "@storybook/addon-storyshots": "^5.3.19",
-    "@storybook/react": "^5.3.19",
+    "@babel/preset-typescript": "^7.10.1",
+    "@storybook/addon-actions": "^5.3.19",
+    "@storybook/addon-storyshots": "^6.0.0-beta.37",
+    "@storybook/react": "^6.0.0-beta.37",
+    "@svgr/webpack": "^5.4.0",
     "@testing-library/jest-dom": "^5.11.0",
     "@testing-library/react": "^10.4.3",
     "@testing-library/react-hooks": "^3.3.0",
@@ -90,6 +97,8 @@
     "jest": "^26.1.0",
     "node-mocks-http": "^1.8.1",
     "prettier": "^2.0.5",
+    "serve": "^11.3.2",
+    "source-map-explorer": "^2.4.2",
     "typescript": "^3.9.5"
   },
   "repository": {

src/components/organisms/Compute.tsx

@@ -14,7 +14,7 @@ import {
 } from '@oceanprotocol/react'
 import styles from './Compute.module.css'
 import Button from '../atoms/Button'
-import Input from '../atoms/Input/Input'
+import Input from '../atoms/Input'
 
 export default function Compute({
   ddo,

src/components/organisms/Header.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Link } from 'gatsby'
 import Menu from '../molecules/Menu'
 import styles from './Header.module.css'
-import Logo from '@oceanprotocol/art/logo/logo.svg'
+import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
 import { useSiteMetadata } from '../../hooks/useSiteMetadata'
 
 export default function Header() {

src/components/pages/Home.tsx

@@ -3,9 +3,9 @@ import { Link } from 'gatsby'
 import shortid from 'shortid'
 import Button from '../atoms/Button'
 import SearchBar from '../molecules/SearchBar'
-import Explore from '../../images/explore.svg'
-import Publish from '../../images/publish.svg'
-import DataPool from '../../images/datapool.svg'
+import { ReactComponent as Explore } from '../../images/explore.svg'
+import { ReactComponent as Publish } from '../../images/publish.svg'
+import { ReactComponent as DataPool } from '../../images/datapool.svg'
 import styles from './Home.module.css'
 
 const actions = [
@@ -41,17 +41,17 @@ export default function HomePage(): ReactElement {
 
       <div className={styles.actions}>
         {actions.map((action) => (
-          <Link key={shortid.generate()} to={action.link}>
-            <a
-              className={action.comingSoon ? styles.comingSoon : styles.action}
-            >
-              {action.icon}
-              <h3 className={styles.actionTitle}>{action.title}</h3>
-              <p>{action.text}</p>
-              <Button style={action.primary ? 'primary' : null}>
-                {action.action}
-              </Button>
-            </a>
+          <Link
+            key={shortid.generate()}
+            to={action.link}
+            className={action.comingSoon ? styles.comingSoon : styles.action}
+          >
+            {action.icon}
+            <h3 className={styles.actionTitle}>{action.title}</h3>
+            <p>{action.text}</p>
+            <Button style={action.primary ? 'primary' : null}>
+              {action.action}
+            </Button>
           </Link>
         ))}
       </div>

src/hooks/useSiteMetadata.ts

@@ -10,6 +10,14 @@ const query = graphql`
               siteTitle
               siteTagline
               siteUrl
+              siteIcon
+              siteImage {
+                childImageSharp {
+                  original {
+                    src
+                  }
+                }
+              }
               copyright
               menu {
                 name

tsconfig.json

@@ -4,6 +4,7 @@
     "module": "commonjs",
     "lib": ["dom", "es2017"],
     "resolveJsonModule": true,
+    "moduleResolution": "Node",
     "jsx": "react",
     "esModuleInterop": true,
     "experimentalDecorators": true,