added background image functionality

src-tauri/Cargo.toml

@@ -17,7 +17,7 @@ tauri-build = { version = "1.5.3", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.7.0", features = [ "fs-all", "path-all", "window-all", "process-all", "notification-all", "dialog-all"] }
+tauri = { version = "1.7.0", features = [ "protocol-all", "fs-all", "path-all", "window-all", "process-all", "notification-all", "dialog-all"] }
 
 [features]
 # this feature is used for production builds or when `devPath` points to the filesystem and the built-in dev server is disabled.

src-tauri/tauri.conf.json

@@ -23,6 +23,9 @@
       "fs": {
         "all": true,
         "scope": [
+          "**",
+          "**/*",
+          "/**/*",
           "$CONFIG/stort/",
           "$CONFIG/stort/**"
         ]
@@ -36,6 +39,15 @@
       "process": {
         "all": true
       },
+      "protocol": {
+        "all": true,
+        "asset": true,
+        "assetScope": [
+          "**",
+          "**/*",
+          "/**/*"
+        ]
+      },
       "window": {
         "all": true
       }
@@ -65,7 +77,7 @@
       ]
     },
     "security": {
-      "csp": null
+      "csp": "default-src 'self'; img-src 'self' asset: https://asset.localhost"
     },
     "updater": {
       "active": false

src/components/Generic/Layout.tsx

@@ -1,12 +1,25 @@
-import { Box } from "@mui/material";
+import { Box, Button } from "@mui/material";
+import { convertFileSrc } from "@tauri-apps/api/tauri";
+import { useState } from "react";
 import { FooterBar } from "../FooterBar";
 import { HeaderBar } from "../HeaderBar/HeaderBar";
 
 export const Layout = () => {
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+
+  const setBackground = async () => {
+    const assetUrl = convertFileSrc("/home/vomitblood/build/stort/public/images/background.jpg");
+    setImageUrl(assetUrl);
+  };
+
   return (
     <Box
       sx={{
-        // backgroundColor: "#8ab4f8",
+        // Use the URL function for background images
+        backgroundImage: `url(${imageUrl})`,
+        backgroundSize: "cover", // Cover the entire area
+        backgroundPosition: "center", // Center the image
+        backgroundRepeat: "no-repeat", // Do not repeat the image
         display: "flex",
         flexDirection: "column",
         height: "100vh",
@@ -20,38 +33,15 @@ export const Layout = () => {
           overflow: "auto",
         }}
       >
-        kdfjdlfjdkfjdlfldkfj <br />
+        <Box>
-        kdfjdlfjdkfjdlfldkfj <br />
+          <Button
-        kdfjdlfjdkfjdlfldkfj <br />
+            onClick={() => {
-        kdfjdlfjdkfjdlfldkfj <br />
+              setBackground();
-        kdfjdlfjdkfjdlfldkfj <br />
+            }}
-        kdfjdlfjdkfjdlfldkfj <br />
+          >
-        kdfjdlfjdkfjdlfldkfj <br />
+            set background
-        kdfjdlfjdkfjdlfldkfj <br />
+          </Button>
-        kdfjdlfjdkfjdlfldkfj <br />
+        </Box>
-        kdfjdlfjdkfjdlfldkfj <br />
-        kdfjdlfjdkfjdlfldkfj <br />
-        kdfjdlfjdkfjdlfldkfj <br />
-        kdfjdlfjdkfjdlfldkfj <br />
-        kdfjdlfjdkfjdlfldkfj <br />
-        kdfjdlfjdkfjdlfldkfj <br />
-        kdfjdlfjdkfjdlfldkfj <br />
-        kdfjdlfjdkfjdlfldkfj <br />
-        kdfjdlfjdkfjdlfldkfj <br />
-        kdfjdlfjdkfjdlfldkfj <br />
-        kdfjdlfjdkfjdlfldkfj <br />
-        kdfjdlfjdkfjdlfldkfj <br />
-        kdfjdlfjdkfjdlfldkfj <br />
-        kdfjdlfjdkfjdlfldkfj <br />
-        kdfjdlfjdkfjdlfldkfj <br />
-        kdfjdlfjdkfjdlfldkfj <br />
-        kdfjdlfjdkfjdlfldkfj <br />
-        kdfjdlfjdkfjdlfldkfj <br />
-        kdfjdlfjdkfjdlfldkfj <br />
-        kdfjdlfjdkfjdlfldkfj <br />
-        kdfjdlfjdkfjdlfldkfj <br />
-        kdfjdlfjdkfjdlfldkfj <br />
-        kdfjdlfjdkfjdlfldkfj <br />
       </Box>
       <FooterBar />
     </Box>

src/lib/settings.ts

@@ -9,6 +9,7 @@ export const defaultSettings = {
     background_image_size: "cover" as string,
     background_image_position: "center" as string,
     background_image_repeat: "no-repeat" as string,
+    footer_background_color: "#8ab4f8" as string,
   },
   style: {
     accent_color: "#8ab4f8" as string,