From 70bde3a66964b87abf2ea4dad12b8a04be952733 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 18 Oct 2019 13:10:43 +0200 Subject: [PATCH] new layout and info block --- next.config.js | 17 ++++++++------ package.json | 2 ++ site.config.js | 4 +++- src/@types/mdx.d.ts | 4 ++++ src/Layout.module.css | 1 + src/components/Add.module.css | 9 +++++++- src/components/Add.tsx | 1 + src/components/Info.mdx | 32 ++++++++++++++++++++++++++ src/components/Info.module.css | 11 +++++++++ src/pages/index.module.css | 41 ++++++++++++++++++++++++++-------- src/pages/index.tsx | 26 ++++++++++++--------- src/styles/_code.css | 40 +++++++++++++++++++++++++++++++++ src/styles/global.css | 2 ++ tsconfig.json | 2 +- 14 files changed, 163 insertions(+), 29 deletions(-) create mode 100644 src/@types/mdx.d.ts create mode 100644 src/components/Info.mdx create mode 100644 src/components/Info.module.css create mode 100644 src/styles/_code.css diff --git a/next.config.js b/next.config.js index d4a4e38..a259af2 100644 --- a/next.config.js +++ b/next.config.js @@ -1,4 +1,5 @@ const withCSS = require('@zeit/next-css') +const withMDX = require('@next/mdx')() const withSvgr = (nextConfig = {}, nextComposePlugins = {}) => { return Object.assign({}, nextConfig, { @@ -25,11 +26,13 @@ const withSvgr = (nextConfig = {}, nextComposePlugins = {}) => { } module.exports = withSvgr( - withCSS({ - cssModules: true, - cssLoaderOptions: { - importLoaders: 1, - localIdentName: '[local]___[hash:base64:5]' - } - }) + withMDX( + withCSS({ + cssModules: true, + cssLoaderOptions: { + importLoaders: 1, + localIdentName: '[local]___[hash:base64:5]' + } + }) + ) ) diff --git a/package.json b/package.json index 7f38850..e0264b9 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,8 @@ "author": "Matthias Kretschmann ", "license": "Apache-2.0", "dependencies": { + "@mdx-js/loader": "^1.5.1", + "@next/mdx": "^9.1.1", "@oceanprotocol/art": "^2.2.0", "@oceanprotocol/typographies": "^0.1.0", "@zeit/next-css": "^1.0.1", diff --git a/site.config.js b/site.config.js index ea41c94..899a71d 100644 --- a/site.config.js +++ b/site.config.js @@ -1,6 +1,8 @@ module.exports = { title: 'Ocean Protocol 💖 IPFS', - description: `Ocean Protocol's public IPFS Node, setup to be a public gateway, and to provide some access to its HTTP API for everyone.
Learn More →`, + description: `Ocean Protocol's public IPFS Node, setup to be a public gateway, and to provide some access to its HTTP API for everyone.`, + learnMore: + 'https://blog.oceanprotocol.com/ocean-and-ipfs-sitting-in-the-merkle-tree-43c623c356d7', url: 'https://ipfs.oceanprotocol.com', ipfsGateway: 'https://ipfs.oceanprotocol.com', ipfsNodeUri: 'https://ipfs.oceanprotocol.com:443', diff --git a/src/@types/mdx.d.ts b/src/@types/mdx.d.ts new file mode 100644 index 0000000..224c4d6 --- /dev/null +++ b/src/@types/mdx.d.ts @@ -0,0 +1,4 @@ +declare module '*.mdx' { + let MDXComponent: (props: any) => JSX.Element + export default MDXComponent +} diff --git a/src/Layout.module.css b/src/Layout.module.css index 89cd1e0..1b81cd8 100644 --- a/src/Layout.module.css +++ b/src/Layout.module.css @@ -11,6 +11,7 @@ @media screen and (min-width: 640px) { .app { + padding: var(--spacer) calc(var(--spacer) * 2); height: auto; min-height: calc(100vh - (var(--page-frame) * 2) - (var(--spacer) * 2)); } diff --git a/src/components/Add.module.css b/src/components/Add.module.css index 203bd0b..1dbf320 100644 --- a/src/components/Add.module.css +++ b/src/components/Add.module.css @@ -1,13 +1,20 @@ @import '../styles/_variables.css'; .add { - max-width: 40rem; width: 100%; overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; } +.title { + font-size: var(--font-size-base); + color: var(--brand-grey-lighter); + margin-bottom: calc(var(--spacer) / 2); + margin-top: 0; + text-align: left; +} + .error { font-size: var(--font-size-small); color: var(--red); diff --git a/src/components/Add.tsx b/src/components/Add.tsx index 36f01a4..4f45aef 100644 --- a/src/components/Add.tsx +++ b/src/components/Add.tsx @@ -78,6 +78,7 @@ export default function Add() { return (
+

Add a file to IPFS

{loading ? ( ) : fileHash ? ( diff --git a/src/components/Info.mdx b/src/components/Info.mdx new file mode 100644 index 0000000..cb04400 --- /dev/null +++ b/src/components/Info.mdx @@ -0,0 +1,32 @@ +import styles from './Info.module.css' + + diff --git a/src/components/Info.module.css b/src/components/Info.module.css new file mode 100644 index 0000000..352c6bd --- /dev/null +++ b/src/components/Info.module.css @@ -0,0 +1,11 @@ +@import '../styles/_variables.css'; + +.info { + font-size: var(--font-size-small); + text-align: left; +} + +.info h2 { + font-size: var(--font-size-large); + color: var(--brand-grey-light); +} diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 54ed679..988071d 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -1,8 +1,39 @@ @import '../styles/_variables.css'; +.grid { + display: grid; + gap: calc(var(--spacer) * 3); + max-width: 40rem; + margin: calc(var(--spacer) * 2) auto var(--spacer) auto; +} + +@media screen and (min-width: 1140px) { + .grid { + max-width: 70rem; + text-align: left; + grid-template-columns: 2fr 1fr; + } + + .grid > aside { + margin-top: calc(var(--spacer) * 2); + } +} + .header { width: 100%; - margin-top: var(--spacer); + max-width: 40rem; + margin: 0 auto calc(var(--spacer) * 2) auto; +} + +.header svg { + width: 80px; + height: 80px; +} + +@media screen and (min-width: 1140px) { + .header svg { + margin-left: 0; + } } .title { @@ -19,12 +50,4 @@ .description { font-size: var(--font-size-large); color: var(--brand-grey-lighter); - max-width: 40rem; - margin-left: auto; - margin-right: auto; -} - -.header svg { - width: 80px; - height: 80px; } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 04e05d6..3d4f3aa 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -5,22 +5,28 @@ import '../styles/global.css' import Add from '../components/Add' import Logo from '@oceanprotocol/art/logo/logo-white.svg' -import { title, description } from '../../site.config' +import { title, description, learnMore } from '../../site.config' import styles from './index.module.css' import Layout from '../Layout' +import Info from '../components/Info.mdx' const Home = () => ( -
- -

{title}

-

-

- +
+
+
+ +

{title}

+

{description}

+ Learn More → +
+ + +
+ + +
) diff --git a/src/styles/_code.css b/src/styles/_code.css new file mode 100644 index 0000000..8218021 --- /dev/null +++ b/src/styles/_code.css @@ -0,0 +1,40 @@ +@import '_variables.css'; + +code { + font-family: var(--font-family-monospace); + font-size: var(--font-size-small); + color: var(--brand-grey-light); + text-shadow: none; +} + +:not(pre) > code { + display: inline-block; + padding-left: 0.3rem; + padding-right: 0.3rem; +} + +pre { + display: block; + margin: calc(var(--spacer) / 2) 0; + padding: 0; + position: relative; + border: 1px solid var(--brand-grey-dark); + border-radius: var(--border-radius); + + overflow: auto; + -webkit-overflow-scrolling: touch; + max-height: 800px; + width: 100%; +} + +pre code { + background: none; + padding: calc(var(--spacer) / 1.5); + white-space: pre; + display: block; + overflow-wrap: normal; + word-wrap: normal; + word-break: normal; + float: left; + width: 100%; +} diff --git a/src/styles/global.css b/src/styles/global.css index 4b29059..1beb6c9 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -87,3 +87,5 @@ picture { margin: 0 auto; display: block; } + +@import '_code.css'; diff --git a/tsconfig.json b/tsconfig.json index 42c842c..5bdd590 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,5 +21,5 @@ "isolatedModules": true }, "exclude": ["node_modules"], - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"] + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.mdx"] }