install sharp so the website can actually build

i updated astro to the latest version. i also finally added more friends
and changed up how the friend data is stored in the repo. it is now json
backed by a schema. it can also display website buttons with alt text!

.vscode/settings.json

@@ -1,5 +1,12 @@
 {
-	"eslint.packageManager": "pnpm",
 	"editor.insertSpaces": false,
 	"editor.detectIndentation": false,
+	"json.schemas": [
+		{
+			"fileMatch": [
+				"/src/content/friends/*.json"
+			],
+			"url": "/friends-schema.json"
+		}
+	],
 }

friends-schema.json

@@ -0,0 +1,37 @@
+{
+	"$schema": "http://json-schema.org/draft-07/schema#",
+	"type": "object",
+	"required": [
+		"name",
+		"website",
+		"description"
+	],
+	"properties": {
+		"name": {
+			"type": "string"
+		},
+		"website": {
+			"type": "string"
+		},
+		"description": {
+			"type": "string"
+		},
+		"website_button": {
+			"type": "object",
+			"required": [
+				"name",
+				"alt_text"
+			],
+			"properties": {
+				"name": {
+					"type": "string",
+					"minLength": 1
+				},
+				"alt_text": {
+					"type": "string",
+					"minLength": 1
+				}
+			}
+		}
+	}
+}

package.json

@@ -10,10 +10,13 @@
 		"astro": "astro"
 	},
 	"dependencies": {
-		"@fontsource/atkinson-hyperlegible": "^4.5.11",
-		"astro": "^2.1.0"
+		"@fontsource/atkinson-hyperlegible": "^5.0.20",
+		"astro": "^4.11.3"
 	},
 	"devDependencies": {
-		"prettier": "3.0"
+		"@astrojs/check": "^0.7.0",
+		"prettier": "~3.3.2",
+		"sharp": "^0.33.4",
+		"typescript": "^5.5.2"
 	}
 }

src/components/Footer.astro

@@ -1,3 +1,30 @@
+---
+const date = new Date();
+
+const dateString = date.toLocaleString([], 
+{
+	timeZone: 'America/Los_Angeles',
+	day: '2-digit',
+	month: '2-digit',
+	year: 'numeric',
+	hour: 'numeric',
+	minute: '2-digit',
+	second: '2-digit',
+	hour12: true,
+});
+
+const longTimezone = date.toLocaleDateString([], {
+	day: '2-digit',
+	timeZoneName: 'long',
+}).substring(4)
+
+const shortTimezone = date.toLocaleDateString([], {
+	day: '2-digit',
+	timeZoneName: 'short',
+}).substring(4)
+---
+
 <footer aria-label="my websites footer">
-	<a href="https://git.solarpunk.moe/fries/fries-website">Source Code</a>
+	<p><a href="https://git.solarpunk.moe/fries/fries-website">Source Code</a></p>
+	<p>Built on {dateString}, <span title={longTimezone} class="tooltip">{shortTimezone}</span>.</p>
 </footer>

src/components/Friend.astro

@@ -0,0 +1,20 @@
+---
+import type { friends } from '../schema/friends_schema';
+import WebsiteButton from './WebsiteButton.astro';
+
+interface Props {
+	friend: friends	
+};
+
+const { friend } = Astro.props;
+---
+
+<section>
+	<h2><a href={friend.website}>{friend.name}</a></h2>
+	<p>{friend.description}</p>
+	{friend.website_button && 
+		<WebsiteButton
+			name={friend.website_button.name}
+			alt_text={friend.website_button.alt_text}
+			website={friend.website} />}
+</section>

src/components/WebsiteButton.astro

@@ -0,0 +1,21 @@
+---
+import { Image } from 'astro:assets';
+
+import allissaImage from "../website_buttons/itzzennet.png";
+import emImage from "../website_buttons/easrng.gif";
+
+interface Props {
+	name: string,
+	alt_text: string,
+	website: string
+};
+
+const { name, alt_text, website } = Astro.props;
+
+const images: { [key: string]: ImageMetadata } = {
+	"allissa": allissaImage,
+	"em": emImage
+};
+---
+
+<a href={website}><Image src={images[name]} alt={alt_text} class="website_button" quality={100} /></a>

src/content/config.ts

@@ -1,11 +1,21 @@
-import { defineCollection } from "astro:content";
+import { z, defineCollection } from "astro:content";
+import { friends_schema } from "../schema/friends_schema";
 
 const homepageCollection = defineCollection({});
-const friendsCollection = defineCollection({});
-const projectsCollection = defineCollection({});
+const friendsCollection = defineCollection({
+	type: 'data',
+	schema: friends_schema
+});
+const projectsCollection = defineCollection({
+	type: 'content',
+	schema: z.object({
+		title: z.string(),
+		description: z.string()
+	})
+});
 
 export const collections = {
-	homepage: homepageCollection,
-	friends: friendsCollection,
-	projects: projectsCollection,
+	'homepage': homepageCollection,
+	'friends': friendsCollection,
+	'projects': projectsCollection
 };

src/content/friends/allissa.json

@@ -0,0 +1,9 @@
+{
+	"name": "allissa",
+	"website": "https://itzzen.net/",
+	"description": "the website girl! shes cute!",
+	"website_button": {
+		"name": "allissa",
+		"alt_text": "a black box that says \"allissa's comfy burrow, now!\", with the now at the top right corner."
+	}
+}

src/content/friends/em.json

@@ -0,0 +1,9 @@
+{
+	"name": "em / easrng",
+	"website": "https://easrng.net/",
+	"description": "she likes javascript, and shes gay..!",
+	"website_button": {
+		"name": "em",
+		"alt_text": "a purple colored planet with a the text \"easrng\" above it, the text written in cursive and purple is flowing in and out of the text."
+	}
+}

src/content/friends/friends.md

@@ -1,7 +0,0 @@
-# my friends cool websites
-
-## [Mossfet!](https://mossfet.xyz) 
-this cool robot is cool and i love it :3. check out its website here :3!
-
-## [TakeV / Lambda System](https://ta-kev.digital)
-cool robot system whos nice and has a cool website :3! it beeps and boops!

src/content/friends/mossfet.json

@@ -0,0 +1,5 @@
+{
+	"name": "Mossfet",
+	"website": "https://mossfet.xyz",
+	"description": "this cool robot is cool and i love it :3. check out its website here :3!"
+}

src/content/friends/takev.json

@@ -0,0 +1,5 @@
+{
+	"name": "TakeV / Lambda System",
+	"website": "https://ta-kev.digital",
+	"description": "cool robot system whos nice and has a cool website :3! it beeps and boops!"
+}

src/pages/friends.astro

@@ -1,15 +1,18 @@
 ---
+import Friend from "../components/Friend.astro";
 import Layout from "../layouts/Layout.astro";
-import { getEntryBySlug } from "astro:content";
+import { getCollection } from "astro:content";
 
-const shoutouts = await getEntryBySlug("friends", "friends");
-const { Content } = await shoutouts.render();
+const friends = await getCollection("friends");
 ---
 
 <Layout title="fries gay friends">
 	<main>
+		<h1>my friends cool websites</h1>
 		<section aria-label="a place where i shoutout my friends sites.">
-			<Content />
+			{friends.map(friend => (
+				<Friend friend={friend.data} />
+			))}
 		</section>
 	</main>
 </Layout>

src/pages/projects.astro

@@ -1,6 +1,6 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import { getCollection, getEntryBySlug } from "astro:content";
+import { getCollection } from "astro:content";
 
 const projects = await getCollection("projects");
 ---

src/schema/friends_schema.ts

@@ -0,0 +1,17 @@
+import { z } from "astro:content";
+
+const friends_schema = z.object({
+	name: z.string(),
+	website: z.string(),
+	description: z.string(),
+	website_button: z.optional(
+		z.object({
+			name: z.string(),
+			alt_text: z.string(),
+		}),
+	),
+});
+
+type friends = z.infer<typeof friends_schema>
+
+export {friends_schema, type friends};

src/styles/global.css

@@ -91,3 +91,12 @@ nav {
 	gap: 20px;
 	padding-top: 10px;
 }
+
+.tooltip {
+	text-decoration: underline;
+	text-decoration-style: dotted;
+}
+
+.website_button {
+	image-rendering: pixelated;
+}