pulling in data from toml in courses, using image tags for svgs, adding next session on tall cards

This commit is contained in:
Gordon 2023-01-27 16:54:51 -08:00
parent 60dbb5ac65
commit 1070098198
8 changed files with 54 additions and 72 deletions

View File

@ -6,23 +6,27 @@ export default function TallCard({
description,
callout,
href,
next_cohort,
cohort,
className = ""
}) {
return <div className={"h-full flex flex-col min-h-0 " + className}>
<div key={title} className="bg-wall-100 rounded-xl h-full">
<div className="flex flex-col space-y-4 p-6 justify-between items-start lg:items-center relative">
<div className="rounded-lg w-full">
{image({ className: "w-full h-full" })}
<Link href={href}>
<div key={title} className="cursor-pointer bg-wall-100 rounded-xl h-full">
<div className="flex flex-col space-y-4 p-6 justify-between items-start lg:items-center relative">
<div className="rounded-lg w-full">
<img src={image} className="w-full h-full"></img>
</div>
<div className="flex flex-col space-y-2">
<h3>{title}</h3>
{cohort &&
<p className="text-sm"><span className="font-semibold">Next Session:</span> {cohort}</p>
}
<p className="text-sm">{description}</p>
</div>
</div>
<div className="flex flex-col space-y-2">
<h3>{title}</h3>
<p className="text-sm">{description}</p>
</div>
<Link href={href}>
<a className="button-sm bg-green-400 text-white text-sm w-fit self-start ph-8">{callout}</a>
</Link>
</div>
</div>
</div>
</Link>
</div>
}

View File

@ -1,7 +1,10 @@
+++
title = "App School Live"
weight = 6
next_cohort = "January 23, 2023"
date = "2023-05-01"
weight = 90
next_cohort = "May 2023"
image = "https://storage.googleapis.com/media.urbit.org/developers/images/app-school-live.svg"
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."
+++
The Urbit Foundation offers cohort classes to cover the [App

View File

@ -1,8 +1,9 @@
+++
title = "App Workshop Live"
weight = 15
weight = 30
next_cohort = "Late 2023"
image = "https://storage.googleapis.com/media.urbit.org/developers/images/app-workshop-live.svg"
description = "App Workshop will serve as a hands-on intensive course to build high-quality Urbit apps ready for end users. It serves as a follow-on to App School with more focus on building complex apps."
+++
App Workshop will serve as a hands-on intensive course to build

View File

@ -1,7 +1,9 @@
+++
title = "Core School Live"
weight = 20
weight = 10
next_cohort = "Late Summer 2023"
image = "https://storage.googleapis.com/media.urbit.org/developers/images/core-school-live.svg"
description = "Core School prepares experienced Hoon developers to work on the Arvo kernel, the Vere or New Mars runtime, and otherwise build the platform as a senior developer."
+++
The Urbit Foundation will offer a cohort classes to train new core developers.

View File

@ -1,7 +1,9 @@
+++
title = "Hoon School Live"
weight = 10
weight = 100
next_cohort = "March 20, 2023"
image = "https://storage.googleapis.com/media.urbit.org/developers/images/hoon-school-live.svg"
description = "Hoon School Live teaches the fundamentals of Hoon with a hands-on instructor, regular exercises and discussions, and a completion certification."
+++
Periodically, the Urbit Foundation has offered synchronous cohort classes which

View File

@ -5,58 +5,20 @@ import {
SingleColumn,
Section,
TwoUp,
getAllPosts
} from "@urbit/foundation-design-system";
import Header from "../components/Header";
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 AppWorkshopLive from "../components/icons/TallCard/appWorkshopLive";
import CoreSchoolLive from "../components/icons/TallCard/coreSchoolLive";
import { pair } from "../lib/util";
export default function Courses({ search }) {
export default function Courses({ search, courses }) {
const post = {
title: "Courses",
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: "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
},
{
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: "App Workshop Live",
description: "App Workshop will serve as a hands-on intensive course to build high-quality Urbit apps ready for end users. It serves as a follow-on to App School with more focus on building complex apps.",
slug: 'awl',
icon: AppWorkshopLive
},
{
title: "Core School Live",
description: "Core School prepares experienced Hoon developers to work on the Arvo kernel, the Vere or New Mars runtime, and otherwise build the platform as a senior developer.",
slug: 'csl',
icon: CoreSchoolLive
}
]
const pairedCourses = pair(courses);
return (
@ -79,10 +41,10 @@ export default function Courses({ search }) {
<TallCard
title={course.title}
description={course.description}
callout="Learn More"
href={`/courses/${course.slug}`}
image={course.icon}
image={course.image}
className="h-full"
cohort={course.next_cohort}
/>
);
})}
@ -94,3 +56,15 @@ export default function Courses({ search }) {
</Container>
);
}
export async function getStaticProps() {
const courses = getAllPosts(
["title", "slug", "next_cohort", "weight", "image", "description"],
"courses","weight"
);
return {
props: { courses },
};
}

View File

@ -21,10 +21,6 @@ import {
getNextPost,
} from "@urbit/foundation-design-system";
import { Comms, Ringsig, Squad } from "../../components/icons";
import HoonIcon from "../../components/icons/TallCard/hoon";
import EnvironmentIcon from "../../components/icons/TallCard/env";
import AppIcon from "../../components/icons/TallCard/app";
import FullStackIcon from "../../components/icons/TallCard/full";
import guidesTree from "../../cache/guides.json";
import { join } from "path";
import { pair } from '../../lib/util';
@ -187,7 +183,7 @@ function Landing({ search, posts }) {
description="Learn how to get your urbit development environment configured"
callout="View Guide"
href="/guides/core/environment"
image={EnvironmentIcon}
image="https://storage.googleapis.com/media.urbit.org/developers/images/environment.svg"
className="h-full"
/>
<TallCard
@ -195,7 +191,7 @@ function Landing({ search, posts }) {
description="Learn the fundamentals of the Hoon programming language"
callout="View Guide"
href="/guides/core/hoon-school"
image={HoonIcon}
image="https://storage.googleapis.com/media.urbit.org/developers/images/hoon-school.svg"
className="h-full"
/>
</TwoUp>
@ -205,7 +201,7 @@ function Landing({ search, posts }) {
description="Learn how to build Urbit userspace applications by writing your own Gall agents"
callout="View Guide"
href="/guides/core/app-school"
image={AppIcon}
image="https://storage.googleapis.com/media.urbit.org/developers/images/app-school.svg"
className="h-full"
/>
<TallCard
@ -213,7 +209,7 @@ function Landing({ search, posts }) {
description="Learn how to create Gall agents and integrate them into a React front-end"
callout="View Guide"
href="/guides/core/app-school-full-stack"
image={FullStackIcon}
image="https://storage.googleapis.com/media.urbit.org/developers/images/app-school-fullstack.svg"
className="h-full"
/>
</TwoUp>

View File

@ -158,7 +158,7 @@ export default function Home({ search, posts, highlights }) {
description="Learn the fundamentals of the Hoon programming language"
callout="View Guide"
href="/guides/core/hoon-school"
image={HoonIcon}
image="https://storage.googleapis.com/media.urbit.org/developers/images/hoon-school.svg"
className="h-full"
/>
<TallCard
@ -166,7 +166,7 @@ export default function Home({ search, posts, highlights }) {
description="Learn how to build Urbit userspace applications by writing your own Gall agents"
callout="View Guide"
href="/guides/core/app-school"
image={AppIcon}
image="https://storage.googleapis.com/media.urbit.org/developers/images/app-school.svg"
className="h-full"
/>
</TwoUp>