mirror of
https://github.com/filecoin-project/slate.git
synced 2024-12-25 01:52:45 +03:00
removes old stale test pages
This commit is contained in:
jimmylee
parent
b93d36dc8f
commit
e8faed6be4
@ -1,193 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as Actions from "~/common/actions";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import { css } from "@emotion/core";
|
||||
|
||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||
import WebsitePrototypeHeader from "~/components/core/WebsitePrototypeHeader";
|
||||
import WebsitePrototypeFooter from "~/components/core/WebsitePrototypeFooter";
|
||||
|
||||
const STYLES_ROOT = css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100vh;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
`;
|
||||
|
||||
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: #000000;
|
||||
border-radius: 8px;
|
||||
padding-top: 24px;
|
||||
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};
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 24px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CARD_ACTIONS = css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: ${Constants.system.white};
|
||||
padding: 24px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
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;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 10px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CARD_ACTIONS_RIGHT = css`
|
||||
padding: 0 0 0 24px;
|
||||
flex-shrink: 0;
|
||||
`;
|
||||
|
||||
const STYLES_LINK = css`
|
||||
color: #6a737d;
|
||||
text-decoration: none;
|
||||
transition: 200ms ease color;
|
||||
cursor: pointer;
|
||||
|
||||
:visited {
|
||||
color: #959da5;
|
||||
}
|
||||
|
||||
:hover {
|
||||
color: #959da5;
|
||||
}
|
||||
`;
|
||||
|
||||
// TODO(jim): Refactor this health check later.
|
||||
export const getServerSideProps = async (context) => {
|
||||
let buckets = false;
|
||||
try {
|
||||
const response = await fetch("https://slate.textile.io/health", {
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
if (response.status === 204) {
|
||||
buckets = true;
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
return {
|
||||
props: { ...context.query, buckets },
|
||||
};
|
||||
};
|
||||
|
||||
export default class IndexPage extends React.Component {
|
||||
state = {
|
||||
available: this.props.buckets,
|
||||
};
|
||||
|
||||
async componentDidMount() {
|
||||
const response = await Actions.health({});
|
||||
console.log("HEALTH_CHECK", response);
|
||||
|
||||
if (response && response.data) {
|
||||
return this.setState({ available: this.props.buckets });
|
||||
}
|
||||
|
||||
return this.setState({ available: false });
|
||||
}
|
||||
|
||||
render() {
|
||||
const title = `Slate`;
|
||||
const description = "The place for all of your assets. Powered by Textile and Filecoin.";
|
||||
const url = "https://slate.host";
|
||||
|
||||
return (
|
||||
<WebsitePrototypeWrapper title={title} description={description} url={url}>
|
||||
<div css={STYLES_ROOT}>
|
||||
<WebsitePrototypeHeader />
|
||||
<div css={STYLES_MIDDLE}>
|
||||
<div css={STYLES_CARD}>
|
||||
<img css={STYLES_CARD_IMAGE} src="/public/static/teaser.png" />
|
||||
<p css={STYLES_CARD_PARAGRAPH}>
|
||||
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"
|
||||
>
|
||||
Filecoin & Slate
|
||||
</a>
|
||||
.
|
||||
<br />
|
||||
<br />
|
||||
We launch September 14th.
|
||||
</p>
|
||||
{this.state.available ? (
|
||||
<div css={STYLES_CARD_ACTIONS}>
|
||||
<System.ButtonPrimaryFull onClick={() => window.open("/_")}>
|
||||
Use Slate (Alpha)
|
||||
</System.ButtonPrimaryFull>
|
||||
</div>
|
||||
) : (
|
||||
<div css={STYLES_CARD_ACTIONS}>
|
||||
<div css={STYLES_CARD_ACTIONS_LEFT} style={{ textAlign: "center" }}>
|
||||
Slate is currently down for maintenance.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<WebsitePrototypeFooter />
|
||||
</div>
|
||||
</WebsitePrototypeWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
453
pages/_/old.js
453
pages/_/old.js
@ -1,453 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as Actions from "~/common/actions";
|
||||
import * as System from "~/components/system";
|
||||
import CodeBlock from "~/components/system/CodeBlock";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
import { css } from "@emotion/core";
|
||||
|
||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||
import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader";
|
||||
import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter";
|
||||
|
||||
const STYLES_ROOT = css`
|
||||
padding: 16px 88px;
|
||||
section {
|
||||
width: 1140px;
|
||||
margin: auto;
|
||||
padding: 15vh 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 46px;
|
||||
line-height: 100%;
|
||||
}
|
||||
button {
|
||||
background: #36383d;
|
||||
color: white;
|
||||
width: 300px;
|
||||
height: 60px;
|
||||
border-radius: 5px;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_CONTAINER = css`
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
`;
|
||||
|
||||
const STYLES_OPENSOURCE_CONTAINER = css`
|
||||
width: 100%;
|
||||
background-color: ${Constants.system.foreground};
|
||||
`;
|
||||
|
||||
const STYLES_HEADER_TEXT = css`
|
||||
font-size: 4.768rem;
|
||||
padding: 0px 0px 32px 0px;
|
||||
width: 100%;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 2.441rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_TEXT = css`
|
||||
font-size: 1rem;
|
||||
color: ${Constants.system.black};
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CONTRIBUTOR_CONTAINER = css`
|
||||
display: grid;
|
||||
padding-top: 32px;
|
||||
column-gap: 5px;
|
||||
row-gap: 10px;
|
||||
justify-items: center;
|
||||
align-item: center;
|
||||
grid-template-columns: repeat(auto-fit, 150px);
|
||||
height: 70vh;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const STYLES_CONTRIBUTOR_CARD = css`
|
||||
height: 200px;
|
||||
width: 150px;
|
||||
background-color: ${Constants.system.white};
|
||||
`;
|
||||
|
||||
const STYLES_IMAGE_CONTAINER = css`
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
`;
|
||||
|
||||
const STYLES_CARD_IMAGE = css`
|
||||
width: 100%;
|
||||
height: auto;
|
||||
`;
|
||||
|
||||
const STYLES_CARD_TEXT = css`
|
||||
font-size: 1rem;
|
||||
color: ${Constants.system.black};
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_CONTRIBUTE = css`
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto 1fr 1fr;
|
||||
`;
|
||||
|
||||
const STYLES_BTN_SPACER = css`
|
||||
padding-bottom: 32px;
|
||||
`;
|
||||
|
||||
const STYLES_IMAGES_CONTAINER = css`
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const STYLES_IMAGE_CONT = css`
|
||||
max-width: 500px;
|
||||
float: right;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid ${Constants.system.border};
|
||||
box-shadow: 5px 5px 1px ${Constants.system.border};
|
||||
`;
|
||||
|
||||
const STYLES_CONTRIBUTE_CONTAINER = css`
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
`;
|
||||
|
||||
const STYLES_IMAGE_THREE = css`
|
||||
width: 100%;
|
||||
height: auto;
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_QUOTE = css`
|
||||
grid-row: 3;
|
||||
grid-column: 1;
|
||||
font-size: 2rem;
|
||||
color: ${Constants.system.black};
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CONTACT_CONTAINER = css`
|
||||
width: 100%;
|
||||
height: auto;
|
||||
`;
|
||||
|
||||
const STYLES_CONTACT_BTN_CONTAINER = css`
|
||||
display: flex;
|
||||
padding: 96px 0;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
`;
|
||||
|
||||
const STYLES_INTEGRATE_GIF = css`
|
||||
width: 100%
|
||||
height: 70vh;
|
||||
padding-top: 20vh;
|
||||
`;
|
||||
|
||||
const STYLES_DESIGN_CONTAINER = css`
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-column-gap: 32px;
|
||||
`;
|
||||
|
||||
const STYLES_D_TEXT = css`
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
`;
|
||||
|
||||
const STYLES_DESIGN_CODE = css`
|
||||
width: 100%;
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
`;
|
||||
|
||||
const STYLES_D_IMAGE_CONTAINER = css`
|
||||
height: auto;
|
||||
width: 90%;
|
||||
grid-column: 2;
|
||||
grid-row: 1 / span 2;
|
||||
`;
|
||||
|
||||
const STYLES_DESIGN_IMAGE = css`
|
||||
width: 100%;
|
||||
height: auto;
|
||||
`;
|
||||
const STYLES_WRAPPER_TEXT = css`
|
||||
width: 40%;
|
||||
align-self: center;
|
||||
padding: 0 50px;
|
||||
`;
|
||||
const STYLES_SECTION = css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-self: center;
|
||||
h1 {
|
||||
font-size: 46px;
|
||||
line-height: 100%;
|
||||
}
|
||||
`;
|
||||
const STYLES_CARD = css``;
|
||||
|
||||
export const getServerSideProps = async (context) => {
|
||||
return {
|
||||
props: { ...context.query },
|
||||
};
|
||||
};
|
||||
|
||||
export default class IndexPage extends React.Component {
|
||||
async componentDidMount() {
|
||||
const response = await Actions.health();
|
||||
console.log("HEALTH_CHECK", response);
|
||||
this.addContributors();
|
||||
}
|
||||
|
||||
contributorsList = [
|
||||
{
|
||||
id: 1,
|
||||
name: "jimmylee",
|
||||
url: "https://github.com/jimmylee",
|
||||
organization: "Slate",
|
||||
pic:
|
||||
"https://avatars0.githubusercontent.com/u/310223?s=400&u=62a15c1b5791b953fc5153a4b3f491f4b0bf2ae5&v=4",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "martinalong",
|
||||
url: "https://github.com/martinalong",
|
||||
organization: "Slate",
|
||||
pic:
|
||||
"https://avatars2.githubusercontent.com/u/33686587?s=400&u=d1841da2872f30f7f8cb80e67cdc9b385d0f50e1&v=4",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "gndclouds",
|
||||
url: "https://github.com/gndclouds",
|
||||
organization: "Slate",
|
||||
pic:
|
||||
"https://avatars0.githubusercontent.com/u/1757261?s=400&u=b7136d82bfacac3002b3b08980ac611ca7f34b7b&v=4",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "uonai",
|
||||
url: "https://github.com/uonai",
|
||||
organization: "",
|
||||
pic:
|
||||
"https://avatars2.githubusercontent.com/u/7935491?s=400&u=8d91d58215c8df440eacf37d6291d912252685c3&v=4",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "tarafanlin",
|
||||
url: "https://github.com/tarafanlin",
|
||||
organization: "Slate",
|
||||
pic:
|
||||
"https://avatars2.githubusercontent.com/u/35607644?s=400&u=48483bdf251e5293fefb30ae993bfa04d06601a6&v=4",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "jasonleyser",
|
||||
url: "https://github.com/",
|
||||
organization: "Slate",
|
||||
pic: "/static/a1.jpg",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "akuokojnr",
|
||||
url: "https://github.com/akuokojnr",
|
||||
organization: "",
|
||||
pic:
|
||||
"https://avatars2.githubusercontent.com/u/31008944?s=400&u=340814cc84eac860654a072781661e58aadaf560&v=4",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "jordattebayo",
|
||||
url: "https://github.com/jordattebayo",
|
||||
organization: "",
|
||||
pic:
|
||||
"https://avatars2.githubusercontent.com/u/31581758?s=400&u=21765bba0c302a554ef3aab835450a32fc947a98&v=4",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: "Pooja",
|
||||
url: "https://github.com/",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg",
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: "tmytrn",
|
||||
url: "https://github.com/tmrtrn",
|
||||
organization: "",
|
||||
pic:
|
||||
"https://avatars0.githubusercontent.com/u/2691514?s=400&u=b589dc97fa893152768b00c27b5f9f68d1a7fb79&v=4",
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: "motdde",
|
||||
url: "https://github.com/motdde",
|
||||
organization: "",
|
||||
pic:
|
||||
"https://avatars3.githubusercontent.com/u/12215060?s=400&u=aa85ebcfc7438becdb50a67aa79e78ba8feb2d77&v=4",
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
name: "harisbutt",
|
||||
url: "https://github.com/harisbutt",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg",
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
name: "andrewxhill",
|
||||
url: "https://github.com/andrewxhill",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg",
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
name: "johannes-jp",
|
||||
url: "https://github.com/johannes-jp",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg",
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
name: "Anish-Agnihotri",
|
||||
url: "https://github.com/anish-agnihotri",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg",
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
name: "Aminejvm",
|
||||
url: "https://github.com/aminejvm",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg",
|
||||
},
|
||||
];
|
||||
|
||||
addContributors = () => {
|
||||
const allContributors = [];
|
||||
const contributors = this.contributorsList;
|
||||
for (let c of contributors) {
|
||||
allContributors.push(
|
||||
<div key={c.id} css={STYLES_CONTRIBUTOR_CARD}>
|
||||
<div css={STYLES_IMAGE_CONTAINER}>
|
||||
<img css={STYLES_CARD_IMAGE} src={c.pic} />
|
||||
</div>
|
||||
<System.P css={STYLES_CARD_TEXT}>{c.name}</System.P>
|
||||
<a href={c.url}>{`@${c.name}`}</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
ReactDOM.render(allContributors, document.getElementById("contr-cont"));
|
||||
};
|
||||
|
||||
render() {
|
||||
const title = `Slate`;
|
||||
const description = "The place for all of your assets. Powered by Textile and Filecoin.";
|
||||
const url = "https://slate.host/community";
|
||||
|
||||
return (
|
||||
<WebsitePrototypeWrapper title={title} description={description} url={url}>
|
||||
<WebsitePrototypeHeader />
|
||||
<div css={STYLES_ROOT}>
|
||||
<section css={STYLES_SECTION}>
|
||||
<div>
|
||||
<System.H1>
|
||||
Slate is designed and built by a growing community of hackers, artists, and
|
||||
creatives on the web.
|
||||
</System.H1>
|
||||
<System.P>ytu</System.P>
|
||||
</div>
|
||||
<div>
|
||||
{" "}
|
||||
<div id="contr-cont" css={STYLES_CONTRIBUTOR_CONTAINER} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section css={STYLES_SECTION}>
|
||||
<div css={STYLES_WRAPPER_TEXT}>
|
||||
<System.H1>Get Involved</System.H1>
|
||||
<System.P>
|
||||
Slate is a fully open-source file sharing network designed for research and
|
||||
collaboration.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<div>
|
||||
<img
|
||||
src="https://d2w9rnfcy7mm78.cloudfront.net/8547413/original_613b9b0a650a3f274c68e1407f552ff3.png?1599111034?bc=0"
|
||||
alt="Slate Web App Screenshot"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div css={STYLES_CARD}>
|
||||
<System.H2>Contribute</System.H2>
|
||||
<br />
|
||||
<System.P>Get involved with the project and contribute.</System.P>
|
||||
<br />
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div css={STYLES_CARD}>
|
||||
<System.H2>Contact</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
Reach out to any of the core contributors, reach us on Twitter, or join our Slack.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div css={STYLES_CARD}>
|
||||
<System.H2>Integrate</System.H2>
|
||||
<br />
|
||||
<System.P>Explore our API and SDK and build on top of Slate.</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<CodeBlock>npm install --save slate-react-system</CodeBlock>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<System.H2>Design System</System.H2>
|
||||
<br />
|
||||
<System.P>Check out our open source design system for your projects</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<CodeBlock>npm install --save slate-react-system</CodeBlock>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<WebsitePrototypeFooter />
|
||||
</WebsitePrototypeWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,353 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as Actions from "~/common/actions";
|
||||
|
||||
import { css } from "@emotion/core";
|
||||
|
||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||
import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader";
|
||||
import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter";
|
||||
|
||||
const STYLES_ROOT = css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 0 0 80px 0;
|
||||
`;
|
||||
|
||||
const STYLES_H1 = css`
|
||||
font-size: ${Constants.typescale.lvl5};
|
||||
font-family: ${Constants.font.medium};
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
padding: 0px 0px 16px 0px;
|
||||
letter-spacing: -0.021rem;
|
||||
width: 100%;
|
||||
color: ${Constants.system.slate};
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: ${Constants.typescale.lvl3};
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_H2 = css`
|
||||
font-size: ${Constants.typescale.lvl3};
|
||||
font-family: ${Constants.font.medium};
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.019rem;
|
||||
padding: 0 0 16px 0;
|
||||
width: 100%;
|
||||
color: ${Constants.system.slate};
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: ${Constants.typescale.lvl2};
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_H3 = css`
|
||||
font-size: ${Constants.typescale.lvl2};
|
||||
font-family: ${Constants.font.text};
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.014rem;
|
||||
padding: 0 0 8px 0;
|
||||
color: ${Constants.system.slate};
|
||||
opacity: 0.7;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: ${Constants.typescale.lvl1};
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_BLOCK = css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
max-width: 56vw;
|
||||
width: 100%;
|
||||
align-self: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_IMG = css`
|
||||
margin: 0px auto 48px auto;
|
||||
width: 40%;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 60%;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_ANNOTATION = css`
|
||||
margin-top: 4px;
|
||||
font-size: ${Constants.typescale.lvl0};
|
||||
color: ${Constants.system.moonstone};
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON_PRIMARY = css`
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
min-height: 48px;
|
||||
padding: 0px 24px 0px 24px;
|
||||
margin: 24px 0 16px 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.2px;
|
||||
font-family: ${Constants.font.semiBold};
|
||||
transition: 200ms ease all;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
background-color: ${Constants.system.brand};
|
||||
color: ${Constants.system.white};
|
||||
box-shadow: -4px -4px 10px #ffffff, 4px 4px 10px #d4d4d4;
|
||||
|
||||
:hover {
|
||||
color: ${Constants.system.foreground};
|
||||
}
|
||||
|
||||
:focus {
|
||||
box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.3);
|
||||
background-color: ${Constants.system.pitchBlack};
|
||||
color: ${Constants.system.wall};
|
||||
outline: 0;
|
||||
border: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON_SECONDARY = css`
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
min-height: 48px;
|
||||
padding: 0px 24px 0px 24px;
|
||||
margin: 24px 0 16px 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.2px;
|
||||
font-family: ${Constants.font.semiBold};
|
||||
transition: 200ms ease all;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
background-color: ${Constants.system.foreground};
|
||||
color: ${Constants.system.brand};
|
||||
box-shadow: -4px -4px 10px #ffffff, 4px 4px 10px #d4d4d4;
|
||||
|
||||
:hover {
|
||||
background-color: ${Constants.system.white};
|
||||
}
|
||||
|
||||
:focus {
|
||||
box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.3);
|
||||
background-color: ${Constants.system.pitchBlack};
|
||||
color: ${Constants.system.wall};
|
||||
outline: 0;
|
||||
border: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_LINK_WHITE = css`
|
||||
color: ${Constants.system.pitchBlack};
|
||||
text-decoration: none;
|
||||
transition: 200ms ease color;
|
||||
padding: 24px 0 0 0;
|
||||
|
||||
:hover {
|
||||
color: ${Constants.system.moonstone};
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_HERO = css`
|
||||
width: 100vw;
|
||||
padding: 0 88px 88px 88px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: -88px 0px px 0px;
|
||||
background: ${Constants.system.foreground};
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 16vh 24px 48px 24px;
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_WRAPPER = css`
|
||||
width: 100vw;
|
||||
padding: 32px 88px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background: ${Constants.system.foreground};
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 64px 24px;
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_TABLE = css`
|
||||
width: 100%;
|
||||
font-size: ${Constants.typescale.lvl0};
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
`;
|
||||
|
||||
const STYLES_TH = css`
|
||||
font-family: ${Constants.font.semiBold};
|
||||
font-weight: 400;
|
||||
border: 1px solid ${Constants.system.lightBorder};
|
||||
padding: 12px;
|
||||
`;
|
||||
|
||||
const STYLES_TD = css`
|
||||
font-family: ${Constants.font.text};
|
||||
font-weight: 400;
|
||||
border: 1px solid ${Constants.system.lightBorder};
|
||||
padding: 12px;
|
||||
`;
|
||||
|
||||
const STYLES_LINK = css`
|
||||
color: ${Constants.system.moonstone};
|
||||
text-decoration: none;
|
||||
transition: 200ms ease color;
|
||||
|
||||
:visited {
|
||||
color: ${Constants.system.slate};
|
||||
}
|
||||
|
||||
:hover {
|
||||
color: ${Constants.system.slate};
|
||||
}
|
||||
`;
|
||||
|
||||
export const getServerSideProps = async (context) => {
|
||||
return {
|
||||
props: { ...context.query },
|
||||
};
|
||||
};
|
||||
|
||||
export default class IndexPage extends React.Component {
|
||||
async componentDidMount() {
|
||||
const response = await Actions.health();
|
||||
console.log("HEALTH_CHECK", response);
|
||||
}
|
||||
getOs = () => {
|
||||
const os = ["Windows", "Linux", "Mac"]; // add your OS values
|
||||
return os.find((v) => navigator.appVersion.indexOf(v) >= 0);
|
||||
};
|
||||
render() {
|
||||
const title = `Slate Download`;
|
||||
const description = "Donwload Slate app and web extenstion";
|
||||
const url = "https://slate.host/download";
|
||||
|
||||
return (
|
||||
<WebsitePrototypeWrapper title={title} description={description} url={url}>
|
||||
<WebsitePrototypeHeader color="dark" />
|
||||
<div css={STYLES_ROOT}>
|
||||
<div css={STYLES_SECTION_HERO}>
|
||||
<div css={STYLES_BLOCK}>
|
||||
<img
|
||||
css={STYLES_IMG}
|
||||
src="https://slate.textile.io/ipfs/bafkreidpydbatkl4rqf5bbim5qr3ottb2ibifazd2art4too5bmppp3rqm"
|
||||
alt="Slate browser extension"
|
||||
/>
|
||||
<h1 css={STYLES_H1}>Slate for Chrome</h1>
|
||||
<h3 css={STYLES_H3}>
|
||||
Take any image on the web and save it to Slate right from your browser tab.
|
||||
</h3>
|
||||
<div>
|
||||
<button
|
||||
css={STYLES_BUTTON_PRIMARY}
|
||||
onClick={() =>
|
||||
window.open(
|
||||
"https://chrome.google.com/webstore/detail/slate/gloembacbehhbfbkcfjmloikeeaebnoc"
|
||||
)
|
||||
}
|
||||
>
|
||||
Get Slate Chrome extension
|
||||
</button>
|
||||
</div>
|
||||
<p css={STYLES_ANNOTATION}>
|
||||
Currently avaible for{" "}
|
||||
<a css={STYLES_LINK_WHITE} href="https://www.google.com/chrome/" target="_blank">
|
||||
Chrome
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div css={STYLES_SECTION_WRAPPER}>
|
||||
<div css={STYLES_BLOCK}>
|
||||
<h2 css={STYLES_H2}>Contribute</h2>
|
||||
<h3 css={STYLES_H3}>
|
||||
We would love for you to join us. You're welcomed to file an issue or submit a pull
|
||||
request on Github.
|
||||
</h3>
|
||||
<div>
|
||||
<button
|
||||
css={STYLES_BUTTON_SECONDARY}
|
||||
onClick={() =>
|
||||
window.open(
|
||||
"https://chrome.google.com/webstore/detail/slate/gloembacbehhbfbkcfjmloikeeaebnoc"
|
||||
)
|
||||
}
|
||||
>
|
||||
View Github
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div css={STYLES_SECTION_WRAPPER}>
|
||||
<div css={STYLES_BLOCK}>
|
||||
<h2 css={STYLES_H2}>Releases</h2>
|
||||
<h3 css={STYLES_H3}>
|
||||
Slate is built in public and all past releases are always avaible for download.
|
||||
</h3>
|
||||
</div>
|
||||
<div css={STYLES_BLOCK}>
|
||||
<table css={STYLES_TABLE}>
|
||||
<tr>
|
||||
<th css={STYLES_TH}>Version</th>
|
||||
<th css={STYLES_TH}>Product</th>
|
||||
<th css={STYLES_TH}>Date</th>
|
||||
<th css={STYLES_TH}>Download</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td css={STYLES_TD}>0.4</td>
|
||||
<td css={STYLES_TD}>Slate Chrome extension</td>
|
||||
<td css={STYLES_TD}>2020-09-07</td>
|
||||
<td css={STYLES_TD}>
|
||||
<a
|
||||
css={STYLES_LINK}
|
||||
href="/public/static/slate-for-chrome-V0.4.zip"
|
||||
download="Slate Chrome extension V0.4"
|
||||
>
|
||||
Download
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<WebsitePrototypeFooter />
|
||||
</WebsitePrototypeWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,237 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import { css } from "@emotion/core";
|
||||
|
||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||
import WebsitePrototypeHeader from "~/components/core/WebsitePrototypeHeader";
|
||||
import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter";
|
||||
|
||||
const STYLES_ROOT = css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 88px 32px 128px 32px;
|
||||
max-width: 736px;
|
||||
width: 100%;
|
||||
margin: 0 auto 0 auto;
|
||||
`;
|
||||
|
||||
const STYLES_COPY_EMAIL = css`
|
||||
display: inline;
|
||||
`;
|
||||
|
||||
export const getServerSideProps = async (context) => {
|
||||
return {
|
||||
props: { ...context.query },
|
||||
};
|
||||
};
|
||||
export function CopyEmail() {
|
||||
const [copySuccess, setCopySuccess] = useState("");
|
||||
|
||||
function copyToClipboard() {
|
||||
navigator.clipboard.writeText("abuse@filecoin.io");
|
||||
setCopySuccess("Copied!");
|
||||
}
|
||||
return (
|
||||
<div css={STYLES_COPY_EMAIL}>
|
||||
<a onClick={copyToClipboard}>abuse@filecoin.io</a>
|
||||
{copySuccess}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default class GuidelinesPage extends React.Component {
|
||||
render() {
|
||||
const title = `Slate: Community Guidelines`;
|
||||
const description =
|
||||
"We believe that our mission is best served in an environment that is friendly, safe, and accepting.";
|
||||
const url = "https://slate.host/guidelines";
|
||||
|
||||
return (
|
||||
<WebsitePrototypeWrapper title={title} description={description} url={url}>
|
||||
<WebsitePrototypeHeader />
|
||||
<div css={STYLES_ROOT}>
|
||||
<System.H1>Community Guidelines</System.H1>
|
||||
<br />
|
||||
<System.P>
|
||||
We believe that our mission is best served in an environment that is friendly, safe, and
|
||||
accepting; free from intimidation or harassment. Towards this end, certain behaviors and
|
||||
practices will not be tolerated.
|
||||
</System.P>
|
||||
<br />
|
||||
<System.UL>
|
||||
<System.LI>Be respectful.</System.LI>
|
||||
<System.LI>
|
||||
We're here to help: <CopyEmail />
|
||||
</System.LI>
|
||||
<System.LI>Abusive behavior is never tolerated.</System.LI>
|
||||
<System.LI>
|
||||
Violations of this code may result in swift and permanent expulsion from the Slate
|
||||
community.
|
||||
</System.LI>
|
||||
<System.LI>
|
||||
"Too long, didn't read" is not a valid excuse for not knowing what is in this
|
||||
document.
|
||||
</System.LI>
|
||||
</System.UL>
|
||||
<br />
|
||||
<System.P>
|
||||
We expect all members of the Slate community to abide by this Code of Conduct at all
|
||||
times in all Slate community venues, online and in person, and in one-on-one
|
||||
communications pertaining to Slate affairs.
|
||||
</System.P>
|
||||
|
||||
<br />
|
||||
<System.P>
|
||||
This policy covers the usage of Filecoin public infrastructure, as well as other
|
||||
Filecoin websites, Filecoin related events, and any other services offered by or on
|
||||
behalf of the Filecoin community. It also applies to behavior in the context of the
|
||||
Filecoin Open Source project communities, including but not limited to public GitHub
|
||||
repositories, IRC channels, social media, mailing lists, and public events.
|
||||
</System.P>
|
||||
<br />
|
||||
|
||||
<System.P>
|
||||
The definitions of various subjective terms such as "discriminatory", "hateful", or
|
||||
"confusing" will be decided at the sole discretion of the Filecoin abuse team.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Friendly Harassment-Free Space</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
We are committed to providing a friendly, safe and welcoming environment for all,
|
||||
regardless of gender identity, sexual orientation, disability, ethnicity, religion, age,
|
||||
physical appearance, body size, race, or similar personal characteristics.We ask that
|
||||
you please respect that people have differences of opinion regarding technical choices,
|
||||
and that every design or implementation choice carries a trade-off and numerous costs.
|
||||
There is seldom a single right answer. A difference of technology preferences is not a
|
||||
license to be rude.{" "}
|
||||
</System.P>
|
||||
<br />
|
||||
<System.P>
|
||||
Any spamming, trolling, flaming, baiting, or other attention-stealing behavior is not
|
||||
welcome, and will not be tolerated. Harassing other users is never tolerated, whether
|
||||
via public or private media. Avoid using offensive or harassing nicknames, or other
|
||||
identifiers that might detract from a friendly, safe, and welcoming environment for all.{" "}
|
||||
</System.P>
|
||||
<br />
|
||||
<System.P>
|
||||
Harassment includes, but is not limited to: harmful or prejudicial verbal or written
|
||||
comments related to gender identity, sexual orientation, disability, ethnicity,
|
||||
religion, age, physical appearance, body size, race, or similar personal
|
||||
characteristics; inappropriate use of nudity, sexual images, and/or sexually explicit
|
||||
language in public spaces; threats of physical or non-physical harm; deliberate
|
||||
intimidation, stalking or following; harassing photography or recording; sustained
|
||||
disruption of talks or other events; inappropriate physical contact; and unwelcome
|
||||
sexual attention.{" "}
|
||||
</System.P>
|
||||
<br />
|
||||
<System.P>
|
||||
Media shared through public infrastructure run by the Filecoin team must not contain
|
||||
illegal or infringing content. You should only publish content via Filecoin public
|
||||
infrastructure if you have the right to do so. This include complying with all software
|
||||
license agreements or other intellectual property restrictions. You will be solely
|
||||
responsible for any violation of laws or others' intellectual property rights.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Avoid Marketing or Soliciting</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
You are welcome to post endorsements of tools, products or services that you personally
|
||||
find useful, but please refrain from blatant advertising, marketing or any kind of spam.
|
||||
Selling commercial services or fundraising is not allowed.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Reporting Violations of this Code of Conduct</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
If you believe someone is harassing you or has otherwise violated this Code of Conduct,
|
||||
please contact us at <CopyEmail /> to send us an abuse report. If this is the initial
|
||||
report of a problem, please include as much detail as possible. It is easiest for us to
|
||||
address issues when we have more context.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Copyright Violations</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
We respect the intellectual property of others and ask that you do too. If you believe
|
||||
any content or other materials available through public Filecoin infrastructure violates
|
||||
a copyright held by you and you would like to submit a notice pursuant to the Digital
|
||||
Millennium Copyright Act or other similar international law, you can submit a notice to
|
||||
our agent for service of notice to: <CopyEmail />. Please make sure your notice meets
|
||||
the Digital Millennium Copyright Act requirements.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Consequences</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
All content published to public Filecoin infrastructure is hosted at the sole discretion
|
||||
of the Filecoin team. Unacceptable behavior from any community member will not be
|
||||
tolerated. Anyone asked to stop unacceptable behavior is expected to comply immediately.
|
||||
If a community member engages in unacceptable behavior, the Filecoin team may take any
|
||||
action they deem appropriate, up to and including a temporary ban or permanent expulsion
|
||||
from the community without warning (and without refund in the case of a paid event or
|
||||
service).
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Addressing Grievances</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
Please contact <CopyEmail /> if you need to report a problem or address a grievance
|
||||
related to an abuse report. If you feel you have been falsely or unfairly accused of
|
||||
violating this Code of Conduct, you should contact <CopyEmail />. We will do our best to
|
||||
ensure that your grievance is handled appropriately. In general, we will choose the
|
||||
course of action that we judge as being most in the interest of fostering a safe and
|
||||
friendly community.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Contact Info</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
Please contact <CopyEmail /> if you need to report a problem or address a grievance
|
||||
related to an abuse report. You are also encouraged to contact us if you are curious
|
||||
about something that might be "on the line" between appropriate and inappropriate
|
||||
content. We are happy to provide guidance to help you be a successful part of our
|
||||
community.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Changes</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
This is a living document and may be updated from time to time. Please refer to the{" "}
|
||||
<a
|
||||
href="https://github.com/filecoin-project/slate/blob/main/pages/guidelines.js"
|
||||
alt="GitHub Changelog"
|
||||
>
|
||||
git history
|
||||
</a>{" "}
|
||||
for this document to view the changes.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Credit and License</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
This Code of Conduct is based on the{" "}
|
||||
<a href="https://www.npmjs.com/policies/conduct">npm Code of Conduct</a>. This document
|
||||
may be reused under a{" "}
|
||||
<a href="http://creativecommons.org/licenses/by-sa/4.0/">
|
||||
Creative Commons Attribution-ShareAlike License
|
||||
</a>
|
||||
.
|
||||
</System.P>
|
||||
</div>
|
||||
<WebsitePrototypeFooter />
|
||||
</WebsitePrototypeWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,933 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as Actions from "~/common/actions";
|
||||
|
||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||
import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader";
|
||||
import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter";
|
||||
|
||||
import { css } from "@emotion/core";
|
||||
|
||||
const USER_SLATES = [
|
||||
{
|
||||
name: "Urban gardens",
|
||||
url: "https://slate.host/gndclouds/urban-gardens",
|
||||
username: "gndclouds",
|
||||
preview:
|
||||
"https://slate.textile.io/ipfs/bafybeiff7y4kz4e2z4nfso4nsgdbkfsyroa62jvvldoxafuaf34m7lticu",
|
||||
},
|
||||
{
|
||||
name: "Shapes and Letters",
|
||||
url: "https://slate.host/haris/shapes-and-letters",
|
||||
username: "haris",
|
||||
preview:
|
||||
"https://slate.textile.io/ipfs/bafybeifgxtl7mq5djnorxedzi35hkizjmbjvdy3nnoitd3xvdnqpmruxbm",
|
||||
},
|
||||
{
|
||||
name: "Mountains",
|
||||
url: "https://slate.host/jason/mountains",
|
||||
username: "jason",
|
||||
preview:
|
||||
"https://slate.textile.io/ipfs/bafkreies6uykgocrkunrsndxfubntyqvfqzo5wuwyos42vak6d4qnvtdn4",
|
||||
},
|
||||
{
|
||||
name: "Loom",
|
||||
url: "https://slate.host/tara/loom",
|
||||
username: "tara",
|
||||
preview:
|
||||
"https://slate.textile.io/ipfs/bafybeifl5xzy4vjctrsr3jywdlv5ceq3hpaadhcii2ekjx2gljyagveqna",
|
||||
},
|
||||
{
|
||||
name: "Brand",
|
||||
url: "https://slate.host/slate/brand",
|
||||
username: "slate",
|
||||
preview:
|
||||
"https://slate.textile.io/ipfs/bafybeiaerbu2nivrgncqtwgwom27caji25netswvjbo6tcmbka47ucmupa",
|
||||
},
|
||||
{
|
||||
name: "Montreal underground",
|
||||
url: "https://slate.host/tcosta/montreal-underground",
|
||||
username: "tcosta",
|
||||
preview:
|
||||
"https://slate.textile.io/ipfs/bafybeieblkyt6d7wg4xmltshvxm6w7tz4c3zjpjuu4yfhiak36debqccda",
|
||||
},
|
||||
{
|
||||
name: "Monet",
|
||||
url: "https://slate.host/slate/monet",
|
||||
username: "slate",
|
||||
preview:
|
||||
"https://slate.textile.io/ipfs/bafkreieb4yfiamtipapmhoihl547lxeod2vfku67dimrhmab5tcglr5bli",
|
||||
},
|
||||
{
|
||||
name: "Books",
|
||||
url: "https://slate.host/haris/books",
|
||||
username: "haris",
|
||||
preview:
|
||||
"https://slate.textile.io/ipfs/bafkreihe7ismqfyytekj6yvbv6mpbc5de3gozk6n7a47smodbcsnrhbpri",
|
||||
},
|
||||
{
|
||||
name: "Papers",
|
||||
url: "https://slate.host/slate/papers",
|
||||
username: "slate",
|
||||
preview:
|
||||
"https://slate.textile.io/ipfs/bafkreif7l2vxkvdyrydcjwjjrrmqq73id3tdrdkf3z54tp2fotc75wkdwm",
|
||||
},
|
||||
];
|
||||
|
||||
const ASSET_HERO = {
|
||||
src: "https://slate.textile.io/ipfs/bafybeidfr2x5ftxzixjxtrgiqm6iuotzip25tlrpase226jog3tqenqd4a",
|
||||
backgroundImage: `https://slate.textile.io/ipfs/bafybeict43te7wcy7pdw3v45dwwedwxw7yjthbytdsja6dpsiqkgil7iey`,
|
||||
};
|
||||
|
||||
const ASSET_HERO_COLLABORATE = {
|
||||
src: "https://slate.textile.io/ipfs/bafybeih63zq5f7htbhkmrog447ybytyid2yi6fix4k6z3pbegxpcq2r2qa",
|
||||
backgroundImage:
|
||||
"https://slate.textile.io/ipfs/bafkreiagwjqvmisseb6voj7cwd3lhjudigkel63hqg6efpqjmhlfv5ucj4",
|
||||
};
|
||||
|
||||
const ASSETS_SMALL = [
|
||||
{
|
||||
src:
|
||||
"https://slate.textile.io/ipfs/bafybeiawzns4vxqp3llkzmc4shvytzpurysh26yj3aljde4d4fsgf7wlze",
|
||||
backgroundImage:
|
||||
"https://slate.textile.io/ipfs/bafybeihez3rtyqqftx7mkyktwozyqjkwdtk2kglxqjc4zspah26bva3yk4",
|
||||
},
|
||||
{
|
||||
src:
|
||||
"https://slate.textile.io/ipfs/bafybeiczug4d6uyr4pkejdwirkeffbzkkzrbaprxvreid6iitw3pmjzq3q",
|
||||
backgroundImage:
|
||||
"https://slate.textile.io/ipfs/bafybeidnt2l3lslxi7ofkxs5ffncsh4fw5h2ohbukxumngrqj5pdrooaou",
|
||||
},
|
||||
{
|
||||
src:
|
||||
"https://slate.textile.io/ipfs/bafkreid7wl4443p764ozdlqtodh7dmsej6ffayp4tc3lr3hil2qkclrohi",
|
||||
backgroundImage:
|
||||
"https://slate.textile.io/ipfs/bafkreibb3onijljnmonrbs7qguimjf5qwbnkx3m33pouxbtar2yb7hupti",
|
||||
},
|
||||
{
|
||||
src:
|
||||
"https://slate.textile.io/ipfs/bafybeicjovnsnhvt7xwjw3igdwwpb4ms2m23fayoydj3oevrwyi7dzjtga",
|
||||
backgroundImage:
|
||||
"https://slate.textile.io/ipfs/bafkreiefuyyk6dcjhyk3hl2httqvdlnl3mo6wrfzgmponexrc75jop757y",
|
||||
},
|
||||
];
|
||||
|
||||
const ASSETS_MEDIUM = [
|
||||
{
|
||||
title: "Create moodboards",
|
||||
src:
|
||||
"https://slate.textile.io/ipfs/bafybeib46kplzcylnzviaojgbogua52wyrzbvnj6uulvo4zwrxm4hnxeqe",
|
||||
backgroundImage:
|
||||
"https://slate.textile.io/ipfs/bafybeicoaponp2nv3ikpsjgcgu7pio6aercflsvsiyxrpaonza7ncg73dq",
|
||||
},
|
||||
|
||||
{
|
||||
title: "Organize research",
|
||||
src:
|
||||
"https://slate.textile.io/ipfs/bafybeigstyjfpzazdlmgkfuhw4yxrneux3opvbls7nmv6gq7dbnhmy6xwy",
|
||||
backgroundImage:
|
||||
"https://slate.textile.io/ipfs/bafybeie4p45yfvbjdzc2rgw67e7crcltpu7o544xtugs3wyv3qh3t3oegi",
|
||||
},
|
||||
|
||||
{
|
||||
title: "Share presentations",
|
||||
src:
|
||||
"https://slate.textile.io/ipfs/bafybeiampkmsxeihxnuz2hkgbhtzosgkwghslpwm7dsrxrzlqwa7tvzreq",
|
||||
backgroundImage:
|
||||
"https://slate.textile.io/ipfs/bafkreiglefskwq7bpa3aazihegawd4qwxockl6shipnps7zlokrbnu4f7u",
|
||||
},
|
||||
];
|
||||
|
||||
const ASSET_CHROME_EXTENSION =
|
||||
"https://slate.textile.io/ipfs/bafybeibwppu23j5wgshqvm5qyqv3c6pmhp3y5irdwn3ivvnnrpexiguzbi";
|
||||
|
||||
const ASSET_SLATE_CUBE =
|
||||
"https://slate.textile.io/ipfs/bafybeiaex6rorqtumulc4x3u4sbl5pdbn5sx45mvm6uvbebu4cxgk3okjy";
|
||||
|
||||
const STYLES_ROOT = css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
const STYLES_LINK = css`
|
||||
text-decoration: none;
|
||||
color: ${Constants.system.white};
|
||||
transition: 200ms ease all;
|
||||
|
||||
:hover {
|
||||
color: ${Constants.system.blue};
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_H1 = css`
|
||||
font-size: ${Constants.typescale.lvl5};
|
||||
font-family: ${Constants.font.medium};
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
padding: 0px 0px 24px 0px;
|
||||
letter-spacing: -0.021rem;
|
||||
width: 100%;
|
||||
color: ${Constants.system.white};
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
font-size: ${Constants.typescale.lvl5};
|
||||
padding: 0px 0px 16px 0px;
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: ${Constants.typescale.lvl3};
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_H2 = css`
|
||||
font-size: ${Constants.typescale.lvl3};
|
||||
font-family: ${Constants.font.medium};
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.019rem;
|
||||
padding: 0 0 24px 0;
|
||||
width: 100%;
|
||||
color: ${Constants.system.darkGray};
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
font-size: ${Constants.typescale.lvl3};
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: ${Constants.typescale.lvl2};
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_H3 = css`
|
||||
font-size: ${Constants.typescale.lvl2};
|
||||
font-family: ${Constants.font.medium};
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.014rem;
|
||||
padding: 0 0 8px 0;
|
||||
color: ${Constants.system.darkGray};
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
font-size: ${Constants.typescale.lvl2};
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: ${Constants.typescale.lvl1};
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_HIGHLIGHT = css`
|
||||
color: ${Constants.system.white};
|
||||
`;
|
||||
|
||||
const STYLES_HIGHLIGHT_BLACK = css`
|
||||
color: ${Constants.system.slate};
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_HERO = css`
|
||||
width: 100vw;
|
||||
padding: 30vh 88px 88px 88px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: -88px 0px 0px 0px;
|
||||
background: ${Constants.system.pitchBlack};
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 40vh 24px 48px 24px;
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_SLATE_WALL = css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100vw;
|
||||
padding: 88px;
|
||||
background: ${Constants.system.foreground};
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 64px 24px;
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_SLATE = css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 88px;
|
||||
width: 100vw;
|
||||
background: ${Constants.system.pitchBlack};
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 64px 24px;
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_FILETYPE = css`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_FILETYPE_GRID_ITEM = css`
|
||||
padding: 0 24px 24px 0;
|
||||
width: 25%;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 50%;
|
||||
padding: 0 0 24px 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_VIDEO_BIG = css`
|
||||
display: block;
|
||||
background-size: cover;
|
||||
background-position: 50% 50%;
|
||||
background-color: ${Constants.system.moonstone};
|
||||
padding: 0;
|
||||
outline: 0;
|
||||
margin: 40px auto 80px auto;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
margin: 32px auto 64px auto;
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
margin: 16px auto 48px auto;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_VIDEO_MEDIUM = css`
|
||||
display: block;
|
||||
background-size: cover;
|
||||
background-position: 50% 50%;
|
||||
background-color: ${Constants.system.moonstone};
|
||||
padding: 0;
|
||||
outline: 0;
|
||||
margin: 24px auto 96px auto;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
max-width: 56vw;
|
||||
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
margin: 16px auto 64px auto;
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
margin: 8px auto 48px auto;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_VIDEO_SMALL = css`
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
background-position: 50% 50%;
|
||||
background-color: ${Constants.system.moonstone};
|
||||
padding: 0;
|
||||
outline: 0;
|
||||
`;
|
||||
|
||||
const STYLES_MEDIA_LEFT = css`
|
||||
margin: 64px 0 0 -240px;
|
||||
width: 80vw;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
margin: 24px 0 0 -80px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_MEDIA_RIGHT_OVERLAP = css`
|
||||
float: right;
|
||||
margin: -40px 240px 0 0;
|
||||
width: 24vw;
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
margin: 24px 0 0 80px;
|
||||
width: 32vw;
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
margin: 24px 0 0 80px;
|
||||
width: 48vw;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_TEXT_BLOCK = css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
max-width: 56vw;
|
||||
width: 100%;
|
||||
align-self: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_ACTIONS_RIGHT = css`
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
display: block;
|
||||
padding: 16px 0 8px 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON_PRIMARY = css`
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
min-height: 48px;
|
||||
padding: 0px 24px 0px 24px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: ${Constants.typescale.lvl1};
|
||||
letter-spacing: 0.2px;
|
||||
font-family: ${Constants.font.semiBold};
|
||||
transition: 200ms ease all;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
background-color: ${Constants.system.slate};
|
||||
color: ${Constants.system.white};
|
||||
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
|
||||
|
||||
:hover {
|
||||
background-color: ${Constants.system.white};
|
||||
box-shadow: 0px 10px 90px 20px rgba(207, 206, 211, 0.3);
|
||||
color: ${Constants.system.slate};
|
||||
}
|
||||
|
||||
:focus {
|
||||
box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.3);
|
||||
background-color: ${Constants.system.pitchBlack};
|
||||
color: ${Constants.system.wall};
|
||||
outline: 0;
|
||||
border: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_LINK_WHITE = css`
|
||||
color: ${Constants.system.darkGray};
|
||||
text-decoration: none;
|
||||
transition: 200ms ease color;
|
||||
font-size: ${Constants.typescale.lvl2};
|
||||
padding: 24px 0 0 0;
|
||||
|
||||
:visited {
|
||||
color: ${Constants.system.white};
|
||||
}
|
||||
|
||||
:hover {
|
||||
color: ${Constants.system.brand};
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: ${Constants.typescale.lvl0};
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SLATE_CARD_GROUP = css`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
margin-top: 48px;
|
||||
`;
|
||||
|
||||
const STYLES_SLATE_CARD = css`
|
||||
width: 33.33%;
|
||||
height: 25vh;
|
||||
margin: -1px 0 0 -1px;
|
||||
transition: 200ms ease box-shadow;
|
||||
border: 1px solid ${Constants.system.darkGray};
|
||||
|
||||
:hover {
|
||||
transition: 200ms ease box-shadow;
|
||||
box-shadow: 0px 10px 40px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SLATE_CARD_CTA = css`
|
||||
width: 100%;
|
||||
height: calc(100vh / 2);
|
||||
margin-left: -1px;
|
||||
box-shadow: 0px 4px 80px 4px rgba(0, 0, 0, 0.1);
|
||||
text-decoration: none;
|
||||
transition: 200ms ease all;
|
||||
|
||||
:hover {
|
||||
box-shadow: 0px 4px 120px 4px rgba(0, 0, 0, 0.1);
|
||||
transform: scale(1.01);
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SLATE_CARD_TEXT = css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: left;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 12px;
|
||||
`;
|
||||
|
||||
const STYLES_SLATE_CARD_TITLE = css`
|
||||
padding: 12px;
|
||||
font-size: ${Constants.typescale.lvl1};
|
||||
letter-spacing: -0.021rem;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 0px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SLATE_CARD_CTA_TITLE = css`
|
||||
font-size: ${Constants.typescale.lvl5};
|
||||
font-family: ${Constants.font.medium};
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
line-height: 1.25;
|
||||
padding: 12px;
|
||||
overflow-wrap: break-word;
|
||||
width: 100%;
|
||||
color: ${Constants.system.darkGray};
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
font-size: ${Constants.typescale.lvl4};
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: ${Constants.typescale.lvl3};
|
||||
padding: 0px 0px 8px 0px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SLATE_CARD_EXPLAINER = css`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 0px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SLATE_CARD_PARAGRAPH = css`
|
||||
font-size: ${Constants.typescale.lvl0};
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
color: ${Constants.system.pitchBlack};
|
||||
transition: 200ms ease all;
|
||||
|
||||
:hover,
|
||||
:active {
|
||||
color: ${Constants.system.pitchBlack};
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SLATE_CARD_CTA_PARAGRAPH = css`
|
||||
font-size: ${Constants.typescale.lvl2};
|
||||
text-align: left;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const SlateCardElement = (props) => {
|
||||
return (
|
||||
<div css={STYLES_SLATE_CARD}>
|
||||
<div
|
||||
css={css`
|
||||
transition: 200ms ease all;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
background-position: 50% 50%;
|
||||
background-size: cover;
|
||||
|
||||
:hover {
|
||||
background-color: ${Constants.system.pitchBlack};
|
||||
background-image: url("${props.preview}");
|
||||
}
|
||||
`}
|
||||
>
|
||||
<a css={STYLES_SLATE_CARD_PARAGRAPH} href={props.url} target="_blank">
|
||||
<div css={STYLES_SLATE_CARD_TEXT}>
|
||||
<div css={STYLES_SLATE_CARD_TITLE}>{props.name}</div>
|
||||
<div css={STYLES_SLATE_CARD_EXPLAINER}>
|
||||
<div>{`@${props.username}`}</div>
|
||||
<div>-></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function preloadVideo(video) {
|
||||
const src = video.getAttribute("data-src");
|
||||
if (!src) {
|
||||
return;
|
||||
}
|
||||
video.src = src;
|
||||
}
|
||||
|
||||
export const getServerSideProps = async (context) => {
|
||||
return {
|
||||
props: { ...context.query },
|
||||
};
|
||||
};
|
||||
|
||||
export default class IndexPage extends React.Component {
|
||||
async componentDidMount() {
|
||||
const videos = document.querySelectorAll("[data-src]");
|
||||
const config = {
|
||||
root: null,
|
||||
rootMargin: "0px",
|
||||
threshold: 0.1,
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(function(entries, self) {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
preloadVideo(entry.target);
|
||||
self.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, config);
|
||||
|
||||
videos.forEach((video) => {
|
||||
observer.observe(video);
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const title = `Slate`;
|
||||
const description =
|
||||
"Welcome to the future of file sharing. Powered by Textile, Filecoin, and IPFS.";
|
||||
const url = "https://slate.host";
|
||||
|
||||
return (
|
||||
<WebsitePrototypeWrapper title={title} description={description} url={url}>
|
||||
<WebsitePrototypeHeader />
|
||||
<div css={STYLES_ROOT}>
|
||||
<div css={STYLES_SECTION_HERO}>
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h1 css={STYLES_H1}>
|
||||
A file storage network <br />
|
||||
for you, your files, and your friends.
|
||||
</h1>
|
||||
|
||||
<div css={STYLES_ACTIONS_RIGHT}>
|
||||
<div css={STYLES_BUTTON_PRIMARY} onClick={() => window.open("/_")}>
|
||||
Use slate
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<video
|
||||
css={STYLES_VIDEO_BIG}
|
||||
data-src={ASSET_HERO.src}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
type="video/m4v"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('${ASSET_HERO.backgroundImage}')`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h2 css={STYLES_H2}>
|
||||
Slate{" "}
|
||||
<span css={STYLES_HIGHLIGHT}>
|
||||
is a{" "}
|
||||
<a
|
||||
css={STYLES_LINK}
|
||||
href={"https://github.com/filecoin-project/slate"}
|
||||
target="_blank"
|
||||
>
|
||||
fully open-source
|
||||
</a>{" "}
|
||||
file sharing network designed for research and collaboration.
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span css={STYLES_HIGHLIGHT}>Store</span> your data,
|
||||
<br />
|
||||
<span css={STYLES_HIGHLIGHT}>organize</span> it any way you like, <br />
|
||||
<span css={STYLES_HIGHLIGHT}>and share</span> it with the world.
|
||||
<br />
|
||||
<br />
|
||||
</h2>
|
||||
<h3 css={STYLES_H3}>Powered by</h3>
|
||||
<h2 css={STYLES_H2}>
|
||||
<span css={STYLES_HIGHLIGHT}>
|
||||
<a href="https://textile.io" css={STYLES_LINK} target="_blank">
|
||||
Textile
|
||||
</a>{" "}
|
||||
<br />
|
||||
<a href="https://filecoin.io" css={STYLES_LINK} target="_blank">
|
||||
Filecoin
|
||||
</a>
|
||||
<br />
|
||||
<a href="https://ipfs.io" css={STYLES_LINK} target="_blank">
|
||||
IPFS
|
||||
</a>
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div css={STYLES_SECTION_SLATE}>
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h1 css={STYLES_H1}>
|
||||
A new home{" "}
|
||||
<span css={STYLES_HIGHLIGHT}>for your images, video, audio, ePUBs, and PDFs</span>
|
||||
</h1>
|
||||
<h3 css={STYLES_H3} style={{ marginBottom: 48 }}>
|
||||
<span css={STYLES_HIGHLIGHT}>Easily upload </span>any kind of media file to your
|
||||
storage system.
|
||||
<br />
|
||||
</h3>
|
||||
</div>
|
||||
<div css={STYLES_FILETYPE}>
|
||||
<div css={STYLES_FILETYPE_GRID_ITEM}>
|
||||
<video
|
||||
preload="none"
|
||||
css={STYLES_VIDEO_SMALL}
|
||||
data-src={ASSETS_SMALL[0].src}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
type="video/mp4"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('${ASSETS_SMALL[0].backgroundImage}')`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div css={STYLES_FILETYPE_GRID_ITEM}>
|
||||
<video
|
||||
css={STYLES_VIDEO_SMALL}
|
||||
data-src={ASSETS_SMALL[1].src}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
type="video/mp4"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('${ASSETS_SMALL[1].backgroundImage}')`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div css={STYLES_FILETYPE_GRID_ITEM}>
|
||||
<video
|
||||
css={STYLES_VIDEO_SMALL}
|
||||
data-src={ASSETS_SMALL[2].src}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
type="video/mp4"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('${ASSETS_SMALL[2].backgroundImage}')`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div css={STYLES_FILETYPE_GRID_ITEM}>
|
||||
<video
|
||||
css={STYLES_VIDEO_SMALL}
|
||||
data-src={ASSETS_SMALL[3].src}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
type="video/mp4"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('${ASSETS_SMALL[3].backgroundImage}')`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div css={STYLES_SECTION_SLATE}>
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h1 css={STYLES_H1}>
|
||||
Upload from <span css={STYLES_HIGHLIGHT}>anywhere</span>
|
||||
</h1>
|
||||
<h3 css={STYLES_H3}>
|
||||
<span css={STYLES_HIGHLIGHT}>The Slate Chrome extension</span> lets you seamlessly
|
||||
upload files to your slates from anywhere on the web.
|
||||
</h3>
|
||||
<div css={STYLES_ACTIONS_RIGHT}>
|
||||
<div
|
||||
css={STYLES_BUTTON_PRIMARY}
|
||||
style={{ marginTop: 16 }}
|
||||
onClick={() =>
|
||||
window.open(
|
||||
"https://chrome.google.com/webstore/detail/slate/gloembacbehhbfbkcfjmloikeeaebnoc?hl=en"
|
||||
)
|
||||
}
|
||||
>
|
||||
Add Slate to Chrome
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
css={STYLES_MEDIA_LEFT}
|
||||
src={ASSET_CHROME_EXTENSION}
|
||||
alt="Slate Web Clipper being used in chrome dropdown menu"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div css={STYLES_SECTION_SLATE}>
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h1 css={STYLES_H1}>
|
||||
<span css={STYLES_HIGHLIGHT}>Organize and publish</span>
|
||||
</h1>
|
||||
<h3 css={STYLES_H3}>
|
||||
<span css={STYLES_HIGHLIGHT}>A modular interface</span> for your files, giving you
|
||||
complete flexibility.
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{ASSETS_MEDIUM.map((each) => {
|
||||
return (
|
||||
<React.Fragment key={each.title}>
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h3 css={STYLES_H3}>
|
||||
<span css={STYLES_HIGHLIGHT}>{each.title}</span>
|
||||
</h3>
|
||||
</div>
|
||||
<video
|
||||
css={STYLES_VIDEO_MEDIUM}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
data-src={each.src}
|
||||
type="video/mp4"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('${each.backgroundImage}')`,
|
||||
}}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div css={STYLES_SECTION_SLATE}>
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h1 css={STYLES_H1}>
|
||||
<span css={STYLES_HIGHLIGHT}>Collaborate and connect</span>
|
||||
</h1>
|
||||
<h3 css={STYLES_H3}>
|
||||
<span css={STYLES_HIGHLIGHT}>A file sharing network</span> built on top of a storage
|
||||
system making it possible to connect with other people on the Filecoin network.
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<video
|
||||
css={STYLES_VIDEO_BIG}
|
||||
data-src={ASSET_HERO_COLLABORATE.src}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
type="video/mp4"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('${ASSET_HERO_COLLABORATE.backgroundImage}')`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div css={STYLES_SECTION_SLATE}>
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h1 css={STYLES_H1}>
|
||||
Built on <span css={STYLES_HIGHLIGHT}>trust and privacy</span>
|
||||
</h1>
|
||||
<h3 css={STYLES_H3}>
|
||||
<span css={STYLES_HIGHLIGHT}>Slate is built on Filecoin and IPFS</span> —
|
||||
technologies built around ownership and transparency for the future of the web.
|
||||
</h3>
|
||||
<a css={STYLES_LINK_WHITE} href="https://filecoin.io" target="_blank">
|
||||
Learn more about Filecoin ->
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img css={STYLES_MEDIA_RIGHT_OVERLAP} src={ASSET_SLATE_CUBE} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div css={STYLES_SECTION_SLATE_WALL}>
|
||||
<div css={STYLES_SLATE_CARD_CTA}>
|
||||
<a css={STYLES_SLATE_CARD_PARAGRAPH} href="https://slate.host/_" target="_blank">
|
||||
<div css={STYLES_SLATE_CARD_TEXT}>
|
||||
<h1 css={STYLES_SLATE_CARD_CTA_TITLE}>
|
||||
Join us <br />
|
||||
<span css={STYLES_HIGHLIGHT_BLACK}>in our open network</span>
|
||||
</h1>
|
||||
<div css={STYLES_SLATE_CARD_EXPLAINER}>
|
||||
<div css={STYLES_SLATE_CARD_CTA_PARAGRAPH}>Create your first slate</div>
|
||||
<div css={STYLES_SLATE_CARD_CTA_PARAGRAPH}>-></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div css={STYLES_SLATE_CARD_GROUP}>
|
||||
{USER_SLATES.map((each) => (
|
||||
<SlateCardElement
|
||||
key={each.name}
|
||||
preview={each.preview}
|
||||
url={each.url}
|
||||
name={each.name}
|
||||
username={each.username}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<WebsitePrototypeFooter />
|
||||
</WebsitePrototypeWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,211 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import { css } from "@emotion/core";
|
||||
|
||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||
import WebsitePrototypeHeader from "~/components/core/WebsitePrototypeHeader";
|
||||
import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter";
|
||||
|
||||
const STYLES_ROOT = css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 88px 32px 128px 32px;
|
||||
max-width: 736px;
|
||||
width: 100%;
|
||||
margin: 0 auto 0 auto;
|
||||
`;
|
||||
|
||||
const STYLES_COPY_EMAIL = css`
|
||||
display: inline;
|
||||
`;
|
||||
|
||||
export const getServerSideProps = async (context) => {
|
||||
return {
|
||||
props: { ...context.query },
|
||||
};
|
||||
};
|
||||
export function CopyEmail() {
|
||||
const [copySuccess, setCopySuccess] = useState("");
|
||||
|
||||
function copyToClipboard() {
|
||||
navigator.clipboard.writeText("abuse@filecoin.io");
|
||||
setCopySuccess("Copied!");
|
||||
}
|
||||
return (
|
||||
<div css={STYLES_COPY_EMAIL}>
|
||||
<a onClick={copyToClipboard}>abuse@filecoin.io</a>
|
||||
{copySuccess}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default class GuidelinesPage extends React.Component {
|
||||
render() {
|
||||
const title = `Slate: Terms of Service`;
|
||||
const description = "You must agree to our terms of service to use Slate.";
|
||||
const url = "https://slate.host/terms";
|
||||
|
||||
return (
|
||||
<WebsitePrototypeWrapper title={title} description={description} url={url}>
|
||||
<WebsitePrototypeHeader />
|
||||
<div css={STYLES_ROOT}>
|
||||
<System.H1>Terms of Service</System.H1>
|
||||
<br />
|
||||
<System.P>
|
||||
The following terms and conditions govern all use of the Slate's website and all
|
||||
content, services and products available at or through the website.
|
||||
</System.P>
|
||||
<br />
|
||||
<System.P>
|
||||
Please read this Agreement carefully before accessing or using the Website. By accessing
|
||||
or using any part of the web site, you agree to become bound by the terms and conditions
|
||||
of this agreement.
|
||||
</System.P>
|
||||
<br />
|
||||
<System.P>
|
||||
If you do not agree to all the terms and conditions of this agreement, then you may not
|
||||
access the Website or use any services. If these terms and conditions are considered an
|
||||
offer by Slate, acceptance is expressly limited to these terms. The Website is available
|
||||
only to individuals who are at least 18 years old.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Storage Deals to the Filecoin Network</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
You agree to allow Slate to make storage deals on your behalf to the Filecoin Network at
|
||||
any given time.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Your Slate Account and Site</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
If you create an account on the Website, you are responsible for maintaining the
|
||||
security of your account and its content, and you are fully responsible for all
|
||||
activities that occur under the account and any other actions taken in connection with
|
||||
the Website. You must not describe or assign content to your account in a misleading or
|
||||
unlawful manner, including in a manner intended to trade on the name or reputation of
|
||||
others, and Slate may change or remove any description or keyword that it considers
|
||||
inappropriate or unlawful, or otherwise likely to cause Slate liability. You must
|
||||
immediately notify Slate of any unauthorized uses of your account or any other breaches
|
||||
of security. Slate will not be liable for any acts or omissions by You, including any
|
||||
damages of any kind incurred as a result of such acts or omissions.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Responsibility of Contributors</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
If you operate an account, post material to the Website, post links on the Website, or
|
||||
otherwise make (or allow any third party to make) material available by means of the
|
||||
Website (any such material, Content), You are entirely responsible for the content of,
|
||||
and any harm resulting from, that Content. That is the case regardless of whether the
|
||||
Content in question constitutes text or graphics. By making Content available, you
|
||||
represent and warrant that: the downloading, copying and use of the Content will not
|
||||
infringe the proprietary rights, including but not limited to the copyright, patent,
|
||||
trademark or trade secret rights, of any third party.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Changes</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
Slate reserves the right, at its sole discretion, to modify or replace any part of this
|
||||
Agreement. It is your responsibility to check this Agreement periodically for changes.
|
||||
Your continued use of or access to the Website following the posting of any changes to
|
||||
this Agreement constitutes acceptance of those changes. Slate may also, in the future,
|
||||
offer new services and/or features through the Website (including, the release of new
|
||||
tools and resources). Such new features and/or services shall be subject to the terms
|
||||
and conditions of this Agreement.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Termination</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
Slate may terminate your access to all or any part of the Website at any time, with or
|
||||
without cause, with or without notice, effective immediately. If you wish to terminate
|
||||
this Agreement or your Slate account (if you have one), you may simply discontinue using
|
||||
the Website. Notwithstanding the foregoing, if you have a VIP Services account, such
|
||||
account can only be terminated by Slate if you materially breach this Agreement and fail
|
||||
to cure such breach within thirty (30) days from Slate notice to you thereof; provided
|
||||
that, Slate can terminate the Website immediately as part of a general shut down of our
|
||||
service. All provisions of this Agreement which by their nature should survive
|
||||
termination shall survive termination, including, without limitation, ownership
|
||||
provisions, warranty disclaimers, indemnity and limitations of liability.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Disclaimer of Warranties</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
The Website is provided “as is”. Slate and its suppliers and licensors hereby disclaim
|
||||
all warranties of any kind, express or implied, including, without limitation, the
|
||||
warranties of merchantability, fitness for a particular purpose and non-infringement.
|
||||
Neither Slate nor its suppliers and licensors, makes any warranty that the Website will
|
||||
be error free or that access thereto will be continuous or uninterrupted. You understand
|
||||
that you download from, or otherwise obtain content or services through, the Website at
|
||||
your own discretion and risk.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Limitation of Liability</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
In no event will Slate, or its suppliers or licensors, be liable with respect to any
|
||||
subject matter of this agreement under any contract, negligence, strict liability or
|
||||
other legal or equitable theory for: any special, incidental or consequential damages;
|
||||
the cost of procurement or substitute products or services; for interruption of use or
|
||||
loss or corruption of data; for any amounts that exceed the fees paid by you to Slate
|
||||
under this agreement during the twelve (12) month period prior to the cause of action.
|
||||
</System.P>
|
||||
<br />
|
||||
<System.P>
|
||||
Slate shall have no liability for any failure or delay due to matters beyond their
|
||||
reasonable control. The foregoing shall not apply to the extent prohibited by applicable
|
||||
law.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>General Representation and Warranty</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
You represent and warrant that Your use of the Website will be in strict accordance with
|
||||
the Slate Community Guidelines, with this Agreement and with all applicable laws and
|
||||
regulations (including without limitation any local laws or regulations in your country,
|
||||
state, city, or other governmental area, regarding online conduct and acceptable
|
||||
content, and including all applicable laws regarding the transmission of technical data
|
||||
exported from the United States or the country in which you reside) and your use of the
|
||||
Website will not infringe or misappropriate the intellectual property rights of any
|
||||
third party.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Indemnification</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
You agree to indemnify and hold harmless Slate, its contractors, and its licensors, and
|
||||
their respective directors, officers, employees and agents from and against any and all
|
||||
claims and expenses, including attorneys fees, arising out of your use of the Website,
|
||||
including but not limited to out of your violation this Agreement.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Miscellaneous</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
This Agreement constitutes the entire agreement between Slate and you concerning the
|
||||
subject matter hereof, and they may only be modified by a written amendment signed by an
|
||||
authorized executive of Slate, or by the posting by Slate of a revised version. Except
|
||||
to the extent applicable law, if any, provides otherwise, this Agreement, any access to
|
||||
or use of the Website will be governed by the laws of the state of California, U.S.A.
|
||||
</System.P>
|
||||
</div>
|
||||
<WebsitePrototypeFooter />
|
||||
</WebsitePrototypeWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user