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

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

<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

...
<link rel="icon" href="/logo.png" />
...

github

For incident kener uses github issues. Create an empty github repo and add them to site.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

To see how to create an issue click here

metaTags

Meta tags are nothing but html <meta>. You can use them for SEO purposes

metaTags:
    description: "Your description"
    keywords: "keyword1, keyword2"
    og:image: "https://example.com/og.png"

will become

<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

siteURL: https://kener.ing

Sitemaps urls will be https://kener.ing/sitemap.xml

hero

Use hero to add a banner to your kener page

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.

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.

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.

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.

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 (which is a fully GDPR-compliant, zero-tracking/no-logging CDN font service), or any other font.

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

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

barStyle: PARTIAL

barRoundness

You can set the roundness of the bar. It can be SHARP or ROUNDED. Default is ROUNDED

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.

summaryStyle: CURRENT

colors

You can set the colors of UP, DOWN, DEGRADED

colors:
    UP: "#4ead94"
    DOWN: "#ca3038"
    DEGRADED: "#e6ca61"