mirror of
https://github.com/urbit/developers.urbit.org.git
synced 2024-10-26 15:49:50 +03:00
pages: write courses page to use tallcards
This commit is contained in:
parent
5be3098a0d
commit
04ce2fcb35
@ -2,20 +2,48 @@ import Head from "next/head";
|
|||||||
import Meta from "../components/Meta";
|
import Meta from "../components/Meta";
|
||||||
import {
|
import {
|
||||||
Container,
|
Container,
|
||||||
Markdown,
|
|
||||||
SingleColumn,
|
SingleColumn,
|
||||||
Section,
|
Section,
|
||||||
TwoUp,
|
TwoUp,
|
||||||
getAllPosts,
|
|
||||||
} from "@urbit/foundation-design-system";
|
} from "@urbit/foundation-design-system";
|
||||||
import Header from "../components/Header";
|
import Header from "../components/Header";
|
||||||
import Footer from "../components/Footer";
|
import Footer from "../components/Footer";
|
||||||
|
import TallCard from "../components/TallCard";
|
||||||
|
import AppSchoolLive from "../components/icons/TallCard/appSchoolLive"
|
||||||
|
import HoonSchoolLive from "../components/icons/TallCard/hoonSchoolLive";
|
||||||
|
import { pair } from "../lib/util";
|
||||||
|
|
||||||
export default function Courses({ search, courses }) {
|
export default function Courses({ search }) {
|
||||||
const post = {
|
const post = {
|
||||||
title: "Courses",
|
title: "Courses",
|
||||||
description: "Join the next session of Hoon School or App School.",
|
description: "Join the next session of Hoon School or App School.",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// We can't just import this information from the content folder,
|
||||||
|
// because it uses svg icons for the cards that need to be imported
|
||||||
|
// as React components, so they can be detected by Tailwind and
|
||||||
|
// restyled for light and dark modes.
|
||||||
|
//
|
||||||
|
// The icon components need to be imported, so they can't
|
||||||
|
// just be declared as TOML metadata, either.
|
||||||
|
|
||||||
|
const courses = [
|
||||||
|
{
|
||||||
|
title: "App School Live",
|
||||||
|
description: "App School focuses on how to build a backend Gall agent, then on connecting it to a React-based front-end. When you're done, you'll be able to produce and distribute your own Urbit apps.",
|
||||||
|
slug: 'asl',
|
||||||
|
icon: AppSchoolLive
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Hoon School Live",
|
||||||
|
description: "Hoon School Live teaches the fundamentals of Hoon with a hands-on instructor, regular exercises and discussions, and a completion certification.",
|
||||||
|
slug: 'hsl',
|
||||||
|
icon: HoonSchoolLive
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const pairedCourses = pair(courses);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container>
|
<Container>
|
||||||
<Head>
|
<Head>
|
||||||
@ -28,36 +56,25 @@ export default function Courses({ search, courses }) {
|
|||||||
<h1>Courses</h1>
|
<h1>Courses</h1>
|
||||||
</Section>
|
</Section>
|
||||||
<Section>
|
<Section>
|
||||||
<TwoUp>
|
{pairedCourses.map((pair) => {
|
||||||
{courses.sort((a, b) => a.weight > b.weight ? 1 : -1).map((course) => {
|
return <TwoUp>
|
||||||
return (
|
{pair.map((course) => {
|
||||||
<div key={course.slug} className="flex flex-col space-y-4 h-full">
|
return (
|
||||||
<h3>{course.title}</h3>
|
<TallCard
|
||||||
<div className="markdown">
|
title={course.title}
|
||||||
<Markdown.render content={JSON.parse(course.content)} />
|
description={course.description}
|
||||||
</div>
|
callout="Learn More"
|
||||||
</div>
|
href={`/courses/${course.slug}`}
|
||||||
);
|
image={course.icon}
|
||||||
})}
|
className="h-full"
|
||||||
</TwoUp>
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</TwoUp>
|
||||||
|
})}
|
||||||
</Section>
|
</Section>
|
||||||
</SingleColumn>
|
</SingleColumn>
|
||||||
<Footer />
|
<Footer />
|
||||||
</Container>
|
</Container>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getStaticProps() {
|
|
||||||
const courses = getAllPosts(
|
|
||||||
["title", "slug", "weight", "description", "extra", "content"],
|
|
||||||
"courses",
|
|
||||||
"weight"
|
|
||||||
).map((e) => ({
|
|
||||||
...e,
|
|
||||||
content: JSON.stringify(Markdown.parse({ post: { content: e.content } })),
|
|
||||||
}));
|
|
||||||
|
|
||||||
return {
|
|
||||||
props: { courses },
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
Loading…
Reference in New Issue
Block a user