2020-07-09 06:19:08 +03:00
|
|
|
import * as React from "react";
|
2020-07-16 08:48:51 +03:00
|
|
|
import * as Constants from "~/common/constants";
|
2020-07-17 13:24:20 +03:00
|
|
|
import * as Actions from "~/common/actions";
|
2020-08-03 06:22:47 +03:00
|
|
|
import * as System from "~/components/system";
|
2020-07-09 06:19:08 +03:00
|
|
|
|
2020-07-16 08:48:51 +03:00
|
|
|
import { css } from "@emotion/react";
|
2020-07-09 06:19:08 +03:00
|
|
|
|
|
|
|
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
2020-08-03 06:22:47 +03:00
|
|
|
import WebsitePrototypeHeader from "~/components/core/WebsitePrototypeHeader";
|
|
|
|
import WebsitePrototypeFooter from "~/components/core/WebsitePrototypeFooter";
|
2020-04-09 00:29:13 +03:00
|
|
|
|
2020-07-16 08:48:51 +03:00
|
|
|
const STYLES_ROOT = css`
|
2020-08-03 06:22:47 +03:00
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
height: 100vh;
|
|
|
|
text-align: center;
|
|
|
|
font-size: 1rem;
|
|
|
|
|
2020-08-09 01:04:17 +03:00
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
2020-08-03 06:22:47 +03:00
|
|
|
font-size: 0.78rem;
|
2020-07-16 08:48:51 +03:00
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2020-08-03 06:22:47 +03:00
|
|
|
const STYLES_MIDDLE = css`
|
|
|
|
position: relative;
|
|
|
|
min-height: 10%;
|
|
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
flex-direction: column;
|
|
|
|
padding: 24px;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_CARD = css`
|
|
|
|
margin: 0 auto 0 auto;
|
|
|
|
max-width: 420px;
|
|
|
|
width: 100%;
|
|
|
|
background: ${Constants.system.pitchBlack};
|
|
|
|
border-radius: 8px;
|
|
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
|
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_CARD_IMAGE = css`
|
|
|
|
width: 100%;
|
|
|
|
border-radius: 8px 8px 0 0;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_CARD_PARAGRAPH = css`
|
|
|
|
padding: 48px;
|
|
|
|
font-size: 1.2rem;
|
|
|
|
color: ${Constants.system.white};
|
|
|
|
|
2020-08-09 01:04:17 +03:00
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
2020-08-03 06:22:47 +03:00
|
|
|
padding: 24px;
|
2020-07-17 13:24:20 +03:00
|
|
|
font-size: 1rem;
|
|
|
|
}
|
2020-07-16 08:48:51 +03:00
|
|
|
`;
|
|
|
|
|
2020-08-03 06:22:47 +03:00
|
|
|
const STYLES_CARD_ACTIONS = css`
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
color: ${Constants.system.white};
|
|
|
|
padding: 24px;
|
|
|
|
|
2020-08-09 01:04:17 +03:00
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
2020-08-03 06:22:47 +03:00
|
|
|
padding: 16px;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_CARD_ACTIONS_LEFT = css`
|
|
|
|
min-width: 10%;
|
|
|
|
width: 100%;
|
|
|
|
font-family: ${Constants.font.code};
|
|
|
|
text-transform: uppercase;
|
|
|
|
font-size: 12px;
|
|
|
|
text-align: left;
|
|
|
|
|
2020-08-09 01:04:17 +03:00
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
2020-08-03 06:22:47 +03:00
|
|
|
font-size: 10px;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_CARD_ACTIONS_RIGHT = css`
|
|
|
|
padding: 0 0 0 24px;
|
|
|
|
flex-shrink: 0;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_LINK = css`
|
|
|
|
color: ${Constants.system.green};
|
|
|
|
text-decoration: none;
|
|
|
|
transition: 200ms ease color;
|
|
|
|
|
|
|
|
:visited {
|
|
|
|
color: ${Constants.system.green};
|
|
|
|
}
|
|
|
|
|
|
|
|
:hover {
|
|
|
|
color: ${Constants.system.brand};
|
2020-07-17 13:24:20 +03:00
|
|
|
}
|
2020-07-16 08:48:51 +03:00
|
|
|
`;
|
2020-04-09 00:29:13 +03:00
|
|
|
|
2020-08-19 21:17:12 +03:00
|
|
|
// TODO(jim): Refactor this health check later.
|
2020-06-08 09:45:53 +03:00
|
|
|
export const getServerSideProps = async (context) => {
|
2020-08-19 21:17:12 +03:00
|
|
|
let buckets = false;
|
|
|
|
try {
|
|
|
|
const response = await fetch("https://hub.textile.io/health", {
|
|
|
|
headers: {
|
|
|
|
Accept: "application/json",
|
|
|
|
"Content-Type": "application/json",
|
|
|
|
},
|
|
|
|
});
|
2020-08-19 21:44:18 +03:00
|
|
|
|
|
|
|
if (response.status === 204) {
|
|
|
|
buckets = true;
|
|
|
|
}
|
2020-08-19 21:17:12 +03:00
|
|
|
} catch (e) {
|
|
|
|
console.log(e);
|
|
|
|
}
|
|
|
|
|
2020-04-09 00:29:13 +03:00
|
|
|
return {
|
2020-08-19 21:17:12 +03:00
|
|
|
props: { ...context.query, buckets },
|
2020-04-09 00:29:13 +03:00
|
|
|
};
|
|
|
|
};
|
2020-02-19 09:30:47 +03:00
|
|
|
|
|
|
|
export default class IndexPage extends React.Component {
|
2020-08-19 21:17:12 +03:00
|
|
|
state = {
|
2020-08-19 21:44:18 +03:00
|
|
|
available: this.props.buckets,
|
2020-08-19 21:17:12 +03:00
|
|
|
};
|
|
|
|
|
2020-07-17 13:24:20 +03:00
|
|
|
async componentDidMount() {
|
2020-08-19 21:44:18 +03:00
|
|
|
const response = await Actions.health({});
|
2020-07-22 21:54:58 +03:00
|
|
|
console.log("HEALTH_CHECK", response);
|
2020-08-19 21:17:12 +03:00
|
|
|
|
|
|
|
if (response && response.data) {
|
2020-08-19 21:44:18 +03:00
|
|
|
return this.setState({ available: this.props.buckets });
|
2020-08-19 21:17:12 +03:00
|
|
|
}
|
2020-08-19 21:44:18 +03:00
|
|
|
|
|
|
|
return this.setState({ available: false });
|
2020-07-17 13:24:20 +03:00
|
|
|
}
|
|
|
|
|
2020-02-19 09:30:47 +03:00
|
|
|
render() {
|
2020-07-16 08:48:51 +03:00
|
|
|
const title = `Slate`;
|
2020-08-09 01:04:17 +03:00
|
|
|
const description = "The place for all of your assets. Powered by Textile and Filecoin.";
|
2020-07-16 08:48:51 +03:00
|
|
|
const url = "https://slate.host";
|
2020-04-09 00:29:13 +03:00
|
|
|
|
2020-02-19 09:30:47 +03:00
|
|
|
return (
|
2020-08-09 01:04:17 +03:00
|
|
|
<WebsitePrototypeWrapper title={title} description={description} url={url}>
|
2020-07-16 08:48:51 +03:00
|
|
|
<div css={STYLES_ROOT}>
|
2020-08-03 06:22:47 +03:00
|
|
|
<WebsitePrototypeHeader />
|
|
|
|
<div css={STYLES_MIDDLE}>
|
|
|
|
<div css={STYLES_CARD}>
|
2020-08-09 01:04:17 +03:00
|
|
|
<img css={STYLES_CARD_IMAGE} src="/static/social-github-dark.jpg" />
|
2020-08-03 06:22:47 +03:00
|
|
|
<p css={STYLES_CARD_PARAGRAPH}>
|
2020-08-09 01:04:17 +03:00
|
|
|
Store your files, turn them into collections, and share them with the world — with{" "}
|
|
|
|
<a css={STYLES_LINK} href="https://github.com/filecoin-project/slate" target="_blank">
|
2020-08-04 07:18:15 +03:00
|
|
|
Filecoin & Slate
|
2020-08-03 06:22:47 +03:00
|
|
|
</a>
|
|
|
|
.
|
|
|
|
</p>
|
2020-08-19 21:44:18 +03:00
|
|
|
{this.state.available ? (
|
2020-08-19 21:17:12 +03:00
|
|
|
<div css={STYLES_CARD_ACTIONS}>
|
|
|
|
<div css={STYLES_CARD_ACTIONS_LEFT}>
|
|
|
|
Try out our alpha testing application v{Constants.values.version} for Filecoin
|
|
|
|
</div>
|
|
|
|
<div css={STYLES_CARD_ACTIONS_RIGHT}>
|
|
|
|
<System.ButtonPrimary onClick={() => window.open("/_")}>Use Slate</System.ButtonPrimary>
|
|
|
|
</div>
|
2020-08-03 06:22:47 +03:00
|
|
|
</div>
|
2020-08-19 21:17:12 +03:00
|
|
|
) : (
|
|
|
|
<div css={STYLES_CARD_ACTIONS}>
|
|
|
|
<div css={STYLES_CARD_ACTIONS_LEFT} style={{ textAlign: "center" }}>
|
|
|
|
Slate is currently down for maintenance.
|
|
|
|
</div>
|
2020-08-03 06:22:47 +03:00
|
|
|
</div>
|
2020-08-19 21:17:12 +03:00
|
|
|
)}
|
2020-08-03 06:22:47 +03:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<WebsitePrototypeFooter />
|
2020-07-16 08:48:51 +03:00
|
|
|
</div>
|
|
|
|
</WebsitePrototypeWrapper>
|
2020-02-19 09:30:47 +03:00
|
|
|
);
|
|
|
|
}
|
2020-08-03 06:22:47 +03:00
|
|
|
}
|