add: quotes

Valexr · Apr 14, 2024 · 03732cf · 03732cf
1 parent e10fce6
commit 03732cf
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 47 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -1,58 +1,93 @@
 <script lang="ts" context="module">
     import Gh from "$lib/components/Gh.svelte";
     import { date, time, start, county } from "$lib/data";
+    import { getPhotos } from "$lib/images";
 </script>
 
 <script lang="ts">
     export let name: Name;
     export let repository: Repository;
 
     $start = "2013-04-09";
+
+    async function setBack() {
+        const image = await getPhotos(1, {});
+        if (image) {
+            document.body.style.cssText = `
+                background: url(${image[0].src}) center no-repeat;
+                background-size: cover;
+            `;
+        }
+    }
+
+    async function getQuote() {
+        const res = await fetch("https://dummyjson.com/quotes/random");
+        return res.json();
+    }
 </script>
 
 <svelte:head>
     <title>{name}</title>
 </svelte:head>
 
-<header>
-    <button>Some</button>
-    <h1>
-        <Gh {repository} />
-        {name}
-    </h1>
-    <button>Else</button>
-</header>
-
-<main>
-    <form action="POST" on:submit|preventDefault>
-        <label>
-            <input
-                type="date"
-                placeholder="Set start date"
-                bind:value={$start}
-            />
-        </label>
-    </form>
-    <h2>{$date}</h2>
-    <ul>
-        <li id="years">{$county.years}</li>
-        <li id="months">{$county.months}</li>
-        <li id="days">{$county.days}</li>
-    </ul>
-    <h2>{$time}</h2>
-</main>
+{#await setBack() then}
+    <header>
+        <!-- <button>Image</button>
+        <h1>
+            <Gh {repository} />
+            {name}
+        </h1>
+        <button>Settings</button> -->
+    </header>
 
-<footer>
-    <p>{new Date().getFullYear()} © County</p>
-</footer>
+    <main>
+        <form action="POST" on:submit|preventDefault>
+            <label>
+                <input
+                    type="date"
+                    placeholder="Set start date"
+                    bind:value={$start}
+                />
+            </label>
+        </form>
+        <h2>{$date}</h2>
+        <ul>
+            <li id="years">{$county.years}</li>
+            <li id="months">{$county.months}</li>
+            <li id="days">{$county.days}</li>
+        </ul>
+        <h2>{$time}</h2>
+    </main>
+    <!-- [{quote: string, author: string, category: string}] -->
+    <footer>
+        {#await getQuote() then { quote, author }}
+            <blockquote>
+                <p>{quote}</p>
+                <footer>~ {author}</footer>
+            </blockquote>
+        {/await}
+        <!-- <p>{new Date().getFullYear()} © County</p> -->
+    </footer>
+{/await}
 
 <style>
     @import "app.css";
+
     main {
         padding: 1em;
     }
+    form {
+        /* display: flex; */
+        align-items: center;
+        justify-content: center;
+    }
     input {
         font-size: 1.5em;
+        font-weight: bold;
+        font-family: inherit;
+        background: transparent;
+        border: 0;
+        color: inherit;
     }
     ul {
         list-style: none;
@@ -76,4 +111,8 @@
         inset: 0;
         top: 90%;
     }
+
+    blockquote p {
+        font-style: italic;
+    }
 </style>
diff --git a/src/app.d.ts b/src/app.d.ts
@@ -14,9 +14,6 @@ type Size = {
     height: number;
 }
 
-/**
- * `https://www.picsum.photos` API response schema
- */
 type ImageSchema = {
     id: number;
     alt: string;
@@ -25,9 +22,6 @@ type ImageSchema = {
     height: number;
 }
 
-/**
- * Common Image interface.
- */
 type Slide = {
     id?: string | number;
     src?: string;

diff --git a/src/lib/images.ts b/src/lib/images.ts
@@ -1,8 +1,7 @@
-export const getPhotos = async ({
-    limit = 5,
+export async function getPhotos(limit = 5, {
     width = window.innerWidth,
     height = window.innerHeight,
-}) => {
+}) {
     try {
         return await getImages(limit, { width, height });
     } catch (error) {
@@ -14,7 +13,7 @@ async function getImages(
     limit: number = 9,
     size = { width: window.innerWidth, height: window.innerHeight }
 ): Promise<Slide[]> {
-    const url = 'https://raw.githubusercontent.com/Valexr/county/master/assets/photos.json';
+    const url = 'https://valexr.github.io/county/assets/photos.json';
     const indexes = Array.from({ length: limit }, () => Math.floor(Math.random() * 24644));
     const res = await fetch(url);
     const photos = await res.json();
@@ -41,12 +40,34 @@ async function getImages(
     function ratio(size: number) {
         return size * devicePixelRatio;
     }
-}
 
-const applyRatio = (src: Size, size: Size): Size => {
-    const ratio = Math.min(size.width / src.width, size.height, src.height);
-    return {
-        width: Math.round(src.width * ratio),
-        height: Math.round(src.height * ratio),
+    function applyRatio(src: Size, size: Size): Size {
+        const ratio = Math.min(size.width / src.width, size.height, src.height);
+        return {
+            width: Math.round(src.width * ratio),
+            height: Math.round(src.height * ratio),
+        };
     };
-};
+}
+
+type Size = {
+    width: number;
+    height: number;
+}
+
+type ImageSchema = {
+    id: number;
+    alt: string;
+    src: string;
+    width: number;
+    height: number;
+}
+
+type Slide = {
+    id?: string | number;
+    src?: string;
+    alt?: string;
+    width?: string | number;
+    height?: string | number;
+    [key: string]: unknown;
+}