allow instances to easily override assets (read readme)

This commit is contained in:
Laptop
2024-12-21 22:52:04 +02:00
parent e3a4f7f861
commit 74450e807d
6 changed files with 50 additions and 8 deletions

24
.gitignore vendored
View File

@@ -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
fly.toml
# created by soundcloak/dependencies
node_modules
package-lock.json
*.fiber.gz
# codegen
*_templ.go
regexp2_codegen.go
# built binary
main

View File

@@ -256,6 +256,33 @@ Some notes:
</details>
## 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

View File

@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>soundcloak</title>
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="instance.css">
</head>
<body>

2
assets/instance.css Normal file
View File

@@ -0,0 +1,2 @@
/* This file is here as a stub.
Create an instance.css file in instance folder to style your instance. */

View File

@@ -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.

View File

@@ -12,6 +12,7 @@ templ Base(title string, content templ.Component, head templ.Component) {
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/global.css"/>
<link rel="stylesheet" href="global.css"/>
if title != "" {
<title>{ title } ~ soundcloak</title>
} else {