feat: add projects page

Author: TheComputerM

bun.lockb

@@ -15,6 +15,7 @@
     "@ark-ui/solid": "^4.10.0",
     "@astrojs/solid-js": "^5.0.4",
     "@fontsource-variable/jetbrains-mono": "^5.1.2",
+    "@octokit/core": "^6.1.3",
     "astro": "^5.1.8",
     "astro-og-canvas": "^0.5.6",
     "graphql-request": "^7.1.2",

package.json

@@ -23,6 +23,7 @@ const { class: className } = Astro.props;
     >
       <main class={css({ maxWidth: "prose" })}>
         <slot />
+        <br />
       </main>
     </Box>
   </Container>

src/components/MDContainer.astro

@@ -40,6 +40,7 @@ const Navbar: Component = () => {
 						<TablerHomeFilled />
 					</NavItem>
 					<HStack gap="4">
+						<a href="/projects">Projects</a>
 						<a href="/blog">Blog</a>
 						<Divider orientation="vertical" thickness="2" height="1em" />
 						<NavItem

src/components/Navbar.tsx

@@ -0,0 +1,50 @@
+---
+import type { CollectionEntry } from "astro:content";
+import { render } from "astro:content";
+import { Grid } from "styled-system/jsx";
+import { octokit } from "~/content/projects/client";
+import { Card } from "./ui/Card";
+
+interface Props {
+	project: CollectionEntry<"projects">;
+}
+
+const { project } = Astro.props;
+const [owner, repoName] = project.data.repo.split("/");
+const { data: repository } = await octokit.request(
+	"GET /repos/{owner}/{repo}",
+	{
+		owner,
+		repo: repoName,
+	},
+);
+
+const homepage = repository.homepage || project.data.homepage;
+
+const { Content } = await render(project);
+---
+
+<h2>{project.data.name}</h2>
+<Grid columns={{ base: 1, sm: 2 }}>
+  <Card title="Description">
+    <Content />
+  </Card>
+  <Card title="Details">
+    <p>
+      <b>GitHub: </b>
+      <a href={`https://github.com/${project.data.repo}`} target="_blank">
+        {project.data.repo}
+      </a>
+    </p>
+    {
+      homepage && (
+        <p>
+          <b>Homepage: </b>
+          <a href={homepage} target="_blank">
+            {homepage}
+          </a>
+        </p>
+      )
+    }
+  </Card>
+</Grid>

src/components/ProjectCard.astro

@@ -0,0 +1,34 @@
+import type { ParentComponent } from "solid-js";
+import { css } from "styled-system/css";
+import { Box, HStack } from "styled-system/jsx";
+
+export const Card: ParentComponent<{ title: string }> = (props) => {
+	const HorizontalLine = (
+		<Box
+			borderTopWidth="normal"
+			borderLeftWidth="normal"
+			borderStyle="solid"
+			flexGrow="1"
+			aria-hidden="true"
+		/>
+	);
+
+	return (
+		<Box>
+			<HStack alignItems="end">
+				{HorizontalLine}
+				<span class={css({ marginBottom: "-0.5em" })}>{props.title}</span>
+				{HorizontalLine}
+			</HStack>
+			<Box
+				borderStyle="solid"
+				borderLeftWidth="normal"
+				borderRightWidth="normal"
+				borderBottomWidth="normal"
+				p="4"
+			>
+				{props.children}
+			</Box>
+		</Box>
+	);
+};

src/components/ui/Card.tsx

@@ -13,4 +13,13 @@ const blog = defineCollection({
 	loader: hashnodeLoader(),
 });
 
-export const collections = { pages, blog };
+const projects = defineCollection({
+	loader: glob({ pattern: "**/[^_]*.md", base: "./src/content/projects" }),
+	schema: z.object({
+		name: z.string(),
+		repo: z.string(),
+		homepage: z.string().optional(),
+	}),
+});
+
+export const collections = { pages, blog, projects };

src/content.config.ts

@@ -19,5 +19,3 @@ Today I enjoy developing applications and finding optimized solutions to complex
 ## Contact Me
 
 Feel free to email me at [[email protected]](mailto:[email protected])
-
------

src/content/pages/index.md

@@ -0,0 +1,3 @@
+import { Octokit } from "@octokit/core";
+
+export const octokit = new Octokit();

src/content/projects/client.ts

@@ -0,0 +1,6 @@
+---
+name: Demochain
+repo: thecomputerm/demochain
+---
+
+A dummy peer-2-peer **blockchain** network that can run purely in your **browser** using WebRTC *without* a central server.

src/content/projects/demochain.md

@@ -0,0 +1,7 @@
+---
+name: FFIgenPad
+repo: thecomputerm/ffigenpad
+homepage: https://ffigenpad.surge.sh
+---
+
+My [GSoC](https://summerofcode.withgoogle.com/archive/2024/projects/NDTqal0i) project with the [Dart](https://dart.dev/) organization. Use your C headers to generate *dart:ffi* bindings fully in the browser using **WASM**.

src/content/projects/ffigenpad.md

@@ -0,0 +1,6 @@
+---
+name: Lex
+repo: crux-bphc/lex
+---
+
+A flutter app with a companion [golang server](https://github.com/crux-bphc/lex-backend) that enables the students of BITS Hyderabad to be more academically productive.

src/content/projects/lex.md

@@ -0,0 +1,6 @@
+---
+name: Svelte Materialify
+repo: thecomputerm/svelte-materialify
+---
+
+**DEPRECATED**, my **first** huge open-source project, a *material design* component library for **Svelte** 3.

src/content/projects/svelte-materialify.md

@@ -81,7 +81,7 @@
 		color: var(--colors-bg-canvas);
 	}
 
-	p {
+	p:not(:last-child) {
 		margin-bottom: var(--line-heights-normal);
 	}
 

src/layouts/app.css

@@ -0,0 +1,25 @@
+---
+import { getCollection } from "astro:content";
+import { css } from "styled-system/css";
+import MDContainer from "~/components/MDContainer.astro";
+import ProjectCard from "~/components/ProjectCard.astro";
+import BaseLayout from "~/layouts/BaseLayout.astro";
+
+const projects = await getCollection("projects");
+---
+
+<BaseLayout title="Projects | TheComputerM">
+  <MDContainer>
+    <h1 class={css({ marginBottom: "2" })}>Projects</h1>
+    <p class={css({ color: "fg.canvas" })}>
+      Some of my most cherished and meticulously developed projects.
+    </p>
+    <hr />
+    {projects.map((project) => <ProjectCard project={project} />)}
+    <hr />
+    <p>
+      See more of my work and other open-source contributions over on my
+      <a href="https://github.com/TheComputerM" target="_blank">GitHub</a>.
+    </p>
+  </MDContainer>
+</BaseLayout>