Put the catalog in the [lang] folder.

Still no clue on how to i18n translations for that

src/components/Header.astro

@@ -41,7 +41,7 @@ const t = useTranslations(lang);
         />
       </HeaderButton>
       {MARKETPLACE_ENABLED &&
-        <HeaderButton text={t("header.catalog")} route={`/catalog/1`}>
+        <HeaderButton text={t("header.catalog")} route={`/${lang}/catalog/1`}>
             <Icon
                 name="ph:shopping-bag-open-fill"
                 class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"

src/components/MobileNavigation.astro

@@ -33,7 +33,7 @@ import { MARKETPLACE_ENABLED } from "astro:env/client";
     />
   </HeaderButton>
   {MARKETPLACE_ENABLED &&
-    <HeaderButton text={t("header.catalog")} route={`/catalog/1`}>
+    <HeaderButton text={t("header.catalog")} route={`/${lang}/catalog/1`}>
         <Icon
             name="ph:shopping-bag-open-fill"
         class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"

src/components/catalog/CatalogCard.svelte

@@ -2,6 +2,7 @@
 import { Suspense } from "@svelte-drama/suspense";
 import { Settings } from "@utils/settings/index";
 export let page;
+export let lang;
 async function getAssets() {
     const response = await fetch("/api/catalog-assets?page=" + page);
     const data = await response.json();
@@ -19,7 +20,7 @@ const assets = getAssets();
             {#if Object.keys(data).length > 0}
                 <div class="flex flex-row gap-6 flex-wrap justify-center">
                     {#each Object.entries(data) as [key, asset]}
-                        <a href={`/catalog/package/${key}`}>
+                        <a href={`/${lang}/catalog/package/${key}`}>
                             <div class="bg-navbar-color w-64 rounded-3xl shadow-lg overflow-hidden transition-transform duration-300 hover:scale-105">
                                 <img src={`/packages/${key}/${asset.image}`} alt={asset.title} class="w-full h-40 object-cover" />
                                 <div class="p-6 text-sm">

src/components/settings/CreditsCard.astro

@@ -2,11 +2,11 @@
 import { Image } from "astro:assets";
 import { type ImageMetadata } from "astro";
 const images = import.meta.glob<{ default: ImageMetadata }>(
-    "/src/assets/contribs/*.{jpeg,jpg,png,gif,webp}"
+    "/src/assets/credits/*.{jpeg,jpg,png,gif,webp}"
 );
 
 interface Props {
-    image: string;
+    image?: string;
     name: string;
     link: string;
 }
@@ -14,6 +14,6 @@ interface Props {
 const { image, name, link } = Astro.props;
 ---
 <a class="rounded-md bg-navbar-color h-50 w-50 p-2 flex flex-col items-center" href={link} target="_blank" rel="noopener noreferrer">
-    <Image loading='lazy' class='w-32 h-32 object-cover rounded-md' src={images[image]()} alt={name} />
+    {image && <Image loading='lazy' class='w-32 h-32 object-cover rounded-md' src={images[image]()} alt={name} />}
     <p class="h-12 w-full text-text-color flex items-center justify-center text-xl font-semibold">{name}</p>
 </a>

src/pages/[lang]/catalog/[...page].astro

@@ -2,6 +2,9 @@
 import CatalogCard from "@components/catalog/CatalogCard.svelte";
 import Layout from "@layouts/Layout.astro";
 import Pagnation from "./pagnation.astro";
+import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
 
 const { page } = Astro.params;
 
@@ -20,28 +23,28 @@ const lastPage = assetsJson.pages;
           <h1 class="text-5xl font-bold"> Nebula Catalog </h1>
           <p class="text-xl"> The Nebula Catalog is a place for you to find user-created themes and plugins. </p>
       </div>
-    <CatalogCard client:only="svelte" page={page} />
+      <CatalogCard client:only="svelte" page={page} lang={lang} />
     <div class="flex flex-row pb-8 gap-4 roboto">
       {/* The first page. If the user is on this page, or the one after it, don't show it. */}
       {parseInt(page!) > 2 && (
-          <a href={"/catalog/" + 1} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md"> 1 </a>
+      <a href={`/${lang}/catalog/${1}`} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md"> 1 </a>
         )
       }
       {previousPage > 0 && (
-          <a href={"/catalog/" + previousPage} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md">{previousPage}</a>
+      <a href={`/${lang}/catalog/${previousPage}`} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md">{previousPage}</a>
         )
       }
       {/* The greyed out page the user is currently on */}
       <a class="w-8 h-8 bg-lighter items-center text-center content-center text-text-color rounded-md">{page}</a>
       {nextPage < lastPage && (
-        <a href={"/catalog/" + nextPage} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md">{nextPage}</a>
+      <a href={`/${lang}/catalog/${nextPage}`} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md">{nextPage}</a>
         )
       }
       {/* Pagnation input */}
       <Pagnation />
       {/* The last page. If the user is on this page, don't show it. */}
       {page != lastPage && (
-          <a href={"/catalog/" + assetsJson.pages} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md">
+      <a href={`/${lang}/catalog/${assetsJson.pages}`} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md">
             {assetsJson.pages}
           </a>
         )

src/pages/[lang]/settings/credits.astro

@@ -20,13 +20,18 @@ import CreditsCard from "@components/settings/CreditsCard.astro";
     <SettingsSection title="Site Developers & Maintainers" subtitle="Thank you to all of the devs and maintainers!">
       <div class="flex flex-row flex-wrap gap-4 items-center roboto">
         <div class="justify-center flex flex-row gap-6 flex-wrap md:justify-normal">
-            <CreditsCard image="/src/assets/contribs/rift.jpeg" name="Rifting" link="https://github.com/rifting" />
-            <CreditsCard image="/src/assets/contribs/motortruck1221.png" name="MotorTruck1221" link="https://motortruck1221.com" />
+            <CreditsCard image="/src/assets/credits/rift.jpeg" name="Rifting" link="https://github.com/rifting" />
+            <CreditsCard image="/src/assets/credits/motortruck1221.png" name="MotorTruck1221" link="https://motortruck1221.com" />
         </div>
       </div>
     </SettingsSection>
-    <SettingsSection title="Tools & Project" subtitle="Nebula wouldn't be possible without these tools">
-        <div class="flex flex-row flex-wrap gap-6 items-center roboto"></div>
+    <SettingsSection title="Tools & Projects" subtitle="Nebula wouldn't be possible without these tools & projects">
+        <div class="flex flex-row flex-wrap gap-6 items-center roboto">
+            <CreditsCard image="/src/assets/credits/uv.png" name="Ultraviolet" link="https://github.com/titaniumnetwork-dev/ultraviolet" /> 
+            <CreditsCard image="/src/assets/credits/rammerhead.png" name="Rammerhead" link="https://github.com/binary-person/rammerhead" />
+            <CreditsCard image="/src/assets/credits/libcurl.png" name="Libcurl.js" link="https://github.com/ading2210/libcurl.js" />
+            <CreditsCard image="/src/assets/credits/mercury.png" name="Epoxy TLS" link="https://github.com/mercuryworkshop/epoxy-tls" />
+        </div>
     </SettingsSection>
     <SettingsSection title="Translators" subtitle="Translations are made possible by these lovely individuals">
     </SettingsSection>

src/pages/[lang]/settings/misc.astro

@@ -42,7 +42,7 @@ export const prerender = true;
     import { pageLoad } from "@utils/events";
     import { navigate } from "astro:transitions/client";
     function setup() {
-        const lang = JSON.parse(localStorage.getItem('selectedLanguage') as string || '{ value: "en_US" }');
+        const lang = JSON.parse(localStorage.getItem('selectedLanguage') as string) || JSON.parse('{"value": "en_US"}');
         const languageVal = document.getElementById('lang') as HTMLSelectElement;
         languageVal!.value = lang.value;
     }