Merge pull request #216 from pvdthings/main

Spanish lang support and other improvements

src/lib/filters.ts

@@ -1,6 +1,10 @@
+// Will be automatically chosen on refresh as the filtered category
+export const defaultFilterCategory = "All";
+
 export const filter = (things, { keyword, onlyWishList, category }) => {
     let filtered = things;
-    if (category)
+
+    if (category && category.toLowerCase() !== "all")
         filtered = filtered.filter(thing => thing.categories.includes(category));
     if (keyword.length > 0)
         filtered = filtered.filter(thing => thing.name.toLowerCase().includes(keyword.toLowerCase()));
@@ -13,5 +17,5 @@ export const filter = (things, { keyword, onlyWishList, category }) => {
 }
 
 export const filterByCategory = (things, category) => {
-    return things.filter(thing => thing.categories?.includes(category));
+    return category.toLowerCase() === "all" ? things : things.filter(thing => thing.categories?.includes(category));
 }

src/lib/foundation/Chooser.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
     import { createEventDispatcher } from "svelte";
+    import { t, locale } from "$lib/language/translate";
+    import { defaultFilterCategory } from "../filters";
 
     export let options = [];
 
-    let chosenOption = options[0];
+    let chosenOption = defaultFilterCategory;
     let dropdownHidden = true;
 
+    $: isEnglish = $locale === "en";
+
     const dispatch = createEventDispatcher();
 
     const toggleDropdown = () => {
@@ -26,12 +30,13 @@
         <span class="mr-1">
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="inline"><polyline points="6 9 12 15 18 9"></polyline></svg>
         </span>
-        <span>{chosenOption}</span>
+        <span>{isEnglish ? chosenOption : $t(chosenOption)}</span>
     </button>
     <div class:dropdownHidden class="fixed top-0 left-0 w-full h-full overflow-y-scroll md:h-fit md:absolute md:top-14 bg-indigo-50 md:brutal md:hovers-static p-4 md:rounded-md flex flex-col gap-y-4 md:gap-y-2 z-50">
-        <div class="text-xl font-bold md:hidden">Choose a category&colon;</div>
+        <div class="text-xl font-bold md:hidden">{$t('Chooser.CategoryPrompt')}</div>
+            <button on:click={() => optionChosen(defaultFilterCategory)} class="text-2xl md:text-lg text-left active:underline hover:underline hover:underline-offset-2 hover:decoration-2">{isEnglish ? defaultFilterCategory : $t(defaultFilterCategory)}</button>
         {#each options as option}
-            <button on:click={() => optionChosen(option)} class="text-2xl md:text-lg text-left active:underline hover:underline hover:underline-offset-2 hover:decoration-2">{option}</button>
+            <button on:click={() => optionChosen(option)} class="text-2xl md:text-lg text-left active:underline hover:underline hover:underline-offset-2 hover:decoration-2">{isEnglish ? option : $t(option)}</button>
         {/each}
     </div>
 </div>

src/lib/language/translate.ts

@@ -0,0 +1,31 @@
+// Code unapologetically copied from: https://dev.to/danawoodman/svelte-quick-tip-adding-basic-internationalization-i18n-to-you-app-2lm
+
+import { derived, writable } from "svelte/store";
+import translations from "./translations";
+
+export const locale = writable("en");
+export const locales = Object.keys(translations);
+
+function translate(locale, key, vars) {
+  // Let's throw some errors if we're trying to use keys/locales that don't exist.
+  // We could improve this by using Typescript and/or fallback values.
+  if (!key) throw new Error("no key provided to $t()");
+  if (!locale) throw new Error(`no translation for key "${key}"`);
+
+  // Grab the translation from the translations object.
+  let text = translations[locale][key];
+
+  if (!text) throw new Error(`no translation found for ${locale}.${key}`);
+
+  // Replace any passed in variables in the translation string.
+  Object.keys(vars).map((k) => {
+    const regex = new RegExp(`{{${k}}}`, "g");
+    text = text.replace(regex, vars[k]);
+  });
+
+  return text;
+}
+
+export const t = derived(locale, ($locale) => (key, vars = {}) =>
+  translate($locale, key, vars)
+);

src/lib/language/translations.ts

@@ -0,0 +1,36 @@
+export default {
+    en: {
+        "Button.Home": "Home",
+        "Button.Donate": "Donate",
+        "Button.WishList": "Wish List",
+        "Chooser.CategoryPrompt": "Choose a category:",
+        "Input.Search": "Search...",
+        "Thing.Tags.Available": "Available",
+        "A project by": "A project by",
+        "No Results": "No Results"
+    },
+    es: {
+        "Button.Home": "Inicio",
+        "Button.Donate": "Donar",
+        "Button.WishList": "Donaciones",
+        "Chooser.CategoryPrompt": "Elija una categoría:",
+        "Input.Search": "Buscar...",
+        "Thing.Tags.Available": "Disponible",
+        "A project by": "Un proyecto de",
+        "No Results": "No hay resultados",
+        "All": "Todas",
+        "DIY": "Bricolaje",
+        "Media": "Media",
+        "Games": "Juegos",
+        "Outdoors": "Aire libre",
+        "Sports": "Deportes",
+        "Entertainment": "Diversión",
+        "Yard": "Patio",
+        "Cleaning": "Limpia",
+        "Cooking": "Cocina",
+        "Crafts": "Artesanía",
+        "Pet": "Mascotas",
+        "Automotive": "Automotor",
+        "Health": "Salud"
+    }
+}

src/lib/layout/Footer.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { Column, Link, Row, Text } from "$lib/Foundation.svelte";
+    import { t } from "$lib/language/translate";
 </script>
 
 <footer class="bg-bg py-10 relative z-40">
@@ -42,7 +43,7 @@
             </a>
         </Row>
         <Text body light center>
-            A project by <Link to="https://starboard.coop">Starboard Co-op</Link>
+            {$t("A project by")} <Link to="https://starboard.coop">Starboard Co-op</Link>
         </Text>
     </Column>
 </footer>

src/lib/layout/Header.svelte

@@ -1,3 +1,7 @@
+<script>
+    import { t, locale, locales } from "$lib/language/translate"
+</script>
+
 <header class="w-full p-4 flex flex-col space-y-8 justify-center">
     <div class="grid grid-cols-3">
         <div class="flex flex-row justify-start">
@@ -7,7 +11,7 @@
                         <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                         <polyline points="15 6 9 12 15 18" />
                     </svg>
-                    <div class="text-xl font-bold font-display hover:underline">HOME</div>
+                    <div class="text-xl font-bold font-display hover:underline uppercase">{$t("Button.Home")}</div>
                 </a>
             </div>
         </div>
@@ -16,7 +20,16 @@
                 <img src="/PVD_Things_Logo_White.png" alt="PVD Things" class="h-16 lg:h-20"/>
             </a>
         </div>
-        <div class="flex flex-row justify-end"></div>
+        <div class="flex flex-row gap-x-3 justify-end align-top">
+            {#each locales as localeKey}
+                <button
+                    class="text-xl font-bold font-display h-fit {($locale === localeKey) && 'underline'} hover:underline uppercase"
+                    on:click={() => locale.set(localeKey)}
+                >
+                    {localeKey}
+                </button>
+            {/each}
+        </div>
     </div>
     <h1 hidden>PVD Things</h1>
 </header>

src/lib/things/Thing.svelte

@@ -1,5 +1,7 @@
 <script>
-	import { Card, Text } from "$lib/Foundation.svelte";
+	  import { Card, Text } from "$lib/Foundation.svelte";
+    import BoxIcon from "$lib/icons/box.svg";
+    import { t } from "$lib/language/translate";
 
     export let thing;
 
@@ -11,15 +13,15 @@
 
 <div class="flex flex-col {className}">
     <Card>
-        <img src={thing.image} alt={thing.name} class="h-full w-full object-contain" />
+      <img src={thing.image ?? BoxIcon} alt={thing.name} class="h-full w-full object-contain" />
     </Card>
     <div class="pl-1 pt-2 flex flex-col gap-2 justify-between flex-grow">
         <Text display bold smallauto>{thing.name}</Text>
         <div class="flex flex-col lg:flex-row gap-2">
             {#if thing.stock > 0}
-                <div class="px-2 py-1 rounded bg-green-300 w-max font-medium text-sm">Available</div>
+                <div class="px-2 py-1 rounded bg-green-300 w-max font-medium text-sm">{$t("Thing.Tags.Available")}</div>
             {:else}
-                <a class="px-2 py-1 rounded brutal hover:hovers-static bg-primary w-max font-bold font-display text-sm" href={donateURL} target="_blank" rel="noreferrer">Donate</a>
+                <a class="px-2 py-1 rounded brutal hover:hovers-static bg-primary w-max font-bold font-display text-sm" href={donateURL} target="_blank" rel="noreferrer">{$t("Button.Donate")}</a>
             {/if}
         </div>
     </div>

src/routes/+page.svelte

@@ -1,18 +1,19 @@
 <script>
 	import { onMount } from "svelte";
-    import { filter } from "$lib/filters";
+    import { defaultFilterCategory, filter } from "$lib/filters";
     import Things from "$lib/things/Things.svelte";
     import { Button, TextInput } from "$lib/Foundation.svelte";
     import { ButtonTheme } from "$lib/foundation/button";
     import LoadingIndicator from "$lib/LoadingIndicator.svelte";
 	import Chooser from "$lib/foundation/Chooser.svelte";
     import EyeOffIcon from "$lib/icons/eye-off.svg";
     import EyeIcon from "$lib/icons/eye.svg";
+    import { t } from "$lib/language/translate";
 
     export let data;
 
     let shownThings = data.things;
-    let shownCategory = "DIY";
+    let shownCategory = defaultFilterCategory;
     let searchText = "";
     let showingOnlyWishList = false;
 
@@ -50,20 +51,24 @@
                         selectedIcon={EyeIcon} 
                         on:click={toggleWishList} 
                         theme={ButtonTheme.default} 
-                        text="Wish List" 
+                        text={$t("Button.WishList")}
                         selected={showingOnlyWishList}>
-                        Wish List
+                        {$t("Button.WishList")}
                     </Button>
                 {/key}
             </div>
             <TextInput
                 bind:value={searchText}
                 on:input={filterThings}
-                placeholder="Search..."
+                placeholder={$t("Input.Search")}
             />
         </div>
         <div class="mb-8">
-            <Things things={shownThings} categories={data.categories} {shownCategory} />
+            {#if shownThings.length > 0}
+                <Things things={shownThings} categories={data.categories} {shownCategory} />
+            {:else}
+                <div class="text-lg text-center font-bold uppercase">{$t("No Results")}</div>
+            {/if}
         </div>
     {/if}
 </div>