git.iko.soy/urbit.org
on master help sign in
Merge pull request #1654 from urbit/mp/card

components: add card component, use for blogs

commitde10b2bcf73b9fc8452ec1dd53c18722453ae4a2 authormatildepark <matilde.park@urbit.org> dateMon 25 Jul 2022, 12:48 (4 years ago) parent2ef5d6725ad425
4 files changed+55−81
compare with master
unifiedsplit
components/PostPreview.js+11−33 package-lock.json+38−38 pages/blog/[slug].js+2−6 pages/index.js+4−4
components/PostPreview.js+11−33
@@ -1,5 +1,5 @@
11import Link from "next/link";
2−import BackgroundImage from "./BackgroundImage";
2+import { Card } from "foundation-design-system";
33import { formatDate, generateDisplayDate } from "../lib/lib";
44
55export default function PostPreview(props) {
@@ -7,38 +7,16 @@ export default function PostPreview(props) {
77
88 const date = generateDisplayDate(props.post.date);
99 return (
10− <div className={`cursor-pointer ${props.className}`}>
11− {props.title ? <h3 className="mb-2">{props.title}</h3> : null}
12−
13− <Link
14− href={`/${section}/${props.post.slug}`}
15− key={`post-${props.post.slug}`}
16− >
17− <div>
18− <BackgroundImage
19− className="aspect-w-5 aspect-h-4 rounded-lg"
20− src={props.post.extra.image || ""}
21− />
22−
23− <h4 className="mt-2">{props.post.title}</h4>
24− <div className="flex items-baseline mt-1">
25− {props.post.extra.author ? (
26− <div className="type-sub-bold mr-2">
27− {props.post.extra.author}
28− </div>
29− ) : null}
30− {props.post.extra.ship ? (
31− <Link href={`/ids/${props.post.extra.ship}`} passHref>
32− <a className="type-sub-bold text-wall-500 font-mono">
33− {props.post.extra.ship}
34− </a>
35− </Link>
36− ) : null}
37− </div>
38− <div className="text-wall-500 type-sub mt-1">{formatDate(date)}</div>
39− </div>
40− </Link>
41− </div>
10+ <Card
11+ slug={`/${section}/${props.post.slug}`}
12+ image={props.post.extra.image}
13+ title={props?.title || props.post?.title || ""}
14+ author={props.post?.extra?.author || ""}
15+ ship={props.post?.extra?.ship || ""}
16+ content={
17+ <div className="text-wall-500 type-sub mt-1">{formatDate(date)}</div>
18+ }
19+ />
4220 );
4321}
4422
package-lock.json+38−38
@@ -45,9 +45,9 @@
4545 }
4646 },
4747 "node_modules/@babel/runtime": {
48− "version": "7.18.6",
49− "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.6.tgz",
50− "integrity": "sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==",
48+ "version": "7.18.9",
49+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz",
50+ "integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==",
5151 "dependencies": {
5252 "regenerator-runtime": "^0.13.4"
5353 },
@@ -538,9 +538,9 @@
538538 }
539539 },
540540 "node_modules/browserslist": {
541− "version": "4.21.1",
542− "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.1.tgz",
543− "integrity": "sha512-Nq8MFCSrnJXSc88yliwlzQe3qNe3VntIjhsArW9IJOEPSHNx23FalwApUVbzAWABLhYJJ7y8AynWI/XM8OdfjQ==",
541+ "version": "4.21.2",
542+ "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.2.tgz",
543+ "integrity": "sha512-MonuOgAtUB46uP5CezYbRaYKBNt2LxP0yX+Pmj4LkcDFGkn9Cbpi83d9sCjwQDErXsIJSzY5oKGDbgOlF/LPAA==",
544544 "funding": [
545545 {
546546 "type": "opencollective",
@@ -552,9 +552,9 @@
552552 }
553553 ],
554554 "dependencies": {
555− "caniuse-lite": "^1.0.30001359",
556− "electron-to-chromium": "^1.4.172",
557− "node-releases": "^2.0.5",
555+ "caniuse-lite": "^1.0.30001366",
556+ "electron-to-chromium": "^1.4.188",
557+ "node-releases": "^2.0.6",
558558 "update-browserslist-db": "^1.0.4"
559559 },
560560 "bin": {
@@ -596,9 +596,9 @@
596596 }
597597 },
598598 "node_modules/caniuse-lite": {
599− "version": "1.0.30001365",
600− "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001365.tgz",
601− "integrity": "sha512-VDQZ8OtpuIPMBA4YYvZXECtXbddMCUFJk1qu8Mqxfm/SZJNSr1cy4IuLCOL7RJ/YASrvJcYg1Zh+UEUQ5m6z8Q==",
599+ "version": "1.0.30001367",
600+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001367.tgz",
601+ "integrity": "sha512-XDgbeOHfifWV3GEES2B8rtsrADx4Jf+juKX2SICJcaUhjYBO3bR96kvEIHa15VU6ohtOhBZuPGGYGbXMRn0NCw==",
602602 "funding": [
603603 {
604604 "type": "opencollective",
@@ -856,9 +856,9 @@
856856 }
857857 },
858858 "node_modules/electron-to-chromium": {
859− "version": "1.4.187",
860− "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.187.tgz",
861− "integrity": "sha512-t3iFLHVIMhB8jGZ+8ui951nz6Bna5qKfhxezG3wzXdBJ79qFKPsE2chjjVFNqC1ewhfrPQrw9pmVeo4FFpZeQA=="
859+ "version": "1.4.195",
860+ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.195.tgz",
861+ "integrity": "sha512-vefjEh0sk871xNmR5whJf9TEngX+KTKS3hOHpjoMpauKkwlGwtMz1H8IaIjAT/GNnX0TbGwAdmVoXCAzXf+PPg=="
862862 },
863863 "node_modules/end-of-stream": {
864864 "version": "1.4.4",
@@ -1116,7 +1116,7 @@
11161116 },
11171117 "node_modules/foundation-design-system": {
11181118 "version": "0.0.0",
1119− "resolved": "git+ssh://git@github.com/urbit/foundation-design-system.git#af413f40c379005cf609c2adde545da9638f38e3",
1119+ "resolved": "git+ssh://git@github.com/urbit/foundation-design-system.git#37e2d9122f6ec88ce6cd8758ca0612f13d613f8f",
11201120 "license": "MIT",
11211121 "dependencies": {
11221122 "@markdoc/markdoc": "0.1.3",
@@ -2848,9 +2848,9 @@
28482848 }
28492849 },
28502850 "node_modules/update-browserslist-db": {
2851− "version": "1.0.4",
2852− "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.4.tgz",
2853− "integrity": "sha512-jnmO2BEGUjsMOe/Fg9u0oczOe/ppIDZPebzccl1yDWGLFP16Pa1/RM5wEoKYPG2zstNcDuAStejyxsOuKINdGA==",
2851+ "version": "1.0.5",
2852+ "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.5.tgz",
2853+ "integrity": "sha512-dteFFpCyvuDdr9S/ff1ISkKt/9YZxKjI9WlRR99c180GaztJtRa/fn18FdxGVKVsnPY7/a/FDN68mcvUmP4U7Q==",
28542854 "funding": [
28552855 {
28562856 "type": "opencollective",
@@ -2958,9 +2958,9 @@
29582958 },
29592959 "dependencies": {
29602960 "@babel/runtime": {
2961− "version": "7.18.6",
2962− "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.6.tgz",
2963− "integrity": "sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==",
2961+ "version": "7.18.9",
2962+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz",
2963+ "integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==",
29642964 "requires": {
29652965 "regenerator-runtime": "^0.13.4"
29662966 }
@@ -3249,13 +3249,13 @@
32493249 }
32503250 },
32513251 "browserslist": {
3252− "version": "4.21.1",
3253− "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.1.tgz",
3254− "integrity": "sha512-Nq8MFCSrnJXSc88yliwlzQe3qNe3VntIjhsArW9IJOEPSHNx23FalwApUVbzAWABLhYJJ7y8AynWI/XM8OdfjQ==",
3252+ "version": "4.21.2",
3253+ "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.2.tgz",
3254+ "integrity": "sha512-MonuOgAtUB46uP5CezYbRaYKBNt2LxP0yX+Pmj4LkcDFGkn9Cbpi83d9sCjwQDErXsIJSzY5oKGDbgOlF/LPAA==",
32553255 "requires": {
3256− "caniuse-lite": "^1.0.30001359",
3257− "electron-to-chromium": "^1.4.172",
3258− "node-releases": "^2.0.5",
3256+ "caniuse-lite": "^1.0.30001366",
3257+ "electron-to-chromium": "^1.4.188",
3258+ "node-releases": "^2.0.6",
32593259 "update-browserslist-db": "^1.0.4"
32603260 }
32613261 },
@@ -3274,9 +3274,9 @@
32743274 "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
32753275 },
32763276 "caniuse-lite": {
3277− "version": "1.0.30001365",
3278− "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001365.tgz",
3279− "integrity": "sha512-VDQZ8OtpuIPMBA4YYvZXECtXbddMCUFJk1qu8Mqxfm/SZJNSr1cy4IuLCOL7RJ/YASrvJcYg1Zh+UEUQ5m6z8Q=="
3277+ "version": "1.0.30001367",
3278+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001367.tgz",
3279+ "integrity": "sha512-XDgbeOHfifWV3GEES2B8rtsrADx4Jf+juKX2SICJcaUhjYBO3bR96kvEIHa15VU6ohtOhBZuPGGYGbXMRn0NCw=="
32803280 },
32813281 "chalk": {
32823282 "version": "2.4.2",
@@ -3465,9 +3465,9 @@
34653465 }
34663466 },
34673467 "electron-to-chromium": {
3468− "version": "1.4.187",
3469− "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.187.tgz",
3470− "integrity": "sha512-t3iFLHVIMhB8jGZ+8ui951nz6Bna5qKfhxezG3wzXdBJ79qFKPsE2chjjVFNqC1ewhfrPQrw9pmVeo4FFpZeQA=="
3468+ "version": "1.4.195",
3469+ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.195.tgz",
3470+ "integrity": "sha512-vefjEh0sk871xNmR5whJf9TEngX+KTKS3hOHpjoMpauKkwlGwtMz1H8IaIjAT/GNnX0TbGwAdmVoXCAzXf+PPg=="
34713471 },
34723472 "end-of-stream": {
34733473 "version": "1.4.4",
@@ -3650,7 +3650,7 @@
36503650 "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA=="
36513651 },
36523652 "foundation-design-system": {
3653− "version": "git+ssh://git@github.com/urbit/foundation-design-system.git#af413f40c379005cf609c2adde545da9638f38e3",
3653+ "version": "git+ssh://git@github.com/urbit/foundation-design-system.git#37e2d9122f6ec88ce6cd8758ca0612f13d613f8f",
36543654 "from": "foundation-design-system@github:urbit/foundation-design-system",
36553655 "requires": {
36563656 "@markdoc/markdoc": "0.1.3",
@@ -4847,9 +4847,9 @@
48474847 }
48484848 },
48494849 "update-browserslist-db": {
4850− "version": "1.0.4",
4851− "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.4.tgz",
4852− "integrity": "sha512-jnmO2BEGUjsMOe/Fg9u0oczOe/ppIDZPebzccl1yDWGLFP16Pa1/RM5wEoKYPG2zstNcDuAStejyxsOuKINdGA==",
4850+ "version": "1.0.5",
4851+ "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.5.tgz",
4852+ "integrity": "sha512-dteFFpCyvuDdr9S/ff1ISkKt/9YZxKjI9WlRR99c180GaztJtRa/fn18FdxGVKVsnPY7/a/FDN68mcvUmP4U7Q==",
48534853 "requires": {
48544854 "escalade": "^3.1.1",
48554855 "picocolors": "^1.0.0"
pages/blog/[slug].js+2−6
@@ -71,12 +71,8 @@ export default function Post({
7171 </Section>
7272 <Section wide className="flex">
7373 <TwoUp>
74− {nextPost ? (
75− <PostPreview title="Next Post" post={nextPost} />
76− ) : null}
77− {previousPost ? (
78− <PostPreview title="Previous Post" post={previousPost} />
79− ) : null}
74+ {nextPost ? <PostPreview post={nextPost} /> : null}
75+ {previousPost ? <PostPreview post={previousPost} /> : null}
8076 </TwoUp>
8177 </Section>
8278 </SingleColumn>
pages/index.js+4−4
@@ -69,9 +69,9 @@ export default function Home({ posts, events, grantNumbers, search }) {
6969 computer from scratch. Good thing we started over a decade ago.
7070 </p>
7171 <p className="max-w-prose">
72− Today, Urbit is a real system with thousands of users that are building
73− all kinds of communities, software, DAOs, and more. And it’s getting
74− better every day.{" "}
72+ Today, Urbit is a real system with thousands of users that are
73+ building all kinds of communities, software, DAOs, and more. And
74+ it’s getting better every day.{" "}
7575 </p>
7676 <Link href="/overview" passHref>
7777 <a className="button-lg bg-green-400 text-white type-ui max-w-fit">
@@ -189,7 +189,7 @@ export default function Home({ posts, events, grantNumbers, search }) {
189189 </TwoUp>
190190
191191 <Link href="/blog" passHref>
192− <a className="button-lg max-w-fit type-ui text-white bg-green-400">
192+ <a className="button-lg max-w-fit type-ui text-white bg-green-400 z-10">
193193 See More
194194 </a>
195195 </Link>