filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-09-11 22:07:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

guide updates

Browse Source
This commit is contained in:
tarafanlin 2022-06-20 14:42:34 -07:00
parent 85cdcf4b55
commit e5f9a3eb2a
14 changed files with 339 additions and 311 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
common/styles.js
View File

@ -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;

1
common/validations.js
View File

@ -65,6 +65,7 @@ const REJECT_LIST = [
"please-dont-use-timeout",
"faqs",
"about",
"guide",
];
export const userRoute = (text) => {

11
components/landing/jumperPrototype.js
View File

@ -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>
);
};

21
pages/get-started/browser-control.js
View File

@ -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="../"
/>
);
}

274
pages/get-started/guide.js
View File

@ -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
View 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>
}
/>
);
}

2
pages/get-started/file.js → pages/guide/file.js
View File

@ -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
View 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>
);
}

3
pages/get-started/new-tab.js → pages/guide/new-tab.js
View File

@ -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";

2
pages/get-started/save.js → pages/guide/save.js
View File

@ -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";

2
pages/get-started/search.js → pages/guide/search.js
View File

@ -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";

2
pages/get-started/space.js → pages/guide/space.js
View File

@ -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";

2
pages/get-started/tag.js → pages/guide/tag.js
View File

@ -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";

9
pages/index.js
View File

@ -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>