From e3623d00aec036390911a33682e090b585c94897 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 16 Oct 2019 22:10:03 +0200 Subject: [PATCH] move to Next.js --- .gitignore | 5 ++- README.md | 4 +- next.config.js | 35 ++++++++++++++++ package.json | 24 ++++------- src/App.jsx | 26 ------------ src/components/Add.jsx | 4 +- src/components/Dropzone.css | 6 ++- src/components/Dropzone.jsx | 8 ++-- src/components/Footer.jsx | 8 ++-- src/components/Spinner.jsx | 4 +- src/index.html | 13 ------ src/index.js | 5 --- src/{App.css => pages/index.css} | 2 +- src/pages/index.js | 33 +++++++++++++++ src/public/favicon.ico | Bin 0 -> 32038 bytes src/styles/global.css | 1 - webpack.config.js | 68 ------------------------------- 17 files changed, 98 insertions(+), 148 deletions(-) create mode 100644 next.config.js delete mode 100644 src/App.jsx delete mode 100644 src/index.html delete mode 100644 src/index.js rename src/{App.css => pages/index.css} (95%) create mode 100644 src/pages/index.js create mode 100644 src/public/favicon.ico delete mode 100644 webpack.config.js diff --git a/.gitignore b/.gitignore index 49bde49..cd28e47 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ node_modules npm-debug.log .DS_Store -dist -public +/.next/ +/out/ +/build package-lock.json \ No newline at end of file diff --git a/README.md b/README.md index 0bacf4b..82d81bc 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ [![Build Status](https://travis-ci.com/oceanprotocol/ipfs.svg?branch=master)](https://travis-ci.com/oceanprotocol/ipfs) [![js oceanprotocol](https://img.shields.io/badge/js-oceanprotocol-7b1173.svg)](https://github.com/oceanprotocol/eslint-config-oceanprotocol) -This repo holds a simple React app built with Webpack serving as the frontpage of [ipfs.oceanprotocol.com](https://ipfs.oceanprotocol.com) from where you can add files to IPFS via drag and drop. +This repo holds a simple React app built with [Next.js](https://nextjs.org) serving as the frontpage of [ipfs.oceanprotocol.com](https://ipfs.oceanprotocol.com) from where you can add files to IPFS via drag and drop. General IPFS integration within the Ocean Protocol stack is outlined in [OEP-15: Distributed Asset File Storage with IPFS](https://github.com/oceanprotocol/OEPs/tree/master/15). @@ -32,7 +32,7 @@ npm i npm start ``` -Will start a live-reloading local server, reachable under [localhost:8080](http://localhost:8080). +Will start a live-reloading local server, reachable under [localhost:3000](http://localhost:3000). ## Production diff --git a/next.config.js b/next.config.js new file mode 100644 index 0000000..d4a4e38 --- /dev/null +++ b/next.config.js @@ -0,0 +1,35 @@ +const withCSS = require('@zeit/next-css') + +const withSvgr = (nextConfig = {}, nextComposePlugins = {}) => { + return Object.assign({}, nextConfig, { + webpack(config, options) { + config.module.rules.push({ + test: /\.svg$/, + use: [ + { + loader: '@svgr/webpack', + options: { + icon: true + } + } + ] + }) + + if (typeof nextConfig.webpack === 'function') { + return nextConfig.webpack(config, options) + } + + return config + } + }) +} + +module.exports = withSvgr( + withCSS({ + cssModules: true, + cssLoaderOptions: { + importLoaders: 1, + localIdentName: '[local]___[hash:base64:5]' + } + }) +) diff --git a/package.json b/package.json index 31a4f01..2a8dfd2 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,9 @@ "version": "1.0.0", "description": "Ocean Protocol's Public IPFS Node.", "scripts": { - "start": "webpack-dev-server", - "build": "NODE_ENV=production webpack", + "start": "next dev", + "build": "next build", + "server": "next start", "test": "eslint ./src/**/*.{js,jsx}", "format": "prettier ./src/**/*.{css,yml,js,jsx,json} --write" }, @@ -13,32 +14,21 @@ "dependencies": { "@oceanprotocol/art": "^2.2.0", "@oceanprotocol/typographies": "^0.1.0", + "@zeit/next-css": "^1.0.1", "ipfs-http-client": "^38.2.0", + "next": "9.1.1", + "next-svgr": "0.0.2", "react": "^16.10.2", "react-dom": "^16.10.2", "react-dropzone": "^10.1.10" }, "devDependencies": { - "@babel/core": "^7.6.4", - "@babel/plugin-proposal-class-properties": "^7.5.5", - "@babel/polyfill": "^7.6.0", - "@babel/preset-env": "^7.6.3", - "@babel/preset-react": "^7.6.3", - "@svgr/webpack": "^4.3.3", - "babel-loader": "^8.0.6", - "copy-webpack-plugin": "^5.0.4", - "css-loader": "^3.2.0", "eslint": "^6.5.1", "eslint-config-oceanprotocol": "^1.5.0", "eslint-config-prettier": "^6.4.0", "eslint-plugin-prettier": "^3.1.1", "eslint-plugin-react": "^7.16.0", - "mini-css-extract-plugin": "^0.8.0", - "prettier": "^1.18.2", - "style-loader": "^1.0.0", - "webpack": "^4.41.2", - "webpack-cli": "^3.3.9", - "webpack-dev-server": "^3.8.2" + "prettier": "^1.18.2" }, "eslintConfig": { "extends": [ diff --git a/src/App.jsx b/src/App.jsx deleted file mode 100644 index 42ea822..0000000 --- a/src/App.jsx +++ /dev/null @@ -1,26 +0,0 @@ -import '@babel/polyfill' -import React from 'react' -import './styles/global.css' -import './App.css' - -import Add from './components/Add' -import Logo from '@oceanprotocol/art/logo/logo-white.svg' -import { title, description } from '../config' -import Footer from './components/Footer' - -export default function App() { - return ( -
-
- -

{title}

-

-

- -
-
- ) -} diff --git a/src/components/Add.jsx b/src/components/Add.jsx index e9c6527..a29ae67 100644 --- a/src/components/Add.jsx +++ b/src/components/Add.jsx @@ -2,7 +2,7 @@ import React, { useState } from 'react' import { saveToIpfs } from '../ipfs' import { ipfsGateway } from '../../config' import Dropzone from './Dropzone' -import './Add.css' +import styles from './Add.css' import Spinner from './Spinner' export default function Add() { @@ -17,7 +17,7 @@ export default function Add() { } return ( -
+
{loading ? ( ) : fileHash ? ( diff --git a/src/components/Dropzone.css b/src/components/Dropzone.css index 84aed76..8a9161d 100644 --- a/src/components/Dropzone.css +++ b/src/components/Dropzone.css @@ -15,11 +15,13 @@ outline: 0; } -.dropzone.dragover { +.dragover { + composes: dropzone; border-color: var(--brand-pink); } -.dropzone.disabled { +.disabled { + composes: dropzone; opacity: 0.5; pointer-events: none; } diff --git a/src/components/Dropzone.jsx b/src/components/Dropzone.jsx index 6121e0f..f310ee6 100644 --- a/src/components/Dropzone.jsx +++ b/src/components/Dropzone.jsx @@ -1,7 +1,7 @@ import React, { useCallback } from 'react' import PropTypes from 'prop-types' import { useDropzone } from 'react-dropzone' -import './Dropzone.css' +import styles from './Dropzone.css' Dropzone.propTypes = { handleOnDrop: PropTypes.func.isRequired, @@ -25,10 +25,10 @@ export default function Dropzone({ handleOnDrop, disabled, multiple }) {
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index 410b0d7..d60901a 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -1,12 +1,14 @@ import React from 'react' import { links } from '../../config' -import './Footer.css' +import styles from './Footer.css' export default function Footer() { + const year = new Date().getFullYear() + return ( -