--- 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 Kener 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 Your 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 `` tag in `src/app.html` file. Example add a png called `logo.png` file in `static/` and then ```html ... ... ``` --- ## 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 ``. 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 ``` --- ## 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 Kener 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" ```