mirror of
https://github.com/filecoin-project/slate.git
synced 2024-12-25 18:13:10 +03:00
guide updates
This commit is contained in:
tarafanlin
parent
85cdcf4b55
commit
e5f9a3eb2a
@ -69,7 +69,7 @@ export const H4 = css`
|
|||||||
|
|
||||||
export const H5 = css`
|
export const H5 = css`
|
||||||
font-family: ${Constants.font.medium};
|
font-family: ${Constants.font.medium};
|
||||||
font-size: 14px;
|
font-size: 15px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
letter-spacing: -0.006px;
|
letter-spacing: -0.006px;
|
||||||
|
|
||||||
|
|||||||
@ -65,6 +65,7 @@ const REJECT_LIST = [
|
|||||||
"please-dont-use-timeout",
|
"please-dont-use-timeout",
|
||||||
"faqs",
|
"faqs",
|
||||||
"about",
|
"about",
|
||||||
|
"guide",
|
||||||
];
|
];
|
||||||
|
|
||||||
export const userRoute = (text) => {
|
export const userRoute = (text) => {
|
||||||
|
|||||||
@ -28,7 +28,6 @@ const STYLES_JUMPER_ROOT = (theme) => css`
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
background-color: ${theme.semantic.white};
|
background-color: ${theme.semantic.white};
|
||||||
border-radius: 16px;
|
|
||||||
@supports ((-webkit-backdrop-filter: blur(75px)) or (backdrop-filter: blur(75px))) {
|
@supports ((-webkit-backdrop-filter: blur(75px)) or (backdrop-filter: blur(75px))) {
|
||||||
-webkit-backdrop-filter: blur(75px);
|
-webkit-backdrop-filter: blur(75px);
|
||||||
backdrop-filter: blur(75px);
|
backdrop-filter: blur(75px);
|
||||||
@ -57,7 +56,7 @@ function Header({ ...props }) {
|
|||||||
return (
|
return (
|
||||||
<div css={STYLES_JUMPER_HEADER} {...props}>
|
<div css={STYLES_JUMPER_HEADER} {...props}>
|
||||||
<SVG.Link width={20} height={20} />
|
<SVG.Link width={20} height={20} />
|
||||||
<System.H3 color="textGrayLight" style={{ marginLeft: 12 }}>
|
<System.H3 color="textGrayLight" style={{ marginLeft: 12, marginTop: 3, marginBottom: 1 }}>
|
||||||
Search by keywords or #tags
|
Search by keywords or #tags
|
||||||
</System.H3>
|
</System.H3>
|
||||||
</div>
|
</div>
|
||||||
@ -111,7 +110,11 @@ function Object({ title, isSelected, isSaved, Favicon, ...props }) {
|
|||||||
return (
|
return (
|
||||||
<div css={[STYLES_JUMPER_OBJECT, isSelected && STYLES_JUMPER_OBJECT_IS_SELECTED]} {...props}>
|
<div css={[STYLES_JUMPER_OBJECT, isSelected && STYLES_JUMPER_OBJECT_IS_SELECTED]} {...props}>
|
||||||
{isSelected ? <div css={STYLES_JUMPER_OBJECT_CHECKBOX} /> : <Favicon />}
|
{isSelected ? <div css={STYLES_JUMPER_OBJECT_CHECKBOX} /> : <Favicon />}
|
||||||
<System.H5 color="textBlack" nbrOflines={1} style={{ marginLeft: 12, maxWidth: 438 }}>
|
<System.H5
|
||||||
|
color="textBlack"
|
||||||
|
nbrOflines={1}
|
||||||
|
style={{ marginLeft: 12, marginTop: 3, marginBottom: 1, maxWidth: 438 }}
|
||||||
|
>
|
||||||
{title}
|
{title}
|
||||||
</System.H5>
|
</System.H5>
|
||||||
<div css={Styles.HORIZONTAL_CONTAINER} style={{ marginLeft: "auto" }}>
|
<div css={Styles.HORIZONTAL_CONTAINER} style={{ marginLeft: "auto" }}>
|
||||||
@ -199,7 +202,7 @@ const ViewAction = ({ children, Favicon, isSelected }) => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{children}
|
<System.H5>{children}</System.H5>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,21 +0,0 @@
|
|||||||
import * as React from "react";
|
|
||||||
import * as Constants from "~/common/constants";
|
|
||||||
|
|
||||||
import Guide from "~/pages/get-started/guide.js";
|
|
||||||
|
|
||||||
import { css } from "@emotion/react";
|
|
||||||
|
|
||||||
export default function BrowserControlGuidePage() {
|
|
||||||
return (
|
|
||||||
<Guide
|
|
||||||
title="Browser Control Guide - Slate"
|
|
||||||
description="Your personal search engine"
|
|
||||||
url="https://slate.host/guide/browser-control"
|
|
||||||
image="https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4"
|
|
||||||
heading="Organize your internet browsing"
|
|
||||||
body="It connects with your browser so you can easily see recent sites, all your open tabs, and everything in your current window at a glance."
|
|
||||||
next="save"
|
|
||||||
prev="../"
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,274 +0,0 @@
|
|||||||
import * as React from "react";
|
|
||||||
import * as Constants from "~/common/constants";
|
|
||||||
import * as SVG from "~/common/svg";
|
|
||||||
|
|
||||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
|
||||||
import WebsiteHeader from "~/components/core/WebsiteHeader";
|
|
||||||
import WebsiteFooter from "~/components/core/WebsiteFooter";
|
|
||||||
import * as JumperPrototype from "~/components/landing/jumperPrototype";
|
|
||||||
|
|
||||||
import { css } from "@emotion/react";
|
|
||||||
import { useEventListener } from "~/common/hooks";
|
|
||||||
|
|
||||||
const STYLES_ROOT = css`
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: -webkit-sticky;
|
|
||||||
position: sticky;
|
|
||||||
top: 52px;
|
|
||||||
overflow: hidden;
|
|
||||||
height: calc(100vh - 113px);
|
|
||||||
background-color: ${Constants.semantic.bgLight};
|
|
||||||
color: ${Constants.semantic.textBlack};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const STYLES_CONTAINER = css`
|
|
||||||
max-width: 700px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 80px 0;
|
|
||||||
|
|
||||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
||||||
max-width: 480px;
|
|
||||||
padding: 96px 16px;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const STYLES_HEADING = css`
|
|
||||||
font-family: ${Constants.font.semiBold};
|
|
||||||
flex-shrink: 0;
|
|
||||||
flex-shrink: 0;
|
|
||||||
min-width: 50%;
|
|
||||||
max-width: 100%;
|
|
||||||
font-size: 40px;
|
|
||||||
line-height: 40px;
|
|
||||||
letter-spacing: -0.035em;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
|
|
||||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
|
||||||
font-size: 32px;
|
|
||||||
line-height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fade-in {
|
|
||||||
0% {
|
|
||||||
opacity: 0%;
|
|
||||||
transform: translateY(30%);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 100%;
|
|
||||||
transform: translateY(0%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
animation: fade-in 300ms ease-in-out;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const STYLES_BODY = css`
|
|
||||||
font-family: ${Constants.font.text};
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 28px;
|
|
||||||
letter-spacing: -0.01em;
|
|
||||||
margin-bottom: 49px;
|
|
||||||
|
|
||||||
@keyframes fade-in {
|
|
||||||
0% {
|
|
||||||
opacity: 0%;
|
|
||||||
transform: translateY(50%);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 0%;
|
|
||||||
transform: translateY(50%);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 100%;
|
|
||||||
transform: translateY(0%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
animation: fade-in 500ms ease-in-out;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const STYLES_FLEX = css`
|
|
||||||
position: absolute;
|
|
||||||
bottom: 48px;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 700px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const STYLES_BUTTON = css`
|
|
||||||
cursor: poitner;
|
|
||||||
display: inline-flex;
|
|
||||||
flex-grow: 0;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
border-radius: 8px;
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
border: 1.25px solid ${Constants.semantic.borderGray};
|
|
||||||
color: ${Constants.semantic.textBlack};
|
|
||||||
|
|
||||||
:hover {
|
|
||||||
background-color: ${Constants.semantic.textGray};
|
|
||||||
color: ${Constants.semantic.textWhite};
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const VIEWS_ACTIONS = [
|
|
||||||
{ label: "Current Window" },
|
|
||||||
{ label: "All Open Tabs" },
|
|
||||||
{ label: "Recent" },
|
|
||||||
];
|
|
||||||
|
|
||||||
const CUSTOM_VIEWS_ACTIONS = [
|
|
||||||
{ label: "Twitter", Favicon: SVG.TwitterFavicon },
|
|
||||||
{ label: "Youtube", Favicon: SVG.YoutubeFavicon },
|
|
||||||
];
|
|
||||||
|
|
||||||
const OBJECTS = [
|
|
||||||
{
|
|
||||||
title: "Concrete Architecture (@architeg) / Twitter",
|
|
||||||
Favicon: SVG.TwitterFavicon,
|
|
||||||
isSaved: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Paul Prudence on Twitter: Computers and Automation [August-12-2022]",
|
|
||||||
isSelected: true,
|
|
||||||
Favicon: SVG.TwitterFavicon,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Concrete Architecture (@architeg) / Twitter",
|
|
||||||
Favicon: SVG.TwitterFavicon,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Concrete Architecture (@architeg) / Twitter",
|
|
||||||
Favicon: SVG.TwitterFavicon,
|
|
||||||
isSaved: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Concrete Architecture (@architeg) / Twitter",
|
|
||||||
Favicon: SVG.TwitterFavicon,
|
|
||||||
isSaved: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Concrete Architecture (@architeg) / Twitter",
|
|
||||||
Favicon: SVG.TwitterFavicon,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Concrete Architecture (@architeg) / Twitter",
|
|
||||||
Favicon: SVG.TwitterFavicon,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Concrete Architecture (@architeg) / Twitter",
|
|
||||||
Favicon: SVG.TwitterFavicon,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Concrete Architecture (@architeg) / Twitter",
|
|
||||||
Favicon: SVG.TwitterFavicon,
|
|
||||||
isSaved: true,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const useGuideKeyCommands = (handleNext, handlePrev) => {
|
|
||||||
console.log("ping");
|
|
||||||
const handleKeyUp = (e) => {
|
|
||||||
const input = document.querySelectorAll("input");
|
|
||||||
for (let elem of input) {
|
|
||||||
if (document.activeElement === elem) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const textarea = document.querySelectorAll("textarea");
|
|
||||||
for (let elem of textarea) {
|
|
||||||
if (document.activeElement === elem) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (e.key) {
|
|
||||||
case "ArrowRight":
|
|
||||||
handleNext();
|
|
||||||
break;
|
|
||||||
case "ArrowLeft":
|
|
||||||
handlePrev();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
useEventListener({ type: "keyup", handler: handleKeyUp });
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleNext = () => {
|
|
||||||
console.log("next");
|
|
||||||
};
|
|
||||||
|
|
||||||
const handlePrev = () => {
|
|
||||||
console.log("prev");
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function Guide(props) {
|
|
||||||
useGuideKeyCommands();
|
|
||||||
return (
|
|
||||||
<WebsitePrototypeWrapper
|
|
||||||
title={props.title}
|
|
||||||
description={props.description}
|
|
||||||
url={props.url}
|
|
||||||
image={props.image}
|
|
||||||
>
|
|
||||||
<WebsiteHeader />
|
|
||||||
<div css={STYLES_ROOT}>
|
|
||||||
<div css={STYLES_CONTAINER}>
|
|
||||||
<div css={STYLES_HEADING}>{props.heading}</div>
|
|
||||||
<div css={STYLES_BODY}>{props.body}</div>
|
|
||||||
<JumperPrototype.TopPanel>
|
|
||||||
{VIEWS_ACTIONS.map((action) => (
|
|
||||||
<JumperPrototype.ViewAction key={action.label}>
|
|
||||||
{action.label}
|
|
||||||
</JumperPrototype.ViewAction>
|
|
||||||
))}
|
|
||||||
<JumperPrototype.Divider
|
|
||||||
height="none"
|
|
||||||
width="1px"
|
|
||||||
style={{ margin: "0px 4px", flexShrink: 0 }}
|
|
||||||
/>
|
|
||||||
{CUSTOM_VIEWS_ACTIONS.map((action, i) => (
|
|
||||||
<JumperPrototype.ViewAction
|
|
||||||
isSelected={i === 0}
|
|
||||||
key={action.label}
|
|
||||||
Favicon={action.Favicon}
|
|
||||||
>
|
|
||||||
{action.label}
|
|
||||||
</JumperPrototype.ViewAction>
|
|
||||||
))}
|
|
||||||
<JumperPrototype.ViewAddButton style={{ marginLeft: "auto" }} />
|
|
||||||
</JumperPrototype.TopPanel>
|
|
||||||
<JumperPrototype.Root style={{ marginTop: 16 }}>
|
|
||||||
<JumperPrototype.Header />
|
|
||||||
<JumperPrototype.Divider />
|
|
||||||
<JumperPrototype.Body>
|
|
||||||
{OBJECTS.map((object) => (
|
|
||||||
<JumperPrototype.Object
|
|
||||||
key={object.title}
|
|
||||||
title={object.title}
|
|
||||||
Favicon={object.Favicon}
|
|
||||||
isSelected={object.isSelected}
|
|
||||||
isSaved={object.isSaved}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</JumperPrototype.Body>
|
|
||||||
</JumperPrototype.Root>
|
|
||||||
<div css={STYLES_FLEX}>
|
|
||||||
<a css={STYLES_BUTTON} href={props.prev} style={{ marginRight: `12px` }}>
|
|
||||||
<SVG.LeftArrow height={16} width={16} />
|
|
||||||
</a>
|
|
||||||
<a css={STYLES_BUTTON} href={props.next}>
|
|
||||||
<SVG.RightArrow height={16} width={16} />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<WebsiteFooter />
|
|
||||||
</WebsitePrototypeWrapper>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
119
pages/guide/browser-control.js
Normal file
119
pages/guide/browser-control.js
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as Constants from "~/common/constants";
|
||||||
|
import * as JumperPrototype from "~/components/landing/jumperPrototype";
|
||||||
|
import * as SVG from "~/common/svg";
|
||||||
|
|
||||||
|
import Guide from "~/pages/guide/guide.js";
|
||||||
|
|
||||||
|
import { css } from "@emotion/react";
|
||||||
|
|
||||||
|
const VIEWS_ACTIONS = [
|
||||||
|
{ label: "Current Window" },
|
||||||
|
{ label: "All Open Tabs" },
|
||||||
|
{ label: "Recent" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const CUSTOM_VIEWS_ACTIONS = [
|
||||||
|
{ label: "Twitter", Favicon: SVG.TwitterFavicon },
|
||||||
|
{ label: "Youtube", Favicon: SVG.YoutubeFavicon },
|
||||||
|
];
|
||||||
|
|
||||||
|
const OBJECTS = [
|
||||||
|
{
|
||||||
|
title: "Concrete Architecture (@architeg) / Twitter",
|
||||||
|
Favicon: SVG.TwitterFavicon,
|
||||||
|
isSaved: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Paul Prudence on Twitter: Computers and Automation [August-12-2022]",
|
||||||
|
isSelected: true,
|
||||||
|
Favicon: SVG.TwitterFavicon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Concrete Architecture (@architeg) / Twitter",
|
||||||
|
Favicon: SVG.TwitterFavicon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Concrete Architecture (@architeg) / Twitter",
|
||||||
|
Favicon: SVG.TwitterFavicon,
|
||||||
|
isSaved: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Concrete Architecture (@architeg) / Twitter",
|
||||||
|
Favicon: SVG.TwitterFavicon,
|
||||||
|
isSaved: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Concrete Architecture (@architeg) / Twitter",
|
||||||
|
Favicon: SVG.TwitterFavicon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Concrete Architecture (@architeg) / Twitter",
|
||||||
|
Favicon: SVG.TwitterFavicon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Concrete Architecture (@architeg) / Twitter",
|
||||||
|
Favicon: SVG.TwitterFavicon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Concrete Architecture (@architeg) / Twitter",
|
||||||
|
Favicon: SVG.TwitterFavicon,
|
||||||
|
isSaved: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function BrowserControlGuidePage() {
|
||||||
|
return (
|
||||||
|
<Guide
|
||||||
|
title="Browser Control Guide - Slate"
|
||||||
|
description="Your personal search engine"
|
||||||
|
url="https://slate.host/guide/browser-control"
|
||||||
|
image="https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4"
|
||||||
|
heading="Organize your internet browsing"
|
||||||
|
body="It connects with your browser so you can easily see recent sites, all your open tabs, and everything in your current window at a glance."
|
||||||
|
next="save"
|
||||||
|
prev="../"
|
||||||
|
jumper={
|
||||||
|
<div>
|
||||||
|
<JumperPrototype.TopPanel>
|
||||||
|
{VIEWS_ACTIONS.map((action) => (
|
||||||
|
<JumperPrototype.ViewAction key={action.label}>
|
||||||
|
{action.label}
|
||||||
|
</JumperPrototype.ViewAction>
|
||||||
|
))}
|
||||||
|
<JumperPrototype.Divider
|
||||||
|
height="none"
|
||||||
|
width="1px"
|
||||||
|
style={{ margin: "0px 4px", flexShrink: 0 }}
|
||||||
|
/>
|
||||||
|
{CUSTOM_VIEWS_ACTIONS.map((action, i) => (
|
||||||
|
<JumperPrototype.ViewAction
|
||||||
|
isSelected={i === 0}
|
||||||
|
key={action.label}
|
||||||
|
Favicon={action.Favicon}
|
||||||
|
>
|
||||||
|
{action.label}
|
||||||
|
</JumperPrototype.ViewAction>
|
||||||
|
))}
|
||||||
|
<JumperPrototype.ViewAddButton style={{ marginLeft: "auto" }} />
|
||||||
|
</JumperPrototype.TopPanel>
|
||||||
|
<JumperPrototype.Root style={{ marginTop: 16 }}>
|
||||||
|
<JumperPrototype.Header />
|
||||||
|
<JumperPrototype.Divider />
|
||||||
|
<JumperPrototype.Body>
|
||||||
|
{OBJECTS.map((object) => (
|
||||||
|
<JumperPrototype.Object
|
||||||
|
key={object.title}
|
||||||
|
title={object.title}
|
||||||
|
Favicon={object.Favicon}
|
||||||
|
isSelected={object.isSelected}
|
||||||
|
isSaved={object.isSaved}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</JumperPrototype.Body>
|
||||||
|
</JumperPrototype.Root>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,7 +1,7 @@
|
|||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import * as Constants from "~/common/constants";
|
import * as Constants from "~/common/constants";
|
||||||
|
|
||||||
import Guide from "~/pages/get-started/guide.js";
|
import Guide from "~/pages/guide/guide.js";
|
||||||
|
|
||||||
import { css } from "@emotion/react";
|
import { css } from "@emotion/react";
|
||||||
|
|
||||||
200
pages/guide/guide.js
Normal file
200
pages/guide/guide.js
Normal file
@ -0,0 +1,200 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as Constants from "~/common/constants";
|
||||||
|
import * as SVG from "~/common/svg";
|
||||||
|
|
||||||
|
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||||
|
import WebsiteHeader from "~/components/core/WebsiteHeader";
|
||||||
|
import WebsiteFooter from "~/components/core/WebsiteFooter";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
import { css } from "@emotion/react";
|
||||||
|
import { useEventListener } from "~/common/hooks";
|
||||||
|
|
||||||
|
const STYLES_ROOT = css`
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: -webkit-sticky;
|
||||||
|
position: sticky;
|
||||||
|
top: 52px;
|
||||||
|
overflow: hidden;
|
||||||
|
height: calc(100vh - 113px);
|
||||||
|
background-color: ${Constants.semantic.bgLight};
|
||||||
|
color: ${Constants.semantic.textBlack};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const STYLES_CONTAINER = css`
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 80px 0;
|
||||||
|
|
||||||
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||||
|
max-width: 480px;
|
||||||
|
padding: 96px 16px;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const STYLES_HEADING = css`
|
||||||
|
font-family: ${Constants.font.semiBold};
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
min-width: 50%;
|
||||||
|
max-width: 100%;
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
letter-spacing: -0.035em;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
|
||||||
|
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes heading-fade-in {
|
||||||
|
0% {
|
||||||
|
opacity: 0%;
|
||||||
|
transform: translateY(30%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 100%;
|
||||||
|
transform: translateY(0%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
animation: heading-fade-in 300ms ease-in-out;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const STYLES_BODY = css`
|
||||||
|
font-family: ${Constants.font.text};
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 28px;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
margin-bottom: 49px;
|
||||||
|
|
||||||
|
@keyframes body-fade-in {
|
||||||
|
0% {
|
||||||
|
opacity: 0%;
|
||||||
|
transform: translateY(30%);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0%;
|
||||||
|
transform: translateY(30%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 100%;
|
||||||
|
transform: translateY(0%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
animation: body-fade-in 500ms ease-in-out;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const STYLES_JUMPER = css`
|
||||||
|
@keyframes jumper-fade-in {
|
||||||
|
0% {
|
||||||
|
opacity: 0%;
|
||||||
|
transform: translateY(5%);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0%;
|
||||||
|
transform: translateY(5%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 100%;
|
||||||
|
transform: translateY(0%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
animation: jumper-fade-in 700ms ease-in-out;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const STYLES_FLEX = css`
|
||||||
|
position: absolute;
|
||||||
|
bottom: 48px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 700px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||||
|
bottom: 96px;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const STYLES_BUTTON = css`
|
||||||
|
cursor: poitner;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-grow: 0;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 1.25px solid ${Constants.semantic.borderGray};
|
||||||
|
color: ${Constants.semantic.textBlack};
|
||||||
|
|
||||||
|
:hover {
|
||||||
|
background-color: ${Constants.semantic.textGray};
|
||||||
|
color: ${Constants.semantic.textWhite};
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const useGuideKeyCommands = (next, prev) => {
|
||||||
|
const handleKeyUp = (e) => {
|
||||||
|
const input = document.querySelectorAll("input");
|
||||||
|
for (let elem of input) {
|
||||||
|
if (document.activeElement === elem) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const textarea = document.querySelectorAll("textarea");
|
||||||
|
for (let elem of textarea) {
|
||||||
|
if (document.activeElement === elem) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (e.key) {
|
||||||
|
case "ArrowRight":
|
||||||
|
if (next) window.location.replace(next);
|
||||||
|
break;
|
||||||
|
case "ArrowLeft":
|
||||||
|
if (prev) window.location.replace(prev);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
useEventListener({ type: "keyup", handler: handleKeyUp });
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Guide(props) {
|
||||||
|
useGuideKeyCommands(props.next, props.prev);
|
||||||
|
return (
|
||||||
|
<WebsitePrototypeWrapper
|
||||||
|
title={props.title}
|
||||||
|
description={props.description}
|
||||||
|
url={props.url}
|
||||||
|
image={props.image}
|
||||||
|
>
|
||||||
|
<WebsiteHeader />
|
||||||
|
<div css={STYLES_ROOT}>
|
||||||
|
<div css={STYLES_CONTAINER}>
|
||||||
|
<div css={STYLES_HEADING}>{props.heading}</div>
|
||||||
|
<div css={STYLES_BODY}>{props.body}</div>
|
||||||
|
<div css={STYLES_JUMPER}>{props.jumper}</div>
|
||||||
|
<div css={STYLES_FLEX}>
|
||||||
|
<Link href={props.prev}>
|
||||||
|
<a css={STYLES_BUTTON} style={{ marginRight: `12px` }}>
|
||||||
|
<SVG.LeftArrow height={16} width={16} />
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
<Link href={props.next}>
|
||||||
|
<a css={STYLES_BUTTON}>
|
||||||
|
<SVG.RightArrow height={16} width={16} />
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<WebsiteFooter />
|
||||||
|
</WebsitePrototypeWrapper>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,7 +1,8 @@
|
|||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import * as Constants from "~/common/constants";
|
import * as Constants from "~/common/constants";
|
||||||
|
import * as JumperPrototype from "~/components/landing/jumperPrototype";
|
||||||
|
|
||||||
import Guide from "~/pages/get-started/guide.js";
|
import Guide from "~/pages/guide/guide.js";
|
||||||
|
|
||||||
import { css } from "@emotion/react";
|
import { css } from "@emotion/react";
|
||||||
|
|
||||||
@ -1,7 +1,7 @@
|
|||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import * as Constants from "~/common/constants";
|
import * as Constants from "~/common/constants";
|
||||||
|
|
||||||
import Guide from "~/pages/get-started/guide.js";
|
import Guide from "~/pages/guide/guide.js";
|
||||||
|
|
||||||
import { css } from "@emotion/react";
|
import { css } from "@emotion/react";
|
||||||
|
|
||||||
@ -1,7 +1,7 @@
|
|||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import * as Constants from "~/common/constants";
|
import * as Constants from "~/common/constants";
|
||||||
|
|
||||||
import Guide from "~/pages/get-started/guide.js";
|
import Guide from "~/pages/guide/guide.js";
|
||||||
|
|
||||||
import { css } from "@emotion/react";
|
import { css } from "@emotion/react";
|
||||||
|
|
||||||
@ -1,7 +1,7 @@
|
|||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import * as Constants from "~/common/constants";
|
import * as Constants from "~/common/constants";
|
||||||
|
|
||||||
import Guide from "~/pages/get-started/guide.js";
|
import Guide from "~/pages/guide/guide.js";
|
||||||
|
|
||||||
import { css } from "@emotion/react";
|
import { css } from "@emotion/react";
|
||||||
|
|
||||||
@ -1,7 +1,7 @@
|
|||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import * as Constants from "~/common/constants";
|
import * as Constants from "~/common/constants";
|
||||||
|
|
||||||
import Guide from "~/pages/get-started/guide.js";
|
import Guide from "~/pages/guide/guide.js";
|
||||||
|
|
||||||
import { css } from "@emotion/react";
|
import { css } from "@emotion/react";
|
||||||
|
|
||||||
@ -1,16 +1,13 @@
|
|||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import * as Constants from "~/common/constants";
|
import * as Constants from "~/common/constants";
|
||||||
import * as SVGLogo from "~/common/logo";
|
|
||||||
import * as SVG from "~/common/svg";
|
import * as SVG from "~/common/svg";
|
||||||
import * as System from "~/components/system";
|
|
||||||
import * as Validations from "~/common/validations";
|
|
||||||
import * as Strings from "~/common/strings";
|
|
||||||
|
|
||||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||||
import WebsiteHeader from "~/components/core/WebsiteHeader";
|
import WebsiteHeader from "~/components/core/WebsiteHeader";
|
||||||
import WebsiteFooter from "~/components/core/WebsiteFooter";
|
import WebsiteFooter from "~/components/core/WebsiteFooter";
|
||||||
|
|
||||||
import { css } from "@emotion/react";
|
import { css } from "@emotion/react";
|
||||||
|
import { useGuideKeyCommands } from "./guide/guide";
|
||||||
|
|
||||||
const STYLES_ROOT = css`
|
const STYLES_ROOT = css`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -142,6 +139,8 @@ export default function IndexPage() {
|
|||||||
const url = "https://slate.host/";
|
const url = "https://slate.host/";
|
||||||
const image =
|
const image =
|
||||||
"https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4";
|
"https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4";
|
||||||
|
const next = "../guide/browser-control";
|
||||||
|
useGuideKeyCommands(next);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<WebsitePrototypeWrapper title={title} description={description} url={url} image={image}>
|
<WebsitePrototypeWrapper title={title} description={description} url={url} image={image}>
|
||||||
@ -157,7 +156,7 @@ export default function IndexPage() {
|
|||||||
about on the web. It’s a lightweight tool designed to make the internet feel a little
|
about on the web. It’s a lightweight tool designed to make the internet feel a little
|
||||||
more personal.
|
more personal.
|
||||||
</div>
|
</div>
|
||||||
<a css={STYLES_BUTTON} href="../get-started">
|
<a css={STYLES_BUTTON} href={next}>
|
||||||
Get Started <SVG.RightArrow height={20} width={20} style={{ marginLeft: 8 }} />
|
Get Started <SVG.RightArrow height={20} width={20} style={{ marginLeft: 8 }} />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user