diff options
| -rw-r--r-- | src/lib/Data/senpy.ts | 30 | ||||
| -rw-r--r-- | src/routes/girls/+page.svelte | 119 | ||||
| -rw-r--r-- | src/routes/girls/[language]/+page.server.ts | 5 | ||||
| -rw-r--r-- | src/routes/girls/[language]/+page.svelte | 34 |
4 files changed, 188 insertions, 0 deletions
diff --git a/src/lib/Data/senpy.ts b/src/lib/Data/senpy.ts new file mode 100644 index 00000000..b3d79826 --- /dev/null +++ b/src/lib/Data/senpy.ts @@ -0,0 +1,30 @@ +const senpyAPI = 'https://api.senpy.club/v2'; + +export interface SenpyRandomImage { + language: string; + image: string; +} + +class Senpy { + static async getImages(language: string): Promise<string[]> { + language = language.replace('#', '%23'); + + const response = await fetch(`${senpyAPI}/language/${language}`); + + return await response.json(); + } + + static async getLanguages(): Promise<string[]> { + const response = await fetch(`${senpyAPI}/languages`); + + return await response.json(); + } + + static async getRandomImage(): Promise<SenpyRandomImage> { + const response = await fetch(`${senpyAPI}/random`); + + return await response.json(); + } +} + +export default Senpy; 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> |