mirror of
https://github.com/fazo96/ipfs-boards
synced 2025-01-10 12:24:20 +01:00
WIP new UI
This commit is contained in:
parent
bdcc6c1274
commit
a42d0e9226
22
components/AppBar.js
Normal file
22
components/AppBar.js
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { makeStyles } from '@material-ui/core/styles'
|
||||||
|
import { AppBar, Toolbar, Typography, IconButton } from '@material-ui/core'
|
||||||
|
import ProfileIcon from '@material-ui/icons/AccountCircle'
|
||||||
|
|
||||||
|
const useStyles = makeStyles(theme => ({
|
||||||
|
title: {
|
||||||
|
flexGrow: 1
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
|
||||||
|
export default function BoardsAppBar() {
|
||||||
|
const styles = useStyles()
|
||||||
|
return (
|
||||||
|
<AppBar position="static">
|
||||||
|
<Toolbar>
|
||||||
|
<Typography variant="h6" className={styles.title}>IPFS Boards</Typography>
|
||||||
|
<IconButton color="inherit"><ProfileIcon /></IconButton>
|
||||||
|
</Toolbar>
|
||||||
|
</AppBar>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -1,56 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import Link from 'next/link'
|
|
||||||
|
|
||||||
const links = [
|
|
||||||
{ href: 'https://zeit.co/now', label: 'ZEIT' },
|
|
||||||
{ href: 'https://github.com/zeit/next.js', label: 'GitHub' }
|
|
||||||
].map(link => {
|
|
||||||
link.key = `nav-link-${link.href}-${link.label}`
|
|
||||||
return link
|
|
||||||
})
|
|
||||||
|
|
||||||
const Nav = () => (
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<Link href='/'>
|
|
||||||
<a>Home</a>
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
{links.map(({ key, href, label }) => (
|
|
||||||
<li key={key}>
|
|
||||||
<a href={href}>{label}</a>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<style jsx>{`
|
|
||||||
:global(body) {
|
|
||||||
margin: 0;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, Avenir Next, Avenir,
|
|
||||||
Helvetica, sans-serif;
|
|
||||||
}
|
|
||||||
nav {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
nav > ul {
|
|
||||||
padding: 4px 16px;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
display: flex;
|
|
||||||
padding: 6px 8px;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: #067df7;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
</nav>
|
|
||||||
)
|
|
||||||
|
|
||||||
export default Nav
|
|
||||||
46
components/system.js
Normal file
46
components/system.js
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
export function getGlobalScope() {
|
||||||
|
try {
|
||||||
|
return window
|
||||||
|
} catch (error) {
|
||||||
|
return global
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getGlobalData() {
|
||||||
|
const scope = getGlobalScope()
|
||||||
|
if (!scope.ipfsBoards) scope.ipfsBoards = {}
|
||||||
|
return scope.ipfsBoards
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getIPFS() {
|
||||||
|
const data = getGlobalData()
|
||||||
|
if (data.ipfs) return data.ipfs
|
||||||
|
const IPFS = await import('ipfs')
|
||||||
|
data.ipfs = await IPFS.create()
|
||||||
|
return data.ipfs
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getOrbitDB() {
|
||||||
|
const data = getGlobalData()
|
||||||
|
if (data.orbitDb) return data.orbitDb
|
||||||
|
const OrbitDB = await import('orbit-db')
|
||||||
|
const BoardStore = await import('orbit-db-discussion-board')
|
||||||
|
OrbitDB.addDatabaseType(BoardStore.type, BoardStore)
|
||||||
|
data.orbitDb = await OrbitDB.createInstance(await getIPFS())
|
||||||
|
data.boards = {}
|
||||||
|
return data.orbitDb
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function openBoard(id) {
|
||||||
|
if (data.boards && data.boards[id]) return data.boards[id]
|
||||||
|
const BoardStore = await import('orbit-db-discussion-board')
|
||||||
|
const options = {
|
||||||
|
type: BoardStore.type,
|
||||||
|
create: true,
|
||||||
|
write: ['*']
|
||||||
|
}
|
||||||
|
const orbitDb = await getOrbitDB()
|
||||||
|
const db = await orbitDb.open(id)
|
||||||
|
data.boards[id] = db
|
||||||
|
return db
|
||||||
|
}
|
||||||
21
components/theme.js
Normal file
21
components/theme.js
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import { createMuiTheme } from '@material-ui/core/styles';
|
||||||
|
import { red } from '@material-ui/core/colors';
|
||||||
|
|
||||||
|
const theme = createMuiTheme({
|
||||||
|
palette: {
|
||||||
|
primary: {
|
||||||
|
main: '#556cd6',
|
||||||
|
},
|
||||||
|
secondary: {
|
||||||
|
main: '#19857b',
|
||||||
|
},
|
||||||
|
error: {
|
||||||
|
main: red.A400,
|
||||||
|
},
|
||||||
|
background: {
|
||||||
|
default: '#fff',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default theme;
|
||||||
313
package-lock.json
generated
313
package-lock.json
generated
@ -885,6 +885,130 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
|
||||||
"integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw=="
|
"integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw=="
|
||||||
},
|
},
|
||||||
|
"@emotion/hash": {
|
||||||
|
"version": "0.7.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.3.tgz",
|
||||||
|
"integrity": "sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw=="
|
||||||
|
},
|
||||||
|
"@material-ui/core": {
|
||||||
|
"version": "4.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.5.1.tgz",
|
||||||
|
"integrity": "sha512-6pyk7diT7bflf4qUpqgPCpKYqjhRHPFwsgEV2Gv71lMqwxuRygFGHE2TdZ+l5T249H66Doj2P/j6fW7yzgxTWw==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.4.4",
|
||||||
|
"@material-ui/styles": "^4.5.0",
|
||||||
|
"@material-ui/system": "^4.5.0",
|
||||||
|
"@material-ui/types": "^4.1.1",
|
||||||
|
"@material-ui/utils": "^4.4.0",
|
||||||
|
"@types/react-transition-group": "^4.2.0",
|
||||||
|
"clsx": "^1.0.2",
|
||||||
|
"convert-css-length": "^2.0.1",
|
||||||
|
"deepmerge": "^4.0.0",
|
||||||
|
"hoist-non-react-statics": "^3.2.1",
|
||||||
|
"is-plain-object": "^3.0.0",
|
||||||
|
"normalize-scroll-left": "^0.2.0",
|
||||||
|
"popper.js": "^1.14.1",
|
||||||
|
"prop-types": "^15.7.2",
|
||||||
|
"react-transition-group": "^4.3.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"is-plain-object": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.0.tgz",
|
||||||
|
"integrity": "sha512-tZIpofR+P05k8Aocp7UI/2UTa9lTJSebCXpFFoR9aibpokDj/uXBsJ8luUu0tTVYKkMU6URDUuOfJZ7koewXvg==",
|
||||||
|
"requires": {
|
||||||
|
"isobject": "^4.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"isobject": {
|
||||||
|
"version": "4.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz",
|
||||||
|
"integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA=="
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@material-ui/icons": {
|
||||||
|
"version": "4.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.5.1.tgz",
|
||||||
|
"integrity": "sha512-YZ/BgJbXX4a0gOuKWb30mBaHaoXRqPanlePam83JQPZ/y4kl+3aW0Wv9tlR70hB5EGAkEJGW5m4ktJwMgxQAeA==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.4.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@material-ui/styles": {
|
||||||
|
"version": "4.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.5.0.tgz",
|
||||||
|
"integrity": "sha512-O0NSAECHK9f3DZK6wy56PZzp8b/7KSdfpJs8DSC7vnXUAoMPCTtchBKLzMtUsNlijiJFeJjSxNdQfjWXgyur5A==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.4.4",
|
||||||
|
"@emotion/hash": "^0.7.1",
|
||||||
|
"@material-ui/types": "^4.1.1",
|
||||||
|
"@material-ui/utils": "^4.1.0",
|
||||||
|
"clsx": "^1.0.2",
|
||||||
|
"csstype": "^2.5.2",
|
||||||
|
"deepmerge": "^4.0.0",
|
||||||
|
"hoist-non-react-statics": "^3.2.1",
|
||||||
|
"jss": "^10.0.0",
|
||||||
|
"jss-plugin-camel-case": "^10.0.0",
|
||||||
|
"jss-plugin-default-unit": "^10.0.0",
|
||||||
|
"jss-plugin-global": "^10.0.0",
|
||||||
|
"jss-plugin-nested": "^10.0.0",
|
||||||
|
"jss-plugin-props-sort": "^10.0.0",
|
||||||
|
"jss-plugin-rule-value-function": "^10.0.0",
|
||||||
|
"jss-plugin-vendor-prefixer": "^10.0.0",
|
||||||
|
"prop-types": "^15.7.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@material-ui/system": {
|
||||||
|
"version": "4.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.5.1.tgz",
|
||||||
|
"integrity": "sha512-M72CGz3MYxXTFLet2qWmQDBXZdtF7JKGqYaf7t9MPDYD6WYG6wKM2hUbgUtRKOwls8ZBXQGKsiAX8K4v5pXSPw==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.4.4",
|
||||||
|
"deepmerge": "^4.0.0",
|
||||||
|
"prop-types": "^15.7.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@material-ui/types": {
|
||||||
|
"version": "4.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@material-ui/types/-/types-4.1.1.tgz",
|
||||||
|
"integrity": "sha512-AN+GZNXytX9yxGi0JOfxHrRTbhFybjUJ05rnsBVjcB+16e466Z0Xe5IxawuOayVZgTBNDxmPKo5j4V6OnMtaSQ==",
|
||||||
|
"requires": {
|
||||||
|
"@types/react": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@material-ui/utils": {
|
||||||
|
"version": "4.4.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.4.0.tgz",
|
||||||
|
"integrity": "sha512-UXoQVwArQEQWXxf2FPs0iJGT+MePQpKr0Qh0CPoLc1OdF0GSMTmQczcqCzwZkeHxHAOq/NkIKM1Pb/ih1Avicg==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.4.4",
|
||||||
|
"prop-types": "^15.7.2",
|
||||||
|
"react-is": "^16.8.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@types/prop-types": {
|
||||||
|
"version": "15.7.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
|
||||||
|
"integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
|
||||||
|
},
|
||||||
|
"@types/react": {
|
||||||
|
"version": "16.9.9",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.9.tgz",
|
||||||
|
"integrity": "sha512-L+AudFJkDukk+ukInYvpoAPyJK5q1GanFOINOJnM0w6tUgITuWvJ4jyoBPFL7z4/L8hGLd+K/6xR5uUjXu0vVg==",
|
||||||
|
"requires": {
|
||||||
|
"@types/prop-types": "*",
|
||||||
|
"csstype": "^2.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@types/react-transition-group": {
|
||||||
|
"version": "4.2.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.3.tgz",
|
||||||
|
"integrity": "sha512-Hk8jiuT7iLOHrcjKP/ZVSyCNXK73wJAUz60xm0mVhiRujrdiI++j4duLiL282VGxwAgxetHQFfqA29LgEeSkFA==",
|
||||||
|
"requires": {
|
||||||
|
"@types/react": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
"@webassemblyjs/ast": {
|
"@webassemblyjs/ast": {
|
||||||
"version": "1.8.5",
|
"version": "1.8.5",
|
||||||
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
|
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
|
||||||
@ -1870,6 +1994,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
|
||||||
"integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4="
|
"integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4="
|
||||||
},
|
},
|
||||||
|
"clsx": {
|
||||||
|
"version": "1.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.0.4.tgz",
|
||||||
|
"integrity": "sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg=="
|
||||||
|
},
|
||||||
"collection-visit": {
|
"collection-visit": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
|
||||||
@ -2015,6 +2144,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
|
||||||
"integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
|
"integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
|
||||||
},
|
},
|
||||||
|
"convert-css-length": {
|
||||||
|
"version": "2.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/convert-css-length/-/convert-css-length-2.0.1.tgz",
|
||||||
|
"integrity": "sha512-iGpbcvhLPRKUbBc0Quxx7w/bV14AC3ItuBEGMahA5WTYqB8lq9jH0kTXFheCBASsYnqeMFZhiTruNxr1N59Axg=="
|
||||||
|
},
|
||||||
"convert-source-map": {
|
"convert-source-map": {
|
||||||
"version": "1.6.0",
|
"version": "1.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz",
|
||||||
@ -2218,6 +2352,25 @@
|
|||||||
"postcss": "^7.0.5"
|
"postcss": "^7.0.5"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"css-vendor": {
|
||||||
|
"version": "2.0.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.7.tgz",
|
||||||
|
"integrity": "sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.6.2",
|
||||||
|
"is-in-browser": "^1.0.2"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": {
|
||||||
|
"version": "7.6.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.3.tgz",
|
||||||
|
"integrity": "sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA==",
|
||||||
|
"requires": {
|
||||||
|
"regenerator-runtime": "^0.13.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"cssdb": {
|
"cssdb": {
|
||||||
"version": "4.4.0",
|
"version": "4.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz",
|
||||||
@ -2245,6 +2398,11 @@
|
|||||||
"postcss": "^7.0.18"
|
"postcss": "^7.0.18"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"csstype": {
|
||||||
|
"version": "2.6.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.7.tgz",
|
||||||
|
"integrity": "sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ=="
|
||||||
|
},
|
||||||
"cyclist": {
|
"cyclist": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
|
||||||
@ -2268,6 +2426,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
|
||||||
"integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
|
"integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
|
||||||
},
|
},
|
||||||
|
"deepmerge": {
|
||||||
|
"version": "4.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.0.tgz",
|
||||||
|
"integrity": "sha512-/pED+kD8V9n15L1lon8DXEiWLQMW4tTiegn1kIWIQ+DBudOkFitz1cfjWQiSeKMPBQOknT3LpueyAmMVJ1Ho2g=="
|
||||||
|
},
|
||||||
"defaults": {
|
"defaults": {
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
|
||||||
@ -2368,6 +2531,25 @@
|
|||||||
"randombytes": "^2.0.0"
|
"randombytes": "^2.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"dom-helpers": {
|
||||||
|
"version": "5.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.2.tgz",
|
||||||
|
"integrity": "sha512-VrfjMjIzNgn2oB49wKl85fgs12ELjK0npu5Oryaiazyc6WuekO1go0E//0RJ8JvsBlfaAwq+IgX9M0XhwlEENA==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.6.3",
|
||||||
|
"csstype": "^2.6.7"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": {
|
||||||
|
"version": "7.6.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.3.tgz",
|
||||||
|
"integrity": "sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA==",
|
||||||
|
"requires": {
|
||||||
|
"regenerator-runtime": "^0.13.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"domain-browser": {
|
"domain-browser": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
|
||||||
@ -3471,6 +3653,14 @@
|
|||||||
"minimalistic-crypto-utils": "^1.0.1"
|
"minimalistic-crypto-utils": "^1.0.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"hoist-non-react-statics": {
|
||||||
|
"version": "3.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz",
|
||||||
|
"integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==",
|
||||||
|
"requires": {
|
||||||
|
"react-is": "^16.7.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"hosted-git-info": {
|
"hosted-git-info": {
|
||||||
"version": "2.8.5",
|
"version": "2.8.5",
|
||||||
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.5.tgz",
|
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.5.tgz",
|
||||||
@ -3505,6 +3695,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
|
||||||
"integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
|
"integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
|
||||||
},
|
},
|
||||||
|
"hyphenate-style-name": {
|
||||||
|
"version": "1.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
|
||||||
|
"integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ=="
|
||||||
|
},
|
||||||
"iconv-lite": {
|
"iconv-lite": {
|
||||||
"version": "0.4.24",
|
"version": "0.4.24",
|
||||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
|
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
|
||||||
@ -3697,6 +3892,11 @@
|
|||||||
"is-extglob": "^2.1.1"
|
"is-extglob": "^2.1.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"is-in-browser": {
|
||||||
|
"version": "1.1.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
|
||||||
|
"integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
|
||||||
|
},
|
||||||
"is-number": {
|
"is-number": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
|
||||||
@ -3845,6 +4045,83 @@
|
|||||||
"minimist": "^1.2.0"
|
"minimist": "^1.2.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"jss": {
|
||||||
|
"version": "10.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0.tgz",
|
||||||
|
"integrity": "sha512-TPpDFsiBjuERiL+dFDq8QCdiF9oDasPcNqCKLGCo/qED3fNYOQ8PX2lZhknyTiAt3tZrfOFbb0lbQ9lTjPZxsQ==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.3.1",
|
||||||
|
"csstype": "^2.6.5",
|
||||||
|
"is-in-browser": "^1.1.3",
|
||||||
|
"tiny-warning": "^1.0.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"jss-plugin-camel-case": {
|
||||||
|
"version": "10.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0.tgz",
|
||||||
|
"integrity": "sha512-yALDL00+pPR4FJh+k07A8FeDvfoPPuXU48HLy63enAubcVd3DnS+2rgqPXglHDGixIDVkCSXecl/l5GAMjzIbA==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.3.1",
|
||||||
|
"hyphenate-style-name": "^1.0.3",
|
||||||
|
"jss": "10.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"jss-plugin-default-unit": {
|
||||||
|
"version": "10.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0.tgz",
|
||||||
|
"integrity": "sha512-sURozIOdCtGg9ap18erQ+ijndAfEGtTaetxfU3H4qwC18Bi+fdvjlY/ahKbuu0ASs7R/+WKCP7UaRZOjUDMcdQ==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.3.1",
|
||||||
|
"jss": "10.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"jss-plugin-global": {
|
||||||
|
"version": "10.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.0.0.tgz",
|
||||||
|
"integrity": "sha512-80ofWKSQUo62bxLtRoTNe0kFPtHgUbAJeOeR36WEGgWIBEsXLyXOnD5KNnjPqG4heuEkz9eSLccjYST50JnI7Q==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.3.1",
|
||||||
|
"jss": "10.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"jss-plugin-nested": {
|
||||||
|
"version": "10.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.0.0.tgz",
|
||||||
|
"integrity": "sha512-waxxwl/po1hN3azTyixKnr8ReEqUv5WK7WsO+5AWB0bFndML5Yqnt8ARZ90HEg8/P6WlqE/AB2413TkCRZE8bA==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.3.1",
|
||||||
|
"jss": "10.0.0",
|
||||||
|
"tiny-warning": "^1.0.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"jss-plugin-props-sort": {
|
||||||
|
"version": "10.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0.tgz",
|
||||||
|
"integrity": "sha512-41mf22CImjwNdtOG3r+cdC8+RhwNm616sjHx5YlqTwtSJLyLFinbQC/a4PIFk8xqf1qpFH1kEAIw+yx9HaqZ3g==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.3.1",
|
||||||
|
"jss": "10.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"jss-plugin-rule-value-function": {
|
||||||
|
"version": "10.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0.tgz",
|
||||||
|
"integrity": "sha512-Jw+BZ8JIw1f12V0SERqGlBT1JEPWax3vuZpMym54NAXpPb7R1LYHiCTIlaJUyqvIfEy3kiHMtgI+r2whGgRIxQ==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.3.1",
|
||||||
|
"jss": "10.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"jss-plugin-vendor-prefixer": {
|
||||||
|
"version": "10.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0.tgz",
|
||||||
|
"integrity": "sha512-qslqvL0MUbWuzXJWdUxpj6mdNUX8jr4FFTo3aZnAT65nmzWL7g8oTr9ZxmTXXgdp7ANhS1QWE7036/Q2isFBpw==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.3.1",
|
||||||
|
"css-vendor": "^2.0.6",
|
||||||
|
"jss": "10.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"kind-of": {
|
"kind-of": {
|
||||||
"version": "6.0.2",
|
"version": "6.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
|
||||||
@ -4372,6 +4649,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
|
||||||
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
|
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
|
||||||
},
|
},
|
||||||
|
"normalize-scroll-left": {
|
||||||
|
"version": "0.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/normalize-scroll-left/-/normalize-scroll-left-0.2.0.tgz",
|
||||||
|
"integrity": "sha512-t5oCENZJl8TGusJKoCJm7+asaSsPuNmK6+iEjrZ5TyBj2f02brCRsd4c83hwtu+e5d4LCSBZ0uoDlMjBo+A8yA=="
|
||||||
|
},
|
||||||
"normalize-url": {
|
"normalize-url": {
|
||||||
"version": "1.9.1",
|
"version": "1.9.1",
|
||||||
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
|
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
|
||||||
@ -4734,6 +5016,11 @@
|
|||||||
"ts-pnp": "^1.1.2"
|
"ts-pnp": "^1.1.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"popper.js": {
|
||||||
|
"version": "1.16.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.0.tgz",
|
||||||
|
"integrity": "sha512-+G+EkOPoE5S/zChTpmBSSDYmhXJ5PsW8eMhH8cP/CQHMFPBG/kC9Y5IIw6qNYgdJ+/COf0ddY2li28iHaZRSjw=="
|
||||||
|
},
|
||||||
"posix-character-classes": {
|
"posix-character-classes": {
|
||||||
"version": "0.1.1",
|
"version": "0.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
|
||||||
@ -5422,6 +5709,27 @@
|
|||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
|
||||||
"integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
|
"integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
|
||||||
},
|
},
|
||||||
|
"react-transition-group": {
|
||||||
|
"version": "4.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
|
||||||
|
"integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.5.5",
|
||||||
|
"dom-helpers": "^5.0.1",
|
||||||
|
"loose-envify": "^1.4.0",
|
||||||
|
"prop-types": "^15.6.2"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": {
|
||||||
|
"version": "7.6.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.3.tgz",
|
||||||
|
"integrity": "sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA==",
|
||||||
|
"requires": {
|
||||||
|
"regenerator-runtime": "^0.13.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"read-pkg": {
|
"read-pkg": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
|
||||||
@ -6250,6 +6558,11 @@
|
|||||||
"setimmediate": "^1.0.4"
|
"setimmediate": "^1.0.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"tiny-warning": {
|
||||||
|
"version": "1.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||||
|
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
|
||||||
|
},
|
||||||
"to-arraybuffer": {
|
"to-arraybuffer": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
|
||||||
|
|||||||
@ -8,8 +8,11 @@
|
|||||||
"start": "next start"
|
"start": "next start"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"next": "9.1.1",
|
"@material-ui/core": "^4.5.1",
|
||||||
|
"@material-ui/icons": "^4.5.1",
|
||||||
|
"@material-ui/styles": "^4.5.0",
|
||||||
"ipfs": "~0.38.0",
|
"ipfs": "~0.38.0",
|
||||||
|
"next": "9.1.1",
|
||||||
"orbit-db": "~0.22.0",
|
"orbit-db": "~0.22.0",
|
||||||
"orbit-db-discussion-board": "https://github.com/fazo96/orbit-db-discussion-board.git",
|
"orbit-db-discussion-board": "https://github.com/fazo96/orbit-db-discussion-board.git",
|
||||||
"react": "16.10.2",
|
"react": "16.10.2",
|
||||||
|
|||||||
35
pages/_app.js
Normal file
35
pages/_app.js
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import App from 'next/app';
|
||||||
|
import Head from 'next/head';
|
||||||
|
import { ThemeProvider } from '@material-ui/styles';
|
||||||
|
import AppBar from '../components/AppBar'
|
||||||
|
import CssBaseline from '@material-ui/core/CssBaseline';
|
||||||
|
import theme from '../components/theme';
|
||||||
|
|
||||||
|
export default class MyApp extends App {
|
||||||
|
componentDidMount() {
|
||||||
|
// Remove the server-side injected CSS.
|
||||||
|
const jssStyles = document.querySelector('#jss-server-side');
|
||||||
|
if (jssStyles) {
|
||||||
|
jssStyles.parentNode.removeChild(jssStyles);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { Component, pageProps } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<React.Fragment>
|
||||||
|
<Head>
|
||||||
|
<title>IPFS Boards</title>
|
||||||
|
</Head>
|
||||||
|
<ThemeProvider theme={theme}>
|
||||||
|
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
|
||||||
|
<CssBaseline />
|
||||||
|
<AppBar />
|
||||||
|
<Component {...pageProps} />
|
||||||
|
</ThemeProvider>
|
||||||
|
</React.Fragment>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
79
pages/_document.js
Normal file
79
pages/_document.js
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import Document, { Head, Main, NextScript } from 'next/document';
|
||||||
|
import { ServerStyleSheets } from '@material-ui/styles';
|
||||||
|
import theme from '../components/theme';
|
||||||
|
|
||||||
|
class MyDocument extends Document {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<html lang="en">
|
||||||
|
<Head>
|
||||||
|
<meta charSet="utf-8" />
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
|
||||||
|
/>
|
||||||
|
{/* PWA primary color */}
|
||||||
|
<meta name="theme-color" content={theme.palette.primary.main} />
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
|
||||||
|
/>
|
||||||
|
<link rel='icon' href='/favicon.ico' />
|
||||||
|
</Head>
|
||||||
|
<body>
|
||||||
|
<Main />
|
||||||
|
<NextScript />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
MyDocument.getInitialProps = async ctx => {
|
||||||
|
// Resolution order
|
||||||
|
//
|
||||||
|
// On the server:
|
||||||
|
// 1. app.getInitialProps
|
||||||
|
// 2. page.getInitialProps
|
||||||
|
// 3. document.getInitialProps
|
||||||
|
// 4. app.render
|
||||||
|
// 5. page.render
|
||||||
|
// 6. document.render
|
||||||
|
//
|
||||||
|
// On the server with error:
|
||||||
|
// 1. document.getInitialProps
|
||||||
|
// 2. app.render
|
||||||
|
// 3. page.render
|
||||||
|
// 4. document.render
|
||||||
|
//
|
||||||
|
// On the client
|
||||||
|
// 1. app.getInitialProps
|
||||||
|
// 2. page.getInitialProps
|
||||||
|
// 3. app.render
|
||||||
|
// 4. page.render
|
||||||
|
|
||||||
|
// Render app and page and get the context of the page with collected side effects.
|
||||||
|
const sheets = new ServerStyleSheets();
|
||||||
|
const originalRenderPage = ctx.renderPage;
|
||||||
|
|
||||||
|
ctx.renderPage = () =>
|
||||||
|
originalRenderPage({
|
||||||
|
enhanceApp: App => props => sheets.collect(<App {...props} />),
|
||||||
|
});
|
||||||
|
|
||||||
|
const initialProps = await Document.getInitialProps(ctx);
|
||||||
|
|
||||||
|
return {
|
||||||
|
...initialProps,
|
||||||
|
// Styles fragment is rendered after the app and page rendering finish.
|
||||||
|
styles: [
|
||||||
|
<React.Fragment key="styles">
|
||||||
|
{initialProps.styles}
|
||||||
|
{sheets.getStyleElement()}
|
||||||
|
</React.Fragment>,
|
||||||
|
],
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MyDocument;
|
||||||
25
pages/b/[board]/index.js
Normal file
25
pages/b/[board]/index.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { Fab, Card, CardActions, CardHeader, Button } from '@material-ui/core'
|
||||||
|
import AddIcon from '@material-ui/icons/Add'
|
||||||
|
import ViewIcon from '@material-ui/icons/Visibility'
|
||||||
|
|
||||||
|
const Board = () => {
|
||||||
|
return (
|
||||||
|
<React.Fragment>
|
||||||
|
<Card>
|
||||||
|
<CardHeader
|
||||||
|
title="First Post"
|
||||||
|
subheader="Last Activity X Time Ago"
|
||||||
|
/>
|
||||||
|
<CardActions>
|
||||||
|
<Button variant="contained" color="primary">
|
||||||
|
<ViewIcon /> View
|
||||||
|
</Button>
|
||||||
|
</CardActions>
|
||||||
|
</Card>
|
||||||
|
<Fab color="primary"><AddIcon /></Fab>
|
||||||
|
</React.Fragment>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Board
|
||||||
33
pages/b/[board]/p/[post].js
Normal file
33
pages/b/[board]/p/[post].js
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import { Fab, Card, CardContent, CardContentText, CardHeader, List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'
|
||||||
|
import AddIcon from '@material-ui/icons/Add'
|
||||||
|
import ProfileIcon from '@material-ui/icons/AccountCircle'
|
||||||
|
|
||||||
|
const Post = () => {
|
||||||
|
return (
|
||||||
|
<React.Fragment>
|
||||||
|
<Card>
|
||||||
|
<CardHeader
|
||||||
|
title="First Post"
|
||||||
|
subheader="Last Activity X Time Ago"
|
||||||
|
/>
|
||||||
|
<CardContent>
|
||||||
|
<CardContentText>Lorem Ipsum...</CardContentText>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<List>
|
||||||
|
<ListItem>
|
||||||
|
<ListItemAvatar><ProfileIcon /></ListItemAvatar>
|
||||||
|
<ListItemText
|
||||||
|
primary="Username"
|
||||||
|
secondary="Discovered X Time Ago"
|
||||||
|
/>
|
||||||
|
</ListItem>
|
||||||
|
</List>
|
||||||
|
<Fab color="primary"><AddIcon /></Fab>
|
||||||
|
</React.Fragment>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Post
|
||||||
109
pages/index.js
109
pages/index.js
@ -1,88 +1,29 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import Head from 'next/head'
|
import { Fab, Card, CardActions, CardHeader, Button } from '@material-ui/core'
|
||||||
import Nav from '../components/nav'
|
import AddIcon from '@material-ui/icons/Add'
|
||||||
|
import ViewIcon from '@material-ui/icons/Visibility'
|
||||||
|
import DeleteIcon from '@material-ui/icons/Delete'
|
||||||
|
|
||||||
const Home = () => (
|
const Home = () => {
|
||||||
<div>
|
return (
|
||||||
<Head>
|
<React.Fragment>
|
||||||
<title>Home</title>
|
<Card>
|
||||||
<link rel='icon' href='/favicon.ico' />
|
<CardHeader
|
||||||
</Head>
|
title="First Board"
|
||||||
|
subheader="Last Activity X time ago"
|
||||||
<Nav />
|
/>
|
||||||
|
<CardActions>
|
||||||
<div className='hero'>
|
<Button variant="contained" color="primary">
|
||||||
<h1 className='title'>Welcome to Next.js!</h1>
|
<ViewIcon /> View
|
||||||
<p className='description'>
|
</Button>
|
||||||
To get started, edit <code>pages/index.js</code> and save to reload.
|
<Button variant="contained" color="secondary">
|
||||||
</p>
|
<DeleteIcon /> Remove
|
||||||
|
</Button>
|
||||||
<div className='row'>
|
</CardActions>
|
||||||
<a href='https://nextjs.org/docs' className='card'>
|
</Card>
|
||||||
<h3>Documentation →</h3>
|
<Fab color="primary"><AddIcon /></Fab>
|
||||||
<p>Learn more about Next.js in the documentation.</p>
|
</React.Fragment>
|
||||||
</a>
|
)
|
||||||
<a href='https://nextjs.org/learn' className='card'>
|
}
|
||||||
<h3>Next.js Learn →</h3>
|
|
||||||
<p>Learn about Next.js by following an interactive tutorial!</p>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href='https://github.com/zeit/next.js/tree/master/examples'
|
|
||||||
className='card'
|
|
||||||
>
|
|
||||||
<h3>Examples →</h3>
|
|
||||||
<p>Find other example boilerplates on the Next.js GitHub.</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style jsx>{`
|
|
||||||
.hero {
|
|
||||||
width: 100%;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
margin: 0;
|
|
||||||
width: 100%;
|
|
||||||
padding-top: 80px;
|
|
||||||
line-height: 1.15;
|
|
||||||
font-size: 48px;
|
|
||||||
}
|
|
||||||
.title,
|
|
||||||
.description {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.row {
|
|
||||||
max-width: 880px;
|
|
||||||
margin: 80px auto 40px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
.card {
|
|
||||||
padding: 18px 18px 24px;
|
|
||||||
width: 220px;
|
|
||||||
text-align: left;
|
|
||||||
text-decoration: none;
|
|
||||||
color: #434343;
|
|
||||||
border: 1px solid #9b9b9b;
|
|
||||||
}
|
|
||||||
.card:hover {
|
|
||||||
border-color: #067df7;
|
|
||||||
}
|
|
||||||
.card h3 {
|
|
||||||
margin: 0;
|
|
||||||
color: #067df7;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
.card p {
|
|
||||||
margin: 0;
|
|
||||||
padding: 12px 0 0;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
export default Home
|
export default Home
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user