From 5bab9333641933e24784adfdb6bad5e12a07f9ed Mon Sep 17 00:00:00 2001 From: Raj Nandan Sharma Date: Sat, 4 May 2024 12:01:35 +0530 Subject: [PATCH] refactor: added prettier config --- .prettierignore | 22 + .prettierrc | 9 + README.md | 77 +- components.json | 24 +- config/monitors.example.yaml | 12 +- config/site.example.yaml | 67 +- docs.md | 503 +- locales/en.json | 110 +- locales/hi.json | 110 +- locales/ja.json | 110 +- locales/zh-CN.json | 110 +- package-lock.json | 8324 +++++++++-------- package.json | 146 +- postcss.config.cjs | 12 +- prod.js | 12 +- scripts/check.js | 73 +- scripts/constants.js | 1 - scripts/cron-minute.js | 532 +- scripts/github.js | 643 +- scripts/ninety.js | 225 +- scripts/sitemap.js | 29 +- scripts/startup.js | 517 +- scripts/testts.js | 8 +- scripts/tool.js | 200 +- src/app.html | 38 +- src/app.postcss | 104 +- src/kener.css | 87 +- src/lib/components/incident.svelte | 328 +- src/lib/components/monitor.svelte | 1034 +- src/lib/components/nav.svelte | 149 +- .../ui/accordion/accordion-item.svelte | 6 +- src/lib/components/ui/alert/alert.svelte | 6 +- src/lib/components/ui/badge/index.ts | 3 +- src/lib/components/ui/button/index.ts | 6 +- src/lib/components/ui/card/card.svelte | 5 +- .../dropdown-menu-checkbox-item.svelte | 2 +- .../dropdown-menu/dropdown-menu-item.svelte | 2 +- .../dropdown-menu-radio-item.svelte | 2 +- .../ui/hover-card/hover-card-content.svelte | 2 +- src/lib/components/ui/input/input.svelte | 2 +- .../components/ui/select/select-item.svelte | 2 +- .../ui/select/select-separator.svelte | 5 +- .../components/ui/skeleton/skeleton.svelte | 5 +- src/lib/helpers.js | 52 +- src/lib/i18n/client.js | 387 +- src/lib/i18n/server.js | 29 +- src/lib/server/page.js | 2 +- src/lib/server/webhook.js | 391 +- src/lib/utils.ts | 96 +- src/routes/+layout.server.js | 46 +- src/routes/+layout.svelte | 60 +- src/routes/+page.server.js | 61 +- src/routes/+page.svelte | 219 +- src/routes/api/incident/+server.js | 130 +- .../api/incident/[incidentNumber]/+server.js | 100 +- .../[incidentNumber]/comment/+server.js | 160 +- .../[incidentNumber]/status/+server.js | 128 +- src/routes/api/status/+server.js | 74 +- src/routes/api/today/+server.js | 48 +- src/routes/badge/[tag]/status/+server.js | 44 +- src/routes/badge/[tag]/uptime/+server.js | 43 +- .../category-[category]/+page.server.js | 38 +- src/routes/category-[category]/+page.svelte | 218 +- src/routes/docs/+page.server.js | 12 +- src/routes/docs/+page.svelte | 152 +- src/routes/embed-[tag]/+page.server.js | 40 +- src/routes/embed-[tag]/+page.svelte | 91 +- src/routes/embed-[tag]/js/+server.js | 12 +- src/routes/incident/[id]/+page.server.js | 34 +- src/routes/incident/[id]/+page.svelte | 152 +- src/routes/incident/[id]/comments/+server.js | 30 +- src/routes/monitor-[tag]/+page.server.js | 50 +- src/routes/monitor-[tag]/+page.svelte | 178 +- svelte.config.js | 14 +- tailwind.config.js | 120 +- vite.config.js | 9 +- 76 files changed, 8673 insertions(+), 8211 deletions(-) create mode 100644 .prettierignore create mode 100644 .prettierrc diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..a9ec1a1d --- /dev/null +++ b/.prettierignore @@ -0,0 +1,22 @@ +.DS_Store +node_modules +static/kener +build +config/monitors.yaml +config/site.yaml +/.svelte-kit +/package +.env +.env.* +!.env.example + +# Ignore files for PNPM, NPM and YARN +pnpm-lock.yaml +package-lock.json +yarn.lock +.okgit/ +config/static/* +!config/static/.kener +**/*.yaml +**/*.yml +.github/ \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..73cf9c69 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,9 @@ +{ + "useTabs": true, + "semi": true, + "tabWidth": 4, + "trailingComma": "none", + "printWidth": 100, + "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"], + "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] +} diff --git a/README.md b/README.md index 82bef5bc..bd03ce3b 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,6 @@ -

kener example illustration

-

GitHub Repo stars @@ -12,62 +10,66 @@ #### 👉 Visit a live server [here](https://kener.ing) -#### 👉 Read the documentation [here](https://kener.ing/docs) +#### 👉 Read the documentation [here](https://kener.ing/docs) # Kener - Status Page System + Kener: Open-source Node.js status page tool, designed to make service monitoring and incident handling a breeze. It offers a sleek and user-friendly interface that simplifies tracking service outages and improves how we communicate during incidents. And the best part? Kener integrates seamlessly with GitHub, making incident management a team effort—making it easier for us to track and fix issues together in a collaborative and friendly environment. It uses files to store the data. Other adapters are coming soon - ## Features **Monitoring and Tracking:** -- Real-time monitoring -- Polls HTTP endpoint or Push data to monitor using Rest APIs -- Handles Timezones for visitors -- Categorize Monitors into different Sections -- Cron-based scheduling for monitors. Minimum per minute -- Flexible monitor configuration using YAML. Define your own parsing for monitor being UP/DOWN/DEGRADED -- Construct complex API Polls - Chain, Secrets etc -- Supports a Default Status for Monitors. Example defaultStatus=DOWN if you dont hit API per minute with Status UP -- Supports base path for hosting in k8s -- Pre-built docker image for easy deployment + +- Real-time monitoring +- Polls HTTP endpoint or Push data to monitor using Rest APIs +- Handles Timezones for visitors +- Categorize Monitors into different Sections +- Cron-based scheduling for monitors. Minimum per minute +- Flexible monitor configuration using YAML. Define your own parsing for monitor being UP/DOWN/DEGRADED +- Construct complex API Polls - Chain, Secrets etc +- Supports a Default Status for Monitors. Example defaultStatus=DOWN if you dont hit API per minute with Status UP +- Supports base path for hosting in k8s +- Pre-built docker image for easy deployment **Customization and Branding:** -- Customizable status page using yaml or code -- Badge generation for status and uptime of Monitors -- Support for custom domains -- Embed Monitor as an iframe or widget -- Light + Dark Theme -- Internationalization support + +- Customizable status page using yaml or code +- Badge generation for status and uptime of Monitors +- Support for custom domains +- Embed Monitor as an iframe or widget +- Light + Dark Theme +- Internationalization support **Incident Management:** -- Create Incidents using Github Issues - Rich Text -- Or use APIs to create Incidents -**User Experience and Design:** -- 100% Accessibility Score -- Easy installation and setup -- User-friendly interface -- Responsive design for various devices -- Auto SEO and Social Media ready +- Create Incidents using Github Issues - Rich Text +- Or use APIs to create Incidents +**User Experience and Design:** +- 100% Accessibility Score +- Easy installation and setup +- User-friendly interface +- Responsive design for various devices +- Auto SEO and Social Media ready ## Technologies used -- [SvelteKit](https://kit.svelte.dev/) -- [shadcn-svelte](https://www.shadcn-svelte.com/) -## Inspired from -- [Upptime](https://upptime.js.org/) +- [SvelteKit](https://kit.svelte.dev/) +- [shadcn-svelte](https://www.shadcn-svelte.com/) + +## Inspired from + +- [Upptime](https://upptime.js.org/) ## Roadmap -- [x] Add api to create incident -- [x] Add docker file -- [ ] Add notification -- [ ] Add Mysql adapter +- [x] Add api to create incident +- [x] Add docker file +- [ ] Add notification +- [ ] Add Mysql adapter ## Screenshots @@ -81,7 +83,6 @@ It uses files to store the data. Other adapters are coming soon ![image](static/marken_tl.png) ![image](static/marken_theme.png) - ## Support profile for Raj Nandan Sharma on Stack Exchange, a network of free, community-driven Q&A sites @@ -89,5 +90,3 @@ It uses files to store the data. Other adapters are coming soon - - diff --git a/components.json b/components.json index 16aece3f..55ea69a7 100644 --- a/components.json +++ b/components.json @@ -1,13 +1,13 @@ { - "$schema": "https://shadcn-svelte.com/schema.json", - "style": "default", - "tailwind": { - "config": "tailwind.config.js", - "css": "src/app.postcss", - "baseColor": "slate" - }, - "aliases": { - "components": "$lib/components", - "utils": "$lib/utils" - } -} \ No newline at end of file + "$schema": "https://shadcn-svelte.com/schema.json", + "style": "default", + "tailwind": { + "config": "tailwind.config.js", + "css": "src/app.postcss", + "baseColor": "slate" + }, + "aliases": { + "components": "$lib/components", + "utils": "$lib/utils" + } +} diff --git a/config/monitors.example.yaml b/config/monitors.example.yaml index 4d7651b6..219c783d 100644 --- a/config/monitors.example.yaml +++ b/config/monitors.example.yaml @@ -3,14 +3,14 @@ tag: "google-search" image: "/google.png" api: - method: GET - url: https://www.google.com/webhp + method: GET + url: https://www.google.com/webhp - name: Svelte Website description: Cybernetically enhanced web apps tag: "svelte-website" api: - method: GET - url: https://svelte.dev/ + method: GET + url: https://svelte.dev/ image: "/svelte.svg" - name: Earth description: Our blue planet @@ -22,5 +22,5 @@ tag: "frogment" image: "/frogment.png" api: - method: GET - url: https://www.frogment.com \ No newline at end of file + method: GET + url: https://www.frogment.com diff --git a/config/site.example.yaml b/config/site.example.yaml index 32bd468c..d1ea9501 100644 --- a/config/site.example.yaml +++ b/config/site.example.yaml @@ -2,42 +2,41 @@ title: "Kener" home: "/" logo: "/logo.png" github: - owner: "rajnandan1" - repo: "kener" - incidentSince: 48 + owner: "rajnandan1" + repo: "kener" + incidentSince: 48 metaTags: - description: "Kener: Open-source modern looking Node.js status page tool, designed to make service monitoring and incident handling a breeze. It offers a sleek and user-friendly interface that simplifies tracking service outages and improves how we communicate during incidents. And the best part? Kener integrates seamlessly with GitHub, making incident management a team effort—making it easier for us to track and fix issues together in a collaborative and friendly environment." - keywords: "Node.js status page, Incident management tool, Service monitoring, Service outage tracking, Real-time status updates, GitHub integration for incidents, Open-source status page, Node.js monitoring application, Service reliability, User-friendly incident management, Collaborative incident resolution, Seamless outage communication, Service disruption tracker, Real-time incident alerts, Node.js status reporting" - og:description: "Kener: Open-source Node.js status page tool, designed to make service monitoring and incident handling a breeze. It offers a sleek and user-friendly interface that simplifies tracking service outages and improves how we communicate during incidents. And the best part? Kener integrates seamlessly with GitHub, making incident management a team effort—making it easier for us to track and fix issues together in a collaborative and friendly environment." - og:image: "https://kener.ing/ss.png" - og:title: "Kener - Open-Source and Modern looking Node.js Status Page for Effortless Incident Management" - og:type: "website" - og:site_name: "Kener" - twitter:card: "summary_large_image" - twitter:site: "@_rajnandan_" - twitter:creator: "@_rajnandan_" - twitter:image: "https://kener.ing/ss.png" - twitter:title: "Kener: Open-Source and Modern looking Node.js Status Page for Effortless Incident Management" - twitter:description: "Kener: Open-source Node.js status page tool, designed to make service monitoring and incident handling a breeze. It offers a sleek and user-friendly interface that simplifies tracking service outages and improves how we communicate during incidents. And the best part? Kener integrates seamlessly with GitHub, making incident management a team effort—making it easier for us to track and fix issues together in a collaborative and friendly environment." + description: "Kener: Open-source modern looking Node.js status page tool, designed to make service monitoring and incident handling a breeze. It offers a sleek and user-friendly interface that simplifies tracking service outages and improves how we communicate during incidents. And the best part? Kener integrates seamlessly with GitHub, making incident management a team effort—making it easier for us to track and fix issues together in a collaborative and friendly environment." + keywords: "Node.js status page, Incident management tool, Service monitoring, Service outage tracking, Real-time status updates, GitHub integration for incidents, Open-source status page, Node.js monitoring application, Service reliability, User-friendly incident management, Collaborative incident resolution, Seamless outage communication, Service disruption tracker, Real-time incident alerts, Node.js status reporting" + og:description: "Kener: Open-source Node.js status page tool, designed to make service monitoring and incident handling a breeze. It offers a sleek and user-friendly interface that simplifies tracking service outages and improves how we communicate during incidents. And the best part? Kener integrates seamlessly with GitHub, making incident management a team effort—making it easier for us to track and fix issues together in a collaborative and friendly environment." + og:image: "https://kener.ing/ss.png" + og:title: "Kener - Open-Source and Modern looking Node.js Status Page for Effortless Incident Management" + og:type: "website" + og:site_name: "Kener" + twitter:card: "summary_large_image" + twitter:site: "@_rajnandan_" + twitter:creator: "@_rajnandan_" + twitter:image: "https://kener.ing/ss.png" + twitter:title: "Kener: Open-Source and Modern looking Node.js Status Page for Effortless Incident Management" + twitter:description: "Kener: Open-source Node.js status page tool, designed to make service monitoring and incident handling a breeze. It offers a sleek and user-friendly interface that simplifies tracking service outages and improves how we communicate during incidents. And the best part? Kener integrates seamlessly with GitHub, making incident management a team effort—making it easier for us to track and fix issues together in a collaborative and friendly environment." nav: - - name: "Documentation" - url: "/docs" - - name: "Github" - url: "https://github.com/rajnandan1/kener" + - name: "Documentation" + url: "/docs" + - name: "Github" + url: "https://github.com/rajnandan1/kener" hero: - title: Kener is a Open-Source Status Page System - subtitle: Let your users know what's going on. + 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. + Made using + + Kener + + an open source status page system built with Svelte and TailwindCSS. i18n: - defaultLocale: "en" - locales: - en: "English" - hi: "हिन्दी" - zh-CN: "中文" - ja: "日本語" - \ No newline at end of file + defaultLocale: "en" + locales: + en: "English" + hi: "हिन्दी" + zh-CN: "中文" + ja: "日本語" diff --git a/docs.md b/docs.md index 8e1d188b..9c5286b2 100644 --- a/docs.md +++ b/docs.md @@ -1,23 +1,24 @@ - - # Quick Start Kener has been tested from Node18. It should work with Node 16 and above. It uses [SvelteKit](https://kit.svelte.dev/) and [shadcn-svelte](https://www.shadcn-svelte.com/) ## Clone the repository + ```shell git clone https://github.com/rajnandan1/kener.git cd kener ``` ## Install Dependencies + ```shell npm install ``` ## Configs -- Rename `config/site.example.yaml` -> `config/site.yaml` -- Rename `config/monitors.example.yaml` -> `config/monitors.yaml` + +- Rename `config/site.example.yaml` -> `config/site.yaml` +- Rename `config/monitors.example.yaml` -> `config/monitors.yaml` ```shell mv config/site.example.yaml config/site.yaml @@ -26,19 +27,21 @@ mkdir -p ./static/kener ``` ## Start Kener Dev + ```bash npm run kener:dev ``` + Kener Development Server would be running at PORT 5173. Go to [http://localhost:5173](http://localhost:5173) ![alt text](ss.png "SS") ## Concepts -Kener has two parts. One is a svelte app which you can find in the src folder and there are code for monitors which you would find in scripts folder. If you want to update the frontend application then you should modify the src folder. - +Kener has two parts. One is a svelte app which you can find in the src folder and there are code for monitors which you would find in scripts folder. If you want to update the frontend application then you should modify the src folder. ## Folder structure + ```shell ├── src (svelte frontend files) ├── static (things put here can be referenced directly example static/logo.png -> /logo.png) @@ -46,36 +49,55 @@ Kener has two parts. One is a svelte app which you can find in the src folder an ├── prod.js(starts an express server, runs the scripts and serves the svelte site) ├── dev.js (starts the dev server) ``` + ## Environment Variable + #### PUBLIC_KENER_FOLDER (Required) + ```shell export PUBLIC_KENER_FOLDER=/path/to/a/directory ``` -#### PORT + +#### PORT + Defaults to 3000 if not specified + ```shell export PORT=4242 ``` + #### GH_TOKEN + A github token to read issues and create labels + ```shell export GH_TOKEN=your-github-token ``` + #### API_TOKEN + To talk to kener apis you will need to set up a token. It uses Bearer Authorization + ```shell export API_TOKEN=sometoken ``` + #### API_IP + While using API you can set this variable to accept request from a specific IP + ```shell export API_IP=127.0.0.1 ``` + #### MONITOR_YAML_PATH + ```shell export MONITOR_YAML_PATH=/your/path/monitors.yaml ``` + #### SITE_YAML_PATH + ```shell export SITE_YAML_PATH=/your/path/site.yaml ``` @@ -83,9 +105,10 @@ export SITE_YAML_PATH=/your/path/site.yaml #### KENER_BASE_PATH By default kener runs on `/` but you can change it to `/status` or any other path. -- Important: The base path should not have a trailing slash and should start with `/` -- Important: This env variable should be present during both build and run time -- If you are using docker you will have to do your own build and set this env variable during `docker build` + +- Important: The base path should not have a trailing slash and should start with `/` +- Important: This env variable should be present during both build and run time +- If you are using docker you will have to do your own build and set this env variable during `docker build` ```shell export KENER_BASE_PATH=/status @@ -103,22 +126,25 @@ npm run serve ``` It also needs 2 yaml files to work -- site.yaml: Contains information about the site -- monitors.yaml: Contains your monitors and their related specifications + +- site.yaml: Contains information about the site +- monitors.yaml: Contains your monitors and their related specifications By default these are present in `config/`. However you can use different location either passing them as argument or having the path as enviorment variable ### Add as Enviroment variables + ```shell export MONITOR_YAML_PATH=/your/path/monitors.yaml export SITE_YAML_PATH=/your/path/site.yaml ``` + ### Add as argument to prod.js + ```shell npm run serve -- --monitors /your/path/monitors.yaml --site /your/path/site.yaml ``` - ## Install using Docker [Dockerhub](https://hub.docker.com/r/rajnandan1/kener) @@ -147,15 +173,15 @@ Or use **Docker Compose** with the example [docker-compose.yaml](https://raw.git If you are -* running on a **linux host** (ie unraid) and -* **not** using [rootless containers with Podman](https://developers.redhat.com/blog/2020/09/25/rootless-containers-with-podman-the-basics#why_podman_) +- running on a **linux host** (ie unraid) and +- **not** using [rootless containers with Podman](https://developers.redhat.com/blog/2020/09/25/rootless-containers-with-podman-the-basics#why_podman_) then you must set the [environmental variables **PUID** and **PGID**.](https://docs.linuxserver.io/general/understanding-puid-and-pgid) in the container in order for it to generate files/folders your normal user can interact it. Run these commands from your terminal -* `id -u` -- prints UID for **PUID** -* `id -g` -- prints GID for **PGID** +- `id -u` -- prints UID for **PUID** +- `id -g` -- prints GID for **PGID** Then add to your docker command like so: @@ -166,39 +192,49 @@ docker run -d ... -e "PUID=1000" -e "PGID=1000" ... rajnandan1/kener or substitute them in [docker-compose.yml](https://raw.githubusercontent.com/rajnandan1/kener/main/docker-compose.yml) ## Github Setup + Kener uses github for incident management. Issues created in github using certain tags go to kener as incidents. + ### Step 1: Github Repository and Add to site.yaml + Create a Github Repository. It can be either public or private. After you have created a repository open `site.yaml` and add them like this ```yaml github: - owner: "username" - repo: "repository" + owner: "username" + repo: "repository" ``` + ### Step 2: Create Github Token + You can create either a classic token or personal access token + #### Creating Personal Access Token -- Go to [Personal Access Token](https://github.com/settings/personal-access-tokens/new) -- Token Name: kener -- Expiration: Use custom to select a calendar date -- Description: My Kener -- Repository access: Check Only Selected Repositories. Select your github repository -- Repository Permission: Select Issues Read Write -- Click on generate token + +- Go to [Personal Access Token](https://github.com/settings/personal-access-tokens/new) +- Token Name: kener +- Expiration: Use custom to select a calendar date +- Description: My Kener +- Repository access: Check Only Selected Repositories. Select your github repository +- Repository Permission: Select Issues Read Write +- Click on generate token ### Creating Classic Token -- Go to [Tokens](https://github.com/settings/tokens/new) -- Note: kener -- Expiration: No Expiration -- Scopes: write:packages -- Click on generate Token + +- Go to [Tokens](https://github.com/settings/tokens/new) +- Note: kener +- Expiration: No Expiration +- Scopes: write:packages +- Click on generate Token Set the token as an environment variable ```shell export GH_TOKEN=github_pat_11AD3ZA3Y0 ``` + --- + # Modify 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. @@ -208,18 +244,18 @@ title: "Kener" home: "/" logo: "/logo.svg" github: - owner: "rajnandan1" - repo: "kener" - incidentSince: 72 + owner: "rajnandan1" + repo: "kener" + incidentSince: 72 metaTags: - description: "Your description" - keywords: "keyword1, keyword2" + description: "Your description" + keywords: "keyword1, keyword2" nav: - - name: "Documentation" - url: "/docs" + - name: "Documentation" + url: "/docs" hero: - title: Kener is a Open-Source Status Page System - subtitle: Let your users know what's going on. + title: Kener is a Open-Source Status Page System + subtitle: Let your users know what's going on. ``` ## title @@ -231,22 +267,29 @@ This translates to ``` ## theme + It can be set by modifying the `` class in `src/app.html` file + ### Dark Theme + ```html - - + + ``` + ### Light theme + ```html - - + + ``` + Can be `light` or `dark`. Defaults to `light` ## home Location when someone clicks on the your brand in the top nav bar + ```yaml ... home: "https://www.example.com @@ -254,7 +297,9 @@ home: "https://www.example.com ``` ## logo + URL of the logo that will be shown in the nav bar. You can also add your logo in the `static` folder + ```yaml ... logo: "https://www.example.com/logo.png @@ -262,46 +307,54 @@ logo: "https://www.example.com/logo.png ``` ## favicon -It can be set by modifying the `` tag in `src/app.html` file. + +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 comments. Create an empty [github](https://github.com) repo and add them to `site.yaml` + ```yaml github: - owner: "username" - repo: "repository" - incidentSince: 72 + owner: "username" + repo: "repository" + incidentSince: 72 ``` + `incidentSince` is in hours. It means if an issue is created before 72 hours then kener would not honor it. Default is 24 + ## 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" + 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 ``` @@ -309,55 +362,58 @@ 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: Kener is a Open-Source Status Page System + subtitle: Let your users know what's going on. ``` ![alt text](ss2.png "SS") ## nav + You can add more links to your navbar. ```yaml nav: - - name: "Home" - url: "/home" + - name: "Home" + url: "/home" ``` ## 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. +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. ### How to enable a translation ```yaml i18n: - defaultLocale: en - locales: - en: English - hi: Hindi + defaultLocale: en + locales: + en: English + hi: Hindi ``` -- defaultLocale: The default locale to be used. This will be the language used when a user visits the site for the first time. It is important to note that the default locale json file should be present in the locales folder. -- 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. +- defaultLocale: The default locale to be used. This will be the language used when a user visits the site for the first time. It is important to note that the default locale json file should be present in the locales folder. +- 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. ## categories -You can define categories for your monitors. Each category can have a description. The monitors can be grouped by 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: API + description: "Kener provides a simple API for you to use to update your status page." + - name: home + description: "loroem ipsum lorem ipsum" ``` ## Base Path @@ -368,22 +424,28 @@ It should be present during both build and run time. If you are using docker you Please also adjust files in static folder by prefixing them with the base path. For example if you set `KENER_BASE_PATH=/status` then the logo should be `/status/logo.png` - ## Custom Scripts + You can include any script in the `app.html` file like google analytics etc ## Custom CSS + You can add custom css in `static/kener.css` --- + # Add Monitors + Inside `config/` folder there is a file called `monitors.yaml`. We will be adding our monitors here. Please note that your yaml must be valid. It is an array. + ## Understanding monitors -Each monitor runs at 1 minute interval by default. Monitor runs in below priorty order. -- defaultStatus Data -- API call Data overrides above data(if specified) -- Pushed Status Data overrides API Data using [Kener Update Statue API](https://kener.ing/docs#h2update-status) -- Manual Incident Data overrides Pushed Status Data + +Each monitor runs at 1 minute interval by default. Monitor runs in below priorty order. + +- defaultStatus Data +- API call Data overrides above data(if specified) +- Pushed Status Data overrides API Data using [Kener Update Statue API](https://kener.ing/docs#h2update-status) +- Manual Incident Data overrides Pushed Status Data Sample @@ -398,7 +460,7 @@ Sample timeout: 4000 method: POST url: https://www.google.com/webhp - headers: + headers: Content-Type: application/json body: '{"order_amount":1,"order_currency":"INR"}' eval: | @@ -411,56 +473,60 @@ Sample }) ``` -| name | Required | This will be shown in the UI to your users. Keep it short and unique | -| ------------- | ----------------- | --------------------------------------------------------------------------------------------------------- | -| name | Required + Unique | This will be shown in the UI to your users. Keep it short and unique | -| description | Optional | This will be show below your name | -| tag | Required + Unique | This is used to tag incidents created in Github using comments | -| image | Optional | To show a logo before the name | -| cron | Optional | Use cron expression to specify the interval to run the monitors. Defaults to `* * * * *` i.e every minute | -| api.timeout | Optional | timeout for the api in milliseconds. Default is 10000(10 secs) | -| api.method | Optional | HTTP Method | -| api.url | Optional | HTTP URL | -| api.headers | Optional | HTTP headers | -| api.body | Optional | HTTP Body as string | -| api.eval | Optional | Evaluator written in JS, to parse HTTP response and calculate uptime and latency | -| defaultStatus | Optional | If no API is given this will be the default status. can be UP/DOWN/DEGRADED | -| hidden | Optional | If set to `true` will not show the monitor in the UI | -| category | Optional | Use this to group your monitors. Make sure you have defined category in `site.yaml` and use the `name` attribute here | -| dayDegradedMinimumCount | Optional | Default is 1. It means minimum this number of count for the day to be classified as DEGRADED(Yellow Bar) in 90 day view. Has to be `number` greater than 0 | -| dayDownMinimumCount | Optional | Default is 1. It means minimum this number of count for the day to be classified as DOWN(Red Bar) in 90 day view. Has to be `number` greater than 0 | -| includeDegradedInDowntime | Optional | By deafault uptime percentage is calculated as (UP+DEGRADED/UP+DEGRADED+DOWN). Setting it as `true` will change the calculation to (UP/UP+DEGRADED+DOWN) | +| name | Required | This will be shown in the UI to your users. Keep it short and unique | +| ------------------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | +| name | Required + Unique | This will be shown in the UI to your users. Keep it short and unique | +| description | Optional | This will be show below your name | +| tag | Required + Unique | This is used to tag incidents created in Github using comments | +| image | Optional | To show a logo before the name | +| cron | Optional | Use cron expression to specify the interval to run the monitors. Defaults to `* * * * *` i.e every minute | +| api.timeout | Optional | timeout for the api in milliseconds. Default is 10000(10 secs) | +| api.method | Optional | HTTP Method | +| api.url | Optional | HTTP URL | +| api.headers | Optional | HTTP headers | +| api.body | Optional | HTTP Body as string | +| api.eval | Optional | Evaluator written in JS, to parse HTTP response and calculate uptime and latency | +| defaultStatus | Optional | If no API is given this will be the default status. can be UP/DOWN/DEGRADED | +| hidden | Optional | If set to `true` will not show the monitor in the UI | +| category | Optional | Use this to group your monitors. Make sure you have defined category in `site.yaml` and use the `name` attribute here | +| dayDegradedMinimumCount | Optional | Default is 1. It means minimum this number of count for the day to be classified as DEGRADED(Yellow Bar) in 90 day view. Has to be `number` greater than 0 | +| dayDownMinimumCount | Optional | Default is 1. It means minimum this number of count for the day to be classified as DOWN(Red Bar) in 90 day view. Has to be `number` greater than 0 | +| includeDegradedInDowntime | Optional | By deafault uptime percentage is calculated as (UP+DEGRADED/UP+DEGRADED+DOWN). Setting it as `true` will change the calculation to (UP/UP+DEGRADED+DOWN) | ## cron Kener fills data every minute in UTC so if you give an expression that is not per minute, kener will backfill data using the latest status. -Example for `cron: "*/15 * * * *"` -- First run at "2023-12-02T18:00:00.000Z" - Status DOWN -- Second run at "2023-12-02T18:15:00.000Z" - Status UP +Example for `cron: "*/15 * * * *"` + +- First run at "2023-12-02T18:00:00.000Z" - Status DOWN +- Second run at "2023-12-02T18:15:00.000Z" - Status UP Kener will fill data from 18:01:00 to 18:14:00 as UP ## eval -This is a anonymous JS function, by default it looks like this. -> **_NOTE:_** The eval function should always return a json object. The json object can have only status(UP/DOWN/DEGRADED) and lantecy(number) -`{status:"DEGRADED", latency: 200}`. +This is a anonymous JS function, by default it looks like this. + +> **_NOTE:_** The eval function should always return a json object. The json object can have only status(UP/DOWN/DEGRADED) and lantecy(number) +> `{status:"DEGRADED", latency: 200}`. + ```js (function (statusCode, responseTime, responseDataBase64) { let statusCodeShort = Math.floor(statusCode/100); let status = 'DOWN' if(statusCodeShort >=2 && statusCodeShort <= 3) { status = 'UP', - } + } return { status: 'DOWN', latency: responseTime, } }) ``` -- `statusCode` **REQUIRED** is a number. It is the HTTP status code -- `responseTime` **REQUIRED**is a number. It is the latency in milliseconds -- `responseDataBase64` **REQUIRED** is a string. It is the base64 encoded response data. To use it you will have to decode it + +- `statusCode` **REQUIRED** is a number. It is the HTTP status code +- `responseTime` **REQUIRED**is a number. It is the latency in milliseconds +- `responseDataBase64` **REQUIRED** is a string. It is the base64 encoded response data. To use it you will have to decode it ```js let decodedResp = atob(responseDataBase64); @@ -468,7 +534,9 @@ let decodedResp = atob(responseDataBase64); ``` --- + # Monitor Examples + Here are some exhaustive examples for monitors ## A Simple GET Monitor @@ -495,7 +563,9 @@ Use tailwind classes to style your description ``` ## A GET Monitor with image + google.png is in the static folder + ```yaml - name: Google Search tag: "google-search" @@ -518,6 +588,7 @@ google.png is in the static folder ``` ## POST Monitor With Body + ```yaml - name: Google Search description: Google Search @@ -532,9 +603,11 @@ google.png is in the static folder ## Secrets in Header -You can set ENV variables in your machine and use them in your monitors. Example below has `GH_TOKEN` as an environment variable. It uses process.env.GH_TOKEN. +You can set ENV variables in your machine and use them in your monitors. Example below has `GH_TOKEN` as an environment variable. It uses process.env.GH_TOKEN. `export GH_TOKEN=some.token.for.github` -> **_NOTE:_** DO NOT forget the `$` sign in your monitor secret, otherwise it will not be picked up. + +> **_NOTE:_** DO NOT forget the `$` sign in your monitor secret, otherwise it will not be picked up. + ```yaml - name: Github Issues description: Github Issues Fetch @@ -549,6 +622,7 @@ You can set ENV variables in your machine and use them in your monitors. Example ## Secrets in Body Assuming `ORDER_ID` is present in env + ```yaml - name: Github Issues description: Github Issues Fetch @@ -558,7 +632,7 @@ Assuming `ORDER_ID` is present in env url: https://api.github.com/repos/rajnandan1/kener/issues headers: Content-Type: application/json - body: '{"order_amount":22222.1,"order_currency":"INR", "order_id": "$ORDER_ID"}' + body: '{"order_amount":22222.1,"order_currency":"INR", "order_id": "$ORDER_ID"}' ``` ## Eval Body @@ -585,6 +659,7 @@ Read more about [eval](https://kener.ing/docs#h2eval-body) } }) ``` + ## With defaultStatus UP Each minute it will set the status as UP @@ -608,31 +683,41 @@ Add this monitor to the API category instead of the default home category ``` --- + # Incident Management + Kener uses Github to power incident management using labels + ## Labels + Kener auto creates labels for your monitors using the `tag` parameter -- `incident`: If an issue is marked as incident it will show up in kener home page -- `incident-down`: If an issue is marked as incident-down and incident kener would make that monitor down -- `incident-degraded`: If an issue is marked as incident-degraded and incident then kener would make the monitor degraded -- `resolved`: Use this tag to mark the incident has RESOLVED -- `identified`: Use this tag to show that the root cause of the incident has been identified + +- `incident`: If an issue is marked as incident it will show up in kener home page +- `incident-down`: If an issue is marked as incident-down and incident kener would make that monitor down +- `incident-degraded`: If an issue is marked as incident-degraded and incident then kener would make the monitor degraded +- `resolved`: Use this tag to mark the incident has RESOLVED +- `identified`: Use this tag to show that the root cause of the incident has been identified ## Creating your first incident -- Go to your github repo of kener -- Go to issues -- Create an issue. Give it a title -- In the body add [start_datetime:1702651340] and [end_datetime:1702651140] and add some description. Time is UTC -- Add `incident`, `incident-down` and the monitor tag. This will make the monitor down for 4 minutes + +- Go to your github repo of kener +- Go to issues +- Create an issue. Give it a title +- In the body add [start_datetime:1702651340] and [end_datetime:1702651140] and add some description. Time is UTC +- Add `incident`, `incident-down` and the monitor tag. This will make the monitor down for 4 minutes Here is a [sample incident](https://github.com/rajnandan1/kener/issues/15) for your reference. --- + # API + Kener also gives APIs to push data and create incident. Before you use kener apis you will have to set an authorization token called `API_TOKEN`. This also has to be set as an environment variable. + ```shell export API_TOKEN=some-token-set-by-you ``` + Additonally you can set IP whitelisting by setting another environment token called `API_IP` ```shell @@ -640,8 +725,11 @@ export API_IP=127.0.0.1 ``` ## Update Status -The update status API can be used to manually update the state of a monitor from a remote server. + +The update status API can be used to manually update the state of a monitor from a remote server. + ### Request Body + | Parameter | Description | | ------------------ | ------------------------------------------------------------------------------------ | | status | `Required` Can be only UP/DOWN/DEGRADED | @@ -661,7 +749,9 @@ curl --request POST \ "tag": "google-search" }' ``` + ### Response + ```json { "status": 200, @@ -673,17 +763,16 @@ This will update the status of the monitor with tag `google-search` to DOWN at U ## Get Status -Use this API to get the status of a monitor. +Use this API to get the status of a monitor. ### Request Replace `google-search` with your monitor tag in query param - ```shell curl --request GET \ --url 'http://your-kener.host/api/status?tag=google-search' \ - --header 'Authorization: Bearer some-token-set-by-you' + --header 'Authorization: Bearer some-token-set-by-you' ``` ### Response @@ -696,22 +785,23 @@ curl --request GET \ } ``` - ## Create an Incident + Can be use to create an incident from a remote server ### Request Body -| Parameter | Description | -| ------------------ | ------------------------------------------------------------------------------------ | -| startDatetime | `Optional` When did the incident start in UTC second | -| endDatetime | `Optional` When did the incident end in UTC seconds | -| title | `Required` Title of the incident | -| body | `Optional` Body of the incident | -| tags | `Required` Array of String, Monitor Tags of the incident | -| impact | `Optional` Can be only DOWN/DEGRADED | -| isMaintenance | `Optional` Boolean if incident is a maintenance | -| isIdentified | `Optional` Incident identified | -| isResolved | `Optional` Incident resolved | + +| Parameter | Description | +| ------------- | -------------------------------------------------------- | +| startDatetime | `Optional` When did the incident start in UTC second | +| endDatetime | `Optional` When did the incident end in UTC seconds | +| title | `Required` Title of the incident | +| body | `Optional` Body of the incident | +| tags | `Required` Array of String, Monitor Tags of the incident | +| impact | `Optional` Can be only DOWN/DEGRADED | +| isMaintenance | `Optional` Boolean if incident is a maintenance | +| isIdentified | `Optional` Incident identified | +| isResolved | `Optional` Incident resolved | ```shell curl --request POST \ @@ -732,6 +822,7 @@ curl --request POST \ ``` ### Response + ```json { "createdAt": 1703940450, @@ -748,25 +839,28 @@ curl --request POST \ "isResolved": false } ``` + ## Update an Incident + Can be use to update an incident from a remote server. It will clear values if not passed ### Request Param -- `incidentNumber`: Number of the incident +- `incidentNumber`: Number of the incident ### Request Body -| Parameter | Description | -| ------------------ | ------------------------------------------------------------------------------------ | -| startDatetime | `Optional` When did the incident start in UTC second | -| endDatetime | `Optional` When did the incident end in UTC seconds | -| title | `Required` Title of the incident | -| body | `Optional` Body of the incident | -| tags | `Required` Array of String, Monitor Tags of the incident | -| impact | `Optional` Can be only DOWN/DEGRADED | -| isMaintenance | `Optional` Boolean if incident is a maintenance | -| isIdentified | `Optional` Incident identified | -| isResolved | `Optional` Incident resolved | + +| Parameter | Description | +| ------------- | -------------------------------------------------------- | +| startDatetime | `Optional` When did the incident start in UTC second | +| endDatetime | `Optional` When did the incident end in UTC seconds | +| title | `Required` Title of the incident | +| body | `Optional` Body of the incident | +| tags | `Required` Array of String, Monitor Tags of the incident | +| impact | `Optional` Can be only DOWN/DEGRADED | +| isMaintenance | `Optional` Boolean if incident is a maintenance | +| isIdentified | `Optional` Incident identified | +| isResolved | `Optional` Incident resolved | ```shell curl --request PATCH \ @@ -787,6 +881,7 @@ curl --request PATCH \ ``` ### Response + ```json { "createdAt": 1703940450, @@ -817,6 +912,7 @@ curl --request GET \ ``` ### Response + ```json { "createdAt": 1703940450, @@ -849,7 +945,9 @@ curl --request POST \ "body": "comment 1" }' ``` + ### Response + ```json { "commentID": 1873376745, @@ -863,6 +961,7 @@ curl --request POST \ Use this API to fetch all the comments for an incident ### Request + ```shell curl --request GET \ --url http://your-kener.host/api/incident/{incidentNumber}/comment \ @@ -870,6 +969,7 @@ curl --request GET \ ``` ### Response + ```json [ { @@ -884,18 +984,21 @@ curl --request GET \ } ] ``` + ## Update Incident Status -Use this to API to update the status of an ongoing incident. + +Use this to API to update the status of an ongoing incident. ### Request Body -| Parameter | Description | -| ------------------ | ------------------------------------------------------------------------------------ | -| isIdentified | `Optional` Boolean, set it when incident has been identified | -| isResolved | `Optional` Boolean, set it when incident has been resolved | -| endDatetime | `Optional` When did the incident end in UTC seconds | +| Parameter | Description | +| ------------ | ------------------------------------------------------------ | +| isIdentified | `Optional` Boolean, set it when incident has been identified | +| isResolved | `Optional` Boolean, set it when incident has been resolved | +| endDatetime | `Optional` When did the incident end in UTC seconds | ### Request + ```shell curl --request POST \ --url http://your-kener.host/api/incident/{incidentNumber}/status \ @@ -907,7 +1010,9 @@ curl --request POST \ "endDatetime": 1702405920 }' ``` + ### Response + ```json { "createdAt": 1703940450, @@ -927,23 +1032,24 @@ curl --request POST \ ## Search Incidents -Use this to API to search incidents. +Use this to API to search incidents. ### Request Body -| Parameter | Description | -| ------------------ | ------------------------------------------------------------------------------------ | -| state | `Optional` open or closed. Default is open | -| tags | `Optional` Comma separated monitor tags, example: earth,google-seach | -| page | `Optional` Page number, starts with 1, defaults to 1 | -| per_page | `Optional` Page size, defaults to 10, max is 100 | -| created_after_utc | `Optional` timestamp in UTC seconds when the incident was created after. Example: 1702405920 | -| created_before_utc | `Optional` timestamp in UTC seconds when the incident was created before . Example: 1702405920 | -| title_like | `Optional` search incidents with title | +| Parameter | Description | +| ------------------ | ---------------------------------------------------------------------------------------------- | +| state | `Optional` open or closed. Default is open | +| tags | `Optional` Comma separated monitor tags, example: earth,google-seach | +| page | `Optional` Page number, starts with 1, defaults to 1 | +| per_page | `Optional` Page size, defaults to 10, max is 100 | +| created_after_utc | `Optional` timestamp in UTC seconds when the incident was created after. Example: 1702405920 | +| created_before_utc | `Optional` timestamp in UTC seconds when the incident was created before . Example: 1702405920 | +| title_like | `Optional` search incidents with title | ### Request Search incidents that are closed and title contains `hello incident` + ```shell curl --request POST \ --url http://your-kener.host/api/incident?state=closed&title_like=Hello%20Incident \ @@ -959,55 +1065,71 @@ curl --request POST \ ### Response ```json -[{ - "createdAt": 1703940450, - "closedAt": null, - "title": "Outage in Mumbai - Hello Incident", - "tags": ["google-search"], - "incidentNumber": 12, - "startDatetime": 1702405740, - "endDatetime": 1702405920, - "body": "Login cluster is down in mumbai region", - "impact": "DOWN", - "isMaintenance": false, - "isIdentified": true, - "isResolved": false -}] +[ + { + "createdAt": 1703940450, + "closedAt": null, + "title": "Outage in Mumbai - Hello Incident", + "tags": ["google-search"], + "incidentNumber": 12, + "startDatetime": 1702405740, + "endDatetime": 1702405920, + "body": "Login cluster is down in mumbai region", + "impact": "DOWN", + "isMaintenance": false, + "isIdentified": true, + "isResolved": false + } +] ``` + --- + # Badge + There are two types of badges Syntax + ```md http://[hostname]/badge/[tag]/status http://[hostname]/badge/[tag]/uptime ``` + ## Status + Shows the last health check was UP/DOWN/DEGRADED ![Earth Status](https://kener.ing/badge/earth/status) Example in HTML + ```html - + ``` + Example in MarkDown + ```md ![Status Badge](https://kener.ing/badge/[monitor.tag]/status) ``` + ## Uptime + Shows the 90 Day uptime by default. You can `sinceLast` as query param to get uptime since last x seconds. -![Earth Uptime](https://kener.ing/badge/earth/uptime) +![Earth Uptime](https://kener.ing/badge/earth/uptime) ### 90 Day Uptime Example in HTML + ```html - + ``` + Example in MarkDown + ```md ![Uptime Badge](https://kener.ing/badge/[monitor.tag]/uptime) ``` @@ -1015,10 +1137,13 @@ Example in MarkDown ### 15 Minute Uptime Example in HTML + ```html - + ``` + Example in MarkDown + ```md ![Uptime Badge](https://kener.ing/badge/[monitor.tag]/uptime?sinceLast=900) ``` @@ -1056,6 +1181,7 @@ You can set different colors for badges and style. You can change the style of the badge. Supported Styles are `plastic`, `flat`, `flat-square`, `for-the-badge` or `social`. Default is `flat` #### plastic + ![Earth Uptime](https://kener.ing/badge/earth/uptime?style=plastic) ```md @@ -1063,6 +1189,7 @@ You can change the style of the badge. Supported Styles are `plastic`, `flat`, ` ``` #### flat + ![Earth Uptime](https://kener.ing/badge/earth/uptime?style=flat) ```md @@ -1070,6 +1197,7 @@ You can change the style of the badge. Supported Styles are `plastic`, `flat`, ` ``` #### flat-square + ![Earth Uptime](https://kener.ing/badge/earth/uptime?style=flat-square) ```md @@ -1077,14 +1205,15 @@ You can change the style of the badge. Supported Styles are `plastic`, `flat`, ` ``` #### for-the-badge + ![Earth Uptime](https://kener.ing/badge/earth/uptime?style=for-the-badge) ```md ![Earth Uptime](https://kener.ing/badge/earth/uptime?style=for-the-badge) ``` - #### social + ![Earth Uptime](https://kener.ing/badge/earth/uptime?style=social) ```md diff --git a/locales/en.json b/locales/en.json index 10920050..1da36e9f 100644 --- a/locales/en.json +++ b/locales/en.json @@ -1,57 +1,57 @@ { - "root": { - "ongoing_incidents": "Ongoing Incidents", - "availability_per_component": "Availability per Component", - "other_monitors": "Other Monitors", - "no_monitors": "No monitors found", - "read_doc_monitor": "Read the documentation to add your first monitor", - "here": "here", - "category": "Category", - "incident": "Incident", - "incidents": "Incidents", - "no_recent_incident": "No recent incident", - "recent_incidents": "Recent Incidents", - "active_incidents": "Active Incidents", - "no_active_incident": "No Active Incident", - "last_x_hours": "Last %hours hours" - }, - "statuses": { - "UP": "UP", - "DOWN": "DOWN", - "DEGRADED": "DEGRADED" - }, - "incident": { - "identified": "Identified", - "resolved": "Resolved", - "maintenance": "Maintenance" - }, - "monitor": { - "share": "Share", - "badge": "Badge", - "embed": "Embed", - "mode": "Mode", - "status": "Status", - "copied": "Copied", - "uptime": "Uptime", - "theme": "Theme", - "theme_light": "Light", - "theme_dark": "Dark", - "today": "Today", - "90_day": "90 Day", - "share_desc": "Share this monitor using a link with others", - "badge_desc": "Get SVG badge for this monitor", - "embed_desc": "Embed this monitor using - + - + gtag("config", "G-Q3MLRXCBFT"); + + diff --git a/src/app.postcss b/src/app.postcss index a14eea96..371959f3 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -3,80 +3,80 @@ @tailwind utilities; @layer base { - :root { - --background: 0 0% 100%; + :root { + --background: 0 0% 100%; --background-kener: hsl(0, 0%, 100%); - --background-kener-rgba: rgba(255,255,255,.5); - --foreground: 240 10% 4%; + --background-kener-rgba: rgba(255, 255, 255, 0.5); + --foreground: 240 10% 4%; - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; - --popover: 0 0% 100%; - --popover-foreground: 240 10% 4%; + --popover: 0 0% 100%; + --popover-foreground: 240 10% 4%; - --card: 0 0% 100%; - --card-foreground: 240 10% 4%; + --card: 0 0% 100%; + --card-foreground: 240 10% 4%; - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; - --primary: 222.2 47.4% 11.2%; - --primary-foreground: 210 40% 98%; + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; - --destructive: 0 72.2% 50.6%; - --destructive-foreground: 210 40% 98%; + --destructive: 0 72.2% 50.6%; + --destructive-foreground: 210 40% 98%; - --ring: 240 10% 4%; + --ring: 240 10% 4%; - --radius: 0.5rem; - } + --radius: 0.5rem; + } - .dark { - --background: 240 10% 4%; - --background-kener: hsl(240, 10%, 4%); - --background-kener-rgba: rgba(9, 9, 11, .35); - --foreground: 210 40% 98%; + .dark { + --background: 240 10% 4%; + --background-kener: hsl(240, 10%, 4%); + --background-kener-rgba: rgba(9, 9, 11, 0.35); + --foreground: 210 40% 98%; - --muted: 240 4% 16%; - --muted-foreground: 215 20.2% 65.1%; + --muted: 240 4% 16%; + --muted-foreground: 215 20.2% 65.1%; - --popover: 240 10% 4%; - --popover-foreground: 210 40% 98%; + --popover: 240 10% 4%; + --popover-foreground: 210 40% 98%; - --card: 240 10% 4%; - --card-foreground: 210 40% 98%; + --card: 240 10% 4%; + --card-foreground: 210 40% 98%; - --border: 240 4% 16%; - --input: 240 4% 16%; + --border: 240 4% 16%; + --input: 240 4% 16%; - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 11.2%; + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; - --secondary: 240 4% 16%; - --secondary-foreground: 210 40% 98%; + --secondary: 240 4% 16%; + --secondary-foreground: 210 40% 98%; - --accent: 240 4% 16%; - --accent-foreground: 210 40% 98%; + --accent: 240 4% 16%; + --accent-foreground: 210 40% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 210 40% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; - --ring: hsl(212.7, 26.8%, 83.9); - } + --ring: hsl(212.7, 26.8%, 83.9); + } } @layer base { - * { - @apply border-border; - } - body { - @apply bg-background text-foreground; - } + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } } diff --git a/src/kener.css b/src/kener.css index 8b79fd36..984e3ebd 100644 --- a/src/kener.css +++ b/src/kener.css @@ -1,86 +1,81 @@ /*one is the class for dotted background*/ .one { - position: absolute; - top: 0px; - left: 0; - width: 100%; - z-index: 0; - background-repeat: no-repeat; - background-size: 100%; - height: 100svh; - background: linear-gradient(177deg, rgba(255, 137, 131, 0.5) 0%, rgba(35, 136, 224, 0.05) 60%); - clip-path: polygon(0 0, 100% 0, 100% 54%, 0% 100%); + position: absolute; + top: 0px; + left: 0; + width: 100%; + z-index: 0; + background-repeat: no-repeat; + background-size: 100%; + height: 100svh; + background: linear-gradient(177deg, rgba(255, 137, 131, 0.5) 0%, rgba(35, 136, 224, 0.05) 60%); + clip-path: polygon(0 0, 100% 0, 100% 54%, 0% 100%); } .one::after { - content: ""; - position: absolute; - background-image: radial-gradient(rgba(0, 0, 0, 0) 1.5px, var(--background-kener) 1px); - background-size: 14px 14px; - width: 100%; - height: 100vh; - top: 0; - transform: blur(3px); - left: 0; + content: ""; + position: absolute; + background-image: radial-gradient(rgba(0, 0, 0, 0) 1.5px, var(--background-kener) 1px); + background-size: 14px 14px; + width: 100%; + height: 100vh; + top: 0; + transform: blur(3px); + left: 0; } /*Needed to overlay content on top of dotted bg*/ section { - position: relative; - z-index: 1; + position: relative; + z-index: 1; } /*Needed overlay content on top of dotted bg*/ .blurry-bg { - background-color: var(--background-kener-rgba); - box-shadow: 0 0 64px 64px var(--background-kener-rgba); + background-color: var(--background-kener-rgba); + box-shadow: 0 0 64px 64px var(--background-kener-rgba); } - - /*Colors for something UP*/ .bg-api-up { - background-color: #00dfa2; + background-color: #00dfa2; } .text-api-up { - color: #0aca97; + color: #0aca97; } /*Colors for something DOWN*/ .bg-api-down { - background-color: #ff0060; + background-color: #ff0060; } .text-api-down { - color: #ff0060; + color: #ff0060; } /*Colors for something Not there*/ .bg-api-nodata { - background-color:#f1f5f8; + background-color: #f1f5f8; } .text-api-nodata { - color: #b8bcbe; + color: #b8bcbe; } .dark .bg-api-nodata { - background-color: rgba(100, 100, 100, .4); + background-color: rgba(100, 100, 100, 0.4); } /*Colors for something degraded*/ .bg-api-degraded { - background-color: #ffb84c; + background-color: #ffb84c; } .text-api-degraded { - color: #ffb84c; + color: #ffb84c; } - - /*Needed to show markdown properly*/ -.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before{ +.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before { content: ""; } -.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after{ +.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after { content: ""; } - /*Needed to show monitor stacked properly*/ .monitors-card .monitor { padding: 1.3em 1em; @@ -92,15 +87,15 @@ section { } /*Tag Color*/ -.tag-maintenance{ - background-color: #A076F9; +.tag-maintenance { + background-color: #a076f9; color: #09090b; } -.tag-resolved{ - background-color: #2CD3E1; +.tag-resolved { + background-color: #2cd3e1; color: #09090b; } -.tag-indetified{ - background-color: #FEFFAC; +.tag-indetified { + background-color: #feffac; color: #09090b; -} \ No newline at end of file +} diff --git a/src/lib/components/incident.svelte b/src/lib/components/incident.svelte index e062ec60..229f0b8b 100644 --- a/src/lib/components/incident.svelte +++ b/src/lib/components/incident.svelte @@ -1,166 +1,208 @@ -

-
- - - +
+
+ + + {#if incidentPriority != "" && incidentDuration > 0} -

- {incidentPriority} for {incidentDuration} Minute{incidentDuration > 1 ? "s" : ""} -

- - {/if} - {#if variant.includes("monitor")} -
-
- {#if monitor.image} - - {/if} {monitor.name} - -
-
- {/if} {#if variant.includes("title")} {incident.title} {/if} - {#if incidentState == 'open'} - - {/if} +

+ + {incidentPriority} for {incidentDuration} Minute{incidentDuration > + 1 + ? "s" + : ""} + +

+ {/if} + {#if variant.includes("monitor")} +
+
+ {#if monitor.image} + + {/if} + {monitor.name} +
+
+ {/if} + {#if variant.includes("title")} + {incident.title} + {/if} + {#if incidentState == "open"} + + {/if} {#if variant.includes("body") || variant.includes("comments")} -
- -
- {/if} - - - {moment(incidentCreatedAt * 1000).format("MMMM Do YYYY, h:mm:ss a")} - +
+ +
+ {/if} + + + {moment(incidentCreatedAt * 1000).format("MMMM Do YYYY, h:mm:ss a")} -

- {#if incident.labels.includes("identified")} - - {l(lang,'incident.identified')} - - {/if} {#if incident.labels.includes("resolved")} - - {l(lang,'incident.resolved')} - - {/if} {#if incident.labels.includes("maintenance")} - - {l(lang,'incident.maintenance')} - - {/if} -

- - - {#if (variant.includes("body") || variant.includes("comments")) && state == "open"} - - {#if variant.includes("body")} -
- {@html incident.body} -
- {/if} - {#if variant.includes("comments") && incident.comments?.length > 0} -
-
    - {#each incident.comments as comment} -
  1. -
    - -
    - {@html comment.body} -
    -
    2. - {/each} -
-
- {:else if commentsLoading} - - {/if} - - {/if} - -
+

+ {#if incident.labels.includes("identified")} + + {l(lang, "incident.identified")} + + {/if} + {#if incident.labels.includes("resolved")} + + {l(lang, "incident.resolved")} + + {/if} + {#if incident.labels.includes("maintenance")} + + {l(lang, "incident.maintenance")} + + {/if} +

+ + + {#if (variant.includes("body") || variant.includes("comments")) && state == "open"} + + {#if variant.includes("body")} +
+ {@html incident.body} +
+ {/if} + {#if variant.includes("comments") && incident.comments?.length > 0} +
+
    + {#each incident.comments as comment} +
  1. +
    + +
    + {@html comment.body} +
    +
    2. + {/each} +
+
+ {:else if commentsLoading} + + {/if} + + {/if} + +
+ diff --git a/src/lib/components/monitor.svelte b/src/lib/components/monitor.svelte index 3092720e..54dc7a79 100644 --- a/src/lib/components/monitor.svelte +++ b/src/lib/components/monitor.svelte @@ -1,569 +1,505 @@ -
- {#if monitor.embed === undefined} -
-
-
- {#if monitor.image} - {monitor.name} - {/if} - {monitor.name} -
- {#if monitor.description} - - - - - - - -

- {monitor.name} -

- - {@html monitor.description} - - - - {/if} - - - - - - - -

- {l(lang, "monitor.share")} -

-

- {l(lang, "monitor.share_desc")} -

- -

- {l(lang, "monitor.embed")} -

-

- {l(lang, "monitor.embed_desc")} -

-
-
-

- {l(lang, "monitor.theme")} -

- -
- - -
-
- - -
- - -
-
-

- {l(lang, "monitor.mode")} -

- -
- - -
-
- - -
- - -
-
- -

- {l(lang, "monitor.badge")} -

-

- {l(lang, "monitor.badge_desc")} -

- - - - -
-
- -
- {/if} -
-
-
-
- - -
-
- {#if _90Day[todayDD]} -
- {summaryTime(lang, _90Day[todayDD].message)} -
- {/if} -
-
- {#if view == "90day"} -
-
- {#each Object.entries(_90Day) as [ts, bar]} -
-
-
-
-
- ● {n( - lang, - new Date( - bar.timestamp * 1000, - ).toLocaleDateString(), - )} - {summaryTime(lang, bar.message)} -
-
- {/each} -
-
- {:else} -
-
- {#if Object.keys(_0Day).length == 0} - - {/if} - {#each Object.entries(_0Day) as [ts, bar]} -
-
-
-

- - ● - - {ampm( - lang, - n( - lang, - new Date( - bar.timestamp * 1000, - ).toLocaleTimeString(), - ), - )} -

- {#if bar.status != "NO_DATA"} -

- {l(lang, "statuses." + bar.status)} -

- {:else} -

-

- {/if} -
-
- {/each} -
-
- {/if} -
-
+
+ {#if monitor.embed === undefined} +
+
+
+ {#if monitor.image} + {monitor.name} + {/if} + {monitor.name} +
+ {#if monitor.description} + + + + + + + +

+ {monitor.name} +

+ + {@html monitor.description} + + + + {/if} + + + + + + + +

+ {l(lang, "monitor.share")} +

+

+ {l(lang, "monitor.share_desc")} +

+ +

+ {l(lang, "monitor.embed")} +

+

+ {l(lang, "monitor.embed_desc")} +

+
+
+

+ {l(lang, "monitor.theme")} +

+ +
+ + +
+
+ + +
+ + +
+
+

+ {l(lang, "monitor.mode")} +

+ +
+ + +
+
+ + +
+ + +
+
+ +

+ {l(lang, "monitor.badge")} +

+

+ {l(lang, "monitor.badge_desc")} +

+ + + + +
+
+ +
+ {/if} +
+
+
+
+ + +
+
+ {#if _90Day[todayDD]} +
+ {summaryTime(lang, _90Day[todayDD].message)} +
+ {/if} +
+
+ {#if view == "90day"} +
+
+ {#each Object.entries(_90Day) as [ts, bar]} +
+
+
+
+
+ ● {n(lang, new Date(bar.timestamp * 1000).toLocaleDateString())} + {summaryTime(lang, bar.message)} +
+
+ {/each} +
+
+ {:else} +
+
+ {#if Object.keys(_0Day).length == 0} + + {/if} + {#each Object.entries(_0Day) as [ts, bar]} +
+
+
+

+ ● + {ampm( + lang, + n( + lang, + new Date(bar.timestamp * 1000).toLocaleTimeString() + ) + )} +

+ {#if bar.status != "NO_DATA"} +

+ {l(lang, "statuses." + bar.status)} +

+ {:else} +

-

+ {/if} +
+
+ {/each} +
+
+ {/if} +
+
diff --git a/src/lib/components/nav.svelte b/src/lib/components/nav.svelte index 6365f0f6..1ae47a06 100644 --- a/src/lib/components/nav.svelte +++ b/src/lib/components/nav.svelte @@ -1,87 +1,78 @@
-
-
- - {#if data.site.logo} - {data.site.title} - {/if} - {#if data.site.title} - - {/if} - - {#if data.site.nav} - - {/if} -
-
+
+
+ + {#if data.site.logo} + {data.site.title} + {/if} + {#if data.site.title} + + {/if} + + {#if data.site.nav} + + {/if} +
+
diff --git a/src/lib/components/ui/accordion/accordion-item.svelte b/src/lib/components/ui/accordion/accordion-item.svelte index d1c54298..9d837d71 100644 --- a/src/lib/components/ui/accordion/accordion-item.svelte +++ b/src/lib/components/ui/accordion/accordion-item.svelte @@ -9,10 +9,6 @@ export { className as class }; - + diff --git a/src/lib/components/ui/alert/alert.svelte b/src/lib/components/ui/alert/alert.svelte index ef6b407c..8c6790fd 100644 --- a/src/lib/components/ui/alert/alert.svelte +++ b/src/lib/components/ui/alert/alert.svelte @@ -12,10 +12,6 @@ export { className as class }; -