Full theme support!

astro.config.mjs

@@ -20,6 +20,14 @@ export default defineConfig({
           target: "http://localhost:8080",
           changeOrigin: true,
         },
+        "/videos": {
+          target: "http://localhost:8080",
+          changeOrigin: true,
+        },
+        "/styles": {
+          target: "http://localhost:8080",
+          changeOrigin: true,
+        },
         "/api/packages": {
           target: "http://localhost:8080",
           changeOrigin: true,

database_assets/styles/com.nebula.cybermonay.css

@@ -0,0 +1,19 @@
+:root {
+  --background-primary: rgba(0, 0, 0, 0) !important;
+  --background-lighter: #000 !important;
+  --navbar-color: #000 !important;
+  --navbar-height: 60px !important;
+  --navbar-text-color: greenyellow !important;
+  --navbar-link-color: greenyellow !important;
+  --navbar-link-hover-color: green !important;
+  --navbar-font: "Roboto" !important;
+  --input-text-color: greenyellow !important;
+  --input-placeholder-color: white !important;
+  --input-background-color: #000 !important;
+  --input-border-color: greenyellow !important;
+  --input-border-size: 1.3px !important;
+  --navbar-logo-filter: none !important;
+  --dropdown-option-hover-color: #312a49 !important;
+  --tab-color: var(--black) !important;
+  --border-color: greenyellow !important;
+}

server.js

@@ -145,18 +145,34 @@ 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("/styles/", express.static("./database_assets/styles"));
+app.use("/scripts/", express.static("./database_assets/scripts"));
 app.use(ssrHandler);
 app.use(express.static(publicPath));
 
 // await catalog_assets.create({
-//   package_name: "com.dababy.fortnite",
-//   title: "fortnite.jpeg",
+//   package_name: "com.nebula.cybermonay",
+//   title: "Cyber Monay",
+//   image: "cyber_monay.jpg",
+//   author: "Nebula Services",
+//   version: "1.0.0",
+//   description: 'A parody of the famous "Cyber Monay" hack!',
+//   tags: ["Hacking", "Animated", "Funny"],
+//   payload: "com.nebula.cybermonay.css",
+//   background_video: "cyber_monay_test.mp4",
+//   type: "theme",
+// });
+
+// await catalog_assets.create({
+//   package_name: "com.nebula.fortnite.jpg",
+//   title: "Fortnite.jpg",
 //   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"],
-//   payload: "the DAMN CSS",
+//   author: "Nebula Services",
+//   version: "1.0.0",
+//   description: "Like the image in Ultraviolet, now on Nebula!",
+//   tags: ["Image", "Funny"],
+//   payload: "com.nebula.cybermonay.css",
+//   background_image: "fortnite.jpg",
 //   type: "theme",
 // });
 

src/components/catalog/CatalogCard.svelte

@@ -7,11 +7,11 @@
   }
 </script>
 
-<div class="text-3xl font-bold underline text-text-color">
+<div class="text-3xl roboto font-bold text-text-color p-10">
   {#await assetPromise}
     Loading assets...
   {:then assets}
-    <div class="flex flex-row gap-6">
+    <div class="flex flex-row gap-6 flex-wrap">
       {#each Object.entries(assets) as [key, asset]}
         <a href={"/assets/" + key}>
           <div
@@ -23,13 +23,18 @@
               class="w-full h-40 object-cover"
             />
             <div class="p-6 text-sm">
-              <div class="font-semibold mb-2">
+              <div class="font-semibold text-2xl mb-2">
                 {asset.title}
               </div>
               <div class="mb-4">{asset.description}</div>
-              <div>
-                <strong>Tags:</strong>
-                {asset.tags.join(", ")}
+              <div class="flex flex-wrap gap-2 mb-4">
+                {#each asset.tags as tag}
+                  <div
+                    class="bg-navbar-text-color text-navbar-color font-bold px-3 py-1 rounded-md text-center"
+                  >
+                    {tag}
+                  </div>
+                {/each}
               </div>
               <div>
                 <strong>Version:</strong>

src/layouts/Layout.astro

@@ -1,7 +1,6 @@
 ---
 import Header from "../components/Header.astro";
 import { ViewTransitions } from "astro:transitions";
-import "../themes/nebula.css";
 import MobileNavigation from "../components/MobileNavigation.astro";
 
 interface Props {
@@ -18,6 +17,12 @@ const { title } = Astro.props;
     <meta name="description" content="Astro description" />
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link
+      rel="stylesheet"
+      href="/nebula.css"
+      id="stylesheet"
+      transition:persist
+    />
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap"
@@ -28,14 +33,32 @@ const { title } = Astro.props;
   </head>
   <body class="h-full bg-primary">
     <Header />
-    <slot />
+    <div class="h-full z-10 w-full fixed">
+      <slot />
+    </div>
     <div
       id="mobileNavMenu"
-      class="w-full fixed inset-0 h-[calc(100%-4rem)] z-0"
+      class="w-full fixed inset-0 h-[calc(100%-4rem)] z-20"
       transition:persist
     >
       <MobileNavigation />
     </div>
+    <video
+      autoplay
+      muted
+      loop
+      id="nebulaVideo"
+      class="absolute z-0 h-[calc(100%-4rem)] w-full object-cover"
+      transition:persist
+    >
+      <source type="video/mp4" id="videosource" />
+    </video>
+    <img
+      src=""
+      class="absolute z-0 h-[calc(100%-4rem)] w-full object-cover hidden"
+      id="nebulaImage"
+      transition:persist
+    />
     <script>
       import { isMobileNavOpen } from "../store.js";
       const mobileNavMenu = document.getElementById("mobileNavMenu");
@@ -52,6 +75,30 @@ const { title } = Astro.props;
           }
         }
       });
+
+      const stylesheet_link = localStorage.getItem("stylesheet");
+      const stylesheet = document.getElementById(
+        "stylesheet"
+      )! as HTMLAnchorElement;
+
+      if (stylesheet_link) {
+        stylesheet.href = stylesheet_link;
+      }
+
+      const video_link = localStorage.getItem("background_video");
+
+      const image_link = localStorage.getItem("background_image");
+
+      const image_source = document.getElementById("nebulaImage")! as any;
+      const source = document.getElementById("nebulaVideo")! as any;
+
+      if (video_link) {
+        source.src = "/videos/" + video_link;
+      }
+      if (image_link) {
+        image_source.style.display = "block";
+        image_source.src = "/images/" + image_link;
+      }
     </script>
     <style>
       #mobileNavMenu {

src/pages/[lang]/index.astro

@@ -16,7 +16,7 @@ const t = useTranslations(lang);
 
 <Layout title="Welcome to Astro.">
   <div
-    class="flex flex-wrap mt-16 justify-center content-center w-full fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center"
+    class="flex flex-wrap mt-16 justify-center content-center w-full bg-primary fixed inset-0 h-[calc(100%-4rem)] z-0 flex-col items-center"
   >
     <div class="flex flex-row items-center mb-8">
       <div class="h-32 w-32 fill-navbar-text-color">

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

@@ -6,7 +6,7 @@ import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
 import ThemeCard from "../../../components/settings/ThemeCard.astro";
 import { Icon } from "astro-icon/components";
 import fortnite from "../../../assets/fortnite.jpg";
-
+import ClassicNebula from "../../../assets/classic_theme.png";
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
 export function getStaticPaths() {
@@ -26,11 +26,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">
-        <ThemeCard image={fortnite} title="Fortnite.jpg Theme" />
-        <ThemeCard image={fortnite} title="Fortnite.jpg Theme" />
-        <ThemeCard image={fortnite} title="Fortnite.jpg Theme" />
-        <ThemeCard image={fortnite} title="Fortnite.jpg Theme" />
-        <ThemeCard image={fortnite} title="Fortnite.jpg Theme" />
+        <div onclick="install()">
+          <ThemeCard image={ClassicNebula} title="Classic Nebula" />
+        </div>
         <div class="rounded-3xl bg-navbar-color w-64 flex flex-col">
           <div class="w-full items-center justify-center flex aspect-[16/9]">
             <Icon name="ph:plus-bold" class="h-16 w-16" />
@@ -43,3 +41,11 @@ export const prerender = true;
     </SettingsSection>
   </SettingsLayout>
 </Layout>
+<script is:inline>
+  function install() {
+    localStorage.removeItem("background_video");
+    localStorage.removeItem("background_image");
+    localStorage.removeItem("stylesheet");
+    location.reload();
+  }
+</script>

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

@@ -18,16 +18,42 @@ const assets_json = await response.json();
         </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"
-          />
+          {assets_json.background_video ? (
+            // Background video
+            <video
+              src={`/videos/${assets_json.background_video}`}
+              controls
+              class="w-96 h-72 object-cover rounded-xl"
+            >
+              Your browser does not support the video tag.
+            </video>
+          ) : assets_json.backgroundImage ? (
+            // Background image
+            <div
+              style={{
+                backgroundImage: `url(/images/${assets_json.backgroundImage})`,
+              }}
+              class="w-96 h-72 bg-cover bg-center rounded-xl"
+            />
+          ) : (
+            // Fallback to cover image
+            <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">
+              By <strong>{assets_json.author}</strong>
+            </div>
             <div class="text-xl">{assets_json.description}</div>
-            <button class="border-text-color border-2 rounded-lg w-40">
+            <button
+              class="border-text-color border-2 rounded-lg w-40"
+              id="install"
+            >
               Install
             </button>
           </div>
@@ -35,4 +61,20 @@ const assets_json = await response.json();
       )
     }
   </div>
+  <script is:inline define:vars={{ assets_json }}>
+    document.getElementById("install").addEventListener("click", install);
+
+    function install() {
+      if (assets_json.background_video) {
+        localStorage.setItem("background_video", assets_json.background_video);
+      }
+      if (assets_json.background_image) {
+        localStorage.setItem("background_image", assets_json.background_image);
+      }
+      if (assets_json.type == "theme") {
+        localStorage.setItem("stylesheet", "/styles/" + assets_json.payload);
+      }
+      location.reload();
+    }
+  </script>
 </Layout>