mirror of
https://github.com/rajnandan1/kener.git
synced 2026-02-12 11:48:42 -06:00
8370145f6c
Switching from Google Fonts to Bunny Fonts CDN. Bunny Fonts is an open-source, privacy-first web font platform. It is fully GDPR compliant (Google is not) and can act as a drop-in replacement for Google Fonts.
392 lines
9.7 KiB
Markdown
392 lines
9.7 KiB
Markdown
---
|
|
title: Customize Site - Site.yaml - Kener
|
|
description: Customize your Kener site using site.yaml
|
|
---
|
|
|
|
# Customize Site
|
|
|
|
There is a folder called `./config`. Inside which there is a `site.yaml` file. You can modify this file to have your own branding and do few other things.
|
|
|
|
## Sample site.yaml
|
|
|
|
```yaml
|
|
title: "Kener"
|
|
siteName: "Kener.ing"
|
|
logo: "/logo.svg"
|
|
favicon: "/logo96.png"
|
|
home: "/"
|
|
theme: dark
|
|
themeToggle: true
|
|
github:
|
|
owner: "rajnandan1"
|
|
repo: "kener"
|
|
incidentSince: 72
|
|
metaTags:
|
|
description: "Your description"
|
|
keywords: "keyword1, keyword2"
|
|
nav:
|
|
- name: "Documentation"
|
|
url: "/docs"
|
|
- name: "Github"
|
|
iconURL: "/github.svg"
|
|
url: "https://github.com/rajnandan1/kener"
|
|
siteURL: https://kener.ing
|
|
hero:
|
|
title: Kener is a Open-Source Status Page System
|
|
subtitle: Let your users know what's going on.
|
|
footerHTML: |
|
|
Made using
|
|
<a href="https://github.com/rajnandan1/kener" target="_blank" rel="noreferrer" class="font-medium underline underline-offset-4">
|
|
Kener
|
|
</a>
|
|
an open source status page system built with Svelte and TailwindCSS.
|
|
i18n:
|
|
defaultLocale: "en"
|
|
locales:
|
|
en: "English"
|
|
hi: "हिन्दी"
|
|
zh-CN: "中文"
|
|
ja: "日本語"
|
|
vi: "Tiếng Việt"
|
|
pattern: "squares"
|
|
font:
|
|
cssSrc: "https://fonts.bunny.net/css?family=lato:100,100i,300,300i,400,400i,700,700i,900,900i&display=swap"
|
|
family: '"Lato", sans-serif'
|
|
analytics:
|
|
- id: "G-QsFT"
|
|
type: "GA"
|
|
- id: "deasf0d350"
|
|
type: "AMPLITUDE"
|
|
- id: "FKOdsKener"
|
|
type: "MIXPANEL"
|
|
```
|
|
|
|
---
|
|
|
|
## title
|
|
|
|
This translates to
|
|
|
|
```html
|
|
<title>Your Title</title>
|
|
```
|
|
|
|
---
|
|
|
|
## siteName
|
|
|
|
This is the name that will be shown in the nav bar, top left corner of the page
|
|
|
|
## logo
|
|
|
|
URL of the logo that will be shown in the nav bar. You can also add your logo in the `static` folder. Use the path `/logo.svg` to refer to it if you have added `logo.svg` in the `static` folder. Otherwise, you can use any URL.
|
|
|
|
## favicon
|
|
|
|
URL of the favicon that will be shown in the browser tab. You can also add your favicon in the `static` folder. Use the path `/logo96.png` to refer to it if you have added `logo96.png` in the `static` folder. Otherwise, you can use any URL.
|
|
|
|
## home
|
|
|
|
This is the location where someone will be taken when they click on the site name in the nav bar
|
|
|
|
## theme
|
|
|
|
This is the default theme of the site that will be used when a user lands for the first time. It can be `light` or `dark` or `system` or `none`. Defaults to `system`. The user still gets the option to change the theme.
|
|
|
|
- setting it to `light` will always set the theme to light when page loads
|
|
- setting it to `dark` will always set the theme to dark when page loads
|
|
- setting it to `system` will set the theme based on the system preference
|
|
- setting it to `none` will set the theme to last selected theme by the user
|
|
|
|
## themeToggle
|
|
|
|
This is the option to show the theme toggle. It can be `true` or `false`. Defaults to `true`.
|
|
|
|
As of now there is no option to change the colors of the theme using `site.yaml`. If you still want to change the colors you can do so by modifying the `src/app.postcss` file.
|
|
|
|
## favicon
|
|
|
|
It can be set by modifying the `<head>` tag in `src/app.html` file.
|
|
Example add a png called `logo.png` file in `static/` and then
|
|
|
|
```html
|
|
...
|
|
<link rel="icon" href="/logo.png" />
|
|
...
|
|
```
|
|
|
|
---
|
|
|
|
## github
|
|
|
|
For incident kener uses github issues. Create an empty [github](https://github.com) repo and add them to `site.yaml`
|
|
|
|
```yaml
|
|
github:
|
|
apiURL: "https://api.github.com"
|
|
owner: "username"
|
|
repo: "repository"
|
|
incidentSince: 720
|
|
```
|
|
|
|
### apiURL
|
|
|
|
API URL of the github. Default is `https://api.github.com`. If you are using github enterprise then you can change it to your github enterprise api url.
|
|
|
|
### owner
|
|
|
|
Owner of the github repository. If the repository is `https://github.com/rajnandan1/kener` then the owner is `rajnandan1`
|
|
|
|
### repo
|
|
|
|
Repository name of the github repository. If the repository is `https://github.com/rajnandan1/kener` then the repo is `kener`
|
|
|
|
### incidentSince
|
|
|
|
`incidentSince` is in hours. It means if an issue is created before X hours then kener would not honor it. What it means is that kener would not show it active incident pages nor it will update the uptime. Default is 30\*24 hours = 720 hours.
|
|
|
|
To read how to set up github for kener [click here](/docs/gh-setup)
|
|
|
|
To see how to create an issue [click here](/docs/incident-management)
|
|
|
|
---
|
|
|
|
## metaTags
|
|
|
|
Meta tags are nothing but html `<meta>`. You can use them for SEO purposes
|
|
|
|
```yaml
|
|
metaTags:
|
|
description: "Your description"
|
|
keywords: "keyword1, keyword2"
|
|
og:image: "https://example.com/og.png"
|
|
```
|
|
|
|
will become
|
|
|
|
```html
|
|
<head>
|
|
<meta name="description" content="Your description" />
|
|
<meta name="keywords" content="keyword1, keyword2" />
|
|
<meta name="og:image" content="https://example.com/og.png" />
|
|
</head>
|
|
```
|
|
|
|
---
|
|
|
|
## siteURL
|
|
|
|
You can set this to generate SiteMaps
|
|
|
|
```yaml
|
|
siteURL: https://kener.ing
|
|
```
|
|
|
|
Sitemaps urls will be `https://kener.ing/sitemap.xml`
|
|
|
|
---
|
|
|
|
## hero
|
|
|
|
Use hero to add a banner to your kener page
|
|
|
|
```yaml
|
|
hero:
|
|
title: Kener is a Open-Source Status Page System
|
|
subtitle: Let your users know what's going on.
|
|
```
|
|
|
|
### title
|
|
|
|
Title of the hero section
|
|
|
|
### subtitle
|
|
|
|
Subtitle of the hero section
|
|
|
|
---
|
|
|
|
## nav
|
|
|
|
You can add more links to your navbar.
|
|
|
|
```yaml
|
|
nav:
|
|
- name: "Home"
|
|
url: "/home"
|
|
```
|
|
|
|
### name
|
|
|
|
Name of the link
|
|
|
|
### url
|
|
|
|
URL of the link
|
|
|
|
### iconURL
|
|
|
|
Icon of the link. You can add an icon in the `static` folder and refer to it using the path `/github.svg`
|
|
|
|
---
|
|
|
|
## categories
|
|
|
|
You can define categories for your monitors. Each category can have a description. The monitors can be grouped by categories.
|
|
`name=home` will be shown in the home page. Categories are shown in the order they are defined in the yaml file. A dropdown will appear in the nav bar to select the category.
|
|
|
|
```yaml
|
|
categories:
|
|
- name: API
|
|
description: "Kener provides a simple API for you to use to update your status page."
|
|
- name: home
|
|
description: "loroem ipsum lorem ipsum"
|
|
```
|
|
|
|
### name
|
|
|
|
Name of the category
|
|
|
|
### description
|
|
|
|
Description of the category
|
|
|
|
---
|
|
|
|
## footerHTML
|
|
|
|
You can add HTML to the footer. You can add links to your social media or anything else.
|
|
|
|
```yaml
|
|
footerHTML: |
|
|
Made using <a href="https://kener.ing" target="_blank" rel="noreferrer" class="font-medium underline underline-offset-4">Kener</a> an open source status page system built with Svelte and TailwindCSS.
|
|
```
|
|
|
|
---
|
|
|
|
## i18n
|
|
|
|
You can add translations to your site. By default it is set to `en`. Available translations are present in `locales/` folders in the root directory. You can add more translations by adding a new file in the `locales` folder.
|
|
|
|
### Enable
|
|
|
|
Once you have added a new translation file in the `locales` folder, you can enable it by adding the locale code in the `site.yaml` file.
|
|
|
|
Let us say you have added a `hi.json` file in the `locales` folder. You can enable it by adding the following to the `site.yaml` file.
|
|
|
|
```yaml
|
|
i18n:
|
|
defaultLocale: en
|
|
locales:
|
|
en: English
|
|
hi: हिन्दी
|
|
```
|
|
|
|
### defaultLocale
|
|
|
|
**_defaultLocale_**: The default locale to be used for a user when he or she visits for the first time. It is important to note that the default locale json file should be present in the locales folder.
|
|
|
|
### locales
|
|
|
|
**_locales_**: A list of locales that you want to enable. The key is the locale code and the value is the name of the language. The locale code should be the same as the json file name in the locales folder. `en` means `en.json` should be present in the locales folder.
|
|
|
|
Adding more than one locales will enable a dropdown in the navbar to select the language.
|
|
|
|
Selected languages are stored in cookies and will be used when the user visits the site again.
|
|
|
|
There is no auto detection of the language. The user has to manually select the language.
|
|
|
|
### Variables
|
|
|
|
There are few variables that you you should not change,
|
|
|
|
- %hours : This will be replaced by the hours
|
|
- %minutes : This will be replaced by the minutes
|
|
- %minute : This will be replaced by the minute
|
|
- %status : This will be replaced by the status
|
|
|
|
---
|
|
|
|
## pattern
|
|
|
|
You can set the background pattern of the site. It can be `squares`, `dots`, `none`
|
|
|
|
---
|
|
|
|
## font
|
|
|
|
You can set the font of the site. You can use google fonts, [bunny fonts](https://fonts.bunny.net/) (which is a fully GDPR-compliant, zero-tracking/no-logging CDN font service), or any other font.
|
|
|
|
```yaml
|
|
font:
|
|
cssSrc: "https://fonts.bunny.net/css?family=lato:100,100i,300,300i,400,400i,700,700i,900,900i&display=swap"
|
|
family: '"Lato", sans-serif'
|
|
```
|
|
|
|
### cssSrc
|
|
|
|
URL of the font css
|
|
|
|
### family
|
|
|
|
Font family
|
|
|
|
---
|
|
|
|
## analytics
|
|
|
|
You can add analytics to your site. You can add multiple analytics. Supported analytics are `GA`, `AMPLITUDE`, `MIXPANEL`
|
|
|
|
```yaml
|
|
analytics:
|
|
- id: "G-QsFT"
|
|
type: "GA"
|
|
- id: "deasf0d350"
|
|
type: "AMPLITUDE"
|
|
- id: "FKOdsKener"
|
|
type: "MIXPANEL"
|
|
```
|
|
|
|
## barStyle
|
|
|
|
Kener shows a bar for a day. By default if any downtime or degradation is there the bar will be red or yellow respectively.
|
|
|
|
If you want to only show a part of the bar as red or yellow then you can set the `barStyle` to `PARTIAL`. Default is `FULL`
|
|
|
|
```yaml
|
|
barStyle: PARTIAL
|
|
```
|
|
|
|
---
|
|
|
|
## barRoundness
|
|
|
|
You can set the roundness of the bar. It can be `SHARP` or `ROUNDED`. Default is `ROUNDED`
|
|
|
|
```yaml
|
|
barRoundness: ROUNDED
|
|
```
|
|
|
|
---
|
|
|
|
## summaryStyle
|
|
|
|
The summary of the monitor today is shown in the monitor page. By default it shows the the whole day summary. If you want to show the current status then you can set the `summaryStyle` to `CURRENT`. Default is `DAY`.
|
|
|
|
```yaml
|
|
summaryStyle: CURRENT
|
|
```
|
|
|
|
---
|
|
|
|
## colors
|
|
|
|
You can set the colors of UP, DOWN, DEGRADED
|
|
|
|
```yaml
|
|
colors:
|
|
UP: "#4ead94"
|
|
DOWN: "#ca3038"
|
|
DEGRADED: "#e6ca61"
|
|
```
|