01059c0 · urbit.org · git.iko.soy

git.iko.soy/urbit.org

Merge pull request #738 from urbit/ga/event

Events Improvements

commit01059c059bcb9d0750b5191a07cce7fcff6ae51f authorGavin <5265021+g-a-v-i-n@users.noreply.github.com> dateWed 28 Jul 2021, 14:26 (5 years ago) parentb6b0712 f3f7df4

6 files changed+79−87

compare with master

unifiedsplit

components/Contact.js+3−3 components/EventPreview.js+11−1 components/Header.js+3−2 pages/events/[slug].js+14−2 pages/index.js+47−78 styles/globals.css+1−1

components/Contact.js+3−3

@@ -18,7 +18,7 @@ export default function Contact({ emphasize }) {

1818 fillRule="evenodd"

1919 clipRule="evenodd"

2020 d="M3.2 1.6C3.2 0.716344 3.91634 0 4.8 0H11.3615L14.9333 2.38124V12.2667C14.9333 13.1503 14.217 13.8667 13.3333 13.8667H12.8V14.4C12.8 15.2837 12.0837 16 11.2 16H2.66667C1.78301 16 1.06667 15.2837 1.06667 14.4V3.73333C1.06667 2.84968 1.78301 2.13333 2.66667 2.13333H3.2V1.6ZM3.2 3.2H2.66667C2.37211 3.2 2.13333 3.43878 2.13333 3.73333V14.4C2.13333 14.6946 2.37211 14.9333 2.66667 14.9333H11.2C11.4946 14.9333 11.7333 14.6946 11.7333 14.4V13.8667H4.8C3.91634 13.8667 3.2 13.1503 3.2 12.2667V3.2Z"

21− fill="#32302D"

21+ fill="#666666"

2222 />

2323 </svg>

2424 ) : copyStatus === "copied" ? (

@@ -33,7 +33,7 @@ export default function Contact({ emphasize }) {

3333 fillRule="evenodd"

3434 clipRule="evenodd"

3535 d="M0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8ZM7.54325 11.4247L12.1498 5.66647L11.3169 5.00013L7.39013 9.90859L4.60812 7.59025L3.92526 8.40969L7.54325 11.4247Z"

36− fill="#32302D"

36+ fill="#666666"

3737 />

3838 </svg>

3939 ) : (

@@ -48,7 +48,7 @@ export default function Contact({ emphasize }) {

4848 fillRule="evenodd"

4949 clipRule="evenodd"

5050 d="M0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8ZM10.8229 11.5772L8.00004 8.75429L5.17716 11.5772L4.42292 10.8229L7.24579 8.00004L4.42292 5.17716L5.17716 4.42292L8.00004 7.24579L10.8229 4.42292L11.5772 5.17716L8.75429 8.00004L11.5772 10.8229L10.8229 11.5772Z"

51− fill="#32302D"

51+ fill="#666666"

5252 />

5353 </svg>

5454 );

components/EventPreview.js+11−1

@@ -1,6 +1,6 @@

11import Link from "next/link";

3−export default function EventPreview({ event, className, title }) {

3+export default function EventPreview({ event, className, title, rsvp }) {

44 // Event tiles have a 'dark mode' used when their background images are dark and white text is needed for legibility.

55 const grayText = event.extra?.dark ? "text-midWhite" : "text-gray";

66 const blackText = event.extra?.dark ? "text-white" : "text-black";

@@ -25,6 +25,16 @@ export default function EventPreview({ event, className, title }) {

2525 {event.extra.guests}

2626 </p>

2727 </div>

28+ {rsvp && event.extra.registration_url && event.extra.pinned ? (

29+ <div className="absolute right-0 bottom-0 p-4">

30+ <a

31+ className="button-sm bg-green text-white"

32+ href={event.extra.registration_url}

33+ >

34+ RSVP

35+ </a>

36+ </div>

37+ ) : null}

2838 </div>

2939 </Link>

3040 </div>

components/Header.js+3−2

@@ -82,9 +82,10 @@ export default function Header(props) {

8282 e.stopPropagation();

8383 props.search.toggleSearch(e);

8484 }}

85− className="button-sm bg-wall text-gray"

85+ className="bg-wall text-gray flex px-4 py-1 rounded-lg type-ui"

8686 >

87− Search<div className="ml-4 text-lightGray">⌘K</div>

87+ <div>Search</div>

88+ <div className="ml-4 text-lightGray">⌘K</div>

8889 </button>

8990 </nav>

9091

pages/events/[slug].js+14−2

@@ -36,6 +36,7 @@ export default function Event({

3636 <Header search={search} />

3737 <Section narrow short>

3838 <h1>{post.title}</h1>

39+

3940 {post.extra.author ? (

4041 <div className="type-ui text-gray mt-4 md:mt-8 lg:mt-10">

4142 {post.extra.author}

@@ -44,8 +45,19 @@ export default function Event({

4445 {post.extra.ship ? (

4546 <div className="type-ui text-gray font-mono">{post.extra.ship}</div>

4647 ) : null}

47− <div className="type-ui text-gray mt-16">

48− {formatDate(new Date(post.date))}

48+

49+ <div className="mt-16">

50+ <p className="type-ui text-gray">

51+ {formatDate(new Date(post.date))} {", " + post.extra.time}

52+ </p>

53+ {post.extra.registration_url && post.extra.pinned ? (

54+ <a

55+ className="button-sm bg-green text-white flex-0 mt-4"

56+ href={post.extra.registration_url}

57+ >

58+ RSVP

59+ </a>

60+ ) : null}

4961 </div>

5062 </Section>

5163 <Section short wide>

pages/index.js+47−78

@@ -1,5 +1,4 @@

11import Head from "next/head";

2−import Meta from "../components/Meta";

32import Link from "next/link";

43import React, { useState, useEffect } from "react";

54import Container from "../components/Container";

@@ -52,7 +51,6 @@ export default function Home({ posts, events, openGrantsCount, search }) {

5251 <Container>

5352 <Head>

5453 <title>urbit.org</title>

55− {Meta()}

5654 </Head>

5755 <SingleColumn>

5856 <Header search={search} />

@@ -185,88 +183,59 @@ export default function Home({ posts, events, openGrantsCount, search }) {

185183 </Section>

186184

187185 {

188− // Blog and Events Combo Section

186+ // Blog Posts

189187 }

190188 <Section narrow>

191189 <div className="flex items-center measure pb-12">

192− <button

193− onClick={() => setTab(0)}

194− className={`tab-button-lg mr-6 ${

195− tab === 0 ? "text-black" : "text-gray"

196− }`}

197− >

198− Blog

199− </button>

200− <button

201− onClick={() => setTab(1)}

202− className={`tab-button-lg ${

203− tab === 1 ? "text-black" : "text-gray"

204− }`}

205− >

206− Events

190+ <h2>Blog</h2>

191+ </div>

192+

193+ <div className="flex flex-wrap">

194+ <PostPreview

195+ post={posts[0]}

196+ className={`w-full md:w-1/2 pr-0 pb-8 md:pr-4`}

197+ key={posts[0].slug}

198+ />

199+ <PostPreview

200+ post={posts[1]}

201+ className={`w-full md:w-1/2 pl-0 pb-8 md:pl-4`}

202+ key={posts[1].slug}

203+ />

204+ </div>

205+ <Link href="/blog">

206+ <button className="button-lg type-ui text-white bg-green">

207+ See More

207208 </button>

209+ </Link>

210+ </Section>

211+

212+ {

213+ // Events Posts

214+ }

215+ <Section narrow>

216+ <div className="flex items-center measure pb-12">

217+ <h2>Events</h2>

208218 </div>

209219

210− <TabCarousel index={tab}>

211− <div className="flex flex-wrap">

212− <PostPreview

213− post={posts[0]}

214− className={`w-full md:w-1/2 pr-0 pb-8 md:pr-4`}

215− key={posts[0].slug}

216− />

217− <PostPreview

218− post={posts[1]}

219− className={`w-full md:w-1/2 pl-0 pb-8 md:pl-4`}

220− key={posts[1].slug}

221− />

222− <PostPreview

223− post={posts[2]}

224− className={`w-full md:w-1/2 pr-0 pb-8 md:pr-4`}

225− key={posts[2].slug}

226− />

227− <PostPreview

228− post={posts[3]}

229− className={`w-full md:w-1/2 pl-0 pb-8 md:pl-4`}

230− key={posts[3].slug}

231− />

232− <div>

233− <Link href="/blog">

234− <button className="button-lg type-ui text-white bg-ultraDeepWall">

235− Read More

236− </button>

237− </Link>

238− </div>

239− </div>

240− <div className="flex flex-wrap">

241− <EventPreview

242− event={events[0]}

243− className={`w-full md:w-1/2 pr-0 pb-8 md:pr-4`}

244− key={events[0].slug}

245− />

246− <EventPreview

247− event={events[1]}

248− className={`w-full md:w-1/2 pl-0 pb-8 md:pl-4`}

249− key={events[1].slug}

250− />

251− <EventPreview

252− event={events[2]}

253− className={`w-full md:w-1/2 pr-0 pb-8 md:pr-4`}

254− key={events[2].slug}

255− />

256− <EventPreview

257− event={events[3]}

258− className={`w-full md:w-1/2 pl-0 pb-8 md:pl-4`}

259− key={events[3].slug}

260− />

261− <div>

262− <Link href="/events">

263− <button className="button-lg type-ui text-white bg-ultraDeepWall">

264− More Events

265− </button>

266− </Link>

267− </div>

268− </div>

269− </TabCarousel>

220+ <div className="flex flex-wrap">

221+ <EventPreview

222+ rsvp

223+ event={events[0]}

224+ className={`w-full md:w-1/2 pr-0 pb-8 md:pr-4`}

225+ key={events[0].slug}

226+ />

227+ <EventPreview

228+ rsvp

229+ event={events[1]}

230+ className={`w-full md:w-1/2 pl-0 pb-8 md:pl-4`}

231+ key={events[1].slug}

232+ />

233+ </div>

234+ <Link href="/docs">

235+ <button className="button-lg type-ui text-white bg-ultraDeepWall">

236+ More Events

237+ </button>

238+ </Link>

270239 </Section>

271240

272241 {

styles/globals.css+1−1

@@ -72,7 +72,7 @@ button {

7272}

7373

7474.button-sm {

75− @apply flex px-4 py-1 rounded-lg type-ui;

75+ @apply table px-4 py-1 rounded-lg type-ui;

7676}

7777

7878.button-lg {