Marketplace: handle the new stuff!

astro.config.mjs

@@ -64,11 +64,12 @@ export default defineConfig({
                     changeOrigin: true,
                     rewrite: (path) => path.replace(/^\/api\/catalog-assets/, "")
                 },
-                "/images": {
+                "/api/packages": {
-                    target: "http://localhost:8080",
+                    target: "http://localhost:8080/api/packages",
-                    changeOrigin: true
+                    changeOrigin: true,
+                    rewrite: (path) => path.replace(/^\/api\/packages/, "")
                 },
-                "/videos": {
+                "/packages": {
                     target: "http://localhost:8080",
                     changeOrigin: true
                 },
@@ -82,14 +83,6 @@ export default defineConfig({
                     target: "http://localhost:8080",
                     changeOrigin: true
                 },
-                "/api/packages": {
-                    target: "http://localhost:8080",
-                    changeOrigin: true
-                },
-                "/api/catalog-pages": {
-                    target: "http://localhost:8080",
-                    changeOrigin: true
-                }
             }
         }
     },

package.json

@@ -41,7 +41,6 @@
     "concurrently": "^8.2.2",
     "fastify": "^5.0.0",
     "form-data": "^4.0.1",
-    "formdata-node": "^6.0.3",
     "gradient-string": "^3.0.0",
     "libcurl.js-new": "npm:libcurl.js@^0.6.16",
     "nanostores": "^0.10.3",

pnpm-lock.yaml

@@ -83,9 +83,6 @@ importers:
       form-data:
         specifier: ^4.0.1
         version: 4.0.1
-      formdata-node:
-        specifier: ^6.0.3
-        version: 6.0.3
       gradient-string:
         specifier: ^3.0.0
         version: 3.0.0
@@ -1937,10 +1934,6 @@ packages:
     resolution: {integrity: sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==}
     engines: {node: '>= 6'}
 
-  formdata-node@6.0.3:
-    resolution: {integrity: sha512-8e1++BCiTzUno9v5IZ2J6bv4RU+3UKDmqWUQD0MIMVCd9AdhWkO1gw57oo1mNEX1dMq2EGI+FbWz4B92pscSQg==}
-    engines: {node: '>= 18'}
-
   forwarded@0.2.0:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
     engines: {node: '>= 0.6'}
@@ -6094,8 +6087,6 @@ snapshots:
       combined-stream: 1.0.8
       mime-types: 2.1.35
 
-  formdata-node@6.0.3: {}
-
   forwarded@0.2.0: {}
 
   fraction.js@4.3.7: {}

server/dbSetup.ts

@@ -33,23 +33,23 @@ async function setupDB(db: ModelStatic<CatalogModel>) {
         { 
             package_name: 'com.nebula.gruvbox', 
             title: 'Gruvbox', 
-            image: 'com.nebula.gruvbox.jpeg',
+            image: 'gruvbox.jpeg',
             author: 'Nebula Services',
             version: '1.0.0',
             description: 'The gruvbox theme',
             tags: ["Theme", "Simple"],
-            payload: "com.nebula.gruvbox.css",
+            payload: "gruvbox.css",
             type: 'theme'
         },
         {
             package_name: 'com.nebula.oled',
             title: 'Oled theme',
-            image: 'com.nebula.oled.jpg',
+            image: 'oled.jpg',
             author: 'Nebula Services',
             version: '1.0.0',
             description: 'A sleek & simple Oled theme for Nebula',
             tags: ['Theme', 'Simple', 'Sleek'],
-            payload: 'com.nebula.oled.css',
+            payload: 'oled.css',
             type: 'theme'
         }
     ]

server/server.ts

@@ -13,6 +13,7 @@ import { DataTypes, InferAttributes, InferCreationAttributes, Model, Sequelize }
 import { pipeline } from "node:stream/promises";
 import { createWriteStream } from "node:fs";
 import { setupDB } from "./dbSetup.js";
+import { access, constants, mkdir } from "node:fs/promises";
 
 
 const app = Fastify({ logger: parsedDoc.server.server.logging, ignoreDuplicateSlashes: true, ignoreTrailingSlash: true, serverFactory: serverFactory });
@@ -43,7 +44,7 @@ interface Catalog {
 interface CatalogModel extends Catalog, Model<InferAttributes<CatalogModel>, InferCreationAttributes<CatalogModel>> {};
 
 const catalogAssets = db.define<CatalogModel>("catalog_assets", {
-    package_name: { type: DataTypes.TEXT, unique: true },
+    package_name: { type: DataTypes.STRING, unique: true },
     title: { type: DataTypes.TEXT },
     description: { type: DataTypes.TEXT },
     author: { type: DataTypes.TEXT },
@@ -68,23 +69,8 @@ await app.register(fastifyStatic, {
 });
 
 await app.register(fastifyStatic, {
-    root: fileURLToPath(new URL('../database_assets/image', import.meta.url)),
+    root: fileURLToPath(new URL('../database_assets', import.meta.url)),
-    prefix: '/images/',
+    prefix: '/packages/',
-    decorateReply: false
-});
-await app.register(fastifyStatic, {
-    root: fileURLToPath(new URL('../database_assets/video', import.meta.url)),
-    prefix: '/videos/',
-    decorateReply: false 
-});
-await app.register(fastifyStatic, {
-    root: fileURLToPath(new URL('../database_assets/styles', import.meta.url)),
-    prefix: '/styles/',
-    decorateReply: false 
-});
-await app.register(fastifyStatic, {
-    root: fileURLToPath(new URL('../database_assets/scripts', import.meta.url)),
-    prefix: '/scripts/',
     decorateReply: false
 });
 
@@ -155,75 +141,65 @@ app.get("/api/packages/:package", async (request: PackageReq, reply) => {
     }
 });
 
-type UploadReq = FastifyRequest<{Headers: { psk: string }}>;
+type UploadReq = FastifyRequest<{Headers: { psk: string, packagename: string }}>;
-type CreateReq = FastifyRequest<{Headers: { psk: string}, Body: { uuid: string, title: string, image: string, author: string, version: string, description: string, tags: object | any, payload: string, background_video: string, background_image: string, type: string }}>;
+type CreateReq = FastifyRequest<{Headers: { psk: string }, 
-async function verifyReq(request: UploadReq | CreateReq, reply: FastifyReply, upload: Boolean, data: any) {
+    Body: { 
-    return new Promise<void>((resolve, reject) => {
+        uuid: string, 
-        if (parsedDoc.marketplace.enabled === false) {
+        title: string, 
-            reply.status(500).send({ error: 'Marketplace is disabled!' });
+        image: string, 
-            reject();
+        author: string, 
-        }
+        version: string, 
-        else if (request.headers.psk !== parsedDoc.marketplace.psk) {
+        description: string, 
-            reply.status(403).send({ error: 'PSK not correct!' });
+        tags: object | any,
-            reject();
+        payload: string, 
-        }
+        background_video: string, 
-        else if (upload && !data) {
+        background_image: string, 
-            reply.status(400).send({ error: 'No file uploaded!' });
+        type: CatalogType 
-            reject();
+}}>;
-        }
+interface VerifyStatus {
-        else { resolve(); }
+    status: number;
-    });
+    error?: Error;
+}
+async function verifyReq(request: UploadReq | CreateReq, upload: Boolean, data: any): Promise<VerifyStatus> {
+    if (parsedDoc.marketplace.enabled === false) {
+        return {status: 500, error: new Error('Marketplace Is disabled!')};
+    }
+    else if (request.headers.psk !== parsedDoc.marketplace.psk) {
+        return {status: 403, error: new Error("PSK isn't correct!")};
+    }
+    else if(upload && !request.headers.packagename) {
+        return {status: 500, error: new Error('No packagename defined!')};
+    }
+    else if (upload && !data) {
+        return {status: 400, error: new Error('No file uploaded!')};
+    }
+    else { return {status: 200 }; }
 }
 
-app.post("/api/upload-image", async (request: UploadReq, reply) => {
+app.post("/api/upload-asset", async (request: UploadReq, reply) => {
     const data = await request.file();
-    verifyReq(request, reply, true, data)
+    const verify: VerifyStatus = await verifyReq(request, true, data);
-    .then(async () => {
+    if (verify.error !== undefined) {
-        await pipeline(data.file, createWriteStream(fileURLToPath(new URL(`../database_assets/image/${data.filename}`, import.meta.url))));
+        reply.status(verify.status).send({ status: verify.error.message });
-        reply.send({ message: 'File uploaded successfully!', filename: data.filename });
+    }
-    })
+    else {
-    .catch(() => { 
+        try { 
-        if (parsedDoc.server.server.logging) { console.error(chalk.yellow.bold('Caught error from verify function. \n Error caused while uploading image')) };
+            await pipeline(data.file, createWriteStream(fileURLToPath(new URL(`../database_assets/${request.headers.packagename}/${data.filename}`, import.meta.url))));
-    });
+        }
-});
+        catch (error) {
-app.post("/api/upload-video", async (request: UploadReq, reply) => {
+            return reply.status(500).send({ status: `File couldn't be uploaded! (Package most likely doesn't exist)` });
-    const data = await request.file();
+        }
-    verifyReq(request, reply, true, data)
+        return reply.status(verify.status).send({ status: 'File uploaded successfully!' });
-    .then(async () => {
+    }
-        await pipeline(data.file, createWriteStream(fileURLToPath(new URL(`../database_assets/video/${data.filename}`, import.meta.url))));
-        reply.send({ message: 'File uploaded successfully!', filename: data.filename });
-    })
-    .catch(() => { 
-        if (parsedDoc.server.server.logging) { console.error(chalk.yellow.bold('Caught error from verify function. \n Error caused while uploading video')) };
-    });
-});
-app.post("/api/upload-style", async (request: UploadReq, reply) => {
-    const data = await request.file();
-    verifyReq(request, reply, true, data)
-    .then(async () => {
-        await pipeline(data.file, createWriteStream(fileURLToPath(new URL(`../database_assets/styles/${data.filename}`, import.meta.url))));
-        reply.send({ message: 'File uploaded successfully!', filename: data.filename });
-    })
-    .catch(() => { 
-        if (parsedDoc.server.server.logging) { console.error(chalk.yellow.bold('Caught error from verify function. \n Error caused while uploading style')) };
-    });
-});
-app.post("/api/upload-script", async (request: UploadReq, reply) => {
-    const data = await request.file();
-    verifyReq(request, reply, true, data)
-    .then(async () => {
-        await pipeline(data.file, createWriteStream(fileURLToPath(new URL(`../database_assets/video/${data.filename}`, import.meta.url))));
-        reply.send({ message: 'File uploaded successfully!', filename: data.filename });
-    })
-    .catch(() => { 
-        if (parsedDoc.server.server.logging) { console.error(chalk.yellow.bold('Caught error from verify function. \n Error caused while uploading script')) };
-    });
 });
 
 app.post("/api/create-package", async (request: CreateReq, reply) => {
-    verifyReq(request, reply, false, undefined)
+    const verify: VerifyStatus = await verifyReq(request, false, undefined);
-    .then(async () => {
+    if (verify.error !== undefined) {
-       await catalogAssets.create({
+        reply.status(verify.status).send({ status: verify.error.message });
+    }
+    else {
+       const body: Catalog = {
             package_name: request.body.uuid,
             title: request.body.title,
             image: request.body.image,
@@ -235,11 +211,30 @@ app.post("/api/create-package", async (request: CreateReq, reply) => {
             background_video: request.body.background_video,
             background_image: request.body.background_image,
             type: request.body.type as CatalogType
+       }
+       await catalogAssets.create({
+            package_name: body.package_name,
+            title: body.title,
+            image: body.image,
+            author: body.author,
+            version: body.version,
+            description: body.description,
+            tags: body.tags,
+            payload: body.payload,
+            background_video: body.background_video,
+            background_image: body.background_image,
+            type: body.type
         });
-    })
+        const assets = fileURLToPath(new URL('../database_assets', import.meta.url));
-    .catch(async () => {
+        try {
-        if (parsedDoc.server.server.logging) { console.error(chalk.yellow.bold('Caught error from verify function. \n Error caused while creating package')) };
+            await access(`${assets}/${body.package_name}/`, constants.F_OK);
-    });
+            return reply.status(500).send({ status: 'Package already exists!' });
+        }
+        catch (err) {
+            await mkdir(`${assets}/${body.package_name}/`);
+            return reply.status(verify.status).send({ status: 'Package created successfully!' });
+        }
+    }
 });
 
 app.use(ssrHandler);

src/components/catalog/CatalogCard.svelte

@@ -21,7 +21,7 @@ const assets = getAssets();
                     {#each Object.entries(data) as [key, asset]}
                         <a href={`/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={`/images/${asset.image}`} alt={asset.title} class="w-full h-40 object-cover" />
+                                <img src={`/packages/${key}/${asset.image}`} alt={asset.title} class="w-full h-40 object-cover" />
                                 <div class="p-6 text-sm">
                                     <p class="font-semibold text-2xl mb-2"> {asset.title} </p>
                                     <p class="mb-4"> {asset.description} </p>

src/components/catalog/InstalledThemes.svelte

@@ -39,8 +39,8 @@ let compRef = [];
     {#each Object.entries(data) as [key, asset]}
         <Parent bind:this={compRef[key]}>
             <div class="rounded-3xl bg-navbar-color w-64 flex flex-col cursor-pointer">
-                <div class="w-full" on:click={() => {settings.marketPlaceSettings.changeTheme(false, asset.payload, asset.background_video, asset.background_image)}}>
+                <div class="w-full" on:click={() => {settings.marketPlaceSettings.changeTheme(false, asset.payload, asset.background_video, asset.background_image, asset.package_name)}}>
-                    <img src={`/images/${asset.image}`} alt="theme" class="aspect-[16/9] rounded-t-3xl"/>
+                    <img src={`/packages/${asset.package_name}/${asset.image}`} alt="theme" class="aspect-[16/9] rounded-t-3xl"/>
                 </div>
                 <div class="h-2/6 text-center content-center p-3 font-semibold items-center flex flex-col">
                     <div class="text-2xl"> {asset.title} </div>
@@ -50,7 +50,7 @@ let compRef = [];
                                 <path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M112 168a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm0-120H96v-8a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8Z" />
                             </svg>
                         </div>
-                        <a class="h-8 w-8 cursor-pointer" href={"/assets/" + asset.package_name}>
+                        <a class="h-8 w-8 cursor-pointer" href={"/catalog/" + asset.package_name}>
                             <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256" {...$$props}>
                                 <path fill="currentColor" d="M192 136v72a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 1 0 16H48v128h128v-72a8 8 0 0 1 16 0m32-96a8 8 0 0 0-8-8h-64a8 8 0 0 0-5.66 13.66L172.69 72l-42.35 42.34a8 8 0 0 0 11.32 11.32L184 83.31l26.34 26.35A8 8 0 0 0 224 104Z" />
                             </svg>

src/pages/catalog/package/[...packageName].astro

@@ -11,14 +11,14 @@ const assetsJson = await response.json();
         {!assetsJson.error &&
             <div class="flex flex-col md:flex-row items-center text-text-color bg-navbar-color rounded-2xl">
                 {assetsJson.background_video && 
-                    <video src={`/videos/${assetsJson.background_video}`} controls class="w-[44rem] h-[25rem] object-cover rounded-xl">
+                    <video src={`/packages/${packageName}/${assetsJson.background_video}`} controls class="w-[44rem] h-[25rem] object-cover rounded-xl">
                         Your browser does not support the video tag.
                     </video>
                 }
                 {assetsJson.backgroundImage && 
-                    <div style={{backgroundImage: `url(/images/${assetsJson.backgroundImage})`}} class="w-[44rem] h-[25rem] bg-cover bg-center rounded-xl"/>
+                    <div style={{backgroundImage: `url(/packages/${packageName}/${assetsJson.backgroundImage})`}} class="w-[44rem] h-[25rem] bg-cover bg-center rounded-xl"/>
                 }
-                {!assetsJson.background_video && !assetsJson.backgroundImage && <img loading="lazy" src={`/images/${assetsJson.image}`} alt={assetsJson.title} class="w-[44rem] h-[25rem] object-cover rounded-xl"/>}
+                {!assetsJson.background_video && !assetsJson.backgroundImage && <img loading="lazy" src={`/packages/${packageName}/${assetsJson.image}`} alt={assetsJson.title} class="w-[44rem] h-[25rem] object-cover rounded-xl"/>}
                 <div class="flex flex-col ml-7 p-16">
                     <p class="text-xl">{assetsJson.type}</p>
                     <h1 class="text-4xl roboto font-semibold">{assetsJson.title}</h1>

src/utils/settings/marketplace.ts

@@ -2,6 +2,7 @@
 import { type Package, type PackageType } from "./types";
 const AppearanceSettings = {
     themes: "nebula||themes",
+    themeName: "nebula||themeName",
     stylePayload: "nebula||stylepayload",
     video: "nebula||video",
     image: "nebula||image"
@@ -16,7 +17,7 @@ const marketPlaceSettings = {
                 if (!themes.find((theme: any) => theme === packageName)) {
                     themes.push(packageName);
                     localStorage.setItem(AppearanceSettings.themes, JSON.stringify(themes));
-                    this.changeTheme(false, payload, p.theme.video, p.theme.bgImage);
+                    this.changeTheme(false, payload, p.theme.video, p.theme.bgImage, packageName);
                 }
                 resolve();
             }
@@ -41,11 +42,13 @@ const marketPlaceSettings = {
         reset: Boolean,
         payload?: any,
         videoSource?: string,
-        bgSource?: string
+        bgSource?: string,
+        name?: string
     ) {
         async function resetCSS() {
             const stylesheet = document.getElementById("stylesheet")! as HTMLLinkElement;
             localStorage.removeItem(AppearanceSettings.stylePayload);
+            localStorage.removeItem(AppearanceSettings.themeName);
             stylesheet.href = "/nebula.css";
         }
         function resetVideo() {
@@ -72,7 +75,7 @@ const marketPlaceSettings = {
             if (!localStorage.getItem(AppearanceSettings.video)) {
                 localStorage.setItem(AppearanceSettings.video, videoSource as string);
             }
-            source.src = `/videos/${videoSource ? videoSource : localStorage.getItem(AppearanceSettings.video)}`;
+            source.src = `/packages/${name}/${videoSource ? videoSource : localStorage.getItem(AppearanceSettings.video)}`;
         }
         if (bgSource || localStorage.getItem(AppearanceSettings.image)) {
             resetVideo();
@@ -82,18 +85,19 @@ const marketPlaceSettings = {
                 localStorage.setItem(AppearanceSettings.image, bgSource as string);
             }
             image.style.display = "block";
-            image.src = `/images/${bgSource ? bgSource : localStorage.getItem(AppearanceSettings.image)}`;
+            image.src = `/packages/${name}/${bgSource ? bgSource : localStorage.getItem(AppearanceSettings.image)}`;
         }
         if (payload) {
             const stylesheet = document.getElementById("stylesheet")! as HTMLLinkElement;
             if (localStorage.getItem(AppearanceSettings.stylePayload) !== payload) {
                 localStorage.setItem(AppearanceSettings.stylePayload, payload);
+                localStorage.setItem(AppearanceSettings.themeName, name as string);
             }
-            stylesheet.href = `/styles/${localStorage.getItem(AppearanceSettings.stylePayload)}`;
+            stylesheet.href = `/packages/${name}/${localStorage.getItem(AppearanceSettings.stylePayload)}`;
         } else {
             if (localStorage.getItem(AppearanceSettings.stylePayload)) {
                 const stylesheet = document.getElementById("stylesheet")! as HTMLLinkElement;
-                stylesheet.href = `/styles/${localStorage.getItem(AppearanceSettings.stylePayload)}`;
+                stylesheet.href = `/packages/${localStorage.getItem(AppearanceSettings.themeName)}/${localStorage.getItem(AppearanceSettings.stylePayload)}`;
             }
         }
     }

test.js

@@ -1,16 +0,0 @@
-import fs from "fs";
-// This is a test file to upload files to the Nebula server
-import { File, FormData } from "formdata-node";
-import { fileFromPath } from "formdata-node/file-from-path";
-import { parsedDoc } from "./server/config.js";
-const form = new FormData();
-const file = new File(["My hovercraft is full of eels"], "example.txt");
-form.set("file", file);
-console.log(form);
-await fetch("http://localhost:8080/api/upload-image", {
-    headers: {
-        PSK: parsedDoc.marketplace.psk
-    },
-    method: "post",
-    body: form
-}).then(async (res) => { console.log(await res.text()) });