Deploy

apps/frontend/auctions/Main.svelte

@@ -10,6 +10,8 @@
     import Routes from './Routes.svelte';
     import Sidebar from './Sidebar.svelte';
 
+    let { baseUrlPrefix }: { baseUrlPrefix?: string } = $props();
+
     let ready = $state(false);
 
     onMount(async () => {
@@ -34,6 +36,6 @@
 {#if !ready}
     <p>L O A D I N G</p>
 {:else}
-    <Sidebar />
-    <Routes />
+    <Sidebar {baseUrlPrefix} />
+    <Routes {baseUrlPrefix} />
 {/if}

apps/frontend/auctions/Routes.svelte

@@ -1,13 +1,37 @@
 <script lang="ts">
-    import Router from 'svelte-spa-router'
+    import Router from 'svelte-spa-router';
+    import { wrap } from 'svelte-spa-router/wrap';
 
-    import Browse from './components/browse/Browse.svelte'
-    import Search from './components/search/Search.svelte'
+    import Browse from './components/browse/Browse.svelte';
+    import Search from './components/search/Search.svelte';
 
-    const routes = {
-        '/browse/:slug1?/:slug2?/:slug3?/:slug4?/:slug5?': Browse,
-        '/search/:slug1?/:slug2?/:slug3?': Search,
-    }
+    let { baseUrlPrefix }: { baseUrlPrefix?: string } = $props();
+
+    let routes = $derived.by(() => {
+        // eslint-disable-next-line svelte/prefer-svelte-reactivity
+        const ret = new Map();
+
+        ret.set(
+            `${baseUrlPrefix || ''}/browse/:slug1?/:slug2?/:slug3?/:slug4?/:slug5?`,
+            wrap({
+                component: Browse,
+                props: {
+                    baseUrlPrefix,
+                },
+            })
+        );
+        ret.set(
+            `${baseUrlPrefix || ''}/search/:slug1?/:slug2?/:slug3?`,
+            wrap({
+                component: Search,
+                props: {
+                    baseUrlPrefix,
+                },
+            })
+        );
+
+        return ret;
+    });
 </script>
 
 <Router {routes} />

apps/frontend/auctions/Sidebar.svelte

@@ -10,12 +10,18 @@
     import Sidebar from '@/shared/components/sub-sidebar/SubSidebar.svelte';
     import TextInput from '@/shared/components/forms/TextInput.svelte';
 
+    let { baseUrlPrefix }: { baseUrlPrefix: string } = $props();
+
     let searchValue: string;
 
+    let baseUrl = $derived(
+        `${baseUrlPrefix || ''}/browse/${Region[$auctionsAppState.region].toLowerCase()}`
+    );
+
     const onSubmit = async function () {
         if (searchValue?.trim()?.length > 0) {
             replace(
-                `/search/${Region[$auctionsAppState.region].toLowerCase()}/${encodeURIComponent(searchValue)}`
+                `${baseUrlPrefix || ''}/search/${Region[$auctionsAppState.region].toLowerCase()}/${encodeURIComponent(searchValue)}`
             );
         }
     };
@@ -67,16 +73,10 @@
 </style>
 
 {#key $auctionsAppState.region}
-    <Sidebar
-        baseUrl={`/browse/${Region[$auctionsAppState.region].toLowerCase()}`}
-        items={$auctionStore.categories}
-        scrollable={true}
-        width="16rem"
-        {dataFunc}
-    >
+    <Sidebar {baseUrl} items={$auctionStore.categories} scrollable={true} width="16rem" {dataFunc}>
         <div slot="before" class="before">
             <div class="regions">
-                {#each ['us', 'eu', 'kr', 'tw'] as region}
+                {#each ['us', 'eu', 'kr', 'tw'] as region (region)}
                     <button
                         class="border"
                         class:active={Region[$auctionsAppState.region].toLowerCase() === region}

apps/frontend/auctions/components/browse/Browse.svelte

@@ -10,14 +10,18 @@
     import type { AuctionCategory } from '@/types/data/auction';
 
     import Results from '@/auctions/components/results/Results.svelte';
-    import UnderConstruction from '@/shared/components/under-construction/UnderConstruction.svelte';
 
-    export let params: MultiSlugParams;
+    type Props = {
+        baseUrlPrefix?: string;
+        params: MultiSlugParams;
+    };
+    let { baseUrlPrefix, params }: Props = $props();
+
+    let [categories, category, selected] = $derived.by(() => {
+        let retCategories: AuctionCategory[];
+        let retCategory: AuctionCategory;
+        let retSelected: string;
 
-    let categories: AuctionCategory[];
-    let category: AuctionCategory;
-    let selected: string;
-    $: {
         const usefulParams = [params.slug2, params.slug3, params.slug4, params.slug5].filter(
             (slug) => !!slug
         );
@@ -44,31 +48,40 @@
         }
 
         if (
-            !categories ||
-            categories.map((c) => c.slug).join('|') !== newCategories.map((c) => c.slug).join('|')
+            !retCategories ||
+            retCategories.map((c) => c.slug).join('|') !==
+                newCategories.map((c) => c.slug).join('|')
         ) {
-            categories = newCategories;
+            retCategories = newCategories;
         }
-        if (newCategory?.id !== category?.id) {
-            category = newCategory;
+        if (newCategory?.id !== retCategory?.id) {
+            retCategory = newCategory;
         }
-        if (newSelected !== selected) {
-            selected = newSelected;
+        if (newSelected !== retSelected) {
+            retSelected = newSelected;
         }
-    }
+
+        return [retCategories, retCategory, retSelected];
+    });
+
+    let loadFunc = $derived(
+        async () => await browseStore.fetch($auctionsAppState, $auctionStore, category.id)
+    );
 
     onMount(() => {
         if (params.slug1) {
             const oldRegion = $auctionsAppState.region;
             const newRegion = Region[params.slug1.toUpperCase() as keyof typeof Region];
             if (oldRegion !== newRegion) {
                 $auctionsAppState.region = newRegion;
-                replace(
-                    router.location.replace(
-                        `/${Region[oldRegion].toLowerCase()}/`,
-                        `/${Region[newRegion].toLowerCase()}/`
-                    )
-                );
+                if (oldRegion) {
+                    replace(
+                        router.location.replace(
+                            `/${Region[oldRegion].toLowerCase()}/`,
+                            `/${Region[newRegion].toLowerCase()}/`
+                        )
+                    );
+                }
             }
         }
     });
@@ -86,15 +99,13 @@
 </style>
 
 <div class="wrapper-column">
-    <UnderConstruction />
-
     {#if category?.browseable}
         <div class="header">
             <span>
                 <code>[{Region[$auctionsAppState.region]}]</code>
-                Search
+                Browse
             </span>
-            {#each categories as category, categoryIndex}
+            {#each categories as category, categoryIndex (category.id)}
                 <span>&gt;</span>
                 <a
                     href="#/browse/{params.slug1}/{categories
@@ -108,9 +119,8 @@
         </div>
 
         <Results
-            loadFunc={async () =>
-                await browseStore.fetch($auctionsAppState, $auctionStore, category.id)}
-            url={`#/browse/${params.slug1}/${categories.map((c) => c.slug).join('/')}`}
+            url={`#${baseUrlPrefix || ''}/browse/${params.slug1}/${categories.map((c) => c.slug).join('/')}`}
+            {loadFunc}
             {selected}
         />
     {/if}

apps/frontend/auctions/components/browse/store.ts

@@ -9,7 +9,7 @@ class BrowseStore {
     async fetch(
         auctionAppState: AuctionsAppState,
         auctionData: AuctionData,
-        categoryId: number,
+        categoryId: number
     ): Promise<AuctionEntry[]> {
         let things: AuctionEntry[] = [];
 

apps/frontend/auctions/components/search/Search.svelte

@@ -7,7 +7,10 @@
     import Results from '@/auctions/components/results/Results.svelte';
     import UnderConstruction from '@/shared/components/under-construction/UnderConstruction.svelte';
 
-    let { params }: ParamsSlugsProps = $props();
+    type Props = ParamsSlugsProps & {
+        baseUrlPrefix?: string;
+    };
+    let { baseUrlPrefix, params }: Props = $props();
 
     let searchString = $derived(params.slug2);
 </script>
@@ -39,7 +42,7 @@
         <Results
             loadFunc={async () => await searchStore.search($auctionsAppState, searchString)}
             selected={params.slug3}
-            url={`#/search/${params.slug1}/${searchString}`}
+            url={`#${baseUrlPrefix || ''}/search/${params.slug1}/${searchString}`}
         />
     {/if}
 </div>

apps/frontend/components/auctions/AuctionsSidebar.svelte

@@ -4,9 +4,13 @@
 
     import Sidebar from '@/shared/components/sub-sidebar/SubSidebar.svelte';
 
-    let categories: SidebarItem[];
-    $: {
-        categories = [
+    let categories = $derived.by(() => {
+        const ret: SidebarItem[] = [
+            {
+                name: 'Browse',
+                slug: 'browse',
+            },
+            null,
             {
                 name: 'Buy Missing',
                 slug: 'missing',
@@ -70,20 +74,22 @@
         ];
 
         if (settingsState.value.auctions.customCategories?.length > 0) {
-            categories.push(null);
+            ret.push(null);
             for (
                 let catIndex = 0;
                 catIndex < settingsState.value.auctions.customCategories.length;
                 catIndex++
             ) {
-                categories.push({
+                ret.push({
                     name: settingsState.value.auctions.customCategories[catIndex].name,
                     slug: `custom-${catIndex + 1}`,
                     forceWildcard: true,
                 });
             }
         }
-    }
+
+        return ret;
+    });
 </script>
 
 <Sidebar baseUrl="/auctions" items={categories} width="14rem" />