@@ -1,54 +1,65 @@
1−import Head from 'next/head'
2−import Link from 'next/link'
3−import { useState } from 'react';
4−import Container from '../components/Container'
5−import SingleColumn from '../components/SingleColumn'
6−import Header from '../components/Header'
7−import Footer from '../components/Footer'
8−import BackgroundImage from '../components/BackgroundImage'
9−import TabCarousel from '../components/TabCarousel'
10−import { getAllPosts, formatDate } from '../lib/lib'
11−import { contact } from '../lib/constants'
1+import Head from "next/head";
2+import Link from "next/link";
3+import { useState } from "react";
4+import Container from "../components/Container";
5+import SingleColumn from "../components/SingleColumn";
6+import Header from "../components/Header";
7+import Footer from "../components/Footer";
8+import BackgroundImage from "../components/BackgroundImage";
9+import TabCarousel from "../components/TabCarousel";
10+import NewsletterSignup from "../components/NewletterSignup";
11+import PostPreview from "../components/PostPreview";
12+import { getAllPosts, formatDate } from "../lib/lib";
13+import { contact } from "../lib/constants";
1214
1315export default function Home({ posts, events }) {
14−
15− const [tab, setTab] = useState(0)
16−
16+ const [tab, setTab] = useState(0);
17+
1718 return (
1819 <Container>
1920 <SingleColumn>
2021 <Header />
21−
22+
2223 <section className="layout-narrow pt-48">
2324 <h1>A general-purpose,</h1>
2425 <h1>peer-to-peer,</h1>
2526 <h1>personal computing system.</h1>
2627 </section>
27−
28+
2829 <section className="layout-wide pt-48">
2930 <div className="bg-wall w-11/12 hero-card-height rounded-3xl flex">
3031 <div className="pt-20 pl-12 w-7/12">
3132 <div className="pb-8">
32− <h2 className="p-0 m-0 pb-2">Introducing</h2><h2 className="text-green p-0 m-0">Port</h2>
33+ <h2 className="p-0 m-0 pb-2">Introducing</h2>
34+ <h2 className="text-green p-0 m-0">Port</h2>
3335 </div>
3436 <h3 className="pb-8">The Urbit client, now in beta.</h3>
35− <p className="pb-24">Getting into Urbit is now as simple as installing an app on your computer.</p>
36− <button className="button-lg type-ui mb-5 bg-green text-white">Download For Mac</button>
37+ <p className="pb-24">
38+ Getting into Urbit is now as simple as installing an app on your
39+ computer.
40+ </p>
41+ <button className="button-lg type-ui mb-5 bg-green text-white">
42+ Download For Mac
43+ </button>
3744 <a className="type-ui text-gray">View on GitHub</a>
3845 </div>
3946 <div className="bg-black w-full rounded-xl hero-image-height hero-image mt-8" />
4047 </div>
4148 </section>
42−
49+
4350 <section className="layout-narrow pt-48">
44− <div className='flex items-center measure pb-12'>
51+ <div className="flex items-center measure pb-12">
4552 <h2 className="m-0 p-0 mr-4">Urbit Grants</h2>
46− <button className="flex bg-green text-white type-ui px-4 items-center justify-center h-12 rounded-full">32 Open</button>
53+ <button className="flex bg-green text-white type-ui px-4 items-center justify-center h-12 rounded-full">
54+ 32 Open
55+ </button>
4756 </div>
4857 <div className="flex w-full items-center bg-washedGreen px-8 py-8 rounded-xl">
4958 <div className="flex items-center flex-col p-4 w-full">
5059 <h2 className="text-green">200+</h2>
51− <h3 className="text-green text-center pt-2">Urbit stars awarded</h3>
60+ <h3 className="text-green text-center pt-2">
61+ Urbit stars awarded
62+ </h3>
5263 </div>
5364 <div className="h-24 w-4 bg-lightGreen" />
5465 <div className="flex items-center flex-col p-4 w-full">
@@ -61,152 +72,158 @@ export default function Home({ posts, events }) {
6172 <h3 className="text-green text-center pt-2">Grants completed</h3>
6273 </div>
6374 </div>
64− <div className='measure py-12'>
65− <p className="pb-12">We regularly give away address space to reward community contributions, including education, promotion, and development.</p>
66− <button className="button-lg bg-green text-white">View Grants</button>
75+ <div className="measure py-12">
76+ <p className="pb-12">
77+ We regularly give away address space to reward community
78+ contributions, including education, promotion, and development.
79+ </p>
80+ <button className="button-lg bg-green text-white">
81+ View Grants
82+ </button>
6783 </div>
6884 </section>
69−
85+
7086 <section className="layout-narrow pt-48">
71− <div className='measure'>
72− <h2 className="pb-12">Build on Urbit</h2>
73− <h3 className="pb-12">
74− Urbit is a personal OS designed from scratch to run peer-to-peer applications.
75− </h3>
76− <p className="pb-12">
77− It solves the hard problems of implementing a peer-to-peer network (including identity, NAT traversal, and exactly-once delivery) in the kernel so app developers can focus on business logic.
78− </p>
79− <p className="pb-12">
80− The entire OS is a <Link href=''><a>single pure function</a></Link> that provides application developers with strong guarantees: automated persistence and memory management, repeatable builds, and support for hot code reloading.
81− </p>
82− <p className="pb-12">
83− You can get started learning how to <Link href=''><a>contribute to the project</a></Link>, or view a variety of <Link href=''><a>libraries</a></Link> for building on Urbit using the languages you already know.
84− </p>
85− <button className="button-lg type-ui text-white bg-black">Read the Developer Docs</button>
86− </div>
87− </section>
88−
89−
87+ <div className="measure">
88+ <h2 className="pb-12">Build on Urbit</h2>
89+ <h3 className="pb-12">
90+ Urbit is a personal OS designed from scratch to run peer-to-peer
91+ applications.
92+ </h3>
93+ <p className="pb-12">
94+ It solves the hard problems of implementing a peer-to-peer network
95+ (including identity, NAT traversal, and exactly-once delivery) in
96+ the kernel so app developers can focus on business logic.
97+ </p>
98+ <p className="pb-12">
99+ The entire OS is a{" "}
100+ <Link href="">
101+ <a>single pure function</a>
102+ </Link>{" "}
103+ that provides application developers with strong guarantees:
104+ automated persistence and memory management, repeatable builds,
105+ and support for hot code reloading.
106+ </p>
107+ <p className="pb-12">
108+ You can get started learning how to{" "}
109+ <Link href="">
110+ <a>contribute to the project</a>
111+ </Link>
112+ , or view a variety of{" "}
113+ <Link href="">
114+ <a>libraries</a>
115+ </Link>{" "}
116+ for building on Urbit using the languages you already know.
117+ </p>
118+ <button className="button-lg type-ui text-white bg-black">
119+ Read the Developer Docs
120+ </button>
121+ </div>
122+ </section>
123+
90124 <section className="layout-narrow pt-48">
91− <div className='flex items-center measure pb-12'>
92− <button
93− onClick={() => setTab(0)}
94− className={`tab-button-lg mr-6 ${tab === 0 ? 'text-black' : 'text-gray'}`}>
125+ <div className="flex items-center measure pb-12">
126+ <button
127+ onClick={() => setTab(0)}
128+ className={`tab-button-lg mr-6 ${
129+ tab === 0 ? "text-black" : "text-gray"
130+ }`}
131+ >
95132 Blog
96133 </button>
97− <button
134+ <button
98135 onClick={() => setTab(1)}
99− className={`tab-button-lg ${tab === 1 ? 'text-black' : 'text-gray'}`}>
136+ className={`tab-button-lg ${
137+ tab === 1 ? "text-black" : "text-gray"
138+ }`}
139+ >
100140 Events
101141 </button>
102142 </div>
103−
143+
104144 <TabCarousel index={tab}>
105145 <div className="blog-grid">
106− {
107− posts.slice(0, 4).map((post, i) => {
108− return (
109− <div className={`border-black cursor-pointer blog-grid-${i}`} key={post.slug}>
110− <Link href={'/blog/' + post.slug} key={`post-${post.slug}`}>
111− <div>
112− <BackgroundImage className="w-full h-80 rounded" src={post.extra.image || ''} />
113− <p className='text-black type-h3 mt-2'>{post.title}</p>
114− <p className='text-black mt-2'>{post.extra.author}</p>
115− <p className='text-gray mt-2'>{formatDate(new Date(post.date))}</p>
116− </div>
117− </Link>
118− </div>
119− )
120− })
121− }
146+ {posts.slice(0, 4).map((post, i) => {
147+ return (
148+ <PostPreview
149+ post={post}
150+ className={`blog-grid-${i}`}
151+ key={post.slug}
152+ />
153+ );
154+ })}
122155 <div>
123− <Link href="/blog"><button className="button-lg type-ui">Read More</button></Link>
156+ <Link href="/blog">
157+ <button className="button-lg type-ui text-white bg-black">
158+ Read More
159+ </button>
160+ </Link>
124161 </div>
125162 </div>
126163 <div className="blog-grid">
127− {
128− events.slice(0, 4).map((event, i) => {
129− return (
130− <div className={`border-black cursor-pointer blog-grid-${i}`} key={event.slug}>
131− <Link href={'/events/' + event.slug} key={`post-${event.slug}`}>
132− <div>
133− <BackgroundImage className="w-full h-80 rounded-lg" src={event.extra.image || ''} />
134− <p className='text-black mt-2'>{event.title || ''}</p>
135− <p className='text-gray'>{formatDate(new Date(event.date))}</p>
136− </div>
137− </Link>
138− </div>
139− )
140− })
141− }
164+ {events.slice(0, 4).map((event, i) => {
165+ return (
166+ <PostPreview
167+ post={event}
168+ className={`blog-grid-${i}`}
169+ key={event.slug}
170+ />
171+ );
172+ })}
142173 </div>
143174 </TabCarousel>
144175 </section>
145−
176+
146177 <section className="layout-narrow pt-48">
147− <div className='measure'>
178+ <div className="measure">
148179 <h2 className="m-0 p-0 mr-4 pb-12">Stay In Touch</h2>
149− <p className='pb-12'>We send monthly emails on system improvements, upcoming events, and community spotlights.</p>
180+ <p className="pb-6">
181+ We send monthly emails on system improvements, upcoming events,
182+ and community spotlights.
183+ </p>
150184 </div>
151− <form
152− action="https://urbit.us11.list-manage.com/subscribe/post?u=972a03db9e0c6c25bb58de8c8&amp;id=be143888d2"
153− method="post" id="mc-embedded-subscribe-form"
154− name="mc-embedded-subscribe-form"
155− className="validate form max-w-screen-sm"
156− target="_blank"
157− novalidate>
158− <div className="input-group" id="mc_embed_signup_scroll">
159− <div className="mc-field-group w-full relative">
160− <input
161− className="text-gray type-ui black border-green border-4 px-3 w-full mb-2 h-16 rounded-xl"
162− type="email"
163− name="EMAIL"
164− id="mce-EMAIL"
165− placeholder="your@email.com" />
166− <div className="flex h-16 items-center justify-center absolute top-0 right-6">
167− <button
168− id="mc-embedded-subscribe"
169− className="type-ui text-gray bg-transparent"
170− type="submit"
171− name="subscribe">
172− {/* onClick={() => _paq.push(['trackEvent', 'Mailing List', 'Subscribe'])}> */}
173− Sign Up
174− </button>
175− </div>
176− </div>
177− </div>
178− </form>
179− <h3 className="mt-8">Follow us on <a className="text-green" href={contact.twitter}>Twitter</a></h3>
180− <h3 className="mt-8">Explore code on <a className="text-green" href={contact.github}>Github</a></h3>
181− <h3 className="mt-8">Ask questions in our <a className="text-green" href={contact.discord}>Discord</a></h3>
182− <h3 className="mt-8">Boot Urbit and join <code className="bg-wall p-2 rounded-lg">{contact.urbitCommunity}</code></h3>
185+ <NewsletterSignup />
186+ <h4 className="mt-12">
187+ Follow us on{" "}
188+ <a className="text-green" href={contact.twitter}>
189+ Twitter
190+ </a>
191+ </h4>
192+ <h4 className="mt-6">
193+ Explore code on{" "}
194+ <a className="text-green" href={contact.github}>
195+ Github
196+ </a>
197+ </h4>
198+ <h4 className="mt-6">
199+ Ask questions in our{" "}
200+ <a className="text-green" href={contact.discord}>
201+ Discord
202+ </a>
203+ </h4>
204+ <h4 className="mt-6">
205+ Boot Urbit and join{" "}
206+ <code className="bg-wall p-2 rounded-lg">
207+ {contact.urbitCommunity}
208+ </code>
209+ </h4>
183210 </section>
184−
185211 </SingleColumn>
186−
187− <Footer/>
188−
212+
213+ <Footer />
189214 </Container>
190− )
215+ );
191216}
192217
193218export async function getStaticProps() {
194− const posts = getAllPosts([
195− 'title',
196− 'slug',
197− 'date',
198− 'description',
199− 'extra',
200− ], 'blog')
201−
202− const events = getAllPosts([
203− 'title',
204− 'slug',
205− 'date',
206− 'extra',
207− ], 'events')
219+ const posts = getAllPosts(
220+ ["title", "slug", "date", "description", "extra"],
221+ "blog"
222+ );
223+
224+ const events = getAllPosts(["title", "slug", "date", "extra"], "events");
208225
209226 return {
210227 props: { posts, events },
211− }
228+ };
212229}