diff --git a/content/site.json b/content/site.json new file mode 100644 index 000000000..a8b48c5e9 --- /dev/null +++ b/content/site.json @@ -0,0 +1,22 @@ +{ + "site": { + "siteTitle": "Ocean Market", + "siteTagline": "A marketplace to find and publish open data sets in the Ocean Network.", + "siteUrl": "https://market.oceanprotocol.now.sh/", + "copyright": "All Rights Reserved. Powered by [Ocean Protocol](https://oceanprotocol.com)", + "menu": [ + { + "name": "Explore", + "link": "/explore" + }, + { + "name": "Publish", + "link": "/publish" + }, + { + "name": "Transactions", + "link": "/transactions" + } + ] + } +} diff --git a/package-lock.json b/package-lock.json index 99bf7ebc5..5cdfa8d94 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8385,6 +8385,15 @@ "popper.js": "^1.14.1" } }, + "@types/react-helmet": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.0.0.tgz", + "integrity": "sha512-NBMPAxgjpaMooXa51cU1BTgrX6T+hQbMiLm77JhBbfOzPQea3RB5rNpPOD5xGWHIVpGXHd59cltEzIq0qglGcQ==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/react-jsonschema-form": { "version": "1.7.3", "resolved": "https://registry.npmjs.org/@types/react-jsonschema-form/-/react-jsonschema-form-1.7.3.tgz", diff --git a/package.json b/package.json index 0dd2e78e5..428cb683f 100644 --- a/package.json +++ b/package.json @@ -71,6 +71,7 @@ "@types/numeral": "^0.0.28", "@types/react": "^16.9.41", "@types/react-datepicker": "^3.0.2", + "@types/react-helmet": "^6.0.0", "@types/react-jsonschema-form": "^1.7.3", "@types/react-paginate": "^6.2.1", "@types/shortid": "0.0.29", diff --git a/site.config.js b/site.config.js deleted file mode 100644 index 8a013534e..000000000 --- a/site.config.js +++ /dev/null @@ -1,21 +0,0 @@ -module.exports = { - siteTitle: 'Ocean Market', - siteTagline: `A marketplace to find and publish open data sets in the Ocean Network.`, - siteUrl: 'https://market.oceanprotocol.now.sh/', - copyright: - 'All Rights Reserved. Powered by [Ocean Protocol](https://oceanprotocol.com)', - menu: [ - { - name: 'Explore', - link: '/explore' - }, - { - name: 'Publish', - link: '/publish' - }, - { - name: 'Transactions', - link: '/transactions' - } - ] -} diff --git a/src/@types/global.d.ts b/src/@types/globals.d.ts similarity index 60% rename from src/@types/global.d.ts rename to src/@types/globals.d.ts index bf7fc1676..684f7b6b1 100644 --- a/src/@types/global.d.ts +++ b/src/@types/globals.d.ts @@ -1,3 +1,8 @@ +declare module '*.module.css' { + const classes: { [key: string]: string } + export default classes +} + declare module '*.svg' { import * as React from 'react' export const ReactComponent: React.FunctionComponent = T | null -declare module '*.md' +declare module '*.gif' diff --git a/src/Layout.module.css b/src/components/Layout.module.css similarity index 100% rename from src/Layout.module.css rename to src/components/Layout.module.css diff --git a/src/components/Layout.test.tsx b/src/components/Layout.test.tsx new file mode 100644 index 000000000..85b07c902 --- /dev/null +++ b/src/components/Layout.test.tsx @@ -0,0 +1,9 @@ +import React from 'react' +import testRender from '../../tests/unit/testRender' +import Layout from './Layout' + +describe('Layout', () => { + testRender( + Hello + ) +}) diff --git a/src/Layout.tsx b/src/components/Layout.tsx similarity index 55% rename from src/Layout.tsx rename to src/components/Layout.tsx index 613f0ffc6..5a8edb340 100644 --- a/src/Layout.tsx +++ b/src/components/Layout.tsx @@ -1,31 +1,40 @@ -import React, { ReactNode } from 'react' -import Head from 'next/head' -import { NextSeo } from 'next-seo' +import React, { ReactNode, ReactElement } from 'react' +import { Helmet } from 'react-helmet' +import Header from './organisms/Header' +import Footer from './organisms/Footer' +import PageHeader from './molecules/PageHeader' import styles from './Layout.module.css' -import Header from './components/organisms/Header' -import Footer from './components/organisms/Footer' -import PageHeader from './components/molecules/PageHeader' +import Seo from './atoms/Seo' + +export interface LayoutProps { + children: ReactNode + title?: string + description?: string + noPageHeader?: boolean + location?: Location +} export default function Layout({ children, title, description, - noPageHeader -}: { - children: ReactNode - title?: string - description?: string - noPageHeader?: boolean -}) { + noPageHeader, + location +}: LayoutProps): ReactElement { return (
- + - + - +
diff --git a/src/components/atoms/Button.module.css b/src/components/atoms/Button.module.css index ee50599c3..24c6ffff9 100644 --- a/src/components/atoms/Button.module.css +++ b/src/components/atoms/Button.module.css @@ -16,8 +16,7 @@ background: var(--brand-grey-light); box-shadow: 0 9px 18px 0 rgba(0, 0, 0, 0.1); user-select: none; - margin-left: calc(var(--spacer) / 4); - margin-right: calc(var(--spacer) / 4); + text-align: center; } .button:first-child { @@ -57,21 +56,28 @@ background: var(--brand-gradient); } -.link { +.ghost, +.ghost:hover, +.ghost:focus, +.ghost:active { + color: var(--brand-grey); + background: var(--brand-white); +} + +.text, +.text:hover, +.text:focus, +.text:active { border: 0; + border-radius: 0; outline: 0; + padding: 0; display: inline-block; background: 0; - padding: 0; color: var(--brand-pink); box-shadow: none; cursor: pointer; } -.link:hover { - background: none; - color: var(--brand-pink); - box-shadow: none; -} /* Size Modifiers */ .small { diff --git a/src/components/atoms/Button.stories.tsx b/src/components/atoms/Button.stories.tsx index 65958d428..8c730a347 100644 --- a/src/components/atoms/Button.stories.tsx +++ b/src/components/atoms/Button.stories.tsx @@ -1,14 +1,57 @@ import React from 'react' +import { action } from '@storybook/addon-actions' import Button from './Button' -import { Center } from '../../../.storybook/helpers' export default { - title: 'Atoms/Button', - decorators: [(storyFn: any) =>
{storyFn()}
] + title: 'Atoms/Button' } -export const Normal = () => +export const Default = () => ( + <> + +
+
+ + +) -export const Primary = () => +export const Primary = () => ( + <> + +
+
+ + +) -export const Link = () => +export const Ghost = () => ( + <> + +
+
+ + +) + +export const Text = () => ( + <> + +
+
+ + +) diff --git a/src/components/atoms/Button.tsx b/src/components/atoms/Button.tsx index eb296d04a..fa6aa566c 100644 --- a/src/components/atoms/Button.tsx +++ b/src/components/atoms/Button.tsx @@ -1,44 +1,53 @@ -import React, { ReactElement } from 'react' -import Link from 'next/link' +import React, { ReactNode, FormEvent } from 'react' +import { Link } from 'gatsby' +import classNames from 'classnames/bind' import styles from './Button.module.css' -declare type ButtonProps = { - children: string | ReactElement +const cx = classNames.bind(styles) + +interface ButtonProps { + children: ReactNode className?: string - primary?: boolean - link?: boolean href?: string - size?: string - onClick?: any + onClick?: (e: FormEvent) => void disabled?: boolean + to?: string + name?: string + size?: 'small' + style?: 'primary' | 'ghost' | 'text' + type?: 'submit' + download?: boolean } -const Button = ({ - primary, - link, +export default function Button({ href, - size, children, className, + to, + size, + style, ...props -}: ButtonProps) => { - const classes = primary - ? `${styles.button} ${styles.primary}` - : link - ? `${styles.button} ${styles.link}` - : styles.button +}: ButtonProps) { + const styleClasses = cx({ + button: true, + primary: style === 'primary', + ghost: style === 'ghost', + text: style === 'text', + small: size === 'small', + [className]: className + }) - return href ? ( - - - {children} - + return to ? ( + + {children} + ) : href ? ( + + {children} + ) : ( - ) } - -export default Button diff --git a/src/components/atoms/Seo.tsx b/src/components/atoms/Seo.tsx new file mode 100644 index 000000000..e2c02c766 --- /dev/null +++ b/src/components/atoms/Seo.tsx @@ -0,0 +1,56 @@ +import React from 'react' +import { Helmet } from 'react-helmet' +import { useSiteMetadata } from '../../hooks/useSiteMetadata' + +export default function Seo({ + title, + description, + uri, + location +}: { + title?: string + description?: string + uri: string + location: Location +}) { + const { siteTitle, siteTagline, siteUrl, siteImage } = useSiteMetadata() + + // Remove trailing slash from all URLs + const canonical = `${siteUrl}${uri}`.replace(/\/$/, '') + + return ( + + + + {typeof window !== 'undefined' && + window.location && + window.location.hostname !== 'oceanprotocol.com' && ( + + )} + + + + + + + + + + + + + + + + ) +} diff --git a/src/components/atoms/Table/DdoLinkCell.tsx b/src/components/atoms/Table/DdoLinkCell.tsx index d5881712f..7d50fd7b2 100644 --- a/src/components/atoms/Table/DdoLinkCell.tsx +++ b/src/components/atoms/Table/DdoLinkCell.tsx @@ -1,11 +1,6 @@ import React from 'react' -import Time from '../Time' -import Link from 'next/link' +import { Link } from 'gatsby' export default function DdoLinkCell({ id, name }: { id: any; name: any }) { - return ( - - {name} - - ) + return {name} } diff --git a/src/components/atoms/Tags.tsx b/src/components/atoms/Tags.tsx index cf5981776..e7c0ae8c7 100644 --- a/src/components/atoms/Tags.tsx +++ b/src/components/atoms/Tags.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Link from 'next/link' +import { Link } from 'gatsby' import shortid from 'shortid' import slugify from 'slugify' import styles from './Tags.module.css' @@ -20,10 +20,8 @@ const Tag = ({ tag, noLinks }: { tag: string; noLinks?: boolean }) => { return noLinks ? ( {cleanTag} ) : ( - - - {cleanTag} - + + {cleanTag} ) } diff --git a/src/components/molecules/AssetTeaser.tsx b/src/components/molecules/AssetTeaser.tsx index 394b6fc1d..feaa4d3e9 100644 --- a/src/components/molecules/AssetTeaser.tsx +++ b/src/components/molecules/AssetTeaser.tsx @@ -1,6 +1,6 @@ import React from 'react' import { DDO } from '@oceanprotocol/squid' -import Link from 'next/link' +import { Link } from 'gatsby' import Dotdotdot from 'react-dotdotdot' import { AdditionalInformationMarket, @@ -40,7 +40,7 @@ const AssetTeaser: React.FC = ({ ddo }: AssetTeaserProps) => { return (
- +

{name}

{access === 'Compute' && ( diff --git a/src/components/molecules/JobDetailsDialog.tsx b/src/components/molecules/JobDetailsDialog.tsx index 93d2d77f8..bb3313f71 100644 --- a/src/components/molecules/JobDetailsDialog.tsx +++ b/src/components/molecules/JobDetailsDialog.tsx @@ -6,7 +6,7 @@ import styles from './JobDetailsDialog.module.css' import MetaItem from '../templates/AssetDetails/MetaItem' import Time from '../atoms/Time' import shortid from 'shortid' -import Link from 'next/link' +import { Link } from 'gatsby' export default function JobDetailsDialog({ computeItem, @@ -46,8 +46,8 @@ export default function JobDetailsDialog({ ( - - {url} + + {url} ))} /> @@ -55,24 +55,12 @@ export default function JobDetailsDialog({ {algorithmLogUrl && ( - {algorithmLogUrl} - - } + content={{algorithmLogUrl}} /> )} - {name} - - } + content={{name}} />
diff --git a/src/components/molecules/Menu.tsx b/src/components/molecules/Menu.tsx index baca45be9..363cbd4f0 100644 --- a/src/components/molecules/Menu.tsx +++ b/src/components/molecules/Menu.tsx @@ -1,8 +1,8 @@ import React from 'react' -import Link from 'next/link' -import { useRouter } from 'next/router' -import { menu } from '../../../site.config' +import { Link } from 'gatsby' +import { useLocation } from '@reach/router' import styles from './Menu.module.css' +import { useSiteMetadata } from '../../hooks/useSiteMetadata' declare type MenuItem = { name: string @@ -10,20 +10,23 @@ declare type MenuItem = { } function MenuLink({ item }: { item: MenuItem }) { - const router = useRouter() + const location = useLocation() + const classes = - router && router.pathname === item.link + location && location.pathname === item.link ? `${styles.link} ${styles.active}` : styles.link return ( - - {item.name} + + {item.name} ) } export default function Menu() { + const { menu } = useSiteMetadata() + return (