update so that front page items are customizable

src/lib/en-lang.json

@@ -33,6 +33,63 @@
         "twitch": "/icons/paw icon.png"
 
     },
+    "frontpage": {
+        "items": [
+            {
+                "text": "Icon <br/> Commissions",
+                "picture": "/commissions/iconbasic.jpg",
+                "link": "/commissions#icon",
+                "width": 1
+            },
+            {
+                "text": "Emote <br/> Commissions",
+                "picture": "/commissions/emote2.jpg",
+                "link": "/commissions#emote",
+                "width": 1
+            },
+            {
+                "text": "YCH <br/> Commissions",
+                "picture": "/commissions/ychbaby.jpg",
+                "link": "/commissions#ych",
+                "width": 1
+            },
+            {
+                "text": "Ref Sheet <br/> Commissions",
+                "picture": "/commissions/refsheet1.jpg",
+                "link": "/commissions#refsheet",
+                "width": 3
+            },
+            {
+                "text": "Complex Scene <br/> Commissions",
+                "picture": "/commissions/complex1.jpg",
+                "link": "/commissions#complex",
+                "width": 2
+            },
+            {
+                "text": "Animation <br/> Commissions",
+                "picture": "/commissions/animationheadshot.gif",
+                "link": "/commissions#animation",
+                "width": 1
+            },
+            {
+                "text": "Halfbody <br/> Commissions",
+                "picture": "/commissions/halfbodybasic.jpg",
+                "link": "/commissions#halfbody",
+                "width": 1
+            },
+            {
+                "text": "Fullbody <br/> Commissions",
+                "picture": "/commissions/fullbodyultralineart.jpg",
+                "link": "/commissions#fullbody",
+                "width": 1
+            },
+            {
+                "text": "Contact <br/> + <br/> Socials",
+                "link": "/contact",
+                "width": 1
+            }
+        ]
+    },
     "commissions": {
         "accordions" : [
             {

src/routes/index.svelte

@@ -5,6 +5,7 @@
     import { onMount } from "svelte";
     import words from "$lib/en-lang.json";
     let lang = words["home"];
+    let items = words["frontpage"]["items"];
 
     onMount(() => {
         const soundBtn = document.querySelector('#clickMeow');
@@ -55,45 +56,13 @@
 
     <section class="container">
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
-            <Card href="/commissions#icon" picture="/commissions/iconbasic.jpg" alt="commission info">
-                Icon <br/> Commissions
-            </Card>
-
-            <Card href="/commissions#emote" picture="/commissions/emote2.jpg" alt="commission info">
-                Emote <br/> Commissions
-            </Card>
-
-            <Card href="/commissions#ych" picture="/commissions/ychbaby.jpg" alt="commission info">
-                YCH <br/> Commissions
-            </Card>
-
-            <span class="lg:col-span-3 flex">
-                <Card href="/commissions#refsheet" picture="/commissions/refsheet1.jpg" alt="commission info">
-                    Ref Sheet <br/> Commissions
-                </Card>
-            </span>
-
-            <span class="lg:col-span-2 flex w-full">
-                <Card href="/commissions#complex" picture="/commissions/complex1.jpg" alt="commission info">
-                    Complex Scene <br/> Commissions
-                </Card>
-            </span>
-
-            <Card href="/commissions#animation" picture="/commissions/animationheadshot.gif" alt="commission info">
-                Animation <br/> Commissions
-            </Card>
-
-            <Card href="/commissions#halfbody" picture="/commissions/halfbodybasic.jpg" alt="commission info">
-                Halfbody <br/> Commissions
-            </Card>
-
-            <Card href="/commissions#fullbody" picture="/commissions/fullbodyultralineart.jpg" alt="commission info">
-                Fullbody <br/> Commissions
-            </Card>
-
-            <Card href="/contact" alt="commission info">
-                Contact <br/> + <br/> Socials
-            </Card>
+            {#each items as item}
+                <span class="lg:col-span-{item['width']} flex">
+                    <Card href={item['link']} picture={item['picture']} alt="commission info">
+                        {@html item["text"]}
+                    </Card>
+                </span>
+            {/each}
         </div>
     </section>
 </main>