fix: Use font awesome instead of svg (#161)

Author: gbbirkisson

README.md

@@ -1,4 +1,4 @@
-<img align="right" width="128" height="128" src="assets/logo.png">
+<img align="right" width="128" height="128" src="spis-gui/assets/favicon.png">
 
 <h1>SPIS</h1>
 

dev/nginx.conf

@@ -15,11 +15,17 @@ http {
         gzip_proxied any;
         gzip_types
             text/html
-            application/wasm
+            text/css
+            text/javascript
             application/javascript
             application/json
-            text/plain
-            image/jpeg;
+            application/wasm
+            font/ttf
+            font/woff2
+            image/jpeg
+            image/webp
+            image/png
+            ;
 
         access_log  off;
         access_log /dev/stdout;
@@ -30,7 +36,7 @@ http {
             add_header Cache-Control "public";
             alias ${PWD}/dev/api/media;
         }
-        
+
         location /assets/thumbnails {
             gzip_static on;
             expires 1y;

docker/nginx.conf

@@ -8,11 +8,17 @@ server {
     gzip_proxied any;
     gzip_types
         text/html
-        application/wasm
+        text/css
+        text/javascript
         application/javascript
         application/json
-        text/plain
-        image/jpeg;
+        application/wasm
+        font/ttf
+        font/woff2
+        image/jpeg
+        image/webp
+        image/png
+        ;
 
     location ${SPIS_API_MEDIA_PATH} {
         gzip_static on;

make/Makefile-release.mk

@@ -8,8 +8,6 @@ RELEASE_AARCH64_GNU:=release/spis-server-aarch64-unknown-linux-gnu
 ${RELEASE_GUI}:
 	$(info $(M) Build GUI release)
 	$(Q) cd spis-gui && trunk build --release
-	$(Q) cp -f spis-gui/manifest.json spis-gui/dist/manifest.json
-	$(Q) cp -f assets/logo.png spis-gui/dist/logo.png
 	$(Q) rm -r target/release
 
 ${RELEASE_X86_60_GNU}: ${RELEASE_GUI} ${DEV_DB_FILE}

spis-gui/assets/css/brands.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2023 Fonticons, Inc.
+ */
+:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}.fa-regular,.far{font-weight:400}

spis-gui/assets/css/fontawesome.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2023 Fonticons, Inc.
+ */
+:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}

spis-gui/assets/css/regular.min.css

@@ -7,36 +7,36 @@
     "theme_color": "#db9b38",
     "icons": [
       {
-        "src": "/favicon.png",
+        "src": "/assets/favicon.png",
         "type": "image/png", "sizes": "72x72"
       },
       {
-        "src": "/favicon.png",
+        "src": "/assets/favicon.png",
         "type": "image/png", "sizes": "96x96"
       },
       {
-        "src": "/favicon.png",
+        "src": "/assets/favicon.png",
         "type": "image/png","sizes": "128x128"
       },
       {
-        "src": "/favicon.png",
+        "src": "/assets/favicon.png",
         "type": "image/png", "sizes": "144x144"
       },
       {
-        "src": "/favicon.png",
+        "src": "/assets/favicon.png",
         "type": "image/png", "sizes": "152x152"
       },
       {
-        "src": "/favicon.png",
+        "src": "/assets/favicon.png",
         "type": "image/png", "sizes": "192x192"
       },
       {
-        "src": "/favicon.png",
+        "src": "/assets/favicon.png",
         "type": "image/png", "sizes": "384x384"
       },
       {
-        "src": "/favicon.png",
+        "src": "/assets/favicon.png",
         "type": "image/png","sizes": "512x512"
       }
     ]
-  }
+  }

spis-gui/assets/css/solid.min.css

@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -9,211 +8,18 @@
     <meta name="description" content="Simple Private Image Server">
     <meta name="theme-color" content="#2b2b2b">
 
-    <link rel="manifest" href="manifest.json" />
-    <link rel="icon" type="image/png" href="favicon.png" />
-
-    <title>SPIS</title>
-
-    <style>
-        body {
-            background-color: #2b2b2b;
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        ul {
-            list-style: none;
-        }
-
-        .media-list {
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-            justify-content: center;
-            padding: 5px;
-        }
-
-        .media-preview {
-            z-index: 10;
-
-            position: fixed;
-            padding: 0;
-            margin: 0;
-
-            top: 0;
-            left: 0;
-
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.9);
-
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            flex-direction: column;
-            justify-content: space-around;
-        }
-
-        li {
-            position: relative;
-            width: 25%;
-        }
-
-        @media screen and (orientation:landscape) {
-            li {
-                width: 16%;
-            }
-        }
-
-        @media screen and (min-width: 1000px) {
-            li {
-                width: 10%;
-            }
-        }
-
-        .media-thumbnail {
-            padding-left: 2px;
-            padding-right: 2px;
-            padding-top: 1px;
-            padding-bottom: 0px;
-            border-radius: 10px;
-            width: 100%;
-        }
-
-        .media-thumbnail-fav {
-            position: absolute;
-            top: 95%;
-            left: 95%;
-            transform: translate(-95%, -95%);
-        }
-
-        .media-thumbnail-vid {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-        }
-
-        .media-preview-content {
-            height: 90%;
-            width: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
+    <link data-trunk rel="copy-dir" href="assets"/>
+    <link data-trunk rel="css" href="style.css" />
 
-        .media-action {
-            width: 100%;
-            display: flex;
-            text-align: center;
-            justify-content: space-around;
-        }
+    <link rel="manifest" href="assets/manifest.json" />
+    <link rel="icon" type="image/png" href="assets/favicon.png" />
 
-        .img-preview {
-            max-width: 100%;
-            max-height: 100%;
-        }
+    <link rel="stylesheet" href="/assets/css/brands.min.css">
+    <link rel="stylesheet" href="/assets/css/fontawesome.min.css">
+    <link rel="stylesheet" href="/assets/css/regular.min.css">
+    <link rel="stylesheet" href="/assets/css/solid.min.css">
 
-        /* Setup bar on top */
-
-        .main {
-            margin-top: 60px;
-        }
-        
-        .bar {
-            position: fixed;
-            top: 0;
-            width: 100%;
-            z-index: 5;
-
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .bar-inner {
-            background-color: #2b2b2b;
-            border-radius: 10px;
-            height: 65px;
-            width: 100%;
-        }
-
-        .bar-filter-list-main {
-            width: 100%;
-            height: 100%;
-            display: flex;
-        }
-
-        .bar-filter-item {
-            width: 100%;
-            height: 100%;
-            flex-basis: 100%;
-            min-width: 50px;
-            margin-left: 5px;
-            margin-right: 5px;
-            padding-bottom: 5px;
-            padding-top: 5px;
-        }
-
-        .bar-filter-link {
-            background-color: #2b2b2b;
-        }
-
-        .bar-filter-link-selected {
-            background-color: #111111;
-        }
-
-        .bar-filter-item > a {
-            border-radius: 10px;
-
-            display: block;
-            color: rgb(255, 255, 255);
-            text-decoration: none;
-            font-family: monospace;
-            font-size: larger;
-
-            width: 100%;
-            height: 100%;
-
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .bar-filter-item > a:hover {
-            background-color: #111111;
-            border-radius: 10px;
-        }
-
-        /* On the phone */
-        @media screen and (max-width: 1000px) {
-            .main {
-                margin-top: 30px;
-            }
-            .bar-inner {
-                height: 35px;
-                overflow-x: scroll;
-            }
-
-            .bar-filter-item {
-                padding-bottom: 2px;
-                padding-top: 2px;
-                margin-left: 2px;
-                margin-right: 2px;
-
-                min-width: 32px;
-                font-size: small;
-            }
-        }
-
-    </style>
+    <title>SPIS</title>
 </head>
-
 <body></body>
-
-</html>
+</html>