Switch to content collections

astro.config.mjs

@@ -4,5 +4,6 @@ import { defineConfig } from "astro/config"
 export default defineConfig({
 	build: {
 		format: "file"
-	}
+	},
+	site: "https://henryhiles.com"
 })

package.json

@@ -10,7 +10,8 @@
 		"astro": "astro"
 	},
 	"dependencies": {
-		"astro": "^2.3.0",
-		"astro-icon": "^0.8.0"
+		"@astrojs/rss": "^2.4.3",
+		"astro": "^2.6.4",
+		"astro-icon": "^0.8.1"
 	}
 }

src/components/Portfolio.astro

@@ -1,7 +1,9 @@
 ---
-import projects from "../projects.json"
+import { getCollection } from "astro:content"
 import styles from "../styles/Portfolio.module.css"
 import Divider from "./Divider.astro"
+
+const projects = await getCollection("projects")
 ---
 
 <section id="portfolio" class={styles.portfolio}>
@@ -10,12 +12,12 @@ import Divider from "./Divider.astro"
 	<article class={styles.portfolioItems}>
 		{
 			projects.map((project) => (
-				<a href={`/projects/${project.route}`}>
+				<a href={`/projects/${project.slug}`}>
 					<img
-						src={`/images/${project.thumbImage}`}
-						alt={project.name}
+						src={`/images/${project.data.thumbImage}`}
+						alt={project.data.name}
 					/>
-					<h3 class={styles.projectName}>{project.name}</h3>
+					<h3 class={styles.projectName}>{project.data.name}</h3>
 				</a>
 			))
 		}

src/content/config.ts

@@ -0,0 +1,30 @@
+import { z, defineCollection } from "astro:content"
+import { rssSchema } from "@astrojs/rss"
+
+const blogCollection = defineCollection({
+	type: "content",
+	schema: rssSchema
+})
+
+const projectsCollection = defineCollection({
+	type: "content",
+	schema: z.object({
+		name: z.string(),
+		github: z.string().optional(),
+		overview: z.string(),
+		customLink: z
+			.object({
+				name: z.string(),
+				url: z.string()
+			})
+			.optional(),
+		mainImage: z.string(),
+		thumbImage: z.string(),
+		demoLink: z.string().optional()
+	})
+})
+
+export const collections = {
+	blog: blogCollection,
+	projects: projectsCollection
+}

src/content/projects/mentalmath.md

@@ -0,0 +1,9 @@
+---
+name: "MentalMath"
+github: "https://github.com/Henry-Hiles/MentalMath"
+overview: "A simple project to help with learning addition and subtraction."
+mainImage: "mentalMathComputer.png"
+thumbImage: "mentalMathThumb.svg"
+---
+
+A simple project to help with learning addition and subtraction. You can change the amount of numbers, and switch between addition and subtraction modes. This project was built using React and CSS Modules.

src/content/projects/messaging.md

@@ -0,0 +1,10 @@
+---
+name: "Messaging"
+github: "https://github.com/Henry-Hiles/Messaging"
+overview: "A messaging website where multiple users can chat together."
+mainImage: "messagingComputer.png"
+thumbImage: "messagingThumb.svg"
+demoLink: "https://chat.henryhiles.com"
+---
+
+A simple, open-source, online chat room where you can join online chat rooms, or create your own. This project was built using handcrafted Javascript, as well as Node.js, Socket.io, and Express.

src/content/projects/movie-react-app.md

@@ -0,0 +1,10 @@
+---
+name: "Movie React App"
+github: "https://github.com/henry-Hiles/movie-react-app"
+overview: "A website to find movies, written in React."
+mainImage: "movieComputer.png"
+thumbImage: "movieReactThumb.svg"
+demoLink: "https://movies.henryhiles.com"
+---
+
+An open-source website to find movies, written in React. Includes a client-side only rating system. Uses the TMDB API for data. This project was built using React and CSS Modules.

src/content/projects/pokeapi-searcher.md

@@ -0,0 +1,9 @@
+---
+name: "PokeAPI Searcher"
+github: "https://github.com/Henry-Hiles/PokeAPI-Searcher"
+overview: "A simple website where you can search for Pokemon by type or Pokedex. Uses the PokeAPI for data."
+mainImage: "pokeAPIComputer.png"
+thumbImage: "pokeApiThumb.svg"
+---
+
+A simple website where you can search for Pokemon by type or Pokedex. Uses the PokeAPI for data. Made purely of HTML, CSS, and Vanilla Javascript. Uses the Fetch API for querying the PokeAPI. This project was built using handcrafted HTML, CSS, and JavaScript. This project uses no bloated frontend technologies, making for quick loading times and fewer requests.

src/content/projects/qscan.md

@@ -0,0 +1,12 @@
+---
+name: "QScan"
+github: "https://github.com/Henry-Hiles/Qscan"
+overview: "QScan is a Material You/Material 3 app for scanning QR codes"
+mainImage: "QScanMain.png"
+thumbImage: "QScanThumb.svg"
+customLink:
+    name: "Download"
+    url: "https://nightly.link/Henry-Hiles/QScan/workflows/build/master/QScan.zip"
+---
+
+QScan is an open-source Material You/Material 3 app for scanning QR codes. This project was written in Kotlin, using Jetpack Compose. The zxing library was used for scanning.

src/content/projects/quadraticbot2.md

@@ -0,0 +1,13 @@
+---
+name: "QuadraticBot 2.0"
+slug: "quadraticbot2.0"
+github: "https://github.com/Henry-Hiles/QuadraticBot2.0"
+overview: "A simple, user-friendly giveaway bot that uses slash commands and buttons."
+customLink:
+    name: "Invite to your server"
+    url: "https://discord.com/api/oauth2/authorize?client_id=930172444910702653&permissions=150528&scope=applications.commands%20bot"
+mainImage: "quadraticBotComputer.png"
+thumbImage: "quadraticBotThumb.svg"
+---
+
+A simple, open-source, user-friendly Discord giveaway bot that uses the latest features, such as slash commands, timestamps, and buttons. It's a rewrite of my original closed-source Discord bot, Quadratic Giveaways. This project was built using Node.js and Discord.js.

src/content/projects/qweather.md

@@ -0,0 +1,12 @@
+---
+name: "QWeather"
+github: "https://github.com/Henry-Hiles/QWeather"
+overview: "A weather app for android, FOSS and M3."
+mainImage: "QWeatherMain.png"
+thumbImage: "QWeatherThumb.svg"
+customLink:
+    name: "Download"
+    url: "https://nightly.link/Henry-Hiles/QWeather/workflows/build/main/QWeather.zip"
+---
+
+A weather app for android, FOSS and M3. Uses the open-meteo api. Nearing release. This project was written in Kotlin, using Jetpack Compose, and Koin for dependency injection.

src/content/projects/video-chat.md

@@ -0,0 +1,10 @@
+---
+name: "Video Chat"
+github: "https://github.com/Henry-Hiles/Video-Chat"
+overview: "An online Web-RTC powered peer-to-peer video chat website."
+mainImage: "videoChatComputer.png"
+thumbImage: "videoChatThumb.svg"
+demoLink: "https://video.henryhiles.com"
+---
+
+An online Web-RTC powered peer-to-peer video chat website, great for chatting to friends or family. This project was built using EJS, PeerJS, Express, and Socket.IO.

src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/layouts/ProjectLayout.astro

@@ -0,0 +1,79 @@
+---
+import ButtonLink from "../components/ButtonLink.astro"
+import Divider from "../components/Divider.astro"
+import styles from "../styles/Project.module.css"
+import Layout from "../layouts/Layout.astro"
+import type { CollectionSchema } from "astro:content"
+
+// export function getStaticPaths() {
+// 	return projects.map((project) => ({
+// 		params: { route: project.route }
+// 	}))
+// }
+
+// const { route: projectRoute } = Astro.params
+// const project = projects.find((project) => project.route === projectRoute)
+// if (project == null) return
+
+export interface Props {
+	project: CollectionSchema<"projects">
+}
+
+const { project } = Astro.props
+---
+
+<Layout page={project.name} description={(<slot />)}>
+	<section id={styles.jumbo}>
+		<img
+			id={styles.thumb}
+			src={`/images/${project.thumbImage}`}
+			alt={project.name}
+		/>
+		<h1 class={styles.title}>
+			{project.name}
+		</h1>
+		<Divider />
+		<p class={styles.overview}>{project.overview}</p>
+	</section>
+	<section id={styles.details} class={styles.row}>
+		<article class={styles.longDescription}>
+			<h2>Description</h2>
+			<Divider />
+			<section>
+				<p>
+					<slot />
+				</p>
+				<div class={styles.buttonRow}>
+					{
+						project.github && (
+							<ButtonLink href={project.github} newTab>
+								Source Code
+							</ButtonLink>
+						)
+					}
+					{
+						project.demoLink && (
+							<ButtonLink href={project.demoLink} newTab>
+								Go to demo
+							</ButtonLink>
+						)
+					}
+					{
+						project.customLink && (
+							<ButtonLink href={project.customLink.link} newTab>
+								{project.customLink.name}
+							</ButtonLink>
+						)
+					}
+				</div>
+			</section>
+		</article>
+		<article class={styles.image}>
+			<img
+				src={`/images/${project.mainImage}`}
+				alt={`Image of ${project.name}`}
+				class={styles.screenshot}
+			/>
+		</article>
+	</section>
+</Layout>

src/pages/projects/[slug].astro

@@ -3,20 +3,22 @@ import ButtonLink from "../../components/ButtonLink.astro"
 import Divider from "../../components/Divider.astro"
 import styles from "../../styles/Project.module.css"
 import Layout from "../../layouts/Layout.astro"
-import projects from "../../projects.json"
+import { getCollection } from "astro:content"
+export const getStaticPaths = async () => {
+	const blogEntries = await getCollection("projects")
 
-export function getStaticPaths() {
-	return projects.map((project) => ({
-		params: { route: project.route }
+	return blogEntries.map((entry) => ({
+		params: { slug: entry.slug },
+		props: { entry }
 	}))
 }
 
-const { route: projectRoute } = Astro.params
-const project = projects.find((project) => project.route === projectRoute)
-if (project == null) return
+const { entry } = Astro.props
+const { Content } = await entry.render()
+const { data: project } = entry
 ---
 
-<Layout page={project.name} description={project.description}>
+<Layout page={project.name} description={project.overview}>
 	<section id={styles.jumbo}>
 		<img
 			id={styles.thumb}
@@ -35,8 +37,7 @@ if (project == null) return
 			<Divider />
 			<section>
 				<p>
-					{project.description}
-					{project.technologies}
+					<Content />
 				</p>
 				<div class={styles.buttonRow}>
 					{

src/projects.json

@@ -1,91 +0,0 @@
-[
-	{
-		"name": "QuadraticBot 2.0",
-		"route": "quadraticbot2.0",
-		"github": "https://github.com/Henry-Hiles/QuadraticBot2.0",
-		"overview": "A simple, user-friendly giveaway bot that uses slash commands and buttons.",
-		"description": "A simple, open-source, user-friendly Discord giveaway bot that uses the latest features, such as slash commands, timestamps, and buttons. It's a rewrite of my original closed-source Discord bot, Quadratic Giveaways.",
-		"customLink": {
-			"name": "Invite to your server",
-			"link": "https://discord.com/api/oauth2/authorize?client_id=930172444910702653&permissions=150528&scope=applications.commands%20bot"
-		},
-		"technologies": "This project was built using Node.js and Discord.js.",
-		"mainImage": "quadraticBotComputer.png",
-		"thumbImage": "quadraticBotThumb.svg"
-	},
-	{
-		"name": "PokeAPI Searcher",
-		"route": "pokeapi-searcher",
-		"github": "https://github.com/Henry-Hiles/PokeAPI-Searcher",
-		"overview": "A simple website where you can search for Pokemon by type or Pokedex. Uses the PokeAPI for data.",
-		"description": "A simple website where you can search for Pokemon by type or Pokedex. Uses the PokeAPI for data. Made purely of HTML, CSS, and Vanilla Javascript. Uses the Fetch API for querying the PokeAPI.",
-		"technologies": "This project was built using handcrafted HTML, CSS, and JavaScript. This project uses no bloated frontend technologies, making for quick loading times and fewer requests.",
-		"mainImage": "pokeAPIComputer.png",
-		"thumbImage": "pokeApiThumb.svg"
-	},
-	{
-		"name": "Messaging",
-		"route": "messaging",
-		"github": "https://github.com/Henry-Hiles/Messaging",
-		"overview": "A messaging website where multiple users can chat together.",
-		"description": "A simple, open-source, online chat room where you can join online chat rooms, or create your own.",
-		"technologies": "This project was built using handcrafted Javascript, as well as Node.js, Socket.io, and Express.",
-		"mainImage": "messagingComputer.png",
-		"thumbImage": "messagingThumb.svg",
-		"demoLink": "https://chat.henryhiles.com"
-	},
-	{
-		"name": "Video Chat",
-		"route": "video-chat",
-		"github": "https://github.com/Henry-Hiles/Video-Chat",
-		"overview": "A simple Web-RTC powered video chat that uses PeerJS and Socket.IO.",
-		"description": "A simple Web-RTC powered video chat, great for chatting with friends or family.",
-		"technologies": "This project was built using EJS, PeerJS, Express, and Socket.IO.",
-		"mainImage": "videoChatComputer.png",
-		"thumbImage": "videoChatThumb.svg",
-		"demoLink": "https://video.henryhiles.com"
-	},
-	{
-		"name": "MentalMath",
-		"route": "mental-math",
-		"github": "https://github.com/Henry-Hiles/MentalMath",
-		"overview": "A simple project to help with learning addition and subtraction.",
-		"description": "A simple project to help with learning addition and subtraction. You can change the amount of numbers, and switch between addition and subtraction modes.",
-		"technologies": "This project was built using React and CSS Modules.",
-		"mainImage": "mentalMathComputer.png",
-		"thumbImage": "mentalMathThumb.svg"
-	},
-	{
-		"name": "Movie React App",
-		"route": "movie-react-app",
-		"github": "https://github.com/henry-Hiles/movie-react-app",
-		"overview": "A website to find movies, written in React.",
-		"description": "An open-source website to find movies, written in React. Includes a client-side only rating system. Uses the TMDB API for data.",
-		"technologies": "This project was built using React and CSS Modules.",
-		"mainImage": "movieComputer.png",
-		"thumbImage": "movieReactThumb.svg",
-		"demoLink": "https://movies.henryhiles.com"
-	},
-	{
-		"name": "QWeather",
-		"route": "qweather",
-		"github": "https://github.com/Henry-Hiles/QWeather",
-		"overview": "A weather app for android, FOSS and M3.",
-		"description": "A weather app for android, FOSS and M3. Uses the open-meteo api. Nearing release.",
-		"technologies": "This project was written in Kotlin, using Jetpack Compose, and Koin for dependency injection.",
-		"mainImage": "QWeatherMain.png",
-		"thumbImage": "QWeatherThumb.svg",
-		"demoLink": "https://nightly.link/Henry-Hiles/QWeather/workflows/build/main/QWeather.zip"
-	},
-	{
-		"name": "QScan",
-		"route": "qscan",
-		"github": "https://github.com/Henry-Hiles/Qscan",
-		"overview": "QScan is a Material You/Material 3 app for scanning QR codes",
-		"description": "QScan is an open-source Material You/Material 3 app for scanning QR codes, written in Jetpack Compose. Uses the zxing library for scanning.",
-		"technologies": "This project was written in Kotlin, using Jetpack Compose. The zxing library was used for scanning.",
-		"mainImage": "QScanMain.png",
-		"thumbImage": "QScanThumb.svg",
-		"demoLink": "https://nightly.link/Henry-Hiles/QScan/workflows/build/master/QScan.zip"
-	}
-]

src/styles/Project.module.css

@@ -10,7 +10,6 @@
 
 .overview {
 	width: 100%;
-	padding: 20px;
 	font-size: x-large;
 	text-align: center;
 }
@@ -20,7 +19,7 @@
 }
 
 #jumbo {
-	padding: 3em 0 0;
+	padding: 2rem;
 }
 
 .image img {