67b2ddc · urbit.org · git.iko.soy

components/BackgroundImage.js+1−1

compare with master

unifiedsplit

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

1// Easily crops images

2export default function BackgroundImage(props) {

3 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}}/>

5 )

6}

components/Footer.js+4

@@ -17,6 +17,10 @@ export default function Footer() {

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>

20 </div>

24 </div>

21 <div className="w-1/3 flex flex-col">

25 <div className="w-1/3 flex flex-col">

22 <h3 className='mb-4'>News</h3>

26 <h3 className='mb-4'>News</h3>

pages/blog.js+23−3

@@ -5,7 +5,8 @@ import Container from '../components/Container'

5import Footer from '../components/Footer'

6import Header from '../components/Header'

7import SingleColumn from '../components/SingleColumn'

8+import BackgroundImage from '../components/BackgroundImage'

8−import { getAllPosts } from '../lib/lib'

9+import { getAllPosts, formatDate } from '../lib/lib'

9

10

11

11export default function BlogPost({ posts }) {

12export default function BlogPost({ posts }) {

@@ -14,11 +15,30 @@ export default function BlogPost({ posts }) {

14 <Container>

15 <Container>

15 <SingleColumn>

16 <SingleColumn>

16 <Header />

17 <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">

18 {

26 {

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+ })

20 }

39 }

21 </section>

40 </section>

41+

22 </SingleColumn>

42 </SingleColumn>

23 <Footer/>

43 <Footer/>

24 </Container>

44 </Container>

pages/blog/[slug].js+1−3

@@ -29,13 +29,11 @@ export default function Post({ post, nextPost, previousPost }) {

29 </article>

30 </section>

31 <section className="layout-narrow pt-48">

32−

33 <Link href={nextPost.slug}>{nextPost.title}</Link>

32 <Link href={nextPost.slug}>{nextPost.title}</Link>

34 <Link href={previousPost.slug}>{previousPost.title}</Link>

33 <Link href={previousPost.slug}>{previousPost.title}</Link>

35−

36 </section>

34 </section>

37− <Footer />

38 </SingleColumn>

35 </SingleColumn>

36+ <Footer />

39 </Container>

37 </Container>

40 )

38 )

41}

39}

pages/index.js+7−7

@@ -109,10 +109,10 @@ export default function Home({ posts, events }) {

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 src={post.extra.image || ''} />

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− <caption className='text-black mt-2'>{post.extra.author}</caption>

114+ <p className='text-black mt-2'>{post.extra.author}</p>

115− <caption className='text-gray mt-2'>{formatDate(new Date(post.date))}</caption>

115+ <p className='text-gray mt-2'>{formatDate(new Date(post.date))}</p>

116 </div>

117 </Link>

118 </div>

@@ -130,9 +130,9 @@ export default function Home({ posts, events }) {

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 src={event.extra.image || ''} />

133+ <BackgroundImage className="w-full h-80 rounded" src={event.extra.image || ''} />

134 <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>

136 </div>

137 </Link>

138 </div>

@@ -168,8 +168,8 @@ export default function Home({ posts, events }) {

168 id="mc-embedded-subscribe"

169 className="type-ui text-gray bg-transparent"

170 type="submit"

171− name="subscribe"

171+ name="subscribe">

172− onclick="_paq.push(['trackEvent', 'Mailing List', 'Subscribe'])">

172+ {/* onClick={() => _paq.push(['trackEvent', 'Mailing List', 'Subscribe'])}> */}

173 Sign Up

174 </button>

175 </div>

styles/globals.css−1

@@ -127,7 +127,6 @@ h3, .type-h3 {

127 .blog-grid-3 { grid-area: blog-grid-3; }

128

129.bg-img {

130− @apply w-full h-80 rounded;

131 background: silver;

130 background: silver;

132 background-repeat: no-repeat;

131 background-repeat: no-repeat;

133 background-size: cover;

132 background-size: cover;