add a projects page

this projects page uses dynamic routes to let me use markdown files
inside the projects astro content collection.
This commit is contained in:
Fries 2023-07-15 23:14:53 -07:00
parent 5d14a6cc08
commit 3f866e5a77
8 changed files with 521 additions and 450 deletions

2
.prettierignore Normal file
View File

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

5
.prettierrc.json Normal file
View File

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

View File

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

File diff suppressed because it is too large Load Diff

View File

@ -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,
};

View File

@ -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.

View File

@ -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>

View File

@ -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>