8 files changed, 368 insertions, 0 deletions
diff --git a/src/app.css b/src/app.css
new file mode 100644
index 0000000..995e9cd
--- /dev/null
+++ b/src/app.css
@@ -0,0 +1,73 @@
+/*
+ * This file is part of frontend-next <https://github.com/senpy-club/frontend-next>.
+ * Copyright (C) 2022-2022 Fuwn <[email protected]>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Copyright (C) 2022-2022 Fuwn <[email protected]>
+ * SPDX-License-Identifier: GPL-3.0-only
+ */
+
+@import "normalize.css/normalize.css";
+@import "sakura.css/css/sakura-dark.css";
+
+html {
+  scroll-behavior: smooth;
+  overflow: scroll;
+  overflow-x: hidden;
+}
+body {
+  max-width: 58em;
+}
+
+img {
+  border-radius: 5px;
+}
+
+#random-image img {
+  height: 20em;
+  transition: 0.25s;
+}
+#random-image img:hover {
+  height: 22.5em;
+  opacity: 0.75;
+}
+#random-image a:hover {
+  border-bottom: none;
+}
+
+::-webkit-scrollbar {
+  width: 0;
+  background: transparent;
+}
+
+.image-rack {
+  text-align: center;
+  list-style-type: none;
+}
+
+#image-rack-item {
+  display: inline;
+  padding: 10px;
+}
+#image-rack-item a:hover {
+  border-bottom: none;
+}
+#image-rack-item img {
+  width: 20%;
+  transition: 0.25s;
+}
+#image-rack-item img:hover {
+  opacity: 0.75;
+  width: 25%;
+}
diff --git a/src/app.html b/src/app.html
new file mode 100644
index 0000000..e70b108
--- /dev/null
+++ b/src/app.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="description" content="Svelte demo app" />
+    <link rel="icon" href="%svelte.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %svelte.head%
+  </head>
+  <body>
+    <div>%svelte.body%</div>
+  </body>
+</html>
diff --git a/src/lib/api.ts b/src/lib/api.ts
new file mode 100644
index 0000000..58ed028
--- /dev/null
+++ b/src/lib/api.ts
@@ -0,0 +1,44 @@
+// This file is part of frontend-next <https://github.com/senpy-club/frontend-next>.
+// Copyright (C) 2022-2022 Fuwn <[email protected]>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, version 3.
+//
+// This program is distributed in the hope that it will be useful, but
+// WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+// General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <http://www.gnu.org/licenses/>.
+//
+// Copyright (C) 2022-2022 Fuwn <[email protected]>
+// SPDX-License-Identifier: GPL-3.0-only
+
+const baseUrl = "https://senpy-club-api-worker.fuwn.workers.dev/v2";
+
+interface RandomImage {
+  language: string;
+  image: string;
+}
+
+export async function fetchImages(language: string): Promise<string[]> {
+  language = language.replace("#", "%23");
+
+  const response = await fetch(`${baseUrl}/language/${language}`);
+
+  return await response.json();
+}
+
+export async function fetchLanguages(): Promise<string[]> {
+  const response = await fetch(`${baseUrl}/languages`);
+
+  return await response.json();
+}
+
+export async function fetchRandomImage(): Promise<RandomImage> {
+  const response = await fetch(`${baseUrl}/random`);
+
+  return await response.json();
+}
diff --git a/src/lib/header/Header.svelte b/src/lib/header/Header.svelte
new file mode 100644
index 0000000..0b0909e
--- /dev/null
+++ b/src/lib/header/Header.svelte
@@ -0,0 +1,33 @@
+<!-- This file is part of api-worker <https://github.com/senpy-club/api-worker>.
+Copyright (C) 2022-2022 Fuwn <[email protected]>
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, version 3.
+
+This program is distributed in the hope that it will be useful, but
+WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program. If not, see <http://www.gnu.org/licenses/>.
+
+Copyright (C) 2022-2022 Fuwn <[email protected]>
+SPDX-License-Identifier: GPL-3.0-only -->
+
+<header>
+  <nav>
+    Route senpy[3] = [
+    <a sveltekit:prefetch href="/">home</a>,
+    <a sveltekit:prefetch href="/languages">languages</a>,
+    <a
+      sveltekit:prefetch
+      href="https://senpy-club-api-worker.fuwn.workers.dev/"
+      target="_blank"
+    >
+      api
+    </a>
+    ];
+  </nav>
+</header>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
new file mode 100644
index 0000000..8d3337a
--- /dev/null
+++ b/src/routes/__layout.svelte
@@ -0,0 +1,34 @@
+<!-- This file is part of api-worker <https://github.com/senpy-club/api-worker>.
+Copyright (C) 2022-2022 Fuwn <[email protected]>
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, version 3.
+
+This program is distributed in the hope that it will be useful, but
+WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program. If not, see <http://www.gnu.org/licenses/>.
+
+Copyright (C) 2022-2022 Fuwn <[email protected]>
+SPDX-License-Identifier: GPL-3.0-only -->
+<script lang="ts">
+  import Header from "$lib/header/Header.svelte";
+  import "../app.css";
+</script>
+
+<Header />
+
+<main>
+  <slot />
+</main>
+
+<footer>
+  <p>
+    String copyright = "2022-{new Date().getFullYear()}
+    <a href="https://github.com/Fuwn">Fuwn</a>";
+  </p>
+</footer>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
new file mode 100644
index 0000000..efa4d00
--- /dev/null
+++ b/src/routes/index.svelte
@@ -0,0 +1,59 @@
+<!-- This file is part of api-worker <https://github.com/senpy-club/api-worker>.
+Copyright (C) 2022-2022 Fuwn <[email protected]>
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, version 3.
+
+This program is distributed in the hope that it will be useful, but
+WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program. If not, see <http://www.gnu.org/licenses/>.
+
+Copyright (C) 2022-2022 Fuwn <[email protected]>
+SPDX-License-Identifier: GPL-3.0-only -->
+<script>
+  import { onMount } from "svelte";
+  import { fetchRandomImage } from "$lib/api";
+
+  let image;
+  let complete = false;
+
+  onMount(async () => {
+    image = (await fetchRandomImage()).image;
+    complete = true;
+  });
+</script>
+
+<svelte:head>
+  <title>home | senpy-club</title>
+</svelte:head>
+
+<section>
+  <h1>Home</h1>
+
+  {#if !complete}
+    <p>Fetching a random image...</p>
+  {:else}
+    <div id="random-image">
+      <a href={image}>
+        <img
+          src={image}
+          alt="Image of an anime girl holding a programming book"
+        />
+      </a>
+    </div>
+  {/if}
+
+  <h2>Contributing</h2>
+  <p>
+    If you'd like to support the project in any way, check out the repositories:
+  </p>
+  <ul>
+    <li><a href="https://github.com/senpy-club/api-worker">API</a></li>
+    <li><a href="https://github.com/senpy-club/frontend-next">Frontend</a></li>
+  </ul>
+</section>
diff --git a/src/routes/language.svelte b/src/routes/language.svelte
new file mode 100644
index 0000000..dacbf72
--- /dev/null
+++ b/src/routes/language.svelte
@@ -0,0 +1,58 @@
+<!-- This file is part of api-worker <https://github.com/senpy-club/api-worker>.
+Copyright (C) 2022-2022 Fuwn <[email protected]>
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, version 3.
+
+This program is distributed in the hope that it will be useful, but
+WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program. If not, see <http://www.gnu.org/licenses/>.
+
+Copyright (C) 2022-2022 Fuwn <[email protected]>
+SPDX-License-Identifier: GPL-3.0-only -->
+<script>
+  import { onMount } from "svelte";
+  import { fetchImages } from "$lib/api";
+  import { page } from "$app/stores";
+
+  let language = $page.url.searchParams.get("language");
+  let images;
+  let complete = false;
+
+  onMount(async () => {
+    images = await fetchImages(language);
+    complete = true;
+  });
+</script>
+
+<svelte:head>
+  <title>{language} | senpy-club</title>
+</svelte:head>
+
+<div class="content">
+  <h1>{language}</h1>
+
+  {#if !complete}
+    <p>Fetching images...</p>
+  {:else if images.length === 0}
+    <p>Sorry, no images were found for this language.</p>
+  {:else}
+    <ul class="image-rack">
+      {#each images as image}
+        <li id="image-rack-item">
+          <a href={image}>
+            <img
+              src={image}
+              alt="Image of an anime girl holding a programming book"
+            />
+          </a>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
diff --git a/src/routes/languages.svelte b/src/routes/languages.svelte
new file mode 100644
index 0000000..9f14e18
--- /dev/null
+++ b/src/routes/languages.svelte
@@ -0,0 +1,54 @@
+<!-- This file is part of api-worker <https://github.com/senpy-club/api-worker>.
+Copyright (C) 2022-2022 Fuwn <[email protected]>
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, version 3.
+
+This program is distributed in the hope that it will be useful, but
+WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program. If not, see <http://www.gnu.org/licenses/>.
+
+Copyright (C) 2022-2022 Fuwn <[email protected]>
+SPDX-License-Identifier: GPL-3.0-only -->
+<script>
+  import { onMount } from "svelte";
+  import { fetchLanguages } from "$lib/api";
+  let languages;
+  let complete = false;
+
+  onMount(async () => {
+    languages = await fetchLanguages();
+    complete = true;
+  });
+</script>
+
+<svelte:head>
+  <title>languages | senpy-club</title>
+</svelte:head>
+
+<div class="content">
+  <h1>Languages</h1>
+
+  {#if !complete}
+    <p>Fetching languages...</p>
+  {:else}
+    <ul>
+      {#each languages as language}
+        <li>
+          {#if language === "C#"}
+            <a href={"/language?language=C%23"}>C#</a>
+          {:else}
+            <a href={"/language?language=" + language}>
+              {language}
+            </a>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>