Bluemedia/fancy-gatus
1
0
Fork 0
mirror of https://github.com/BluemediaDev/fancy-gatus.git synced 2025-07-01 09:22:41 +02:00
Code Issues Projects Releases Packages Wiki Activity

Use SvelteKit 5 and daisyUI 5

Browse source
This commit is contained in:
Oliver Traber 2025-06-14 16:34:37 +00:00
parent be983a0b4e
commit 3b15ec5ea3
Signed by: Bluemedia
GPG key ID: C0674B105057136C
45 changed files with 5215 additions and 9859 deletions
Download patch file Download diff file Expand all files Collapse all files

49
README.md
View file

@ -8,18 +8,19 @@ You can see it in action here: https://status.bluemedia.dev
## Configuration
The frontend tries to retrieve a configuration file named `config.json` from the webroot during page load. If the configuration is loaded successfully, it will be used to make advanced adjustments to the frontend. The possible options are listed below.
The frontend tries to retrieve a configuration file named `config.json` from the webroot during page load. If the configuration is loaded successfully, it will be used to adjust the frontend. The possible options are listed below.
| Parameter | Description | Default |
|:-------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:------------------------|
| :----------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------- |
| `title` | Title of the page. Both in the tab and next to the logo. | `Infrastructure Status` |
| `gatusBaseUrl` | Alternative base URL (without trailing slash) of the Gatus instance, if the API is not available relative to the frontend. | `none` |
| `gatusBaseUrl` | Alternative base URL of the Gatus instance, if the API is not available relative to the frontend. | `none` |
| `hiddenGroups` | Array containing names of groups that should be hidden. These groups are still visible in the API response! | `[]` |
| `hiddenEndpoints` | Array containing names of endpoints that should be hidden. These endpoints are still visible in the API response! | `[]` |
| `hiddenStatuses` | Array containing names of statuses that should be hidden. These are still visible in the API response! | `[]` |
| `groupOrder` | Array containing names of groups. The groups are sorted in the frontend according to the order in the array (different from alphabetical sorting by default). If groups are not included in the array, they will be added alphabetically sorted below the sorted groups. | `[]` |
| `defaultRefreshInterval` | Interval in seconds after which the API data is refreshed in the background by default. Can be changed by the user by selecting a value in the lower left corner of the page. Possible values: `10`, `30`, `60`, `120`, `300`, `600` | `60` |
| `notice` | Optional configuration for a notice on the page. It can be used to provide information about a current problem, for example. | `{}` |
| `notice.type` | Type of the notice. This determines the background color of the card. Possible values: `info`, `primary`, `warning`, `danger`, `""` (empty / white) | `""` |
| `defaultExpandGroups` | Boolean specifying if groups should be expanded by default. | `false` |
| `defaultRefreshInterval` | Interval in seconds after which the API data and config is refreshed in the background by default. Can be changed by the user by selecting a value in the lower left corner of the page. Possible values: `10`, `30`, `60`, `120`, `300`, `600` | `60` |
| `notice` | Optional configuration for a notice on the page. It can be used to provide further information about a current outage, for example. | `{}` |
| `notice.type` | Type of the notice. This determines the background color of the card. Possible values: `success`, `warning`, `error`, (not defined - uses the base color) | not defined |
| `notice.title` | Title of the notice card. | `""` |
| `notice.content` | Content text of the notice card. | `""` |
| `notice.createdAt` | Date and time the notice was created at. For example, use the format `yyyy-MM-dd hh:mm` | `""` |
@ -34,37 +35,47 @@ Make sure that the Gatus API endpoint `/api/v1/endpoints/statuses` is available
### Customizing the logo
If you want to use your own logo, you can simply replace the file in the `img` folder. The image should be square, have a minimum size of 250x250 pixels and preferably a transparent background.
If you want to use your own logo, you can simply replace the file in the `static/img/` folder. The image should be square, have a minimum size of 250x250 pixels and preferably a transparent background.
You can also easily replace the favicon. You can find various converters for the `ico` format online.
## Building Fancy Gatus
You can also build the project yourself instead of using one of the pre built releases. To do this, you need the following requirements:
- `NodeJS >= v14.16.0`
- `Yarn >= v1.22.17`
- `NodeJS >= v22`
- `NPM >= v10`
If you have the necessary requirements, you can use `yarn install` to install the dependencies and `yarn build` to run the build process. The finished data for your web server can be found in the `dist` folder.
If you have the necessary requirements, you can use `npm install` to install the dependencies and `npm run build` to run the build process. The finished data for your web server can be found in the `build` folder.
## Development
Fancy Gatus uses Vue.js 3 as its frontend framework. You can therefore use all common Vue.js commands:
Fancy Gatus uses SvelteKit 5 and daisyUI 5 for it's frontend. You can therefore use all common `npm` commands:
Compile with hot-reloading for development
Compiles and hot-reloads for development
```
yarn serve
npn run dev
```
Compiles and minifies for production
Compile and minify for production
```
yarn build
npm run build
```
Lints and fixes files
Format files using Prettier
```
yarn lint
npm run format
```
Lint and fix files
```
npm run lint
```
### Contribution Guidelines
- Use 2 spaces indent and camelCase