f**k ahh syling and gallery work

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+onlyBuiltDependencies:
+  - esbuild
+  - sharp

src/components/NavHeader.astro

@@ -14,12 +14,12 @@ const optimizedBackground = await getImage({
 const optimizedBackgroundLQ = await getImage({
 	src: myBackground,
 	format: "webp",
-	quality: 60,
+	quality: 50,
 	width: 512,
 });
 ---
 <div
-    style={`width: 670px; border: 1px solid var(--border); background-image: image-set(url('${optimizedBackground.src}') type("image/avif"), url('/static/img/sites/avatar-ht-f.webp') type("image/webp"), url('${optimizedBackgroundLQ.src}') type("image/jpeg"));`}
+    style={`border: 1px solid var(--border); background-image: image-set(url('${optimizedBackground.src}') type("image/avif"), url('/static/img/sites/avatar-ht-f.webp') type("image/webp"), url('${optimizedBackgroundLQ.src}') type("image/jpeg"));`}
     class="rounded-2xl flex flex-col shadow-xl shadow-black py-8 mb-8 items-center bg-center bg-cover"
     >
     <Picture

src/components/Partition.astro

@@ -4,7 +4,7 @@
 
 <div
     class="rounded-xl flex-row p-4 mb-4 shadow"
-    style="width: 670px; border: 1px solid var(--border); background-color: var(--third-colour);"
+    style="border: 1px solid var(--border); background-color: var(--third-colour);"
 >
     <slot />
 </div>

src/content.config.ts

@@ -1,7 +1,9 @@
 // Import utilities from `astro:content`
 import { defineCollection, z } from "astro:content";
+
 // Import the glob loader
 import { glob } from "astro/loaders";
+
 // Define a `loader` and `schema` for each collection
 const blog = defineCollection({
 	loader: glob({ pattern: "**/[^_]*.{md,mdx}", base: "./src/blog" }),
@@ -13,5 +15,16 @@ const blog = defineCollection({
 		tags: z.array(z.string()),
 	}),
 });
+
+const albums = defineCollection({
+	type: "data",
+	schema: ({ image }) =>
+	  z.object({
+		title: z.string(),
+		description: z.string().optional(),
+		cover: image(),
+	  }),
+  });
+
 // Export a single `collections` object to register your collection(s)
-export const collections = { blog };
+export const collections = { blog, albums };

src/content/albums/aria-board.yaml

@@ -0,0 +1,3 @@
+title: Aria Board
+description: A bunch of images making up my vibes
+cover: ./aria-board/1-Tw1nkPad.webp

src/layouts/MarkdownPostLayout.astro

@@ -7,20 +7,19 @@ const { lastModified }  = Astro.props;
 
 <BaseLayout pageTitle={frontmatter.title} description={frontmatter.description}>
     <Partition>
-        <p>
+        <div>
             <h1 class="text-3xl font-bold underline">{frontmatter.title}</h1>
             <em>{frontmatter.description}</em><br />
             <sub>Date: {frontmatter.pubDate.toLocaleDateString()}</sub><br />
             <sub>Last Modified: {lastModified}</sub>
-        </p>
+        </div>
     </Partition>
     <Partition>
         <main>
             <div
-                class="prose dark:prose-invert
-  prose-h1:font-bold prose-h1:text-xl
-  prose-a:text-[#ff98f6] prose-p:text-justify prose-img:rounded-xl
-  prose-headings:underline"
+                class="prose prose-invert
+  prose-h1:font-bold prose-h1:text-xl prose-p:text-justify prose-img:rounded-xl
+  prose-headings:underline max-w-full"
             >
                 <slot />
             </div>

src/pages/about.astro

@@ -32,7 +32,7 @@ const currentSystem = {
 const skillColor = "#F5A8B7";
 ---
 
-<BaseLayout pageTitle={pageTitle}>
+<BaseLayout pageTitle={pageTitle} description={description}>
     <Partition>
         <p>It's about time I actually write up my own website right?</p>
         <br />

src/pages/albums.astro

@@ -0,0 +1,47 @@
+---
+import { getCollection } from "astro:content";
+import BaseLayout from "../layouts/BaseLayout.astro";
+import Partition from "../components/Partition.astro";
+
+const pageTitle = "Aria's Gallery";
+const description = "All of Aria's albums!";
+
+import "../styles/aria.css";
+import { Picture } from "astro:assets";
+
+const albums = await getCollection("albums");
+---
+
+<BaseLayout pageTitle={pageTitle} description={description}>
+    <div class="text-center">
+        <h1 class="text-5xl font-bold text-center my-8">Aria's Gallery!</h1>
+        {
+            albums.map((item) => (
+                <Partition>
+                    <a
+                        href={`/gallery/${item.id}`}
+                        class="group transition-all mb-4 block"
+                    >
+                        <Picture
+                            src={item.data.cover}
+                            alt={item.data.title}
+                            formats={["avif", "webp", "jpeg"]}
+                            width={638}
+                            quality="mid"
+                            class:list={[
+                                "rounded-lg transition-all",
+                                "group-hover:shadow-lg group-hover:opacity-90",
+                            ]}
+                        />
+                        <div class="mt-4 text-center">
+                            <strong class="font-normal">
+                                {item.data.title}
+                            </strong>
+                            <p class="text-xs">{item.data.description}</p>
+                        </div>
+                    </a>
+                </Partition>
+            ))
+        }
+    </div>
+</BaseLayout>

src/pages/blog.astro

@@ -10,7 +10,7 @@ const pageTitle = "Aria's blog";
 const description = "Aria's blog of assorted content";
 ---
 
-<BaseLayout pageTitle={pageTitle}>
+<BaseLayout pageTitle={pageTitle} description={description}>
     <Partition>
         | <a href="/tags" class="nav-btn">Browse Tags</a> |<br />
         <h1 class="text-2xl">All blog posts:</h1>

src/pages/extreme-format-test.astro

@@ -5,10 +5,10 @@ import Partition from "../components/Partition.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
 
 const pageTitle = "Extreme format test";
-const description = "All of Aria's friends with 88x31 buttons for you to click on!!";
+const description = "A terrible test of video formats";
 ---
 
-<BaseLayout pageTitle={pageTitle}>
+<BaseLayout pageTitle={pageTitle} description={description}>
     <Partition>
         <h3 class="text-xl font-bold text-center">"All In One"</h3>
         <video controls preload="metadata">

src/pages/friends.astro

@@ -8,7 +8,7 @@ const pageTitle = "Aria's friends";
 const description = "All of Aria's friends with 88x31 buttons for you to click on!!";
 ---
 
-<BaseLayout pageTitle={pageTitle}>
+<BaseLayout pageTitle={pageTitle} description={description}>
     
     <Partition>
         <h2>My badge:</h2>

src/pages/gallery/[id].astro

@@ -0,0 +1,61 @@
+---
+import { getCollection } from "astro:content";
+import { getAlbumImages } from "../../utils/albums";
+import { Picture } from "astro:assets";
+
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import NavHeader from "../../components/NavHeader.astro";
+
+export async function getStaticPaths() {
+    const albums = await getCollection("albums");
+
+    const paths = Object.values(albums).map((album) => {
+        return {
+            params: {
+                id: album.id,
+            },
+            props: {
+                album,
+            },
+        };
+    });
+
+    return paths;
+}
+
+import "../../styles/aria.css";
+
+const { album } = Astro.props;
+const images = await getAlbumImages(album.id);
+---
+<BaseLayout>
+<div class="text-center my-16 mb-32">
+    <h1 class="text-3xl xl:text-6xl font-bold">
+        {album.data.title}
+    </h1>
+    <p class="text-lg xl:text-2xl my-4">
+        {album.data.description}
+    </p>
+
+    <div
+        class="mx-auto container my-8 sm:columns-2 md:columns-3 lg:columns-4 xl:columns-5"
+    >
+        {
+            images.map((image) => (
+                <Picture
+                    src={image}
+                    alt={`Image from ${album.data.title} album`}
+                    formats={["avif", "webp", "jpeg"]}
+                    quality={90}
+                    class="rounded-sm mb-4 border border-transparent hover:border-gray-300 transition-all duration-300 ease-in-out hover:shadow-lg"
+                    loading="lazy"
+                />
+            ))
+        }
+    </div>
+
+    <p class="text-lg my-4 text-center">
+        <a href="/albums/" class="text-white hover:underline">Go back</a>
+    </p>
+</div>
+</BaseLayout>

src/pages/index.astro

@@ -47,7 +47,7 @@ const age = seconds / 31556952;
     <Partition>
         <h1 class="text-2xl">These are cool people!!</h1>
         <br />
-        <div class="flex outline-dotted p-5 flex-wrap justify-center">
+        <div class="flex outline-dotted p-5 flex-wrap justify-center max-w-4xl">
             <FriendLink
                 name="Alyxia"
                 image="https://alyxia.dev/static/img/88x31/self.png"

src/pages/other buttons.astro

@@ -8,7 +8,7 @@ const pageTitle = "Aria's friends";
 const description = "More 88x31 buttons of very random natures";
 ---
 
-<BaseLayout pageTitle={pageTitle}>
+<BaseLayout pageTitle={pageTitle} description={description}>
     <Partition>
         <h1 class="text-2xl">Here are some more 88x31 buttons:</h1>
         <br />

src/pages/portfolio.astro

@@ -21,7 +21,7 @@ const languagesUsed = [
 // languagesUsed.sort((a, b) => a.localeCompare(b.firstname))
 ---
 
-<BaseLayout pageTitle={pageTitle}>
+<BaseLayout pageTitle={pageTitle} description={description}>
     <Partition>
         <h1 class="text-4xl text-center">Portfolio</h1>
 

src/pages/special_blog.astro

@@ -8,7 +8,7 @@ const pageTitle = "Aria's friends";
 const description = "All of Aria's friends with 88x31 buttons for you to click on!!";
 ---
 
-<BaseLayout pageTitle={pageTitle}>
+<BaseLayout pageTitle={pageTitle} description={description}>
     <Partition>
         <h1 class="text-2xl">You should not be here!!</h1>
         <p>If you can see this page then something has gone a little silly!</p><br />

src/utils/albums.ts

@@ -0,0 +1,20 @@
+export async function getAlbumImages(albumId: string) {
+    // 1. List all album files from collections path
+    let images = import.meta.glob<{ default: ImageMetadata }>(
+      "/src/content/albums/**/*.{jpeg,jpg,webp,avif,png,jxl}"
+    );
+  
+    // 2. Filter images by albumId
+    images = Object.fromEntries(
+      Object.entries(images).filter(([key]) => key.includes(albumId))
+    );
+  
+    // 3. Images are promises, so we need to resolve the glob promises
+    const resolvedImages = await Promise.all(
+      Object.values(images).map((image) => image().then((mod) => mod.default))
+    );
+  
+    // 4. Shuffle images in random order
+    resolvedImages.sort(() => Math.random() - 0.5);
+    return resolvedImages;
+  }