mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-11 22:07:08 +03:00
guide updates
This commit is contained in:
parent
85cdcf4b55
commit
e5f9a3eb2a
@ -69,7 +69,7 @@ export const H4 = css`
|
||||
|
||||
export const H5 = css`
|
||||
font-family: ${Constants.font.medium};
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
letter-spacing: -0.006px;
|
||||
|
||||
|
@ -65,6 +65,7 @@ const REJECT_LIST = [
|
||||
"please-dont-use-timeout",
|
||||
"faqs",
|
||||
"about",
|
||||
"guide",
|
||||
];
|
||||
|
||||
export const userRoute = (text) => {
|
||||
|
@ -28,7 +28,6 @@ const STYLES_JUMPER_ROOT = (theme) => css`
|
||||
overflow: hidden;
|
||||
|
||||
background-color: ${theme.semantic.white};
|
||||
border-radius: 16px;
|
||||
@supports ((-webkit-backdrop-filter: blur(75px)) or (backdrop-filter: blur(75px))) {
|
||||
-webkit-backdrop-filter: blur(75px);
|
||||
backdrop-filter: blur(75px);
|
||||
@ -57,7 +56,7 @@ function Header({ ...props }) {
|
||||
return (
|
||||
<div css={STYLES_JUMPER_HEADER} {...props}>
|
||||
<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
|
||||
</System.H3>
|
||||
</div>
|
||||
@ -111,7 +110,11 @@ function Object({ title, isSelected, isSaved, Favicon, ...props }) {
|
||||
return (
|
||||
<div css={[STYLES_JUMPER_OBJECT, isSelected && STYLES_JUMPER_OBJECT_IS_SELECTED]} {...props}>
|
||||
{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}
|
||||
</System.H5>
|
||||
<div css={Styles.HORIZONTAL_CONTAINER} style={{ marginLeft: "auto" }}>
|
||||
@ -199,7 +202,7 @@ const ViewAction = ({ children, Favicon, isSelected }) => {
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{children}
|
||||
<System.H5>{children}</System.H5>
|
||||
</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 Constants from "~/common/constants";
|
||||
|
||||
import Guide from "~/pages/get-started/guide.js";
|
||||
import Guide from "~/pages/guide/guide.js";
|
||||
|
||||
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 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";
|
||||
|
@ -1,7 +1,7 @@
|
||||
import * as React from "react";
|
||||
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";
|
||||
|
@ -1,7 +1,7 @@
|
||||
import * as React from "react";
|
||||
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";
|
||||
|
@ -1,7 +1,7 @@
|
||||
import * as React from "react";
|
||||
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";
|
||||
|
@ -1,7 +1,7 @@
|
||||
import * as React from "react";
|
||||
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";
|
||||
|
@ -1,16 +1,13 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVGLogo from "~/common/logo";
|
||||
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 WebsiteHeader from "~/components/core/WebsiteHeader";
|
||||
import WebsiteFooter from "~/components/core/WebsiteFooter";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { useGuideKeyCommands } from "./guide/guide";
|
||||
|
||||
const STYLES_ROOT = css`
|
||||
width: 100%;
|
||||
@ -142,6 +139,8 @@ export default function IndexPage() {
|
||||
const url = "https://slate.host/";
|
||||
const image =
|
||||
"https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4";
|
||||
const next = "../guide/browser-control";
|
||||
useGuideKeyCommands(next);
|
||||
|
||||
return (
|
||||
<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
|
||||
more personal.
|
||||
</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 }} />
|
||||
</a>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user