add a new friend! and some new fields.

the fields added are pronouns and serial number.

friends-schema.json

@@ -32,6 +32,12 @@
 					"minLength": 1
 				}
 			}
+		},
+		"pronouns": {
+			"type": "string"
+		},
+		"serial_number": {
+			"type": "string"
 		}
 	}
 }

src/components/Friend.astro

@@ -11,6 +11,12 @@ const { friend } = Astro.props;
 
 <section>
 	<h2><a href={friend.website}>{friend.name}</a></h2>
+	{(friend.pronouns || friend.serial_number) && (
+		<section class="metadata">
+			{friend.pronouns && <span class="tooltip-metadata" title="pronouns"><p>{friend.pronouns}</p></span>}
+			{friend.serial_number && <span class="tooltip-metadata" title="serial number"><p>{friend.serial_number}</p></span>}
+		</section>
+	)}
 	<p>{friend.description}</p>
 	{friend.website_button && 
 		<WebsiteButton

src/components/WebsiteButton.astro

@@ -3,6 +3,7 @@ import { Image } from 'astro:assets';
 
 import allissaImage from "../website_buttons/itzzennet.png";
 import emImage from "../website_buttons/easrng.gif";
+import chloeImage from "../website_buttons/kawaiizenbo.me.gif";
 
 interface Props {
 	name: string,
@@ -14,7 +15,8 @@ const { name, alt_text, website } = Astro.props;
 
 const images: { [key: string]: ImageMetadata } = {
 	"allissa": allissaImage,
-	"em": emImage
+	"em": emImage,
+	"chloe": chloeImage
 };
 ---
 

src/content/friends/allissa.json

@@ -5,5 +5,6 @@
 	"website_button": {
 		"name": "allissa",
 		"alt_text": "a black box that says \"allissa's comfy burrow, now!\", with the now at the top right corner."
-	}
+	},
+	"pronouns": "she/her"
 }

src/content/friends/chloe.json

@@ -0,0 +1,10 @@
+{
+	"name": "chloe / KawaiiZenbos",
+	"website": "https://kawaiizenbo.me/",
+	"description": "cute creatures. very gay! it likes television broadcasting!",
+	"website_button": {
+		"name": "chloe",
+		"alt_text": "a button with a pink background of a grid of squares and rectangles, with text overlaying it saying \"kawaiizenbo.me\". There are 5 paws that alternate the colors of the trans flag!"
+	},
+	"pronouns": "she/fae/it"
+}

src/content/friends/em.json

@@ -5,5 +5,6 @@
 	"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."
-	}
+	},
+	"pronouns": "she/her"
 }

src/content/friends/mossfet.json

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

src/schema/friends_schema.ts

@@ -10,6 +10,8 @@ const friends_schema = z.object({
 			alt_text: z.string(),
 		}),
 	),
+	pronouns: z.optional(z.string()),
+	serial_number: z.optional(z.string())
 });
 
 type friends = z.infer<typeof friends_schema>

src/styles/global.css

@@ -97,6 +97,35 @@ nav {
 	text-decoration-style: dotted;
 }
 
+.tooltip-metadata>p {
+	text-decoration: underline;
+	text-decoration-style: dotted;
+}
+
 .website_button {
 	image-rendering: pixelated;
 }
+
+.metadata {
+	font-size: 1.575rem;
+	display: flex;
+	justify-content: center;
+	flex-direction: row;
+}
+
+.metadata span:not(:first-child)::before {
+	content: "·";
+	padding-left: 5px;	
+	padding-right: 5px;	
+	text-decoration: none !important;
+}
+
+.metadata span {
+	display: flex;
+	flex-direction: row;
+}
+
+.metadata p {
+	margin-top: 0px;
+	margin-bottom: 0px;
+}