adding theme system

src/modules/config.ts

@@ -8,6 +8,8 @@ class WebsiteConfig {
   public description: string = "";
   public language: string = "en";
   public localization: string = "en-US";
+  public useMetric: boolean = true;
+  public theme: string = "flame";
 }
 
 export async function loadConfig(): Promise<Config | null> {

src/modules/server.ts

@@ -44,53 +44,64 @@ export async function startServer(): Promise<void> {
   await Compile();
 
   // Start web server
-  app.listen(7000, () =>
+  app.listen(7001, () =>
     console.log(
-      `Server has started on http://localhost:7000 🚀`,
+      `Server has started on http://localhost:7001 🚀`,
     ));
 }
 
 export async function Compile(): Promise<void> {
   ensureDirSync(tempFolder);
 
-  ["private", "public"].forEach((folder) => {
-    for (
-      const entry of walkSync(`${Deno.cwd()}/${folder}/`, {
-        includeDirs: false,
-      })
-    ) {
-      console.log("Preparing: " + entry.path);
+  [`private/themes/${window.config.website.theme}`, "public"].forEach(
+    (folder) => {
+      for (
+        const entry of walkSync(`${Deno.cwd()}/${folder}/`, {
+          includeDirs: false,
+        })
+      ) {
+        console.log("Preparing: " + entry.path);
 
-      let language = null;
-      if (!entry.path.includes(".min.")) {
-        if (entry.path.includes(".css")) {
-          language = Language.CSS;
-        } else if (entry.path.includes(".json")) {
-          language = Language.JSON;
+        let language = null;
+        if (!entry.path.includes(".min.")) {
+          if (entry.path.includes(".css")) {
+            language = Language.CSS;
+          } else if (entry.path.includes(".json")) {
+            language = Language.JSON;
+          }
+          // minifier module make error when minify js and html file 🥲
+          //else if (entry.path.includes(".js")) {
+          //  language = Language.JS;
+          //}
+          //else if (entry.path.includes(".htm")) {
+          //language = Language.HTML;
+          //}
         }
-        // minifier module make error when minify js and html file 🥲
-        //else if (entry.path.includes(".js")) {
-        //  language = Language.JS;
-        //}
-        //else if (entry.path.includes(".htm")) {
-        //language = Language.HTML;
-        //}
-      }
 
-      const moveToPath = changePath(entry.path, folder, "temp");
-      ensureFileSync(moveToPath);
+        const moveToPath = convertOutputPath(entry.path, folder);
+        ensureFileSync(moveToPath);
 
-      if (language) {
-        let content = Deno.readTextFileSync(entry.path);
-        content = minify(Language.HTML, content);
-        Deno.writeTextFileSync(moveToPath, content);
-      } else {
-        Deno.copyFileSync(entry.path, moveToPath);
+        if (language) {
+          let content = Deno.readTextFileSync(entry.path);
+          content = minify(Language.HTML, content);
+          Deno.writeTextFileSync(moveToPath, content);
+        } else {
+          Deno.copyFileSync(entry.path, moveToPath);
+        }
       }
-    }
-  });
+    },
+  );
+  // Copy language
+  let languagePath =
+    `${Deno.cwd()}/public/languages/${window.config.website.language}.json`;
+  const languageOutput = convertOutputPath(languagePath, "public/languages");
+  if (!existsSync(languagePath)) {
+    languagePath =
+      `${Deno.cwd()}/private/languages/${window.config.website.language}.json`;
+  }
+  Deno.copyFileSync(languagePath, languageOutput);
 }
 
-function changePath(path: string, from: string, to: string) {
-  return Deno.cwd() + path.replace(Deno.cwd(), "").replace(from, to);
+function convertOutputPath(path: string, from: string) {
+  return Deno.cwd() + path.replace(Deno.cwd(), "").replace(from, "temp");
 }

src/private/css/magma.css → src/private/themes/flame/css/magma.css

@@ -8,6 +8,7 @@ body {
   width: 100%;
   height: 100%;
   position: fixed;
+  margin-top: -5%;
   background-image: var(--bgImage);
   transform: scale(1.1);
   filter: blur(0.2rem);
@@ -55,7 +56,7 @@ body {
   display: flex;
   width: 100%;
   color: var(--foreground);
-  text-decoration:none;
+  text-decoration: none;
 }
 
 .group-items h6 {

src/private/index.html → src/private/themes/flame/index.html

@@ -8,12 +8,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/png" href="assets/favicon.ico" />
     <link rel="stylesheet" href="css/font.css">
-    <link rel="stylesheet" href="css/all.min.css">
-    <link rel="stylesheet" href="css/custom.css">
     <link rel="stylesheet" href="css/normalize.min.css">
     <link rel="stylesheet" href="css/skeleton.min.css">
-    <link rel="stylesheet" href="css/charts.min.css">
+    <!-- <link rel="stylesheet" href="css/charts.min.css"> -->
+    <link rel="stylesheet" href="css/all.min.css">
+    <link rel="stylesheet" href="css/core.css">
     <link rel="stylesheet" href="css/magma.css">
+    <link rel="stylesheet" href="css/custom.css">
 </head>
 
 <body>

src/private/js/magma.js → src/private/themes/flame/js/magma.js

@@ -10,9 +10,9 @@ async function loadConfig() {
 
 async function loadLanguage() {
     try {
-        window.language = await (await fetch(`./languages/${window.config.website.language}.json`)).json();
+        window.language = await (await fetch(`./${window.config.website.language}.json`)).json();
     } catch {
-        window.language = await (await fetch(`./languages/en.json`)).json();
+        window.language = await (await fetch(`./en.json`)).json();
     }
 }
 

src/public/config.json

@@ -1,5 +1,6 @@
 {
     "website": {
+        "theme": "flame",
         "title": "Magma Dashboard",
         "description": "",
         "language": "en",

src/public/css/core.css

@@ -0,0 +1,6 @@
+:root {
+  --bgColor: #2d3436;
+  --bgImage: url("https://images.wallpaperscraft.com/image/single/leaf_plant_green_136967_2560x1440.jpg");
+  --accentColor: #ffc107;
+  --foreground: #ffffff;
+}

src/public/css/custom.css

@@ -1,6 +0,0 @@
-:root {
-  --bgColor: #2d3436;
-  --bgImage: url("https://images.wallpaperscraft.com/image/single/leaf_plant_green_136967_2560x1440.jpg");
-  --accentColor: #ffc107;
-  --foreground: #ffffff;
-}