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

This commit is contained in:
Sofía Aritz 2023-11-01 09:57:52 +01:00
parent c30269352d
commit 3b682d6179
Signed by: sofia
GPG key ID: 90B5116E3542B28F
8 changed files with 64 additions and 5 deletions

View file

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

View file

@ -1,3 +1,31 @@
# Status Page # Status Page
This is a simple way to create customizable status pages. 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`.

View file

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

View file

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

View file

@ -5,7 +5,9 @@
"scripts": { "scripts": {
"start": "bun run src/index.ts", "start": "bun run src/index.ts",
"watch": "bun --watch 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": { "devDependencies": {
"bun-types": "latest" "bun-types": "latest"

View file

@ -1,2 +1,3 @@
export const UPDATE_INTERVAL = Number(Bun.env["UPDATE_INTERVAL"]) || 1000 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(",") || []

View file

@ -2,7 +2,7 @@ import {database} from "./db.ts";
import Elysia from "elysia"; import Elysia from "elysia";
import Handlebars from "handlebars"; import Handlebars from "handlebars";
import {readFile} from "fs/promises"; 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 {html} from "@elysiajs/html";
import staticPlugin from "@elysiajs/static"; import staticPlugin from "@elysiajs/static";
import {hash} from "bun"; 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>`) 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) => { Handlebars.registerHelper("gravatar", (email) => {
let hasher = new Bun.CryptoHasher("sha256") let hasher = new Bun.CryptoHasher("sha256")
hasher.update(email.trim().toLowerCase()) hasher.update(email.trim().toLowerCase())

View file

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