@@ -19,6 +19,7 @@ import PostPreview from "../components/PostPreview";
1919import EventPreview from "../components/EventPreview";
2020import { eventKeys } from "../lib/constants";
2121import IndexCard from "../components/ecosystem/IndexCard";
22+import HighlightCard from "../components/HighlightCard";
2223import fs from "fs";
2324import path from "path";
2425import Meta from "../components/Meta";
@@ -26,6 +27,7 @@ import { matchEcosystemPost } from "../lib/lib";
2627
2728export default function Home({
2829 posts,
30+ highlights,
2931 ecosystem,
3032 events,
3133 grantNumbers,
@@ -58,57 +60,15 @@ export default function Home({
5860 // Hero
5961 }
6062
61−
62− <Section className="pb-12">
63−
63+ {
64+ // Highlights
65+ }
66+ <Section className="pb-12">
6467 <div className="flex flex-col space-y-4 md:space-y-0 md:flex-row md:space-x-4">
65−
66−
67− <Link href="#">
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−
68+ <HighlightCard highlight={highlights[0]} key={highlights[0].slug} />
69+ <HighlightCard highlight={highlights[1]} key={highlights[1].slug} />
70+ <HighlightCard highlight={highlights[2]} key={highlights[2].slug} />
11071 </div>
111−
11272 </Section>
11373
11474
@@ -372,6 +332,8 @@ export default function Home({
372332 );
373333}
374334
335+
336+
375337export async function getStaticProps() {
376338 // Latest blog posts
377339 const posts = getAllPosts(
@@ -380,6 +342,14 @@ export async function getStaticProps() {
380342 "date"
381343 );
382344
345+
346+ // Highlights
347+ const highlights = getAllPosts(
348+ ["title", "slug", "image", "url", "description"],
349+ "highlights"
350+ );
351+
352+
383353 // Latest ecosystem report with matched post metadata
384354 const ecosystem = matchEcosystemPost(getAllPosts(
385355 ["date", "featured-1", "featured-2", "featured-3"],
@@ -451,6 +421,7 @@ export async function getStaticProps() {
451421 return {
452422 props: {
453423 posts,
424+ highlights,
454425 ecosystem,
455426 grantNumbers,
456427 events: happeningNow.concat(futureEvents).concat(pastEvents),