34cc119 · urbit.org · git.iko.soy

components/Header.js+5−10

compare with master

unifiedsplit

@@ -21,20 +21,15 @@ function ActiveLink({ children, href, className }) {

21 }

22

23export default function Header() {

24− const router = useRouter()

25−

26 return (

24 return (

27 <header className="layout-wide flex justify-between items-center pt-8">

25 <header className="layout-wide flex justify-between items-center pt-8">

28 <Link href="/"><a className="type-ui">Urbit</a></Link>

26 <Link href="/"><a className="type-ui">Urbit</a></Link>

29 <nav className="flex items-center">

27 <nav className="flex items-center">

30− <ActiveLink className="mr-4 type-ui" href="/docs">Docs</ActiveLink>

28+ <ActiveLink className="mr-5 type-ui" href="/docs">Docs</ActiveLink>

31− <ActiveLink className="mr-4 type-ui" href="/blog">Blog</ActiveLink>

29+ <ActiveLink className="mr-5 type-ui" href="/blog">Blog</ActiveLink>

32− <ActiveLink className="mr-4 type-ui" href="/events">Events</ActiveLink>

30+ <ActiveLink className="mr-5 type-ui" href="/events">Events</ActiveLink>

33− {

34− router.asPath === '/'

35− ? <button className="button-sm bg-green">Download Port</button>

31+ <button className="mr-5 text-green type-ui">Download Port</button>

36− : <button className="button-sm bg-wall text-gray">Search Urbit.org<div className="ml-4 text-lightGray">⌘K</div></button>

32+ <button className="button-sm bg-wall text-gray">Search Urbit.org<div className="ml-4 text-lightGray">⌘K</div></button>

37− }

38 </nav>

33 </nav>

39 </header>

34 </header>

40 )

35 )

lib/lib.js+2−2

@@ -76,7 +76,7 @@ export function getNextPost(slug, fields = [], key) {

76 getAllPosts(fields, key)

77 .forEach((post, index, array) => {

78 if (post.slug === slug) {

79− resultPost = array[index + 1]

79+ resultPost = array[index - 1]

80 }

81 })

82 return resultPost

@@ -88,7 +88,7 @@ export function getPreviousPost(slug, fields = [], key) {

88 getAllPosts(fields, key)

89 .forEach((post, index, array) => {

90 if (post.slug === slug) {

91− resultPost = array[index - 1]

91+ resultPost = array[index + 1]

92 }

93 })

94 return resultPost

pages/blog.js+15−4

@@ -17,7 +17,7 @@ export default function BlogPost({ posts }) {

17 <Header />

18 <section className="layout-wide pt-48">

19 <div className="measure">

20− <h2 className="pb-12">Urbit Blog</h2>

20+ <h2 className="pb-16">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>

@@ -34,9 +34,20 @@ export default function BlogPost({ posts }) {

34 ? <BackgroundImage src={post.extra.image} style={{ height:"720px" }} className="w-full rounded-lg" />

35 : null

36 }

37− <h3 className='mt-4'>{post.title}</h3>

37+ <h2 className='mt-4'>{post.title}</h2>

38+ <div className="flex items-baseline">

39+ {

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

40+ post.extra.author ? <div className='type-ui text-gray mt-4'>{post.extra.author}</div> : null

41+ }

42+ {

43+ post.extra.author && post.extra.ship ? <div className="mx-1 text-gray">•</div> : null

44+ }

45+ {

46+ post.extra.ship ? <div className='type-ui text-gray font-mono'>{post.extra.ship}</div> : null

47+ }

48+ </div>

49+

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

50+ <div className='type-ui text-gray mt-2'>{formatDate(new Date(post.date))}</div>

40 </div>

51 </div>

41 </Link>

52 </Link>

42 )

53 )

pages/blog/[slug].js+47−9

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

1import { useRouter } from 'next/router'

2−import { getPostBySlug, getAllPosts, getNextPost, getPreviousPost } from '../../lib/lib'

2+import { getPostBySlug, getAllPosts, getNextPost, getPreviousPost, formatDate } from '../../lib/lib'

3import Head from 'next/head'

4import Link from 'next/link'

5import ErrorPage from '../404'

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

7import Markdown from '../../components/Markdown'

8import Header from '../../components/Header'

9import Footer from '../../components/Footer'

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

10import SingleColumn from '../../components/SingleColumn'

11import SingleColumn from '../../components/SingleColumn'

11

12

12import {

13import {

@@ -23,15 +24,52 @@ export default function Post({ post, nextPost, previousPost }) {

23 <Container>

24 <Container>

24 <SingleColumn>

25 <SingleColumn>

25 <Header />

26 <Header />

26− <section className="flex flex-col layout-wide pt-48">

27+ <section className="flex flex-col layout-wide pt-24">

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

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

29+

30+ {

31+ post.extra.author ? <div className='type-ui text-gray mt-4'>{post.extra.author}</div> : null

32+ }

33+ {

34+ post.extra.ship ? <div className='type-ui text-gray font-mono'>{post.extra.ship}</div> : null

35+ }

36+

37+ <div className='type-ui text-gray mt-16'>{formatDate(new Date(post.date))}</div>

38+

28 </section>

39 </section>

29− <article className="flex items-center pt-48">

40+ <article className="flex justify-center pt-12">

30− <Markdown post={post} />

41+ <Markdown post={post} />

31 </article>

42 </article>

32− <section className="layout-narrow pt-48">

43+ <section className="layout-wide pt-24 flex">

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

44+

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

45+ {

46+ previousPost === null

47+ ? <div className={`w-1/2 mr-4`} />

48+ : <div className={`cursor-pointer w-1/2 mr-4`} key={previousPost.slug}>

49+ <Link href={'/blog/' + previousPost.slug} key={`post-${previousPost.slug}`}>

50+ <div>

51+ <h3>Previous Post</h3>

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

53+ <p className='text-black mt-2'>{previousPost.title || ''}</p>

54+ <p className='text-gray'>{formatDate(new Date(previousPost.date))}</p>

55+ </div>

56+ </Link>

57+ </div>

58+ }

59+ {

60+ nextPost === null

61+ ? <div className={`w-1/2 ml-4`} />

62+ : <div className={`cursor-pointer w-1/2 ml-4`}>

63+ <Link href={'/blog/' + nextPost.slug} key={`post-${nextPost.slug}`}>

64+ <div>

65+ <h3>Next Post</h3>

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

67+ <p className='text-black mt-2'>{nextPost.title || ''}</p>

68+ <p className='text-gray'>{formatDate(new Date(nextPost.date))}</p>

69+ </div>

70+ </Link>

71+ </div>

72+ }

35 </section>

73 </section>

36 </SingleColumn>

74 </SingleColumn>

37 <Footer />

75 <Footer />

@@ -48,7 +86,7 @@ export async function getStaticProps({ params }) {

48 'date',

86 'date',

49 'description',

87 'description',

50 'extra',

88 'extra',

51− ], 'blog')

89+ ], 'blog') || null

52

90

53 const previousPost = getPreviousPost(params.slug, [

91 const previousPost = getPreviousPost(params.slug, [

54 'title',

92 'title',

@@ -56,7 +94,7 @@ export async function getStaticProps({ params }) {

56 'date',

94 'date',

57 'description',

95 'description',

58 'extra',

96 'extra',

59− ], 'blog')

97+ ], 'blog') || null

60

98

61 const post = getPostBySlug(params.slug, [

99 const post = getPostBySlug(params.slug, [

62 'title',

100 'title',

pages/index.js+3−4

@@ -33,7 +33,7 @@ export default function Home({ posts, events }) {

33 </div>

34 <h3 className="pb-8">The Urbit client, now in beta.</h3>

35 <p className="pb-24">Getting into Urbit is now as simple as installing an app on your computer.</p>

36− <button className="button-lg type-ui mb-5 bg-green">Download For Mac</button>

36+ <button className="button-lg type-ui mb-5 bg-green text-white">Download For Mac</button>

37 <a className="type-ui text-gray">View on GitHub</a>

38 </div>

39 <div className="bg-black w-full rounded-xl hero-image-height hero-image mt-8" />

@@ -63,7 +63,7 @@ export default function Home({ posts, events }) {

63 </div>

64 <div className='measure py-12'>

65 <p className="pb-12">We regularly give away address space to reward community contributions, including education, promotion, and development.</p>

66− <button className="button-lg bg-green">View Grants</button>

66+ <button className="button-lg bg-green text-white">View Grants</button>

67 </div>

68 </section>

69

@@ -82,7 +82,7 @@ export default function Home({ posts, events }) {

82 <p className="pb-12">

83 You can get started learning how to <Link href=''><a>contribute to the project</a></Link>, or view a variety of <Link href=''><a>libraries</a></Link> for building on Urbit using the languages you already know.

84 </p>

85− <button className="button-lg type-ui bg-black">Read the Developer Docs</button>

85+ <button className="button-lg type-ui text-white bg-black">Read the Developer Docs</button>

86 </div>

87 </section>

88

@@ -180,7 +180,6 @@ export default function Home({ posts, events }) {

180 <h3 className="mt-8">Explore code on <a className="text-green" href={contact.github}>Github</a></h3>

181 <h3 className="mt-8">Ask questions in our <a className="text-green" href={contact.discord}>Discord</a></h3>

182 <h3 className="mt-8">Boot Urbit and join <code className="bg-wall p-2 rounded-lg">{contact.urbitCommunity}</code></h3>

183−

184 </section>

183 </section>

185

184

186 </SingleColumn>

185 </SingleColumn>

styles/globals.css+6−6

@@ -34,27 +34,27 @@ p a {

34}

35

36h1, .type-h1 {

37− @apply text-6xl leading-tight font-sans tracking-tight font-bold;

37+ @apply text-6xl leading-tight tracking-tight font-bold;

38 }

39

40h2, .type-h2 {

41− @apply text-5xl font-sans font-bold;

41+ @apply text-5xl font-bold;

42}

43

44h3, .type-h3 {

45− @apply text-2xl font-sans font-semibold;

45+ @apply text-2xl font-semibold;

46}

47

48 .type-ui {

49− @apply text-lg font-sans font-semibold;

49+ @apply text-lg font-semibold;

50 }

51

52 p, .type-p {

53− @apply text-lg font-sans;

53+ @apply text-lg;

54 }

55

56 caption, .type-caption {

57− @apply text-base font-sans font-medium block text-left;

57+ @apply text-base font-medium block text-left;

58 }

59

60 code .type-code {

styles/markdown.module.css+35−8

@@ -1,25 +1,31 @@

1.markdown {

2 /* @apply leading-relaxed; */

3− max-width: 600px;

3+ /* max-width: ; */

4+ @apply w-8/12;

4}

5}

5

6

6 .markdown p,

7 .markdown p,

7 .markdown ul,

8 .markdown ul,

8 .markdown ol,

9 .markdown ol,

9 .markdown blockquote {

10 .markdown blockquote {

10− @apply my-6;

11+ @apply my-8;

11 }

12 }

12

13

13 .markdown h1 {

14 .markdown h1 {

14− @apply font-semibold mt-12 mb-4;

15+ @apply text-5xl font-bold mt-24 mb-12;

15 }

16 }

16

17

17 .markdown h2 {

18 .markdown h2 {

18− @apply font-semibold mt-12 mb-4;

19+ @apply text-4xl font-bold mt-16 mb-12;

19 }

20 }

20

21

21 .markdown h3 {

22 .markdown h3 {

22− @apply font-semibold mt-8 mb-4;

23+ @apply text-2xl font-semibold mt-8 mb-8;

24+ }

25+

26+

27+ .markdown h4 {

28+ @apply text-xl font-semibold mt-4 mb-4;

23 }

29 }

24

30

25 .markdown p {

31 .markdown p {

@@ -36,12 +42,33 @@

36 .markdown img {

42 .markdown img {

37 width: 100%;

43 width: 100%;

38 height: auto;

44 height: auto;

39− @apply rounded-lg

45+ @apply rounded-lg;

40 }

46 }

41

47

42 .markdown figure {

48 .markdown figure {

43 position: relative;

49 position: relative;

44− width: 160%;

50+ width: 125%;

45− left: -30%;

51+ left: -12.5%;

52+ @apply mt-12 mb-12;

53+ }

54+

55+ .markdown pre {

56+ @apply p-8 bg-wall rounded-lg;

46 }

57 }

47

58

59+ .markdown code {

60+ @apply px-2 py-0.5 bg-wall rounded-lg;

61+ }

62+

63+ .markdown ul {

64+ list-style-type: disc;

65+ }

66+

67+ .markdown ol {

68+ }

69+

70+ .markdown li {

71+ font-size: 20px;

72+ @apply py-2 ml-6;

73+ }

74+