git.iko.soy/urbit.org
on master help sign in
highlight cards as markdown files
e314990Gordon
components/HighlightCard.jsnew file+22
compare with master
unifiedsplit
@@ -0,0 +1,22 @@
1+import Link from "next/link";
2+export default function HighlightCard({ slug, highlight }) {
3+ return (
4+ <Link href={highlight.url}>
5+ <div className="cursor-pointer bg-wall-100 rounded-xl min-h-0 flex-1">
6+ <div className="flex flex-col p-4 h-full relative">
7+ {highlight.image ? (
8+ <div className="w-64 md:w-full rounded-xl object-cover overflow-hidden basis-3/5">
9+ <img className="h-full w-64 md:w-full object-cover" src={highlight.image} />
10+ </div>
11+ ) : (
12+ <div className="rounded-xl w-full"/>
13+ )}
14+ <div className="pt-4">
15+ <p className="mb-2 font-semibold leading-5">{highlight.title}</p>
16+ <p className="text-sm leading-5">{highlight?.description}</p>
17+ </div>
18+ </div>
19+ </div>
20+ </Link>
21+ );
22+}
components/IndexCard.jsdeleted−32
@@ -1,32 +0,0 @@
1−import Link from "next/link";
2−export default function IndexCard({ slug, feat }) {
3− return (
4− <Link href={slug}>
5− <div className="hover:opacity-80 cursor-pointer bg-wall-100 rounded-xl min-h-0 flex-1">
6− <div className="flex flex-col p-4 h-full relative">
7− {feat.image ? (
8− <div
9− className="w-64 md:w-full rounded-xl object-cover overflow-hidden basis-1/2"
10− style={{
11− backgroundColor: feat?.matchedPost?.bgColor || "rgba(0,0,0,0)",
12− }}
13− >
14− <img className="h-full w-64 md:w-full object-cover" src={feat.image} />
15− </div>
16− ) : (
17− <div
18− className="rounded-xl w-full"
19− style={{
20− backgroundColor: feat?.matchedPost?.bgColor || "rgba(0,0,0,0)",
21− }}
22− />
23− )}
24− <div className="pt-4">
25− <p className="mb-2 font-semibold leading-5">{feat.title}</p>
26− <p className="text-sm leading-5">{feat?.description}</p>
27− </div>
28− </div>
29− </div>
30− </Link>
31− );
32−}
content/highlights/highlight-1.mdnew file+6
@@ -0,0 +1,6 @@
1++++
2+title = "State of the Network"
3+url ="#"
4+image = "https://storage.googleapis.com/media.urbit.org/site/featured/state-of-network.png"
5+description = "Urbit in 2023 has come a long way."
6++++
content/highlights/highlight-2.mdnew file+6
@@ -0,0 +1,6 @@
1++++
2+title = "Hoon School Live 23'"
3+image = "https://storage.googleapis.com/media.urbit.org/site/featured/hoon-school-23.png"
4+url="https://developers.urbit.org/courses/hsl"
5+description = "The next cohort class to learn Hoon begins in March 2023."
6++++
content/highlights/highlight-3.mdnew file+6
@@ -0,0 +1,6 @@
1++++
2+title = "The Roadmap"
3+image = "https://storage.googleapis.com/media.urbit.org/site/featured/roadmap-icon.jpg"
4+url="https://roadmap.urbit.org/"
5+description = "Explore the technical plan for making Urbit suitable for mass adoption."
6++++
pages/index.js+20−49
@@ -19,6 +19,7 @@ import PostPreview from "../components/PostPreview";
19import EventPreview from "../components/EventPreview";
19import EventPreview from "../components/EventPreview";
20import { eventKeys } from "../lib/constants";
20import { eventKeys } from "../lib/constants";
21import IndexCard from "../components/ecosystem/IndexCard";
21import IndexCard from "../components/ecosystem/IndexCard";
22+import HighlightCard from "../components/HighlightCard";
22import fs from "fs";
23import fs from "fs";
23import path from "path";
24import path from "path";
24import Meta from "../components/Meta";
25import Meta from "../components/Meta";
@@ -26,6 +27,7 @@ import { matchEcosystemPost } from "../lib/lib";
26
27
27export default function Home({
28export default function Home({
28 posts,
29 posts,
30+ highlights,
29 ecosystem,
31 ecosystem,
30 events,
32 events,
31 grantNumbers,
33 grantNumbers,
@@ -58,57 +60,15 @@ export default function Home({
58 // Hero
60 // Hero
59 }
61 }
60
62
61−
63+ {
64+ // Highlights
65+ }
62− <Section className="pb-12">
66+ <Section className="pb-12">
63−
64 <div className="flex flex-col space-y-4 md:space-y-0 md:flex-row md:space-x-4">
67 <div className="flex flex-col space-y-4 md:space-y-0 md:flex-row md:space-x-4">
65−
68+ <HighlightCard highlight={highlights[0]} key={highlights[0].slug} />
66−
69+ <HighlightCard highlight={highlights[1]} key={highlights[1].slug} />
67− <Link href="#">
70+ <HighlightCard highlight={highlights[2]} key={highlights[2].slug} />
68− <div className="cursor-pointer bg-wall-100 rounded-xl min-h-0 flex-1">
69− <div className="flex flex-col p-4 h-full relative">
70− <div className="w-64 md:w-full rounded-xl object-cover overflow-hidden basis-3/5">
71− <img className="h-full w-64 md:w-full object-cover" src="https://storage.googleapis.com/media.urbit.org/site/featured/state-of-network.png"/>
72− </div>
73− <div className="pt-4">
74− <p className="mb-2 font-semibold leading-5">State of the Network</p>
75− <p className="text-sm leading-5">Urbit is not the same in 2023 as it was in 2022.</p>
76− </div>
77− </div>
78− </div>
79− </Link>
80−
81− <Link href="https://roadmap.urbit.org">
82− <div className="bg-wall-100 rounded-xl min-h-0 flex-1">
83− <div className="cursor-pointer flex flex-col p-4 h-full relative">
84− <div className="w-64 md:w-full rounded-xl object-cover overflow-hidden basis-3/5">
85− <img className="h-full w-64 md:w-full object-cover" src="https://storage.googleapis.com/media.urbit.org/site/featured/roadmap-icon.jpg"/>
86− </div>
87− <div className="pt-4">
88− <p className="mb-2 font-semibold leading-5">Roadmap</p>
89− <p className="text-sm leading-5">Explore the technical plan for making Urbit suitable to mass adoption.</p>
90− </div>
91− </div>
92− </div>
93− </Link>
94−
95−
96− <Link href="https://developers.urbit.org/courses/hsl">
97− <div className="bg-wall-100 rounded-xl min-h-0 flex-1">
98− <div className="cursor-pointer flex flex-col p-4 h-full relative">
99− <div className="w-64 md:w-full rounded-xl object-cover overflow-hidden basis-3/5">
100− <img className="h-full w-64 md:w-full object-cover" src="https://storage.googleapis.com/media.urbit.org/site/featured/hoon-school-23.png"/>
101− </div>
102− <div className="pt-4">
103− <p className="mb-2 font-semibold leading-5">Hoon School Live 23'</p>
104− <p className="text-sm leading-5">The next cohort class to learn Hoon begins in March.</p>
105− </div>
106− </div>
107− </div>
108− </Link>
109−
110 </div>
71 </div>
111−
112 </Section>
72 </Section>
113
73
114
74
@@ -372,6 +332,8 @@ export default function Home({
372 );
332 );
373}
333}
374
334
335+
336+
375export async function getStaticProps() {
337export async function getStaticProps() {
376 // Latest blog posts
338 // Latest blog posts
377 const posts = getAllPosts(
339 const posts = getAllPosts(
@@ -380,6 +342,14 @@ export async function getStaticProps() {
380 "date"
342 "date"
381 );
343 );
382
344
345+
346+ // Highlights
347+ const highlights = getAllPosts(
348+ ["title", "slug", "image", "url", "description"],
349+ "highlights"
350+ );
351+
352+
383 // Latest ecosystem report with matched post metadata
353 // Latest ecosystem report with matched post metadata
384 const ecosystem = matchEcosystemPost(getAllPosts(
354 const ecosystem = matchEcosystemPost(getAllPosts(
385 ["date", "featured-1", "featured-2", "featured-3"],
355 ["date", "featured-1", "featured-2", "featured-3"],
@@ -451,6 +421,7 @@ export async function getStaticProps() {
451 return {
421 return {
452 props: {
422 props: {
453 posts,
423 posts,
424+ highlights,
454 ecosystem,
425 ecosystem,
455 grantNumbers,
426 grantNumbers,
456 events: happeningNow.concat(futureEvents).concat(pastEvents),
427 events: happeningNow.concat(futureEvents).concat(pastEvents),