git.iko.soy/urbit.org
on master help sign in
Merge pull request #1614 from urbit/blog-index
741a711matildepark
pages/blog.js+47−31
compare with master
unifiedsplit
@@ -28,10 +28,10 @@ export default function Blog({ posts, search }) {
28 <IntraNav ourSite="https://urbit.org" search={search} />
28 <IntraNav ourSite="https://urbit.org" search={search} />
29 <SingleColumn>
29 <SingleColumn>
30 <Header />
30 <Header />
31− <Section narrow>
31+ <Section>
32− <div className="measure">
33− <h1 className="pb-16">Blog</h1>
32+ <h1 className="pb-16">Blog</h1>
33+ <div className="md:columns-2 gap-x-8">
34− <p className="pb-6">
34+ <p className="pb-6 md:pb-0">
35 Stories from the broader Urbit community, the Urbit Foundation,
35 Stories from the broader Urbit community, the Urbit Foundation,
36 and the many people contributing to Urbit.
36 and the many people contributing to Urbit.
37 </p>
37 </p>
@@ -41,39 +41,55 @@ export default function Blog({ posts, search }) {
41 </p>
41 </p>
42 </div>
42 </div>
43 </Section>
43 </Section>
44− <Section narrow>
44+ <Section>
45 {posts.map((post) => {
45 {posts.map((post) => {
46 const date = generateDisplayDate(post.date);
46 const date = generateDisplayDate(post.date);
47 return (
47 return (
48 <div key={post.slug} className="mb-20 cursor-pointer">
48 <div key={post.slug} className="mb-20 cursor-pointer">
49 <Link href={`/blog/${post.slug}`}>
49 <Link href={`/blog/${post.slug}`}>
50− <div>
50+ <div class="flex items-center md:flex-row flex-col">
51− {
51+ <div class="flex w-full rounded-lg aspect-h-4 w-full">
52+ {
52− // Not all blog posts have images
53+ // Not all blog posts have images
53− post.extra.image ? (
54+ post.extra.image ? (
54− <BackgroundImage
55+ <BackgroundImage
55− src={post.extra.image}
56+ src={post.extra.image}
56− className="rounded-lg aspect-w-5 aspect-h-4"
57+ className="rounded-lg aspect-w-5 aspect-h-4 w-full"
57− />
58+ />
58− ) : null
59+ ) : (
59− }
60+ <div className="rounded-lg aspect-w-5 aspect-h-4 w-full bg-wall-100" />
60− <h3 className="mt-4">{post.title}</h3>
61+ )
61− <div className="flex items-baseline mt-2">
62+ }
62− {post.extra.author ? (
63− <div className="type-sub-bold mr-2">
64− {post.extra.author}
65− </div>
66− ) : null}
67− {post.extra.ship ? (
68− <Link href={`/ids/${post.extra.ship}`} passHref>
69− <a className="type-sub-bold text-wall-500 font-mono">
70− {post.extra.ship}
71− </a>
72− </Link>
73− ) : null}
74 </div>
63 </div>
64+
65+ <div class="w-full md:pl-6 ">
66+ <h3 className="mt-6 md:mt-0">{post.title}</h3>
67+ <div className="flex items-center justify-between mt-2">
68+ <div className="flex items-baseline">
69+ {post.extra.author ? (
70+ <div className="type-sub-bold mr-2">
71+ {post.extra.author}
72+ </div>
73+ ) : null}
74+ {post.extra.ship ? (
75+ <Link
76+ href={`https://urbit.org/ids/${post.extra.ship}`}
77+ passHref
78+ >
79+ <a className="type-sub-bold text-wall-500 font-mono">
80+ {post.extra.ship}
81+ </a>
82+ </Link>
83+ ) : null}
84+ </div>
85+ </div>
75− <div className="text-wall-500 type-sub">
86+ <div className="text-wall-500 type-sub mt-1">
76− {formatDate(date)}
87+ {formatDate(date)}
88+ </div>
89+
90+ {post?.description && (
91+ <p className="mt-6">{post.description}</p>
92+ )}
77 </div>
93 </div>
78 </div>
94 </div>
79 </Link>
95 </Link>
pages/blog/[slug].js+1−1
@@ -46,7 +46,7 @@ export default function Post({
46 <IntraNav ourSite="https://urbit.org" search={search} />
46 <IntraNav ourSite="https://urbit.org" search={search} />
47 <SingleColumn>
47 <SingleColumn>
48 <Header />
48 <Header />
49− <Section short narrow>
49+ <Section narrow className="pb-10">
50 <h1>{post.title}</h1>
50 <h1>{post.title}</h1>
51 <h3 className=" mt-6">{post.description}</h3>
51 <h3 className=" mt-6">{post.description}</h3>
52 <div className="flex items-baseline mt-6">
52 <div className="flex items-baseline mt-6">