Make /Items display craftable items only

/Items/All now displays all items.

src/lib/RecipeItems.svelte

@@ -8,7 +8,7 @@
 {#each items as item, i}
     <li class="sum">{#if i > 0}+{/if}</li>
     <li class="item" data-name={item.item.name}>
-        <a href="/Items/{item.item.name}">
+        <a href="/Items/Item/{item.item.name}">
             <GameIcon
                 counter={item.count}
                 icon={item.item.icon}

src/routes/Items/+page.server.ts

@@ -5,6 +5,7 @@ export const load = async () => {
 
     return {
         items: Object.entries(data.items)
+            .filter(([_, item]) => item.recipes.length > 0)
             .sort(([, a], [, b]) => {
                 return a.displayName.localeCompare(b.displayName);
             }),

src/routes/Items/+page.svelte

@@ -5,11 +5,15 @@
 
 </script>
 
-<h1>All Icarus Items</h1>
+<h1>All Craftable Icarus Items</h1>
+<p>Other lists of Icarus items:</p>
+<ul class="other-lists">
+    <li><a href="/Items/All" class="link">All items including non-craftable experimental items</a></li>
+</ul>
 
 <div class="items">
     {#each data.items as [name, item]}
-        <a href="/Items/{name}">
+        <a href="/Items/Item/{name}">
             <GameIcon
                 icon={item.icon}
                 alt="{item.displayName}"
@@ -21,22 +25,28 @@
 </div>
 
 <style>
-    a {
-        display: flex;
-        align-items: center;
-        color: white;
-        gap: 4px;
-        text-decoration: none;
-    }
-
     h2 {
         font-size: 1.3em;
     }
 
+    .other-lists {
+        list-style-position: inside;
+        padding-left: 1em;
+    }
+
     .items {
         display: grid;
         gap: 2em;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         --game-icon-width: 64px;
     }
+
+    .items a {
+        display: flex;
+        align-items: center;
+        color: white;
+        gap: 4px;
+        text-decoration: none;
+    }
+
 </style>

src/routes/Items/All/+page.server.ts

@@ -0,0 +1,13 @@
+import {getData} from '$lib/data';
+
+export const load = async () => {
+    const data = await getData();
+
+    return {
+        items: Object.entries(data.items)
+            .sort(([, a], [, b]) => {
+                return a.displayName.localeCompare(b.displayName);
+            }),
+        title: 'Items',
+    };
+};

src/routes/Items/All/+page.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+    import GameIcon from '$lib/GameIcon.svelte'
+
+    export let data;
+
+</script>
+
+<h1>All Icarus Items</h1>
+<p>
+    This includes items that are experimental and not craftable. For a list of craftable items, go
+    <a href="/Items" class="link">here</a>.
+</p>
+
+<div class="items">
+    {#each data.items as [name, item]}
+        <a href="/Items/Item/{name}">
+            <GameIcon
+                icon={item.icon}
+                alt="{item.displayName}"
+                size="64"
+                showCaption={false}></GameIcon>
+            <h2>{item.displayName}</h2>
+        </a>
+    {/each}
+</div>
+
+<style>
+    h2 {
+        font-size: 1.3em;
+    }
+
+    .items {
+        display: grid;
+        gap: 2em;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        --game-icon-width: 64px;
+    }
+
+    .items a {
+        display: flex;
+        align-items: center;
+        color: white;
+        gap: 4px;
+        text-decoration: none;
+    }
+</style>

src/routes/global.css

@@ -27,3 +27,7 @@ h2 {
 h3 {
     font-size: 1.3em;
 }
+
+a.link {
+    text-decoration: underline;
+}