fix: template wizard runtimes

src/routes/console/project-[project]/functions/templates/+page.svelte

@@ -14,6 +14,7 @@
     import { Button, InputSearch } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { app } from '$lib/stores/app';
+    import type { Runtime } from '$lib/stores/marketplace.js';
     import { connectTemplate } from '$lib/wizards/functions/cover.svelte';
 
     export let data;
@@ -39,6 +40,22 @@
         goto(target.toString());
     }
 
+    function getBaseRuntimes(runtimes: Runtime[]): Runtime[] {
+        const baseRuntimes = new Map<string, Runtime>();
+
+        for (const runtime of runtimes) {
+            const [baseRuntime] = runtime.name.split('-');
+            if (!baseRuntimes.has(baseRuntime)) {
+                baseRuntimes.set(baseRuntime, {
+                    ...runtime,
+                    name: baseRuntime
+                });
+            }
+        }
+
+        return [...baseRuntimes.values()];
+    }
+
     function getIconFromRuntime(runtime: string) {
         switch (true) {
             case runtime.includes('node'):
@@ -153,8 +170,9 @@
                     class="grid-box"
                     style="--grid-item-size:22rem; --grid-item-size-small-screens:19rem">
                     {#each data.templates as template}
-                        {@const displayed = template.runtimes.slice(0, 2)}
-                        {@const hidden = template.runtimes.slice(1, -1)}
+                        {@const baseRuntimes = getBaseRuntimes(template.runtimes)}
+                        {@const displayed = baseRuntimes.slice(0, 2)}
+                        {@const hidden = baseRuntimes.slice(1, -1)}
                         <li>
                             <article class="card u-min-height-100-percent">
                                 <div class="u-flex u-gap-16 u-cross-center u-main-space-between">

src/routes/console/project-[project]/functions/templates/+page.ts

@@ -22,39 +22,29 @@ export const load: PageLoad = async ({ url, route }) => {
         [new Set<string>(), new Set<string>()]
     );
 
-    const templates = marketplace
-        .filter((template) => {
-            if (
-                filter.runtimes.length > 0 &&
-                !template.runtimes.some((runtime) =>
-                    filter.runtimes.includes(runtime.name.split('-')[0])
-                )
-            ) {
-                return false;
-            }
+    const templates = marketplace.filter((template) => {
+        if (
+            filter.runtimes.length > 0 &&
+            !template.runtimes.some((runtime) =>
+                filter.runtimes.includes(runtime.name.split('-')[0])
+            )
+        ) {
+            return false;
+        }
 
-            if (
-                filter.useCases.length > 0 &&
-                !template.usecases.some((useCase) => filter.useCases.includes(useCase))
-            ) {
-                return false;
-            }
+        if (
+            filter.useCases.length > 0 &&
+            !template.usecases.some((useCase) => filter.useCases.includes(useCase))
+        ) {
+            return false;
+        }
 
-            if (search) {
-                return template.name.toLowerCase().includes(search.toLowerCase());
-            } else {
-                return true;
-            }
-        })
-        .map((template) => ({
-            ...template,
-            runtimes: template.runtimes
-                .map((runtime) => ({ ...runtime, name: runtime.name.split('-')[0] }))
-                .filter(
-                    (runtime, index, self) =>
-                        self.findIndex((n) => n.name === runtime.name) === index
-                )
-        }));
+        if (search) {
+            return template.name.toLowerCase().includes(search.toLowerCase());
+        } else {
+            return true;
+        }
+    });
 
     return {
         offset,