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