new layout and info block

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

package.json

@@ -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",

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.<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',

src/@types/mdx.d.ts

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

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

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

src/components/Add.tsx

@@ -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 ? (

src/components/Info.mdx

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

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

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

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 = () => (
   <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>
 )
 

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

src/styles/global.css

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

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"]
 }