LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #7 from NebulousLabs/final-changes 

final touch
This commit is contained in:
Karol Wypchło 2020-02-14 11:02:56 -05:00 committed by GitHub
parent b4f04e1e63 da4e37c06f
commit 0658296c60
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 118 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/sia-skynet/src/components/CodeExamples/Code.js
View File

@ -26,10 +26,10 @@ import (
func main() { func main() {
skylink, err := skynet.UploadFile("./image.jpg", skynet.DefaultUploadOptions) skylink, err := skynet.UploadFile("./image.jpg", skynet.DefaultUploadOptions)
if err != nil { if err != nil {
fmt.Printf("Unable to upload: %v\n", err.Error()) fmt.Printf("Unable to upload: %v", err.Error())
return return
} }
fmt.Printf("Upload successful, skylink: %v\n", skylink) fmt.Printf("Upload successful, skylink: %v", skylink)
}` }`
export const ruby = `` export const ruby = ``

5
packages/sia-skynet/src/components/CodeExamples/CodeExamples.scss
View File

@ -18,6 +18,11 @@
background-color: #343734; background-color: #343734;
transition: 0.2s line-height, 0.2s background-color, 0.2s color; transition: 0.2s line-height, 0.2s background-color, 0.2s color;
text-align: center; text-align: center;
font-size: 14px;
@media (min-width: 360px) {
font-size: 16px;
}
@media (min-width: $largebp) { @media (min-width: $largebp) {
padding: 0 32px; padding: 0 32px;

71
packages/sia-skynet/src/components/Footer/Footer.js
View File

@ -2,10 +2,12 @@ import React from "react";
import Fade from "react-reveal/Fade"; import Fade from "react-reveal/Fade";
import Reveal from "react-reveal/Reveal"; import Reveal from "react-reveal/Reveal";
import { Arrow, FooterOrb, FooterCube, Built } from "../../svg"; import { FooterOrb, FooterCube, Built } from "../../svg";
import "./Footer.scss"; import "./Footer.scss";
import { Mailing } from ".."; import { Mailing } from "..";
const Arrow = () => null; // mock arrows temporarily
export default function Footer() { export default function Footer() {
return ( return (
<Reveal effect="active"> <Reveal effect="active">
@ -13,34 +15,38 @@ export default function Footer() {
<div className="width"> <div className="width">
<Fade duration={700} distance="40px" bottom> <Fade duration={700} distance="40px" bottom>
<div className="footer-column"> <div className="footer-column">
<Built /> <Built width={120} height={120} preserveAspectRatio={'xMinYMin'}/>
</div> </div>
</Fade> </Fade>
<div className="footer-column"> <div className="footer-column">
<Fade duration={700} distance="40px" bottom> <Fade duration={700} distance="40px" bottom>
<h2>Sia Elsewhere</h2> <h2>Skynet webportals</h2>
<ul> <ul>
<li> <li>
<a href="https://angel.co/company/nebulous/jobs" target="_blank" rel="noopener noreferrer"> <a href="https://skydrain.net" target="_blank" rel="noopener noreferrer">
Sia Jobs <Arrow /> skydrain.net <Arrow />
</a>
</li>
<li>
<a href="https://skynet.luxor.tech" target="_blank" rel="noopener noreferrer">
Luxor Tech
<Arrow />
</a> </a>
</li> </li>
<li> <li>
<a href="https://sialoop.net" target="_blank" rel="noopener noreferrer"> <a href="https://sialoop.net" target="_blank" rel="noopener noreferrer">
Sia Loop <Arrow /> sialoop.net <Arrow />
</a> </a>
</li> </li>
<li> <li>
<a href="https://skynet.tutemwesi.com" target="_blank" rel="noopener noreferrer"> <a href="https://skynet.tutemwesi.com" target="_blank" rel="noopener noreferrer">
Tutem Wesi <Arrow /> skynet.tutemwesi.com <Arrow />
</a>
</li>
<li>
<a href="https://siacdn.com" target="_blank" rel="noopener noreferrer">
siacdn.com <Arrow />
</a>
</li>
<li>
<a href="https://vault.lightspeedhosting.com" target="_blank" rel="noopener noreferrer">
vault.lightspeedhosting.com <Arrow />
</a> </a>
</li> </li>
</ul> </ul>
@ -51,12 +57,6 @@ export default function Footer() {
<Fade duration={700} distance="40px" bottom> <Fade duration={700} distance="40px" bottom>
<h2>Social</h2> <h2>Social</h2>
<ul> <ul>
<li>
<a href="https://www.reddit.com/r/siacoin/" target="_blank" rel="noopener noreferrer">
Reddit
<Arrow />
</a>
</li>
<li> <li>
<a href="https://twitter.com/siatechhq" target="_blank" rel="noopener noreferrer"> <a href="https://twitter.com/siatechhq" target="_blank" rel="noopener noreferrer">
Twitter <Arrow /> Twitter <Arrow />
@ -68,8 +68,37 @@ export default function Footer() {
</a> </a>
</li> </li>
<li> <li>
<a href="https://github.com/NebulousLabs" target="_blank" rel="noopener noreferrer"> <a href="https://www.reddit.com/r/siacoin" target="_blank" rel="noopener noreferrer">
Github <Arrow /> Reddit <Arrow />
</a>
</li>
<li>
<a href="https://blog.sia.tech" target="_blank" rel="noopener noreferrer">
Blog <Arrow />
</a>
</li>
</ul>
</Fade>
</div>
<div className="footer-column">
<Fade duration={700} distance="40px" bottom>
<h2>Sia</h2>
<ul>
<li>
<a href="https://sia.tech/" target="_blank" rel="noopener noreferrer">
Sia <Arrow />
</a>
</li>
<li>
<a href="https://angel.co/company/nebulous/jobs" target="_blank" rel="noopener noreferrer">
Jobs <Arrow />
</a>
</li>
<li>
<a href="https://support.sia.tech" target="_blank" rel="noopener noreferrer">
Support <Arrow />
</a> </a>
</li> </li>
</ul> </ul>

2
packages/sia-skynet/src/components/Footer/Footer.scss
View File

@ -11,6 +11,8 @@
} }
.width { .width {
max-width: 1200px;
@media (min-width: $largebp) { @media (min-width: $largebp) {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

36
packages/sia-skynet/src/components/HomeStay/HomeStay.js
View File

@ -20,34 +20,22 @@ export default class HomeStay extends Component {
<div className="small-divider" /> <div className="small-divider" />
</div> </div>
</Fade> </Fade>
<Fade duration={700} distance="40px" bottom>
<h2>
Stay up to date with
<br />
<strong>Skynet updates</strong>
</h2>
</Fade>
</header> </header>
<div className="home-stay-flex"> <div className="home-stay-flex">
<div className="home-stay-left"> <div className="home-stay-left">
<Fade duration={700} distance="40px" bottom> <header className="home-stay-header">
<p> <Fade duration={700} distance="40px" bottom>
Integer posuere erat a ante venenatis dapibus posuere velit <h2>
aliquet. Cras justo odio, dapibus ac facilisis in. Stay up to date with
</p> <br />
</Fade> <strong>Skynet updates</strong>
</h2>
</Fade>
</header>
<Fade duration={700} distance="40px" bottom> <Fade duration={700} distance="40px" bottom>
<Mailing id="check1" /> <Mailing id="check1" />
</Fade> </Fade>
<Fade duration={700} distance="40px" bottom>
<p className="disclaimer-text">
Integer posuere erat a ante venenatis dapibus posuere velit
aliquet. Cras justo odio, dapibus ac facilisis in.
</p>
</Fade>
</div> </div>
<ul className="home-stay-right"> <ul className="home-stay-right">
@ -57,11 +45,7 @@ export default class HomeStay extends Component {
icon="github" icon="github"
url="https://github.com/NebulousLabs/skynet-webportal" url="https://github.com/NebulousLabs/skynet-webportal"
greenText="View project on Github" greenText="View project on Github"
title={ title={<strong>/Skynet-Webportal</strong>}
<>
NebulousLabs/<strong>Skynet-Webportal</strong>
</>
}
/> />
</li> </li>
</Fade> </Fade>

101
packages/sia-skynet/src/components/HomeUpload/HomeUpload.js
View File

@ -1,33 +1,33 @@
import React, { Component } from "react"; import React, { Component } from 'react'
import classNames from "classnames"; import classNames from 'classnames'
import Dropzone from "react-dropzone"; import Dropzone from 'react-dropzone'
import Reveal from "react-reveal/Reveal"; import Reveal from 'react-reveal/Reveal'
import { Button, UploadFile } from "../"; import { Button, UploadFile } from '../'
import { Deco3, Deco4, Deco5, Folder, DownArrow } from "../../svg"; import { Deco3, Deco4, Deco5, Folder, DownArrow } from '../../svg'
import "./HomeUpload.scss"; import './HomeUpload.scss'
export default class HomeUpload extends Component { export default class HomeUpload extends Component {
state = { files: [] }; state = { files: [] }
handleDrop = async acceptedFiles => { handleDrop = async acceptedFiles => {
this.setState({ this.setState({
files: [ files: [
...acceptedFiles.map(file => { ...acceptedFiles.map(file => {
return { file, status: "uploading" }; return { file, status: 'uploading' }
}), }),
...this.state.files ...this.state.files,
] ],
}); })
acceptedFiles.forEach(async file => { acceptedFiles.forEach(async file => {
const url = `/api/skyfile?filename=${file.name}`; const url = `/api/skyfile?filename=${file.name}`
const fd = new FormData(); const fd = new FormData()
fd.append("file", file); fd.append('file', file)
const onComplete = (status, skylink) => { const onComplete = (status, skylink) => {
this.setState(state => { this.setState(state => {
const index = state.files.findIndex(f => f.file === file); const index = state.files.findIndex(f => f.file === file)
return { return {
files: [ files: [
@ -35,36 +35,36 @@ export default class HomeUpload extends Component {
{ {
...state.files[index], ...state.files[index],
status, status,
url: `https://siasky.net/${skylink}` url: `https://siasky.net/${skylink}`,
}, },
...state.files.slice(index + 1) ...state.files.slice(index + 1),
] ],
}; }
}); })
}; }
try { try {
const response = await fetch(url, { const response = await fetch(url, {
method: "POST", method: 'POST',
body: fd, body: fd,
mode: "cors" mode: 'cors',
}); })
const { skylink } = await response.json(); const { skylink } = await response.json()
onComplete("complete", skylink); onComplete('complete', skylink)
} catch (error) { } catch (error) {
onComplete("error"); onComplete('error')
} }
}); })
}; }
handleSkylink = (event) => { handleSkylink = event => {
event.preventDefault(); event.preventDefault()
const skylink = event.target.skylink.value.replace('sia://', ''); const skylink = event.target.skylink.value.replace('sia://', '')
if(skylink.length === 46) { if (skylink.match(/^[a-zA-Z0-9_-]{46}$/)) {
window.open(`/${event.target.skylink.value}`, '_blank'); window.open(`/${event.target.skylink.value}`, '_blank')
} }
} }
@ -75,14 +75,12 @@ export default class HomeUpload extends Component {
<div className="home-upload-white fadeInUp delay4"> <div className="home-upload-white fadeInUp delay4">
<div className="home-upload-split"> <div className="home-upload-split">
<div className="home-upload-box "> <div className="home-upload-box ">
<Dropzone <Dropzone onDrop={acceptedFiles => this.handleDrop(acceptedFiles)}>
onDrop={acceptedFiles => this.handleDrop(acceptedFiles)}
>
{({ getRootProps, getInputProps, isDragActive }) => ( {({ getRootProps, getInputProps, isDragActive }) => (
<> <>
<div <div
className={classNames("home-upload-dropzone", { className={classNames('home-upload-dropzone', {
"drop-active": isDragActive 'drop-active': isDragActive,
})} })}
{...getRootProps()} {...getRootProps()}
> >
@ -99,14 +97,6 @@ export default class HomeUpload extends Component {
</> </>
)} )}
</Dropzone> </Dropzone>
{this.state.files.length > 0 && (
<div className="home-uploaded-files">
{this.state.files.map((file, i) => {
return <UploadFile key={i} {...file} />;
})}
</div>
)}
</div> </div>
<div className="home-upload-retrieve"> <div className="home-upload-retrieve">
@ -123,12 +113,19 @@ export default class HomeUpload extends Component {
</div> </div>
</div> </div>
</div> </div>
{this.state.files.length > 0 && (
<div className="home-uploaded-files">
{this.state.files.map((file, i) => {
return <UploadFile key={i} {...file} />
})}
</div>
)}
</div> </div>
<p className="bottom-text fadeInUp delay5"> <p className="bottom-text fadeInUp delay5">
Once a file has been uploaded, a 46 byte link called a 'Skylink' is Once a file has been uploaded, a 46 byte link called a 'Skylink' is generated. That link can then be shared
generated. That link can then be shared with anyone to fetch the with anyone to fetch the file from Skynet.
file from Skynet.
</p> </p>
<Deco3 className="deco-3 fadeInUp delay6" /> <Deco3 className="deco-3 fadeInUp delay6" />
@ -136,6 +133,6 @@ export default class HomeUpload extends Component {
<Deco5 className="deco-5 fadeInUp delay6" /> <Deco5 className="deco-5 fadeInUp delay6" />
</div> </div>
</Reveal> </Reveal>
); )
} }
} }