a programming education platform
www.hypercommit.com
education
1import type { Metadata } from "next"
2import Image from "next/image"
3import Link from "next/link"
4import {
5 Breadcrumb,
6 BreadcrumbItem,
7 BreadcrumbLink,
8 BreadcrumbList,
9 BreadcrumbPage,
10 BreadcrumbSeparator,
11} from "@workspace/ui/components/breadcrumb"
12import illustration from "./illustration.webp"
13
14export const metadata: Metadata = {
15 title: "Build your own Git",
16 description: "Reimplement Git, one command at a time.",
17 openGraph: {
18 title: "Build your own Git",
19 description: "Reimplement Git, one command at a time.",
20 images: [
21 {
22 url: illustration.src,
23 width: illustration.width,
24 height: illustration.height,
25 alt: "Build your own Git",
26 type: "image/webp",
27 },
28 ],
29 },
30 twitter: {
31 card: "summary_large_image",
32 title: "Build your own Git",
33 description: "Reimplement Git, one command at a time.",
34 images: [illustration.src],
35 },
36}
37
38export default function Page() {
39 return (
40 <div className="flex min-h-svh p-8">
41 <div className="flex min-w-0 flex-col gap-4 text-sm leading-loose">
42 <Breadcrumb>
43 <BreadcrumbList>
44 <BreadcrumbItem>
45 <BreadcrumbLink href="/">~</BreadcrumbLink>
46 </BreadcrumbItem>
47 <BreadcrumbSeparator />
48 <BreadcrumbItem>
49 <BreadcrumbPage>Build your own Git</BreadcrumbPage>
50 </BreadcrumbItem>
51 </BreadcrumbList>
52 </Breadcrumb>
53 <div className="pointer-events-auto relative flex aspect-1050/660 w-full max-w-md items-center justify-center overflow-hidden rounded-lg bg-muted shadow-sm">
54 <Image
55 alt="Thumbnail for Build your own Git"
56 src={illustration}
57 width={illustration.width}
58 height={illustration.height}
59 sizes="(max-width: 768px) 100vw, 1050px"
60 className="object-cover"
61 />
62 </div>
63 <div>
64 <h1 className="text-lg font-semibold">Build your own Git</h1>
65 <p className="text-lg text-muted-foreground">
66 Implement the most used version control system in Go.
67 </p>
68 </div>
69 <div className="mt-4">
70 <h2 className="text-base font-medium">Lessons</h2>
71 <ol className="mt-2 flex flex-col gap-2">
72 <li>
73 <Link
74 href="/build-your-own-git/init"
75 className="group/lesson flex items-center gap-3 rounded-md no-underline transition-opacity hover:opacity-80"
76 >
77 <span className="text-sm text-muted-foreground tabular-nums">
78 01.
79 </span>
80 <span className="text-base text-foreground/80">
81 Repository initialization
82 </span>
83 </Link>
84 </li>
85 </ol>
86 </div>
87 </div>
88 </div>
89 )
90}