diff --git a/.gitignore b/.gitignore
index 38b3eb5..9f8fd92 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,9 +1,19 @@
-node_modules
-main
-package-lock.json
-*_templ.go
-fly.toml
-*.fiber.gz
+# soundcloak config (and instance-specific files)
soundcloak.json
+instance/*
+
+# other configs
compose.yaml
-regexp2_codegen.go
\ No newline at end of file
+fly.toml
+
+# created by soundcloak/dependencies
+node_modules
+package-lock.json
+*.fiber.gz
+
+# codegen
+*_templ.go
+regexp2_codegen.go
+
+# built binary
+main
\ No newline at end of file
diff --git a/README.md b/README.md
index 3f59e10..95c8955 100644
--- a/README.md
+++ b/README.md
@@ -256,6 +256,33 @@ Some notes:
+## Tinkering with the frontend
+
+I will mainly talk about the static files here. Maybe about the templates too in the future
+
+The static files are stored in `assets` folder
+
+### Overriding files
+
+You can override files by putting identically named files in the `instance` folder.
+
+### Basic theming
+
+1. Create `instance.css` file in `instance` folder
+2. Put your CSS rules there:
+```css
+/* Some basic CSS to change colors of the frontend. Put your own colors here as this one probably looks horrible (I did not test it) */
+:root {
+ --accent: #ffffff;
+ --primary: #000000;
+ --secondary: #00010a;
+ --0: #fafafa; /* Used for things, such as border color for buttons, etc */
+ --text: green;
+}
+```
+
+Refer to `assets/global.css` file for existing rules.
+
# Maintenance-related stuffs
## Updating
diff --git a/assets/index.html b/assets/index.html
index 6c8d39f..8c643fd 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -6,6 +6,7 @@
soundcloak
+
diff --git a/assets/instance.css b/assets/instance.css
new file mode 100644
index 0000000..ae49d78
--- /dev/null
+++ b/assets/instance.css
@@ -0,0 +1,2 @@
+/* This file is here as a stub.
+ Create an instance.css file in instance folder to style your instance. */
\ No newline at end of file
diff --git a/main.go b/main.go
index 1c6243a..0695250 100644
--- a/main.go
+++ b/main.go
@@ -40,7 +40,8 @@ func main() {
app.Use(recover.New())
app.Use(compress.New(compress.Config{Level: compress.LevelBestSpeed}))
- app.Static("/", "assets", fiber.Static{Compress: true, MaxAge: 7200}) // 2 hours
+ app.Static("/", "instance", fiber.Static{Compress: true, MaxAge: 7200}) // 2 hours
+ app.Static("/", "assets", fiber.Static{Compress: true, MaxAge: 14400}) // 4 hours
app.Static("/js/hls.js/", "node_modules/hls.js/dist", fiber.Static{Compress: true, MaxAge: 28800}) // 8 hours
// Just for easy inspection of cache in development. Since debug is constant, the compiler will just remove the code below if it's set to false, so this has no runtime overhead.
diff --git a/templates/base.templ b/templates/base.templ
index cc6c971..4cf7ef0 100644
--- a/templates/base.templ
+++ b/templates/base.templ
@@ -12,6 +12,7 @@ templ Base(title string, content templ.Component, head templ.Component) {
+
if title != "" {
{ title } ~ soundcloak
} else {