new layout and info block

This commit is contained in:
Matthias Kretschmann 2019-10-18 13:10:43 +02:00
parent f998a90546
commit 70bde3a669
Signed by: m
GPG Key ID: 606EEEF3C479A91F
14 changed files with 163 additions and 29 deletions

View File

@ -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]'
}
})
)
)

View File

@ -12,6 +12,8 @@
"author": "Matthias Kretschmann <matthias@oceanprotocol.com>",
"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",

View File

@ -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.<br /><a href="https://blog.oceanprotocol.com/ocean-and-ipfs-sitting-in-the-merkle-tree-43c623c356d7">Learn More →</a>`,
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',

4
src/@types/mdx.d.ts vendored Normal file
View File

@ -0,0 +1,4 @@
declare module '*.mdx' {
let MDXComponent: (props: any) => JSX.Element
export default MDXComponent
}

View File

@ -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));
}

View File

@ -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);

View File

@ -78,6 +78,7 @@ export default function Add() {
return (
<div className={styles.add}>
<h2 className={styles.title}>Add a file to IPFS</h2>
{loading ? (
<Spinner message={message} />
) : fileHash ? (

32
src/components/Info.mdx Normal file
View File

@ -0,0 +1,32 @@
import styles from './Info.module.css'
<aside className={styles.info}>
## Gateway
```text
https://ipfs.oceanprotocol.com/ipfs/<hash>
https://ipfs.oceanprotocol.com/ipns/<domain>
```
## API
The IPFS node exposes selected endpoints:
- `/api/v0/add`
- `/api/v0/id`
- `/api/v0/version`
To use e.g. with [js-ipfs-http-client](https://github.com/ipfs/js-ipfs-http-client):
```js
import ipfsClient from 'ipfs-http-client'
const ipfs = ipfsClient({
host: 'ipfs.oceanprotocol.com',
port: '443',
protocol: 'https'
})
```
</aside>

View File

@ -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);
}

View File

@ -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;
}

View File

@ -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 = () => (
<Layout>
<header className={styles.header}>
<Logo />
<h1 className={styles.title}>{title}</h1>
<p
className={styles.description}
dangerouslySetInnerHTML={{ __html: description }}
/>
</header>
<Add />
<div className={styles.grid}>
<div>
<header className={styles.header}>
<Logo />
<h1 className={styles.title}>{title}</h1>
<p className={styles.description}>{description}</p>
<a href={learnMore}>Learn More </a>
</header>
<Add />
</div>
<Info />
</div>
</Layout>
)

40
src/styles/_code.css Normal file
View File

@ -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%;
}

View File

@ -87,3 +87,5 @@ picture {
margin: 0 auto;
display: block;
}
@import '_code.css';

View File

@ -21,5 +21,5 @@
"isolatedModules": true
},
"exclude": ["node_modules"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.mdx"]
}