git.iko.soy/urbit.org
on master help sign in
blog page
commit67b2ddc1f258ac04bff7971d4f4bd3a6d2d44fe4 authorGavin Atkinson <gvnatknsn@protonmail.com> dateMon 14 Jun 2021, 17:39 (5 years ago) parent2e66872
6 files changed+36−15
compare with master
unifiedsplit
components/BackgroundImage.js+1−1 components/Footer.js+4 pages/blog.js+23−3 pages/blog/[slug].js+1−3 pages/index.js+7−7 styles/globals.css−1
components/BackgroundImage.js+1−1
@@ -1,6 +1,6 @@
11// Easily crops images
22export default function BackgroundImage(props) {
33 return (
4− <div className={`bg-img`} style={{backgroundImage: `url(${props.src})`}}/>
4+ <div className={`bg-img ${props.className || ''}`} style={{backgroundImage: `url(${props.src})`, ...props.style}}/>
55 )
66}
components/Footer.js+4
@@ -17,6 +17,10 @@ export default function Footer() {
1717 </div>
1818 <div className="w-1/3 flex flex-col">
1919 <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>
2024 </div>
2125 <div className="w-1/3 flex flex-col">
2226 <h3 className='mb-4'>News</h3>
pages/blog.js+23−3
@@ -5,7 +5,8 @@ import Container from '../components/Container'
55import Footer from '../components/Footer'
66import Header from '../components/Header'
77import SingleColumn from '../components/SingleColumn'
8−import { getAllPosts } from '../lib/lib'
8+import BackgroundImage from '../components/BackgroundImage'
9+import { getAllPosts, formatDate } from '../lib/lib'
910
1011
1112export default function BlogPost({ posts }) {
@@ -14,11 +15,30 @@ export default function BlogPost({ posts }) {
1415 <Container>
1516 <SingleColumn>
1617 <Header />
17− <section className="layout-narrow pt-48">
18+ <section className="layout-wide pt-48">
19+ <div className="measure">
20+ <h2 className="pb-12">Urbit Blog</h2>
21+ <p className="pb-6">Stories from the broader Urbit community, the Urbit Foundation, and the many people contributing to Urbit.</p>
22+ <p>Subscribe to the Urbit Newsletter for regular updates, including new blog posts and events.</p>
23+ </div>
24+ </section>
25+ <section className="layout-wide pt-24">
1826 {
19− posts.map((post) => <div key={post.slug}>{post.title}</div>)
27+ posts.map((post) => {
28+ return (
29+ <Link href={`/blog/${post.slug}`}>
30+ <div key={post.slug} className='pb-24 cursor-pointer'>
31+ <BackgroundImage src={post.extra.image || ''} style={{ height:"720px" }} className="w-full rounded" />
32+ <h3 className='mt-4'>{post.title}</h3>
33+ <p className='text-black mt-2'>{post.extra.author}</p>
34+ <p className='text-gray mt-2'>{formatDate(new Date(post.date))}</p>
35+ </div>
36+ </Link>
37+ )
38+ })
2039 }
2140 </section>
41+
2242 </SingleColumn>
2343 <Footer/>
2444 </Container>
pages/blog/[slug].js+1−3
@@ -29,13 +29,11 @@ export default function Post({ post, nextPost, previousPost }) {
2929 </article>
3030 </section>
3131 <section className="layout-narrow pt-48">
32−
3332 <Link href={nextPost.slug}>{nextPost.title}</Link>
3433 <Link href={previousPost.slug}>{previousPost.title}</Link>
35−
3634 </section>
37− <Footer />
3835 </SingleColumn>
36+ <Footer />
3937 </Container>
4038 )
4139}
pages/index.js+7−7
@@ -109,10 +109,10 @@ export default function Home({ posts, events }) {
109109 <div className={`border-black cursor-pointer blog-grid-${i}`} key={post.slug}>
110110 <Link href={'/blog/' + post.slug} key={`post-${post.slug}`}>
111111 <div>
112− <BackgroundImage src={post.extra.image || ''} />
112+ <BackgroundImage className="w-full h-80 rounded" src={post.extra.image || ''} />
113113 <p className='text-black type-h3 mt-2'>{post.title}</p>
114− <caption className='text-black mt-2'>{post.extra.author}</caption>
115− <caption className='text-gray mt-2'>{formatDate(new Date(post.date))}</caption>
114+ <p className='text-black mt-2'>{post.extra.author}</p>
115+ <p className='text-gray mt-2'>{formatDate(new Date(post.date))}</p>
116116 </div>
117117 </Link>
118118 </div>
@@ -130,9 +130,9 @@ export default function Home({ posts, events }) {
130130 <div className={`border-black cursor-pointer blog-grid-${i}`} key={event.slug}>
131131 <Link href={'/events/' + event.slug} key={`post-${event.slug}`}>
132132 <div>
133− <BackgroundImage src={event.extra.image || ''} />
133+ <BackgroundImage className="w-full h-80 rounded" src={event.extra.image || ''} />
134134 <p className='text-black mt-2'>{event.title || ''}</p>
135− <caption className='text-gray'>{formatDate(new Date(event.date))}</caption>
135+ <p className='text-gray'>{formatDate(new Date(event.date))}</p>
136136 </div>
137137 </Link>
138138 </div>
@@ -168,8 +168,8 @@ export default function Home({ posts, events }) {
168168 id="mc-embedded-subscribe"
169169 className="type-ui text-gray bg-transparent"
170170 type="submit"
171− name="subscribe"
172− onclick="_paq.push(['trackEvent', 'Mailing List', 'Subscribe'])">
171+ name="subscribe">
172+ {/* onClick={() => _paq.push(['trackEvent', 'Mailing List', 'Subscribe'])}> */}
173173 Sign Up
174174 </button>
175175 </div>
styles/globals.css−1
@@ -127,7 +127,6 @@ h3, .type-h3 {
127127 .blog-grid-3 { grid-area: blog-grid-3; }
128128
129129.bg-img {
130− @apply w-full h-80 rounded;
131130 background: silver;
132131 background-repeat: no-repeat;
133132 background-size: cover;