move projects to collection

src/content/config.ts

@@ -9,6 +9,18 @@ const posts = defineCollection({
     image: z.string().optional(),
   }),
 });
+const projects = defineCollection({
+  type: 'content',
+  schema: z.object({
+    category: z.string(),
+    name: z.string(),
+    description: z.string(),
+    image: z.string().optional(),
+    links: z.array(z.object({text: z.string(), url: z.string()})),
+  }),
+});
+
 export const collections = {
   posts,
+  projects,
 };

src/content/projects/censura.md

@@ -0,0 +1,16 @@
+---
+category: "minecraft"
+name: "Censura"
+description: "Advanced censorship plugin for bukkit minecraft servers."
+image: "/assets/projects/censura.webp"
+links: [
+  {
+    text: "Website",
+    url: "https://modrinth.com/plugin/censura"
+  },
+  {
+    text: "Source",
+    url: "https://github.com/YouHaveTrouble/Censura"
+  },
+]
+---

src/content/projects/commandwhitelist.md

@@ -0,0 +1,16 @@
+---
+category: "minecraft"
+name: "CommandWhitelist"
+description: "Minecraft bukkit plugin that allows to control precisely what commands players can see and use."
+image: "/assets/projects/cw.png"
+links: [
+  {
+    text: "Website",
+    url: "https://modrinth.com/plugin/commandwhitelist"
+  },
+  {
+    text: "Source",
+    url: "https://github.com/YouHaveTrouble/CommandWhitelist"
+  },
+]
+---

src/content/projects/dumbforksgenerator.md

@@ -0,0 +1,12 @@
+---
+category: "websites"
+name: "Dumb Forks Generator"
+description: "PHP name generator for dumb minecraft server software fork names."
+image: "/assets/projects/dumbforkgenerator.png"
+links: [
+  {
+    text: "Website",
+    url: "https://dumbforks.yht.one"
+  },
+]
+---

src/content/projects/guesstheanime.md

@@ -0,0 +1,16 @@
+---
+category: "websites"
+name: "Guess the Anime"
+description: "A game where you guess an anime title based off blurred art and a synopsis."
+image: "/assets/projects/guesstheanime.png"
+links: [
+  {
+    text: "Website",
+    url: "https://guessanime.yht.one"
+  },
+  {
+    text: "Source",
+    url: "https://github.com/YouHaveTrouble/GuessTheAnime"
+  },
+]
+---

src/content/projects/guildmaster.md

@@ -0,0 +1,16 @@
+---
+category: "websites"
+name: "Guild Master"
+description: "Adventurer's guild management browser game."
+image: "/assets/projects/guildmaster.png"
+links: [
+  {
+    text: "Website",
+    url: "https://guildmaster.yht.one"
+  },
+  {
+    text: "Source",
+    url: "https://github.com/YouHaveTrouble/GuildMaster"
+  },
+]
+---

src/content/projects/iwotd.md

@@ -0,0 +1,12 @@
+---
+category: "websites"
+name: "Interesting Website of the Day"
+description: "Daily showcase of interesting websites from my personal database."
+image: "/assets/projects/iwotd.png"
+links: [
+  {
+    text: "Website",
+    url: "https://interesting-website.yht.one"
+  },
+]
+---

src/content/projects/meapi.md

@@ -0,0 +1,16 @@
+---
+category: "websites"
+name: "MeAPI"
+description: "API about me. See if I'm online, and if so, what game I'm playing."
+image: "/assets/projects/meapi.png"
+links: [
+  {
+    text: "Website",
+    url: "https://api.youhavetrouble.me"
+  },
+  {
+    text: "Source",
+    url: "https://github.com/YouHaveTrouble/MeAPI"
+  },
+]
+---

src/content/projects/notjustnameplates.md

@@ -0,0 +1,16 @@
+---
+category: "minecraft"
+name: "NotJustNameplates"
+description: "Minecraft purpur plugin replacing player nametags with display entities for ultimate control over them."
+image: "/assets/projects/njn.png"
+links: [
+  {
+    text: "Website",
+    url: "https://modrinth.com/plugin/notjustnameplates"
+  },
+  {
+    text: "Source",
+    url: "https://github.com/YouHaveTrouble/NotJustNameplates"
+  },
+]
+---

src/content/projects/preventstabby.md

@@ -0,0 +1,16 @@
+---
+category: "minecraft"
+name: "PreventStabby"
+description: "Minecraft bukkit plugin that gives more control over PvP capabilities."
+image: "/assets/projects/ps.webp"
+links: [
+  {
+    text: "Website",
+    url: "https://modrinth.com/plugin/preventstabby"
+  },
+  {
+    text: "Source",
+    url: "https://github.com/YouHaveTrouble/PreventStabby"
+  },
+]
+---

src/content/projects/purpur-extras.md

@@ -0,0 +1,16 @@
+---
+category: "minecraft"
+name: "PurpurExtras"
+description: "A companion plugin for Purpur server software that adds additional features and improvements."
+image: "/assets/projects/purpur.svg"
+links: [
+  {
+    text: "Website",
+    url: "https://modrinth.com/plugin/purpurextras"
+  },
+  {
+    text: "Source",
+    url: "https://github.com/PurpurMC/PurpurExtras"
+  },
+]
+---

src/content/projects/purpur.md

@@ -0,0 +1,16 @@
+---
+category: "minecraft"
+name: "Purpur"
+description: "Purpur is a drop-in replacement for Paper servers designed for configurability and new, fun, exciting gameplay features."
+image: "/assets/projects/purpur.svg"
+links: [
+  {
+    text: "Website",
+    url: "https://purpurmc.org"
+  },
+  {
+    text: "Source",
+    url: "https://github.com/PurpurMC/Purpur"
+  },
+]
+---

src/content/projects/yardwatch.md

@@ -0,0 +1,20 @@
+---
+category: "minecraft"
+name: "YardWatch"
+description: "A pair of API and bukkit plugin that unifies protection plugin APIs."
+image: "/assets/projects/yardwatch.png"
+links: [
+  {
+    text: "Website",
+    url: "https://modrinth.com/plugin/yardwatch"
+  },
+  {
+    text: "Source (plugin)",
+    url: "https://github.com/YouHaveTrouble/YardWatch"
+  },
+  {
+    text: "Source (plugin)",
+    url: "https://github.com/YouHaveTrouble/YardWatchAPI"
+  }
+]
+---

src/pages/projects.astro

@@ -1,9 +1,24 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
+import {getCollection} from "astro:content";
 
 const title = 'Projects';
 const description = 'Stuff I\'m working on.';
 const permalink = `${Astro.site.href}projects`;
+
+const projectsCollection = await getCollection('projects');
+projectsCollection.sort((a, b) => a.data.name.localeCompare(b.data.name));
+const projects = {}
+
+for (const project of projectsCollection) {
+  const category = project.data.category.toLowerCase();
+  const projectsInCategory = projects[category];
+  if (projectsInCategory) {
+    projectsInCategory.push(project);
+  } else {
+    projects[category] = [project];
+  }
+}
 ---
 
 <BaseLayout title={title} description={description} permalink={permalink} current="projects">
@@ -12,170 +27,50 @@ const permalink = `${Astro.site.href}projects`;
     <p>
       Here are some of the projects I'm working on. Most of them are open source, so feel free to check them out!
       <br>
-      Projects presented here are what I consider in presentable and/or finished state. They might or might not get updates.
+      Projects presented here are what I consider in presentable and/or finished state. They might or might not get
+      updates.
       <br>
       Most logos generated using <a href="https://huggingface.co/spaces/dalle-mini/dalle-mini">DALL-E mini</a>.
     </p>
-    <h2 id="minecraft"><a href="#minecraft">Minecraft</a></h2>
+    {
+      Object.keys(projects).map((category) => {
+          return (
+              <h2 id={category}><a href={`#${category}`}>{category}</a></h2>
               <hr>
+              <div>
+                {
+                  projects[category].map((project) => {
+                    return (
                         <article>
                           <div class="icon">
-        <img src="/assets/projects/purpur.svg" alt="Purpur logo"/>
+                            <img src={project.data.image} alt="" aria-hidden="true"/>
                           </div>
                           <div class="description">
-        <h3>Purpur</h3>
+                            <h3>{project.data.name}</h3>
                             <p>
-          Purpur is a drop-in replacement for Paper servers designed for configurability and new, fun, exciting gameplay features.
+                              {project.data.description}
                             </p>
                             <p>
-          <a href="https://purpurmc.org" target="_blank">Website</a> | <a href="https://github.com/PurpurMC/Purpur"  target="_blank">Source</a>
+                              {
-      </div>
+                                project.data.links.map((link, index) => {
-    </article>
+                                  return (
-    <article>
+                                    index === 0 ?
-      <div class="icon">
+                                        <a href={link.url} target="_blank">{link.text}</a>
-        <img src="/assets/projects/purpur.svg" alt="PurpurExtras logo"/>
+                                      : <span> | </span><a href={link.url} target="_blank">{link.text}</a>
-      </div>
+                                  )
-      <div class="description">
+                                })
-        <h3>PurpurExtras</h3>
+                              }
-        <p>
-          A companion plugin for Purpur server software that adds additional features and improvements.
                             </p>
-        <p>
-          <a href="https://modrinth.com/plugin/purpurextras" target="_blank">Website</a> | <a href="https://github.com/PurpurMC/PurpurExtras"  target="_blank">Source</a>
                           </div>
                         </article>
-    <article>
+                    )
-      <div class="icon">
+                  })
-        <img src="/assets/projects/cw.png" alt="CommandWhitelist logo"/>
+                }
               </div>
-      <div class="description">
+          )
-        <h3>CommandWhitelist</h3>
+        }
-        <p>
+      )
-          Minecraft bukkit plugin that allows to control precisely what commands players can see and use.
+    }
-        </p>
-        <p>
-          <a href="https://modrinth.com/plugin/commandwhitelist" target="_blank">Website</a> | <a href="https://github.com/YouHaveTrouble/CommandWhitelist"  target="_blank">Source</a>
-      </div>
-    </article>
-    <article>
-      <div class="icon">
-        <img src="/assets/projects/ps.webp" alt="PreventStabby logo"/>
-      </div>
-      <div class="description">
-        <h3>PreventStabby</h3>
-        <p>
-          Minecraft bukkit plugin that gives more control over PvP capabilities.
-        </p>
-        <p>
-          <a href="https://modrinth.com/plugin/preventstabby" target="_blank">Website</a> | <a href="https://github.com/YouHaveTrouble/PreventStabby"  target="_blank">Source</a>
-      </div>
-    </article>
-    <article>
-      <div class="icon">
-        <img src="/assets/projects/censura.webp" alt="Censura logo"/>
-      </div>
-      <div class="description">
-        <h3>Censura</h3>
-        <p>
-          Advanced censorship plugin for bukkit minecraft servers.
-        </p>
-        <p>
-          <a href="https://modrinth.com/plugin/censura" target="_blank">Website</a> | <a href="https://github.com/YouHaveTrouble/Censura"  target="_blank">Source</a>
-      </div>
-    </article>
-    <article>
-      <div class="icon">
-        <img src="/assets/projects/njn.png" alt="NotJustNameplates logo"/>
-      </div>
-      <div class="description">
-        <h3>NotJustNamePlates</h3>
-        <p>
-          Minecraft purpur plugin replacing player nametags with display entities for ultimate control over them.
-        </p>
-        <p>
-          <a href="https://modrinth.com/plugin/notjustnameplates" target="_blank">Website</a> | <a href="https://github.com/YouHaveTrouble/NotJustNameplates"  target="_blank">Source</a>
-      </div>
-    </article>
-    <article>
-      <div class="icon">
-        <img src="/assets/projects/yardwatch.png" alt="YardWatch logo"/>
-      </div>
-      <div class="description">
-        <h3>YardWatch</h3>
-        <p>
-          A pair of API and bukkit plugin that unifies protection plugin APIs
-        </p>
-        <p>
-          <a href="https://modrinth.com/plugin/yardwatch" target="_blank">Website</a> | <a href="https://github.com/YouHaveTrouble/YardWatch"  target="_blank">Source (plugin)</a> | <a href="https://github.com/YouHaveTrouble/YardWatchAPI"  target="_blank">Source (API)</a>
-      </div>
-    </article>
-    <h2 id="websites"><a href="#websites">Websites</a></h2>
-    <hr>
-    <article>
-      <div class="icon" >
-        <img src="/assets/projects/meapi.png" alt="MeAPI logo"/>
-      </div>
-      <div class="description">
-        <h3>MeAPI</h3>
-        <p>
-          API about me. See if I'm online, and if so, what game I'm playing.
-        </p>
-        <p>
-          <a href="https://api.youhavetrouble.me" target="_blank">Website</a> | <a href="https://github.com/YouHaveTrouble/MeAPI"  target="_blank">Source</a>
-      </div>
-    </article>
-    <article>
-      <div class="icon">
-        <img src="/assets/projects/iwotd.png" alt="Interesting website of the Day logo"/>
-      </div>
-      <div class="description">
-        <h3>Interesting Website of the Day</h3>
-        <p>
-          Daily showcase of interesting websites from my personal database.
-        </p>
-        <p>
-          <a href="https://interesting-website.yht.one" target="_blank">Website</a>
-      </div>
-    </article>
-    <article>
-      <div class="icon">
-        <img src="/assets/projects/guildmaster.png" alt="Guild Master logo"/>
-      </div>
-      <div class="description">
-        <h3>Guild Master</h3>
-        <p>
-          Adventurer's guild management browser game.
-        </p>
-        <p>
-          <a href="https://guildmaster.yht.one" target="_blank">Website</a> | <a href="https://github.com/YouHaveTrouble/GuildMaster"  target="_blank">Source</a>
-      </div>
-    </article>
-    <article>
-      <div class="icon">
-        <img src="/assets/projects/dumbforkgenerator.png" alt="Dumb Forks Generator logo"/>
-      </div>
-      <div class="description">
-        <h3>Dumb Forks Generator</h3>
-        <p>
-          PHP name generator for dumb minecraft server software fork names.
-        </p>
-        <p>
-          <a href="https://dumbforks.yht.one" target="_blank">Website</a>
-      </div>
-    </article>
-    <article>
-      <div class="icon" aria-label="">
-        <img src="/assets/projects/guesstheanime.png" alt="Guess the Anime logo"/>
-      </div>
-      <div class="description">
-        <h3>Guess the Anime</h3>
-        <p>
-          A game where you guess an anime title based off blurred art and a synopsis.
-        </p>
-        <p>
-          <a href="https://guessanime.yht.one" target="_blank">Website</a> | <a href="https://github.com/YouHaveTrouble/GuessTheAnime"  target="_blank">Source</a>
-      </div>
-    </article>
   </div>
 </BaseLayout>
 
@@ -190,6 +85,10 @@ const permalink = `${Astro.site.href}projects`;
     margin-bottom: 3.25rem;
   }
 
+  h2 {
+    text-transform: capitalize;
+  }
+
   .icon {
     width: 8rem;
     aspect-ratio: 1;