Add support for custom styling. Update the docker-compose.yml file. Display the title

.dockerignore

@@ -1,2 +1,3 @@
-./database/
+database/
+examples/
 node_modules/

README.md

@@ -1,3 +1,31 @@
 # Status Page
 This is a simple way to create customizable status pages.
 
+## Usage
+### With Docker Compose (Recommended)
+
+1. Copy the [examples/docker-compose.yml](examples/docker-compose.yml) file inside an empty directory.
+2. Create a `database/` directory and add a `database.json` file following the example database:
+[database/example.json5](database/example.json5).
+   * Note: This example may not be up-to-date, if that's the case, please open a PR or issue and I'll take care of it.
+   * Note: The schema is always available at [src/db.ts](src/db.ts).
+3. **(Optional)** If you want to add additional styles to make changes on top of the default stylesheet do the following:
+   1. Uncomment the lines of the `docker-compose.yml`.
+   2. Create a `styles/` directory.
+   3. Create your stylesheet inside the `styles/` directory: `exampleStyle.css`.
+   4. Add `exampleStyle` to the `ADDITIONAL_STYLES` environment variable.
+   5. **Note:** This doesn't overwrite the default styles, if you want to do that, create a volume that points to
+   `/home/bun/app/public/`. **Warning:** Unexpected things might happen if you overwrite the `public` folder.
+4. Run `docker compose up -d` 
+
+### Manually
+1. Clone the repository.
+2. Add a `database.json` file following the example database: [database/example.json5](database/example.json5).
+   * Note: This example may not be up-to-date, if that's the case, please open a PR or issue and I'll take care of it.
+   * Note: The schema is always available at [src/db.ts](src/db.ts).
+3. **(Optional)** If you want to add additional styles to make changes on top of the default stylesheet do the following:
+   1. Create your stylesheet inside the `public/additional/` directory: `exampleStyle.css`.
+   2. Add `exampleStyle` to the `ADDITIONAL_STYLES` environment variable.
+   3. **Note:** This doesn't overwrite the default styles, if you want to do that, overwrite the
+   [public/style.css](public/style.css) file.
+4. Run `bun start`.

docker-compose.yml

@@ -2,7 +2,9 @@ version: "3"
 
 services:
   status-page:
-    image: "git.sofiaritz.com/infrastructure/status-page:v1"
+    image: "status-page"
+    environment:
+      ADDITIONAL_STYLES: "example"
     volumes:
       - ./database:/home/bun/app/database:ro
     ports:

examples/docker-compose.yml

@@ -0,0 +1,14 @@
+version: "3"
+
+services:
+  status-page:
+    image: "git.sofiaritz.com/infrastructure/status-page:latest"
+    # environment:
+      # This contains the .css filename inside the ./styles folder. This is a comma-separated list
+      # ADDITIONAL_STYLES: "example"
+    volumes:
+      - ./database:/home/bun/app/database:ro
+      # Uncomment the following to enable additional styles inside the ./styles folder ^
+      # - ./styles:/home/bun/app/public/additional:ro
+    ports:
+      - "7000:7000"

package.json

@@ -5,7 +5,9 @@
   "scripts": {
     "start": "bun run src/index.ts",
     "watch": "bun --watch src/index.ts",
-    "docker:build": "docker build -t status-page ."
+    "docker:build": "docker build -t status-page .",
+    "docker:tag": "docker tag status-page git.sofiaritz.com/infrastructure/status-page",
+    "docker:push": "bun docker:build && bun docker:tag && docker push git.sofiaritz.com/infrastructure/status-page"
   },
   "devDependencies": {
     "bun-types": "latest"

src/consts.ts

@@ -1,2 +1,3 @@
 export const UPDATE_INTERVAL = Number(Bun.env["UPDATE_INTERVAL"]) || 1000
-export const LISTEN_PORT = Number(Bun.env["LISTEN_PORT"]) || 7000
+export const LISTEN_PORT = Number(Bun.env["LISTEN_PORT"]) || 7000
+export const ADDITIONAL_STYLES = Bun.env["ADDITIONAL_STYLES"]?.split(",") || []

src/index.ts

@@ -2,7 +2,7 @@ import {database} from "./db.ts";
 import Elysia from "elysia";
 import Handlebars from "handlebars";
 import {readFile} from "fs/promises";
-import {LISTEN_PORT} from "./consts.ts";
+import {ADDITIONAL_STYLES, LISTEN_PORT} from "./consts.ts";
 import {html} from "@elysiajs/html";
 import staticPlugin from "@elysiajs/static";
 import {hash} from "bun";
@@ -28,6 +28,13 @@ Handlebars.registerHelper("epochUTC", (time) => {
 	return new Handlebars.SafeString(`<time datetime="${(new Date(time)).toISOString()}">UTC: ${(new Date(time)).toLocaleString()}</time>`)
 })
 
+Handlebars.registerHelper("additionalStyles", () => {
+	return new Handlebars.SafeString(ADDITIONAL_STYLES
+		.map((style) => `/public/additional/${style}.css`)
+		.map((path) => `<link href="${path}" rel="stylesheet">`)
+		.join("\n"))
+})
+
 Handlebars.registerHelper("gravatar", (email) => {
 	let hasher = new Bun.CryptoHasher("sha256")
 	hasher.update(email.trim().toLowerCase())

templates/index.hbs

@@ -5,10 +5,14 @@
     <meta name="viewport"
           content="width=device-width, user-scalable=yes, initial-scale=1.0">
     <link href="/public/style.css" rel="stylesheet">
+    {{additionalStyles}}
     <title>{{metadata.title}}</title>
 </head>
 <body>
 <main>
+    <div>
+        <h1>{{metadata.title}}</h1>
+    </div>
     {{#if notices}}
         <div>
             <h2>Notices</h2>