add: County & Quote cmps

Valexr · Apr 14, 2024 · 787d2b9 · 787d2b9
1 parent efdc987
commit 787d2b9
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 56 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -1,22 +1,21 @@
 <script lang="ts" context="module">
-    import Gh from "$lib/components/Gh.svelte";
-    import DateInput from "$lib/components/DateInput.svelte";
-    import { date, time, start, county } from "$lib/data";
+    import { date, time, start } from "$lib/data";
     import { getPhotos } from "$lib/images";
+
+    import DateInput from "$lib/components/DateInput.svelte";
+    import County from "$lib/components/County.svelte";
+    import Quote from "$lib/components/Quote.svelte";
 </script>
 
 <script lang="ts">
     export let name: Name;
-    export let repository: Repository;
 
     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;
-            `;
-        }
+        const images = await getPhotos(1, {});
+        document.body.style.cssText = `
+            background: url(${images?.[0].src}) center no-repeat;
+            background-size: cover;
+        `;
     }
 
     async function getQuote() {
@@ -40,20 +39,13 @@
 
     <main>
         {#if $start}
-            <ul>
-                <li id="years">{$county.years}</li>
-                <li id="months">{$county.months}</li>
-                <li id="days">{$county.days}</li>
-            </ul>
+            <County />
         {:else}
             <h2>Set start date</h2>
             <DateInput bind:value={$start} />
         {/if}
         {#await getQuote() then { quote, author }}
-            <blockquote>
-                <p>{quote}</p>
-                <cite>~ {author}</cite>
-            </blockquote>
+            <Quote {quote} {author} />
         {/await}
     </main>
 
@@ -78,33 +70,4 @@
         display: grid;
         place-content: center;
     }
-    ul {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-        font-size: min(27.5vw, 25vh);
-        font-weight: bold;
-        display: flex;
-        justify-content: center;
-        gap: 0.25em;
-        margin-bottom: 0.25em;
-    }
-    ul li {
-        position: relative;
-    }
-    ul li::after {
-        content: attr(id);
-        font-size: 15%;
-        font-weight: normal;
-        position: absolute;
-        inset: 0;
-        top: 90%;
-    }
-
-    blockquote p {
-        font-style: italic;
-    }
-    blockquote cite {
-        font-style: normal;
-    }
 </style>
diff --git a/src/app.d.ts b/src/app.d.ts
@@ -4,10 +4,7 @@ declare module '*.svg' {
 }
 
 type Name = string
-type Repository = {
-    type: string
-    url: string
-}
+type Repository = string
 
 type Size = {
     width: number;

diff --git a/src/app.ts b/src/app.ts
@@ -1,7 +1,5 @@
-import { name, repository } from 'package.json'
 import App from './App.svelte';
 
 export default new App({
-    target: document.body,
-    props: { name, repository }
+    target: document.body
 });
diff --git a/src/lib/components/County.svelte b/src/lib/components/County.svelte
@@ -0,0 +1,34 @@
+<script lang="ts" context="module">
+    import { county } from "$lib/data";
+</script>
+
+<ul>
+    <li id="years">{$county.years}</li>
+    <li id="months">{$county.months}</li>
+    <li id="days">{$county.days}</li>
+</ul>
+
+<style>
+    ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        font-size: min(27.5vw, 25vh);
+        font-weight: bold;
+        display: flex;
+        justify-content: center;
+        gap: 0.25em;
+        margin-bottom: 0.25em;
+    }
+    ul li {
+        position: relative;
+    }
+    ul li::after {
+        content: attr(id);
+        font-size: 15%;
+        font-weight: normal;
+        position: absolute;
+        inset: 0;
+        top: 90%;
+    }
+</style>
diff --git a/src/lib/components/Quote.svelte b/src/lib/components/Quote.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+    export let quote = "";
+    export let author = "";
+</script>
+
+<blockquote>
+    <p>{quote}</p>
+    <cite>~ {author}</cite>
+</blockquote>
+
+<style>
+    blockquote p {
+        font-style: italic;
+    }
+    blockquote cite {
+        font-style: normal;
+    }
+</style>