git.iko.soy/urbit.org
on master help sign in
adds events page
705352bGavin Atkinson
pages/blog.js+57−49
compare with master
unifiedsplit
@@ -1,16 +1,14 @@
1−import Head from 'next/head'
1+import Head from "next/head";
2−import Link from 'next/link'
2+import Link from "next/link";
3−import { useState } from 'react';
3+import { useState } from "react";
4−import Container from '../components/Container'
4+import Container from "../components/Container";
5−import Footer from '../components/Footer'
5+import Footer from "../components/Footer";
6−import Header from '../components/Header'
6+import Header from "../components/Header";
7−import SingleColumn from '../components/SingleColumn'
7+import SingleColumn from "../components/SingleColumn";
8−import BackgroundImage from '../components/BackgroundImage'
8+import BackgroundImage from "../components/BackgroundImage";
9−import { getAllPosts, formatDate } from '../lib/lib'
9+import { getAllPosts, formatDate } from "../lib/lib";
10
10
11−
12−export default function BlogPost({ posts }) {
11+export default function Blog({ posts }) {
13−
14 return (
12 return (
15 <Container>
13 <Container>
16 <SingleColumn>
14 <SingleColumn>
@@ -18,61 +16,71 @@ export default function BlogPost({ posts }) {
18 <section className="layout-wide pt-48">
16 <section className="layout-wide pt-48">
19 <div className="measure">
17 <div className="measure">
20 <h2 className="pb-16">Urbit Blog</h2>
18 <h2 className="pb-16">Urbit Blog</h2>
19+ <p className="pb-6">
21− <p className="pb-6">Stories from the broader Urbit community, the Urbit Foundation, and the many people contributing to Urbit.</p>
20+ Stories from the broader Urbit community, the Urbit Foundation,
21+ and the many people contributing to Urbit.
22+ </p>
23+ <p>
22− <p>Subscribe to the Urbit Newsletter for regular updates, including new blog posts and events.</p>
24+ Subscribe to the Urbit Newsletter for regular updates, including
25+ new blog posts and events.
26+ </p>
23 </div>
27 </div>
24 </section>
28 </section>
25 <section className="layout-wide pt-24">
29 <section className="layout-wide pt-24">
26− {
27− posts.map((post) => {
30+ {posts.map((post) => {
28− return (
31+ return (
32+ <div key={post.slug} className="mb-24 cursor-pointer">
29 <Link href={`/blog/${post.slug}`}>
33 <Link href={`/blog/${post.slug}`}>
30− <div key={post.slug} className='pb-24 cursor-pointer'>
34+ <div>
31 {
35 {
32 // Not all blog posts have images
36 // Not all blog posts have images
33− post.extra.image
37+ post.extra.image ? (
38+ <BackgroundImage
39+ src={post.extra.image}
40+ style={{ height: "720px" }}
34− ? <BackgroundImage src={post.extra.image} style={{ height:"720px" }} className="w-full rounded-lg" />
41+ className="w-full rounded-lg"
42+ />
35− : null
43+ ) : null
36 }
44 }
37− <h2 className='mt-4'>{post.title}</h2>
45+ <h2 className="mt-4">{post.title}</h2>
38 <div className="flex items-baseline">
46 <div className="flex items-baseline">
39− {
47+ {post.extra.author ? (
40− post.extra.author ? <div className='type-ui text-gray mt-4'>{post.extra.author}</div> : null
48+ <div className="type-ui text-gray mt-4">
41− }
49+ {post.extra.author}
42− {
50+ </div>
51+ ) : null}
43− post.extra.author && post.extra.ship ? <div className="mx-1 text-gray">•</div> : null
52+ {post.extra.author && post.extra.ship ? (
44− }
53+ <div className="mx-1 text-gray">•</div>
45− {
54+ ) : null}
55+ {post.extra.ship ? (
46− post.extra.ship ? <div className='type-ui text-gray font-mono'>{post.extra.ship}</div> : null
56+ <div className="type-ui text-gray font-mono">
47− }
57+ {post.extra.ship}
58+ </div>
59+ ) : null}
60+ </div>
61+
62+ <div className="type-ui text-gray mt-2">
63+ {formatDate(new Date(post.date))}
48 </div>
64 </div>
49−
50− <div className='type-ui text-gray mt-2'>{formatDate(new Date(post.date))}</div>
51 </div>
65 </div>
52 </Link>
66 </Link>
53− )
67+ </div>
54− })
68+ );
55− }
69+ })}
56 </section>
70 </section>
57−
58 </SingleColumn>
71 </SingleColumn>
59− <Footer/>
72+ <Footer />
60 </Container>
73 </Container>
61− )
74+ );
62}
75}
63
76
64export async function getStaticProps() {
77export async function getStaticProps() {
65− const posts = getAllPosts([
78+ const posts = getAllPosts(
66− 'title',
67− 'slug',
68− 'date',
69− 'description',
79+ ["title", "slug", "date", "description", "extra"],
70− 'extra',
71− ], 'blog')
80+ "blog"
81+ );
72
82
73 return {
83 return {
74 props: { posts },
84 props: { posts },
75− }
85+ };
76}
86}
77−
78−
pages/docs.js+1−1
@@ -7,7 +7,7 @@ import Header from "../components/Header";
7import SingleColumn from "../components/SingleColumn";
7import SingleColumn from "../components/SingleColumn";
8import BackgroundImage from "../components/BackgroundImage";
8import BackgroundImage from "../components/BackgroundImage";
9import Lorem from "../components/Lorem";
9import Lorem from "../components/Lorem";
10−import { getAllPosts, formatDate } from "../lib/lib";
10+import { getDocs, formatDate } from "../lib/lib";
11
11
12function Sidebar(props) {
12function Sidebar(props) {
13 return (
13 return (
pages/events.jsnew file+110
@@ -0,0 +1,110 @@
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 Footer from "../components/Footer";
6+import Header from "../components/Header";
7+import SingleColumn from "../components/SingleColumn";
8+import BackgroundImage from "../components/BackgroundImage";
9+import { getAllPosts, formatDate } from "../lib/lib";
10+
11+function EventCard(props) {
12+ return (
13+ <div key={props.event.slug} className="mb-24 cursor-pointer">
14+ <Link href={`/events/${props.event.slug}`}>
15+ <div>
16+ {
17+ // Not all event posts have images
18+ props.event.extra.image ? (
19+ <BackgroundImage
20+ src={props.event.extra.image}
21+ style={{ height: "720px" }}
22+ className="w-full rounded-lg"
23+ />
24+ ) : (
25+ <div
26+ className="w-full rounded-lg bg-wall"
27+ style={{ height: "720px" }}
28+ ></div>
29+ )
30+ }
31+ <h2 className="mt-4">{props.event.title}</h2>
32+ <div className="flex items-baseline">
33+ {props.event.extra.author ? (
34+ <div className="type-ui text-gray mt-4">
35+ {props.event.extra.author}
36+ </div>
37+ ) : null}
38+ {props.event.extra.author && post.extra.ship ? (
39+ <div className="mx-1 text-gray">•</div>
40+ ) : null}
41+ {props.event.extra.ship ? (
42+ <div className="type-ui text-gray font-mono">
43+ {props.event.extra.ship}
44+ </div>
45+ ) : null}
46+ </div>
47+
48+ <div className="type-ui text-gray mt-2">
49+ {formatDate(new Date(props.event.date))}
50+ </div>
51+ </div>
52+ </Link>
53+ </div>
54+ );
55+}
56+
57+export default function Events({ pastEvents, currentEvents }) {
58+ return (
59+ <Container>
60+ <SingleColumn>
61+ <Header />
62+ <section className="layout-wide pt-48">
63+ <div className="measure">
64+ <h2 className="pb-16">Urbit Events</h2>
65+ <p className="pb-6">
66+ Events of all kinds: In-person, Remote, and Recorded.
67+ </p>
68+ <p>
69+ Subscribe to the Urbit Newsletter for regular updates, including
70+ new blog posts and events.
71+ </p>
72+ </div>
73+ </section>
74+ <section className="layout-wide pt-24">
75+ <div className="mb-8 table">
76+ <span className="bg-green text-white badge-lg">Coming Soon</span>
77+ </div>
78+ {currentEvents.map((post) => {
79+ return <EventCard event={post} />;
80+ })}
81+ </section>
82+
83+ <section className="layout-wide pt-24">
84+ <div className="mb-8 table">
85+ <span className="bg-wall text-gray badge-lg">Past Events</span>
86+ </div>
87+ {pastEvents.map((post) => {
88+ return <EventCard event={post} />;
89+ })}
90+ </section>
91+ </SingleColumn>
92+ <Footer />
93+ </Container>
94+ );
95+}
96+
97+export async function getStaticProps() {
98+ const posts = getAllPosts(
99+ ["title", "slug", "date", "description", "extra"],
100+ "events"
101+ );
102+
103+ // NB Gavin: This logic can change based on how we want to separate past vs current events
104+ const pastEvents = posts.filter((post) => !post.extra.pinned);
105+ const currentEvents = posts.filter((post) => post.extra.pinned);
106+
107+ return {
108+ props: { pastEvents, currentEvents },
109+ };
110+}
pages/events/[slug].jsnew file+146
@@ -0,0 +1,146 @@
1+import { useRouter } from "next/router";
2+import {
3+ getPostBySlug,
4+ getAllPosts,
5+ getNextPost,
6+ getPreviousPost,
7+ formatDate,
8+} from "../../lib/lib";
9+import Head from "next/head";
10+import Link from "next/link";
11+import ErrorPage from "../404";
12+import Container from "../../components/Container";
13+import Markdown from "../../components/Markdown";
14+import Header from "../../components/Header";
15+import Footer from "../../components/Footer";
16+import BackgroundImage from "../../components/BackgroundImage";
17+import SingleColumn from "../../components/SingleColumn";
18+import NewsletterSignup from "../../components/NewletterSignup";
19+import PostPreview from "../../components/PostPreview";
20+import { name, contact } from "../../lib/constants";
21+
22+export default function Event({ post, nextPost, previousPost }) {
23+ const router = useRouter();
24+ if (!router.isFallback && !post?.slug) {
25+ return <ErrorPage />;
26+ }
27+
28+ return (
29+ <Container>
30+ <SingleColumn>
31+ <Header />
32+ <section className="flex flex-col layout-wide pt-24">
33+ <h1>{post.title}</h1>
34+ {post.extra.author ? (
35+ <div className="type-ui text-gray mt-4">{post.extra.author}</div>
36+ ) : null}
37+ {post.extra.ship ? (
38+ <div className="type-ui text-gray font-mono">{post.extra.ship}</div>
39+ ) : null}
40+ <div className="type-ui text-gray mt-16">
41+ {formatDate(new Date(post.date))}
42+ </div>
43+ </section>
44+ <article className="flex justify-center pt-12">
45+ <Markdown post={post} />
46+ </article>
47+ <section className="layout-narrow pt-24">
48+ <div className="measure">
49+ <h4 className="pb-6">
50+ If you’d like to follow our progress, we send monthly updates via
51+ email:
52+ </h4>
53+ </div>
54+ <NewsletterSignup color="black" />
55+ <h4 className="mt-12 text-gray">
56+ Follow us on{" "}
57+ <a className="text-black" href={contact.twitter}>
58+ Twitter
59+ </a>
60+ </h4>
61+ <h4 className="mt-6 text-gray">
62+ Explore code on{" "}
63+ <a className="text-black" href={contact.github}>
64+ Github
65+ </a>
66+ </h4>
67+ <h4 className="mt-6 text-gray">
68+ Ask questions in our{" "}
69+ <a className="text-black" href={contact.discord}>
70+ Discord
71+ </a>
72+ </h4>
73+ <h4 className="mt-6 text-gray">
74+ Boot Urbit and join{" "}
75+ <code className="bg-wall p-2 rounded-lg">
76+ {contact.urbitCommunity}
77+ </code>
78+ </h4>
79+ </section>
80+ <section className="layout-wide pt-24 flex">
81+ {previousPost === null ? (
82+ <div className={"w-1/2 mr-4"} />
83+ ) : (
84+ <PostPreview
85+ title="Previous Post"
86+ post={previousPost}
87+ className="mr-4 w-1/2"
88+ />
89+ )}
90+ {nextPost === null ? (
91+ <div className={"w-1/2 ml-4"} />
92+ ) : (
93+ <PostPreview
94+ title="Next Post"
95+ post={nextPost}
96+ className="ml-4 w-1/2"
97+ />
98+ )}
99+ </section>
100+ </SingleColumn>
101+ <Footer />
102+ </Container>
103+ );
104+}
105+
106+//
107+export async function getStaticProps({ params }) {
108+ const nextPost =
109+ getNextPost(
110+ params.slug,
111+ ["title", "slug", "date", "description", "extra"],
112+ "blog"
113+ ) || null;
114+
115+ const previousPost =
116+ getPreviousPost(
117+ params.slug,
118+ ["title", "slug", "date", "description", "extra"],
119+ "blog"
120+ ) || null;
121+
122+ const post = getPostBySlug(
123+ params.slug,
124+ ["title", "slug", "date", "description", "content", "extra"],
125+ "blog"
126+ );
127+
128+ return {
129+ props: { post, nextPost, previousPost },
130+ };
131+}
132+
133+export async function getStaticPaths() {
134+ const posts = getAllPosts(["slug", "date"], "blog");
135+
136+ return {
137+ paths: posts.map((post) => {
138+ return {
139+ params: {
140+ slug: post.slug,
141+ },
142+ };
143+ }),
144+ fallback: false,
145+ };
146+}
pages/index.js+1−3
@@ -50,9 +50,7 @@ export default function Home({ posts, events }) {
50 <section className="layout-narrow pt-48">
50 <section className="layout-narrow pt-48">
51 <div className="flex items-center measure pb-12">
51 <div className="flex items-center measure pb-12">
52 <h2 className="m-0 p-0 mr-4">Urbit Grants</h2>
52 <h2 className="m-0 p-0 mr-4">Urbit Grants</h2>
53− <button className="flex bg-green text-white type-ui px-4 items-center justify-center h-12 rounded-full">
53+ <button className="bg-green text-white badge-lg">32 Open</button>
54− 32 Open
55− </button>
56 </div>
54 </div>
57 <div className="flex w-full items-center bg-washedGreen px-8 py-8 rounded-xl">
55 <div className="flex w-full items-center bg-washedGreen px-8 py-8 rounded-xl">
58 <div className="flex items-center flex-col p-4 w-full">
56 <div className="flex items-center flex-col p-4 w-full">
styles/globals.css+8−2
@@ -67,14 +67,20 @@ code .type-code {
67 @apply bg-wall p-4 font-mono;
67 @apply bg-wall p-4 font-mono;
68}
68}
69
69
70+button {
71+ border: none;
72+}
73+
70.button-sm {
74.button-sm {
71 @apply flex px-4 py-1 rounded type-ui;
75 @apply flex px-4 py-1 rounded type-ui;
72− border: none;
73}
76}
74
77
75.button-lg {
78.button-lg {
76 @apply flex px-6 py-2 rounded-lg h-16 flex-center type-ui;
79 @apply flex px-6 py-2 rounded-lg h-16 flex-center type-ui;
77− border: none;
80+}
81+
82+.badge-lg {
83+ @apply flex type-ui px-4 items-center justify-center h-12 rounded-full;
78}
84}
79
85
80.tab-button-lg {
86.tab-button-lg {