Merge pull request #37 from DongHY1/feat/route

Feat/route

src/components/ui/bento-grid.jsx

@@ -25,7 +25,11 @@ const BentoCard = ({ name, className, background, description, href }) => {
 				className,
 			)}
 		>
-			<div>{background}</div>
+			<img
+				src={background}
+				className="border rounded-md absolute md:-right-36 md:-top-20 md:transition-all md:duration-300 md:ease-out md:scale-[0.6] md:group-hover:scale-100"
+				alt={name}
+			/>
 			<div className="pointer-events-none z-10  flex transform-gpu flex-col gap-1 md:p-6 pl-4 transition-all duration-300 group-hover:-translate-y-10">
 				<h3 className="group-hover:opacity-0 transition-all duration-100 text-md font-semibold text-neutral-700 dark:text-neutral-300">
 					{name}

src/config/project.js

@@ -0,0 +1,37 @@
+const Works = [
+	{
+		name: "Large Language Model",
+		description: "Medical field chat application.",
+		href: "/project/llm",
+		background: "/1.png",
+	},
+	{
+		name: "Data Visualization",
+		description: "Chart and 3D models.",
+		href: "/project/data-visualization",
+		background: "/1.png",
+	},
+	{
+		name: "Hybrid Mobile App",
+		description: "QQ Music / We Sing Living Room.",
+		href: "/project/tme",
+		background: "/1.png",
+	},
+];
+
+const OpenSourceProjects = [
+	{
+		name: "Comments",
+		description: "Add comments to your website.",
+		href: "/project/comments",
+		background: "/1.png",
+	},
+	{
+		name: "daviddong.me",
+		description: "Personal website template.",
+		href: "/project/website",
+		background: "/1.png",
+	},
+];
+
+export { Works, OpenSourceProjects };

src/pages/+Layout.jsx

@@ -11,7 +11,7 @@ import { navigate } from "vike/client/router";
 export default function LayoutDefault({ children }) {
 	return (
 		<div className="w-full h-full bg-dot-black/[0.2] selection:text-blue-500 selection:bg-blue-100 flex flex-col items-center">
-			<main className="flex justify-center items-center flex-col">{children}</main>
+			<main className="h-full w-full flex justify-center items-center flex-col">{children}</main>
 			<Dock className="fixed bottom-2 bg-white">
 				<DockIcon
 					onClick={() => {

src/pages/index/+Page.jsx

@@ -1,70 +1,16 @@
 import { BentoCard, BentoGrid } from "@/components/ui/bento-grid";
 import { Tag } from "@/components/ui/tag";
-const Works = [
-	{
-		name: "Large Language Model",
-		description: "Medical field chat application.",
-		href: "/project/llm",
-		background: (
-			<img
-				src="/1.png"
-				className="border rounded-md absolute md:-right-36 md:-top-20 md:transition-all md:duration-300 md:ease-out md:scale-[0.6] md:group-hover:scale-100"
-				alt="Large Language Model"
-			/>
-		),
-	},
-	{
-		name: "Data Visualization",
-		description: "Chart and 3D models.",
-		href: "/project/data-visualization",
-		background: (
-			<img
-				src="/1.png"
-				className="border rounded-md absolute md:-right-36 md:-top-20 md:transition-all md:duration-300 md:ease-out md:scale-[0.6] md:group-hover:scale-100"
-				alt="Large Language Model"
-			/>
-		),
-	},
-	{
-		name: "Hybrid Mobile App",
-		description: "QQ Music / We Sing Living Room.",
-		href: "/project/tme",
-		background: (
-			<img
-				src="/1.png"
-				className="border rounded-md absolute md:-right-36 md:-top-20 md:transition-all md:duration-300 md:ease-out md:scale-[0.6] md:group-hover:scale-100"
-				alt="Large Language Model"
-			/>
-		),
-	},
-];
-
-const OpenSourceProjects = [
-	{
-		name: "Comments",
-		description: "Add comments to your website.",
-		href: "/project/comments",
-		background: (
-			<img
-				src="/1.png"
-				className="border rounded-md absolute md:-right-36 md:-top-20 md:transition-all md:duration-300 md:ease-out md:scale-[0.6] md:group-hover:scale-100"
-				alt="Large Language Model"
-			/>
-		),
-	},
-	{
-		name: "daviddong.me",
-		description: "Personal website template.",
-		href: "/",
-		background: (
-			<img
-				src="/1.png"
-				className="border rounded-md absolute md:-right-36 md:-top-20 md:transition-all md:duration-300 md:ease-out md:scale-[0.6] md:group-hover:scale-100"
-				alt="Large Language Model"
-			/>
-		),
-	},
-];
+import { OpenSourceProjects, Works } from "@/config/project";
+const ProjectLists = ({ title, items }) => (
+	<section>
+		<h3>{title}</h3>
+		<BentoGrid className="md:grid-rows-3">
+			{items.map((feature) => (
+				<BentoCard key={feature.name} {...feature} />
+			))}
+		</BentoGrid>
+	</section>
+);
 
 export default function Page() {
 	return (
@@ -95,25 +41,8 @@ export default function Page() {
 					free to contact me!
 				</p>
 			</section>
-
-			{/* Works */}
-			<section>
-				<h3>Works</h3>
-				<BentoGrid className="md:grid-rows-3">
-					{Works.map((feature) => (
-						<BentoCard key={feature.name} {...feature} />
-					))}
-				</BentoGrid>
-			</section>
-			{/* Open Source Project */}
-			<section>
-				<h3>Open Source Projects</h3>
-				<BentoGrid className="md:grid-rows-3">
-					{OpenSourceProjects.map((feature) => (
-						<BentoCard key={feature.name} {...feature} />
-					))}
-				</BentoGrid>
-			</section>
+			<ProjectLists title="Works" items={Works} />
+			<ProjectLists title="Open Source Projects" items={OpenSourceProjects} />
 		</article>
 	);
 }

src/pages/project/@name/+Page.jsx

@@ -0,0 +1,9 @@
+import { usePageContext } from "vike-react/usePageContext";
+export default function Page() {
+	const pageContext = usePageContext();
+	return (
+		<div className="h-screen w-full flex justify-center items-center">
+			<h1 className="text-3xl"> Hello {pageContext.routeParams.name}</h1>
+		</div>
+	);
+}

src/pages/project/index/+Page.jsx

@@ -0,0 +1,32 @@
+import { Button } from "@/components/ui/button";
+import { OpenSourceProjects, Works } from "@/config/project";
+import React from "react";
+import { navigate } from "vike/client/router";
+
+const ProjectLists = ({ title, items }) => (
+	<section>
+		<h3>{title}</h3>
+		<ul>
+			{items.map(({ name, href }) => (
+				<li key={name}>
+					<Button
+						variant="link"
+						className="text-md text-neutral-500 hover:text-neutral-800"
+						onClick={() => navigate(href)}
+					>
+						{name}
+					</Button>
+				</li>
+			))}
+		</ul>
+	</section>
+);
+
+export default function Page() {
+	return (
+		<main className="prose prose-p:text-neutral-500 p-12 h-screen">
+			<ProjectLists title="Works" items={Works} />
+			<ProjectLists title="Open Source Projects" items={OpenSourceProjects} />
+		</main>
+	);
+}

src/pages/project/index/+onBeforePrerenderStart.js

@@ -0,0 +1,7 @@
+// Environment: Node.js
+import { OpenSourceProjects, Works } from "@/config/project";
+export { onBeforePrerenderStart };
+async function onBeforePrerenderStart() {
+	const lists = [...OpenSourceProjects, ...Works];
+	return lists.map((list) => list.href);
+}