git.iko.soy/urbit.org
on master help sign in
markdown images
commitf4d54478e6be539522d417d6dbcc49be7505ab99 authorGavin Atkinson <gvnatknsn@protonmail.com> dateTue 15 Jun 2021, 11:57 (5 years ago) parent67b2ddc
5 files changed+39−16
compare with master
unifiedsplit
components/Markdown.js+1−1 pages/blog.js+6−1 pages/blog/[slug].js+2−4 pages/index.js+4−4 styles/markdown.module.css+26−6
components/Markdown.js+1−1
@@ -23,7 +23,7 @@ function Img({ src, children }) {
2323
2424const options = {
2525 remarkReactComponents: {
26− // img: Img,
26+ img: Img,
2727 // p: P,
2828 }
2929}
pages/blog.js+6−1
@@ -28,7 +28,12 @@ export default function BlogPost({ posts }) {
2828 return (
2929 <Link href={`/blog/${post.slug}`}>
3030 <div key={post.slug} className='pb-24 cursor-pointer'>
31− <BackgroundImage src={post.extra.image || ''} style={{ height:"720px" }} className="w-full rounded" />
31+ {
32+ // Not all blog posts have images
33+ post.extra.image
34+ ? <BackgroundImage src={post.extra.image} style={{ height:"720px" }} className="w-full rounded-lg" />
35+ : null
36+ }
3237 <h3 className='mt-4'>{post.title}</h3>
3338 <p className='text-black mt-2'>{post.extra.author}</p>
3439 <p className='text-gray mt-2'>{formatDate(new Date(post.date))}</p>
pages/blog/[slug].js+2−4
@@ -23,11 +23,9 @@ export default function Post({ post, nextPost, previousPost }) {
2323 <Container>
2424 <SingleColumn>
2525 <Header />
26− <section className="layout-narrow pt-48">
27− <article>
26+ <article className="flex items-center pt-48">
2827 <Markdown post={post} />
29− </article>
30− </section>
28+ </article>
3129 <section className="layout-narrow pt-48">
3230 <Link href={nextPost.slug}>{nextPost.title}</Link>
3331 <Link href={previousPost.slug}>{previousPost.title}</Link>
pages/index.js+4−4
@@ -74,10 +74,10 @@ export default function Home({ posts, events }) {
7474 Urbit is a personal OS designed from scratch to run peer-to-peer applications.
7575 </h3>
7676 <p className="pb-12">
77− It solves the hard problems of implementing a peer-to-peer network (including identity, NAT traversal, and exactly-once delivery) in the kernel so app developers canfocus on business logic.
77+ It solves the hard problems of implementing a peer-to-peer network (including identity, NAT traversal, and exactly-once delivery) in the kernel so app developers can focus on business logic.
7878 </p>
7979 <p className="pb-12">
80− The entire OS is a <a>single pure function</a> that provides application developers with strong guarantees: automated persistence and memory management, repeatable builds, and support for hot code reloading.
80+ The entire OS is a <Link href=''><a>single pure function</a></Link> that provides application developers with strong guarantees: automated persistence and memory management, repeatable builds, and support for hot code reloading.
8181 </p>
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.
@@ -130,7 +130,7 @@ export default function Home({ posts, events }) {
130130 <div className={`border-black cursor-pointer blog-grid-${i}`} key={event.slug}>
131131 <Link href={'/events/' + event.slug} key={`post-${event.slug}`}>
132132 <div>
133− <BackgroundImage className="w-full h-80 rounded" src={event.extra.image || ''} />
133+ <BackgroundImage className="w-full h-80 rounded-lg" src={event.extra.image || ''} />
134134 <p className='text-black mt-2'>{event.title || ''}</p>
135135 <p className='text-gray'>{formatDate(new Date(event.date))}</p>
136136 </div>
@@ -152,7 +152,7 @@ export default function Home({ posts, events }) {
152152 action="https://urbit.us11.list-manage.com/subscribe/post?u=972a03db9e0c6c25bb58de8c8&amp;amp;id=be143888d2"
153153 method="post" id="mc-embedded-subscribe-form"
154154 name="mc-embedded-subscribe-form"
155− className="validate form"
155+ className="validate form max-w-screen-sm"
156156 target="_blank"
157157 novalidate>
158158 <div className="input-group" id="mc_embed_signup_scroll">
styles/markdown.module.css+26−6
@@ -1,5 +1,6 @@
11.markdown {
2− @apply leading-relaxed;
2+ /* @apply leading-relaxed; */
3+ max-width: 600px;
34}
45
56 .markdown p,
@@ -10,7 +11,7 @@
1011 }
1112
1213 .markdown h1 {
13− @apply font-semibold mt-12 mb-4;
14+ @apply font-semibold mt-12 mb-4;
1415 }
1516
1617 .markdown h2 {
@@ -20,9 +21,28 @@
2021 .markdown h3 {
2122 @apply font-semibold mt-8 mb-4;
2223 }
24+
25+ .markdown p {
26+ //styleName: P;
27+ font-family: Inter;
28+ font-size: 20px;
29+ font-style: normal;
30+ font-weight: 400;
31+ line-height: 32px;
32+ letter-spacing: -0.011em;
33+ text-align: left;
34+
35+ }
2336
2437 .markdown img {
25− width: 100%;
26− height: auto;
27− @apply py-4;
28− }
38+ width: 100%;
39+ height: auto;
40+ @apply rounded-lg
41+ }
42+
43+ .markdown figure {
44+ position: relative;
45+ width: 160%;
46+ left: -30%;
47+ }
48+