git.iko.soy/urbit.org
on master help sign in
events preview
commitf058864e23992a6d1a679ebcf56786e8287f866e authorGavin Atkinson <gvnatknsn@protonmail.com> dateThu 17 Jun 2021, 11:43 (5 years ago) parent844f55f
6 files changed+150−85
compare with master
unifiedsplit
components/BackgroundImage.js+6−3 components/Footer.js+73−54 pages/404.js+18−2 pages/events.js+31−16 pages/events/[slug].js+14−1 styles/globals.css+8−9
components/BackgroundImage.js+6−3
@@ -1,6 +1,9 @@
11// Easily crops images
22export default function BackgroundImage(props) {
33 return (
4− <div className={`bg-img ${props.className || ''}`} style={{backgroundImage: `url(${props.src})`, ...props.style}}/>
5− )
6−}
4+ <div
5+ className={`bg-img bg-cover ${props.className || ""}`}
6+ style={{ backgroundImage: `url(${props.src})`, ...props.style }}
7+ />
8+ );
9+}
components/Footer.js+73−54
@@ -1,56 +1,75 @@
1−import Link from 'next/link'
2−import SingleColumn from './SingleColumn'
3−import {contact} from '../lib/constants'
1+import Link from "next/link";
2+import SingleColumn from "./SingleColumn";
3+import { contact } from "../lib/constants";
44
55export default function Footer() {
6− return (
7− <footer className="py-24 bg-wall w-full mt-48 flex justify-center">
8− <SingleColumn>
9− <div className="flex layout-wide">
10− <div className="w-1/3 flex flex-col">
11− <h3 className='mb-4'>Use Urbit</h3>
12− <Link className="mt-4" href=""><a className="type-ui text-gray">Urbit Client</a></Link>
13− <Link className="mt-4" href=""><a className="type-ui text-gray">Urbit Binaries</a></Link>
14− <Link className="mt-4" href=""><a className="type-ui text-gray">Urbit Apps</a></Link>
15− <Link className="mt-4" href=""><a className="type-ui text-gray">Host-Providers</a></Link>
16−
17− </div>
18− <div className="w-1/3 flex flex-col">
19− <h3 className='mb-4'>About</h3>
20− <Link className="mt-4" href="/understanding-urbit"><a className="type-ui text-gray">What's Urbit?</a></Link>
21− <Link className="mt-4" href="/understanding-urbit/urbit-id"><a className="type-ui text-gray">Urbit ID</a></Link>
22− <Link className="mt-4" href="/understanding-urbit/urbit-os"><a className="type-ui text-gray">Urbit OS</a></Link>
23− <Link className="mt-4" href="/faq"><a className="type-ui text-gray">FAQ</a></Link>
24− </div>
25− <div className="w-1/3 flex flex-col">
26− <h3 className='mb-4'>News</h3>
27− </div>
28− </div>
29− <div className="flex layout-wide mt-24">
30− <div className="w-1/3 flex flex-col">
31− <h3 className='mb-4'>Develop</h3>
32−
33− </div>
34− <div className="w-1/3 flex flex-col">
35− <h3 className='mb-4'>Contribute</h3>
36− </div>
37− <div className="w-1/3 flex flex-col">
38− <h3 className='mb-4'>Community</h3>
39− </div>
40− </div>
41− <div className="flex layout-wide mt-64">
42− <div className="w-1/3">
43− <Link href=""><a className="type-ui text-gray">Privacy Policy</a></Link>
44−
45− </div>
46− <div className="w-1/3">
47− <Link href=""><a className="type-ui text-gray">Terms of Service</a></Link>
48− </div>
49− <div className="w-1/3">
50− <Link href=""><a className="type-ui text-gray">{contact.email}</a></Link>
51− </div>
52− </div>
53− </SingleColumn>
54− </footer>
55− )
56−}
6+ return (
7+ <footer className="py-32 bg-wall w-full mt-48 flex justify-center">
8+ <SingleColumn>
9+ <div className="flex layout-wide">
10+ <div className="w-1/3 flex flex-col">
11+ <h3 className="mb-12">Use Urbit</h3>
12+ <Link className="mt-4" href="">
13+ <a className="type-sub text-gray">Urbit Client</a>
14+ </Link>
15+ <Link className="mt-4" href="">
16+ <a className="type-sub text-gray">Urbit Binaries</a>
17+ </Link>
18+ <Link className="mt-4" href="">
19+ <a className="type-sub text-gray">Urbit Apps</a>
20+ </Link>
21+ <Link className="mt-4" href="">
22+ <a className="type-sub text-gray">Host-Providers</a>
23+ </Link>
24+ </div>
25+ <div className="w-1/3 flex flex-col">
26+ <h3 className="mb-12">About</h3>
27+ <Link className="mt-4" href="/understanding-urbit">
28+ <a className="type-sub text-gray">What's Urbit?</a>
29+ </Link>
30+ <Link className="mt-4" href="/understanding-urbit/urbit-id">
31+ <a className="type-sub text-gray">Urbit ID</a>
32+ </Link>
33+ <Link className="mt-4" href="/understanding-urbit/urbit-os">
34+ <a className="type-sub text-gray">Urbit OS</a>
35+ </Link>
36+ <Link className="mt-4" href="/faq">
37+ <a className="type-sub text-gray">FAQ</a>
38+ </Link>
39+ </div>
40+ <div className="w-1/3 flex flex-col">
41+ <h3 className="mb-12">News</h3>
42+ </div>
43+ </div>
44+ <div className="flex layout-wide mt-24">
45+ <div className="w-1/3 flex flex-col">
46+ <h3 className="mb-12">Develop</h3>
47+ </div>
48+ <div className="w-1/3 flex flex-col">
49+ <h3 className="mb-12">Contribute</h3>
50+ </div>
51+ <div className="w-1/3 flex flex-col">
52+ <h3 className="mb-12">Community</h3>
53+ </div>
54+ </div>
55+ <div className="flex layout-wide mt-64">
56+ <div className="w-1/3">
57+ <Link href="">
58+ <a className="type-sub text-gray">Privacy Policy</a>
59+ </Link>
60+ </div>
61+ <div className="w-1/3">
62+ <Link href="">
63+ <a className="type-sub text-gray">Terms of Service</a>
64+ </Link>
65+ </div>
66+ <div className="w-1/3">
67+ <Link href="">
68+ <a className="type-sub text-gray">{contact.email}</a>
69+ </Link>
70+ </div>
71+ </div>
72+ </SingleColumn>
73+ </footer>
74+ );
75+}
pages/404.js+18−2
@@ -1,3 +1,19 @@
1+import Container from "../components/Container";
2+import SingleColumn from "../components/SingleColumn";
3+import Header from "../components/Header";
4+import Footer from "../components/Footer";
5+
16export default function NotFound() {
2− return <div>404</div>
3−}
7+ return (
8+ <Container>
9+ <SingleColumn>
10+ <Header />
11+ <section className="layout-wide pt-48">
12+ <h1>404</h1>
13+ <p className="mt-12">It looks like nothing is here.</p>
14+ </section>
15+ </SingleColumn>
16+ <Footer />
17+ </Container>
18+ );
19+}
pages/events.js+31−16
@@ -8,26 +8,40 @@ import SingleColumn from "../components/SingleColumn";
88import BackgroundImage from "../components/BackgroundImage";
99import { getAllPosts, formatDate } from "../lib/lib";
1010
11+function assignEventCard(event) {
12+ if (event.extra.youtube) {
13+ return (
14+ <img
15+ src={`http://img.youtube.com/vi/${event.extra.youtube}/maxresdefault.jpg`}
16+ className="w-full rounded-lg h-auto w-full"
17+ />
18+ );
19+ }
20+
21+ if (event.extra.image) {
22+ return (
23+ <BackgroundImage
24+ src={event.extra.image}
25+ style={{ height: "720px" }}
26+ className="w-full rounded-lg"
27+ />
28+ );
29+ }
30+
31+ return (
32+ <div
33+ className="w-full rounded-lg bg-wall"
34+ style={{ height: "720px" }}
35+ ></div>
36+ );
37+}
38+
1139function EventCard(props) {
1240 return (
1341 <div key={props.event.slug} className="mb-24 cursor-pointer">
1442 <Link href={`/events/${props.event.slug}`}>
1543 <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− }
44+ {assignEventCard(props.event)}
3145 <h2 className="mt-4">{props.event.title}</h2>
3246 <div className="flex items-baseline">
3347 {props.event.extra.author ? (
@@ -46,7 +60,7 @@ function EventCard(props) {
4660 </div>
4761
4862 <div className="type-ui text-gray mt-2">
49− {formatDate(new Date(props.event.date))}
63+ {formatDate(new Date(props.event.date))} - {props.event.extra.time}
5064 </div>
5165 </div>
5266 </Link>
@@ -55,6 +69,7 @@ function EventCard(props) {
5569}
5670
5771export default function Events({ pastEvents, currentEvents }) {
72+ console.log(currentEvents);
5873 return (
5974 <Container>
6075 <SingleColumn>
pages/events/[slug].js+14−1
@@ -41,7 +41,20 @@ export default function Event({ post, nextPost, previousPost }) {
4141 {formatDate(new Date(post.date))}
4242 </div>
4343 </section>
44− <article className="flex justify-center pt-12">
44+ <section className="flex layout-wide pt-24">
45+ {post.extra.youtube ? (
46+ <iframe
47+ className="rounded-xl"
48+ width="100%"
49+ height="640px"
50+ src={`https://www.youtube.com/embed/${post.extra.youtube}`}
51+ frameborder="0"
52+ allow="encrypted-media"
53+ allowfullscreen
54+ ></iframe>
55+ ) : null}
56+ </section>
57+ <article className="flex flex-col items-center pt-12 w-full">
4558 <Markdown post={post} />
4659 </article>
4760 <section className="layout-narrow pt-24">
styles/globals.css+8−9
@@ -1,7 +1,3 @@
1−/* :root {
2− font-size:16px;
3−} */
4−
51@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;600;700&display=swap");
62@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500;600;700&display=swap");
73
@@ -35,22 +31,22 @@ p a {
3531
3632h1,
3733.type-h1 {
38− @apply text-6xl leading-tight tracking-tight font-bold;
34+ @apply text-6xl tracking-tight font-bold leading-tight;
3935}
4036
4137h2,
4238.type-h2 {
43− @apply text-5xl font-bold;
39+ @apply text-5xl font-bold leading-tight;
4440}
4541
4642h3,
4743.type-h3 {
48− @apply text-2xl font-semibold;
44+ @apply text-2xl font-semibold leading-normal;
4945}
5046
5147h4,
5248.type-ui {
53− @apply text-xl font-semibold;
49+ @apply text-xl font-semibold leading-normal;
5450}
5551
5652p,
@@ -58,6 +54,10 @@ p,
5854 @apply text-xl;
5955}
6056
57+.type-sub {
58+ @apply text-base font-semibold leading-normal;
59+}
60+
6161caption,
6262.type-caption {
6363 @apply text-base font-medium block text-left;
@@ -149,6 +149,5 @@ a:hover {
149149.bg-img {
150150 background: silver;
151151 background-repeat: no-repeat;
152− background-size: cover;
153152 background-position: center center;
154153}