feat: add pagination in projects

Author: TheComputerM

src/components/ProjectCard.astro

@@ -48,3 +48,6 @@ const { Content } = await render(project);
     }
   </Card>
 </Grid>
+<Card title="tags" mt="2">
+  {repository.topics.join(", ")}
+</Card>

src/components/ProjectPagination.tsx

@@ -0,0 +1,44 @@
+import { Pagination } from "@ark-ui/solid";
+import type { Page } from "astro";
+import type { CollectionEntry } from "astro:content";
+import { For, type Component } from "solid-js";
+import TablerChevronLeft from "~icons/tabler/chevron-left";
+import TablerChevronRight from "~icons/tabler/chevron-right";
+import { navigate } from "astro:transitions/client";
+import { paginationStyles } from "~/styles/pagination";
+
+export const ProjectPagination: Component<{
+	page: Page<CollectionEntry<"projects">>;
+}> = (props) => {
+	return (
+		<Pagination.Root
+			count={props.page.total}
+			pageSize={props.page.size}
+			page={props.page.currentPage}
+			onPageChange={(details) => navigate(`/projects/${details.page}`)}
+			class={paginationStyles.root}
+		>
+			<Pagination.PrevTrigger class={paginationStyles.trigger}>
+				<TablerChevronLeft />
+			</Pagination.PrevTrigger>
+			<Pagination.Context>
+				{(api) => (
+					<For each={api().pages}>
+						{(page, index) =>
+							page.type === "page" ? (
+								<Pagination.Item {...page} class={paginationStyles.item}>{page.value}</Pagination.Item>
+							) : (
+								<Pagination.Ellipsis index={index()}>
+									&#8230;
+								</Pagination.Ellipsis>
+							)
+						}
+					</For>
+				)}
+			</Pagination.Context>
+			<Pagination.NextTrigger class={paginationStyles.trigger}>
+				<TablerChevronRight />
+			</Pagination.NextTrigger>
+		</Pagination.Root>
+	);
+};

src/components/ui/Card.tsx

@@ -1,8 +1,13 @@
-import type { ParentComponent } from "solid-js";
+import { splitProps, type ParentComponent } from "solid-js";
 import { css } from "styled-system/css";
-import { Box, HStack } from "styled-system/jsx";
+import { Box, HStack, type BoxProps } from "styled-system/jsx";
 
-export const Card: ParentComponent<{ title: string }> = (props) => {
+interface CardProps extends BoxProps {
+	title: string;
+}
+
+export const Card: ParentComponent<CardProps> = (_props) => {
+	const [props, boxProps] = splitProps(_props, ["title", "children"]);
 	const HorizontalLine = (
 		<Box
 			borderTopWidth="normal"
@@ -14,7 +19,7 @@ export const Card: ParentComponent<{ title: string }> = (props) => {
 	);
 
 	return (
-		<Box>
+		<Box {...boxProps}>
 			<HStack alignItems="end">
 				{HorizontalLine}
 				<span class={css({ marginBottom: "-0.5em" })}>{props.title}</span>

src/pages/projects/[page].astro

@@ -4,14 +4,15 @@ import { CollectionEntry, getCollection } from "astro:content";
 import { css } from "styled-system/css";
 import MDContainer from "~/components/MDContainer.astro";
 import ProjectCard from "~/components/ProjectCard.astro";
+import { ProjectPagination } from "~/components/ProjectPagination";
 import BaseLayout from "~/layouts/BaseLayout.astro";
 
 export const getStaticPaths = (async ({ paginate }) => {
   const projects = (await getCollection("projects")).sort(
     (a, b) => b.data.priority - a.data.priority,
   );
 
-  return paginate(projects, { pageSize: 4 });
+  return paginate(projects, { pageSize: 3 });
 }) satisfies GetStaticPaths;
 
 interface Props {
@@ -28,7 +29,10 @@ const { page } = Astro.props;
       Some of my most cherished and meticulously developed projects.
     </p>
     <hr />
+    <ProjectPagination page={page} client:load transition:persist="p1" />
     {page.data.map((project) => <ProjectCard project={project} />)}
+    <br />
+    <ProjectPagination page={page} client:load transition:persist="p2" />
     <hr />
     <p>
       See more of my work and other open-source contributions over on my

src/styles/button.ts

@@ -0,0 +1,60 @@
+import { cva } from "styled-system/css";
+
+export const buttonStyles = cva({
+	base: {
+		alignItems: "center",
+		appearance: "none",
+		cursor: "pointer",
+		display: "inline-flex",
+		fontWeight: "semibold",
+		isolation: "isolate",
+		minWidth: "0",
+		justifyContent: "center",
+		outline: "none",
+		position: "relative",
+		transitionDuration: "normal",
+		transitionProperty: "background, border-color, color, box-shadow",
+		transitionTimingFunction: "default",
+		userSelect: "none",
+		verticalAlign: "middle",
+		whiteSpace: "nowrap",
+		_hidden: {
+			display: "none",
+		},
+		"& :where(svg)": {
+			fontSize: "1.1em",
+			width: "1.1em",
+			height: "1.1em",
+		},
+	},
+	variants: {
+		variant: {
+			solid: {
+				backgroundColor: "fg.default",
+				color: "bg.default",
+				_hover: {
+					backgroundColor: "fg.canvas",
+				},
+			},
+		},
+		size: {
+			md: {
+				h: "8",
+				minW: "8",
+				textStyle: "sm",
+				px: "2",
+				gap: "2",
+			},
+		},
+		icon: {
+			true: {
+				px: 0,
+			},
+		},
+	},
+	defaultVariants: {
+		variant: "solid",
+		size: "md",
+		icon: false,
+	},
+});

src/styles/pagination.ts

@@ -0,0 +1,26 @@
+import { css } from "styled-system/css";
+import { buttonStyles } from "./button";
+import { token } from "styled-system/tokens";
+
+export const paginationStyles = {
+	root: css({
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "stretch",
+		gap: "6",
+	}),
+	trigger: buttonStyles({ icon: true }),
+	item: css({
+    cursor: "pointer",
+    fontVariantNumeric: "tabular-nums",
+    backgroundColor: "bg.canvas",
+    px: "2",
+    fontSize: "lg",
+		"&[data-selected]": {
+			textDecoration: "underline",
+      textDecorationThickness: token.var("borderWidths.normal"),
+      backgroundColor: "fg.default",
+      color: "bg.canvas"
+		},
+	}),
+};