Wowie what a gay little website for my gay little self
aria.coffee
f**k ahh syling and gallery work
+165
-19
+1
-1
src/components/Partition.astro
+1
-1
src/components/Partition.astro
+14
-1
src/content.config.ts
+14
-1
src/content.config.ts
···
1
1
// Import utilities from `astro:content`
2
2
import { defineCollection, z } from "astro:content";
3
+
3
4
// Import the glob loader
4
5
import { glob } from "astro/loaders";
6
+
5
7
// Define a `loader` and `schema` for each collection
6
8
const blog = defineCollection({
7
9
loader: glob({ pattern: "**/[^_]*.{md,mdx}", base: "./src/blog" }),
···
13
15
tags: z.array(z.string()),
14
16
}),
15
17
});
18
+
19
+
const albums = defineCollection({
20
+
type: "data",
21
+
schema: ({ image }) =>
22
+
z.object({
23
+
title: z.string(),
24
+
description: z.string().optional(),
25
+
cover: image(),
26
+
}),
27
+
});
28
+
16
29
// Export a single `collections` object to register your collection(s)
17
-
export const collections = { blog };
30
+
export const collections = { blog, albums };
+3
src/content/albums/aria-board.yaml
+3
src/content/albums/aria-board.yaml
src/content/albums/aria-board/1-Tw1nkPad.webp
src/content/albums/aria-board/1-Tw1nkPad.webp
This is a binary file and will not be displayed.
src/content/albums/aria-board/2-Tw1nkPadLaptop.jpg
src/content/albums/aria-board/2-Tw1nkPadLaptop.jpg
This is a binary file and will not be displayed.
+5
-6
src/layouts/MarkdownPostLayout.astro
+5
-6
src/layouts/MarkdownPostLayout.astro
···
7
7
8
8
<BaseLayout pageTitle={frontmatter.title} description={frontmatter.description}>
9
9
<Partition>
10
-
<p>
10
+
<div>
11
11
<h1 class="text-3xl font-bold underline">{frontmatter.title}</h1>
12
12
<em>{frontmatter.description}</em><br />
13
13
<sub>Date: {frontmatter.pubDate.toLocaleDateString()}</sub><br />
14
14
<sub>Last Modified: {lastModified}</sub>
15
-
</p>
15
+
</div>
16
16
</Partition>
17
17
<Partition>
18
18
<main>
19
19
<div
20
-
class="prose dark:prose-invert
21
-
prose-h1:font-bold prose-h1:text-xl
22
-
prose-a:text-[#ff98f6] prose-p:text-justify prose-img:rounded-xl
23
-
prose-headings:underline"
20
+
class="prose prose-invert
21
+
prose-h1:font-bold prose-h1:text-xl prose-p:text-justify prose-img:rounded-xl
22
+
prose-headings:underline max-w-full"
24
23
>
25
24
<slot />
26
25
</div>
+1
-1
src/pages/about.astro
+1
-1
src/pages/about.astro
+47
src/pages/albums.astro
+47
src/pages/albums.astro
···
1
+
---
2
+
import { getCollection } from "astro:content";
3
+
import BaseLayout from "../layouts/BaseLayout.astro";
4
+
import Partition from "../components/Partition.astro";
5
+
6
+
const pageTitle = "Aria's Gallery";
7
+
const description = "All of Aria's albums!";
8
+
9
+
import "../styles/aria.css";
10
+
import { Picture } from "astro:assets";
11
+
12
+
const albums = await getCollection("albums");
13
+
---
14
+
15
+
<BaseLayout pageTitle={pageTitle} description={description}>
16
+
<div class="text-center">
17
+
<h1 class="text-5xl font-bold text-center my-8">Aria's Gallery!</h1>
18
+
{
19
+
albums.map((item) => (
20
+
<Partition>
21
+
<a
22
+
href={`/gallery/${item.id}`}
23
+
class="group transition-all mb-4 block"
24
+
>
25
+
<Picture
26
+
src={item.data.cover}
27
+
alt={item.data.title}
28
+
formats={["avif", "webp", "jpeg"]}
29
+
width={638}
30
+
quality="mid"
31
+
class:list={[
32
+
"rounded-lg transition-all",
33
+
"group-hover:shadow-lg group-hover:opacity-90",
34
+
]}
35
+
/>
36
+
<div class="mt-4 text-center">
37
+
<strong class="font-normal">
38
+
{item.data.title}
39
+
</strong>
40
+
<p class="text-xs">{item.data.description}</p>
41
+
</div>
42
+
</a>
43
+
</Partition>
44
+
))
45
+
}
46
+
</div>
47
+
</BaseLayout>
+1
-1
src/pages/blog.astro
+1
-1
src/pages/blog.astro
···
10
10
const description = "Aria's blog of assorted content";
11
11
---
12
12
13
-
<BaseLayout pageTitle={pageTitle}>
13
+
<BaseLayout pageTitle={pageTitle} description={description}>
14
14
<Partition>
15
15
| <a href="/tags" class="nav-btn">Browse Tags</a> |<br />
16
16
<h1 class="text-2xl">All blog posts:</h1>
+2
-2
src/pages/extreme-format-test.astro
+2
-2
src/pages/extreme-format-test.astro
···
5
5
import BaseLayout from "../layouts/BaseLayout.astro";
6
6
7
7
const pageTitle = "Extreme format test";
8
-
const description = "All of Aria's friends with 88x31 buttons for you to click on!!";
8
+
const description = "A terrible test of video formats";
9
9
---
10
10
11
-
<BaseLayout pageTitle={pageTitle}>
11
+
<BaseLayout pageTitle={pageTitle} description={description}>
12
12
<Partition>
13
13
<h3 class="text-xl font-bold text-center">"All In One"</h3>
14
14
<video controls preload="metadata">
+1
-1
src/pages/friends.astro
+1
-1
src/pages/friends.astro
+61
src/pages/gallery/[id].astro
+61
src/pages/gallery/[id].astro
···
1
+
---
2
+
import { getCollection } from "astro:content";
3
+
import { getAlbumImages } from "../../utils/albums";
4
+
import { Picture } from "astro:assets";
5
+
6
+
import BaseLayout from "../../layouts/BaseLayout.astro";
7
+
import NavHeader from "../../components/NavHeader.astro";
8
+
9
+
export async function getStaticPaths() {
10
+
const albums = await getCollection("albums");
11
+
12
+
const paths = Object.values(albums).map((album) => {
13
+
return {
14
+
params: {
15
+
id: album.id,
16
+
},
17
+
props: {
18
+
album,
19
+
},
20
+
};
21
+
});
22
+
23
+
return paths;
24
+
}
25
+
26
+
import "../../styles/aria.css";
27
+
28
+
const { album } = Astro.props;
29
+
const images = await getAlbumImages(album.id);
30
+
---
31
+
<BaseLayout>
32
+
<div class="text-center my-16 mb-32">
33
+
<h1 class="text-3xl xl:text-6xl font-bold">
34
+
{album.data.title}
35
+
</h1>
36
+
<p class="text-lg xl:text-2xl my-4">
37
+
{album.data.description}
38
+
</p>
39
+
40
+
<div
41
+
class="mx-auto container my-8 sm:columns-2 md:columns-3 lg:columns-4 xl:columns-5"
42
+
>
43
+
{
44
+
images.map((image) => (
45
+
<Picture
46
+
src={image}
47
+
alt={`Image from ${album.data.title} album`}
48
+
formats={["avif", "webp", "jpeg"]}
49
+
quality={90}
50
+
class="rounded-sm mb-4 border border-transparent hover:border-gray-300 transition-all duration-300 ease-in-out hover:shadow-lg"
51
+
loading="lazy"
52
+
/>
53
+
))
54
+
}
55
+
</div>
56
+
57
+
<p class="text-lg my-4 text-center">
58
+
<a href="/albums/" class="text-white hover:underline">Go back</a>
59
+
</p>
60
+
</div>
61
+
</BaseLayout>
+1
-1
src/pages/index.astro
+1
-1
src/pages/index.astro
···
47
47
<Partition>
48
48
<h1 class="text-2xl">These are cool people!!</h1>
49
49
<br />
50
-
<div class="flex outline-dotted p-5 flex-wrap justify-center">
50
+
<div class="flex outline-dotted p-5 flex-wrap justify-center max-w-4xl">
51
51
<FriendLink
52
52
name="Alyxia"
53
53
image="https://alyxia.dev/static/img/88x31/self.png"
+1
-1
src/pages/portfolio.astro
+1
-1
src/pages/portfolio.astro
+1
-1
src/pages/special_blog.astro
+1
-1
src/pages/special_blog.astro
···
8
8
const description = "All of Aria's friends with 88x31 buttons for you to click on!!";
9
9
---
10
10
11
-
<BaseLayout pageTitle={pageTitle}>
11
+
<BaseLayout pageTitle={pageTitle} description={description}>
12
12
<Partition>
13
13
<h1 class="text-2xl">You should not be here!!</h1>
14
14
<p>If you can see this page then something has gone a little silly!</p><br />
+20
src/utils/albums.ts
+20
src/utils/albums.ts
···
1
+
export async function getAlbumImages(albumId: string) {
2
+
// 1. List all album files from collections path
3
+
let images = import.meta.glob<{ default: ImageMetadata }>(
4
+
"/src/content/albums/**/*.{jpeg,jpg,webp,avif,png,jxl}"
5
+
);
6
+
7
+
// 2. Filter images by albumId
8
+
images = Object.fromEntries(
9
+
Object.entries(images).filter(([key]) => key.includes(albumId))
10
+
);
11
+
12
+
// 3. Images are promises, so we need to resolve the glob promises
13
+
const resolvedImages = await Promise.all(
14
+
Object.values(images).map((image) => image().then((mod) => mod.default))
15
+
);
16
+
17
+
// 4. Shuffle images in random order
18
+
resolvedImages.sort(() => Math.random() - 0.5);
19
+
return resolvedImages;
20
+
}