Just a bunch of changes

package.json

@@ -22,6 +22,7 @@
     "@astrojs/svelte": "^5.7.2",
     "@astrojs/tailwind": "^5.1.2",
     "@fastify/compress": "^8.0.1",
+    "@fastify/helmet": "^12.0.1",
     "@fastify/middie": "^9.0.2",
     "@fastify/multipart": "^9.0.1",
     "@fastify/static": "^8.0.1",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       '@fastify/compress':
         specifier: ^8.0.1
         version: 8.0.1
+      '@fastify/helmet':
+        specifier: ^12.0.1
+        version: 12.0.1
       '@fastify/middie':
         specifier: ^9.0.2
         version: 9.0.2
@@ -698,6 +701,9 @@ packages:
   '@fastify/fast-json-stringify-compiler@5.0.1':
     resolution: {integrity: sha512-f2d3JExJgFE3UbdFcpPwqNUEoHWmt8pAKf8f+9YuLESdefA0WgqxeT6DrGL4Yrf/9ihXNSKOqpjEmurV405meA==}
 
+  '@fastify/helmet@12.0.1':
+    resolution: {integrity: sha512-kkjBcedWwdflRThovGuvN9jB2QQLytBqArCFPdMIb7o2Fp0l/H3xxYi/6x/SSRuH/FFt9qpTGIfJz2bfnMrLqA==}
+
   '@fastify/merge-json-schemas@0.1.1':
     resolution: {integrity: sha512-fERDVz7topgNjtXsJTTW1JKLy0rhuLRcquYqNR9rF7OcVpCa2OVW49ZPDIhaRRCaUuvVxI+N416xUoF76HNSXA==}
 
@@ -2085,6 +2091,10 @@ packages:
   hastscript@8.0.0:
     resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==}
 
+  helmet@7.2.0:
+    resolution: {integrity: sha512-ZRiwvN089JfMXokizgqEPXsl2Guk094yExfoDXR0cBYWxtBbaSww/w+vT4WEJsBW2iTUi1GgZ6swmoug3Oy4Xw==}
+    engines: {node: '>=16.0.0'}
+
   html-escaper@3.0.3:
     resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
 
@@ -4632,6 +4642,11 @@ snapshots:
     dependencies:
       fast-json-stringify: 6.0.0
 
+  '@fastify/helmet@12.0.1':
+    dependencies:
+      fastify-plugin: 5.0.1
+      helmet: 7.2.0
+
   '@fastify/merge-json-schemas@0.1.1':
     dependencies:
       fast-deep-equal: 3.1.3
@@ -6300,6 +6315,8 @@ snapshots:
       property-information: 6.5.0
       space-separated-tokens: 2.0.2
 
+  helmet@7.2.0: {}
+
   html-escaper@3.0.3: {}
 
   html-minifier-terser@7.2.0:

server/server.ts

@@ -6,6 +6,7 @@ import fastifyCompress from "@fastify/compress";
 import fastifyMiddie from "@fastify/middie";
 import fastifyMultipart from "@fastify/multipart";
 import fastifyStatic from "@fastify/static";
+import fastifyHelmet from "@fastify/helmet";
 import chalk from "chalk";
 import Fastify, { FastifyReply, FastifyRequest } from "fastify";
 import gradient from "gradient-string";
@@ -30,9 +31,15 @@ await app.register(fastifyCompress, {
 
 await app.register(fastifyMultipart);
 
+await app.register(fastifyHelmet, {
+    xPoweredBy: false,
+    crossOriginEmbedderPolicy: true,
+    crossOriginOpenerPolicy: true,
+    contentSecurityPolicy: false //Disabled because astro DOES NOT LIKE IT
+});
+
 await app.register(fastifyStatic, {
     root: fileURLToPath(new URL("../dist/client", import.meta.url)),
-    decorateReply: false
 });
 
 //Our marketplace API. Not middleware as I don't want to deal with that LOL. Just a function that passes our app to it.

src/components/SidebarButton.astro

@@ -4,13 +4,13 @@ const { title, route } = Astro.props;
 
 <a
   href={route}
-  class="snap-center snap-always group flex flex-col items-center md:p-0 xl:p-3 max-sm:p-3 sm:p-3 bg-navbar-color w-full rounded-3xl md:flex-row md:bg-none md:rounded-none"
+  class="snap-center snap-always group flex flex-col items-center md:p-0 max-sm:p-3 sm:p-3 bg-navbar-color w-full rounded-3xl md:flex-row md:bg-none md:rounded-none"
 >
   <div class="xl:p-2 max-sm:p-2 sm:p-2 md:p-0">
     <slot />
   </div>
   <div
-    class="max-md:min-w-24 roboto text-center font-bold text-text-color roboto transition duration-500 group-hover:text-text-hover-color md:text-xl xl:ml-2 text-nowrap"
+    class="max-md:min-w-24 font-roboto text-center font-bold text-text-color roboto transition duration-500 group-hover:text-text-hover-color md:text-xl text-nowrap"
   >
     {title}
   </div>

src/components/catalog/CatalogCard.svelte

@@ -11,7 +11,7 @@ async function getAssets() {
 const assets = getAssets();
 </script>
 
-<div class="text-3xl roboto font-bold text-text-color p-10">
+<div class="text-3xl font-roboto font-bold text-text-color p-10">
     <Suspense let:suspend>
         <div slot="loading">
             <p class="text-4xl"> Loading... </p>

src/layouts/Layout.astro

@@ -28,7 +28,10 @@ const { title, noHeader } = Astro.props;
     <link
       rel="preload"
       href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap"
+      as="style"
+      crossorigin="anonymous"
       />
+    <link rel="preload" href="https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxK.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
     <ViewTransitions />
@@ -87,44 +90,9 @@ const { title, noHeader } = Astro.props;
     </style>
 
     <style is:global>
-      :root {
-        --accent: 136, 58, 234;
-        --accent-light: 224, 204, 250;
-        --accent-dark: 49, 10, 101;
-        --accent-gradient: linear-gradient(
-          45deg,
-          rgb(var(--accent)),
-          rgb(var(--accent-light)) 30%,
-          white 60%
-              );
-        font-family: Roboto, sans-serif;
-      }
-      html {
-          font-family: var(--font-family), Roboto, sans-serif;
-        background: #13151a;
-        background-size: 224px;
-      }
-      code {
-        font-family:
-          Menlo,
-          Monaco,
-          Lucida Console,
-          Liberation Mono,
-          DejaVu Sans Mono,
-          Bitstream Vera Sans Mono,
-          Courier New,
-          monospace;
-      }
       .roboto {
           font-family: var(--font-family), Roboto;
       }
-      .hide-the-scrollbar::-webkit-scrollbar {
-        display: none;
-      }
-     .hide-the-scrollbar {
-        -ms-overflow-style: none;
-        scrollbar-width: none;
-    }
   </style>
   </body>
 </html>

src/layouts/SettingsLayout.astro

@@ -7,9 +7,9 @@ import SidebarButton from "@components/SidebarButton.astro";
 import { Icon } from "astro-icon/components";
 ---
 
-<div class="flex flex-row roboto">
+<div class="flex flex-row font-roboto">
   <div class="text-text-color mt-16 fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col flex md:flex-row">
-      <div class="items-center md:p-3 sm:p-3 flex flex-row border-border-color md:gap-10 xl:gap-5 max-sm:gap-5 sm:gap-5 md:p-5 md:border-r-2 max:md:w-2/12 md:flex-col md:bg-navbar-color md:gap-0 md:p-0 overflow-x-auto md:overflow-x-hidden overflow-y-hidden max-md:ml-1 max-md:mr-1 max-md:max-h-24 max-md:min-h-24 max-md:justify-left max-md:scroll-ml-3 max-md:scroll-mr-3 max-md:snap-x max-md:snap-mandatory">
+      <div class="items-center md:p-3 sm:p-3 flex flex-row border-border-color md:gap-10 xl:gap-10 max-sm:gap-5 sm:gap-5 md:p-5 md:border-r-2 max:md:w-2/12 md:flex-col md:bg-navbar-color md:gap-0 md:p-0 overflow-x-auto md:overflow-x-hidden overflow-y-hidden max-md:ml-1 max-md:mr-1 max-md:max-h-24 max-md:min-h-24 max-md:justify-left max-md:scroll-ml-3 max-md:scroll-mr-3 max-md:snap-x max-md:snap-mandatory">
       <SidebarButton title={t("settings.appearance")} route={`/${lang}/settings/appearance`}>
         <Icon name="ph:palette" class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6" />
       </SidebarButton>

src/layouts/SettingsSection.astro

@@ -2,7 +2,7 @@
 const { title, subtitle } = Astro.props;
 ---
 
-<div class="mt-5 roboto">
+<div class="mt-5 font-roboto">
   <hr />
   <div class="mt-3">
     <div class="text-2xl font-semibold">{title}</div>

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

@@ -18,13 +18,13 @@ const lastPage = assetsJson.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 roboto">
+  <div class="flex mt-16 w-full fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center overflow-auto font-roboto">
       <div class="w-full flex flex-col gap-4 jusitfy-center items-center text-text-color mt-9"> 
           <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} lang={lang} />
-    <div class="flex flex-row pb-8 gap-4 roboto">
+    <div class="flex flex-row pb-8 gap-4 font-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={`/${lang}/catalog/${1}`} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md"> 1 </a>

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

@@ -6,7 +6,7 @@ const assetsJson = await response.json();
 ---
 
 <Layout title={`Package: ${packageName}`}>
-    <div class="flex flex-wrap mt-16 w-full fixed inset-0 h-full md:h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center content-center justify-center sm:pt-64 lg:pb-64 roboto max-md:p-4">
+    <div class="flex flex-wrap mt-16 w-full fixed inset-0 h-full md:h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center content-center justify-center sm:pt-64 lg:pb-64 font-roboto max-md:p-4">
         {assetsJson.error && <h1 class="text-text-color text-3xl font-bold"> Unexpected error. Is the name right? </h1>}
         {!assetsJson.error &&
             <div class="flex flex-col md:flex-row items-center text-text-color bg-navbar-color rounded-2xl">
@@ -21,7 +21,7 @@ const assetsJson = await response.json();
                 {!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>
+                    <h1 class="text-4xl font-roboto font-semibold">{assetsJson.title}</h1>
                     <p class="text-xl"> By: <strong>{assetsJson.author}</strong></p>
                     <p class="text-xl">{assetsJson.description}</p>
                     <button class="bg-primary text-text-color border border-transparent rounded-lg px-6 py-3 hover:bg-navbar-color transition-colors duration-300 mt-9" id="install">

src/pages/[lang]/index.astro

@@ -19,13 +19,13 @@ import { VERSION } from "astro:env/client";
         <div class="h-32 w-32 fill-navbar-text-color">
           <Logo />
         </div>
-        <h1 class="roboto whitespace-nowrap font-bold text-navbar-text-color sm:visible text-5xl sm:text-7xl roboto">
+        <h1 class="font-roboto whitespace-nowrap font-bold text-navbar-text-color sm:visible text-5xl sm:text-7xl roboto">
           nebula.
         </h1>
       </div>
       <input
         id="nebula-input"
-        class="transition-all duration-300 roboto h-14 rounded-t-2xl w-10/12 rounded-b-2xl border border-input-border-color bg-input p-2 text-center text-xl text-input-text placeholder:text-input-text roboto focus:outline-none md:w-3/12"
+        class="transition-all duration-300 font-roboto h-14 rounded-t-2xl w-10/12 rounded-b-2xl border border-input-border-color bg-input p-2 text-center text-xl text-input-text placeholder:text-input-text roboto focus:outline-none md:w-3/12"
         placeholder={t("home.placeholder")}
       />
       <div
@@ -39,7 +39,7 @@ import { VERSION } from "astro:env/client";
       class="hidden z-100 w-full h-full absolute top-0 bottom-0 bg-primary"
       src="/loading"
       ></iframe>
-    <div id="version" class="flex flex-row w-full absolute bottom-4 pr-4 pl-4 text-text-color h-6 justify-between roboto"> 
+    <div id="version" class="flex flex-row w-full absolute bottom-4 pr-4 pl-4 text-text-color h-6 justify-between font-roboto"> 
         <p> Version: { VERSION } </p>
         <p> &copy; Nebula Services 2024 </p>
     </div>
@@ -149,7 +149,7 @@ import { VERSION } from "astro:env/client";
             `https://api.duckduckgo.com/ac?q=${encodeURIComponent(value)}&format=json`
           );
           const data = await resp.json();
-          const filteredData = data.slice(0,8) //Trim to only about 8 results. Any more and our omnibox dies
+          const filteredData = data.slice(0,8); //Trim to only about 8 results. Any more and our omnibox dies
           if (filteredData) {
             omnibox.innerHTML = "";
             filteredData.map((results: Suggestion) => {
@@ -157,7 +157,7 @@ import { VERSION } from "astro:env/client";
               let pTag = document.createElement("p");
               span.classList.add(
                 "cursor-pointer",
-                "roboto",
+                "font-roboto",
                 "border-b",
                 "border-input-border-color",
                 "last:rounded-b-xl",

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

@@ -20,7 +20,7 @@ import { MARKETPLACE_ENABLED } from "astro:env/client";
     <SettingsSection
       title="Theme"
       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 flex-wrap gap-4 items-center font-roboto">
         <div class="justify-center flex flex-row gap-6 flex-wrap md:justify-normal">
             <InstalledThemes client:only="svelte" />
           {MARKETPLACE_ENABLED && 
@@ -34,7 +34,7 @@ import { MARKETPLACE_ENABLED } from "astro:env/client";
             </a>
           }
         </div>
-        <div class="text-3xl roboto font-bold text-text-color"></div>
+        <div class="text-3xl font-roboto font-bold text-text-color"></div>
       </div>
     </SettingsSection>
   </SettingsLayout>

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

@@ -18,7 +18,7 @@ import CreditsCard from "@components/settings/CreditsCard.astro";
 <Layout title="Settings">
   <SettingsLayout title="Credits">
     <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="flex flex-row flex-wrap gap-4 items-center font-roboto">
         <div class="justify-center flex flex-row gap-6 flex-wrap md:justify-normal">
             <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" />
@@ -26,7 +26,7 @@ import CreditsCard from "@components/settings/CreditsCard.astro";
       </div>
     </SettingsSection>
     <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">
+        <div class="flex flex-row flex-wrap gap-6 items-center font-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" />

src/pages/index.astro

@@ -6,9 +6,11 @@ import Layout from "@layouts/Layout.astro";
 <Layout title="Loading..." noHeader="true">
     <Loading />
 </Layout>
-<script is:inline>
+<script>
+  import { pageLoad } from "@utils/events";
+  pageLoad(() => {
     let currentLang = localStorage.getItem("selectedLanguage");
-  const redirect = (loc) => (window.location.href = loc);
+    const redirect = (loc: any) => (window.location.href = loc);
     if (currentLang) {
         try {
             let parsed = JSON.parse(currentLang).value;
@@ -39,5 +41,6 @@ import Layout from "@layouts/Layout.astro";
       redirect("/en_US/");
     }
   }
+  });
 </script>
 <noscript></noscript>You need to enable JavaScript to run this app.

tailwind.config.mjs

@@ -15,6 +15,9 @@ export default {
             "dropdown-option-hover-color": "var(--dropdown-option-hover-color)",
             "border-color": "var(--border-color)"
         },
+        fontFamily: {
+            roboto: 'var(--font-family), Roboto'
+        },
         extend: {}
     },
     plugins: []