Subdirectory handling in frontend, README

Updated READMe a bit for providers, allowed frontend to better handle
linking to subdirectories (previously didn't work at all!).

README.md

@@ -35,19 +35,17 @@ this project uses go modules and a makefile, so building should be relatively st
 
  - `make` will build the project for your system's architecture.
  - `make pi` will build the project with the `GOOS=linux GOARCH=arm GOARM=5 go` flags set for raspberry pis.
+ 
+### providers
 
-## api
+there are a few built-in providers, and more can be added by opening a pull request.
 
-initially the heavy lifting was done by the server, but the need for a better frontend was clear.
+|name|service|configuration example|
+|----|-------|---------------------|
+|disk|local filesystem|disk.yml|
+|backblaze|backblaze b2|backblaze.yml|
 
-full documentation coming soon once actual functionality has been nailed down.
+#### custom provider
 
-## providers
-
-// todo
-
-## credits
-
-svg icons via https://iconsvg.xyz
-
-raspberry pi svg via https://www.vectorlogo.zone/logos/raspberrypi/index.html
+custom file providers can be implemented by adding a new go file to the `files` module. it should
+implement the `FileProviderInterface` interface.

assets/web/css/styles.css

@@ -1,9 +1,6 @@
-* {
-    font-family: sans-serif;
-}
-
 body {
-
+    font-family: sans-serif;
+    color: black;
 }
 
 .grid-lg, .grid-sm {
@@ -45,4 +42,22 @@ body {
     color: white;
     background-color: darkgray;
     transition: background-color 0.5s;
+}
+
+@media (prefers-color-scheme: dark) {
+    body { background-color: black; color: white; }
+    .grid-lg a, .grid-sm a {
+        background-color: white;
+        color: black;
+    }
+    .grid-lg a:visited, .grid-lg a,
+    .grid-sm a:visited, .grid-sm a {
+        color: black
+    }
+    .grid-lg a:hover,
+    .grid-sm a:hover {
+        color: lightgray;
+        background-color: darkgray;
+        transition: background-color 0.5s;
+    }
 }

assets/web/javascript/app.js

@@ -12,7 +12,7 @@ function getFileListing(provider, path = "") {
       html`
       <div class="grid-sm">
         ${files.map(file =>
-          `<a href="${!file.IsDirectory ? `/api/files/${provider}${path}/${file.Name}` : `#${provider + "/" + file.Name}`}">
+          `<a href="${!file.IsDirectory ? `/api/files/${provider}${path}/${file.Name}` : `#${provider}/${path !== "" ? path.replace("/","") + "/" : ""}${file.Name}`}">
             ${file.Name}${file.IsDirectory ? '/' : ''}
           </a>
           `
@@ -52,7 +52,7 @@ function router(event = null) {
 
   let path = hash.split("/")
   let provider = path.shift()
-  console.log(path, provider)
+  path = path.join("/")
   getFileListing(provider, "/" + path)
 }