feat(girls): senpy integration

3 files changed, 158 insertions, 0 deletions

diff --git a/src/routes/girls/+page.svelte b/src/routes/girls/+page.svelte
new file mode 100644
index 00000000..04b97d2a
--- /dev/null
+++ b/src/routes/girls/+page.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+	import Senpy from '$lib/Data/senpy';
+	import HeadTitle from '$lib/Home/HeadTitle.svelte';
+	import Message from '$lib/Loading/Message.svelte';
+	import Skeleton from '$lib/Loading/Skeleton.svelte';
+	import root from '$lib/Utility/root';
+</script>
+
+<HeadTitle route="Anime Girls Holding Programming Books" path="/girls" />
+
+<div class="card">
+	<div class="split">
+		<div>
+			{#await Senpy.getRandomImage()}
+				<Message message="Loading image ..." />
+
+				<Skeleton grid={true} count={1} width="49%" height="16.25em" />
+			{:then randomImage}
+				<img src={randomImage.image} alt="A random anime girl holding a programming book" />
+			{/await}
+		</div>
+		<div>
+			The Senpy Club <span class="opaque">|</span> Anime Girls Holding Programming Books
+
+			<p />
+
+			<ul>
+				<li>
+					<a href="https://github.com/senpy-club/frontend-next" target="_blank"
+						>Front-end Version 1.</a
+					> — Similar functionality to this page, but with a different design
+				</li>
+				<li>
+					<a href="https://github.com/senpy-club/api-worker" target="_blank">REST API</a> — The Official
+					Senpy Club REST API
+				</li>
+				<li>
+					<a href="https://github.com/senpy-club/cli" target="_blank">Command-line Interface</a> — Access
+					The Senpy Club API from your terminal (and export to files too)
+				</li>
+				<li>
+					<a href="https://docs.rs/senpy" target="_blank"><code>senpy-rs</code></a> — Rust bindings to
+					The Senpy Club API
+				</li>
+				<li>
+					<a href="https://docs.rs/senpy-ffi" target="_blank"><code>senpy-ffi</code></a> — Access The
+					Senpy Club API from any programming language (with FFI support)
+				</li>
+				<li>
+					<a href="https://github.com/senpy-club/graphql-api" target="_blank">GraphQL API</a> —
+					Official GraphQL access to The Senpy Club API (<a
+						href="https://graphql.senpy.club/playground"
+						target="_blank"
+					>
+						Playground</a
+					>)
+				</li>
+			</ul>
+		</div>
+	</div>
+</div>
+
+<p />
+
+<div class="card languages">
+	{#await Senpy.getLanguages()}
+		<Message message="Loading languages ..." />
+
+		<Skeleton
+			card={false}
+			count={10}
+			pad={false}
+			height={'0.9rem'}
+			width={'100%'}
+			list={true}
+			grid={false}
+		/>
+	{:then languages}
+		<ul>
+			{#each languages as language}
+				<li><a href={root(`/girls/${encodeURIComponent(language)}`)}>{language}</a></li>
+			{/each}
+		</ul>
+	{/await}
+</div>
+
+<style>
+	img {
+		border-radius: 8px;
+		width: 25vh;
+	}
+
+	.languages ul {
+		columns: 5;
+	}
+
+	@media (max-width: 1024px) {
+		.languages ul {
+			columns: 4;
+		}
+	}
+
+	@media (max-width: 768px) {
+		.languages ul {
+			columns: 3;
+		}
+	}
+
+	@media (max-width: 512px) {
+		.languages ul {
+			columns: 2;
+		}
+	}
+
+	.split {
+		display: flex;
+		gap: 1em;
+	}
+</style>
diff --git a/src/routes/girls/[language]/+page.server.ts b/src/routes/girls/[language]/+page.server.ts
new file mode 100644
index 00000000..7084986f
--- /dev/null
+++ b/src/routes/girls/[language]/+page.server.ts
@@ -0,0 +1,5 @@
+export const load = ({ params }) => {
+	return {
+		language: params.language
+	};
+};
diff --git a/src/routes/girls/[language]/+page.svelte b/src/routes/girls/[language]/+page.svelte
new file mode 100644
index 00000000..6cafe198
--- /dev/null
+++ b/src/routes/girls/[language]/+page.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import Senpy from '$lib/Data/senpy';
+	import Message from '$lib/Loading/Message.svelte';
+	import Skeleton from '$lib/Loading/Skeleton.svelte';
+
+	export let data;
+</script>
+
+<div class="card">
+	{#await Senpy.getImages(data.language)}
+		<Message message="Loading images ..." />
+
+		<Skeleton grid={true} count={1} width="49%" height="16.25em" />
+	{:then images}
+		<div class="images">
+			{#each images as image}
+				<img src={image} alt="An anime girl holding a programming book" />
+			{/each}
+		</div>
+	{/await}
+</div>
+
+<style lang="scss">
+	.images {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(16.25em, 1fr));
+		gap: 1em;
+
+		img {
+			border-radius: 8px;
+			width: 100%;
+		}
+	}
+</style>