git.iko.soy/urbit.org
on master help sign in
markdown styles, next/prev post edgecase
commit34cc11999b73c156ca225bd99fc0f962a0e6495e authorGavin Atkinson <gvnatknsn@protonmail.com> dateTue 15 Jun 2021, 17:25 (5 years ago) parent77362f2
7 files changed+113−43
compare with master
unifiedsplit
components/Header.js+5−10 lib/lib.js+2−2 pages/blog.js+15−4 pages/blog/[slug].js+47−9 pages/index.js+3−4 styles/globals.css+6−6 styles/markdown.module.css+35−8
components/Header.js+5−10
@@ -21,20 +21,15 @@ function ActiveLink({ children, href, className }) {
2121 }
2222
2323export default function Header() {
24− const router = useRouter()
25−
2624 return (
2725 <header className="layout-wide flex justify-between items-center pt-8">
2826 <Link href="/"><a className="type-ui">Urbit</a></Link>
2927 <nav className="flex items-center">
30− <ActiveLink className="mr-4 type-ui" href="/docs">Docs</ActiveLink>
31− <ActiveLink className="mr-4 type-ui" href="/blog">Blog</ActiveLink>
32− <ActiveLink className="mr-4 type-ui" href="/events">Events</ActiveLink>
33− {
34− router.asPath === '/'
35− ? <button className="button-sm bg-green">Download Port</button>
36− : <button className="button-sm bg-wall text-gray">Search Urbit.org<div className="ml-4 text-lightGray">⌘K</div></button>
37− }
28+ <ActiveLink className="mr-5 type-ui" href="/docs">Docs</ActiveLink>
29+ <ActiveLink className="mr-5 type-ui" href="/blog">Blog</ActiveLink>
30+ <ActiveLink className="mr-5 type-ui" href="/events">Events</ActiveLink>
31+ <button className="mr-5 text-green type-ui">Download Port</button>
32+ <button className="button-sm bg-wall text-gray">Search Urbit.org<div className="ml-4 text-lightGray">⌘K</div></button>
3833 </nav>
3934 </header>
4035 )
lib/lib.js+2−2
@@ -76,7 +76,7 @@ export function getNextPost(slug, fields = [], key) {
7676 getAllPosts(fields, key)
7777 .forEach((post, index, array) => {
7878 if (post.slug === slug) {
79− resultPost = array[index + 1]
79+ resultPost = array[index - 1]
8080 }
8181 })
8282 return resultPost
@@ -88,7 +88,7 @@ export function getPreviousPost(slug, fields = [], key) {
8888 getAllPosts(fields, key)
8989 .forEach((post, index, array) => {
9090 if (post.slug === slug) {
91− resultPost = array[index - 1]
91+ resultPost = array[index + 1]
9292 }
9393 })
9494 return resultPost
pages/blog.js+15−4
@@ -17,7 +17,7 @@ export default function BlogPost({ posts }) {
1717 <Header />
1818 <section className="layout-wide pt-48">
1919 <div className="measure">
20− <h2 className="pb-12">Urbit Blog</h2>
20+ <h2 className="pb-16">Urbit Blog</h2>
2121 <p className="pb-6">Stories from the broader Urbit community, the Urbit Foundation, and the many people contributing to Urbit.</p>
2222 <p>Subscribe to the Urbit Newsletter for regular updates, including new blog posts and events.</p>
2323 </div>
@@ -34,9 +34,20 @@ export default function BlogPost({ posts }) {
3434 ? <BackgroundImage src={post.extra.image} style={{ height:"720px" }} className="w-full rounded-lg" />
3535 : null
3636 }
37− <h3 className='mt-4'>{post.title}</h3>
38− <p className='text-black mt-2'>{post.extra.author}</p>
39− <p className='text-gray mt-2'>{formatDate(new Date(post.date))}</p>
37+ <h2 className='mt-4'>{post.title}</h2>
38+ <div className="flex items-baseline">
39+ {
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+
50+ <div className='type-ui text-gray mt-2'>{formatDate(new Date(post.date))}</div>
4051 </div>
4152 </Link>
4253 )
pages/blog/[slug].js+47−9
@@ -1,5 +1,5 @@
11import { useRouter } from 'next/router'
2−import { getPostBySlug, getAllPosts, getNextPost, getPreviousPost } from '../../lib/lib'
2+import { getPostBySlug, getAllPosts, getNextPost, getPreviousPost, formatDate } from '../../lib/lib'
33import Head from 'next/head'
44import Link from 'next/link'
55import ErrorPage from '../404'
@@ -7,6 +7,7 @@ import Container from '../../components/Container'
77import Markdown from '../../components/Markdown'
88import Header from '../../components/Header'
99import Footer from '../../components/Footer'
10+import BackgroundImage from '../../components/BackgroundImage'
1011import SingleColumn from '../../components/SingleColumn'
1112
1213import {
@@ -23,15 +24,52 @@ export default function Post({ post, nextPost, previousPost }) {
2324 <Container>
2425 <SingleColumn>
2526 <Header />
26− <section className="flex flex-col layout-wide pt-48">
27+ <section className="flex flex-col layout-wide pt-24">
2728 <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+
2839 </section>
29− <article className="flex items-center pt-48">
30− <Markdown post={post} />
40+ <article className="flex justify-center pt-12">
41+ <Markdown post={post} />
3142 </article>
32− <section className="layout-narrow pt-48">
33− <Link href={nextPost.slug}>{nextPost.title}</Link>
34− <Link href={previousPost.slug}>{previousPost.title}</Link>
43+ <section className="layout-wide pt-24 flex">
44+
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+ }
3573 </section>
3674 </SingleColumn>
3775 <Footer />
@@ -48,7 +86,7 @@ export async function getStaticProps({ params }) {
4886 'date',
4987 'description',
5088 'extra',
51− ], 'blog')
89+ ], 'blog') || null
5290
5391 const previousPost = getPreviousPost(params.slug, [
5492 'title',
@@ -56,7 +94,7 @@ export async function getStaticProps({ params }) {
5694 'date',
5795 'description',
5896 'extra',
59− ], 'blog')
97+ ], 'blog') || null
6098
6199 const post = getPostBySlug(params.slug, [
62100 'title',
pages/index.js+3−4
@@ -33,7 +33,7 @@ export default function Home({ posts, events }) {
3333 </div>
3434 <h3 className="pb-8">The Urbit client, now in beta.</h3>
3535 <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>
3737 <a className="type-ui text-gray">View on GitHub</a>
3838 </div>
3939 <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 }) {
6363 </div>
6464 <div className='measure py-12'>
6565 <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>
6767 </div>
6868 </section>
6969
@@ -82,7 +82,7 @@ export default function Home({ posts, events }) {
8282 <p className="pb-12">
8383 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.
8484 </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>
8686 </div>
8787 </section>
8888
@@ -180,7 +180,6 @@ export default function Home({ posts, events }) {
180180 <h3 className="mt-8">Explore code on <a className="text-green" href={contact.github}>Github</a></h3>
181181 <h3 className="mt-8">Ask questions in our <a className="text-green" href={contact.discord}>Discord</a></h3>
182182 <h3 className="mt-8">Boot Urbit and join <code className="bg-wall p-2 rounded-lg">{contact.urbitCommunity}</code></h3>
183−
184183 </section>
185184
186185 </SingleColumn>
styles/globals.css+6−6
@@ -34,27 +34,27 @@ p a {
3434}
3535
3636h1, .type-h1 {
37− @apply text-6xl leading-tight font-sans tracking-tight font-bold;
37+ @apply text-6xl leading-tight tracking-tight font-bold;
3838 }
3939
4040h2, .type-h2 {
41− @apply text-5xl font-sans font-bold;
41+ @apply text-5xl font-bold;
4242}
4343
4444h3, .type-h3 {
45− @apply text-2xl font-sans font-semibold;
45+ @apply text-2xl font-semibold;
4646}
4747
4848 .type-ui {
49− @apply text-lg font-sans font-semibold;
49+ @apply text-lg font-semibold;
5050 }
5151
5252 p, .type-p {
53− @apply text-lg font-sans;
53+ @apply text-lg;
5454 }
5555
5656 caption, .type-caption {
57− @apply text-base font-sans font-medium block text-left;
57+ @apply text-base font-medium block text-left;
5858 }
5959
6060 code .type-code {
styles/markdown.module.css+35−8
@@ -1,25 +1,31 @@
11.markdown {
22 /* @apply leading-relaxed; */
3− max-width: 600px;
3+ /* max-width: ; */
4+ @apply w-8/12;
45}
56
67 .markdown p,
78 .markdown ul,
89 .markdown ol,
910 .markdown blockquote {
10− @apply my-6;
11+ @apply my-8;
1112 }
1213
1314 .markdown h1 {
14− @apply font-semibold mt-12 mb-4;
15+ @apply text-5xl font-bold mt-24 mb-12;
1516 }
1617
1718 .markdown h2 {
18− @apply font-semibold mt-12 mb-4;
19+ @apply text-4xl font-bold mt-16 mb-12;
1920 }
2021
2122 .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;
2329 }
2430
2531 .markdown p {
@@ -36,12 +42,33 @@
3642 .markdown img {
3743 width: 100%;
3844 height: auto;
39− @apply rounded-lg
45+ @apply rounded-lg;
4046 }
4147
4248 .markdown figure {
4349 position: relative;
44− width: 160%;
45− left: -30%;
50+ width: 125%;
51+ left: -12.5%;
52+ @apply mt-12 mb-12;
53+ }
54+
55+ .markdown pre {
56+ @apply p-8 bg-wall rounded-lg;
4657 }
4758
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+