git.iko.soy/urbit.org
on master help sign in
Merge pull request #1794 from urbit/pkova/shore
3c1fa48Pyry Kovanen
pages/index.js+2−1
compare with master
unifiedsplit
@@ -47,8 +47,9 @@ export default function Home({
47 // Hero Statement
47 // Hero Statement
48 }
48 }
49 <Section className="pb-36">
49 <Section className="pb-36">
50− <div>
50+ <div className="space-y-8">
51 <h1>A clean-slate OS and network for the 21st&nbsp;century.</h1>
51 <h1>A clean-slate OS and network for the 21st&nbsp;century.</h1>
52+ <Link href="/trial" passHref><a className="bg-green-400 text-white button-lg max-w-fit">Explore the Network</a></Link>
52 </div>
53 </div>
53 </Section>
54 </Section>
54 {
55 {
pages/trial-over.jsnew file+35
@@ -0,0 +1,35 @@
1+import Head from "next/head";
2+import Link from "next/link";
3+import Meta from "../components/Meta";
4+import {
5+ Container,
6+ SingleColumn,
7+ Section,
8+ IntraNav,
9+} from "@urbit/foundation-design-system";
10+import Header from "../components/Header";
11+import Footer from "../components/Footer";
12+
13+export default function TrialOver(props) {
14+ const post = {
15+ title: "Trial Over",
16+ };
17+
18+
19+ return (
20+ <Container>
21+ <Head>
22+ <title>Trial Over • urbit.org</title>
23+ {Meta(post)}
24+ </Head>
25+ <IntraNav ourSite="https://urbit.org" search={props.search} />
26+ <div className="h-full w-full grow flex items-center justify-center flex-col px-8 md:px-0">
27+ <div className="w-fit">
28+ <h2>Your one day moon trial has concluded.</h2>
29+ <p className="my-12 max-w-prose">To keep using Urbit, we recommend getting a planet and setting up Urbit yourself or using a hosting provider.
30+ <Link href="/getting-started"><a className="button-lg bg-green-400 text-white max-w-fit my-12">Get Started</a></Link></p>
31+ </div>
32+ </div>
33+ </Container>
34+ );
35+}
pages/trial.jsnew file+129
@@ -0,0 +1,129 @@
1+import { useState, useEffect } from 'react';
2+import Head from "next/head";
3+import Link from 'next/link';
4+import Meta from "../components/Meta";
5+import {
6+ Container,
7+ SingleColumn,
8+ Section,
9+ IntraNav,
10+} from "@urbit/foundation-design-system";
11+import Header from "../components/Header";
12+import Footer from "../components/Footer";
13+import cn from 'classnames';
14+
15+const postReq = (path, params, method = 'post') => {
16+ const form = document.createElement('form');
17+ form.method = method;
18+ form.action = path;
19+
20+ for (const key in params) {
21+ if (params.hasOwnProperty(key)) {
22+ const hiddenField = document.createElement('input');
23+ hiddenField.type = 'hidden';
24+ hiddenField.name = key;
25+ hiddenField.value = params[key];
26+
27+ form.appendChild(hiddenField);
28+ }
29+ }
30+
31+ document.body.appendChild(form);
32+ form.submit();
33+}
34+
35+
36+
37+export default function Trial(props) {
38+ const post = {
39+ title: "Explore the Network",
40+ description: "Get one day of a complimentary hosted moon: a temporary Urbit ID."
41+ };
42+
43+ const [count, setCount] = useState(0)
44+
45+ useEffect(() => {
46+ fetch('https://api.shore.arvo.network/count', {
47+ method: 'GET',
48+ headers: { 'Content-Type': 'application/json' }
49+ })
50+ .then(res => res.json())
51+ .then(data => {
52+ setCount(data.count);
53+ });
54+ }, []);
55+
56+ const available = count > 0;
57+
58+ return (
59+ <Container>
60+ <Head>
61+ <title>{post.title} • urbit.org</title>
62+ {Meta(post)}
63+ </Head>
64+ <IntraNav ourSite="https://urbit.org" search={props.search} />
65+ <SingleColumn>
66+ <Header />
67+ <Section className="space-y-12">
68+ <h1>{post.title}</h1>
69+ {/* Flex between image and blurb, collapse to col on mobile */}
70+ <div className="flex flex-col items-center space-y-4 xl:space-y-0 xl:flex-row xl:space-x-4">
71+ <video className="max-w-md w-full min-w-0" autoPlay muted loop playsInline>
72+ <source
73+ src="https://storage.googleapis.com/media.urbit.org/site/explorethenetwork.webm"
74+ type="video/webm"
75+ />
76+ <source
77+ src="https://storage.googleapis.com/media.urbit.org/site/explorethenetwork.mp4"
78+ type="video/mp4"
79+ />
80+ </video>
81+ {/* Blurb is flexed to space button and copy */}
82+ <div className="flex-col flex space-y-4">
83+ <p>No downloads, no signup.</p>
84+ <p>Get <span className="font-bold">one day</span> of a complimentary hosted moon: a temporary Urbit ID.</p>
85+ {/* Button is flexed to space potential "try again later" copy */}
86+ <div className="xl:space-x-4 space-y-4 xl:space-y-0 self-center xl:self-start w-full flex-col xl:flex-row flex items-center">
87+ <a className={cn("p-8 button-lg text-white max-w-fit shrink-0", {
88+ "bg-green-400": available,
89+ "bg-wall-300 cursor-not-allowed": !available,
90+ })}
91+ onClick={(e) => {
92+ e.stopPropagation();
93+
94+ if (!available) {
95+ return
96+ }
97+
98+ fetch('https://api.shore.arvo.network/enter', {
99+ method: 'GET',
100+ headers: { 'Content-Type': 'application/json' }
101+ })
102+ .then(res => {
103+ if (!res.ok) {
104+ throw 'Error response from shore api.';
105+ }
106+ return res.json();
107+ })
108+ .then(data => {
109+ postReq(data.url + '/~/login', { password: data.code, redirect: '/' });
110+ })
111+ .catch(e => setCount(0));
112+ }}
113+ >
114+ {available ? 'Launch Moon' : 'No Moons Available'}
115+ </a>
116+ {!available && <p>Check back later!</p>}
117+ </div>
118+ </div>
119+ </div>
120+ <div className="max-w-prose flex flex-col space-y-4">
121+ <p>Moons are great for checking things out, but some groups may require a planet – a permanent Urbit ID.</p>
122+ <p>Learn more about <Link href="/getting-started/get-planet"><a>getting a planet</a></Link>.</p>
123+ </div>
124+ </Section>
125+ </SingleColumn>
126+ <Footer />
127+ </Container>
128+ );
129+}