add a projects page

this projects page uses dynamic routes to let me use markdown files
inside the projects astro content collection.

.prettierignore

@@ -0,0 +1,2 @@
+.astro
+dist

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+	"singleQuote": false,
+	"useTabs": true,
+	"tabWidth": 4
+}

package.json

@@ -12,5 +12,8 @@
 	"dependencies": {
 		"@fontsource/atkinson-hyperlegible": "^4.5.11",
 		"astro": "^2.1.0"
+	},
+	"devDependencies": {
+		"prettier": "3.0"
 	}
 }

src/components/Navigation.astro

@@ -1,16 +1,6 @@
-<nav id="nav-container" aria-label="a navigation bar with links">
+<nav aria-label="a navigation bar with links">
 	<a href="/">Home</a>
 	<a href="/blog">Blog</a>
 	<a href="/projects">Projects</a>
 	<a href="/friends">Friends</a>
 </nav>
-
-<style>
-	#nav-container {
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-		flex-wrap: wrap;
-		gap: 20px;
-	}
-</style>

src/content/config.ts

@@ -2,8 +2,10 @@ import { defineCollection } from "astro:content";
 
 const homepageCollection = defineCollection({});
 const friendsCollection = defineCollection({});
+const projectsCollection = defineCollection({});
 
 export const collections = {
-	'homepage': homepageCollection,
-	'friends': friendsCollection
-}
+	homepage: homepageCollection,
+	friends: friendsCollection,
+	projects: projectsCollection,
+};

src/content/projects/meowy.md

@@ -0,0 +1,14 @@
+---
+title: "Meowy Webring"
+description: "a little webring project me and my friends are making in rust :3!"
+---
+# [Meowy Webring](https://git.solarpunk.moe/Solarpunk/meowy-webring)
+a little webring project me and my friends are making in rust :3! 
+
+this webring works by having a server that reads from a json file containing the url of the site and an optional name. 
+
+you can go to the next or previous site with just pointing a link in your page to next or previous http routes on the webrings url which will redirect to that page.
+
+there is also a names api you can GET request and it will return json with the names of the previous or next site or if the sites don't have a name, it will return the url of the site. 
+
+the reason i made this an api is so you don't have to use javascript if you don't want to, you can just point a link to the previous or next routes and it will work. but, if you want to showcase the names of the site, you can either use javascript or if you're using a server side rendered webpage, you can use that too.

src/pages/projects.astro

@@ -1,8 +1,19 @@
 ---
-import WorkInProgress from "../components/WorkInProgress.astro";
 import Layout from "../layouts/Layout.astro";
+import { getCollection, getEntryBySlug } from "astro:content";
+
+const projects = await getCollection("projects");
 ---
 
 <Layout title="fries gay projects">
-	<WorkInProgress />
+	<main>
+		<h1>Projects</h1>
+		<p>a page where i show off my projects!</p>
+		{projects.map(project => (
+			<section>
+				<h2><a href={`/projects/${project.slug}`}>{project.data.title}</a></h2>
+				<p>{project.data.description}</p>
+			</section>
+		))}
+	</main>
 </Layout>

src/pages/projects/[page].astro

@@ -0,0 +1,19 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import { getCollection } from "astro:content";
+
+export async function getStaticPaths() {
+	const projects = await getCollection("projects");
+	return projects.map(project => ({
+		params: {page: project.slug}, props: {project}
+	}));
+}
+
+const { project } = Astro.props;
+const { Content } = await project.render();
+---
+<Layout title={project.data.title}>
+	<article>
+		<Content />
+	</article>
+</Layout>

src/styles/global.css

@@ -82,3 +82,12 @@ hr {
 hr {
 	border: 1px solid;
 }
+
+nav {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	flex-wrap: wrap;
+	gap: 20px;
+	padding-top: 10px;
+}