src/routes/index.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 { fetchRandomImage } from "$lib/api";
  21
  22   let image, fetchTime;
  23   let complete = false;
  24
  25   onMount(async () => {
  26     fetchTime = performance.now();
  27     image = await fetchRandomImage();
  28     fetchTime = performance.now() - fetchTime;
  29     complete = true;
  30   });
  31 </script>
  32
  33 <svelte:head>
  34   <title>Home | The Senpy Club</title>
  35 </svelte:head>
  36
  37 <section>
  38   <h1>Home</h1>
  39
  40   {#if !complete}
  41     <p>Fetching a random image...</p>
  42   {:else}
  43     <div class="highlight-image">
  44       <a href={`/language?language=${image.language}&image=${image.image}`}>
  45         <img
  46           src={image.image}
  47           alt="Image of an anime girl holding a programming book"
  48         />
  49       </a>
  50     </div>
  51
  52     <p>Double fetch_time = {fetchTime}; /* ms */</p>
  53   {/if}
  54
  55   <h2>Related Projects</h2>
  56   <p>Check out these other [The] Senpy Club-related projects!</p>
  57   <ul>
  58     <li>
  59       <a href="https://github.com/senpy-club/api-worker" target="_blank">API</a>
  60       &mdash; The Senpy Club API
  61     </li>
  62     <li>
  63       <a href="https://github.com/senpy-club/frontend-next" target="_blank">
  64         Frontend
  65       </a> &mdash; You are here!
  66     </li>
  67     <li>
  68       <a href="https://github.com/senpy-club/cli" target="_blank">CLI</a> &mdash;
  69       Access The Senpy Club API from your terminal! (and export it to files too!)
  70     </li>
  71     <li>
  72       <a href="https://docs.rs/senpy" target="_blank"><code>senpy-rs</code></a>
  73       &mdash; Access The Senpy Club API from
  74       <a href="https://www.rust-lang.org/">Rust</a>!
  75     </li>
  76     <li>
  77       <a href="https://docs.rs/senpy-ffi" target="_blank">
  78         <code>senpy-ffi</code>
  79       </a>
  80       &mdash; Access The Senpy Club API from any programming language!
  81     </li>
  82     <li>
  83       <a href="https://github.com/senpy-club/graphql-api" target="_blank">
  84         GraphQL API
  85       </a>
  86       &mdash; GraphQL access to The Senpy Club API! (<a
  87         href="https://graphql.senpy.club/playground">Playground</a
  88       >)
  89     </li>
  90   </ul>
  91 </section>