SSR and marketplace shit

astro.config.mjs

@@ -1,9 +1,10 @@
 import { defineConfig } from "astro/config";
 import tailwind from "@astrojs/tailwind";
 import icon from "astro-icon";
-
 import svelte from "@astrojs/svelte";
 
+import node from "@astrojs/node";
+
 // https://astro.build/config
 export default defineConfig({
   integrations: [tailwind(), icon(), svelte()],
@@ -19,7 +20,15 @@ export default defineConfig({
           target: "http://localhost:8080",
           changeOrigin: true,
         },
+        "/api/packages": {
+          target: "http://localhost:8080",
+          changeOrigin: true,
         },
       },
     },
+  },
+  output: "server",
+  adapter: node({
+    mode: "hybrid",
+  }),
 });

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.1",
       "dependencies": {
         "@astrojs/check": "^0.8.2",
+        "@astrojs/node": "^8.3.2",
         "@astrojs/svelte": "^5.7.0",
         "@astrojs/tailwind": "^5.1.0",
         "@fastify/compress": "^7.0.3",
@@ -328,6 +329,18 @@
         "vfile": "^6.0.2"
       }
     },
+    "node_modules/@astrojs/node": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@astrojs/node/-/node-8.3.2.tgz",
+      "integrity": "sha512-Upv0D+9b3RXp7XViQTtrijaDqihHWbVHLdJQ2sxtPOEtw2GDrVxuC6LmXIUew5YvJ9Ylmpst6KizVwO8d/K9/Q==",
+      "dependencies": {
+        "send": "^0.18.0",
+        "server-destroy": "^1.0.1"
+      },
+      "peerDependencies": {
+        "astro": "^4.2.0"
+      }
+    },
     "node_modules/@astrojs/prism": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@astrojs/prism/-/prism-3.1.0.tgz",
@@ -8917,6 +8930,11 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/server-destroy": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/server-destroy/-/server-destroy-1.0.1.tgz",
+      "integrity": "sha512-rb+9B5YBIEzYcD6x2VKidaa+cqYBJQKnU4oe4E3ANwRRN56yk/ua1YCJT1n21NTS8w6CcOclAKNP3PhdCXKYtQ=="
+    },
     "node_modules/set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.8.2",
+    "@astrojs/node": "^8.3.2",
     "@astrojs/svelte": "^5.7.0",
     "@astrojs/tailwind": "^5.1.0",
     "@fastify/compress": "^7.0.3",

server.js

@@ -3,11 +3,12 @@ import { createServer } from "node:http";
 import path from "path";
 import { Sequelize, DataTypes } from "sequelize";
 import { fileURLToPath } from "url";
+import { handler as ssrHandler } from "./dist/server/entry.mjs";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const app = express();
-const publicPath = "dist";
+const publicPath = "dist/client";
 const sequelize = new Sequelize("database", "user", "password", {
   host: "localhost",
   dialect: "sqlite",
@@ -27,6 +28,9 @@ const catalog_assets = sequelize.define("catalog_assets", {
   description: {
     type: DataTypes.TEXT,
   },
+  author: {
+    type: DataTypes.TEXT,
+  },
   image: {
     type: DataTypes.TEXT,
   },
@@ -53,10 +57,6 @@ const catalog_assets = sequelize.define("catalog_assets", {
   },
 });
 
-app.use(express.static(publicPath));
-app.use("/images/", express.static("./database_assets/image"));
-app.use("/videos/", express.static("./database_assets/video"));
-
 app.get("/api", function (request, reply) {
   reply.send({ hello: "world" });
 });
@@ -83,6 +83,7 @@ app.get("/api/catalog-assets", async (request, reply) => {
       acc[asset.package_name] = {
         title: asset.title,
         description: asset.description,
+        author: asset.author,
         image: asset.image,
         tags: asset.tags,
         version: asset.version,
@@ -128,6 +129,7 @@ app.get("/api/packages/:package", async (request, reply) => {
       title: package_row.get("title"),
       description: package_row.get("description"),
       image: package_row.get("image"),
+      author: package_row.get("author"),
       tags: package_row.get("tags"),
       version: package_row.get("version"),
       background_image: package_row.get("background_image"),
@@ -141,10 +143,16 @@ app.get("/api/packages/:package", async (request, reply) => {
   }
 });
 
+app.use("/images/", express.static("./database_assets/image"));
+app.use("/videos/", express.static("./database_assets/video"));
+app.use(ssrHandler);
+app.use(express.static(publicPath));
+
 // await catalog_assets.create({
-//   package_name: "koaku.fortnite.jpeg",
+//   package_name: "com.dababy.fortnite",
 //   title: "fortnite.jpeg",
 //   image: "fortnite.jpg",
+//   author: "DaBaby LETS GOOOOOOOOOOOOOOOOOOOOOOO"
 //   version: "6.9.420",
 //   description: "a man in a blessings shirt sticking his tounge out",
 //   tags: ["Fortnite", "Shit out my ass"],

src/components/catalog/CatalogCard.svelte

@@ -11,18 +11,36 @@
   {#await assetPromise}
     Loading assets...
   {:then assets}
-    <ul>
+    <div class="flex flex-row gap-6">
       {#each Object.entries(assets) as [key, asset]}
-        <div class="bg-bg-primary">
+        <a href={"/assets/" + key}>
-          <h2>{asset.title}</h2>
+          <div
-          <p>{asset.description}</p>
+            class="bg-navbar-color w-64 rounded-3xl shadow-lg overflow-hidden transition-transform duration-300 hover:scale-105"
-          <img src={"/images/" + asset.image} alt={asset.title} />
+          >
-          <p><strong>Tags:</strong> {asset.tags.join(", ")}</p>
+            <img
-          <p><strong>Version:</strong> {asset.version}</p>
+              src={"/images/" + asset.image}
-          <p><strong>Type:</strong> {asset.type}</p>
+              alt={asset.title}
+              class="w-full h-40 object-cover"
+            />
+            <div class="p-6 text-sm">
+              <div class="font-semibold mb-2">
+                {asset.title}
               </div>
+              <div class="mb-4">{asset.description}</div>
+              <div>
+                <strong>Tags:</strong>
+                {asset.tags.join(", ")}
+              </div>
+              <div>
+                <strong>Version:</strong>
+                {asset.version}
+              </div>
+              <div><strong>Type:</strong> {asset.type}</div>
+            </div>
+          </div>
+        </a>
       {/each}
-    </ul>
+    </div>
   {:catch someError}
     System error: {someError.message}.
   {/await}

src/pages/[lang]/catalog.astro

@@ -8,12 +8,17 @@ export function getStaticPaths() {
   ];
   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]/games.astro

@@ -7,6 +7,7 @@ export function getStaticPaths() {
   ];
   return STATIC_PATHS;
 }
+export const prerender = true;
 ---
 
 <Layout title="Chango Games">

src/pages/[lang]/index.astro

@@ -9,7 +9,7 @@ export function getStaticPaths() {
   ];
   return STATIC_PATHS;
 }
-
+export const prerender = true;
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
 ---

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

@@ -16,6 +16,7 @@ export function getStaticPaths() {
   ];
   return STATIC_PATHS;
 }
+export const prerender = true;
 ---
 
 <Layout title="Settings">

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

@@ -13,6 +13,7 @@ export function getStaticPaths() {
   ];
   return STATIC_PATHS;
 }
+export const prerender = true;
 ---
 
 <Layout title="Settings">

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

@@ -13,6 +13,7 @@ export function getStaticPaths() {
   ];
   return STATIC_PATHS;
 }
+export const prerender = true;
 ---
 
 <Layout title="Settings">

src/pages/assets/[...package_name].astro

@@ -0,0 +1,38 @@
+---
+const { package_name } = Astro.params;
+import Layout from "../../layouts/Layout.astro";
+const response = await fetch(
+  new URL("/api/packages/" + package_name, Astro.url)
+);
+const assets_json = await response.json();
+---
+
+<Layout title="Package">
+  <div
+    class="flex flex-wrap mt-16 w-full fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center"
+  >
+    {
+      assets_json.error ? (
+        <h1 class="text-text-color text-3xl">
+          Unexpected error. Are you sure you typed the name right?
+        </h1>
+      ) : (
+        <div class="flex flex-row items-center text-text-color">
+          <img
+            src={"/images/" + assets_json.image}
+            alt={assets_json.title}
+            class="w-96 h-72 object-cover rounded-xl"
+          />
+          <div class="flex flex-col ml-7">
+            <div class="text-xl">{assets_json.type}</div>
+            <div class="text-3xl">{assets_json.title}</div>
+            <div class="text-xl">{assets_json.description}</div>
+            <button class="border-text-color border-2 rounded-lg w-40">
+              Install
+            </button>
+          </div>
+        </div>
+      )
+    }
+  </div>
+</Layout>