Pagnation sytem (I have no idea how im going to get the catalog ready for Japanese users

astro.config.mjs

@@ -32,6 +32,10 @@ export default defineConfig({
           target: "http://localhost:8080",
           changeOrigin: true,
         },
+        "/api/catalog-pages": {
+          target: "http://localhost:8080",
+          changeOrigin: true,
+        },
       },
     },
   },

server.js

@@ -150,31 +150,31 @@ app.use("/scripts/", express.static("./database_assets/scripts"));
 app.use(ssrHandler);
 app.use(express.static(publicPath));
 
-await catalog_assets.create({
+// await catalog_assets.create({
-  package_name: "com.nebula.cybermonay",
+//   package_name: "com.nebula.cybermonay",
-  title: "Cyber Monay",
+//   title: "Cyber Monay",
-  image: "cyber_monay.jpg",
+//   image: "cyber_monay.jpg",
-  author: "Nebula Services",
+//   author: "Nebula Services",
-  version: "1.0.0",
+//   version: "1.0.0",
-  description: 'A parody of the famous "Cyber Monay" hack!',
+//   description: 'A parody of the famous "Cyber Monay" hack!',
-  tags: ["Hacking", "Animated", "Funny"],
+//   tags: ["Hacking", "Animated", "Funny"],
-  payload: "com.nebula.cybermonay.css",
+//   payload: "com.nebula.cybermonay.css",
-  background_video: "cyber_monay_test.mp4",
+//   background_video: "cyber_monay_test.mp4",
-  type: "theme",
+//   type: "theme",
-});
+// });
 
-await catalog_assets.create({
+// await catalog_assets.create({
-  package_name: "com.nebula.fortnite.jpg",
+//   package_name: "com.nebula.fortnite.jpg",
-  title: "Fortnite.jpg",
+//   title: "Fortnite.jpg",
-  image: "fortnite.jpg",
+//   image: "fortnite.jpg",
-  author: "Nebula Services",
+//   author: "Nebula Services",
-  version: "1.0.0",
+//   version: "1.0.0",
-  description: "Like the image in Ultraviolet, now on Nebula!",
+//   description: "Like the image in Ultraviolet, now on Nebula!",
-  tags: ["Image", "Funny"],
+//   tags: ["Image", "Funny"],
-  payload: "com.nebula.cybermonay.css",
+//   payload: "com.nebula.cybermonay.css",
-  background_image: "fortnite.jpg",
+//   background_image: "fortnite.jpg",
-  type: "theme",
+//   type: "theme",
-});
+// });
 
 catalog_assets.sync();
 const server = createServer();

src/components/Header.astro

@@ -40,7 +40,7 @@ const t = useTranslations(lang);
           class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
         />
       </HeaderButton>
-      <HeaderButton text={t("header.catalog")} route={`/${lang}/catalog/`}>
+      <HeaderButton text={t("header.catalog")} route={`/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

@@ -1,8 +1,8 @@
 <script>
+  export let page;
   let assetPromise = get_assets();
-
   async function get_assets() {
-    const response = await fetch("/api/catalog-assets");
+    const response = await fetch("/api/catalog-assets?page=" + page);
     const data = await response.json();
     return data.assets;
   }
@@ -13,7 +13,7 @@
     Loading assets...
   {:then assets}
     {#if Object.keys(assets).length > 1}
-      <div class="flex flex-row gap-6 flex-wrap">
+      <div class="flex flex-row gap-6 flex-wrap justify-center">
         {#each Object.entries(assets) as [key, asset]}
           <a href={"/assets/" + key}>
             <div

src/pages/[lang]/catalog.astro

@@ -1,24 +0,0 @@
----
-import Layout from "../../layouts/Layout.astro";
-import CatalogCard from "../../components/catalog/CatalogCard.svelte";
-export function getStaticPaths() {
-  const STATIC_PATHS = [
-    { params: { lang: "en_US" } },
-    { params: { lang: "jp" } },
-  ];
-  return STATIC_PATHS;
-}
-export const prerender = true;
----
-
-<Layout title="Catalog">
-  <div
-    class="flex flex-wrap mt-16 w-full fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center"
-  >
-    <div>
-      The Nebula Catalog is a place for you to find user-created themes and
-      plugins.
-    </div>
-    <CatalogCard client:only="svelte" />
-  </div>
-</Layout>

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

@@ -27,7 +27,9 @@ export const prerender = true;
       subtitle="Choose a theme so your eyes don't hate us."
     >
       <div class="flex flex-row flex-wrap gap-4 items-center roboto">
-        <div class="flex flex-row gap-6 flex-wrap">
+        <div
+          class="justify-center flex flex-row gap-6 flex-wrap md:justify-normal"
+        >
           <InstalledThemes client:only="svelte" />
           <div class="rounded-3xl bg-navbar-color w-64 flex flex-col">
             <div class="w-full items-center justify-center flex aspect-[16/9]">

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

@@ -0,0 +1,96 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import CatalogCard from "../../components/catalog/CatalogCard.svelte";
+
+const { page } = Astro.params;
+
+const response = await fetch(new URL("/api/catalog-pages/", Astro.url));
+const assets_json = await response.json();
+
+const next_page = parseInt(page!) + 1;
+const previous_page = parseInt(page!) - 1;
+const last_page = assets_json.pages;
+---
+
+<Layout title="Catalog">
+  <div
+    class="flex mt-16 w-full fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center overflow-auto"
+  >
+    <div>
+      {page}
+      The Nebula Catalog is a place for you to find user-created themes and plugins.
+    </div>
+    <CatalogCard client:only="svelte" page={page} />
+    <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>
+        )
+      }
+      {
+        previous_page > 0 && (
+          <a
+            href={"/catalog/" + previous_page}
+            class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md"
+          >
+            {previous_page}
+          </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>
+
+      {
+        next_page < last_page && (
+          <a
+            href={"/catalog/" + next_page}
+            class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md"
+          >
+            {next_page}
+          </a>
+        )
+      }
+      <input
+        class="w-10 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md"
+        type="number"
+        id="pagnation_input"
+        placeholder="..."
+      />
+      {/* The last page. If the user is on this page, don't show it. */}
+      {
+        page != last_page && (
+          <a
+            href={"/catalog/" + assets_json.pages}
+            class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md"
+          >
+            {assets_json.pages}
+          </a>
+        )
+      }
+    </div>
+  </div>
+</Layout>
+<script>
+  document
+    .getElementById("pagnation_input")!
+    .addEventListener("keyup", function (event) {
+      if (event.key === "Enter") {
+        window.location.href = (
+          document.getElementById("pagnation_input")! as HTMLInputElement
+        ).value;
+      }
+    });
+</script>