move webpage to Gatsby (#32)

* migrate to gatsby in subfolder
* move gatsby to main package
* use targeted light syntax highlighter
* clean up gatsby leftovers
This commit is contained in:
Karol Wypchło 2020-02-20 17:35:07 +01:00 committed by GitHub
parent 8ff073a3fb
commit ee86da1b39
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
41 changed files with 4972 additions and 3257 deletions

4
.gitignore vendored
View File

@ -54,9 +54,9 @@ typings/
# dotenv environment variable files
.env*
# build files
# gatsby files
.cache/
build
public
# Mac files
.DS_Store

35
gatsby-config.js Normal file
View File

@ -0,0 +1,35 @@
module.exports = {
siteMetadata: {
title: `Skynet`,
description: `Skynet is a decentralized file sharing and content distribution protocol.`,
author: `Nebulous`
},
plugins: [
`gatsby-plugin-sass`,
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`
}
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `Skynet`,
short_name: `Skynet`,
start_url: `/`,
background_color: `#f1f7f2`,
theme_color: `#f1f7f2`,
display: `minimal-ui`,
icon: `src/images/logo.svg` // This path is relative to the root of the site.
}
}
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
]
};

21
netlify.toml Normal file
View File

@ -0,0 +1,21 @@
[[redirects]]
from = "/skynet/skyfile"
to = "https://siasky.net/skynet/skyfile"
status = 200
force = true
[[redirects]]
from = "/file/*"
to = "https://siasky.net/file/:splat"
status = 200
force = true
[[redirects]]
from = "/"
to = "/"
status = 200
[[redirects]]
from = "/*"
to = "https://siasky.net/:splat"
status = 200

View File

@ -1,13 +1,19 @@
{
"name": "skynet-webportal",
"description": "Sia Skynet",
"version": "1.0.0",
"homepage": "https://siasky.net",
"author": "Nebulous",
"dependencies": {
"@testing-library/dom": "^6.12.2",
"@testing-library/jest-dom": "^5.1.1",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^10.0.0",
"classnames": "^2.2.6",
"gatsby": "^2.19.7",
"gatsby-image": "^2.2.39",
"gatsby-plugin-manifest": "^2.2.39",
"gatsby-plugin-offline": "^3.0.32",
"gatsby-plugin-react-helmet": "^3.1.21",
"gatsby-plugin-sass": "^2.1.28",
"gatsby-plugin-sharp": "^2.4.3",
"gatsby-source-filesystem": "^2.1.46",
"gatsby-transformer-sharp": "^2.3.13",
"jsonp": "^0.2.1",
"node-sass": "^4.13.1",
"prop-types": "^15.7.2",
@ -15,10 +21,10 @@
"react-countup": "^4.3.3",
"react-dom": "^16.12.0",
"react-dropzone": "^10.2.1",
"react-helmet": "^5.2.1",
"react-mailchimp-form": "^1.0.2",
"react-mailchimp-subscribe": "^2.1.0",
"react-reveal": "^1.2.2",
"react-scripts": "^3.4.0",
"react-syntax-highlighter": "^12.2.1",
"react-visibility-sensor": "^5.1.1",
"shortid": "^2.2.15"
@ -26,25 +32,28 @@
"devDependencies": {
"prettier": "^1.19.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"format": "prettier --write \"**/*.{js,jsx,json,md}\""
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
"keywords": [
"sia",
"skynet",
"nebulous",
"blockchain",
"decentralized",
"cloud storage"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
"license": "MIT",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,json,md}\"",
"start": "yarn run develop",
"serve": "gatsby serve",
"clean": "gatsby clean"
},
"repository": {
"type": "git",
"url": "https://github.com/NebulousLabs/skynet-webportal"
},
"bugs": {
"url": "https://github.com/NebulousLabs/skynet-webportal/issues"
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

View File

@ -1,13 +0,0 @@
<svg width="263px" height="258px" viewBox="0 0 263 258" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Homepage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-983.000000, -4278.000000)" id="Group-3">
<g transform="translate(1114.599987, 4407.025517) rotate(10.000000) translate(-1114.599987, -4407.025517) translate(994.099987, 4276.525517)">
<g id="Group-15" transform="translate(0.889504, 0.405409)">
<polygon id="Path-6" fill="#343734" points="120 130 2.27373675e-13 199.666667 2.27373675e-13 200 120 260 240 200 240 199.666667"></polygon>
<path d="M120,0 L0,66.6666667 L0,200 L120,260 L240,200 L240,66.6666667 L120,0 Z M240,66.6666667 L120,130 L0,66.6666667 M240,200 L120,130 L0,200" id="Path-9-Copy" stroke="#343734" stroke-width="2" stroke-linejoin="round"></path>
</g>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1014 B

View File

@ -1 +0,0 @@
<svg viewBox="0 0 622 151" width="622" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter x="-1.7%" y="-1.7%" width="103.4%" height="103.4%" filterUnits="objectBoundingBox" id="a"><feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"/><feOffset in="shadowSpreadOuter1" result="shadowOffsetOuter1"/><feMorphology radius="1" in="SourceAlpha" result="shadowInner"/><feOffset in="shadowInner" result="shadowInner"/><feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.341176471 0 0 0 0 0.709803922 0 0 0 0 0.376470588 0 0 0 0.3 0" in="shadowBlurOuter1"/></filter><path d="M384 768c212.077 0 384-171.923 384-384S596.077 0 384 0 0 171.923 0 384s171.923 384 384 384zm192-51.446c-91.832 53.02-252.238-52.89-358.277-236.554C111.684 296.336 100.168 104.466 192 51.446" id="b"/></defs><g fill="none" fill-rule="evenodd"><g stroke-linejoin="round" transform="translate(-73 -626)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use stroke="#57B560" stroke-width="2" xlink:href="#b"/></g><path d="M119.706-574.998l-.78.524C27.13-521.461 38.642-329.612 144.64-145.968 250.637 37.676 410.982 143.572 502.779 90.559l.218-.052C446.488 123.254 380.859 142 310.853 142 98.857 142-73-29.904-73-241.957c0-142.44 77.542-266.765 192.706-333.04z" fill="#57B560"/></g></svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -1,43 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Skynet is a decentralized file sharing and content distribution protocol."
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Skynet</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

View File

@ -1,25 +0,0 @@
{
"short_name": "Skynet",
"name": "Skynet",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "android-chrome-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "android-chrome-512x512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

Binary file not shown.

View File

@ -1,3 +0,0 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

Binary file not shown.

View File

@ -82,4 +82,4 @@ You can check that with `node -v` and `yarn -v` commands respectively.
- run `yarn` to build dependencies
- run `yarn build` to build the client package
Client package will be outputted to `/build` and nginx configuration will pick it up automatically.
Client package will be outputted to `/public` and nginx configuration will pick it up automatically.

View File

@ -11,10 +11,10 @@ sudo cp ./ssh_config /etc/ssh/ssh_config
mkdir -p ~/.ssh
cat ./authorized_keys >> ~/.ssh/authorized_keys
# Nodejs install prerequisite. From official documentation.
# Nodejs install prerequisite https://nodejs.org/en/download/package-manager/
curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -
# Yarn install prerequisite.
# Yarn install prerequisite https://classic.yarnpkg.com/en/docs/install
curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
@ -23,9 +23,6 @@ sudo apt-get update
sudo apt-get -y install ufw tmux ranger htop nload nginx certbot \
python-certbot-nginx nodejs gcc g++ make yarn git vim
# Install pm2
sudo npm i -g pm2
# terminfo for alacritty terminal via ssh
# If you don't use the alacritty terminal you can remove this step.
wget -c https://raw.githubusercontent.com/alacritty/alacritty/master/extra/alacritty.info
@ -66,3 +63,4 @@ cd Sia && git checkout viewnode && make
cd $cwd
cd ../
yarn
yarn build

View File

@ -10,8 +10,10 @@ server {
listen [::]:443 ssl http2;
server_name siasky.net www.siasky.net; # replace with actual server names
# NOTE: make sure to enable any additional configuration you might need like gzip
location / {
root /home/user/skynet-webportal/build; # path to root of index.html
root /home/user/skynet-webportal/public; # path to root of index.html
}
location /skynet/skyfile/ {

View File

@ -1,12 +1,12 @@
import React from "react";
import TopSwoosh from "../../svg/TopSwoosh";
import "./App.scss";
import { HomeTop, HomeUpload, HomeBuilt, HomeSamples, HomeStay, HomeNetwork, Footer } from "../";
function App() {
return (
<div className="app">
<img className="top-swoosh" src="/images/top-swoosh.svg" alt="top swoosh" />
<TopSwoosh className="top-swoosh" />
<div className="width">
<HomeTop />

View File

@ -1,53 +1,58 @@
import React, { useState } from "react";
import SyntaxHighlighter from "react-syntax-highlighter";
import classNames from "classnames";
import "./CodeExamples.scss";
import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
import { javascript, go, python, bash } from 'react-syntax-highlighter/dist/esm/languages/hljs';
import Colors from "./Colors";
import { python, curl, node, go } from "./Code";
import * as snippets from "./Code";
import "./CodeExamples.scss";
SyntaxHighlighter.registerLanguage('javascript', javascript);
SyntaxHighlighter.registerLanguage('go', go);
SyntaxHighlighter.registerLanguage('python', python);
SyntaxHighlighter.registerLanguage('bash', bash);
export default function CodeExamples() {
const [active, setActive] = useState(1);
return (
<div className="code-examples">
<ul className="code-examples-tabs">
<li onClick={() => setActive(1)} className={classNames({ active: active === 1 })}>
<div className="code-examples-tabs">
<button type="button" onClick={() => setActive(1)} className={classNames({ active: active === 1 })}>
CURL
</li>
<li onClick={() => setActive(2)} className={classNames({ active: active === 2 })}>
</button>
<button type="button" onClick={() => setActive(2)} className={classNames({ active: active === 2 })}>
Python
</li>
<li onClick={() => setActive(3)} className={classNames({ active: active === 3 })}>
</button>
<button type="button" onClick={() => setActive(3)} className={classNames({ active: active === 3 })}>
Node.js
</li>
<li onClick={() => setActive(4)} className={classNames({ active: active === 4 })}>
</button>
<button type="button" onClick={() => setActive(4)} className={classNames({ active: active === 4 })}>
Go
</li>
</ul>
</button>
</div>
<div className="code-examples-body">
{active === 1 && (
<SyntaxHighlighter wrapLines showLineNumbers={true} language="curl" style={Colors}>
{curl}
<SyntaxHighlighter wrapLines showLineNumbers={true} language="bash" style={Colors}>
{snippets.curl}
</SyntaxHighlighter>
)}
{active === 2 && (
<SyntaxHighlighter wrapLines showLineNumbers={true} language="python" style={Colors}>
{python}
{snippets.python}
</SyntaxHighlighter>
)}
{active === 3 && (
<SyntaxHighlighter wrapLines showLineNumbers={true} language="node" style={Colors}>
{node}
<SyntaxHighlighter wrapLines showLineNumbers={true} language="javascript" style={Colors}>
{snippets.node}
</SyntaxHighlighter>
)}
{active === 4 && (
<SyntaxHighlighter wrapLines showLineNumbers={true} language="go" style={Colors}>
{go}
{snippets.go}
</SyntaxHighlighter>
)}
</div>

View File

@ -7,7 +7,7 @@
align-items: flex-end;
height: 65px;
li {
button {
display: block;
flex: 1;
color: $white60;
@ -30,23 +30,23 @@
}
}
li:hover,
li.active {
button:hover,
button.active {
color: $white;
background-color: #171917;
line-height: 65px;
}
li:first-child {
button:first-child {
border-top-left-radius: 12px;
}
li:last-child {
button:last-child {
border-top-right-radius: 12px;
}
li.filler,
li.filler:hover {
button.filler,
button.filler:hover {
flex: 1;
height: 57px;
border-top-right-radius: 12px;

View File

@ -43,7 +43,7 @@
display: inline-block;
vertical-align: middle;
margin: -2px 8px 0 0;
background-image: url('/images/green-check.svg');
background-image: url('../../images/green-check.svg');
background-repeat: no-repeat;
background-size: 28px;
background-position: top -300px center;

83
src/components/seo.js Normal file
View File

@ -0,0 +1,83 @@
/**
* SEO component that queries for data with
* Gatsby's useStaticQuery React hook
*
* See: https://www.gatsbyjs.org/docs/use-static-query/
*/
import React from "react";
import PropTypes from "prop-types";
import Helmet from "react-helmet";
import { useStaticQuery, graphql } from "gatsby";
function SEO({ lang, meta }) {
const { site } = useStaticQuery(
graphql`
query {
site {
siteMetadata {
title
author
description
}
}
}
`
);
return (
<Helmet
htmlAttributes={{
lang
}}
title={site.siteMetadata.title}
meta={[
{
name: `description`,
content: site.siteMetadata.description
},
{
property: `og:title`,
content: site.siteMetadata.title
},
{
property: `og:description`,
content: site.siteMetadata.description
},
{
property: `og:type`,
content: `website`
},
{
name: `twitter:card`,
content: `summary`
},
{
name: `twitter:creator`,
content: site.siteMetadata.author
},
{
name: `twitter:title`,
content: site.siteMetadata.title
},
{
name: `twitter:description`,
content: site.siteMetadata.description
}
].concat(meta)}
/>
);
}
SEO.defaultProps = {
lang: `en`,
meta: [],
description: ``
};
SEO.propTypes = {
lang: PropTypes.string,
meta: PropTypes.arrayOf(PropTypes.object)
};
export default SEO;

View File

@ -2,40 +2,40 @@
@font-face {
font-family: "Haas Grot Disp";
src: url("/fonts/hinted-subset-HaasGrotDispR-55Roman.woff2") format("woff2"),
url("/fonts/hinted-subset-HaasGrotDispR-55Roman.woff") format("woff");
src: url("./fonts/hinted-subset-HaasGrotDispR-55Roman.woff2") format("woff2"),
url("./fonts/hinted-subset-HaasGrotDispR-55Roman.woff") format("woff");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Haas Grot Disp";
src: url("/fonts/hinted-subset-HaasGrotDispR-65Medium.woff2") format("woff2"),
url("/fonts/hinted-subset-HaasGrotDispR-65Medium.woff") format("woff");
src: url("./fonts/hinted-subset-HaasGrotDispR-65Medium.woff2") format("woff2"),
url("./fonts/hinted-subset-HaasGrotDispR-65Medium.woff") format("woff");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Haas Grot Text";
src: url("/fonts/hinted-subset-HaasGrotTextR-75Bold.woff2") format("woff2"),
url("/fonts/hinted-subset-HaasGrotTextR-75Bold.woff") format("woff");
src: url("./fonts/hinted-subset-HaasGrotTextR-75Bold.woff2") format("woff2"),
url("./fonts/hinted-subset-HaasGrotTextR-75Bold.woff") format("woff");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Haas Grot Text";
src: url("/fonts/hinted-subset-HaasGrotTextR-65Medium.woff2") format("woff2"),
url("/fonts/hinted-subset-HaasGrotTextR-65Medium.woff") format("woff");
src: url("./fonts/hinted-subset-HaasGrotTextR-65Medium.woff2") format("woff2"),
url("./fonts/hinted-subset-HaasGrotTextR-65Medium.woff") format("woff");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: "Haas Grot Text";
src: url("/fonts/hinted-subset-HaasGrotTextR-55Roman.woff2") format("woff2"),
url("/fonts/hinted-subset-HaasGrotTextR-55Roman.woff") format("woff");
src: url("./fonts/hinted-subset-HaasGrotTextR-55Roman.woff2") format("woff2"),
url("./fonts/hinted-subset-HaasGrotTextR-55Roman.woff") format("woff");
font-weight: normal;
font-style: normal;
}

View File

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -1,4 +1,4 @@
<svg viewBox="19.88800048828125 48.90407943725586 132.07760620117188 108.50448608398438" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="19.88800048828125 37.1175193787 132.07760620117188 132.07760620117188" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>.cls-1,.cls-2{fill:#0071bc;}.cls-1{fill-rule:evenodd;}.cls-2{font-size:87px;font-family:Karbon-Light, Karbon;font-weight:300;letter-spacing:-0.05em;}.cls-3{letter-spacing:-0.05em;}.cls-4{letter-spacing:-0.05em;}</style>
</defs>

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -1,7 +0,0 @@
import React from "react";
import ReactDOM from "react-dom";
import "./global.scss";
import { App } from "./components";
ReactDOM.render(<App />, document.getElementById("root"));

13
src/pages/index.js Normal file
View File

@ -0,0 +1,13 @@
import React from "react";
import SEO from "../components/seo";
import { App } from "../components";
import "../global.scss";
const IndexPage = () => (
<>
<SEO />
<App />
</>
);
export default IndexPage;

70
src/svg/TopSwoosh.js Normal file
View File

@ -0,0 +1,70 @@
import React from "react";
export default function TopSwoosh({ ...props }) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="622"
viewBox="0 0 622 151"
{...props}
>
<defs>
<filter
id="a"
width="103.4%"
height="103.4%"
x="-1.7%"
y="-1.7%"
filterUnits="objectBoundingBox"
>
<feMorphology
in="SourceAlpha"
operator="dilate"
radius="1"
result="shadowSpreadOuter1"
></feMorphology>
<feOffset
in="shadowSpreadOuter1"
result="shadowOffsetOuter1"
></feOffset>
<feMorphology
in="SourceAlpha"
radius="1"
result="shadowInner"
></feMorphology>
<feOffset in="shadowInner" result="shadowInner"></feOffset>
<feComposite
in="shadowOffsetOuter1"
in2="shadowInner"
operator="out"
result="shadowOffsetOuter1"
></feComposite>
<feGaussianBlur
in="shadowOffsetOuter1"
result="shadowBlurOuter1"
stdDeviation="4"
></feGaussianBlur>
<feColorMatrix
in="shadowBlurOuter1"
values="0 0 0 0 0.341176471 0 0 0 0 0.709803922 0 0 0 0 0.376470588 0 0 0 0.3 0"
></feColorMatrix>
</filter>
<path
id="b"
d="M384 768c212.077 0 384-171.923 384-384S596.077 0 384 0 0 171.923 0 384s171.923 384 384 384zm192-51.446c-91.832 53.02-252.238-52.89-358.277-236.554C111.684 296.336 100.168 104.466 192 51.446"
></path>
</defs>
<g fill="none" fillRule="evenodd">
<g strokeLinejoin="round" transform="translate(-73 -626)">
<use fill="#000" filter="url(#a)" xlinkHref="#b"></use>
<use stroke="#57B560" strokeWidth="2" xlinkHref="#b"></use>
</g>
<path
fill="#57B560"
d="M119.706-574.998l-.78.524C27.13-521.461 38.642-329.612 144.64-145.968 250.637 37.676 410.982 143.572 502.779 90.559l.218-.052C446.488 123.254 380.859 142 310.853 142 98.857 142-73-29.904-73-241.957c0-142.44 77.542-266.765 192.706-333.04z"
></path>
</g>
</svg>
);
}

7755
yarn.lock

File diff suppressed because it is too large Load Diff