git.iko.soy/urbit.org
on master help sign in
updated blog index
9a1e138Gordon
pages/blog.js+46−36
compare with master
unifiedsplit
@@ -28,9 +28,9 @@ 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">
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.
@@ -41,43 +41,53 @@ 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+
52+ <div class="flex w-full rounded-lg aspect-h-4 w-full">
51− {
53+ {
52− // Not all blog posts have images
54+ // Not all blog posts have images
53− post.extra.image ? (
55+ post.extra.image ? (
54− <BackgroundImage
56+ <BackgroundImage
55− src={post.extra.image}
57+ src={post.extra.image}
56− className="rounded-lg aspect-w-5 aspect-h-4"
58+ className="rounded-lg aspect-w-5 aspect-h-4 w-full"
57− />
59+ />
58− ) : null
60+ ) : <div className="rounded-lg aspect-w-5 aspect-h-4 w-full bg-wall-100"/>
59− }
61+ }
62+ </div>
63+
64+ <div class="w-full md:pl-6 ">
60− <h3 className="mt-4">{post.title}</h3>
65+ <h3 className="mt-6 md:mt-0">{post.title}</h3>
66+ <div className="flex items-center justify-between mt-2">
61− <div className="flex items-baseline mt-2">
67+ <div className="flex items-baseline">
62− {post.extra.author ? (
68+ {post.extra.author ? (
63− <div className="type-sub-bold mr-2">
69+ <div className="type-sub-bold mr-2">{post.extra.author}</div>
64− {post.extra.author}
65− </div>
66− ) : null}
70+ ) : null}
67− {post.extra.ship ? (
71+ {post.extra.ship ? (
72+ <Link
68− <Link href={`/ids/${post.extra.ship}`} passHref>
73+ href={`https://urbit.org/ids/${post.extra.ship}`}
74+ passHref
75+ >
69− <a className="type-sub-bold text-wall-500 font-mono">
76+ <a className="type-sub-bold text-wall-500 font-mono">
70− {post.extra.ship}
77+ {post.extra.ship}
71− </a>
78+ </a>
72− </Link>
79+ </Link>
73− ) : null}
80+ ) : null}
74− </div>
75− <div className="text-wall-500 type-sub">
76− {formatDate(date)}
77− </div>
78− </div>
79− </Link>
80 </div>
81 </div>
82+ </div>
83+ <div className="text-wall-500 type-sub mt-1">{formatDate(date)}</div>
84+
85+ {post?.description && <p className="mt-6">{post.description}</p>}
86+
87+ </div>
88+ </div>
89+ </Link>
90+ </div>
81 );
91 );
82 })}
92 })}
83 </Section>
93 </Section>