Switch to content collections
This commit is contained in:
parent
52eadce2d3
commit
42baeaa052
19 changed files with 913 additions and 668 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -18,4 +18,4 @@ pnpm-debug.log*
|
|||
.env.production
|
||||
|
||||
# macOS-specific files
|
||||
.DS_Store
|
||||
.DS_Store
|
||||
|
|
@ -4,5 +4,6 @@ import { defineConfig } from "astro/config"
|
|||
export default defineConfig({
|
||||
build: {
|
||||
format: "file"
|
||||
}
|
||||
},
|
||||
site: "https://henryhiles.com"
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1249
pnpm-lock.yaml
generated
1249
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
|
|
@ -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>
|
||||
))
|
||||
}
|
||||
|
|
|
|||
30
src/content/config.ts
Normal file
30
src/content/config.ts
Normal file
|
|
@ -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
|
||||
}
|
||||
9
src/content/projects/mentalmath.md
Normal file
9
src/content/projects/mentalmath.md
Normal file
|
|
@ -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.
|
||||
10
src/content/projects/messaging.md
Normal file
10
src/content/projects/messaging.md
Normal file
|
|
@ -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.
|
||||
10
src/content/projects/movie-react-app.md
Normal file
10
src/content/projects/movie-react-app.md
Normal file
|
|
@ -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.
|
||||
9
src/content/projects/pokeapi-searcher.md
Normal file
9
src/content/projects/pokeapi-searcher.md
Normal file
|
|
@ -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.
|
||||
12
src/content/projects/qscan.md
Normal file
12
src/content/projects/qscan.md
Normal file
|
|
@ -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.
|
||||
13
src/content/projects/quadraticbot2.md
Normal file
13
src/content/projects/quadraticbot2.md
Normal file
|
|
@ -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.
|
||||
12
src/content/projects/qweather.md
Normal file
12
src/content/projects/qweather.md
Normal file
|
|
@ -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.
|
||||
10
src/content/projects/video-chat.md
Normal file
10
src/content/projects/video-chat.md
Normal file
|
|
@ -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.
|
||||
1
src/env.d.ts
vendored
1
src/env.d.ts
vendored
|
|
@ -1 +1,2 @@
|
|||
/// <reference path="../.astro/types.d.ts" />
|
||||
/// <reference types="astro/client" />
|
||||
|
|
|
|||
79
src/layouts/ProjectLayout.astro
Normal file
79
src/layouts/ProjectLayout.astro
Normal file
|
|
@ -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>
|
||||
|
|
@ -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}>
|
||||
{
|
||||
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue