diff --git a/packages/website/package.json b/packages/website/package.json index e1039e93..80d0ca9f 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -11,6 +11,7 @@ "autoprefixer": "^10.2.5", "bytes": "^3.1.0", "classnames": "^2.2.6", + "copy-text-to-clipboard": "^3.0.1", "framer-motion": "^4.0.3", "gatsby": "^3.0.1", "gatsby-background-image": "^1.5.0", diff --git a/packages/website/src/components/Uploader/Uploader.js b/packages/website/src/components/Uploader/Uploader.js index 738610a4..9438c2b7 100644 --- a/packages/website/src/components/Uploader/Uploader.js +++ b/packages/website/src/components/Uploader/Uploader.js @@ -4,6 +4,7 @@ import { Add, Cloud, ArrowUpCircle, CheckCircle } from "../Icons"; import bytes from "bytes"; import classNames from "classnames"; import { getReasonPhrase, StatusCodes } from "http-status-codes"; +import copy from "copy-text-to-clipboard"; import path from "path-browserify"; import { useDropzone } from "react-dropzone"; import { SkynetClient } from "skynet-js"; @@ -55,23 +56,23 @@ const createUploadErrorMessage = (error) => { const client = new SkynetClient("https://siasky.net"); -const UploadElement = ({ file, progress, status, url }) => { +const UploadElement = ({ file, status, url = "", progress = 0 }) => { const handleCopy = (url) => { - console.log(url); + copy(url); }; return (
- {status === "uploading" && } - {status === "processing" && } - {status === "complete" && } -
+ {status === "uploading" && } + {status === "processing" && } + {status === "complete" && } +
{file.name}
-
-
+
+
{status === "uploading" && ( - + Uploading {bytes(file.size * progress)} of {bytes(file.size)} )} @@ -85,10 +86,15 @@ const UploadElement = ({ file, progress, status, url }) => { )}
- {status === "uploading" && {Math.floor(progress * 100)}% completed} + {status === "uploading" && ( + + {Math.floor(progress * 100)}% completed + + )} {status === "complete" && ( )}
@@ -177,32 +183,36 @@ const Uploader = () => { const inputElement = inputRef.current; React.useEffect(() => { - if (mode === "directory") { - inputElement.setAttribute("webkitdirectory", "true"); - } else { - inputElement.removeAttribute("webkitdirectory"); - } - }, [mode, inputElement]); + if (!inputElement) return; + if (mode === "directory") inputElement.setAttribute("webkitdirectory", "true"); + if (mode === "file") inputElement.removeAttribute("webkitdirectory"); + }, [inputElement, mode]); return ( -
+
{files.length > 0 && ( -
+
{files.map((file, index) => ( ))} diff --git a/packages/website/src/pages/index.js b/packages/website/src/pages/index.js index ba42ffdb..bdb4f454 100644 --- a/packages/website/src/pages/index.js +++ b/packages/website/src/pages/index.js @@ -18,20 +18,20 @@ import { } from "../components/Icons"; import classnames from "classnames"; -const Section = ({ children, className, ...props }) => ( -
+const Section = React.forwardRef(({ children, className, ...props }, ref) => ( +
{children}
-); +)); -const BigIcon = ({ Icon, text }) => ( +const EtosCard = ({ Icon, text }) => (

{text}

); -const SmallIconCard = ({ Icon, title, text }) => ( +const EcosystemCard = ({ Icon, title, text }) => (

{title}

@@ -54,87 +54,114 @@ const SectionTitle = ({ children, className, ...props }) => ( ); -const IndexPage = () => ( - - +const etosCards = [ + { + Icon: SkynetToolBig, + title: "Build a freer future", + }, + { + Icon: SkynetUserBig, + title: "Fight corporate control of user data", + }, + { + Icon: SkynetPowerBig, + title: "Empower global citizens", + }, +]; -
- -
+const ecosystemCards = [ + { + Icon: SkynetUsageSmall, + title: "Easy to use", + text: + "Decentralized storage without needing to run a node or wallet. Skynet also includes SDKs for popular programming languages and APIs that integrate seamlessly with your existing apps.", + }, + { + Icon: SkynetSpeedSmall, + title: "Fast", + text: + "Skynet's speeds rival centralized providers and surpass all decentralized offerings. A typical Skynet download starts in under 500 ms and can stream at rates as high as 1 Gbps!", + }, + { + Icon: SkynetSiaSmall, + title: "Free to use", + text: + "Focus on building, not overheard server costs. When users own their data, developers aren't asked to pay for it.", + }, + { + Icon: SkynetMonetizationSmall, + title: "Monetization", + text: + "Profit directly from the success of your skapp. Now you can truly prioritize your users, instead of advertisers.", + }, + { + Icon: SkynetPersistenceSmall, + title: "Persistence", + text: + "Your skapp and data stay live, even if corporations pull your access to their resources. You can also use Skynet as a failover site for when centralized providers go down.", + }, +]; -
- {/*
*/} - -
+const IndexPage = () => { + return ( + + -
- The new decentralized internet is here +
+ +
-
- - - -
+
+
+ +
-
-

- Skynet apps pave the way for a new web that priorities the privacy, security, and experience of users. Join - our decentralized ecosystem and revolution. -

+
+ The new decentralized internet is here - - Try Skynet Apps - -
-
- -
- Ready to build your application? - -
-
- Ready to build your application? - - +
+ {etosCards.map((card, index) => ( + + ))}
- - - - - -
+
+

+ Skynet apps pave the way for a new web that priorities the privacy, security, and experience of users. Join + our decentralized ecosystem and revolution. +

-
- -
-
+ + Try Skynet Apps + +
+ -
- -
+
+ Ready to build your application? - {/*

Hi people

+
+
+ Ready to build your application? + + +
+ + {ecosystemCards.map((card, index) => ( + + ))} +
+ +
+ +
+
+ +
+ +
+ + {/*

Hi people

Welcome to your new Gatsby site.

Now go build something great.

( Go to page 2
Go to "Using TypeScript"

*/} - -); + + ); +}; export default IndexPage;