Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit b506d33

Browse files
kshyrkshyr
committed
add header, dynamic routing for projects, library page
1 parent 81ffb8c commit b506d33

11 files changed

Lines changed: 382 additions & 45 deletions

File tree

‎.prettierrc‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"plugins": [
33
"prettier-plugin-tailwindcss"
4-
]
4+
],
5+
"tabWidth": 2
56
}

‎app/[project]/page.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { projects } from "../projects";
2+
export default function Page({ params }: { params: { project: string } }) {
3+
const project = projects.find((i) => i.handle === params.project);
4+
return (
5+
<div>
6+
My Post: {JSON.stringify(project)} {project?.bodyMarkdown}
7+
</div>
8+
);
9+
}

‎app/globals.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,12 @@ div.ch-editor-tab-active {
115115
color: var(--ch-tab-active-color);
116116
}
117117

118+
@layer components {
119+
.nav-item {
120+
@apply font-bold tracking-wide text-foreground transition-colors hover:text-muted-foreground;
121+
}
122+
}
123+
118124
@layer base {
119125
* {
120126
@apply border-border;

‎app/layout.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { ThemeProvider } from "@/components/ThemeProvider";
22
import "./globals.css";
33
import "@code-hike/mdx/dist/index.css";
44
import { Inter, Roboto_Mono } from "next/font/google";
5+
import Header from "@/components/Header";
56

67
const inter = Inter({
78
subsets: ["latin"],
@@ -27,8 +28,9 @@ export default function RootLayout({
2728
}) {
2829
return (
2930
<html lang="en">
30-
<body className={`${inter.className} ${roboto_mono.variable}`}>
31+
<body className={`${inter.className} ${roboto_mono.variable} container`}>
3132
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
33+
<Header />
3234
{children}
3335
</ThemeProvider>
3436
</body>

‎app/library/page.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function Page() {
2+
return <div>dsdsdsdsd</div>;
3+
}

‎app/page.tsx‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,24 @@
11
import ProjectSheet from "@/components/ProjectSheet";
22
import ThemeSwitch from "@/components/ThemeSwitch";
33
import { projects } from "./projects";
4+
import ProjectCard from "@/components/ProjectCard";
45

6+
/* <main className="flex min-h-screen flex-col items-center gap-8 p-24"> */
57
export default function Home() {
68
return (
7-
<main className="flex min-h-screen flex-col items-center gap-8 p-24">
8-
<ThemeSwitch />
9-
<section className="flex flex-col gap-4">
10-
{projects.map((project) => {
11-
return (
12-
<ProjectSheet
13-
type={project.type}
14-
key={project.title}
15-
title={project.title}
16-
description={project.description}
17-
tags={project.tags}
18-
bodyMarkdown={project.bodyMarkdown}
19-
/>
20-
);
21-
})}
22-
</section>
23-
</main>
9+
<section className="flex flex-col gap-4">
10+
{projects.map((project) => {
11+
return (
12+
<ProjectCard
13+
key={project.title}
14+
handle={project.handle}
15+
type={project.type}
16+
title={project.title}
17+
description={project.description}
18+
tags={project.tags}
19+
/>
20+
);
21+
})}
22+
</section>
2423
);
2524
}

‎app/projects.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { headers } from "next/dist/client/components/headers";
55

66
const rawProjects: Project[] = [
77
{
8+
handle: "vec",
89
type: "blog",
910
title: "Implementing Vec in Rust",
1011
description:

‎components/Header.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import Image from "next/image";
2+
import ThemeSwitch from "./ThemeSwitch";
3+
import Link from "next/link";
4+
5+
export default function Header() {
6+
return (
7+
<header className="flex h-24 items-center justify-between">
8+
<Link href="/" className="flex h-8 items-center justify-center">
9+
<Image
10+
src="/logo.svg"
11+
width={48}
12+
height={48}
13+
className="border-none shadow-none invert dark:invert-0"
14+
alt="logo"
15+
/>
16+
</Link>
17+
<div className="flex items-center gap-8">
18+
<Link href="/" className="no-underline">
19+
<span className="nav-item">Home</span>
20+
</Link>
21+
<Link href="/library" className="no-underline">
22+
<span className="nav-item">Library</span>
23+
</Link>
24+
<ThemeSwitch />
25+
</div>
26+
</header>
27+
);
28+
}

‎components/ProjectCard.tsx‎

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,46 @@ import { Card, CardDescription, CardTitle, CardHeader } from "./ui/card";
22
import { Github, ScrollText } from "lucide-react";
33
import { Badge } from "./ui/badge";
44
import type { Project } from "@/lib/types";
5+
import Link from "next/link";
56

67
export default function ProjectCard({
8+
handle,
79
type,
810
title,
911
description,
1012
tags,
1113
}: Partial<Project>) {
1214
return (
13-
<Card className="group flex w-96 border-transparent transition-colors hover:cursor-pointer hover:border-b-primary/10 hover:bg-secondary hover:dark:border-b-border hover:dark:border-t-primary/10">
14-
<CardHeader className="w-full gap-1">
15-
<div className="flex w-full items-center justify-between">
16-
<CardTitle className="max-w-[16rem] text-left leading-tight">
17-
{title}
18-
{/* <span className="mt-0.5 block h-[1px] max-w-0 bg-foreground transition-all duration-500 group-hover:max-w-full"></span> */}
19-
</CardTitle>
20-
{type === "blog" ? <ScrollText width={20} /> : <Github width={20} />}
21-
</div>
22-
<CardDescription className="text-left">{description}</CardDescription>
23-
<div className="flex flex-wrap gap-2">
24-
{tags?.map((tag, i) => {
25-
return (
26-
<Badge
27-
key={tag + i}
28-
variant="secondary"
29-
className="group-hover:border-primary/50"
30-
>
31-
{tag}
32-
</Badge>
33-
);
34-
})}
35-
</div>
36-
</CardHeader>
37-
</Card>
15+
<Link href={"/" + handle} className="no-underline">
16+
<Card className="group flex w-96 border-transparent transition-colors hover:cursor-pointer hover:border-b-primary/10 hover:bg-secondary dark:border-l-border hover:dark:border-b-border hover:dark:border-t-primary/10">
17+
<CardHeader className="w-full gap-1">
18+
<div className="mb-1 flex h-4 w-full items-center justify-between">
19+
<CardTitle className="max-w-[16rem] text-left leading-tight">
20+
{title}
21+
{/* <span className="mt-0.5 block h-[1px] max-w-0 bg-foreground transition-all duration-500 group-hover:max-w-full"></span> */}
22+
</CardTitle>
23+
{type === "blog" ? (
24+
<ScrollText width={20} />
25+
) : (
26+
<Github width={20} />
27+
)}
28+
</div>
29+
<CardDescription className="text-left">{description}</CardDescription>
30+
<div className="flex flex-wrap gap-2">
31+
{tags?.map((tag, i) => {
32+
return (
33+
<Badge
34+
key={tag + i}
35+
variant="secondary"
36+
className="group-hover:border-primary/50"
37+
>
38+
{tag}
39+
</Badge>
40+
);
41+
})}
42+
</div>
43+
</CardHeader>
44+
</Card>
45+
</Link>
3846
);
3947
}

‎components/ui/sheet.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const sheetVariants = cva(
4646
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
4747
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
4848
right:
49-
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
49+
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right max-w-6xl",
5050
},
5151
},
5252
defaultVariants: {

0 commit comments

Comments
 (0)