+
FAQs
What is a personal search engine?
diff --git a/pages/get-slate.js b/pages/get-slate.js
index b93bbc8b..8f3ae1d3 100644
--- a/pages/get-slate.js
+++ b/pages/get-slate.js
@@ -1,10 +1,6 @@
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";
@@ -16,26 +12,43 @@ import { useGuideKeyCommands } from "./guide/guide";
const STYLES_ROOT = css`
width: 100%;
height: 100%;
- overflow: hidden;
- height: 100vh;
+ min-height: calc(100vh - 61px);
background-color: ${Constants.semantic.bgLight};
color: ${Constants.semantic.textBlack};
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+
+ @media (max-width: ${Constants.sizes.mobile}px) {
+ min-height: calc(100vh - 112px);
+ }
`;
const STYLES_CONTAINER = css`
max-width: 700px;
margin: 0 auto;
- padding: 64px 0;
+ padding: 24px 0 96px 0;
@media (max-width: ${Constants.sizes.mobile}px) {
max-width: 480px;
- padding: 96px 16px;
+ padding: 16px 16px 24px 16px;
}
`;
const STYLES_IMG = css`
width: 100%;
margin-bottom: 40px;
+
+ @keyframes hero-fade-in {
+ 0% {
+ opacity: 0%;
+ transform: translateY(5%);
+ }
+ 100% {
+ opacity: 100%;
+ transform: translateY(0%);
+ }
+ }
+ animation: hero-fade-in 300ms ease-in-out;
`;
const STYLES_HEADING = css`
@@ -59,61 +72,54 @@ const STYLES_HEADING = css`
font-size: 48px;
line-height: 52px;
letter-spacing: -0.04em;
+ margin-bottom: 13px;
}
+
+ @keyframes heading-fade-in {
+ 0% {
+ opacity: 0%;
+ transform: translateY(25%);
+ }
+ 50% {
+ opacity: 0%;
+ transform: translateY(25%);
+ }
+ 100% {
+ opacity: 100%;
+ transform: translateY(0%);
+ }
+ }
+ animation: heading-fade-in 400ms ease-in-out;
`;
const STYLES_BODY = css`
- font-family: ${Constants.font.text};
+ font-family: ${Constants.font.medium};
font-size: 20px;
line-height: 28px;
- letter-spacing: -0.01em;
- margin-bottom: 40px;
-`;
+ letter-spacing: -0.015em;
+ margin-bottom: 32px;
-const STYLES_CURSOR_BLINK = css`
- display: inline-block;
- background-color: ${Constants.semantic.textGray};
- width: 32px;
- height: 61px;
- margin-left: 6px;
- overflow: visible;
- animation: blink-animation 1s steps(5, start) infinite;
- -webkit-animation: blink-animation 1s steps(5, start) infinite;
- @keyframes blink-animation {
- to {
- visibility: hidden;
+ @keyframes body-fade-in {
+ 0% {
+ opacity: 0%;
+ transform: translateY(50%);
+ }
+ 50% {
+ opacity: 0%;
+ transform: translateY(50%);
+ }
+ 100% {
+ opacity: 100%;
+ transform: translateY(0%);
}
}
- @-webkit-keyframes blink-animation {
- to {
- visibility: hidden;
- }
- }
- @media (max-width: ${Constants.sizes.tablet}px) {
- width: 28.5px;
- height: 47px;
- margin-left: 4px;
- }
- @media (max-width: ${Constants.sizes.mobile}px) {
- width: 21px;
- height: 35px;
- margin-left: 2px;
- }
-`;
+ animation: body-fade-in 600ms ease-in-out;
-const STYLES_CURSOR_BLINK_SMALL = css`
- ${STYLES_CURSOR_BLINK}
- width: 25px;
- height: 41px;
- @media (max-width: ${Constants.sizes.tablet}px) {
- width: 21px;
- height: 35px;
- margin-left: 2px;
- }
@media (max-width: ${Constants.sizes.mobile}px) {
- width: 17.5px;
- height: 29px;
- margin-left: 2px;
+ font-size: 18px;
+ line-height: 28px;
+ letter-spacing: -0.01em;
+ margin-bottom: 16px;
}
`;
@@ -128,34 +134,76 @@ const STYLES_BUTTON = css`
font-family: ${Constants.font.medium};
font-size: 18px;
line-height: 20px;
+ letter-spacing: -0.015em;
text-decoration: none;
cursor: pointer;
- background-color: ${Constants.system.blue};
+ margin-right: 16px;
+ margin-bottom: 16px;
+ @keyframes button-fade-in {
+ 0% {
+ opacity: 0%;
+ transform: translateY(50%);
+ }
+ 50% {
+ opacity: 0%;
+ transform: translateY(50%);
+ }
+ 100% {
+ opacity: 100%;
+ transform: translateY(0%);
+ }
+ }
+ animation: button-fade-in 700ms ease-in-out;
+
+ @media (max-width: ${Constants.sizes.mobile}px) {
+ font-size: 18px;
+ line-height: 24px;
+ letter-spacing: -0.01em;
+ padding: 14px 20px;
+ }
+`;
+
+const STYLES_PRIMARY_BUTTON = css`
+ ${STYLES_BUTTON}
+ background-color: ${Constants.system.lime};
color: ${Constants.semantic.textWhite};
`;
+const STYLES_SECONDARY_BUTTON = css`
+ ${STYLES_BUTTON}
+ background-color: none;
+ border: 2px solid ${Constants.semantic.borderGray};
+ color: ${Constants.semantic.textBlack};
+`;
+
export default function InstallPage() {
const title = `Install Slate for Chrome - Slate`;
const description = "Install Slate from Chrome web store";
const url = "https://slate.host/get-slate";
const image =
"https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4";
- const slate = "../public/static/Slate_volumetric.png";
- const next =
- "https://chrome.google.com/webstore/detail/slate-web-extension/gloembacbehhbfbkcfjmloikeeaebnoc?hl=en-US";
+ const next = "/_/auth";
const prev = "../guide/new-tab";
useGuideKeyCommands(next, prev);
return (
diff --git a/pages/guide/browser-control.js b/pages/guide/browser-control.js
index b97164d8..3fbd1613 100644
--- a/pages/guide/browser-control.js
+++ b/pages/guide/browser-control.js
@@ -7,58 +7,40 @@ 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 VIEWS_ACTIONS = [{ label: "Current Window" }, { label: "All Open" }, { label: "Recent" }];
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: "Fitzcarraldo 1982 Werner Herzog Klaus Kinski Full Movie HD",
+ Favicon: SVG.YoutubeFavicon,
},
{
- title: "Concrete Architecture (@architeg) / Twitter",
- Favicon: SVG.TwitterFavicon,
+ title: "Amazon.com: Whole Foods Market",
+ Favicon: SVG.AmazonFavicon,
},
{
- title: "Concrete Architecture (@architeg) / Twitter",
- Favicon: SVG.TwitterFavicon,
- isSaved: true,
+ title: "NASA Is Working With Startups to Harvest the Moon’s Resources",
+ Favicon: SVG.WSJFavicon,
},
{
- title: "Concrete Architecture (@architeg) / Twitter",
- Favicon: SVG.TwitterFavicon,
- isSaved: true,
+ title: "SyntheticEvent - React",
+ Favicon: SVG.ReactFavicon,
},
{
- title: "Concrete Architecture (@architeg) / Twitter",
- Favicon: SVG.TwitterFavicon,
+ title: "slate-engineering/slate-web-extension at @aminejv/history",
+ Favicon: SVG.GithubFavicon,
},
{
- title: "Concrete Architecture (@architeg) / Twitter",
- Favicon: SVG.TwitterFavicon,
+ title: "Verticle ⋅ Mount Kimbie",
+ Favicon: SVG.SpotifyFavicon,
},
{
- title: "Concrete Architecture (@architeg) / Twitter",
- Favicon: SVG.TwitterFavicon,
- },
- {
- title: "Concrete Architecture (@architeg) / Twitter",
- Favicon: SVG.TwitterFavicon,
- isSaved: true,
+ title: "tokyo travel restrictions 2022 - Google Search",
+ Favicon: SVG.GoogleFavicon,
},
];
@@ -69,35 +51,21 @@ export default function BrowserControlGuidePage() {
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."
+ heading="Built for your browser"
+ body="Our Chrome extension gives you seamless control of your tabs with powerful tools to help you manage and keep track of things."
next="save"
prev="../"
jumper={
-
+
- {VIEWS_ACTIONS.map((action) => (
-
- {action.label}
-
- ))}
-
- {CUSTOM_VIEWS_ACTIONS.map((action, i) => (
-
+ {VIEWS_ACTIONS.map((action, i) => (
+
{action.label}
))}
-
+
@@ -112,8 +80,9 @@ export default function BrowserControlGuidePage() {
))}
-
+
}
+ mobileguide="../public/static/browser-control.png"
/>
);
}
diff --git a/pages/guide/file.js b/pages/guide/file.js
index 2f1b4914..a6a132ff 100644
--- a/pages/guide/file.js
+++ b/pages/guide/file.js
@@ -1,10 +1,64 @@
import * as React from "react";
import * as Constants from "~/common/constants";
+import * as SVG from "~/common/svg";
+import * as JumperPrototype from "~/components/landing/jumperPrototype";
import Guide from "~/pages/guide/guide.js";
import { css } from "@emotion/react";
+const VIEWS_ACTIONS = [{ label: "Current Window" }, { label: "All Open" }, { label: "Recent" }];
+
+const CUSTOM_VIEWS_ACTIONS = [{ label: "Files" }];
+
+const OBJECTS = [
+ {
+ title: "Alexander, C., Notes on the Synthesis of Form",
+ Favicon: SVG.Book,
+ isSaved: true,
+ tag: "computer-architecture",
+ },
+ {
+ title: "Graphical database interface",
+ Favicon: SVG.Image,
+ isSaved: true,
+ },
+ {
+ title: "Landscape in the Mist",
+ Favicon: SVG.Video,
+ isSaved: true,
+ tag: "theo-angelopoulos",
+ },
+ {
+ title: "Shannon, C., “A Theory of Communications”",
+ Favicon: SVG.Document,
+ isSaved: true,
+ tag: "computer-architecture",
+ },
+ {
+ title: "Retro computer fonts",
+ Favicon: SVG.TextDocument,
+ isSaved: true,
+ },
+ {
+ title: "Prime number ASMR",
+ Favicon: SVG.Sound,
+ isSaved: true,
+ },
+ {
+ title: "Hesse, H., Demian",
+ Favicon: SVG.Book,
+ isSaved: true,
+ tag: "reading",
+ },
+ {
+ title: "Pask, G., “The Architectural Relevance of Cybernetics”",
+ Favicon: SVG.TextDocument,
+ isSaved: true,
+ tag: "computer-architecture",
+ },
+];
+
export default function FileGuidePage() {
return (
+
+ {VIEWS_ACTIONS.map((action, i) => (
+
+ {action.label}
+
+ ))}
+
+ {CUSTOM_VIEWS_ACTIONS.map((action, i) => (
+
+ {action.label}
+
+ ))}
+
+
+
+
+
+
+ {OBJECTS.map((object) => (
+
+ ))}
+
+
+
+ }
+ mobileguide="../public/static/file.png"
/>
);
}
diff --git a/pages/guide/guide.js b/pages/guide/guide.js
index 08fc6bae..991e70f1 100644
--- a/pages/guide/guide.js
+++ b/pages/guide/guide.js
@@ -4,7 +4,6 @@ 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";
@@ -13,13 +12,12 @@ 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);
+ min-height: 100vh;
background-color: ${Constants.semantic.bgLight};
color: ${Constants.semantic.textBlack};
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ overflow: hidden;
`;
const STYLES_CONTAINER = css`
@@ -29,7 +27,7 @@ const STYLES_CONTAINER = css`
@media (max-width: ${Constants.sizes.mobile}px) {
max-width: 480px;
- padding: 96px 16px;
+ padding: 32px 16px;
}
`;
@@ -42,11 +40,12 @@ const STYLES_HEADING = css`
font-size: 40px;
line-height: 40px;
letter-spacing: -0.035em;
- margin-bottom: 30px;
+ margin-bottom: 20px;
- @media (max-width: ${Constants.sizes.tablet}px) {
- font-size: 32px;
- line-height: 40px;
+ @media (max-width: ${Constants.sizes.mobile}px) {
+ font-size: 24px;
+ line-height: 32px;
+ margin-bottom: 12px;
}
@keyframes heading-fade-in {
@@ -63,11 +62,12 @@ const STYLES_HEADING = css`
`;
const STYLES_BODY = css`
- font-family: ${Constants.font.text};
+ font-family: ${Constants.font.medium};
font-size: 18px;
line-height: 28px;
- letter-spacing: -0.01em;
- margin-bottom: 49px;
+ letter-spacing: -0.015em;
+ margin-bottom: 16px;
+ min-height: 84px;
@keyframes body-fade-in {
0% {
@@ -84,29 +84,22 @@ const STYLES_BODY = css`
}
}
animation: body-fade-in 500ms ease-in-out;
+
+ @media (max-width: ${Constants.sizes.mobile}px) {
+ font-size: 17px;
+ line-height: 24px;
+ letter-spacing: -0.01em;
+ }
`;
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%);
- }
+ @media (max-width: ${Constants.sizes.mobile}px) {
+ display: none;
}
- animation: jumper-fade-in 700ms ease-in-out;
`;
const STYLES_FLEX = css`
- position: absolute;
- bottom: 48px;
+ margin-top: 48px;
width: 100%;
max-width: 700px;
display: flex;
@@ -114,7 +107,7 @@ const STYLES_FLEX = css`
justify-content: center;
@media (max-width: ${Constants.sizes.tablet}px) {
- bottom: 96px;
+ max-width: 100%;
}
`;
@@ -138,6 +131,62 @@ const STYLES_BUTTON = css`
}
`;
+const STYLES_IMGGUIDE = css`
+ display: block;
+ height: 498px;
+ border-radius: 8px;
+ margin-left: -190px;
+
+ @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;
+
+ @media (max-width: ${Constants.sizes.mobile}px) {
+ width: 100%;
+ height: auto;
+ margin-left: 0;
+ border-radius: 4px;
+ }
+`;
+
+const STYLES_MOBILEGUIDE = css`
+ display: none;
+
+ @media (max-width: ${Constants.sizes.mobile}px) {
+ display: block;
+ width: 100%;
+ height: auto;
+
+ @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;
+ }
+`;
+
export const useGuideKeyCommands = (next, prev) => {
const handleKeyUp = (e) => {
const input = document.querySelectorAll("input");
@@ -165,28 +214,38 @@ export const useGuideKeyCommands = (next, prev) => {
useEventListener({ type: "keyup", handler: handleKeyUp });
};
-export default function Guide(props) {
- useGuideKeyCommands(props.next, props.prev);
+export default function Guide({
+ title,
+ description,
+ url,
+ image,
+ heading,
+ body,
+ jumper,
+ imageguide,
+ mobileguide,
+ prev,
+ next,
+ ...props
+}) {
+ useGuideKeyCommands(next, prev);
return (
-
-
+
+
-
{props.heading}
-
{props.body}
-
{props.jumper}
+
{heading}
+
{body}
+ {jumper &&
{jumper}
}
+ {imageguide &&
}
+ {mobileguide &&
}
-
-
+
+
-
+
@@ -194,7 +253,6 @@ export default function Guide(props) {
-
);
}
diff --git a/pages/guide/new-tab.js b/pages/guide/new-tab.js
index cfe57da0..58391afc 100644
--- a/pages/guide/new-tab.js
+++ b/pages/guide/new-tab.js
@@ -1,6 +1,6 @@
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";
@@ -13,10 +13,11 @@ export default function NewTabGuidePage() {
description="Your personal search engine"
url="https://slate.host/guide/new-tab"
image="https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4"
- heading="Slate new tab"
+ heading="Refresh your memory with every tab"
body="You can even use Slate as your new tab experience to refresh your memory as you browse."
next="/get-slate"
prev="search"
+ imageguide="../public/static/new-tab.png"
/>
);
}
diff --git a/pages/guide/save.js b/pages/guide/save.js
index 1f4344ea..9d499b13 100644
--- a/pages/guide/save.js
+++ b/pages/guide/save.js
@@ -1,10 +1,58 @@
import * as React from "react";
import * as Constants from "~/common/constants";
+import * as SVG from "~/common/svg";
+import * as JumperPrototype from "~/components/landing/jumperPrototype";
import Guide from "~/pages/guide/guide.js";
import { css } from "@emotion/react";
+const VIEWS_ACTIONS = [{ label: "Current Window" }, { label: "All Open" }, { label: "Recent" }];
+
+const OBJECTS = [
+ {
+ title: "Concrete Architecture (@architeg) / Twitter",
+ Favicon: SVG.TwitterFavicon,
+ isSaved: true,
+ tag: "architecture",
+ },
+ {
+ title: "Fitzcarraldo 1982 Werner Herzog Klaus Kinski Full Movie HD",
+ Favicon: SVG.YoutubeFavicon,
+ isSelected: true,
+ },
+ {
+ title: "Amazon.com: Whole Foods Market",
+ Favicon: SVG.AmazonFavicon,
+ },
+ {
+ title: "NASA Is Working With Startups to Harvest the Moon’s Resources",
+ Favicon: SVG.WSJFavicon,
+ },
+ {
+ title: "SyntheticEvent - React",
+ Favicon: SVG.ReactFavicon,
+ isSaved: true,
+ tag: "code",
+ },
+ {
+ title: "slate-engineering/slate-web-extension at @aminejv/history",
+ Favicon: SVG.GithubFavicon,
+ isSaved: true,
+ tag: "slate",
+ },
+ {
+ title: "Verticle ⋅ Mount Kimbie",
+ Favicon: SVG.SpotifyFavicon,
+ isSaved: true,
+ tag: "work-music",
+ },
+ {
+ title: "tokyo travel restrictions 2022 - Google Search",
+ Favicon: SVG.GoogleFavicon,
+ },
+];
+
export default function SaveGuidePage() {
return (
+
+ {VIEWS_ACTIONS.map((action, i) => (
+
+ {action.label}
+
+ ))}
+
+
+
+
+
+
+ {OBJECTS.map((object) => (
+
+ ))}
+
+
+
+ }
+ mobileguide="../public/static/save.png"
/>
);
}
diff --git a/pages/guide/search.js b/pages/guide/search.js
index 438750bb..57a91975 100644
--- a/pages/guide/search.js
+++ b/pages/guide/search.js
@@ -1,10 +1,73 @@
import * as React from "react";
import * as Constants from "~/common/constants";
+import * as SVG from "~/common/svg";
+import * as JumperPrototype from "~/components/landing/jumperPrototype";
import Guide from "~/pages/guide/guide.js";
import { css } from "@emotion/react";
+const VIEWS_ACTIONS = [{ label: "Current Window" }, { label: "All Open" }, { label: "Recent" }];
+
+const CUSTOM_VIEWS_ACTIONS = [
+ { label: "Files" },
+ { label: "Twitter", Favicon: SVG.TwitterFavicon },
+ { label: "Reading", Favicon: SVG.Hash },
+];
+
+const OBJECTS = [
+ {
+ title: "Nicholas Negroponte Architecture Machine",
+ Favicon: SVG.InternetArchiveFavicon,
+ },
+ {
+ title: "Alexander, C., Notes on the Synthesis of Form",
+ Favicon: SVG.Book,
+ isSaved: true,
+ tag: "computer-architecture",
+ },
+ {
+ title: "Von Neumann Architecture - Computerphile",
+ Favicon: SVG.YoutubeFavicon,
+ },
+ {
+ title: "Shannon, C., “A Theory of Communications”",
+ Favicon: SVG.Document,
+ isSaved: true,
+ tag: "computer-architecture",
+ },
+ {
+ title: "Pask, G., “The Architectural Relevance of Cybernetics”",
+ Favicon: SVG.TextDocument,
+ isSaved: true,
+ tag: "computer-architecture",
+ },
+ {
+ title: "Michael Porter, “How Smart, Connected Products Are Transforming Competition”",
+ Favicon: SVG.HBRFavicon,
+ },
+ {
+ title: "Morozov, Evgeny (2014), “The Planning Machine: Project Cybersyn… Big Data…”",
+ Favicon: SVG.NewYorkerFavicon,
+ },
+ {
+ title:
+ "no on Twitter: “An Introduction to Cybernetics (1956) : Ashby, W. Ross DOI: https://doi.org/10.2307/3006723”",
+ Favicon: SVG.TwitterFavicon,
+ },
+ {
+ title: "Capra, F., and Luisi, P. L., The Systems View of Life: A Unifying Vision",
+ Favicon: SVG.Document,
+ isSaved: true,
+ tag: "computer-architecture",
+ },
+ {
+ title:
+ "Nimbu on Twitter: “📷 spaceintruderdetector: CYBERNETICS AND ITS DEVELOPMENT IN THE SOVIET UNION 1964 https://archive.org/details/DTIC_AD0602705/mode/2up The report is an introduction to the subject of cybernetics, with special reference to its origins and...”",
+ Favicon: SVG.TwitterFavicon,
+ },
+];
+
export default function SearchGuidePage() {
return (