src/routes/language.svelte

   1 <!-- This file is part of api-worker <https://github.com/senpy-club/api-worker>.
   2 Copyright (C) 2022-2022 Fuwn <contact@fuwn.me>
   3
   4 This program is free software: you can redistribute it and/or modify
   5 it under the terms of the GNU General Public License as published by
   6 the Free Software Foundation, version 3.
   7
   8 This program is distributed in the hope that it will be useful, but
   9 WITHOUT ANY WARRANTY; without even the implied warranty of
  10 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
  11 General Public License for more details.
  12
  13 You should have received a copy of the GNU General Public License
  14 along with this program. If not, see <http://www.gnu.org/licenses/>.
  15
  16 Copyright (C) 2022-2022 Fuwn <contact@fuwn.me>
  17 SPDX-License-Identifier: GPL-3.0-only -->
  18 <script>
  19   import { onMount } from "svelte";
  20   import { fetchImages } from "$lib/api";
  21   import { page } from "$app/stores";
  22
  23   let language = $page.url.searchParams.get("language");
  24   let images, fetchTime;
  25   let complete = false;
  26
  27   onMount(async () => {
  28     fetchTime = performance.now();
  29     images = await fetchImages(language);
  30     fetchTime = performance.now() - fetchTime;
  31     complete = true;
  32   });
  33 </script>
  34
  35 <svelte:head>
  36   <title>{language} | senpy-club</title>
  37 </svelte:head>
  38
  39 <div class="content">
  40   <h1>{language}</h1>
  41
  42   {#if !complete}
  43     <p>Fetching images...</p>
  44   {:else if images.length === 0}
  45     <p>Sorry, no images were found for this language.</p>
  46   {:else}
  47     <ul class="image-rack">
  48       {#each images as image}
  49         <li id="image-rack-item">
  50           <a href={image}>
  51             <img
  52               src={image}
  53               alt="Image of an anime girl holding a programming book"
  54             />
  55           </a>
  56         </li>
  57       {/each}
  58     </ul>
  59     <small>Fetch time: {fetchTime}ms</small>
  60   {/if}
  61 </div>